/* ════════════════════════════════════════════════════════════════════════════
   surveys.css — CUSTOMER SURVEYS, the public pages only (docs/SURVEYS.md §9).

   Loaded by services/render-hooks/surveys.js on /surveys/* and nowhere else,
   so no other page on either host pays for it. It edits no file another
   module owns: site.css, tokens.css and public.js are untouched and the
   shared ASSET_VERSION stays put. Bump SURVEYS_ASSET_VERSION in the hook
   whenever this file changes.

   WHAT IT STYLES. The survey itself is the Forms renderer's markup
   (services/forms/render.js), already laid out by site.css §44. This file
   only reshapes it, inside .sv-survey, into something that feels quick and
   calm on a phone and on the counter tablet:
     - one contained column (42rem);
     - each question a separate card, its question in a readable legend;
     - every answer a full-width row at least 48px tall that is tappable
       anywhere along its length (the label stretches over the row);
     - a CHOSEN answer that does not rely on colour: the native radio or
       tick box, a heavier edge and a bolder label all change with it;
     - a visible focus ring on the whole row as well as on the control;
     - one big submit button, full width below 768px.
   The thank-you page (.sv-thanks) is a friendly success panel, and
   .sv-kiosk (the counter tablet, ?kiosk=1) makes everything a size larger.

   It introduces NO new colours and NO new breakpoints: every value is a
   tokens.css custom property in its annotated role, and the only widths are
   site.css's 480 / 768. Secondary text uses --cc-gray-700 ("strong muted",
   10.0:1 on white) rather than the 7.0:1 muted ink — well above the AA
   floor, per the county's contrast rule. Errors keep site.css §44's GOV.UK
   pattern (summary, "Error:" prefix, red edge) — never colour alone.

   The survey works with this file absent: it is then a plain §44 form.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. the column ───────────────────────────────────────────────────────── */

.sv-survey,
.sv-thanks {
  max-width: 42rem;
  overflow-wrap: anywhere;
}
/* §44 caps the form at 40rem; inside the survey column it fills the column. */
.sv-survey .ccw-form { max-width: none; }

.sv-survey .ccw-form__intro {
  font-size: var(--fs-1);
  color: var(--color-text);
  margin: 0 0 var(--space-5);
}
.sv-survey .ccw-form__intro p { margin: 0 0 var(--space-3); }
.sv-survey .ccw-form__intro p:last-child { margin-bottom: 0; }

/* ── 2. one question = one card ──────────────────────────────────────────── */
/* Both shapes a question takes: a radio / tick-box fieldset, and the plain
   .form-field around a comment box or a short answer. */
.sv-survey .ccw-form > .form-field {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
}

/* The question. A legend normally sits ON the fieldset's border; floating it
   puts it inside the card like any other heading line, and the next thing
   clears it. */
.sv-survey .ccw-form > .form-fieldset > .form-legend {
  float: left;
  width: 100%;
  padding: 0;
}
.sv-survey .ccw-form > .form-fieldset > .form-legend + * { clear: both; }
.sv-survey .ccw-form > .form-field > .form-legend,
.sv-survey .ccw-form > .form-field > .form-label {
  margin: 0 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--fs-1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-heading);
}
/* "(required)" stays quieter than the question, in the strong muted ink. */
.sv-survey .ccw-form .form-required {
  font-weight: var(--fw-regular);
  color: var(--cc-gray-700);
}
.sv-survey .ccw-form > .form-field > .form-hint {
  margin: 0 0 var(--space-3);
  color: var(--cc-gray-700);
}
.sv-survey .ccw-form > .form-field > .form-error { margin: 0 0 var(--space-3); }

/* A question that needs fixing: the whole card edged red, a thick left edge,
   plus the summary at the top and the "Error:" message in the card. */
.sv-survey .ccw-form > .form-field[data-invalid="true"] {
  border-color: var(--cc-red);
  border-left-width: 6px;
}

/* ── 3. answers: full-width rows ─────────────────────────────────────────── */

.sv-survey .ccw-form .form-choice__item {
  position: relative;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 3rem;
  margin: 0 0 var(--space-2);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition),
    box-shadow var(--transition);
}
.sv-survey .ccw-form .form-choice__item:last-child { margin-bottom: 0; }
/* The control sits on the first line of its label (24px box, 48px row). */
.sv-survey .ccw-form .form-choice__item > input { margin: 0.75rem 0 0; }
.sv-survey .ccw-form .form-choice__item > .form-label {
  padding-block: 0.6875rem;
  line-height: var(--lh-body);
}
/* The label's box stretched over the whole row: a tap anywhere on the row —
   the padding, the gap, the radio itself — is a tap on the label. */
.sv-survey .ccw-form .form-choice__item > .form-label::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.sv-survey .ccw-form .form-choice__item:hover {
  border-color: var(--cc-navy-mid);
  background: var(--color-surface-tint);
}

/* CHOSEN. Three signals and only one of them is colour: the native control
   shows its dot or tick, the row's edge doubles in weight (an inset shadow,
   so nothing moves), and the answer's words turn bold. */
.sv-survey .ccw-form .form-choice__item:has(> input:checked) {
  border-color: var(--cc-navy);
  box-shadow: inset 0 0 0 1px var(--cc-navy);
  background: var(--cc-navy-xlight);
}
.sv-survey .ccw-form .form-choice__item > input:checked + .form-label {
  font-weight: var(--fw-semibold);
  color: var(--cc-navy-dark);
}

/* FOCUS. The control keeps site.css's own ring; the row gets the site focus
   ring too, so where the keyboard is reads at a glance on a tablet. */
.sv-survey .ccw-form .form-choice__item:has(> input:focus-visible) {
  box-shadow: var(--focus-ring);
}
.sv-survey .ccw-form .form-choice__item:has(> input:checked):has(> input:focus-visible) {
  box-shadow: inset 0 0 0 1px var(--cc-navy), var(--focus-ring);
}

/* ── 4. the button ───────────────────────────────────────────────────────── */

.sv-survey .ccw-form .form-actions { margin: var(--space-6) 0 0; }
.sv-survey .ccw-form .form-submit {
  width: 100%;
  min-height: 3rem;
  font-size: var(--fs-1);
}

/* ── 5. "back to the office" and the closed notice ───────────────────────── */

.sv-back { margin: var(--space-6) 0 0; }
.sv-survey .form-closed .callout { margin: 0; }

/* ── 5b. the language switch (docs/SURVEYS.md §12) ───────────────────────── */
/* "Responder en español" above the English survey, "Answer in English"
   above the Spanish one — only while the survey's Spanish is published. The
   site's own switch sits in the utility bar, which the counter tablet hides,
   so the survey carries its own. A bordered 44px target with the globe icon:
   findable without being louder than the questions. */
.sv-survey .sv-lang { margin: 0 0 var(--space-4); }
.sv-survey .sv-lang__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-weight: 600;
}
.sv-survey .sv-lang__link .icon { width: 1.25em; height: 1.25em; flex: none; }
.sv-kiosk .sv-lang__link { min-height: 3.5rem; font-size: var(--fs-1); }

/* ── 6. the thank-you page ───────────────────────────────────────────────── */

.sv-thanks__panel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 6px solid var(--color-success);
  border-radius: var(--radius);
  background: var(--alert-success-bg);
  color: var(--color-text);
}
/* A tick in a filled circle — decorative (aria-hidden); the heading says it.
   White on --cc-green is 7.4:1. flex: none on the SPAN (site.css §15's
   callout lesson: a shrinkable flex item collapses the svg inside it). */
.sv-thanks__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  background: var(--color-success);
  color: var(--color-text-invert);
}
.sv-thanks__icon .icon { width: 1.5rem; height: 1.5rem; vertical-align: 0; }
.sv-thanks__body { min-width: 0; }
.sv-thanks__title {
  margin: var(--space-1) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-3);
  line-height: var(--lh-tight);
  color: var(--color-heading);
}
.sv-thanks__body .prose { font-size: var(--fs-1); }
.sv-thanks__body .prose p { margin: 0 0 var(--space-3); }
.sv-thanks__body .prose p:last-child { margin-bottom: 0; }

.sv-thanks__actions { margin: var(--space-6) 0 0; }
.sv-thanks__restart { width: 100%; }
.sv-thanks__reset {
  margin: var(--space-4) 0 0;
  color: var(--cc-gray-700);
}

/* ── 7. the counter tablet (?kiosk=1) ────────────────────────────────────── */
/* Read at arm's length and tapped with a fingertip: one size up throughout. */
.sv-kiosk .sv-survey .ccw-form .form-choice__item { min-height: 3.5rem; }
.sv-kiosk .sv-survey .ccw-form .form-choice__item > input {
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 1rem;
}
.sv-kiosk .sv-survey .ccw-form .form-choice__item > .form-label {
  padding-block: 0.9375rem;
  font-size: var(--fs-1);
}
.sv-kiosk .sv-survey .ccw-form > .form-field > .form-legend,
.sv-kiosk .sv-survey .ccw-form > .form-field > .form-label { font-size: var(--fs-2); }
.sv-kiosk .sv-survey .ccw-form .form-submit,
.sv-kiosk .sv-thanks .sv-thanks__restart {
  min-height: 3.5rem;
  font-size: var(--fs-2);
}

/* ── 8. larger screens ───────────────────────────────────────────────────── */

@media (min-width: 480px) {
  .sv-survey .ccw-form > .form-field {
    margin-bottom: var(--space-5);
    padding: var(--space-5);
  }
  .sv-thanks__panel { padding: var(--space-6) var(--space-5); }
}

@media (min-width: 768px) {
  .sv-survey .ccw-form .form-submit,
  .sv-thanks__restart {
    width: auto;
    min-width: 16rem;
  }
}

/* ── 9. motion, forced colours, print ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sv-survey .ccw-form .form-choice__item { transition: none; }
}

/* Windows High Contrast drops box-shadows and backgrounds: the chosen row
   and the focused row keep an outline in the system colours. */
@media (forced-colors: active) {
  .sv-survey .ccw-form .form-choice__item:has(> input:checked) {
    outline: 2px solid CanvasText;
    outline-offset: -3px;
  }
  .sv-survey .ccw-form .form-choice__item:has(> input:focus-visible) {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}

@media print {
  .sv-survey .ccw-form > .form-field { box-shadow: none; break-inside: avoid; }
  .sv-thanks__actions, .sv-thanks__reset { display: none !important; }
}

/* ── 10. the counter tablet: one job on screen (added 2026-10-11 review) ── */
/* A tablet on the Tax Office counter shows the survey and nothing to wander
   off into: the utility links, the site menus, the site search, the
   breadcrumb trail and the footer are hidden. The seal and county name stay,
   and so do emergency alert bars — a county alert outranks a survey. */
.sv-kiosk .utility-bar,
.sv-kiosk .nav-row,
.sv-kiosk .header-search,
.sv-kiosk .breadcrumbs,
.sv-kiosk .site-footer { display: none; }

/* The "Are you still there?" notice from surveys-kiosk.js: pinned to the
   bottom of the screen, above everything, with the button the customer taps
   to keep their answers. */
.sv-kiosk__warn {
  position: fixed;
  inset-inline: var(--space-4);
  bottom: var(--space-4);
  z-index: 1000;
  max-width: 42rem;
  margin-inline: auto;
  padding: var(--space-5);
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-heading);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px var(--shadow-color-deep);
}
.sv-kiosk__warntext {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-2);
  font-weight: 600;
}
.sv-kiosk__warncount {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-4);
  font-weight: 700;
  color: var(--color-heading);
}
.sv-kiosk__stay {
  min-height: 3.5rem;
  width: 100%;
  font-size: var(--fs-2);
}