/* ════════════════════════════════════════════════════════════════════════════
   QUIET — Palette B-Purple
   Tokens from ~/stoic-design-quiet/tokens.css + palettes.css (B-PURPLE block).
   Layout from boards/Quiet-Form.dc.html: phone-first, one question at a time,
   big light type, 72px touch targets, a segmented progress rule.

   Overrides the form's own stylesheet rather than replacing it, so the form's
   markup and logic are untouched.
   ════════════════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");

:root, :root[data-theme="light"], :root[data-theme="dark"]{
  /* B-PURPLE. One hue family across the whole palette — the neutrals are the
     brand violet turned down, not a third hue bolted on. */
  --ground:#ffffff; --surface:#f6f5fa; --card:#ffffff;
  --ink:#1b191f; --grey:#605a6c; --faint:#908a9e;
  --accent:#5a17c4; --divider:#e8e6ef;
  --good:#3f5227; --alert:#8a3a1c;

  /* the form's own variable names, remapped so its markup needs no edits */
  --bg:var(--ground); --panel:var(--card); --muted:var(--grey);
  --line:var(--divider); --line-strong:#d7d3e2;
  --accent-ink:#ffffff; --accent-soft:#f1ecfd; --accent-line:#c9b8ee;
  --note:#f6f5fa; --error:var(--alert); --error-soft:#fbeeea;
  --display:"Manrope",system-ui,sans-serif;
  --body:"Manrope",system-ui,sans-serif;
  --mono:"Manrope",system-ui,sans-serif;
  --r:5px;

  --s-8:8px; --s-12:12px; --s-20:20px; --s-32:32px; --s-52:52px;
  color-scheme:light;
}

body{background:var(--ground);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.43;letter-spacing:-.374px}

/* ── the bar: progress as a segmented rule, not a thin fill ───────────────── */
.bar{background:var(--ground);border-bottom:0}
.bar-in{max-width:640px;padding-block:18px 10px;gap:12px}
.brand{font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--grey)}
.stepinfo{font-family:var(--body);font-size:12px;font-weight:500;color:var(--grey);
  font-variant-numeric:tabular-nums;letter-spacing:-.12px}
.track{height:4px;background:transparent;max-width:640px;margin:0 auto;
  padding:0 20px 14px;display:block}
.fill{height:4px;border-radius:999px;background:var(--ink);transition:width .35s ease}
@media (prefers-reduced-motion:reduce){.fill{transition:none}}

.wrap{max-width:640px;padding-inline:20px;padding-block:8px 48px}

/* ── the question: big, light, one thought per screen ────────────────────── */
.eyebrow{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--accent)}
h1{font-family:var(--body);font-weight:600;font-size:clamp(30px,7.5vw,40px);
  line-height:1.1;letter-spacing:-.4px;margin:10px 0 18px}
h2{font-family:var(--body);font-weight:600;font-size:clamp(26px,6vw,32px);
  line-height:1.12;letter-spacing:-.35px;margin:4px 0 14px}
.intro{font-size:20px;font-weight:500;line-height:1.3;color:var(--grey);
  letter-spacing:-.2px;margin:0 0 var(--s-32);max-width:34ch}

/* ── one question per card, quiet ────────────────────────────────────────── */
.form{gap:var(--s-12)}
.q{background:var(--surface);border:0;border-radius:20px;padding:22px 20px;gap:12px}
.q.missing{box-shadow:inset 3px 0 0 var(--alert);background:var(--error-soft)}
.qlabel{font-size:22px;font-weight:600;line-height:1.18;letter-spacing:-.3px}
.help{font-size:15px;font-weight:400;color:var(--grey);line-height:1.4;letter-spacing:-.15px;margin:-2px 0 0}
.heading{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.14em;
  color:var(--faint);border-bottom:0;padding:22px 2px 2px}
.err{font-size:14px;color:var(--alert)}

/* ── options: 72px targets, a dot not a tick ─────────────────────────────── */
.chips{display:flex;flex-direction:column;gap:8px}
.chip{display:flex;align-items:center;gap:12px;min-height:72px;padding:14px 20px;
  background:var(--card);border:0;border-radius:5px;text-align:left;line-height:1.24}
.chip::before{content:"";flex:0 0 20px;height:20px;border-radius:999px;border:0;
  background:var(--divider);box-shadow:inset 0 0 0 6px var(--card)}
.chip[aria-pressed="true"]{background:var(--accent);color:#fff}
.chip[aria-pressed="true"]::before{background:#fff;box-shadow:inset 0 0 0 6px var(--accent)}
.chip .ct{min-width:0}
.chip b,.chip>span:not(.ct){font-size:17px;font-weight:600;letter-spacing:-.374px}
.chip small{font-size:12px;font-weight:400;line-height:1.33;letter-spacing:-.12px;opacity:.72;display:block;margin-top:2px}
.chip.sm{min-height:0;padding:9px 15px;border-radius:999px;background:var(--card)}
.chip.sm::before{display:none}
.chip.sm[aria-pressed="true"]{background:var(--accent);color:#fff}
.cards{display:flex;flex-direction:column;gap:8px}
.card-opt{min-height:72px;background:var(--card);border:0;border-radius:5px;
  padding:14px 20px;justify-content:center;gap:2px}
.card-opt b{font-size:17px;font-weight:600;letter-spacing:-.374px}
.card-opt span{font-size:12px;color:var(--grey);line-height:1.33;letter-spacing:-.12px}
.card-opt[aria-pressed="true"]{background:var(--accent);box-shadow:none;color:#fff}
.card-opt[aria-pressed="true"] span{color:rgba(255,255,255,.78)}

/* ── inputs ──────────────────────────────────────────────────────────────── */
input[type=text],input[type=number],input[type=time],input[type=email],
input[type=tel],input[type=date],textarea,select,.msel-btn{
  background:var(--card);border:0;border-radius:12px;padding:15px 16px;
  font-size:17px;letter-spacing:-.374px;color:var(--ink)}
textarea{min-height:104px}
::placeholder{color:var(--faint)}
input:focus-visible,textarea:focus-visible,select:focus-visible,.msel-btn:focus-visible,
.chip:focus-visible,.card-opt:focus-visible,.btn:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

/* ── buttons: the primary is INK, never the accent ───────────────────────── */
.btn{font-size:17px;font-weight:600;letter-spacing:-.374px;min-height:52px;
  border-radius:999px;border:0;background:var(--surface);color:var(--ink);padding:14px 24px}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover{filter:none;opacity:.88}
.btn:hover{border:0;opacity:.88}
/* A LINK-STYLED BUTTON IS STILL A TAP TARGET. The review screen's eight
   "Edit" links were 29px tall on a phone - `min-height:0` plus 4px of padding
   - which is well under Apple's 44px minimum, and they are the only way back
   into a section from the review. Found by the full-sweep audit, not by
   anybody looking at that screen.
   The padding is vertical only and the button stays visually a link: it reads
   the same and is simply easier to hit. `align-items:center` keeps the text
   where it was rather than letting the extra height push it down. */
.btn.link{background:none;color:var(--accent);min-height:44px;padding:4px 2px;font-size:15px;
  display:inline-flex;align-items:center}
.btn.sm{min-height:0;padding:9px 16px;font-size:14px}
.pager{margin-top:var(--s-32);gap:12px}
.pager .btn.primary{flex:1}
.saved{font-size:12px;color:var(--grey);letter-spacing:-.12px}

/* ── notes and panels ────────────────────────────────────────────────────── */
.note{background:var(--card);border:0;border-radius:28px;padding:20px;
  font-size:17px;line-height:1.43;color:var(--grey);gap:12px;align-items:flex-start}
.note::before{flex:0 0 8px;height:8px;margin-top:8px;background:var(--accent)}
.partintro{background:var(--surface);border:0;border-radius:20px;padding:20px}
.partintro b{font-family:var(--body);font-weight:600;font-size:22px;letter-spacing:-.3px}
.rsec{background:var(--surface);border:0;border-radius:20px}
.rhead h3{font-family:var(--body);font-weight:600;font-size:22px;letter-spacing:-.3px}
.seal{border-color:var(--accent);color:var(--accent);font-family:var(--body);font-weight:600}
.gridrow{border-bottom:1px solid var(--divider)}
.rowdel{border:0;background:var(--surface)}
.tally{font-family:var(--body);color:var(--accent);font-size:13px;letter-spacing:-.13px}
footer.demo{border-top:1px solid var(--divider);font-size:12px;color:var(--faint)}
footer.demo b{font-family:var(--body);letter-spacing:.14em}

@media (max-width:480px){
  .wrap{padding-inline:20px}
  .q{padding:20px 18px;border-radius:18px}
  .qlabel{font-size:20px}
}

/* ── welcome: the live intake's own wording and shape ─────────────────────── */
h1.hero{font-size:clamp(34px,9vw,52px);font-weight:700;line-height:1.02;letter-spacing:-1px;margin:10px 0 16px}
.hero-accent{color:var(--accent)}
.skipnote{background:var(--surface);border-radius:14px;padding:16px 18px;margin:0 0 var(--s-32);
  font-size:15px;line-height:1.45;color:var(--grey);max-width:52ch}

/* ── autosave bar: a standing promise, so it sits under the brand bar on
      every screen rather than appearing once and being missed ────────────── */
.savebar{position:sticky;top:0;z-index:4;background:var(--accent-soft);border-bottom:1px solid var(--divider)}
/* NO .savebar[hidden] RULE HERE, DELIBERATELY. I added one, on the usual
   worry that [hidden] only sets display:none at the lowest priority and this
   repo has shipped a hide that moved nothing. Its negative control came back
   SILENT: flipping it to display:block changed the measured height not at all,
   because form.css:282 already carries `[hidden]{display:none!important}` for
   the whole page. The rule was dead weight that read like protection. The real
   guard is the check that measures the rendered HEIGHT, not an attribute. */
.savebar-in{max-width:640px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:14px;flex-wrap:wrap}
.savebar-msg{font-size:13.5px;color:var(--ink);letter-spacing:-.13px}
.savebar-btn{font-family:inherit;font-size:13px;font-weight:600;letter-spacing:-.13px;
  border:0;border-radius:999px;padding:8px 16px;background:var(--accent);color:#fff;cursor:pointer}
.savebar-btn:hover:not(:disabled){opacity:.88}
.savebar-btn:disabled{opacity:.55;cursor:default}

/* ── required marker. Display only on the test site: nothing is enforced, so
      the form can be clicked through end to end. ───────────────────────────── */
.req{color:var(--alert);margin-left:4px;font-weight:700}
.qlabel .optional{font-weight:400;color:var(--faint);font-size:12.5px;margin-left:8px;letter-spacing:-.12px}

/* ── searchable state / city ──────────────────────────────────────────────── */
/* ANCHORED UNDER THE FIELD, NOT FLOATING OVER THE PAGE.
   Georgiy, 2026-10-23: "why can't you have it locked in under the box itself
   so it doesn't move...when i scroll up, the dropdown moves along with it
   which is wrong". It was position:fixed on document.body, and three separate
   positioning bugs came out of that in one day - under the keyboard, floating
   over other questions, and finally drawn at -115 off the top of the screen.
   An absolutely positioned child of the field's own wrapper is kept in place
   by the browser through every scroll and every keyboard, with no arithmetic
   to get wrong. MEASURED on his phone first: nothing in the ancestry clips
   overflow or carries a transform, so it cannot be cut off. */
/* The anchor is the field's EXISTING parent. It is never a new wrapper: a
   wrapper has to MOVE the input into it, moving a focused element blurs it,
   and on iOS a blur dismisses the keyboard mid-word. position:relative on a
   parent changes no layout. */
.lc-anchor{position:relative}
.lc-block{position:relative}
.lc-hidden{display:none!important}
.lc-input{width:100%}
.lc-panel{position:absolute;z-index:60;
  max-height:280px;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:var(--card);border-radius:14px;box-shadow:0 10px 30px rgba(27,25,31,.14);padding:6px}
/* top/bottom/left/width come from place(), measured in OFFSETS inside the
   anchor - layout-local, so they do not move with scroll or the keyboard. */
/* TIGHTER ROWS so more states fit between the field and the keyboard.
   Georgiy asked for this directly. 44px is Apple's minimum tap target and the
   floor here; it was 48 with 12px padding, which cost a row on a small band. */
.lc-opt{display:block;width:100%;text-align:left;font-family:inherit;font-size:16px;letter-spacing:-.2px;
  border:0;background:none;color:var(--ink);padding:10px 14px;border-radius:10px;cursor:pointer;min-height:44px}
.lc-opt:hover{background:var(--accent-soft);color:var(--accent)}

/* ── intro slide: name + email, so autosave has something to save against ── */
.welcome-form{gap:10px;margin:0 0 24px;max-width:460px}
.welcome-form .q{padding:18px 20px}
.welcome-form .qlabel{font-size:17px}
.welcome-foot{font-size:13.5px;color:var(--faint);margin:2px 2px 10px;max-width:46ch;letter-spacing:-.13px}

/* ── one upload card, split down the middle ───────────────────────────────── */
.upsplit{display:grid;grid-template-columns:1fr 1px 1fr;gap:0;background:var(--card);border-radius:14px;overflow:hidden}
.upsplit::before{content:"";grid-column:2;background:var(--divider)}
.upslot{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:16px 18px;cursor:pointer;min-height:118px}
.upslot:first-child{grid-column:1}
.upslot:last-child{grid-column:3}
.upslot input{position:absolute;opacity:0;width:1px;height:1px}
.upslot-l{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.upslot-h{font-size:13px;color:var(--faint);letter-spacing:-.13px;margin-bottom:4px}
.upslot .btn.sm{min-height:0;padding:8px 14px;font-size:13.5px;background:var(--surface)}
.upslot .uphint{font-size:12.5px;color:var(--faint);overflow-wrap:anywhere;letter-spacing:-.12px}
.upslot.has .upslot-l{color:var(--accent)}
.upslot.has .uphint{color:var(--ink)}
.upslot:focus-within .btn{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:520px){
  .upsplit{grid-template-columns:1fr}
  .upsplit::before{grid-column:1;height:1px;width:auto}
  .upslot:last-child{grid-column:1}
}

/* ---------- upload lists ---------- */
/* The list is a sibling of the label, never inside it: a delete button inside
   a <label> re-opens the file picker on every click. */
.upslot{cursor:default}
.upbtn{display:inline-block;cursor:pointer;position:relative}
.upbtn input{position:absolute;opacity:0;width:1px;height:1px}
.upone{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.upone .uphint{font-size:12.5px;color:var(--faint)}
.uplist{list-style:none;margin:8px 0 0;padding:0;width:100%;display:flex;flex-direction:column;gap:1px}
.uprow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;
  padding:9px 10px 9px 12px;border-radius:9px;background:var(--surface);font-size:13px}
.uprow.ok{align-items:center}
.uprow .upn{grid-column:1;font-weight:600;color:var(--ink);overflow-wrap:anywhere;letter-spacing:-.12px}
.uprow .ups{grid-column:1;grid-row:2;font-size:12px;color:var(--faint);letter-spacing:-.1px}
.uprow .updel{grid-column:2;grid-row:1/span 2;appearance:none;border:0;background:none;cursor:pointer;
  font-size:19px;line-height:1;color:var(--faint);padding:2px 6px;border-radius:7px}
.uprow .updel:hover{background:var(--divider);color:var(--ink)}
.uprow.bad{background:#fdf2f2}
/* SENT but undecodable. Amber, not green and not red: the bytes are on Drive,
   so it is not a failure - but it is not a clean save either, and the success
   colour on a file nobody could open is the "fake save" this form bans. */
.uprow.warn{background:#fff8ec}
.uprow.warn .ups{color:#8a5a12}
.uprow.bad .ups{color:#a12b2b}
.uprow.busy .ups{display:flex;align-items:center;gap:8px}
.upbar{display:inline-block;width:70px;height:3px;border-radius:2px;background:var(--divider);overflow:hidden}
.upbar i{display:block;width:40%;height:100%;border-radius:2px;background:var(--accent);
  animation:upslide 1.05s ease-in-out infinite}
@keyframes upslide{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
.upwarn{display:block;margin-top:7px;font-size:12.5px;color:#a12b2b;letter-spacing:-.12px}

/* ---------- multi-select panel ---------- */
/* MEASURED 2026-10-18: the panel inherited flex-wrap:wrap on a COLUMN flex
   box with a 340px height cap, so the options spilled into a second column
   and each column sized to its own content - "Inconsistent because of
   schedule or stress" was cut off mid-word, and on a phone it would have
   been unusable. One column that scrolls, always. */
.msel-panel .chips{flex-wrap:nowrap;max-height:min(50vh,360px);overflow-y:auto;gap:5px;padding:2px}
.msel-panel .chip{min-height:0;padding:12px 16px;border-radius:10px;align-items:flex-start}
.msel-panel .chip b,.msel-panel .chip>span:not(.ct){font-size:15.5px;line-height:1.3;letter-spacing:-.2px}
.msel-panel .chip::before{margin-top:1px}
/* The closed button summarises. It must never cut a word in half: short
   selections read in full and wrap, long ones become a count. */
.msel-sum{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
.msel-btn{align-items:flex-start;padding:13px 14px}
.msel-btn .caret{margin-top:5px;flex:0 0 auto}

/* ---------- "a time, or one of these" ---------- */
/* Was a WRAPPING row: the input, the word "or" and the chips all sat on one
   line until they ran out of room, so the chips came out at different widths
   and the last one dropped to its own ragged row. Stack them instead - the
   same full-width column every other option list in this form uses. */
.timerow{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.timerow input.short{max-width:none;width:100%}
.timerow .or{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding:2px 0 0}
.timerow .chip{width:100%;min-height:58px}

/* ---------- breakfast picker ---------- */
.bk{display:flex;flex-direction:column;gap:8px}
.bktile{background:var(--card);border-radius:14px;overflow:hidden}
.bkhead{display:flex;align-items:center;gap:12px;width:100%;padding:16px 18px;
  background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.bkhead .dot{flex:0 0 20px;height:20px;border-radius:999px;background:var(--divider);
  box-shadow:inset 0 0 0 6px var(--card)}
.bkt{flex:1;min-width:0;font-size:17px;font-weight:600;letter-spacing:-.374px}
.bktile.on{background:var(--accent);color:#fff}
.bktile.on .bkhead .dot{background:#fff;box-shadow:inset 0 0 0 6px var(--accent)}
.bktile .ex{display:flex;flex-direction:column;gap:6px;padding:0 18px 16px}
.bktile .exl{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin:2px 0}
.bktile .exl.sub{margin-top:10px}
.bkchip{min-height:0;padding:11px 14px;border-radius:10px;background:rgba(255,255,255,.14);
  color:#fff;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;
  border:0;text-align:left;cursor:pointer;letter-spacing:-.2px;line-height:1.3}
.bkchip::before{display:none}
.bkchip .tick{flex:0 0 15px;height:15px;border-radius:4px;background:rgba(255,255,255,.24);
  display:grid;place-items:center;font-size:10px;line-height:1;color:transparent}
.bkchip[aria-pressed="true"]{background:#fff;color:var(--accent);font-weight:700}
.bkchip[aria-pressed="true"] .tick{background:var(--accent);color:#fff}
.bktile .exbox{width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--ink);
  background:#fff;border:0;border-radius:10px;padding:12px 13px;resize:vertical;line-height:1.4}
.bktile .exbox::placeholder{color:var(--faint)}
.bktile .optwrap{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.2);
  display:flex;flex-direction:column;gap:11px}
.bktile .optout{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;
  font:inherit;font-size:15px;font-weight:700;color:#fff;cursor:pointer;text-align:left;
  letter-spacing:-.2px}
.bktile .optout .box{flex:0 0 18px;height:18px;border-radius:5px;background:rgba(255,255,255,.2);
  display:grid;place-items:center;font-size:11px;line-height:1;color:transparent}
.bktile .optout[aria-pressed="true"] .box{background:#fff;color:var(--accent)}
.bktile .optwhy{margin:7px 0 0 28px;font-size:13px;line-height:1.45;
  color:rgba(255,255,255,.74);font-weight:400}
.bkhead:focus-visible,.bkchip:focus-visible,.bktile .optout:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
.bktile.on .bkhead:focus-visible,.bktile.on .bkchip:focus-visible{outline-color:#fff}

/* ---------- stacked lists (lunch / dinner) ---------- */
.lists{display:flex;flex-direction:column;gap:12px}
.lgroup{background:var(--card);border-radius:14px;padding:18px 18px 16px;
  display:flex;flex-direction:column;gap:7px}
.lq{font-size:17px;font-weight:600;letter-spacing:-.3px;margin:0}
.lh{font-size:14px;color:var(--grey);margin:-3px 0 6px;letter-spacing:-.15px}
.opt{display:flex;align-items:center;gap:12px;width:100%;background:var(--surface);
  border:0;border-radius:11px;padding:13px 15px;font:inherit;color:inherit;
  text-align:left;cursor:pointer;letter-spacing:-.2px}
.opt .tick{flex:0 0 18px;height:18px;border-radius:5px;background:var(--divider);
  display:grid;place-items:center;font-size:11px;line-height:1;color:transparent}
.opt .ol{flex:1;min-width:0}
.opt .ol b{display:block;font-size:16px;font-weight:600}
.opt .ol small{display:block;font-size:13px;color:var(--grey);margin-top:1px;line-height:1.35}
.opt[aria-pressed="true"]{background:var(--accent);color:#fff}
.opt[aria-pressed="true"] .tick{background:#fff;color:var(--accent)}
.opt[aria-pressed="true"] .ol small{color:rgba(255,255,255,.76)}
.lbelow{margin-top:12px;padding-top:13px;border-top:1px solid var(--divider)}
.opt.off,.opt.extra{background:none;padding:0}
.opt.off .ol b,.opt.extra .ol b{font-weight:700;font-size:15.5px}
.opt.off[aria-pressed="true"],.opt.extra[aria-pressed="true"]{background:none;color:var(--ink)}
.opt.off[aria-pressed="true"] .tick,.opt.extra[aria-pressed="true"] .tick{background:var(--accent);color:#fff}
.opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* "Same as my lunch choices" above the dinner picker. Only rendered when lunch
   has picks, and it reads as pressed when the two already match, so the
   shortcut can be undone with the same tap that applied it. */
.lsame{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;font:inherit;font-size:15px;
  background:var(--card);border:1px solid var(--divider);color:var(--ink);
  border-radius:999px;padding:10px 16px;cursor:pointer;min-height:44px}
.lsame .tick{opacity:0;font-size:13px}
.lsame[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.lsame[aria-pressed="true"] .tick{opacity:1}
.lsame:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- inline option lists: shorter rows, two to a line where there is room ----
   Most of the height was every option owning a full-width line, not the rows
   being tall. 48px still clears the 44px a thumb needs. The collapsed panel
   keeps its single column: it was set that way to stop long labels being
   clipped when they wrapped across columns. */
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:6px}
.chip{min-height:48px;padding:10px 14px;gap:10px}
.chip::before{flex:0 0 18px;height:18px}
.chip b,.chip>span:not(.ct){font-size:15.5px}
.msel-panel .chips{display:flex;flex-direction:column}

/* "Show savory snacks too" - reveals a group the taste answer filtered out. */
.lmore{display:inline-flex;align-items:center;font:inherit;font-size:15px;min-height:44px;
  background:none;border:1px dashed var(--divider);color:var(--accent);
  border-radius:12px;padding:10px 16px;cursor:pointer;width:100%;justify-content:center}
.lmore:hover{border-color:var(--accent)}
.lmore:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* One COLUMN per meal, days down each column. Stacking meal after meal put
   seven full-width rows between Breakfast and Lunch; side by side, the whole
   question is the height of one week. Columns fall to one per line on a phone
   only if they would be narrower than 128px. */
.daywrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px}
.daygrid{display:flex;flex-direction:column;gap:7px;min-width:0}
.daygrid .gridlabel{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:.02em}
.daychips{display:flex!important;flex-direction:column;gap:6px}
.daychips .chip.sm{min-height:40px;padding:9px 12px;justify-content:center;text-align:center;border-radius:10px;background:var(--card)}
/* Same specificity as the generic pressed rule and declared later, so the
   line above was winning the background on a SELECTED day while the generic
   rule still set white text: white on white, the day vanished. */
.daychips .chip.sm[aria-pressed="true"]{background:var(--accent);color:#fff}

/* Meal variety: one row per meal, every option on screen. */
.scalegrid{display:flex;flex-direction:column;gap:4px}
.srow{padding:10px 0;border-bottom:1px solid var(--divider)}
.srow:last-child{border-bottom:0}
.srow .gridlabel{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:7px}
.srow .chips{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:6px}
.srow .chip.sm{min-height:44px;padding:10px 12px;justify-content:center;text-align:center;border-radius:10px;background:var(--card)}
.srow .chip.sm[aria-pressed="true"]{background:var(--accent);color:#fff}

/* Equipment down the side, places across the top. The label is written once. */
.matrixwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
.matrix{border-collapse:collapse;width:100%;min-width:min-content}
.matrix th,.matrix td{padding:0}
.matrix thead th{font-size:12px;font-weight:600;color:var(--muted);text-align:center;
  padding:0 6px 8px;vertical-align:bottom;line-height:1.2;min-width:62px}
.matrix tbody th{text-align:left;font-size:14px;font-weight:400;color:var(--ink);
  padding:0 12px 0 2px;line-height:1.25;min-width:132px}
.matrix tbody th small{display:block;font-size:11px;color:var(--faint);line-height:1.2;margin-top:1px}
.matrix tbody tr{border-top:1px solid var(--divider)}
.matrix tbody tr:first-child{border-top:0}
.matrix td{text-align:center;padding:5px 4px}
.cell{width:30px;height:30px;border-radius:9px;border:1.5px solid var(--divider);
  background:var(--card);cursor:pointer;display:inline-block;padding:0}
.cell[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:16px;background-position:center;background-repeat:no-repeat}
.cell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* "Choose files" is a <span> inside a <label>, not a <button>, so it inherits
   display:inline and its padding and background collapse into plain text. */
.upbtn{display:inline-block}
.upbtn .btn.sm{display:inline-flex;align-items:center;gap:8px;min-height:46px;height:46px;
  padding:0 18px;line-height:1;font-size:15px;font-weight:500;border-radius:999px;
  background:var(--accent);color:#fff;cursor:pointer}
.upbtn .btn.sm::before{content:"";width:15px;height:15px;flex:0 0 15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 12V3m0 0L4.5 6.5M8 3l3.5 3.5M2.5 13.5h11' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat}
.upbtn:hover .btn.sm{filter:brightness(1.08)}
.upone{gap:10px}
.upone .uphint{font-size:13px}
/* the slot version keeps its quieter look */
.upslot .upbtn .btn.sm{min-height:0;padding:8px 14px;font-size:13.5px;
  background:var(--surface);color:var(--ink)}
.upslot .upbtn .btn.sm::before{display:none}

/* Examples, kept apart from the instruction above them. */
.egs{font-size:14px;line-height:1.5;color:var(--faint);margin:0 0 12px;padding:10px 14px;
  background:var(--card);border-radius:10px}
.egs em{font-style:normal;color:var(--muted)}

/* A fixed set of labelled boxes: the hub profile socials. */
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.fieldrow{display:flex;flex-direction:column;gap:5px}
.fieldrow .fl{font-size:14px;font-weight:500;color:var(--ink)}

/* LinkedIn connect, beside the field label. Brand colour so it is recognised. */
.flrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fieldrow.full{grid-column:1/-1}
.conn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;font-weight:600;
  line-height:1;color:#fff;border:0;border-radius:8px;padding:0 14px;height:34px;cursor:pointer}
.conn svg{width:14px;height:14px;flex:0 0 14px}
.conn.linkedin{background:#0a66c2}
.conn.done{background:#1a7f37}
.conn:hover{opacity:.9}
.conn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.connmsg{font-size:12.5px;color:var(--good,#1a7f37);line-height:1.35}
.connmsg.bad{color:#c0392b}

/* Editing one section from Review gets a single full-width way back. */
.pager.one{display:block}
.pager.one .btn{width:100%}

/* Why the Begin button is off. Never a disabled button with no explanation. */
.startwhy{font-size:14px;color:#c0392b;margin:10px 0 0;line-height:1.4}
#startBtn:disabled{opacity:.45;cursor:not-allowed}

/* Nearest DEXA locations. */
.dexalist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.dexalist li{background:var(--card);border-radius:10px;padding:11px 14px;display:flex;
  flex-direction:column;gap:2px}
.dexalist b{font-size:15px;font-weight:600;line-height:1.3}
.dexalist span{font-size:13.5px;color:var(--muted)}

.dexalist i{font-style:normal;font-size:12.5px;color:var(--accent);font-weight:500}

/* The Begin button when name/email are not filled in. It is deliberately NOT
   `disabled`, so the click still lands and can say what is missing. */
.btn.off{opacity:.45}
.btn.off:hover{opacity:.45;filter:none}

/* "Bring this up on my next call" — a flag for the coach, not a form field.
   A plain .btn is `background:var(--surface);border:0`, which is the same
   near-white as the card it sits in, so it read as a line of centred text.
   Both states carry their own colour and edge. */
.askbtn .btn.askgo{width:100%;background:var(--ink);color:#fff;border:2px solid var(--ink)}
.askbtn .btn.askgo:hover{opacity:.88}
.askbtn.on .btn.askgo{background:#fff;color:var(--accent);border-color:var(--accent)}
.askbtn .help{margin:8px 0 0}
.askundo{opacity:.7}

/* Link out to DexaScan's page for that site. */
.dexalist a.dexalink{display:inline-block;margin-top:8px;font-size:15px;font-weight:600;
  color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.dexalist a.dexalink:hover{opacity:.75}

/* "Download the list" / "Email it to me". A bare .btn here is
   background:var(--surface);border:0 — the same near-white as the card it sits
   in, so both read as plain text. Give them a real edge and fill. */
.recs{gap:12px}
/* THE LOOK LIVES ON .recsbtn ITSELF, not on a parent. Scoping it to `.recs`
   meant the same class inside `.sendpref` fell back to the base .btn, which is
   `background:var(--surface);border:0` - invisible on a card. Third time that
   happened; a self-contained class is the fix. */
.btn.recsbtn{background:var(--ink);color:#fff;border:2px solid var(--ink);width:100%}
.btn.recsbtn:hover{opacity:.88}
.btn.recsbtn:disabled{opacity:.45;cursor:default}
.recsmail{gap:10px}
.recsmail input{min-width:0}
.recsmsg{font-size:15px;margin:2px 0 0;line-height:1.4}
.recsmsg.done{color:#1c7c4a}
.recsmsg.failed{color:#c0392b}
.recsmsg.sending,.recsmsg.info{color:var(--grey)}
.recs .btn.link.recsalt{display:inline;min-height:0;padding:0;font-size:inherit;font-weight:600}
/* The download is the fallback, so it reads as the quieter of the two. */
.btn.recsbtn.alt{background:#fff;color:var(--ink);border:2px solid var(--line-strong)}
.btn.recsbtn.alt:hover{opacity:.8}

/* "We'll text or email it over" — a flag the coach acts on, not a send. */
.sendpref .chips{margin-bottom:12px}
.sendrow{display:flex;flex-direction:column;gap:6px}
.sendlab{font-size:14px;font-weight:600;color:var(--grey)}
.sendpref .help{margin:8px 0 0}
.sendpref .btn.recsbtn{margin-top:12px}
.sendok{display:flex;flex-direction:column;align-items:flex-start;gap:4px}

/* A `wide` column in a rows question gets its own full-width line underneath.
   On desktop .rowfield is display:contents so the input IS the grid item; the
   wide one becomes a normal labelled block spanning every track instead. */
@media (min-width:761px){
  .rows.haswide .rowfield.wide{display:flex;flex-direction:column;gap:5px;
    grid-column:1 / -1;margin-top:10px}
  .rows.haswide .rowfield.wide > span{display:block;font-size:12px;
    font-family:var(--mono);color:var(--muted);letter-spacing:.04em}
  .rows.haswide .rowline{align-items:start}
  .rows.haswide .rowline .rowdel{grid-column:-2;grid-row:1}
}
.addr + .btn.recsbtn{margin-top:12px}

/* "All available" — one tap instead of ten, directly above the Not sure row. */
.matrix tr.mall th{color:var(--accent)}
/* The word "All", not a tick. .cell paints its pressed state with a tick as a
   background-image and is a fixed 30px square, so the label came out clipped
   ("Afl") with a checkmark drawn over it. */
.matrix .cell.all{width:auto;min-width:46px;padding:0 10px;font-size:12px;
  font-weight:700;letter-spacing:.02em;color:var(--accent);background-image:none}
.matrix .cell.all[aria-pressed="true"]{background-image:none;color:#fff}
.chip.allchip{font-weight:700;color:var(--accent)}
.chip.allchip[aria-pressed="true"]{color:#fff}

/* ── Phones: nothing a finger has to hit is under 44px ──────────────────────
   MEASURED in WebKit at 390x508 (an iPhone 13 MINUS the keyboard, which is the
   viewport that actually exists while someone is typing): the section jump
   select was 23px tall and the save-bar button 34px. Apple's own minimum is 44. */
@media (max-width: 760px) {
  /* WebKit IGNORES padding and min-height on a select while it is still a
     native menulist - measured: the rule applied its font-size and width and
     silently dropped the other two, so the control stayed 26px. Turning the
     native appearance off is what makes the box ours to size. */
  .jump{appearance:none;-webkit-appearance:none;min-height:44px;padding:10px 34px 10px 12px;
    font-size:15px;max-width:none;width:100%;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23605a6c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center}
  .savebar-btn{min-height:44px;padding:11px 18px;font-size:15px}
  /* a date box is a row of tiny segments on iOS; give the whole control room */
  input[type="date"]{min-height:46px;font-size:16px}
  /* 16px or Safari ZOOMS THE PAGE on focus, which is half of why a form feels
     broken on a phone: the layout jumps and never comes back. */
  input, select, textarea{font-size:16px}
}