/* tvc.lol: one stylesheet for every page. Tokens, type, and the components the pages share.
   The rules and the reasons are in docs/DESIGN.md. Page-specific rules stay in the page. */

/* ---- fonts, self-hosted (SIL Open Font License; variable files, latin subset) ---- */
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/BigShouldersDisplay.woff2) format("woff2") }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/InstrumentSans.woff2) format("woff2") }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/fonts/InstrumentSans-Italic.woff2) format("woff2") }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/fonts/JetBrainsMono.woff2) format("woff2") }

/* ---- tokens: a broadcast world, committed to one theme ---- */
:root {
  --ground: #0b0d12;        /* phosphor-black, blue bias */
  --ground-2: #10131a;
  --bezel: #1b1e26;
  --bezel-edge: #2c303b;
  --ink: #ecebe4;           /* CRT white, warm */
  --ink-2: #a3a7b3;
  --ink-3: #6b7080;
  --line: #232733;
  --lamp: #ff3b30;          /* ON AIR. the only loud color. */
  --lamp-glow: rgba(255,59,48,.45);
  --amber: #ffb638;         /* price, sparingly */
  --ok: #3ddc84;            /* paid, approved, credit */
  --link: #9ec1ff;          /* links inside prose only */
  --ok-bg: #15201a; --ok-line: #2b4a35;
  --bad-bg: #241417; --bad-line: #55262a;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 8px;                 /* the one radius; 6 for chips and rows, 12+ for the set */
  color-scheme: dark;
}

/* ---- base ---- */
* { box-sizing: border-box }
html { background: var(--ground) }
body { margin: 0; background: var(--ground); color: var(--ink); font: 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden }
a { color: inherit }
button, input, select, textarea { font: inherit }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px }
::selection { background: var(--amber); color: #111 }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important } }

/* SMPTE bars: the channel's brand mark, top of every page */
.bars { height: 6px; display: grid; grid-template-columns: repeat(7, 1fr) }
.bars i { display: block }
.bars i:nth-child(1){background:#c0c0c0}.bars i:nth-child(2){background:#c0c000}.bars i:nth-child(3){background:#00c0c0}
.bars i:nth-child(4){background:#00c000}.bars i:nth-child(5){background:#c000c0}.bars i:nth-child(6){background:#c00000}.bars i:nth-child(7){background:#0000c0}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px }
.wrap.narrow { max-width: 760px; padding-bottom: 80px }
.wrap.reading { max-width: 720px; padding-bottom: 80px }

/* ---- header: lamp, mark, section ---- */
header { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 8px; gap: 16px }
.mark { font: 900 30px/1 var(--display); letter-spacing: .02em; text-decoration: none; color: inherit; display: flex; align-items: center; gap: 12px }
.lamp { width: 12px; height: 12px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 0 3px rgba(255,59,48,.15), 0 0 18px var(--lamp-glow); animation: pulse 2.2s ease-in-out infinite; flex: 0 0 auto }
@keyframes pulse { 50% { box-shadow: 0 0 0 3px rgba(255,59,48,.05), 0 0 6px var(--lamp-glow) } }
.chan { font: 500 12px/1 var(--mono); color: var(--ink-3); letter-spacing: .12em; text-transform: uppercase; text-decoration: none }
.chan.amber { color: var(--amber) }

/* ---- type ---- */
h1 { font: 900 clamp(40px, 7vw, 64px)/.95 var(--display); letter-spacing: .01em; margin: 24px 0 6px }
h1.big { font-size: clamp(48px, 8vw, 96px); line-height: .92; margin: 16px 0 8px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; overflow-wrap: anywhere }
h1.big img { height: clamp(44px, 6vw, 72px); width: auto; max-width: 240px; object-fit: contain; border-radius: 6px }
h2 { font: 900 26px/1 var(--display); letter-spacing: .02em; margin: 32px 0 10px }
h3 { font: 900 22px/1 var(--display); letter-spacing: .02em; margin: 0 0 8px }
.line { font: italic 400 clamp(17px, 2vw, 21px)/1.35 var(--body); color: var(--ink-2); margin: 0 0 22px; text-wrap: balance }
.line a { color: var(--ink-3); font: 500 13px/1 var(--mono); text-decoration: none; margin-left: 10px; white-space: nowrap }
.line a:hover { color: var(--ink) }
.eyebrow { font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); display: flex; align-items: center; gap: 10px }
.eyebrow .lamp { width: 8px; height: 8px }
.muted { color: var(--ink-3); font-size: 14px }
.fine { font-size: 13px; color: var(--ink-3); line-height: 1.5 }
.fine b { color: var(--ink-2); font-weight: 600 }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums }
.prose p, .prose li { color: var(--ink-2); max-width: 66ch }
.prose p b, .prose li b { color: var(--ink); font-weight: 600 }
.prose a { color: var(--link) }
.prose ol, .prose ul { padding-left: 22px } .prose li { margin: 6px 0 }
.prose h2 { padding-top: 16px; border-top: 1px solid var(--line); margin-top: 36px }
.prose .upd { font: 500 13px/1 var(--mono); color: var(--ink-3); margin: 0 0 32px }
.key { background: #15181f; border: 1px solid var(--line); border-left: 3px solid var(--lamp); border-radius: var(--r); padding: 14px 18px; margin: 20px 0 }
.key p { margin: 0; color: var(--ink); max-width: none }

/* ---- pill: a state, one per page, mono caps ---- */
.pill { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; border-radius: 6px; background: var(--ground-2); border: 1px solid var(--line); color: var(--ink-2) }
.pill.live { background: var(--lamp); color: #fff; border-color: transparent }
.pill.ok { color: var(--ok) }
.pill.warn { color: var(--amber) }
.pill.bad { color: var(--lamp) }
.pill .lamp { width: 8px; height: 8px; box-shadow: none; animation: none }
.chip { display: inline-block; font: 700 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; padding: 3px 5px; vertical-align: middle }

/* ---- the big red button, and its quiet sibling ---- */
.cta { appearance: none; border: 0; cursor: pointer; background: var(--lamp); color: #fff; border-radius: var(--r); padding: 18px 22px; text-align: left; text-decoration: none; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; position: relative; overflow: hidden; box-shadow: 0 10px 30px -10px var(--lamp-glow); transition: transform .12s ease, box-shadow .12s ease }
.cta:hover { transform: translateY(-1px); box-shadow: 0 16px 36px -10px var(--lamp-glow) }
.cta:active { transform: translateY(0) }
.cta:disabled { cursor: default; opacity: .7; transform: none; box-shadow: none } .cta:disabled::after { display: none }
.cta .l { font: 900 30px/1 var(--display); letter-spacing: .03em }
.cta .s { font: 500 12px/1.3 var(--body); opacity: .85 }
.cta .n { font: 700 28px/1 var(--mono); font-variant-numeric: tabular-nums }
.cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s ease; pointer-events: none }
.cta:hover::after { transform: translateX(120%) }
.cta.wait { background: var(--amber); color: #111; box-shadow: none }
.cta.quiet { background: var(--ground-2); color: var(--ink); border: 1px solid var(--bezel-edge); box-shadow: none; cursor: default }
.cta.quiet .n { color: var(--amber) }
.cta.quiet:hover { transform: none; border-color: var(--ink-3) }
.cta .tools { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap }

/* small buttons: primary (lamp), light (on a red block), quiet (outline) */
.btn { appearance: none; cursor: pointer; border: 0; border-radius: 6px; padding: 10px 14px; font: 900 16px/1 var(--display); letter-spacing: .04em; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; background: var(--lamp); color: #fff }
.btn.light { background: #fff; color: #111 }
.btn.quiet { background: var(--ground-2); color: var(--ink); border: 1px solid var(--line); font: 600 14px/1 var(--body) }
.btn.big { font-size: 20px; padding: 16px 22px; border-radius: var(--r) }
.btn:disabled { opacity: .5; cursor: default }
.linkish { background: none; border: 0; padding: 0; color: inherit; opacity: .8; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit }
.linkish:hover { opacity: 1 }

/* ---- forms ---- */
label { display: grid; gap: 6px; font-size: 13px; color: var(--ink-2) }
label span.h { color: var(--ink-3); font-size: 12px }
input[type=text], input[type=url], input[type=email], input[type=number], input[type=password], select, textarea { background: var(--ground); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 12px; width: 100% }
select { appearance: none }
input[type=number] { font-family: var(--mono); font-variant-numeric: tabular-nums }
input[type=file] { color: var(--ink-2); font-size: 13px }
input.inline { width: auto; min-width: 120px; padding: 6px 8px; font: 700 16px var(--mono); border: 0 }
.err { color: var(--lamp); font-size: 13px; min-height: 1.2em }
form.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 16px 0 }
form.row input { width: auto; min-width: 220px }
form.row input[type=number] { min-width: 120px }

/* ---- notices: one box, three moods ---- */
.notice { background: var(--ok-bg); border: 1px solid var(--ok-line); border-radius: var(--r); padding: 10px 14px; margin: 12px 0 20px; font-size: 14px }
.notice.bad { background: var(--bad-bg); border-color: var(--bad-line) }
.notice.plain { background: var(--ground-2); border-color: var(--line) }
.notice a { color: inherit }

/* ---- facts row, tables, lists ---- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px 20px; font-size: 14px; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 14px }
.facts b { display: block; color: var(--ink); font: 700 18px/1.2 var(--mono); font-variant-numeric: tabular-nums }
.facts b.amber { color: var(--amber) }
table.ledger { width: 100%; border-collapse: collapse; font-size: 14px }
table.ledger td { padding: 9px 0; border-top: 1px solid var(--line); vertical-align: top }
table.ledger td.n { text-align: right; font: 500 14px var(--mono); white-space: nowrap; font-variant-numeric: tabular-nums }
table.ledger td.n.plus { color: var(--ok) }
table.ledger td.t { color: var(--ink-3); white-space: nowrap; font: 500 12px var(--mono) }

/* ---- dialogs ---- */
dialog { background: var(--ground-2); color: var(--ink); border: 1px solid var(--bezel-edge); border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 32px)); box-shadow: 0 40px 100px -20px rgba(0,0,0,.9) }
dialog::backdrop { background: rgba(5,6,10,.75); backdrop-filter: blur(6px) }
dialog[open] { animation: rise .28s cubic-bezier(.2,.8,.2,1) }
@keyframes rise { from { transform: translateY(16px); opacity: 0 } }
dialog.note { width: min(460px, calc(100vw - 32px)); padding: 22px; font-size: 15px; line-height: 1.45 }
dialog.note h2 { margin: 0 0 10px; font-size: 24px }
dialog.note p { margin: 0 0 10px }
dialog.note .row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap }
.bk-h { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line) }
.bk-h h2 { font: 900 28px/1 var(--display); letter-spacing: .03em; margin: 0 }
.bk-h button { background: none; border: 0; color: var(--ink-3); font-size: 22px; cursor: pointer; line-height: 1; padding: 4px 8px }
dialog form { padding: 20px 22px 22px; display: grid; gap: 14px }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px } @media (max-width: 480px) { .grid2 { grid-template-columns: 1fr } }

/* ---- media ---- */
video.spot { width: 100%; border-radius: 12px; background: #000; border: 1px solid var(--bezel-edge); display: block }
.strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px }
.strip img { height: 90px; width: auto; border-radius: 4px; background: #222; flex: 0 0 auto }

/* ---- footer: the same line on every page ---- */
/* ---- ratings rows: the board, the day pages, the hall ---- */
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 18px }
.sec-h h2 { font: 900 34px/1 var(--display); letter-spacing: .02em; margin: 0 }
.sec-h span { font: 500 12px/1 var(--mono); color: var(--ink-3); letter-spacing: .12em; text-transform: uppercase }
.chart { display: grid; gap: 2px }
.row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 120px 96px; gap: 16px; align-items: center; padding: 12px 10px; border-radius: 6px; position: relative; isolation: isolate }
@media (max-width: 640px) { .row { grid-template-columns: 34px minmax(0,1fr) 88px } .row .air { display: none } }
.row::before { content: ""; position: absolute; inset: 0; border-radius: 6px; background: var(--ground-2); z-index: -1; transform-origin: left; transform: scaleX(var(--w, 0)); transition: transform .8s cubic-bezier(.2,.8,.2,1) }
.row.top::before { background: linear-gradient(90deg, rgba(255,59,48,.22), rgba(255,59,48,.06)) }
.row .rk { font: 900 26px/1 var(--display); color: var(--ink-3) } .row.top .rk { color: var(--lamp) }
.row .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px }
.row .nm img { height: 30px; width: auto; max-width: 96px; object-fit: contain; border-radius: 4px }
.row .nm > div { min-width: 0; overflow: hidden; text-overflow: ellipsis } .row .nm a { text-decoration: none } .row .nm a:hover { text-decoration: underline }
.row .nm small { display: block; font-weight: 400; color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.row .air { font: 500 13px/1 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right }
.row .air a { text-decoration: none } .row .air a:hover { color: var(--ink); text-decoration: underline }
.row .pd { font: 700 18px/1 var(--mono); color: var(--amber); font-variant-numeric: tabular-nums; text-align: right }
.row.pulled { opacity: .45 } .row.pulled .nm { text-decoration: line-through }
.empty { padding: 28px 10px; color: var(--ink-3); font-size: 14px }
@media (prefers-reduced-motion: reduce) { .row::before { transition: none } }

/* ---- the tape (log, day pages): a time, a sentence, a number ---- */
table.tape { width: 100%; border-collapse: collapse; font-size: 15px }
table.tape td { padding: 10px 0; border-top: 1px solid var(--line); vertical-align: baseline }
table.tape td.t { color: var(--ink-3); white-space: nowrap; font: 500 12px var(--mono); padding-right: 16px; width: 1% }
table.tape td.n { text-align: right; font: 700 15px var(--mono); white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--amber); padding-left: 16px; width: 1% }
table.tape td.n.dim { color: var(--ink-3); font-weight: 500 }
table.tape a { color: var(--ink); text-decoration: none } table.tape a:hover { text-decoration: underline }
table.tape .k { font: 700 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-right: 8px }
table.tape .k.live { color: var(--lamp) } table.tape .k.ok { color: var(--ok) }

/* ---- hall: several boards side by side ---- */
.boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 40px 48px; margin-top: 8px }
.boards .chart .row { grid-template-columns: 36px minmax(0, 1fr) 96px } .boards .row .rk { font-size: 22px }
.days { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px }
.days a { font: 500 12px/1 var(--mono); color: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; text-decoration: none; background: var(--ground-2) }
.days a:hover { color: var(--ink); border-color: var(--bezel-edge) }
.embed { background: var(--ground-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; font: 500 13px/1.6 var(--mono); color: var(--ink-2); overflow-x: auto; white-space: pre; margin: 12px 0 }
.nav2 { display: flex; justify-content: space-between; gap: 16px; margin: 28px 0 0; font: 500 13px/1 var(--mono) }
.nav2 a { color: var(--ink-2); text-decoration: none } .nav2 a:hover { color: var(--ink) }
.fine.foot { margin-top: 32px }
.record section { margin-top: 44px }
.record .facts { margin-top: 8px }

footer { border-top: 1px solid var(--line); padding: 20px 0 40px; font-size: 13px; color: var(--ink-3); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap }
footer a { color: var(--ink-3) }
footer a:hover { color: var(--ink) }