/* masa booking setup guide (templates/client-setup.html, served at /setup/<client>/).
   Tokens first, dark mode redefines tokens only. The stepper layer at the bottom is gated on
   html.js: with no script the whole guide is one long page (fail open, never blank). */
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
/* ⚑ Sep 25 2026: the browser's gray tap box is replaced, not just removed (same rule as
   starter.css): anything tappable dims while pressed. setup.js adds the touchstart listener
   iOS Safari needs before it applies :active on touch. */
html { -webkit-tap-highlight-color: transparent; }
a:active, button:active, summary:active, label:active { opacity: .72; }
/* ── tokens. Light is the base; dark redefines tokens only. ───────────────── */
:root {
  --ground:   #ffffff;
  --raised:   #f6f7f9;
  --sunk:     #eef0f4;
  --ink:      #171a1f;
  --slate:    #566070;
  --faint:    #646e7b;   /* s119: #7d8794 was 3.19-3.64:1 on these grounds at 11-13px (needs 4.5); now 4.54-5.17:1, still lighter than slate */
  --rule:     #e0e4ea;
  --rule-firm:#c3cad4;

  --go:       #0d6a64;   /* progress, done, the recommended path */
  --go-soft:  #e3f2f0;
  --go-ink:   #0a514c;
  --coin:     #8a5a00;   /* costs money */
  --coin-soft:#fdf1dd;

  --font-d: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-b: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-m: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gut: 18px;
  --max: 608px;   /* s80: 720px ran body text ~90 characters a line on desktop (comfortable = 45-75, WCAG 1.4.8 says under 80); 608px is ~75. The page stays centred; text and buttons stay left-aligned inside it (GOV.UK / form research) */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:   #14161a;
    --raised:   #1b1e24;
    --sunk:     #22262e;
    --ink:      #e9ecf1;
    --slate:    #a3adba;
    --faint:    #7f8894;
    --rule:     #2a2f38;
    --rule-firm:#454d59;
    --go:       #4fc9bf;
    --go-soft:  #123330;
    --go-ink:   #8fded7;
    --coin:     #e0aa5a;
    --coin-soft:#2e2312;
  }
}
:root[data-theme="dark"] {
  --ground:#14161a; --raised:#1b1e24; --sunk:#22262e;
  --ink:#e9ecf1; --slate:#a3adba; --faint:#7f8894;
  --rule:#2a2f38; --rule-firm:#454d59;
  --go:#4fc9bf; --go-soft:#123330; --go-ink:#8fded7;
  --coin:#e0aa5a; --coin-soft:#2e2312;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-b);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); padding-block: 34px 72px; }

h1, h2, h3 { font-family: var(--font-d); font-weight: 600; line-height: 1.18; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.6rem); letter-spacing: -0.02em; }
p { margin: 0 0 0.7em; }
p:last-child { margin-bottom: 0; }
a { color: var(--go); text-underline-offset: 3px; }

.lede { color: var(--slate); font-size: 1.06rem; margin-top: 0.6em; }
.kicker {
  font-family: var(--font-d); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin: 0 0 0.5em;
}

/* ── the swappable client panel ───────────────────────────────────────────── */
.card {
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 18px;
  margin: 26px 0;
}
.facts { display: grid; gap: 10px; margin: 0; }
.fact { display: grid; grid-template-columns: 122px 1fr; gap: 10px; align-items: baseline; }
.fact dt { font-size: 0.82rem; color: var(--faint); font-family: var(--font-d); font-weight: 500; letter-spacing: 0.03em; }
.fact dd { margin: 0; font-family: var(--font-m); font-size: 0.92rem; word-break: break-word; }
@media (max-width: 460px) { .fact { grid-template-columns: 1fr; gap: 1px; } }

/* ── progress ─────────────────────────────────────────────────────────────── */
.prog { background: var(--ground); padding-block: 12px 10px; border-bottom: 1px solid var(--rule); margin-bottom: 26px; }
.prog__row { display: flex; align-items: center; gap: 12px; }
.prog__bar { flex: 1; height: 6px; background: var(--sunk); border-radius: 100px; overflow: hidden; }
.prog__fill { height: 100%; width: 0; background: var(--go); border-radius: 100px; transition: width .3s ease; }
.prog__txt { font-family: var(--font-d); font-size: 0.78rem; font-weight: 600; color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── steps ────────────────────────────────────────────────────────────────── */
.step { border-top: 1px solid var(--rule); padding-top: 22px; margin-top: 22px; }
.step__head { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; }   /* s99 (Juan): the number sits level with a one- or two-line title */
.step__n {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sunk); color: var(--slate);
  font-family: var(--font-d); font-weight: 700; font-size: 0.9rem;
  transition: background .2s ease, color .2s ease;
}
.step.is-done .step__n { background: var(--go); color: var(--ground); }
.step.is-done .step__h { color: var(--faint); text-decoration: line-through; text-decoration-thickness: 1px; }
.step__h { font-size: 1.22rem; }
/* s99 (Juan: "a weird highlight around the headings"): setup.js moves focus to the new screen's title (tabindex=-1) so a
   screen reader announces it, and the browser drew its focus ring on it. That focus is programmatic, never a place to
   type or click, so its ring goes; every control keeps its :focus-visible ring. */
.step__h[tabindex="-1"]:focus, .intro h1[tabindex="-1"]:focus, .done-msg[tabindex="-1"]:focus { outline: none; }
.step__body { padding-left: 46px; margin-top: 10px; }
@media (max-width: 460px) { .step__body { padding-left: 0; } }

.meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.tag {
  font-family: var(--font-d); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 100px; border: 1px solid var(--rule-firm); color: var(--slate);
  white-space: nowrap;
}
.tag--coin { background: var(--coin-soft); border-color: transparent; color: var(--coin); }
.tag--free { background: var(--go-soft); border-color: transparent; color: var(--go-ink); }
/* who does the step: the first tag on every step */
.tag--who { background: var(--sunk); border-color: transparent; color: var(--ink); }

ol.sub, ul.sub { margin: 0 0 12px; padding-left: 1.15em; }
ol.sub li, ul.sub li { margin-bottom: 7px; }
code {
  font-family: var(--font-m); font-size: 0.88em;
  background: var(--sunk); padding: 1px 5px; border-radius: 4px; word-break: break-word;
}

.note {
  background: var(--sunk); border-left: 3px solid var(--rule-firm);
  padding: 11px 14px; border-radius: 0 6px 6px 0; margin: 12px 0;
  font-size: 0.94rem; color: var(--slate);
}
.note b { color: var(--ink); }

.check {
  display: flex; gap: 11px; align-items: center;
  margin-top: 14px; padding: 11px 13px;
  background: var(--raised); border: 1px solid var(--rule); border-radius: 8px;
  cursor: pointer; user-select: none;
  font-family: var(--font-d); font-weight: 600; font-size: 0.92rem;
}
.check:hover { border-color: var(--rule-firm); }
.check input { width: 20px; height: 20px; accent-color: var(--go); flex: 0 0 auto; margin: 0; }

/* ── the email decision ───────────────────────────────────────────────────── */
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
@media (max-width: 620px) { .pick { grid-template-columns: 1fr; } }
.opt { border: 1px solid var(--rule); border-radius: 10px; padding: 16px; background: var(--raised); }
.opt--rec { border-color: var(--go); border-width: 2px; }
.opt__flag {
  display: inline-block; font-family: var(--font-d); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--go); color: var(--ground); padding: 3px 8px; border-radius: 100px; margin-bottom: 9px;
}
.opt__h { font-size: 1.05rem; margin-bottom: 3px; }
.opt__price { font-family: var(--font-d); font-size: 1.5rem; font-weight: 700; margin: 4px 0 10px; letter-spacing: -0.01em; }
.opt__price span { font-size: 0.9rem; font-weight: 500; color: var(--faint); }
.yn { list-style: none; margin: 0; padding: 0; font-size: 0.93rem; }
.yn li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; margin-bottom: 7px; align-items: start; color: var(--slate); }
.yn .y { color: var(--go); font-weight: 700; }
.yn .n { color: var(--coin); font-weight: 700; }

.warn {
  background: var(--coin-soft); border-radius: 8px; padding: 13px 15px; margin: 16px 0;
  font-size: 0.95rem; color: var(--ink); border: 1px solid transparent;
}
.warn b { color: var(--coin); }

.done-msg {
  margin-top: 30px; padding: 20px; border-radius: 10px;
  background: var(--go-soft); border: 1px solid var(--go);
  font-family: var(--font-d); font-weight: 600; text-align: center; color: var(--go-ink);
}
.foot { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 0.88rem; color: var(--faint); }

/* ── the stepper: one step per screen (html.js only) ─────────────────────── */
.stepper { display: none; }
html.js .stepper {
  display: block; position: sticky; top: 0; z-index: 5;
  background: var(--ground); border-bottom: 1px solid var(--rule);
  padding-block: 10px 12px; margin: -34px calc(-1 * var(--gut)) 24px; padding-inline: var(--gut);
}
html.js .prog { display: none; }                 /* the stepper carries progress instead */
.stepper__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }   /* s119: wraps if "min left" and "Saved" do not fit */
.stepper__count { font-family: var(--font-d); font-weight: 700; font-size: 0.86rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.stepper__saved { font-size: 0.8rem; color: var(--faint); }
.stepper__dots { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.stepper__dots li { flex: 1; min-width: 0; display: flex; }
.stepper__dot {
  flex: 1; min-width: 0; height: 34px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--rule-firm); background: var(--raised); color: var(--slate);
  font-family: var(--font-d); font-weight: 700; font-size: 0.8rem; font-variant-numeric: tabular-nums;
}
.stepper__dot.is-done { background: var(--go-soft); border-color: transparent; color: var(--go-ink); }
.stepper__dot[aria-current="step"] { background: var(--go); border-color: var(--go); color: var(--ground); }
.stepper__dot:focus-visible, .btn:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; }

html.js .screen { display: none; }
html.js .screen.is-current { display: block; }
html.js .step { border-top: 0; margin-top: 0; padding-top: 0; }
html.js .step__body { padding-left: 0; }
html.js .step.is-done .step__h { text-decoration: none; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  html.js .screen.is-current { animation: screen-in .22s ease-out; }
  @keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

.step__nav { display: none; }
/* ⚑ Sep 24 2026 (s80, Juan: "match the CTA buttons on the booking pages"): the starter pages' button, exactly: a 48px
   pill, capped at 20rem so it never stretches the whole column. Next leads alone on its row; Back and "Not now" share
   the quiet row under it at the same width (phones stack the secondary action BELOW the primary; checked Sep 24 2026:
   Material 3's default button shape is fully round, and multi-step guidance puts Previous under Next on small screens). */
html.js .step__nav { display: grid; gap: 10px; margin-top: 22px; max-width: 20rem; }
.step__nav-row { display: flex; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; cursor: pointer; text-decoration: none;
  font-family: var(--font-d); font-weight: 700; font-size: 1rem;
  background: var(--go); color: var(--ground); border: 1px solid var(--go);
}
.btn--wide { width: 100%; max-width: 20rem; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-firm); }
/* ⚑ Oct 1 2026 (s119, CTA audit): ONE filled button per screen, the thing to do next (GOV.UK: "avoid using multiple
   default buttons on a single page"; Material 3: filled "ideally for only one action on a page"; Apple HIG: the
   prominent style "for the most likely action"). One colour does it: filled teal = do this; tonal (the same teal, soft)
   = the step's own Next while an in-step action (Stripe, Google) is still to do, the use Material 3 names for tonal
   ("such as Next in an onboarding flow"); outlined = an alternative; text = Back / Remind me later. Amber stays a
   meaning (it costs money) and never colours a button. setup.js paint() swaps tonal and filled once the step is done. */
.btn--tonal { background: var(--go-soft); color: var(--go-ink); border-color: transparent; }
.btn--quiet { background: transparent; color: var(--slate); border-color: transparent; min-height: 44px; font-weight: 600; }
.step__nav-row .btn { flex: 1; }
/* ⚑ Sep 24 2026 (Juan: the bottom buttons were "kind of big for a phone"): ONE filled 48px button per step, the size
   the starter pages use for every section button; Back / Skip are quiet text-weight links, not a second pair of
   boxes. The button now says what they did ("I shared my calendar"), so the tick box under it is hidden, except on
   the consent step, where the tick must be their own act (TCPA). No JS = the box stays (the floor). */
html.js .step:not([data-key="alerts"]) .check { display: none; }
.step__nav-row .btn--quiet { min-height: 44px; font-size: 0.95rem; padding-inline: 8px; white-space: nowrap; }
.btn[hidden] { display: none !important; }      /* an author display rule beats [hidden] */
/* Sep 27 2026: a step that can't be done yet (data-lock-until) shows its button greyed, saying why. */
.btn:disabled { background: var(--sunk); color: var(--slate); border-color: var(--rule-firm); cursor: default; }
/* ⚑ Oct 1 2026 (s119): the whole journey on the intro (built by setup.js, html.js only: with no script the long page
   already shows every step). Numbered circles joined by a line, each step's minutes on the right, a tick once done. */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.journey { list-style: none; margin: 18px 0 22px; padding: 0; }
.journey__step { position: relative; }
.journey__step:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 38px; bottom: -6px; width: 2px; background: var(--rule-firm); }
.journey__link { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 0; color: var(--ink); text-decoration: none; }
.journey__n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-d); font-weight: 700; font-size: 0.9rem; background: var(--go-soft); color: var(--go-ink); position: relative; z-index: 1; }
.journey__t { flex: 1; min-width: 0; font-weight: 600; }
.journey__m { flex: none; font-size: 0.85rem; color: var(--slate); font-variant-numeric: tabular-nums; }
.journey__step.is-done .journey__n { background: var(--go); color: var(--ground); font-size: 0; }
.journey__step.is-done .journey__n::before { content: "\2713"; font-size: 0.95rem; }
.journey__step.is-done .journey__t { color: var(--slate); }
.journey__link:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; border-radius: 8px; }
.intro__start { display: none; }
html.js .intro__start { display: flex; margin-top: 22px; }
.left__item { justify-content: flex-start; text-align: left; margin-top: 8px; min-height: 48px; max-width: none; border-radius: 12px; }   /* a two-line list row, not a CTA: a pill's round ends clip its text */

/* ── help, meeting, and the live checks ─────────────────────────────────── */
.together { margin-top: 14px; }
.help { display: block; text-align: center; margin-top: 4px; font-size: 0.92rem; color: var(--slate); }
.verify { margin: 16px 0 4px; padding: 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--raised); display: grid; gap: 10px; }
.verify__label { font-family: var(--font-d); font-weight: 600; font-size: 0.95rem; }
.verify__input {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: 10px; font: inherit; font-size: 16px;
  border: 1px solid var(--rule-firm); background: var(--ground); color: var(--ink);
}
.verify__input:focus-visible { outline: 2px solid var(--go); outline-offset: 1px; }
.verify__msg { margin: 0; font-size: 0.95rem; }
.verify__msg.is-ok { color: var(--go-ink); font-weight: 600; }
.verify__msg.is-bad { color: var(--coin); font-weight: 600; }
.verify[hidden], .note[hidden], .q[hidden], .answers__svc[hidden], .sumlist__add[hidden] { display: none !important; }
/* ⚑ Sep 24 2026: answers sent from a step (form[data-said], assets/js/setup.js). Hidden until the signed link is known. */
form[data-said][hidden], .said-fallback[hidden] { display: none !important; }
.said { display: grid; gap: 8px; margin: 10px 0 4px; }
.said__msg { margin: 0; font-size: 0.92rem; color: var(--slate); min-height: 1.2em; }
.choice { display: grid; gap: 10px; }
.check.is-needed { border-color: var(--coin); box-shadow: 0 0 0 2px var(--coin-soft); }
.pick.is-needed { outline: 2px solid var(--coin); outline-offset: 6px; border-radius: 6px; }   /* s80: a step with a choice, left unpicked */

/* ── secondary detail, one tap away (native <details>: works without JS) ──
   NN/g: accordions suit secondary content on mobile; the action itself stays visible. */
.more { border-top: 1px solid var(--rule); margin: 14px 0 0; }
.more:last-of-type { border-bottom: 1px solid var(--rule); }
.more > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 48px; padding-block: 12px; line-height: 1.35;   /* a two-line title needs air above and below, not a flush 48px */
  font-family: var(--font-d); font-weight: 600; font-size: 0.95rem; color: var(--ink);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after {
  /* The chevron: rotate ONLY (a translate inside a rotate moves it diagonally, off centre), and nudge it
     by margin so its visual middle sits on the text's middle in both states. */
  content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin: -4px 6px 0 0;
  border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate); transform: rotate(45deg);
}
.more[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.more > summary:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; border-radius: 4px; }
.more > :not(summary) { color: var(--slate); font-size: 0.95rem; margin-bottom: 14px; }
.fine { font-size: 0.92rem; color: var(--slate); }
.nt { font-size: 0.85em; color: var(--slate); }
.btn .nt { color: inherit; font-weight: 600; }   /* s119: on a button the slate note was grey on teal; it takes the button's own text colour */
.step__body a { overflow-wrap: anywhere; }   /* a long address must wrap, never run off a phone screen */
.copy {
  margin-left: 6px; padding: 2px 10px; min-height: 30px; border-radius: 100px; cursor: pointer; vertical-align: middle;
  font-family: var(--font-d); font-weight: 600; font-size: 0.8rem; background: var(--go-soft); color: var(--go-ink); border: 0;
}
.have { margin-bottom: 10px; }
.have li { margin-bottom: 4px; }

/* ── the step-2 answers form (Sep 23 2026): the calendar check's .verify inputs, in rows ── */
.answers__set { border: 0; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.answers__radio { display: flex; gap: 8px; align-items: center; font-size: 0.95rem; }
.answers__svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.answers__svc .answers__f--name { grid-column: 1 / -1; }
/* s80: every service box keeps a VISIBLE label (a placeholder vanishes the moment they type: NN/g). */
.answers__f { display: grid; gap: 3px; min-width: 0; }
.answers__fl { font-size: 0.8rem; color: var(--slate); }
.answers__svc + .answers__svc { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--rule); }
.answers__day { display: grid; grid-template-columns: 3em minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: center; }
.answers__day > span { font-family: var(--font-d); font-weight: 600; font-size: 0.9rem; }
.answers__svc > *, .answers__day > * { min-width: 0; }
.answers.is-request .answers__svc { display: none; }

/* ── the answers step as questions + a summary (Sep 24 2026, assets/js/answers.js) ──
   GOV.UK "check answers": read-only rows, a Change link each. The rows reuse the intro's .fact rhythm. */
.answers.is-flow { gap: 12px; }
.answers__intro { margin: 0; font-size: 0.95rem; color: var(--slate); }
.sumlist { margin: 0; display: grid; }
.sumlist__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
/* Dividers only BETWEEN rows (GOV.UK summary list). Sep 24 2026 (Juan): a top border sat 12px under the intro (the
   box's top padding is 14px, so it read as cramped), and the last row's bottom border stacked on "Add more"'s own
   top border: two lines back to back. */
/* The intro → list space = the box's own top padding (14px), so the text above and below it match. */
.answers__flow { display: grid; gap: 14px; }
.answers__flow[hidden] { display: none !important; }   /* it had display:grid and NO [hidden] rule, so hidden never hid it (Sep 25 2026) */
.sumlist__row:first-child { padding-top: 0; }
.sumlist__row:last-child { border-bottom: 0; }
.sumlist__k { grid-column: 1; font-size: 0.82rem; color: var(--faint); font-family: var(--font-d); font-weight: 500; letter-spacing: 0.03em; }
.sumlist__v { grid-column: 1; margin: 0; display: grid; gap: 2px; font-size: 0.98rem; word-break: break-word; }
.sumlist__none { color: var(--coin); font-weight: 600; }
.sumlist__change { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
/* The link-style buttons. ⚠️ Grid placement stays on .sumlist__change ONLY: shared with the "+ Add" buttons it put
   them in column 2 of whatever grid they sat in, which split the services box in two (Sep 24 2026). */
.sumlist__change, .sumlist__add {
  min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer;
  font: inherit; font-family: var(--font-d); font-weight: 600; font-size: 0.95rem; color: var(--go-ink); text-decoration: underline;
  text-underline-offset: 3px;
}
.sumlist__change:focus-visible, .sumlist__add:focus-visible, .chip:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; border-radius: 6px; }
.answers__more { display: grid; justify-items: start; padding: 4px 0 8px; }
.sumlist__add { text-decoration: none; justify-self: start; }
.answers__foot { display: grid; gap: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 40px; min-width: 56px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule-firm); background: var(--ground); color: var(--ink); font: inherit; font-weight: 600;
}
.chip.is-on { background: var(--go-soft); border-color: var(--go); color: var(--go-ink); }
.answers.is-request .answers__set .sumlist__add { display: none; }
/* "It's already on my Booksy" (Sep 24 2026): a quiet box above the first question, not a second form. */
.elsewhere { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--rule-firm); border-radius: 10px; }
.elsewhere__q { margin: 0; font-size: 0.95rem; color: var(--slate); }
.elsewhere__links { display: grid; gap: 8px; }
.elsewhere .fine { margin: 0; }

/* ⚑ Oct 1 2026: the calendar step shows only the path for the calendar they pick. CSS-only: a browser without :has
   (or a page without CSS) shows every path, which is the full guide, never a missing one. */
.answers__set.calpick { margin: 4px 0 18px; }   /* the picker is a question in a step, not a form row: room before its answer */
@supports selector(:has(*)) {
  .step:has(.calpick) .calpath { display: none; }
  .step:has(.calpick input[value="google"]:checked) .calpath[data-cal="google"],
  .step:has(.calpick input[value="apple"]:checked) .calpath[data-cal="apple"],
  .step:has(.calpick input[value="other"]:checked) .calpath[data-cal="other"] { display: block; }
}

/* ⚑ Oct 1 2026: "Already on us" reads as done-for-you at a glance: a check in a soft circle per item, text beside it.
   Decorative (the words say it). Check vs circle: 8.0:1 light, 8.9:1 dark (checked Oct 1 2026). */
ul.sub.onus { list-style: none; padding-left: 0; display: grid; gap: 10px; }
ul.sub.onus li { position: relative; padding-left: 34px; min-height: 24px; }   /* not grid: <b> + text would split into cells */
ul.sub.onus li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--go-soft); color: var(--go-ink); font-size: 13px; font-weight: 700; line-height: 1; }