/*
 * ZUBASH ステージエディタの見た目。**CSS はこのファイルだけ。**
 *
 * ============================================================================
 * 値の出どころ
 * ============================================================================
 *
 * house-planner（`~/Projects/webcad-planner`）の**実効値**を写したもの。
 * あちらは同じセレクタを 4 回上書きし直す「地層」になっていて、`:root` も
 * 4 か所にある。ここに持ち込むのは**最後に効いている値だけ**で、
 * 旧テーマの地層も `!important` の重ねも持ち込まない。
 * 読み取りの全文は docs/superpowers/notes/2026-09-13-house-planner-ui-digest.md。
 *
 * ============================================================================
 * 守ること
 * ============================================================================
 *
 *   - **横長の操作要素はカプセル**（--r-pill）。角丸長方形は縦に伸びる面だけ
 *   - **境界線は原則引かない。**面と影で層を作る。区切りが要るところだけ 1px
 *   - **ホバーは副（スカイブルー）・選択中は主（オレンジ）。**色系統を分ける
 *   - **数値を出すところは font-variant-numeric: tabular-nums。**
 *     座標が 1 桁増えるたびに桁がずれると、並べて読むときに目が滑る
 *   - **フォントに外部 CDN を使わない**（Global Constraints）。端末に入っている
 *     ものだけを並べる。Google Fonts の Noto Sans JP は読み込まない
 */

:root {
  /* 地・面 */
  --bg: #f7f2eb;
  --surface: #ffffff;
  --surface-2: #f5eee8;
  --canvas-bg: #e8ecf1;

  /* 文字 */
  --text: #302f2b;
  --text-soft: #5f5650;
  --muted: #686b68;

  /* アクセント（主） */
  --primary: #e9472b;
  --primary-dark: #b8321d;

  /* アクセント（副＝アイコン・ホバー・スナップ） */
  --secondary: #00a8ef;
  --secondary-dark: #0078aa;
  --secondary-soft: #e8f8ff;

  /* 状態 */
  --warn-bg: #fff3cd;
  --warn-text: #7a5c00;
  --warn-line: #e2c98a;
  --error-bg: #fdecea;
  --error-text: #a2242d;
  --ok-dot: #22a06b;

  /* 影（4 段） */
  --shadow: 0 4px 12px rgba(24, 20, 18, 0.13);
  --shadow-header: 0 5px 14px rgba(24, 20, 18, 0.16);
  --shadow-small: 0 2px 6px rgba(24, 20, 18, 0.09);
  --shadow-active: 0 4px 10px rgba(255, 63, 39, 0.34);
  --shadow-hover: 0 3px 9px rgba(0, 168, 239, 0.20);

  /* 角丸 */
  --r-pill: 999px;
  --r-panel: 26px;
  --r-card: 16px;

  /* 文字の 4 段 */
  --fs-heading: 14px;
  --fs-body: 12px;
  --fs-label: 11px;
  --fs-help: 10px;

  /* 数少ない区切り線 */
  --line: rgba(31, 27, 24, 0.10);
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-body)/1.6 system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
        "Noto Sans JP", sans-serif;
}

/* --- 骨格: 全画面キャンバス ＋ 浮遊コントロール ---------------------------
 *
 * house-planner のデスクトップと同じ組み方（実測値はダイジェストの「3. レイアウトの骨格」）。
 *
 * 前は左右のパネルを常設の格子に置き、上下に帯を足していた。そのぶんキャンバスが
 * 削られ、**空いた帯を操作方法の文字で埋める**ことになっていた。
 * 依頼主の言葉:「こんなものは誰も読みたがりません」。
 *
 * **浮遊物の位置はすべて `position: fixed`。** 画面の端からの距離で置く
 * （キャンバスは画面全部なので、キャンバスを基準にしても同じ）。
 */
#app { position: relative; height: 100%; }

#view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--canvas-bg);
}
#canvas { display: block; width: 100%; height: 100%; }

/* 浮遊物に共通の地。面と影で層を作る（境界線は引かない） */
#topbar, #list, #tools, #props, #view-tabs, #statusbar, #drag-coords, #help-box {
  position: fixed;
  z-index: 10;
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* 上のバー。house-planner の #toolbar と同じくカプセル */
#topbar {
  top: 10px;
  left: 12px;
  right: 12px;
  min-height: 40px;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 7px 16px;
  box-sizing: border-box;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-header);
}
#stage-name {
  /* 一括指定の font は使わない。最後の family に inherit は書けず、ブラウザが宣言ごと捨てるため（Task 1 で実測） */
  font-family: inherit;
  font-weight: 900;
  font-size: var(--fs-heading);
  line-height: 1.2;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* いまのステージを「じゅもん」にしたときの文字数（Task 9）。
 * **ログではなく編集中の状態**なので #topbar に置く（#statusbar には置かない）。
 *
 * 3 段階の色。**上限ではない**（120 字を超えても作れる。赤くして促すだけ）:
 *   既定（通常）… 100 字まで。色を付けない
 *   .near        … 100〜120 字。黄（--warn-text）
 *   .over        … 120 字超。 赤（--error-text）
 *   .unavailable … 呪文にできないステージ（cylinders 等）。薄い灰
 *
 * **`#spell-length.near` のように id と組み合わせて書くこと。** 単なる `.near` だと、
 * この下の素の `#spell-length` 規則（id 単体）のほうが詳細度で勝って色が当たらない
 * （`#action-note` で実際に起きた事故と同じ形。詳細度は「id の数」で決まるので、
 * `#id.class`（1,1）は `#id`（1,0）に勝つが、`.class`（0,1）は負ける）。
 */
#spell-length {
  font-family: inherit;
  font-weight: 800;
  font-size: var(--fs-label);
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#spell-length.near { color: var(--warn-text); }
#spell-length.over { color: var(--error-text); font-weight: 900; }
#spell-length.unavailable { color: var(--muted); opacity: 0.6; }
/* ファイル操作は右端へ寄せる */
#file-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
}

/* 左のレーン（パレット＋一覧）。上のバーの下から、ステータスバーの上まで */
#list {
  top: 64px;
  left: 14px;
  bottom: 48px;
  width: 218px;
  box-sizing: border-box;
  overflow: auto;
  padding: 14px;
  border-radius: var(--r-panel);
}

/* 右のプロパティ欄 */
#props {
  top: 64px;
  right: 14px;
  bottom: 48px;
  /* ゲージ（`input[type=range].gauge`）と数値欄が 1 行に並ぶので、
     house-planner の 234px より少し広く取る */
  width: 268px;
  box-sizing: border-box;
  overflow: auto;
  padding: 14px;
  border-radius: var(--r-panel);
}

/* ツール。左のレーンの右どなり（house-planner の浮遊パネルと同じ位置取り） */
#tools {
  top: 64px;
  left: 246px;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--r-pill);
}
#tool-modes, #tool-edit, #tool-history, #tool-show {
  display: flex;
  gap: 4px;
  align-items: center;
}
/* 区画の間に、house-planner に残っている数少ない区切り線を引く */
#tool-edit, #tool-history, #tool-show, #btn-help {
  padding-left: 8px;
  border-left: 1px solid var(--line);
}
#btn-help { margin-left: 2px; }
/* 回転のボタンは記号 1 文字なので、丸くして幅を詰める */
#btn-rot-ccw, #btn-rot-cw, #btn-help {
  min-width: 30px;
  padding: 0 8px;
  font-size: var(--fs-heading);
}

/* 視点の切り替え。キャンバスの右下 */
#view-tabs {
  right: 296px;
  bottom: 10px;
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 5px 8px;
  border-radius: var(--r-pill);
}

/* ログの類はここだけ。左下・高さ 30px（house-planner の #statusbar） */
#statusbar {
  left: 14px;
  bottom: 10px;
  /* **右端を `right` で止める。**`max-width` だと窓幅によっては
     視点の切り替え（右下）に届いて重なる。ここで場所を分け合っておく
     （視点は right:274px から 271px ぶん使うので、その手前で止める） */
  right: 600px;
  min-height: 30px;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--r-pill);
  color: var(--muted);
  font-size: var(--fs-label);
  box-shadow: var(--shadow-small);
  overflow: hidden;
  white-space: nowrap;
}
#statusbar > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* **幅が足りないときは #status から縮める。**既定（flex-shrink: 1）は中身の長さに
   比例して削るので、常に出ている統計の行（いちばん長く、いちばん急がない）が場所を取り、
   いま起きたこと（#action-note）と検証（#validation）のほうが「…」になっていた
   （2026-09-25、公開版を幅 1440 で開いて「じゅもんを読めません: …（12 字目の「カ」）」が
   「じゅもんを読めま…」に切れ、「検証: 問題なし」まで「検…」になっていたのを実測） */
#status { font-variant-numeric: tabular-nums; flex-shrink: 50; }
/* **エラーの知らせは縮めず、帯に収まらないときだけ折り返して全部出す。**読めないと直しようがない。
   縮めるのを許すと、足りないのが数 px のときに折り返さず「…」で末尾が切れる（幅 1440 で実測）。
   帯は bottom で止めてあるので、行が増えると上へ伸びる。その間は隣の欄が縮んで隠れてよい */
#action-note.err { white-space: normal; flex-shrink: 0; max-width: 100%; }

/* 掴んでいる間の座標。右下（視点の切り替えの上） */
#drag-coords {
  right: 296px;
  bottom: 58px;
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-small);
  pointer-events: none;
}
#drag-coords[hidden] { display: none; }

/* 長い説明。既定では出さない */
#help-box {
  top: 104px;
  left: 246px;
  width: 420px;
  max-height: calc(100vh - 170px);
  overflow: auto;
  padding: 14px 18px;
  border-radius: var(--r-card);
  color: var(--text-soft);
  font-size: var(--fs-label);
  line-height: 1.8;
  white-space: pre-wrap;
  z-index: 20;
}
#help-box[hidden] { display: none; }
#help-box h2 { margin-top: 0; }

/* --- ボタン（副が既定。主は .primary） ---
   font は一括指定にしない。`font: 800 11px/1.2 inherit` と書くと
   **宣言ごと捨てられる**（CSS-wide キーワードの inherit は一括指定の
   部品としては使えない）。家族だけ引き継ぎたいので長個別指定に割る。 */
button {
  min-height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: #f8fafc;
  color: var(--text);
  font-family: inherit;
  font-weight: 800;
  font-size: var(--fs-label);
  line-height: 1.2;
  box-shadow: var(--shadow-small);
  cursor: pointer;
}
button:hover:not(:disabled) {
  background: var(--secondary-soft);
  color: var(--secondary-dark);
  box-shadow: var(--shadow-hover);
}
button.primary { background: var(--primary); color: #fff; }
button.primary:hover:not(:disabled) { background: var(--primary-dark); color: #fff; }
/* 選択中（ビューの切り替え・トグル）。ホバーとは色系統を分ける */
button.on {
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-active);
}
button:disabled {
  opacity: 0.42;
  box-shadow: none;
  cursor: default;
}
button:focus-visible { outline: 3px solid var(--secondary-dark); outline-offset: 3px; }

/* --- 入力欄（font を割る理由はボタンと同じ） --- */
input, select {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-pill);
  background: #f7f8fa;
  color: var(--text);
  font-family: inherit;
  font-weight: 400;
  font-size: var(--fs-label);
  line-height: 1.2;
  box-shadow: inset 0 0 0 1px rgba(31, 27, 24, 0.06);
}
input:focus, select:focus {
  outline: 3px solid rgba(0, 168, 239, 0.18);
  box-shadow: inset 0 0 0 1px var(--secondary);
}
/* 数値は桁を揃える（座標を並べて読むため） */
input[type=number] { width: 5.5em; font-variant-numeric: tabular-nums; }

/* --- ゲージ（上限・下限が決まっている項目に添える）-------------------------
 *
 * 依頼主の指摘:「最大と最小の値が決まってるような入力項目はゲージも置いておきましょう」。
 * house-planner の `#sun-hour`（ダイジェスト「スライダ」）を写したもの。
 * **溝は主の色、つまみは白い丸。**細い既定の見た目のままだと掴みにくい。 */
input[type=range].gauge {
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  height: 22px;
  min-height: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
input[type=range].gauge::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%);
}
input[type=range].gauge::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;             /* 溝（6px）の中心に合わせる */
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-small);
}
input[type=range].gauge::-moz-range-track {
  height: 6px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%);
}
input[type=range].gauge::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-small);
}
input[type=range].gauge:focus-visible { outline: 3px solid var(--secondary-dark); outline-offset: 3px; }
/* 読み込みの <input type=file> は画面外に置いて、隣のボタンから click() で開く
   （display:none だと click() できないブラウザがある） */
#file-import { position: absolute; left: -9999px; width: 1px; height: 1px; }

/* --- 文字の段（font を割る理由はボタンと同じ） --- */
h2 {
  font-family: inherit;
  font-weight: 900;
  font-size: var(--fs-heading);
  line-height: 1.3;
  margin: 14px 0 6px;
  color: var(--text);
}
.row { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
/* ★ white-space: nowrap … 「落下死の高さ」（全角 6 文字）は 5em に収まらず、
   これまでのラベル（全角 5 文字まで）と違って折り返していた（レビュー指摘）。
   nowrap にすると、はみ出した分は隣の入力欄が flex で縮んで受け止める
   （幅は変えていないので、既存の短いラベルの見た目は変わらない） */
.row > label {
  /* **縮ませない**（ラベルが折れると行の高さが揃わない）。
     はみ出した分は隣の入力欄・ゲージが flex で縮んで受け止める */
  flex: 0 0 auto;
  width: 5em;
  white-space: nowrap;
  color: var(--text-soft);
  font-weight: 800;
  font-size: var(--fs-label);
}
/* 数値欄は**縮む側**。ゲージと並ぶ行では、ゲージに幅を譲る */
.row > input[type=number] { flex: 0 1 auto; min-width: 3.5em; }

/* --- 状態の色（帯・注記） --- */
#action-note { color: var(--muted); font-size: var(--fs-help); }
#action-note.err { color: var(--error-text); }
#action-note.ok { color: var(--ok-dot); }
.err { color: var(--error-text); }
.warn { color: var(--warn-text); }
#validation {
  /* ★ ここに margin-top を書かないこと。骨格の節の `margin: 0 0 0 auto`（右寄せ）を
     上書きして、上のバーの中で検証結果だけが 4px 下へずれる（実測で見つけた） */
  font-size: var(--fs-help);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* --- ステータスバーの中身 ---------------------------------------------------
 *
 * **ログの類は画面最下部の 1 本にまとめてある**（依頼主の指摘。
 * 「検証: 問題なし」「…から読み込んだ」を画面のあちこちに出さない）。
 * 位置と地は骨格の節で決めているので、ここは中身の見た目だけ。
 *
 * ここは操作するものではないので、押せる部品より前へ出てはいけない
 * （文字は控えめな色、影は 1 段小さいもの）。 */

/* 描き直しを止めた・描けなかったものがある、という**知らせがあるときだけ**
   目立たせる（普段は静かなままにする）。statusPanel.mjs が付け外しする */
#status.notice {
  color: var(--warn-text);
  font-weight: 800;
}

/* 検証が通らないときだけ目立たせる（ui.mjs が付け外しする） */
#validation.ng { color: var(--error-text); font-weight: 800; }

/* 操作の結果（保存した・読み込んだ 等）。数秒で消える文言が入る */
#action-note { color: var(--text-soft); }

/* --- パレット（置けるもの） --- */
#palette { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
/* 見出しごとのタイルの入れ物（Task 7）。タイルは必ずこの中（`ui.mjs` 参照）。 */
#palette .pal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}
.pal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-card);
  cursor: pointer;
  font-size: var(--fs-label);
}
.pal:hover { background: var(--secondary-soft); color: var(--secondary-dark); }
.pal.on { background: var(--primary); color: #fff; box-shadow: var(--shadow-active); }
/* サムネが無いものと高さが揃うように、枠の大きさは img / .noimg で同じにする */
.pal img, .pal .noimg {
  width: 100%; height: auto; aspect-ratio: 1 / 1;
  background: var(--surface-2); border-radius: var(--r-card);
}
.pal .name {
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ギミックスポナーのタイル: 出しうるギミックのサムネを 2×2 のモザイクで出す
   （Task 8。依頼主の言葉:「RandomGimmick_xxx は、含まれるギミックを表示したいです」）。
   `.pal img` と高さを揃えるため width/aspect-ratio は同じ 100% / 1:1 にし、
   このブロックを後ろに置いて img の width/height/object-fit だけ上書きする。 */
.pal-mosaic {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  width: 100%; aspect-ratio: 1 / 1; position: relative;
}
.pal-mosaic img { width: 100%; height: 100%; object-fit: contain; }
.pal-more {
  position: absolute; right: 2px; bottom: 2px;
  font-size: 9px; padding: 0 3px; border-radius: 3px;
  background: rgba(0,0,0,0.6); color: #fff;
}

/* --- 置いてあるものの一覧 --- */
/* ★ **押せる見た目にしないこと**（レビュー指摘 M-2）。
   `ui.mjs` の `renderList` はこの行にクリックを**付けていない**（選択の入口は
   キャンバスのクリック 1 つに寄せてある。理由は `renderList` のコメント）。
   それなのに `cursor: pointer` と `:hover` の色替えが付いていたので、
   押せるように見えて押しても何も起きない、という一番たちの悪い嘘になっていた。
   選択中の印（`.item.on`）だけを残す（これは「押せる」ではなく「いま選ばれている」）。
   一覧を選択の入口にするなら、そのときに CSS も一緒に戻すこと。 */
.item {
  padding: 3px 8px;
  margin-bottom: 2px;
  border-radius: var(--r-pill);
  font-size: var(--fs-label);
}
.item.on { background: var(--primary); color: #fff; box-shadow: var(--shadow-active); }

/* --- 操作の案内 --- */
.hint {
  color: var(--muted);
  font-size: var(--fs-help);
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  white-space: pre-line; /* ui.mjs の KEY_HINT が入れている改行を残す */
}

/* --- 細いスクロールバー（house-planner から） --- */
#list, #props { scrollbar-width: thin; }
#list::-webkit-scrollbar, #props::-webkit-scrollbar { width: 7px; }
#list::-webkit-scrollbar-thumb, #props::-webkit-scrollbar-thumb {
  background: rgba(207, 191, 174, 0.72);
  border-radius: var(--r-pill);
}

/* --- 段の足し引き（Task 3） --- */

/* 段の見出しの行。見出しと ＋ − を 1 行に並べる。上下の余白は h2 と揃える
   （.seg-head h2 の margin を 0 にした分、ここに付け直さないと段の区切りが潰れる） */
.seg-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 6px;
}
.seg-head h2 { flex: 1; margin: 0; }

/* ＋ − を包む span。disabled な button は pointer イベントを受けず hover で
   title が出ないので、title はこちらに付ける（ui.mjs 側） */
.seg-btn-wrap { display: inline-flex; }

/* 段を足す・消すボタン。24×24 の正方形なので --r-pill の結果は丸（横長ならカプセルになる） */
.seg-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 800;
  font-size: var(--fs-label);
  line-height: 1;
  cursor: pointer;
}
.seg-btn:hover:not(:disabled) {
  background: var(--secondary-soft);
  box-shadow: var(--shadow-hover);
}
.seg-btn:disabled { opacity: 0.35; cursor: default; }

/* --- ギミックの抽選表（Task 7） --- */
/* 数値は tabular-nums（桁が揃わないと目が滑る） */
.draw-table { display: flex; flex-direction: column; gap: 2px; }
.draw-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 8px;
  border-radius: var(--r-card);
  background: var(--surface-2);
}
.draw-name {
  font-size: var(--fs-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draw-chance {
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}