/* Teletext device shell — strict broadcast register (Ceefax look). */
/* Lifted from /style web teletext; font is self-hosted, served same-origin. */

/* The whole palette (spec/STYLE order) plus the native cell size. */
:root {
  --tt-black:   #000000;   /* the ground; the unlit screen */
  --tt-red:     #FF0000;
  --tt-green:   #00FF00;
  --tt-yellow:  #FFFF00;
  --tt-blue:    #0000FF;
  --tt-magenta: #FF00FF;
  --tt-cyan:    #00FFFF;
  --tt-white:   #FFFFFF;
  --tt-cell: 20px;         /* Teletext50 native: 1 cell = 12x20px */
}

/* Self-hosted SAA5050 revival; block so glyphs never swap to a fallback face. */
@font-face {
  font-family: "Teletext50";
  src: url("/Teletext50.woff2") format("woff2");
  font-display: block;
}

/* Base framebuffer: native cell x integer zoom, crisp pixels, no smoothing. */
.tt {
  font-family: "Teletext50", ui-monospace, "Courier New", monospace;
  background: var(--tt-black);
  color: var(--tt-white);
  font-size: calc(var(--tt-cell) * var(--k, 1));
  line-height: 1;
  letter-spacing: 0;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-rendering: optimizeSpeed;
}

/* The page floats centred on black; scrolls when zoomed past the window. */
.tt-fit {
  position: fixed;
  inset: 0;
  overflow: auto;
  background: var(--tt-black);
  display: grid;
  place-content: safe center;
}

/* The invariant: exactly 40 columns, at every zoom. Positioned so the
   auto-rotate countdown can anchor to its lower-right. */
.tt-page { width: 40ch; position: relative; }

/* Auto-rotate countdown: seconds to the next subpage, overlaid at the screen's
   lower-right. Out of flow (one row up, clear of the FASTEXT bar) so it never
   disturbs the 25-row grid or the pinned last row; shown only while rotating. */
.tt-countdown {
  position: absolute;
  right: 1ch;
  bottom: 1em;
  color: var(--tt-cyan);
  background: var(--tt-black);
  pointer-events: none;
  white-space: pre;
}

/* The body framebuffer is a fixed 25 rows tall, so the FASTEXT bar always pins
   to the screen's last row instead of floating up under short content. */
#screen { height: 25em; overflow: hidden; }

/* --- Renderer content classes (must match renderer.js output exactly) --- */

/* One lattice row; pre keeps the attribute spaces, fixed 1-cell height. */
.tt-row {
  display: block;
  white-space: pre;
  height: 1em;
}
/* A double-height row folds in the blanked row below it. */
.tt-row.dh-row { height: 2em; }

/* Double-height: scale only Y from the top edge (tall, narrow). */
.dh {
  display: inline-block;
  transform: scaleY(2);
  transform-origin: 0 0;
}

/* FLASH blinks ~1Hz; CONCEAL hides until a .show modifier reveals it. */
@keyframes tt-flash { 50% { opacity: 0; } }
.flash { animation: tt-flash 1s steps(1, end) infinite; }
.conceal { color: var(--tt-black) !important; }
.conceal.show { color: var(--tt-white) !important; }

/* Block-mosaic primitive: a cell is a 2x3 grid of six sub-blocks. */
/* Lit blocks take the run colour (currentColor); unlit (.o) are transparent. */
.mos {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  width: 1ch;
  height: 1em;
  vertical-align: top;
  color: inherit;
}
.mos b { background: currentColor; }
.mos b.o { background: transparent; }
.mos.sep { gap: 1px; padding: 1px; }       /* separated mosaics: inset each block */

/* Clickable inbox affordances: the per-row archive control and the band's
   Active/Archived toggle. Pointer cursor signals they act on click. */
.tt-arch, .tt-toggle { cursor: pointer; }

/* --- Chrome --- */

/* Header row 0: page handle left, service band centre, clock right. */
.tt-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  white-space: pre;
  color: var(--tt-white);
}
.tt-header .page { color: var(--tt-white); }
.tt-masthead {
  background: var(--tt-blue);
  color: var(--tt-yellow);
  padding: 0 1ch;
}
.tt-header .clock { color: var(--tt-yellow); }

/* FASTEXT bar: four colour-keyed links; the colour is the affordance. */
.fastext {
  display: flex;
  gap: 1ch;
  white-space: pre;
}
.fastext a { text-decoration: none; }
.fastext .k-red    { color: var(--tt-red); }
.fastext .k-green  { color: var(--tt-green); }
.fastext .k-yellow { color: var(--tt-yellow); }
.fastext .k-cyan   { color: var(--tt-cyan); }

/* View controls: inverted command-key boxes, fixed bottom-right, outside the page. */
.tt-controls {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  gap: 1px;
  font-family: "Teletext50", ui-monospace, monospace;
  font-size: 16px;
}
.tt-controls button {
  font: inherit;
  cursor: pointer;
  border: 0;
  padding: .3em .7em;
  background: var(--tt-white);
  color: var(--tt-black);
}
.tt-controls button:focus-visible { background: var(--tt-cyan); }  /* state, not a thin ring */

/* CRT treatment: opt-in scanline overlay, anchored to the fixed container. */
.tt-fit.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .30) 2px 3px);
}