/* omgevingsvergelijker.nl: departure-board world. Signal-yellow board, ink print, one reserved ink plate for no. 1,
   split-flap cells for the clock and the rank numbers, one 2px line weight throughout. */

@font-face { font-family: "Barlow"; src: url("fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --board: #ffc400;
  --board-deep: #f2b500;
  --ink: #0e2a52;
  --ink-soft: #3b4a5e;
  --plate: #ffffff;
  --on-ink-soft: #c9d3e1;
  --yes: #1f7a4d;
  --seam: #050f20;
  --line: 2px;
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 3rem);
  --maxw: 84rem;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --text: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

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

html {
  background: var(--board);
  scrollbar-color: var(--ink) var(--board);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--board);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ink); color: var(--board); }

a { color: inherit; text-decoration-thickness: var(--line); text-underline-offset: 0.22em; }
a:hover { text-underline-offset: 0.1em; }

:focus-visible { outline: var(--line) solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.next :focus-visible { outline-color: var(--board); }
.next .plate :focus-visible { outline-color: var(--ink); }

.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;
}
.nw { white-space: nowrap; }

.skip {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 10;
  background: var(--ink); color: var(--board); padding: 0.6rem 1rem; font-weight: 600;
}
.skip:focus { top: 0.75rem; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* Split-flap cell: one character per tile, the board shows through the split */
.cell {
  display: inline-block; position: relative; width: 0.82em; text-align: center;
  background: var(--ink); color: var(--plate); border-radius: 2px; line-height: 1.12;
  font-family: var(--display); font-weight: 700;
  transform-origin: 50% 50%;
}
.cell + .cell { margin-left: 2px; }
.cell::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--line); margin-top: -1px;
  background: var(--seam);
}
/* Rank numerals rest as plain ink print; they only become a flap tile while they turn */
.r-rank .cell { width: auto; background: transparent; color: var(--ink); }
.r-rank .cell + .cell { margin-left: 0; }
.r-rank .cell::after { display: none; }
.r-rank .cell.flip { background: var(--ink); color: var(--plate); }
/* Names, times and the count write themselves in character by character when the board changes */
.ch { display: inline-block; animation: flapin 240ms var(--ease-out) both; transform-origin: 50% 50%; }
@keyframes flapin {
  0% { transform: scaleY(0.06); opacity: 0.35; }
  100% { transform: scaleY(1); opacity: 1; }
}
.cell.flip { animation: flip 200ms var(--ease-out); }
@keyframes flip {
  0% { transform: scaleY(1); }
  45% { transform: scaleY(0.06); }
  100% { transform: scaleY(1); }
}

/* Board header strip */
.strip { border-bottom: var(--line) solid var(--ink); }
.strip .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.75rem;
}
.wordmark {
  font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: 0;
  text-decoration: none; line-height: 1;
}
.wordmark span { font-weight: 500; }
.strip-right { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 2rem); }
.topics { display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.topics li {
  font-family: var(--display); font-weight: 600; font-size: 1.0625rem;
  padding: 0.2rem 0.6rem; line-height: 1.3;
}
.topics li[aria-current] { background: var(--ink); color: var(--board); }
.topics li.later { color: var(--ink-soft); }
.topics .tag { font-family: var(--text); font-weight: 500; font-size: 0.75rem; margin-left: 0.3rem; }
.clock { display: inline-flex; align-items: center; font-size: 1.5rem; }
.clock .sep { font-family: var(--display); font-weight: 700; padding: 0 0.12em; line-height: 1; }

/* Hero */
.hero {
  padding-block: clamp(1.5rem, 0.9rem + 2.2vw, 2.75rem) clamp(1.1rem, 0.7rem + 1.2vw, 1.75rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: 1rem 3rem; align-items: end;
}
.hero h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3.25rem, 1.6rem + 4.4vw, 5rem);
  line-height: 0.92; letter-spacing: -0.01em; margin: 0; text-wrap: balance;
}
.hero-sub { display: grid; gap: 0.5rem; }
.hero p { margin: 0; font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.45; max-width: 44rem; }
.hero .checked { font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--ink-soft); }

/* The board */
.board { padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); }

.next {
  background: var(--ink); color: var(--plate);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(13rem, 17rem) auto;
  grid-template-areas:
    "rank head facts score"
    "rank stops facts score"
    "rank more facts score";
  gap: 0.35rem clamp(1rem, 0.5rem + 2vw, 2.5rem);
  padding: clamp(1.1rem, 0.7rem + 1.4vw, 1.75rem) clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
}
.next .rank {
  grid-area: rank; position: relative; font-family: var(--display); font-weight: 700; line-height: 0.8;
  font-size: clamp(5rem, 3rem + 5.6vw, 8rem); color: var(--board); align-self: start;
}
.next .rank::after {
  content: ""; position: absolute; left: 0; right: 0; top: 46%; height: var(--line); background: var(--ink);
}
.next .head { grid-area: head; min-width: 0; align-self: end; }
.next h2 {
  font-family: var(--display); font-weight: 700; margin: 0; line-height: 0.95;
  font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4.25rem); letter-spacing: -0.005em;
}
.next h2 a { text-decoration: none; }
.next h2 a:hover { text-decoration: underline; text-decoration-thickness: var(--line); text-underline-offset: 0.12em; }
.next .stops { grid-area: stops; margin: 0.2rem 0 0; font-size: 1.0625rem; line-height: 1.5; max-width: 62ch; color: #dfe6f0; }
.next .stops b { color: var(--plate); font-weight: 600; }
.next .score { grid-area: score; align-self: start; }
.next .facts {
  grid-area: facts; display: grid; align-content: start; gap: 0.6rem; margin: 0;
  padding-left: clamp(1rem, 0.5rem + 1.2vw, 1.75rem); border-left: var(--line) solid rgba(255, 255, 255, 0.28);
  font-family: var(--display); font-size: 1.25rem; font-weight: 600; line-height: 1.3;
}
.next .facts dt { color: var(--board); font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; }
.next .facts dd { margin: 0; }
.next .facts div { display: grid; gap: 0.05rem; }
.fact-note { display: block; font-family: var(--text); font-size: 0.875rem; font-weight: 400; color: var(--on-ink-soft); line-height: 1.35; max-width: 32ch; }
.next .remarks { grid-area: more; margin-top: 0.35rem; }
.next .remarks summary { color: var(--plate); }
.next .remarks[open] { grid-column: 2 / -1; grid-row: 4; }
.next .plate { color: var(--ink); }

/* Platform-style score box */
.score {
  display: grid; place-items: center; text-align: center;
  background: var(--plate); color: var(--ink); border: var(--line) solid var(--ink);
  min-width: 5.5rem; padding: 0.35rem 0.6rem 0.4rem;
}
.score b { font-family: var(--display); font-weight: 700; font-size: 2.25rem; line-height: 1; }
.score small { font-family: var(--display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; }
.next .score { min-width: 7rem; padding: 0.6rem 0.8rem; border-color: var(--plate); }
.next .score b { font-size: 3.5rem; }

/* Filter chips */
.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: clamp(1.25rem, 0.9rem + 1.2vw, 2rem) 0 0.6rem;
}
.filters[hidden] { display: none; }
.filters-label { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; margin-right: 0.25rem; }
.chip {
  font: 600 1.0625rem/1 var(--display); color: var(--ink); background: transparent;
  border: var(--line) solid var(--ink); padding: 0.5rem 0.85rem; cursor: pointer; min-height: 2.75rem;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.chip:hover { background: var(--board-deep); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--board); }
.filters .count { font-family: var(--display); font-size: 1.0625rem; margin: 0 0 0 auto; }

/* Timetable rows */
.timetable { list-style: none; margin: 0; padding: 0; border-top: var(--line) solid var(--ink); }
.thead + .timetable { border-top: 0; }
.thead, .row-main {
  display: grid;
  grid-template-columns: 3.25rem 14ch minmax(0, 1fr) 15ch 10ch 6.5rem;
  gap: 0 1.25rem; align-items: center;
}
.thead {
  font-family: var(--display); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.5rem 0; border-bottom: var(--line) solid var(--ink); color: var(--ink-soft);
}
.thead span:last-child { text-align: center; }
.row { border-bottom: var(--line) solid var(--ink); }
.row[hidden] { display: none; }
.row-main { padding: 0.8rem 0 0.7rem; }
.r-rank { font-family: var(--display); font-weight: 700; font-size: 2.25rem; line-height: 1; }
.r-ready, .r-price { display: block; font-family: var(--display); font-weight: 600; font-size: 1.3125rem; line-height: 1.3; }
.r-ready .unknown, .r-price .unknown { font-weight: 500; color: var(--ink-soft); }
.r-price small {
  display: block; font-family: var(--text); font-size: 0.8125rem; font-weight: 500; color: var(--ink-soft); line-height: 1.3;
}
.r-name { min-width: 0; }
.r-name h3 { font-family: var(--display); font-weight: 700; font-size: 1.75rem; line-height: 1.1; margin: 0; }
.r-name h3 a { text-decoration: none; }
.r-name h3 a:hover { text-decoration: underline; text-decoration-thickness: var(--line); text-underline-offset: 0.12em; }
.via { margin: 0.1rem 0 0; font-size: 0.9375rem; color: var(--ink-soft); line-height: 1.35; }
.r-online { font-family: var(--display); font-weight: 600; font-size: 1.125rem; display: flex; align-items: center; gap: 0.45rem; }
.dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; border: var(--line) solid var(--ink); flex: none; }
.dot.yes { background: var(--yes); border-color: var(--yes); }
.r-score { justify-self: center; align-self: start; }
.r-score .score { min-width: 5.25rem; }
.label-sm { display: none; }

/* One shared scale per column: price on 0 to 400 euro, ready-in on 0 to 10 working days */
.scale {
  display: block; position: relative; height: 0.55rem; max-width: 9ch; margin-top: 0.3rem;
  background: linear-gradient(var(--ink), var(--ink)) left bottom / 100% var(--line) no-repeat;
}
.scale::after {
  content: ""; position: absolute; bottom: 0; left: calc(var(--v) * (100% - 4px));
  width: 4px; height: 0.55rem; background: var(--ink);
}

/* Remarks (details) */
.remarks summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--display); font-weight: 600; font-size: 1rem; padding: 0.15rem 0;
}
.remarks summary::-webkit-details-marker { display: none; }
.remarks summary svg { transition: transform 200ms var(--ease-out); }
.remarks[open] summary svg { transform: rotate(90deg); }
.remarks summary:hover span { text-decoration: underline; text-decoration-thickness: var(--line); text-underline-offset: 0.2em; }
.plate {
  background: var(--plate); border: var(--line) solid var(--ink);
  margin: 0.5rem 0 0.35rem; padding: clamp(1rem, 0.7rem + 1vw, 1.5rem);
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.25rem 2.5rem;
}
.plate p { margin: 0 0 0.75rem; max-width: 66ch; }
.plate h3, .plate h4 {
  font-family: var(--display); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0 0 0.4rem; color: var(--ink-soft);
}
.plate ul { margin: 0 0 0.75rem; padding-left: 1.1rem; }
.plate li { margin: 0.15rem 0; }
.breakdown { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.breakdown td { padding: 0.28rem 0; vertical-align: top; }
.breakdown td:last-child { text-align: right; font-family: var(--display); font-weight: 600; font-size: 1.0625rem; white-space: nowrap; padding-left: 1rem; }
.breakdown tr:last-child td { border-top: var(--line) solid var(--ink); padding-top: 0.45rem; font-weight: 600; }
.sources { font-size: 0.875rem; color: var(--ink-soft); margin: 0; }
.sources a { word-break: break-word; }
.ext { display: inline-block; width: 0.75em; height: 0.75em; margin-left: 0.2em; vertical-align: 0.02em; }
.r-name h3 .ext, .next h2 .ext { width: 0.42em; height: 0.42em; margin-left: 0.18em; vertical-align: 0.5em; }

/* Do it yourself */
.plate-solo {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); background: var(--plate); border: var(--line) solid var(--ink);
  padding: clamp(1.25rem, 0.9rem + 1.4vw, 2rem); max-width: 60rem;
}
.plate-solo h3 { font-family: var(--display); font-weight: 700; font-size: 1.75rem; margin: 0 0 0.5rem; line-height: 1.1; }
.plate-solo p { margin: 0 0 0.75rem; max-width: 70ch; }
.plate-solo p:last-child { margin-bottom: 0; font-weight: 600; }

/* Sections */
.section { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; border-top: var(--line) solid var(--ink); }
.section h2 {
  font-family: var(--display); font-weight: 700; font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
  line-height: 1; margin: 0 0 1rem; text-wrap: balance;
}
.section .lead { font-size: 1.1875rem; max-width: 62ch; margin: 0 0 2rem; }

/* Scoring criteria as timetable rows: criterion, points, what counts */
.criteria { margin: 0; border-top: var(--line) solid var(--ink); }
.criteria div {
  display: grid; grid-template-columns: minmax(0, 22rem) 8ch minmax(0, 1fr); gap: 0.25rem 1.5rem; align-items: baseline;
  padding: 0.85rem 0; border-bottom: var(--line) solid var(--ink);
}
.criteria dt { font-family: var(--display); font-weight: 700; font-size: 1.375rem; line-height: 1.2; }
.criteria .pts { font-family: var(--display); font-weight: 600; font-size: 1.125rem; margin: 0; white-space: nowrap; }
.criteria dd { margin: 0; max-width: 62ch; }
.note { margin: 1.5rem 0 0; max-width: 72ch; color: var(--ink-soft); font-size: 0.9375rem; }

.explain { background: var(--plate); }
.explain .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; }
.explain h3 { font-family: var(--display); font-weight: 700; font-size: 1.5rem; margin: 0 0 0.4rem; line-height: 1.2; }
.explain p { margin: 0 0 1.5rem; max-width: 62ch; }
.explain ol { margin: 0; padding-left: 1.3rem; }
.explain li { margin: 0 0 0.6rem; padding-left: 0.25rem; }
.explain li::marker { font-family: var(--display); font-weight: 700; }

.later-rows { list-style: none; margin: 0; padding: 0; border-top: var(--line) solid var(--ink); }
.later-rows li {
  display: grid; grid-template-columns: 12ch minmax(0, 1fr); gap: 1.25rem; align-items: baseline;
  padding: 0.85rem 0; border-bottom: var(--line) solid var(--ink);
}
.later-rows .t { font-family: var(--display); font-weight: 600; font-size: 1.25rem; color: var(--ink-soft); }
.later-rows .n { font-family: var(--display); font-weight: 700; font-size: 1.75rem; line-height: 1.1; }

.foot { border-top: var(--line) solid var(--ink); padding: 2rem 0 2.5rem; font-size: 0.9375rem; }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
.foot p { margin: 0; max-width: 70ch; }

@media (prefers-reduced-motion: reduce) {
  .chip, .remarks summary svg { transition: none; }
  .cell.flip, .ch { animation: none; }
}

/* Medium-up: row cells sit in the six-column board grid; remarks open under name, price and order */
@media (min-width: 40.0625rem) {
  .r-meta { display: contents; }
  .r-rank, .r-ready, .r-name, .r-price, .r-online { grid-row: 1; }
  .r-rank { grid-column: 1; }
  .r-ready { grid-column: 2; }
  .r-name { grid-column: 3; }
  .r-price { grid-column: 4; }
  .r-online { grid-column: 5; }
  .r-score { grid-column: 6; grid-row: 1 / span 2; }
  .row-main > .remarks { grid-column: 3 / 6; grid-row: 2; margin-top: 0.2rem; }
}

/* Medium screens */
@media (max-width: 64rem) {
  .hero { grid-template-columns: 1fr; }
  .next {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "rank head score" "rank stops score" "rank facts facts" "rank more more";
  }
  .next .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; border-left: 0; padding-left: 0;
    padding-top: 0.9rem; margin-top: 0.5rem; border-top: var(--line) solid rgba(255, 255, 255, 0.28);
  }
  .next .remarks[open] { grid-column: 2 / -1; }
  .thead, .row-main { grid-template-columns: 3rem 12ch minmax(0, 1fr) 14ch 6rem; }
  .thead .h-online, .r-online { display: none; }
  .explain .cols { grid-template-columns: 1fr; }
  .plate { grid-template-columns: 1fr; }
  .criteria div { grid-template-columns: minmax(0, 1fr) 8ch; }
  .criteria div dd:not(.pts) { grid-column: 1 / -1; }
}
@media (min-width: 40.0625rem) and (max-width: 64rem) {
  .r-score { grid-column: 5; }
  .row-main > .remarks { grid-column: 3 / 5; }
}

/* Phones */
@media (max-width: 40rem) {
  body { font-size: 1rem; }
  .topics li.later { display: none; }
  .topics li { font-size: 1rem; padding: 0.15rem 0.5rem; }
  .wordmark { font-size: 1.25rem; }
  .strip-right { gap: 0.6rem; }
  .clock { font-size: 1.125rem; }
  .next {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "rank score" "head head" "stops stops" "facts facts" "more more";
  }
  .next .score { justify-self: end; min-width: 6rem; }
  .next .score b { font-size: 2.75rem; }
  .next .facts { grid-template-columns: 1fr; gap: 0.75rem; }
  .next .remarks, .next .remarks[open] { grid-area: more; }
  .thead { display: none; }
  .thead + .timetable { border-top: var(--line) solid var(--ink); }
  .row-main {
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    grid-template-areas: "rank name score" "rank meta meta" "rank more more";
    gap: 0.35rem 0.85rem; align-items: start;
  }
  .r-rank { grid-area: rank; font-size: 1.875rem; }
  .r-name { grid-area: name; }
  .r-name h3 { font-size: 1.5rem; }
  .r-score { grid-area: score; justify-self: end; }
  .r-score .score { min-width: 4.25rem; padding: 0.25rem 0.4rem; }
  .r-score .score b { font-size: 1.75rem; }
  .r-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
  .r-ready, .r-price { font-size: 1.125rem; }
  .r-online { display: flex; }
  .row-main > .remarks { grid-area: more; }
  .label-sm { display: inline; font-weight: 500; color: var(--ink-soft); }
  .scale { display: none; }
  .r-price small { display: inline; margin-left: 0.3rem; }
  .criteria div { grid-template-columns: minmax(0, 1fr) auto; }
  .later-rows li { grid-template-columns: 6ch minmax(0, 1fr); }
}