/* P100 — teletext grid
   Bedstead metrics: advance 0.6em, cell = exactly 1em tall at line-height:1.
   40 columns wide, like a Mullard SAA5050 intended. */

@font-face {
  font-family: 'Bedstead';
  src: url('fonts/bedstead.woff2') format('woff2');
  font-display: block;
}

:root {
  --blk: #000;
  --red: #f00;
  --grn: #0f0;
  --yel: #ff0;
  --blu: #00f;
  --mag: #f0f;
  --cyn: #0ff;
  --wht: #fff;
  --fs: 22px; /* rescaled by JS to fit viewport */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--blk);
  min-height: 100%;
}

body {
  font-family: 'Bedstead', 'Courier New', monospace;
  font-size: var(--fs);
  line-height: 1;
  color: var(--wht);
  display: flex;
  justify-content: center;
  -webkit-font-smoothing: none;
  font-smooth: never;
  overflow-x: hidden;
}

#wrap {
  width: 40ch;
  position: relative;
  padding-bottom: 1em;
}

/* Real text for crawlers and screen readers. The page renders its titles
   as block graphics, so the words have to exist somewhere readable. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sr-only:focus-within { position: static; width: auto; height: auto; clip: auto; }

/* ---- colour classes ---- */
.r { color: var(--red); }  .g { color: var(--grn); }
.y { color: var(--yel); }  .b { color: var(--blu); }
.m { color: var(--mag); }  .c { color: var(--cyn); }
.w { color: var(--wht); }
.bg-r { background: var(--red); } .bg-g { background: var(--grn); }
.bg-y { background: var(--yel); } .bg-b { background: var(--blu); }
.bg-m { background: var(--mag); } .bg-c { background: var(--cyn); }
.bg-w { background: var(--wht); } .bg-k { background: var(--blk); }
.k { color: var(--blk); }

/* ---- rows and text ---- */
.row { min-height: 1em; white-space: pre-wrap; word-break: break-word; }
.blank { height: 1em; }

/* teletext double height: same width, twice the height */
.dh {
  display: block;
  transform: scaleY(2);
  transform-origin: top left;
  margin-bottom: 1em; /* reserve the second cell row */
}

.up { text-transform: uppercase; }

/* ---- header / footer ---- */
#hdr {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--blk);
  padding-top: 1em;
  padding-bottom: 1em;
}
#hdr .hrow { display: flex; justify-content: space-between; white-space: pre; }

#fast {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--blk);
  padding-top: 1em;
  display: flex;
  justify-content: space-between;
}
#fast a { text-decoration: none; cursor: pointer; }
#fast a:hover, #fast a:focus-visible { background: var(--wht); color: var(--blk); outline: none; }

a { color: inherit; text-decoration: none; }

/* index rows on the home page */
.ix { display: flex; cursor: pointer; }
.ix .lbl { color: var(--wht); }
.ix .dots { flex: 1; overflow: hidden; color: var(--blu); white-space: nowrap; }
.ix .num { color: var(--cyn); }
.ix:hover .lbl, .ix:focus-visible .lbl { color: var(--yel); }
.ix:hover .dots { color: var(--cyn); }

/* mosaic block graphics (sextant characters) */
.mosaic { white-space: pre; line-height: 1; letter-spacing: 0; }

/* flashing — real teletext flash rate is about 1Hz */
.flash { animation: tflash 1s steps(1) infinite; }
@keyframes tflash { 50% { opacity: 0; } }

/* story blocks */
.story { margin-bottom: 1em; }
.story .kicker { color: var(--cyn); }

/* schedule + deals tables */
.sched .time { color: var(--cyn); display: inline-block; width: 6ch; }
.now { background: var(--yel); color: var(--blk); }

.deal { display: flex; }
a.deal:hover .dest, a.deal:focus-visible .dest { color: var(--yel); }
a.deal:hover .dots, a.deal:focus-visible .dots { color: var(--cyn); }
a.story:hover .hl, a.story:focus-visible .hl { background: var(--wht); color: var(--blk); }
a.story:hover .kicker, a.story:focus-visible .kicker { color: var(--blk); }
a.lead:hover .dh, a.lead:focus-visible .dh { color: var(--wht); }
a.deal, a.story, a.lead { outline: none; }
.deal .dest { color: var(--wht); overflow: hidden; white-space: nowrap; text-overflow: clip; }
.deal .dots { flex: 1; overflow: hidden; color: var(--blu); white-space: nowrap; }
.deal .price { color: var(--yel); }

/* weather map */
#map { position: relative; }
#map .temp {
  position: absolute;
  background: var(--blk);
  color: var(--yel);
  padding: 0 0.5ch;
}

.demoflag { background: var(--mag); color: var(--blk); }

/* ---- CRT dressing, kept subtle ---- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.18) 3px
  );
  z-index: 10;
}
#wrap { text-shadow: 0 0 6px rgba(255,255,255,0.12); }

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