/* ============================================================
   PLAN MY VIETNAM — SAIGON

   The 30-second flow and the itinerary it produces.

   Loaded AFTER vietnam.css and deliberately borrowing its palette rather
   than introducing one: this is the same product, and a planner that looked
   like a different site would read as a bolt-on. It needs `.vn` on an
   ancestor for the tokens (--vn-jade, --vn-ink, --vn-paper …) to resolve.

   Every selector is prefixed .sg- so this file cannot reach any existing
   page. It lives separately from vietnam.css because that file is a
   different feature with its own size budget, and because a planner
   stylesheet that only two templates load has no business being downloaded
   by every guide page.

   DESIGN INTENT — powerful backend, calm frontend.
   The engine is weighing walking budgets, ride budgets, heat, opening
   windows, cluster coherence and layer balance. The traveller sees a time,
   a name, one sentence of reasoning, and a lot of white space.
   ============================================================ */

.sg {
    --sg-gap: 18px;
    --sg-radius: 18px;
    --sg-line: var(--vn-line, #e7dccb);
    --sg-card: #fff;
    --sg-ink: var(--vn-ink, #1b2438);
    --sg-soft: var(--vn-ink-soft, #5a6478);
    --sg-jade: var(--vn-jade, #1f7a63);
    --sg-jade-soft: var(--vn-jade-soft, #e6f2ee);
    --sg-terra: var(--vn-terracotta, #ac4e2a);
    --sg-terra-soft: var(--vn-terracotta-soft, #fbeee7);
    /* Weather. Jade already means "this day is easy" and terracotta means
       "read this" — the rain is neither, so it gets its own muted sky tone.
       #2b6480 on #e8f1f6 clears AA for the small bold text it carries. */
    --sg-sky: #2b6480;
    --sg-sky-soft: #e8f1f6;
    --sg-paper: var(--vn-paper, #fdfaf4);
    --sg-warm: var(--vn-paper-warm, #f8f0e3);
    --sg-shadow: 0 1px 2px rgba(27, 36, 56, .05),
                 0 8px 24px -12px rgba(27, 36, 56, .16);
    --sg-shadow-lift: 0 2px 4px rgba(27, 36, 56, .06),
                      0 14px 32px -14px rgba(27, 36, 56, .24);

    /* The site navbar is position:fixed with a maximal z-index and reserves
       no space of its own, so every page has to clear it. vietnam.css
       measured it at 59px, 61px on a phone. Without this the first heading
       renders UNDERNEATH the navbar and is simply not readable — which is
       exactly what it did. */
    padding: calc(var(--vn-navbar-h, 59px) + 26px) 18px 96px;
    max-width: 760px;
    margin: 0 auto;
}

.sg *, .sg *::before, .sg *::after { box-sizing: border-box; }
.sg [hidden] { display: none !important; }

.sg .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sg-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--sg-jade);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sg-link:focus-visible {
    outline: 2px solid var(--sg-jade);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ============================================================
   THE WIZARD

   The opening screen has one job: make somebody believe this will take
   thirty seconds, and then let it. So the page states the promise, shows
   exactly four steps, and puts the first question immediately under the
   fold-line rather than after a scroll.
   ============================================================ */

.sg-wiz-head {
    text-align: center;
    margin-bottom: 26px;
    position: relative;
}

/* A soft warm wash behind the opening, bleeding past the container. It is
   doing a job: it separates the promise from the questions without drawing
   a line, and it stops the page reading as a bare form on white. */
.sg-wiz-head::before {
    content: "";
    position: absolute;
    inset: -70px -50vw -28px;
    background:
        radial-gradient(60% 80% at 50% 12%,
                        var(--sg-jade-soft) 0%, transparent 68%),
        radial-gradient(46% 62% at 82% 4%,
                        var(--sg-terra-soft) 0%, transparent 62%);
    opacity: .85;
    z-index: -1;
    pointer-events: none;
}

.sg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--sg-jade);
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--sg-line);
    border-radius: 999px;
    padding: 6px 14px;
    margin: 0 0 16px;
}

.sg-eyebrow i { font-size: .8rem; }

.sg-wiz-head h1 {
    font-size: clamp(1.85rem, 7vw, 2.9rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0 0 14px;
    color: var(--sg-ink);
    text-wrap: balance;
}

/* The city name is the point of the sentence, so it is the one coloured
   thing in it. */
.sg-wiz-head h1 em {
    font-style: normal;
    color: var(--sg-terra);
}

.sg-wiz-lede {
    color: var(--sg-soft);
    max-width: 34ch;
    margin: 0 auto 22px;
    font-size: 1.02rem;
    line-height: 1.55;
    text-wrap: balance;
}

/* ---------- the stepper ----------
   Four segments, visible from the first frame. A bare progress bar tells
   you how far along you are; four discrete segments tell you how short the
   whole thing is, which is the promise this page is making. */

.sg-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 auto 10px;
    max-width: 300px;
}

.sg-steps span {
    flex: 1;
    height: 5px;
    border-radius: 99px;
    background: var(--sg-line);
    transition: background .28s ease, transform .28s ease;
}

.sg-steps span.is-done { background: var(--sg-jade); }

.sg-steps span.is-now {
    background: var(--sg-jade);
    transform: scaleY(1.7);
}

.sg-wiz-count {
    font-size: .8rem;
    color: var(--sg-soft);
    margin: 0;
    letter-spacing: .01em;
}

.sg-wiz-count b { color: var(--sg-ink); font-weight: 700; }

/* ---------- a step ----------
   Without JavaScript every question is visible at once and the form still
   submits; `.is-paged` is added only by the script. The min-height keeps
   the Next button from jumping around between questions of different
   lengths — but it is modest, because an empty half-screen under a short
   question reads as a broken page. */

.sg-step {
    border: 0;
    padding: 0;
    margin: 0 0 40px;
    animation: sg-step-in .32s ease both;
}

/* Enough to stop the nav jumping between a six-chip question and a
   twelve-card one, not so much that a short question leaves a void. The
   bottom padding lets the last row scroll clear of the sticky nav. */
.sg-wiz.is-paged .sg-step {
    margin-bottom: 0;
    min-height: 230px;
    padding-bottom: 24px;
}

/* Room for the pinned nav, so the last row of cards can always be scrolled
   out from behind it rather than staying half-covered. */
@media (max-width: 700px) {
    .sg-wiz.is-paged .sg-step { padding-bottom: 136px; }
}

@keyframes sg-step-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.sg-step legend {
    font-size: clamp(1.2rem, 4.4vw, 1.55rem);
    font-weight: 700;
    color: var(--sg-ink);
    padding: 0;
    margin-bottom: 6px;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.sg-step legend:focus-visible {
    outline: 2px solid var(--sg-jade);
    outline-offset: 5px;
    border-radius: 5px;
}

.sg-help {
    color: var(--sg-soft);
    font-size: .92rem;
    line-height: 1.55;
    margin: 0 0 18px;
}

.sg-sub {
    font-weight: 700;
    color: var(--sg-ink);
    margin: 22px 0 10px;
    font-size: .95rem;
}

/* ---------- shared: the invisible input pattern ----------
   The real radio/checkbox covers the whole card so the entire card is the
   hit target and keyboard focus still lands somewhere real. */

.sg-len, .sg-who-opt, .sg-style, .sg-interest, .sg-chip {
    position: relative;
    cursor: pointer;
    display: block;
}

.sg-len input, .sg-who-opt input, .sg-style input,
.sg-interest input, .sg-chip input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

/* ---------- 1. how long ----------
   NOTE: these are .sg-len, not .sg-day. `.sg-day` belongs to the itinerary
   page, where `.sg-day:not(.is-on) { display: none }` drives the day tabs —
   and it happily hid this entire question until the classes were split. */

.sg-days {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 16px;
}

.sg-len > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 82px;
    border: 1.5px solid var(--sg-line);
    border-radius: var(--sg-radius);
    background: var(--sg-card);
    box-shadow: var(--sg-shadow);
    font-size: .78rem;
    color: var(--sg-soft);
    transition: border-color .18s, background .18s,
                transform .18s, box-shadow .18s;
}

.sg-len > span strong {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--sg-ink);
    line-height: 1;
    letter-spacing: -.02em;
}

.sg-len:hover > span {
    border-color: var(--sg-jade);
    transform: translateY(-2px);
    box-shadow: var(--sg-shadow-lift);
}

.sg-len input:checked + span {
    border-color: var(--sg-jade);
    border-width: 2px;
    background: var(--sg-jade-soft);
    box-shadow: var(--sg-shadow-lift);
}

.sg-len input:checked + span strong { color: var(--sg-jade); }

.sg-len input:focus-visible + span {
    outline: 2px solid var(--sg-jade);
    outline-offset: 3px;
}

/* ---------- the exact-dates escape hatch ---------- */

.sg-dates {
    margin-top: 18px;
    border: 1px solid var(--sg-line);
    border-radius: 14px;
    background: var(--sg-card);
    overflow: hidden;
}

.sg-dates summary {
    cursor: pointer;
    color: var(--sg-ink);
    font-weight: 600;
    font-size: .9rem;
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    list-style: none;
}

.sg-dates summary::-webkit-details-marker { display: none; }

.sg-dates summary i:first-child {
    color: var(--sg-jade);
    font-size: .95rem;
}

/* The chevron is the affordance that says this opens. */
.sg-dates summary::after {
    content: "";
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--sg-soft);
    border-bottom: 2px solid var(--sg-soft);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .22s ease;
}

.sg-dates[open] summary::after {
    transform: rotate(-135deg) translateY(-2px);
}

.sg-dates summary:hover { background: var(--sg-warm); }

.sg-dates summary:focus-visible {
    outline: 2px solid var(--sg-jade);
    outline-offset: -3px;
}

.sg-dates-body {
    padding: 4px 16px 18px;
    border-top: 1px solid var(--sg-line);
}

.sg-dates-body .sg-help { margin: 14px 0 16px; }

.sg-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.sg-field { display: block; }

.sg-field > span {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--sg-soft);
    margin-bottom: 6px;
}

.sg-field input, .sg-field select {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1.5px solid var(--sg-line);
    border-radius: 11px;
    font: inherit;
    color: var(--sg-ink);
    background: var(--sg-card);
    transition: border-color .18s;
}

.sg-field input:hover, .sg-field select:hover {
    border-color: var(--sg-jade);
}

.sg-field input:focus-visible, .sg-field select:focus-visible {
    outline: 2px solid var(--sg-jade);
    outline-offset: 1px;
    border-color: var(--sg-jade);
}

/* ---------- 2. who ---------- */

.sg-who {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.sg-who-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 104px;
    padding: 16px 10px;
    border: 1.5px solid var(--sg-line);
    border-radius: var(--sg-radius);
    background: var(--sg-card);
    box-shadow: var(--sg-shadow);
    text-align: center;
    transition: border-color .18s, background .18s,
                transform .18s, box-shadow .18s;
}

.sg-who-body i {
    font-size: 1.45rem;
    color: var(--sg-jade);
    transition: transform .18s ease;
}

.sg-who-body strong {
    font-size: .95rem;
    color: var(--sg-ink);
    font-weight: 600;
}

.sg-who-opt:hover .sg-who-body {
    border-color: var(--sg-jade);
    transform: translateY(-2px);
    box-shadow: var(--sg-shadow-lift);
}

.sg-who-opt input:checked + .sg-who-body {
    border-color: var(--sg-jade);
    border-width: 2px;
    background: var(--sg-jade-soft);
    box-shadow: var(--sg-shadow-lift);
}

.sg-who-opt input:checked + .sg-who-body i { transform: scale(1.12); }

.sg-who-opt input:focus-visible + .sg-who-body {
    outline: 2px solid var(--sg-jade);
    outline-offset: 3px;
}

/* The one adaptive follow-up, and only for the two travellers whose plan it
   genuinely changes. It slides in rather than appearing, so it reads as a
   consequence of the choice above it. */
.sg-followup {
    margin-top: 20px;
    padding: 18px;
    border-radius: 14px;
    background: var(--sg-warm);
    border: 1px solid var(--sg-line);
    animation: sg-step-in .28s ease both;
}

.sg-followup .sg-sub { margin-top: 0; }

/* ---------- chips ---------- */

.sg-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.sg-chip > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 46px;
    padding: 9px 17px;
    border: 1.5px solid var(--sg-line);
    border-radius: 999px;
    background: var(--sg-card);
    font-size: .9rem;
    color: var(--sg-ink);
    transition: border-color .18s, background .18s, transform .18s;
}

.sg-chip:hover > span {
    border-color: var(--sg-jade);
    transform: translateY(-1px);
}

.sg-chip input:checked + span {
    border-color: var(--sg-jade);
    border-width: 2px;
    background: var(--sg-jade-soft);
    font-weight: 600;
}

.sg-chip input:focus-visible + span {
    outline: 2px solid var(--sg-jade);
    outline-offset: 2px;
}

.sg-chip-wide { flex: 1 1 220px; }

.sg-chip-wide > span {
    border-radius: 13px;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 13px 15px;
}

.sg-chip-wide small {
    color: var(--sg-soft);
    font-size: .8rem;
    font-weight: 400;
}

/* ---------- 3. interests ---------- */

.sg-interests {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(102px, 1fr));
    gap: 10px;
}

.sg-interest > span {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 94px;
    padding: 14px 8px;
    border: 1.5px solid var(--sg-line);
    border-radius: var(--sg-radius);
    background: var(--sg-card);
    box-shadow: var(--sg-shadow);
    font-size: .85rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.25;
    color: var(--sg-ink);
    transition: border-color .18s, background .18s, opacity .18s,
                transform .18s, box-shadow .18s;
}

.sg-interest > span i {
    font-size: 1.3rem;
    color: var(--sg-terra);
    transition: transform .18s ease;
}

.sg-interest:hover > span {
    border-color: var(--sg-terra);
    transform: translateY(-2px);
    box-shadow: var(--sg-shadow-lift);
}

.sg-interest input:checked + span {
    border-color: var(--sg-terra);
    border-width: 2px;
    background: var(--sg-terra-soft);
    font-weight: 600;
    box-shadow: var(--sg-shadow-lift);
}

.sg-interest input:checked + span i { transform: scale(1.14); }

/* A tick, because "which of these did I pick" should be answerable at a
   glance rather than by comparing background tints. */
.sg-interest input:checked + span::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--sg-terra);
    box-shadow: inset 0 0 0 2px var(--sg-terra-soft),
                inset 0 0 0 3px var(--sg-terra);
}

.sg-interest input:focus-visible + span {
    outline: 2px solid var(--sg-terra);
    outline-offset: 3px;
}

/* Dimmed once the ceiling is reached, never hidden — a choice that vanishes
   is a choice people think they imagined. */
.sg-interest.is-off > span { opacity: .34; }
.sg-interest.is-off:hover > span { transform: none; border-color: var(--sg-line); }
.sg-interest.is-wild > span i { color: var(--vn-gold, #e0a340); }

.sg-limit {
    margin: 14px 0 0;
    font-size: .86rem;
    color: var(--sg-terra);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* ---------- 4. spending style ---------- */

.sg-styles { display: grid; gap: 10px; margin-top: 16px; }

.sg-style-body {
    display: grid;
    grid-template-columns: 38px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 13px;
    min-height: 78px;
    padding: 15px 17px;
    border: 1.5px solid var(--sg-line);
    border-radius: var(--sg-radius);
    background: var(--sg-card);
    box-shadow: var(--sg-shadow);
    transition: border-color .18s, background .18s,
                transform .18s, box-shadow .18s;
}

.sg-style-body i {
    grid-row: 1 / 3;
    font-size: 1.35rem;
    color: var(--sg-jade);
    text-align: center;
}

.sg-style-body strong {
    font-size: 1.02rem;
    color: var(--sg-ink);
    font-weight: 700;
}

.sg-style-body small {
    font-size: .86rem;
    color: var(--sg-soft);
    line-height: 1.45;
}

.sg-style:hover .sg-style-body {
    border-color: var(--sg-jade);
    transform: translateY(-2px);
    box-shadow: var(--sg-shadow-lift);
}

.sg-style input:checked + .sg-style-body {
    border-color: var(--sg-jade);
    border-width: 2px;
    background: var(--sg-jade-soft);
    box-shadow: var(--sg-shadow-lift);
}

.sg-style input:focus-visible + .sg-style-body {
    outline: 2px solid var(--sg-jade);
    outline-offset: 3px;
}

/* ---------- nav ----------
   Sticky to the bottom on a phone so the primary action is always reachable
   without scrolling back down a long question. */

.sg-wiz-nav {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 26px;
    flex-wrap: wrap;
    padding: 16px 0 18px;
    z-index: 3;
}

/* Pinned to the bottom on a phone, where a twelve-card question is taller
   than the viewport and hunting for the button costs a scroll. On a wider
   screen the whole step fits and pinning it would only steal space and
   cover the last row of cards. */
@media (max-width: 700px) {
    .sg-wiz-nav {
        position: sticky;
        bottom: 0;
        /* Opaque under the buttons, fading upward. Cards half-visible
           behind a translucent bar read as a rendering bug; this reads as
           a deliberate edge. */
        background: linear-gradient(to top,
                    var(--sg-paper) 0%, var(--sg-paper) 76%,
                    transparent 100%);
    }
}

.sg-wiz-nav .vn-btn { min-height: 50px; }

/* Next is the primary action on every step except the last. It takes the
   space so it is the obvious thing to press. */
#sgNext { flex: 1 1 auto; }

/* "Build my Saigon" is a SKIP-AHEAD until the final step, and only becomes
   the primary action there. Two identically-styled buttons side by side is
   two primary actions, which is no primary action at all. */
.sg-go {
    margin-left: auto;
    order: 3;
}

.sg-go:not(.is-final) {
    flex: 1 1 100%;
    margin-left: 0;
    background: transparent;
    color: var(--sg-terra);
    border: 1.5px solid var(--sg-line);
    box-shadow: none;
    font-size: .92rem;
    min-height: 46px;
}

.sg-go:not(.is-final):hover {
    border-color: var(--sg-terra);
    background: var(--sg-terra-soft);
}

.sg-go.is-final {
    flex: 1 1 auto;
    box-shadow: 0 6px 20px -6px rgba(172, 78, 42, .5);
}

.sg-go:disabled { opacity: .75; cursor: progress; }

/* ---------- the fast path ---------- */

.sg-quick {
    margin-top: 40px;
    padding: 24px;
    border-radius: var(--sg-radius);
    background: var(--sg-warm);
    border: 1px solid var(--sg-line);
    position: relative;
}

.sg-quick h2 {
    font-size: 1.2rem;
    margin: 0 0 5px;
    color: var(--sg-ink);
    letter-spacing: -.01em;
}

.sg-quick > p { color: var(--sg-soft); font-size: .92rem; margin: 0 0 18px; }

.sg-quick-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: end;
}

.sg-quick-go { grid-column: 1 / -1; min-height: 50px; }

.sg-foot {
    margin-top: 32px;
    font-size: .88rem;
    color: var(--sg-soft);
    display: flex;
    gap: 8px;
    align-items: baseline;
    line-height: 1.55;
}

.sg-foot a { color: var(--sg-jade); font-weight: 600; }

/* ============================================================
   THE ITINERARY
   ============================================================ */

.sg-trip.is-busy { opacity: .55; pointer-events: none; }

.sg-hero { text-align: center; margin-bottom: 22px; }

.sg-hero h1 {
    font-size: clamp(1.6rem, 5.5vw, 2.3rem);
    margin: 4px 0 8px;
    color: var(--sg-ink);
    line-height: 1.15;
}

.sg-hero-tags {
    color: var(--sg-terra);
    font-weight: 600;
    font-size: .95rem;
    margin: 0 0 10px;
}

.sg-hero-money {
    color: var(--sg-soft);
    font-size: .92rem;
    margin: 0;
    line-height: 1.6;
}

.sg-money { font-weight: 700; color: var(--sg-ink); white-space: nowrap; }

/* ---------- the five controls ---------- */

.sg-controls {
    position: sticky;
    top: var(--vn-navbar-h, 59px);
    z-index: 5;
    display: flex;
    gap: 6px;
    padding: 10px 0;
    margin-bottom: 6px;
    background: var(--vn-paper, #fdfaf4);
    overflow-x: auto;
    scrollbar-width: none;
}

.sg-controls::-webkit-scrollbar { display: none; }

.sg-ctl {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1.5px solid var(--sg-line);
    border-radius: 999px;
    background: var(--sg-card);
    color: var(--sg-ink);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.sg-ctl:hover { border-color: var(--sg-jade); }

.sg-ctl:focus-visible {
    outline: 2px solid var(--sg-jade);
    outline-offset: 2px;
}

.sg-ctl-buddy {
    border-color: var(--sg-terra);
    color: var(--sg-terra);
    background: var(--sg-terra-soft);
}

/* ---------- start point ---------- */

.sg-start {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border-radius: var(--sg-radius);
    background: var(--sg-jade-soft);
    border: 1px solid var(--sg-line);
    margin-bottom: 20px;
}

.sg-start-body { display: flex; gap: 12px; align-items: flex-start; }
.sg-start-body i { color: var(--sg-jade); font-size: 1.1rem; margin-top: 3px; }
.sg-start-body strong { display: block; color: var(--sg-ink); font-size: .95rem; }

.sg-start-body p {
    margin: 2px 0 0;
    color: var(--sg-soft);
    font-size: .86rem;
    line-height: 1.45;
}

.sg-start-set {
    font-size: .88rem;
    color: var(--sg-soft);
    margin: 0 0 18px;
    display: flex;
    gap: 6px;
    align-items: baseline;
    flex-wrap: wrap;
}

.sg-start-set i { color: var(--sg-jade); }

/* The weather prompt sits directly under the accommodation one and asks for
   the same kind of thing — one optional fact that makes the plan sharper —
   so it reuses that shape and only changes the tone. */
.sg-start-weather {
    background: var(--sg-sky-soft);
    margin-top: -6px;
}

.sg-start-weather .sg-start-body i { color: var(--sg-sky); }

.sg-weather-set i { color: var(--sg-sky); }

/* "You have made 2 changes to this plan." Quiet, but present — it is what
   tells somebody an edit stuck, and where the way back is. */
.sg-edits i { color: var(--sg-terra); }

/* ---------- day tabs ---------- */

.sg-daytabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 12px;
    scrollbar-width: none;
}

.sg-daytabs::-webkit-scrollbar { display: none; }

.sg-daytab {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 56px;
    padding: 9px 16px;
    border: 1.5px solid var(--sg-line);
    border-radius: 12px;
    background: var(--sg-card);
    font: inherit;
    text-align: left;
    cursor: pointer;
    max-width: 220px;
}

.sg-daytab-n {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sg-soft);
}

.sg-daytab-t {
    font-size: .92rem;
    font-weight: 600;
    color: var(--sg-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
}

.sg-daytab.is-on {
    border-color: var(--sg-jade);
    background: var(--sg-jade-soft);
}

.sg-daytab.is-on .sg-daytab-n { color: var(--sg-jade); }

.sg-daytab:focus-visible {
    outline: 2px solid var(--sg-jade);
    outline-offset: 2px;
}

/* ---------- a day ---------- */

.sg-day:not(.is-on) { display: none; }
.sg-day.is-on { display: block; }

.sg-day-head { margin: 14px 0 22px; }

.sg-day-n {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sg-terra);
    margin: 0 0 4px;
}

.sg-day-head h2 {
    font-size: clamp(1.4rem, 5vw, 1.9rem);
    margin: 0 0 6px;
    color: var(--sg-ink);
    line-height: 1.2;
}

.sg-day-sub {
    color: var(--sg-soft);
    margin: 0 0 12px;
    font-size: .95rem;
    line-height: 1.5;
}

.sg-day-meta { display: flex; flex-wrap: wrap; gap: 6px; }

.sg-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--vn-paper-warm, #f8f0e3);
    border: 1px solid var(--sg-line);
    font-size: .78rem;
    font-weight: 600;
    color: var(--sg-soft);
}

.sg-pill-relaxed { background: var(--sg-jade-soft); color: var(--sg-jade);
                   border-color: transparent; }
.sg-pill-balanced { background: var(--sg-jade-soft); color: var(--sg-jade);
                    border-color: transparent; }
.sg-pill-active { background: var(--sg-terra-soft); color: var(--sg-terra);
                  border-color: transparent; }
.sg-pill-money { background: #fff; }

/* Weather is a third semantic axis — not how hard the day is (jade/terra)
   and not what it costs (white). A muted sky blue keeps it readable as
   information rather than as a warning. */
.sg-pill-weather {
    background: var(--sg-sky-soft);
    color: var(--sg-sky);
    border-color: transparent;
    gap: 6px;
}

.sg-pill-weather i { font-size: .8em; }

.sg-day-note {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--vn-paper-warm, #f8f0e3);
    font-size: .88rem;
    color: var(--sg-ink);
    line-height: 1.5;
    display: flex;
    gap: 8px;
}

.sg-day-note i { color: var(--sg-terra); margin-top: 3px; }

.sg-day-weather {
    background: var(--sg-sky-soft);
}

.sg-day-weather i { color: var(--sg-sky); }

/* ---------- the stops ---------- */

.sg-stops { list-style: none; margin: 0; padding: 0; }

.sg-leg {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0 4px 6px;
    color: var(--sg-soft);
    font-size: .82rem;
}

.sg-leg-line {
    width: 2px;
    height: 26px;
    margin-left: 22px;
    background: repeating-linear-gradient(
        to bottom, var(--sg-line) 0 4px, transparent 4px 8px);
    flex: 0 0 auto;
}

.sg-leg-label { display: inline-flex; align-items: center; gap: 6px; }
.sg-leg-label i { color: var(--sg-jade); }

.sg-leg-rush {
    font-style: normal;
    background: var(--sg-terra-soft);
    color: var(--sg-terra);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: .72rem;
    font-weight: 700;
}

.sg-stop {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid var(--sg-line);
}

.sg-stop:first-child { border-top: 0; }

.sg-stop-time { text-align: right; padding-top: 2px; }

.sg-stop-time strong {
    display: block;
    font-size: 1rem;
    color: var(--sg-ink);
    font-variant-numeric: tabular-nums;
}

.sg-stop-time span { font-size: .74rem; color: var(--sg-soft); }

.sg-stop-body { min-width: 0; }

.sg-stop-body h3 {
    font-size: 1.12rem;
    margin: 0 0 2px;
    color: var(--sg-ink);
    line-height: 1.25;
}

.sg-stop-vi { margin: 0 0 6px; font-size: .85rem; color: var(--sg-soft); }

.sg-stop-summary {
    margin: 4px 0 10px;
    color: var(--sg-soft);
    font-size: .92rem;
    line-height: 1.55;
}

.sg-stop-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }

.sg-badge {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--sg-jade-soft);
    color: var(--sg-jade);
}

.sg-verdict {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--sg-terra-soft);
    color: var(--sg-terra);
}

.sg-why {
    margin: 0 0 10px;
    padding: 9px 13px;
    border-left: 3px solid var(--sg-jade);
    background: var(--sg-jade-soft);
    border-radius: 0 8px 8px 0;
    font-size: .88rem;
    color: var(--sg-ink);
    line-height: 1.5;
}

.sg-why strong { color: var(--sg-jade); }

.sg-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 0 0 10px;
}

.sg-facts div { min-width: 0; }

.sg-facts dt {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sg-soft);
}

.sg-facts dd {
    margin: 1px 0 0;
    font-size: .9rem;
    color: var(--sg-ink);
    font-weight: 600;
}

.sg-local {
    margin: 0 0 10px;
    font-size: .88rem;
    color: var(--sg-ink);
    line-height: 1.55;
}

.sg-local-tag {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sg-terra);
    margin-bottom: 2px;
}

.sg-note {
    margin: 0 0 6px;
    font-size: .84rem;
    color: var(--sg-soft);
    display: flex;
    gap: 8px;
    line-height: 1.5;
}

.sg-note i { color: var(--sg-terra); margin-top: 3px; flex: 0 0 auto; }

.sg-stop-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.sg-act {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid var(--sg-line);
    border-radius: 999px;
    background: var(--sg-card);
    font: inherit;
    font-size: .82rem;
    color: var(--sg-soft);
    cursor: pointer;
    /* Replace and Move are anchors so they work without JavaScript; they
       must not read as body links inside a row of controls. */
    text-decoration: none;
}

.sg-act:hover { border-color: var(--sg-jade); color: var(--sg-jade); }

.sg-act:focus-visible {
    outline: 2px solid var(--sg-jade);
    outline-offset: 2px;
}

.sg-stop.is-loved .sg-act[data-act="love"] {
    background: var(--sg-terra-soft);
    border-color: var(--sg-terra);
    color: var(--sg-terra);
}

.sg-stop.is-rest .sg-stop-body h3,
.sg-stop.is-optional .sg-stop-body h3 {
    font-size: 1rem;
    color: var(--sg-soft);
    font-weight: 600;
}

.sg-stop.is-rest, .sg-stop.is-optional { opacity: .92; }

.sg-planb { margin-top: 10px; }

.sg-planb summary {
    cursor: pointer;
    font-size: .84rem;
    color: var(--sg-jade);
    font-weight: 600;
    min-height: 40px;
    display: flex;
    align-items: center;
}

.sg-planb ul { margin: 4px 0 0; padding-left: 18px; }

.sg-planb li {
    font-size: .85rem;
    color: var(--sg-soft);
    line-height: 1.5;
    margin-bottom: 5px;
}

.sg-planb strong { color: var(--sg-ink); }

/* ---------- gaps we left on purpose ---------- */

.sg-gap {
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
    margin: 14px 0 0;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px dashed var(--sg-line);
    background: var(--vn-paper-warm, #f8f0e3);
    font-size: .88rem;
    color: var(--sg-soft);
    line-height: 1.5;
}

.sg-gap i { color: var(--sg-terra); }

/* ---------- partial regeneration ---------- */

.sg-regen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: baseline;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--sg-line);
    font-size: .86rem;
    color: var(--sg-soft);
}

.sg-regen .sg-link { min-height: 32px; }

/* ---------- what we left out ---------- */

.sg-leftout { margin-top: 18px; }

.sg-leftout summary {
    cursor: pointer;
    font-size: .88rem;
    font-weight: 600;
    color: var(--sg-soft);
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sg-leftout ul { list-style: none; margin: 6px 0 0; padding: 0; }

.sg-leftout li {
    padding: 10px 0;
    border-top: 1px solid var(--sg-line);
    font-size: .88rem;
    line-height: 1.55;
}

.sg-leftout strong { display: block; color: var(--sg-ink); }
.sg-leftout span { color: var(--sg-soft); }

/* ---------- the map ---------- */

.sg-map-wrap { margin: 30px 0; }

.sg-map-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

.sg-map-head h2 { font-size: 1.2rem; margin: 0; color: var(--sg-ink); }

.sg-map {
    height: clamp(320px, 52vh, 520px);
    border-radius: var(--sg-radius);
    border: 1px solid var(--sg-line);
    overflow: hidden;
    background: var(--vn-paper-warm, #f8f0e3);
}

.sg-map.is-tileless { background: #eef2f0; }

.sg-map-note, .sg-map-tileless {
    margin: 10px 0 0;
    font-size: .8rem;
    color: var(--sg-soft);
    line-height: 1.5;
}

/* Numbered pins, drawn in CSS so the map needs no image assets. */
.sg-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sg-jade, #1f7a63);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(27, 36, 56, .28);
}

.sg-pin-home { background: var(--sg-terra, #ac4e2a); }
.sg-route { stroke: var(--sg-jade, #1f7a63); stroke-dasharray: 6 6; }
.sg-pop-time { color: #5a6478; font-size: .82rem; }

/* ---------- refinement, Buddy, unplaced ---------- */

.sg-unplaced, .sg-refine, .sg-buddy {
    margin-top: 34px;
    padding: 22px;
    border-radius: var(--sg-radius);
    border: 1px solid var(--sg-line);
    background: var(--sg-card);
}

.sg-unplaced { background: var(--sg-terra-soft); border-color: transparent; }

.sg-unplaced h2, .sg-refine h2, .sg-buddy h2 {
    font-size: 1.2rem;
    margin: 0 0 6px;
    color: var(--sg-ink);
    line-height: 1.25;
}

.sg-unplaced p, .sg-refine > p, .sg-buddy > p {
    color: var(--sg-soft);
    font-size: .92rem;
    line-height: 1.55;
    margin: 0 0 14px;
}

.sg-refine-form .sg-chips { margin-bottom: 16px; }
.sg-refine-form .vn-btn { min-height: 48px; }

.sg-allergy {
    margin: 12px 0 0;
    font-size: .8rem;
    color: var(--sg-soft);
    line-height: 1.5;
}

.sg-buddy { background: var(--vn-paper-warm, #f8f0e3); }
.sg-buddy .vn-btn { min-height: 48px; }

.sg-buddy-note {
    margin: 10px 0 0;
    font-size: .8rem;
    color: var(--sg-soft);
}

.sg-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.sg-actions .vn-btn { min-height: 48px; flex: 1 1 200px; }

/* ---------- sheets ---------- */

.sg-sheet {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(16, 26, 46, .55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    overflow-y: auto;
}

.sg-sheet-card {
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 26px 20px 30px;
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    overflow-y: auto;
}

.sg-sheet-card h2 { font-size: 1.25rem; margin: 0 0 6px; color: var(--sg-ink); }

.sg-sheet-card > p {
    color: var(--sg-soft);
    font-size: .92rem;
    line-height: 1.55;
    margin: 0 0 16px;
}

.sg-sheet-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.sg-sheet-actions .vn-btn { flex: 1 1 140px; min-height: 48px; }

.sg-adjust-list { margin: 0; padding-left: 20px; }

.sg-adjust-list li {
    font-size: .9rem;
    color: var(--sg-soft);
    line-height: 1.6;
    margin-bottom: 8px;
}

.sg-adjust-list strong { color: var(--sg-ink); }

.sg-money-basis {
    font-size: .82rem;
    color: var(--sg-soft);
    line-height: 1.55;
    padding: 10px 14px;
    background: var(--vn-paper-warm, #f8f0e3);
    border-radius: 10px;
    margin: 0 0 12px;
}

.sg-loading { color: var(--sg-soft); font-size: .9rem; }

.sg-live {
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--sg-terra-soft);
    color: var(--sg-terra);
    font-size: .88rem;
    font-weight: 600;
}

body.sg-locked { overflow: hidden; }

/* ============================================================
   TODAY MODE

   A different job from the plan page, so a different weight. The plan page
   is read sitting down; this one is read one-handed, outdoors, in sunlight,
   while walking. Bigger type on the two things that matter, everything else
   quietened, and no decoration competing with the clock.
   ============================================================ */

/* -- the way in, on the plan page -- */

.sg-todaybar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
    border-radius: var(--sg-radius);
    background: var(--sg-ink);
    color: #fff;
    text-decoration: none;
    transition: transform .18s, box-shadow .18s;
}

.sg-todaybar:hover, .sg-todaybar:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--sg-shadow-lift);
    color: #fff;
}

.sg-todaybar-tag {
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sg-todaybar-text { flex: 1; font-size: .88rem; line-height: 1.45; }
.sg-todaybar i { flex: none; opacity: .8; }

/* -- the page itself -- */

.sg-today.is-busy { opacity: .6; pointer-events: none; }

.sg-thero { margin-bottom: 18px; }

.sg-thero h1 {
    font-size: clamp(1.6rem, 6vw, 2.1rem);
    line-height: 1.15;
    margin: 4px 0 12px;
}

.sg-thero-meta { display: flex; flex-wrap: wrap; gap: 6px; }

.sg-pill-clock {
    background: var(--sg-ink);
    color: #fff;
    border-color: transparent;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}

.sg-tempty { padding: 32px 0; }
.sg-tempty h1 { font-size: clamp(1.5rem, 5.5vw, 2rem); margin: 6px 0 12px; }
.sg-tempty p { color: var(--sg-soft); line-height: 1.6; margin-bottom: 20px; }

/* -- NOW / NEXT / LATER / TONIGHT -- */

.sg-tblock { margin-bottom: 22px; }
.sg-tblock h2 { margin: 0 0 10px; }

.sg-tlabel {
    display: inline-block;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sg-jade);
}

.sg-tlabel-quiet { color: var(--sg-soft); }

.sg-tblock-done {
    padding: 22px;
    border-radius: var(--sg-radius);
    background: var(--sg-jade-soft);
    text-align: center;
}

.sg-tblock-done h2 { margin: 0 0 6px; font-size: 1.15rem; }
.sg-tblock-done p { margin: 0 0 10px; color: var(--sg-soft); }

.sg-tcard {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 12px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--sg-line);
    background: var(--sg-card);
    margin-bottom: 10px;
}

/* The one you are in, and the one you are heading to, are the page. */
.sg-tcard.is-now {
    border-color: var(--sg-jade);
    border-width: 2px;
    box-shadow: var(--sg-shadow-lift);
}

.sg-tcard.is-next { border-color: var(--sg-ink); }
.sg-tcard.is-done { opacity: .62; }

.sg-tcard-time {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sg-tcard-time strong {
    display: block;
    font-size: 1.05rem;
    color: var(--sg-ink);
}

.sg-tcard-time span { font-size: .76rem; color: var(--sg-soft); }

.sg-tcard-body h3 { margin: 0 0 4px; font-size: 1.05rem; line-height: 1.3; }

.sg-tcard-sum {
    margin: 0 0 6px;
    font-size: .89rem;
    line-height: 1.5;
    color: var(--sg-soft);
}

.sg-tcard-meta { margin: 0; font-size: .82rem; color: var(--sg-soft); }

/* -- when to leave: the most useful line on the page -- */

.sg-tleave {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--sg-warm);
    font-size: .95rem;
    color: var(--sg-ink);
}

.sg-tleave i { color: var(--sg-soft); }
.sg-tleave strong { font-variant-numeric: tabular-nums; }

.sg-tleave.is-soon {
    background: var(--sg-terra-soft);
    color: var(--sg-terra);
}

.sg-tleave.is-soon i { color: var(--sg-terra); }

.sg-tleave-mode { font-size: .82rem; color: var(--sg-soft); }
.sg-tleave.is-soon .sg-tleave-mode { color: inherit; opacity: .85; }

/* -- the two adjustments -- */

.sg-tactions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 0 24px;
}

.sg-tact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 72px;
    padding: 12px 10px;
    border: 1.5px solid var(--sg-line);
    border-radius: 14px;
    background: var(--sg-card);
    font: inherit;
    font-size: .86rem;
    font-weight: 600;
    color: var(--sg-ink);
    cursor: pointer;
    text-align: center;
    transition: border-color .18s, transform .18s;
}

.sg-tact i { font-size: 1.15rem; color: var(--sg-jade); }
.sg-tact:hover { border-color: var(--sg-jade); transform: translateY(-1px); }
.sg-tact:focus-visible { outline: 2px solid var(--sg-jade); outline-offset: 2px; }

.sg-tchoices { display: grid; gap: 8px; margin: 14px 0 4px; }

.sg-tchoice {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    border: 1.5px solid var(--sg-line);
    border-radius: 12px;
    background: var(--sg-card);
    font: inherit;
    font-weight: 600;
    color: var(--sg-ink);
    cursor: pointer;
    text-align: left;
    transition: border-color .18s, background .18s;
}

.sg-tchoice i { color: var(--sg-jade); width: 20px; text-align: center; }
.sg-tchoice:hover { border-color: var(--sg-jade); background: var(--sg-jade-soft); }
.sg-tchoice:focus-visible { outline: 2px solid var(--sg-jade); outline-offset: 2px; }

/* -- what changed, and what it cost -- */

.sg-tapplied {
    padding: 12px 16px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: var(--sg-jade-soft);
}

.sg-tapplied ul { list-style: none; margin: 0; padding: 0; }

.sg-tapplied li {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .88rem;
    color: var(--sg-ink);
}

.sg-tapplied li + li { margin-top: 6px; }
.sg-tapplied i { color: var(--sg-jade); }

.sg-tdropped {
    padding: 14px 16px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: var(--sg-terra-soft);
}

.sg-tdropped h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: .92rem;
    color: var(--sg-terra);
}

.sg-tdropped ul { margin: 0; padding-left: 18px; }
.sg-tdropped li { font-size: .86rem; line-height: 1.55; color: var(--sg-ink); }

.sg-tdone {
    margin: 0 0 22px;
    padding: 12px 0;
    border-top: 1px solid var(--sg-line);
}

.sg-tdone summary {
    cursor: pointer;
    font-size: .86rem;
    font-weight: 600;
    color: var(--sg-soft);
    margin-bottom: 10px;
}

.sg-terror {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: var(--sg-terra-soft);
    color: var(--sg-terra);
    font-size: .9rem;
    font-weight: 600;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (min-width: 620px) {
    .sg-days { grid-template-columns: repeat(6, 1fr); }
    .sg-styles { grid-template-columns: 1fr 1fr; }
    .sg-stop { grid-template-columns: 76px 1fr; gap: 18px; }
    .sg-sheet { align-items: center; padding: 24px; }
    .sg-sheet-card { border-radius: 20px; }
    .sg-tcard { grid-template-columns: 76px 1fr; gap: 18px; }
    .sg-tchoices { grid-template-columns: 1fr 1fr; }
}

/* Two adjustment buttons side by side is right on a phone held one-handed.
   Below that width, stacking keeps each tap target full-width. */
@media (max-width: 359px) {
    .sg-tactions { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
    .sg { max-width: 820px; }
}

@media (prefers-reduced-motion: reduce) {
    .sg *, .sg *::before, .sg *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}