/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE SEARCH BAR

   Same language as the rest of the dashboard: one elevated panel on a hairline,
   fields divided by hairlines rather than boxed separately, and the brand sweep
   spent only where it marks a choice — the submit button, a selected day, a
   chosen month, an active option.

   Two colour systems meet here and they must not be confused. --hub-accent
   means "you picked this". --tp-rating (theme.css) means "this month is good
   or bad", four hues that have to stay distinguishable from one another and
   from the accent. The flexible month picker is the only place both appear.
   ══════════════════════════════════════════════════════════════════════════ */

.sb {
    position: relative;
    max-width: 940px;
}

/* ── The bar ─────────────────────────────────────────────────────────────── */

.sb-row {
    display: grid;
    /* Travellers needs room for "2 adults, 2 children" without an ellipsis,
       so it is not the narrowest column. */
    grid-template-columns: 1.35fr 1.3fr 1.15fr auto;
    align-items: stretch;
    background: var(--hub-elev);
    border: 1px solid var(--hub-hairline);
    border-radius: var(--hub-radius);
    box-shadow: var(--hub-shadow);
    overflow: hidden;
}

.sb-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.85rem 1.15rem;
    border: 0;
    border-right: 1px solid var(--hub-hairline);
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    min-width: 0;
    transition: background var(--hub-transition);
}

.sb-field:hover { background: rgb(var(--hub-overlay-rgb) / 0.04); }

/* An open field is the one the panel below belongs to, so it reads as attached
   to it rather than as a fourth thing that happens to be highlighted. */
.sb-field.is-open {
    background: rgb(var(--hub-accent-rgb) / 0.07);
    box-shadow: inset 0 -2px 0 var(--hub-accent);
}

.sb-field:focus-visible {
    outline: 3px solid var(--hub-focus);
    outline-offset: -3px;
}

.sb-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--hub-ink-faint);
}

.sb-value {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--hub-ink-faint);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Something the traveller actually chose reads at full strength; a placeholder
   does not. */
.sb-value.is-set { color: var(--hub-ink); }

.sb-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0 1.75rem;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--hub-on-fill);
    background: var(--hub-fill);
    transition: filter var(--hub-transition);
}

.sb-go svg { width: 18px; height: 18px; flex-shrink: 0; }
.sb-go:hover { filter: brightness(1.06); }
.sb-go:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: -3px; }

/* ── Secondary filters ───────────────────────────────────────────────────── */

.sb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.sb-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.4rem 0.95rem;
    border-radius: 100px;
    border: 1px solid var(--hub-hairline);
    background: var(--hub-elev);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--hub-transition);
}

.sb-chip:hover { border-color: rgb(var(--hub-accent-rgb) / 0.5); }

.sb-chip.is-open,
.sb-chip.is-set {
    border-color: rgb(var(--hub-accent-rgb) / 0.6);
    background: rgb(var(--hub-accent-rgb) / 0.08);
}

.sb-chip:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: 2px; }

.sb-chip-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hub-ink-faint);
}

.sb-chip-value { font-weight: 600; color: var(--hub-ink); }

/* ── The panel ───────────────────────────────────────────────────────────── */

/* In the flow, not floating over it.
 *
 * This was an absolutely positioned overlay, which meant opening a field
 * covered the tours below — the panel read as a separate thing that had landed
 * on the page rather than as part of the bar it came out of. It is a normal
 * block now: the form grows, the page moves down with it, and nothing is
 * hidden behind it.
 */
.sb-panel {
    margin-top: 0.6rem;
    background: var(--hub-elev);
    border: 1px solid var(--hub-hairline);
    border-radius: var(--hub-radius);
    box-shadow: var(--hub-shadow);
    max-height: min(70vh, 620px);
    overflow-y: auto;
    /* Grows from the bar rather than appearing at full height. */
    animation: sb-open 0.18s ease-out;
}

@keyframes sb-open {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* Duration and budget are short lists; a full-width sheet for four options
   reads as a mistake. */
.sb-panel[data-panel="duration"],
.sb-panel[data-panel="budget"] {
    max-width: 300px;
}

.sb-panel-inner { padding: 1.25rem; }

.sb-hint {
    margin: 0.9rem 0 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--hub-ink-muted);
}

.sb-none {
    margin: 1.5rem 0;
    text-align: center;
    color: var(--hub-ink-muted);
}

.sb-panel-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--hub-hairline);
}

.sb-clear {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--hub-hairline);
    border-radius: 100px;
    background: transparent;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hub-ink-muted);
    cursor: pointer;
}

.sb-clear:hover { border-color: rgb(var(--hub-accent-rgb) / 0.5); color: var(--hub-ink); }

/* ── Where ───────────────────────────────────────────────────────────────── */

.sb-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
}

.sb-text {
    flex: 1;
    min-width: 200px;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--hub-hairline);
    border-radius: 10px;
    background: var(--hub-bg);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--hub-ink);
}

.sb-text::placeholder { color: var(--hub-ink-faint); }
.sb-text:focus { outline: 3px solid var(--hub-focus); outline-offset: -1px; border-color: var(--hub-accent); }

.sb-anywhere {
    padding: 0.6rem 1.1rem;
    border-radius: 10px;
    border: 1px solid var(--hub-hairline);
    background: transparent;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--hub-ink-muted);
    cursor: pointer;
    white-space: nowrap;
}

.sb-anywhere.is-active {
    background: var(--hub-fill);
    border-color: transparent;
    color: var(--hub-on-fill);
}

/* Three columns, because North / Central / South is how this country is
   chosen — and because it puts seventeen destinations on one screen instead of
   in the scrolling native list this replaced. */
.sb-where-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
}

.sb-where-region {
    margin: 0 0 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hub-accent);
}

.sb-where-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.sb-where-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--hub-transition);
}

.sb-where-item:hover { background: rgb(var(--hub-overlay-rgb) / 0.05); }

.sb-where-item.is-active {
    background: rgb(var(--hub-accent-rgb) / 0.1);
    border-color: rgb(var(--hub-accent-rgb) / 0.4);
}

.sb-where-item:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: 1px; }

.sb-where-name { font-size: 0.92rem; font-weight: 600; color: var(--hub-ink); }

.sb-where-season {
    font-size: 0.75rem;
    color: var(--hub-ink-faint);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── When ────────────────────────────────────────────────────────────────── */

.sb-tabs {
    display: inline-flex;
    gap: 0.3rem;
    padding: 0.25rem;
    margin-bottom: 1.1rem;
    background: rgb(var(--hub-overlay-rgb) / 0.05);
    border-radius: 100px;
}

.sb-tab {
    padding: 0.4rem 1.1rem;
    border: 0;
    border-radius: 100px;
    background: transparent;
    font-family: inherit;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--hub-ink-muted);
    cursor: pointer;
}

.sb-tab.is-active {
    background: var(--hub-fill);
    color: var(--hub-on-fill);
    font-weight: 700;
}

.sb-tab:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: 2px; }

.sb-cal-nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: -1.9rem;   /* sits on the month captions' line */
    position: relative;
    z-index: 1;
}

.sb-nav {
    width: 30px;
    height: 30px;
    border: 1px solid var(--hub-hairline);
    border-radius: 50%;
    background: var(--hub-elev);
    color: var(--hub-ink);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.sb-nav:hover { border-color: rgb(var(--hub-accent-rgb) / 0.55); }
.sb-nav:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: 2px; }

.sb-cals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
}

.sb-cal-head {
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--hub-ink);
    margin-bottom: 0.75rem;
}

.sb-cal-weekdays,
.sb-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.sb-cal-weekdays {
    margin-bottom: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hub-ink-faint);
    text-align: center;
}

.sb-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hub-ink);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background var(--hub-transition);
}

.sb-day.is-blank { visibility: hidden; }
.sb-day:hover:not(:disabled):not(.is-from):not(.is-to) { background: rgb(var(--hub-overlay-rgb) / 0.08); }

.sb-day.is-disabled,
.sb-day:disabled {
    color: var(--hub-ink-faint);
    opacity: 0.4;
    cursor: default;
}

/* Ends of the range are filled; the days between are tinted, so the shape of
   the trip reads without counting. */
.sb-day.is-from,
.sb-day.is-to {
    background: var(--hub-fill);
    color: var(--hub-on-fill);
    font-weight: 800;
}

.sb-day.is-in-range { background: rgb(var(--hub-accent-rgb) / 0.14); }

.sb-day:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: 1px; }

/* ── Flexible months ─────────────────────────────────────────────────────── */

.sb-months {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.4rem;
}

.sb-month {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 0.25rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--hub-transition), border-color var(--hub-transition);
}

.sb-month:hover { background: rgb(var(--hub-overlay-rgb) / 0.05); }

/* The row is coloured by rating now, so "selected" cannot be another tint —
   it is a ring and a lift instead. */
.sb-month.is-selected {
    border-color: var(--hub-ink);
    box-shadow: 0 0 0 1px var(--hub-ink);
    background: rgb(var(--hub-overlay-rgb) / 0.06);
}

.sb-month:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: 1px; }

.sb-month-name { font-size: 0.78rem; font-weight: 700; color: var(--hub-ink); }

.sb-month-sky {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    color: var(--tp-rating);
}

.sb-month-temp {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--hub-ink);
    font-variant-numeric: tabular-nums;
}

/* The rating band.
 *
 * This was 4px, which is not enough colour to judge: colour discrimination
 * falls away sharply with area, so four ratings across twelve thin rules read
 * as one smudge. Ten pixels, full width, fully saturated — enough to compare a
 * row of months at a glance. */
.sb-month-bar {
    display: block;
    width: 100%;
    height: 10px;
    border-radius: 3px;
    background: var(--tp-rating);
}

/* The word takes the rating's colour too. Colour and text saying the same
   thing is the point: neither has to carry it alone. */
.sb-month-verdict {
    font-size: 0.66rem;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    color: var(--tp-rating);
}

.sb-month-now {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hub-accent);
}

.sb-month-note {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-top: 0.9rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--hub-hairline);
    border-left: 4px solid var(--tp-rating);
    border-radius: 10px;
    background: rgb(var(--hub-overlay-rgb) / 0.03);
}

.sb-note-icon { color: var(--tp-rating); flex-shrink: 0; display: flex; }

.sb-note-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }

.sb-month-note strong { color: var(--hub-ink); font-size: 0.95rem; }
.sb-month-note span { color: var(--hub-ink-muted); font-size: 0.88rem; line-height: 1.5; }

.sb-note-figures {
    color: var(--hub-ink) !important;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Travellers ──────────────────────────────────────────────────────────── */

.sb-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--hub-hairline);
}

.sb-count:first-child { padding-top: 0; }

.sb-count-label {
    display: block;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--hub-ink);
}

.sb-count-sub {
    display: block;
    font-size: 0.82rem;
    color: var(--hub-ink-muted);
    margin-top: 0.1rem;
}

.sb-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
}

.sb-step {
    width: 34px;
    height: 34px;
    border: 1px solid var(--hub-hairline);
    border-radius: 50%;
    background: transparent;
    color: var(--hub-ink);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--hub-transition);
}

.sb-step:hover:not(:disabled) { border-color: var(--hub-accent); color: var(--hub-accent); }
.sb-step:disabled { opacity: 0.35; cursor: default; }
.sb-step:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: 2px; }

.sb-step-value {
    min-width: 1.5ch;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--hub-ink);
    font-variant-numeric: tabular-nums;
}

.sb-ages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.sb-age {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--hub-ink-faint);
}

.sb-age select {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--hub-hairline);
    border-radius: 8px;
    background: var(--hub-bg);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--hub-ink);
}

.sb-age select:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: 1px; }

/* ── Duration and budget ─────────────────────────────────────────────────── */

.sb-options {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sb-option {
    padding: 0.6rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--hub-ink);
    text-align: left;
    cursor: pointer;
}

.sb-option:hover { background: rgb(var(--hub-overlay-rgb) / 0.05); }

.sb-option.is-active {
    background: rgb(var(--hub-accent-rgb) / 0.1);
    border-color: rgb(var(--hub-accent-rgb) / 0.45);
}

.sb-option:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: 1px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
    .sb-row { grid-template-columns: 1fr 1fr; }
    .sb-field-where { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--hub-hairline); }
    .sb-field-who { border-right: 0; }
    .sb-go { grid-column: 1 / -1; padding: 0.95rem 1.5rem; border-top: 1px solid var(--hub-hairline); }

    /* Two months side by side at phone width gives each day about 18px. */
    .sb-cals { grid-template-columns: 1fr; gap: 1.25rem; }
    .sb-cal-nav { margin-bottom: -1.9rem; }
    .sb-months { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .sb-panel { animation: none; }
}

@media (max-width: 560px) {
    /* Half a phone's width cannot hold "2 adults, 2 children" and it was
       ellipsised away. Each field gets its own row here: a taller bar, but no
       value the traveller has to open a panel to re-read. */
    .sb-row { grid-template-columns: 1fr; }
    .sb-field { border-right: 0; border-bottom: 1px solid var(--hub-hairline); }

    /* One field per row makes the bar 429px tall on a 360px phone — more than
       half the screen — so an open panel was left with the scraps. While a
       panel is open the other fields are not what you are looking at: the one
       you opened stays as the heading, the rest stand down and the panel takes
       the screen. They come straight back when it closes. */
    .sb-row:has(.sb-field.is-open) .sb-field:not(.is-open) { display: none; }

    .sb-panel { max-height: none; }
    .sb-panel-inner { padding: 1rem; }
    .sb-months { grid-template-columns: repeat(3, 1fr); }
    .sb-month-verdict { display: none; }
    .sb-month-sky { height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .sb-field, .sb-chip, .sb-day, .sb-month, .sb-step, .sb-go { transition: none; }
}

/* ── Tours / Flights ─────────────────────────────────────────────────────────
 * The same bar answers two questions. A traveller planning Vietnam needs both,
 * and sending them to a different page for the flight loses the dates and the
 * party size they have just entered — those are shared between the two modes
 * here, so switching keeps them.
 * ────────────────────────────────────────────────────────────────────────── */

.sb-modes {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: 0.75rem;
    background: rgb(var(--hub-overlay-rgb) / 0.06);
    border-radius: 100px;
}

.sb-mode {
    padding: 0.4rem 1.25rem;
    border: 0;
    border-radius: 100px;
    background: transparent;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--hub-ink-muted);
    cursor: pointer;
    transition: background var(--hub-transition), color var(--hub-transition);
}

.sb-mode.is-active {
    background: var(--hub-fill);
    color: var(--hub-on-fill);
    font-weight: 700;
}

.sb-mode:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: 2px; }

/* Four fields plus the button, so the columns differ from the tour row. */
.sb-row-flights { grid-template-columns: 1.2fr 1.2fr 1.2fr 1fr auto; }

/* display:grid beats [hidden] from the UA stylesheet. */
.sb-row[hidden], .sb-chips[hidden] { display: none; }

/* ── Airport picker ──────────────────────────────────────────────────────── */

.sb-place-list {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.sb-place {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.55rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--hub-transition);
}

.sb-place:hover { background: rgb(var(--hub-overlay-rgb) / 0.05); }
.sb-place:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: 1px; }

/* The IATA code is how airports are actually identified on a ticket, so it
   leads rather than trailing the name in brackets. */
.sb-place-iata {
    flex-shrink: 0;
    min-width: 3ch;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    background: rgb(var(--hub-accent-rgb) / 0.12);
    color: var(--hub-accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: center;
}

.sb-place-text { display: flex; flex-direction: column; min-width: 0; }
.sb-place-text strong { font-size: 0.92rem; font-weight: 600; color: var(--hub-ink); }
.sb-place-text span {
    font-size: 0.78rem;
    color: var(--hub-ink-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-place-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.3rem;
    margin-top: 0.5rem;
}

.sb-place-chip {
    border: 1px solid var(--hub-hairline);
    padding: 0.45rem 0.55rem;
}

@media (max-width: 860px) {
    .sb-row-flights { grid-template-columns: 1fr 1fr; }
    .sb-field-from, .sb-field-to { border-right: 0; border-bottom: 1px solid var(--hub-hairline); }
    .sb-field-from { border-right: 1px solid var(--hub-hairline); }
}

@media (max-width: 560px) {
    .sb-row-flights { grid-template-columns: 1fr; }
    .sb-field-from { border-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sb-mode, .sb-place { transition: none; }
}

/* ── The three regions, for the chosen month ─────────────────────────────────
 * Only when no destination has been picked. Once someone has chosen Hội An the
 * month strip above is already about the Central region and a comparison would
 * be answering a question they have moved past.
 * ────────────────────────────────────────────────────────────────────────── */

.sb-regions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.sb-region {
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--hub-hairline);
    border-left: 3px solid var(--tp-rating);
    background: rgb(var(--hub-overlay-rgb) / 0.03);
}

.sb-region-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.sb-region-name { font-size: 0.9rem; font-weight: 700; color: var(--hub-ink); }

.sb-region-verdict {
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tp-rating);
    white-space: nowrap;
}

/* A 3px edge was the only colour on these cards; widen it so the three regions
   can be told apart from across the panel. */
.sb-region { border-left-width: 5px; }

.sb-region-wx {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.25rem;
}

.sb-region-icon { display: flex; color: var(--tp-rating); flex-shrink: 0; }

.sb-region-temp {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--hub-ink);
    font-variant-numeric: tabular-nums;
}

.sb-region-rain {
    font-size: 0.78rem;
    color: var(--hub-ink-muted);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

.sb-region-note { margin: 0; font-size: 0.78rem; color: var(--hub-ink-muted); }

@media (max-width: 700px) {
    .sb-regions { grid-template-columns: 1fr; }
}

/* ── The planner, inside the search ──────────────────────────────────────────
 * Month strip across the top; regions and the chosen month's verdict on the
 * left; the map on the right. Same three things the homepage planner shows,
 * so someone who opens the date field does not have to scroll past the search
 * to answer "which month".
 * ────────────────────────────────────────────────────────────────────────── */

.sb-flex-lower {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.9rem;
    align-items: start;
}

.sb-flex-left { display: flex; flex-direction: column; gap: 0.9rem; }

.sb-flex-lower .sb-regions { grid-template-columns: 1fr; margin-top: 0; }
.sb-flex-lower .sb-month-note { margin-top: 0; }

.sb-flex-map { display: flex; flex-direction: column; gap: 0.5rem; }

.sb-map {
    height: 460px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--hub-hairline);
    background: var(--hub-elev);
}

.sb-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.74rem;
    color: var(--hub-ink-muted);
}

.sb-map-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }

.sb-map-legend i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    background: var(--tp-rating);
}

/* Leaflet's own chrome, in the site's palette. */
.sb-map.leaflet-container { font: inherit; }
.sb-map .leaflet-control-attribution { display: none; }

.sb-map .leaflet-bar a {
    background: var(--hub-elev);
    color: var(--hub-ink);
    border-bottom-color: var(--hub-hairline);
}

.sb-map .leaflet-bar a:hover { background: rgb(var(--hub-accent-rgb) / 0.15); }

@media (max-width: 900px) {
    /* Side by side, each half is too narrow for either to be read. */
    .sb-flex-lower { grid-template-columns: 1fr; }
    .sb-flex-lower .sb-regions { grid-template-columns: repeat(3, 1fr); }
    .sb-map { height: 340px; }
}

@media (max-width: 700px) {
    .sb-flex-lower .sb-regions { grid-template-columns: 1fr; }
}

/* ── The planner mode ────────────────────────────────────────────────────────
 * A third thing the bar can do, beside Tours and Flights. It was briefly a tab
 * inside the date field, which was the wrong home: picking a departure month
 * and working out where in the country to go are different jobs.
 * ────────────────────────────────────────────────────────────────────────── */

.sb-plan {
    padding: 1.35rem 1.5rem;
    background: var(--hub-elev);
    border: 1px solid var(--hub-hairline);
    border-radius: var(--hub-radius);
    box-shadow: var(--hub-shadow);
}

.sb-plan[hidden] { display: none; }

.sb-plan-lede {
    margin: 0 0 1rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--hub-ink-muted);
    max-width: 70ch;
}

.sb-plan-credit {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.5;
    color: var(--hub-ink-faint);
}

.sb-plan-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hub-hairline);
}

.sb-plan-go {
    border-radius: 100px;
    padding: 0.7rem 1.6rem;
}

/* The link out of the date field into the planner. */
.sb-linkish {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    color: var(--hub-accent);
    cursor: pointer;
    text-decoration: underline;
}

.sb-linkish:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: 2px; }

/* In the planner the three regions read as a row, not a stack. */
.sb-plan .sb-regions { grid-template-columns: 1fr; margin-top: 0; }

@media (max-width: 900px) {
    .sb-plan { padding: 1.1rem; }
}

/* ───────────────────────────────────────────────────────────────
   Touch targets
   Measured on a 360px phone: the mode switch came out 29px tall, the
   filter chips 30px and the sort select 32px. Apple asks for 44pt and
   Android for 48dp; below that people miss and hit the neighbour. The
   controls keep their visual size — the padding grows, which is what
   the finger actually lands on.
   ─────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    .sb-mode {
        min-height: 44px;
        padding-inline: 1rem;
    }

    .sb-chip {
        min-height: 44px;
        padding-block: 0.5rem;
    }
}