/* SPDX-License-Identifier: GPL-3.0-or-later */
/* One stylesheet for the site and the flipbook (tools/flipbook.py inlines it). Dark by design,
   this is a CRT viewer; system fonts only, nothing is loaded from the net. */
:root {
  --bg: #050a1c;
  --panel: #0b1431;
  --line: #1d2b5c;
  --ink: #e8edff;
  --ink-2: #93a0d0;
  --phosphor: #3cff8c;
  --amber: #ffe678;
  --display: "Avenir Next Condensed", "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
  --body: system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  color-scheme: dark;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--body);
  padding-block: 28px 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
main { max-width: 760px; margin: 0 auto; }
main > * + * { margin-top: 20px; }
main > h2 { margin-top: 56px; }
main > h3 { margin-top: 32px; }
a { color: var(--phosphor); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--amber); }

/* header: nav + language on one line, then eyebrow, title, lede */
header.site { display: grid; gap: 8px; margin-bottom: 28px; }
.topbar {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
}
.topbar a { color: var(--ink-2); text-decoration: none; }
.topbar nav a { margin-right: 16px; }
.topbar a:hover, .topbar a[aria-current] { color: var(--phosphor); }
.topbar .lang a { color: var(--amber); }
.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
}
h1 {
  font-family: var(--display); font-weight: 600; font-size: clamp(36px, 7vw, 56px);
  line-height: 1; margin: 0; letter-spacing: 0.01em; text-wrap: balance;
}
h2 { font-family: var(--display); font-weight: 500; font-size: 26px; margin: 0; line-height: 1.15; text-wrap: balance; }
h3 { font-family: var(--display); font-weight: 500; font-size: 19px; margin: 0; line-height: 1.2; }
p { margin: 0; max-width: 65ch; }
.lede { color: var(--ink-2); font-size: 18px; max-width: 60ch; text-wrap: pretty; }
.hint { font-family: var(--mono); font-size: 13px; color: var(--ink-2); max-width: none; }

/* The TV set, drawn in CSS after the real one: a Toshiba C-500, a five-inch portable colour
   set from the early eighties. Silver-grey case with a ribbed grille along the top edge, the
   screen in a black panel on the left under the wordmark and the three colour tiles, on the
   right the black tuning window with its green and orange scale, the tuning slider and two
   switches. On top of the screen a glass reflection, a vignette and one dark line per picture
   line, the look of 288 progressive lines on a tube; .flat keeps only the vignette (the
   flipbook, the CRT switch). The picture keeps 5:4 and crisp pixels; no image file anywhere. */
.tv {
  --tv-pad: 22px;
  --tv-top: 38px;
  --tv-panel: 78px;
  --tv-ink: #3b3c39;
  position: relative; display: grid; justify-items: center; overflow: hidden;
  padding: var(--tv-top) calc(var(--tv-pad) + var(--tv-panel)) var(--tv-pad) var(--tv-pad);
  border: 1px solid #8e8f89; border-radius: 10px;
  box-shadow: inset 0 1px 0 #eeefea, inset 0 -3px 0 #86877f, 0 24px 40px -24px #000;
  background:
    /* the tuning window: green and orange scale, the red pointer */
    repeating-linear-gradient(to bottom, #7fe39a 0 2px, transparent 2px 9px)
      right calc(var(--tv-pad) + var(--tv-panel) - 16px) top calc(var(--tv-top) + 8px) / 7px calc(60% - 16px) no-repeat,
    repeating-linear-gradient(to bottom, #ffb44a 0 2px, transparent 2px 11px)
      right calc(var(--tv-pad) + var(--tv-panel) - 28px) top calc(var(--tv-top) + 8px) / 7px calc(60% - 16px) no-repeat,
    linear-gradient(#ff5a3c, #ff5a3c)
      right calc(var(--tv-pad) + var(--tv-panel) - 34px) top calc(var(--tv-top) + 36%) / 32px 2px no-repeat,
    linear-gradient(#0f1013, #0f1013)
      right calc(var(--tv-pad) + var(--tv-panel) - 38px) top var(--tv-top) / 40px 60% no-repeat,
    /* the tuning slider: track and knob */
    linear-gradient(#5e5f59, #5e5f59) right calc(var(--tv-pad) + 12px) top var(--tv-top) / 5px 60% no-repeat,
    linear-gradient(#f2f2ec, #c2c3bd) right calc(var(--tv-pad) + 6px) top calc(var(--tv-top) + 22%) / 17px 12px no-repeat,
    /* two switches at the bottom of the panel */
    linear-gradient(#3b3c39, #3b3c39) right calc(var(--tv-pad) + 42px) bottom calc(var(--tv-pad) + 2px) / 26px 10px no-repeat,
    linear-gradient(#3b3c39, #3b3c39) right calc(var(--tv-pad) + 6px) bottom calc(var(--tv-pad) + 2px) / 26px 10px no-repeat,
    /* the three colour tiles above the screen */
    linear-gradient(#e2402f, #e2402f) right calc(var(--tv-pad) + var(--tv-panel) + 32px) top 15px / 12px 8px no-repeat,
    linear-gradient(#2fbf71, #2fbf71) right calc(var(--tv-pad) + var(--tv-panel) + 18px) top 15px / 12px 8px no-repeat,
    linear-gradient(#2f80e0, #2f80e0) right calc(var(--tv-pad) + var(--tv-panel) + 4px) top 15px / 12px 8px no-repeat,
    /* the grille along the top edge, then the case */
    repeating-linear-gradient(to right, #9a9b95 0 1px, transparent 1px 4px) 0 0 / 100% 6px no-repeat,
    linear-gradient(175deg, #dadbd6, #cdcec8 45%, #b1b2ac);
}
.tv::before { /* the wordmark, top left as on the set */
  content: "TOSHIBA"; position: absolute; left: var(--tv-pad); top: 13px; pointer-events: none;
  font: 700 11px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.24em; color: var(--tv-ink);
}
canvas, .tv img {
  display: block; width: 100%; max-width: 720px; aspect-ratio: 5 / 4;
  image-rendering: pixelated; image-rendering: crisp-edges;
  background: #000; border-radius: 14px / 18px; box-shadow: 0 0 0 10px #0b0b0d; /* the black screen panel */
}
canvas.square { width: 50%; aspect-ratio: 360 / 288; border-radius: 0; } /* the bare canvas, one pixel per pixel */
.tv::after { /* glass, vignette, scan lines */
  content: ""; position: absolute; pointer-events: none; border-radius: 14px / 18px;
  inset: var(--tv-top) calc(var(--tv-pad) + var(--tv-panel)) var(--tv-pad) var(--tv-pad);
  box-shadow: inset 0 0 0 1px #000, inset 0 0 28px rgba(0, 0, 0, 0.55);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 30%, transparent 42%),
    radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.4) 100%),
    repeating-linear-gradient(to bottom, transparent 0 50%, rgba(0, 0, 0, 0.26) 50% 100%);
  background-size: 100% 100%, 100% 100%, 100% calc(100% / 288);
}
.tv.flat::after {
  background: radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, 0.3) 100%);
  background-size: 100% 100%;
}

/* the strip under the TV: play, scene, switches, readout, budget bar */
.console {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px;
  font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums;
}
button, select {
  font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line);
  border-radius: 4px; padding: 6px 12px; cursor: pointer;
}
button { min-width: 6em; }
button:hover, select:hover { border-color: var(--phosphor); }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 2px; }
input[type=range] { flex: 1 1 160px; accent-color: var(--phosphor); min-width: 120px; }
input[type=checkbox] { accent-color: var(--phosphor); }
.readout { color: var(--ink-2); white-space: nowrap; }
.budget { flex: 1 1 120px; height: 8px; border: 1px solid var(--line); background: var(--panel); }
.budget i { display: block; height: 100%; width: 0; background: var(--phosphor); transition: width 0.2s; }

/* facts: label + text pairs; .grid lays them out as tiles */
.facts dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; max-width: 65ch; }
.facts dt { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); padding-top: 3px; }
.facts dd { margin: 0; }
.facts dd > p { max-width: none; }
.grid dl { grid-template-columns: 1fr 1fr; grid-auto-flow: dense; gap: 4px 28px; max-width: none; }
.grid dt:nth-of-type(odd), .grid dd:nth-of-type(odd) { grid-column: 1; }
.grid dt:nth-of-type(even), .grid dd:nth-of-type(even) { grid-column: 2; }
.grid dt { padding-top: 0; }
.grid dd { margin-bottom: 20px; }

/* cards: a few links with one line each */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.card { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); padding: 16px 18px; }
.card h3 { margin: 0 0 8px; }
.card p { font-size: 15px; color: var(--ink-2); }
.card a { text-decoration: none; }

/* article matter: code, tables, figures */
code { font-family: var(--mono); font-size: 0.92em; color: var(--phosphor); }
pre {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px;
  overflow: auto; font-size: 13.5px; line-height: 1.45; max-width: none;
}
pre code { color: var(--ink); font-size: inherit; }
table { border-collapse: collapse; font-size: 14.5px; max-width: 100%; }
th, td { text-align: left; padding: 6px 14px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); font-weight: normal; }
figure { margin: 0; }
figure img { display: block; width: 100% !important; max-width: 720px; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 6px; }
figcaption { font-size: 14px; color: var(--ink-2); margin-top: 8px; max-width: 65ch; }
blockquote { margin: 0; padding-left: 16px; border-left: 2px solid var(--amber); color: var(--ink-2); }
hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
ul, ol { padding-left: 22px; max-width: 65ch; }
li + li { margin-top: 4px; }
.toc ul { list-style: none; padding-left: 0; columns: 2; column-gap: 28px; font-size: 15px; }
.toc li { break-inside: avoid; }

footer.site { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 56px; color: var(--ink-2); font-size: 14px; display: grid; gap: 6px; }
footer.site p { max-width: none; }

@media (max-width: 520px) {
  .tv { --tv-pad: 12px; --tv-top: 30px; --tv-panel: 54px; border-radius: 8px; }
  .tv::before { top: 10px; font-size: 9px; }
  canvas, .tv img { box-shadow: 0 0 0 6px #0b0b0d; }
  .grid dl { grid-template-columns: 1fr; }
  .grid dt, .grid dd { grid-column: 1; }
  .facts dl { grid-template-columns: 1fr; gap: 2px 0; }
  .facts dd { margin-bottom: 10px; }
  .toc ul { columns: 1; }
  .topbar { flex-wrap: wrap; }
}
@media print {
  body { background: #fff; color: #000; }
  .topbar, .console, .hint, canvas { display: none; }
}