/* Groomer questionnaire, styled like the in-app quiz (work_app/docs/design: StepProgress, ChoiceCard, Button). */
:root {
  --surface: #fafaf8;
  --surface-raised: #ffffff;
  --surface-muted: #f2f2ef;
  --line: #e6e6e2;
  --ink: #111111;
  --ink-muted: #6b6b66;
  --ink-faint: #8a8a84;
  --honey: #e2a03f;
  --honey-soft: #fbf1df;
  --sage-soft: #e9eddc;
  --sage-ink: #4e5c2c;
  --danger: #b42318;
  --f-display: "Outfit", -apple-system, system-ui, sans-serif;
  --f-text: "DM Sans", -apple-system, system-ui, sans-serif;
  color-scheme: light;
}
* , *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--surface); color: var(--ink); font: 400 16px/1.5 var(--f-text); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }

.wrap { max-width: 640px; min-height: 100svh; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; }

.top { position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 20px 0 14px; }
.brand img { height: 26px; width: auto; display: block; }
/* StepProgress, quiz variant: a thin 4pt bar */
.nav { display: flex; align-items: center; gap: 12px; margin-top: 16px; min-height: 40px; }
/* round soft back button, top left */
.nav-back { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface-muted); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background-color 0.15s ease; }
.nav-back:hover { background: #e8e8e4; }
.nav-back[hidden] { display: none; }
.nav-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.progress { flex: 1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--ink); border-radius: inherit; transition: width 0.4s ease; }

main { flex: 1; padding: 24px 0 40px; }
.step { animation: in 0.35s ease; }
@keyframes in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .step { animation: none; } .progress i { transition: none; } }

.eyebrow { margin: 0 0 12px; font: 700 12px/16px var(--f-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.intro h1 { margin: 0; font: 600 clamp(28px, 6vw, 38px)/1.12 var(--f-display); letter-spacing: -0.025em; }
.intro p { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-muted); }
.intro .time { display: inline-block; margin-top: 18px; padding: 9px 16px; border-radius: 18px; background: var(--honey-soft); color: #7a4d0b; font: 600 14px/1.35 var(--f-text); }

.q { margin-top: 32px; }
.q-num { font: 600 14px/1 var(--f-text); color: var(--ink-faint); }
.q h2 { margin: 8px 0 18px; font: 600 clamp(22px, 4.6vw, 28px)/1.25 var(--f-display); letter-spacing: -0.015em; }
.q-hint { margin: -8px 0 16px; font-size: 14px; color: var(--ink-muted); }

/* ChoiceCard: white, 22 radius, 1px line; selected 1.5px ink */
.choices { display: flex; flex-direction: column; gap: 10px; border: 0; margin: 0; padding: 0; }
.choice { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 22px; background: var(--surface-raised); box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow 0.15s ease; }
.choice:hover { box-shadow: 0 0 0 1px #cfcfca; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .dot { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-faint); display: grid; place-items: center; transition: box-shadow 0.15s ease; }
.choice .dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform 0.15s ease; }
.choice span:last-child { font: 500 16px/1.4 var(--f-text); }
.choice:has(input:checked) { box-shadow: 0 0 0 1.5px var(--ink); }
.choice:has(input:checked) .dot { box-shadow: inset 0 0 0 1.5px var(--ink); }
.choice:has(input:checked) .dot::after { transform: scale(1); }
.choice:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

.actions { display: flex; gap: 12px; margin-top: 28px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 26px; border-radius: 999px; border: 0; font: 600 16px/1 var(--f-text); cursor: pointer; }
.btn-primary { flex: 1; background: var(--ink); color: #fff; }
.btn-primary:disabled { background: #cfcfca; cursor: not-allowed; }
.btn-back { background: var(--surface-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.err { margin: 14px 0 0; font-size: 14px; color: var(--danger); }

.done { text-align: center; padding-top: 40px; }
.done .tick { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: var(--sage-soft); color: var(--sage-ink); display: grid; place-items: center; font: 600 28px/1 var(--f-text); }
.done h1 { margin: 0; font: 600 30px/1.15 var(--f-display); letter-spacing: -0.02em; }
.done p { margin: 12px auto 0; max-width: 420px; color: var(--ink-muted); font-size: 17px; }

.foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 20px 0 28px; border-top: 1px solid var(--line); font: 400 12px/1.4 var(--f-text); color: var(--ink-faint); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* pages with several questions */
.page-head { margin-bottom: 4px; }
.page-num { font: 600 13px/1 var(--f-text); letter-spacing: 0.02em; color: var(--ink-faint); }
.page-head h1 { margin: 10px 0 0; font: 600 clamp(28px, 6vw, 36px)/1.12 var(--f-display); letter-spacing: -0.025em; }
.q + .q { margin-top: 36px; }
/* FormField: white, line ring, 16 radius */
.text { width: 100%; height: 56px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--surface-raised); box-shadow: 0 0 0 1px var(--line); font: 500 16px/1 var(--f-text); color: var(--ink); }
.text::placeholder { color: var(--ink-faint); }
.text:focus { outline: none; box-shadow: 0 0 0 1.5px var(--ink); }
.text.other { margin: -2px 0 4px; }
.text.other[hidden] { display: none; }
.q-err { margin: 10px 0 0; font: 500 14px/1.4 var(--f-text); color: var(--danger); }
.q.is-missing .choice, .q.is-missing > .text { box-shadow: 0 0 0 1.5px var(--danger); }

/* checkboxes (multi): square box with a tick */
.choices.is-multi .dot { border-radius: 7px; }
.choices.is-multi .dot::after { width: 12px; height: 7px; border-radius: 0; background: none; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(0); margin-top: -3px; }
.choices.is-multi .choice:has(input:checked) .dot { background: var(--ink); box-shadow: none; }
.choices.is-multi .choice:has(input:checked) .dot::after { transform: rotate(-45deg) scale(1); }
.opt { font: 500 15px/1 var(--f-text); color: var(--ink-faint); letter-spacing: 0; white-space: nowrap; }

/* small heading that opens a group of questions inside a page */
.q-section { margin: 12px 0 0; padding-top: 28px; border-top: 1px solid var(--line); font: 700 12px/16px var(--f-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.q:first-child .q-section { border-top: 0; padding-top: 0; }

/* per-option detail blocks (price tables, coat notes, add-on choices) */
.details { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.detail { padding: 18px; border-radius: 22px; background: var(--surface-muted); }
.detail-title { margin-bottom: 12px; font: 600 17px/1.3 var(--f-display); }
.detail .text { height: 48px; }

.ptable { display: flex; flex-direction: column; gap: 8px; }
.pt-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr 1fr; gap: 8px; align-items: center; }
.pt-head span { font: 600 12px/1 var(--f-text); color: var(--ink-faint); }
.pt-size b { display: block; font: 600 15px/1.2 var(--f-text); }
.pt-size small { font-size: 13px; color: var(--ink-muted); }
.money { display: flex; align-items: center; height: 44px; padding: 0 12px; border-radius: 14px; background: var(--surface-raised); box-shadow: 0 0 0 1px var(--line); }
.money span { color: var(--ink-faint); font-weight: 500; margin-right: 4px; }
.money input { width: 100%; min-width: 0; border: 0; background: none; font: 500 16px/1 var(--f-text); color: var(--ink); }
.money input:focus { outline: none; }
.money:focus-within { box-shadow: 0 0 0 1.5px var(--ink); }

.mini + .mini { margin-top: 14px; }
.mini-label { margin-bottom: 8px; font: 600 13px/1.3 var(--f-text); color: var(--ink-muted); }
.mini-label .opt { font-size: 13px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span { display: block; padding: 9px 14px; border-radius: 999px; background: var(--surface-raised); box-shadow: 0 0 0 1px var(--line); font: 500 14px/1.3 var(--f-text); }
.pill:has(input:checked) span { background: var(--ink); color: #fff; box-shadow: none; }
.pill:has(input:focus-visible) span { outline: 2px solid var(--ink); outline-offset: 2px; }

/* file upload */
.drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 18px; border-radius: 22px; background: var(--surface-raised); box-shadow: 0 0 0 1px var(--line); cursor: pointer; text-align: center; }
.drop:hover { box-shadow: 0 0 0 1px #cfcfca; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.drop-main { font: 600 16px/1.3 var(--f-text); }
.drop-sub { font-size: 13px; color: var(--ink-muted); }
.files { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.files li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--surface-muted); font-size: 14px; }
.files li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files li small { flex: none; padding-right: 6px; color: var(--sage-ink); font-weight: 600; }
.file-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--surface-raised); font-size: 18px; line-height: 1; cursor: pointer; }
.q.is-missing .drop { box-shadow: 0 0 0 1.5px var(--danger); }

@media (max-width: 420px) {
  .detail { padding: 14px; }
  .pt-row { grid-template-columns: minmax(0, 1fr) 84px 84px; }
}

/* long free answer */
.text.area { display: block; height: auto; min-height: 140px; padding: 16px 18px; resize: vertical; font: 400 16px/1.5 var(--f-text); }

/* "What happens next" on the thank-you screen */
.done .next { margin: 28px auto 0; max-width: 480px; padding: 22px 22px 8px; border-radius: 22px; background: var(--surface-raised); box-shadow: 0 0 0 1px var(--line); text-align: left; }
.done .next h2 { margin: 0 0 14px; font: 600 19px/1.3 var(--f-display); }
.done .next ul { margin: 0; padding: 0; list-style: none; }
.done .next li { position: relative; margin-bottom: 14px; padding-left: 30px; font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
.done .next li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--sage-soft); color: var(--sage-ink); display: grid; place-items: center; font: 600 12px/1 var(--f-text); }
.done .next b { color: var(--ink); font-weight: 600; }
.done .ask { font-size: 15px; }
.done .ask a { color: var(--ink); font-weight: 600; }

/* privacy notice under the first Continue */
.consent { margin: 12px 0 0; text-align: center; font-size: 13px; line-height: 1.45; color: var(--ink-faint); }
.consent a { color: var(--ink-muted); }

/* re-draws after a choice keep the page still (the fade-in is only for a new page) */
.step.is-still { animation: none; }