/* のぶラジ growth board 共通スタイル。
   🔴 2026-09-07に index.html のインラインCSSから切り出した（テーマ・台本タブの新設）。
   3枚に同じCSSを写経すると必ず片方だけ直って食い違うので、1枚に寄せてある。
   ⚠️ 色の原則は据え置き：--good（青）は「目標に到達した」ときだけ。
      それ以外の強弱は全部グレースケールで付ける。2色目を状態表示に足さない */
  :root {
    --page: #0d0d0d;
    --surface: #1a1a1c;
    --ink: #ffffff;
    --ink-2: #c2c3c9;
    --muted: #85878f;
    --grid: #2b2c30;
    --baseline: #37383d;
    --border: rgba(255,255,255,0.10);
    /* 色は1つだけ。--good＝「合否計器が目標に届いた」ときのみ使う。
       それ以外の強弱は全部グレースケールで付ける（2026-08-09・のぶさんの指示で整理）。
       ⚠️ 2色目を状態表示に足さないこと。目標到達という唯一の合図が埋もれる。
       🔵 2026-08-14に緑→青へ。konaeボードが全面グリーン（--accent #16a34a）なので
          事業ごとに色で見分けられるようにする（のぶさんの指示）。#3b82f6 は
          2026-07-24の初期設計で使っていたのぶラジの色＝出戻り */
    --accent: #c2c3c9;
    --track: #26272b;
    --good: #3b82f6;
    --good-glow: rgba(59,130,246,0.45);
    --good-wash: rgba(59,130,246,0.14);
    --good-edge: rgba(59,130,246,0.40);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { color-scheme: dark; }
  body {
    background: var(--page);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Hiragino Sans", "Segoe UI", sans-serif;
    padding: max(16px, env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }

  header { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 2px; }
  header img { height: 24px; display: block; }
  header .stamp { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }

  .card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 20px; }
  .label {
    font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 10px;
  }
  .label .ja { letter-spacing: 0.04em; font-weight: 500; text-transform: none; }
  .label .pill {
    margin-left: auto; font-size: 11px; font-weight: 650; letter-spacing: 0.02em; text-transform: none;
    color: var(--ink-2); background: rgba(255,255,255,0.07); border-radius: 999px; padding: 3px 10px;
  }

  /* 質2計器 */
  .gauge { padding: 14px 0 2px; }
  .gauge + .gauge { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 12px; }
  .gauge .head { display: flex; align-items: baseline; gap: 10px; }
  .gauge .name { font-size: 13px; color: var(--ink-2); font-weight: 600; }
  .gauge .now { font-size: 40px; font-weight: 650; line-height: 1.1; margin-left: auto; letter-spacing: -0.01em; }
  .gauge .now small { font-size: 20px; font-weight: 500; color: var(--ink-2); }
  .gauge .now.pending { font-size: 15px; font-weight: 500; color: var(--muted); }
  /* KGIカードは単独で最上位に置く（2026-08-17）。数字だけ一段大きくして主従を出す */
  .gauge.lead { padding: 6px 0 2px; }
  .gauge.lead .now { font-size: 54px; }
  .gauge.lead .now small { font-size: 24px; }
  .gauge.lead .bar { height: 12px; border-radius: 6px; }
  @media (max-width: 420px) { .gauge.lead .now { font-size: 44px; } }
  .gauge .bar { position: relative; height: 10px; border-radius: 5px; background: var(--track); margin-top: 14px; }
  /* 未到達のバーは【沈んだ青】（2026-08-14・のぶさん「バーが白だと寂しい」）。
     2026-08-09の「色は1本だけ」は維持したまま、明度で2段階にする：
     未到達＝暗く沈んだ青（色はあるが光らない）／到達＝鮮やかな青＋グロー。
     ⚠️ 2色目を足さないこと。目標到達という唯一の合図が埋もれる */
  .gauge .fill {
    position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 5px;
    background: linear-gradient(90deg, #16305c 0%, #2f6fc4 100%);
    transition: width 0.9s cubic-bezier(.22,.9,.35,1);
  }
  /* 目標到達。boardで“光る”のはここだけ */
  .gauge .fill.hit {
    background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
    box-shadow: 0 0 12px var(--good-glow);
  }
  .gauge .fill.base { background: #4a4c55; box-shadow: none; }
  .gauge .tick { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--ink); }
  .gauge .row { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--muted); }
  .gauge-sub {
    display: flex; flex-wrap: wrap; gap: 3px 3px; row-gap: 12px; margin-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08); padding-top: 12px;
  }
  .gauge-sub[hidden] { display: none; }
  .gauge-sub .s { flex: 1 1 92px; min-width: 92px; text-align: center; }
  .gauge-sub .k { font-size: 8.5px; color: var(--muted); white-space: nowrap; }
  .gauge-sub .v { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .gauge .row .base-note { color: var(--muted); }
  .gauge .row .target { color: var(--ink-2); font-weight: 600; }

  .substats { display: flex; gap: 12px; margin-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 14px; }
  .substat { flex: 1; }
  .substat .k { font-size: 11px; color: var(--muted); }
  .substat .v { font-size: 17px; font-weight: 650; margin-top: 3px; white-space: nowrap; }
  .substat .v small { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 2px; }
  .substat .v.up { color: var(--ink); }

  .ig-head { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
  .ig-now { font-size: 40px; font-weight: 650; line-height: 1.1; }
  .metric-name { font-size: 12px; color: var(--muted); }
  .delta {
    font-size: 13px; font-weight: 650; color: var(--ink);
    background: rgba(255,255,255,0.08); border-radius: 999px; padding: 3px 10px;
  }
  .delta.down { color: var(--muted); background: rgba(255,255,255,0.06); }
  .delta .per { font-size: 11px; font-weight: 500; opacity: 0.75; }

  .seg-row { display: flex; justify-content: flex-end; margin-top: 4px; }
  .label .gauge-seg { margin-left: auto; }
  /* 期間トグル＝カード外・ページ全体に効く操作（2026-08-17） */
  .period { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin: 2px 4px -4px; }
  .period .month-pick { margin-top: 0; }
  .month-pick { display: flex; justify-content: flex-end; margin-top: 10px; }
  .month-pick[hidden] { display: none; }
  .month-pick input {
    font: inherit; font-size: 12px; color: var(--ink-2);
    background: var(--page); border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px;
    color-scheme: dark;
  }
  .seg { display: flex; gap: 2px; background: var(--page); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
  .seg button {
    font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--muted); background: none; border: none;
    padding: 4px 12px; border-radius: 999px; cursor: pointer;
  }
  .seg button.on { background: #2b2c30; color: var(--ink); }
  /* 並び替えトグル＝Videosカードの中だけに効く操作なので、期間トグルより一回り小さくする
     （2026-08-31。同じ大きさだとページ全体の操作に見えて、期間トグルと区別がつかない） */
  .seg.mini { margin-left: auto; padding: 2px; }
  .seg.mini button { font-size: 11px; padding: 3px 9px; letter-spacing: 0; }

  .chart-box { margin-top: 12px; position: relative; }
  svg { display: block; width: 100%; height: auto; }
  svg text { font-family: inherit; }
  .tip {
    position: absolute; pointer-events: none; opacity: 0;
    background: #0d0d0dee; border: 1px solid var(--border); border-radius: 10px;
    padding: 7px 10px; font-size: 12px; color: var(--ink-2);
    white-space: nowrap; transform: translate(-50%, -110%);
    transition: opacity 0.12s;
  }
  .tip b { color: var(--ink); font-weight: 650; }

  /* 動画別テーブル */
  .vids { list-style: none; margin-top: 14px; display: flex; flex-direction: column; }
  .vid { border-top: 1px solid rgba(255,255,255,0.08); padding: 13px 0; }
  .vid:first-child { border-top: none; }
  .vid .top { display: flex; gap: 12px; align-items: flex-start; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .vid .thumb { width: 96px; aspect-ratio: 16/9; border-radius: 10px; object-fit: cover; flex: none; background: var(--track); }
  .vid .title {
    font-size: 13px; line-height: 1.45; color: var(--ink-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .vid .top:hover .title { color: var(--ink); }
  .vid .date { font-size: 11px; color: var(--muted); margin-top: 4px; display: flex; gap: 8px; align-items: center; }
  /* 🔴 セルは6つ固定になったので（2026-08-31）、flex-wrapをやめて3列×2段に固定する。
     wrapのままだと幅次第で「5個＋1個」に割れて、最後の登録数だけが1個で浮いていた */
  .vid .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 10px; }
  .vid .stat { background: rgba(255,255,255,0.03); border-radius: 8px; padding: 6px 1px; text-align: center; }
  .vid .stat .k { font-size: 8.5px; letter-spacing: 0; color: var(--muted); white-space: nowrap; }
  .vid .stat .v { font-size: 11.5px; font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .vid .stat .v small { font-size: 9px; font-weight: 500; color: var(--muted); }
  .vid .stat .v.na { color: var(--muted); font-weight: 500; }
  /* 色は1本のまま、強さを2段階に（2026-08-10）。above＝v2中央値超え／hit＝目標到達 */
  .vid .stat.above .v { color: var(--good); }
  .vid .stat.hit .v { color: var(--good); }
  .vid .stat.hit { background: var(--good-wash); box-shadow: inset 0 0 0 1px var(--good-edge); }
  /* 🔴 obs（観測セル）と reco／検索語句のスタイルは2026-08-31に削除。
     動画テーブルを6セル（視聴時間・インプレ・CTR・再生・維持率・登録数）に絞り、
     薄く沈める観測セルそのものが無くなったため */
  .vids .more {
    border-top: 1px solid rgba(255,255,255,0.08); text-align: center;
    color: var(--muted); font-size: 12px; cursor: pointer; padding: 12px 0 4px; user-select: none;
  }
  .vids .more:hover { color: var(--ink-2); }
  .list-cap {
    margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 10px;
    font-size: 10px; letter-spacing: 0.06em; color: var(--muted); line-height: 1.6;
  }

  footer { text-align: center; font-size: 11px; color: var(--muted); padding-top: 4px; letter-spacing: 0.06em; }

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

  /* ═══ タブ（2026-09-07・テーマ班／台本班の新設）═══
     🔴 JSの切り替えではなく【ページを分けてリンクで飛ぶ】。konae board と同じ方式。
     ホーム画面アプリから開いたときに前回のタブが復元される（=どのタブを見ていたかがURLで残る）
     のと、班ごとにJSを分けられるのが理由。CSSは konae の .tabs をそのまま移植 */
  .tabs { display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
  .tabs a {
    flex: 1; text-align: center; text-decoration: none;
    font-size: 12px; font-weight: 600; color: var(--muted);
    padding: 7px 10px; border-radius: 999px;
    -webkit-tap-highlight-color: transparent;
  }
  .tabs a.on { background: #2b2c30; color: var(--ink); }

  /* ═══ テーマ班・台本班のタブ専用（2026-09-07）═══
     🔴 色の原則は据え置き。--good（青）が点くのは「1万到達」＝目標に届いた本だけ。
        台本班のKGIには目標線が【まだ無い】（10月頭に引く）ので、あちらは色を一切使わない。
     ⚠️ ここに2色目を足さないこと */

  /* 本別のバー（テーマ＝累計インプレ／台本＝全体維持率）。KGIゲージと同じ塗り分けを使い、
     一回り小さくする（カードの中の一覧であってページの合否計器ではないため） */
  .vbar { border-top: 1px solid rgba(255,255,255,0.08); padding: 13px 0; }
  .vbar:first-child { border-top: none; }
  /* 暫定＝まだ確定していない回。数字は出すが薄くして、確定と見分かるようにする
     （台本班の「確定は公開+10日」。暫定を中央値に入れないのと同じ区別を画面にも出す） */
  .vbar.tent { opacity: 0.45; }
  /* 🔴 サムネを入れる（2026-09-07・のぶさんの指摘「両方ともサムネが入ってないとわかりずらい」）。
     タイトルだけだと【初心者向け】で始まる同じ文字列が並んで、どの回か即座に分からない。
     全体タブの動画テーブルと同じ形（左96pxのサムネ＋右にタイトル）に揃える */
  .vbar .top {
    display: flex; gap: 12px; align-items: flex-start;
    color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .vbar .thumb { width: 96px; aspect-ratio: 16/9; border-radius: 10px; object-fit: cover; flex: none; background: var(--track); }
  .vbar .tx { flex: 1; min-width: 0; }   /* min-width:0 が無いと長いタイトルが値を押し出す */
  .vbar .name {
    font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .vbar .top:hover .name { color: var(--ink); }
  /* 値はサムネの行ではなく【バーと同じ行】に置く（2026-09-07）。
     サムネを入れたぶんタイトルが狭くなり、375pxで1行半しか出なくなったため。
     ⚠️ min-width で幅を固定する——値の桁数でバーの右端がズレると、本同士の長さを比べられなくなる */
  .vbar .row2 { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
  .vbar .row2 .bar { flex: 1; margin-top: 0; }
  .vbar .val { flex: none; min-width: 62px; text-align: right; font-size: 16px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .vbar .val small { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 1px; }
  .vbar .val.hit { color: var(--good); }
  .vbar .bar { position: relative; height: 8px; border-radius: 4px; background: var(--track); margin-top: 11px; }
  .vbar .fill {
    position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 4px;
    background: linear-gradient(90deg, #16305c 0%, #2f6fc4 100%);
    transition: width 0.9s cubic-bezier(.22,.9,.35,1);
  }
  .vbar .fill.hit { background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%); box-shadow: 0 0 12px var(--good-glow); }
  .vbar .meta { font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.5; }

  /* 分布（台本班のKGI）。🔴 目標線が無いのでバーにしない——バーは「線までどれだけ来たか」を
     読ませる形なので、線が無いのに置くと存在しない目標を読ませてしまう。
     散らばりと中央値だけを出す。⚠️ ここは色を使わない（到達という合図が無いため） */
  .dist { position: relative; height: 40px; margin-top: 18px; }
  .dist .axis { position: absolute; left: 0; right: 0; top: 15px; height: 1px; background: var(--grid); }
  .dist .d { position: absolute; top: 11px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #5d5f68; }
  .dist .med { position: absolute; top: 4px; height: 23px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
  .dist .lab { position: absolute; top: 24px; font-size: 10px; color: var(--muted); }
  .dist .lab.r { right: 0; }

  /* 大きい単独の数字（棚の視聴時間など）。ゲージにしない＝目標線が無いもの */
  .big { font-size: 38px; font-weight: 650; line-height: 1.1; letter-spacing: -0.01em; margin-top: 10px; }
  .big small { font-size: 18px; font-weight: 500; color: var(--ink-2); margin-left: 2px; }
  .big.pending { font-size: 17px; font-weight: 500; color: var(--muted); }

  /* 内訳の行（棚のトップ5など） */
  .rows { list-style: none; margin-top: 14px; }
  .rows li { display: flex; gap: 10px; align-items: center; border-top: 1px solid rgba(255,255,255,0.08); padding: 9px 0; }
  /* 棚の内訳にもサムネ（2026-09-07・のぶさんの指摘）。1行に収めたいので本別のバーより小さく */
  .rows .mini { width: 64px; aspect-ratio: 16/9; border-radius: 6px; object-fit: cover; flex: none; background: var(--track); }
  .rows li:first-child { border-top: none; }
  .rows .n { flex: 1; font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rows .v { font-size: 13px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }

  /* 崖＝直近の確定回の冒頭で最も人が抜けた場所。秒・倍率・その秒の発話の3点セットで出す。
     🔴 発話を必ず添える。秒だけ出しても打ち手にならない（どこを直すかが決まらない） */
  .cliff { border-top: 1px solid rgba(255,255,255,0.08); padding: 14px 0 4px; }
  .cliff:first-of-type { border-top: none; }
  .cliff .h { display: flex; gap: 10px; align-items: baseline; font-variant-numeric: tabular-nums; }
  .cliff .sec { font-size: 22px; font-weight: 650; }
  .cliff .ratio { font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
  .cliff .pct { margin-left: auto; font-size: 11.5px; color: var(--muted); }
  .cliff .say {
    margin-top: 9px; font-size: 12px; line-height: 1.7; color: var(--ink-2);
    background: rgba(255,255,255,0.03); border-radius: 10px; padding: 10px 12px;
  }

  .note { font-size: 11px; color: var(--muted); line-height: 1.7; margin-top: 12px; }
  .note.top { margin-top: 8px; }

  .vbars { margin-top: 14px; }
  /* 目標線が無い一覧（台本班の本別維持率）はグレーで塗る。
     🔴 青は「目標に到達した」ときだけの合図なので、線が無いところで青を使わない */
  .vbar .fill.base { background: #4a4c55; box-shadow: none; }