/* Gate Check's screens. Every colour, type size and duration here is a token from
   tokens.css, which the Lean design model generates. test/source.test.js fails on a raw colour. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--color-navy); overflow-x: clip; }
body { font-family: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif; -webkit-tap-highlight-color: transparent; }
h1, h2, p { margin: 0; }
button { font: inherit; cursor: pointer; }
.visually-hidden { position: fixed; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

#app[data-surface="asking"] { --ground: var(--surface-asking); --ink: var(--ink-asking); --focus: var(--focus-asking); }
#app[data-surface="decision"] { --ground: var(--surface-decision); --ink: var(--ink-decision); --focus: var(--focus-decision); }
#app[data-surface="same-call"] { --ground: var(--surface-same-call); --ink: var(--ink-same-call); --focus: var(--focus-same-call); }
#app[data-surface="possible-catch"] { --ground: var(--surface-possible-catch); --ink: var(--ink-possible-catch); --focus: var(--focus-possible-catch); }
#app[data-surface="consequence"] { --ground: var(--surface-consequence); --ink: var(--ink-consequence); --focus: var(--focus-consequence); }
#app[data-surface="report"] { --ground: var(--surface-report); --ink: var(--ink-report); --focus: var(--focus-report); }

#app {
  height: 100dvh; max-width: 460px; margin: 0 auto; position: relative; overflow: hidden auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 18px max(16px, env(safe-area-inset-bottom));
  background: var(--ground); color: var(--ink);
  transition: background-color var(--motion-ground-change), color var(--motion-ground-change);
}
:focus-visible { outline: 3px solid var(--focus, var(--color-navy)); outline-offset: 3px; }

/* Route: how far through the shift */
.route { flex: none; width: 100%; height: auto; display: block; overflow: visible; }
.route .line { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.route .done { fill: currentColor; }
.route .todo { fill: var(--ground); stroke: currentColor; stroke-width: 2; }
.route .plane { fill: currentColor; }
#app[data-surface="consequence"] .route .plane { fill: var(--color-red); }

/* Rookie */

.say { flex: none; display: flex; align-items: center; gap: 12px; }
.bubble { flex: 1; min-width: 0; position: relative; background: var(--color-paper); color: var(--color-navy); border-radius: 18px; padding: 11px 14px; font-size: min(var(--type-body), 4.6vw); line-height: 1.22; font-weight: 700; }
.bubble::after { content: ""; position: absolute; right: -7px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: inherit; transform: rotate(45deg); }
#app[data-surface="consequence"] .bubble { background: var(--color-navy); color: var(--color-white); }

/* Ticket */
.ticket {
  flex: 1 0 auto; position: relative; display: flex; flex-direction: column;
  background: var(--color-paper); color: var(--color-navy); border-radius: 26px;
  box-shadow: 0 7px 0 var(--color-navy); touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.ticket.swipes { cursor: grab; }
.ticket.dragging { cursor: grabbing; }
.ticket:not(.dragging) { transition: transform var(--motion-card-exit); }
.ticket.leaving { transform: translateX(-120%) rotate(-6deg); }
.upper { flex: 1 0 auto; padding: 18px 20px 14px; display: flex; flex-direction: column; gap: 10px; }
.tag { align-self: flex-start; background: var(--color-tint); color: var(--color-airline-blue); border-radius: 11px; padding: 5px 11px; font-size: var(--type-label); font-weight: 750; }
.demo-flag { color: var(--color-mute); font-size: var(--type-label); font-weight: 650; }
.case-text { font-size: min(var(--type-case), 6.6vw); line-height: 1.14; font-weight: 750; letter-spacing: -0.3px; }
.fields { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; }
.field { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.field:last-child { text-align: right; }
.field span { font-size: var(--type-label); font-weight: 600; color: var(--color-mute); }
.field b { font-size: min(44px, 11vw); line-height: 1; font-weight: 800; letter-spacing: -1px; white-space: nowrap; }
.bars { display: flex; flex-direction: column; gap: 4px; }
.bars div { display: flex; gap: 3px; }
.bars i { display: block; height: 14px; border-radius: 4px; }
.bars .paid { background: var(--color-airline-blue); }
.bars .asked { background: var(--color-red); }
.tear { flex: none; position: relative; margin: 0 22px; border-top: 3px dotted var(--color-mute); }
.tear::before, .tear::after { content: ""; position: absolute; top: -14px; width: 26px; height: 26px; border-radius: 50%; background: var(--ground); }
.tear::before { left: -35px; }
.tear::after { right: -35px; }
.stub { flex: none; min-height: 70px; padding: 10px 20px 12px; display: flex; align-items: center; justify-content: center; position: relative; }
.stub p { width: 100%; font-size: var(--type-label); line-height: 1.25; font-weight: 600; color: var(--color-mute); }
.stub p.today { font-size: min(var(--type-body), 4.5vw); color: var(--color-navy); font-weight: 750; line-height: 1.15; }

/* Stamps */
.stamp {
  display: inline-block; padding: 3px 12px 1px; border: 5px solid currentColor; border-radius: 12px;
  font-family: "Saira Stencil One", Impact, sans-serif; font-size: min(44px, 10.5vw); line-height: 1.05; letter-spacing: 1px;
  white-space: nowrap; color: var(--color-red); transform: rotate(-5deg);
}
.stamp.blue { color: var(--color-airline-blue); }
.stamp.small { font-size: min(27px, 6.6vw); border-width: 4px; white-space: normal; text-align: center; }
.stamp-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.stamp.landing { animation: land var(--motion-stamp-landing) ease-in both; }
@keyframes land { from { transform: rotate(-5deg) scale(1.9); } to { transform: rotate(-5deg) scale(1); } }
.ghost { position: absolute; left: 0; right: 0; top: 50%; text-align: center; transform: translateY(-50%); pointer-events: none; opacity: var(--amt, 0); }

/* Answers */
.answers { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sign {
  min-height: min(112px, 14dvh); border: 3px solid transparent; border-radius: 22px; padding: 11px 13px; text-align: left; background: var(--color-white); color: var(--color-navy);
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 4px;
  box-shadow: 0 6px 0 var(--color-navy-raised); font-size: min(var(--type-body), 4.5vw); line-height: 1.12; font-weight: 750;
  transition: transform var(--motion-card-exit);
}
.sign.right { align-items: flex-end; text-align: right; }
.sign svg { flex: none; }
.sign svg path { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
#app[data-surface="consequence"] .sign, #app[data-surface="consequence"] .option { background: var(--color-airline-blue); color: var(--color-white); box-shadow: 0 6px 0 var(--color-navy); }
#app[data-lean="left"] .sign.left, #app[data-lean="right"] .sign.right { background: var(--color-red); color: var(--color-white); border-color: var(--color-white); transform: scale(1.04); }
.options { flex: none; display: flex; flex-direction: column; gap: 8px; }
.option { min-height: 50px; border: 0; border-radius: 16px; padding: 8px 16px; text-align: left; background: var(--color-white); color: var(--color-navy); box-shadow: 0 5px 0 var(--color-navy-raised); font-size: min(var(--type-body), 4.5vw); line-height: 1.14; font-weight: 750; }
.escapes { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quiet { min-height: var(--touch-target); border: 2px solid currentColor; border-radius: 22px; background: transparent; color: inherit; font-size: var(--type-label); font-weight: 700; }
.reach { flex: none; display: flex; flex-direction: column; gap: 5px; font-size: var(--type-label); font-weight: 700; }
.dots { display: flex; flex-wrap: wrap; gap: 3px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-red); }

/* Result */
.head-row { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.big { font-size: min(var(--type-display), 14.6vw); line-height: 0.94; font-weight: 800; letter-spacing: -1.4px; }
.big.long { font-size: min(var(--type-heading), 11.4vw); line-height: 1; letter-spacing: -1px; }
#app[data-surface="consequence"] .big { color: var(--color-red); }
.ticket.result { flex: none; }
.ticket.result .upper { flex: none; }
.ticket.result .stub { min-height: 80px; }
.ticket.result .upper { padding: 14px 18px 10px; gap: 7px; }
.ticket.result .case-text, .case-text.small { font-size: min(var(--type-body), 4.5vw); line-height: 1.22; font-weight: 650; letter-spacing: 0; }
.body { flex: 1 0 auto; display: flex; flex-direction: column; gap: 8px; font-size: min(var(--type-body), 4.4vw); line-height: 1.24; font-weight: 600; }
.body .lead { font-size: min(23px, 5.8vw); line-height: 1.1; font-weight: 800; }
.chip-row { display: flex; align-items: center; gap: 9px; font-size: var(--type-label); font-weight: 650; }
.chip { background: var(--color-white); color: var(--color-navy); border-radius: 10px; padding: 4px 11px; font-weight: 750; }
.compare { display: flex; flex-direction: column; gap: 8px; }
.compare div { background: var(--color-white); color: var(--color-navy); border-radius: 15px; padding: 10px 13px; display: flex; flex-direction: column; gap: 2px; }
.compare span { font-size: var(--type-label); font-weight: 650; }
.compare b { font-size: min(18px, 4.6vw); line-height: 1.16; font-weight: 750; }
.tagged { background: var(--color-navy); color: var(--color-white); border-radius: 16px; padding: 11px 14px; font-weight: 650; }
a.main { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.main {
  flex: none; min-height: 60px; width: 100%; border: 3px solid var(--color-white); border-radius: 22px; background: var(--color-red); color: var(--color-white);
  box-shadow: 0 6px 0 var(--color-red-dark); font-size: 21px; font-weight: 800;
}
#app[data-surface="possible-catch"] .main, #app[data-surface="same-call"] .main { background: var(--color-navy); box-shadow: none; }
#app[data-surface="consequence"] .main { background: var(--color-navy); border-color: var(--color-navy); box-shadow: none; }
.link { flex: none; min-height: var(--touch-target); min-width: var(--touch-target); border: 0; background: transparent; color: inherit; font-size: var(--type-label); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Home */
.top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.week { display: flex; flex-direction: column; gap: 6px; font-size: min(16px, 4.2vw); font-weight: 750; }
.pips { display: flex; gap: 4px; }
.pips i { display: block; width: 26px; height: 9px; border-radius: 5px; border: 2px solid currentColor; }
.pips i.on { background: currentColor; }
.title-chip { background: var(--color-navy); color: var(--color-white); border-radius: 15px; padding: 8px 13px; font-size: var(--type-label); font-weight: 750; white-space: nowrap; }
#app[data-surface="report"] .title-chip { background: var(--color-white); color: var(--color-navy); }
.sub { flex: none; font-size: min(18px, 4.6vw); font-weight: 600; }
.map { flex: 1 1 auto; min-height: 170px; position: relative; }
.map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map > svg path { fill: none; stroke: currentColor; stroke-width: 4; stroke-dasharray: 1 11; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.stop { position: absolute; display: flex; align-items: center; gap: 12px; transform: translateY(-50%); }
.stop.even { left: 0; }
.stop.odd { right: 0; flex-direction: row-reverse; text-align: right; }
.stop .node { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--color-white); display: grid; place-items: center; }
.stop .node::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--color-airline-blue); }
.stop.here .node { width: 54px; height: 54px; background: var(--color-red); border: 3px solid var(--color-white); }
.stop.here .node::after { display: none; }
.stop.here .node svg { display: block; fill: var(--color-white); }
.stop b { display: block; font-size: min(var(--type-body), 4.2vw); line-height: 1.1; font-weight: 750; }
.stop.here b { font-size: min(24px, 6vw); font-weight: 800; }
.stop span { font-size: var(--type-label); font-weight: 550; }
.fine { flex: none; font-size: var(--type-label); line-height: 1.25; font-weight: 500; }
.row { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Home, from inside a shift */
.shift-top { flex: none; display: flex; align-items: center; gap: 6px; margin-left: -8px; }
.shift-top .route { flex: 1 1 auto; width: auto; min-width: 0; }
.home-button { flex: none; width: var(--touch-target); height: var(--touch-target); display: grid; place-items: center; padding: 0; border: 0; border-radius: 14px; background: transparent; color: inherit; }
.home-button svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.secondary { flex: none; width: 100%; min-height: 50px; border: 2px solid currentColor; border-radius: 20px; background: transparent; color: inherit; font-size: min(19px, 4.8vw); font-weight: 750; }

/* Tour */
.tour-gap { flex: 1 1 auto; }
.tour-items { flex: none; display: flex; flex-direction: column; gap: 14px; }
.tour-item { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; font-size: min(var(--type-body), 4.4vw); line-height: 1.24; font-weight: 600; }
.tour-item .quiet { min-height: 0; display: inline-block; padding: 6px 14px; font-weight: 700; }
.tour-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tour-path { flex: none; margin: 0; padding: 0 0 0 24px; display: flex; flex-direction: column; gap: 12px; font-size: min(var(--type-body), 4.4vw); line-height: 1.24; font-weight: 600; }
.tour-path b { display: block; font-size: min(19px, 4.8vw); font-weight: 800; }

/* Report */
.tiles { flex: none; display: flex; gap: 8px; flex-wrap: wrap; }
.tile { width: min(58px, 14vw); aspect-ratio: 1; border-radius: 15px; background: var(--color-white); color: var(--color-navy); display: grid; place-items: center; font-size: 24px; font-weight: 800; }
.tile.catch { background: var(--color-red); color: var(--color-white); }
.stats { flex: none; display: flex; flex-direction: column; gap: 7px; font-size: min(19px, 4.8vw); line-height: 1.2; font-weight: 650; }
.stats b { font-weight: 800; }
.panel { flex: none; background: var(--color-paper); color: var(--color-navy); border-radius: 20px; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.panel span { font-size: var(--type-label); font-weight: 650; color: var(--color-mute); }
.panel b { font-size: min(19px, 4.8vw); line-height: 1.16; font-weight: 750; }

/* Sheets */
dialog { width: min(100%, 460px); max-width: 100%; max-height: 86dvh; margin: auto auto 0; border: 0; border-radius: 26px 26px 0 0; padding: 20px 18px max(18px, env(safe-area-inset-bottom)); background: var(--color-paper); color: var(--color-navy); --focus: var(--color-navy); }
dialog::backdrop { background: var(--color-navy); opacity: 0.6; }
dialog h2 { font-size: 24px; line-height: 1.1; margin-bottom: 10px; font-weight: 800; }
dialog p, dialog li { font-size: var(--type-label); line-height: 1.35; font-weight: 550; }
dialog p + p { margin-top: 8px; }
dialog ul { margin: 8px 0; padding-left: 18px; }
dialog label { display: block; font-size: var(--type-label); font-weight: 700; margin-bottom: 6px; }
dialog input { width: 100%; min-height: var(--touch-target); border: 2px solid var(--color-navy); border-radius: 12px; padding: 8px 12px; font: inherit; font-size: 16px; background: var(--color-white); color: var(--color-navy); }
.sheet-actions { display: flex; gap: 10px; margin-top: 14px; }
.sheet-actions button { flex: 1; min-height: var(--touch-target); border-radius: 16px; font-weight: 750; border: 2px solid var(--color-navy); background: var(--color-white); color: var(--color-navy); padding: 8px 12px; }
.sheet-actions button.go { background: var(--color-navy); color: var(--color-white); }
code { font-size: var(--type-label); overflow-wrap: anywhere; }
a { color: inherit; }
dialog a { display: inline-flex; align-items: center; min-height: var(--touch-target); }

/* Short phones: keep the case and the answers, and drop what repeats */
@media (max-height: 640px) {
  #app { gap: 9px; }
  .map { flex: 0 0 auto; min-height: 76px; }
  .map > svg, .stop:not(.here) { display: none; }
  .stop.here { top: 50% !important; }
  .say .rookie { width: 60px; height: 75px; }
  #app[data-tour] .head-row .rookie { width: 60px; height: 75px; }
  #app[data-tour] .panel { padding: 9px 13px; }
  .tour-path { gap: 7px; }
  .tour-items { gap: 9px; }
  #app[data-tour="result"] .compare div { padding: 6px 12px; }
  .upper { padding: 12px 16px 10px; gap: 7px; }
  .ticket:not(.result) .tag { display: none; }
  .stub { min-height: 46px; padding: 6px 16px 8px; }
  .stub [data-hint] { display: none; }
  .ticket.result .upper, .ticket.result .tear { display: none; }
  .ticket.result .stub { min-height: 72px; }
}