/* CMS LITE — shared form-runtime styles (CORE, both hosts).
   The design layer for every CMS LITE form: step indicators (pills +
   sidebar), step transitions, custom controls (select / checkbox / radio /
   file), focus + validation states, and the ADR-005 page-effect classes.

   Hosts include this AFTER their app.css. Theme it by mapping the --qf-*
   tokens onto host palette vars (see the QT host for the pattern); every
   token has a neutral default so the runtime also stands alone. */

.qf {
  --qf-ink: #111827;
  --qf-text: #1f2937;
  --qf-muted: #6b7280;
  --qf-line: #c9cdd4;
  --qf-line-soft: #e5e7eb;
  --qf-surface: #ffffff;
  --qf-page: #ffffff;
  --qf-danger: #be123c;
  --qf-danger-soft: rgba(190, 18, 60, 0.09);
  --qf-focus: rgba(17, 24, 39, 0.13);
  --qf-radius: 10px;
  --qf-anim: 320ms;
  --qf-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --qf-scroll-offset: 96px;
}

/* ---- Step indicator: pills (default + the sidebar's mobile fallback) ---- */
.qf-steps { margin: 0 0 26px; }
.qf-steps__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.qf-steps__item {
  font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; font-weight: 600;
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--qf-line-soft);
  color: var(--qf-muted); background: var(--qf-surface);
  transition: color 0.25s var(--qf-ease), border-color 0.25s var(--qf-ease), background 0.25s var(--qf-ease);
}
.qf-steps__item--done { color: var(--qf-ink); border-color: var(--qf-line); }
.qf-steps__item--done::before { content: "✓ "; font-weight: 700; }
.qf-steps__item--current { color: var(--qf-page); background: var(--qf-ink); border-color: var(--qf-ink); }
.qf-steps__item--skip { display: none; }

/* ---- Step indicator: sidebar (the reference platform's vertical rail) ---- */
@media (min-width: 900px) {
  .qf:has(.qf-steps--sidebar) { display: flex; flex-wrap: wrap; gap: 0; align-items: flex-start; justify-content: center; }
  /* A zero basis keeps the form BESIDE the rail: an auto basis used the
     form's content width, overflowed the line and wrapped it underneath.
     The form fills the site column (no artificial cap). */
  .qf:has(.qf-steps--sidebar) > form { flex: 1 1 0; min-width: 0; }
  /* Alerts, noscript and outcome panels span the full row: they must
     never squeeze into the sidebar column on a server 422. */
  .qf:has(.qf-steps--sidebar) > .qf-error-summary,
  .qf:has(.qf-steps--sidebar) > .qf-noscript,
  .qf:has(.qf-steps--sidebar) > .qf-success,
  .qf:has(.qf-steps--sidebar) > .qf-resume { flex: 1 1 100%; }
  .qf-steps--sidebar {
    flex: 0 0 236px; margin: 4px 36px 0 0; padding: 0; border: 0; align-self: flex-start;
    /* The whole rail pins, including the "Step n of m" line: pinning only
       the list let the microcopy scroll away under the form; stretching
       the rail to the form's height left sticky no room to move. */
    position: sticky; top: 28px;
  }
  .qf-steps--sidebar .qf-steps__list {
    flex-direction: column; gap: 0; position: static;
  }
  .qf-steps--sidebar .qf-steps__item {
    display: flex; align-items: center; gap: 13px; border: 0; border-radius: 0;
    padding: 8px 0; font-size: 13.5px; font-weight: 500; text-transform: none;
    letter-spacing: 0; color: var(--qf-muted); background: none; position: relative;
  }
  .qf-steps--sidebar .qf-steps__item::before {
    content: attr(data-ordinal); flex: 0 0 auto; width: 30px; height: 30px;
    border: 1.5px solid var(--qf-line); border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
    background: var(--qf-page); color: var(--qf-muted); position: relative; z-index: 1;
    transition: background 0.3s var(--qf-ease), border-color 0.3s var(--qf-ease), color 0.3s var(--qf-ease), box-shadow 0.3s var(--qf-ease);
  }
  /* The connector: one continuous segment per item, tucked behind the
     circles. DONE items fill their segment — the progress line grows. */
  .qf-steps--sidebar .qf-steps__item:not(:last-child)::after {
    content: ""; position: absolute; left: 14px; top: calc(50% + 16px); bottom: -16px;
    width: 2px; border-radius: 2px; background: var(--qf-line-soft);
    transition: background 0.45s var(--qf-ease);
  }
  .qf-steps--sidebar .qf-steps__item--done { color: var(--qf-ink); }
  .qf-steps--sidebar .qf-steps__item--done::before {
    content: "✓"; border-color: var(--qf-ink); color: var(--qf-ink); background: var(--qf-page);
  }
  .qf-steps--sidebar .qf-steps__item--done:not(:last-child)::after { background: var(--qf-ink); }
  .qf-steps--sidebar .qf-steps__item--current { color: var(--qf-ink); font-weight: 600; }
  .qf-steps--sidebar .qf-steps__item--current::before {
    background: var(--qf-ink); border-color: var(--qf-ink); color: var(--qf-page);
    box-shadow: 0 0 0 4px var(--qf-focus);
  }
}
@media (max-width: 899.98px) {
  .qf-steps--sidebar { margin: 0 0 22px; }
}
/* Mobile: pills become ONE horizontal scroll row (no stacked tower
   pushing the form down). The runtime centres the current pill. */
@media (max-width: 640px) {
  .qf-steps__list {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; scroll-snap-type: x proximity; padding-bottom: 2px;
  }
  .qf-steps__list::-webkit-scrollbar { display: none; }
  .qf-steps__item { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
}

/* ---- Progress microcopy ("Step 2 of 5") ---- */
.qf-steps__progress {
  margin: 14px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--qf-muted); font-variant-numeric: tabular-nums;
}
.qf-steps--sidebar .qf-steps__progress { margin: 18px 0 0 2px; }

/* ---- Step transitions (driven by form-runtime.js; reduced-motion safe) ---- */
.qf form { position: relative; }
.qf-step {
  transition: opacity var(--qf-anim) var(--qf-ease), transform var(--qf-anim) var(--qf-ease);
  scroll-margin-top: var(--qf-scroll-offset);
}
.qf-step[data-step-entering] { opacity: 0; transform: translateX(18px); }
.qf-step[data-step-exiting] {
  opacity: 0; transform: translateX(-18px); position: absolute;
  top: 0; left: 0; width: 100%; pointer-events: none;
}
.qf[data-dir="back"] .qf-step[data-step-entering] { transform: translateX(-18px); }
.qf[data-dir="back"] .qf-step[data-step-exiting] { transform: translateX(18px); }

/* ---- Fields: rhythm + labels ---- */
.qf-field { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.qf-label { font-weight: 600; font-size: 14.5px; color: var(--qf-text); }
.qf-req { color: var(--qf-danger); margin-left: 2px; font-weight: 700; }

/* ---- Text-like inputs ---- */
.qf-field input[type="text"], .qf-field input[type="email"], .qf-field input[type="tel"],
.qf-field input[type="number"], .qf-field input[type="date"], .qf-field input[type="password"],
.qf-field textarea {
  padding: 12px 14px; border: 1px solid var(--qf-line); border-radius: var(--qf-radius);
  font: 400 15px/1.45 inherit; background: var(--qf-surface); color: var(--qf-text);
  width: 100%; transition: border-color 0.18s var(--qf-ease), box-shadow 0.18s var(--qf-ease);
}
.qf-field textarea { resize: vertical; min-height: 5.6em; max-height: 24em; }
.qf-field input:hover, .qf-field select:hover, .qf-field textarea:hover { border-color: var(--qf-ink); }
.qf-field input:focus, .qf-field select:focus, .qf-field textarea:focus {
  outline: none; border-color: var(--qf-ink); box-shadow: 0 0 0 3.5px var(--qf-focus);
}
.qf-field input:focus-visible, .qf-field select:focus-visible, .qf-field textarea:focus-visible {
  outline: 2px solid var(--qf-ink); outline-offset: 1px; box-shadow: none;
}

/* ---- Select: custom chevron, consistent with the input system ---- */
.qf-field select {
  appearance: none; -webkit-appearance: none;
  padding: 12px 42px 12px 14px; border: 1px solid var(--qf-line);
  border-radius: var(--qf-radius); font: 400 15px/1.45 inherit;
  background: var(--qf-surface); color: var(--qf-text); width: 100%; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
  transition: border-color 0.18s var(--qf-ease), box-shadow 0.18s var(--qf-ease);
}

/* ---- Checkbox + radio: custom, brand-ink controls ---- */
.qf-field input[type="checkbox"], .qf-field input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 19px; height: 19px; margin: 0; flex: 0 0 auto;
  border: 1.5px solid var(--qf-line); background: var(--qf-surface);
  display: inline-grid; place-content: center; cursor: pointer;
  transition: background 0.16s var(--qf-ease), border-color 0.16s var(--qf-ease), box-shadow 0.16s var(--qf-ease);
}
.qf-field input[type="checkbox"] { border-radius: 5px; }
.qf-field input[type="radio"] { border-radius: 999px; }
.qf-field input[type="checkbox"]::before {
  content: ""; width: 4.5px; height: 9px;
  border: solid var(--qf-page); border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); transition: transform 0.16s var(--qf-ease);
}
.qf-field input[type="radio"]::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--qf-page);
  transform: scale(0); transition: transform 0.16s var(--qf-ease);
}
.qf-field input[type="checkbox"]:hover, .qf-field input[type="radio"]:hover { border-color: var(--qf-ink); }
.qf-field input[type="checkbox"]:checked, .qf-field input[type="radio"]:checked {
  background: var(--qf-ink); border-color: var(--qf-ink);
}
.qf-field input[type="checkbox"]:checked::before { transform: rotate(45deg) scale(1); }
.qf-field input[type="radio"]:checked::before { transform: scale(1); }
.qf-field input[type="checkbox"]:focus-visible, .qf-field input[type="radio"]:focus-visible {
  outline: 2px solid var(--qf-ink); outline-offset: 2px; box-shadow: none;
}

/* ---- Choices + consent rows ---- */
.qf-choices { display: flex; flex-direction: column; gap: 11px; }
.qf-choices label {
  display: flex; gap: 11px; align-items: center; font-size: 14.5px;
  color: var(--qf-text); cursor: pointer; padding: 2px 0;
}
.qf-consent {
  display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px;
  line-height: 1.55; color: var(--qf-text); cursor: pointer;
}
.qf-consent input { margin-top: 3px; }

/* ---- File input ---- */
.qf-field input[type="file"] {
  font: 400 13.5px/1.4 inherit; color: var(--qf-muted); width: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.qf-field input[type="file"]::file-selector-button {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--qf-line); border-radius: 8px; padding: 9px 16px;
  margin: 0 14px 6px 0; background: var(--qf-surface); color: var(--qf-text);
  font: 600 13px/1 inherit; letter-spacing: 0.02em; cursor: pointer;
  transition: border-color 0.16s var(--qf-ease), background 0.16s var(--qf-ease);
}
.qf-field input[type="file"]::file-selector-button:hover { border-color: var(--qf-ink); }
/* Keep a reliable outer ring on the input itself: the button pseudo
   element is not consistently focusable across browsers. */
.qf-field input[type="file"]:focus-visible {
  outline: 2px solid var(--qf-ink); outline-offset: 2px;
}
.qf-field input[type="file"]::file-selector-button:focus-visible {
  outline: 2px solid var(--qf-ink); outline-offset: 2px;
}

/* ---- Colour input ---- */
.qf-field input[type="color"] {
  width: 52px; height: 42px; padding: 3px; border: 1px solid var(--qf-line);
  border-radius: var(--qf-radius); background: var(--qf-surface); cursor: pointer;
}
.qf-field input[type="color"]:hover { border-color: var(--qf-ink); }
.qf-field input[type="color"]:focus-visible { outline: 2px solid var(--qf-ink); outline-offset: 2px; }

/* ---- Validation states ---- */
.qf-field input[aria-invalid="true"], .qf-field select[aria-invalid="true"],
.qf-field textarea[aria-invalid="true"] {
  border-color: var(--qf-danger); box-shadow: 0 0 0 3.5px var(--qf-danger-soft);
}
.qf-field input[type="checkbox"][aria-invalid="true"], .qf-field input[type="radio"][aria-invalid="true"] {
  border-color: var(--qf-danger); box-shadow: 0 0 0 3px var(--qf-danger-soft);
}
.qf-error { font-size: 13px; font-weight: 600; color: var(--qf-danger); }
.qf-error[hidden] { display: none; }

/* ---- Help + structural fields ---- */
.qf-help { font-size: 12.5px; color: var(--qf-muted); line-height: 1.5; }
.qf-heading { margin: 26px 0 10px; font-size: 17px; line-height: 1.35; color: var(--qf-text); }
.qf-textblock { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--qf-muted); }
.qf-spacer { width: 100%; }

/* ---- Placeholder emphasis (the guidance pattern) ---- */
.qf-field input::placeholder, .qf-field textarea::placeholder {
  opacity: 0.55; font-style: italic; color: var(--qf-muted);
}



/* ---- Form field layout (explicit rows/cells; the 12-track grid) ---- */
.qf-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 var(--qf-gutter, 18px);
  margin-bottom: 4px;
}
.qf-cell { grid-column: span 12; min-width: 0; }
.qf-cell--3 { grid-column: span 3; }
.qf-cell--4 { grid-column: span 4; }
.qf-cell--6 { grid-column: span 6; }
.qf-cell--8 { grid-column: span 8; }
.qf-cell--9 { grid-column: span 9; }
.qf-cell--12 { grid-column: span 12; }
.qf-cell .qf-group { margin: 0; border: 1px solid var(--qf-line-soft); border-radius: var(--qf-radius); padding: 16px; }
.qf-cell .qf-group legend { font: 600 12px/1.3 inherit; letter-spacing: 0.04em; text-transform: uppercase; color: var(--qf-muted); padding: 0 6px; }
/* THE COLLAPSE (the CTO-corrected rule): below 900px the grid becomes
   ONE actual track and every cell resets its span — the pairs stack,
   exactly as the reference measured (800px and 390px both stack). */
@media (max-width: 899.98px) {
  .qf-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .qf-cell, .qf-cell--3, .qf-cell--4, .qf-cell--6, .qf-cell--8, .qf-cell--9, .qf-cell--12 { grid-column: 1 / -1; }
}

/* ---- Save and continue (local device storage) ---- */
.qf-restore {
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  background: var(--qf-surface); border: 1px solid var(--qf-line);
  border-radius: var(--qf-radius); padding: 16px 18px; margin: 0 0 22px;
}
.qf-restore p { margin: 0; font-size: 14.5px; color: var(--qf-text); }
.qf-restore__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.qf-restore__actions button {
  appearance: none; border: 1px solid var(--qf-line); border-radius: 999px;
  padding: 9px 18px; font-weight: 600; font-size: 13.5px; line-height: 1.2;
  font-family: inherit; cursor: pointer;
  background: var(--qf-surface); color: var(--qf-text);
  transition: border-color 0.16s var(--qf-ease), background 0.16s var(--qf-ease);
}
.qf-restore__actions button:hover { border-color: var(--qf-ink); }
.qf-restore__actions .qf-restore__go { background: var(--qf-ink); border-color: var(--qf-ink); color: var(--qf-page); }
.qf-save-note { font-size: 12.5px; color: var(--qf-muted); margin: 4px 0 0; }

/* ---- ADR-005 page-effect classes (the allowlist) ---- */
.qf-effect-emphasis { outline: 2px solid rgba(124, 92, 255, 0.45); outline-offset: 5px; transition: outline-color 0.25s var(--qf-ease); }
.qf-effect-muted { opacity: 0.55; transition: opacity 0.25s var(--qf-ease); }
.qf-effect-highlight { background: linear-gradient(transparent 55%, rgba(255, 213, 79, 0.35) 55%); transition: background 0.25s var(--qf-ease); }

/* ---- Reduced motion: everything settles instantly ---- */
@media (prefers-reduced-motion: reduce) {
  .qf-step { transition: none; }
  .qf-step[data-step-entering], .qf-step[data-step-exiting] { opacity: 0; }
  .qf-steps__item, .qf-steps--sidebar .qf-steps__item::before,
  .qf-steps--sidebar .qf-steps__item::after,
  .qf-field input, .qf-field select, .qf-field textarea,
  .qf-field input[type="checkbox"], .qf-field input[type="radio"],
  .qf-effect-emphasis, .qf-effect-muted, .qf-effect-highlight { transition: none; }
}

/* ==========================================================================
   Form modal (Phase B): the form lives on the page; JS upgrades it to a
   native dialog. The launcher keeps the host button classes; the link
   style and the dialog surface are core. No direct form URL exists.
   ========================================================================== */
.qf-modal-block { margin: 0; }
.qf-modal-launch--link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--qf-ink);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.qf-modal-launch--link:focus-visible {
  outline: 3px solid var(--qf-focus);
  outline-offset: 2px;
}
.qf-modal-launch--fallback[hidden],
.qf-modal-launch[hidden] { display: none; }
.qf-modal-unavailable {
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid var(--qf-line);
  border-radius: var(--qf-radius);
  color: var(--qf-muted);
}
.qf-modal-region { margin-top: var(--qf-gutter); }
.qf-modal-intro { margin: 0 0 12px; color: var(--qf-muted); }
.qf-modal-dialog {
  width: min(720px, 94vw);
  max-height: 90vh;
  overflow: auto;
  padding: 24px;
  border: 1px solid var(--qf-line);
  border-radius: var(--qf-radius);
  background: var(--qf-page);
  color: var(--qf-ink);
}
.qf-modal-dialog::backdrop { background: rgba(15, 18, 26, 0.55); }
.qf-modal-close {
  position: sticky;
  top: 0;
  float: right;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.qf-modal-close:focus-visible {
  outline: 3px solid var(--qf-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .qf-modal-dialog[open] { animation: qf-modal-in 160ms var(--qf-ease); }
  @keyframes qf-modal-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}
@media (max-width: 560px) {
  .qf-modal-dialog { width: 96vw; padding: 16px; }
}