:root {
    /* Brand tokens, not the old cool greys. --bg was #f4f4f2, which read
       grey against the rest of the site. The surface stays near-white so
       the result card keeps its contrast against the cream page. */
    --bg: var(--color-cream);
    --surface: #fffcf7;
    --ink: var(--color-cocoa);
    --muted: #6b6259;
    /* --line stays a decorative token. It measures 1.20:1 on cream, so it now
       draws only the two non-interactive rules inside the result card: the
       card border and the dashed divider above .status-brand. */
    --line: #ece0d4;
    /* --line-strong was #dbcab8, 1.48:1 on cream, which failed WCAG 1.4.11 on
       every control boundary it drew: the twelve city chips, both selects,
       both date and time inputs and the planning disclosure. Mocha is 4.18:1
       on cream and 4.41:1 on the surface, and stays in palette. */
    --line-strong: var(--color-mocha);
    --good: #0f7b4f;
    --warn: var(--color-coral-deep);
    --radius: 14px;
    --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { background: var(--bg); }
body {
    margin: 0;
    color: var(--ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    accent-color: var(--ink);
}
[v-cloak] { display: none; }

.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;
}

a.skip {
    position: absolute; left: -9999px; top: 0;
    background: var(--ink); color: #fff; padding: 0.6rem 1rem; z-index: 20;
    border-radius: 0 0 8px 0;
}
a.skip:focus { left: 0; }

.wrap {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
    flex: 1;
}

/* The doodles are absolutely positioned against this block. */
header#tool { position: relative; }

/* Size and weight come from .brand-heading plus text-3xl sm:text-4xl. The old
   -0.02em tracking went with them: Pacifico is a connected script and negative
   tracking collides its joins. */
h1 {
    line-height: 1.25;
    margin: 0 0 0.6rem;
}
.lede {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 1.5rem;
    max-width: 50ch;
}

/* Your-time line */
.your-line {
    font-size: 0.92rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0 0 2.25rem;
}
.your-line strong { color: var(--ink); font-weight: 650; }
.your-line time { font-variant-numeric: tabular-nums; }

/* No .linkish block any more. The four text buttons are real daisyUI
   components, so padding, target size, focus-visible and hover all ship in
   the bundle instead of being hand-rolled here. Element selectors, never a
   bare .btn rule: btn-sm ships 0.75rem, smaller than the copy it sits in. */
.your-line button, .hint button, .io-row button, .plan-actions button { --fontsize: 0.85rem; }

.from-picker { margin: -1.25rem 0 2.25rem; }

h2.step-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    margin: 0 0 0.8rem;
}
/* cf- prefix, not the bare .step: daisyUI owns that name via `.steps &`. */
section.cf-step { margin-bottom: 2.25rem; }

.f-label {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 0.4rem;
}

select.field, input.field {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    padding: 0.65rem 0.85rem;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--ink);
    background: var(--surface);
}
/* The old focus treatment was a 3px rgba(22,22,26,0.08) shadow, which
   composites to #eceae5: 1.17:1 on the field, invisible. These four fields
   now use the same 2px ink outline as the chips, the summary, the text
   buttons and the anchor radios. */
select.field:focus, input.field:focus { border-color: var(--ink); }
select.field:focus-visible, input.field:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* City chips */
fieldset.cities { border: 0; padding: 0; margin: 0 0 1rem; }
fieldset.cities legend { padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: flex; flex-direction: column; gap: 1px;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    background: transparent;
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
/* Hover and selected live on different channels. They both used to flip
   border-color to --ink, so while the pointer was anywhere in the grid two
   chips looked chosen, and on a touch device the stuck hover left the last
   city tapped looking selected for good. Gated on hover:hover, the way
   daisyUI guards its own hover rules. */
@media (hover: hover) {
    .chip:hover { border-color: var(--color-caramel); }
}
/* .on is a Vue class mirror of :checked, the working path in browsers
   without :has() support, harmless duplication everywhere else. */
.chip.on {
    background: var(--surface);
    border-color: var(--ink);
    /* Inset ring, so selected reads as a 2px edge with no layout shift. */
    box-shadow: inset 0 0 0 1px var(--ink), 0 1px 3px rgba(0,0,0,0.08);
}
.chip:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
@supports not selector(.x:has(a)) {
    .chip:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
}
.chip-name { font-weight: 600; font-size: 0.88rem; }
.chip-eg { font-size: 0.74rem; color: var(--muted); font-family: var(--mono); font-variant-numeric: tabular-nums; }

.elsewhere { margin-top: 1rem; }
.hint { font-size: 0.8rem; color: var(--muted); line-height: 1.45; margin-top: 0.4rem; }

/* Result card. --line, not --line-strong: this border is decoration around a
   read-only panel, not a control boundary. */
.result {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.4rem 1.5rem 1.3rem;
}
/* In flow, above the number it describes. Pinned at top/right it sat on top
   of the weekday: at 320px the card is about 222px wide inside its padding
   and the time plus the day name needs about 207px of it. */
.live-tag {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 0.35rem;
}
.live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--good);
    animation: livepulse 2s ease-in-out infinite;
}
@keyframes livepulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
.big-time {
    display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap;
    margin: 0 0 0.75rem;
}
.big-time time {
    font-size: 2.5rem; font-weight: 650; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.big-time .day { font-size: 1.05rem; color: var(--muted); font-weight: 600; }
.sentence { font-size: 1rem; line-height: 1.6; margin: 0 0 0.9rem; }
.sentence strong { font-weight: 650; }
/* .status-brand, not .status: daisyUI owns a bare, unscoped .status that
   paints an 8px round dot (aspect-ratio, fixed width/height, background).
   The page CSS wins on the properties it sets, but not on the ones it
   doesn't, so the un-renamed version collapsed this line to a blob. */
.status-brand {
    display: flex; align-items: flex-start; gap: 0.55rem;
    font-size: 0.92rem; line-height: 1.5; color: var(--muted);
    border-top: 1px dashed var(--line);
    padding-top: 0.9rem; margin: 0;
}
.status-brand svg { flex-shrink: 0; margin-top: 2px; color: var(--ink); }
.zone-meta { font-size: 0.78rem; color: var(--muted); margin: 0.9rem 0 0; }

.io-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; margin-top: 0.55rem; flex-wrap: wrap;
}
.copy-note { font-size: 0.82rem; color: var(--muted); }
.copy-note.bad { color: var(--warn); font-weight: 600; }

/* Planning disclosure. --line-strong, not --line: the summary is a control,
   so this box is a control boundary and owes WCAG 1.4.11 its 3:1. */
details.more {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 0.25rem 1rem;
    margin-top: 1.5rem;
}
details.more summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.65rem 0.1rem;
    color: var(--ink);
    border-radius: 8px;
}
details.more summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
details.more[open] { padding-bottom: 0.9rem; }
.plan-grid { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.9rem; }
.plan-grid > div { flex: 1; min-width: 140px; }
fieldset.whose { border: 0; padding: 0; margin: 0.9rem 0 0; }
fieldset.whose legend { font-weight: 600; font-size: 0.92rem; padding: 0; margin-bottom: 0.5rem; }
.whose label {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.9rem; margin-right: 1.4rem; cursor: pointer;
}
.whose input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gap-note {
    font-size: 0.85rem; line-height: 1.5; color: var(--ink);
    background: #f6f1e4; border: 1px solid #e8dfc6; border-radius: 10px;
    padding: 0.65rem 0.85rem; margin-top: 0.9rem;
}
.plan-actions { margin-top: 0.9rem; }

.foot {
    text-align: center; padding: 1.5rem 1rem 2rem;
    font-size: 0.8rem; color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
    .chip, select.field, input.field { transition: none; }
    .live-dot { animation: none; }
}

@media (max-width: 480px) {
    .wrap { padding-top: 1.5rem; }
    .big-time time { font-size: 2.1rem; }
    /* Thumb-sized targets. Everything on this page is inline text and 15px
       native radios otherwise, and the two anchor radios carry the hardest
       decision here: is the time I am typing mine or theirs? */
    .io-row button, .plan-actions button { min-height: 44px; }
    .whose label { min-height: 44px; }
    .whose input { width: 20px; height: 20px; }
}