/* TokyoRobot — 実体。トークンは docs/DESIGN.md v2 から機械的に起こす。
   この CSS が DESIGN.md と食い違ったら DESIGN.md が勝つ。
   コントラスト比は sagyou/rebuild_20260905/pipeline/prerelease.py がこのトークンから計算して assert する（手で書かない）。 */

:root{
  /* Colors — DESIGN.md §2 */
  --bg:#F7F9FC;          /* Paper */
  --surface-1:#FFFFFF;
  --surface-2:#EEF2F7;   /* Mist */
  --surface-3:#E1E7EF;   /* Stone */
  --line:rgba(21,35,59,.10);
  --line-strong:rgba(21,35,59,.18);
  --ink:#15233B;
  --ink-2:#3F4C64;
  --ink-3:#56637B;
  --ink-4:#A3ACBC;       /* 無効状態のみ */
  --accent:#1565C0;      /* Servo Blue — 唯一のアクセント */
  --accent-wash:#E3EEFA;
  --live:#BF231A;        /* LIVE 専用 */
  --player-bg:#000;

  /* Type — DESIGN.md §3 */
  --font-latin:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-ja:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Noto Sans JP",sans-serif;
  --text-caption:12px; --text-label:13px; --text-body-sm:14px;
  --text-body:15px; --text-body-lg:17px;
  --text-title-sm:20px; --text-title:24px; --text-headline:32px; --text-page:40px;

  /* Space & shape — DESIGN.md §4 */
  --gap-xs:4px; --gap-sm:8px; --gap:12px; --gap-md:16px; --gap-lg:24px; --gap-xl:32px;
  --section:48px; --page:1280px; --header-h:56px; --row-h:56px;
  --r:12px; --r-pill:9999px; --t:150ms ease;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-ja); font-size:var(--text-body); line-height:1.7;
  font-feature-settings:"tnum";
}
/* ⚠ body に overflow-x:hidden を置かない（LSN-0262: 横スクロール検査を無効化する）。はみ出しは原因を直す。 */
img{max-width:100%}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
.lat,.mark,.av__i{font-family:var(--font-latin)}
.wrap{max-width:var(--page); margin:0 auto; padding:0 var(--gap-md)}
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
[hidden]{display:none !important}

/* 言語切替: 「隠す」だけを !important で（詳細度の後勝ちで二重表示になる罠・LSN-0243） */
html[lang="ja"] [data-l="en"]{display:none !important}
html[lang="en"] [data-l="ja"]{display:none !important}

/* ---------- Header ---------- */
.hd{
  height:var(--header-h); background:var(--bg);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; position:sticky; top:0; z-index:30;
}
.hd__in{display:flex; align-items:center; gap:var(--gap-md); width:100%; min-width:0}
.mark{
  font-weight:700; font-size:18px; letter-spacing:.01em; color:var(--ink);
  text-decoration:none; flex:none;
}
.mark:hover{text-decoration:none}
.tag{font-size:var(--text-label); color:var(--ink-3); flex:none}
.hd nav{margin-left:auto; display:flex; align-items:center; gap:var(--gap-xs); min-width:0}
.hd nav a{
  font-size:var(--text-body-sm); color:var(--ink-2); text-decoration:none;
  padding:6px 8px; border-radius:var(--r); white-space:nowrap;
}
.hd nav a:hover{background:var(--surface-2); text-decoration:none}
.hd nav a[aria-current="page"]{color:var(--ink); font-weight:500}
.lang{display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--r-pill); overflow:hidden; flex:none; margin-left:var(--gap-sm)}
.lang button{
  font-family:var(--font-latin); font-size:12px; font-weight:600; letter-spacing:.02em;
  padding:6px 10px; border:0; background:transparent; color:var(--ink-2); cursor:pointer; min-height:30px;
}
.lang button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}

/* ---------- Layout ---------- */
.stage{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:var(--gap-lg);
       padding-top:var(--gap-lg); padding-bottom:var(--section); align-items:start}

/* ---------- Player ---------- */
.player{min-width:0}
.frame{
  position:relative; aspect-ratio:16/9; background:var(--player-bg);
  border-radius:var(--r); overflow:hidden;
}
/* 舞台の上に自前 UI を重ねない。幕は ::after のオーバーレイで、動画要素は隠さない（LSN-0239） */
.frame iframe,.frame #tr-player{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
.frame::after{content:""; position:absolute; inset:0; background:var(--player-bg); opacity:0; pointer-events:none; transition:opacity var(--t)}
.frame[data-curtain="on"]::after{opacity:1}

.now{display:flex; align-items:center; gap:var(--gap); min-height:var(--row-h); padding:var(--gap-sm) 4px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.now__state{display:inline-flex; align-items:center; gap:7px; font-size:var(--text-label); font-weight:500; color:var(--ink-2); white-space:nowrap}
.now__state .dot{width:8px; height:8px; border-radius:50%; background:var(--ink-3); flex:none}
.now[data-state="live"] .now__state{color:var(--live)}
.now[data-state="live"] .dot{background:var(--live)}
.now[data-state="tap"] .now__state{color:var(--ink)}
.now[data-state="tap"] .dot{background:var(--ink)}
.now[data-state="error"] .now__state{color:var(--ink-3)}
.now[data-state="tuning"] .dot{background:var(--ink-4)}
.now__name{font-size:var(--text-body); font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:40%}
.now__title{flex:1 1 160px; min-width:0; font-size:var(--text-body-sm); color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.now__actions{display:inline-flex; align-items:center; gap:var(--gap-sm); margin-left:auto}
.now__official{font-size:var(--text-label); white-space:nowrap}
.now__msg{margin:var(--gap-sm) 4px 0; font-size:var(--text-body-sm); color:var(--ink-2)}

.info{display:flex; gap:var(--gap); padding:var(--gap-md) 4px; align-items:flex-start}
.info__body{min-width:0; flex:1 1 auto}
.info__name{font-size:var(--text-title-sm); font-weight:700; line-height:1.35; word-break:keep-all}
.info__meta{font-size:var(--text-caption); color:var(--ink-3); margin-top:2px}
.info__note{font-size:var(--text-body-sm); color:var(--ink-2); margin:var(--gap-sm) 0 0; max-width:64ch}
.info__foot{display:flex; flex-wrap:wrap; gap:var(--gap-sm) var(--gap-md); margin-top:var(--gap-sm); font-size:var(--text-label)}
.info__foot .is-quiet{color:var(--ink-3)}
.info__caution{font-size:var(--text-caption); color:var(--ink-3); margin:var(--gap-xs) 0 0}

/* ---------- List panel ---------- */
.panel{min-width:0; background:var(--surface-1); border-radius:var(--r); border:1px solid var(--line); overflow:hidden}
.panel__top{padding:var(--gap); display:flex; flex-direction:column; gap:var(--gap-sm); border-bottom:1px solid var(--line)}
.search{
  width:100%; height:40px; padding:0 var(--gap-md); border-radius:var(--r-pill);
  border:1px solid var(--line-strong); background:var(--surface-1);
  font-family:inherit; font-size:var(--text-body-sm); color:var(--ink);
}
.search::placeholder{color:var(--ink-3)}
.seg{display:flex; flex-wrap:wrap; gap:var(--gap-xs); align-items:center}
.seg__label{font-size:var(--text-caption); color:var(--ink-3); margin-right:var(--gap-xs); white-space:nowrap}
.pill{
  font-family:inherit; font-size:var(--text-label); line-height:1;
  padding:9px 12px; min-height:34px; border-radius:var(--r-pill);
  border:1px solid var(--line-strong); background:var(--surface-1); color:var(--ink-2);
  cursor:pointer; transition:background var(--t), opacity var(--t); white-space:nowrap;
}
.pill:hover{background:var(--surface-2)}
.pill[data-cat][aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
.pill[data-mode][aria-pressed="true"]{background:var(--accent-wash); border-color:var(--accent); color:var(--accent); font-weight:500}
/* 0 件になる組み合わせは押せなくする（隠さない・行き止まりを作らない） */
.pill:disabled{color:var(--ink-4); border-color:var(--line); background:var(--surface-1); cursor:not-allowed}
.pill:disabled:hover{background:var(--surface-1)}

/* B面を押したときだけ現れる「このときのリンク・読みもの」 */
.shelf{padding:var(--gap) var(--gap) var(--gap-md); border-bottom:1px solid var(--line); background:var(--surface-1)}
.shelf h2{font-size:var(--text-label); font-weight:500; color:var(--ink-3); margin:0 0 var(--gap-sm)}
.shelf ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--gap-xs) var(--gap-md)}
.shelf li{font-size:var(--text-body-sm); line-height:1.6}
.shelf li .host{margin-left:4px}
.shelf .shelf__art{display:block; font-size:var(--text-body-sm)}

.listhead{margin:0; padding:var(--gap-sm) var(--gap) var(--gap-xs); font-size:var(--text-caption); color:var(--ink-3); border-bottom:1px solid var(--line)}
.panel__hint{margin:0; font-size:var(--text-caption); color:var(--ink-3)}
.rows{list-style:none; margin:0; padding:0; max-height:min(62vh,760px); overflow-y:auto}
.grp{font-size:var(--text-caption); color:var(--ink-3); padding:var(--gap-sm) var(--gap) var(--gap-xs); border-bottom:1px solid var(--line); background:var(--surface-1)}
.grp .n{margin-left:6px; font-family:var(--font-latin)}
.row{border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row a{
  display:flex; gap:var(--gap); align-items:center; min-height:var(--row-h);
  padding:var(--gap-sm) var(--gap); text-decoration:none; color:inherit;
  border-left:2px solid transparent; transition:background var(--t);
}
.row a:hover{background:var(--surface-2); text-decoration:none}
.row[aria-current="true"] a{background:var(--surface-3); border-left-color:var(--accent)}
.av{position:relative; width:40px; height:40px; border-radius:var(--r-pill); flex:none; background:var(--surface-2);
    display:grid; place-items:center; overflow:hidden}
.av__i{font-weight:600; font-size:15px; color:var(--ink-2); line-height:1; letter-spacing:0}
.av img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.av img.is-broken{display:none}
.av--24{width:24px; height:24px} .av--24 .av__i{font-size:10px}
.av--48{width:48px; height:48px} .av--48 .av__i{font-size:18px}
/* ⚠ row__n / row__m は span。block にしないと名前とメタが1行に連なって折り返す（jpn11 の実測） */
.row__b{min-width:0; flex:1 1 auto; display:block}
.row__n,.row__m{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row__n{font-size:var(--text-body); line-height:1.35; color:var(--ink)}
.row__m{font-size:var(--text-caption); color:var(--ink-3); line-height:1.5}
.row.is-dormant .row__n{color:var(--ink-2)}
.chip{display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:var(--r-pill); font-size:var(--text-caption); background:var(--surface-2); color:var(--ink-2); flex:none}
.chip--live{background:transparent; color:var(--live); border:1px solid var(--live); font-weight:700}
.chip--live::before{content:"●"; margin-right:4px; font-size:8px}
.empty{padding:var(--gap-lg) var(--gap); color:var(--ink-3); font-size:var(--text-body-sm)}
.panel__foot{padding:var(--gap-sm) var(--gap); border-top:1px solid var(--line); font-size:var(--text-caption); color:var(--ink-3)}

/* ---------- Buttons ---------- */
.btn{font-family:inherit; font-size:var(--text-label); line-height:1; padding:0 14px; min-height:40px; border-radius:var(--r);
     border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:6px; text-decoration:none}
.btn--primary{background:var(--ink); color:var(--bg)}
.btn--ghost{background:transparent; border-color:var(--line-strong); color:var(--ink-2)}
.btn--ghost:hover{background:var(--surface-2)}
.btn--sm{min-height:32px; padding:0 10px; font-size:var(--text-caption)}

/* ---------- Sections / pages ---------- */
main h2{font-size:var(--text-title); margin:var(--section) 0 var(--gap-md); font-weight:700; word-break:keep-all}
.page h1{font-size:var(--text-page); line-height:1.2; margin:var(--gap-xl) 0 var(--gap-md); font-weight:700; word-break:keep-all}
.lede{font-size:var(--text-body-lg); color:var(--ink-2); max-width:62ch; margin:0 0 var(--gap-lg)}
.note{background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r); padding:var(--gap-md); max-width:72ch; margin:0 0 var(--gap-lg)}
.note h3{margin:0 0 var(--gap-xs); font-size:var(--text-label); color:var(--ink-3); font-weight:500}
.note p{margin:0; font-size:var(--text-body-sm); color:var(--ink-2)}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--gap-md); list-style:none; padding:0; margin:0}
.card{background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r); padding:var(--gap-md); min-width:0}
.card a{text-decoration:none; font-weight:500; font-size:var(--text-body-lg); color:var(--ink); word-break:keep-all}
.card a:hover{color:var(--accent)}
.card p{margin:var(--gap-xs) 0 0; font-size:var(--text-body-sm); color:var(--ink-2)}
.card__m{font-size:var(--text-caption); color:var(--ink-3)}
.host{font-size:var(--text-caption); color:var(--ink-3)}
.why{font-size:var(--text-body-sm); color:var(--ink-2); margin:2px 0 0}
.page ul.plain{padding-left:1.2em} .page ul.plain li{margin:0 0 var(--gap-sm)}
.page p{max-width:72ch}

/* 全チャンネル一覧・カテゴリページの行（2段目に掲載理由） */
.rows--full{max-height:none; overflow:visible}
.rows--full .row > div{display:flex; gap:var(--gap); align-items:flex-start; padding:var(--gap) var(--gap); border-left:2px solid transparent}
.rows--full .row__n a{color:var(--ink)}
.rows--full .row__n a:hover{color:var(--accent)}
.rows--full .row__n,.rows--full .row__m{white-space:normal}
.row__why{font-size:var(--text-body-sm); color:var(--ink-2); margin-top:4px; display:block; white-space:normal}
.row__src{font-size:var(--text-caption); color:var(--ink-3); margin-top:2px; display:block; white-space:normal}
.row--link .av{background:var(--surface-2)}

/* ---------- Footer ---------- */
.ft{border-top:1px solid var(--line); padding:var(--section) 0; margin-top:var(--section); background:var(--bg)}
.ft p{margin:0 0 var(--gap-sm); font-size:var(--text-body-sm); color:var(--ink-2); max-width:72ch}
.ft nav{display:flex; flex-wrap:wrap; gap:var(--gap-sm) var(--gap-md)}
.ft nav a{font-size:var(--text-body-sm); color:var(--ink-2)}
.ft small{display:block; margin-top:var(--gap-md); font-size:var(--text-caption); color:var(--ink-3)}

/* ---------- SP ---------- */
@media (max-width:900px){
  :root{--header-h:52px}
  .tag{display:none}
  .stage{display:contents}          /* sticky プレーヤーの親を一覧まで含める */
  .player{position:sticky; top:var(--header-h); z-index:20; background:var(--bg); padding-bottom:var(--gap-sm)}
  .frame{border-radius:0; margin:0 calc(var(--gap-md) * -1)}
  .info{display:none}               /* SP は畳む（DESIGN.md §5） */
  .panel{border-left:0; border-right:0; border-radius:0; margin:0 calc(var(--gap-md) * -1)}
  .rows{max-height:none}
  .page h1{font-size:var(--text-headline)}
  .hd nav a{padding:6px 4px}
  .now__name{max-width:55%}
  .now__actions{margin-left:0}
  /* ピル列を1行の横スクロールにする（折り返すと商品が画面の外に出る・LSN-0262） */
  .seg{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; padding-bottom:2px}
  .seg::-webkit-scrollbar{display:none}
  .seg > *{flex:none; scroll-snap-align:start}
  .panel__top{gap:var(--gap-xs)}
}
@media (max-width:560px){
  /* 実描画で nav の文字が JA/EN の下へ潜った（390px）。nav は縮んで横スクロール、最狭幅では
     「全チャンネル一覧」を隠す（一覧パネルの末尾とフッターに同じ導線がある）。 */
  .mark{font-size:16px}
  .hd nav{gap:0; flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none}
  .hd nav::-webkit-scrollbar{display:none}
  .hd nav a{font-size:var(--text-caption); padding:6px 4px}
  .hd nav a[data-nav="channels"],.hd nav a[data-nav="about"]{display:none}   /* 390px では4語が入らない（実測）。両方ともフッターと一覧パネルの末尾に同じ導線がある */
  .lang{flex:none; margin-left:4px}
  .lang button{padding:6px 7px}
  .now__title{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}