/* ─────────────────────────────────────────────────────────────────────────────
   /tog/tavla — avgangstavla.

   The section palette, worn as a departure board. There is no new colour system
   here in the dark, and that is deliberate (ADR 0025): `--lamp` #ffce6b over
   `--well` #0c131e IS amber on near-black at 12.68:1, which is what a Solari
   board looks like, and `--font-lab` (Barlow Condensed) IS the departure-board
   face. So the board's identity comes from TYPE, LAYOUT and the FLAP — not from
   a second palette that would quietly split ADR 0022 in two.

   The warm/cool split survives and means MORE here, not less:
     --lamp  the departure itself — the time, the destination, OM BORD,
             INNSTILT, a message from the railway. What a human said or a train
             did.
     --rail  the countdown, the day phrase, REKNA UT, the source badge. What the
             machine derived.
     --muted column heads, the operator, the — where a track is not known yet.

   `--tav-*` is page-local and structural. `html[data-tema="lys"]` is the one
   genuine second palette, and it exists only as an EMBED option: `--lamp` on a
   cream ground is 1.9:1, so a light board cannot be built from section tokens.
   Every pair, both themes, is measured in test/contrast.test.js.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Row height. MIRRORED as RAD_H in tog/tavla/app.js, which computes the
     iframe height for the copyable snippet — and a test asserts the two agree.
     Change one without the other and every embed gets a scrollbar or a gap. */
  --tav-rad: 56px;
  --tav-rader: 4;

  --tav-flap: #131a24;   /* the flap face: one notch above --well, so the cell edge reads */
  --tav-fuge: #06090e;   /* the hairline between flaps */
  --tav-grunn: #0c131e;  /* = --well; named here so the light theme can swap it */
  --tav-tekst: #eef4ff;  /* = --ink */
  --tav-dim: #9db0c9;    /* = --muted */
  --tav-varm: #ffce6b;   /* = --lamp */
  --tav-kald: #6fb7ff;   /* = --rail */
  --tav-flip: 320ms;
}

/* ── ?tema=lys ───────────────────────────────────────────────────────────────
   The embed skin, and nothing else. It is reachable only through the query
   parameter, is never linked from anywhere in the section, and redeclares NO
   section token — it maps the same five roles onto ink that survives a cream
   ground. Measured, not chosen by eye (ADR 0025). */
html[data-tema="lys"] {
  --tav-flate: #f4efe2;
  --tav-ink: #16110a;
  --tav-mut: #4b4238;
  --tav-lampe: #6b4100;
  --tav-skjene: #0f4c81;

  --tav-flap: #fbf7ee;
  --tav-fuge: #ddd3bd;
  --tav-grunn: var(--tav-flate);
  --tav-tekst: var(--tav-ink);
  --tav-dim: var(--tav-mut);
  --tav-varm: var(--tav-lampe);
  --tav-kald: var(--tav-skjene);
}
html[data-tema="lys"] body {
  background: var(--tav-flate);
  color: var(--tav-ink);
}
html[data-tema="lys"] .tog-strip {
  background: rgba(244, 239, 226, 0.93);
  border-bottom-color: var(--tav-fuge);
}
html[data-tema="lys"] .tog-strip-rute,
html[data-tema="lys"] .tog-strip-tid { color: var(--tav-mut); }
html[data-tema="lys"] .tog-strip-back,
html[data-tema="lys"] .tog-pill--neste { color: var(--tav-skjene); border-color: var(--tav-skjene); }
html[data-tema="lys"] .tog-pill--ombord { color: var(--tav-lampe); border-color: var(--tav-lampe); }
html[data-tema="lys"] .tog-kort {
  background: var(--tav-flap); border-color: var(--tav-fuge); color: var(--tav-ink);
}
html[data-tema="lys"] a { color: var(--tav-lampe); }
html[data-tema="lys"] .tog-foot,
html[data-tema="lys"] .tav-fine { color: var(--tav-mut); }

/* ── the plate ───────────────────────────────────────────────────────────────
   Station name, board name, clock — the three things printed on the real thing.
   No Fraunces anywhere on this page: that alone reads as "not a /tog card". */
.tav-plate {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 18px 0 10px;
  font-family: var(--font-lab);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.tav-stad {
  margin: 0; font-weight: 700; font-size: 0.78rem;
  color: var(--tav-kald);
}
.tav-h1 {
  margin: 0; font: 700 clamp(1.5rem, 5vw, 2.1rem)/1 var(--font-lab);
  letter-spacing: 0.12em; color: var(--tav-tekst);
}
.tav-klokke {
  margin: 0 0 0 auto; font-weight: 700;
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  color: var(--tav-varm); font-variant-numeric: tabular-nums;
}

/* ── the board ───────────────────────────────────────────────────────────── */
.tav-brett {
  background: var(--tav-grunn);
  border: 1px solid var(--tav-fuge);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.tav-hovud,
.tav-rad {
  display: grid;
  grid-template-columns: 5rem 4rem minmax(0, 1fr) 5.6rem 2.8rem minmax(0, 8.5rem);
  align-items: center;
  gap: 10px;
  padding: 0 12px;
}
.tav-hovud {
  font: 600 0.6rem/1 var(--font-lab);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tav-dim);
  padding-top: 9px; padding-bottom: 9px;
  border-bottom: 1px solid var(--tav-fuge);
}

.tav-rader { list-style: none; margin: 0; padding: 0; }

.tav-rad {
  min-height: var(--tav-rad);
  background: var(--tav-flap);
  border-bottom: 1px solid var(--tav-fuge);
  font-family: var(--font-lab);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.tav-rad:last-child { border-bottom: 0; }

.tav-tid {
  font-weight: 700; font-size: clamp(1.15rem, 4vw, 1.45rem);
  color: var(--tav-varm); line-height: 1.1;
}
.tav-tid del { color: var(--tav-dim); font-size: 0.72em; margin-right: 5px; }
.tav-tid .sein { color: var(--tav-varm); }

.tav-dag { font-weight: 600; font-size: 0.74rem; color: var(--tav-dim); }

.tav-til { min-width: 0; }
.tav-mal {
  display: block; font-weight: 700; font-size: clamp(0.95rem, 3.4vw, 1.2rem);
  color: var(--tav-tekst);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tav-fra {
  display: block; font-weight: 500; font-size: 0.68rem; color: var(--tav-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The night marker sits in the destination cell the way a symbol does on a real
   board — but with room around it, or at this size it reads as a rendering
   artefact rather than a glyph. It is aria-hidden: the row's own screen-reader
   label already carries the leg in words. */
.tav-natt {
  color: var(--tav-kald); font-size: 0.8em; margin-left: 0.45em;
  vertical-align: 0.05em;
}

.tav-selskap {
  font-weight: 500; font-size: 0.74rem; color: var(--tav-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tav-spor {
  font-weight: 700; font-size: 1.1rem; color: var(--tav-varm); text-align: center;
}
.tav-spor.tomt { color: var(--tav-dim); font-weight: 500; }

.tav-merk {
  font-weight: 600; font-size: 0.76rem; text-align: right;
  color: var(--tav-kald);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Warm is what the railway reported; cool is what the clock worked out. */
.tav-merk.varm { color: var(--tav-varm); }

/* On board. The row keeps its shape and gains a lamp edge — a board does not
   change layout because he happens to be standing on the train. */
.tav-rad--ombord { box-shadow: inset 3px 0 0 var(--tav-varm); }

/* Cancelled. The word is the claim; the rule through the destination is what
   carries it for anyone who cannot read the word at this size, which is why
   both are in the contrast table as a non-text pair. */
.tav-rad--innstilt .tav-mal { text-decoration: line-through; text-decoration-thickness: 2px; }
.tav-rad--innstilt .tav-tid { color: var(--tav-dim); }
.tav-rad--innstilt .tav-merk { color: var(--tav-varm); }

/* A board's blank rows ARE its shape. Hiding them makes the fixed frame height
   wrong and stops the thing looking like a board. */
.tav-rad--fyll { opacity: 0.32; }
.tav-rad--tom .tav-mal { color: var(--tav-dim); font-size: 0.9rem; letter-spacing: 0.1em; }
.tav-rad--tom .tav-tid { color: var(--tav-dim); }

/* The progress line under the row under way. Solid when Entur measured it,
   hatched when this site interpolated it (ADR 0010/0015). */
.tav-framdrift { grid-column: 1 / -1; height: 3px; background: var(--tav-fuge); margin: 0 -12px; }
.tav-framdrift i { display: block; height: 100%; background: var(--tav-varm); }
.tav-framdrift.rekna i {
  background: repeating-linear-gradient(135deg,
    var(--tav-kald) 0 4px, transparent 4px 8px), var(--tav-fuge);
}

/* ── the flap ────────────────────────────────────────────────────────────────
   Applied by app.js only when a cell's text CHANGED, never on first paint — a
   board that flaps itself on load is a toy, and an embedded one would blink
   every minute. */
@keyframes tav-flip {
  0%   { transform: rotateX(0deg);   filter: brightness(1); }
  45%  { transform: rotateX(-88deg); filter: brightness(0.35); }
  55%  { transform: rotateX(-92deg); filter: brightness(0.35); }
  100% { transform: rotateX(0deg);   filter: brightness(1); }
}
.tav-flip {
  animation: tav-flip var(--tav-flip) ease-in-out;
  transform-origin: center bottom;
  backface-visibility: hidden;
}

/* ── meldingar og noter ──────────────────────────────────────────────────── */
.tav-avvik {
  margin: 12px 0 0; padding: 10px 12px;
  border-left: 3px solid var(--tav-varm);
  background: var(--tav-flap);
  border-radius: 0 8px 8px 0;
  font: 500 0.82rem/1.5 var(--font-ui);
  text-transform: none; letter-spacing: 0;
  color: var(--tav-tekst);
}
.tav-avvik b { display: block; color: var(--tav-varm); font-size: 0.7rem;
  font-family: var(--font-lab); letter-spacing: 0.16em; text-transform: uppercase; }

/* ── bygg inn ────────────────────────────────────────────────────────────── */
.tav-bygg { margin: 26px 0 0; }
.tav-bygg-lede { margin: 4px 0 12px; color: var(--tav-dim); font-size: 0.9rem; }
.tav-val { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; }
.tav-felt {
  border: 1px solid var(--tav-fuge); border-radius: 8px;
  padding: 6px 10px; margin: 0;
  font-size: 0.85rem; color: var(--tav-tekst);
  display: flex; gap: 10px; align-items: center;
}
.tav-felt legend { font: 600 0.62rem/1 var(--font-lab); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--tav-dim); padding: 0 4px; }
.tav-felt--linje { gap: 8px; }
.tav-felt input[type="number"] { width: 4rem; min-height: 34px; }
.tav-felt input { accent-color: var(--tav-kald); }

.tav-kode {
  margin: 0 0 10px; padding: 10px 12px;
  background: var(--tav-grunn); border: 1px solid var(--tav-fuge); border-radius: 8px;
  overflow-x: auto;
  font: 500 0.78rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--tav-tekst);
  white-space: pre-wrap; word-break: break-word;
}
.tav-kopi { margin: 0 0 14px; }
.tav-hogd { margin: 0 0 12px; color: var(--tav-dim); font-size: 0.86rem; }
.tav-hogd summary { cursor: pointer; color: var(--tav-kald); min-height: 32px; }
.tav-fine { color: var(--tav-dim); font-size: 0.82rem; line-height: 1.55; }
.tav-fine code { font-size: 0.95em; color: var(--tav-tekst); }

/* ── ?kompakt=1 ──────────────────────────────────────────────────────────────
   One thin line, no chrome. Note what is NOT hidden: the skip link (it is
   already invisible until focused, and display:none-ing it would break WCAG
   2.4.1 silently) and the h1 (which becomes sr-only, because a framed board
   with no heading is a frame with no name to a screen reader). */
/* Inside a frame the board IS the page: the status strip repeats row 0, the rail
   cards explain a page the reader is not on, and the footer links out of the
   frame. Dropping them is also what lets rammeHogd() in app.js compute the frame
   height as a pure function of the row count. */
body.tavla-ramma .tog-strip,
body.tavla-ramma .tog-rail,
body.tavla-ramma .tog-foot { display: none; }
body.tavla-ramma .tog-main { padding-bottom: 0; }
body.tavla-ramma .tav-plate { margin-top: 10px; }

body.tavla-kompakt .tog-strip,
body.tavla-kompakt .tog-rail,
body.tavla-kompakt .tog-foot,
body.tavla-kompakt .tav-stad,
body.tavla-kompakt .tav-klokke,
body.tavla-kompakt .tav-hovud { display: none; }

body.tavla-kompakt .tav-h1 {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
body.tavla-kompakt .tav-plate { margin: 0; }
body.tavla-kompakt .tog-main { padding: 0; }
body.tavla-kompakt .tav-brett { border-radius: 0; border: 0; box-shadow: none; }
body.tavla-kompakt .tav-rad {
  grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 8rem);
  min-height: 44px;
}
body.tavla-kompakt .tav-dag,
body.tavla-kompakt .tav-selskap,
body.tavla-kompakt .tav-spor { display: none; }
/* The origin stays, inline after the destination. A personal board has no "you
   are here", so "OSLO S" alone does not say which train this is — and in one
   line the middle column has the room the two-line layout used vertically. */
body.tavla-kompakt .tav-til { display: flex; align-items: baseline; gap: 0.5em; min-width: 0; }
body.tavla-kompakt .tav-mal { flex: 0 1 auto; }
body.tavla-kompakt .tav-fra { flex: 1 1 auto; }
body.tavla-kompakt #meldingar,
body.tavla-kompakt #noter { display: none; }

/* A narrow board sheds columns in the order a real one does, and the widths are
   set against the EMBED rather than against a phone: a frame in a prose column
   on somebody else's page is around 700-800px, which is exactly where "VYGRUPPEN
   AS" starts rendering as "VYGRUPPE…". A truncated destination is a board; a
   truncated operator is a bug. So the operator goes first, then the day, and the
   width it frees goes to the two columns that carry the answer. */
@media (max-width: 820px) {
  .tav-hovud, .tav-rad {
    grid-template-columns: 5rem 4rem minmax(0, 1fr) 2.8rem minmax(0, 9.5rem);
  }
  .tav-hovud span:nth-child(4), .tav-selskap { display: none; }
}
@media (max-width: 620px) {
  .tav-hovud, .tav-rad {
    grid-template-columns: 4.4rem minmax(0, 1fr) 2.6rem minmax(0, 7rem);
  }
  .tav-hovud span:nth-child(2), .tav-dag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tav-flip { animation: none; }
  .tav-framdrift i { transition: none; }
}