/* SMRT pickup form, two skins (TODO 00024 stage 9). Numbers from design/tokens.json and design/DESIGN-GUIDE.md.
   Units 1 to 4 (Who, Where, When, Confirmed) are fully skinned. */

@font-face { font-family: "Quicksand"; font-weight: 600; font-style: normal; font-display: swap; src: url("/quicksand-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Quicksand"; font-weight: 700; font-style: normal; font-display: swap; src: url("/quicksand-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/open-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/open-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  /* type */
  --font-display: Quicksand, "Trebuchet MS", system-ui, sans-serif;
  --font-text: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --h1: clamp(30px, calc(30px + (100vw - 390px) * 6 / 330), 36px);
  /* space roles */
  --r1: 8px; --r2: 12px; --r3: 16px; --r5: 12px; --n: 16px;
  --r4: clamp(20px, calc(20px + (100vw - 390px) * 12 / 330), 32px);
  --r6: clamp(20px, calc(20px + (100vw - 390px) * 4 / 330), 24px);
  --r7: clamp(32px, calc(32px + (100vw - 390px) * 16 / 330), 48px);
  --r8: clamp(16px, calc(16px + (100vw - 390px) * 8 / 330), 24px);
  /* size */
  --control: 56px; --tap: 48px; --radius: 12px; --line: 2px;
  --logo: 76px; --mark: 40px;
  /* motion */
  --fast: 150ms; --base: 200ms; --ease: cubic-bezier(0.2, 0, 0, 1);
  /* functional */
  --error: #B3261E; --muted: #5F6B73; --white: #FFFFFF; --ink: #333333;
}

/* Skin colour roles (tokens.json skins.*.roles) */
body[data-skin="best"] {
  --ground: #EEF5F9; --heading: #333333; --body: #333333; --accent: #3C56A8; --deco: #369CD8;
  --card-border: transparent; --field-border: var(--muted); --ring: #3C56A8; --link: #3C56A8;
  --btn-fill: #7EB341; --btn-text: #333333;
  --chip-border: var(--muted); --chip-text: #333333;
  --pick-fill: #7EB341; --pick-border: #3C56A8; --pick-text: #333333; --check: #333333;
  --label-line: #369CD8; --step-text: #3C56A8;
  --note-fill: #EEF5F9; --note-rule: #3C56A8;
  --strip-fill: #FFFFFF; --strip-rule: #3C56A8; --strip-text: #333333; --strip-link: #3C56A8;
  --ok-fill: #7EB341; --ok-border: transparent; --ok-text: #333333; --divider: #3C56A8;
  --t: 46px; /* widest time "10 AM" in Quicksand 600 16px measures 45.8px */
}
body[data-skin="lutz"] {
  --ground: #FFFFE0; --heading: #21162C; --body: #333333; --accent: #21162C; --deco: #21162C;
  --card-border: #21162C; --field-border: #21162C; --ring: #21162C; --link: #21162C;
  --btn-fill: #21162C; --btn-text: #FFFF00;
  --chip-border: #21162C; --chip-text: #21162C;
  --pick-fill: #FFFF00; --pick-border: #21162C; --pick-text: #21162C; --check: #21162C;
  --label-line: #21162C; --step-text: #21162C;
  --note-fill: #FFFFE0; --note-rule: #21162C;
  --strip-fill: #000000; --strip-rule: #000000; --strip-text: #FFFFFF; --strip-link: #FFFF00;
  --ok-fill: #FFFF00; --ok-border: #21162C; --ok-text: #21162C; --divider: #21162C;
  --t: 52px; /* widest time "10 AM": 22px Quicksand 700 numeral + 16px 600 AM measures 51.8px */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--body); font: 400 16px/24px var(--font-text); }
.page { min-height: 100vh; display: flex; flex-direction: column; }
[hidden] { display: none !important; }

/* Header */
.site-header { width: 100%; max-width: calc(560px + 2 * var(--r8)); margin: 0 auto; padding: var(--r3) var(--r8) 0; display: flex; align-items: center; justify-content: space-between; }
.logo { display: block; height: var(--logo); width: auto; }
body[data-skin="best"] .logo-lutz, body[data-skin="lutz"] .logo-best { display: none; }
.site-header .hotline-top { display: none; }

/* Card */
.card { width: calc(100% - 2 * var(--r8)); max-width: 560px; margin: var(--r7) auto 0; padding: var(--r4); background: var(--white); border: var(--line) solid var(--card-border); border-radius: var(--radius); }
body[data-skin="best"] .card { border: 0; }

h1 { margin: 0; font: 700 var(--h1)/1.2 var(--font-display); color: var(--heading); outline: none; text-wrap: balance; }
.subline { margin: var(--r2) 0 0; font: 400 16px/24px var(--font-text); color: var(--body); max-width: 60ch; text-wrap: pretty; } /* no lone last word (UI re-audit 4) */

/* Card top: Back left, progress mark + Step N of 3 right */
.card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--r1); min-height: var(--tap); margin-bottom: var(--r3); } /* one height with or without Back: the card top never moves between steps (END UI audit M2) */
.back { display: inline-flex; align-items: center; gap: var(--r1); min-height: var(--tap); min-width: var(--tap); margin-inline-start: -12px; padding: 0 12px; background: none; border: 0; border-radius: var(--radius); color: var(--link); font: 700 16px/20px var(--font-display); cursor: pointer; }
.progress { display: inline-flex; align-items: center; gap: var(--r1); margin-inline-start: auto; }
.mark { width: var(--mark); height: var(--mark); flex: none; }
body[data-skin="best"] .swirl, body[data-skin="lutz"] .ring { display: none; }
.step-label { font: 700 15px/20px var(--font-display); color: var(--step-text); white-space: nowrap; }
/* Pickup Ring: royal 1px track outline, white to-do parts, green done parts, ink numeral */
.ring .part { fill: var(--white); stroke: #3C56A8; stroke-width: 1; transition: fill var(--base) var(--ease); }
.progress[data-step="1"] .ring .p1, .progress[data-step="2"] .ring .p1, .progress[data-step="2"] .ring .p2, .progress[data-step="3"] .ring .part { fill: #7EB341; }
.ring-num { font: 700 17px var(--font-display); fill: #333333; }
/* Lutz Swirl: lutz-ink disc, done arcs yellow, to-do arcs white at 35% */
.swirl .disc { fill: #21162C; }
.swirl .arc { fill: none; stroke: #FFFFFF; stroke-opacity: 0.35; stroke-width: 3; stroke-linecap: round; transition: stroke var(--base) var(--ease); }
.progress[data-step="1"] .swirl .a1, .progress[data-step="2"] .swirl .a1, .progress[data-step="2"] .swirl .a2, .progress[data-step="3"] .swirl .arc { stroke: #FFFF00; stroke-opacity: 1; }

/* Status area (one place under the heading) */
#msg { display: flex; align-items: flex-start; gap: var(--r1); margin: var(--r3) 0 0; padding: var(--n); border-radius: var(--radius); font: 400 14px/20px var(--font-text); color: var(--body); animation: fade var(--fast) var(--ease); text-wrap: pretty; } /* no lone last word (UI re-audit 2, L1 L2) */
/* the rule is a background layer, so the 12px corners clip it cleanly (a rounded border-inline-start tapered into a stub, UI audit L4) */
#msg.info { border-start-start-radius: 0; border-end-start-radius: 0; /* square left edge: the rule is a straight bar, never a crescent (END UI audit L) */ background: linear-gradient(var(--note-rule), var(--note-rule)) left top / var(--line) 100% no-repeat, var(--note-fill); padding-inline-start: calc(var(--n) + var(--line)); }
#msg.error { background: var(--white); border: var(--line) solid var(--error); }
#msg .icon, .field-error .icon { flex: none; width: 20px; height: 20px; }
#msg.error .icon, .field-error .icon { color: var(--error); }
#msg .icon.mark-mini { width: 24px; height: 24px; margin-top: -2px; }
#msg a { color: var(--link); font-weight: 600; }
/* a link inside note text: 48px hit area from padding on an inline box, so the line height stays */
#msg .tel { display: inline; min-height: 0; padding: 15px 4px; margin: -15px -4px; color: var(--link); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Group label: Label style + thin line filling the row */
.group { margin-top: var(--r6); }
.group + .group { margin-top: var(--r3); }
.group-label { display: flex; align-items: center; gap: var(--r2); margin-bottom: var(--r2); font: 600 15px/20px var(--font-text); color: var(--heading); }
.group-label::after { content: ""; flex: 1; height: 1px; background: var(--label-line); }

/* Chips */
.chips { display: grid; gap: var(--r5); }
.chips-day { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chips-win { grid-template-columns: minmax(0, 1fr); }
.chips.loading { min-height: calc(3 * var(--control) + 2 * var(--r5)); }
.chip { position: relative; display: flex; align-items: center; gap: var(--r1); min-height: var(--control); padding: 0 12px; background: var(--white); border: var(--line) solid var(--chip-border); border-radius: var(--radius); color: var(--chip-text); font: 600 16px/20px var(--font-display); white-space: nowrap; cursor: pointer; transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip.is-picked { background: var(--pick-fill); border-color: var(--pick-border); color: var(--pick-text); }
.chip:has(input:focus-visible) { outline: var(--line) solid var(--ring); outline-offset: 2px; }
.chip-text { min-width: 0; }
.check { display: none; flex: none; margin-inline-start: auto; align-items: center; justify-content: center; color: var(--check); }
.chip.is-picked .check { display: inline-flex; }
.check svg { width: 16px; height: 16px; }
/* Best: white disc with an ink check */
body[data-skin="best"] .check { width: 28px; height: 28px; border-radius: 50%; background: var(--white); }
/* Best day chip fit at 390: 12 + widest date about 90 + 8 + 28 disc + 8 = 146 of 149px inside */
body[data-skin="best"] .chips-day .chip { padding: 0 8px 0 12px; }
/* Window chips: one shared time-column template so every start and end lines up */
.chips-win .chip { padding: 0 16px; }
body[data-skin="lutz"] .chips-win .chip { padding: 0 12px; }
.times { display: grid; grid-template-columns: var(--t) auto var(--t); justify-content: start; align-items: baseline; column-gap: var(--r5); font-variant-numeric: tabular-nums; }
.times > span { justify-self: start; white-space: nowrap; }
.chips-win .check { margin-inline-start: auto; }
/* Lutz: big day number and big hour numeral (chip-day-number, Quicksand 700 22px) on the chip baseline */
body[data-skin="lutz"] .num { font: 700 22px/20px var(--font-display); }

.field-error { text-wrap: pretty; display: flex; align-items: flex-start; gap: var(--r1); margin: var(--r2) 0 0; font: 400 14px/20px var(--font-text); color: var(--error); }

/* Buttons */
.btn-primary { display: block; width: 100%; min-height: var(--control); margin-top: var(--r6); padding: 0 var(--r3); background: var(--btn-fill); color: var(--btn-text); border: var(--line) solid var(--btn-fill); border-radius: var(--radius); font: 700 16px/20px var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; }
.btn-primary:disabled { background: var(--white); border-color: var(--muted); color: var(--muted); cursor: not-allowed; }
.btn-primary[aria-busy="true"] { cursor: progress; }
.back:focus-visible, .btn-primary:focus-visible, .change-line .tel:focus-visible, .tel:focus-visible, #msg a:focus-visible { outline: var(--line) solid var(--ring); outline-offset: 2px; }
.strip .tel:focus-visible { outline-color: var(--strip-link); }

/* Fields (guide s7; who is fully skinned in unit 2, where reuses them and gets its rows, note and checks in unit 3) */
.fields > .field:first-child { margin-top: var(--r6); }
.field { margin-top: var(--r3); }
.field label { display: block; margin: 0 0 var(--r2); font: 600 15px/20px var(--font-text); color: var(--heading); }
.opt { color: var(--muted); font-weight: 400; }
.hint { text-wrap: pretty; margin: calc(var(--r1) - var(--r2)) 0 var(--r2); /* R1 8px under the label (UI audit L3) */ font: 400 14px/20px var(--font-text); color: var(--muted); }
.field input, .field textarea { display: block; width: 100%; height: var(--control); margin: 0; padding: 0 var(--r3); font: 400 16px/24px var(--font-text); color: var(--ink); background: var(--white); border: var(--line) solid var(--field-border); border-radius: var(--radius); appearance: none; transition: border-color var(--fast) var(--ease); }
.field textarea { height: auto; min-height: calc(2 * 24px + 2 * var(--r2) + 2 * var(--line)); padding: var(--r2) var(--r3); resize: vertical; }
.field input:focus-visible, .field input:focus, .field textarea:focus { outline: var(--line) solid var(--ring); outline-offset: 2px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error); }
.field input[aria-invalid="true"]:focus { outline-color: var(--error); }
/* Where: City its own row, State + ZIP sharing the next under 520px; one row 2fr 1fr 1.25fr at 520px and up (guide s6), R5 gutter */
.addr-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--r5); align-items: start; }
.addr-row > .f-city { grid-column: 1 / -1; }
.addr-row > .field { min-width: 0; }
/* Confirmed (unit 4, guide s7): success panel (tokens success-panel: Best green fill, ink, no border; Lutz yellow fill,
   lutz-ink border and text), summary rows with 1px dividers (Best royal, Lutz lutz-ink), brand note, DONE, change line */
.ok { display: flex; align-items: flex-start; gap: var(--r2); margin-top: var(--r6); padding: var(--n); border-radius: var(--radius); background: var(--ok-fill); color: var(--ok-text); border: var(--line) solid var(--ok-border); }
.ok-check { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--ok-text); }
.ok-check svg { width: 20px; height: 20px; }
body[data-skin="best"] .ok-check { border-radius: 50%; background: var(--white); } /* the chips' white disc with an ink check */
body[data-skin="lutz"] .ok-check svg { width: 24px; height: 24px; }
.ok-body { min-width: 0; padding-top: 2px; }
.ok-title { margin: 0; font: 700 22px/28px var(--font-display); color: var(--ok-text); text-wrap: balance; }
.ok-num { margin: var(--r1) 0 0; font: 400 16px/24px var(--font-text); overflow-wrap: anywhere; }
.ok-num strong { font-weight: 600; }
.summary { margin: var(--r3) 0 0; border-bottom: 1px solid var(--divider); } /* on the list, so a hidden last row never drops the closing line */
.summary .row { padding: var(--r3) 0; border-top: 1px solid var(--divider); }
.summary dt { margin: 0 0 4px; font: 600 15px/20px var(--font-text); color: var(--heading); }
.summary dd { margin: 0; font: 400 16px/24px var(--font-text); color: var(--body); overflow-wrap: anywhere; }
.summary dd span { display: block; }
.brand-note { margin: var(--r3) 0 0; padding: var(--n); padding-inline-start: calc(var(--n) + var(--line)); border-radius: 0 var(--radius) var(--radius) 0; background: linear-gradient(var(--note-rule), var(--note-rule)) left top / var(--line) 100% no-repeat, var(--note-fill); font: 400 14px/20px var(--font-text); color: var(--body); text-wrap: pretty; }
a.btn-primary { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.change-line { margin: var(--r3) 0 0; text-align: center; font: 400 15px/20px var(--font-text); color: var(--body); }
.change-line .tel { color: var(--link); }
.nowrap { white-space: nowrap; }

/* Hotline footer strip */
.card { margin-bottom: var(--r7); }
.strip { margin-top: auto; background: var(--strip-fill); border-top: var(--line) solid var(--strip-rule); color: var(--strip-text); text-align: center; }
.strip p { margin: 0; padding: 4px var(--r8); font: 600 15px/20px var(--font-text); }
.tel { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 4px; color: var(--strip-link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 379.98px) {
  /* 360px fit (guide s7): chip inside at 360 is 132px (Lutz) or 134px (Best) */
  body[data-skin="lutz"] .chips-day .chip { padding: 0 6px 0 8px; }
  body[data-skin="lutz"] .chips-win .chip { padding: 0 8px; }
  body[data-skin="best"] .chips-day .chip { padding: 0 6px 0 8px; gap: 6px; }
  body[data-skin="best"] .chips-day .check { width: 24px; height: 24px; }
}
@media (min-width: 520px) {
  .addr-row { grid-template-columns: 2fr 1fr 1.25fr; }
  .addr-row > .f-city { grid-column: auto; }
  .chips-day { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chips-win { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chips-win.one-col { grid-template-columns: minmax(0, 1fr); } /* SMRT times with minutes: two per row would reach the check */
}
@media (min-width: 720px) {
  :root { --logo: 96px; --mark: 48px; }
  .site-header .hotline-top { display: inline-flex; color: var(--link); font: 700 18px/24px var(--font-display); padding: 10px 0; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --fast: 0ms; --base: 0ms; }
  *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}