/* livehacker.news teletext. The material: a black field, seven flat colours, a 40-column character
   grid set in Bedstead (the SAA5050 character generator), double-height rows, block mosaics, fastext.
   A cell is 0.6em wide and 1em tall (Bedstead's own metrics), so 40 columns are exactly 24em. */

@font-face {
  font-family: "Bedstead";
  src: url("fonts/bedstead.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bedstead";
  src: url("fonts/bedstead-bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* the seven teletext colours and black: flat fills, never blended */
  --tt-black: #000000;
  --tt-red: #ff0000;
  --tt-green: #00ff00;
  --tt-yellow: #ffff00;
  --tt-blue: #0000ff;
  --tt-magenta: #ff00ff;
  --tt-cyan: #00ffff;
  --tt-white: #ffffff;
  /* the one brand exception: "live" in Hacker News orange, used only in the wordmark */
  --brand-live: #ff6600;

  --cell: 0.6em;               /* one character column */
  --row: 1em;                  /* one character row */
  --gutter: 16px;
  --tap: 0px;                  /* minimum touch target, raised for coarse pointers */
  /* the grid scales with the window: 40 columns across the width, about 38 rows down the height */
  --fs: clamp(12px, min(calc((100vw - 2 * var(--gutter)) / 24), calc(100svh / 38)), 34px);
  --arrive-ms: 250ms;

  color-scheme: dark;
  accent-color: var(--tt-yellow);
}
@media (pointer: coarse) { :root { --tap: 44px; } }

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--tt-black);
  color: var(--tt-white);
  scrollbar-color: var(--tt-blue) var(--tt-black);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--tt-black);
  color: var(--tt-white);
  font-family: "Bedstead", monospace;
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  min-height: 100svh;
}

/* browser surfaces carry the world too */
::selection { background: var(--tt-yellow); color: var(--tt-black); }
::-webkit-scrollbar { width: 10px; height: 10px; background: var(--tt-black); }
::-webkit-scrollbar-thumb { background: var(--tt-blue); }
::-webkit-scrollbar-thumb:hover { background: var(--tt-cyan); }
::-webkit-scrollbar-corner { background: var(--tt-black); }
:focus { outline: none; }
:focus-visible { outline: 0.12em solid var(--tt-white); outline-offset: 0.12em; }
input, textarea { caret-color: var(--tt-yellow); }
a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 0.1em; text-underline-offset: 0.18em; }
a:hover { background: var(--tt-white); color: var(--tt-black); text-decoration: none; }
p, h1, h2, h3, ul, ol, li, dl, dd, dt, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font: inherit; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- the screen ---------- */
.screen {
  font-size: var(--fs);
  line-height: 1;
  width: 24em;                         /* 40 columns */
  margin: 0 auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--tt-black);
}

.row { display: block; min-height: var(--row); }
.gap { height: var(--row); }
.mt { margin-top: var(--row); }
.cols { display: flex; gap: var(--cell); align-items: flex-start; }
.cols > * { min-width: 0; }
.spread { display: flex; justify-content: space-between; gap: var(--cell); align-items: flex-start; }
.nowrap { white-space: nowrap; }
.pad { padding-inline: var(--cell); }  /* one column in from the edge */

/* ---------- double height ----------
   Teletext double height stretches a row to two rows without widening the characters.
   .dh1: a single line (labels). .dh: text that may wrap: laid out at twice the size over twice the
   width, then squeezed back across, so every wrapped line is exactly two rows tall. */
.dh1 { display: inline-block; height: 2em; white-space: nowrap; }
.dh1 > span, .dh1 > b { display: inline-block; transform: scaleY(2); transform-origin: 0 0; font-weight: inherit; }
.dh { overflow: clip; }
.dh-in { display: block; width: 200%; font-size: 200%; transform: scaleX(0.5); transform-origin: 0 0; }

/* ---------- block mosaics ---------- */
.mosaic { display: inline-block; vertical-align: top; fill: currentColor; flex: none; }
.cell { display: inline-block; width: var(--cell); height: var(--row); vertical-align: top; flex: none; }

/* ---------- header row ---------- */
.hdr { position: sticky; top: 0; z-index: 3; background: var(--tt-black); }
.hrow { display: flex; justify-content: space-between; align-items: flex-start; white-space: nowrap; min-height: 1em; }
/* LIVEHACKER.NEWS takes the date's room in the 40-cell header row: page, name, clock, on air (founder, 2026-10-22) */
.hrow time { display: none; }
.pnum { position: relative; display: inline-block; color: var(--tt-white); cursor: text; }
.pnum input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; margin: 0;
  font-size: 16px; background: transparent; cursor: text;
}
.pnum:focus-within { background: var(--tt-white); color: var(--tt-black); outline: 0.12em solid var(--tt-white); outline-offset: 0.12em; }
.pnum.typing { background: var(--tt-yellow); color: var(--tt-black); }
/* phones: the page number is a box you can tap to type into, so it looks like one */
@media (pointer: coarse) { .pnum:not(:focus-within):not(.typing) { box-shadow: inset 0 0 0 0.1em var(--tt-cyan); padding-inline: 0.15em; } }
.air { display: inline-flex; gap: var(--cell); align-items: flex-start; }
.air .lamp { width: var(--cell); height: var(--row); background: currentColor; }
.status { min-height: 1em; padding-inline: var(--cell); }
.status:empty { display: none; }

/* the studio is calling: an alert that takes over the head of the page */
.ring { background: var(--tt-red); color: var(--tt-white); padding: 0.5em var(--cell) 0; animation: flash 1s steps(1, end) infinite; }
.ring .ring-keys { display: flex; gap: var(--cell); flex-wrap: wrap; padding-bottom: 1em; }
.ring .ring-note { min-height: 1em; color: var(--tt-black); }   /* black on red 5.25:1, on white 21:1 */
@keyframes flash { 50% { background: var(--tt-white); color: var(--tt-red); } }

/* ---------- pages ---------- */
.pages { flex: 1 0 auto; display: grid; align-content: start; padding-bottom: 1em; }
.page { grid-area: 1 / 1; background: var(--tt-black); min-width: 0; }
.page.leaving { z-index: 0; }
.page.arriving { z-index: 1; animation: arrive var(--arrive-ms) steps(var(--rows, 24), jump-start) both; }
@keyframes arrive { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

.band { background: var(--tt-blue); color: var(--tt-white); padding: 0.25em var(--cell); }
.band-head { display: flex; align-items: flex-start; gap: var(--cell); min-height: 2em; }
.band-head .grow { flex: 1; }
.band-head + * { margin-top: var(--row); }  /* one blank teletext row under the double-height headline row */
.band .meta { color: var(--tt-cyan); }
.wm { white-space: nowrap; }
.wm .live { background: var(--brand-live); color: var(--tt-black); }
.wm .rest { color: var(--tt-yellow); }
.tag { display: inline-block; padding-inline: var(--cell); white-space: nowrap; }

/* index rows with dot leaders */
.leaders li { display: flex; align-items: flex-start; }
.leaders a, .leaders button.linkrow {
  display: flex; flex: 1; gap: 0; text-decoration: none; color: inherit; padding-inline: var(--cell);
  min-height: max(1em, var(--tap)); align-items: center; background: none; border: 0; cursor: pointer; text-align: left;
}
.leaders .dots { flex: 1 1 0; width: 0; min-width: var(--cell); overflow: hidden; white-space: nowrap; color: var(--tt-cyan); }
.leaders li > a, .leaders li > button { min-width: 0; }
.leaders a > span:first-child, .leaders a > span:last-child { flex: none; }
.leaders .dots::before { content: "................................................"; }
.leaders a:hover, .leaders button.linkrow:hover { background: var(--tt-white); color: var(--tt-black); }
.leaders a:hover .dots, .leaders button.linkrow:hover .dots { color: var(--tt-black); }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--cell);
  min-height: max(1em, var(--tap)); padding: 0 var(--cell); border: 0; border-radius: 0; cursor: pointer;
  background: var(--tt-white); color: var(--tt-black); white-space: nowrap; line-height: 1; text-decoration: none;
}
.btn.bg-r { background: var(--tt-red); } .btn.bg-g { background: var(--tt-green); }
.btn.bg-y { background: var(--tt-yellow); } .btn.bg-c { background: var(--tt-cyan); }
.btn.bg-m { background: var(--tt-magenta); } .btn.bg-k { background: var(--tt-black); color: var(--tt-white); }
.btn:hover:not(:disabled) { background: var(--tt-white); color: var(--tt-black); }
.btn.bg-w:hover:not(:disabled), .btn:not([class*="bg-"]):hover:not(:disabled) { background: var(--tt-yellow); }
.btn:active:not(:disabled) { background: var(--tt-black); color: var(--tt-white); outline: 0.08em solid var(--tt-white); outline-offset: -0.08em; }
/* a closed control: hollow cell, dotted white edge, never invisible and never looking live */
.btn:disabled { background: var(--tt-black); color: var(--tt-white); cursor: not-allowed; box-shadow: none; outline: 0.1em dotted var(--tt-white); outline-offset: -0.1em; }
.form-cols { display: grid; row-gap: var(--row); }
.btn.linkish { padding-inline: 0; text-decoration: underline; text-decoration-thickness: 0.1em; text-underline-offset: 0.18em; }
.btn.tall { min-height: max(2em, var(--tap)); }

.field { display: block; }
.field-label { display: block; color: var(--tt-cyan); }
.input {
  display: block; width: 100%; min-height: max(1em, var(--tap)); padding: 0 var(--cell); border: 0; border-radius: 0;
  background: var(--tt-blue); color: var(--tt-white); line-height: 1;
}
@media (pointer: coarse) { .input { font-size: max(1em, 16px); } }
.input::placeholder { color: var(--tt-cyan); opacity: 1; }
.input:focus-visible { outline-color: var(--tt-yellow); }
.input:disabled { background: var(--tt-black); box-shadow: none; outline: 0.1em dotted var(--tt-white); outline-offset: -0.1em; color: var(--tt-white); cursor: not-allowed; }
.input:disabled::placeholder { color: var(--tt-white); }
.check input:disabled { box-shadow: none; outline: 0.1em dotted var(--tt-white); outline-offset: -0.1em; cursor: not-allowed; }
.input[aria-invalid="true"] { box-shadow: inset 0 -0.12em 0 var(--tt-red); }

/* a two-cell check box: hollow when empty, a solid yellow block when ticked */
.check { display: flex; gap: var(--cell); align-items: flex-start; cursor: pointer; padding-block: 0.25em; }
.check input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; width: 1.2em; height: 1em;
  background: var(--tt-black); box-shadow: inset 0 0 0 0.12em var(--tt-white); cursor: pointer;
}
.check input:checked { background: var(--tt-yellow); box-shadow: none; }
.check input:focus-visible { outline: 0.12em solid var(--tt-white); outline-offset: 0.12em; }
.check input[aria-invalid="true"] { box-shadow: inset 0 0 0 0.12em var(--tt-red); }

.note { min-height: 1em; }
.note.err { color: var(--tt-red); }
.note.ok { color: var(--tt-green); }

/* ---------- the room (page 888) ---------- */
.speakers li { display: flex; gap: var(--cell); align-items: flex-start; }
.speakers .who { width: calc(7 * var(--cell)); flex: none; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.speakers .lit { width: var(--cell); height: 1em; flex: none; background: currentColor; }
.speakers .unlit { width: var(--cell); height: 1em; flex: none; box-shadow: inset 0 0 0 0.1em currentColor; }
.listen-count { color: var(--tt-green); }
.mosaic.sep rect { transform-box: fill-box; transform-origin: center; transform: scale(0.72); }
/* poll bars, in half-cell steps */
.opts li { display: block; }
.opts .label { display: block; }
.barrow { display: grid; grid-template-columns: minmax(0, 1fr) calc(4 * var(--cell)); column-gap: var(--cell); height: 1em; align-items: start; }
.opts .bar { display: block; height: 0.6667em; background: var(--tt-yellow); }
/* concealed until you vote (teletext REVEAL): every bar the same dotted full-width placeholder */
.opts .bar.concealed { width: 100%; background: transparent; border: 0.12em dotted var(--tt-yellow); }
.opts .pct { text-align: right; }
.opts li.mine .label { background: var(--tt-yellow); color: var(--tt-black); }

.vote-opts li { display: block; }
.vote-btn {
  display: flex; justify-content: space-between; gap: var(--cell); width: 100%; text-align: left; align-items: flex-start;
  padding: 0 var(--cell); min-height: max(1em, var(--tap)); border: 0; background: var(--tt-white); color: var(--tt-black);
  cursor: pointer;
}
.vote-btn:hover:not(:disabled) { background: var(--tt-yellow); }
.vote-btn:disabled { background: var(--tt-black); color: var(--tt-white); cursor: default; padding-inline: var(--cell); }
.vote-btn.mine:disabled { background: var(--tt-yellow); color: var(--tt-black); }

/* the five-minute rewind strip */
.rewind { display: flex; gap: var(--cell); align-items: flex-start; }
.strip { display: flex; flex: none; touch-action: none; cursor: pointer; min-height: max(1em, var(--tap)); align-items: flex-start; }
.strip[aria-disabled="true"] { cursor: default; }
/* one row of separated mosaic cells: what's kept in cyan, the moment being heard in yellow, not yet kept as a low blue sliver */
.strip .cell { background: transparent; box-shadow: inset 0 0 0 0.06em var(--tt-black); }
.strip .cell.kept { background: var(--tt-cyan); }
.strip .cell.empty { box-shadow: inset 0 0 0 0.06em var(--tt-black), inset 0 -0.33em 0 var(--tt-blue); }
.strip .cell.head { background: var(--tt-yellow); }

/* questions */
.qs li { display: flex; gap: var(--cell); align-items: flex-start; padding-bottom: 0.0em; }
.qs li + li { margin-top: 0.5em; }
.qs .up { flex: none; min-width: calc(6 * var(--cell)); justify-content: space-between; }
.qs .qtext { flex: 1; overflow-wrap: anywhere; }
.qs li.done .qtext { color: var(--tt-green); }

/* chapters */
.hour li { display: flex; gap: var(--cell); align-items: flex-start; padding-inline: var(--cell); min-height: max(1em, var(--tap)); }
.hour .t { width: calc(5 * var(--cell)); flex: none; color: var(--tt-cyan); }
.hour .s { flex: 1; }
.hour li.on { background: var(--tt-yellow); color: var(--tt-black); }
.hour li.on .t { color: var(--tt-black); }
.hour li.done .s { color: var(--tt-white); }
.hour li.next .s { color: var(--tt-cyan); }

/* ---------- subtitles and fastext, pinned to the lower third ---------- */
.foot { position: sticky; bottom: 0; z-index: 2; background: var(--tt-black); padding-bottom: env(safe-area-inset-bottom, 0); }
.subs { text-align: center; padding-top: 0.5em; }
.sub-prev, .sub-now { display: flex; flex-direction: column; justify-content: flex-end; overflow: clip; }
.sub-prev { height: 2em; color: var(--tt-white); }   /* fixed: a longer line never moves the page */
.sub-now { min-height: 4em; max-height: 4em; margin-bottom: 0.5em; font-weight: 700; }
.foot.compact .sub-prev { display: none; }
.sub-box { background: var(--tt-black); color: var(--tt-yellow); padding-inline: var(--cell); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sub-prev .sub-box { color: var(--tt-white); }
.sub-who { font-weight: 700; }
.sub-who::after { content: " "; }

/* Fixed columns, sized for the longest label each key can show (LISTEN/PAUSE, BACK), so nothing shifts when a
   label changes (founder, 2026-10-22: "the bottom bar shifts, that is a bit annoying"). */
.fastext { display: grid; grid-template-columns: 6fr 8fr 6fr 6fr 6fr 6fr; gap: 0; }
.key {
  flex: none; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-height: max(2em, var(--tap)); padding: 0 var(--cell); border: 0; border-radius: 0; cursor: pointer;
  text-align: left; line-height: 1; white-space: nowrap; color: var(--tt-black);
}
.key .p { display: block; }
.key.k-red { background: var(--tt-red); }
.key.k-magenta { background: var(--tt-magenta); }
.key.k-green { background: var(--tt-green); }
.key.k-yellow { background: var(--tt-yellow); }
.key.k-cyan { background: var(--tt-cyan); }
.key.k-menu { background: var(--tt-white); }
.key { min-width: 0; overflow: hidden; }
.key:hover:not(:disabled) { background: var(--tt-white); }
.key:active:not(:disabled) { background: var(--tt-black); color: var(--tt-white); }
.key:focus-visible { outline-offset: -0.24em; outline-color: var(--tt-black); outline-width: 0.12em; }
.key:disabled { background: var(--tt-black); cursor: not-allowed; }
.key.k-red:disabled { color: var(--tt-red); box-shadow: inset 0 0 0 0.08em var(--tt-red); }

/* ---------- call page ---------- */
.meter { display: flex; gap: 0; }
.meter .cell { background: transparent; box-shadow: inset 0 -0.15em 0 var(--tt-blue); }
.meter .cell.on { background: var(--tt-green); box-shadow: none; }
.meter .cell.on.hot { background: var(--tt-red); }
.floor { min-height: 2em; }

/* ---------- the index row under the header: INDEX p100 on every page ---------- */

/* ---------- the footer row of plain links ---------- */
.links { padding: 0.5em var(--cell) 1em; color: var(--tt-cyan); }
.links a { color: var(--tt-cyan); }
.links .sep { color: var(--tt-white); }

/* the status line sits under the keys, one row, and never squeezes beside them (2026-10-22 screenshot) */
.navrow { display: flex; flex-wrap: wrap; column-gap: var(--cell); align-items: flex-start; min-height: 1em; }
.navrow .status { flex: 1 0 100%; padding-inline: 0; }
.navrow .status:empty { display: none; }
.index-key { flex: none; text-decoration: none; }
.index-key:hover { background: var(--tt-white); color: var(--tt-black); }

/* fastext keys as links on the station's other pages */
a.key { text-decoration: none; }
a.key:hover { background: var(--tt-white); color: var(--tt-black); }

/* ---------- ads: three formats, always labelled SPONSORED · ANZEIGE, always white so no
   editorial band (blue, green, yellow, cyan) is ever mistaken for one ---------- */
.ad-label { display: inline-block; padding-inline: var(--cell); background: var(--tt-black); color: var(--tt-white); white-space: nowrap; }
.ad-band { background: var(--tt-white); color: var(--tt-black); padding: 0.25em var(--cell) 0.5em; }
.ad-band .band-head { align-items: flex-start; }
.ad-band .mark-ad { color: var(--tt-blue); }
.ad-band a { color: var(--tt-black); }
.btn.bg-b { background: var(--tt-blue); color: var(--tt-white); }
.btn.bg-b:hover:not(:disabled) { background: var(--tt-black); color: var(--tt-white); }
.ad-block { box-shadow: inset 0 0 0 0.12em var(--tt-white); padding: 0.25em var(--cell) 0.5em; }
.ad-block .ad-label { background: var(--tt-white); color: var(--tt-black); margin-left: calc(-1 * var(--cell)); }
.ad-block .mark-ad { color: var(--tt-white); }
.ad-whole { cursor: pointer; }
.ad-ticker { display: flex; gap: var(--cell); align-items: flex-start; flex-wrap: wrap; }
.ad-ticker .ad-label { background: var(--tt-white); color: var(--tt-black); text-decoration: none; }

/* a contact detail printed for a person, not a harvester: the decoys never show, read or copy */
.pii i { display: none; }

/* ---------- Read mode: the legal pages, contact, sponsor ---------- */
.prose { padding-inline: var(--cell); }
.prose p, .prose ul, .prose ol, .prose .ttable { margin-top: 1em; }
.prose h2 { margin-top: 2em; color: var(--tt-yellow); scroll-margin-top: 3em; }
.prose h2:first-child { margin-top: 1em; }
.prose h3 { color: var(--tt-cyan); }
.prose strong { color: var(--tt-yellow); font-weight: 400; }
.prose a { color: var(--tt-cyan); }
.prose ul li, .prose ol li { display: flex; gap: var(--cell); }
.prose ul li::before { content: ""; flex: none; width: var(--cell); height: 0.6667em; margin-top: 0.1667em; background: var(--tt-cyan); }
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; }
.prose ol li::before { content: counter(n) "."; flex: none; min-width: calc(2 * var(--cell)); color: var(--tt-cyan); }
.prose li + li { margin-top: 0.5em; }
.ttable .trow + .trow { margin-top: 1em; }
.ttable .trow { box-shadow: inset 0.3em 0 0 var(--tt-blue); padding-left: calc(1.5 * var(--cell)); }
.ttable dt { color: var(--tt-cyan); }
.ttable dd { margin: 0; }
/* open questions in the drafts stay visible and flagged, never resolved or hidden */
.confirm { color: var(--tt-magenta); }
.confirm .confirm-tag { white-space: nowrap; background: var(--tt-magenta); color: var(--tt-black); padding-inline: var(--cell); font-weight: 400; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lede { color: var(--tt-cyan); }
.draft { background: var(--tt-magenta); color: var(--tt-black); padding-inline: var(--cell); }
.langs { display: flex; gap: var(--cell); flex-wrap: wrap; align-items: flex-start; }
.langs a { text-decoration: none; padding-inline: var(--cell); min-height: max(1em, var(--tap)); display: inline-flex; align-items: center; color: var(--tt-white); box-shadow: inset 0 0 0 0.1em var(--tt-white); }
.langs a.on { background: var(--tt-white); color: var(--tt-black); }
.subindex { display: flex; flex-wrap: wrap; column-gap: calc(2 * var(--cell)); }
.subindex a { color: var(--tt-cyan); }
.subindex a[aria-current] { background: var(--tt-yellow); color: var(--tt-black); text-decoration: none; padding-inline: var(--cell); }

/* the sponsor page: text and the block ad stacked on a phone, side by side on a TV */
.sponsor-cols { flex-direction: column; gap: var(--row); }
.sponsor-cols > .prose { padding-inline: 0; }
.sponsor-cols h2:first-child { margin-top: 0; }
@media (orientation: landscape) and (min-width: 720px) and (min-height: 480px) {
  .sponsor-cols { flex-direction: row; gap: calc(2 * var(--cell)); }
  .sponsor-cols > .prose { flex: 1 1 0; }
  .sponsor-cols > .ad-block { flex: 0 0 calc(17 * var(--cell)); }
}

/* ---------- feedback ---------- */
.textarea { display: block; width: 100%; min-height: 6em; padding: 0 var(--cell); border: 0; border-radius: 0; resize: vertical;
            background: var(--tt-blue); color: var(--tt-white); line-height: 1; font: inherit; }
@media (pointer: coarse) { .textarea { font-size: max(1em, 16px); } }
.textarea::placeholder { color: var(--tt-cyan); opacity: 1; }
.textarea:focus-visible { outline-color: var(--tt-yellow); }
.textarea[aria-invalid="true"], .input[aria-invalid="true"] { box-shadow: inset 0 -0.12em 0 var(--tt-red); }
.kinds { display: flex; flex-wrap: wrap; gap: var(--cell); border: 0; margin: 0; padding: 0; min-width: 0; }
.kinds legend { padding: 0; color: var(--tt-cyan); width: 100%; margin-bottom: 0; float: left; }
.kinds label { position: relative; cursor: pointer; }
.kinds input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kinds span { display: inline-flex; align-items: center; min-height: max(1em, var(--tap)); padding-inline: var(--cell); box-shadow: inset 0 0 0 0.1em var(--tt-white); }
.kinds input:checked + span { background: var(--tt-yellow); color: var(--tt-black); box-shadow: none; }
.kinds input:focus-visible + span { outline: 0.12em solid var(--tt-white); outline-offset: 0.12em; }

/* ---------- phones ---------- */
@media (max-width: 480px) {
  :root { --tap: 44px; }
  .input, .textarea { font-size: max(1em, 16px); }   /* 16 px: no zoom on focus in iOS Safari */
  /* 44 px to tap, without making the sticky header taller: the header cells reach beyond their row */
  .hrow a, .index-key { position: relative; }
  .hrow a::after, .index-key::after { content: ""; position: absolute; inset: -15px -6px; }
  #storyLink { display: block; min-height: 44px; }
  .ad-ticker .ad-label, .ad-ticker a { display: inline-flex; align-items: center; min-height: 44px; }
  .links { line-height: 1; }
  .links a { display: inline-flex; align-items: center; min-height: 44px; }
  .subindex a { display: inline-flex; align-items: center; min-height: 44px; }
  a.chat-strip { min-height: 44px; }
}
/* an on-screen keyboard is open: the sticky subtitles and keys step aside so the field stays in view */
body.kb .foot { display: none; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- chat (P250) and its strip on P888 ---------- */
.chat-lines { display: block; }
.chat-lines li + li { margin-top: 0.25em; }
.chat-line { overflow-wrap: anywhere; }
.chat-line .tag { padding-inline: var(--cell); }
#chatLog { max-height: 14em; overflow-y: auto; overscroll-behavior: contain; }
.chat-row { display: flex; gap: var(--cell); align-items: stretch; }
.chat-row .input { flex: 1; min-width: 0; }
.chat-count { text-align: right; }
a.chat-strip { display: block; text-decoration: none; color: inherit; }
a.chat-strip:hover { background: transparent; color: inherit; }
a.chat-strip:hover .tag { background: var(--tt-white); }
.chat-lines.compact li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-lines.compact li + li { margin-top: 0; }                 /* one chat line per teletext row */
.chat-lines.compact li:not(.chat-line) { white-space: normal; } /* the invitation wraps; messages never do */
.chat-lines.compact li:nth-last-child(n+4) { display: none; }   /* phones: the latest three */
.chat-head { display: flex; justify-content: space-between; gap: var(--cell); }
.chat-say { margin-top: 0.25em; }

/* ---------- P888 on air ----------
   The story card (what the hosts are on, title in double height), the running order of the hour,
   then one labelled row per part of the room: a fixed label column on the left, so the eye reads down one edge. */
.card888 { margin: 0.5em var(--cell) 0; padding: 0 var(--cell) 0.25em; box-shadow: inset 0 0 0 0.12em var(--tt-yellow); }
.card888 .tag { margin-left: calc(-1 * var(--cell)); }
.card-title { margin-top: 0.25em; max-height: 4em; }                 /* two double-height rows */
.card-title .dh-in { color: var(--tt-yellow); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
#storyMeta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tt-cyan); }
.ro888 { padding-inline: var(--cell); margin-top: 0.5em; list-style: none; }
.ro888 li { display: grid; grid-template-columns: calc(2 * var(--cell)) minmax(0, 1fr) calc(5 * var(--cell)); column-gap: var(--cell); padding-inline: var(--cell); }
.ro888 .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro888 .t { text-align: right; }
.ro888 .done { color: var(--tt-white); }
.ro888 .done .s { text-decoration: line-through; text-decoration-thickness: 0.1em; }
.ro888 .now { background: var(--tt-blue); color: var(--tt-white); }
.ro888 .later { color: var(--tt-cyan); }
.lr { display: grid; grid-template-columns: calc(9 * var(--cell)) minmax(0, 1fr); column-gap: var(--cell); padding-inline: var(--cell); margin-top: 0.5em; align-items: start; }
.lr > .lab { padding-inline: var(--cell); color: var(--tt-black); white-space: nowrap; text-decoration: none; }
.lr .clip, .room-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#live888 > .lr:first-of-type { margin-top: 0.75em; }
.lr .speakers { display: flex; flex-wrap: wrap; column-gap: calc(2 * var(--cell)); }
.lr .speakers .who { width: auto; }
#ltrendBars .mosaic { vertical-align: top; }
a.lr.chat-strip { display: grid; }
.chat-body { display: block; min-width: 0; }
.lr .chat-lines.compact li:nth-last-child(n+4) { display: none; }  /* the latest three, one row each */
#ticker888 > .clip { display: block; }
/* the compact poll: question on one row, each option one row of label, mosaic bar and percentage */
#pq888 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#poll888 > .row:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#po888 li { display: grid; grid-template-columns: calc(20 * var(--cell)) minmax(0, 1fr); column-gap: var(--cell); align-items: start; }
#po888 .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* on the live page the footer is one quiet row: the legal four. The rest live on p100. */
.screen:has(#p888.current) .links { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screen:has(#p888.current) .links a { text-decoration: none; }
.screen:has(#p888.current) .links :is(a[href^="/feedback"], a[href^="/sponsor"], .sep:has(+ a[href^="/feedback"]), .sep:has(+ a[href^="/sponsor"])) { display: none; }

/* ---------- quiz (P150) ---------- */
.quiz-opts li + li { margin-top: 0.5em; }
.quiz-opt { display: flex; width: 100%; gap: var(--cell); align-items: flex-start; text-align: left; border: 0; padding: 0;
            min-height: max(1em, var(--tap)); background: transparent; color: var(--tt-white); cursor: pointer; }
.quiz-opt .quiz-key { flex: none; width: calc(8 * var(--cell)); padding-inline: var(--cell); min-height: max(1em, var(--tap)); display: inline-flex; align-items: center; }
.quiz-opt .quiz-text { flex: 1; padding-top: 0; min-height: max(1em, var(--tap)); display: inline-flex; align-items: center; }
.quiz-opt:hover .quiz-text { background: var(--tt-white); color: var(--tt-black); }
.quiz-opt.right .quiz-text { background: var(--tt-green); color: var(--tt-black); }
.quiz-opt.wrong .quiz-text { background: var(--tt-red); color: var(--tt-black); }
.quiz-opt .quiz-mark { flex: none; display: inline-flex; align-items: center; min-height: max(1em, var(--tap)); }

/* ---------- REVEAL puzzles (P160) ---------- */
.reveal li + li { margin-top: 1em; }
.reveal .puzzle { overflow-wrap: anywhere; color: var(--tt-white); }
.reveal .concealed { color: var(--tt-cyan); letter-spacing: 0; box-shadow: inset 0 0 0 0.08em var(--tt-cyan); padding-inline: var(--cell); }
.hidden-art .mosaic { width: 9.6em; height: 6em; }

/* ---------- easter eggs (P420, P911, P112, P155, P110, P418, P127, P451, P640) ---------- */
.egg-cols { gap: calc(2 * var(--cell)); }
.egg-art { position: relative; flex: none; line-height: 0; }
.egg-art .mosaic.over { position: absolute; top: 0; left: 0; }
.fg-b { color: var(--tt-blue); }
.egg-status { flex: 1; }
.egg-status li { display: flex; justify-content: space-between; gap: var(--cell); }
.egg-log li { display: flex; gap: var(--cell); }
.egg-log li > :first-child { flex: none; }
.egg-list { counter-reset: n; }
.egg-list li { display: flex; gap: var(--cell); counter-increment: n; }
.egg-list li::before { content: counter(n) "."; flex: none; min-width: calc(2 * var(--cell)); color: var(--tt-red); }
/* P420: breathe in four seconds while the bar grows, out four while it shrinks, in whole cells */
.breath-row { display: flex; gap: var(--cell); align-items: flex-start; }
.breath { flex: none; width: calc(24 * var(--cell)); height: 1em; box-shadow: inset 0 -0.33em 0 var(--tt-blue); }
.breath-bar { display: block; height: 1em; width: calc(24 * var(--cell)); background: var(--tt-cyan); animation: breathe 4s steps(24, jump-none) infinite alternate; }
@keyframes breathe { from { width: var(--cell); } to { width: calc(24 * var(--cell)); } }
@media (prefers-reduced-motion: reduce) { .breath-bar { animation: none; width: calc(12 * var(--cell)); } }
/* P451: blacked-out words */
.redact { color: var(--tt-white); letter-spacing: 0; }
/* P110: the fan gauge, green to red, every cell lit */
.egg-gauge { display: flex; align-items: flex-start; gap: 0; }
.egg-gauge span:not(.nowrap) { display: block; height: 1em; box-shadow: inset 0 0 0 0.06em var(--tt-black); }
.egg-gauge .g { width: calc(12 * var(--cell)); background: var(--tt-green); }
.egg-gauge .y { width: calc(8 * var(--cell)); background: var(--tt-yellow); }
.egg-gauge .r { width: calc(8 * var(--cell)); background: var(--tt-red); margin-right: var(--cell); }

/* ---------- games (P170 to P199) ---------- */
/* P170 higher or lower: rank in a four-column gutter, the title, the points double height */
.hl-card { display: grid; grid-template-columns: calc(3 * var(--cell)) minmax(0, 1fr); column-gap: var(--cell); }
.hl-rank { color: var(--tt-cyan); }
.hl-card p { overflow-wrap: anywhere; }
.hl-pts { display: flex; gap: var(--cell); align-items: flex-start; margin-top: 0.5em; }
.hl-unit { padding-top: 0.5em; }
.hl-hidden { color: var(--tt-yellow); box-shadow: inset 0 0 0 0.1em var(--tt-yellow); padding-inline: var(--cell); }
.hl-keys, .ci-pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cell); align-items: center; }
.hl-keys .btn, .ci-pick .btn { min-height: max(2em, var(--tap)); }
.hl-streak { display: inline-flex; gap: var(--cell); align-items: flex-start; flex-wrap: wrap; }
/* P175 this day: HN's years under the answers */
.td-tl { display: flex; justify-content: space-between; }
/* P180 bingo: sixteen squares on the grid; lit is a solid yellow cell, one-to-go a magenta edge */
.bingo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5em var(--cell); }
.sq { min-height: 2em; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
      box-shadow: inset 0 0 0 0.1em var(--tt-cyan); color: var(--tt-white); overflow: hidden; }
.sq .w, .sq .t { min-height: 1em; white-space: nowrap; }
.sq .t { color: var(--tt-cyan); }
.sq.lit { background: var(--tt-yellow); color: var(--tt-black); box-shadow: none; }
.sq.lit .t { color: var(--tt-black); }
.sq.line { background: var(--tt-green); }
.sq.need { box-shadow: inset 0 0 0 0.12em var(--tt-magenta); color: var(--tt-magenta); }
.sq.need .t { color: var(--tt-magenta); }
.keysrow { display: flex; gap: var(--cell); flex-wrap: wrap; }
/* P185 call it */
.ci-rule { color: var(--tt-blue); overflow: hidden; white-space: nowrap; }
.ci-calls li + li { margin-top: 1em; }
.ci-calls p { overflow-wrap: anywhere; }
/* P190 stack overflow: the well in a blue frame one cell wide, the score beside it */
.arcade { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(2 * var(--cell)); align-items: start; }
.well { display: inline-block; line-height: 0; margin: 0.25em var(--cell); box-shadow: 0 0 0 var(--cell) var(--tt-blue); background: var(--tt-black); }
.well .mosaic { width: 6em; height: 13.3333em; }
.side > * + * { margin-top: var(--row); }
.side p { overflow-wrap: anywhere; }
.so-next { min-height: 1.3333em; line-height: 0; }
.ctl li { display: flex; gap: var(--cell); }
.ctl .k { display: inline-block; width: calc(3 * var(--cell)); text-align: center; }
/* P195 snake_case: a 36 by 14 field of character cells */
.sn-field { display: grid; grid-template-columns: repeat(36, var(--cell)); grid-auto-rows: 1em; width: calc(36 * var(--cell));
            box-shadow: 0 0 0 0.12em var(--tt-blue); touch-action: none; user-select: none; -webkit-user-select: none; }
.sc { display: block; width: var(--cell); height: 1em; text-align: center; }
.sn-b { background: var(--tt-green); }
.sn-h { background: var(--tt-yellow); }
.sn-word .got { background: var(--tt-green); color: var(--tt-black); }
.sn-word .nexto { box-shadow: inset 0 0 0 0.1em var(--tt-yellow); color: var(--tt-yellow); }
.sn-word .todo { color: var(--tt-cyan); }
/* touch buttons: on phones and tablets only, where there is no keyboard */
.touchpad { display: none; }
@media (pointer: coarse) {
  .touchpad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cell); margin-top: var(--row); touch-action: manipulation; }
  .touchpad .btn { min-height: max(2em, var(--tap)); user-select: none; -webkit-user-select: none; }
  .touchpad .btn:nth-child(4) { grid-column: 1 / 2; }
  .touchpad .btn:nth-child(5) { grid-column: 2 / 4; }
  .touchpad.dpad { grid-template-areas: ". up ." "left . right" ". down ."; }
  .touchpad.dpad .btn:nth-child(1) { grid-area: up; }
  .touchpad.dpad .btn:nth-child(2) { grid-area: left; }
  .touchpad.dpad .btn:nth-child(3) { grid-area: right; }
  .touchpad.dpad .btn:nth-child(4) { grid-area: down; grid-column: auto; }
  .touch-hide { display: none; }
}
/* while a game is being played the page doesn't scroll under the arrow keys or a swipe */
.page.playing .sn-field { touch-action: none; }
/* P199 tonight's table, and the three-letter entry under a finished game */
.tbl li { display: grid; grid-template-columns: calc(2 * var(--cell)) calc(4 * var(--cell)) calc(6 * var(--cell)) minmax(0, 1fr); column-gap: var(--cell); }
.tbl li.first .tbl-name, .tbl li.first .tbl-s { color: var(--tt-yellow); }
.tbl .tbl-n { color: var(--tt-cyan); }
.tbl .tbl-s { text-align: right; }
.entry { margin-top: var(--row); }
.entry-row { display: flex; gap: var(--cell); align-items: stretch; }
.entry-input { width: calc(5 * var(--cell)); flex: none; text-transform: uppercase; }

/* ---------- colour attributes: last, so a cell's own colour always wins ---------- */
/* foreground colours */
.fg-r { color: var(--tt-red); }
.fg-g { color: var(--tt-green); }
.fg-y { color: var(--tt-yellow); }
.fg-m { color: var(--tt-magenta); }
.fg-c { color: var(--tt-cyan); }
.fg-w { color: var(--tt-white); }
.fg-k { color: var(--tt-black); }
/* flat cell backgrounds: text on them is always black or white, picked for contrast */
.bg-r { background: var(--tt-red); color: var(--tt-black); }
.bg-g { background: var(--tt-green); color: var(--tt-black); }
.bg-y { background: var(--tt-yellow); color: var(--tt-black); }
.bg-b { background: var(--tt-blue); color: var(--tt-white); }
.bg-m { background: var(--tt-magenta); color: var(--tt-black); }
.bg-c { background: var(--tt-cyan); color: var(--tt-black); }
.bg-w { background: var(--tt-white); color: var(--tt-black); }


/* ---------- landscape: a TV screen ----------
   On a wide window the page becomes a 4:3-ish teletext screen of about 29 rows, the characters
   stretched wide the way a television drew them, instead of a tall narrow column. */
@media (orientation: landscape) and (min-width: 720px) and (min-height: 480px) {
  :root {
    /* the same size as the legal pages: about 34 rows, characters a little wider than tall */
    --k: 1.25;
    --fs: clamp(12px, min(calc(100svh / 35.5), calc((100vw - 2 * var(--gutter)) / (24 * var(--k)))), 48px);
  }
  html, body { overflow-x: clip; }
  .screen { transform: scaleX(var(--k)); transform-origin: 50% 0; }
  /* the footer links fit on the first screen of P888 */
  .links { padding: 0.25em var(--cell) 0.25em; }
  #po888 li { grid-template-columns: calc(20 * var(--cell)) minmax(0, 1fr); }
  .lr .chat-lines.compact li:nth-last-child(n+3) { display: none; }  /* wide screens: the latest two, so rewind and the ad fit */
  .lr, #live888 > .lr:first-of-type { margin-top: 0.25em; }
  .ro888 { margin-top: 0.25em; }
  .screen:has(#p888.current) .links { padding: 0.5em var(--cell) 0; }
  .form-cols > .fcol:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(2 * var(--cell)); row-gap: 0; }
  .form-cols > .fcol:first-child > .gap { display: none; }
  .form-cols { row-gap: 0.5em; }
  .form-cols > .fcol:first-child > .field:last-child { grid-column: 1 / -1; margin-top: 0.5em; }
  #acct > .gap:last-child { display: none; }
  .form-cols > .fcol:last-child > .gap { display: none; }
  .btn.tall { min-height: max(1em, var(--tap)); }
  .foot.quiet .subs { display: none; }
  .sub-prev { height: 1em; }
  .subs { padding-top: 0.75em; }      /* a clear row between the page and the subtitles */
  .sub-now { margin-bottom: 0.5em; }  /* and half a row between the subtitles and the keys */
  .key { min-height: max(1em, var(--tap)); flex-direction: row; gap: var(--cell); }
  .key .p { display: none; }

}

/* hover: a link becomes an inverted cell, whatever colour it had (last, so no colour class wins) */
a:hover:not(.btn):not(.key):not(.tag):not(.ad-label) { background: var(--tt-white); color: var(--tt-black); text-decoration: none; }
a.ad-label:hover { background: var(--tt-yellow); color: var(--tt-black); }
.btn.bg-y:hover:not(:disabled) { background: var(--tt-white); color: var(--tt-black); }

/* Read mode: long text (legal, contact, sponsor) gets half a row between lines, still on the grid */
.prose p, .prose li, .prose dd, .prose dt, .prose h3, .prose .lede { line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .page.arriving { animation: none; }
  .ring { animation: none; }
}