:root {
  --bg: #1a1b26;
  --bg-soft: #1f2233;
  --fg: #c0caf5;
  --fg-dim: #565f89;
  --accent: #7aa2f7;
  --prompt: #9ece6a;
  --value: #7dcfff;
  --error: #f7768e;
  --print: #c0caf5;
  --border: #2a2e42;
  /* 読ませる補助テキスト用の控えめな前景色。--fg-dim は本文サイズのテキスト
     にはコントラスト不足 (WCAG AA 4.5:1 未満) なので、注記にはこちらを使う。 */
  --fg-muted: #8a91b4;
  /* syntax highlight パレット (highlight.HTMLTheme のクラスに対応)。
     terminal の DefaultTheme と同系統の配色 (tokyo-night 寄り)。 */
  --hl-comment: #565f89;
  --hl-string: #9ece6a;
  --hl-number: #ff9e64;
  --hl-bool: #bb9af7;
  --hl-at: #7dcfff;
  --hl-slot: #7aa2f7;
  --hl-inner: #7aa2f7;
  --hl-builtin: #2ac3de;
  --hl-type: #2ac3de;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

/* <mie-editor> は .inputrow (flex) の直接の子。中の .input-wrap ではなく
   この要素自身を伸縮させる必要がある (でなければ内容量ぶんの幅にしか
   ならない)。 */
mie-editor {
  display: block;
  flex: 1;
  min-width: 0;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
}

body {
  display: flex;
  flex-direction: column;
}

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 16px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}

.title {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.title a {
  color: inherit;
  text-decoration: none;
}
.title .sub {
  color: var(--fg-dim);
  font-weight: 400;
  margin-left: 6px;
}

.actions { display: flex; flex-wrap: wrap; gap: 8px; }

.actions select,
.actions button {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
}
.actions button:hover,
.actions select:hover { border-color: var(--accent); }

.console {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
}

.transcript { white-space: pre-wrap; word-break: break-word; }

.entry { margin-bottom: 2px; }
.entry .ps { color: var(--prompt); user-select: none; }
.line-input { color: var(--fg); }
.line-print { color: var(--print); }
.line-value { color: var(--value); }
.line-error { color: var(--error); }
.line-note  { color: var(--fg-dim); }

/* syntax highlight トークン色 (highlight.HTMLTheme の CSS クラス)。
   transcript の echo した入力・入力欄オーバーレイの双方で使う。
   KindLocal は無着色 (span が付かず親の色を継ぐ)。 */
.hl-comment { color: var(--hl-comment); font-style: italic; }
.hl-string  { color: var(--hl-string); }
.hl-number  { color: var(--hl-number); }
.hl-bool    { color: var(--hl-bool); }
.hl-at      { color: var(--hl-at); }
.hl-slot    { color: var(--hl-slot); }
.hl-inner   { color: var(--hl-inner); }
.hl-builtin { color: var(--hl-builtin); }
.hl-type    { color: var(--hl-type); font-weight: 700; }

.inputrow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
}

.prompt {
  color: var(--prompt);
  user-select: none;
  padding-top: 1px;
  white-space: pre;
}

/* 入力欄はオーバーレイ着色のため <pre>(着色) + <textarea>(透明文字+キャレット) を
   重ねる。両者は同一のフォント/行高/折返し規則を持ち、ピクセル単位で一致させる。 */
.input-wrap {
  position: relative;
}

/* 共通メトリクス: textarea と highlight overlay で必ず一致させる。 */
.input,
.input-highlight {
  margin: 0;
  padding: 0;
  border: none;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

.input {
  display: block;
  width: 100%;
  resize: none;
  overflow: hidden;
  outline: none;
  background: transparent;
  /* 文字は透明にして overlay の着色を見せ、キャレットだけ前景色で残す。 */
  color: transparent;
  caret-color: var(--fg);
  position: relative;
  z-index: 1;
}
/* placeholder は overlay が空のときだけ見える。透明文字に隠れないよう明示。 */
.input::placeholder { color: var(--fg-dim); }

/* 着色オーバーレイ。textarea の真下に敷き、入力と同じ折返しで描く。 */
.input-highlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  color: var(--fg);
  overflow: hidden;
}

/* --- 行番号 (<mie-editor line-numbers>) --- */
/* オーバーレイを論理行ごとの block span (.hl-line) で組み (editor.js)、番号は
   CSS カウンタで振る。textarea 側は同じ幅の padding-left で文字開始位置を揃える
   (折返しの継続行には番号が付かず、開始位置だけ揃う)。番号はオーバーレイの
   内容なので本文と一緒にスクロールする。--ln-digits (行数の桁数) は editor.js が
   入力のたび設定する。 */
mie-editor[line-numbers] { --ln-gutter: calc(var(--ln-digits, 2) * 1ch + 16px); }
mie-editor[line-numbers] .input { padding-left: var(--ln-gutter); }
mie-editor[line-numbers] .input-highlight { counter-reset: mie-line; }
.hl-line {
  display: block;
  position: relative;
  padding-left: var(--ln-gutter);
  /* 空行にも 1 行ぶんの高さを与える (でなければ以降の行番号がズレる)。
     1 行目は lh 未対応ブラウザ向けの近似 (line-height: 1.55 と同値)。 */
  min-height: 1.55em;
  min-height: 1lh;
  counter-increment: mie-line;
}
.hl-line::before {
  content: counter(mie-line);
  position: absolute;
  left: 0;
  width: calc(var(--ln-gutter) - 8px);
  text-align: right;
  color: var(--fg-dim);
}

.hint {
  padding: 8px 16px;
  font-size: 12px;
  color: var(--fg-dim);
  border-top: 1px solid var(--border);
}
.hint code {
  color: var(--fg);
  background: var(--bg-soft);
  padding: 1px 4px;
  border-radius: 4px;
}

/* --- モバイル記号バー --- */
/* 既定 (PC / pointer:fine) は非表示。レイアウトにも影響させない。 */
.symbolbar { display: none; }

@media (pointer: coarse) {
  /* 記号は右端に縦 2 列グリッドで固定する。横スクロールしないので位置が
     安定する (以前は横 1 列を横スクロールしていて記号位置が動いていた)。
     縦位置は visualViewport の可視領域中央へ JS (positionSymbolbar) が置く。
     top: のフォールバックは visualViewport 非対応ブラウザ用。 */
  .symbolbar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    position: fixed;
    right: 6px;
    top: 64px;
    z-index: 10;
    /* 万一 (小さい画面で) 入り切らないときだけ縦スクロール。通常は収まる。 */
    max-height: calc(100% - 16px);
    overflow-y: auto;
    padding: 6px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .symbolbar button {
    width: 36px;
    height: 34px;
    font-family: var(--mono);
    font-size: 16px;
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    /* タップとスクロールを判別させる (誤入力防止)。 */
    touch-action: manipulation;
  }
  .symbolbar button:active {
    border-color: var(--accent);
    background: var(--bg-soft);
  }
  /* 履歴の端では矢印を無効化して薄く見せる。 */
  .symbolbar button:disabled {
    opacity: 0.3;
    cursor: default;
  }
  /* フォーカス時の自動ズーム抑制: 入力欄を 16px に (overlay と一緒に変える)。 */
  .input,
  .input-highlight { font-size: 16px; }
  /* 右の記号グリッドに被らないよう console 右側に余白を確保。 */
  .console { padding-right: 96px; }
  /* Playground も同様に右側の記号グリッドに被らないよう余白を確保。 */
  .play { padding-right: 96px; }
}

/* --- ナビリンク (各ページのヘッダ) --- */
.navlink {
  color: inherit;
  text-decoration: none;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 6px;
  opacity: 0.85;
  font-size: 0.9em;
}
.navlink:hover { opacity: 1; }

/* --- ランディング (index.html) --- */
.landing { padding: 24px; max-width: 720px; margin: 0 auto; }
.landing-lead { opacity: 0.85; }
.landing-links { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 16px; }
@media (min-width: 640px) { .landing-links { grid-template-columns: 1fr 1fr; } }
.landing-card {
  display: block; padding: 16px; border: 1px solid var(--border); border-radius: 10px;
  text-decoration: none; color: inherit; background: var(--bg-soft);
}
.landing-card:hover { border-color: var(--accent); }
.landing-card-title { display: block; font-weight: 600; font-size: 1.1em; }
.landing-card-desc { display: block; opacity: 0.8; margin-top: 6px; font-size: 0.9em; }

/* --- リファレンス (reference/、web/refgen が生成) --- */
/* REPL 等のアプリ型ページと違い、リファレンスは文書全体を通常スクロールさせる
   (スクロールを入れ子ペインに閉じ込めると、フォーカス可能な子を持つスクローラは
   キーボードだけで読み進められない)。body の height:100% を解除し、広い画面では
   サイドバーだけ sticky で画面に留める。 */
body.ref { height: auto; min-height: 100%; }
/* スキップリンク: 通常は画面外、フォーカス時のみ左上に現れる。 */
.ref-skip {
  position: absolute;
  left: -9999px;
  z-index: 20;
  padding: 6px 10px;
  background: var(--bg-soft);
  color: var(--fg);
  border: 1px solid var(--accent);
  border-radius: 6px;
}
.ref-skip:focus { left: 8px; top: 8px; }
/* 既定 (狭い画面) はメニューを上に折返し表示する。 */
.ref-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  padding: 10px 12px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.ref-nav a {
  color: var(--fg);
  text-decoration: none;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 13px;
}
.ref-nav a:hover { background: var(--bg); color: var(--accent); }
.ref-nav a.current { background: var(--bg); color: var(--accent); }
.ref-nav-group { padding: 3px 8px 0 8px; color: var(--fg-muted); font-size: 12px; }
/* 現在ページの H2 一覧 (サイドバー第 2 階層、refgen の writeNavSub が生成)。
   狭い画面ではサイドバーが上部の折返しメニューになり量が多すぎるため、
   広い画面でのみ表示する。 */
.ref-nav-sub { display: none; }
.ref-main { padding: 16px; }
@media (min-width: 800px) {
  .ref-layout { display: flex; }
  .ref-nav {
    flex: none;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 200px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 14px 12px;
    border-bottom: none;
    border-right: 1px solid var(--border);
  }
  .ref-nav-group {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  .ref-nav-sub {
    display: block;
    margin: 2px 0 4px;
    padding-left: 14px;
    list-style: none;
  }
  .ref-nav-sub a {
    display: block;
    padding: 1px 8px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--fg-muted);
    text-decoration: none;
  }
  .ref-nav-sub a:hover { background: var(--bg); color: var(--accent); }
  .ref-main { flex: 1; min-width: 0; padding: 18px 22px 40px; }
}
.ref-doc { max-width: 860px; }
.ref-doc h1 { font-size: 1.35em; margin: 0 0 12px; color: var(--accent); }
.ref-doc h2 {
  font-size: 1.15em;
  margin: 26px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.ref-doc h3 { font-size: 1em; margin: 20px 0 6px; }
.ref-doc p { margin: 8px 0; }
.ref-doc blockquote {
  margin: 0 0 16px;
  padding: 4px 12px;
  border-left: 3px solid var(--border);
  color: var(--fg-muted);
  font-size: 0.9em;
}
.ref-doc code {
  background: var(--bg-soft);
  padding: 1px 4px;
  border-radius: 4px;
}
.ref-doc pre {
  margin: 8px 0;
  padding: 10px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
}
.ref-doc pre code { background: none; padding: 0; }
.ref-doc ul, .ref-doc ol { margin: 8px 0; padding-left: 24px; }
.ref-doc li { margin: 3px 0; }
/* 仕様ページの表 (refgen が spec の Markdown から生成)。狭い画面では横スクロール。 */
.ref-doc table {
  border-collapse: collapse;
  margin: 12px 0;
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
.ref-doc th, .ref-doc td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
.ref-doc th { background: var(--bg-soft); font-weight: 600; }
.ref-doc a { color: var(--accent); }
.ref-prompt { color: var(--prompt); user-select: none; }
/* コード内の識別子リンク (refgen が定義エントリへ張る)。トークン色 (.hl-*) を
   そのまま保ち、点線の下線だけでリンクと分かるようにする (hover で実線)。 */
.ref-doc pre a {
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-color: var(--fg-dim);
  text-underline-offset: 3px;
}
.ref-doc pre a:hover { text-decoration-style: solid; }
/* コード例のコピーボタン: 例ブロック (>>> 入力を含む) の右上に重ね、入力式だけを
   クリップボードへ書き込む (ref-copy.js が JS 有効時のみ hidden を外して表示)。 */
.ref-example { position: relative; }
.ref-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
}
.ref-copy:hover { border-color: var(--accent); color: var(--fg); }
.ref-copy.copied { color: var(--prompt); border-color: var(--prompt); }
/* ポインタ操作 (hover 可) では控えめにし、例へホバー / フォーカス時に前面化する。
   タッチ端末 (hover 不可) では常時表示のままにする。 */
@media (hover: hover) {
  .ref-copy { opacity: 0; transition: opacity 0.12s; }
  .ref-example:hover .ref-copy,
  .ref-copy:focus-visible,
  .ref-copy.copied { opacity: 1; }
}
/* ページ内目次: 本文冒頭に H2/H3 のツリーを出す (refgen の writeTOC が生成)。
   フラットな項目は columns で複数列に詰め、型メソッド群は details で折りたたむ
   (JS 不要)。列数は幅に応じて自動で減る。 */
.ref-toc {
  margin: 14px 0 22px;
  padding: 10px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}
.ref-toc ul { margin: 0; padding: 0; list-style: none; }
.ref-toc li { margin: 1px 0; break-inside: avoid; }
.ref-toc a { text-decoration: none; }
.ref-toc a:hover { text-decoration: underline; }
.ref-toc-flat { columns: 3 10em; column-gap: 18px; }
.ref-toc-group { margin-top: 6px; }
.ref-toc-group summary { cursor: pointer; }
.ref-toc-group ul { padding: 2px 0 4px 18px; columns: 3 10em; column-gap: 18px; }
.ref-toc-count { color: var(--fg-muted); font-size: 12px; }

/* --- Playground (play.html) --- */
.play {
  display: grid;
  gap: 8px;
  padding: 8px;
  height: calc(100vh - 56px); /* ヘッダ分を除く。実値は .bar の高さに合わせる */
  grid-template-rows: 1fr 1fr;      /* 狭い画面: 上=エディタ 下=出力 */
  box-sizing: border-box;
}
@media (min-width: 800px) {
  .play { grid-template-rows: none; grid-template-columns: 1fr 1fr; } /* 広い画面: 左右 */
}
.play mie-editor { min-height: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; }
/* 高さ連鎖: ペイン (grid) → mie-editor → .input-wrap → textarea。内容が可視高を
   超えたら textarea 自身が縦スクロールし、オーバーレイは editor.js (syncScroll) が
   追従させる。scrollbar-gutter を両者で揃えるのは、スクロールバー出現時に
   textarea だけ内容幅が縮んで折返し位置がオーバーレイとズレるのを防ぐため。 */
.play mie-editor .input-wrap { height: 100%; }
.play mie-editor .input, .play mie-editor .input-highlight {
  height: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
}
.output {
  margin: 0; padding: 8px; overflow: auto; min-height: 0;
  border: 1px solid var(--border); border-radius: 8px; white-space: pre-wrap;
  background: var(--bg-soft); color: var(--print);
}
.output-error { color: var(--error); }

/* --- リファレンス検索 (コマンドパレット、ref-search.js) --- */
.ref-search[hidden] { display: none; }
.ref-search {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 10vh;
}
.ref-search-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.ref-search-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(560px, 92vw);
  max-height: 70vh;
  background: var(--bg-soft);
  border: 1px solid var(--accent);
  border-radius: 10px;
  overflow: hidden;
}
.ref-search-input {
  font-family: var(--mono);
  font-size: 16px; /* iOS の自動ズーム抑止 */
  padding: 12px 14px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  outline: none;
}
.ref-search-input::placeholder { color: var(--fg-dim); }
.ref-search-list { list-style: none; margin: 0; padding: 4px; overflow-y: auto; }
.ref-search-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.ref-search-item[aria-selected="true"],
.ref-search-item:hover { background: var(--bg); }
.ref-search-name { color: var(--fg); }
.ref-search-name mark { background: transparent; color: var(--accent); font-weight: 700; }
.ref-search-kind { color: var(--fg-muted); font-size: 12px; white-space: nowrap; }
.ref-search-empty { padding: 12px 14px; color: var(--fg-dim); }
.ref-search-empty[hidden] { display: none; }
.ref-search-more { padding: 6px 10px; color: var(--fg-dim); font-size: 12px; }

/* 性能推移ページ (bench.html) */
.bench-main { max-width: 1000px; margin: 0 auto; padding: 1rem; }
.bench-lead { color: var(--fg-muted); margin: 0 0 1rem; }
.bench-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.bench-panel { border: 1px solid var(--border, #ddd); border-radius: 6px; padding: .5rem; }
.bench-panel-title { font: 600 .9rem/1.4 monospace; margin-bottom: .25rem; }
.bench-svg { width: 100%; height: auto; display: block; }
.bench-line { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.bench-dot { fill: var(--accent); }
.bench-grid-line { stroke: var(--border); stroke-width: 1; opacity: .5; }
.bench-axis { stroke: var(--border); stroke-width: 1; }
.bench-axis-label { fill: var(--fg-muted); font: 9px var(--mono, monospace); }
.bench-axis-y { text-anchor: end; }
.bench-fail-line { stroke: var(--error); stroke-width: 1; stroke-dasharray: 4 3; opacity: .8; }
.bench-fail-label { fill: var(--error); font: 9px var(--mono, monospace); text-anchor: end; }
.bench-dot-fail { fill: var(--error); }
.bench-rebaseline-line { stroke: var(--fg-muted); stroke-width: 1; stroke-dasharray: 2 2; opacity: .55; }

/* --- TUI Playground (#play 内で #output と併置される #term/#keybar) --- */
/* #play のグリッド枠内で #output と同じ領域を占める (寸法は .output に揃え、
   背景だけ端末らしい濃色にする)。xterm.js 自身がスクロール/描画を管理するため
   overflow は hidden にする (.output の auto とは異なる)。 */
.term {
  margin: 0; padding: 8px; min-height: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 8px;
  background: #0b0f14;
}
.keybar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
}
/* hidden 属性を最優先する。JS (play.js) が TUI 実行中だけ hidden を外すので、
   非実行中は pointer/幅にかかわらず常に非表示にする。 */
.keybar[hidden] { display: none !important; }
.keybar .keybtn {
  font: inherit;
  padding: 8px 10px;
  min-width: 40px;
}
.keybar .keymod.armed { outline: 2px solid var(--hl-builtin, #6cf); }
@media (pointer: coarse) {
  /* 狭幅・タッチでは #play を常に 1 カラム縦積みにする (min-width:800px 用の
     2 カラム化を打ち消す。タブレット横向きなど幅は 800px を超えてもタッチな
     場合があるため)。.play の高さも calc(100vh - 56px) 固定から実コンテンツ高
     基準の auto へ変え、各ペインに最低限の高さを与えることで、端末/キーバーが
     エディタに重なってボタンのクリックを奪う事態を避ける。auto 化で必要なら
     ページ全体がスクロールする (html/body に overflow:hidden は無い)。 */
  .play {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
    min-height: calc(100vh - 56px);
  }
  .play mie-editor,
  .output,
  .term { min-height: 240px; }
}

/* Playground: localStorage 復元コードが検査エラーのときの非破壊警告バナー */
.restore-warning {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0.5rem 0.75rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid #b58900;
  border-radius: 6px;
  background: rgba(181, 137, 0, 0.12);
  font-size: 0.85rem;
  line-height: 1.4;
}
.restore-warning[hidden] { display: none; }
.restore-warning button {
  margin-left: auto;
  flex: none;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}