/* ============================================================
   ツールの共通部品
   ------------------------------------------------------------
   **ツールは何本も増える。** ページごとに <style> を書いていたら、
   直したいときに全部を触ることになる（2026-08-30、2 本目を作る前に分けた）。
   色・字・余白は ../style.css の変数をそのまま借りる。ここで定義し直さない。

   置き場のきまり:
   - ページ固有の見た目だけ、そのページの <style> に書く
   - 2 ページ目で同じものを書きたくなったら、ここへ移す

   **詰めた版（2026-09-26、先生の「無駄な余白を無くして、入力のしやすさを
   向上して、必要な情報がひと目でわかるように」）。**390 幅で最初の板が
   y=413〜492 だったのを 200 前後まで上げた。各ツールで使える部品:
   - `.fields.fgrid` — 短い数字の入力が兄弟で並ぶとき、スマホでも 2〜3 列に
     詰める（1 欄 8.5em 以上。入らなければ勝手に段が減る）。`.c2` / `.c3` と
     併用してよく、あとから書いたこちらが勝つ
   - `.field label` の中の `.hint` — ラベルと同じ行に小さく続く（改行しない）
   - `.tcrumb` はヒーローの中（`.thero-body` の先頭）に置く。`.twrap` には置かない

   **ページごとに同じ手当てを書いていたものを寄せた（2026-09-27、14 本の見直しの後始末）。**
   - `.stats.duo`   — 札を**どの幅でも 2 列**。どの札も横に伸ばさない
                       （`.pair` は style.css に別物があるのでこの名前）
   - `.stats.hero2` — `.duo` ＋ `.stat.hero` だけ横いっぱい。「答え 1 枚を全幅、残りを 2 列」
   - `.stats.row3`  — 畳む幅（899px 以下）では **3 枚を 1 段**に。比を変えたいページは
                       `grid-template-columns` だけ上書きする
   - `.stats.strip` — 畳む幅では札を詰める（余白・字を一回り小さく）。`.row3` と併用が基本。
                       数字が長いページは `.v` の大きさだけ上書きする
     何も付けない `.c3` / `.c4` は今までどおり（柱の中は 2 列、480px 以下で 1 列）
   - `.tcols.unwrap` — 畳む幅で柱をほどいて、中の板を `.tcols` の直の子として並べる。
     「答えを入力のすぐ下へ」の並び替え用。**`order` はページが板ごとに付ける**
   - `.panel-h .hsub` — 見出しの横の短い灰色の一言
   - `.vh` — 目には見せず、読み上げにだけ渡す文字
   - 日付・時刻の欄（`input[type=date|time]`）も数字の欄と同じ見た目。ダークでも白くならない
   - ツールの中の `class="note"` は style.css の金の縦線の箱にしない（`.twrap .note`）
   ============================================================ */

/* ------------------------------------------------------------ 骨格 */

.twrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px) 40px; }
/* **ヒーローの直後は、ヒーロー側の余白だけで足りる。**先頭の子の上マージンを落とす */
.thero + .twrap { padding-top: clamp(8px, 1.2vw, 14px); }
.thero + .twrap > :first-child,
.thero + .twrap > .tpanes:first-of-type > .ttabs:first-child { margin-top: 0; }
.twrap.narrow { max-width: 860px; }
.twrap.wide   { max-width: 1320px; }
/* **画面いっぱいに使う。**TL エディタのように、横軸が時間で、
   広ければ広いほど読みやすいものだけ（2026-08-31 の先生の指示
   ——「ブラウザ画面いっぱいに使って再現したい」） */
.twrap.full   { max-width: none; padding-left: clamp(10px, 1.4vw, 20px);
                padding-right: clamp(10px, 1.4vw, 20px); }

/* ------------------------------------------------------------ 2 段組み
   **道具は読み物ではない。** 1 本の細い柱に流すと、広い画面で左右が丸ごと余る
   （2026-08-30 の先生の指摘）。入力を左、結果を右に置いて、
   **結果は画面に貼り付けたまま**入力をいじれるようにする。

   畳む幅は 900px。それより狭いと 2 列にした瞬間どちらも窮屈になる。 */
.tcols { display: grid; gap: clamp(12px, 1.6vw, 22px); align-items: start; }
@media (min-width: 900px) {
  .tcols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tcols.lean { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); }
  .tcols.wideleft { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  /* **右の柱は貼り付けない。** 一度 position:sticky にしていたが、
     スクロールしても右だけ動かないのが気持ち悪いと先生から指摘があった
     （2026-08-30）。左右とも普通に流す。 */
}
.tcol { min-width: 0; display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 18px); }
.tcol > .panel, .tcol > .stats, .tcol > .note-box { margin: 0; }
/* **答えを入力のすぐ下へ（畳む幅だけ）。**1 列に畳むと、右の柱（答え）が左の柱の
   全部の下に回る。柱をほどいて、中の板を `.tcols` の直の子にする。
   並び順はページが `order` で板ごとに付ける（ツールごとに違うので、ここでは決めない）。
   `min-width: 0` は柱が持っていたもの。無いと表の幅で頁ごと横に伸びる */
@media (max-width: 899px) {
  .tcols.unwrap > .tcol { display: contents; }
  .tcols.unwrap > .tcol > * { min-width: 0; }
}

/* 全幅で置きたいもの（表・グラフ） */
/* 段をまたぐ帯。**`order` は必ず最後にしておく。**柱に order を配って
   並び替えるツール（宝探しのスマホ）で、order が 0 のままだと帯が先頭へ
   飛んで、盤より上に共有バーと出どころ欄が来ていた（2026-08-31） */
.tfull { grid-column: 1 / -1; min-width: 0; order: 99; }

.tcrumb { font-size: .82rem; color: var(--fg-mute); padding: 22px 0 0; }
.tcrumb a { color: var(--fg-mute); text-decoration: none; }
.tcrumb a:hover { color: var(--accent); text-decoration: underline; }
.tcrumb .sl { opacity: .45; margin: 0 .5em; }

/* ------------------------------------------------------------ ツールのヒーロー
   **「使い方」とは別の顔にする。** 本編のヘッダー画像は昼＝hero-day /
   夜＝hero-night。ツールでは**その逆を出す**（2026-08-30 の先生の指示）。
   同じ部屋の別の時間帯なので世界観は繋がったまま、タブが変わったことは分かる。 */

.thero { position: relative; overflow: hidden; }

/* **絵は帯ではなく、見出しの後ろに敷く。**以前は 150〜260px の帯を丸ごと
   取っていて、390 幅では最初の入力まで 1 画面ぶん降りていた（2026-09-26）。
   絵は消さない——右と上に残して、字の乗るところだけ地の色に寄せ切る。 */
.thero-media { position: absolute; inset: 0; height: auto; }
.thero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }

/* **字の下は地の色に寄せ切る。**ツールの絵は本編と逆の時間帯を出しているので、
   ライトのとき「暗い絵に暗い字」になる（2026-08-31）。左から右へ抜いて、
   右端だけ絵が見えるようにする。下端は地へ溶かす */
.thero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, transparent 55%, var(--bg) 100%),
    linear-gradient(to right, var(--bg) 0%,
                    color-mix(in srgb, var(--bg) 90%, transparent) 38%,
                    color-mix(in srgb, var(--bg) 58%, transparent) 72%,
                    color-mix(in srgb, var(--bg) 30%, transparent) 100%);
}
/* スマホは字が端まで届くので、全面を濃く敷く */
@media (max-width: 700px) {
  .thero-media::after {
    background:
      linear-gradient(to bottom, color-mix(in srgb, var(--bg) 70%, transparent) 0%,
                      color-mix(in srgb, var(--bg) 88%, transparent) 55%, var(--bg) 100%);
  }
}

/* **並び: パンくず＋ボタン（1 行）→ 見出し → 説明。**ボタンは tour.js /
   remember.js が `.thero-body` の末尾に足すので、`order` で上の行へ上げる。
   パンくずが残りの幅を取り、長ければそこで折り返す */
.thero-body {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(8px, 1.2vw, 16px) clamp(16px, 3vw, 32px) clamp(10px, 1.4vw, 18px);
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 6px; row-gap: 2px;
}
.thero-body.wide   { max-width: 1320px; }
.thero-body.narrow { max-width: 860px; }

.thero-body > .tcrumb {
  order: 0; flex: 1 1 0; min-width: 0;
  margin: 0; padding: 0;
  font-size: .78rem; line-height: 1.5;
}
.thero-body > .tour-open {
  order: 1; flex: none;
  /* remember.js が style で margin-left: 8px を入れてくる。間は gap に任せる */
  margin: 0 !important;
  font-size: .8rem; padding: .4em 1em; line-height: 1.4;
  background: color-mix(in srgb, var(--card) 85%, transparent);
  position: relative;
}
/* **見た目は小さく、押せる範囲は 40px 以上。**`.qm` と同じ手 */
.thero-body > .tour-open::after { content: ""; position: absolute; inset: -6px -2px; }

.thero h1 {
  order: 2; flex: 0 0 100%;
  margin: 2px 0 0;
  font-size: clamp(1.32rem, 3.2vw, 2.05rem);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: .01em;
  text-wrap: balance;
}
.thero-lead {
  order: 3; flex: 0 0 100%;
  margin: 2px 0 0;
  max-width: 72ch;
  /* **見出しより一段落とす。**本編の `.hero-sub` と `.panel > .lead` は
     どちらも `--fg-mute` で、ここだけ真っ白だった（2026-08-30 の先生の指摘
     ——「ツール一覧の　ブルアカで手が止まりがちな計算　表記の色が白に戻ってるな」）。
     強調だけ `--fg` に上げる。 */
  color: var(--fg-mute);
  font-size: clamp(.875rem, 1.6vw, .98rem);
  line-height: 1.6;
  /* **手で改行を入れない。** <br> を挟むと、幅が変わったときに
     文の途中で切れる（2026-08-30 の先生の指摘）。
     代わりに、日本語を文節で折り返してもらう。効かないブラウザでは
     今までどおりの折り返しになるだけで、崩れはしない。 */
  word-break: auto-phrase;
  text-wrap: pretty;
}
/* **強調に色は付けない。**1 段落に 2 つも 3 つも色が付くと、
   どれが大事なのか分からなくなる（2026-08-30 の先生の指摘） */
.thero-lead b { font-weight: 700; color: var(--fg); }

/* **スマホのパンくずは「‹ ツール」だけ。**「AronaBotの使い方」は上のバーに、
   ページ名はすぐ下の見出しにある。全部出すと 2 行になってボタンを押し出す。
   ページ名は `<a>` に包まれていない文字なので、親の字を 0 にして消す */
@media (max-width: 640px) {
  .thero-body > .tcrumb { font-size: 0; }
  .thero-body > .tcrumb a, .thero-body > .tcrumb .sl { font-size: .8rem; }
  .thero-body > .tcrumb a:first-child, .thero-body > .tcrumb .sl { display: none; }
  .thero-body > .tcrumb a + .sl + a::before { content: "‹ "; }
}

@media (prefers-reduced-motion: no-preference) {
  .thero h1, .thero-lead {
    animation: theroIn .6s cubic-bezier(.22,.61,.36,1) both;
  }
  .thero h1 { animation-delay: .04s; }
  .thero-lead { animation-delay: .1s; }
  @keyframes theroIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* ------------------------------------------------------------ 板 */

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(14px, 1.8vw, 22px) clamp(14px, 2vw, 24px);
  margin: clamp(12px, 1.6vw, 20px) 0;
  box-shadow: var(--shadow);
}
.panel.flat { box-shadow: none; background: var(--bg-sub); }

.panel-h {
  display: flex; align-items: baseline; gap: .7em; flex-wrap: wrap;
  margin: 0 0 .3em;
}
.panel-h h2 { font-size: 1rem; margin: 0; font-weight: 800; letter-spacing: .02em; line-height: 1.5; }
/* 見出しの横の短い一言（「生徒を押してから、段を押す」など）。説明文の段を 1 つ減らす */
.panel-h .hsub { font-size: .8rem; color: var(--fg-mute); font-weight: 500; }
.panel > .lead { font-size: .875rem; color: var(--fg-mute); margin: 0 0 12px; line-height: 1.7;
                 word-break: auto-phrase; text-wrap: pretty; }
.panel > .lead b { color: var(--fg); }
.panel > .lead:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ 入力 */

.fields { display: grid; gap: 12px 14px; }
.fields.c2 { grid-template-columns: 1fr; }
.fields.c3 { grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .fields.c2 { grid-template-columns: 1fr 1fr; }
  .fields.c3 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 760px) { .fields.c3 { grid-template-columns: repeat(3, 1fr); } }
/* 2 段組みの柱の中では 1〜2 列 */
.tcol .fields.c3 { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .tcol .fields.c2, .tcol .fields.c3 { grid-template-columns: 1fr; } }

.field label, .field > .lb { display: block; font-size: .875rem; font-weight: 700; margin-bottom: .3em; line-height: 1.5; }
/* **補足はラベルと同じ行に続ける。**1 欄ごとに「ラベル / 補足 / 入力」の 3 段を
   積んでいて、欄の高さの半分が文字だった（2026-09-26） */
.field .hint { display: inline; font-weight: 400; color: var(--fg-mute); font-size: .76rem; margin: 0 0 0 .6em; }
/* **短い数字が兄弟で並ぶなら、スマホでも横に詰める。**使い方は冒頭のコメント */
.fields.fgrid, .tcol .fields.fgrid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5em), 1fr));
}
.fields.fgrid .field .hint { display: block; margin: 0; }
/* ラベルが 2 行に折れた欄があっても、同じ段の入力欄の高さを揃える */
.fields.fgrid > .field { display: flex; flex-direction: column; min-width: 0; }
.fields.fgrid > .field > input, .fields.fgrid > .field > select { margin-top: auto; }

input[type="number"], input[type="text"], input[type="search"],
input[type="date"], input[type="time"], select, textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
  /* **高さは 40px。**指で押せる下限。前は 45px あって、欄が縦に積まれるぶん伸びていた */
  min-height: 40px;
  padding: .36em .7em;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  transition: border-color .14s ease, box-shadow .14s ease;
}
/* **日付と時刻の欄は、中の部品（カレンダーの印・区切り）をブラウザが自前の色で描く。**
   `color-scheme` を合わせないと、ダークで白い欄になる（2026-09-26、bond の目標日で発見） */
@media (prefers-color-scheme: dark) { input[type="date"], input[type="time"] { color-scheme: dark; } }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.4em;
}
.field.bad input, .field.bad select { border-color: #c0392b; }
.err { color: #c0392b; font-size: .85rem; margin: 14px 0 0; }
/* **hidden 属性は display の指定に負ける。** ここで一度だけ勝たせる */
[hidden] { display: none !important; }
/* 目には見せず、読み上げにだけ渡す文字（ラベルの代わりなど） */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; }

/* 数値を右寄せで並べる行（内訳の入力など） */
.numrow {
  /* **右の列は 132px。**118px だと `select` が矢印のぶん 2.4em を引かれて、
     「ランク 10」のような短い選択肢でも右端が隠れる（2026-08-30 の先生の指摘） */
  display: grid; grid-template-columns: 1fr 132px; gap: 14px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.numrow:last-of-type { border-bottom: 0; }
/* 選択肢が長くて右の列に入らない行。**ラベルの下に幅いっぱいで置く** */
.numrow.wide { grid-template-columns: 1fr; gap: 8px; }
.numrow.wide > select { width: 100%; }
.numrow .nm { font-size: .9rem; line-height: 1.5; }
.numrow .nm small { display: block; color: var(--fg-mute); font-size: .76rem; margin-top: .1em; }
.numrow input { text-align: right; padding: .3em .65em; font-size: .95rem; }
.numrow .val { text-align: right; padding-right: .7em; color: var(--fg-mute);
               font-size: .95rem; font-variant-numeric: tabular-nums; }
.numrow.sum {
  border-top: 2px solid var(--line); border-bottom: 0; margin-top: 6px;
  padding-top: 14px; font-weight: 800;
}
.numrow.sum .v { text-align: right; padding-right: .7em; font-size: 1.2rem;
                 font-variant-numeric: tabular-nums; color: var(--accent-tx); }

/* 分割ボタン（排他の選択） */
/* **角丸を 999px にしない。**折り返して 2 行以上になった瞬間、
   帯が巨大な楕円の塊になる（2026-08-31 に先生のスマホの写真で発覚。
   装備の部位 9 個で 3 行、難易度 8 個で 3 行、コスト計算機の編成 2 個で 2 行）。
   **24px なら、1 行のときはブラウザが「高さの半分」まで自動で丸めるので
   今までどおりの錠剤に見え、折り返したときだけ角丸の四角になる**
   （CSS の仕様で、辺の長さを超える角丸は縮められる）。
   1 行の帯は高さ 37〜46px なので、どれも今までと同じ形のまま */
.seg {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  background: var(--bg-sub); border: 1px solid var(--line);
  border-radius: 24px; padding: 4px;
}
.seg button {
  font: inherit; font-size: .84rem; font-weight: 700;
  border: 0; background: transparent; color: var(--fg-mute);
  padding: .4em 1em; border-radius: 999px; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.seg button:hover { color: var(--fg); }
/* **押せる高さは 38px 以上。**素のままだと 34〜36px で、ページごとに底上げしていた。
   `.twrap` の中だけ——TL の画面は同じファイルを読むが、自前の低い帯を持っている */
.twrap .seg button { min-height: 38px; }
.seg button .gi { margin-right: .35em; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-in); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------ 面の切り替え
   **縦に長いツールを、参考の面ごとに畳む**（2026-08-30 の先生の指示——
   「スクロールが多くなってるツールはツール内でタブ選択できるようにして」）。
   スマホ 390×780 で 11.5 画面ぶんあるツールがあり、下のほうの表までは届かない。

   見た目は上の `.seg` に合わせる。**別の顔を作らない**——サイトの中で
   「押して切り替えるもの」はこの丸い帯という 1 つの形にしておきたい。
   違うのは役割だけで、`.seg` は `aria-pressed`、こちらは `role="tab"` ＋
   `aria-selected`（面と結びつくので読み上げが「タブ 2/5」になる）。

   **折り返す。**横スクロールにすると、画面の外に出たタブに気付けない
   （`tools/cost-timeline/` は 5 枚あって、390px では 3 行になる）。
   動かすのは ../panes.js。中身は HTML に全部あって、JS は隠すだけ。 */
.ttabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  background: var(--bg-sub); border: 1px solid var(--line);
  /* **`.seg` と同じ理由で 24px。**折り返すと 999px は楕円の塊になる */
  border-radius: 24px; padding: 4px; margin: 16px 0 0;
}
.ttabs button {
  font: inherit; font-size: .84rem; font-weight: 700;
  border: 0; background: transparent; color: var(--fg-mute);
  padding: .45em 1.05em; border-radius: 999px; cursor: pointer;
  white-space: nowrap;
  transition: background .14s ease, color .14s ease;
}
.ttabs button:hover { color: var(--fg); }
.ttabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-in); }
.ttabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tpane { min-width: 0; }
/* **面の先頭は帯にくっつけない。**板の 26px はそのままだと帯と離れすぎる */
.tpane > .panel:first-child, .tpane > .stats:first-child { margin-top: 12px; }
/* 中身が押せるものだけのときに備えて、面そのものにも焦点が置ける。
   `:focus-visible` にしているので、指やマウスで押したときには出ない */
.tpane:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px;
                       border-radius: var(--radius); }

/* 押しボタン */
.btn {
  font: inherit; font-size: .9rem; font-weight: 700;
  /* **行の高さは本文（1.9）を継がない。**継ぐと 45px の丸い塊になる。これで 40px */
  line-height: 1.4;
  padding: .6em 1.3em; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg-sub); color: var(--fg);
  transition: transform .14s ease, filter .14s ease, border-color .14s ease;
}
.btn:hover { transform: translateY(-1px); border-color: var(--accent); }
.btn:active { transform: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.pri { background: var(--accent); color: var(--accent-in); border-color: transparent; }
.btn.pri:hover { filter: brightness(1.07); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btnrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* つまみ */
input[type="range"] {
  width: 100%; appearance: none; background: transparent; margin: .6em 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px; background: var(--line);
}
input[type="range"]::-moz-range-track { height: 5px; border-radius: 999px; background: var(--line); }
input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 18px; height: 18px; margin-top: -6.5px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--card);
  box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent);
  border: 2px solid var(--card); box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer;
}

/* チェックの並び */
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label {
  display: inline-flex; align-items: center; gap: .45em;
  /* **`.seg` と同じ理由で 24px。**1 行なら錠剤のまま、折り返したときだけ角丸の四角 */
  font-size: .84rem; padding: .38em .9em; border-radius: 24px;
  border: 1px solid var(--line); background: var(--bg-sub); cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.checks label:hover { border-color: var(--accent); }
.checks input { accent-color: var(--accent); margin: 0; }
.checks label:has(input:checked) {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--card));
}

/* ------------------------------------------------------------ 出力 */

.stats { display: grid; gap: 10px; margin: clamp(12px, 1.6vw, 20px) 0; }
@media (min-width: 560px) { .stats.c2 { grid-template-columns: 1fr 1fr; }
                            .stats.c3 { grid-template-columns: 1fr 1fr; }
                            .stats.c4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px) { .stats.c3 { grid-template-columns: repeat(3, 1fr); }
                            .stats.c4 { grid-template-columns: repeat(4, 1fr); } }
/* 2 段組みの中に入ったら、狭いので必ず 1〜2 列に落とす */
.tcol .stats.c3, .tcol .stats.c4 { grid-template-columns: 1fr 1fr; }
/* **3 つを 2 列に置くと、最後の 1 つの隣が空く。**横に伸ばして穴を埋める
   （2026-08-30 に 9 ツールで実測した。1280px で 247px ぶん空いていた） */
.tcol .stats.c3 > .stat:nth-child(3):last-child { grid-column: 1 / -1; }
@media (max-width: 480px) { .tcol .stats.c3, .tcol .stats.c4 { grid-template-columns: 1fr; } }

/* **札の並べ方の型。**使い方は冒頭のコメント。上の既定（とくに 3 枚目を伸ばす行の
   詳細度）に勝つよう、同じ形の選択子を後ろに重ねている */
.stats.duo, .stats.hero2, .tcol .stats.duo, .tcol .stats.hero2 { grid-template-columns: 1fr 1fr; }
.tcol .stats.duo > .stat:nth-child(3):last-child,
.tcol .stats.hero2 > .stat:nth-child(3):last-child:not(.hero) { grid-column: auto; }
.stats.hero2 > .stat.hero { grid-column: 1 / -1; }
@media (max-width: 899px) {
  .stats.row3, .tcol .stats.row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .tcol .stats.row3 > .stat:nth-child(3):last-child { grid-column: auto; }
  .stats.strip > .stat { padding: 8px 10px; min-width: 0; }
  .stats.strip .k { font-size: .7rem; letter-spacing: 0; line-height: 1.4; }
  .stats.strip .v { font-size: 1.3rem; }
  .stats.strip .sub { font-size: .68rem; line-height: 1.4; }
}
.stat {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 15px;
  background: var(--card);
}
.stat .k { font-size: .76rem; color: var(--fg-mute); letter-spacing: .04em; }
.stat .v {
  font-size: clamp(1.45rem, 4.6vw, 1.72rem); font-weight: 800; line-height: 1.25;
  margin-top: .1em; font-variant-numeric: tabular-nums;
}
.stat .v small { font-size: .58em; font-weight: 500; color: var(--fg-mute); margin-left: .25em; }
.stat .sub { font-size: .76rem; color: var(--fg-mute); margin-top: .2em; line-height: 1.55; }

/* いちばん見せたい 1 個。**枠と数字だけ差し色にする。**
   面ごと塗ると、周りのカードが全部おまけに見える */
.stat.hero {
  border-color: var(--accent);
  background: linear-gradient(160deg,
      color-mix(in srgb, var(--accent) 9%, var(--card)) 0%, var(--card) 62%);
}
.stat.hero .v { color: var(--accent-tx); }

/* 内訳の帳面 */
.ledger { margin-top: 4px; }
.ledger .row {
  display: grid; grid-template-columns: 1fr auto; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9rem;
}
/* **値は折り返してよい。**`nowrap` にしていたせいで、値が数字ではなく文になる
   欄（先生レベルのブースト）でスマホに横スクロールが出ていた。390px で 59px
   はみ出した実測（2026-08-31）。数字は `tabular-nums` で揃うので、
   折り返しを許しても桁はずれない */
.ledger .row > span:last-child {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; text-align: right;
}
.ledger .row.minus > span:last-child { color: var(--accent-tx); }
.ledger .row.total { border-bottom: 0; font-weight: 800; border-top: 2px solid var(--line); margin-top: 4px; }
.ledger .row .subnote { display: block; color: var(--fg-mute); font-size: .78rem; }

/* 表 */
/* **横に送る箱。**中身がはみ出すときだけ棒を出す。
   既定の太い棒は表の下に居座って目障りなので細くする
   （2026-08-30 の先生の指摘——「このスクロールキモいな」）。
   スマホの棒は触っている間しか出ないので、そちらは元のまま */
.tscroll {
  overflow-x: auto; margin-top: 10px; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--fg-mute) 45%, transparent) transparent;
}
.tscroll::-webkit-scrollbar { height: 6px; }
.tscroll::-webkit-scrollbar-track { background: transparent; }
.tscroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--fg-mute) 40%, transparent);
  border-radius: 999px;
}
.tscroll:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--fg-mute) 65%, transparent);
}
table.dt { border-collapse: collapse; width: 100%; font-size: .85rem; }
table.dt th, table.dt td {
  padding: .55em .75em; border-bottom: 1px solid var(--line);
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* **見出しも貼り付けない。** 横スクロールの器は縦には動かないので、
   position:sticky を付けるとページを縦に送ったときに見出しだけ浮いて残る。 */
table.dt th { color: var(--fg-mute); font-weight: 500; font-size: .78rem; background: var(--card); }
table.dt th:first-child, table.dt td:first-child { text-align: left; }
table.dt tr.here td { background: var(--bg-sub); font-weight: 800; }
table.dt tbody tr:hover td { background: color-mix(in srgb, var(--accent) 7%, transparent); }

/* 印（属性・分類など） */
.tag {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  padding: .18em .6em; border-radius: 999px;
  background: var(--bg-sub); color: var(--fg-mute); border: 1px solid var(--line);
}
.tag.on { background: var(--accent); color: var(--accent-in); border-color: transparent; }

/* **ツールの中の `.note` は素の文字。**style.css の `.note` はトップページの
   金の縦線の箱で、ツールで同じ名前を使うと箱が出る（2026-09-26、raid の凸の行で
   1 凸目の下に 60px の空き箱が出た）。字の大きさや色はページが決める */
.twrap .note { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; font-size: inherit; }

/* 注意書き */
.note-box {
  background: var(--bg-sub); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 10px 14px; margin: 14px 0;
  font-size: .875rem; color: var(--fg-mute); line-height: 1.75;
}
.note-box b { color: var(--fg); }
.note-box, .note-box p { word-break: auto-phrase; }
.note-box p { margin: 0 0 .6em; }
.note-box p:last-child { margin-bottom: 0; }

/* 出どころ */
details.src { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
details.src summary {
  cursor: pointer; font-size: .85rem; color: var(--fg-mute); font-weight: 700;
  list-style: none;
}
details.src summary::-webkit-details-marker { display: none; }
details.src summary::before { content: "▸ "; display: inline-block; transition: transform .15s ease; }
details.src[open] summary::before { content: "▾ "; }
details.src p, details.src li { font-size: .83rem; color: var(--fg-mute); line-height: 1.9; }
details.src b { color: var(--fg); }
/* **出典のリンクは記事の題そのまま**で、鉤括弧や「？」で終わるものがある。
   文節で折る指定のままだと、行末の括弧が送れずに 6px はみ出した（2026-08-31）。
   ここだけ今までどおり、どこででも折れるようにする */
details.src a { word-break: normal; }
details.src code { font-size: .78rem; }
details.src ul { padding-left: 1.3em; }

/* ------------------------------------------------------------ 一覧のカード */

.tgrid { display: grid; gap: 16px; margin: 26px 0 0; }
@media (min-width: 640px) { .tgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .tgrid.c3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .tgrid.c3 { grid-template-columns: repeat(4, 1fr); } }

a.tcard, .tcard {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px;
  position: relative; overflow: hidden;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
/* 上辺の差し色。**hover で伸びる。** 板そのものは動かしすぎない */
a.tcard::before {
  content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 0;
  background: var(--accent); transition: width .28s cubic-bezier(.22,.61,.36,1);
}
a.tcard:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
a.tcard:hover::before { width: 100%; }
a.tcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tcard .cat {
  font-size: .68rem; letter-spacing: .12em; font-weight: 700;
  color: var(--accent-tx); text-transform: none;
}
.tcard h2, .tcard h3 { font-size: 1.05rem; margin: .35em 0 .4em; font-weight: 800; }
.tcard p { font-size: .85rem; color: var(--fg-mute); margin: 0; line-height: 1.8; flex: 1; }
.tcard .go {
  margin-top: 1em; font-size: .8rem; font-weight: 700; color: var(--accent-tx);
  display: inline-flex; align-items: center; gap: .35em;
}
.tcard .go svg { width: .9em; height: .9em; fill: currentColor; transition: transform .16s ease; }
a.tcard:hover .go svg { transform: translateX(3px); }

.tcard.soon { border-style: dashed; background: transparent; }
.tcard .ticon {
  position: absolute; top: 15px; right: 15px; width: 50px; height: 50px;
  border-radius: 11px; pointer-events: none; object-fit: contain;
  transition: transform .2s cubic-bezier(.22,.61,.36,1);
}
/* **アイコンのぶんだけ見出しの幅が減る。**66px だと 11 文字の題で折り返して、
   しかも文節の途中で切れていた。アイコンを 50px に落として、
   折り返すときは文節の切れ目で折るようにする */
.tcard .cat, .tcard h2 { padding-right: 58px; }
.tcard h2 { word-break: auto-phrase; }
a.tcard:hover .ticon { transform: scale(1.09) rotate(-4deg); }

.tcard.soon .cat { color: var(--fg-mute); }
.tcard.soon h2, .tcard.soon h3 { color: var(--fg-mute); }

/* .br-pc は廃止（2026-08-30）。手で入れた改行は幅が変わると文の途中で切れる。
   折り返しは word-break: auto-phrase に任せる。 */

/* ------------------------------------------------------------ ゲーム内のアイコン
   **1 ツールにつき最低 1 か所は実物のアイコンを出す**（2026-08-30 の先生の指示）。
   出どころは SchaleDB。画像の権利は Nexon Games / Yostar にある——footer に明記した。 */
/* **SchaleDB の画像は 146×116 の横長。**正方形の枠に入れると 2 割ほど横に潰れる。
   tools/img/ の 155 枚は 122×122 に切り直してあるので、そのまま入れて崩れない。 */
/* **style.css が img { display: block } を掛けている。**そのままだと文中の
   アイコンが 1 行を独り占めして、見出しの上や文の途中で改行が入る（2026-08-30 に発見）。
   inline-block に戻すのは必須。 */
/* ゲーム内 UI のアイコン。**中身は白い単色のグリフ**なので、そのまま <img> で
   置くとクリーム色の地に白で消える。mask で切り抜いて文字色を敷く。
   こうしておくと暗いテーマでも勝手に反転する（2026-08-30） */
.gi {
  display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em;
  background: currentColor; flex: none;
  /* **ショートハンドに var() を混ぜない。**`var(--gi) center / contain` は
     パースに失敗して丸ごと落ちる。個別指定なら通る（2026-08-30 に実測） */
  -webkit-mask-image: var(--gi);          mask-image: var(--gi);
  -webkit-mask-size: contain;             mask-size: contain;
  -webkit-mask-repeat: no-repeat;         mask-repeat: no-repeat;
  -webkit-mask-position: center;          mask-position: center;
}
.gi.lg { width: 1.6em; height: 1.6em; vertical-align: -.35em; }

/* 絵は class で持たせる。**インラインの --gi に相対パスを書くと壊れる** ——
   カスタムプロパティの url() は「var() を使っている側の CSS」を基準に
   解決されるので、tools/raid/index.html に ../img/ と書いても
   tools/tool.css から見た ../img/（＝サイト直下の /img/）になってしまう
   （2026-08-30 に実測）。ここに書けば基準は tools/ で揃う。
   **1 行はビルドが吐いたもの。増やすときは scripts/build-tool-data.py の UI_ICONS へ** */
.gi-cafe-icon-comfort { --gi: url(img/ui_cafe_icon_comfort.webp); }
.gi-cafe-icon-interaction { --gi: url(img/ui_cafe_icon_interaction.webp); }
.gi-school-icon-schedule-favor { --gi: url(img/ui_school_icon_schedule_favor.webp); }
.gi-common-icon-formation-star-r1 { --gi: url(img/ui_common_icon_formation_star_r1.webp); }
.gi-common-icon-time { --gi: url(img/ui_common_icon_time.webp); }
.gi-craftnode-credit { --gi: url(img/ui_craftnode_credit.webp); }
.gi-craftnode-favor { --gi: url(img/ui_craftnode_favor.webp); }
.gi-craftnode-item { --gi: url(img/ui_craftnode_item.webp); }
.gi-craftnode-secretstone { --gi: url(img/ui_craftnode_secretstone.webp); }
.gi-craftnode-ultimateskill { --gi: url(img/ui_craftnode_ultimateskill.webp); }
.gi-icon-inven-badge { --gi: url(img/ui_icon_inven_badge.webp); }
.gi-icon-inven-bag { --gi: url(img/ui_icon_inven_bag.webp); }
.gi-icon-inven-charm { --gi: url(img/ui_icon_inven_charm.webp); }
.gi-icon-inven-gloves { --gi: url(img/ui_icon_inven_gloves.webp); }
.gi-icon-inven-hairpin { --gi: url(img/ui_icon_inven_hairpin.webp); }
.gi-icon-inven-hat { --gi: url(img/ui_icon_inven_hat.webp); }
.gi-icon-inven-necklace { --gi: url(img/ui_icon_inven_necklace.webp); }
.gi-icon-inven-shoes { --gi: url(img/ui_icon_inven_shoes.webp); }
.gi-icon-inven-watch { --gi: url(img/ui_icon_inven_watch.webp); }
.gi-image-compare { --gi: url(img/ui_image_compare.webp); }
.gi-role-damagedealer { --gi: url(img/ui_role_damagedealer.webp); }
.gi-role-healer { --gi: url(img/ui_role_healer.webp); }
.gi-role-supporter { --gi: url(img/ui_role_supporter.webp); }
.gi-role-tanker { --gi: url(img/ui_role_tanker.webp); }
.gi-role-vehicle { --gi: url(img/ui_role_vehicle.webp); }
.gi-terrain-indoor { --gi: url(img/ui_terrain_indoor.webp); }
.gi-terrain-outdoor { --gi: url(img/ui_terrain_outdoor.webp); }
.gi-terrain-street { --gi: url(img/ui_terrain_street.webp); }
.gi-type-attack { --gi: url(img/ui_type_attack.webp); }
.gi-type-defense { --gi: url(img/ui_type_defense.webp); }
.gi.mute { color: var(--fg-mute); }
.gi.acc { color: var(--accent-tx); }

.ico { display: inline-block; width: 1.7em; height: 1.7em; vertical-align: -.45em; border-radius: 5px; }
.ico.sm { width: 1.35em; height: 1.35em; vertical-align: -.3em; }
.stat .k .ico { width: 1.9em; height: 1.9em; vertical-align: -.6em; margin-right: .3em; }
.panel-h .ico { width: 1.9em; height: 1.9em; vertical-align: -.55em; margin-right: .15em; }
table.dt th .ico, table.dt td .ico { width: 1.5em; height: 1.5em; vertical-align: -.4em; }

/* ---------- 結果の共有（share.js が中身を入れる）

   **出どころの手前、結果を見終わったところに置く。**先生の
   「結果の共有をツール毎に散りばめる」（2026-08-30）に対応したもの。 */
.sharebar { margin: 14px 0 0; }
/* **1 行に畳む。**以前は文 2 行＋大きいボタン 3 つで、スマホでは縦に 4 段
   積まれていた（2026-09-26）。補足の 1 行はスマホでは出さない */
.sharebar-in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px; padding: 8px 10px 8px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg-sub);
}
.sharebar-tx { margin: 0; font-size: .875rem; line-height: 1.5; }
.sharebar-sub { display: block; color: var(--fg-mute); font-size: .76rem; font-weight: 500; }
.sharebar-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.sharebar-btns .btn { white-space: nowrap; text-decoration: none; font-size: .82rem; padding: .55em 1em; }
.sharebar-btns .btn.tone {
  background: var(--accent); border-color: var(--accent);
  /* **`--on-accent` ではない。**その名前の変数は定義が無く、常に #fff に
     落ちてダークのアクセント #e2c061 の上で 1.76:1 だった（2026-08-31 に実測） */
  color: var(--accent-in); font-weight: 700;
}
@media (max-width: 560px) {
  .sharebar-in { flex-direction: column; align-items: stretch; padding: 8px; gap: 6px; }
  .sharebar-tx { padding: 0 4px; }
  .sharebar-sub { display: none; }
  .sharebar-btns { flex-wrap: nowrap; }
  .sharebar-btns .btn { flex: 1 1 0; min-width: 0; text-align: center; padding: .55em .4em; }
}

/* ---------- はじめての案内（tour.js が中身を入れる）

   **先生の指示（2026-08-30）。**初回だけ自動で出て、スキップが必ず要る。
   枠は「開けた穴」ではなく輪郭線。穴を開ける方式（巨大な box-shadow）は
   スクロールのたびにずれるので、輪郭 ＋ 全体の薄い覆いにした。 */
.tour { position: fixed; inset: 0; z-index: 90; }
.tour[hidden] { display: none; }
body.tour-on { overflow: hidden; }
/* **暗くするのは枠のほう。**外側へ伸ばした影で「そこだけ明るい」を作る。
   覆いを別に敷くと、見てほしい場所まで一緒に暗くなる（2026-08-30 に直した）。
   覆いは押して閉じるためだけに残す（透明） */
.tour-veil { position: absolute; inset: 0; background: transparent; }
.tour.nospot .tour-veil { background: rgba(0, 0, 0, .55); }
.tour-ring {
  position: fixed; border-radius: 14px; pointer-events: none;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55),
              0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
  transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}
.tour-card {
  position: fixed; width: min(340px, calc(100vw - 24px));
  padding: 16px 18px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
}
.tour-card.mid { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tour-step { margin: 0 0 6px; font-size: .74rem; color: var(--fg-mute);
             font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.tour-t { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.4; }
.tour-d { margin: 0 0 14px; font-size: .88rem; line-height: 1.7; color: var(--fg); }
.tour-btns { display: flex; align-items: center; gap: 8px; }
.tour-sp { flex: 1 1 auto; }
.tour-btns .btn.tone {
  background: var(--accent); border-color: var(--accent);
  /* **`--on-accent` ではない。**その名前の変数は定義が無く、常に #fff に
     落ちてダークのアクセント #e2c061 の上で 1.76:1 だった（2026-08-31 に実測） */
  color: var(--accent-in); font-weight: 700;
}
.tour-open { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .tour-ring { transition: none; } }

/* 贈り物の効き目の絵。**色が付いているので mask ではなく <img>。**
   `.gi` の仕掛け（currentColor を型抜き）に通すと真っ黒になる */
.mtag .gico { width: 16px; height: 16px; vertical-align: -.24em; margin-right: .2em; }

/* **スマホでは入力欄の字を 16px 未満にしない。**iOS Safari は 16px 未満の
   input / select / textarea に触れた瞬間、画面ごと拡大して、指を離しても戻さない。
   各ツールの <style> は tool.css より後に読まれて同じ詳細度なら勝ってしまうので、
   ここだけは !important で押さえる（2026-08-31。390px の全 28 ページを測ったら
   16px 未満が 108 個あった。maximum-scale で拡大を殺す手は指での拡大まで奪うので取らない） */
@media (max-width: 700px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select,
  textarea { font-size: 16px !important; }
}

/* ------------------------------------------------------------ 足まわり
   **道具のページはフッターの手前に間を置かない。**`style.css` の
   `footer { margin-top: clamp(56px, 9vw, 104px) }` はトップページの
   息継ぎのための間で、盤を画面いっぱいに使う道具では余白にしか見えない
   （2026-09-03 の 44。先生の「余計な余白が生まれちゃうのはいやだ」）。
   **トップページはそのまま**（このファイルは道具のページだけが読む） */
footer { margin-top: clamp(12px, 2vw, 24px); }
/* **足元も詰める。**トップページの息継ぎ用の余白（上 32〜56px・下 40〜72px）は
   道具のページでは要らない（2026-09-26） */
footer .foot-inner { padding: clamp(16px, 2.4vw, 28px) clamp(16px, 3vw, 32px) clamp(20px, 3vw, 36px); }
footer .foot-name { margin-bottom: .3em; }
footer .foot-links { margin-bottom: .8em; font-size: .875rem; line-height: 1.8; }