/* 方向性：放送局の計器卓。紙色の面に極細の罫線、数字は等幅、色はコバルト1色だけ。角丸と影は使わない */
:root {
  --bg: #f3f2ee;
  --surface: #fbfaf7;
  --ink: #16171b;
  --ink-2: #4d5059;
  --ink-3: #868a93;
  --rule: #d9d8d2;
  --rule-soft: #e7e6e1;
  --accent: #233bc4;
  --accent-wash: #233bc414;
  --up: #17804a;
  --down: #c03b31;
  --f-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --f-num: "Martian Mono", ui-monospace, "Consolas", monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121316; --surface: #18191d; --ink: #eeede8; --ink-2: #b4b6bd; --ink-3: #7d818a;
    --rule: #2c2e33; --rule-soft: #222428; --accent: #7d8ff5; --accent-wash: #7d8ff51c;
    --up: #4cc27e; --down: #ef6b61; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121316; --surface: #18191d; --ink: #eeede8; --ink-2: #b4b6bd; --ink-3: #7d818a;
  --rule: #2c2e33; --rule-soft: #222428; --accent: #7d8ff5; --accent-wash: #7d8ff51c;
  --up: #4cc27e; --down: #ef6b61; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--f-sans); font-size: 14px; line-height: 1.75;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
[hidden] { display: none !important; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; font-feature-settings: normal; }
button { font: inherit; color: inherit; }
button:focus-visible, input:focus-visible, tr:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2 { margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
code { font-family: var(--f-num); font-size: .85em; background: var(--accent-wash); padding: 1px 4px; }

/* ---- shell ---- */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.rail {
  border-right: 1px solid var(--rule); background: var(--surface);
  padding: var(--s5) var(--s4); display: flex; flex-direction: column; gap: var(--s6);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: var(--s2); font-weight: 900; letter-spacing: -0.01em; font-size: 15px; }
.brand-mark { width: 14px; height: 14px; background: var(--accent); }
.ch-list { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.ch {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s3); align-items: center;
  padding: var(--s3) 0; border: 0; border-bottom: 1px solid var(--rule); background: none;
  text-align: left; cursor: pointer; position: relative;
}
.ch[aria-current="true"]::before { content: ""; position: absolute; left: calc(-1 * var(--s4)); top: 0; bottom: -1px; width: 3px; background: var(--accent); }
.ch img, .ch .ph { width: 32px; height: 32px; object-fit: cover; background: var(--rule-soft); display: block; }
.ch .ph { display: grid; place-items: center; font-weight: 700; color: var(--ink-3); font-size: 13px; }
.ch .nm { font-weight: 700; font-size: 13px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch .st { font-size: 11px; color: var(--ink-3); line-height: 1.4; display: block; }
.ch .st.on { color: var(--up); }
.rail-foot { margin-top: auto; display: grid; gap: var(--s2); justify-items: start; }
.link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.main { padding: var(--s6) var(--s7) var(--s8); display: grid; gap: var(--s7); min-width: 0; align-content: start; }

/* ---- status / setup ---- */
.lede { font-size: 13px; color: var(--ink-2); margin-bottom: calc(-1 * var(--s5)); }
.status:empty { display: none; }
.status { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; padding: var(--s3) var(--s4); border: 1px solid var(--rule); background: var(--surface); font-size: 13px; }
.status .tag { font-family: var(--f-num); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 8px; border: 1px solid currentColor; }
.status.demo { border-color: var(--accent); }
.status.demo .tag { color: var(--accent); }
.status.err { border-color: var(--down); color: var(--down); }
.btn { background: var(--accent); color: #fdfdfb; border: 0; padding: var(--s2) var(--s4); cursor: pointer; font-weight: 700; font-size: 13px; }
.btn.ghost { background: none; color: var(--ink); border: 1px solid var(--rule); }

.setup { border: 1px solid var(--accent); padding: var(--s5); display: grid; gap: var(--s3); background: var(--surface); }
.setup h2 { font-size: 18px; }
.setup p { color: var(--ink-2); max-width: 65ch; }
.setup-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.setup-row label { font-size: 12px; color: var(--ink-2); width: 100%; }
.setup-row input { flex: 1 1 320px; min-width: 0; padding: var(--s2) var(--s3); border: 1px solid var(--rule); background: var(--bg); color: var(--ink); font-family: var(--f-num); font-size: 12px; }
.fine { font-size: 12px; color: var(--ink-3); }

/* ---- hero ---- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id fig" "ranges fig" "period fig";
  gap: var(--s4) var(--s6); align-items: end; padding-bottom: var(--s5); border-bottom: 2px solid var(--ink);
}
.hero-id { grid-area: id; display: flex; gap: var(--s4); align-items: center; min-width: 0; }
.hero-id img { width: 56px; height: 56px; object-fit: cover; }
.hero-id h1 { font-size: 32px; font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; }
.eyebrow { font-family: var(--f-num); font-size: 11px; letter-spacing: .1em; color: var(--ink-3); }
.meta { font-size: 12px; color: var(--ink-2); margin-top: var(--s1); }
.hero-fig { grid-area: fig; text-align: right; }
.big { font-size: clamp(44px, 7vw, 76px); font-weight: 300; line-height: 1; letter-spacing: -0.04em; }
.delta { font-size: 12px; margin-top: var(--s2); color: var(--ink-3); }
.delta.up { color: var(--up); } .delta.down { color: var(--down); }
.ranges { grid-area: ranges; display: flex; gap: 0; border: 1px solid var(--ink); width: max-content; max-width: 100%; }
.ranges button { background: none; border: 0; padding: 6px 14px; cursor: pointer; font-size: 13px; }
.ranges button + button { border-left: 1px solid var(--ink); }
.ranges button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.period { grid-area: period; font-size: 11px; color: var(--ink-3); }

/* ---- kpis ---- */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: calc(-1 * var(--s5)); }
.kpi { padding: var(--s4) var(--s4) var(--s3); display: grid; gap: 2px; min-width: 0; }
.kpi + .kpi { border-left: 1px solid var(--rule); }
.kpi .lb { font-size: 12px; color: var(--ink-2); }
.kpi .v { font-family: var(--f-num); font-size: 22px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.3; }
.kpi .d { font-family: var(--f-num); font-size: 11px; color: var(--ink-3); }
.kpi .d.up { color: var(--up); } .kpi .d.down { color: var(--down); }
.kpi svg { width: 100%; height: 26px; display: block; margin-top: var(--s2); }

/* ---- blocks ---- */
.block { display: grid; gap: var(--s4); min-width: 0; }
.block-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s2) var(--s4); padding-bottom: var(--s2); border-bottom: 1px solid var(--rule); }
.block-head h2 { font-size: 18px; font-weight: 700; }
.hint { font-size: 12px; color: var(--ink-3); }
.tabs { display: flex; flex-wrap: wrap; gap: var(--s4); }
.tabs button { background: none; border: 0; padding: 0 0 2px; cursor: pointer; font-size: 13px; color: var(--ink-3); border-bottom: 2px solid transparent; }
.tabs button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 700; }

.chart { position: relative; }
.chart svg { display: block; width: 100%; overflow: visible; }
.tip { position: fixed; z-index: 10; pointer-events: none; background: var(--ink); color: var(--bg); padding: 6px 10px; font-size: 12px; white-space: nowrap; transform: translate(-50%, calc(-100% - 12px)); }
.tip b { font-family: var(--f-num); font-weight: 500; }

.tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.bars { display: grid; gap: var(--s3); align-content: start; }
.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s3); font-size: 13px; }
.bar .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .p { font-family: var(--f-num); font-size: 12px; color: var(--ink-2); }
.bar .tr { grid-column: 1 / -1; height: 6px; background: var(--rule-soft); }
.bar .fl { height: 100%; background: var(--accent); }
.empty { color: var(--ink-3); font-size: 13px; }

/* ---- table ---- */
.tablewrap { overflow-x: auto; background: linear-gradient(to right, var(--bg) 30%, transparent) left / 24px 100% no-repeat local, linear-gradient(to left, var(--bg) 30%, transparent) right / 24px 100% no-repeat local, radial-gradient(farthest-side at 100% 50%, var(--ink-3), transparent) right / 10px 100% no-repeat scroll; }
table { border-collapse: collapse; width: 100%; min-width: 820px; font-size: 13px; }
th, td { padding: var(--s3) var(--s3); border-bottom: 1px solid var(--rule-soft); text-align: right; white-space: nowrap; vertical-align: middle; }
th:first-child, td:first-child { text-align: left; white-space: normal; padding-left: 0; }
th { font-weight: 500; font-size: 12px; color: var(--ink-3); border-bottom-color: var(--rule); }
th button { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
th button[data-dir]::after { content: attr(data-dir); color: var(--accent); margin-left: 4px; }
tbody tr { cursor: pointer; }
tbody tr:hover, tbody tr[aria-selected="true"] { background: var(--accent-wash); }
.vid { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s3); align-items: center; min-width: 260px; }
.vid img { width: 72px; height: 40px; object-fit: cover; background: var(--rule-soft); display: block; }
.vid .t { font-weight: 500; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vid .s { font-family: var(--f-num); font-size: 11px; color: var(--ink-3); }
td.num { font-family: var(--f-num); font-size: 12px; }
.meter { display: inline-block; width: 44px; height: 4px; background: var(--rule-soft); margin-left: var(--s2); vertical-align: middle; }
.meter i { display: block; height: 100%; background: var(--accent); }

.foot { display: grid; gap: var(--s2); font-size: 12px; color: var(--ink-3); max-width: 75ch; border-top: 1px solid var(--rule); padding-top: var(--s4); }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi:nth-child(4) { border-left: 0; }
  .kpi:nth-child(n+4) { border-top: 1px solid var(--rule); }
  .tri { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--rule); gap: var(--s4); padding: var(--s4); }
  .ch-list { grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; border-top: 0; }
  .ch { border-bottom: 0; border-right: 1px solid var(--rule); padding: var(--s2) var(--s3); }
  .ch[aria-current="true"]::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 3px; }
  .rail-foot { flex-direction: row; display: flex; flex-wrap: wrap; gap: var(--s4); }
  .main { padding: var(--s5) var(--s4) var(--s7); gap: var(--s6); }
  .hero { grid-template-columns: 1fr; grid-template-areas: "id" "fig" "ranges" "period"; }
  .hero-fig { text-align: left; }
  .hero-id h1 { font-size: 24px; }
  .kpis { grid-template-columns: 1fr 1fr; margin-top: calc(-1 * var(--s4)); }
  .kpi:nth-child(n) { border-left: 0; border-top: 1px solid var(--rule); }
  .kpi:nth-child(-n+2) { border-top: 0; }
  .kpi:nth-child(even) { border-left: 1px solid var(--rule); }
  .tri { grid-template-columns: 1fr; gap: var(--s6); }
}
@media (prefers-reduced-motion: no-preference) {
  .bar .fl, .ranges button, .tabs button { transition: all 150ms ease; }
}