/* update 211 revamp: trip selection (Directions results in search.js, the "Get me home" / Other ways sheet in chooser.js). Tokens from revamp.css only.
   ONE card (.opt / .or-row), ONE elevated card (the recommended option), ONE chip (36px pill), ONE primary action (the sticky Start bar). */

/* ---- header: back + To field, From card ---- */
#sb .fromrow { background: var(--surface); border: 1px solid var(--line); box-shadow: none; border-radius: var(--rv-r-ctl); padding: var(--s2) var(--s4); min-height: var(--rv-ctl-h); font-size: var(--rv-t-small); margin-bottom: var(--s2); }
#sb .fromrow b { font-weight: var(--rv-w-strong); }
#sb .fromrow .muted { font-size: var(--rv-t-small); font-weight: var(--rv-w-strong); color: var(--rv-accent); }
/* the destination is already in the field above: this row keeps only the saved tag, the star and the map */
#sb .save-row { margin: 0 0 var(--s3); min-height: 0; justify-content: flex-end; gap: var(--s2); }
#sb .save-row > .i, #sb .save-row > .grow { display: none; }
#sb .save-row .saved { height: 36px; padding: 0 var(--s3); border-radius: var(--rv-r-chip); background: var(--rv-ink); color: var(--text); font: var(--rv-w-strong) var(--rv-t-small)/1 var(--font); align-items: center; }
#sb .save-row .saved .i { fill: var(--rv-accent); color: var(--rv-accent); }
#sb .save-row .iconbtn { width: 36px; height: 36px; border-radius: var(--rv-r-chip); background: var(--rv-ink); }
#sb .save-row .save-star .i, #sb .save-row .iconbtn .i { width: 18px; height: 18px; }
/* "Updated just now": one quiet line */
#sb .fresh { margin: 0 var(--s1) var(--s3); font-size: var(--rv-t-micro); font-weight: var(--rv-w-strong); color: var(--muted); }

/* ---- time chips + order chips: ONE chip style, one scrolling row each ---- */
#sb .search-time-chips, #sb .journey-choices { display: flex; gap: var(--s2); padding: 0; margin: 0 calc(-1 * var(--s4)) var(--s3); padding-inline: var(--s4); background: none; border-radius: 0; overflow-x: auto; scrollbar-width: none; }
#sb .search-time-chips::-webkit-scrollbar, #sb .journey-choices::-webkit-scrollbar { display: none; }
#sb .search-time-chips button, #sb .journey-choices button, .pc-wrap .or-mode { flex: none; height: var(--rv-chip-h); min-height: var(--rv-chip-h); padding: 0 var(--s4); border-radius: var(--rv-r-chip); background: var(--surface); border: 1px solid var(--line); color: var(--muted); font: var(--rv-w-strong) var(--rv-t-small)/1 var(--font); white-space: nowrap; box-shadow: none; }
#sb .search-time-chips button[aria-pressed="true"], #sb .journey-choices button[aria-pressed="true"], .pc-wrap .or-mode[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); box-shadow: none; }
#sb .journey-why { margin: 0 var(--s1) var(--s3); font-size: var(--rv-t-small); color: var(--muted); }
#sb .journey-deadline { font-size: var(--rv-t-small); }

/* ---- the list: no grouped-card chrome, cards with 12px between ---- */
#sb .list:has(> .opt) { background: none; box-shadow: none; border-radius: 0; overflow: visible; display: flex; flex-direction: column; gap: var(--s3); }
#sb .list:has(> .opt) > * + * { border-top: 0; }
#sb .label { margin: var(--s5) var(--s1) var(--s2); font: var(--rv-w-heavy) var(--rv-t-micro)/1.2 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
#sb > .card, #sb .card.note-warn { background: var(--surface); border: 1px solid var(--line); border-left-width: 1px; border-radius: var(--rv-r-card); box-shadow: none; padding: var(--s4); margin-bottom: var(--s3); font-size: var(--rv-t-body); }
#sb > .card b, #sb .card.note-warn b { font-weight: var(--rv-w-strong); }

/* ---- an option = ONE card: LEAVE BY big, ARRIVE, minutes door to door, strip of mode pills, one "why", status tag ---- */
#sb .opt { position: relative; display: flex; flex-direction: column; gap: var(--s2); width: 100%; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--rv-r-card); background: var(--surface); color: var(--text); box-shadow: none; cursor: pointer; transition: opacity .15s, box-shadow .15s, border-color .15s; }
#sb .opt + .opt { border-top: 1px solid var(--line); }
#sb .opt .opt-kick { color: var(--rv-hot); }
#sb .opt .opt-time { display: flex; align-items: flex-end; gap: var(--s3); font-variant-numeric: tabular-nums; }
#sb .opt .opt-time small { display: block; font: var(--rv-w-heavy) var(--rv-t-micro)/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s1); }
#sb .opt .opt-time b { font-family: var(--rv-num); font-weight: var(--rv-w-heavy); letter-spacing: -.04em; line-height: .95; font-size: var(--rv-t-title); display: block; }
#sb .opt .ot-l b { font-size: 32px; }
#sb .opt .opt-time i { font-style: normal; font-size: var(--rv-t-micro); font-weight: var(--rv-w-strong); letter-spacing: 0; margin-left: 2px; color: var(--muted); }
#sb .opt .ot-arr { width: var(--s4); height: 2px; border-radius: 2px; background: currentColor; opacity: .3; margin-bottom: var(--s2); flex: none; }
#sb .opt .ot-tot { margin-left: auto; text-align: right; }
#sb .opt .ot-tot small { margin: var(--s1) 0 0; letter-spacing: 0; text-transform: none; font-size: var(--rv-t-micro); font-weight: var(--rv-w-strong); }
#sb .opt .opt-top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1); margin: var(--s1) 0; }
#sb .opt .opt-top .arrow { color: var(--muted); opacity: .6; margin: 0 1px; }
#sb .opt .opt-top .opt-walk { height: 30px; padding: 0 var(--s3); border-radius: 10px; background: var(--rv-ink); color: var(--text); font: var(--rv-w-strong) var(--rv-t-small)/1 var(--font); gap: var(--s1); }
#sb .opt .opt-top .opt-walk .i { width: 16px; height: 16px; }
#sb .opt .opt-top .badge { height: 30px; border-radius: 10px; font-size: var(--rv-t-small); }
#sb .opt .opt-top .opt-direct { background: none; padding: 0; margin-left: var(--s2); color: var(--muted); font-size: var(--rv-t-small); font-weight: var(--rv-w-strong); letter-spacing: 0; }
#sb .opt .opt-from, #sb .opt .opt-note, #sb .opt .opt-usual, #sb .opt .opt-set, #sb .opt .opt-cloud, #sb .opt .opt-traffic { font-size: var(--rv-t-small); line-height: 1.4; color: var(--muted); display: flex; gap: var(--s2); align-items: flex-start; margin: 0; }
#sb .opt .opt-from b, #sb .opt .opt-note b { color: var(--text); font-weight: var(--rv-w-strong); }
#sb .opt .opt-from .i, #sb .opt .opt-note .i, #sb .opt .opt-cloud .i, #sb .opt .opt-traffic .i, #sb .opt .opt-set .i { display: none; }
#sb .opt .opt-meta { display: block; line-height: 1.6; margin: 0; font-size: var(--rv-t-small); color: var(--muted); }
#sb .opt .opt-meta .late { color: var(--text); font-weight: var(--rv-w-strong); }
#sb .opt .opt-meta .rv-tag.live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#sb .opt .opt-meta .opt-checked { color: var(--muted); }
#sb .opt .opt-steps { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 44px; margin: var(--s1) 0 0; padding: var(--s2) 0 0; border-top: 1px solid var(--line); background: none; color: var(--muted); font: var(--rv-w-strong) var(--rv-t-small)/1 var(--font); text-decoration: none; }
#sb .opt .opt-steps .i:last-child { margin-left: auto; }
#sb .opt[aria-expanded="true"] .opt-steps .i:last-child { transform: rotate(90deg); }
#sb .opt .opt-similar, #sb .opt-similar { display: flex; align-items: center; height: var(--rv-chip-h); padding: 0 var(--s4); margin: var(--s2) 0 0; border-radius: var(--rv-r-chip); background: var(--rv-ink); color: var(--muted); font: var(--rv-w-strong) var(--rv-t-small)/1 var(--font); text-decoration: none; }

/* the recommended option: the ONE elevated card */
#sb .opt.rec { --o-fg: var(--text); --o-mut: var(--muted); background: var(--hero-bg, var(--surface-2)); color: var(--o-fg); border: 2px solid var(--rv-hot); box-shadow: 5px 5px 0 var(--rv-hot); padding: calc(var(--s4) - 1px); margin-right: 5px; margin-bottom: 5px; }
:root[data-look='navy'] #sb .opt.rec { --o-fg: #F3F6FF; --o-mut: #B4BFDC; }
#sb .opt.rec .opt-time small, #sb .opt.rec .opt-time i, #sb .opt.rec .opt-from, #sb .opt.rec .opt-note, #sb .opt.rec .opt-meta, #sb .opt.rec .opt-top .arrow, #sb .opt.rec .opt-steps, #sb .opt.rec .opt-top .opt-direct { color: var(--o-mut); }
#sb .opt.rec .opt-from b, #sb .opt.rec .opt-note b, #sb .opt.rec .opt-meta .late { color: var(--o-fg); }
#sb .opt.rec .opt-top .opt-walk { background: color-mix(in srgb, var(--o-fg) 14%, transparent); color: var(--o-fg); }
#sb .opt.rec .opt-steps { border-top-color: color-mix(in srgb, var(--o-fg) 18%, transparent); }
#sb .opt.rec .ot-l b { font-size: 44px; }
#sb .opt.rec .ot-r b { font-size: 28px; }
#sb .opt.rec .ot-tot b { font-size: 28px; }

/* opened: in place, ring on the selected, the others dimmed (one open at a time) */
#sb .list:has(> .opt[aria-expanded="true"]) > .opt:not([aria-expanded="true"]) { opacity: .62; }
#sb .opt[aria-expanded="true"] { border: 2px solid var(--rv-accent); padding: calc(var(--s4) - 1px); box-shadow: 0 0 0 5px color-mix(in srgb, var(--rv-accent) 18%, transparent); cursor: default; }
#sb .opt.rec[aria-expanded="true"] { box-shadow: 0 0 0 5px color-mix(in srgb, var(--rv-accent) 28%, transparent); margin-right: 0; margin-bottom: 0; }
#sb .opt .opt-body { margin-top: var(--s2) !important; padding-top: var(--s3); border-top: 1px solid var(--line); cursor: default; color: var(--text); }
#sb .opt.rec .opt-body { border-top-color: color-mix(in srgb, var(--o-fg) 18%, transparent); color: var(--o-fg); }
#sb .opt .journey-status { margin: 0 0 var(--s3); padding: var(--s3); border-radius: var(--rv-r-ctl); background: var(--rv-ink); gap: var(--s3); }
#sb .opt .journey-status b { font-size: var(--rv-t-body); font-weight: var(--rv-w-strong); }
#sb .opt .journey-status p, #sb .opt .journey-status small { font-size: var(--rv-t-small); color: var(--muted); margin: var(--s1) 0 0; }
#sb .opt.rec .journey-status p, #sb .opt.rec .journey-status small { color: var(--o-mut); }
#sb .opt .opt-next { margin-bottom: var(--s3); }
/* the step list: the shared timeline */
body .it-steps { list-style: none; margin: 0 0 var(--s3); padding: 0; }
body .it-steps li { display: flex; gap: var(--s3); position: relative; padding: 0 0 var(--s4); border: 0; font-size: var(--rv-t-small); align-items: flex-start; }
body .it-steps li:last-child { padding-bottom: 0; }
body .it-steps li::before { content: ''; position: absolute; left: 12px; top: 28px; bottom: 2px; width: 2px; background: var(--line); }
body .it-steps li:last-child::before { display: none; }
body .it-steps .it-ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--rv-ink); color: var(--muted); flex: none; position: relative; z-index: 1; }
body .it-steps .it-ico .i { width: 15px; height: 15px; }
body .it-steps .it-ride .it-ico { background: var(--rv-accent); color: var(--rv-on-accent); }
body .it-steps .it-arrive .it-ico { background: var(--rv-hot); color: #2a0b05; }
body .it-steps .it-body { flex: 1; min-width: 0; font-size: var(--rv-t-body); line-height: 1.3; }
body .it-steps .it-body b { font-weight: var(--rv-w-strong); }
body .it-steps .it-body .muted, .it-steps .it-body span.muted { font-size: var(--rv-t-small); color: var(--muted); }
body .it-steps .it-time { flex: none; margin-left: auto; font-weight: var(--rv-w-strong); font-size: var(--rv-t-small); font-variant-numeric: tabular-nums; }
body .or-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 var(--s2); margin: var(--s1) var(--s2) 0 0; border-radius: var(--rv-r-chip); font: var(--rv-w-heavy) var(--rv-t-micro)/1 var(--font); background: var(--rv-ink); color: var(--muted); }
body .or-chip.ok { background: color-mix(in srgb, var(--rv-ok) 18%, transparent); color: var(--rv-ok); }
body .or-chip.warn { background: color-mix(in srgb, var(--rv-warn) 20%, transparent); color: var(--rv-warn); }
body .or-chip.rain { background: var(--rv-ink); color: var(--muted); }
/* the opened card's own buttons: Start is primary, Remind me is quiet */
#sb .opt .actions { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); margin-top: var(--s3); }
#sb .opt .actions .btn { height: var(--rv-ctl-h); min-height: var(--rv-ctl-h); border-radius: var(--rv-r-ctl); font: var(--rv-w-strong) var(--rv-t-body)/1 var(--font); padding: 0 var(--s4); background: var(--rv-ink); color: var(--text); box-shadow: none; }
#sb .opt .actions .btn.primary { background: var(--rv-accent); color: var(--rv-on-accent); font-weight: var(--rv-w-heavy); }

/* ---- the sticky Start bar for the opened option ---- */
#sb .opt-sbar { position: sticky; bottom: 0; z-index: 5; margin: var(--s4) calc(-1 * var(--s4)) -32px; padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom, 0px)); box-shadow: var(--rv-shadow-up); }
#sb .opt-sbar .sb-l { flex: none; line-height: 1.1; }
#sb .opt-sbar .sb-l b { display: block; margin-top: var(--s1); font-family: var(--rv-num); font-size: 24px; font-weight: var(--rv-w-heavy); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
#sb .opt-sbar .colon { color: var(--rv-hot); }
#sb .opt-sbar .sb-go { flex: 1; min-width: 0; font-size: var(--rv-t-body); }

/* ---- the sheet: Get me home / Other ways (chooser.js) ---- */
.pc-wrap .pc-sheet { border-radius: var(--rv-r-sheet) var(--rv-r-sheet) 0 0; box-shadow: var(--rv-shadow-up); }
.pc-wrap .pc-grab { width: 38px; height: 4px; background: color-mix(in srgb, var(--text) 24%, transparent); }
.pc-wrap .pc-k { font: var(--rv-w-heavy) var(--rv-t-micro)/1.2 var(--font); letter-spacing: .09em; }
.pc-wrap .pc-top h2 { font-size: var(--rv-t-title); font-weight: var(--rv-w-heavy); }
.pc-wrap .pc-sub { font-size: var(--rv-t-small); }
.pc-wrap .pc-x { background: var(--rv-ink); }
.pc-wrap .pc-body { display: flex; flex-direction: column; padding: var(--s2) var(--s4) 0; }
.pc-wrap .or-modes { margin: 0 calc(-1 * var(--s4)) var(--s3); padding-inline: var(--s4); gap: var(--s2); flex: none; }
.pc-wrap .or-mode { flex: none; }
.pc-wrap .pc-label { margin: var(--s5) var(--s1) var(--s2); font: var(--rv-w-heavy) var(--rv-t-micro)/1.2 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.pc-wrap .pc-label:first-child { margin-top: var(--s2); }
.pc-wrap .or-lean { font-weight: var(--rv-w-strong); }
.pc-wrap .pc-list { gap: var(--s3); }
.pc-wrap .pc-row.or-row { display: block; padding: var(--s4); border-radius: var(--rv-r-card); background: var(--surface); border: 1px solid var(--line); }
.pc-wrap .pc-row.or-row.sel, .pc-wrap .pc-row.or-row.open { border: 2px solid var(--rv-accent); padding: calc(var(--s4) - 1px); background: var(--surface); box-shadow: 0 0 0 5px color-mix(in srgb, var(--rv-accent) 18%, transparent); }
.pc-wrap .pc-list:has(.pc-row.sel) .pc-row:not(.sel) { opacity: .62; }
.pc-wrap .or-row.hd { --o-fg: var(--text); --o-mut: var(--muted); background: var(--hero-bg, var(--surface-2)); color: var(--o-fg); border: 2px solid var(--rv-hot); box-shadow: 5px 5px 0 var(--rv-hot); margin: 0 5px 5px 0; padding: calc(var(--s4) - 1px); }
:root[data-look='navy'] .pc-wrap .or-row.hd { --o-fg: #F3F6FF; --o-mut: #B4BFDC; }
.pc-wrap .or-row.hd.open { border-color: var(--rv-hot); box-shadow: 5px 5px 0 var(--rv-hot); border-bottom-left-radius: var(--rv-r-card); border-bottom-right-radius: var(--rv-r-card); margin-bottom: var(--s2); }
.pc-wrap .or-row.hd .or-from, .pc-wrap .or-row.hd .or-also, .pc-wrap .or-row.hd .or-tap, .pc-wrap .or-row.hd .pc-diff, .pc-wrap .or-row.hd .arrow { color: var(--o-mut); }
.pc-wrap .or-row.hd .or-from b, .pc-wrap .or-row.hd .or-range, .pc-wrap .or-row.hd .or-total { color: var(--o-fg); }
.pc-wrap .or-row.hd .or-walk { color: var(--o-fg); background: color-mix(in srgb, var(--o-fg) 14%, transparent); }
.pc-wrap .or-row.hd .or-foot .or-count { display: none; }   /* the sticky bar below says it once */
.pc-wrap .or-row.open { border-bottom-left-radius: var(--rv-r-card); border-bottom-right-radius: var(--rv-r-card); }
.pc-wrap .or-range { font-family: var(--rv-num); font-size: var(--rv-t-title); letter-spacing: -.03em; }
.pc-wrap .or-total { font-size: var(--rv-t-title); font-weight: var(--rv-w-heavy); font-family: var(--rv-num); }
.pc-wrap .or-path { gap: var(--s1); margin-top: var(--s3); }
.pc-wrap .or-path .badge { height: 30px; border-radius: 10px; font-size: var(--rv-t-small); }
.pc-wrap .or-walk { height: 30px; padding: 0 var(--s3); border-radius: 10px; background: var(--rv-ink); color: var(--text); font: var(--rv-w-strong) var(--rv-t-small)/1 var(--font); gap: var(--s1); }
.pc-wrap .or-from { margin-top: var(--s2); font-size: var(--rv-t-small); }
.pc-wrap .pc-diff { margin-top: var(--s1); font-size: var(--rv-t-small); font-weight: var(--rv-w-reg); color: var(--muted); }
.pc-wrap .pc-diff.worse { color: var(--rv-warn); font-weight: var(--rv-w-strong); }
.pc-wrap .or-chips { gap: var(--s2); margin-top: var(--s2); }
.pc-wrap .or-foot { margin-top: var(--s2); }
.pc-wrap .or-count { color: var(--rv-hot); font-weight: var(--rv-w-strong); }
.pc-wrap .or-tap { font-weight: var(--rv-w-strong); }
.pc-wrap .or-start { align-self: auto; margin-top: var(--s3); width: 100%; height: var(--rv-chip-h); min-height: var(--rv-chip-h); border-radius: var(--rv-r-chip); background: var(--rv-ink); color: var(--text); font: var(--rv-w-strong) var(--rv-t-small)/1 var(--font); }
.pc-wrap .pc-row.sel .or-start, .pc-wrap .pc-row.sel .pc-start { background: var(--rv-accent); color: var(--rv-on-accent); }
.pc-wrap .or-detail { margin: calc(-1 * var(--s2)) 0 var(--s3); padding: var(--s4); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--rv-r-card) var(--rv-r-card); background: var(--surface); }
.pc-wrap .or-detail .it-steps { margin-bottom: var(--s3); }
.pc-wrap .or-backup, .pc-wrap .pc-go-sub { margin: var(--s2) var(--s1) 0; font-size: var(--rv-t-small); text-align: left; color: var(--muted); }
.pc-wrap .pc-picked { color: var(--rv-accent); font-weight: var(--rv-w-strong); }
.pc-wrap .pc-back, .pc-wrap .pc-all { display: flex; align-items: center; justify-content: center; gap: var(--s2); width: 100%; height: var(--rv-ctl-h); margin: var(--s3) 0 0; border-radius: var(--rv-r-ctl); background: var(--rv-ink); color: var(--text); font: var(--rv-w-strong) var(--rv-t-body)/1 var(--font); text-decoration: none; }
.pc-wrap .pc-board select { border-radius: var(--rv-r-ctl); }
.pc-wrap .pc-empty { padding: var(--s3) var(--s1) var(--s4); } .pc-empty b { font-weight: var(--rv-w-strong); }
/* the Start button is the sheet's sticky bar: always at the bottom of the sheet */
.pc-wrap .pc-body > .pc-go { order: 90; position: sticky; bottom: 0; flex: none; width: auto; margin: var(--s3) calc(-1 * var(--s4)) 0; border-radius: 0; height: auto; min-height: 0; padding: 0; background: none; box-shadow: none; }
.pc-wrap .pc-bar { order: 90; position: sticky; bottom: 0; z-index: 4; flex: none; margin: auto calc(-1 * var(--s4)) 0; box-shadow: none; }
.pc-wrap .pc-bar .or-count { flex: none; font-size: var(--rv-t-body); font-weight: var(--rv-w-heavy); font-variant-numeric: tabular-nums; color: var(--text); }
.pc-wrap .pc-bar .pc-go { flex: 1; min-width: 0; height: var(--rv-btn-h); min-height: var(--rv-btn-h); border-radius: 18px; background: var(--rv-accent); color: var(--rv-on-accent); font-weight: var(--rv-w-heavy); font-size: var(--rv-t-body); box-shadow: none; width: auto; }
.pc-wrap .pc-body > :not(.pc-bar) { order: 0; }
@media (prefers-reduced-motion: reduce) { #sb .opt { transition: none; } }

.pc-wrap .pc-bar .pc-go .i { display: none; }
/* service labels (CityGlider...) stay out of the strip so it reads walk - route - walk; the status tag leads the meta line */
#sb .opt .opt-top .svc-tag { display: none; }
#sb .opt .opt-meta .rv-tag { margin: 0 var(--s2) 0 0; vertical-align: 1px; }
#sb .opt .opt-top { flex-wrap: nowrap; overflow: hidden; }
.pc-wrap .or-row.hd .muted, .pc-wrap .or-row.hd .or-from *:not(b), .pc-wrap .or-row.hd .pc-road { color: var(--o-mut); }
:root[data-look='navy'] .pc-wrap .or-row.hd .or-chip:not(.ok):not(.warn) { background: color-mix(in srgb, var(--o-fg) 14%, transparent); color: var(--o-fg); }
:root[data-look='navy'] .pc-wrap .or-row.hd .or-chip.ok { color: #4BD58B; } :root[data-look='navy'] .pc-wrap .or-row.hd .or-chip.warn { color: #F2B35C; }
.pc-wrap .btn.block[data-all] { height: var(--rv-ctl-h); border: 0; border-radius: var(--rv-r-ctl); background: var(--rv-ink); color: var(--text); font: var(--rv-w-strong) var(--rv-t-body)/1 var(--font); }
.pc-wrap .pc-back { font-size: var(--rv-t-small); height: auto; min-height: var(--rv-ctl-h); padding: var(--s2) var(--s4); line-height: 1.25; text-align: center; }

/* the dark hero in the Navy look keeps its own ink whatever the page theme: re-point the text tokens inside it */
:root[data-look='navy'] #sb .opt.rec, :root[data-look='navy'] .pc-wrap .or-row.hd { --text: #F3F6FF; --muted: #B4BFDC; --line: rgba(243, 246, 255, .18); --rv-ink: rgba(243, 246, 255, .12); }
#sb .opt .ot-tot { white-space: nowrap; }
@media (max-width: 380px) { #sb .opt.rec .ot-l b { font-size: 36px; } #sb .opt.rec .ot-r b, #sb .opt.rec .ot-tot b { font-size: 22px; } #sb .opt .ot-l b { font-size: 28px; } #sb .opt .opt-time { gap: var(--s2); } }
#sb .list:has(> .opt) { border: 0; outline: 0; padding: 0; }

/* (31 Oct) the recommended card: a thin accent, no offset block; the reason it is first; a twin option shrunk to one line */
#sb .opt.rec { border: 1.5px solid var(--rv-hot); box-shadow: none; padding: calc(var(--s4) - .5px); margin-right: 0; margin-bottom: 0; }
#sb .opt .opt-why { margin: calc(var(--s1) * -1) 0 var(--s1); font: var(--rv-w-strong) var(--rv-t-small)/1.3 var(--font); color: var(--o-mut, var(--muted)); }
#sb .opt.twin { gap: var(--s1); padding: var(--s3) var(--s4); background: var(--rv-ink); border-style: dashed; }
#sb .opt.twin .tw-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
#sb .opt.twin .tw-t { font-size: var(--rv-t-small); color: var(--muted); }
#sb .opt.twin .tw-t b { color: var(--text); font-weight: var(--rv-w-strong); }
#sb .opt.twin .tw-m { font-size: var(--rv-t-small); color: var(--muted); }
#sb .opt.twin .tw-row > .i:last-child { margin-left: auto; color: var(--muted); }
#sb .opt.twin .tw-from { font-size: var(--rv-t-small); color: var(--muted); }
#sb .opt.twin .tw-from b { color: var(--text); font-weight: var(--rv-w-strong); }
/* the destination sits in the middle of its field (iOS put the text low when only min-height was set) */
.overlay-top .search-input, .search-input { height: 50px; min-height: 50px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; line-height: 24px; }