/* Hallmark · teletext — the documentation service of the set.
 * Same cabinet, same glass; the picture is TELETEXT: black phosphor,
 * blocky mono, the classic yellow/cyan/green palette, pages dialled
 * with three digits. The rail switch prints the whole service on paper
 * (:root.light, at the end of this file). All of it static HTML.
 */
@import url("tokens.css");

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

html, body { height: 100%; overflow: clip; }

:root {
  --bezel: clamp(16px, 2.6vw, 40px);
  --tube-radius: clamp(14px, 2.2vw, 30px);
  --trim: #060607;
  --strip-h: 3rem;
  --phosphor: #0a0a0c;
  --tx-w: #e8e8ea;
  --tx-y: #ffee00;
  --tx-yb: #ffee00;      /* yellow for the blue bands — stays bright in both bands */
  --tx-c: #00eaff;
  --tx-g: #00e64d;
  --tx-r: #ff3322;
  --tx-m: #ff44ff;
  --tx-b: #2244ee;
  --band: #12121a;       /* the quiet banded cells */
  --band-b1: #12122a;    /* menu rows */
  --band-b2: #0f0f22;
  --cell: #101014;       /* code cells & concealed text */
  --tx-hd: #fff;         /* headline ink on the banded rows */
  --ball-ink: #0a0a0c;   /* lottery-ball numerals */
}

body {
  margin: 0;
  /* the same matte-black 90s cabinet as the set */
  background:
    radial-gradient(130% 100% at 50% -10%, #2b2b2f, #1a1a1d 55%, #0d0d0f 100%);
  font-family: var(--font-outlier);
  color: var(--tx-w);
  line-height: 1.7;
}

/* ————— the tube — the same 90s glass as the set ————— */
.tube {
  position: fixed;
  inset: var(--bezel) var(--bezel) calc(var(--strip-h) + var(--bezel));
  background: var(--phosphor);
  border-radius: var(--tube-radius) / calc(var(--tube-radius) * 1.2);
  border: 3px solid var(--trim);
  overflow: hidden;
  box-shadow:
    inset 0 0 70px 12px rgba(0, 0, 0, 0.6),
    inset 0 0 5px 2px rgba(0, 0, 0, 0.9),
    0 0 0 2px rgba(255, 255, 255, 0.05),
    0 0 0 7px rgba(0, 0, 0, 0.3),
    inset 0 2px 2px rgba(255, 255, 255, 0.05),
    0 14px 44px rgba(0, 0, 0, 0.6);
}

a { color: var(--tx-c); text-decoration-color: var(--tx-c); text-underline-offset: 3px; }
a:hover { color: var(--tx-y); text-decoration-color: var(--tx-y); }
:focus-visible { outline: 2px solid var(--tx-c); outline-offset: 3px; }
::selection { background: var(--tx-y); color: var(--phosphor); }
:root.light ::selection { background: var(--tx-b); color: #fff; }

/* ————— the glass — the scrolling teletext picture ————— */
.glass {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-xl) clamp(1.25rem, 5vw, 5rem) var(--space-2xl);
  scrollbar-width: none;
}
.glass::-webkit-scrollbar { display: none; }

/* ————— snow + glass overlays, matching the tube ————— */
.static {
  position: absolute;
  inset: 0;
  z-index: var(--z-toast);
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.028;
  mix-blend-mode: var(--snow-blend, screen);
  image-rendering: pixelated;
}
.crt {
  position: absolute;
  inset: 0;
  z-index: var(--z-toast);
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    var(--scanline, rgba(0, 0, 0, 0.18)) 0 1px,
    transparent 1px 3px
  );
  opacity: 0.5;
}
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 82% 82% at 50% 48%, transparent 58%, var(--vignette, rgba(0, 0, 0, 0.42)) 100%);
}
.crt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 130% 55% at 50% -12%, rgba(255, 255, 255, 0.06), transparent 60%);
}

/* ————— header row — page number, service name, clock ————— */
.txt__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  margin-bottom: var(--space-xl);
}
.txt__pageno { color: var(--tx-y); font-variant-numeric: tabular-nums; }
.txt__nav { display: inline-flex; align-items: center; gap: var(--space-xs); }
.txt__arrow {
  min-width: 28px;
  min-height: 24px;
  padding: 0 var(--space-xs);
  font: inherit;
  font-weight: 700;
  line-height: 1;
  color: var(--tx-c);
  background: var(--key-face, #12121a);
  border: 1px solid var(--key-edge, #0a0a0c);
  border-radius: 2px;
  cursor: pointer;
}
.txt__arrow:hover { color: #0a0a0c; background: var(--tx-yb); }
.txt__brand { color: var(--phosphor); background: var(--tx-b); padding-inline: var(--space-sm); }
.txt__clock { color: var(--tx-g); font-variant-numeric: tabular-nums; }

/* ————— pages — dressed like real teletext: mosaic bands, colour blocks ————— */
.txt__page[hidden] { display: none; }
/* every page opens under a mosaic band */
.txt__page::before {
  content: "";
  display: block;
  height: 12px;
  margin-bottom: var(--space-md);
  background: repeating-linear-gradient(90deg,
    var(--tx-r) 0 18px, var(--tx-y) 18px 36px, var(--tx-g) 36px 54px,
    var(--tx-c) 54px 72px, var(--tx-b) 72px 90px, var(--tx-m) 90px 108px);
  -webkit-mask: repeating-conic-gradient(#000 0% 25%, transparent 0% 50%) 0 0 / 12px 12px;
  mask: repeating-conic-gradient(#000 0% 25%, transparent 0% 50%) 0 0 / 12px 12px;
}
/* double-height headline, yellow on service blue — the classic */
.txt__title {
  font-family: var(--font-outlier);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.15;
  letter-spacing: 0.12em;
  color: var(--tx-yb);
  background: var(--tx-b);
  display: block;
  padding: 0.06em var(--space-sm);
  margin: 0 0 calc(var(--space-lg) + 0.9rem);
  transform: scaleY(1.45);
  transform-origin: top left;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}
.txt__sub {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: space-between;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-lg);
  background: var(--band);
  border-inline-start: 10px solid var(--tx-g);
  padding: var(--space-2xs) var(--space-sm);
}
.txt__row { margin: var(--space-sm) 0 0; font-size: var(--text-sm); }
.txt__row .txt-y { font-weight: 700; margin-inline-end: var(--space-sm); }
/* a leading yellow label becomes a solid colour block — ink on paint */
.txt__row > .txt-y:first-child,
.txt__next > .txt-y:first-child {
  background: var(--tx-yb);
  color: #0a0a0c;
  padding: 0 6px;
}
.txt__next {
  margin: var(--space-xl) 0 0;
  padding: var(--space-xs) var(--space-sm);
  background: var(--band);
  border-inline-start: 10px solid var(--tx-b);
  font-size: var(--text-sm);
}
.txt__note { margin-top: var(--space-xl); font-size: var(--text-xs); letter-spacing: 0.1em; }

/* ————— the index — hero logo, block-art telly, banded menu ————— */
.txt__hero {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  margin: var(--space-md) 0 var(--space-xl);
}
.txt__logo {
  margin: 0;
  font-weight: 700;
  font-size: var(--text-2xl);
  letter-spacing: 0.1em;
  line-height: 1.1;
  color: #fff;
  background: var(--tx-b);
  display: inline-block;
  padding: 0 var(--space-sm);
  transform: scaleY(1.5);
  transform-origin: top left;
  text-shadow: 3px 3px 0 var(--tx-r);
}
.txt__tag {
  margin: calc(var(--space-sm) + 1.4rem) 0 0;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: var(--tx-c);
}
/* an 8-bit telly drawn in box-shadow cells */
.px-tv {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 104px 88px 0; /* reserve the drawing's footprint */
  background: transparent;
  --px-frame: #fff; /* the cabinet cells — white phosphor; ink when printed on paper */
  box-shadow:
    /* antenna */
    24px 0 var(--tx-y), 72px 0 var(--tx-y),
    32px 8px var(--tx-y), 64px 8px var(--tx-y),
    40px 16px var(--tx-y), 56px 16px var(--tx-y), 48px 24px var(--tx-y),
    /* frame top & bottom */
    16px 32px var(--px-frame), 24px 32px var(--px-frame), 32px 32px var(--px-frame), 40px 32px var(--px-frame), 48px 32px var(--px-frame),
    56px 32px var(--px-frame), 64px 32px var(--px-frame), 72px 32px var(--px-frame), 80px 32px var(--px-frame), 88px 32px var(--px-frame),
    16px 72px var(--px-frame), 24px 72px var(--px-frame), 32px 72px var(--px-frame), 40px 72px var(--px-frame), 48px 72px var(--px-frame),
    56px 72px var(--px-frame), 64px 72px var(--px-frame), 72px 72px var(--px-frame), 80px 72px var(--px-frame), 88px 72px var(--px-frame),
    /* frame sides */
    16px 40px var(--px-frame), 16px 48px var(--px-frame), 16px 56px var(--px-frame), 16px 64px var(--px-frame),
    88px 40px var(--px-frame), 88px 48px var(--px-frame), 88px 56px var(--px-frame), 88px 64px var(--px-frame),
    /* screen */
    24px 40px var(--tx-c), 32px 40px var(--tx-c), 40px 40px var(--tx-c), 48px 40px var(--tx-c), 56px 40px var(--tx-c), 64px 40px var(--tx-c),
    24px 48px var(--tx-c), 32px 48px var(--tx-c), 40px 48px var(--tx-c), 48px 48px var(--tx-c), 56px 48px var(--tx-c), 64px 48px var(--tx-c),
    24px 56px var(--tx-c), 32px 56px var(--tx-c), 40px 56px var(--tx-c), 48px 56px var(--tx-c), 56px 56px var(--tx-c), 64px 56px var(--tx-c),
    24px 64px var(--tx-c), 32px 64px var(--tx-c), 40px 64px var(--tx-c), 48px 64px var(--tx-c), 56px 64px var(--tx-c), 64px 64px var(--tx-c),
    /* control column */
    72px 40px var(--tx-r), 72px 48px var(--tx-g), 72px 56px var(--tx-y), 72px 64px var(--px-frame),
    80px 40px var(--px-frame), 80px 48px var(--px-frame), 80px 56px var(--px-frame), 80px 64px var(--px-frame),
    /* feet */
    32px 80px var(--px-frame), 72px 80px var(--px-frame);
}
/* the menu — banded rows like a service index */
.txt__menu {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-md);
  margin: var(--space-2xs) 0 0;
  padding: var(--space-xs) var(--space-sm);
  background: var(--band-b1);
  font-size: var(--text-sm);
}
.txt__menu:nth-of-type(odd) { background: var(--band-b2); }
.txt__menu { cursor: pointer; transition: background 100ms linear; }
.txt__menu:hover { background: var(--tx-b); }
.txt__menu:hover .txt__mdesc,
.txt__menu:hover .txt__mname { color: #fff; }
.txt__mnum { font-weight: 700; background: var(--tx-yb); color: #0a0a0c; padding: 0 6px; }
.txt__mname { font-weight: 700; color: var(--tx-hd); letter-spacing: 0.08em; }
.txt__mdesc { font-size: var(--text-xs); }

.txt__pre {
  margin: var(--space-md) 0 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--cell);
  border-left: 3px solid var(--tx-b);
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--tx-c);
  overflow-x: auto;
  white-space: pre;
}

.txt-y { color: var(--tx-y); }
.txt-c { color: var(--tx-c); }
.txt-g { color: var(--tx-g); }
.txt-r { color: var(--tx-r); }
.txt-m { color: var(--tx-m); }
.txt-w { color: var(--tx-w); }
code { font-family: inherit; color: var(--tx-c); }

/* every P-number on screen is a dial — click to tune */
.txt__plink {
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-color: color-mix(in srgb, currentcolor 55%, transparent);
  text-underline-offset: 3px;
  cursor: pointer;
}
.txt__plink:hover { color: #0a0a0c; background: var(--tx-yb); text-decoration: none; }

/* ————— the magazine furniture ————— */
/* category headers on the index */
.txt__cat {
  margin: var(--space-lg) 0 var(--space-2xs);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
}
/* the classic blink */
.txt-blink { animation: tx-blink 1.1s steps(2) infinite; }
@keyframes tx-blink { 50% { opacity: 0; } }
/* concealed text — the REVEAL key (R) uncovers it, like the real thing */
.txt__hidden {
  color: transparent;
  background: var(--cell-hide, var(--cell));
  padding: 0 6px;
  user-select: none;
  transition: color 120ms linear;
}
body.reveal .txt__hidden { color: var(--tx-g); }
/* tonight's draw — yellow lottery balls */
.txt__balls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-md) 0 0;
}
.txt__ball {
  display: inline-grid;
  place-items: center;
  min-width: 2.6em;
  padding: 0.35em 0.4em;
  background: var(--tx-yb);
  color: #0a0a0c;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
}
.txt__ball--c { background: var(--tx-c); color: var(--ball-ink); }
.txt__ball--r { background: var(--tx-m); color: var(--ball-ink); }
/* lonely hearts — classified ads in magenta bands */
.txt__ad {
  margin: var(--space-md) 0 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--band);
  border-inline-start: 10px solid var(--tx-m);
  font-size: var(--text-sm);
}
.txt__ad .txt-m { font-weight: 700; }
.txt__ad .txt-y { background: var(--tx-yb); color: #0a0a0c; padding: 0 6px; font-weight: 700; }
/* the P-number boxes at the end of each ad dial like everything else */
/* broadcast subtitles — white on black, coloured speakers */
.txt__cc { margin: var(--space-sm) 0 0; }
.txt__cc span {
  background: #000;
  color: #fff;
  padding: 0.1em 0.5em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* the box stays broadcast-black, so the speakers keep their bright phosphor */
.txt__cc .cc-a { color: #ffe600; }
.txt__cc .cc-b { color: #29d8ff; }
.txt__cc .cc-c { color: #35e670; }

/* ————— the control strip — fastext keys on the cabinet ————— */
.strip {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  height: var(--strip-h);
  z-index: var(--z-sticky-nav);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-inline: var(--space-md);
  padding-bottom: 14px; /* optical centre against the keys' drop shadow */
  /* the strip is the cabinet itself — no seam */
  background: transparent;
}
.strip__back {
  font-family: var(--font-outlier);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: #82828a;
  text-decoration: none;
  background: linear-gradient(180deg, #242428, #1a1a1d);
  border: 1px solid #0a0a0c;
  border-radius: 2px;
  padding: var(--space-2xs) var(--space-md);
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 0 #09090b, 0 3px 4px rgba(0, 0, 0, 0.5);
  transform: translateY(-1px);
}
.strip__back:hover { color: #c9c9cf; }
.strip__fkey {
  font-family: var(--font-outlier);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--phosphor);
  border: 1px solid #0a0a0c;
  border-radius: 2px;
  padding: var(--space-2xs) var(--space-md);
  min-height: 24px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 0 #09090b, 0 3px 4px rgba(0, 0, 0, 0.45);
  transform: translateY(-1px);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.strip__fkey:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 0 #09090b; }
.strip__fkey--r { background: var(--tx-r); }
.strip__fkey--g { background: var(--tx-g); }
.strip__fkey--y { background: var(--tx-y); }
.strip__fkey--c { background: var(--tx-c); }
.strip__fkey:hover { filter: brightness(1.18); }
.strip__hint {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--hint-ink, oklch(58% 0.006 260));
  white-space: nowrap;
}

/* ————— a 40-column service on a wide tube — rows run edge to edge and the
   type grows so the glass reads full, like the real thing ————— */
@media (min-width: 64rem) {
  .txt__row, .txt__menu, .txt__next, .txt__ad, .txt__cc { font-size: var(--text-md); }
  .txt__pre { font-size: var(--text-base); }
  .txt__head { font-size: var(--text-base); }
  .txt__sub, .txt__mdesc, .txt__note { font-size: var(--text-sm); }
  .txt__title { font-size: var(--text-xl); }
  .txt__logo { font-size: var(--text-3xl); }
}

/* ————— responsive ————— */
@media (max-width: 40rem) {
  .glass { padding-inline: var(--space-lg); }
  .txt__pre { font-size: var(--text-xs); }
  .strip { gap: var(--space-xs); }
  .strip__hint { display: none; }
  .px-tv { display: none; }
  .txt__logo { font-size: var(--text-xl); }
  .txt__hero { gap: var(--space-md); }
}

/* ————— reduced motion ————— */
@media (prefers-reduced-motion: reduce) {
  .static { display: none; }
}

/* ═════════ the light band — the rail switch flipped: TELETEXT printed
   on paper. Silver cabinet, inked-down palette, bright yellow only on
   the blue bands. ═════════ */
:root.light {
  --trim: #8e8e96;
  --phosphor: #f6f6f8;   /* the paper the service prints on */
  --tx-w: #17171b;       /* base ink */
  --tx-y: #a88300;       /* amber — yellow that survives white paper */
  --tx-yb: #ffe600;
  --tx-c: #00758f;
  --tx-g: #0d8a3a;
  --tx-r: #d81f10;
  --tx-m: #b81cb8;
  --tx-b: #1f3fd6;
  --band: #e9e9f0;
  --band-b1: #e8eaf6;
  --band-b2: #f0f1f9;
  --cell: #ececef;
  --cell-hide: #dcdce3;
  --tx-hd: #17171b;
  --ball-ink: #fff;
  --snow-blend: multiply;
  --scanline: rgba(0, 0, 0, 0.09);
  --vignette: rgba(0, 0, 0, 0.14);
  --key-face: #ececf1;
  --key-edge: #bdbdc6;
  --hint-ink: oklch(45% 0.006 260);
}
:root.light body {
  /* the same silver cabinet as the set */
  background:
    radial-gradient(130% 100% at 50% -10%, #fbfbfd, #e7e7ec 55%, #d3d3da 100%);
}
:root.light .tube {
  box-shadow:
    inset 0 0 60px 10px rgba(0, 0, 0, 0.10),
    inset 0 0 4px 1px rgba(0, 0, 0, 0.22),
    0 0 0 2px rgba(255, 255, 255, 0.75),
    0 0 0 7px rgba(0, 0, 0, 0.08),
    inset 0 2px 2px rgba(255, 255, 255, 0.5),
    0 14px 44px rgba(0, 0, 0, 0.18);
}
/* the 8-bit telly prints its white cells as ink */
:root.light .px-tv { --px-frame: #2b2b31; }
/* the strip — light plastic back key, bright fastext keys with dark ink */
:root.light .strip__back {
  color: #5c5c66;
  background: linear-gradient(180deg, #fdfdfe, #e9e9ee);
  border-color: #bdbdc6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 0 #b6b6bf, 0 3px 4px rgba(0, 0, 0, 0.16);
}
:root.light .strip__back:hover { color: #232329; }
:root.light .strip__fkey {
  color: #101014;
  border-color: #b0b0b8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 0 #b6b6bf, 0 3px 4px rgba(0, 0, 0, 0.16);
}
:root.light .strip__fkey:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 0 0 #b6b6bf; }
:root.light .strip__fkey--r { background: #ff5140; color: #fff; }
:root.light .strip__fkey--g { background: #00c54c; }
:root.light .strip__fkey--y { background: #ffd400; }
:root.light .strip__fkey--c { background: #00cfe8; }
:root.light .strip__fkey:hover { filter: brightness(1.08); }