/* モタスポ名鑑 — SUPER GT / スーパーフォーミュラ / スーパー耐久 / カートの人的つながり
   軸はチーム。メーカー陣営は色の手がかりとしてだけ残し、絞り込みは
   年・クラス・チームで行う。 */

:root {
  --ground: #e8ebef;
  --surface: #ffffff;
  --surface-2: #f2f4f8;
  --sp-mark: rgba(242, 201, 76, 0.55);
  --sp-mark-strong: #e0b12c;
  --sp-ink: #8a6a00;
  --line: #d0d6df;
  --line-soft: #e2e6ec;
  --ink: #13161b;
  --ink-soft: #576070;
  --ink-faint: #868f9f;

  --toyota: #d0202c;
  --honda: #1160c6;
  --nissan: #0c6d88;
  --maker-multi: #6b6f7a;
  --maker-other: #8d8577;

  --role-driver: #4d5563;
  --role-mgmt: #1d7a45;
  --role-tech: #7145cf;
  --relation: #bd3277;
  --flag: #d5382a;
  --champion: #b58309;

  --plate-bg: #14171c;
  --plate-ink: #f4f6f9;

  /* クラスの色はSUPER GTのクラス識別灯（GT500=白、GT300=黄）と
     SUPER FORMULA公式のブランドカラーから取っている。
     札を色で塗りつぶすと年表が縞になるので、色はシルエットと縁だけに置き、
     背景はごく薄く敷く。 */
  --gt500-accent: #7b8798;
  --gt500-ink: #2b323c;
  --gt300-accent: #e0ae00;
  --gt300-ink: #6b5200;
  --sf-accent: #00a87e;
  --sf-ink: #046048;
  /* スーパー耐久(S耐)公式サイトのブランド色(赤)から */
  --st-accent: #d70000;
  --st-ink: #8a0000;
  /* 全日本カート選手権はGT500(無彩色)・GT300(黄)・SF(緑)・S耐(赤)と
     被らない青を割り当てる */
  --kart-accent: #1d63c9;
  --kart-ink: #123e80;
  /* インタープロト(橙)とジャパンカップ(赤紫)は、上の5色と被らない色にする(5.71) */
  --ips-accent: #e06400;
  --ips-ink: #8a3d00;
  --jc-accent: #b0359a;
  --jc-ink: #6e1f60;
  /* KYOJO CUP(女性限定シリーズ)は、上の6色と被らないローズピンクにする(5.74) */
  --kyojo-accent: #d6336c;
  --kyojo-ink: #9c1f4e;
  /* GR86/BRZ Cup(5.91)は、上の7色と被らない銅色にする */
  --gr86-accent: #a5622f;
  --gr86-ink: #6d3c18;
  /* FIA-F4・FRJ(5.92)は、上の9色と被らないオリーブにする */
  --jr-accent: #7a8f12;
  --jr-ink: #4d5c08;

  /* ストーリーライン図の線の色。札の色をそのまま線にすると、GT500の
     「白」が白地の上で消えてしまう。3クラスが同じくらいの重さで読めるよう、
     線用だけ別に持つ（GT500は無彩色のまま、いちばん濃い一色にする） */
  --gt500-line: #454e5d;
  --gt300-line: #bf8a00;
  --sf-line: #0f9c78;

  /* 日本語は端末の書体で出す(5.315)。iPhone・Mac はヒラギノ、Android は Noto、
     Windows は游ゴシック。自前の書体(約950KB)を読まないぶん、初回が軽い */
  --font-ui: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", Meiryo, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0f1216;
    --surface: #171b21;
    --surface-2: #1d222a;
    --sp-mark: rgba(242, 201, 76, 0.32);
    --sp-mark-strong: #c9a227;
    --sp-ink: #e8c55a;
    --line: #2b323c;
    --line-soft: #232931;
    --ink: #e6e9ee;
    --ink-soft: #9aa4b4;
    --ink-faint: #6b7584;

    --toyota: #ff4d57;
    --honda: #4f96ef;
    --nissan: #37a8c4;
    --maker-multi: #9aa2b0;
    --maker-other: #a89e8c;

    --role-driver: #8b95a5;
    --role-mgmt: #4cc27c;
    --role-tech: #a583ec;
    --relation: #ec6ba6;
    --flag: #ff6152;
    --champion: #e8be49;

    --plate-bg: #e6e9ee;
    --plate-ink: #13161b;

    --gt500-accent: #aab4c2;
    --gt500-ink: #dfe4ec;
    --gt300-accent: #edc63a;
    --gt300-ink: #edc63a;
    --sf-accent: #16c79a;
    --sf-ink: #35d7ae;
    --st-accent: #ff8577;
    --st-ink: #ff8577;
    --kart-accent: #6fa8ff;
    --kart-ink: #6fa8ff;
    --ips-accent: #ff9a4d;
    --ips-ink: #ff9a4d;
    --jc-accent: #f07ad8;
    --jc-ink: #f07ad8;
    --kyojo-accent: #ff6b9d;
    --kyojo-ink: #ff6b9d;
    --gr86-accent: #d99a68;
    --gr86-ink: #e3ad82;
    --jr-accent: #b7cf4a;
    --jr-ink: #c8dd6a;

    --gt500-line: #b9c3d1;
    --gt300-line: #e0b23c;
    --sf-line: #2cc79c;
  }
}

:root[data-theme="dark"] {
  --ground: #0f1216;
  --surface: #171b21;
  --surface-2: #1d222a;
  --sp-mark: rgba(242, 201, 76, 0.32);
  --sp-mark-strong: #c9a227;
  --sp-ink: #e8c55a;
  --line: #2b323c;
  --line-soft: #232931;
  --ink: #e6e9ee;
  --ink-soft: #9aa4b4;
  --ink-faint: #6b7584;

  --toyota: #ff4d57;
  --honda: #4f96ef;
  --nissan: #37a8c4;
  --maker-multi: #9aa2b0;
  --maker-other: #a89e8c;

  --role-driver: #8b95a5;
  --role-mgmt: #4cc27c;
  --role-tech: #a583ec;
  --relation: #ec6ba6;
  --flag: #ff6152;
  --champion: #e8be49;

  --plate-bg: #e6e9ee;
  --plate-ink: #13161b;

  --gt500-accent: #aab4c2;
  --gt500-ink: #dfe4ec;
  --gt300-accent: #edc63a;
  --gt300-ink: #edc63a;
  --sf-accent: #16c79a;
  --sf-ink: #35d7ae;
  --st-accent: #ff8577;
  --st-ink: #ff8577;
  --kart-accent: #6fa8ff;
  --kart-ink: #6fa8ff;
  --ips-accent: #ff9a4d;
  --ips-ink: #ff9a4d;
  --jc-accent: #f07ad8;
  --jc-ink: #f07ad8;
  --kyojo-accent: #ff6b9d;
  --kyojo-ink: #ff6b9d;
  --gr86-accent: #d99a68;
  --gr86-ink: #e3ad82;
  --jr-accent: #b7cf4a;
  --jr-ink: #c8dd6a;

  --gt500-line: #b9c3d1;
  --gt300-line: #e0b23c;
  --sf-line: #2cc79c;
}

* { box-sizing: border-box; }

/* iOSでホーム画面に追加して単独起動(display: standalone)したとき、
   height: 100% だけだと実際の画面より低く解決されることがあり、
   下端に何も描かれない余白が残っていた(ユーザー指摘、2026-09-27)。
   dvh(動的ビューポート高さ)に対応したブラウザではそちらを使う。
   未対応ブラウザには100%(従来どおり)がそのまま効く。 */
html, body { height: 100%; height: 100dvh; margin: 0; }

/* それでもiPhone Safariのホーム画面アプリ(PWA)で、下端にSafariのアドレス
   バーが入る位置ぶんの余白が残った(ユーザー指摘、2026-09-30)。100%/100dvhは
   iOSがブラウザの画面(アドレスバー付き)の高さで解決することがあり、
   PWAの実際の画面より低くなる。bodyを画面に固定(position: fixed; inset: 0)
   すれば、高さの計算を経由せず、レイアウトビューポート(=画面いっぱい)そのものに
   なる。アプリ本体は内側のスクロール領域で動いていて、bodyはもともと
   overflow: hiddenなので、固定しても見た目や操作は変わらない。 */
body {
  position: fixed;
  inset: 0;
  height: auto;
}

/* iOS 26のホーム画面アプリ(PWA)で、下端にステータスバーの高さぶん(47〜59pt)の
   帯が残る(ユーザー指摘、2026-09-30、実機のスクリーンショットで確認)。
   status-bar-style=black-translucent と viewport-fit=cover を併用すると、
   ページは画面の最上端から描かれるのに、100%・100vh・100dvh・100svh・
   innerHeight、そしてposition: fixedの基準になる枠まで、すべて
   「画面 − ステータスバー」の高さで据え置かれる(iOS 26のWebKitの退行)。
   この状態で唯一画面いっぱいの高さを返すのが100lvh(大きいビューポートの高さ)。
   そこで、ホーム画面アプリで開いているときだけ、htmlを100lvhにし、bodyは
   固定をやめてhtmlの高さに合わせる(固定配置は短い枠で切り取られるため。
   2度目の対応では、bodyを伸ばしても下端の文字が切れた)。
   通常のSafariタブ・PCは display-mode: standalone に当たらないので変わらない。 */
@media (display-mode: standalone) {
  html {
    height: 100lvh;
    overflow: hidden;
    background: var(--surface);
  }
  body {
    position: relative;
    inset: auto;
    height: 100%;
  }
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

/* ホーム画面に追加したとき(iOSのWebアプリ)、index.htmlの
   viewport-fit=cover と status-bar-style=black-translucent によって、
   ページが時計・電池のステータスバーの下(画面のいちばん上)から
   描かれる。何もしないと上端のボタン列がステータスバーの裏に潜り、
   押せなくなる(ユーザー指摘、2026-09-26。5.68)。
   env(safe-area-inset-*) はその潜る分の幅で、Safariの通常のタブや
   PCでは0になるので、ふだんの見た目は変わらない。
   上はbodyの先頭に帯を1本足して空ける。帯の色はアイコン・起動画面と
   同じ濃い色(manifest.jsonのtheme_color)にする。black-translucentの
   ステータスバーは文字が白いので、明るい地の上だと時計が読めなくなる。 */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

body::before {
  content: "";
  flex: 0 0 env(safe-area-inset-top, 0px);
  background: #13161b;
}

button { font-family: var(--font-ui); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ---------- top bar(5.309) ----------
   上の帯は1つの道具として組む。以前はボタン・タブ・検索・緑の帯・赤い但し書きの帯が、それぞれ別の
   見た目で5段に積み重なり(スマホで画面の半分)、機能を足した跡がそのまま見えていた。
   ・PC: メニュー/名前/タブ/検索/用語集を1行に。 ・スマホ: 名前の行・検索・タブの3段。
   ・押せる物の形は2つだけ: 枠の無い文字のボタン(タブ・戻る)と、角丸の枠のボタン(それ以外)。
   ・色は墨の濃淡だけ。色が付くのは王者(金)と、データの意味(クラス・陣営)の札だけ。 */

.topbar {
  flex: 0 0 auto;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0 14px;
}

.topbar-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
}

.brand { min-width: 0; flex: 0 1 auto; }

/* サイト名。トップ・年・王者のページでは見出し(h1)、人物・チームのページでは名前の方を h1 にするので
   ふつうの段落(scripts/build_pages.py が差し替える。5.301) */
.brand-name {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.brand-sub {
  margin: 1px 0 0;
  max-width: 230px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* PCでも幅が狭い間(〜1100px)は、検索欄に場所を譲る: タブは短い名前、オフライン・用語集は印だけ、
   名前の下の大会の一覧は出さない */
@media (min-width: 821px) and (max-width: 1100px) {
  .brand-sub { display: none; }
  .v-long { display: none; }
  .view-switch { margin-left: 4px; }
  .view-switch button { padding: 0 10px; }
  .tb-offline .icon-label, .tb-glossary .icon-label, .tb-menu .icon-label { display: none; }
  .tb-offline, .tb-glossary, .tb-menu { width: 36px; padding: 0; }
}

/* 枠のボタン。上の帯・引き出しで共通 */
.icon-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.icon-button:hover { background: var(--surface-2); }

.icon-lines,
.icon-lines::before,
.icon-lines::after {
  display: block;
  width: 15px;
  height: 1.75px;
  border-radius: 1px;
  background: currentColor;
  content: "";
}

.icon-lines { position: relative; }
.icon-lines::before { position: absolute; top: -5px; }
.icon-lines::after { position: absolute; top: 5px; }

/* 電波(アンテナ)の印。文字(記号)は書体の字形詰め(scripts/build_fonts.py)から外れると
   豆腐(□)になるおそれがあるので、CSSだけで描く */
.icon-signal {
  display: block;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 3px 5px no-repeat,
    linear-gradient(currentColor, currentColor) 5px 100% / 3px 9px no-repeat,
    linear-gradient(currentColor, currentColor) 10px 100% / 3px 13px no-repeat;
}

/* 用語集の「?」は丸の中に */
.tb-q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--surface);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

/* タブ: 枠の無い文字に、選んでいる物だけ下線。帯の高さいっぱいを押せる */
.view-switch {
  display: flex;
  align-self: stretch;
  gap: 2px;
  margin-left: 10px;
}

.view-switch button {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: none;
  background: none;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
}

.view-switch button:hover { color: var(--ink); }
.view-switch button.is-active { color: var(--ink); }
.view-switch button.is-active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--ink);
}

/* 検索: 枠の無い淡い地の欄に、虫めがねの印(CSSの絵) */
.search-wrap {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 440px;
  margin-left: auto;
}

#search-input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 34px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--surface-2) no-repeat 12px 50% / 15px 15px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23868f9f' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l3.5 3.5'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}
#search-input:focus { outline: none; border-color: var(--ink-faint); background-color: var(--surface); }
/* ブラウザの小さな×は出さず、自前の×(.search-clear)にする(5.323) */
#search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
#search-input { padding-right: 40px; }
.search-clear {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.search-clear[hidden] { display: none; }
.search-clear span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink-faint);
  color: var(--surface);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.search-clear:hover span { background: var(--ink-soft); }
/* 一覧を絞り込んでいる間は、欄そのものを「掛かっている」見た目に(白地・濃い枠・太字) */
.search-wrap.is-filtering #search-input {
  border-color: var(--ink-soft);
  background-color: var(--surface);
  font-weight: 700;
}
/* サイト名は最初の画面へのリンク(5.323)。見た目は今までの名前のまま */
.brand-home { color: inherit; text-decoration: none; }
.brand-home:hover { opacity: 0.75; }
.brand-home:focus-visible { outline: 2px solid var(--ink-faint); outline-offset: 2px; border-radius: 4px; }

/* 検索の候補(5.322)。検索欄のすぐ下に浮かぶ1枚の板。種類(人物・チーム・車種・スポンサー)ごとに小見出しを付け、
   1行に名前・読み、2行目に何者かの一言。選んでいる行は淡い地。最後の段は「いまの一覧を絞り込む」など */
.search-wrap { position: relative; }
.search-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 300px;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  z-index: 60;
  text-align: left;
}
.search-suggest[hidden] { display: none; }
.ss-group + .ss-group { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.ss-head {
  padding: 6px 14px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.ss-opt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 14px;
  cursor: pointer;
}
.ss-opt.is-active { background: var(--surface-2); }
.ss-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ss-name { font-size: 14px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-name mark { background: none; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.ss-kana { flex: 0 1 auto; font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-sub { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-more .ss-name { font-weight: 500; }
.ss-filter .ss-name::before { content: "≡ "; color: var(--ink-faint); }
.ss-empty { margin: 0; padding: 8px 14px 6px; font-size: 12.5px; color: var(--ink-soft); }
#search-input::placeholder { color: var(--ink-faint); font-size: 12.5px; }

.entry-chip {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface-2);
  white-space: nowrap;
  flex: 0 0 auto;
}

.entry-chip .season,
.entry-chip .maker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.entry-chip .count {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.entry-chip .unit { font-size: 10px; color: var(--ink-faint); }

.entry-chip.is-cross {
  border-color: color-mix(in srgb, var(--role-mgmt) 45%, var(--line));
  background: color-mix(in srgb, var(--role-mgmt) 10%, var(--surface));
}

.entry-chip.is-cross .maker { color: var(--role-mgmt); }

/* 「2001年45チーム114人」の札(.grid-summary)は、検索ができること自体が
   埋もれて見つけにくくなる原因だったので常に消し、その分を検索窓に回す。
   スマホはもともとこの並び（幅いっぱいの検索窓）だったので、PCもそろえる。 */
.grid-summary { display: none; }





/* ---------- 読み込み中の板 ---------- */

/* この画面は、開いてから使えるようになるまでメインスレッドが数秒止まる
   （2.5MBのデータを読み、4,800本の関係を組み、24,000個の升目を作る）。
   止まっている間、JSは1行も動かないし、requestAnimationFrame も来ない。
   数字をカウントアップさせる類は、そこで必ず固まる。固まったカウンタは
   何も無いより悪い（壊れたように見える）。

   一方 transform と opacity のアニメーションは、メインスレッドではなく
   コンポジタが回す。実測で、5秒間の同期ブロック中も60fpsで276フレーム
   描かれ続けた。だから動きはこの2つだけで作る。JSは節目で値を変えるだけ。 */

.boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ground);
  /* 消えるのも transform/opacity なので、直後にメインスレッドが詰まっても
     最後まで滑らかに消える */
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.boot.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.boot-inner {
  width: min(420px, calc(100% - 48px));
  text-align: center;
}

.boot-title {
  margin: 0;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* 年の幅はこの資料の背骨なので、待っている間にそれを見せる */
.boot-span {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.boot-rule { flex: 1; height: 1px; background: var(--line); }

.boot-counts {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.boot-counts li {
  display: flex;
  align-items: baseline;
  gap: 3px;
  /* 値が決まるまでは伏せておく。0から回して見せると、
     そこで止まったときに嘘になる */
  opacity: 0.28;
  transition: opacity 0.5s ease;
}

.boot-counts li.is-known { opacity: 1; }

.boot-counts b {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.boot-counts span { font-size: 10.5px; color: var(--ink-faint); }

.boot-bar {
  position: relative;
  height: 3px;
  margin: 22px 0 0;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

/* 進み具合。scaleX を transition で動かすので、値を変えた直後に
   メインスレッドが数秒詰まっても、その間ずっと伸び続ける。
   節目でしか値を変えないのに、動きは途切れない。 */
.boot-fill {
  display: block;
  height: 100%;
  /* 色は持たせない。この画面で色が意味を持つのは陣営・クラス・役職・
     血縁・要確認・王者で、全部埋まっている。読み込みの棒に
     そのどれかを借りると、色と意味の対応が崩れる。 */
  background: var(--ink-soft);
  transform-origin: 0 50%;
  transform: scaleX(0.04);
  transition: transform 1.6s cubic-bezier(0.22, 0.7, 0.2, 1);
}

/* 進みが次の節目まで動かない間も、ここだけは動いている。
   「息をしている」ことだけを伝える役で、進み具合は主張しない。 */
.boot-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 34%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 22%, transparent), transparent);
  transform: translateX(-100%);
  animation: boot-sweep 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes boot-sweep {
  to { transform: translateX(330%); }
}

.boot-step {
  margin: 11px 0 0;
  font-size: 10.5px;
  color: var(--ink-faint);
  min-height: 1.6em;
}

/* 動きを減らす設定の人には、掃引を止めて進み具合だけ残す */
@media (prefers-reduced-motion: reduce) {
  .boot-bar::after { display: none; }
  .boot-fill { transition-duration: 0.2s; }
}

/* ---------- focus (ego) bar ---------- */

/* 上の帯の下の「いまどこを見ているか」の帯(5.309)。1年だけの表示では年送り、相関図・絞り込みでは
   何を中心にしているか。以前の緑の地はやめ、上の帯と同じ白い地に「戻る」と見出しを置く */
.focus-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.focus-bar[hidden] { display: none; }

/* 戻るは枠の無い文字のボタン(「← 一覧へ戻る」「← 全ての年へ」) */
.focus-back {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 10px 0 6px;
  margin-left: -6px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.focus-back:hover { background: var(--surface-2); }
.focus-label { min-width: 0; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-label strong { color: var(--ink); font-size: 14px; }

/* ---------- 未検証の但し書き(下の帯の中。5.309) ---------- */

.notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notice[hidden] { display: none; }
.notice strong {
  flex: 0 0 auto;
  padding: 0 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--flag) 13%, var(--surface));
  color: var(--flag);
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0;
}
.notice-text { overflow: hidden; text-overflow: ellipsis; font-family: var(--font-ui); letter-spacing: 0; }

/* ---------- workspace ---------- */

.workspace {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  position: relative;
}

/* 絞り込みは画面の幅にかかわらず引き出しにする。左上のボタンを押したときだけ開く。
   常に出しておくと、見るもの（年表と相関図）の隣にずっと操作列が居座って、
   画面のいちばん目立つ場所を絞り込みが取ってしまう。 */
.rail {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(300px, 86vw);
  z-index: 40;
  transform: translateX(-102%);
  transition: transform 0.18s ease;
  box-shadow: 4px 0 22px rgba(0, 0, 0, 0.22);
  overflow-y: auto;
  padding: 8px 14px 24px;
  /* 画面の端まで出る引き出しなので、ステータスバー・ホームバー・
     横向き時の切り欠きの分を内側に空ける(bodyの注記参照) */
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(14px + env(safe-area-inset-left, 0px));
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rail.is-open { transform: none; }

.rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
}

.rail-head .icon-button { border: none; padding: 4px 8px; font-size: 18px; }
.rail-head .icon-label { display: none; }

.rail-scrim {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(0, 0, 0, 0.42);
}

.rail-scrim[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rail { transition: none; }
}

/* PCでは絞り込みを最初から開いておき、列として並べる。
   引き出しとして重ねると、常に出しておきたいものに影と暗幕が付いてしまう。
   しまうのは左上のボタン（＝スマホと同じ場所）。 */
@media (min-width: 821px) {
  .rail {
    position: static;
    flex: 0 0 184px;
    width: 184px;
    transform: none;
    transition: none;
    box-shadow: none;
    padding: 12px 10px 20px;
  }

  .rail:not(.is-open) { display: none; }
  .rail-head { display: none; }
  .rail-scrim { display: none; }
}

.rail-title {
  margin: 0 0 7px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.rail-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.rail-actions button {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 10.5px;
  cursor: pointer;
}

.rail-actions button:hover { background: var(--surface-2); }

.filter-list, .key-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.filter-list-scroll {
  max-height: 230px;
  overflow-y: auto;
  padding-right: 2px;
}

.key-list {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--line-soft);
  gap: 5px;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  margin: 0 -6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.filter-row:hover { background: var(--surface-2); }

.filter-row input[type="checkbox"] {
  margin: 0;
  width: 15px;
  height: 15px;
  accent-color: var(--ink-soft);
  cursor: pointer;
  flex: 0 0 auto;
}

.class-tag.is-key { font-size: 9.5px; padding: 0 6px; }

.filter-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.filter-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  flex: 0 0 auto;
}

.filter-key {
  flex: 0 0 auto;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--ink-faint);
}

.filter-key.key-node { width: 11px; height: 11px; border-radius: 50%; }

.key-maker-toyota { background: var(--toyota); }
.key-maker-honda { background: var(--honda); }
.key-maker-nissan { background: var(--nissan); }
.key-maker-other { background: var(--ink-soft); }
.key-maker-multi {
  background: linear-gradient(to right,
    var(--toyota) 0 33.33%, var(--honda) 33.33% 66.66%, var(--nissan) 66.66% 100%);
}
.key-driver { background: var(--role-driver); }
.key-mgmt { background: var(--role-mgmt); }
.key-tech { background: var(--role-tech); }
.key-relation { background: var(--relation); }
.key-flag { background: var(--flag); }
.key-dotted { background: none; border-top: 2px dotted var(--ink-faint); height: 0; }

.key-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-soft);
}

.rail-note {
  margin: 8px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* ---------- storyline ---------- */

/* 横軸に年、チームを帯、ドライバーを線として流す図。
   年表（升目）と相関図（つながり）のあいだを埋めて、移籍を線の曲がりで見せる。 */

.timeline.is-story {
  display: block;
  gap: 0;
  background: var(--ground);
  border-bottom: none;
}

.story {
  --story-head-col: 118px;
  --story-head-h: 26px;
  display: grid;
  grid-template-columns: var(--story-head-col) var(--story-w);
  grid-template-rows: var(--story-head-h) var(--story-h);
  width: max-content;
}

.story-corner {
  grid-area: 1 / 1;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  padding: 0 8px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.story-years {
  grid-area: 1 / 2;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.story-year {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding-left: 9px;
  border-left: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
}

.story-heads {
  grid-area: 2 / 1;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  border-right: 1px solid var(--line);
}

.story-team {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--band-h);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 1px 6px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 11px;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
}

/* チーム名は列幅を広げずに収める。まず語の切れ目で折り返し、
   それでも帯の高さに入らないものだけ、入るところまで字を小さくする
   （幅を広げると、そのぶん絵の側が狭くなるため） */
.story-team-name {
  min-width: 0;
  max-height: 100%;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.18;
}
.story-team:hover { background: var(--surface-2); }
.story-team .camp-dot { width: 7px; height: 7px; }

.story-plot { grid-area: 2 / 2; display: block; }

.story-band { fill: var(--surface); }
.story-band.is-alt { fill: var(--surface-2); }
.story-grid { stroke: var(--line-soft); stroke-width: 1; }

/* この図で色を持つのは線だけ。クラスの3色（GT500=白の識別灯、GT300=黄、
   SF=公式の緑）をそのまま使う。陣営は帯の並び順と行頭の点が持っている。 */
.story-line {
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.82;
  cursor: pointer;
}

.story-line[data-class="gt500"] { stroke: var(--gt500-line); }
.story-line[data-class="gt300"] { stroke: var(--gt300-line); }
.story-line[data-class="sf"] { stroke: var(--sf-line); }
.story-line[data-class="other"] { stroke: var(--ink-faint); }
.story-line:hover { stroke-width: 3.6; opacity: 1; }

/* 監督・エンジニアなどとして居た期間の線(5.119)。ドライバー時代の実線と
   見分けられるよう破線にする。色(クラス)はドライバーの線と同じ。 */
.story-line.is-staff { stroke-dasharray: 5 4; stroke-linecap: butt; }
.story-name.is-staff { font-style: italic; }

/* 検索で絞り込んだ本人。周りの人の線の中で自分を見失わないようにする */
.story-line.is-focus { stroke-width: 3.2; opacity: 1; }
.story-name.is-focus { fill: var(--ink); font-weight: 700; }

/* 名前は「その人の詳細へ飛ぶ」入口。線は「読む」ためのもの、と役割を分ける */
.story-name {
  fill: var(--ink-soft);
  font-family: var(--font-ui);
  cursor: pointer;
}

.story-name:hover { fill: var(--ink); text-decoration: underline; }

/* 選んだ1本を貼り付けて読む。年の境目では線が束になるので、
   カーソルを乗せる方式だと移籍先へスクロールした瞬間に外れてしまう。 */
.story-plot.has-pin .story-line { opacity: 0.08; }
.story-plot.has-pin .story-line.is-pinned { opacity: 1; stroke-width: 3.4; }
.story-plot.has-pin .story-name { opacity: 0.18; }
.story-plot.has-pin .story-name.is-pinned {
  opacity: 1;
  fill: var(--ink);
  font-weight: 700;
}

/* 新人。王者の金と並べるので、こちらは色を足さず枠だけにする */
/* インタープロト・ジャパンカップのジェントルマン(アマチュア)ドライバー。
   ルーキーと同じ控えめな札にする(プロ側には何も付けない) */
.amateur,
.rookie {
  flex: 0 0 auto;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.story-hint {
  position: sticky;
  left: 0;
  bottom: 0;
  z-index: 5;
  box-sizing: border-box;
  /* 見えている幅(.timeline-wrapの幅)いっぱい。横にスクロールしても左に貼り付いたまま */
  width: 100cqw;
  margin: 0;
  padding: 7px 12px 8px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink-soft);
  white-space: normal;
}
.story-hint p { margin: 0; }
.story-hint p + p { margin-top: 2px; }
.story-hint .sh-lead { color: var(--ink); }
.story-hint strong { color: var(--ink); }
.story-hint .sh-keys { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.story-hint .sh-key { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
/* 図の線と同じ色・太さの短い線 */
.story-hint .sh-swatch { display: inline-block; width: 16px; height: 0; border-top: 3px solid var(--ink-faint); }
.story-hint .sh-swatch[data-class="gt500"] { border-top-color: var(--gt500-line); }
.story-hint .sh-swatch[data-class="gt300"] { border-top-color: var(--gt300-line); }
.story-hint .sh-swatch[data-class="sf"] { border-top-color: var(--sf-line); }
.story-hint .sh-swatch[data-class="staff"] { border-top: 2px dashed var(--ink-soft); }
.story-hint .sh-note { color: var(--ink-faint); }

/* ---------- canvas ---------- */

.canvas-wrap { flex: 1 1 auto; min-width: 0; position: relative; }
.canvas-wrap[hidden] { display: none; }

#cy { width: 100%; height: 100%; background: var(--ground); }

.canvas-hint {
  position: absolute;
  left: 12px;
  bottom: 12px;
  margin: 0;
  padding: 4px 9px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border: 1px solid var(--line-soft);
  color: var(--ink-faint);
  font-size: 10.5px;
  pointer-events: none;
}

.canvas-hint[hidden] { display: none; }

/* 相関図の凡例。図の左上に1〜2行で重ねる(図の側はこの高さぶん
   上端を空けて組む、app.jsのegoUsableBounds)。文字は地のインク、
   色は横の小さな印だけに持たせる。 */
.graph-legend {
  position: absolute;
  top: 8px;
  left: 10px;
  right: 10px;
  pointer-events: none;
}

.graph-legend[hidden] { display: none; }

.graph-legend ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
  font-size: 10.5px;
  line-height: 1.5;
}

.graph-legend li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  text-shadow: 0 0 3px var(--ground), 0 0 3px var(--ground);
}

/* スマホでは1行に収めて、図の縁の余白の中に置く(app.jsのegoUsableBounds) */
@media (max-width: 640px) {
  .graph-legend { top: 6px; left: 8px; right: 8px; }
  .graph-legend ul { gap: 2px 8px; font-size: 10px; }
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--surface);
}

.key-maker-none { background: var(--ink-soft); }

.legend-line { width: 18px; height: 6px; }
.legend-line + .legend-line { margin-left: -3px; }
.legend-line line { stroke: var(--ink-soft); stroke-linecap: round; }

/* 線が1本も無い図で、その理由を知らせる */
.legend-empty {
  margin: 0;
  padding: 6px 9px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.55;
}

/* ---------- timeline ---------- */

.timeline-wrap {
  flex: 1 1 auto;
  min-width: 0;
  overflow: auto;
  background: var(--ground);
  overscroll-behavior: contain;
  /* 中に置く物の幅を、見えている幅に合わせるため(cqw。移籍図の説明など) */
  container-type: inline-size;
}

.timeline-wrap[hidden] { display: none; }

/* 表全体を1枚の大きなgridにはしない。見出し行・各行をそれぞれ独立した
   小さなgrid(.tl-headrow/.tl-row)にして、同じ列の並び(--tl-cols)を
   共有させる。1枚のgridだと、1行埋めるたびにブラウザが表全体(人物年表で
   968行×34列)を組み直し、画面外の行の組版を省く(content-visibility)
   こともできなかった。iPhoneで人物年表タブを開くのに数秒かかっていた
   主因(5.68)。 */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  min-width: max-content;

  /* 列幅。行頭にはチーム名・人名が入るので広めに取る */
  --tl-head-col: 50px;
  --tl-cell-col: minmax(200px, 264px);
}

.tl-headrow, .tl-row {
  display: grid;
  grid-template-columns: var(--tl-cols);
  gap: 1px;
}

/* 見出し行は年。行ごと上に貼り付ける(升目1つ1つを貼り付けると、
   行の箱の外へは出られないので効かない)。 */
.tl-headrow {
  position: sticky;
  top: 0;
  z-index: 3;
}

/* 画面の外にある行は、中身の組版・描画を省くようブラウザに任せる。
   省いている間の高さは contain-intrinsic-size で言っておく
   （言わないと高さ0とみなされ、スクロールバーが伸び縮みする）。
   autoを付けているので、1度描いた行は実際の高さを覚えておいてもらえる。 */
.tl-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px auto 96px;
}

.tl-head, .tl-name, .tl-cell { background: var(--surface); padding: 8px 10px; }

/* まだ升目を組み立てていない行の、残り全列をまたぐ空の箱(app.jsの
   fillTimelineRow参照)。組み立て前後で行の高さが変わりにくいよう、
   空の升目と同じ最低の高さを持たせる。 */
.tl-pending {
  grid-column: 2 / -1;
  min-height: 96px;
  background: var(--surface);
}

/* 見出し行は年、行頭はチーム・人物。1つの対象の推移を横一列で追える。 */
.tl-head {
  background: var(--surface-2);
  border-bottom: 2px solid var(--ink-soft);
  padding: 7px 10px;
}

.tl-head.tl-corner {
  position: sticky;
  left: 0;
  z-index: 4;
  display: flex;
  align-items: flex-end;
}

.tl-corner-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* 年の見出しは押せる。押すとその年だけになる。
   ボタンの既定の見た目は全部落として、年表の升目のままに見せる
   （枠や地色を付けると、33個並んだときに年表が道具箱になる）。 */
.tl-head.tl-year-head {
  padding: 6px 10px 7px;
  border: 0;
  border-bottom: 2px solid var(--ink-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* 指したときの色は、札の中（.member / .band）と同じ無彩色の淡い墨にする。
   押せる場所ごとに違う色が出ると、色が意味を持っているのか
   ただの反応なのかが読み取れなくなる。 */
.tl-head.tl-year-head:hover { background: color-mix(in srgb, var(--ink) 8%, var(--surface-2)); }

/* 年の見出しが押せることの手がかり(5.118)。数字の下に薄く添えるだけにして、
   33個並んでも道具箱に見えないようにする。 */
.tl-year-cue {
  display: block;
  margin-top: 2px;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--ink-faint);
  white-space: nowrap;
}
.tl-head.tl-year-head:hover .tl-year-cue { color: var(--ink); }

/* 初回の案内で指している年の見出し */
.year-hint-target {
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 2px var(--ink);
}

/* ---------- 1年だけ表示(5.118) ----------
   列を画面の残り幅いっぱいにし、升目の中の札をタイル状に並べる。 */
.timeline.is-single-year { min-width: 0; width: 100%; }
.timeline.is-single-year .tl-cell {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  align-content: start;
  gap: 6px 8px;
  min-width: 0;
}
.timeline.is-single-year .tl-cell > * { margin-top: 0; }
.timeline.is-single-year .tl-cell:empty::after {
  content: "この年の記録はありません";
  font-size: 11px;
  color: var(--ink-faint);
}
/* 王者年表の1年だけ表示は、年を上の帯が出しているので、見出しの行(「2024年」だけの行)は出さない */
.timeline.is-single-year .tl-headrow { display: none; }
/* 1年だけ表示の行の見出しに添えるチームの一言説明(5.249)。全年の年表では出さない。
   王者年表の大会の一言と同じ小さい文字で、収まる行数(PCは4行、スマホは2行)で切る */
.tl-blurb.is-row-blurb { display: none; }
.timeline.is-single-year .tl-blurb.is-row-blurb {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 500;
}
.tl-year-head.is-single { display: flex; align-items: baseline; gap: 3px; cursor: default; }
.tl-year-head.is-single .tl-year-value { font-size: 20px; }
.tl-year-unit { font-size: 12px; font-weight: 700; }

.tl-name {
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  background: var(--surface);
  border-right: 2px solid var(--ink-soft);
  padding: 8px 10px;
}

.tl-name.is-person .tl-name-label { flex-direction: row; align-items: center; gap: 6px; }

.tl-year-value {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--ink);
}

/* 行が長いとチーム名が画面外に出てしまうので、見出し行のすぐ下に貼り付ける。
   押せることが伝わるよう、枠と「相関図 ›」を付けたボタンの見た目にする */
.tl-name-button {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}


.tl-name-button:hover {
  background: color-mix(in srgb, var(--ink) 8%, var(--surface-2));
  border-color: var(--ink-faint);
}

.tl-name-button:hover .tl-go { color: var(--ink-soft); border-color: currentColor; }

/* 王者年表の行頭（GT500/GT300/SF）は相関図に飛べる対象ではないので、
   見た目だけ借りて押せる手がかり（カーソル・ホバー色・「›」）は消す。 */
.tl-name-button.is-static { cursor: default; }
.tl-name-button.is-static:hover { background: var(--surface-2); border-color: var(--line); }
.tl-name-button.is-static .tl-team::after { content: none; }

/* 「相関図へ飛ぶ」ことを示すラベル。狭いところでは記号だけにする */
.tl-go {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-faint);
  white-space: nowrap;
}

.tl-go::after { content: " ›"; }

.tl-name-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tl-team { font-size: 12.5px; font-weight: 700; }

/* 王者年表の行頭に添える「ドライバーズ」「チームズ」。.tl-subと違い
   常に必須の情報なので、幅が無い場面(90度回転表示)でも隠さない。 */
.tl-kind {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.tl-blurb {
  font-size: 9px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-soft);
}

.tl-sub {
  font-size: 9.5px;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tl-badges { display: flex; gap: 4px; flex: 0 0 auto; }

.tl-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--surface);
  padding: 8px 10px;
  min-width: 212px;
}

/* 横倒しの名前が収まるだけの高さは、中身のない行にも持たせる */
.tl-cell { min-height: 96px; }

/* 行が高いぶん、1行を横に追う間に隣の行と混ざりやすい。
   流れの図と同じく、1行おきに地の色を変えて目印にする。
   ただし札の地（--surface-2）と同じ色にすると札が地に溶けるので、
   行の色はその手前で止める。地・札・札の見出しで3段になる。 */
.tl-name.is-alt,
.tl-pending.is-alt,
.tl-cell.is-alt { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }

/* 行頭は縦向きにして、本文に幅を明け渡す。writing-mode: vertical-rl は
   端末によって縦組みメトリクスがない書体に当たると字が重なるので、
   横書きのまま90度回して倒す。回転後の箱は行の高さに影響しないよう絶対配置。 */
.tl-name { padding: 0; overflow: hidden; }

.tl-name-button {
  position: absolute;
  top: 6px;
  left: 3px;
  /* 倒した名前の長さは行の高さに収まらないと切れる。行ごとの高さはJSが
     --tl-row-h で渡してくるので、それを上限にして足りなければ折り返す */
  width: max-content;
  max-width: calc(var(--tl-row-h, 240px) - 12px);
  max-height: 46px;
  min-height: 0;
  padding: 1px 4px;
  gap: 4px;
  transform-origin: 0 0;
  transform: rotate(90deg) translateY(-100%);
  overflow: hidden;
}

.tl-team { overflow-wrap: anywhere; }

.tl-name-label { display: flex; flex-direction: row; align-items: center; gap: 5px; }
.tl-name .camp-dot { width: 6px; height: 6px; }
.tl-team { font-size: 11px; line-height: 1.15; }

/* 2行・3行でも収まらない長い名前は、その行だけ文字を小さくする */
.tl-name-button.is-cramped .tl-team { font-size: 9px; line-height: 1.1; }

/* 「›」は名前と同じ行に流す。独立した要素にすると1行ぶん場所を食う。
   押せることの手がかりであって、意味を持つ色ではないので無彩色にする */
.tl-team::after {
  content: " ›";
  font-weight: 700;
  color: var(--ink-faint);
}
.tl-sub { display: none; }
/* 90度回転の行頭は縦の長さが足りない行(チームズ等)があるので、一言は出さない。ラベルを押せば説明が開く */
.tl-blurb { display: none; }

/* 王者は各セルの中にも出ているので、狭い行頭では省く */
.tl-badges { display: none; }

/* 「相関図 ›」のピルは横倒しの行頭には入らない。手がかりは枠と名前の「›」 */
.tl-go { display: none; }

.tl-head.tl-corner { align-items: center; justify-content: center; padding: 5px 1px; }

/* PCでは行頭を倒さない。行の主語（チーム名・人物名）はその行でいちばん
   重要な文字なのに、50pxに倒した小さな名前では「何の行か」を言えていない。
   スマホは幅が本当に足りないので倒したままにする。 */
@media (min-width: 821px) {
  .timeline { --tl-head-col: 158px; }

  .tl-name { padding: 9px 10px; overflow: visible; }

  .tl-name-button {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    max-height: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 7px 9px;
  }

  .tl-name-label { flex-direction: column; align-items: flex-start; gap: 2px; }

  /* 車種年表の行名は、カタカナになって長くなった(「ランボルギーニ ウラカン GT3」
     「フェアレディZ (RZ34)」など)ので、列の幅で折り返す */
  .tl-name-button.is-static { white-space: normal; }
  .tl-name-button.is-static .tl-name-label { width: 100%; min-width: 0; }

  .tl-team,
  .tl-name-button.is-cramped .tl-team {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.32;
  }

  .tl-sub { display: block; font-size: 10px; color: var(--ink-faint); }
  .tl-blurb { display: block; }
  .tl-badges { display: flex; gap: 4px; flex-wrap: wrap; }

  .tl-head.tl-corner { align-items: center; justify-content: flex-start; padding: 5px 10px; }
  .tl-corner-label { font-size: 9.5px; letter-spacing: 0.08em; text-align: left; }
}
.tl-corner-label { font-size: 8px; letter-spacing: 0; text-align: center; }

/* ---------- timeline: team axis ---------- */

.entry {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  overflow: hidden;
}

.entry + .entry { margin-top: 5px; }

.entry-head {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  padding: 3px 6px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

/* クラスが主役。車番は添え物として枠線だけにする。

   色はこの競技の約束事に合わせる: GT500はクラス識別灯の白、GT300は黄、
   SFは公式サイトの緑。ただし年表には札が何百と並ぶので、面で塗ると画面が
   縞模様になる。色は「クルマのシルエットと縁」に置き、背景はごく薄い色味に
   とどめて、形（GTは角、SFは丸）とシルエットでも二重に分ける。 */
.class-tag {
  --class-accent: var(--gt500-accent);
  --class-ink: var(--gt500-ink);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--class-accent) 16%, var(--surface));
  color: var(--class-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--class-accent) 60%, transparent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.45;
  white-space: nowrap;
}

.class-car {
  width: 15px;
  height: 9px;
  flex: 0 0 auto;
  fill: var(--class-accent);
}

/* GT500の色は「白い識別灯」なので、地を白のままにして縁で見せる */
.class-tag[data-class="gt500"] { background: var(--surface); }

.class-tag[data-class="gt300"] {
  --class-accent: var(--gt300-accent);
  --class-ink: var(--gt300-ink);
}

.class-tag[data-class="sf"] {
  --class-accent: var(--sf-accent);
  --class-ink: var(--sf-ink);
}

.class-tag[data-class="st"] {
  --class-accent: var(--st-accent);
  --class-ink: var(--st-ink);
}

.class-tag[data-class="ips"],
.champ-row-head[data-class="ips"] {
  --class-accent: var(--ips-accent);
  --class-ink: var(--ips-ink);
}

.class-tag[data-class="jc"],
.champ-row-head[data-class="jc"] {
  --class-accent: var(--jc-accent);
  --class-ink: var(--jc-ink);
}

.class-tag[data-class="jr"],
.champ-row-head[data-class="jr"] {
  --class-accent: var(--jr-accent);
  --class-ink: var(--jr-ink);
}

.class-tag[data-class="gr86"],
.champ-row-head[data-class="gr86"] {
  --class-accent: var(--gr86-accent);
  --class-ink: var(--gr86-ink);
}

.class-tag[data-class="kyojo"],
.champ-row-head[data-class="kyojo"] {
  --class-accent: var(--kyojo-accent);
  --class-ink: var(--kyojo-ink);
}

/* 王者年表の行頭（GT500/GT300/SF）。その行の升目にはもうクラス札を
   重ねて出していないので、行全体をクラスの色で塗って代わりに示す。
   class-tagと同じ配色トークンを使うので、年表側の色分けとずれない。 */
.champ-row-head {
  --class-accent: var(--gt500-accent);
  --class-ink: var(--gt500-ink);
  background: color-mix(in srgb, var(--class-accent) 16%, var(--surface-2));
  border-color: color-mix(in srgb, var(--class-accent) 55%, var(--line));
}

.champ-row-head.is-static:hover {
  background: color-mix(in srgb, var(--class-accent) 16%, var(--surface-2));
  border-color: color-mix(in srgb, var(--class-accent) 55%, var(--line));
}

.champ-row-head[data-class="gt300"] {
  --class-accent: var(--gt300-accent);
  --class-ink: var(--gt300-ink);
}

.champ-row-head[data-class="sf"] {
  --class-accent: var(--sf-accent);
  --class-ink: var(--sf-ink);
}

.champ-row-head[data-class="st"] {
  --class-accent: var(--st-accent);
  --class-ink: var(--st-ink);
}

.champ-row-head[data-class="kart"] {
  --class-accent: var(--kart-accent);
  --class-ink: var(--kart-ink);
}

.champ-row-head .tl-team { color: var(--class-ink); }

/* 育成はレースクラスではないので、GT500/GT300/SFのどの形にも寄せない。
   技術系の役職(エンジニア等)と同じ紫を借りて、育成プログラムという
   「現場ではない」立ち位置を示す */
.class-tag[data-class="dev"] {
  --class-accent: var(--role-tech);
  --class-ink: var(--role-tech);
  border-radius: 999px;
}

/* GT300の3規格(FIA-GT3/GTA-GT300/GT300MC)。クラス札(GT300)の隣に
   小さく添えるだけなので、クラス札より一段沈めた地味な見た目にする。 */
.gt300-reg {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 2px;
  border: 1px solid var(--line);
  color: var(--ink-faint);
  white-space: nowrap;
}

/* タイヤサプライヤー。陣営色(赤=トヨタ・青=ホンダ・緑=日産)と紛れないよう、
   色は付けずテキストだけで示す。末尾の「?」(冠スポンサー名からの推定)は
   .tire-tagのCSSで薄くせず、文字そのままで確定情報と違うことを示す。 */
.tire-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 2px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  white-space: nowrap;
}

/* SF/FNのエンジン(トヨタ/ホンダ/無限)。ワンメイクシャシーなので陣営を
   分けるのはエンジンだけ。タイヤと違いここは陣営色をそのまま使う
   (GT500等の陣営色と混同しにくい画面でしか出さないため)。 */
.engine-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 2px;
  border: 1px solid currentColor;
  white-space: nowrap;
  color: var(--ink-soft);
}
.engine-tag[data-maker="トヨタ"] { color: var(--toyota); }
.engine-tag[data-maker="ホンダ"] { color: var(--honda); }

/* 車番の札は、どの画面でも同じ黒地の札にする(5.263。以前は年表のカードだけ枠線の薄い札で、
   チームの詳細の関係カードは黒地だった。ユーザー指示「黒い方が見やすい。全部揃える」)。
   大きさの設定は下の.plateにまとめた */

.entry-head .tag, .band-meta .tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0 3px;
}

.entry-car { font-size: 9.5px; color: var(--ink-faint); margin-left: auto; }

.entry-name {
  padding: 2px 7px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--ink-soft);
}

/* 車名が押せる(車両詳細へ飛ぶ)ときは<button>で出る。ボタンは文字の大きさを
   継承するので、何も指定しないと本文の大きさ(16px)で札の中に出て、チーム名・
   ドライバー名より目立ってしまった(ユーザー指摘「車両名デカすぎ」、2026-10-02)。
   押せない車名(span)と同じ大きさ・太さに揃える(太字にすると押せない車名と並んだとき不揃いになる)。押せることは細い点線の
   下線だけで示し、色は付けない。 */
.entry-name.is-car-link {
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink-soft);
  text-decoration-color: var(--ink-faint);
  text-decoration-thickness: 1px;
}
.entry-name.is-car-link:hover { color: var(--ink); }
.entry-name.is-car-link { justify-self: start; width: fit-content; max-width: 100%; }

/* 車種年表の主役は車名。carsMarkup()が出す.entry-nameは他タブ(チーム/人物
   年表)とも共用のクラスなので、ここでは太字を親要素で上書きするだけに
   とどめ、他タブの見た目には触れない。 */
.car-entry-car-name .entry-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

/* 車種年表だけの行。行そのものがチーム名を言えない(行の主語は車種な
   ので)ため、札の中に「どのチームが走らせたか」をボタンとして差し込む。
   押すとそのチームを中心にした相関図へ飛べる(他のdata-focusと同じ)。
   主役は車名の方なので、こちらは細字で添える(ユーザー指示、2026-09-20)。 */
.car-entry-team {
  display: block;
  width: 100%;
  padding: 2px 6px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 10.5px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}

/* 名前を押すと相関図に飛べることが、初めて触る人には伝わっていなかった
   (ユーザー指摘、2026-09-27)。.tl-name-button(年表の行頭)には既に
   「相関図 ›」の手がかりがあったが、カードの中の個々の名前(.member-name・
   .band-head・.car-entry-team)には無かった。同じ「›」を常時(ホバー待ちに
   せず、タッチ操作でも見える形で)添えて揃える。 */
.car-entry-team::after { content: " ›"; color: var(--ink-faint); }

.car-entry-team:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }

/* シーズン中に乗り換えた車。1枚の札の中に、乗った順で項目を並べる
   （scripts/split_entry_stints.py が1台1行に割ったデータをそのまま出す）。
   1台しか無い年は is-many が付かず、いままでの見た目のまま。 */
.entry-cars {
  margin: 0;
  padding: 0;
  list-style: none;
}

.entry-cars li {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 7px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.entry-cars li .entry-name,
.entry-cars li .entry-car {
  padding: 0;
  border-bottom: none;
  background: none;
  /* .entry-car の margin-left: auto は、もとの1行レイアウト
     （.entry-head の右端に型式を寄せる）向け。この行では文字を
     番号の直後に置きたいだけなので打ち消す。打ち消さないと、
     型式だけの区間（FN期の大半）で番号と文字の間に大きな空白が空き、
     カードの右端に文字が寄って見えなくなることがあった。 */
  margin-left: 0;
  flex: 1 1 auto;
  min-width: 0;
}

/* 何台目かの番号。2台以上あるときだけ出す。乗り換えそのものが
   目立つ手がかりで、番号は数の意味しか持たない小さな添字にする */
.entry-nth {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  color: var(--ink-faint);
}
/* 丸の中の数字は、丸ごと少し大きくして10pxにする */
.entry-nth { width: 15px; height: 15px; font-size: 10px; }

/* 乗り換えの時期（Rd4〜など）。分かる時だけ出る */
.entry-when {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* 2台以上の年だけ、乗り換えの境目を少し強く見せる（1台だけの年の
   区切り線と混ざらないように） */
.entry-cars.is-many li + li { border-top: 1px dashed var(--line); }

.entry-members { display: flex; flex-direction: column; }

.member {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  padding: 3px 7px;
  border: none;
  /* 縦線は名前の頭をそろえる罫。色は載せない
     （役職は「監督」「エンジニア」と字で書いてあり、色は読み解けない） */
  border-left: 3px solid var(--line);
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.member:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }

.member-name { font-size: 12px; }
.member-name::after { content: " ›"; color: var(--ink-faint); font-weight: 400; }

.member-role {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--role-mgmt);
}

.member.is-technical .member-role { color: var(--role-tech); }

/* 車種年表だけの縮小版。主役は車名・チーム名・号車・クラス・王者フラグ
   なので、ドライバーは行内に小さく折り返すだけの添字にする
   (ユーザー指示、2026-09-19)。 */
.entry-members.is-compact {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px 6px;
}

.member.is-compact {
  width: auto;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface);
}

.member.is-compact .member-name { font-size: 9.5px; }
/* 車種年表のドライバー名は小さな添字のチップが何枚も並ぶ場所なので、
   「›」を付けると逆に読みにくくなる。ここだけは付けない。 */
.member.is-compact .member-name::after { content: none; }

.member.is-compact:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }

/* ---------- timeline: person axis ---------- */

/* チーム/人物/車種年表の.entryと同じ「箱」(枠線+背景+角丸)にして、
   同じ1件の経歴を表すカードだと分かるようにする(ユーザー指示、
   2026-09-27。カードの見た目に一貫性を持たせる検討)。中の情報の
   主従(名前が先か、クラス札が先か)は年表ごとの主語が違うので揃えない。 */
/* 年表のカードは、どのタブでも白い地・細い枠・角丸6pxに揃える(5.311。上の帯・詳細のボタンと同じ言葉) */
.band {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
}

.band:hover { background: var(--surface-2); }

.band.is-elsewhere {
  border: 1px dashed var(--line);
  border-left: 3px dashed var(--ink-faint);
  background: transparent;
}


.band-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}
.band-head > span:first-child::after { content: " ›"; color: var(--ink-faint); font-weight: 400; }


.camp-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}

/* その年の車名。チーム名より一段落として、読みたい人にだけ届く濃さにする */
.band-machine {
  display: block;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.band-role { font-size: 10.5px; font-weight: 700; color: var(--role-mgmt); }
.band.is-technical .band-role { color: var(--role-tech); }

.band-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* 要確認(資料どうしで食い違う等)の印は、作り手・マニア向け。かんたん表示では出さない(5.311。赤い枠が
   「誤り」に見えていた)。くわしく表示では、これまでどおり赤い細い枠 */
body[data-detail="full"] .band.is-flagged { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--flag) 45%, transparent); }

/* ---------- champion ---------- */

.champ {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 5px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--champion) 22%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--champion) 60%, var(--line));
  color: color-mix(in srgb, var(--champion) 80%, var(--ink));
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}
/* 連覇の札: 王者の札を金色で塗りつぶし、ほかの札より目立たせる */
.champ.is-streak {
  background: var(--champion);
  border-color: var(--champion);
  color: var(--surface);
  letter-spacing: 0.02em;
}
/* 王者年表の「チーム ・ 車名」。幅が足りないときだけ「・」のところで折り返す */
.bm-part { display: block; max-width: 100%; }

.champ::before { content: "★"; font-size: 9px; }

/* 王者の地(5.313)。王者になったカードは地を金に敷く(どのタブでも同じ決まり。どのチームが強いかが
   年表のまま一目で分かる)。ドライバーズ王者は金、チームズ王者だけは淡い金。両方あるときはドライバーズ
   (app.jsのcardTitleClass)。5.311で一度「左の縁の金の線」にしたが、地の色の方が分かりやすかった
   (ユーザー指示)ので戻し、チーム年表・車種年表ではカード全体に広げた */
.band.is-champion,
.entry.is-title-drivers { background: color-mix(in srgb, var(--champion) 14%, var(--surface)); }
.band.is-team-title,
.entry.is-title-teams { background: color-mix(in srgb, var(--champion) 6%, var(--surface)); }
.entry.is-title-drivers .entry-head { background: color-mix(in srgb, var(--champion) 7%, var(--surface)); }
.entry.is-title-teams .entry-head { background: color-mix(in srgb, var(--champion) 3%, var(--surface)); }
/* 人物詳細・チーム詳細のカード(.rel-item)も同じ決まり(5.316)。詳細は白地の上なので、地の濃さは年表と揃える */
.rel-item.is-title-drivers { background: color-mix(in srgb, var(--champion) 14%, var(--surface)); }
.rel-item.is-title-teams { background: color-mix(in srgb, var(--champion) 6%, var(--surface)); }
.band.is-champion:hover { background: color-mix(in srgb, var(--champion) 20%, var(--surface)); }
.band.is-team-title:hover { background: color-mix(in srgb, var(--champion) 11%, var(--surface)); }
/* チームズ王者の札は、王者の札より一段淡く */
.champ.is-teams {
  background: color-mix(in srgb, var(--champion) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--champion) 40%, var(--line));
}
/* 王者のタブでは、どのカードも王者なので「★ 王者」の札は出さない(地の金で分かる)。
   意味のある「★ N連覇」だけ残す */
.timeline[data-view="champions"] .gloss-term:has(> .champ:not(.is-streak)),
.timeline[data-view="champions"] .champ:not(.is-streak) { display: none; }

/* 車番。数字だけだと何の数か分からない(ユーザー指摘、2026-10-06。5.247)ので、
   頭に「#」を付ける(実況・公式の「#36」の書き方)。データには入れず、見た目だけで付ける */
.plate::before {
  content: "#";
  margin-right: 1px;
  opacity: 0.7;
}
.plate {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--plate-bg);
  color: var(--plate-ink);
  font-family: var(--font-mono);
  /* クラス札(11px)よりひと回り大きくして、車番が主役の数字だと分かるようにする(5.263) */
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.year {
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}

.chip {
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 10px;
  color: var(--ink-soft);
  background: var(--surface-2);
}

.chip.accent {
  border-color: color-mix(in srgb, var(--role-mgmt) 50%, var(--line));
  color: var(--role-mgmt);
}

/* その年の車名。実況で呼ばれる名前なので、型式より一段強く出す */
.chip.machine {
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
}

/* 「見つかりませんでした」の案内。行き止まりにせず、当てはまりのある
   見かたへ飛べるようにしてある(初心者レビュー、2026-09-26)。 */
.timeline-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 32px 20px;
  color: var(--ink-faint);
  font-size: 12px;
  line-height: 1.7;
}
.timeline-empty strong { font-size: 15px; font-weight: 700; color: var(--ink); }
.empty-hint { max-width: 32em; }
.empty-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.empty-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.empty-chip:hover { border-color: var(--ink-soft); }
.empty-chip-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-faint);
}
.timeline-empty[hidden] { display: none; }

/* ---------- inspector ---------- */

/* 相関図の円環は名前が多いほど込み入って読みにくくなる一方、詳細パネルは
   構造化された文章で「関係」を読める場所なので、円環より詳細パネルを
   優先する。ここを広げれば.canvas-wrap(flex: 1 1 auto)は自動でその分
   縮み、円環もcy.fit()の対象領域が狭くなるぶん一回り小さく収まる。 */
.inspector {
  flex: 0 0 400px;
  overflow-y: auto;
  padding: 16px 15px 28px;
  background: var(--surface);
  border-left: 1px solid var(--line);
  position: relative;
}

.inspector[hidden] { display: none; }
.inspector-grip { display: none; }


.subject-kind {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.subject-name {
  margin: 2px 0 0;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.3;
  text-wrap: balance;
  padding-right: 28px;
}

.subject-meta { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-soft); }

.maker-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.maker-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.maker-tag[data-maker="トヨタ"] { color: var(--toyota); }
.maker-tag[data-maker="ホンダ"] { color: var(--honda); }
.maker-tag[data-maker="日産"] { color: var(--nissan); }
.maker-tag[data-maker="複数"] { color: var(--maker-multi); }

.maker-tag-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.maker-tag-row .maker-tag { margin-top: 0; }
.maker-tag-prefix { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
/* 大会ごとのメーカー(5.250)。「SUPER GT ●日産 / SF ●トヨタ ●ホンダ」 */
.maker-tag-row.is-by-series { row-gap: 4px; }
.maker-series { display: inline-flex; align-items: center; gap: 8px; }
.maker-series + .maker-series { padding-left: 10px; border-left: 1px solid var(--line); }
.maker-series-label { font-size: 10.5px; font-weight: 700; color: var(--ink-faint); white-space: nowrap; }
/* ドライバー記録の「1993年以前は未収録」(5.250) */
.cs-floor { margin-left: 6px; font-size: 10px; color: var(--ink-faint); white-space: nowrap; }

/* 詳細から移籍図・チーム年表へ飛ぶボタン。詳細を開いた人の多くが次に
   押す場所なので、他の淡い部品(メタ情報・タグ)の中でここだけ濃く塗って
   迷わず見つかるようにする。ただし塗り色は新しく足さず、view-switchの
   選択中タブなど、この画面ですでに「強調」の意味で使っているink反転と
   同じ組み合わせを使う（全体から浮かない濃さに揃える）。 */
/* 年表・移籍図へのボタン(5.310)。以前は黒く塗った帯で、詳細の中でいちばん重く、名前より先に
   目に入っていた。上の帯と同じ「角丸の枠のボタン」にし、行き先の言葉と「›」で押せることを示す */
.subject-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.subject-action::after {
  content: "›";
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-soft);
}

/* 外のサイト(画像検索)へのリンクも同じ形。右端は「›」でなく「↗」 */
.subject-action.is-external { justify-content: flex-start; margin-top: 8px; color: var(--ink); text-decoration: none; font-weight: 500; }
.subject-action.is-external::after { content: "↗"; margin-left: auto; font-size: 13px; }
.subject-action.is-external .photo-icon { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.subject-action:hover { background: var(--surface-2); border-color: var(--ink-faint); }
.subject-action:active { transform: scale(0.99); }

.subject-note {
  margin: 12px 0 0;
  padding: 8px 10px;
  border-left: 2px solid var(--line);
  background: var(--surface-2);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.subject-note.is-flagged {
  border-left-color: var(--flag);
  background: color-mix(in srgb, var(--flag) 8%, var(--surface));
}

.section-title {
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  justify-content: space-between;
}

.rel-hint {
  margin: -4px 0 10px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* チームについて(チーム詳細の冒頭)。一言説明を先に読ませ、その下に
   ラベル+値の短い行を並べる。相関図の一覧(.rel-list)と混ざらないよう
   罫線だけで区切り、箱にはしない。 */
.team-profile { margin: 10px 0 4px; }
.team-profile.tp-more { margin-top: 14px; }
.tp-tagline {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--ink);
}
.tp-auto { font-weight: 500; }
.tp-span { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.tp-cats { font-size: 11px; color: var(--ink-soft); }
.tp-titles { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 5px; }
.team-profile .tp-facts { margin-top: 8px; }
.tp-auto-note { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 400; color: var(--ink-faint); }
.tp-facts { margin: 0; border-top: 1px solid var(--line); }
.tp-row {
  display: grid;
  /* 見出しの欄は「冠スポンサー ?」が1行に入る幅(5.263) */
  grid-template-columns: 7.4em 1fr;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.55;
}
.tp-row dt { margin: 0; font-size: 10px; font-weight: 700; color: var(--ink-faint); padding-top: 1px; }
.tp-row dd { margin: 0; color: var(--ink-soft); }

/* 冠スポンサー(チーム詳細の一覧と、スポンサー詳細モーダル) */
.sp-list, .sp-team-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sp-item, .sp-team-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface-2);
  font-size: 11.5px;
}
.sp-open, .sp-team {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong, var(--line));
  text-underline-offset: 2px;
  cursor: pointer;
}
.sp-open:hover, .sp-team:hover { text-decoration-color: var(--ink); }
.sp-years { color: var(--ink-soft); font-size: 11px; }
.sp-names { flex-basis: 100%; color: var(--ink-faint); font-size: 10.5px; }
.sp-heading { margin: 10px 0 4px; font-size: 11px; color: var(--ink-faint); }
.sp-industry { margin: 0 0 4px; }

.rel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

/* .entry・.bandと同じ「箱」(枠線+背景+角丸)を持たせる。役職色の帯
   (.rel-stripe)は左端に接するように置き、角丸に合わせてoverflow:hidden
   で角を切る(.entryのヘッダー帯と同じ理由、ユーザー指示、2026-09-27)。 */
.rel-item {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 10px;
  padding: 6px 8px 6px 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  overflow: hidden;
}

.rel-stripe { border-radius: 2px; background: var(--ink-faint); }
.rel-stripe.driver { background: var(--role-driver); }
.rel-stripe.management { background: var(--role-mgmt); }
.rel-stripe.technical { background: var(--role-tech); }
.rel-stripe.series { background: var(--role-tech); }
.rel-stripe.relation { background: var(--relation); }
.rel-stripe.flagged { background: var(--flag); }

/* ---------- 関係カード(app.jsのrelCard、5.124) ----------
   どのカードも 役職+在籍期間 → 相手 → 大会/車両/戦績 の順(行の見出しは付けない)。
   年の数字は3種類あるので、役割ごとに見た目を分ける:
     在籍期間 … 右上に1回だけ、墨色・太字の4桁(.rc-years)
     車の期間 … 車両の行の左の細い列に、淡い2桁の略記(.rc-when)
     戦績の年 … 王者・ルーキーの札の中(.champ / .rookie) */
.rc-body { min-width: 0; }
.rc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.rc-role {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
/* 1段目の大会名(5.287)。役職(監督など)があれば続けて並べる */
.rc-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.rc-series {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
/* 海外の参戦歴のカードの、出た大会・主な成績(出典の書き方のまま) */
.rc-intl-detail { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.rc-period { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.rc-years {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.rc-seasons { font-size: 10px; color: var(--ink-faint); }
/* 相手の名前のリンク。下線と「›」で押せることを示す(他の名前のボタンと同じ作り) */
.rc-name-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: inherit;
  text-align: left;
  cursor: pointer;
  /* 人物・チームの名前は本物のリンク(<a href>。5.299)。見た目と押した手応えはボタンのときと同じにする
     (下線なし。iOSの長押しのリンクのプレビューも出さない) */
  display: inline-block;
  text-decoration: none;
  -webkit-touch-callout: none;
}
/* 下線は付けない(ユーザー指示、2026-10-03)。押せることは「›」で示す */
/* 車種の詳細のカードの、その車に乗ったドライバー(新しい順)。区切りの「・」は折り返した行の頭に
   残るので使わず、名前どうしの間を空ける */
.rc-drivers { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 6px 0 0; font-size: 12px; line-height: 1.6; }
.rc-driver { color: var(--ink); text-decoration: none; }
.rc-driver:hover { text-decoration: underline; }
.rc-name-link::after { content: "›"; margin-left: 4px; color: var(--ink-faint); display: inline-block; }
.rc-name-link:hover::after { color: var(--ink); }
.rc-head .rc-name { margin-top: 0; min-width: 0; }
.rc-name {
  margin-top: 1px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.rc-rows {
  margin: 6px 0 0;
  display: grid;
  gap: 5px;
}
.rc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.rc-cars { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; width: 100%; }
.rc-cars li { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
/* 車が複数あるときは、カード全体で1つの3列の表にする(liを透過させる)。
   期間の列は、そのカードでいちばん長い期間(’22・’24–’25 など)に合わせて伸びる */
.rc-cars.is-multi {
  grid-template-columns: max-content minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 3px;
  align-items: baseline;
}
.rc-cars.is-multi li { display: contents; }
.rc-cars.is-multi .rc-model { grid-column: 3; }
.rc-cars.is-multi .rc-when { grid-column: 1; }
.rc-cars.is-multi .rc-car { grid-column: 2; }
.rc-when {
  font-family: var(--font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  white-space: nowrap;
}
/* 車名は「チーム名(14px太字)」の下の脇役。11.5px・中くらいの太さ・やや淡い色にして、
   チーム名とクラス札より目立たせない(ユーザー指摘「車両名がでかすぎる」、2026-10-02)。
   押せる車名は<button>で、ボタンは文字サイズを継承しない上に.is-car-linkのfont:inheritが
   後から効くため、.rc-car.is-car-linkで大きさをはっきり上書きする。押せることは
   細い点線の下線だけで示す。 */
.rc-car,
.rc-car.is-car-link {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.rc-car.is-car-link {
  text-decoration-color: var(--ink-faint);
  text-decoration-thickness: 1px;
}
.rc-car.is-car-link:hover { color: var(--ink); }
/* 押せるのは文字の部分だけ。グリッド(複数世代の車名)の中のボタンは列いっぱいに
   伸びて、右の空白まで押せてしまうので、文字の幅に縮める(ユーザー指摘、2026-10-03) */
.rc-car.is-car-link { justify-self: start; width: fit-content; max-width: 100%; }
.rc-model { justify-self: start; white-space: nowrap; }

.rel-role { font-size: 13px; font-weight: 700; display: flex; align-items: baseline; gap: 6px; }

.rel-seasons {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--ink-faint);
}
.rel-counterpart { font-size: 12px; color: var(--ink-soft); }
.rel-meta { margin-top: 5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* 在籍中に車種が変わった相手の、年ごとの車名一覧（併記）。
   在籍全体の年数(.rel-meta .year)と同じ見た目だと「別々の在籍期間」に
   見えてしまうため、左にインデント+区切り線を入れて「在籍期間の中の
   内訳」だと分かるようにし、年表示も一回り小さく弱めて主従を付ける。 */
.rel-cars {
  margin: 6px 0 0 5px;
  padding: 2px 0 2px 10px;
  border-left: 2px solid var(--line);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rel-cars li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rel-cars .year { font-size: 10px; }

.rel-note { margin: 6px 0 0; font-size: 11px; line-height: 1.55; color: var(--ink-faint); }
/* 移籍・新加入・代役(5.321)。札にせず、カードの中に文で */
.rc-events { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-soft); }

/* 「要確認」の但し書きは本文まで赤くしない。赤いのは見出しの札だけにして、
   注記そのものは他の補足と同じ濃さで読ませる（詳細画面でいちばん赤いのが
   データ品質の但し書き、という状態を避ける） */
.note-flag {
  display: inline-block;
  margin-right: 6px;
  padding: 0 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--flag) 14%, var(--surface));
  color: var(--flag);
  font-size: 10px;
  font-weight: 700;
  vertical-align: 1px;
}
.empty-state { color: var(--ink-faint); font-size: 12px; }

/* ---------- status bar ---------- */

.statusbar {
  flex: 0 0 auto;
  /* 下端はiPhoneのホームバー(横線)の分だけ空ける(上のbodyの注記参照) */
  box-sizing: content-box;
  height: 27px; /* +上の線1px = これまでどおりの28px */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 0 14px env(safe-area-inset-bottom, 0px);
  background: var(--surface);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
}
#status-counts { margin-left: auto; }

/* ---------- phone ---------- */

@media (max-width: 820px) {
  /* 上の帯は3段: 名前の行(メニュー・名前・くわしく表示中・用語集) / 検索 / タブ(4つを等分) */
  .topbar { padding: 0 12px; }
  .topbar-main { flex-wrap: wrap; gap: 0 8px; min-height: 0; padding-top: 6px; }
  .tb-menu { order: 1; width: 38px; padding: 0; }
  .tb-menu .icon-label { display: none; }
  .brand { order: 2; flex: 1 1 auto; }
  .brand-name { font-size: 17px; overflow: hidden; text-overflow: ellipsis; }
  .brand-sub { display: none; }
  .detail-chip { order: 3; }
  .tb-offline { display: none; }
  .tb-glossary { order: 4; }
  .search-wrap { order: 5; flex: 1 1 100%; max-width: none; margin: 8px 0 0; }
  /* 年はタブの上の1段(5.325) */
  .year-ctl { order: 6; flex: 1 1 100%; margin: 8px 0 0; }
  .view-switch { order: 7; flex: 1 1 100%; margin: 4px 0 0; height: 42px; gap: 0; }
  .view-switch button { flex: 1 1 0; justify-content: center; padding: 0; font-size: 14px; }
  .view-switch button.is-active::after { left: 18%; right: 18%; }
  .v-long { display: none; }
  /* 下の帯は、未検証の但し書きとデータの日付だけ(収録数は読み込みの板に出ている) */
  #status-counts { display: none; }
  #status-source { margin-left: auto; }

  .filter-list-scroll { max-height: none; }

  /* 移籍図の行頭も、チーム年表と同じ扱いにする。スマホでは名前を90度倒し、
     列を98pxから36pxまで詰めて、空いたぶんを絵の側へ回す（1年ぶん近く増える）。
     PCでは年表と同じく倒さない。行の主語を小さく倒して置く画面ではない。 */
  .story { --story-head-col: 36px; }

  .story-team {
    /* 倒すと、箱の「幅」が画面の縦、「高さ」が画面の横になる。
       幅は帯の高さぶん、高さは列の幅ぶん。右の縁が帯の区切り線になる。 */
    right: auto;
    width: var(--band-h);
    height: calc(var(--story-head-col) - 1px);
    padding: 0 4px;
    justify-content: center;
    border-bottom: 0;
    border-right: 1px solid var(--line-soft);
    transform-origin: 0 0;
    transform: rotate(90deg) translateY(-100%);
  }

  .story-team-name { text-align: center; }

  /* 36pxに「チーム 108」は入らない。数だけ残す */
  .story-corner { justify-content: center; padding: 0 2px; }
  .story-corner-word { display: none; }

  .inspector {
    position: absolute;
    /* 左右に8pxの隙間を空け、図の上に乗った1枚の板に見せる(5.218)。広げても左右と上に
       図が覗くので、下に図があることが分かる */
    inset: auto 8px 0 8px;
    width: auto;
    /* 指に追従する3段のシート(app.jsのsetSheetState、5.210・5.215)。箱の高さは
       「広げる」の高さで固定し、見えている高さのぶんだけ下へずらす(どちらもapp.jsが
       style.height・style.transformに直接書く)。高さそのものを変えないので、動いている間に中身が
       組み直されず、指を置いた場所がずれない。 */
    /* 高さ(箱)と位置(transform)はapp.jsが直接書く。最初に描くまでの仮の高さ */
    height: max(52%, 230px);
    max-height: none;
    will-change: transform;
    border: 1px solid var(--line);
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.03);
    z-index: 20;
    padding-bottom: 52px;
    overscroll-behavior: contain;
    overflow-y: auto;
    /* 標準・小さくでは、縦の指の動きはすべてシートが受け持つ(中身は送らない)。
       広げたときだけ、中身を指でスクロールできる */
    touch-action: none;
    /* 指を離した後の続きの動きの速さは、離した瞬間の指の速さからapp.jsが決める */
  }
  .inspector.is-expanded { touch-action: pan-y; }
  /* 小さく(つまみと名前だけ)の間は、名前より下を見せない */
  .inspector.is-peek { overflow: hidden; }
  @media (prefers-reduced-motion: reduce) { .inspector { transition: none !important; } }
  /* 上の帯(つまみ)。どの段でも、ここを引けばシートが指に追従して動く。帯の全幅 */
  .inspector-grip {
    display: flex;
    justify-content: center;
    position: sticky;
    top: -16px;
    width: calc(100% + 30px);
    margin: -16px -15px 6px;
    padding: 12px 0 10px;
    background: var(--surface);
    z-index: 1;
    cursor: grab;
    touch-action: none;
  }
  .inspector-grip-bar { width: 34px; height: 4px; border-radius: 2px; background: var(--line); }
  /* 下の縁のぼかし(続きがある合図)は、いちばん下までスクロールしても最後の行に重なって
     読めなくしていたのでやめた(5.219)。続きがあることは、広げたシートの中身が画面の下で
     切れていることで分かる */

  /* 年表は表のまま、縦横どちらにもスクロールさせる。列を詰めて
     一画面に入る情報量を増やし、見出しは貼り付いたままにする。 */
  .timeline-wrap { -webkit-overflow-scrolling: touch; }
  /* 列幅は固定にする。max-content任せだと1列で画面が埋まってしまう。
     行頭は名前が折り返せる最小限の幅にとどめ、本文に場所を譲る。
     164pxは「クラス札・車番・車名」が1行に収まる下限で、390pxの画面に
     2年ぶんが並ぶ。行の高さは変わらないので、詰めたぶんがそのまま
     一画面に入る年数になる。 */
  /* 390pxより狭い画面(360px等)では、2年ぶんが行頭の列の下に潜らないよう、
     画面の幅から列幅を決める(5.230。以前は360pxで右の年の列の左端が隠れた) */
  .timeline { --tl-cell-col: clamp(140px, calc((100vw - var(--tl-head-col) - 6px) / 2), 164px); }

  .tl-head, .tl-name, .tl-cell { padding: 7px 8px; }
  .tl-head { padding: 6px 8px; }
  .tl-cell { min-width: 0; gap: 4px; }

  /* 狭い列でも切れないよう、行の中身は折り返す */
  .member, .band-head, .band-meta { flex-wrap: wrap; }
  .entry-car { margin-left: 0; }
  .entry-name { word-break: break-word; }

  .tl-year-value { font-size: 14px; }
  .tl-year-cue { font-size: 9px; }
  .timeline.is-single-year .tl-cell { gap: 5px; }
  /* スマホで1年だけのときは、行頭を倒さずに札の上へ見出しとして置く。
     札が横に並んで行が低くなるぶん、倒した名前が潰れて読めなくなるため */
  .timeline.is-single-year .tl-corner { display: none; }
  .timeline.is-single-year .tl-headrow,
  .timeline.is-single-year .tl-row { grid-template-columns: minmax(0, 1fr); }
  .timeline.is-single-year .tl-name {
    position: static;
    padding: 7px 8px 0;
    overflow: visible;
    border-right: 0;
  }
  .timeline.is-single-year .tl-name-button {
    position: static;
    transform: none;
    width: auto;
    max-width: 100%;
    max-height: none;
    padding: 3px 8px;
  }
  .timeline.is-single-year .tl-name-label { align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .timeline.is-single-year .tl-team,
  .timeline.is-single-year .tl-name-button.is-cramped .tl-team { font-size: 13px; }
  .timeline.is-single-year .tl-blurb { display: inline; }
  .timeline.is-single-year .tl-blurb.is-row-blurb { flex-basis: 100%; -webkit-line-clamp: 2; margin-top: 0; }
  .timeline.is-single-year .tl-cell { min-height: 0; padding-top: 6px; }
  .timeline.is-single-year .tl-cell { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .member, .band, .tl-name-button { min-height: 34px; }
}

/* ---------- glossary ---------- */

/* 押せる用語(5.228)。点線の下線はやめ、文章の中の語・役職の札には後ろに小さな
   「?」の丸を付ける(色を足すと陣営色・クラス色と競合するので、語の地色は変えない)。
   クラス・タイヤ等の札は、札そのものが押せる見た目なので印を付けない */
.gloss-term {
  cursor: pointer;
  border-radius: 3px;
}
.gt-end { white-space: nowrap; }
.gloss-term .gt-q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-left: 2px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  vertical-align: 1px;
  text-decoration: none;
}
.gloss-term:hover .gt-q,
.gloss-term:focus-visible .gt-q { background: var(--ink); color: var(--surface); }

.gloss-term:hover,
.gloss-term:focus-visible {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  outline: none;
}

#glossary-toggle {
  font-weight: 900;
}

.gloss-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.35);
}

.gloss-scrim[hidden] { display: none; }

.gloss-modal {
  position: fixed;
  z-index: 61;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 90vw);
  max-height: min(560px, 80vh);
  overflow-y: auto;
  padding: 18px 18px 22px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.gloss-modal[hidden] { display: none; }

.gloss-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 3px;
  background: none;
  color: var(--ink-faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.gloss-modal-close:hover { background: var(--surface-2); color: var(--ink); }

.gloss-modal-title {
  margin: 0 0 10px;
  padding-right: 24px;
  font-size: 15px;
  font-weight: 900;
}

.gloss-entry { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.gloss-entry:last-child { border-bottom: none; }
.gloss-entry p.gloss-links { margin-top: 6px; font-size: 11.5px; }
.gloss-entry p.gloss-links a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.gloss-entry h4 {
  margin: 0 0 4px;
  padding-right: 24px;
  font-size: 13.5px;
  font-weight: 900;
}

.gloss-entry p {
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.gloss-modal-all {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.gloss-modal-all:hover { background: var(--surface); border-color: var(--ink-faint); }

/* 車両の詳細(app.jsのopenCarDetail、5.138)。スポンサー詳細と同じモーダルを使う */
.is-car-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
/* 押せる車名は下線ではなく、他の名前のボタン(.tl-team)と同じ右側の小さな「›」で示す
   (ユーザー指示、2026-10-03)。薄く小さく、文字の邪魔をしない */
.is-car-link::after {
  content: "›";
  margin-left: 3px;
  font-size: 0.9em;
  font-weight: 400;
  color: var(--ink-faint);
  opacity: 0.75;
}
.is-car-link:hover::after, .is-car-link:focus-visible::after { opacity: 1; color: var(--ink-soft); }
.is-car-link:focus-visible { outline: none; }
/* 車名の行の文字の大きさ・色は、押せない車名(span)と同じにそろえる */
.entry-cars li .entry-name.is-car-link { padding: 0; border-bottom: none; background: none; }
/* 車名の行(.entry-cars li)では車名が flex: 1 で行の右端まで伸びる。押せる車名は
   伸びると、文字の右の空白まで車両詳細が開いてしまうので、文字の幅で止める */
.entry-cars li .entry-name.is-car-link { flex: 0 1 auto; }
.car-detail .cd-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink); }
.cd-team { font-weight: 700; }
/* チーム名は、そのチームの詳細(相関図)へのリンク。他のリンクと同じ下線に「›」で押せることを示す */
.cd-team.is-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong, var(--line));
  text-underline-offset: 3px;
  cursor: pointer;
}
.cd-team.is-link::after { content: "›"; margin-left: 4px; color: var(--ink-faint); text-decoration: none; display: inline-block; }
.cd-team.is-link:hover { text-decoration-color: var(--ink); }
.cd-year-label { font-family: var(--font-mono); font-weight: 700; }
.cd-years { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; }
.cd-year {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
}
.cd-year.is-current { background: var(--ink); border-color: var(--ink); color: var(--surface); cursor: default; }
.car-detail .cd-model { margin: 8px 0 0; }
.cd-model-name { font-weight: 700; color: var(--ink); }
.cd-tyre { margin-left: 6px; font-size: 11px; color: var(--ink-faint); }
.gloss-entry h4.cd-heading { margin: 14px 0 6px; font-size: 12px; color: var(--ink-soft); }
/* 画像検索の入口は1つ。押すとGoogle画像検索が別タブで開く。はっきりボタンと
   分かるよう、塗りつぶし・影・押し込みのある形にする(ユーザー指摘、2026-10-02) */
.cd-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 11px 14px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--ink) 35%, transparent);
  transition: transform 0.08s, box-shadow 0.08s;
}
.cd-search-btn:hover { box-shadow: 0 3px 0 color-mix(in srgb, var(--ink) 35%, transparent); }
.cd-search-btn:active { transform: translateY(2px); box-shadow: none; }
.cd-search-btn:focus-visible { outline: 3px solid var(--line); outline-offset: 2px; }
.cd-search-icon {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 50%;
  position: relative;
  margin-right: 4px;
}
.cd-search-icon::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -4px;
  width: 6px;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
}
.cd-search-ext { font-size: 12px; opacity: 0.7; }
.cd-list { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 4px; }
.cd-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 11.5px; }
.cd-car {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.cd-car-name { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-strong, var(--line)); }
.cd-car:hover .cd-car-name { text-decoration-color: var(--ink); }
.cd-car-team { color: var(--ink-faint); font-size: 10.5px; }

.gloss-modal-note {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-faint);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- 表示の細かさ(かんたん / くわしく) -------------------------------
   出典・規格名・運営法人・データ上のIDは、詳しく追う人には要るが、
   初めて来た人には「どれが本筋か」を見えなくする。DOMには両方入れておき、
   ここで出し分ける(押した瞬間に切り替わり、描き直しが要らない)。 */
body[data-detail="simple"] .det-full { display: none !important; }
body[data-detail="full"] .det-simple { display: none !important; }

/* かんたん表示の末尾に1行だけ置く「この先がある」という案内 */
.detail-nudge {
  margin: 10px 0 0;
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 1.7;
}

.nudge-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* 「くわしく表示中 ×」の札(5.234)。くわしく表示が入っている間だけ見出しに出し、
   押すと通常の表示へ戻る。通常の表示には札も名前も出さない */
.detail-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 12px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}
.detail-chip[hidden] { display: none; }
.detail-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 22%, transparent);
  font-size: 12px;
  font-weight: 400;
}

/* 絞り込みの欄のいちばん上の「くわしく表示」のスイッチ(5.234) */
.rail-display { padding-bottom: 10px; }
.detail-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.detail-toggle-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.detail-toggle-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.detail-toggle-sub { font-size: 10.5px; line-height: 1.45; color: var(--ink-faint); }
.detail-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.detail-toggle-switch {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--line);
  transition: background 0.15s;
}
.detail-toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}
.detail-toggle input:checked + .detail-toggle-switch { background: var(--ink); }
.detail-toggle input:checked + .detail-toggle-switch::after { transform: translateX(16px); }
.detail-toggle input:focus-visible + .detail-toggle-switch { outline: 2px solid var(--ink); outline-offset: 2px; }

/* 出典。関係の1件ごとに、元になった資料へのリンクを並べる。本文より目立たないよう、
   枠を付けない小さな薄い文字の1行にする(5.231) */
.rel-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 12px;
  margin-top: 4px;
  color: var(--ink-faint);
  font-size: 10px;
  line-height: 1.6;
}
.rel-sources .src-label { font-size: 10px; color: var(--ink-faint); opacity: 0.8; }
.src-group { display: inline-flex; align-items: baseline; gap: 3px; min-width: 0; }
.src-link, .src-num {
  color: var(--ink-faint);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.src-num { font-size: 9px; }
.src-num::before { content: "·"; margin-right: 3px; opacity: 0.6; }
a.src-link:hover, a.src-num:hover { color: var(--ink-soft); text-decoration: underline; }

/* 運営法人・シャシー型式など、くわしく表示だけで出す裏づけ */
.rel-detail {
  margin-top: 6px;
  padding-left: 8px;
  border-left: 2px solid var(--line);
}

/* 項目名と中身が地続きに見えないよう、2列に組む。「エンジンチューナー」+用語の「?」が
   いちばん長いので、そこに合わせた幅を取る(5.228で「?」の分を広げた) */
.rel-detail-row {
  display: grid;
  grid-template-columns: 11em 1fr;
  gap: 0 6px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.7;
  word-break: break-word;
}

.rel-detail-row .td-label {
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.9;
  color: var(--ink-faint);
}

@media (max-width: 820px) {
  .detail-chip { padding: 3px 5px 3px 10px; font-size: 11px; }
}

/* かんたん⇔くわしくの切り替え中の表示。画面の真ん中に小さな札を1枚だけ
   出す。回転はtransformのアニメーションにしてあり、ブラウザが切り替えの
   再計算で手いっぱいの間も合成スレッド側で回り続ける(止まった表示は
   固まったように見えるため)。 */
.mode-busy {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.mode-busy[hidden] { display: none; }

.mode-busy-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--line);
  border-top-color: var(--ink);
  border-radius: 50%;
  will-change: transform;
  animation: mode-busy-spin 0.8s linear infinite;
}

@keyframes mode-busy-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .mode-busy-spinner { animation-duration: 2.4s; }
}

body[aria-busy="true"] .detail-chip, body[aria-busy="true"] .detail-toggle { cursor: progress; }

/* ---------- 名前を押せることの手がかり(5.86) ----------
   世界のサービスの型に倣い、「押せそう(›)」に加えて
   ①押した瞬間の手応え ②初回だけの案内 ③行き先を選ぶシート
   の3つを足した(ユーザー指示、2026-09-27)。 */

/* ① 押した瞬間の手応え。これまでは:hoverしか無く、ホバーの無いスマホでは
   押しても一瞬の反応すら無かった。iOSのSafariは、ページのどこかに
   touchstartの受け手が無いと:activeを付けないので、app.jsで空の受け手を
   1つ登録している。既定の灰色のタップ表示は、押した名前ではなく
   受け手(body)全体に出てしまうので消し、こちらの:activeに任せる。 */
.member,
.band,
.car-entry-team,
.tl-name-button,
.story-team {
  -webkit-tap-highlight-color: transparent;
}
/* 人物・チームの名前は本物のリンク(<a href>。5.305)。ボタンだったときと同じ見た目にする:
   字の色・下線はそれぞれの決まりに任せ、表示の形はボタンの既定(inline-block)、iOSの長押しのプレビューは出さない。
   :where で詳しさを0にして、それぞれの決まり(display:flex等)が勝つようにする */
:where(a.fy-nav) { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
:where(a.tl-year-head) { color: inherit; text-decoration: none; }
:where(a[data-focus]) {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  -webkit-touch-callout: none;
}
.member:active,
.band:active,
.car-entry-team:active,
.tl-name-button:not(.is-static):active,
.story-team:active {
  background: color-mix(in srgb, var(--ink) 16%, var(--surface-2));
}

/* ② 初回だけの案内。最初に画面に見えている名前を1つ選び、枠を脈打たせて
   吹き出しで知らせる。一度閉じるか名前を押したら二度と出さない。 */
.name-hint-target {
  position: relative;
  z-index: 1;
  border-radius: 3px;
  box-shadow: 0 0 0 2px var(--ink);
  animation: name-hint-pulse 1.4s ease-out infinite;
}

/* 5.88: 人物・チーム詳細の案内ボタン(.subject-action)向け。5.310でボタンを白地の枠にしたので、
   名前の案内と同じ墨の輪にする */
.story-hint-target {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 2px var(--ink);
  animation: name-hint-pulse 1.4s ease-out infinite;
}

@keyframes name-hint-pulse {
  0% { box-shadow: 0 0 0 2px var(--ink), 0 0 0 2px color-mix(in srgb, var(--ink) 45%, transparent); }
  100% { box-shadow: 0 0 0 2px var(--ink), 0 0 0 10px color-mix(in srgb, var(--ink) 0%, transparent); }
}

.name-hint {
  position: fixed;
  z-index: 55;
  width: min(260px, calc(100vw - 24px));
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--surface);
  font-size: 12px;
  line-height: 1.55;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}
.name-hint[hidden] { display: none; }

/* 吹き出しの三角。data-side="below"なら上向き(名前の下に出たとき) */
.name-hint::before {
  content: "";
  position: absolute;
  left: var(--arrow-x, 24px);
  width: 10px;
  height: 10px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.name-hint[data-side="below"]::before { top: -5px; }
.name-hint[data-side="above"]::before { bottom: -5px; }

.name-hint-text { flex: 1 1 auto; }

.name-hint-ok {
  flex: 0 0 auto;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--surface) 60%, transparent);
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* ③ 行き先を選ぶシート。スマホは画面下から、PCは画面中央に出す
   (Googleマップの場所シート・iOSのアクションシートの型) */
.sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 62;
  background: rgba(0, 0, 0, 0.35);
}
.sheet-scrim[hidden] { display: none; }

.name-sheet {
  position: fixed;
  z-index: 63;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(360px, 90vw);
  padding: 18px 16px 14px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.name-sheet[hidden] { display: none; }

.name-sheet-kind {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-faint);
}

.name-sheet-title {
  margin: 2px 0 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.name-sheet-actions { display: flex; flex-direction: column; gap: 6px; }

.name-sheet-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.name-sheet-action:hover { border-color: var(--ink-faint); }
.name-sheet-action:active { background: color-mix(in srgb, var(--ink) 16%, var(--surface-2)); }
.name-sheet-action::after { content: "›"; margin-left: auto; color: var(--ink-faint); font-size: 16px; }

.name-sheet-action-text { display: flex; flex-direction: column; gap: 1px; }
.name-sheet-action-label { font-size: 14px; font-weight: 700; }
.name-sheet-action-desc { font-size: 11px; color: var(--ink-soft); }

.name-sheet-cancel {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.name-sheet-cancel:active { background: var(--surface-2); }

@media (max-width: 820px) {
  .name-sheet {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: none;
    border-radius: 14px 14px 0 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    animation: name-sheet-rise 0.18s ease-out;
  }
}

@keyframes name-sheet-rise {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .name-hint-target, .story-hint-target { animation: none; }
  .name-sheet { animation: none; }
}

.sponsor-entry .gloss-modal-note { text-align: left; }

/* 人物の生年月日・国籍。1行に「・」区切りで並べる */
.person-bio { display: flex; flex-wrap: wrap; gap: 0 8px; }
.person-bio span + span::before { content: "・"; margin-right: 8px; color: var(--ink-faint); }

/* 人物詳細の「海外の参戦歴」(F1・WEC/ルマン・F2)。名前・生年月日の下に、小さく添える */
.person-intl { margin: 8px 0 10px; }
.intl-head { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; color: var(--ink-faint); letter-spacing: 0.04em; }
.intl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.intl-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 12px; }
.intl-tag {
  display: inline-block;
  min-width: 3.2em;
  padding: 0 6px;
  border: 1px solid var(--ink-soft);
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
}
.intl-years { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.intl-detail { color: var(--ink-soft); font-size: 11px; }

/* 車両詳細の冠スポンサー・車種のカード(5.186) */
.cd-model-link {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--ink);
  text-align: left; cursor: pointer;
}
.cd-model-link::after { content: "›"; margin-left: 4px; color: var(--ink-faint); }
/* 車両の詳細の、車名に入っているスポンサー(5.228、5.229で文の説明をやめた)。
   見出しの車名の中のスポンサーの部分に蛍光ペンの印と、その真下に小さな「スポンサー」の札。
   下の箱にも同じ色の線と同じ札を付け、形と色で二つを結ぶ */
.cd-sp { display: grid; gap: 8px; margin: 6px 0 4px; }
.cd-sp-card {
  position: relative;
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 10px 30px 11px 12px;
  border: none;
  border-left: 4px solid var(--sp-mark-strong);
  border-radius: 0 10px 10px 0;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cd-sp-card::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--ink-faint);
  font-size: 18px;
}
.cd-sp-card:hover { background: color-mix(in srgb, var(--sp-mark) 40%, var(--surface-2)); }
/* チームの箱は、スポンサーの黄色と分けて、チームのメーカーの色の線にする(5.231) */
.cd-team-card { border-left-color: var(--ink-faint); }
.cd-team-card[data-maker="トヨタ"] { border-left-color: var(--toyota); }
.cd-team-card[data-maker="ホンダ"] { border-left-color: var(--honda); }
.cd-team-card[data-maker="日産"] { border-left-color: var(--nissan); }
.cd-team-card .cd-sp-kicker { color: var(--ink-soft); }
.cd-team-card:hover { background: color-mix(in srgb, var(--ink) 6%, var(--surface-2)); }
.cd-team-card.is-static { cursor: default; padding-right: 12px; }
.cd-team-card.is-static::after { content: none; }
.cd-sp-kicker {
  color: var(--sp-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.cd-sp-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; }
.cd-sp-card .cd-sponsor-note { font-size: 11.5px; line-height: 1.55; color: var(--ink-soft); }
.cd-model-note { margin: 0 0 4px; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.cd-count { margin-left: 4px; font-family: var(--font-mono); font-weight: 700; color: var(--ink-faint); }
.car-detail .cd-list li .chip { font-size: 10px; }
/* 車種年表の行名は、押すと車種のカードが開く */
.tl-name-button.is-model-link { cursor: pointer; }
.tl-name-button.is-model-link:hover { background: color-mix(in srgb, var(--ink) 8%, var(--surface-2)); border-color: var(--ink-faint); }
.tl-name-button.is-static.is-model-link .tl-team::after { content: " ›"; }

/* S耐のドライバーで、既存の人物と結びつかない人(名前だけ)。押せないので、押せる札と見た目をそろえつつ
   カーソルと反応を消す */
.member.is-plain { cursor: default; }
.member.is-plain:hover { background: inherit; border-color: inherit; }
.member.is-plain .member-name::after { content: none; }

/* 指で押す端末では、上部の切り替え・ボタンを押しやすい高さにする(使用感テスト5.197)。
   見た目の幅は変えず、縦だけ広げる。 */
@media (pointer: coarse) {
  .view-switch button,
  #offline-toggle,
  #glossary-toggle { min-height: 40px; }
}

/* 極小の文字をなくす(使用感テスト5.197)。詳細シート・用語や出典の窓・凡例・
   左の絞り込みなど「読む」場所は11.5px以上、年表のカードの中の補足は10px以上。
   見出し級の大きさは変えず、補足の文字だけを上げる。 */
.rail-title, .rail-actions button, .filter-count, .rail-note,
.canvas-hint, .graph-legend ul, .rel-hint, .tp-auto-note, .tp-row dt,
.sp-names, .rc-role, .rc-seasons, .rc-when, .rel-seasons, .rel-cars .year,
.note-flag, .statusbar, .cd-car-team, .src-label, .src-chip,
.rel-detail-row .td-label, .name-sheet-kind, .section-title, .subject-kind,
.intl-head, .intl-tag, .car-detail .cd-list li .chip, .maker-tag { font-size: 11.5px; }
.tl-go, .tl-kind, .tl-blurb, .tl-sub, .tl-year-cue,
.tl-name-button.is-cramped .tl-team, .gt300-reg, .tire-tag, .engine-tag,
.entry-head .tag, .band-meta .tag, .entry-car, .member-role,
.member.is-compact .member-name, .champ, .champ::before, .rookie, .tl-corner-label,
.story-corner, .class-tag.is-key, .entry-chip .maker, .entry-chip .unit { font-size: 10px; }
.entry-name, .entry-name.is-car-link, .car-entry-team, .band-machine, .band-role { font-size: 11px; }
@media (max-width: 640px) {
  .graph-legend ul { font-size: 11px; }
}

/* 人物シート先頭の国内の記録のあらまし */
.person-summary { display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--ink-soft); }
.person-summary strong { color: var(--ink); font-weight: 700; }
.person-summary .summary-breakdown { margin-left: 2px; color: var(--ink-faint); }

/* ---- アプリとして使う案内(5.201) ---------------------------------------
   スマホの下端に出る小さなカード。モーダル(60番台)より下、吹き出し(55)より上。 */
.install-card {
  position: fixed;
  z-index: 58;
  left: 12px;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 44px);
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
}
.install-card[hidden] { display: none; }
.install-icon { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 12px; }
.install-body { flex: 1 1 auto; min-width: 0; }
.install-title { margin: 0 0 4px; font-size: 15px; font-weight: 700; line-height: 1.35; }
.install-text { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.install-actions { display: flex; justify-content: flex-end; gap: 8px; }
.install-actions button {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.install-later { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.install-go { border: 1px solid var(--ink); background: var(--ink); color: var(--surface); }

.install-steps { margin: 0 0 10px; padding-left: 20px; font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); }
.install-steps b { color: var(--ink); }
.install-share { width: 16px; height: 16px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 車名で検索したときの「車種タブでも見られます」(5.204) */
.car-guide {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2, var(--surface));
  font-size: 12.5px;
  line-height: 1.5;
}
.car-guide[hidden] { display: none; }
.car-guide-text { flex: 1 1 auto; min-width: 0; color: var(--ink-soft); }
.car-guide-go {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

/* 人物詳細の名前の下のふりがな(5.205) */
.subject-kana { margin: -2px 0 6px; font-size: 12px; letter-spacing: 0.08em; color: var(--ink-soft); }

/* 王者のカード(5.207): 名前と車名を別々に押せるよう、カードは<div>、名前は<button>。
   名前のボタンは見た目を以前の見出し(.band-head)のままにする */
.band-head-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
/* 押せる車名: 写真のアイコン+車名+「›」。車名は他の補足より少し濃く */
.band-car.is-car-link {
  display: inline;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink);
  min-height: 0;
}
.band-car .photo-icon {
  width: 12px;
  height: 12px;
  margin-right: 3px;
  vertical-align: -2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  color: var(--ink-soft);
}
.band-car:hover { text-decoration: none; color: var(--ink); }
@media (pointer: coarse) {
  /* 指で押しやすいよう、車名の押せる範囲を上下に少し広げる(見た目の行間は変えない) */
  .band-car.is-car-link { display: inline-block; padding: 4px 0; margin: -4px 0; }
}

/* 車名検索の案内の中身(5.208) */
.car-guide { align-items: flex-start; flex-wrap: wrap; }
.car-guide-text { display: flex; flex-direction: column; gap: 3px; }
.cg-title { color: var(--ink); font-size: 13px; }
.cg-lead { color: var(--ink-soft); }
.cg-models { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 2px; }
.cg-label { color: var(--ink-faint); font-size: 11.5px; }
.cg-model {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.cg-model::after { content: " ›"; color: var(--ink-faint); }
.cg-more { color: var(--ink-faint); font-size: 11.5px; }
@media (max-width: 640px) {
  .car-guide-go { width: 100%; }
}
.cg-lead .photo-icon { width: 13px; height: 13px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.cg-go {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* 戻る操作の知らせ(5.209) */
.back-toast {
  position: fixed;
  z-index: 70;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 56px);
  transform: translateX(-50%);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font-size: 13px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}
.back-toast[hidden] { display: none; }

/* 王者年表の左端の行名(GT500・ドライバーズ等)は、用語の下線を引かない(5.212)。
   押すと用語の説明が開くのは同じ。行名の札そのものが押せる見た目なので、下線は要らない */
.tl-name-button.is-static .gloss-term,
.tl-name-button.is-static.gloss-term { text-decoration: none; }
/* 札全体が用語の説明へのボタン(5.213)。押せることが分かるよう指の形にする */
.tl-name-button.is-gloss-row { cursor: pointer; }

/* 用語の説明の「関連する用語」(5.214) */
.gloss-related { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; }
.gloss-related-label { font-size: 11.5px; color: var(--ink-faint); margin-right: 2px; }
.gloss-related .gloss-term { text-decoration: none; }
.gloss-related-chip {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
}
.gloss-related-chip::after { content: " ›"; color: var(--ink-faint); }
/* 札(王者・連覇・ルーキー)そのものが用語の説明へのボタンのときは、下線を引かない(5.214) */
.gloss-term:has(> .champ), .gloss-term:has(> .rookie), .gloss-term:has(> .gt300-reg) { text-decoration: none; }

/* 車両・車種のカードの画像検索ボタンにも、王者のカードの車名と同じ写真のアイコン(5.215) */
.cd-search-btn .photo-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

/* 絞り込みの札の横の正式名 */
.filter-badge-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1 1 auto; min-width: 0; }
.filter-badge-stack + .filter-name { display: none; }
.filter-fullname { font-size: 11.5px; line-height: 1.3; color: var(--ink-soft); }

/* 車両・車種のカードの画像検索ボタンは、カードの一番下に置き、窓の下端に貼り付ける(5.217)。
   中身(車名・チーム・車種・冠スポンサー)を読んだ後の「次の一手」として下に置きつつ、
   中身が長くてもスクロールせずに押せる。窓の下の余白(22px)ぶんまで背景で覆う */
.cd-actions {
  position: sticky;
  bottom: -22px;
  margin: 16px -18px -22px;
  padding: 14px 18px 22px;
  background: linear-gradient(to bottom, transparent, var(--surface) 14px);
  z-index: 1;
}
.cd-actions .cd-search-btn { margin: 0; }

/* 詳細シートを広げたときに図を暗くする幕(5.218)。スマホだけ */
.sheet-dim { display: none; }
@media (max-width: 820px) {
  .sheet-dim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 19;
    background: #000;
    opacity: 0;
    pointer-events: none;
  }
  .inspector[hidden] ~ .sheet-dim { display: none; }
}

/* ---------- 年の操作(5.325) ----------
   上の帯の、タブより上に常に置く(PCは名前とタブの間、スマホは検索とタブの間の1段)。
   「‹ 前の年 | 2026年▾ | 次の年 ›」を1つの枠に収めた1本の道具。年の一覧の先頭は「全ての年」。
   見た目の部品(.fy-*)は、5.242〜5.324で下の帯に置いていた年送りのものをそのまま使う */
.year-ctl { display: flex; align-items: center; flex: 0 0 auto; }
.year-ctl[hidden] { display: none; }
.fy-all { font-size: 13px; font-weight: 700; white-space: nowrap; }
.fy-nav { display: inline-flex; align-items: center; gap: 4px; }
/* PCの帯の中では、前後の矢印に年の数字を添えない(幅を検索欄に譲る) */
@media (min-width: 821px) {
  .year-ctl { margin-left: 6px; }
  .year-ctl .fy-nav-year { display: none; }
  .year-ctl .fy-nav { padding: 0 11px; font-size: 14px; }
}
.fy-title { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; color: var(--ink); }
.fy-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.fy-unit { font-size: 12px; font-weight: 700; }
.fy-suffix { margin-left: 4px; font-size: 12px; color: var(--ink-soft); }
/* 年送りは「‹ 2025 | 2026年▾ | 2027 ›」を1つの枠に収めた1本の道具にする(5.309) */
.fy-nav {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 12px;
  font-family: var(--font-mono);
  white-space: nowrap;
  cursor: pointer;
}
.fy-nav:first-child { border-radius: 8px 0 0 8px; border-right: 0; }
.fy-title + .fy-nav { border-radius: 0 8px 8px 0; border-left: 0; }
.fy-nav.is-empty { visibility: hidden; padding: 0; width: 0; border: 0; }
.fy-nav:hover { background: var(--surface-2); color: var(--ink); }
/* 年の数字を押すと端末の一覧が開く(selectを透明にして重ねる) */
.fy-title.is-select {
  position: relative;
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
}
.fy-nav.is-empty + .fy-title.is-select { border-radius: 8px 0 0 8px; }
.fy-title.is-select:has(+ .fy-nav.is-empty) { border-radius: 0 8px 8px 0; }
.fy-title.is-select:hover { background: var(--surface-2); }
.tl-year-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px; /* iPhoneで選ぶときに画面が拡大されないよう16px以上 */
}
.fy-caret { font-size: 11px; color: var(--ink-faint); margin-left: 3px; }
@media (max-width: 820px) {
  .focus-bar { padding: 6px 12px; gap: 8px; }
  .fy-nav { padding: 0 12px; font-size: 12px; }
  .fy-value { font-size: 16px; }
  .fy-suffix { display: none; }
}

/* 用語の説明の中の比較表(カートの部門ごとの違い等、5.221) */
.gloss-table-wrap { overflow-x: auto; margin: 10px 0 4px; }
.gloss-table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.45; }
.gloss-table th, .gloss-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.gloss-table thead th { font-size: 11.5px; color: var(--ink-faint); font-weight: 700; }
/* 行の見出しの列は折り返す(5.235)。折り返さないと「エグゼクティブアドバイザー・スーパーバイザー・
   名誉顧問」のような長い見出しで列が画面より広がり、説明の列が右の外へ押し出されて空に見えた */
.gloss-table tbody th { width: 34%; min-width: 4.5em; font-weight: 700; word-break: normal; overflow-wrap: anywhere; }

/* 用語集の分類の目次・分類の見出し・比較表の注記(5.224) */
.gloss-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.gloss-toc-link {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.gloss-toc-link:hover { background: var(--surface-2); }
.gloss-group-title {
  margin: 18px 0 0;
  padding: 0 0 6px;
  border-bottom: 2px solid var(--ink);
  font-size: 13px;
  font-weight: 900;
  scroll-margin-top: 4px;
}
.gloss-group-title + .gloss-entry { padding-top: 8px; }
.gloss-entry p.gloss-table-note { margin: 4px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-faint); }

/* 王者年表の今年の列で、まだ王者が載っていない升目の一言(5.226) */
.tl-season-pending {
  margin: 0;
  padding: 8px 6px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

/* 車種のカードの頭の、メーカーと走った年(5.230) */
.gloss-entry .cd-model-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: -4px 0 10px; }
.cd-model-span { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }

/* 絞り込みの年の範囲(5.230) */
.year-range { display: flex; align-items: flex-end; gap: 6px; margin: 4px 0 8px; }
.year-range-field { display: grid; gap: 2px; flex: 1; min-width: 0; }
.year-range-label { font-size: 10.5px; color: var(--ink-faint); }
.year-range select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 13px;
}
.year-range-dash { padding-bottom: 7px; color: var(--ink-faint); }

/* チームの詳細の「メーカーとの関係」の移り変わり(5.240) */
.tp-maker dd { display: grid; gap: 6px; }
.tp-mh-now { margin: 0; }
.tp-mh { list-style: none; margin: 0; padding: 0 0 0 10px; border-left: 2px solid var(--line); display: grid; gap: 6px; }
.tp-mh li { display: grid; gap: 1px; font-size: 11.5px; line-height: 1.55; color: var(--ink-soft); }
.tp-mh-years { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink); }
.tp-mh .rel-sources { margin-top: 0; }

/* ---------- 1年だけ表示: 行のまとまり(5.253) ----------
   王者年表の年別と同じ年表の形(左に行の名前、右にその年の札)のまま、どの札が
   どの行のものかを分かりやすくする(5.251の台紙・メーカー色の帯はやめた。
   ユーザー指示「メーカーの色はなし、カードではなく年表的な形式で」2026-10-06)。
   - 行の中(名前と札)は同じ地の色でつなげ、名前と札の間の区切り線を消す
   - 行と行の間は太い線と余白で区切る(行の中より行の間を強く) */
.timeline.is-single-year { gap: 0; background: var(--surface); }
.timeline.is-single-year .tl-row {
  gap: 0;
  border-top: 2px solid var(--line);
  contain-intrinsic-size: auto 260px;
}
.timeline.is-single-year .tl-row.is-alt { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.timeline.is-single-year .tl-name,
.timeline.is-single-year .tl-cell,
.timeline.is-single-year .tl-pending { background: transparent; }
.timeline.is-single-year .tl-name { border-right: 0; padding-top: 14px; padding-bottom: 14px; }
.timeline.is-single-year .tl-cell { padding-top: 14px; padding-bottom: 16px; }
.timeline.is-single-year .tl-team { font-weight: 800; }
@media (min-width: 821px) {
  /* PC: 名前は左の欄に、見出しらしく。押せる枠は消して文字だけにする */
  .timeline.is-single-year .tl-name-button {
    border: 0;
    background: transparent;
    padding: 0;
  }
  .timeline.is-single-year .tl-name-button:hover .tl-team { text-decoration: underline; }
  .timeline.is-single-year .tl-team { font-size: 15px; }
}
@media (max-width: 820px) {
  /* スマホ: 名前を札のすぐ上に置き、間を詰める */
  .timeline.is-single-year .tl-name { padding: 12px 10px 0; }
  .timeline.is-single-year .tl-cell { padding: 8px 10px 14px; }
  .timeline.is-single-year .tl-name-button {
    border: 0;
    background: transparent;
    padding: 0;
    min-height: 0;
  }
  .timeline.is-single-year .tl-team,
  .timeline.is-single-year .tl-name-button.is-cramped .tl-team { font-size: 15px; }
}

/* チームの一言説明の中の人名と、その人の短い肩書き(5.252) */
.tp-person { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
button.tp-person { cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
button.tp-person:hover { text-decoration-color: currentColor; }
.person-epithet { margin: 0 0 2px; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; color: var(--ink-soft); }

/* ---------- クラス札と車番の高さを揃える(5.255) ----------
   クラス札は用語の説明を開く枠(.gloss-term、文字の行の高さを持つ)に包まれていて、
   車番の札(高さ18px)と並べると、枠の中で札が文字の並びの位置に置かれ、上下に1〜2pxずれていた
   (スマホで目立つ)。枠ごと中身の高さに合わせ、横に並ぶ札をすべて同じ18pxの箱にする */
.entry-head > .gloss-term, .band-meta > .gloss-term,
.entry-head > .det-full, .band-meta > .det-full,
.entry-head .det-full > .gloss-term, .band-meta .det-full > .gloss-term {
  display: inline-flex;
  align-items: center;
}
.entry-head :is(.class-tag, .plate, .tire-tag, .engine-tag, .gt300-reg, .champ, .rookie, .tag),
.band-meta :is(.class-tag, .plate, .tire-tag, .engine-tag, .gt300-reg, .champ, .rookie, .tag, .chip) {
  display: inline-flex;
  align-items: center;
  height: 18px;
  box-sizing: border-box;
  line-height: 1;
}

/* 王者年表の1年だけ表示の見出し(5.256)。チームの見出しと同じ形にする(色付きの箱をやめ、
   大会の名前を太字の文字で、その下に小さく一言)。大会の色は文字の色にだけ残す。
   ユーザー指示「年別の形が見やすい。王者年表とともにこちらに」(2026-10-06) */
.timeline.is-single-year .champ-row-head { box-shadow: none; }
.timeline.is-single-year .champ-row-head .tl-name-label { gap: 2px; }
.timeline.is-single-year .champ-row-head .tl-kind { font-size: 11px; }
/* 大会の名前は、他の画面のクラス札(GT500などの四角い札)と同じ見た目の札にする(5.258。
   ユーザー指示「クラス名は他でも四角で囲んでいるので揃える」2026-10-06)。
   札の後ろで改行し、「ドライバーズ」と一言説明は次の行に小さく出す */
.timeline.is-single-year .champ-row-head .tl-name-label { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.timeline.is-single-year .champ-row-head .tl-name-label::before { content: ""; flex-basis: 100%; height: 0; order: 1; }
.timeline.is-single-year .champ-row-head .tl-name-label > * { order: 2; }
.timeline.is-single-year .champ-row-head .tl-name-label > .tl-team {
  order: 0;
  display: inline-flex;
  align-items: center;
  margin-bottom: 4px;
  padding: 2px 9px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--class-accent) 16%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--class-accent) 60%, transparent);
  color: var(--class-ink);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.45;
}
.timeline.is-single-year .champ-row-head .tl-blurb { font-size: 10px; font-weight: 500; }

/* ---------- 車両の画面: 何の画面かを先に言う(5.257) ---------- */
.cd-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.cd-car-icon {
  width: 20px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cd-car-icon circle { fill: var(--surface); }
.gloss-modal-title.cd-title { margin-bottom: 2px; font-size: 17px; line-height: 1.35; }
.cd-title-note { margin: 0 0 6px; padding-right: 24px; font-size: 11.5px; color: var(--ink-faint); }
.cd-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 6px;
}
.cd-facts dt { font-size: 11px; font-weight: 700; color: var(--ink-faint); white-space: nowrap; }
.cd-facts dd { margin: 0; min-width: 0; }
.cd-facts .cd-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.cd-facts .cd-model { margin: 0; }
.cd-facts .cd-years { margin: 0; }
.cd-sub > .gloss-term { display: inline-flex; align-items: center; }
.cd-sub :is(.class-tag, .plate) { display: inline-flex; align-items: center; height: 20px; box-sizing: border-box; line-height: 1; }
/* 「ドライバーズ/チームズ」は、大会名の札のすぐ右に置く(5.262。以前は一言説明と同じ2行目に
   並び、説明の一部に見えた) */
.timeline.is-single-year .champ-row-head .tl-name-label > .tl-kind {
  order: 0;
  align-self: center;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 800;
  color: var(--class-ink);
}

/* チームの詳細の「冠スポンサー」の項目(5.263)。名前の由来などと同じ1行の項目の中に、
   会社名(押すとスポンサーのカード)と名前が出た年を1社1行で並べる。箱には入れない */
.tp-sp { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.tp-sp li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.tp-sp .sp-open { font-weight: 600; }
.tp-sp-more { font-size: 11px; color: var(--ink-faint); }
/* 車両の画面の「ドライバー」(5.264)。名前を押すとその人を中心にした表示へ */
.cd-drivers { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.cd-driver {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  cursor: pointer;
}
.cd-driver::after { content: " ›"; color: var(--ink-faint); font-weight: 400; }
.cd-driver.is-plain { text-decoration: none; cursor: default; }
.cd-driver.is-plain::after { content: none; }

/* 王者年表の行の見出しの、大会の名前(5.266)。札の上に小さく、字間を空けて添える。
   スマホの全ての年の年表(行の名前を倒して出す狭い欄)では出さない */
.tl-series {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.timeline.is-single-year .champ-row-head .tl-name-label > .tl-series { order: -1; flex-basis: 100%; margin-bottom: 3px; }
@media (max-width: 820px) {
  .timeline:not(.is-single-year) .tl-series { display: none; }
}

/* 用語集の頭の「大会」(5.268)。見出しは、その大会の色の四角い札(クラス札と同じ見た目)にする */
.gloss-series h4 { margin-bottom: 6px; }
.gloss-series-tag { font-size: 13px; padding: 3px 10px; letter-spacing: 0.02em; }
.class-tag[data-class="kart"] {
  --class-accent: var(--kart-accent);
  --class-ink: var(--kart-ink);
}
/* 海外の大会の見出しの札(5.273)。国内の大会の色と混ざらないよう、無彩色の墨の札にする */
.class-tag[data-class="intl"] {
  --class-accent: var(--ink-soft);
  --class-ink: var(--ink);
  background: var(--surface-2);
}
.gloss-group-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-faint); }

/* 人物年表の、押しても行き先の無いカード(海外の参戦歴など。5.277) */
.band.is-static { cursor: default; }
.band.is-static:hover { background: var(--surface); }
.band.is-static .band-head > span:first-child::after { content: none; }

/* ---------- チームと縁の深い人(5.292) ----------
   色は血縁の線と同じ赤紫(--relation)。「レースの外のつながり」を1つの色で表す。
   札は、赤紫の点+短い言葉(オーナー・オーナー家・母体企業・スポンサー)。
   点は相関図の、その人の点の赤紫の輪と同じ印 */
.tie-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px 0 5px;
  border: 1px solid color-mix(in srgb, var(--relation) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--relation) 8%, var(--surface));
  color: var(--relation);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.tie-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--relation);
}
.member .tie-tag, .band-meta .tie-tag { font-size: 9.5px; line-height: 1.5; }

/* 詳細の「チームと縁の深い人」。左に赤紫の細い帯を置き、ほかの欄と見分ける */
/* チームと縁の深い人(5.292)。赤紫の縦線と見出しだけで示す(塗った箱にはしない。5.310) */
.tie-block {
  margin: 14px 0 4px;
  padding: 2px 0 2px 12px;
  border-left: 3px solid var(--relation);
}
.tie-block.is-person { margin-top: 8px; }
.tie-title {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--relation);
}
.tie-list { list-style: none; margin: 0; padding: 0; }
.tie-item + .tie-item { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.tie-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.tie-years { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.tie-desc { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-soft); }
.tie-desc .tp-person { font-weight: 700; color: var(--ink); cursor: pointer; }
.tie-desc .tp-person::after { content: " ›"; color: var(--ink-faint); }
.legend-tie .legend-line line { stroke: var(--relation); }


/* 人物・チームのURLで開いたとき、詳細を先に出して相関図を組んでいる間(5.302)。図の場所が空のままだと
   壊れて見えるので、組んでいることを一言出す */
.canvas-wrap.is-preparing::before {
  content: "相関図を組んでいます…";
  z-index: 1;
  position: absolute;
  top: 38%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-faint);
}
@media (min-width: 821px) {
  .canvas-wrap.is-preparing::before { top: 45%; }
}

/* 引き出しの中の「電波が無い場所で使う」(5.309)。スマホだけ(PCは上の帯にボタンがある) */
.rail-menu { display: none; }
@media (max-width: 820px) {
  .rail-menu { display: block; }
}
.rail-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rail-menu-item:hover { background: var(--surface-2); }
.rail-menu-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rail-menu-title { font-size: 13px; font-weight: 700; }
.rail-menu-sub { font-size: 11.5px; color: var(--ink-soft); line-height: 1.45; }

/* 車種のタブのカードは中に人の欄が無い(かんたん表示)。隣のカードの高さに合わせて伸びたとき、
   灰色の地が空の帯に見えないよう白い地にする(5.311) */
.timeline[data-view="car-model"] .entry:not(.is-title-drivers):not(.is-title-teams) { background: var(--surface); }

/* 引き出しの畳んだ欄(5.313)。見出しを押すと開く。開閉の印は「›」を回す */
.rail-fold > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 0;
  cursor: pointer;
  list-style: none;
}
.rail-fold > summary::-webkit-details-marker { display: none; }
.rail-fold > summary::after {
  content: "›";
  font-size: 13px;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform 0.15s;
}
.rail-fold:not([open]) > summary::after { transform: none; }
.rail-fold[open] > summary { margin-bottom: 7px; }
#year-filters[hidden] { display: none; }