/* ABROAD — shell stylesheet (DESIGN.md mockup v1 · LUAT 50/52/53/56)
   SCALE: 1rem = one design px of the 1920 mockup (set in index.html from the viewport width; plain 1px below 1024).
   Write every size in rem. Small text: max(12px, Nrem). Hairlines: max(1px, Nrem).
   BORDERS: only the .rule-* classes below draw borders. Route files contain ZERO border/outline declarations.
   PAGE FRAME: .page (= <main>) owns ground, gutters and width. Route bodies never set max-width, side padding or page background. */

:root {
  /* colour tokens — DESIGN.md §3 */
  --paper: #EADBF9;          /* page ground (USER FIX F1) */
  --chrome: #E8DAF0;         /* nav + footer band (chrome/*.html) */
  --panel: #F6F1FC;
  --ink: #050632;
  --ink-nav: #22204E;        /* nav link ink (chrome/nav.html) */
  --ink-brand: #12133E;
  --muted: #5C5883;
  --cyan: #3FA7D6;
  --coral: #F25F5C;
  --link: #0A7BF7;
  --copy: #087EC6;
  --disabled: #B9B3DA;
  --route-grad: linear-gradient(90deg, #3FA7D6, #F25F5C);
  --route-grad-pill: linear-gradient(100deg, #3FA7D6, #F25F5C);

  /* rule tokens — DESIGN.md §4b / BORDER_TABLE.md (width + colour per rule kind) */
  --rule: #D7CDF6;           --rule-w: max(1px, 2.3rem);    /* panel frames */
  --rule-row: #DAD2F4;       --rule-row-w: max(1px, 1.1rem);/* row rules, dividers, strips */
  --rule-nav: #D7C9E3;       --rule-nav-w: max(1px, 1.1rem);/* nav bottom rule */
  --rule-input: #C7BBED;     --rule-input-w: max(1px, 2.3rem);
  --rule-strong: #B9ADE0;    --rule-strong-w: max(1px, 2.3rem); /* ticket inner rule */
  --rule-leaf: #B6B0E4;      --rule-leaf-w: max(1px, 2.3rem);   /* visa-leaf rules */
  --rule-book: #B7ABD2;      --rule-book-top: max(1px, 3.8rem); --rule-book-bottom-c: #A695CA; --rule-book-bottom: max(1px, 5.6rem);
  --rule-footer: #D8D1E2;    --rule-footer-w: max(1px, 1.1rem);
  --rule-thin-w: max(1px, 1.3rem);
  --rule-strip-w: max(1px, 1.4rem);

  /* radii */
  --r-panel: 22rem; --r-card: 18rem; --r-table: 12rem; --r-input: 8rem; --r-tile: 6rem; --r-book: 28rem;

  /* page frame — USER FIX F1: gutters 56 left / 54 right @1920, container 1810 */
  --gutter-l: 56rem; --gutter-r: 54rem;
  --section-gap: 64rem;

  /* motion family — DESIGN.md §10 ("boarding" easing) */
  --ease-board: cubic-bezier(.2, .8, .2, 1);
  --ease-stamp: cubic-bezier(.3, 1.4, .5, 1);
  --t-flip: 220ms; --t-leg: 320ms; --t-route: 600ms;

  /* type */
  --f-hero: 'Roboto', 'Atkinson Hyperlegible', sans-serif;
  --f-title: 'Inter', 'Atkinson Hyperlegible', sans-serif;
  --f-body: 'Atkinson Hyperlegible', sans-serif;
  --f-mono: 'Ubuntu Sans Mono', ui-monospace, monospace;
  --f-word: 'Gabarito', 'Atkinson Hyperlegible', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: calc(100vw / 1920); -webkit-text-size-adjust: 100%; background: var(--paper); overflow-x: hidden; }
@media (max-width: 1023px) { html { font-size: 1px; } }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--f-body); font-size: max(14px, 18rem); line-height: 1.35; color: var(--ink);
  background-color: var(--paper);
  /* faint guilloche lattice on paper, <=2% contrast (DESIGN.md §0/§4) */
  background-image:
    repeating-linear-gradient(115deg, rgba(88, 64, 160, .018) 0 max(1px, 1rem), transparent max(1px, 1rem) 15rem),
    repeating-linear-gradient(65deg, rgba(88, 64, 160, .014) 0 max(1px, 1rem), transparent max(1px, 1rem) 15rem);
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; padding: 0; margin: 0; border: 0; cursor: pointer; }
table { border-collapse: collapse; }
:focus-visible { outline: max(2px, 2rem) solid var(--cyan); outline-offset: max(2px, 2rem); border-radius: 4rem; }
.mono, .tnum { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* shared type roles — DESIGN.md §2 (routes use these, never their own sizes for the same role) */
.t-hero { font-family: var(--f-hero); font-weight: 700; font-size: 66rem; line-height: 1.05; letter-spacing: -.026em; margin: 0; }
.t-mech { font-size: max(14px, 32rem); line-height: 1.2; color: var(--muted); margin: 0; }
.t-route { font-family: var(--f-title); font-weight: 700; font-size: 59rem; line-height: 1; letter-spacing: -.049em; text-transform: uppercase; margin: 0; }
.t-section { font-family: var(--f-title); font-weight: 700; font-size: 44rem; line-height: 1.05; letter-spacing: -.03em; text-transform: uppercase; margin: 0; }
.t-label { font-weight: 700; font-size: max(12px, 22rem); line-height: 1.2; letter-spacing: .087em; text-transform: uppercase; }
.t-figure { font-family: var(--f-mono); font-weight: 500; font-size: max(13px, 25rem); line-height: 1.3; font-variant-numeric: tabular-nums; }
.t-value { font-family: var(--f-mono); font-size: max(12px, 18rem); line-height: 1.4; font-variant-numeric: tabular-nums; }
.t-body { font-size: max(13px, 21rem); line-height: 1.35; }
.t-muted { color: var(--muted); }
.t-meta { font-size: max(12px, 12rem); line-height: 1.3; color: var(--muted); }
.t-link { color: var(--link); text-decoration: none; font-weight: 700; }

/* primary pill — route gradient, white label; disabled = lilac fill */
.pill { display: inline-flex; align-items: center; justify-content: center; height: 52rem; padding: 0 25rem; border-radius: 999px;
  color: #fff; background: var(--route-grad-pill); font-weight: 700; font-size: max(13px, 18rem); text-decoration: none; white-space: nowrap; }
.pill[disabled], .pill[aria-disabled="true"] { background: var(--disabled); cursor: not-allowed; }

/* ───────────── NAV (chrome/nav.html, user fix: no CA, no BUY) ───────────── */
header[data-chrome="nav"] { position: relative; z-index: 20; height: 145rem; padding: 27rem var(--gutter-r) 20rem var(--gutter-l); background: var(--chrome); }
.nav { height: 98rem; display: flex; align-items: center; gap: 29rem; }
.brand { display: flex; align-items: center; gap: 14rem; margin-right: 18rem; color: var(--ink-brand); text-decoration: none; flex: none; }
.brand img { width: 92rem; height: 82rem; object-fit: contain; }
.brand b { font-family: var(--f-word); font-size: 31rem; font-weight: 700; letter-spacing: -.02em; }
.links { height: 100%; display: flex; align-items: center; gap: 30rem; }
.links a { height: 100%; display: flex; align-items: center; position: relative; color: var(--ink-nav); text-decoration: none; font-size: max(12px, 16rem); white-space: nowrap; }
.links a.is-active { font-weight: 700; }
.links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 19rem; height: 3rem; border-radius: 3rem; background: var(--route-grad);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--t-leg) var(--ease-board); }
.links a.is-active::after { transform: scaleX(1); }
.links a:not(.is-active):hover::after { transform: scaleX(.35); opacity: .6; }
.spacer { flex: 1; }
.socials { display: flex; align-items: center; gap: 18rem; font-size: max(12px, 16rem); white-space: nowrap; }
.social { color: var(--ink-nav); text-decoration: none; }
.social[aria-disabled="true"] { opacity: .7; cursor: default; }
.social[href]:hover { color: var(--link); }
.divider { width: max(1px, 1rem); height: 34rem; background: rgba(48, 42, 100, .22); }
.menu { display: none; }
.drawer[hidden] { display: none; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; }
.skip:focus { top: 12px; }

/* ───────────── PAGE FRAME (one container for every route) ───────────── */
.page { display: block; margin: 0 var(--gutter-r) 0 var(--gutter-l); min-height: calc(100vh - 279rem); position: relative; }
.page:focus { outline: none; }
.page > * + * { margin-top: var(--section-gap); }
.page > :last-child { margin-bottom: 48rem; }
.page > :first-child { margin-top: 0; }

/* ───────────── FOOTER (chrome/footer.html, user fix: mark added, no BUY, CA = TBA) ───────────── */
footer[data-chrome="footer"] { height: 134rem; padding: 0 var(--gutter-r) 28rem var(--gutter-l); background: var(--chrome); }
.foot { height: 106rem; border-radius: var(--r-panel); background: rgba(255, 255, 255, .48); display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 28rem; padding: 18rem 32rem; }
.foot-id { display: flex; align-items: center; gap: 20rem; min-width: 0; }
.foot-mark { width: 56rem; height: 62rem; object-fit: contain; flex: none; }
.boundary { font-size: max(12px, 16rem); font-weight: 700; margin-bottom: 7rem; }
.sources { font-size: max(12px, 12rem); color: var(--muted); white-space: nowrap; }
.foot .right { display: flex; align-items: center; gap: 17rem; font-size: max(12px, 15rem); white-space: nowrap; }
.foot .ca { font-family: var(--f-mono); font-size: max(12px, 13rem); }
.foot .copy { color: var(--copy); font-weight: 700; font-size: max(12px, 15rem); }
.foot .copy[disabled] { opacity: .5; cursor: default; }

/* ───────────── RULES — one class per framed component (DESIGN.md §4b) ───────────── */
.rule-nav { border-bottom: var(--rule-nav-w) solid var(--rule-nav); }
.rule-footer { border: var(--rule-footer-w) solid var(--rule-footer); }
/* data panel: gate note, two-leg ticket, origin lines, before/after, cost anatomy, assumptions, not-lit, what-changes,
   reachability, gate record, line states, how-a-crossing, no-stamps, crossing record, read-at-block, by-origin, filter state, no-crossings */
.rule-panel { border: var(--rule-w) solid var(--rule); border-radius: var(--r-panel); }
/* thin panel: ticket-separates, stamp ledger, gate-record panel (1.1–1.7 px) */
.rule-panel-thin { border: var(--rule-row-w) solid var(--rule); border-radius: var(--r-panel); }
/* strip: latest crossings, counter selector bar, check strip, quote trace, fare comparison, no-gates, flap banner */
.rule-strip { border: var(--rule-strip-w) solid var(--rule); border-radius: var(--r-panel); }
/* card inside a panel: tx record, unavailable route, stamp note popover, arrivals expanded row */
.rule-card { border: var(--rule-w) solid var(--rule); border-radius: var(--r-card); }
.rule-card-thin { border: var(--rule-thin-w) solid var(--rule); border-radius: var(--r-card); }
/* boarding-pass stub (counter) */
.rule-ticket { border: var(--rule-strip-w) solid var(--rule); border-radius: var(--r-panel); }
/* empty ticket / dashed state */
.rule-dashed { border: var(--rule-w) dashed var(--rule); border-radius: var(--r-panel); }
/* inner table with its own frame: gate-record table */
.rule-table { border: var(--rule-w) solid var(--rule); border-radius: var(--r-table); }
/* input frame wraps the whole control (padding inside the frame): address input, look-up button, no-stamps input, selects */
.rule-input { border: var(--rule-input-w) solid var(--rule-input); border-radius: var(--r-input); background: var(--panel); }
.rule-input:focus-within, .rule-input:focus-visible { border-color: var(--cyan); }
/* split-flap tile */
.rule-tile { border: max(1px, 2.2rem) solid var(--rule-input); border-radius: var(--r-tile); }
/* pill chip: route chip (fare), origin pills (arrivals) */
.rule-chip { border: max(1px, 1.7rem) solid var(--rule); border-radius: 999px; }
/* row rules — bottom edge only, so stacked rows never double */
.rule-row { border-bottom: var(--rule-row-w) solid var(--rule-row); }
.rule-row:last-child { border-bottom-width: 0; }
.rule-row-keep:last-child { border-bottom-width: var(--rule-row-w); }
/* table header rule: hairline + route-gradient accent under it (gate table) */
.rule-head { border-bottom: var(--rule-row-w) solid var(--rule-row); position: relative; }
.rule-head::after { content: ""; position: absolute; left: 0; bottom: calc(-1 * max(2px, 3rem)); width: 120rem; height: max(2px, 2rem); background: var(--route-grad); border-radius: 2rem; }
/* ticket dividers */
.rule-divider { border-bottom: var(--rule-strong-w) solid var(--rule-strong); }
.rule-divider-v { border-left: max(1px, 2rem) solid var(--rule-row); }
.rule-divider-dotted-v { border-left: max(1px, 2.3rem) dotted var(--rule); }
/* passport */
.rule-book { border-top: var(--rule-book-top) solid var(--rule-book); border-bottom: var(--rule-book-bottom) solid var(--rule-book-bottom-c); border-radius: var(--r-book); }
.rule-leaf { border-bottom: var(--rule-leaf-w) solid var(--rule-leaf); }
/* selected row: route-gradient frame (works with radius) */
.rule-selected { border: var(--rule-w) solid transparent; border-radius: var(--r-table);
  background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--route-grad) border-box; }
/* drawer under a selected row: shares the row's bottom edge, so it draws R B L only */
.rule-drawer { border: var(--rule-w) solid var(--rule); border-top-width: 0; border-radius: 0 0 var(--r-table) var(--r-table); }
/* adjacency helpers: the second of two touching boxes drops the shared edge */
.rule-join-top { border-top-width: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.rule-join-left { border-left-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rule-open-top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rule-none { border: 0; }
/* #/fare (DESIGN.md MAIN DECISION D2 · BORDER_TABLE fare row 34): assumptions table frame + selected preset column (cyan) */
.rule-grid { border: var(--rule-row-w) solid #E5DDF8; border-radius: 9rem; }
.rule-pick { border: max(1px, 1.6rem) solid #43A5FD; border-radius: 7rem; }

/* panel fill used with the rule classes */
.fill-panel { background: var(--panel); }

/* ───────────── MOTION (DESIGN.md §10 — "boarding" character) ───────────── */
/* route change: the old page steps out, the new one arrives from the origin side (left → right, like a crossing) */
/* instant route change (USER_FIXES_R1): the new page paints in the click frame, fully opaque; only a 140 ms slide from the origin side */
main.page { transition: transform 140ms var(--ease-board); }
main.page.is-entering { transform: translate3d(-12rem, 0, 0); transition: none; }
/* reveal-on-scroll: a block "boards" — slides in along the route direction, never fade-up */
[data-reveal] { opacity: 0; transform: translate3d(-28rem, 0, 0); transition: opacity var(--t-leg) linear, transform var(--t-route) var(--ease-board); transition-delay: calc(var(--leg, 0) * 90ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
/* already in view when the route mounts → painted in place, no boarding delay (only blocks scrolled into view board in) */
[data-reveal].is-now, [data-grow].is-now { transition: none !important; }
/* grow-in: bars grow from the origin side */
[data-grow] { transform: scaleX(0); transform-origin: left center; transition: transform var(--t-route) var(--ease-board); }
[data-grow].is-in { transform: scaleX(var(--grow, 1)); }
/* split-flap characters (count-up, live ticks, board rows) */
.flap { display: inline-block; font-variant-numeric: tabular-nums; }
.flap-c { display: inline-block; white-space: pre; transform-origin: 50% 55%; backface-visibility: hidden; }
.flap-c.is-flip { animation: flap-in var(--t-flip) var(--ease-board) both; animation-delay: calc(var(--i, 0) * 18ms); }
@keyframes flap-in { 0% { transform: perspective(200px) rotateX(-88deg); opacity: .15; } 100% { transform: none; opacity: 1; } }
/* visa stamp press */
.stamp-in { animation: stamp-in 420ms var(--ease-stamp) both; }
@keyframes stamp-in { 0% { transform: scale(1.18) rotate(-9deg); opacity: .9; } 100% { transform: scale(1) rotate(var(--stamp-rot, -3deg)); opacity: 1; } }
/* route light: dots of a dotted line switch on one after another, origin → USDC → gate */
.route-dot { opacity: .18; }
.route-dot.is-lit { animation: dot-on 240ms linear both; animation-delay: calc(var(--i, 0) * 14ms); }
@keyframes dot-on { 0% { opacity: .18; } 100% { opacity: 1; } }
/* hub pulse on a new head block */
.hub-pulse { transform-origin: center; transform-box: fill-box; animation: hub-pulse 900ms var(--ease-board) both; }
@keyframes hub-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.35); opacity: 0; } }
/* live tick: a value that just refreshed gets a short gradient underline sweep */
.tick-sweep { position: relative; }
.tick-sweep::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3rem; height: max(1px, 2rem); background: var(--route-grad);
  transform-origin: left center; animation: sweep 700ms var(--ease-board) both; }
@keyframes sweep { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
/* hover in this world: a boarding underline travels in from the origin side */
.hover-route { position: relative; text-decoration: none; }
.hover-route::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2rem; height: max(1px, 2rem); background: var(--route-grad);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--t-leg) var(--ease-board); }
.hover-route:hover::after, .hover-route:focus-visible::after { transform: scaleX(1); }
/* muted looping art video helper */
.art-video { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important;
    transition-duration: .01ms !important; transition-delay: 0ms !important; }
  [data-reveal], main.page.is-entering { opacity: 1; transform: none; }
  [data-grow] { transform: scaleX(var(--grow, 1)); }
  .route-dot { opacity: 1; }
}

/* ───────────── below 1024: mobile layout (1rem = 1px) ───────────── */
@media (max-width: 1023px) {
  :root { --gutter-l: 16px; --gutter-r: 16px; --section-gap: 40px; }
  body { font-size: 15px; }
  header[data-chrome="nav"] { position: sticky; top: 0; height: 64px; padding: 0 16px; }
  .nav { height: 64px; gap: 12px; }
  .brand { margin-right: 0; gap: 10px; }
  .brand img { width: 44px; height: 42px; }
  .brand b { font-size: 22px; }
  .links, .socials { display: none; }
  .menu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; }
  .menu svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
  .drawer { position: absolute; left: 0; right: 0; top: 64px; padding: 8px 16px 20px; background: var(--chrome); display: flex; flex-direction: column;
    box-shadow: 0 18px 30px rgba(48, 42, 100, .08); }
  .drawer > a { display: flex; align-items: center; min-height: 52px; font-size: 17px; color: var(--ink-nav); text-decoration: none; }
  .drawer > a.is-active { font-weight: 700; color: var(--ink); }
  .drawer-socials { display: flex; gap: 24px; padding-top: 16px; font-size: 16px; }
  .page { min-height: 60vh; }
  .page > :last-child { margin-bottom: 32px; }
  footer[data-chrome="footer"] { height: auto; padding: 0 16px 20px; }
  .foot { height: auto; grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .foot-id { align-items: flex-start; gap: 14px; }
  .foot-mark { width: 40px; height: 44px; }
  .sources { white-space: normal; }
  .foot .right { flex-wrap: wrap; gap: 14px 18px; }
  .t-hero { font-size: 34px; }
  .t-route { font-size: 36px; }
  .t-section { font-size: 26px; }
  .t-label { font-size: 13px; }
  .t-figure { font-size: 18px; }
  .t-value { font-size: 14px; }
  .t-body { font-size: 15px; }
  .t-mech { font-size: 17px; }
}