/* ============================================================
   Dubai Transfers — the toolbox stylesheet.

   Every tool is the same object: a titled card with a lede, a body of
   controls, and an answer. That sameness is the point — ten different
   panels that each invent their own furniture is a control room, and
   this is meant to feel like the back of the car.

   All colour comes from the tokens in main.css, so both themes and the
   system default follow without a second palette living here.
   ============================================================ */

/* ---------- the shapes a tool can take ----------
   Seventeen identical bordered cards read as a filing cabinet, and the
   border was doing no work on most of them. A tool gets a box only when
   the box groups something — a dense control desk. The rest are set on
   the open page and separated by a rule and by air, like the sections
   they sit inside. Four forms, chosen per tool in js/tools.js. */

.tool { --tool-gap: 26px; }

/* --- open: the default. A rule, a title, air. No box at all. --- */
.tool-open {
  border-top: 1px solid var(--line);
  padding-top: clamp(30px, 4vw, 46px);
  margin-top: clamp(34px, 5vw, 60px);
}
.tool-open > .tool-head { max-width: 30ch; }
.tool-open > .tool-head .tool-title { font-size: clamp(27px, 3.4vw, 40px); }
@media (min-width: 900px) {
  .tool-open > .tool-head { max-width: 46ch; }
}

/* --- panel: a real surface, for a tool that is a control desk --- */
.tool-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
  padding: clamp(20px, 3vw, 34px);
  margin-top: clamp(26px, 3.5vw, 40px);
  transition: border-color .3s;
}
.tool-panel:hover { border-color: var(--line-2); }

/* --- quiet: a small aside. A rule down the side, not a box round it. --- */
.tool-quiet {
  border-left: 2px solid var(--line-2);
  padding: 4px 0 4px clamp(16px, 2.4vw, 26px);
  margin-top: clamp(26px, 3.5vw, 40px);
  max-width: 74ch;
}
.tool-quiet > .tool-head .tool-title {
  font-family: var(--font-b); font-weight: 700; letter-spacing: .01em;
  font-size: 19px;
}
.tool-quiet > .tool-head .tool-lede { font-size: 15.5px; margin-top: 7px; }
.tool-quiet > .tool-body { margin-top: 18px; }

/* --- wide: title on the left, the tool on the right. A change of pace. --- */
.tool-wide {
  border-top: 1px solid var(--line);
  padding-top: clamp(30px, 4vw, 46px);
  margin-top: clamp(34px, 5vw, 60px);
}
@media (min-width: 1000px) {
  .tool-wide {
    display: grid; grid-template-columns: minmax(230px, 0.72fr) 1.4fr;
    column-gap: clamp(34px, 5vw, 72px); align-items: start;
  }
  .tool-wide > .tool-head { position: sticky; top: 104px; }
  .tool-wide > .tool-body { margin-top: 0; }
}
.tool-wide > .tool-head .tool-title { font-size: clamp(26px, 3vw, 36px); }

/* two tools sharing a row keep their own top spacing out of it */
.tool-pair > .tool { margin-top: 0; }
.tool-pair > .tool-open, .tool-pair > .tool-wide { border-top: 0; padding-top: 0; }

.tool-head { max-width: 62ch; }
.tool-title {
  font-family: var(--font-d); font-weight: 600; letter-spacing: -.014em;
  font-size: clamp(23px, 2.4vw, 29px); margin: 0; line-height: 1.14;
  text-wrap: balance;
}
.tool-lede { color: var(--muted-2); font-size: 17px; line-height: 1.72; margin: 12px 0 0; }
.tool-body { margin-top: var(--tool-gap); }
.tool-sub {
  margin: 26px 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.tool-sub:first-child { margin-top: 0; }

.tool-pair { display: grid; gap: 22px; margin-top: 34px; }
@media (min-width: 900px) { .tool-pair { grid-template-columns: 1.35fr 1fr; align-items: start; } }

.tool-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.tool-field { display: flex; flex-direction: column; gap: 8px; flex: 1 1 220px; min-width: 0; }
.tool-field-sm { flex: 0 1 200px; }
.tool-field > span {
  font-size: 13px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.tool-field .inp, .tool-field select.inp { width: 100%; }
select.inp {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.tool-out { margin: 20px 0 0; font-size: 16.5px; line-height: 1.7; color: var(--muted-2); }
.tool-out:empty { margin: 0; }
.tool-answer { margin: 0 0 4px; font-size: 18px; color: var(--paper); }
.tool-answer.big { font-family: var(--font-d); font-size: clamp(22px, 2.6vw, 30px); margin: 22px 0 6px; }
.tool-answer b { color: var(--amber); }
.tool-hint { margin: 10px 0 0; font-size: 14.5px; line-height: 1.68; color: var(--muted); }
.tool-out.hit { border-left: 2px solid var(--amber); padding-left: 16px; }
.tool-out .btn { margin-top: 14px; }
kbd {
  font-family: var(--font-b); font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px;
  padding: 1px 6px; color: var(--muted-2);
}

/* ---------- a two-state switch ---------- */
.seg {
  display: inline-flex; border: 1px solid var(--line-2); border-radius: 2px;
  overflow: hidden; margin-bottom: 22px; max-width: 100%; flex-wrap: wrap;
}
.seg-btn {
  min-height: 46px; padding: 0 20px; background: transparent; border: 0;
  color: var(--muted-2); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .2s, color .2s;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--line-2); }
.seg-btn:hover { color: var(--amber); }
.seg-btn.on { background: var(--amber); color: var(--on-accent); }

/* ---------- the timing ladder ---------- */
.timeline { list-style: none; margin: 26px 0 0; padding: 0; }
.timeline li {
  display: grid; grid-template-columns: 108px 1fr; gap: 18px;
  padding: 0 0 22px 0; position: relative;
}
.timeline li::before {
  content: ""; position: absolute; left: 124px; top: 12px; bottom: -4px; width: 1px;
  background: var(--line-2);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { display: none; }
.tl-time {
  font-size: 15px; font-weight: 700; color: var(--amber); text-align: right;
  padding-top: 1px; line-height: 1.4;
}
.tl-body { position: relative; padding-left: 20px; }
.tl-body::before {
  content: ""; position: absolute; left: -6px; top: 7px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 4px var(--ink-2);
}
.tl-body b { display: block; font-size: 16.5px; color: var(--paper); }
.tl-body span { display: block; margin-top: 4px; font-size: 14.5px; color: var(--muted); line-height: 1.6; }
@media (max-width: 620px) {
  .timeline li { grid-template-columns: 1fr; gap: 4px; }
  .timeline li::before { left: 4px; top: 26px; }
  .tl-time { text-align: left; }
  .tl-body { padding-left: 20px; }
  .tl-body::before { left: 0; }
}

/* ---------- will it fit ---------- */
.fit-grid { display: grid; gap: 30px; }
@media (min-width: 960px) { .fit-grid { grid-template-columns: 1fr 1.05fr; } }
.count-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.count-row:last-child { border-bottom: 0; }
.count-lbl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.count-lbl b { font-size: 16px; font-weight: 600; }
.count-lbl small { font-size: 13.5px; color: var(--muted); }
.count-step { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.step-b {
  width: 44px; height: 44px; border: 1px solid var(--line-2); background: transparent;
  color: var(--paper); font-size: 19px; line-height: 1; cursor: pointer; border-radius: 2px;
  transition: border-color .2s, color .2s;
}
.step-b:hover { border-color: var(--amber); color: var(--amber); }
.count-step > b { min-width: 34px; text-align: center; font-size: 17px; }

.fit-cars { display: grid; gap: 12px; }
@media (min-width: 560px) { .fit-cars { grid-template-columns: 1fr 1fr; } }
.fit-car {
  border: 1px solid var(--line); border-radius: 2px; padding: 16px;
  background: var(--ink); transition: border-color .25s, opacity .25s;
}
.fit-car.ok { border-color: rgba(var(--accent-rgb), .8); }
.fit-car.no { border-style: dashed; }
.fit-car-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fit-car-h b { font-size: 17.5px; }
.fit-fare { font-size: 16px; font-weight: 700; color: var(--amber); }
.fit-bars {
  display: grid; grid-template-columns: auto 1fr auto; gap: 7px 10px;
  align-items: center; margin: 14px 0 12px;
}
.fit-bar-lbl { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fit-bar { display: block; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.fit-bar i { display: block; height: 100%; background: var(--amber); transition: width .4s cubic-bezier(.2,.8,.2,1); }
.fit-bar i.over { background: var(--red); }
.fit-bar-n { font-size: 13px; color: var(--muted); }
.fit-why { margin: 0 0 12px; font-size: 14.5px; color: var(--muted-2); }
.fit-car .btn { width: 100%; }

/* ---------- car against car ---------- */
.vs2 { margin-top: 26px; }
.vs2-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin-bottom: 22px; }
.vs2-card { text-align: center; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.vs2-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 2px; margin-bottom: 6px; }
.vs2-card b { font-size: 17.5px; }
.vs2-card span { font-size: 21px; font-weight: 700; color: var(--amber); font-family: var(--font-d); }
.vs2-card small { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.vs2-mid { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-align: center; }
/* Below 620px the three-column row cannot hold two spec values plus a
   label, so it becomes label-over-pair and each side keeps its own line. */
.vs2-row {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: 11px 8px; border-top: 1px solid var(--line); align-items: baseline;
}
.vs2-a, .vs2-b, .vs2-k { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 620px) {
  .vs2-row { grid-template-columns: 1fr minmax(110px, .9fr) 1fr; gap: 12px; }
}
.vs2-row.head { border-top: 0; font-weight: 700; }
.vs2-row.diff { background: rgba(var(--accent-rgb), .07); }
.vs2-a { text-align: left; font-size: 15.5px; }
@media (min-width: 620px) { .vs2-a { text-align: right; } }
.vs2-b { text-align: left; font-size: 15.5px; }
.vs2-k {
  text-align: left; font-size: 12.5px; letter-spacing: .1em; order: -1;
  text-transform: uppercase; color: var(--muted);
}
@media (min-width: 620px) { .vs2-k { text-align: center; order: 0; } }
.vs2-row.diff .vs2-a, .vs2-row.diff .vs2-b { color: var(--paper); font-weight: 600; }

/* ---------- splitting the fare ---------- */
.split-cars { display: grid; gap: 12px; margin-top: 24px; }
@media (min-width: 560px) { .split-cars { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .split-cars { grid-template-columns: repeat(4, 1fr); } }
.split-car {
  border: 1px solid var(--line); border-radius: 2px; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 4px; background: var(--ink);
}
.split-car.over { border-style: dashed; border-color: var(--line-2); }
.split-car b { font-size: 16px; }
.split-per { font-family: var(--font-d); font-size: 27px; font-weight: 600; color: var(--amber); line-height: 1.1; }
.split-cap { font-size: 13.5px; color: var(--muted); }
.split-tot { font-size: 13px; margin-top: 4px; }

/* ---------- the route library ---------- */
.mx-count { margin: 18px 0 10px; font-size: 13.5px; }
/* The header can only stick if this box is the scrollport in the Y axis
   too, which means giving it a height. Sixty rows in a 60vh window. */
.mx-scroll {
  overflow: auto; max-height: min(60vh, 560px); overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: 2px; -webkit-overflow-scrolling: touch;
}
.mx-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.mx-table th, .mx-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.mx-table thead th { background: var(--ink-3); position: sticky; top: 0; z-index: 1; }
.mx-table tbody th { background: transparent; font-weight: 400; text-align: left; }
.mx-table .num, .mx-table th.num { text-align: right; }
.mx-table tbody tr { cursor: pointer; transition: background .16s; }
.mx-table tbody tr:hover, .mx-table tbody tr:has(.mx-go:focus-visible) { background: rgba(var(--accent-rgb), .09); }
.mx-table tbody tr:last-child td { border-bottom: 0; }
.mx-table td b { color: var(--amber); }
.mx-sort {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--muted-2);
  cursor: pointer; letter-spacing: .06em; text-transform: uppercase; font-size: 12.5px;
}
.mx-sort:hover { color: var(--amber); }
.mx-sort[data-on]::after { content: " ▲"; font-size: 9px; color: var(--amber); }
.mx-sort[data-on="down"]::after { content: " ▼"; }

/* ---------- the gates ---------- */
.gate-grid { display: grid; gap: 10px; }
@media (min-width: 640px) { .gate-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .gate-grid { grid-template-columns: repeat(3, 1fr); } }
.gate {
  border: 1px solid var(--line); border-radius: 2px; padding: 14px 16px;
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "dot name" "dot sub" "dot state";
  column-gap: 12px; row-gap: 3px; background: var(--ink); transition: border-color .25s, background .25s;
}
.gate-dot {
  grid-area: dot; align-self: start; margin-top: 6px; width: 10px; height: 10px;
  border-radius: 50%; border: 1.5px solid var(--line-2); background: transparent;
}
.gate b { grid-area: name; font-size: 16px; }
.gate-sub { grid-area: sub; font-size: 13px; color: var(--muted); }
.gate-state { grid-area: state; font-size: 13.5px; color: var(--muted-2); margin-top: 3px; }
.gate.on { border-color: var(--amber); background: rgba(var(--accent-rgb), .07); }
.gate.on .gate-dot { background: var(--amber); border-color: var(--amber); }
.gate.on .gate-state { color: var(--amber); font-weight: 600; }
.gate.on.free .gate-dot { background: transparent; }
.gate.on.free .gate-state { color: var(--muted-2); font-weight: 400; }

/* ---------- currency ---------- */
.fx-out { flex: 1 1 240px; margin: 0; font-size: 17px; line-height: 1.5; }
.fx-out b { font-size: 21px; color: var(--paper); }
.fx-out b:last-of-type { color: var(--amber); }
.fx-eq { color: var(--muted); font-size: 14.5px; padding: 0 4px; }
.fx-peg {
  display: inline-block; margin-left: 8px; font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2);
  border-radius: 2px; padding: 2px 7px; vertical-align: 3px;
}

/* ---------- take it with you ---------- */
.share-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- the journey ---------- */
.jr { display: grid; gap: 26px; }
@media (min-width: 900px) { .jr { grid-template-columns: minmax(220px, .8fr) 1fr; } }
.jr-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.jr-step {
  width: 100%; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px;
  min-height: 48px; padding: 8px 12px; background: transparent; border: 0; border-left: 2px solid var(--line);
  color: var(--muted-2); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .25s, color .25s, background .25s;
}
.jr-step:hover { color: var(--paper); background: rgba(var(--accent-rgb), .05); }
.jr-step.on { border-left-color: var(--amber); color: var(--paper); background: rgba(var(--accent-rgb), .08); }
.jr-n { font-size: 13px; color: var(--muted); }
.jr-step.on .jr-n { color: var(--amber); }
.jr-t { font-size: 16px; font-weight: 600; }
.jr-panel { border: 1px solid var(--line); border-radius: 2px; padding: clamp(20px, 3vw, 30px); background: var(--ink); }
.jr-h { margin: 0; font-family: var(--font-d); font-size: clamp(21px, 2.4vw, 27px); font-weight: 600; }
.jr-d { margin: 12px 0 0; font-size: 17px; line-height: 1.75; color: var(--muted-2); }
.jr-bar { margin-top: 22px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.jr-bar i { display: block; height: 100%; background: var(--amber); transition: width .45s cubic-bezier(.2,.8,.2,1); }

/* ---------- the toolbox directory ---------- */
.tbx { display: grid; gap: 12px; }
@media (min-width: 700px) { .tbx { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .tbx { grid-template-columns: repeat(3, 1fr); } }
.tbx-card {
  border: 1px solid var(--line); border-radius: 2px; padding: 20px;
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "n name go" "n blurb go";
  column-gap: 14px; row-gap: 6px; background: var(--ink); align-items: start;
  transition: border-color .25s, transform .25s, background .25s;
}
.tbx-card:hover { border-color: var(--amber); transform: translateY(-2px); }
.tbx-n { grid-area: n; font-size: 12.5px; color: var(--muted); padding-top: 3px; }
.tbx-name { grid-area: name; font-size: 17px; font-weight: 600; color: var(--paper); }
.tbx-blurb { grid-area: blurb; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.tbx-go { grid-area: go; color: var(--amber); font-size: 17px; transition: transform .25s; }
.tbx-card:hover .tbx-go { transform: translateX(4px); }

/* ---------- the command bar ---------- */
.pal {
  /* --bg-rgb, not --fg-rgb: the foreground channel is a LIGHT colour in
     dark mode, so this scrim brightened the page instead of dimming it. */
  position: fixed; inset: 0; z-index: 200; background: rgba(var(--bg-rgb), .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(60px, 12vh, 140px) 18px 18px;
}
.pal[hidden] { display: none; }
.pal-in {
  width: min(640px, 100%); background: var(--ink-2); border: 1px solid var(--line-2);
  border-radius: 4px; box-shadow: var(--shadow); overflow: hidden;
  display: flex; flex-direction: column; max-height: min(560px, 76vh);
}
.pal-top { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.pal-top svg { color: var(--muted); flex: none; }
.pal-input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  font: inherit; font-size: 18px; color: var(--paper);
}
.pal-input::placeholder { color: var(--muted); }
.pal-esc { flex: none; }
.pal-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }
.pal-item {
  display: grid; grid-template-columns: 96px 1fr; grid-template-areas: "kind label" "kind sub";
  column-gap: 14px; row-gap: 2px; padding: 10px 12px; border-radius: 2px; cursor: pointer;
}
.pal-item.on { background: rgba(var(--accent-rgb), .12); }
.pal-kind {
  grid-area: kind; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding-top: 3px;
}
.pal-label { grid-area: label; font-size: 16px; font-weight: 600; }
.pal-item.on .pal-label { color: var(--amber); }
.pal-sub { grid-area: sub; font-size: 13.5px; color: var(--muted); }
.pal-empty { padding: 22px 14px; color: var(--muted); font-size: 15px; }
.pal-foot {
  margin: 0; padding: 12px 18px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
}

/* ---------- the things nobody should have to fight ---------- */
@media (prefers-reduced-motion: reduce) {
  .tool, .tbx-card, .fit-bar i, .jr-bar i, .tbx-go, .logo-mark { transition: none !important; }
}
.tool :where(button, a, input, select):focus-visible {
  outline: 2px solid var(--amber); outline-offset: 2px;
}
.pal :where(input, li):focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

/* A quote is a document as often as it is a screen. Printing used to
   produce mostly blank paper: .reveal.armed sits at opacity 0 until an
   IntersectionObserver fires, and print re-lays-out without re-running it,
   so every section the reader had not scrolled past printed white. Dark
   mode printed white text on white paper. */
@media print {
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    --bg-rgb: 255,255,255; --fg-rgb: 0,0,0; --accent-rgb: 0,0,0;
    --ink-2: #fff; --ink-3: #fff; --muted: #444; --muted-2: #000;
    --line: #bbb; --line-2: #888; --shadow: none; --on-accent: #000;
    color-scheme: light;
  }
  body { background: #fff; color: #000; font-size: 11pt; padding-bottom: 0; }

  /* the reveal system never fires for print */
  .reveal, .reveal.armed { opacity: 1 !important; transform: none !important; }

  /* chrome, decoration and everything that is not this journey */
  .tool, .pal, .scroll-rail, .to-top, .mega, .sticky-quote,
  header.nav, .drawer, .drawer-veil, .lb, .hero, .band, .gal, .fleet,
  .pick-grid, .map-card, .curve-wrap, .privacy-note, .dclock,
  #services, #planner, #pick, #curve, #compare, #how,
  #route-library, #coverage, #faq, #toolbox, #book,
  .engine-form, .pay-up, .bar, .bar-legend, #addBtn, #copyBtn, #bookWa {
    display: none !important;
  }

  /* what a printed quote actually is */
  #quote, .engine, .engine-out { display: block !important;
    border: 0; padding: 0; background: #fff; box-shadow: none; }
  .price { font-size: 34pt; }
  .breakdown, .bd-row, .bd-total, #routeLine, #srcBadge, .gates { display: block; }
  .bd-row { display: flex !important; }
  .gate-pill { border: 1px solid #888 !important; }
  .rates { mask-image: none !important; -webkit-mask-image: none !important; overflow: visible !important; }
  .rate-table { min-width: 0 !important; }
  #quote { page-break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
}

/* ---------- three questions ---------- */
.ask + .ask { margin-top: 26px; }
.ask-q { margin: 0 0 12px; font-size: 17.5px; font-weight: 600; display: flex; align-items: baseline; gap: 12px; }
.ask-n {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2);
  display: inline-grid; place-items: center; font-size: 13px; color: var(--muted);
}
.ask-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.ask-out { margin-top: 28px; }
.ask-out.on { border-top: 1px solid var(--line); padding-top: 26px; }
.ask-car { display: grid; gap: 20px; align-items: center; }
@media (min-width: 720px) { .ask-car { grid-template-columns: minmax(0, .8fr) 1fr; } }
.ask-car img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 2px; }
.ask-lbl { margin: 0; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.ask-car-b h4 { margin: 6px 0 0; font-family: var(--font-d); font-size: clamp(23px, 2.6vw, 30px); font-weight: 600; }
.ask-car-b p { margin: 10px 0 0; color: var(--muted-2); font-size: 16.5px; line-height: 1.7; }
.ask-fare { font-size: 16px; }
.ask-fare b { font-family: var(--font-d); font-size: 27px; color: var(--amber); }
.ask-fare span { color: var(--muted); font-size: 14.5px; }
.ask-car-b .btn { margin-top: 18px; }

/* ---------- twelve times a year ---------- */
.yr-rows { display: grid; gap: 14px; margin-top: 26px; }
.yr-row {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name sum" "each each" "bar bar";
  gap: 5px 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.yr-row:last-child { border-bottom: 0; }
.yr-name { grid-area: name; font-size: 16px; font-weight: 600; }
.yr-sum { grid-area: sum; font-size: 19px; font-weight: 700; }
.yr-row.us .yr-name, .yr-row.us .yr-sum { color: var(--amber); }
.yr-each { grid-area: each; font-size: 13.5px; }
.yr-bar { grid-area: bar; display: block; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.yr-bar i { display: block; height: 100%; background: var(--muted); transition: width .45s cubic-bezier(.2,.8,.2,1); }
.yr-row.us .yr-bar i { background: var(--amber); }

/* ---------- the message you send ---------- */
.recap {
  margin: 0; padding: 20px 22px; background: var(--ink); border: 1px solid var(--line);
  border-radius: 2px; font-family: var(--font-b); font-size: 15.5px; line-height: 1.75;
  color: var(--muted-2); white-space: pre-wrap; word-break: break-word; overflow-x: auto;
}
.recap:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* ---------- the clock in the hero ---------- */
.dclock {
  display: inline-flex; align-items: center; gap: 10px; margin: 30px 0 0;
  font-size: 14px; color: var(--muted-2);
}
.dclock-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5); animation: dpulse 2.6s infinite;
}
@keyframes dpulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .45); }
  70%  { box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) { .dclock-dot { animation: none; } }
.dclock-t { font-size: 16.5px; font-weight: 700; color: var(--paper); letter-spacing: .02em; }
.dclock-l { color: var(--muted); }

/* ---------- what a delay costs ---------- */
.wait-bar {
  display: flex; height: 10px; border-radius: 5px; overflow: hidden;
  background: var(--line); margin: 22px 0 4px;
}
.wait-free { background: var(--amber); transition: width .3s; }
.wait-paid { background: var(--red); transition: width .3s; }

/* ---------- where a budget reaches ---------- */
.budget { display: grid; gap: 8px; margin-top: 8px; }
@media (min-width: 640px) { .budget { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .budget { grid-template-columns: repeat(3, 1fr); } }
.bg-item {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name fare" "area km";
  gap: 2px 12px; text-align: left; padding: 13px 15px; min-height: 44px;
  border: 1px dashed var(--muted); border-radius: 2px; background: transparent;
  color: var(--muted-2); font: inherit; cursor: pointer;
  transition: border-color .25s, background .25s;
}
/* Out of budget is said with a dashed edge, not with opacity — these are
   live buttons, so dimming them fails contrast with no exemption. */
.bg-item.in { border-style: solid; border-color: rgba(var(--accent-rgb), .8); background: rgba(var(--accent-rgb), .07); }
.bg-item:hover { border-color: var(--amber); }
.bg-name { grid-area: name; font-size: 15.5px; font-weight: 600; color: var(--paper); }
.bg-area { grid-area: area; font-size: 13px; }
.bg-km   { grid-area: km;   font-size: 13px; text-align: right; }
.bg-fare { grid-area: fare; font-size: 15.5px; font-weight: 700; text-align: right; }
.bg-item.in .bg-fare { color: var(--amber); }

/* ---------- two cars ---------- */
.convoy { display: grid; gap: 10px; margin-top: 22px; }
.cv-row {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "cars sum" "cap sum" "tag tag";
  grid-template-rows: auto auto 0; gap: 3px 14px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--ink);
}
.cv-row.best { border-color: var(--amber); background: rgba(var(--accent-rgb), .06); }
.cv-cars { grid-area: cars; font-size: 16.5px; font-weight: 600; }
.cv-cap  { grid-area: cap;  font-size: 13.5px; color: var(--muted); }
.cv-sum  { grid-area: sum;  font-size: 21px; font-weight: 700; align-self: center; }
.cv-row.best .cv-sum { color: var(--amber); }
.cv-row.best { grid-template-rows: auto auto auto; }
.cv-tag {
  grid-area: tag; margin-top: 8px; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber);
}

/* The band photographs are transformed on scroll; promoting them keeps the
   drift off the main thread and stops the edges shimmering. */
.band > img { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .band > img { will-change: auto; transform: none !important; } }

/* A disclosure, placed where the thing it discloses happens. */
.privacy-note {
  margin: 26px 0 0; font-size: 14px; line-height: 1.65; max-width: 76ch;
  padding-left: 14px; border-left: 2px solid var(--line-2);
}

/* The lightbox carries its own caption and credit: the footer credit line
   is not visible behind a full-viewport overlay. */
.lb-cap {
  margin: 0; padding: 10px 18px 0; text-align: center;
  font-size: 13.5px; line-height: 1.5; color: var(--muted);
}


/* ---------- Windows High Contrast / forced-colors ----------
   In forced-colors every author colour is replaced, `transparent` is
   preserved and box-shadow is dropped. Anything whose only signal was a
   background or a colour therefore disappears — which here meant the
   primary buttons lost their edges, every selected chip looked unselected,
   and each progress bar became an empty strip. */
@media (forced-colors: active) {
  .btn { border-color: currentColor; }
  .chip[aria-pressed="true"], .seg-btn.on, .curve-gate.on,
  .pal-item.on, .pop-item.active, .pop-item:hover,
  .pick-card.on, .jr-step.on, .rate-table tbody tr.on, .mx-table tbody tr:hover {
    background: Highlight; color: HighlightText; forced-color-adjust: none;
  }
  .chip[aria-pressed="true"] { border-color: Highlight; }

  /* bars: an outlined track with a system-coloured fill */
  .bar, .meter, .fit-bar, .yr-bar, .jr-bar, .wait-bar, .vs-bar, .scroll-rail {
    border: 1px solid CanvasText;
  }
  .bar span, .meter i, .fit-bar i, .yr-bar i, .jr-bar i,
  .wait-free, .vs-bar i, #scrollBar { background: Highlight; forced-color-adjust: none; }
  .wait-paid, .fit-bar i.over { background: CanvasText; forced-color-adjust: none; }

  /* photographs are never forced, so text over them stops being legible */
  .hero-img, .band > img, .band > picture { display: none; }

  /* a select must not look like a text input */
  select.inp { appearance: auto; background-image: none; padding-right: 14px; }

  /* dashed-vs-solid survives forced colors; make it carry the state */
  .bg-item.in, .fit-car.ok, .cv-row.best { border-width: 2px; }
}

/* ---------- very short viewports (400% zoom, landscape phones) ----------
   At 400% the layout viewport is about 320x200. The 76px header plus the
   84px sticky fare bar left roughly 40px of content, and the menu — the
   only navigation — was centred inside `overflow: hidden` and clipped at
   both ends with no way to scroll to it. */
@media (max-height: 480px) {
  .nav-in { height: 56px; }
  .sticky-quote { display: none !important; }
  body { padding-bottom: 0 !important; }
  .to-top { bottom: 16px !important; }
  :where(section, .tool) { scroll-margin-top: 64px; }
}
@media (max-height: 600px) {
  .mega-in { justify-content: flex-start; padding-top: 72px; }
  .mega { overflow-y: auto; }
  .mx-scroll { max-height: none; }
  .pal { padding-top: min(60px, 6vh); }
}

/* Under 960px the fit tool stacks, and the counters come first in source
   order — so you tapped through ten rows, then scrolled ~700px to see the
   four cars react. The answer goes above the question on a phone. */
@media (max-width: 959px) {
  .fit-grid { display: flex; flex-direction: column; }
  .fit-out { order: -1; }
  .fit-out .tool-hint { margin-bottom: 8px; }
}

/* The route table is 560px wide inside a ~335px phone: horizontal scroll
   nested inside vertical scroll inside the page. Below 640px each row
   becomes a block instead. */
@media (max-width: 639px) {
  .mx-scroll { max-height: none; overflow: visible; border: 0; }
  .mx-table { min-width: 0; }
  .mx-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mx-table tbody tr {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "route fare" "meta meta";
    gap: 2px 12px; padding: 12px 2px; border-bottom: 1px solid var(--line);
  }
  .mx-table tbody th, .mx-table tbody td { border: 0; padding: 0; }
  .mx-table tbody th { grid-area: route; }
  .mx-table tbody td:nth-of-type(4) { grid-area: fare; font-size: 16px; }
  .mx-table tbody td:nth-of-type(1),
  .mx-table tbody td:nth-of-type(2),
  .mx-table tbody td:nth-of-type(3) {
    grid-area: meta; display: inline; font-size: 13px; color: var(--muted); text-align: left;
  }
  .mx-table tbody td:nth-of-type(1)::after { content: " km ·"; }
  .mx-table tbody td:nth-of-type(3)::before { content: " · Salik "; }
  .mx-go { font: inherit; font-size: 16px; font-weight: 600; text-align: left;
           background: none; border: 0; padding: 0; color: var(--paper); cursor: pointer; }
}

/* <picture> is an inline box; it must not sit between a positioned wrapper
   and the image it wraps. */
.fleet-shot picture, .lb-stage picture, .pick-shot picture,
.vs2-card picture, .ask-car picture, .gal button picture { display: contents; }

/* Said once, only when the browser has actually refused a write. */
.cart-warn {
  margin: 0 0 12px; font-size: 13.5px; line-height: 1.6;
  padding-left: 12px; border-left: 2px solid var(--red);
}
.cart-warn[hidden] { display: none; }

/* On a return the gate list is two labelled rows, one per leg. */
.gate-leg {
  flex-basis: 100%; margin: 6px 0 2px; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

/* Shown only while the booking line is a placeholder. */
.wa-note {
  max-width: 60ch; margin: 22px auto 0; font-size: 15px; line-height: 1.7;
  padding: 14px 18px; border: 1px solid var(--line-2); border-radius: 3px;
  background: var(--ink-2);
}
.wa-note[hidden] { display: none; }

/* ---------- saved journeys ----------
   A shelf, not a booking. Rows, not cards — the list should read like a
   list, which is the whole reason it is not another bordered grid. */
.saved-list { display: grid; gap: 0; margin-top: 4px; }
.saved-row {
  display: grid; gap: 2px 20px; align-items: baseline;
  grid-template-columns: 1fr auto; grid-template-areas: "route fare" "meta fare" "acts acts";
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.saved-row:first-child { border-top: 1px solid var(--line); }
@media (min-width: 760px) {
  .saved-row {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "route fare acts" "meta fare acts";
    align-items: center; gap: 2px 28px;
  }
}
.saved-route {
  grid-area: route; margin: 0; font-family: var(--font-d); font-weight: 600;
  font-size: clamp(18px, 2vw, 22px); line-height: 1.25; letter-spacing: -.01em;
}
.saved-meta { grid-area: meta; margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.saved-fare { grid-area: fare; margin: 8px 0 0; display: flex; flex-direction: column; gap: 1px; }
@media (min-width: 760px) { .saved-fare { margin: 0; text-align: right; } }
.saved-fare b { font-family: var(--font-d); font-size: clamp(21px, 2.2vw, 26px); color: var(--amber); }
.saved-same { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.saved-moved { font-size: 13.5px; color: var(--red); font-weight: 600; }
.saved-acts { grid-area: acts; display: flex; gap: 12px; align-items: center; margin-top: 12px; }
@media (min-width: 760px) { .saved-acts { margin-top: 0; } }
.saved-drop {
  background: none; border: 0; padding: 6px 2px; font: inherit; font-size: 14px;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.saved-drop:hover { color: var(--red); }
#savedSection[hidden] { display: none; }