/* Parent-facing answer screen. Tokens, fonts and reset live in tokens.css.
 *
 * Read on an iPhone by two people in their seventies. The first screen holds
 * the whole answer: where, when, the verdict, the price, and the button. The
 * "why" (scale, history, facts, evidence) follows below it for whoever wants
 * it. Type is in rem so the phone's text size reaches the page, and the
 * layout reflows rather than scrolls sideways up to 200% text.
 */

/* iOS Dynamic Type reaches web content only through this system font
   keyword. Scoped to touch WebKit: desktop Safari would shrink the base to
   13px. The family is restored on body (tokens.css), only the size stays. */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
}

html { -webkit-tap-highlight-color: transparent; }
body { overflow-wrap: break-word; }

/* Screen-reader-only text. */
.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.nb { white-space: nowrap; }

/* --------------------------------------------------------------- header -- */

.topbar {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  padding: 10px 0 2px;
}

.brand {
  font-size: var(--t-meta);
  font-weight: 620;
  letter-spacing: -.005em;
  color: var(--ink-2);
}

/* ------------------------------------------------------- stops control -- */

/* Two labelled choices rather than a checkbox: seeing which of two words is
   lit beats inferring state from an empty tickbox. The thumb is one element
   that slides, so the choice visibly moves instead of blinking. */
.stops {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  margin: 6px 0 18px;
  border-radius: 12px;
  background: var(--sunken);
  box-shadow: inset 0 0 0 1px var(--line);
}

.stops-thumb {
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  border-radius: 9px;
  background: var(--thumb);
  box-shadow: var(--thumb-shadow), 0 0 0 .5px var(--thumb-edge);
  view-transition-name: stops-thumb;
}
.stops.is-direct .stops-thumb { transform: translateX(100%); }

/* The journey-length row: same control, three stops on the track. */
.stops--three { grid-template-columns: 1fr 1fr 1fr; }
.stops--three .stops-thumb { width: calc(33.333% - 2px); }
.stops--three.is-cap-1 .stops-thumb { transform: translateX(100%); }
.stops--three.is-cap-2 .stops-thumb { transform: translateX(200%); }
/* "sub 18h dus" is one label, not two lines: a third of a phone is enough
   for it once the side padding stops competing with it. */
.stops--three .stops-opt { padding-inline: 4px; white-space: nowrap; }
.stops + .stops { margin-top: -12px; }

.stops-opt {
  position: relative;          /* above the thumb */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 6px 10px;
  border-radius: 9px;
  color: var(--ink-2);
  font-size: var(--t-meta);
  font-weight: 560;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.stops-opt.is-on { color: var(--ink); font-weight: 650; }
.stops-opt:not(.is-on):active { opacity: .6; }

/* -------------------------------------------------------------- notices -- */

.notice {
  display: flex;
  gap: 14px;
  border-radius: var(--r);
  padding: 20px 20px 20px 18px;
  margin: 0 0 18px;
  background: var(--card);
  box-shadow: var(--shadow), 0 0 0 1px var(--line);
}

.notice-mark {
  flex: 0 0 auto;
  width: 5px;
  border-radius: 3px;
  background: var(--m-muted);
}
.notice--down  .notice-mark,
.notice--error .notice-mark { background: var(--m-wait); }

.notice-body { min-width: 0; flex: 1; }
.notice h1, .notice h2 {
  margin: 0 0 6px;
  font-size: var(--t-lead);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.notice p { margin: 0; font-size: var(--t-body); color: var(--ink-2); text-wrap: pretty; }

.route-lines {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  font-size: var(--t-meta);
  line-height: 1.4;
  color: var(--ink-2);
}
.route-lines li + li { margin-top: 8px; }
.route-lines--after { margin: 22px 4px 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  margin-top: 16px;
  padding: 8px 20px;
  border-radius: 12px;
  background: var(--sunken);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--accent);
  font-size: var(--t-body);
  font-weight: 620;
  text-decoration: none;
}
.btn:active { opacity: .7; }

/* ---------------------------------------------------------------- hero -- */

.hero {
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow), 0 0 0 1px var(--line);
  padding: 22px 20px 20px;
  view-transition-name: hero;
}

.hero-head { margin: 0; font-weight: inherit; font-size: inherit; line-height: inherit; }

.eyebrow {
  display: block;
  font-size: var(--t-eyebrow);
  font-weight: 620;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
}

.when {
  display: block;
  margin-top: 2px;
  font-size: var(--t-meta);
  font-weight: 450;
  line-height: 1.35;
  color: var(--ink-2);
}

.verdict {
  display: block;
  margin: 14px 0 12px;
  font-size: var(--t-verdict);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.verdict--book, .verdict--good      { color: var(--good); }
.verdict--wait                      { color: var(--wait); }
.verdict--normal, .verdict--unknown { color: var(--ink); }

.price {
  margin: 0;
  font-size: var(--t-price);
  font-weight: 680;
  line-height: 1;
  letter-spacing: -.04em;
  /* Proportional figures: tabular gives every digit a zero's width, which
     reads loose at display size. Tabular is for columns, not for a hero. */
  font-variant-numeric: proportional-nums;
}
.price .cur {
  font-size: .36em;
  margin-left: -.04em;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink-2);
}

.sub {
  margin: 6px 0 0;
  font-size: var(--t-meta);
  line-height: 1.4;
  color: var(--ink-2);
}

.meta {
  margin: 4px 0 0;
  font-size: var(--t-meta);
  line-height: 1.4;
  color: var(--ink-2);
}
.checked {
  margin: 10px 0 0;
  font-size: var(--t-meta);
  line-height: 1.4;
  text-align: center;
  color: var(--ink-2);
}
.checked--old { color: var(--wait); font-weight: 560; }
.checked--old::before {
  content: "";
  display: inline-block;
  width: .5em; height: .5em;
  margin-right: .4em;
  border-radius: 50%;
  background: var(--m-wait);
  vertical-align: .08em;
}

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  margin-top: 18px;
  padding: 12px 20px;
  border-radius: 14px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--t-body);
  font-weight: 640;
  line-height: 1.25;
  letter-spacing: -.008em;
  text-align: center;
  text-decoration: none;
}
.cta:active { filter: brightness(.9); transform: scale(.985); }

.cta--quiet {
  min-height: var(--tap);
  background: var(--sunken);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--accent);
}

/* The why: everything that supports the answer, below the button. */
.why {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* The colour-independent channel: four steps, the live one filled and tall. */
.scale { margin: 0 0 20px; container-type: inline-size; }

.scale-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  align-items: end;
  height: 20px;
}
.scale-step { height: 6px; border-radius: 3px; background: var(--m-track); }
.scale-step.is-on { height: 20px; border-radius: 4px; }
.scale--normal .scale-step.is-on { background: var(--ink-2); }
.scale--book .scale-step.is-on,
.scale--good .scale-step.is-on { background: var(--m-good); }
.scale--wait .scale-step.is-on { background: var(--m-wait); }

.scale-labels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: 8px;
  font-size: var(--t-meta);
  line-height: 1.2;
  color: var(--ink-2);
  /* Deliberately NOT overflow-wrap:anywhere: breaking a word mid-syllable to
     fit a quarter column is worse than any layout it rescues. When the four
     words no longer fit (a narrow phone, large text), only the lit one stays,
     under its own step. */
  white-space: nowrap;
}
.scale-labels span { text-align: center; }
.scale-labels span:first-child { text-align: left; }
.scale-labels span:last-child { text-align: right; }
.scale-labels .is-on { color: var(--ink); font-weight: 650; }
/* A word wider than its quarter stays centred under its step (a plain
   text-align:center would let it spill to the right only). */
.scale-labels span { justify-self: center; width: max-content; }
.scale-labels span:first-child { justify-self: start; }
.scale-labels span:last-child { justify-self: end; }
@container (max-width: 13.5em) {
  .scale-labels span:not(.is-on) { visibility: hidden; }
}

.spark { margin: 0 0 20px; }
/* Stretched to the container width, so strokes opt out of scaling. */
.spark svg { display: block; width: 100%; height: 3.25rem; overflow: visible; }
.spark-line { fill: none; stroke: var(--ink-2); stroke-width: 2;
              stroke-linejoin: round; stroke-linecap: round; }
.spark-area { fill: var(--ink-2); opacity: .07; }
/* The typical price: solid (never dashed), so it reads as a reference rather
   than as a second series, in a colour that clears 3:1. */
.spark-ref  { stroke: var(--m-muted); stroke-width: 1.5; }
.spark-ring { stroke: var(--card); stroke-width: 14; stroke-linecap: round; }
.spark-dot  { stroke: var(--ink-2); stroke-width: 9; stroke-linecap: round; }
.spark-dot--book, .spark-dot--good { stroke: var(--m-good); }
.spark-dot--wait { stroke: var(--m-wait); }
.spark-cap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px 16px;
  margin: 8px 0 0;
  font-size: var(--t-meta);
  line-height: 1.35;
  color: var(--ink-2);
}
.spark-key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.spark-key i { display: inline-block; width: 16px; height: 0; border-top: 1.5px solid var(--m-muted); }

.reason {
  margin: 0 0 16px;
  font-size: var(--t-body);
  line-height: 1.45;
  letter-spacing: -.006em;
  text-wrap: pretty;
}

.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-meta);
  line-height: 1.45;
  color: var(--ink);
}
.facts li { padding: 2px 0; text-wrap: pretty; }
.facts .warn { color: var(--wait); font-weight: 560; }

.evidence {
  margin: 12px 0 0;
  font-size: var(--t-meta);
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
}

.pointer {
  display: block;
  padding: 11px 0;
  margin: 8px 4px 0;
  line-height: 1.35;
  color: var(--accent);
  font-size: var(--t-meta);
  font-weight: 600;
  text-decoration: none;
}

/* --------------------------------------------------------------- others -- */

.others { margin-top: 30px; }

.others-head {
  margin: 0 4px 4px;
  font-size: var(--t-meta);
  font-weight: 650;
  color: var(--ink-2);
}

.rows {
  list-style: none;
  margin: 0;
  padding: 0 16px;
  border-radius: var(--r);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line);
}
.rows > li + li { border-top: 1px solid var(--line); }
.rows > li { scroll-margin-top: 16px; }

.row summary {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "where price" "state chev" "when when";
  align-items: baseline;
  gap: 2px 12px;
  min-height: 4.5rem;
  padding: 14px 0;
  cursor: pointer;
}
.row summary::-webkit-details-marker { display: none; }
.row summary:active { opacity: .7; }

.o-where { grid-area: where; font-size: var(--t-body); font-weight: 620;
           line-height: 1.25; letter-spacing: -.012em; text-wrap: balance; }
.o-when  { grid-area: when; font-size: var(--t-meta); line-height: 1.35; color: var(--ink-2); }
.o-old   { color: var(--wait); }
.o-price {
  grid-area: price;
  justify-self: end;
  font-size: var(--t-lead);
  font-weight: 660;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.o-price .cur { font-size: .72em; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }

.o-state {
  grid-area: state;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-meta);
  font-weight: 560;
  color: var(--ink-2);
  white-space: nowrap;
}
/* Mini version of the same four-step scale, so a row reads without colour. */
.o-pips { display: inline-flex; gap: 2px; align-items: flex-end; }
.o-pips i { width: 5px; height: 5px; border-radius: 1px; background: var(--m-track); }
.o-pips i.is-on { height: 13px; background: var(--ink-2); }
.o-state--book .o-pips i.is-on,
.o-state--good .o-pips i.is-on { background: var(--m-good); }
.o-state--wait .o-pips i.is-on { background: var(--m-wait); }
.o-state--book, .o-state--good { color: var(--good); }
.o-state--wait { color: var(--wait); }

.o-chev {
  grid-area: chev;
  justify-self: end;
  align-self: center;
  margin-right: 4px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--m-muted);
  border-bottom: 2px solid var(--m-muted);
  transform: rotate(-45deg);
}
.row[open] .o-chev { transform: rotate(45deg); }

.o-body { padding: 0 0 18px; }
.o-verdict { margin: 0; font-size: var(--t-lead); font-weight: 680; letter-spacing: -.015em; }
.o-body .meta { margin: 2px 0 12px; }
.o-reason { margin: 0 0 12px; font-size: var(--t-meta); line-height: 1.45; }
.o-body .cta { margin-top: 14px; }

.rows > li:target .row summary { color: var(--accent); }

/* --------------------------------------------------------------- footer -- */

.foot {
  margin-top: 34px;
  padding: 18px 4px 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-meta);
  line-height: 1.45;
  color: var(--ink-2);
}
.foot p { margin: 0 0 10px; text-wrap: pretty; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.foot a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--accent);
  font-weight: 560;
  text-decoration: none;
}

/* --------------------------------------------------------------- motion -- */

@media (prefers-reduced-motion: no-preference) {
  /* Page-to-page (no script, or the language link): a short cross-fade with
     the thumb sliding between the two documents. */
  @view-transition { navigation: auto; }
  ::view-transition-group(*) {
    animation-duration: .24s;
    animation-timing-function: cubic-bezier(.2, .8, .2, 1);
  }
  .stops-thumb { transition: transform .28s cubic-bezier(.3, .7, .2, 1); }
  .stops-opt { transition: color .2s ease, opacity .15s ease; }
  .cta, .btn { transition: filter .15s ease, transform .15s ease, opacity .15s ease; }
  .o-chev { transition: transform .2s ease; }
  .row summary { transition: opacity .15s ease; }
}

/* ---------------------------------------------------------------- sizes -- */

@media (min-width: 34rem) {
  .hero { padding: 30px 28px 26px; }
  .wrap { padding-bottom: 80px; }
}

/* Very narrow, or very large text: rows stack, price under the place. */
@container page (max-width: 15em) {
  .row summary {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "where where" "price price" "state chev" "when when";
  }
  .o-price { justify-self: start; }
  .hero { padding-left: 16px; padding-right: 16px; }
}
.wrap { container: page / inline-size; }