/* ============================================================
   VAR/FORM/02 — Form-specific styles
   Register B (Heritage Navy). Loads after varnham.css and register-b.css;
   adds patterns for question rows, option groups, progress indicator,
   review page, session modal, and the document footer mark.

   Per VAR/BR/15.7:
   - Footer compact V&Co. mark uses ink V/Co + Heritage Navy ampersand
   - Document reference VAR/FORM/02 uses Heritage Navy Playfair italic
   - No Playfair italic outside principal name and ampersand
   - At most one DM Sans italic emphasis word per headline
   ============================================================ */

/* ============================================================
   FORM SHELL — page layout
   ============================================================ */
.form-page {
  padding: 70px 0 100px;
  min-height: calc(100vh - 200px);
}

@media (max-width: 800px) {
  .form-page { padding: 40px 0 70px; }
}

.form-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ============================================================
   PROGRESS — sits below the nav, above the form content
   Persistent so the respondent always knows where they are
   ============================================================ */
.progress {
  background: var(--paper-cool);
  border-bottom: 1px solid var(--rule);
  padding: 16px 0;
  position: sticky;
  top: 67px; /* sits below the sticky nav */
  z-index: 90;
}

.progress-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  gap: 24px;
}

.progress-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  white-space: nowrap;
}

.progress-bar {
  flex: 1;
  height: 3px;
  background: var(--rule);
  position: relative;
  overflow: hidden;
}

.progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  transition: width 0.25s ease;
}

.progress-saved {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}

.progress-saved.visible { opacity: 1; }

@media (max-width: 600px) {
  .progress-inner { gap: 16px; }
  .progress-label { font-size: 9px; }
  .progress-saved { display: none; }
}

/* ============================================================
   SECTION HEAD — eyebrow + section title + overview
   Shown only on the first sub-section page of each section
   ============================================================ */
.fp-section-head {
  margin-bottom: 50px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--rule);
}

.fp-section-head .eyebrow {
  display: block;
  margin-bottom: 18px;
}

.fp-section-head h1 {
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.fp-section-head .overview {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 700px;
}

/* Compact variant — for sub-section pages 2..N within a section, the
   section head is shown for orientation only, without the prose
   overview. Smaller scale signals "you are still inside this section,
   here's the title for reference" without competing with the
   sub-section heading below it. */
.fp-section-head.fp-section-head-compact {
  margin-bottom: 32px;
  padding-bottom: 22px;
}

.fp-section-head.fp-section-head-compact h1 {
  font-size: clamp(24px, 2.6vw, 30px);
  margin-bottom: 0;
}

.fp-section-head.fp-section-head-compact .eyebrow {
  margin-bottom: 10px;
}

/* ============================================================
   SUB-SECTION HEAD — sits at top of every page
   When the section head is shown above, this is smaller
   ============================================================ */
.fp-subsection-head {
  margin-bottom: 36px;
}

.fp-subsection-head h2 {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
}

.fp-subsection-head .preamble {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 700px;
}

/* Chunk description — shown under the sub-section heading when a
   sub-section is split into multiple semantic chunks. The description
   tells the respondent what THIS specific page covers (e.g. "You've
   indicated you have a DPO. The following questions ask about..."),
   replacing the older "Part N of M" indicator which was uninformative. */
.fp-subsection-head .chunk-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 16px;
  padding: 12px 16px;
  background: var(--paper-warm);
  border-left: 2px solid var(--accent);
  max-width: 720px;
}

/* When the section head is also shown (first sub-section of section),
   the sub-section head is muted slightly so the section title leads */
.fp-section-head + .fp-subsection-head h2 {
  font-size: 20px;
  color: var(--ink-soft);
  font-weight: 600;
}

/* ============================================================
   QUESTION ROW — the unit of the form
   ============================================================ */
.q {
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}
.q:first-of-type { padding-top: 0; }
.q:last-of-type { border-bottom: none; }

.q-ref {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-bottom: 10px;
  display: block;
}

.q-text {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 16px;
}
.q-text .required-marker {
  color: var(--accent);
  font-weight: 600;
  margin-left: 2px;
}

/* Help text — shown inline beneath the question, always visible.
   Sits in a calm warm-paper block with an accent left-rule so it
   reads as supplementary guidance rather than instruction. */
/* ============================================================
   HELP DISCLOSURE — collapsed "+ What this means" expander
   The help text is collapsed by default to reduce perceived
   density; respondents who want clarification can expand it.
   ============================================================ */
.q-help {
  display: block;
  margin-top: 6px;
  margin-bottom: 10px;
  font-size: 13.5px;
  line-height: 1.55;
}
.q-help-summary {
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0;
  display: inline-block;
  user-select: none;
  padding: 2px 0;
  transition: color 120ms ease;
}
.q-help-summary::-webkit-details-marker { display: none; }
.q-help-summary:hover { color: var(--accent-deep); }
.q-help[open] > .q-help-summary { color: var(--ink); }
.q-help[open] > .q-help-summary::before { content: '−'; }
.q-help > .q-help-summary::before {
  content: '+';
  display: inline-block;
  width: 14px;
  font-weight: 600;
  color: inherit;
}
.q-help-body {
  margin-top: 8px;
  padding: 12px 16px;
  border-left: 2px solid var(--accent);
  background: var(--paper-warm);
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 64ch;
}

/* ============================================================
   OPTION GROUP — Yes / No / Unsure
   Calmer than typical radio chrome — more like a button group
   ============================================================ */
.opt-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.opt {
  position: relative;
  display: inline-block;
}

.opt input[type="radio"],
.opt input[type="checkbox"] {
  /* Visually hidden but focusable */
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.opt-label {
  display: inline-block;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper-cool);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  line-height: 1.3;
}
.opt-label:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.opt input:checked + .opt-label {
  background: var(--accent);
  color: var(--paper-cool);
  border-color: var(--accent);
}

.opt input:focus-visible + .opt-label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* For long option lists (e.g. M1a 8 options, M4 14 options, M6 9 options)
   present as a vertical list instead of horizontal pills */
.opt-group.vertical {
  flex-direction: column;
  gap: 4px;
}
.opt-group.vertical .opt { width: 100%; }
.opt-group.vertical .opt-label {
  display: block;
  text-align: left;
  padding: 12px 18px;
}

/* ============================================================
   TEXT INPUTS — for text/email fields and follow-up textareas
   ============================================================ */
.q-input {
  width: 100%;
  max-width: 520px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper-cool);
  border: 1px solid var(--rule);
  outline: none;
  transition: border-color 0.15s ease;
}
.q-input:hover { border-color: var(--muted); }
.q-input:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

textarea.q-input {
  min-height: 120px;
  resize: vertical;
  max-width: 720px;
}

/* ============================================================
   FOLLOW-UP — appears below parent question when triggered
   ============================================================ */
.q-followup {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--rule);
  display: none;
}
.q-followup.visible { display: block; }

.q-followup-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.5;
}
.q-followup-label .required-marker {
  color: var(--accent);
  font-weight: 600;
  margin-left: 2px;
}

.q-followup-help {
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 10px;
  max-width: 620px;
}

/* ============================================================
   CONSENTS — checkbox + label, vertical layout
   ============================================================ */
.consent-row {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.consent-row:last-of-type { border-bottom: none; }

.consent-row label {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  cursor: pointer;
  align-items: start;
}

.consent-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--rule);
  background: var(--paper-cool);
  cursor: pointer;
  margin-top: 2px;
  position: relative;
  transition: border-color 0.15s ease;
}
.consent-row input[type="checkbox"]:hover { border-color: var(--accent); }
.consent-row input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.consent-row input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper-cool);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.consent-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.consent-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}

.consent-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 8px;
  margin-left: 8px;
  vertical-align: middle;
}

.consent-row a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}
.consent-row a:hover {
  color: var(--accent-deep);
  border-bottom-color: var(--accent-deep);
}

/* Optional intro paragraph above a consent group (e.g. RT.1-3 lead-in) */
.consent-intro {
  background: var(--paper-warm);
  border-left: 3px solid var(--accent);
  padding: 16px 22px;
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.consent-intro p { font-size: inherit; line-height: inherit; color: inherit; margin-bottom: 8px; }
.consent-intro p:last-child { margin-bottom: 0; }

/* Variant: referral acknowledgement banner — sits below the RT.1/2/3
   questions on the Adjacent areas page, only when at least one RT is
   answered "Yes, please introduce me". Nudged with extra top margin
   to separate from the questions above. */
.consent-intro-acknowledgement {
  margin-top: 28px;
  margin-bottom: 0;
}

/* ============================================================
   REVIEW PAGE — every answered question with edit links
   ============================================================ */
.review-section {
  margin-bottom: 40px;
}

.review-section-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--accent);
}

.review-section-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 18px;
  margin-top: -8px;
}

.review-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: start;
}
.review-row:last-child { border-bottom: none; }

.review-q {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.review-q-ref {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-right: 6px;
}
.review-a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.review-a-followup {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: 6px;
  padding-left: 12px;
  border-left: 2px solid var(--rule);
  line-height: 1.6;
  white-space: pre-wrap;
}

.review-edit {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  background: none;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  white-space: nowrap;
  align-self: start;
  margin-top: 2px;
}
.review-edit:hover { color: var(--accent-deep); text-decoration: underline; }

/* ============================================================
   PAGE NAV — previous / next / submit at bottom of each page
   ============================================================ */
.page-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  gap: 16px;
  flex-wrap: wrap;
}

.page-nav .left,
.page-nav .right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-nav .btn-prev {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  background: none;
  border: none;
  padding: 14px 18px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.page-nav .btn-prev:hover { color: var(--ink); }
.page-nav .btn-prev:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 600px) {
  .page-nav { justify-content: stretch; }
  .page-nav .left, .page-nav .right { flex: 1; }
  .page-nav .right { justify-content: flex-end; }
}

/* ============================================================
   ERRORS — page-level error summary
   ============================================================ */
.form-errors {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: 18px 22px;
  margin-bottom: 28px;
  display: none;
}
.form-errors.visible { display: block; }

.form-errors h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

.form-errors ul {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.7;
}
.form-errors ul li { margin-bottom: 4px; }

.q.q-error .q-text { color: var(--accent-deep); }
.q.q-error::before {
  content: "";
  position: relative;
  display: block;
  width: 4px;
  background: var(--accent);
  position: absolute;
  margin-left: -16px;
  height: 100%;
}

/* ============================================================
   START SCREEN — pre-metadata greeting
   ============================================================ */
.start-screen {
  max-width: 720px;
}

.start-screen h1 {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 28px;
}

.start-screen .standfirst {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 620px;
  margin-bottom: 32px;
}

.start-screen .meta-list {
  margin: 36px 0 50px;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.start-screen .meta-item .label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-bottom: 6px;
  display: block;
}

.start-screen .meta-item .value {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 700px) {
  .start-screen .meta-list {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ============================================================
   CONFIRMATION PAGE
   ============================================================ */
.confirmation {
  max-width: 640px;
  text-align: left;
}

.confirmation .eyebrow {
  display: block;
  margin-bottom: 18px;
}

.confirmation h1 {
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.confirmation p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 18px;
}

.confirmation .next-steps {
  margin-top: 36px;
  padding: 24px 28px;
  background: var(--paper-warm);
  border-left: 3px solid var(--accent);
}

.confirmation .next-steps h3 {
  font-size: 14px;
  margin-bottom: 12px;
}

.confirmation .next-steps p {
  font-size: 14px;
  margin-bottom: 0;
}

/* ============================================================
   SESSION-EXPIRED MODAL
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 20, 24, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
}
.modal-backdrop.visible { display: flex; }

.modal {
  background: var(--paper-cool);
  max-width: 500px;
  width: 100%;
  padding: 36px;
  border: 1px solid var(--rule);
  border-top: 4px solid var(--accent);
}

.modal h2 {
  font-size: 24px;
  line-height: 1.2;
  margin-bottom: 16px;
}

.modal p {
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 12px;
}

.modal-actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================================
   FOOTER MARK — VAR/FORM/02 + compact V&Co.
   Per VAR/BR/15.7 §17.8: V (ink) + & (Heritage Navy) + Co (ink),
   document reference in Heritage Navy Playfair italic
   ============================================================ */
.form-doc-footer {
  background: var(--paper-warm);
  padding: 28px 0;
  border-top: 1px solid var(--rule);
}

.form-doc-footer-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.form-doc-footer .vco {
  font-size: 14px;
}

.form-doc-footer .doc-ref {
  /* Inherits Playfair italic from varnham.css; takes register accent
     from --ampersand-color which Register B sets to Heritage Navy */
  font-size: 13px;
}

@media (max-width: 600px) {
  .form-doc-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   SUB-SECTION DIVIDER — visual breath between sub-sections on
   the same page (not used in current page model — sub-sections
   are paginated — but reserved for future)
   ============================================================ */
.subsection-divider {
  margin: 50px 0;
  height: 1px;
  background: var(--rule);
}

/* ============================================================
   FORM NAVIGATOR — floating right-margin progress list

   Sits fixed-position to the right of the form-container, follows
   scroll. Shows all 11 sections always; expands sub-sections of the
   current section. Hidden on viewports ≤ 1100px (mobile and tablet
   use prev/next only — there's no margin space).

   Visual states:
   - Current page: 3px Heritage Navy bar to the left of the entry
   - Completed page: ✓ Heritage Navy glyph, clickable
   - Visited but incomplete (rare): muted-stone text, clickable
   - Locked page: muted-stone text, not clickable, cursor: default
   ============================================================ */
.form-navigator {
  display: none;
}

@media (min-width: 1100px) {
  .form-navigator {
    display: block;
    position: fixed;
    /* Position: right edge of form-container is at viewport_width/2 + 380
       (form-container max 760px centred). Place navigator 60px to the right
       of that edge so it doesn't crowd the prose. */
    top: 130px;
    left: calc(50% + 380px + 60px);
    width: 240px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 50;
    /* Calm scroll with a thin scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
  }
}

/* Hide on narrower viewports where there's no margin room */
@media (max-width: 1399px) {
  .form-navigator {
    /* If viewport is between 1100 and 1400, the navigator might still
       fit but be squeezed; for safety we use the 1100 breakpoint above
       and accept that the navigator might overlap content slightly on
       1100–1399. Better to hide if absolutely necessary. */
  }
}

@media (max-width: 1100px) {
  .form-navigator { display: none !important; }
}

.form-navigator-inner {
  background: var(--paper-cool);
  border-left: 1px solid var(--rule);
  padding: 0 0 0 20px;
}

.fnav-eyebrow {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--muted);
  margin-bottom: 18px;
  display: block;
}

.fnav-entry {
  position: relative;
  display: block;
  padding: 8px 0 8px 14px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition: color 0.15s ease;
}

.fnav-entry:hover {
  color: var(--accent);
}

/* Section-level entry (top-level) */
.fnav-entry.fnav-section {
  font-weight: 500;
  font-size: 13px;
}

/* Sub-section entry (nested under expanded section) */
.fnav-entry.fnav-subsection {
  padding-left: 28px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

/* Bookend entries (About you, Final, Review) */
.fnav-entry.fnav-bookend {
  font-weight: 500;
  font-size: 12.5px;
}

/* Current page state — 3px Heritage Navy bar to the left */
.fnav-entry.fnav-current {
  color: var(--accent);
  font-weight: 600;
}
.fnav-entry.fnav-current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--accent);
}

/* Completed state — ✓ glyph to the left, Heritage Navy text */
.fnav-entry.fnav-complete {
  color: var(--ink);
}
.fnav-entry.fnav-complete::before {
  content: "✓";
  position: absolute;
  left: -2px;
  top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}

/* Locked state — muted text, not clickable */
.fnav-entry.fnav-locked {
  color: var(--stone);
  cursor: default;
  pointer-events: none;
}
.fnav-entry.fnav-locked:hover { color: var(--stone); }

/* Visited but incomplete — muted, still clickable */
.fnav-entry.fnav-visited-incomplete {
  color: var(--muted);
}

/* Section divider between groups */
.fnav-divider {
  height: 1px;
  background: var(--rule);
  margin: 12px 0;
}

/* Hide navigator on start and confirmation pages */
body.no-navigator .form-navigator {
  display: none !important;
}

/* ============================================================
   COMMENT FIELD — universal optional "Add context" textarea
   on every main-section question without an existing follow-up.

   States:
   - Collapsed (default): button "Add context (optional) +"
   - Expanded: textarea visible; button hidden
   - Folds back to button on blur if textarea is empty
   ============================================================ */
.q-comment {
  margin-top: 14px;
}

.q-comment-toggle {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  background: none;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  display: inline-block;
  transition: color 0.15s ease;
}
.q-comment-toggle:hover { color: var(--accent-deep); }

.q-comment-input {
  display: none;
  width: 100%;
  max-width: 720px;
  min-height: 80px;
  resize: vertical;
}

/* Expanded state: hide toggle, show textarea */
.q-comment.expanded .q-comment-toggle { display: none; }
.q-comment.expanded .q-comment-input { display: block; }

/* Review-page comment styling — italic indented below the answer,
   matching follow-up treatment, with a small "Context:" label */
.review-a-comment {
  font-style: italic;
}
.review-a-comment-label {
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  color: var(--muted);
  margin-right: 6px;
}

/* ============================================================
   UTILITY — sr-only for screen-reader-only content
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   PREVIEW MODE BANNER

   Shown when ?preview=1 is in the URL. Allows the form to be
   walked through on the production hostname without minting a
   real token. Must be removed (or the escape hatch disabled in
   form-app.js) before launch.

   Visual treatment uses the muted/stone palette plus a subtle
   accent-soft tint so it reads as "this is a non-production
   state" without being alarmist. Shown as a non-sticky band
   immediately under the nav and above the progress bar.
   ============================================================ */
.preview-banner {
  display: none;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent);
  padding: 10px 0;
}
.preview-banner.visible { display: block; }

.preview-banner-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.preview-banner-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--accent);
  white-space: nowrap;
}

.preview-banner-detail {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.5;
}

@media (max-width: 600px) {
  .preview-banner-inner { gap: 8px; }
  .preview-banner-detail { font-size: 11px; }
}

/* ============================================================
   MODAL ACTIVE — hide form chrome behind the modal

   When the session-expired modal is shown, the progress bar and
   document footer would otherwise show through the modal backdrop
   as orphaned UI elements. Hide them while the modal is up.
   ============================================================ */
body.modal-active .progress,
body.modal-active .form-page,
body.modal-active .form-doc-footer,
body.modal-active .preview-banner {
  visibility: hidden;
}
/* ============================================================
   STAGE 9 — Save-link button + toast (append to form.css)
   ============================================================ */

.btn-save-link {
  background: transparent;
  color: #4a5568;
  border: 1px solid #cbd5e0;
  padding: 8px 14px;
  font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.btn-save-link:hover:not(:disabled) {
  background: #f7fafc;
  border-color: #4a5568;
  color: #1a202c;
}
.btn-save-link:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.resume-link-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #0d2233;
  color: #f8f4ec;
  padding: 12px 24px;
  font-size: 15px;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  max-width: 90%;
  text-align: center;
  animation: toast-slide-in 0.25s ease-out;
}
.resume-link-toast-error {
  background: #742a2a;
}
@keyframes toast-slide-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}


/* ============================================================
   ALIGNED GRID — for main-section Y/N/Unsure questions
   Each sub-section's questions are laid out in a 4-column grid:
   question text | Yes | No | Unsure. Cells from question N+1
   sit directly below cells from question N, so the "Yes" column
   is a true column — no horizontal gap between adjacent
   questions' option cells.
   ============================================================ */
.q-grid {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--rule);
  background: var(--paper-cool, #FAF8F4);
  margin-bottom: 24px;
}
@media (min-width: 720px) {
  .q-grid {
    grid-template-columns: 1fr 96px 96px 96px;
  }
}

/* Column header strip — desktop only */
.q-grid-header {
  display: none;
}
@media (min-width: 720px) {
  .q-grid-header {
    display: contents;
  }
  .q-grid-header > .q-grid-header-q {
    background: var(--paper-warm);
    border-bottom: 1px solid var(--rule);
    padding: 10px 22px;
  }
  .q-grid-header > .q-grid-header-opt {
    background: var(--paper-warm);
    border-bottom: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
    padding: 10px 6px;
    text-align: center;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* Question cell (column 1) */
.q-grid-cell-question {
  background: #fff;
  padding: 16px 22px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}
.q-grid-cell-question.even { background: #FBFAF7; }
.q-grid-cell-question.answered { background: #FAF8F4; }
.q-grid-cell-question.even.answered { background: #F6F4EE; }

/* When the question has an extra-option row beneath it (Q2.10, Q11.27),
   the question cell spans 2 rows of the grid (the standard option row +
   the extra-option row). Its own bottom border becomes the divider that
   separates the row group from the next question, naturally aligned
   with the extra-option row's bottom border in columns 2-4. */
.q-grid-cell-question.has-extra-option {
  grid-row: span 2;
}

.q-grid-ref {
  flex-shrink: 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  padding-top: 3px;
}
.q-grid-body { flex: 1; min-width: 0; }
.q-grid-text {
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink);
}
.q-grid-text .required-marker { color: var(--accent); }

/* Option cells (columns 2-4) — each is a clickable button.
   The real radio input is hidden visually but kept for
   accessibility (keyboard nav, screen readers). */
.q-grid-cell-option {
  background: #fff;
  border-bottom: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  position: relative;
  cursor: pointer;
  transition: background 120ms ease;
  min-height: 56px;
}
.q-grid-cell-option.even { background: #FBFAF7; }
.q-grid-cell-option.answered { background: #FAF8F4; }
.q-grid-cell-option.even.answered { background: #F6F4EE; }

.q-grid-cell-option:hover:not(.selected) {
  background: var(--paper-warm);
  z-index: 1;
}

.q-grid-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.q-grid-label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 8px 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
  text-align: center;
  user-select: none;
  transition: color 120ms ease;
}

/* Selected state — three colours, one per answer type.
   Yes  → oxblood (--oxblood from varnham.css, never overridden)
   No   → navy    (--accent which on Register B pages is heritage navy)
   Unsure → muted (--muted, the brand's secondary-text grey)

   Using brand variables rather than hardcoded hex means the colours
   follow the brand if it evolves. --oxblood is the one variable that
   is *always* oxblood regardless of register, per VAR/BR/15.6 §6.
   --accent on this page resolves to navy because register-b.css is
   loaded after varnham.css and overrides --accent.

   The doubled `.q-grid-cell-option.q-grid-cell-option` selector bumps
   specificity above the .even.answered zebra rules. */
.q-grid-cell-option.q-grid-cell-option.selected {
  background: var(--oxblood);
  z-index: 1;
}
.q-grid-cell-option.q-grid-cell-option.selected .q-grid-label {
  color: var(--paper-cool);
}
.q-grid-cell-option.q-grid-cell-option.opt-no.selected {
  background: var(--accent);  /* navy on Register B */
}
.q-grid-cell-option.q-grid-cell-option.opt-unsure.selected {
  background: var(--muted);
}

/* Focus ring on the hidden radio shows through the label */
.q-grid-radio:focus-visible + .q-grid-label {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

/* Mobile: stack — question on top, then 3 buttons in a row */
@media (max-width: 719px) {
  .q-grid-cell-question {
    grid-column: 1 / -1;
    padding-bottom: 8px;
    border-bottom: none;
  }
  .q-grid-cell-option {
    border-top: 1px solid var(--rule);
    min-height: 48px;
  }
  .q-grid-cell-option + .q-grid-cell-option {
    border-left: 1px solid var(--rule);
  }
  /* Make options share a row of three on mobile */
  .q-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Last row of the grid — no bottom border */
.q-grid > *:last-child {
  border-bottom: none;
}

/* ============================================================
   EXTRA-OPTION ROW — for 4-option questions (Q2.10, Q11.27)
   A 4th option that doesn't fit the Yes/No/Unsure pattern,
   rendered under the option columns (cols 2-4 only), not
   full-width. Visually it belongs to its parent question's
   answer area, not to the page-wide layout.

   Selecting it acts exactly like selecting Yes/No/Unsure
   (mutually exclusive, handled by shared radio name + the
   click handler's class-clearing logic in form-app.js).
   ============================================================ */
.q-grid-cell-extra-option {
  grid-column: 2 / -1;
  background: #fff;
  border-bottom: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  padding: 8px 14px;
  cursor: pointer;
  position: relative;
  transition: background 120ms ease;
  display: flex;
  align-items: center;
}
.q-grid-cell-extra-option.even { background: #FBFAF7; }
.q-grid-cell-extra-option.answered { background: #FAF8F4; }
.q-grid-cell-extra-option.even.answered { background: #F6F4EE; }

.q-grid-cell-extra-option:hover:not(.selected) {
  background: var(--paper-warm);
}

.q-grid-extra-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.4;
  user-select: none;
  width: 100%;
}
.q-grid-extra-or {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  flex-shrink: 0;
}

/* Selected state — oxblood, same as a "Yes" selection */
.q-grid-cell-extra-option.q-grid-cell-extra-option.selected {
  background: var(--oxblood);
}
.q-grid-cell-extra-option.q-grid-cell-extra-option.selected .q-grid-extra-label,
.q-grid-cell-extra-option.q-grid-cell-extra-option.selected .q-grid-extra-or {
  color: var(--paper-cool);
}

/* Focus ring on the hidden radio shows through the label */
.q-grid-cell-extra-option .q-grid-radio:focus-visible ~ .q-grid-extra-label {
  outline: 2px solid var(--oxblood);
  outline-offset: -3px;
}

/* Focus ring on the hidden radio shows through the label */
.q-grid-cell-extra-option .q-grid-radio:focus-visible ~ .q-grid-extra-label {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

/* Inside the question cell, follow-up and comment styling.
   They sit under the question text and help disclosure, indented
   to align with the question body (i.e. past the Q-ref marker). */
.q-grid-cell-question .q-followup,
.q-grid-cell-question .q-comment {
  margin-top: 12px;
}
.q-grid-cell-question .q-followup-label {
  font-size: 13px;
}
/* "+" prefix on the comment toggle — applies wherever the toggle appears
   (in a grid question cell, in a standalone categorical card, etc.) */
.q-comment-toggle::before {
  content: '+ ';
  display: inline-block;
  margin-right: 2px;
}

/* ============================================================
   MILESTONE LINE — fires at 25 / 50 / 75% of the journey
   Replaces the previous "good moment to take a break" pattern
   with concrete information about where the respondent is.
   ============================================================ */
.milestone {
  margin: 28px 0 8px;
  padding: 14px 18px;
  background: var(--paper-warm);
  border-left: 2px solid var(--accent);
  font-size: 14px;
  line-height: 1.55;
  max-width: 64ch;
}
.milestone-label {
  color: var(--ink);
  font-weight: 600;
}
.milestone-detail {
  color: var(--ink-soft);
}


/* ============================================================
   STANDALONE CATEGORICAL QUESTION
   For main-section questions whose options don't fit the Y/N/U
   pattern (Q5.26 NIS classification). Rendered as a distinct
   card below the main grid with stacked option buttons.
   ============================================================ */
.q-standalone-list {
  margin-top: 24px;
}
.q-standalone {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: #fff;
  padding: 18px 22px 20px;
  margin-bottom: 16px;
}
.q-standalone.answered {
  background: var(--paper-warm);
}

.q-standalone-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.q-standalone-ref {
  flex-shrink: 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  padding-top: 3px;
}
.q-standalone-body { flex: 1; min-width: 0; }
.q-standalone-text {
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink);
}
.q-standalone-text .required-marker { color: var(--accent); }

.q-standalone-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 50px;
}
.q-standalone-option {
  border: 1px solid var(--rule);
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background 120ms ease, border-color 120ms ease;
}
.q-standalone-option:hover:not(.selected) {
  background: var(--paper-warm);
  border-color: var(--muted);
}
.q-standalone-option-label {
  display: block;
  padding: 12px 16px;
  cursor: pointer;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.4;
  user-select: none;
}
.q-standalone-option.selected {
  background: var(--oxblood);
  border-color: var(--oxblood);
}
.q-standalone-option.selected .q-standalone-option-label {
  color: var(--paper-cool);
}
.q-standalone-option .q-grid-radio:focus-visible ~ .q-standalone-option-label {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.q-standalone .q-comment {
  margin-top: 14px;
  padding-left: 50px;
}

/* ============================================================
   FLAG FOR DISCUSSION
   Per-sub-section optional checkbox surfacing "I'd rather
   discuss this on the call than answer it here" — a legitimate
   escape valve against satisficing.
   ============================================================ */
.flag-for-discussion {
  margin: 24px 0 8px;
  padding: 12px 16px;
  background: #fff;
  border: 1px dashed var(--rule);
  transition: background 120ms ease, border-color 120ms ease;
}
.flag-for-discussion.flagged {
  background: var(--paper-warm);
  border-color: var(--accent);
  border-style: solid;
}
.flag-for-discussion-label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  user-select: none;
}
.flag-for-discussion-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--accent);
}
.flag-for-discussion-text {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.flag-for-discussion.flagged .flag-for-discussion-text {
  color: var(--ink);
  font-weight: 500;
}


/* ============================================================
   SAVE / RESUME VISIBILITY
   The form's save-as-you-go behaviour was previously framed as
   a "fallback" and easy to miss. We now surface it persistently:
     - A quiet auto-save reassurance line above the page nav,
       visible on every substantive page
     - A renamed save button ("Email me a link to come back
       later") that reads as a deliberate convenience, not a
       last-resort
     - A foregrounded explanation on the start page
   ============================================================ */
.autosave-note {
  margin: 24px 0 0;
  padding: 8px 0 10px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 64ch;
}
.autosave-tick {
  display: inline-block;
  font-weight: 600;
  color: var(--accent);
  margin-right: 4px;
}

/* When the page-nav lives inside the page-nav-wrap (substantive pages),
   drop the page-nav's own border-top and reduce the margin so we don't
   double-rule the area. The autosave-note above already provides a
   visual separator. */
.page-nav-wrap .page-nav {
  margin-top: 18px;
  padding-top: 0;
  border-top: none;
}

/* Start-page save-note styling — slightly stronger than body
   prose so it actually catches the eye. */
.save-note {
  margin: 24px 0 12px;
  padding: 16px 20px;
  background: var(--paper-warm);
  border-left: 3px solid var(--accent);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 64ch;
}
.save-note strong {
  color: var(--ink);
  font-weight: 600;
}
.save-note em {
  font-style: italic;
  color: var(--ink);
}

/* Flag-note styling — same family as save-note, sits immediately
   below it. Dashed left border (rather than solid) makes the two
   notes feel related but visually distinct. */
.flag-note {
  margin: 0 0 24px;
  padding: 16px 20px;
  background: var(--paper-warm);
  border-left: 3px dashed var(--accent);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 64ch;
}
.flag-note strong {
  color: var(--ink);
  font-weight: 600;
}
.flag-note em {
  font-style: italic;
  color: var(--ink);
}

/* Page-nav wrap now contains the autosave-note + the nav itself */
.page-nav-wrap {
  margin-top: 32px;
}
/* ============================================================
   PHASE 2 — Companies House typeahead on M1
   Added 2026-05-14, re-applied after baseline restore
   ============================================================ */

.q-typeahead {
  position: relative;
  width: 100%;
}

.q-typeahead-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  background: var(--paper-warm, #faf7f0);
  border: 1px solid var(--rule, #ccc);
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  max-height: 280px;
  overflow-y: auto;
}

.q-typeahead-list.open {
  display: block;
}

.q-typeahead-option {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--rule, #e8e4d8);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.q-typeahead-option:last-child {
  border-bottom: none;
}

.q-typeahead-option:hover,
.q-typeahead-option.active {
  background: var(--paper-cool, #efece4);
}

.q-typeahead-name {
  flex: 1;
  font-size: 0.95em;
  color: inherit;
}

.q-typeahead-number {
  font-size: 0.82em;
  color: var(--muted, #777);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.q-typeahead-freetext .q-typeahead-name {
  font-style: italic;
  color: var(--accent, #5c4a36);
}