/* AllCoach BETA components. Every colour, size, space, radius and shadow comes from tokens.css.
   Sections follow the component templates in templates_beta/beta/components/. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body.b { margin: 0; background: var(--bg); color: var(--text); font-family: var(--f-body); font-size: var(--fs-base); line-height: 1.55; font-weight: var(--fw-body); }
.b a { color: var(--brand-ink); text-underline-offset: 3px; }
.b h1, .b h2, .b h3 { margin: 0; color: var(--text); text-wrap: balance; }
.b button { font: inherit; }
.b :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.b p { margin: 0; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--panel); padding: var(--s2) var(--s3); z-index: 50; }
.skip:focus { left: var(--s2); }
.muted { color: var(--muted); font-weight: var(--fw-semi); }
.ic { width: 18px; height: 18px; flex: none; }
main:focus { outline: none; }

/* ---------- header (components/header.html) ---------- */
.site-head { background: var(--panel); border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; z-index: 30; }
.site-head-in { display: flex; align-items: center; gap: var(--s5); min-height: 64px; position: relative; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.logo-mark { width: 34px; height: 34px; flex: none; }
.wm { font-weight: var(--fw-black); font-size: 23px; letter-spacing: -.02em; line-height: 1; }
.wm-a { color: var(--navy); } .wm-c { color: var(--brand); }
.tagline { display: block; font-size: 10.5px; font-weight: var(--fw-semi); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.nav { display: flex; gap: var(--s1); margin-left: auto; align-items: center; }
.b .nav a { color: var(--text); text-decoration: none; font-weight: var(--fw-semi); font-size: 14px; padding: var(--s2) 11px; border-radius: var(--r-sm); }
.b .nav a:hover { background: var(--surface); }
.b .nav a[aria-current] { color: var(--brand-ink); }
.b .saved-link { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--border); border-radius: var(--r-pill); padding: 7px 13px; margin-left: 6px; color: var(--text); text-decoration: none; font-weight: var(--fw-semi); font-size: 14px; }
.ic-heart { color: var(--heart); fill: currentColor; stroke: none; width: 17px; height: 17px; }
.saved-n { background: var(--heart); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold); border-radius: var(--r-pill); min-width: 19px; height: 19px; display: inline-grid; place-items: center; padding: 0 5px; }
.menu-btn { display: none; background: none; border: 1.5px solid var(--border); border-radius: var(--r-sm); color: var(--text); width: 44px; height: 40px; align-items: center; justify-content: center; cursor: pointer; }
.saved-m { display: none !important; }

/* ---------- hero (components/hero.html) ---------- */
.hero { position: relative; color: var(--hero-ink); overflow: hidden; background: linear-gradient(120deg, var(--hero-plain-a), var(--hero-plain-b)); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.hero-shade { position: absolute; inset: 0; }
.hero-photo .hero-shade { background: linear-gradient(90deg, var(--hero-shade) 0%, var(--hero-shade) 30%, var(--hero-shade-2) 75%); }
.hero-in { position: relative; padding-top: 30px; padding-bottom: 96px; }
.crumbs ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-sm); opacity: .92; }
.crumbs li + li::before { content: "›"; margin-right: 6px; }
.b .crumbs a { color: var(--hero-ink); }
.hero h1 { color: var(--hero-ink); font-size: var(--fs-h1); font-weight: var(--fw-black); letter-spacing: -.02em; line-height: 1.08; max-width: 22ch; }
.hero-lead { max-width: 40rem; font-size: var(--fs-lg); margin-top: 14px !important; color: var(--hero-lead); }
.hero-lead .price-link, .hero-sub .price-link { color: var(--hero-ink); font-weight: var(--fw-bold); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.hero-lead .price-link:hover, .hero-sub .price-link:hover { text-decoration-thickness: 3px; }
.feats { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, max-content)); gap: 10px 26px; }
.feats li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); font-weight: var(--fw-semi); line-height: 1.3; max-width: 13rem; }
.feat-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); display: grid; place-items: center; }
.credit { margin: var(--s2) 4px 0 !important; font-size: var(--fs-xs); color: var(--muted); text-align: right; line-height: 1.35; }
.b .credit a, .b .pcredit a { color: inherit; }

/* ---------- panels ---------- */
.panel { background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--shadow); border: 1px solid var(--border-soft); }

/* ---------- finder panel (components/finder.html, chips.html) ---------- */
.finder { position: relative; margin-top: -58px; z-index: 2; }
.finder-panel { padding: 18px var(--s5) var(--s4); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pc-row { display: flex; gap: 10px var(--s5); align-items: center; flex-wrap: wrap; margin: 0; }
.pc-label { font-weight: var(--fw-bold); font-size: 14px; white-space: nowrap; }
.pc-box { flex: 1 1 300px; min-width: 0; display: flex; align-items: center; border: 2px solid var(--border); border-radius: 12px; background: var(--surface); padding: 0 5px 0 12px; height: 50px; }
.pc-box:focus-within { border-color: var(--brand); }
.pc-box > .ic { color: var(--brand); }
.pc-select { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; padding: 0 4px; }
.pc-select:focus { outline: none; }
.chips-when { margin-top: 8px; }
.chips-lbl { align-self: center; font-weight: 600; margin-right: 2px; }
.pc-box input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-weight: var(--fw-bold); font-size: 16px; color: var(--text); padding: 0 10px; height: 100%; }
.pc-box input::placeholder { font-weight: var(--fw-body); color: var(--muted); }
.pc-box input:focus { outline: none; }
.pc-clear { color: var(--muted); width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; }
.pc-clear:hover { background: var(--border-soft); }
.pc-go { border: 0; background: var(--btn); color: var(--btn-ink); font-weight: var(--fw-bold); border-radius: 9px; height: 38px; padding: 0 16px; cursor: pointer; margin-left: 4px; }
.pc-go:hover { background: var(--btn-hover); }
.pc-note { font-size: 13px; color: var(--muted); flex: 1 1 260px; min-width: 0; }
.pc-err { color: var(--warn); font-weight: var(--fw-semi); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.b .chip { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--border); background: var(--panel); color: var(--text); border-radius: var(--r-pill); padding: 7px 13px; font-weight: var(--fw-semi); font-size: var(--fs-md); cursor: pointer; min-height: 38px; text-decoration: none; }
.b .chip:hover { border-color: var(--brand); }
.chip-n { font-size: 12px; font-weight: var(--fw-bold); color: var(--muted); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"], .chip[aria-current] { background: var(--chip-on); border-color: var(--chip-on) !important; color: var(--chip-on-ink) !important; }
.chip[aria-pressed="true"] .chip-n, .chip[aria-current] .chip-n { color: var(--chip-on-ink); opacity: .8; }
.chip-off { opacity: .5; cursor: default; }
.chip-sep { width: 1px; align-self: stretch; background: var(--border); margin: 4px 2px; }
.no-js .chip-f, .no-js .chip-sep { display: none; }

/* ---------- body grid ---------- */
.b-main { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w); gap: 28px; padding-top: var(--s6); padding-bottom: var(--s8); align-items: start; }
.b-side { display: grid; gap: var(--s5); }

/* ---------- list + sections (components/sections.html) ---------- */
.list-head { display: flex; flex-wrap: wrap; gap: 10px var(--s4); align-items: center; justify-content: space-between; margin-bottom: 14px; }
.list-head h2 { font-size: var(--fs-xl); font-weight: var(--fw-black); }
.list-sub { display: block; font-size: 13px; color: var(--muted); font-weight: var(--fw-body); margin-top: 2px; }
.sort { display: inline-flex; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 10px; padding: 3px; }
.b .sort a { color: var(--body); text-decoration: none; font-weight: var(--fw-semi); font-size: 13px; padding: 6px 11px; border-radius: var(--r-sm); }
.b .sort a[aria-current] { background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm); }
.notice { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r); padding: var(--s3) 14px; font-size: 14px; margin: 0 0 var(--s4) !important; }
.grp { margin: 0 0 22px; }
.grp-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--border-soft); }
.grp-t { font-size: var(--fs-lg); font-weight: var(--fw-black); }
.grp-n { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--muted); font-variant-numeric: tabular-nums; }
.grp-s { font-size: var(--fs-sm); color: var(--muted); flex-basis: 100%; }
.grp-near .grp-h { border-bottom-color: var(--near); }
.grp-near .grp-t { color: var(--near); }
.grp-home .grp-h { border-bottom-color: var(--brand); }
details.grp > summary { list-style: none; cursor: pointer; }
details.grp > summary::-webkit-details-marker { display: none; }
.grp-sum .btn-o { width: 100%; justify-content: center; }
.grp-sum-h { display: none; }
details.grp[open] .grp-sum .btn-o { display: none; }
details.grp[open] .grp-sum-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--border-soft); }
.cards { display: grid; gap: var(--s3); list-style: none; padding: 0; margin: 0; }
.more { display: flex; justify-content: center; margin-top: var(--s4); }
.b .btn-o { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s5); border-radius: 10px; border: 2px solid var(--brand); color: var(--brand-ink); background: transparent; font-weight: var(--fw-bold); cursor: pointer; text-decoration: none; }
.b .btn-o:hover { background: var(--lilac); }
.empty { padding: 28px; text-align: center; color: var(--muted); }
.fine { font-size: var(--fs-sm); color: var(--muted); margin: var(--s4) 2px 0 !important; }
[hidden] { display: none !important; }

/* ---------- trip card (components/trip_card.html) ---------- */
.card { display: grid; grid-template-columns: var(--tile-w) minmax(0, 1fr) auto; gap: var(--s4); background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--r); padding: 14px; box-shadow: var(--shadow-sm); }
.card-dtext { grid-template-columns: minmax(0, 1fr) auto; }
.card-body { min-width: 0; display: grid; gap: 5px; align-content: start; }
.card-date { font-size: 14px; font-weight: var(--fw-black); color: var(--text); letter-spacing: .01em; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; padding: 3px var(--s2); border-radius: 6px; background: var(--lilac); color: var(--brand-ink); }
.badge-h { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.badge-t { background: var(--near-tint); color: var(--near); }
.card-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.3; }
.b .card-title a { color: var(--text); text-decoration: none; }
.b .card-title a:hover { text-decoration: underline; }
.meta { display: flex; align-items: flex-start; gap: 7px; font-size: var(--fs-md); color: var(--body); line-height: 1.4; }
.meta .ic { width: 15px; height: 15px; margin-top: 2px; color: var(--muted); }
.meta b { color: var(--text); font-weight: var(--fw-bold); }
.meta-home .ic { color: var(--brand); }
.mi { display: inline-block; font-weight: var(--fw-bold); font-size: 12px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--surface); color: var(--text); border: 1px solid var(--border-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mi-near { background: var(--near-tint); color: var(--near); border-color: transparent; }
.op { display: flex; align-items: center; gap: var(--s2); font-size: 13px; font-weight: var(--fw-semi); color: var(--body); margin-top: 3px !important; }
.op-lg { width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center; font-size: 10.5px; font-weight: var(--fw-black); color: #fff; }
.op-c0 { background: var(--op0); } .op-c1 { background: var(--op1); } .op-c2 { background: var(--op2); } .op-c3 { background: var(--op3); }
.op-c4 { background: var(--op4); } .op-c5 { background: var(--op5); } .op-c6 { background: var(--op6); } .op-c7 { background: var(--op7); }
.card-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 10px; min-width: 128px; }
.price { text-align: right; line-height: 1.1; }
.price-from, .price-pp { font-size: 11.5px; color: var(--muted); font-weight: var(--fw-semi); }
.price-amt { display: block; font-size: var(--fs-price); font-weight: var(--fw-black); color: var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.card-acts { display: flex; gap: var(--s2); align-items: center; }
.b .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--hit); padding: 0 var(--s4); border-radius: 10px; background: var(--btn); color: var(--btn-ink); font-weight: var(--fw-bold); font-size: 14px; text-decoration: none; white-space: nowrap; }
.b .btn:hover { background: var(--btn-hover); }
.heart { width: var(--hit); height: var(--hit); border-radius: 10px; border: 1.5px solid var(--border); background: var(--panel); color: var(--muted); display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; }
.heart .ic { width: 20px; height: 20px; }
.heart[data-saved="1"] { color: var(--heart); border-color: var(--heart); }
.heart[data-saved="1"] .ic { fill: currentColor; }
.card-pic { position: relative; border-radius: 12px; overflow: hidden; }
.card-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-pic .tile { position: absolute; left: 6px; top: 6px; min-height: 0; padding: 4px 8px; }

/* ---------- trip row (components/trip_row.html): mock v4 = the live list row (app.css .dr) ported; one white panel per list ---------- */
.rows { list-style: none; margin: 0; padding: 4px 16px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.row { position: relative; padding: var(--row-pad) 0; border-top: 1px solid var(--row-line); font-size: var(--row-fs); line-height: 1.4; color: var(--text); }
.rows > .row:first-child, .rows > .mhead + .row, .rows > .row.is-first { border-top: 0; }
.mhead { padding: 14px 0 0; border-top: 1px solid var(--row-line); font-size: var(--row-small); font-weight: var(--fw-black); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rows > .mhead:first-child, .rows > .mhead.is-first { border-top: 0; padding-top: 12px; }
.row-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.row-date { font-size: var(--row-date); font-weight: var(--fw-bold); color: var(--navy); }
.row-kind, .row-more { font-weight: var(--fw-semi); color: var(--muted); }
.row-also { display: block; font-size: var(--row-small); font-weight: var(--fw-body); color: var(--muted); }
.row-top > .row-date { min-width: 0; }
.row-pr { display: flex; align-items: center; gap: 8px; flex: none; }
.row-price { font-size: var(--row-price); font-weight: var(--fw-bold); line-height: 1.5; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.row-save { position: relative; z-index: 2; padding: 3px 11px; border: 1px solid var(--brand); border-radius: var(--r-sm); background: transparent; color: var(--brand-ink); font-size: var(--row-small); font-weight: var(--fw-bold); line-height: 1.5; cursor: pointer; }
.row-save::after { content: ""; position: absolute; inset: -11px -4px; }
.row-save[data-saved="1"] { background: var(--brand); color: #fff; }
.row-title { margin: 6px 0 4px; font-size: var(--row-title); font-weight: var(--fw-bold); line-height: 1.3; }
.b .row-title a { color: var(--brand); text-decoration: none; overflow-wrap: anywhere; }
.b .row-title a:hover, .b .row-title a:focus-visible { text-decoration: underline; }
.row-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.row:hover .row-title a { text-decoration: underline; }
.row-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 5px 0 !important; }
.row-flag { padding: 1px 8px; border-radius: var(--r-pill); font-size: var(--row-small); font-weight: var(--fw-bold); line-height: 1.33; white-space: nowrap; }
.row-flag-near { background: var(--near-tint); color: var(--near); }
.row-flag-cheap { background: var(--lilac); color: var(--brand-ink); }
.row-line { margin-top: 4px !important; color: var(--muted); }
.row-stop { display: flex; gap: 4px; align-items: flex-start; color: var(--body); }
.row-stopname { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.row-mi { flex: none; white-space: nowrap; }
.row-near { color: var(--near); font-weight: var(--fw-bold); }
.row-home { color: var(--body); }
.row-note { color: var(--body); font-weight: var(--fw-bold); }          /* the solo travellers page: what the company says about the single supplement */
/* busy fold (beta/dates.py): a folded event's month summary, a folded trip's one row, the group views their chips open */
.row-gv { position: relative; z-index: 2; }
.b .row-gv a, .b .gv-back { color: var(--brand-ink); font-weight: var(--fw-bold); }
.row-sum { background: var(--surface); margin: 8px -16px 0; padding-left: 16px; padding-right: 16px; border-top: 0; border-left: 4px solid var(--brand); }
.row-sum .row-title a::after { content: none; }
.nights { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px !important; }
.b .night-btn { padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--panel); color: var(--text); font-size: var(--row-small); font-weight: var(--fw-bold); text-decoration: none; white-space: nowrap; }
.b .night-btn:hover { border-color: var(--brand); color: var(--brand-ink); }
.gview { display: none; margin: 0 0 22px; }
.gview.on, .gview:target, .gview:has(:target) { display: block; }
.list[data-gmode] .lists, .list[data-gmode] .gview:not(.on) { display: none; }
.gv-back { margin-left: auto; font-size: var(--fs-sm); }
.night h4.row-title { color: var(--text); }
.night-ops { list-style: none; margin: 6px 0 0; padding: 0; }
.night-ops li { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; padding: 6px 0; border-top: 1px dashed var(--row-line); }
.night-ops li:first-child { border-top: 0; }
.b .nop-op { color: var(--brand); font-weight: var(--fw-bold); text-decoration: none; }
.b .nop-op:hover { text-decoration: underline; }
.nop-pk { color: var(--body); min-width: 0; flex: 1 1 160px; }
.nop-pr { margin-left: auto; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 901px) {
  .row { padding: var(--row-pad-d) 0; font-size: var(--row-fs-d); }
  .row-date { font-size: var(--row-date-d); }
  .row-price { font-size: var(--row-price-d); }
  .row-title { font-size: var(--row-title-d); }
}

/* ---------- date tile (components/date_tile.html) ---------- */
.tile { border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: var(--tile-w); text-align: center; line-height: 1.1; }
.tile-d { background: var(--day); color: var(--day-ink); }
.tile-h { background: var(--brk); color: var(--brk-ink); }
.tile-x { background: var(--xmas); color: var(--xmas-ink); }
.tile-dow { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.tile-day { font-size: var(--fs-tile); font-weight: var(--fw-black); letter-spacing: -.02em; }
.tile-mon { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- operators (components/operators.html) ---------- */
.ops { margin-top: 26px; }
.ops h2 { font-size: 17px; font-weight: var(--fw-black); margin-bottom: 10px; }
.oplist { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.b .oplist a { display: inline-block; font-size: 13px; font-weight: var(--fw-semi); padding: 5px 10px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--border-soft); color: var(--text); text-decoration: none; }
.b .oplist a:hover { border-color: var(--brand); }
.ops-more { margin-top: 10px; }
.ops-more > summary { list-style: none; }
.ops-more > summary::-webkit-details-marker { display: none; }
.ops-more[open] > summary { display: none; }

/* ---------- sidebar (components/sidebar.html) ---------- */
.side-panel { overflow: hidden; }
.about-img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; height: auto; }
.pbody { padding: var(--s4) 18px 18px; display: grid; gap: 10px; }
.pbody h2 { font-size: 17px; font-weight: var(--fw-black); }
.pbody p { color: var(--body); font-size: 14px; }
.pbody h3 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: var(--fw-bold); margin-top: 4px; }
.sights { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; font-size: 14px; }
.sights li { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.sights li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--brand); transform: translateY(-1px); }
.sights .muted { font-size: var(--fs-sm); font-weight: var(--fw-body); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--s3); font-size: var(--fs-md); margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: var(--fw-bold); color: var(--text); font-variant-numeric: tabular-nums; }
.pbody .pcredit { font-size: 10.5px; color: var(--muted); line-height: 1.35; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.b .ptile { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 2; text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--hero-plain-a), var(--hero-plain-b)); }
.ptile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ptile span { position: absolute; inset: auto 0 0 0; padding: 18px 9px 7px; background: linear-gradient(transparent, rgba(5,12,24,.85)); font-weight: var(--fw-bold); font-size: 13px; line-height: 1.2; }
.ptile small { display: block; font-weight: var(--fw-semi); font-size: var(--fs-xs); opacity: .9; }

/* ---------- footer (components/footer.html) ---------- */
.site-foot { border-top: 1px solid var(--border-soft); background: var(--panel); }
.site-foot .wrap { padding-top: 28px; padding-bottom: 32px; display: grid; gap: var(--s5); font-size: 13px; color: var(--muted); }
.foot-trust { color: var(--body); }
.foot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.foot-grid h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text); margin-bottom: 6px; }
.b .foot-grid a { display: block; color: var(--body); text-decoration: none; padding: 3px 0; }
.b .foot-grid a:hover { color: var(--brand-ink); text-decoration: underline; }
.foot-small { font-size: 12px; }

/* ---------- tablet + phone ---------- */
@media (max-width: 900px) {
  .b-main { grid-template-columns: minmax(0, 1fr); }
  .nav { display: none; }
  .menu-btn { display: inline-flex; margin-left: var(--s2); }
  .saved-m { display: inline-flex !important; margin-left: auto; }
  .site-head.open .nav { display: flex; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; background: var(--panel); border-bottom: 1px solid var(--border-soft); padding: var(--s2) var(--gutter) 14px; gap: 2px; box-shadow: var(--shadow); }
  .site-head.open .nav .saved-d { display: none; }
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .tagline { display: none; }
  .hero-in { padding-top: 18px; padding-bottom: 84px; }
  .hero-lead { font-size: var(--fs-base); }
  .credit { text-align: left; }
  .b .chip { padding: 6px 11px; font-size: 13px; min-height: 36px; }
  .feats li { font-size: 12.5px; }
  .feat-ic { width: 32px; height: 32px; }
  .finder-panel { padding: 14px; }
  .pc-row { gap: 6px; }
  .pc-label { width: 100%; }
  .pc-box { flex-basis: 100%; }
  .card { grid-template-columns: var(--tile-w-sm) minmax(0, 1fr); gap: var(--s3); padding: var(--s3); }
  .card-dtext { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tile { min-height: 72px; border-radius: 10px; }
  .tile-day { font-size: 22px; }
  .tile-dow, .tile-mon { font-size: 10px; }
  .card-side { grid-column: 1 / -1; flex-direction: row; align-items: center; min-width: 0; border-top: 1px solid var(--border-soft); padding-top: 10px; }
  .price { text-align: left; white-space: nowrap; }
  .chips { flex-wrap: wrap; row-gap: 8px; }          /* browser shoppers 7 Nov 2026 (4 of 5): a sideways row looked cut off; every chip on screen */
  .chips::-webkit-scrollbar { display: none; }
  .b .chip { flex: none; }
  .price-amt { display: inline; font-size: 22px; }
  .card-title { font-size: 15.5px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- hero second line, link panels, quick answers (components/hero.html, sidebar.html) ---------- */
.hero-sub { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px !important; max-width: 40rem; font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--hero-lead); }
.hero-sub .ic { margin-top: 2px; }
.hero-note { max-width: 40rem; margin-top: 8px !important; font-size: var(--fs-sm); color: var(--hero-lead); }
.hero-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.linklist .muted { font-size: var(--fs-sm); font-weight: var(--fw-body); }
.main-panel { margin-top: var(--s6); }
.qa .pbody h3.qa-q { text-transform: none; letter-spacing: 0; font-size: 14.5px; color: var(--text); margin-top: 8px; }
.qa .pbody p { font-size: 14px; }

/* ---------- prose pages (pages/prose.html): the live content block in the beta shell; element styles only, scoped to .prose ---------- */
.hero-slim .hero-in { padding-top: 22px; padding-bottom: 70px; }
.prose-wrap { margin-top: -52px; position: relative; z-index: 2; padding-bottom: var(--s8); }
.prose { padding: 28px clamp(18px, 4vw, 44px) 32px; max-width: 860px; margin: 0 auto; color: var(--body); font-size: var(--fs-base); line-height: 1.65; overflow-wrap: break-word; }
.prose > * { max-width: 100%; }
.prose .container { max-width: none; padding: 0; margin: 0; }
.prose h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: var(--fw-black); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 14px; color: var(--text); }
.prose h2 { font-size: var(--fs-xl); font-weight: var(--fw-black); margin: 28px 0 8px; color: var(--text); }
.prose h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: 20px 0 6px; color: var(--text); }
.prose p { margin: 0 0 12px; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 14px; }
.prose li { margin: 4px 0; }
.prose a { color: var(--brand-ink); }
.prose strong { color: var(--text); }
.prose .lede, .prose .lead { font-size: var(--fs-lg); color: var(--text); }
.prose .muted, .prose small { color: var(--muted); }
.prose details { border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 10px 14px; margin: 0 0 10px; background: var(--surface); }
.prose details > summary { cursor: pointer; font-weight: var(--fw-bold); color: var(--text); }
.prose details[open] > summary { margin-bottom: 8px; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); margin: 0 0 16px; }
.prose td, .prose th { overflow-wrap: anywhere; }
@media (max-width: 600px) { .prose table { font-size: 12.5px; } .prose th, .prose td { padding: 6px 5px; } }
.prose th, .prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.prose th { color: var(--text); font-weight: var(--fw-bold); }
.prose img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.prose .panel, .prose section.panel { box-shadow: none; border: 0; background: transparent; padding: 0; margin: 0 0 18px; }
.prose .btn, .prose .button { display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 var(--s4); border-radius: 10px; background: var(--btn); color: var(--btn-ink); font-weight: var(--fw-bold); text-decoration: none; }
.prose .btn-outline { background: transparent; color: var(--brand-ink); border: 2px solid var(--brand); }
.prose .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.prose .print-only { display: none; }
.prose .crumbs, .prose .breadcrumbs, .prose nav[aria-label="Breadcrumb"] { display: none; }
.prose input, .prose select, .prose textarea { font: inherit; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: var(--r-sm); background: var(--panel); color: var(--text); }

/* ---------- trip page (pages/trip.html) ---------- */
.book-panel { padding: 18px var(--s5); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px var(--s5); align-items: center; }
.book-price { line-height: 1.1; }
.book-amt { font-size: 30px; font-weight: var(--fw-black); color: var(--text); letter-spacing: -.02em; }
.book-next { margin-top: 6px !important; font-size: 14px; color: var(--body); }
.book-go { display: flex; gap: 10px; align-items: center; }
.b .btn-lg { min-height: 50px; font-size: 15.5px; padding: 0 22px; }
.row-save.save-lg { padding: 10px 16px; font-size: 14px; }
.book-notes { grid-column: 1 / -1; display: grid; gap: 6px; font-size: 14px; background: var(--surface); border-radius: var(--r-sm); padding: 10px 12px; }
.book-trust { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--muted); }
.b-trip .b-col { display: grid; gap: var(--s4); align-content: start; }
.b-trip .b-side { align-content: start; }
.tpanel .pbody p { font-size: 14.5px; }
.tfacts { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tfacts > span { display: inline-flex; align-items: center; gap: 6px; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 14.5px; }
.ticks li { display: flex; gap: 8px; align-items: flex-start; }
.ticks .ic { color: var(--near); margin-top: 3px; width: 16px; height: 16px; }
.fold > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: "Show"; margin-left: auto; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--brand-ink); }
.fold[open] > summary::after { content: "Hide"; }
.fold-sm > summary { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-semi); margin-top: 4px; }
.inline-h { display: inline; }
.itin { padding-left: 1.2em; } .itin h3 { text-transform: none; letter-spacing: 0; font-size: 14.5px; color: var(--text); }
.rows-flat { padding: 0; border: 0; box-shadow: none; background: transparent; }
.drow { padding: 10px 0; }
.drow-pick { background: var(--lilac); margin: 0 -8px; padding: 10px 8px; border-radius: var(--r-sm); }
.row-flag-out { background: var(--surface); color: var(--warn); }
.stoplist { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; font-size: var(--fs-sm); }
.stops { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; font-size: 13.5px; }
.stops .stop { display: flex; gap: 8px; justify-content: space-between; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--row-line); }
.stops .stop:first-child { border-top: 0; }
.stop-name { min-width: 0; }
/* owner 27 Oct: the stop itself in normal weight (a long list read heavy in bold); the town after it stands out a little instead */
.stops .stop-name > strong { font-weight: var(--fw-regular, 400); }
.stops .stop-name > strong + .muted { color: var(--text); font-weight: var(--fw-semi); }
.stop-near .row-mi { color: var(--near); font-weight: var(--fw-bold); }
.pk-form { display: grid; gap: 6px; }
.pc-box-sm { height: 44px; flex: none; }
.pc-box-sm input { font-size: 15px; }
.pk-gh { margin-top: 10px !important; }
.sec-h { font-size: var(--fs-xl); font-weight: var(--fw-black); margin: 10px 0 12px !important; }
.more-links { margin-top: 12px !important; font-size: 14px; }
.trip-foot { display: grid; gap: 8px; font-size: 13px; color: var(--muted); }
.trip-foot .report-link { font-size: 13px; }
.tag-link { font-weight: var(--fw-bold); }
@media (max-width: 900px) {
  .b-trip .b-side { order: -1; }
  /* our own short fact list goes straight under the booking box on phones, ahead of dates and pick-ups; the operator's long text stays below them */
  .b-trip .b-col:has(> .about-facts) { display: contents; }
  .b-trip .b-col > .about-facts { order: -2; }
  .b-main.b-trip:has(.about-facts) { gap: var(--s4); }
}
@media (max-width: 600px) {
  .book-panel { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .book-go { flex-wrap: wrap; } .book-go .btn { flex: 1 1 auto; }
}
.prose svg { max-width: 100%; height: auto; }
@media (max-width: 600px) { .book-go .btn { white-space: normal; text-align: center; flex: 1 1 100%; } }

/* ---------- index pages (pages/index.html, components/index_parts.html) ---------- */
.idx { padding-top: var(--s6); padding-bottom: var(--s8); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.home .chips { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
.idx-sec .sec-h { margin-top: 0 !important; }
.tiles-wide { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.tiles-wide .ptile span { font-size: 15px; }
.hubcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.hubcard { padding: 16px 18px; display: grid; gap: 8px; align-content: start; box-shadow: var(--shadow-sm); }
.hubcard h3 { font-size: var(--fs-lg); font-weight: var(--fw-black); }
.b .hubcard h3 a { color: var(--text); text-decoration: none; }
.hubcard .muted { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.hubcard .linklist { list-style: decimal; padding-left: 1.2em; }
.hub-all { font-weight: var(--fw-bold); font-size: 14px; }
.idx-rows .row { padding: 12px 0; }
.idx-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); column-gap: 24px; }
.idx-links .row { border-top: 1px solid var(--row-line) !important; }
.row-when { color: var(--text); font-weight: var(--fw-semi); }
.letters { display: flex; flex-wrap: wrap; gap: 6px; }
.b .chip-letter { min-height: 34px; min-width: 38px; justify-content: center; padding: 4px 10px; }
.sel { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--fw-semi); }
.sel select { font: inherit; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: var(--r-sm); background: var(--panel); color: var(--text); }
.idx-count { margin: 0 !important; }
.linklist-cols { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 18px; }

/* ---------- home, search, saved ---------- */
.hero-home .hero-in { padding-bottom: 110px; }
.hero-kicker { font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--hero-lead); margin-bottom: 10px !important; }
.hero-home h1 { max-width: 20ch; }
.home-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s6); align-items: start; }
.steps { list-style: decimal; padding-left: 1.2em; }
.chips-active { gap: 6px; }
.b .chip-x { background: var(--lilac); border-color: transparent; }
.chip-x .ic { width: 14px; height: 14px; }
.sl-panel { padding: 22px; max-width: 860px; margin: 0 auto; display: grid; gap: 14px; }
.sl-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sl-acts { display: flex; gap: 12px; align-items: center; margin-top: 6px; position: relative; z-index: 2; font-size: 13.5px; }
.sl-count { font-size: 15px; }
.finder-panel .pc-label { min-width: 104px; }
@media (max-width: 600px) { .finder-panel .pc-label { min-width: 0; } }
.hero-nofind .hero-in { padding-top: 40px; padding-bottom: 56px; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; }
@media (max-width: 600px) { .hero-nofind .hero-in { min-height: 0; padding-top: 22px; padding-bottom: 36px; } }

/* ---------- live-script parts in the beta look: suggestions (suggest.js), the place tag, panel and "Which Newcastle?" (place.js) ---------- */
.pc-box { position: relative; }
.suggest-wrap { position: static; flex: 1 1 auto; min-width: 0; display: flex; align-self: stretch; }
.suggest-wrap input { width: 100%; }
.suggest-list { position: absolute; left: -2px; right: -2px; top: calc(100% + 6px); z-index: 40; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; max-height: 60vh; overflow-y: auto; }
.suggest-list a, .suggest-list .dp-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 8px 14px; color: var(--text); text-decoration: none; font-weight: var(--fw-bold); font-size: 14.5px; border-top: 1px solid var(--border-soft); cursor: pointer; }
.suggest-list a:first-child, .suggest-list .dp-opt:first-child { border-top: 0; }
.suggest-list a:hover, .suggest-list a.active, .suggest-list .dp-opt:hover, .suggest-list .dp-opt.active { background: var(--lilac); color: var(--brand-ink); box-shadow: inset 4px 0 0 var(--brand); }
.sg-name { min-width: 0; overflow-wrap: anywhere; }
.sg-kind { flex: none; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.b .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pc-form { display: grid; gap: 10px; }
.place-tag { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--r-pill); padding: 6px 12px; font: inherit; font-size: 13px; font-weight: var(--fw-semi); cursor: pointer; max-width: 260px; }
.place-tag .ic-pin { color: var(--brand); width: 15px; height: 15px; }
.place-tag-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-panel { position: absolute; right: max(var(--gutter), env(safe-area-inset-right, 0px)); top: calc(100% + 6px); z-index: 45; width: min(380px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px; display: grid; gap: 10px; }
.place-panel[hidden] { display: none; }
.place-panel-label { font-weight: var(--fw-bold); font-size: 14px; }
.place-panel-row { display: flex; gap: 8px; }
.place-panel input { flex: 1; min-width: 0; font: inherit; padding: 10px 12px; border: 2px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); }
.place-panel .btn, .place-panel button { font: inherit; font-weight: var(--fw-bold); font-size: 14px; border-radius: 10px; padding: 8px 14px; cursor: pointer; border: 2px solid var(--brand); background: var(--btn); color: var(--btn-ink); }
.place-panel .btn-outline, .place-panel .place-forget { background: transparent; color: var(--brand-ink); }
.place-panel-msg { font-size: 13px; color: var(--warn); }
.place-choices-inline { display: grid; gap: 8px; margin-top: 4px; }
.place-choices-inline .pc-ask { font-weight: var(--fw-bold); }
.place-choices { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.place-choice { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); cursor: pointer; }
.place-choice:hover { border-color: var(--brand); }
.place-choice .pc-name { font-weight: var(--fw-bold); flex: 1; }
.place-choice .pc-n { font-size: var(--fs-sm); color: var(--muted); }
.place-choice .pc-go { height: auto; padding: 4px 10px; }
@media (max-width: 900px) { .place-tag { max-width: 150px; padding: 5px 9px; } .place-tag-text { font-size: 12px; } }
@media (max-width: 600px) {
  .place-tag { margin-left: auto; } .place-tag ~ .saved-m { margin-left: 8px !important; }
}
.place-panel-row { flex-wrap: wrap; }
.place-panel-row input { flex: 1 1 160px; }
.place-panel-row button { flex: 1 1 auto; }
@media (max-width: 600px) {
  .site-head-in { gap: 8px; }
  .logo .wm { font-size: 21px; }
  .pt-lead { display: none; }
  .place-tag { max-width: 112px; padding: 5px 8px; }
  .place-tag ~ .saved-m { margin-left: 0 !important; }
  .b .saved-link { padding: 6px 9px; margin-left: 0; }
  .menu-btn { margin-left: 0; width: 40px; }
}
.pc-form { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 600px) { .chips.chips-active { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } }

/* ---------- compare (pages/compare.html) ---------- */
.cmp { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; align-items: stretch; }
.cmp-col { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-sm); }
.cmp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cmp-price { font-size: 22px; font-weight: var(--fw-black); color: var(--navy); }
.cmp-title { font-size: 17px; font-weight: var(--fw-bold); line-height: 1.3; }
.b .cmp-title a { color: var(--brand); text-decoration: none; }
.cmp-facts { margin: 6px 0 0; display: grid; gap: 0; flex: 1; }
.cmp-facts > div { padding: 9px 0; border-top: 1px solid var(--row-line); }
.cmp-facts dt { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.cmp-facts dd { margin: 0; font-size: 14px; color: var(--text); }
.cmp-facts .ticks { font-size: 13.5px; gap: 3px; }
.cmp-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.cmp-acts .btn { flex: 1 1 auto; white-space: normal; text-align: center; }
/* phones: the sidebar's place tiles are words on the gradient (no photo download: a lazy image that is not displayed is never fetched), so a
   beta page is never heavier than the live one there; the index pages keep their photo tiles */
@media (max-width: 600px) { .places .ptile img { display: none; } .places .ptile { aspect-ratio: 5 / 2; } }

/* without JavaScript the phone menu cannot open: the links sit in a row under the logo instead */
@media (max-width: 900px) {
  .no-js .site-head-in { flex-wrap: wrap; padding-bottom: 8px; }
  .no-js .menu-btn { display: none !important; }
  .no-js .nav { display: flex; flex-basis: 100%; flex-wrap: wrap; margin: 0; gap: 2px; }
  .no-js .nav a { padding: 6px 8px; font-size: 13px; }
}
.b .row-op { position: relative; z-index: 2; color: var(--muted); text-decoration: none; }
.b .row-op:hover { text-decoration: underline; color: var(--brand-ink); }
.row-links { position: relative; z-index: 2; }
.idx-links .row-links a { font-weight: var(--fw-semi); }
.ptile-box { display: grid; gap: 4px; }
.ptile-links { font-size: 12.5px; font-weight: var(--fw-semi); }

/* Year-less event pages (ALLCOACH_YEARLESS=1): a year heading before that year's first month; the empty page (nothing on sale) */
.mhead .yhead { display: flex; align-items: center; gap: 10px; margin: 10px 0 12px; font-size: 22px; font-weight: var(--fw-bold); letter-spacing: 0; text-transform: none; color: var(--brand); }
.mhead .yhead::after { content: ""; flex: 1; height: 2px; background: var(--brand); opacity: .35; }
.mhead .yhead small { order: 2; font-size: 12px; font-weight: var(--fw-semi); color: var(--muted); }
.es-box { background: var(--lilac); border-radius: 12px; padding: 14px; margin: 6px 0 4px; }
.es-box h2 { margin: 0 0 6px; font-size: 17px; color: var(--navy); }
.es-box p { margin: 0; }
.es-t { margin: 18px 0 6px; font-size: 15px; color: var(--navy); }
.es-last .row.gone { opacity: .6; }
.es-sim { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.es-sim a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; text-decoration: none; color: var(--text); background: var(--panel); }
.es-sim .es-n { min-width: 0; font-weight: var(--fw-semi); color: var(--brand-ink); }
.es-sim small { display: block; font-weight: var(--fw-body); color: var(--muted); font-size: 12px; }
.es-sim .es-p { white-space: nowrap; font-weight: var(--fw-bold); color: var(--navy); }

/* Town pages: the pick-up points under 'Trips at a glance' (beta/town.py pickup_list); the rest behind a native <details> (no script needed) */
.about .pickups { margin-top: 2px; }
.pickups-more { margin-top: 8px; }
.pickups-more > summary { cursor: pointer; font-weight: var(--fw-bold); color: var(--brand-ink); font-size: 14px; padding: 4px 0; }
.pickups-more[open] > summary { margin-bottom: 6px; }
/* 'Show all dates' under a list whose later dates fold into the rows' notes (beta/dates.py ROW_MONTHS) */
.all-dates { margin: var(--s3) 0 0; font-size: 14px; }
.all-dates a { font-weight: var(--fw-bold); color: var(--brand-ink); }


/* Busy-month summaries (fold_event in components/trip_row.html): a light tint with rounded corners, no thick bar. The block reaches 10px past the
   list's own padding on each side and is padded back by the same amount, so its date, title and price line up exactly with the plain rows'. */
.rows > .row.row-sum { margin: 6px -10px; padding: 12px 10px; border: 1px solid var(--border-soft); border-left: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); }
.rows > .row.row-sum + .row { border-top: 0; }
@media (min-width: 901px) { .rows > .row.row-sum { padding: calc(var(--row-pad-d) - 2px) 10px; } }

/* the live rows' facts on beta rows (components/trip_row.html): ticket label, hotel, change of coaches, other regions, mobility notes */
.row-tix, .tix { font-weight: var(--fw-bold); white-space: nowrap; }
.tix-yes { color: var(--near); }
.tix-no { color: var(--warn); }
.tix-ic { font-weight: var(--fw-black); }
.tix-star { color: inherit; text-decoration: underline; padding: 0 2px; }
.row-hotel { color: var(--body); }
.row-note { color: var(--body); font-size: var(--row-small); }
.b .row-note a { position: relative; z-index: 2; color: var(--brand-ink); }
.row-tag { display: inline-block; padding: 1px 8px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border-soft); font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text); }
.foot-about { font-size: 13px; margin: 0 0 4px; }
.b .foot-about a { color: var(--brand-ink); }
.list-foot { margin-top: var(--s5); font-size: 14px; }
.list-foot .muted { color: var(--muted); }
.b .report-link a { color: var(--brand-ink); font-weight: var(--fw-semi); }

/* ---------- header: the place pill (pin + town name only, beta/components/header.html) and a nav that never wraps ----------
   Wide screens: logo, pill, nav in one row (the row is 1200px at most). A saved place hides the tagline, so the pill keeps the whole name
   ('Newcastle-under-Lyme'); below 1240px the nav folds into the menu button so no label ever breaks onto two lines. Phones: the pill gets
   its own short row under the logo. */
.b .nav a { white-space: nowrap; padding-left: 9px; padding-right: 9px; }
.place-tag { max-width: 280px; flex: none; }
.place-tag strong { font-weight: var(--fw-bold); }
.place-tag-empty strong { font-weight: var(--fw-semi); color: var(--muted); }
.site-head-in:has(.place-tag:not([hidden]):not(.place-tag-empty)) .tagline { display: none; }
.place-offer { flex: none; font: inherit; font-size: 13px; font-weight: var(--fw-semi); color: var(--brand-ink); background: none; border: 0; padding: 4px 2px; cursor: pointer; text-decoration: underline; white-space: nowrap; }
.place-offer[hidden] { display: none; }
/* 'Use <town> as your place?': a slim line hung under the header's left edge (it never squeezes the pill or the nav) */
@media (min-width: 601px) { .place-offer { position: absolute; left: 0; top: 100%; z-index: 31; background: var(--panel); padding: 4px 12px 6px; border: 1px solid var(--border-soft); border-top: 0; border-radius: 0 0 var(--r-sm) var(--r-sm); box-shadow: var(--shadow-sm); } }
@media (max-width: 1320px) { .tagline { display: none; } }
@media (max-width: 1240px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; margin-left: var(--s2); }
  .saved-m { display: inline-flex !important; margin-left: auto; }
  .site-head.open .nav { display: flex; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; background: var(--panel); border-bottom: 1px solid var(--border-soft); padding: var(--s2) var(--gutter) 14px; gap: 2px; box-shadow: var(--shadow); }
  .site-head.open .nav .saved-d { display: none; }
  .no-js .site-head-in { flex-wrap: wrap; padding-bottom: 8px; }
  .no-js .menu-btn { display: none !important; }
  .no-js .nav { display: flex; flex-basis: 100%; flex-wrap: wrap; margin: 0; gap: 2px; }
  .no-js .nav a { padding: 6px 8px; font-size: 13px; }
}
@media (max-width: 600px) {
  .site-head-in { flex-wrap: wrap; row-gap: 0; }
  .site-head-in::after { content: ""; order: 4; flex-basis: 100%; height: 0; }
  .site-head-in > .place-tag { order: 5; max-width: 100%; margin: 0 0 8px; padding: 4px 10px; }
  .site-head-in > .place-offer { order: 6; margin: 0 0 8px 8px; }
  .site-head-in > .saved-m { margin-left: auto !important; }
}
/* "Your town" pop-up: its field is a .pc-box (beta.js), so undo the panel's generic button look for the button inside it */
.place-panel .pc-box { height: 48px; flex-wrap: nowrap; }
.place-panel .pc-box input { border: 0; border-radius: 0; padding: 0 10px; background: transparent; font-weight: var(--fw-bold); }
.place-panel .pc-box input:focus { outline: none; }
.place-panel .pc-box .pc-go { flex: none; border: 0; border-radius: 9px; height: 38px; padding: 0 16px; background: var(--btn); color: var(--btn-ink); }
.place-panel .pc-box .pc-go:hover { background: var(--btn-hover); }
.place-panel .place-forget { justify-self: start; border: 0; padding: 0; font-size: 13px; font-weight: var(--fw-semi); text-decoration: underline; color: var(--muted); }
.place-panel-msg:empty { display: none; }

/* ---------- 'Where to go' page (beta/pages/where.html): four panels, two across on wide screens ---------- */
.where { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); padding-top: var(--s6); padding-bottom: var(--s8); }
.where-sec h2 { margin: 0 0 4px; }
.where-sec .muted { margin: 0 0 var(--s3); }
.where-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--s4); }
.where-links a { display: block; padding: 8px 0; color: var(--text); font-weight: var(--fw-semi); text-decoration: none; border-bottom: 1px solid var(--border-soft); }
.where-links a:hover { color: var(--brand-ink); text-decoration: underline; }
.where-all { margin: var(--s3) 0 0; }
.where-all a { color: var(--brand-ink); font-weight: var(--fw-bold); }
@media (max-width: 900px) { .where { grid-template-columns: minmax(0, 1fr); } }

/* the 'summarised by AllCoach … may contain mistakes' line under a trip's facts: small print, like the other notes (owner 27 Oct) */
.b .tpanel .pbody p.pcredit { font-size: 11px; line-height: 1.4; color: var(--muted); }
.b .about-facts .pbody p.pcredit { margin-top: 14px; }

/* 'See trips leaving near you' card inside a list with no place (beta.js) */
.place-nudge { list-style: none; margin: 10px 0; padding: 14px 16px; border: 2px solid var(--nudge-line); border-radius: var(--r); background: var(--nudge-bg); }          /* warm yellow + orange: stands out from the purple (owner 7 Nov 2026) */
.place-nudge label { display: block; font-size: 14px; color: var(--body); margin-bottom: 8px; }
.place-nudge label strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 2px; }
.place-nudge .pc-box input { min-width: 0; }

/* home 'Popular right now' switch */
.pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pop-head .sec-h { margin: 0; }
.pop-switch { display: flex; gap: 6px; flex-wrap: wrap; }
.pop-switch .chip { font: inherit; cursor: pointer; }

/* question cards inside long lists (beta.js ask()) */
.qcard .q-h { margin: 0 0 8px; font-size: 15px; color: var(--text); }
.qcard .q-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.qcard .q-opts .chip { font: inherit; font-size: 14px; cursor: pointer; min-height: 40px; }
.qcard .q-opts .q-skip { border-style: dashed; color: var(--body); }

.more.q-merged { display: none !important; }          /* the question card stands in for 'Show more' (its opt-out button shows the next trips) */
.qcard { margin: 10px 0; }
/* a big list's categories first (choose.py, owner 27 Oct 2026) */
.b .chooser { display: grid; gap: 8px; }
.b .chooser-all { margin: 8px 0 24px; text-align: center; }
.b .ch-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.b .ch-card { padding: 12px 16px; display: grid; gap: 4px; box-shadow: var(--shadow-sm); }
.b .ch-card h3 { font-size: var(--fs-md); font-weight: var(--fw-black); }
.b .ch-card h3 a { color: var(--text); text-decoration: none; display: flex; justify-content: space-between; gap: 8px; }
.b .ch-card .ch-n { color: var(--muted); font-weight: var(--fw-semi); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.b .ch-card .ch-top { font-size: var(--fs-sm); color: var(--muted); }
.more:has(.qcard) { flex-direction: column; align-items: center; gap: 12px; }          /* the question card above 'Show 20 more' */
.more .qcard { align-self: stretch; text-align: left; }

/* The trial search box (?look=search, demo only; finder.html look_search): Date and Trip type boxes, then one full-width Search button */
.ls-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ls-field { position: relative; display: flex; align-items: center; gap: 10px; border: 2px solid var(--border); border-radius: 12px; background: var(--surface); padding: 6px 12px; min-height: 56px; min-width: 0; cursor: pointer; }
.ls-field:focus-within { border-color: var(--brand); }
.ls-field > .ic { color: var(--brand); flex: none; }
.ls-txt { display: grid; flex: 1; min-width: 0; }
.ls-lab { font-size: 13px; font-weight: var(--fw-bold); color: var(--text); }
.ls-field select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--muted); padding: 0 22px 0 0; margin: 0; width: 100%; cursor: pointer; }
.ls-field select:focus { outline: none; color: var(--text); }
.ls-chev { position: absolute; right: 12px; color: var(--muted); pointer-events: none; }
.ls-go { border: 0; background: var(--btn); color: var(--btn-ink); font: inherit; font-size: 17px; font-weight: var(--fw-bold); border-radius: 12px; height: 52px; width: 100%; cursor: pointer; }
.ls-go:hover { background: var(--btn-hover); }
.look-search .finder-panel .pc-label { min-width: 0; width: 100%; }
.look-search .row-stop { display: flex; align-items: flex-start; gap: 4px; }
.look-search .row-stop::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 2px; background: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M12 21s-6-5.3-6-10a6 6 0 1 1 12 0c0 4.7-6 10-6 10z'/%3E%3Ccircle cx='12' cy='11' r='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M12 21s-6-5.3-6-10a6 6 0 1 1 12 0c0 4.7-6 10-6 10z'/%3E%3Ccircle cx='12' cy='11' r='2.2'/%3E%3C/svg%3E") center / contain no-repeat; }
.look-search .chips .chip-kind, .look-search .chips .chip-sep { display: none; }          /* the Trip type box does their job */
.look-search .chips .chip-f[data-filter^="kind-"] { display: none; }          /* lengths live in the How long box */
.look-search .chip-zero { opacity: .4; cursor: default; }
/* 'Which market?' under the kind chips (search box look, kind-of-trip pages; listing.which_row) */
.which { display: grid; gap: 8px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.which-t { margin: 0; font-weight: var(--fw-bold); font-size: 15px; }
.which-all { font-weight: var(--fw-semi); font-size: 14px; }
.which .chips { flex-wrap: wrap; overflow: visible; }          /* every market in view, no sideways scroll */
.which-sub { font-weight: var(--fw-body); color: var(--muted); font-size: 14px; }
/* the search box look: a short hero, so the trips start within a screen */
.look-search .hero-in { padding-top: 18px; padding-bottom: 76px; }
.look-search .hero .feats { display: none; }
.look-search .hero-lead { font-size: var(--fs-base, 16px); margin-top: 8px !important; }
/* search box look, tighter (owner 28 Oct 2026: trips within a screen): Date and How long side by side, no repeated note, Search only once a new place is typed */
.look-search .ls-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.look-search .ls-field { min-height: 50px; padding: 4px 10px; gap: 8px; }
.look-search .ls-field select { font-size: 15px; }
.look-search .ls-field > .ic:first-child { display: none; }
.look-search .pc-note:not(.pc-err) { display: none; }
.look-search .ls-go[data-idle] { display: none; }
.look-search .finder-panel { gap: 10px; }
/* the short market card (search box look) */
.row-sum2 .row-top { align-items: baseline; }
.row-sum2 .row-title { margin: 0; }
.row-sum2 .sum-go { display: inline-block; margin-top: 4px; padding: 7px 14px; border-radius: 10px; background: var(--btn); color: var(--btn-ink); font-weight: var(--fw-bold); text-decoration: none; }
/* The event-site layout of a kind-of-trip page (components/v2list.html; owner 28 Oct 2026) */
.v2 { display: grid; gap: 0; }
.v2-when { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.v2 .chip { cursor: pointer; }
.v2-month select { all: unset; cursor: pointer; }
.v2-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 4px; scroll-margin-top: 90px; }
.v2-count { font-weight: var(--fw-bold); font-size: 17px; }
.v2-filt { border: 2px solid var(--brand); color: var(--brand); background: var(--panel); border-radius: 10px; padding: 8px 14px; font: inherit; font-weight: var(--fw-bold); cursor: pointer; }
.v2-filt.on { background: var(--brand); color: var(--btn-ink); }
.v2-hint { color: var(--muted); font-size: 14px; margin: 4px 0 0; }
.v2-wk { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 18px 0 6px; }
.v2-list { list-style: none; margin: 0; padding: 0 14px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 14px; }
.v2-list li + li { border-top: 1px solid var(--border-soft); }
.v2-list li[hidden] { display: none; }
.v2-row { display: grid; gap: 2px; padding: 12px 0; color: inherit; text-decoration: none; }
.v2-r1 { display: flex; justify-content: space-between; gap: 10px; font-weight: var(--fw-bold); }
.v2-len { font-weight: var(--fw-body); color: var(--muted); }
.v2-mk { color: var(--brand-ink); font-weight: var(--fw-bold); font-size: 17px; }
.v2-sub { color: var(--muted); font-size: 14px; }
.v2-mi { color: var(--near); font-weight: var(--fw-bold); }
.v2-empty { color: var(--muted); text-align: center; padding: 24px 0; }
.v2-sheet { position: fixed; inset: 0; background: rgba(10, 20, 40, .45); z-index: 50; }
.v2-sheet[hidden] { display: none; }
.v2-sh { position: absolute; left: 0; right: 0; bottom: 0; max-width: 720px; margin: 0 auto; background: var(--panel); border-radius: 18px 18px 0 0; padding: 18px 16px calc(22px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 14px; }
.v2-sh h2 { margin: 0; font-size: 20px; }
.v2-f { display: grid; gap: 6px; font-weight: var(--fw-bold); }
.v2-f input { font: inherit; font-size: 16px; font-weight: var(--fw-body); padding: 10px 12px; border: 2px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); }
.v2-seg { display: flex; flex-wrap: wrap; gap: 8px; font-weight: var(--fw-body); }
.v2-go { border: 0; border-radius: 12px; background: var(--btn); color: var(--btn-ink); font: inherit; font-weight: 800; font-size: 17px; padding: 14px; cursor: pointer; }
.v2-clear { background: none; border: 0; color: var(--brand); font: inherit; font-weight: var(--fw-bold); cursor: pointer; }
.v2-r1 { color: var(--text); }
.v2-when .chip[hidden] { display: none; }
/* the trip-list layout: '+ N more trips a-b miles away', and the name search (only the page's own names) */
.v2-more { margin: 14px 0 0; padding: 12px 14px; background: var(--panel); border: 1px dashed var(--border); border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: var(--fw-semi); }
.v2-more[hidden] { display: none; }
.v2-more-go { border: 2px solid var(--brand); color: var(--brand); background: var(--panel); border-radius: 10px; padding: 6px 14px; font: inherit; font-weight: var(--fw-bold); cursor: pointer; }
.v2-namebox { position: relative; }
.v2-namebox input { width: 100%; padding-right: 40px; }
.v2-name-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; font-size: 18px; color: var(--muted); cursor: pointer; padding: 6px; }
.v2-name-x[hidden] { display: none; }
.v2-sugg { display: grid; gap: 2px; max-height: 40vh; overflow-y: auto; font-weight: var(--fw-body); }
.v2-sugg-h { margin: 4px 0 2px; font-size: 13px; color: var(--muted); font-weight: var(--fw-bold); }
.v2-opt { display: flex; justify-content: space-between; gap: 10px; text-align: left; border: 0; border-bottom: 1px solid var(--border-soft); background: none; font: inherit; color: var(--text); padding: 10px 2px; cursor: pointer; }
.v2-opt-n { color: var(--muted); font-size: 14px; white-space: nowrap; }
.v2-opt-off { opacity: .45; cursor: default; }
.v2-sugg-all { border: 0; background: none; color: var(--brand); font: inherit; font-weight: var(--fw-bold); text-align: left; padding: 8px 2px; cursor: pointer; }
/* the trip-list layout without a place: the 'Where are you leaving from?' box, the reminder in the list, 'Show 20 more' */
.v2-ask { margin: 12px 0 0; padding: 14px; background: var(--lilac); border-radius: 14px; display: grid; gap: 6px; justify-items: start; }
.v2-ask[hidden] { display: none; }
.v2-ask-t { margin: 0; font-weight: 800; font-size: 18px; }
.v2-ask-l { margin: 0; color: var(--body); }
.v2-ask-go { border: 0; border-radius: 10px; background: var(--btn); color: var(--btn-ink); font: inherit; font-weight: var(--fw-bold); padding: 9px 16px; cursor: pointer; }
.v2-remind { margin-top: 14px; }
.v2-pager { margin: 14px 0 0; text-align: center; }
.v2-pager[hidden] { display: none; }
/* the Filters sheet keeps its place while you type (owner 28 Oct 2026: the box jumped as suggestions appeared): a fixed height from near the
   top, content from the top down, and a fixed slot for the suggestions so nothing below them moves either */
.v2-sh { top: max(56px, env(safe-area-inset-top, 0px)); align-content: start; overflow-y: auto; overscroll-behavior: contain; }
.v2-sugg { min-height: 0; max-height: 34vh; }
.v2-sugg:not(:empty) { min-height: 34vh; align-content: start; }
.v2-list li.v2-remind-li { padding: 4px 0 12px; }
.v2-list li.v2-remind-li[hidden] { display: none; }
.v2-remind-li .v2-remind { margin: 8px 0 0; }
/* one big Filters button (owner 28 Oct 2026: the page has only the postcode box and Filters; make Filters obvious) */
.v2-top { display: grid; gap: 8px; margin: 14px 0 4px; scroll-margin-top: 90px; }
.v2 .v2-filt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 10px 16px; border: 0; border-radius: 14px;
  background: var(--btn); color: var(--btn-ink); font: inherit; font-weight: 800; font-size: 17px; text-align: left; cursor: pointer; box-shadow: 0 4px 14px rgba(118, 75, 162, .25); }
.v2 .v2-filt:hover { background: var(--btn-hover); }
.v2 .v2-filt .ic { width: 22px; height: 22px; flex: none; }
.v2-filt-sum { font-weight: var(--fw-semi); font-size: 14px; opacity: .92; margin-left: auto; text-align: right; }
.v2-filt-sum:empty { display: none; }
.v2-filt-sum:not(:empty)::before { content: ""; }
.v2-count { margin: 2px 2px 0; font-weight: var(--fw-bold); color: var(--text); }
.v2-go-other { text-decoration: none; color: var(--brand); border-style: dashed; }
/* the Filters button, quieter and on the count's line (owner 28 Oct 2026: 'a bit too strong') */
.v2-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v2 .v2-filt { width: auto; min-height: 44px; padding: 8px 16px; border: 2px solid var(--brand); border-radius: 12px; background: var(--lilac); color: var(--brand-ink);
  font-size: 16px; font-weight: var(--fw-bold); box-shadow: none; gap: 8px; }
.v2 .v2-filt:hover { background: var(--lilac-deep); }
.v2 .v2-filt.on { background: var(--brand); color: var(--btn-ink); }
.v2 .v2-filt .ic { width: 20px; height: 20px; }
.v2-filt-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--btn-ink); color: var(--brand-ink); font-size: 13px; }
.v2-filt-n[hidden] { display: none; }
.v2-count { margin: 0; font-size: 18px; }
.v2-sumline { margin: 4px 0 0; color: var(--muted); font-size: 14px; font-weight: var(--fw-semi); }
.v2-sumline:empty { display: none; }
/* trip-list spacing (owner 28 Oct 2026): a clear gap BEFORE each week (it belongs to the cards below it), little after; the count row sits
   closer to the box above and a little further from the first week */
.v2 .v2-top { margin: 4px 0 0; }
.v2 .v2-hint, .v2 .v2-sumline { margin: 6px 2px 0; }
.v2 .v2-wk { margin: 30px 4px 10px; }
.v2 .v2-week:first-of-type .v2-wk { margin-top: 18px; }
.v2 .v2-week[hidden] + .v2-week .v2-wk { margin-top: 18px; }
.v2 .v2-band { margin: 34px 4px 0; padding-top: 14px; border-top: 2px solid var(--border); font-size: 17px; font-weight: 800; color: var(--text); }
/* the divider into a further distance band (owner 28 Oct 2026: it looked like the dates went backwards): a box, not a heading */
.v2 .v2-band { display: flex; gap: 12px; align-items: flex-start; margin: 36px 0 4px; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--lilac); color: var(--text); }
.v2 .v2-band .ic { width: 24px; height: 24px; flex: none; color: var(--brand); margin-top: 2px; }
.v2 .v2-band-t { margin: 0; font-size: 17px; font-weight: 800; }
.v2 .v2-band-s { margin: 2px 0 0; color: var(--body); font-size: 14px; }
.v2 .v2-band + .v2-wk { margin-top: 14px; }
.v2-wk[hidden], .v2-list[hidden], .v2-band[hidden] { display: none; }
.v2-dym { margin: 14px 0 0; padding: 14px 16px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 14px; }
.v2-dym-l { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.v2-dym-l a { font-weight: var(--fw-bold); font-size: 17px; }
.v2-dym-k { color: var(--muted); font-size: 14px; }
.v2.v2-busy { opacity: .5; transition: opacity .15s; pointer-events: none; }
/* iPhone zooms the page in when a box with text under 16px is tapped (and stays zoomed): every input and drop-down in the trip list is 16px */
.v2 input, .v2 select, .v2-month select, .finder input, .finder select { font-size: 16px !important; }

/* Date-column trip rows (owner 29 Oct 2026, mockup 'Trip list mockup'): the date in its own column on the left, the trip in the middle,
   price + Save on the right; on a phone the price + Save sit under the trip. Month headings (.mhead) stay. */
.row[data-dc] { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); grid-template-areas: "d m" "d p"; column-gap: 12px; row-gap: 6px; align-items: start; }
.row[data-dc] > .row-dc { grid-area: d; margin: 0; display: flex; flex-direction: column; line-height: 1.15; }
.row[data-dc] > .row-main { grid-area: m; min-width: 0; }
.row[data-dc] > .row-pr { grid-area: p; justify-content: space-between; }
.row-dd, .row[data-dc] .row-price { font-size: 1.1rem; font-weight: 800; color: var(--navy); white-space: nowrap; }          /* the price matches the date (owner) */
.row-dd-s { font-size: var(--row-date); white-space: normal; }
.row-len { margin-top: 2px; font-size: var(--row-small); color: var(--muted); }
.row[data-dc] .row-title { margin-top: 0; font-size: calc(var(--row-title) * 1.08); }
.row-moredates { font-size: var(--row-small); color: var(--muted); }
@media (max-width: 639px) {          /* phone: the list box a touch wider (10px of grey each side, 12px inside) and a narrower date column: ~25px more per title line (owner 29 Oct 2026) */
  .list .rows { margin-inline: -6px; padding-inline: 12px; }
  .row[data-dc] { grid-template-columns: 4.3rem minmax(0, 1fr); column-gap: 10px; }
}
@media (min-width: 640px) {
  .row[data-dc] { grid-template-columns: 6.5rem minmax(0, 1fr) auto; grid-template-areas: "d m p"; column-gap: 20px; }
  .row[data-dc] > .row-pr { justify-content: flex-end; }
  .row-dd, .row[data-dc] .row-price { font-size: 0.95rem; }
  .row[data-dc] .row-title { font-size: calc(var(--row-title-d) * 1.08); }
}
.row-stop.row-stop2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }          /* the short row: miles first, then the stop in full (2 lines at most) */
.row-stop2 .row-stopname { display: inline; -webkit-line-clamp: unset; }
.row-mi2 { font-weight: var(--fw-semi); white-space: nowrap; }
.row[data-dc] .row-save { order: -1; }          /* Save left, price right (owner 29 Oct 2026) */
/* The title runs across the whole row; the date column and the details sit in two columns under it (owner approved 30 Oct 2026) */
.row[data-dc] { grid-template-areas: "t t" "d m" "d p"; }
.row[data-dc] > .row-title { grid-area: t; margin: 0 0 2px; }
@media (min-width: 640px) {
  .row[data-dc] { grid-template-areas: "t t t" "d m p"; }
}

/* owner 7 Nov 2026: on a phone the postcode box comes straight after the headline; the four selling points stay on wider screens */
@media (max-width: 700px) { .hero .feats { display: none; } }

/* browser shopper 7 Nov 2026: "chips cut off at the right edge, I did not realise they scroll": a fade on the right edge says there is more */
@media (max-width: 600px) { .chips.chips-more { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); } }

/* owner 7 Nov 2026: fewer chips on show. Themes and later months sit behind 'More filters' / 'More' (native details, works without JS) */
.more-filters { margin-top: var(--s2); }
.more-filters > summary, .more-months > summary { list-style: none; cursor: pointer; }
.more-filters > summary::-webkit-details-marker, .more-months > summary::-webkit-details-marker { display: none; }
.chip-more { border-style: dashed; }
.more-filters[open] > summary { margin-bottom: var(--s2); }
.more-months { display: contents; }
.more-months[open] > summary { display: none; }

.place-nudge .pc-go { background: var(--nudge-btn); color: var(--nudge-btn-ink); }
.place-nudge .pc-go:hover, .place-nudge .pc-go:focus-visible { background: var(--nudge-btn-hover); }