/* 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;
}
/* the search gives way first (shrink 6) down to its min-width, then the chips shorten their names
   (25 Oct 2026: two chips at 1440 px scrolled A's name out of view) */
.search { position: relative; flex: 0 6 420px; min-width: 260px; margin-left: 4px; } /* 260: room for Share's icon, 1 Nov 2026 */
.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; }
.qback, .dd-scrim { display: none; } /* phone only, while the list is open (the phone block below) */
.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, .btn-line.open { border-color: var(--ink-3); }
/* Share (1 Nov 2026), an icon on every screen: with its word the top row overflowed by 15 px at 1440 px with
   two destinations; as an icon, with the search box down to 260 px, the chips fit as they did before Share */
#sharebtn { width: 36px; padding: 0; justify-content: center; }
.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; }
/* chips give way by shortening their names (an ellipsis), never by scrolling the row: at 1440 px two
   chips used to scroll A's name out of view ("lborn Circus", 25 Oct 2026). The letter, the limit and
   the x keep their size; the row still scrolls only when even the shortened names do not fit. */
.chip {
  display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 6px 0 5px; flex: 0 1 auto; min-width: 0;
  border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--r);
  white-space: nowrap; font-weight: 600;
}
.chip .budget, .chip .x { flex: none; }
.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; min-width: 3.5em; 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; }
/* the tip's tour offer (tour.js): a real button, not the round dismiss */
.coach .coach-go {
  width: auto; height: 28px; padding: 0 12px; border-radius: 6px; white-space: nowrap;
  background: var(--accent); color: #fff; font: 600 13px/1 var(--sans);
}
.coach .coach-go:hover { background: var(--accent-2); }
.tour-again { margin: 4px 0 2px; }

/* the walk-through (tour.js, Driver.js 1.9.0) in the app's own type and colours */
.driver-popover.fyc-tour { font-family: var(--sans); color: var(--ink); border-radius: 10px; padding: 16px 16px 12px; max-width: 320px; box-shadow: var(--shadow); }
.driver-popover.fyc-tour .driver-popover-title { font: 700 16px/1.3 var(--sans); color: var(--accent); }
.driver-popover.fyc-tour .driver-popover-description { font: 400 14px/1.45 var(--sans); color: var(--ink-2); margin-top: 6px; }
.driver-popover.fyc-tour .driver-popover-progress-text { font-size: 12px; color: var(--ink-3); }
.driver-popover.fyc-tour .driver-popover-footer { margin-top: 14px; }
.driver-popover.fyc-tour .driver-popover-footer button {
  font: 600 13px/1 var(--sans); text-shadow: none; border-radius: 6px; padding: 8px 12px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink);
}
.driver-popover.fyc-tour .driver-popover-footer .driver-popover-next-btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.driver-popover.fyc-tour .driver-popover-footer .driver-popover-next-btn:hover { background: var(--accent-2); }
.driver-popover.fyc-tour .driver-popover-close-btn { color: var(--ink-3); }

/* ---------- 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 { background: linear-gradient(90deg, #2d0004, #8e0000, #c45500, #e2a50a, #f5f093); }
/* Fit and Bike vs PT (25 Oct 2026): their own map colours, in steps; the clear part of Fit is the map */
.sw-fit { background: linear-gradient(90deg, #620001 0 20%, #af2700 20% 40%, #d57e00 40% 60%, #ecce5d 60% 80%, transparent 80%); border: 1px solid var(--line); }
.sw-diff { background: linear-gradient(90deg, #1e3a5f, #a3bddb, #f2e6c2, #a9d6a9, #1d5a33); }
.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; }
.pop .slot > .popbody + .popbody + .popbody { margin-top: 18px; }
.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; }
/* batch C1 (B3 leftover): in Fit the chip column took the room "Secondary school" needed, so it wrapped
   to two lines at 1440 and on the iPhone 13; the names stay on one line and, in Fit only, the limit
   reads "≤ 10 min" (the popover's lede already says it is a walk limit) */
.near-row label { white-space: nowrap; min-width: 0; }
body.fit-mode .near-row .walk .wk { display: none; }
/* Cafés and pubs (batch B2, 25 Oct 2026): one choice, no dots, so no tick and no dot */
.near-cp { padding: 9px 0 8px; border-bottom: 1px solid var(--ground); }
.near-cp .cp-head { display: flex; align-items: center; gap: 10px; }
.near-cp label { flex: 1; font-weight: 600; cursor: pointer; }
.near-cp .cp-sub { margin: 4px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.near-cp:not(.on) select { color: var(--ink-2); }
.near-cp.on select { border-color: var(--accent); color: var(--ink); font-weight: 600; }
/* ---------- batch B3 (25 Oct 2026): Fit weight chips in the filters, the Area dials, the legend dial ---------- */
/* one chip per filter row, shown in Fit only: tap cycles Off -> x1 -> x2 -> Must (fit.js), the state in words */
.imp-slot { flex: none; display: inline-flex; }
/* in Fit the Near and Area rows keep an empty chip column, so the walk limits and dials line up */
body.fit-mode .near-row .imp-slot, body.fit-mode .area-row .imp-slot { width: 86px; justify-content: flex-end; }
body.fit-mode .near-row .imp-slot[hidden], body.fit-mode .area-row .imp-slot[hidden] { display: inline-flex !important; visibility: hidden; }
.imp {
  height: 26px; padding: 0 9px; border-radius: 13px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  border: 1px solid var(--accent); color: var(--accent); background: #fff;
}
.imp .imp-k { font-weight: 500; color: var(--ink-2); }
.imp-x2 { background: var(--accent-soft); }
.imp-must { background: var(--accent); color: #fff; }
.imp-must .imp-k { color: #cfdbea; }
.imp-off { border-color: var(--line-2); color: var(--ink-3); border-style: dashed; }
.fit-hint { margin: -6px 0 10px; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.imp-line { margin-top: 10px; }
.imp-line .imp-slot:empty { display: none; }
.cost-top { display: flex; align-items: center; gap: 8px; }
.cost-top .cost-head { flex: 1; min-width: 0; }
.area { display: flex; flex-direction: column; }
.area-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ground); }
/* B3b: a row reads as one sentence, "Quieter than [20%] of London"; the select holds the step only */
.area-row label { flex: none; display: flex; gap: 10px; align-items: center; font-weight: 600; cursor: pointer; white-space: nowrap; }
.area-row input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; flex: none; }
.area-row select { flex: none; width: auto; min-width: 74px; }
.area-row .area-of { flex: 1; font-weight: 600; white-space: nowrap; }
.area-row:not(.on) select, .area-row:not(.on) .area-of { color: var(--ink-2); }
.area-row:not(.on) select { opacity: .6; }
.area-hint .hl { display: block; margin-top: 5px; }
.area-hint .hl b { color: var(--ink); font-weight: 600; }
.area-row.on select { border-color: var(--accent); font-weight: 600; }
/* batch C1: the switch at the top of Area, "Compare with [All of London | Places in your reach]" */
.area-ref { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.area-ref-k { flex: none; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.area-ref .seg { flex: 1; min-width: 0; }
.area-small { margin: 4px 0 2px; color: var(--ink-2); font-weight: 600; }
/* in Fit the weight chip shares the row: "Cleaner air than [50%] of your reach ×1" needs the room on an
   iPhone 13 (it ran 9 px past the sheet with 10 px gaps) */
body.fit-mode .area-row { gap: 6px; }
body.fit-mode .area-row label { gap: 8px; }
body.fit-mode .area-row select { min-width: 66px; } /* still 20 px clear of "90%" and the arrow */
.drow .imp-slot { grid-column: 2 / 4; justify-self: start; }
.drow .imp-slot[hidden] { display: none; }
/* the legend's dial: the current view's colour threshold, above Tint */
.lg-dial { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--ground); font-size: 12.5px; color: var(--ink-2); }
.lg-dial .dial-w { flex: 1 1 100%; }
.lg-dial .dial-w b { color: var(--ink); }
.lg-dial input { flex: 1; height: 18px; min-width: 120px; }
.lg-dial .dial-off { font-size: 12px; padding: 2px 6px; }
/* the details panel: the nearest schools in Ofsted's words, and the Area values */
.school-lines { margin-top: 8px; }
.school { display: grid; grid-template-columns: 116px 1fr; gap: 0 10px; padding: 5px 0; border-top: 1px solid var(--ground); font-size: 13px; line-height: 1.4; }
.school .sk { grid-row: 1 / 3; font-weight: 600; color: var(--ink-2); }
.school .sn b { font-weight: 600; }
.school .so { color: var(--ink-2); font-size: 12.5px; }
.school .so a { color: var(--accent); font-weight: 600; text-decoration: none; }
.school.ok .sk { color: var(--accent); }
.school.bad .sk, .school.bad .sn { color: var(--over); }
.area-line { margin: 7px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink); }
.area-line:empty { display: none; }
.area-line.ok { color: var(--accent); }
.area-line.bad { color: var(--over); }
.cafe-line { margin: 7px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink); }
.cafe-line.ok { color: var(--accent); }
.cafe-line.bad { color: var(--over); }
.popfoot { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--ground); }
/* Share's menu (Mark, 1 Nov 2026): one row per thing to share, an icon, what it is, then its buttons */
#pop-share h3 { margin-bottom: 10px; }
.shr { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--ground); }
.shr-i { flex: none; color: var(--accent); margin-top: 1px; }
.shr-t { min-width: 0; }
.shr-t b { display: block; font-weight: 700; }
.shr-t small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.shr-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.shr-a .btn-line { height: 34px; padding: 0 12px; color: var(--accent); }
.shr-a .btn-line[hidden] { display: none; }
.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); }
/* "Same limit for all" (chip editor + phone sheet): a quiet checkbox line, no new buttons (24 Oct 2026) */
.samelim { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.samelim input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; flex: none; }
#pop-dests .samelim { margin: 0 0 4px; }

/* ---------- 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; }
/* batch C1 (B3 leftover): in Bike vs PT a step the map hides (under the minimum gap) keeps its own colour
   under white hatching with an outline, instead of 22 % opacity, which made the pale "same" swatch vanish
   on the white card; every Bike vs PT swatch gets a hairline so the pale step reads when shown too */
.lg-cells.diff .sw { box-shadow: inset 0 0 0 1px rgba(27, 29, 34, .2); }
.lg-cells.diff .cell.dimmed .sw { opacity: 1; position: relative; box-shadow: none; }
.lg-cells.diff .cell.dimmed .sw::after { /* the swatch's colour is inline, so the hatching is an overlay */
  content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(27, 29, 34, .55);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .72) 0 2px, transparent 2px 5px);
}
.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; }
.dgrab { display: none; } /* the phone sheet's handle; see the phone block */
.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); }
/* PT when it is not a picked mode: there for comparison, and the header says so (24 Oct 2026) */
table.times th small { display: block; font-weight: 500; font-size: 11px; color: var(--ink-3); }
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; }
.journey .jpart h4.jalt { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--ground); white-space: nowrap; }
.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); } /* clear of the legend; still one line */

/* ---------- shortlist page ---------- */
/* the list scrolls inside #sl-body, not the panel (25 Oct 2026): with the panel itself the scroller,
   Chromium treated it as an opaque layer and stopped drawing a strip of the map under the bar (a
   body-coloured box on the phone, also on production). Tested: the box goes when the panel does not
   scroll, or when its white is not fully opaque; this keeps the white and moves the scroll. */
.sl-panel {
  position: fixed; left: 20px; right: 20px; top: calc(var(--top) + 12px); z-index: 28;
  max-height: calc(100vh - var(--top) - 32px); overflow: hidden; padding: 14px 16px;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
}
#sl-body { overflow: auto; min-height: 0; flex: 1 1 auto; }
.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: 0; 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;
}
/* a price over the Buying budget (the Price column follows the Living costs pick, 25 Oct 2026) */
.sl-table td.over { color: var(--over); }
.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 p.accuracy { margin-top: 4px; color: var(--ink); font-weight: 600; }
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: 9.5px; color: #4a4d52; /* 9.5: every credit whole at 1440 */
  background: rgba(255, 255, 255, .8); border-radius: 4px; padding: 1px 6px; max-width: calc(100vw - 340px); /* the legend ends at 330 px */
  display: flex; white-space: nowrap; /* one line; full credits in About the data */
}
/* the credits give way (ellipsis) when the strip is narrow; "About the data" always shows whole
   (24 Oct 2026: with the details panel open the strip used to wrap to two lines) */
.attrib-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.attrib-end { flex: none; }
.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; }
  .coach .coach-go, .coach .coach-go:hover { background: #fff; color: var(--accent); }
}
@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; }
  #sharebtn { width: 42px; }
  .shr-a .btn-line { height: 40px; padding: 0 14px; } /* a thumb's size */
  .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); }
  .coach .coach-go, .coach .coach-go:hover { position: static; display: block; margin-top: 8px; height: 32px; background: #fff; color: var(--accent); }
  /* the list ends at its content, over the map dimmed by .dd-scrim; a tap there, the back arrow (in the
     magnifier's place) or the phone's own back closes it (Mark, 1 Nov 2026 23:51: "no way to just go back") */
  .dd {
    position: fixed; left: 0; right: 0; top: 58px; bottom: auto; width: auto; min-width: 0; border-radius: 0 0 14px 14px;
    max-height: calc(100vh - 58px); max-height: calc(100dvh - 58px); border: 0; border-top: 1px solid var(--line);
    box-shadow: 0 10px 24px rgba(15, 18, 24, .18); padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .search.open .dd-scrim { display: block; position: fixed; left: 0; right: 0; top: 58px; bottom: 0; z-index: 39; background: rgba(15, 18, 24, .32); }
  .search.open .qback { display: grid; place-items: center; flex: none; width: 34px; height: 40px; margin: 0 -4px 0 -6px; color: var(--ink); border-radius: 8px; }
  .search.open .sbox > svg { display: none; }
  .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, .near-cp select, .area-row select { height: 36px; }
  /* batch B3: the weight chip keeps a row to one line at 390 px: the state word only */
  .imp .imp-k { display: none; }
  .imp { height: 30px; min-width: 44px; padding: 0 8px; }
  body.fit-mode .near-row .imp-slot, body.fit-mode .area-row .imp-slot { width: 52px; }
  .near-row { gap: 8px; }
  .area-row { gap: 8px; }
  .school { grid-template-columns: 1fr; }
  .school .sk { grid-row: auto; }
  .lg-dial { margin-top: 6px; padding-top: 6px; }
  .lg-dial .dial-w { font-size: 12px; }
  .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-row.lg-note { display: flex; } /* "Turned on PT and Bike": the phone keeps this one line */
  .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; transition: height .2s ease;
  }
  /* the handle is a real control (24 Oct 2026, Mark: "no way to reduce the size of the menu so I can
     see the map in larger screen"): tap or swipe down = a short panel (name, verdict, Save); tap or
     swipe up = all the details. drawer.js reads --peek to keep the spot in view above it. */
  :root { --peek: 250px; } /* handle + name + verdict (181 px) + the Save row (65 px), measured on an iPhone 13 */
  .dgrab { display: block; flex: none; width: 100%; height: 26px; touch-action: none; cursor: grab; border-radius: 16px 16px 0 0; }
  .dgrab::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 10px auto 0; }
  .dgrab:focus-visible { outline-offset: -4px; }
  .drawer.peek { height: var(--peek); }
  .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: calc(100vw - 8px); background: rgba(255, 255, 255, .7); white-space: normal; display: block; text-align: right; } /* full width: the base-map credit and About the data still on one line at 390 px */
  .attrib-txt { overflow: visible; }
  .attrib-more { display: none; }
  .maplibregl-ctrl-bottom-right { bottom: 96px; }
  body.drawer-open .attrib { right: 4px; max-width: calc(100vw - 8px); }
}