/* IsoMap London: the studio layout (Mark's pick, 12 Oct 2026; spec:
   design-options/layout-2026-10-11/studio/index.html). White panels, navy ink,
   Hanken Grotesk with tabular figures for all text, Fraunces for the wordmark
   only. The map is the only warm colour. No side panel, no cream paper
   controls, no terracotta buttons, no upper-case mono labels.
   Replaces the night-control-room base + the journal theme (styles-journal.css,
   retired the same day). */

:root {
  --paper: #ffffff;
  --ground: #f4f2ee;
  --ink: #1b1d22;
  --ink-2: #555a62;
  --ink-3: #6d7178;
  --line: #e1ddd5;
  --line-2: #cfcac0;
  --accent: #1e3a5f;
  --accent-2: #2c5282;
  --accent-soft: #e7edf4;
  --over: #a3302e;
  --ok: #2f6b46;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Fraunces", Georgia, serif;
  --r: 8px;
  --shadow: 0 6px 24px rgba(20, 24, 32, .14), 0 1px 3px rgba(20, 24, 32, .08);
  --top: 123px;      /* the bar's real height; ui.js keeps it in step */
  --drawer-w: 400px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: #e9e6e0; color: var(--ink); font-family: var(--sans); font-size: 14px;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ol, ul { margin: 0; }
.num { font-feature-settings: "tnum"; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#map { position: fixed; inset: 0; }
#map canvas { outline: none; }

/* ---------- top bar ---------- */
.top {
  position: fixed; left: 0; right: 0; top: 0; z-index: 20;
  background: var(--paper); border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(20, 24, 32, .06);
}
.row1 { display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 20px; }
.brand {
  font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: .01em;
  color: var(--accent); white-space: nowrap; line-height: 1; flex: none;
}
.brand span { color: #b8553e; font-weight: 400; }
/* the icon beside the name, and the tagline at 14 px in --ink-2 (23 Oct 2026: Mark's logo pick; both
   outside reviewers asked for a larger, darker line for older eyes). Under 960 px .brand is hidden. */
.brand { display: flex; align-items: center; gap: 10px; }
.brand .mk { flex: none; display: block; }
.brand small {
  display: block; font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--ink-2); letter-spacing: 0; margin-top: 4px;
}
.search { position: relative; flex: 0 1 420px; min-width: 300px; margin-left: 4px; }
.sbox {
  display: flex; align-items: center; height: 42px; border: 1.5px solid var(--line-2);
  border-radius: var(--r); background: #fff; padding: 0 6px 0 12px; gap: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.sbox:focus-within, .search.open .sbox { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sbox svg { flex: none; color: var(--ink-3); }
.sbox input { flex: 1; border: 0; outline: 0; height: 100%; font-size: 15px; background: transparent; min-width: 0; }
.sbox input::placeholder { color: var(--ink-3); }
.sbox input::-webkit-search-cancel-button { cursor: pointer; }
.pinbtn {
  display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 6px;
  font-weight: 600; color: var(--accent); white-space: nowrap; flex: none;
}
.pinbtn:hover, .pinbtn.on { background: var(--accent-soft); }
.row1-right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }
.btn-line {
  height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r);
  font-weight: 600; background: #fff; display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.btn-line:hover { border-color: var(--ink-3); }
.btn-line .count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 11px;
  background: var(--accent); color: #fff; font-size: 12px; padding: 0 6px;
}
.btn-line .count.zero { background: var(--ground); color: var(--ink-2); }
.iconbtn { width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: 50%; font-weight: 700; font-size: 15px; background: #fff; flex: none; }
.iconbtn:hover { border-color: var(--ink-3); }

.dests { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; }
.lab { font-size: 13px; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.chips { display: flex; gap: 6px; align-items: center; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 6px 0 5px; flex: none;
  border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--r);
  white-space: nowrap; font-weight: 600;
}
.chip:hover { background: #dbe4ef; }
.chip.sel { box-shadow: 0 0 0 2px var(--accent); }
.letter {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
}
.chip .nm { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.chips.many .nm { max-width: 104px; }
.chip .budget {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 7px;
  border: 1px solid #b9c6d6; border-radius: 5px; background: #fff; font-size: 13px; font-weight: 600; color: var(--accent);
}
.chip .budget::after {
  content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); margin-left: 2px;
}
.chip:hover .budget { border-color: var(--accent); }
.chip .x { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--ink-2); font-size: 16px; line-height: 1; }
.chip .x:hover { background: #fff; color: var(--over); }
.addbtn {
  height: 38px; padding: 0 12px; border: 1px dashed var(--accent); border-radius: var(--r);
  color: var(--accent); font-weight: 600; white-space: nowrap; background: #fff; flex: none;
}
.addbtn:hover { background: var(--accent-soft); }
.addbtn[disabled] { opacity: .45; cursor: default; }

.row2 { display: flex; align-items: center; gap: 14px; height: 58px; padding: 0 20px; border-top: 1px solid var(--ground); background: #fbfaf8; }
.qrow { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.query { display: flex; border: 1px solid var(--line-2); border-radius: var(--r); background: #fff; height: 44px; overflow: hidden; flex: none; }
.qseg {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0 14px; min-width: 96px; border-right: 1px solid var(--line); text-align: left; position: relative;
}
.qseg:last-child { border-right: 0; }
.qseg:hover, .qseg.open { background: var(--ground); }
.qseg .k { font-size: 12px; color: var(--ink-3); line-height: 1.1; }
.qseg .v { font-weight: 600; font-size: 14px; line-height: 1.3; white-space: nowrap; max-width: 250px; overflow: hidden; text-overflow: ellipsis; }
.qseg .v::after, .fpill::after {
  content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); margin-left: 7px; opacity: .6;
}
.qseg.on .v { color: var(--accent); }
.qseg.on .v::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-right: 6px; vertical-align: 1px;
}
.fpill { height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: #fff; font-weight: 600; white-space: nowrap; }
.fpill:hover, .fpill.open { border-color: var(--ink-3); }
.fpill.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.textbtn { font-weight: 600; color: var(--accent); padding: 6px 8px; border-radius: 6px; white-space: nowrap; }
.textbtn:hover { background: var(--accent-soft); }
.row2 .end { margin-left: auto; display: flex; gap: 4px; align-items: center; flex: none; }
.coach {
  margin-left: auto; display: flex; align-items: center; gap: 6px; max-width: 470px; min-width: 0;
  padding: 6px 6px 6px 12px; border-left: 3px solid var(--accent); background: var(--accent-soft);
  border-radius: 0 6px 6px 0; font-size: 13px; line-height: 1.35; color: var(--ink);
}
.coach b { font-weight: 700; color: var(--accent); }
.coach:not([hidden]) + .end { margin-left: 12px; }
.coach button { flex: none; width: 24px; height: 24px; border-radius: 50%; color: var(--ink-2); font-size: 17px; line-height: 1; }
.coach button:hover { background: #fff; }

/* ---------- search dropdown + role card ---------- */
.dd {
  position: absolute; left: 0; top: 48px; width: 100%; min-width: 420px; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 8px;
  z-index: 40; max-height: calc(100vh - 140px); overflow: auto;
}
.dd h4 { margin: 8px 10px 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.dd h4:first-child { margin-top: 4px; }
.res { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 6px; text-align: left; }
.res:hover, .res.hl { background: var(--ground); }
.res .ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--ground); color: var(--ink-2); }
.res:hover .ic, .res.hl .ic { background: #fff; }
.res .ic .letter { width: 22px; height: 22px; }
.res .rt { min-width: 0; }
.res b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res b mark { background: none; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.res small { display: block; color: var(--ink-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res .role-now { margin-left: auto; font-size: 12px; color: var(--accent); font-weight: 600; white-space: nowrap; flex: none; }
.dd .hintline { margin: 6px 10px 4px; font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.dd .hintline.err { color: var(--over); }
.dd .backline { display: flex; align-items: baseline; gap: 10px; margin: 2px 6px 4px; }
.dd .backline b { font-weight: 700; }
.dd .backline button { margin-left: auto; font-size: 13px; color: var(--accent); font-weight: 600; }

.role { padding: 8px 6px 6px; }
.role-head { display: flex; align-items: baseline; gap: 10px; padding: 0 6px 10px; border-bottom: 1px solid var(--line); min-width: 0; }
.role-head b { font-size: 18px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-head span { color: var(--ink-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.role-head .back { margin-left: auto; font-size: 13px; color: var(--accent); font-weight: 600; flex: none; }
.role-q { margin: 12px 6px 8px; font-weight: 600; color: var(--ink-2); font-size: 13px; }
.ropt {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 8px; text-align: left; background: #fff;
}
.ropt:hover, .ropt.hl { border-color: var(--accent); background: var(--accent-soft); }
.ropt .ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.ropt b { display: block; font-weight: 700; font-size: 15px; }
.ropt small { display: block; color: var(--ink-2); font-size: 13px; margin-top: 1px; }
.ropt.pick { border: 1.5px solid var(--accent); }
.ropt[disabled] { opacity: .5; cursor: default; }
.picktag { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--ok); background: #e9f3ec; border-radius: 4px; padding: 1px 6px; }
.picktag:empty { display: none; }

/* ---------- map markers ---------- */
/* the pin's tip is the point (15, 36): the head is rotated about its own sharp
   corner, placed there, so --pin-s (set per zoom by app.js) shrinks the head
   towards the point instead of lifting it off; the dot marks the point itself,
   readable at any zoom (Mark, 16 Oct: far out, which spot a pin meant was unclear) */
.dpin { position: relative; width: 30px; height: 36px; cursor: pointer; }
.dpin .head {
  position: absolute; left: 15px; top: 6px; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg) scale(var(--pin-s, 1)); transform-origin: 0 100%;
  background: var(--accent); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.dpin::after {
  content: ""; position: absolute; left: 11.5px; top: 32.5px; width: 7px; height: 7px; box-sizing: border-box;
  border-radius: 50%; background: var(--accent); border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.dpin .head b { transform: rotate(45deg); color: #fff; font-size: 13px; font-weight: 700; }
.dpin.spot .head { background: #fff; border-color: var(--accent); }
.dpin.spot .head b { color: var(--accent); }
.dpin.pending .head { background: #fff; border: 2px dashed var(--accent); }
.dpin.pending .head b { color: var(--accent); }
.dpin .tag {
  position: absolute; left: 50%; top: -24px; transform: translateX(-50%); white-space: nowrap;
  background: rgba(255, 255, 255, .96); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px;
  font-size: 12px; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
.sl-pin {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--accent); cursor: pointer;
  background: #fff; color: var(--accent); font: 700 11px var(--sans); padding: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.pinbar {
  position: fixed; left: 50%; top: calc(var(--top) + 14px); transform: translateX(-50%);
  background: var(--accent); color: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 600;
  box-shadow: var(--shadow); z-index: 30; display: flex; gap: 12px; align-items: center; white-space: nowrap;
}
.pinbar button { color: #fff; text-decoration: underline; font-weight: 500; }
.status {
  position: fixed; left: 50%; top: calc(var(--top) + 14px); transform: translateX(-50%); z-index: 29;
  max-width: min(560px, calc(100% - 32px)); background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 6px; padding: 8px 12px; font-size: 13px; line-height: 1.4;
  box-shadow: var(--shadow);
}
.pinbar:not([hidden]) ~ .status { top: calc(var(--top) + 62px); }
.cursor-read {
  position: fixed; z-index: 24; pointer-events: none; font-size: 12px; font-weight: 600; color: var(--ink);
  background: rgba(255, 255, 255, .96); border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

/* ---------- popovers ---------- */
.pop {
  position: fixed; z-index: 45; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); width: 360px; padding: 16px 16px 12px; max-height: calc(100vh - var(--top) - 24px); overflow: auto;
}
.pop h3 { margin: 0 0 2px; font-size: 16px; font-weight: 700; }
.pop .lede { margin: 0 0 12px; color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.pop .grp { margin: 12px 0 0; }
.pop .gl { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 10px 0 6px; display: flex; justify-content: space-between; align-items: baseline; }
.pop .grp > .gl:first-child { margin-top: 0; }
.pop .slot > .popbody + .popbody { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ground); }
.seg { display: flex; background: var(--ground); border-radius: 7px; padding: 3px; gap: 2px; }
.seg button { flex: 1; height: 32px; border-radius: 5px; font-weight: 600; color: var(--ink-2); font-size: 13.5px; white-space: nowrap; padding: 0 6px; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.timeblock.disabled { opacity: .4; pointer-events: none; }
.togs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tog {
  height: 56px; border: 1px solid var(--line-2); border-radius: 7px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-weight: 700; font-size: 13.5px; padding: 0 2px; text-align: center; line-height: 1.15;
}
.tog small { font-weight: 500; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.tog.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.tog.on small { color: #cfdbea; }
.hint { font-size: 12.5px; color: var(--ink-3); margin: 8px 0 0; line-height: 1.4; }
.hint:empty { display: none; }
.vopt {
  display: flex; gap: 12px; align-items: center; width: 100%; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: 7px; margin-bottom: 6px; text-align: left;
}
.vopt:hover { border-color: var(--ink-3); }
.vopt.on { border: 1.5px solid var(--accent); background: var(--accent-soft); }
.vopt .sw { flex: none; display: block; width: 54px; height: 14px; border-radius: 3px; }
.sw-bands, .sw-fit { background: linear-gradient(90deg, #2d0004, #8e0000, #c45500, #e2a50a, #f5f093); }
.sw-focus { background: linear-gradient(90deg, #f2f0ea 0 66%, #b3afa9 66%); border: 1px solid var(--line); }
.sw-rent { background: linear-gradient(90deg, #2d0004, #8e0000, #c45500, #e2a50a, #f5f093); filter: saturate(.75); }
.vopt b { display: block; font-size: 14px; }
.vopt small { display: block; font-size: 12.5px; color: var(--ink-2); }
.fit-rows { display: flex; flex-direction: column; }
.fit-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--ground); }
.fit-row .fl { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fit-row.risk .fl { font-weight: 500; color: var(--ink-2); }
.fit-row .seg { flex: none; padding: 2px; }
.fit-row .seg button { flex: none; width: 34px; height: 26px; font-size: 12px; padding: 0; }
.fit-row .must { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); cursor: pointer; flex: none; }
.fit-row .must input { accent-color: var(--accent); margin: 0; width: 15px; height: 15px; }
.cost { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
.cost.on { border-color: var(--accent); background: #fbfcfe; }
.cost-head { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; flex-wrap: wrap; }
.cost-head input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.cost-head .num { color: var(--accent); }
.cost-body { margin-top: 10px; display: grid; gap: 8px; }
.cost:not(.on) .cost-body { opacity: .45; }
.msg-err:not(:empty) { display: block; margin-top: 4px; color: var(--over); }
input[type=range] { width: 100%; accent-color: var(--accent); margin: 0; height: 22px; }
select.sel { height: 32px; border: 1px solid var(--line-2); border-radius: 6px; padding: 0 8px; background: #fff; }
.near { display: flex; flex-direction: column; }
.near-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ground); }
.near-row label { flex: 1; display: flex; gap: 10px; align-items: center; font-weight: 600; cursor: pointer; }
.near-row input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.near-row .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; opacity: .45; }
.near-row.on .dot { opacity: 1; }
.near-row .walk { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.near-row:not(.on) .walk { opacity: .5; }
.popfoot { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--ground); }
.btn { height: 38px; padding: 0 16px; border-radius: var(--r); background: var(--accent); color: #fff; font-weight: 700; }
.btn:hover { background: var(--accent-2); }
.scrim { position: fixed; inset: 0; background: rgba(15, 18, 24, .32); z-index: 44; }
.ticks { display: flex; font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.ticks span { flex: 1; text-align: center; }
/* chip limit popover + the phone destinations sheet */
.dlim { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; color: var(--ink-2); font-size: 13px; margin-bottom: 6px; }
.dlim .num { color: var(--accent); font-weight: 700; font-size: 15px; }
.drow { display: grid; grid-template-columns: 26px 1fr auto 28px; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ground); }
.drow b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drow .lim { font-weight: 700; color: var(--accent); }
.drow input { grid-column: 2 / 4; }
.drow .rm { width: 28px; height: 28px; border-radius: 50%; color: var(--ink-2); font-size: 18px; }
.drow .rm:hover { color: var(--over); background: var(--ground); }

/* ---------- legend ---------- */
.legend {
  position: fixed; left: 20px; bottom: 20px; z-index: 15; width: 310px;
  background: rgba(255, 255, 255, .97); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 12px 14px 10px; max-height: calc(100vh - var(--top) - 40px); overflow: auto;
}
.lg-title { font-weight: 700; font-size: 14px; line-height: 1.3; }
.lg-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 1px; line-height: 1.35; }
/* the bike estimate for a pin: the subtitle says so on desktop; the phone hides
   the subtitle, so the title carries this short tag there (14 Oct 2026) */
.lg-est { display: none; font-weight: 600; font-size: 12px; color: var(--ink-2); margin-left: 4px; white-space: nowrap; }
.lg-cells { display: flex; margin-top: 9px; }
.lg-cells .cell { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 3px; background: none; border: 0; padding: 0; font: inherit; color: inherit; }
.lg-cells button.cell { cursor: pointer; }
.lg-cells .sw { height: 12px; opacity: max(var(--tint, .8), .45); }
.lg-cells .cell:first-child .sw { border-radius: 2px 0 0 2px; }
.lg-cells .cell:last-child .sw { border-radius: 0 2px 2px 0; }
.lg-cells .tick { font-size: 12px; color: var(--ink-3); text-align: center; white-space: nowrap; }
.lg-cells .cell.dimmed .sw { opacity: .22; }
.lg-cells button.cell:hover .tick { color: var(--ink); }
.lg-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.35; }
.lg-sw { width: 16px; height: 10px; border-radius: 2px; flex: none; border: 1px solid rgba(0, 0, 0, .18); }
.lg-sw.clear { background: #f2f0ea; }
.lg-sw.grey { background: #b3afa9; }
.lg-dash { width: 16px; height: 0; border-top: 2px dashed #2f6b4f; flex: none; }
.lg-line { width: 16px; height: 0; border-top: 2px solid #3a2418; flex: none; }
.lwarn { margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: var(--over); font-weight: 600; }
.lwarn:empty { display: none; }
.lmore { margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.lmore summary { cursor: pointer; font-weight: 600; color: var(--accent); list-style: none; }
.lmore summary::-webkit-details-marker { display: none; }
.lmore summary::before { content: "▸ "; }
.lmore[open] summary::before { content: "▾ "; }
.lmore .note { margin-top: 6px; line-height: 1.45; }
.lmore .note b { color: var(--ink); }
.lmore .note p + p { margin-top: 6px; }
.anywhere-stat, .anywhere-label { margin-top: 6px; line-height: 1.45; }
.anywhere-stat:empty, .anywhere-label:empty { display: none; }
.tint { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--ground); font-size: 12px; color: var(--ink-3); }
.tint input { flex: 1; height: 16px; }

/* ---------- drawer ---------- */
.drawer {
  position: fixed; right: 0; top: var(--top); bottom: 0; width: var(--drawer-w); z-index: 18;
  background: #fff; border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(20, 24, 32, .1);
  display: flex; flex-direction: column;
}
.dscroll { flex: 1; overflow: auto; padding: 18px 20px 14px; scrollbar-width: thin; }
.dclose {
  position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; border-radius: 50%;
  font-size: 20px; color: var(--ink-2); z-index: 2; background: #fff;
}
.dclose:hover { background: var(--ground); }
.dkicker { font-size: 12.5px; color: var(--ink-3); font-weight: 600; padding-right: 36px; }
.dtitle { margin: 2px 36px 0 0; font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.dcoords { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.verdict { margin: 12px 0 4px; padding: 10px 12px; border-radius: 8px; background: var(--ground); font-size: 14px; line-height: 1.45; }
.verdict b { font-weight: 700; }
.verdict.bad b:first-child { color: var(--over); }
.verdict .vfix { display: block; margin-top: 6px; }
.verdict .vfix button {
  display: block; margin-top: 8px; height: 34px; padding: 0 12px; border-radius: 7px;
  border: 1px solid var(--accent); background: #fff; color: var(--accent); font-weight: 700;
}
.verdict .vfix button:hover { background: var(--accent-soft); }
.dsec { margin-top: 18px; }
.dsec h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dsec h3 small { font-weight: 500; color: var(--ink-3); font-size: 12.5px; text-align: right; }
table.times { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.times th { font-size: 12px; font-weight: 600; color: var(--ink-3); text-align: right; padding: 0 0 4px 4px; white-space: nowrap; }
table.times th:first-child { text-align: left; padding-left: 0; }
table.times td { padding: 7px 0 7px 4px; border-top: 1px solid var(--ground); text-align: right; font-size: 13.5px; vertical-align: top; }
table.times td:first-child { text-align: left; font-weight: 600; padding-left: 0; max-width: 130px; }
table.times td .letter { width: 20px; height: 20px; margin-right: 6px; vertical-align: -4px; }
table.times td .rn { display: inline; }
table.times td small { display: block; font-weight: 400; color: var(--ink-3); font-size: 12px; margin-left: 26px; }
table.times td.best span { color: var(--accent); font-weight: 600; border-bottom: 2px solid var(--accent); }
table.times td.over span { color: var(--over); }
table.times td.over.best span { border-bottom-color: var(--over); }
table.times td.cur { background: var(--accent-soft); }
table.times td.muted { color: var(--ink-3); font-size: 12px; }
/* two or more destinations: a row picks the one the week table and the Journey follow */
table.times.pickable tbody tr { cursor: pointer; }
table.times.pickable tbody tr:hover td:first-child .rn { color: var(--accent); }
/* no underline here: underline already means "quickest" in this table */
table.times tr.picked td:first-child .rn { color: var(--accent); font-weight: 700; }
table.times tr.picked .letter { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--accent); }
table.times tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dsrc { font-size: 12px; color: var(--ink-3); margin-top: 8px; line-height: 1.4; }
.dsrc:empty { display: none; }
.walks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; } /* six since gyms, 18 Oct 2026 */
.walks div { border: 1px solid var(--line); border-radius: 7px; padding: 7px 4px; text-align: center; }
.walks .num { display: block; font-size: 18px; color: var(--ink); }
.walks small { display: block; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.walks .ok { border-color: var(--accent); background: var(--accent-soft); }
.walks .bad { border-color: var(--over); }
.walks .bad .num { color: var(--over); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; font-size: 14px; }
.kv > div { padding: 6px 0; border-top: 1px solid var(--ground); }
.kv .num { text-align: right; font-weight: 600; }
.kv small { display: block; color: var(--ink-3); font-size: 12px; font-weight: 400; line-height: 1.35; }
.kv .over { color: var(--over); }
.kv .num small { color: var(--ink-3); }
.kv .over small { color: var(--over); }
.fitbig { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.fitbig .num { font-size: 30px; font-weight: 500; color: var(--accent); line-height: 1; }
.fitbig span { color: var(--ink-2); font-size: 13px; }
.fit-list { list-style: none; padding: 0; margin: 0; }
.fit-list li { display: grid; grid-template-columns: minmax(0, 1fr) 70px auto; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; }
.fit-list .fk { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fit-list .bar { height: 8px; background: var(--ground); border-radius: 4px; overflow: hidden; }
.fit-list .bar i { display: block; height: 100%; background: var(--accent); }
.fit-list .fv { text-align: right; white-space: nowrap; font-size: 12.5px; }
.fit-list li.fail .fv { color: var(--over); }
.fit-list li.fail .bar i { background: var(--over); }
.fit-list li.na { color: var(--ink-3); }
.week-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; font-size: 13px; }
.week-table th { font-weight: 600; text-align: left; color: var(--ink-2); padding: 3px 0; }
.week-table thead th { font-size: 12px; text-align: right; color: var(--ink-3); }
.week-table thead th:first-child { text-align: left; color: var(--ink); font-size: 13px; }
.week-table thead th span { font-weight: 400; color: var(--ink-3); }
.week-table td { text-align: right; padding: 3px 0; border-top: 1px solid var(--ground); }
.week-table td.cur { color: var(--accent); font-weight: 700; background: var(--accent-soft); }
.leg-row { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 3px 0; min-width: 0; }
.leg-row .lmode { flex: none; font-size: 11px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 4px; padding: 1px 5px; min-width: 52px; text-align: center; }
.leg-row .lmode.WALK { background: var(--ink-3); }
.leg-row .lmode.RIDE { background: var(--ok); }
.leg-row .lmode.WAIT { background: var(--ground); color: var(--ink-2); }
.leg-row .lmode.BUS { background: #a3302e; }
.leg-row .lmode.RAIL { background: #2c5282; }
.leg-row .lmode.SUBWAY { background: #1b1d22; }
.leg-row .lmode.ELIZ { background: #6950a1; }
.leg-row .lmode.OVG { background: #c45500; }
.leg-row .lmode.DLR { background: #00777a; }
/* station names ellipsised, never wrapped mid-word (phone, 14 Oct 2026) */
.leg-row .ldetail { flex: 1; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leg-row .ltime { flex: none; min-width: 2ch; text-align: right; color: var(--ink); font-weight: 600; }
/* the Journey section: our maths as legs, TfL's live route, the map links */
.journey h4 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 10px 0 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.journey h4 small { min-width: 0; font-weight: 500; color: var(--ink-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journey .jpart:first-of-type h4 { margin-top: 0; }
.jline { font-size: 13.5px; line-height: 1.45; margin: 2px 0; }
.jnote { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; margin: 2px 0 4px; }
.jtotal { font-size: 13px; margin-top: 3px; padding-top: 4px; border-top: 1px solid var(--ground); text-align: right; }
.jtotal small { color: var(--ink-3); font-size: 12px; }
.jcmp { font-size: 13px; font-weight: 600; margin-top: 4px; color: var(--accent); }
.maplinks { font-size: 13px; margin-top: 8px; color: var(--ink-2); }
.maplinks a { color: var(--accent); font-weight: 600; text-decoration: none; }
.maplinks a:hover { text-decoration: underline; }
.dfoot { border-top: 1px solid var(--line); padding: 12px 20px; display: flex; gap: 12px; align-items: center; background: #fff; }
.dfoot .btn { flex: 1; height: 44px; font-size: 15px; }
.dfoot .btn.saved { background: var(--ok); }
.dfoot .more { display: flex; flex-direction: column; gap: 3px; flex: none; }
.dfoot .more button { font-size: 13px; font-weight: 600; color: var(--accent); text-align: left; }
.dfoot .more button:hover { text-decoration: underline; }
body.drawer-open .maplibregl-ctrl-bottom-right { right: var(--drawer-w); }
body.drawer-open .attrib { right: calc(var(--drawer-w) + 8px); max-width: calc(100vw - var(--drawer-w) - 360px); white-space: normal; } /* clear of the legend; wraps rather than cut a credit */

/* ---------- shortlist page ---------- */
.sl-panel {
  position: fixed; left: 20px; right: 20px; top: calc(var(--top) + 12px); z-index: 28;
  max-height: calc(100vh - var(--top) - 32px); overflow: auto; padding: 14px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
}
.sl-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.sl-head h2 { font-size: 18px; font-weight: 700; }
.sl-help { font-size: 12.5px; color: var(--ink-2); flex: 1; }
.sl-close { font-size: 22px; color: var(--ink-2); width: 32px; height: 32px; border-radius: 50%; flex: none; margin-left: auto; }
.sl-close:hover { background: var(--ground); }
.sl-empty { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.sl-table { border-collapse: collapse; font-size: 13px; width: max-content; min-width: 100%; }
.sl-table th {
  position: sticky; top: -14px; background: #fff; text-align: right; font-weight: 700; font-size: 12.5px;
  padding: 4px 8px; cursor: pointer; white-space: nowrap; border-bottom: 1px solid var(--line);
}
.sl-table th span { display: block; font-weight: 400; font-size: 12px; color: var(--ink-3); }
.sl-table th:first-child { text-align: left; cursor: default; }
.sl-table td { padding: 6px 8px; border-bottom: 1px solid var(--ground); vertical-align: top; }
.sl-table td.num { text-align: right; }
.sl-place { min-width: 170px; }
.sl-go { font-weight: 600; color: var(--ink); text-align: left; }
.sl-go:hover { color: var(--accent); text-decoration: underline; }
.sl-place textarea {
  display: block; width: 100%; margin-top: 4px; resize: vertical; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink-2); padding: 3px 6px;
}
.sl-rm { color: var(--ink-3); font-size: 16px; width: 26px; height: 26px; border-radius: 50%; }
.sl-rm:hover { color: var(--over); background: var(--ground); }

/* ---------- help, toast, attribution ---------- */
dialog.help {
  outline: none; border: 0; border-radius: 12px; box-shadow: var(--shadow); padding: 22px 24px 20px;
  max-width: 500px; width: calc(100% - 32px); max-height: calc(100dvh - 32px); overflow: auto; color: var(--ink);
}
dialog.help::backdrop { background: rgba(15, 18, 24, .35); }
dialog.help h2 { margin: 0 32px 10px 0; font-size: 20px; }
dialog.help h3 { margin: 14px 0 2px; font-size: 14px; font-weight: 700; }
dialog.help ol { padding-left: 20px; line-height: 1.5; }
dialog.help li { margin-bottom: 8px; }
dialog.help p { color: var(--ink-2); font-size: 13px; line-height: 1.45; margin-top: 8px; }
dialog.help ul.about-data { padding-left: 18px; margin: 6px 0 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }
dialog.help ul.about-data li { margin-bottom: 5px; }
dialog.help .btn { margin-top: 14px; }
.help-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--ink-2); }
.help-close:hover { background: var(--ground); }
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--ink); color: #fff;
  padding: 10px 16px; border-radius: 8px; z-index: 60; font-weight: 500; box-shadow: var(--shadow); max-width: calc(100% - 32px);
}
.toast button { color: #9fc0e8; font-weight: 700; margin-left: 10px; }
.attrib {
  position: fixed; right: 8px; bottom: 4px; z-index: 14; font-size: 10px; color: #4a4d52;
  background: rgba(255, 255, 255, .8); border-radius: 4px; padding: 1px 6px; max-width: calc(100vw - 350px); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* one line; full credits in About the data */
}
.attrib #attrib-about { font: inherit; color: var(--accent); font-weight: 600; padding: 0; }
.attrib #attrib-about:hover { text-decoration: underline; }
.maplibregl-ctrl-attrib { display: none; }
.maplibregl-ctrl-bottom-right { bottom: 28px; } /* clear of the one-line attribution */
.maplibregl-popup-content { border-radius: 8px; font-family: var(--sans); box-shadow: var(--shadow); padding: 10px 12px; }
.am-pop { font-size: 13px; line-height: 1.5; max-width: 240px; color: var(--ink); }
.am-pop .blurb { color: var(--ink-2); font-style: italic; }
.am-pop a { color: var(--accent); font-weight: 600; }
.am-pop .poptype { font-size: 12px; color: var(--ink-3); }
.am-pop .pop-sep { border: 0; border-top: 1px solid var(--line, #e3e1dc); margin: 7px 0; }

.phone-only { display: none !important; }

/* ---------- narrow desktop: keep one line per row ---------- */
@media (max-width: 1240px) and (min-width: 961px) {
  .brand small { display: none; }
  .search { flex-basis: 320px; min-width: 240px; }
  .lab { display: none; }
  .coach {
    position: fixed; left: auto; right: 16px; top: calc(var(--top) + 10px); z-index: 16; max-width: 380px;
    box-shadow: var(--shadow); border-radius: 8px; border-left: 0; background: var(--accent); color: #fff;
  }
  .coach b { color: #fff; }
  .coach button { color: #fff; }
}
@media (max-width: 1040px) and (min-width: 961px) {
  .btn-line .sl-word { display: none; }
  .btn-line { padding: 0 10px; }
  .qseg { min-width: 0; padding: 0 10px; }
  .qseg .v { max-width: 150px; }
  .search { flex-basis: 250px; min-width: 200px; }
  .chip .nm, .chips.many .nm { max-width: 70px; }
  .chip .x { display: none; } /* Remove stays in each chip's popover */
}

/* ---------- phone (and tablets in portrait: below 960 px the desktop bar
   no longer fits on two lines; app.js IS_MOBILE uses the same width) ---------- */
@media (max-width: 960px) {
  :root { --drawer-w: 0px; }
  .desk-only { display: none !important; }
  .phone-only { display: revert !important; }
  .row1 { height: auto; padding: 8px 10px 0; gap: 8px 6px; flex-wrap: wrap; }
  .brand { display: none; }
  .search { flex: 1; margin: 0; min-width: 0; order: 1; }
  .row1-right { order: 2; margin-left: 0; gap: 6px; }
  .row1 .dests { display: none !important; }
  .dsum.phone-only { display: flex !important; order: 3; flex: 1 0 100%; margin-bottom: 8px; }
  .fgroup { display: none !important; }
  .sbox { height: 42px; padding: 0 4px 0 8px; gap: 6px; }
  .sbox input { font-size: 16px; }   /* 16px: iOS does not zoom the page on focus */
  .pinbtn { padding: 0 8px; }
  .pinbtn .pl { display: none; }
  .btn-line { height: 42px; padding: 0 10px; }
  .btn-line .sl-word { display: none; }
  .iconbtn { width: 42px; height: 42px; }
  .row2 { height: auto; display: block; padding: 0; border-top: 0; background: #fff; }
  /* no fade mask here: a mask would also clip the fixed coach tip inside the row */
  .qrow { display: flex; gap: 6px; overflow-x: auto; padding: 0 10px 10px; scrollbar-width: none; }
  .qrow::-webkit-scrollbar { display: none; }
  .query { border: 0; height: auto; overflow: visible; gap: 6px; background: none; }
  .qseg { border: 1px solid var(--line-2); border-radius: var(--r); height: 38px; min-width: 0; padding: 0 11px; flex-direction: row; align-items: center; flex: none; }
  .qseg .k { display: none; }
  .qseg .v { font-size: 13.5px; }
  .fpill { height: 38px; padding: 0 12px; font-size: 13.5px; flex: none; }
  .dsum {
    align-items: center; gap: 6px; width: 100%; height: 40px; padding: 0 10px 0 5px; border: 1px solid var(--accent);
    background: var(--accent-soft); border-radius: var(--r); font-weight: 600; font-size: 13.5px; white-space: nowrap;
    overflow: hidden; text-align: left;
  }
  .dsum .letter { width: 22px; height: 22px; }
  .dsum .dpart { display: flex; align-items: center; gap: 5px; min-width: 0; }
  .dsum .dpart b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
  .dsum .lim { color: var(--accent); flex: none; }
  .dsum .more { margin-left: auto; color: var(--accent); flex: none; font-weight: 700; padding-left: 6px; }
  .coach {
    position: fixed; left: 10px; right: 10px; max-width: none; top: calc(var(--top) + 8px); z-index: 16; display: block;
    padding: 9px 34px 9px 12px; border-left: 0; border-radius: 8px; background: var(--accent); color: #fff; font-size: 13.5px; box-shadow: var(--shadow);
  }
  .coach b { color: #fff; }
  .coach button { position: absolute; right: 6px; top: 6px; color: #fff; }
  .coach button:hover { background: rgba(255, 255, 255, .15); }
  .dd { position: fixed; left: 0; right: 0; top: 58px; bottom: 0; width: auto; min-width: 0; border-radius: 0; max-height: none; border: 0; border-top: 1px solid var(--line); padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .pop {
    left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto !important; border-radius: 16px 16px 0 0;
    max-height: 80vh; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); border-bottom: 0;
  }
  .pop::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 0 auto 10px; }
  .togs { gap: 4px; }
  .tog { height: 58px; font-size: 13px; }
  .tog small { font-size: 10.5px; }
  .seg button { height: 38px; }
  .fit-row .seg button { width: 32px; height: 30px; }
  .near-row select { height: 36px; }
  .legend {
    left: 0; right: 0; bottom: 0; width: auto; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-radius: 14px 14px 0 0; border-bottom: 0; max-height: 40vh;
  }
  .lg-title { font-size: 13px; }
  .lg-sub, .lg-row, .lmore { display: none; }
  .lg-est { display: inline; }
  .lg-cells { margin-top: 6px; }
  .lg-cells .sw { height: 9px; }
  .tint { margin-top: 6px; padding-top: 6px; }
  .drawer {
    left: 0; width: auto; top: auto; height: 62vh; border-radius: 16px 16px 0 0; border-left: 0;
    box-shadow: 0 -8px 30px rgba(20, 24, 32, .2); z-index: 30;
  }
  .drawer::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 8px auto 0; flex: none; }
  .dclose { top: 14px; right: 10px; }
  .dscroll { padding: 8px 16px 10px; }
  .dtitle { font-size: 21px; }
  .walks { gap: 4px; }
  .walks .num { font-size: 16px; }
  .fit-list li { grid-template-columns: minmax(0, 1fr) 56px auto; }
  .dfoot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); gap: 10px; }
  .dfoot .btn { font-size: 14px; }
  .pinbar { top: calc(var(--top) + 10px); font-size: 13px; }
  .toast { bottom: 96px; }
  .sl-panel { left: 0; right: 0; top: auto; bottom: 0; max-height: 72vh; border-radius: 16px 16px 0 0; z-index: 31; }  .sl-help { display: none; }
  .attrib { bottom: auto; top: calc(var(--top) + 2px); right: 4px; font-size: 9.5px; max-width: 70vw; background: rgba(255, 255, 255, .7); white-space: normal; }
  .attrib-more { display: none; }
  .maplibregl-ctrl-bottom-right { bottom: 96px; }
  body.drawer-open .attrib { right: 4px; max-width: 60vw; }
}