/**
 * AICAER Form Engine
 * Form component library for intake forms
 *
 * Dependencies: style.css (must be loaded first)
 * Aesthetic: "Paper on desk" — clinical document feel
 */

/* ==========================================================================
   FORM ENGINE VARIABLES
   ========================================================================== */

:root {
  --validation-bar-width: 3px;  /* Width of validation indicator bar on form fields */
}

/* ==========================================================================
   1. FORM DOCUMENT CONTAINER ("The Paper")

   This is the white "paper" sitting on the grey "desk" (body).
   No shadows - single-pixel border only per design guidelines.
   ========================================================================== */

.intake-document {
  background-color: var(--color-surface);  /* Pure white #ffffff */
  border: 1px solid var(--color-border-light);
  /* NO box-shadow - flat design per guidelines */
  max-width: 800px;
  margin: 52px auto 0;  /* No bottom margin - footer border-top provides separation */
  padding: var(--space-xl);  /* 32px internal padding */
}

/* ==========================================================================
   2. FORM HEADER BANNER
   ========================================================================== */

.form-header-banner {
  background-color: var(--color-primary);
  color: #ffffff;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-header-banner h1 {
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #ffffff;
  margin: 0;
}

.form-version {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  opacity: 0.9;
}

/* ==========================================================================
   3. SECTION STRUCTURE

   Base .section-header and .section-body are defined in style.css.
   This file only contains form-specific extensions.
   ========================================================================== */

/* ==========================================================================
   3b. PART HEADER BANNER (Main Page Header)

   The top-level "PART I. INTAKE" header - solid purple container.
   Shares max-width alignment with form cards (document width).
   ========================================================================== */

/* Part header bleeds to paper edges using negative margins */
.part-header {
  background-color: var(--color-primary);
  color: #ffffff;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Bleed to paper edges - counteract .intake-document padding */
  margin: calc(-1 * var(--space-xl));
  margin-bottom: var(--space-lg);
}

.part-header__title {
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}

.part-header__version {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 400;
  opacity: 0.9;
}

/* ==========================================================================
   3c. FORM SECTION CARD (DEPRECATED - Paper on Desk)

   Content now sits directly on white paper, not in grey card containers.
   This class is neutralized for backwards compatibility.
   ========================================================================== */

.form-section-card {
  background-color: transparent;  /* Content on white paper, not grey */
  max-width: none;  /* Inherits from .intake-document */
  margin: 0;
  padding: 0;
}

/* Section headers inside cards inherit the bleed behavior
   since cards are now transparent on the white paper */

/* ==========================================================================
   4. FORM SECTION CONTENT

   Base .section-body is defined in style.css.
   Form-specific extensions only below.
   ========================================================================== */

/* Inset variant for special content blocks */
.section-body--inset {
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-surface-raised);
  margin: 0 var(--space-lg) var(--space-md);
}

/* Section divider */
.form-divider {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin: var(--space-lg) var(--space-lg);
}

/* ==========================================================================
   5. FORM FIELDS - BASE COMPONENTS
   ========================================================================== */

/* Tight academic spacing - 16px between fields */
.form-field {
  margin-bottom: var(--space-md);
}

.form-field:last-child {
  margin-bottom: 0;
}

/* Reset fieldset appearance while keeping accessibility
   Screen readers rely on fieldset/legend pairing for radio groups */
fieldset.form-field {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-md) 0;  /* Tight academic spacing */
  min-width: 0;  /* Fix flexbox/grid overflow issues */
}

fieldset.form-field:last-child {
  margin-bottom: 0;
}

fieldset.form-field > legend {
  padding: 0;
  margin-bottom: var(--space-xs);
}

.form-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

/* "(Optional)" indicators must be sans-serif, normal weight, muted */
.form-label span,
.form-label .optional-indicator,
.checkbox-item__label span {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--color-text-muted);
}

/* REMOVED: Red asterisks - using Red Thread validation system instead
.form-label--required::after {
  content: ' *';
  color: var(--color-error);
}
*/

.form-hint {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

/* ==========================================================================
   6. TEXT INPUTS
   ========================================================================== */

.form-input {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-mono);  /* Data tier: "This is the record" */
  font-size: 0.9em;  /* Optically match serif/sans sizing per CLAUDE.md */
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);  /* Distinct border for "empty slot" appearance */
  border-radius: var(--border-radius);
  transition: border-color 0.15s ease;
}

.form-input::placeholder {
  color: var(--color-text-muted);
}

.form-input:focus {
  border-color: var(--color-primary);
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;  /* Draws inside element for thick border effect */
}

.form-input:disabled {
  background-color: var(--color-surface-raised);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* Input sizing */
.form-input--sm {
  max-width: 200px;
}

.form-input--md {
  max-width: 400px;
}

/* ==========================================================================
   7. TEXTAREAS
   ========================================================================== */

.form-textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-mono);  /* Data tier: "This is the record" */
  font-size: 0.9em;  /* Optically match serif/sans sizing per CLAUDE.md */
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);  /* Distinct border for "empty slot" appearance */
  border-radius: var(--border-radius);
  resize: vertical;
  transition: border-color 0.15s ease;
}

.form-textarea:focus {
  border-color: var(--color-primary);
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;  /* Draws inside element for thick border effect */
}

.form-textarea--lg {
  min-height: 180px;
}

/* Character counter */
.char-counter {
  display: block;
  text-align: right;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

.char-counter--warning {
  color: var(--color-error);
}

/* ==========================================================================
   8. SELECT DROPDOWNS
   ========================================================================== */

.form-select {
  display: block;
  width: 100%;
  max-width: 400px;
  padding: var(--space-sm) var(--space-md);
  padding-right: 36px;
  font-family: var(--font-mono);  /* Data tier: "This is the record" */
  font-size: 0.9em;  /* Optically match serif/sans sizing per CLAUDE.md */
  color: var(--color-text);
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23202122' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--color-border);  /* Distinct border for "empty slot" appearance */
  border-radius: var(--border-radius);
  appearance: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.form-select:focus {
  border-color: var(--color-primary);
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;  /* Draws inside element for thick border effect */
}

.form-select:disabled {
  background-color: var(--color-surface-raised);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* ==========================================================================
   9. RADIO BUTTONS

   Radio buttons should be indented (Level 2) from their question text.
   ========================================================================== */

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 4px;  /* Tight academic spacing */
  margin-left: var(--space-lg);  /* 24px indent from question */
}

.radio-group--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.radio-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
}

.radio-item input[type="radio"] {
  appearance: none;
  width: 15px;
  height: 15px;
  margin: 3px 0 0 0;  /* Adjusted for smaller size */
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  background-color: var(--color-surface);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.radio-item input[type="radio"]:checked {
  border-color: var(--color-primary);           /* Purple border */
  background-color: var(--color-primary);       /* Purple center dot */
  box-shadow: inset 0 0 0 2px var(--color-surface);  /* White gap ring */
}

.radio-item input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.radio-item__label {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: 1.4;
}

/* ==========================================================================
   10. CHECKBOXES
   ========================================================================== */

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 4px;  /* Tight academic spacing */
  margin-left: var(--space-lg);  /* 24px indent from question */
}

.checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
  appearance: none;
  width: 15px;
  height: 15px;
  margin: 3px 0 0 0;  /* Adjusted for smaller size */
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-surface);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.checkbox-item input[type="checkbox"]:checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='white' d='M8.5 2.5L3.75 7.25 1.5 5l-.6.6 2.85 2.85L9.1 3.1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.checkbox-item input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.checkbox-item__label {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: 1.4;
}

/* Compact variant for longer label text */
.checkbox-item--compact .checkbox-item__label {
  font-size: var(--font-size-sm);
}

/* Standalone checkboxes in form field containers need indentation
   to match checkbox-group behavior (24px indent from parent) */
.form-field-group > .checkbox-item,
.form-field > .checkbox-item {
  margin-left: var(--space-lg);
}

/* Checkbox grid layouts */
.checkbox-grid {
  display: grid;
  gap: 4px;  /* Tighter academic spacing */
}

.checkbox-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

.checkbox-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 699px) {
  .checkbox-grid--2col,
  .checkbox-grid--3col {
    grid-template-columns: 1fr;
  }
}

/* "Other" option: always bottom-leftmost in grid
   Forces item to start a new row in column 1 */
.checkbox-item--other {
  grid-column: 1;
}

/* ==========================================================================
   11. LIKERT SCALE MATRIX
   ========================================================================== */

.likert-table {
  width: 100%;
  border-collapse: collapse;
}

.likert-table th,
.likert-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  vertical-align: middle;
}

.likert-table th {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  background-color: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border-light);
}

.likert-table th:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--color-text);
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: 0.03em;
}

.likert-row {
  border-bottom: 1px solid var(--color-border-light);
}

.likert-row:nth-child(even) {
  background-color: var(--color-surface-raised);
}

.likert-row:last-child {
  border-bottom: none;
}

.likert-question {
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text);
  padding-right: var(--space-lg);
  max-width: 400px;
}

.likert-option {
  width: 60px;
}

.likert-option input[type="radio"] {
  appearance: none;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  background-color: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.likert-option input[type="radio"]:checked {
  border-color: var(--color-primary);           /* Purple border */
  background-color: var(--color-primary);       /* Purple center dot */
  box-shadow: inset 0 0 0 2px var(--color-surface);  /* White gap ring */
}

.likert-option input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Likert scale intro text */
.likert-intro {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.likert-scale-label {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

/* Mobile Likert: Stacked radio buttons */
@media (max-width: 799px) {
  .likert-table,
  .likert-table thead,
  .likert-table tbody,
  .likert-table tr,
  .likert-table th,
  .likert-table td {
    display: block;
  }

  .likert-table thead {
    position: absolute;
    left: -9999px;
  }

  .likert-row {
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    border: 1px solid var(--color-border-light);
    background-color: var(--color-surface);
  }

  .likert-row:nth-child(even) {
    background-color: var(--color-surface);
  }

  .likert-question {
    font-weight: 500;
    margin-bottom: var(--space-md);
    max-width: none;
    padding-right: 0;
  }

  .likert-options-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .likert-option-mobile {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .likert-option-mobile input[type="radio"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    background-color: var(--color-surface);
    cursor: pointer;
    flex-shrink: 0;
  }

  .likert-option-mobile input[type="radio"]:checked {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
  }

  .likert-option-mobile label {
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    color: var(--color-text);
  }
}

/* ==========================================================================
   12. PROGRESSIVE DISCLOSURE (Ghost Fields)

   Progressive/expanded fields show a PURPLE bar by default.
   On error, the bar turns RED (per Red Thread system).
   ========================================================================== */

.conditional-ghost {
  display: none;
  position: relative;
  margin-left: var(--space-lg);  /* Indentation from parent */
  padding-left: var(--space-md);  /* Space after bar */
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Vertical bar via pseudo-element - PURPLE by default */
.conditional-ghost::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--color-primary);
}

.conditional-ghost.is-visible {
  display: block;
}

.conditional-ghost__trigger-message {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-md);
}

/* Error state - bar turns RED */
.conditional-ghost.has-error::before,
.conditional-ghost--error::before {
  background-color: var(--color-error);
}

.conditional-ghost.has-error .conditional-ghost__trigger-message,
.conditional-ghost--error .conditional-ghost__trigger-message {
  color: var(--color-error);
}

/* Nested conditional */
.conditional-ghost .conditional-ghost {
  margin-left: var(--space-md);
}

/* ==========================================================================
   13. MATRIX TABLE (Condition × Columns)
   ========================================================================== */

.matrix-table {
  width: 100%;
  border-collapse: collapse;
}

.matrix-table th,
.matrix-table td {
  padding: 6px var(--space-md);  /* Compressed vertical padding */
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border-light);
}

.matrix-table th {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  background-color: var(--color-surface-raised);
}

.matrix-table th:first-child,
.matrix-table td:first-child {
  text-align: left;
  padding-left: var(--space-sm);  /* Tighter left padding */
}

.matrix-table th:first-child {
  color: var(--color-text);
}

.matrix-table tbody tr:nth-child(even) {
  background-color: var(--color-surface-raised);
}

.matrix-table tbody tr:last-child td {
  border-bottom: none;
}

.matrix-condition {
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.matrix-checkbox {
  text-align: center;  /* Fixed: flex was breaking table column layout */
}

.matrix-checkbox input[type="checkbox"] {
  appearance: none;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-surface);
  cursor: pointer;
}

.matrix-checkbox input[type="checkbox"]:checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='white' d='M8.5 2.5L3.75 7.25 1.5 5l-.6.6 2.85 2.85L9.1 3.1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.matrix-checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   14. DATA ROWS (Multi-field Horizontal)

   Grid layouts with vertical separator lines between columns.
   Separators turn RED when adjacent fields are invalid.
   ========================================================================== */

.data-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.data-row:last-child {
  border-bottom: none;
}

.data-row .form-field,
.data-row .form-field-group {
  margin-bottom: 0;
}

/* Tighter label-to-input coupling in data rows */
.data-row .form-label {
  margin-bottom: 2px;
}

.data-row .form-hint {
  margin-bottom: 4px;
}

/* Explicit column layouts */
.data-row--2col {
  grid-template-columns: 1fr 1fr;
}

.data-row--3col {
  grid-template-columns: 1fr 1fr 1fr;
}

/* --- Column Separator Lines --- */
/* Separator line between columns via ::after pseudo-element */
.data-row > .form-field-group:not(:last-child) {
  position: relative;
}

.data-row > .form-field-group:not(:last-child)::after {
  content: '';
  position: absolute;
  right: calc((var(--space-md) * -0.5) - 1.5px);  /* Centered: -8px minus half of 3px width */
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--color-border-light);
}

/* Hide the Red Thread ::before bar inside data-rows (separators handle columns 2+) */
.data-row > .form-field-group::before {
  display: none;
}

/* First column gets its standard left validation bar */
.data-row > .form-field-group:first-child::before {
  display: block;
}

/* Separator turns RED if the field to its left is invalid */
.data-row > .form-field-group.has-error:not(:last-child)::after {
  background-color: var(--color-error);
}

/* Separator turns RED if adjacent field to right is invalid
   Note: :has() selector for modern browsers */
.data-row > .form-field-group:has(+ .form-field-group.has-error)::after {
  background-color: var(--color-error);
}

/* Fallback class for older browsers without :has() support */
.data-row > .form-field-group.adjacent-error:not(:last-child)::after {
  background-color: var(--color-error);
}

/* Responsive: stack columns on mobile */
@media (max-width: 699px) {
  .data-row--2col,
  .data-row--3col {
    grid-template-columns: 1fr;
  }

  /* Hide vertical separators on mobile (stacked layout) */
  .data-row > .form-field-group:not(:last-child)::after {
    display: none;
  }
}

/* ==========================================================================
   15. FILE UPLOAD
   ========================================================================== */

.file-upload {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.file-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Focus state: show outline on button when input is focused */
.file-upload__input:focus + .file-upload__button {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.file-upload__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.file-upload__button:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary-tint);
}

.file-upload__button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.file-upload__constraints {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.file-upload__preview {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius);
}

.file-upload__filename {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  flex: 1;
}

.file-upload__remove {
  padding: var(--space-xs);
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.file-upload__remove:hover {
  color: var(--color-error);
}

/* ==========================================================================
   16. VALIDATION SYSTEM (Red Thread)

   Core Principle: Validation errors are indicated by vertical bars on the
   far left axis, NOT by changing input field colors.

   "No-Touch" Zone: Inputs stay neutral (grey borders, black text) in all states.
   Only the vertical bar, error message, and section header turn red.
   ========================================================================== */

/* --- Legacy .validation-container (kept for backwards compatibility) --- */
.validation-container {
  position: relative;
}

/* REMOVED: Red input border styling - inputs stay neutral per Red Thread system
.validation-container.has-error .form-input,
.validation-container.has-error .form-textarea,
.validation-container.has-error .form-select {
  border-color: var(--color-error);
}
*/

/* REMOVED: Red focus shadow - inputs stay neutral
.validation-container.has-error .form-input:focus,
.validation-container.has-error .form-textarea:focus,
.validation-container.has-error .form-select:focus {
  box-shadow: 0 0 0 2px var(--color-error-bg);
}
*/

/* Error message text */
.error-message {
  display: none;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-error);
  margin-top: var(--space-xs);
}

.validation-container.has-error .error-message,
.form-field-group.has-error .error-message {
  display: block;
}

/* --- New Field Group with Vertical Bar System --- */
.form-field-group {
  position: relative;
  /* Bar is absolutely positioned at -24px, no padding needed */
  margin-bottom: var(--space-md);  /* Tight academic spacing */
}

.form-field-group:last-child {
  margin-bottom: 0;
}

/* Vertical bar - hidden by default for standard fields */
/* Positioned to align with section header's purple accent bar */
.form-field-group::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-lg));  /* -24px to align with section header */
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: transparent;
}

/* Error state - show RED bar */
.form-field-group.has-error::before {
  background-color: var(--color-error);
}

/* Expanded/nested state - show PURPLE bar */
.form-field-group.is-expanded::before {
  background-color: var(--color-primary);
}

/* Expanded + Error - RED overrides PURPLE */
.form-field-group.is-expanded.has-error::before {
  background-color: var(--color-error);
}

/* Legacy field-error-bar kept for backwards compatibility */
.field-error-bar {
  border-left: 4px solid transparent;
  padding-left: var(--space-md);
  margin-left: calc(-1 * var(--space-md) - 4px);
}

.field-error-bar.has-error {
  border-left-color: var(--color-error);
}

/* ==========================================================================
   17. ATTESTATION BOX

   Spine-aligned with grey left bar that turns red on error.
   Shares visual hierarchy with section headers and notice boxes.
   ========================================================================== */

.attestation-box {
  background-color: var(--color-surface-raised);  /* Light grey, distinct from form */
  border: 1px solid var(--color-border-light);
  border-left: 4px solid var(--color-border);  /* Grey accent bar on spine */
  margin-left: calc(-1 * var(--space-lg));  /* Outdent: snap to spine */
  padding: var(--space-md);
  padding-left: calc(var(--space-lg) - 4px);  /* Align text with form fields */
}

.attestation-box__text {
  font-family: var(--font-sans);  /* Sans for UI elements, not serif */
  font-size: var(--font-size-base);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.attestation-box__text a {
  font-weight: 500;
}

/* Red Thread: grey bar turns red on validation error */
.form-field-group.has-error .attestation-box {
  border-left-color: var(--color-error);
}

/* Error message inside attestation box - only show when parent has error */
.form-field-group.has-error .attestation-box .error-message {
  display: block;
  margin-top: var(--space-sm);
}

/* ==========================================================================
   18. FORM NAVIGATION
   ========================================================================== */

.form-nav {
  display: flex;
  justify-content: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-top: 1px solid var(--color-border-light);
  background-color: var(--color-surface);
}

.form-nav .btn {
  min-width: 120px;
  margin-left: var(--space-lg);  /* Align with indented checkboxes */
}

/* ==========================================================================
   19. NOTICE BOXES (Form Context)
   ========================================================================== */

.form-notice {
  padding: var(--space-md);
  padding-left: calc(var(--space-lg) - 4px);  /* Align text with form fields (24px - 4px border) */
  margin: var(--space-md) var(--space-lg);
  margin-left: calc(-1 * var(--space-lg));  /* Outdent: snap yellow bar to spine */
  border-radius: 0;
  border-left: 4px solid;
}

.form-notice--warning {
  background-color: var(--color-notice-warning-bg);
  border-left-color: var(--color-notice-warning-border);
}

.form-notice--info {
  background-color: var(--color-notice-info-bg);
  border-left-color: var(--color-notice-info-border);
}

.form-notice__title {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.form-notice__text {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.5;
}

/* ==========================================================================
   20. STATE DEMOS (For Specimen Sheet)
   ========================================================================== */

/* Disabled field state */
.form-field--disabled .form-label {
  color: var(--color-text-disabled);
}

/* Filled field state indicator */
.form-input--filled {
  background-color: var(--color-surface);
}

/* ==========================================================================
   21. PRINT STYLES
   ========================================================================== */

@media print {
  .intake-document {
    box-shadow: none;
    border: 1px solid #000;
  }

  .form-header-banner {
    background-color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .section-header {
    background-color: #eee !important;
    border-left-color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .form-nav {
    display: none;
  }

  /* Show all conditional fields for printing */
  .conditional-ghost {
    display: block !important;
    border-left-color: #999;
  }

  .form-input,
  .form-textarea,
  .form-select {
    border: 1px solid #999;
  }

  /* Ensure checkboxes/radios print */
  input[type="checkbox"],
  input[type="radio"] {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Page breaks */
  .section-header {
    page-break-after: avoid;
  }

  .form-field {
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   22. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

/* Desktop: Align document with sidebar branding baseline */
@media (min-width: 1200px) {
  .intake-document {
    margin-top: var(--document-start);
  }
}

/* Split-screen & Tablet: Paper pinned to spine */
@media (max-width: 1199px) and (min-width: 700px) {
  .page-form .main-content,
  .page-pledge .main-content {
    padding: 0;
    max-width: none;
  }

  .intake-document {
    max-width: 794px;           /* A4 width - fills 756px split-view, constrains wider tablets */
    margin: 0;                  /* Pinned to left/spine */
    border: none;
    border-right: 1px solid var(--color-border-light);  /* Right edge demarcation */
  }
}

@media (max-width: 699px) {
  /* Mobile: Edge-to-edge, no padding (sticky mobile-header handles nav) */
  .page-form .main-content,
  .page-pledge .main-content {
    padding: 0;
    max-width: none;
  }

  .intake-document {
    margin: 0;
    border: none;
    padding: var(--space-md);  /* Keep internal padding for content spacing */
  }

  /* Part header - adjust bleed for reduced padding */
  .part-header {
    margin: calc(-1 * var(--space-md));
    margin-bottom: var(--space-md);
  }

  /* Section headers - no bleed on mobile either, just smaller padding */
  .section-header {
    padding: var(--space-sm) var(--space-md);
  }

  .section-body {
    padding: var(--space-sm) 0 var(--space-md);  /* 8px top spacing after header */
    padding-left: var(--space-md);  /* 16px indent on mobile (vs 24px desktop) */
  }

  .form-nav {
    padding: var(--space-md);
    flex-direction: column;
    align-items: flex-start;  /* Prevent buttons from stretching full width */
  }

  .form-nav .btn {
    margin-left: var(--space-md);  /* Match mobile checkbox indent */
  }

  .data-row {
    grid-template-columns: 1fr;
  }

  .matrix-table {
    font-size: var(--font-size-sm);
  }

  .matrix-table th,
  .matrix-table td {
    padding: var(--space-xs) var(--space-sm);
  }

  /* --- Mobile Validation Bar Fix (Border-Left Swap) ---
     Pseudo-element positioning breaks with reduced mobile padding.
     Switch to border-left for guaranteed visibility. */

  /* Disable pseudo-element validation bar */
  .form-field-group::before {
    content: none;
  }

  /* Use border-left instead - tighter padding for mobile content alignment */
  .form-field-group {
    border-left: var(--validation-bar-width) solid transparent;
    padding-left: var(--space-sm);  /* 8px instead of 16px - aligns content better */
  }

  .form-field-group.has-error {
    border-left-color: var(--color-error);
  }

  .form-field-group.is-expanded {
    border-left-color: var(--color-primary);
  }

  .form-field-group.is-expanded.has-error {
    border-left-color: var(--color-error);
  }

  /* Match .form-field alignment with .form-field-group on mobile */
  .form-field {
    border-left: var(--validation-bar-width) solid transparent;
    padding-left: var(--space-sm);  /* Match form-field-group */
  }

  /* Ghost field connector bar - same approach */
  .conditional-ghost::before {
    content: none;
  }

  .conditional-ghost {
    margin-left: var(--space-md);
    border-left: var(--validation-bar-width) solid var(--color-primary);
    padding-left: var(--space-sm);
  }

  .conditional-ghost.has-error {
    border-left-color: var(--color-error);
  }

  /* Attestation box - reduce outdent to match mobile padding */
  .attestation-box {
    margin-left: calc(-1 * var(--space-md));
    padding-left: calc(var(--space-md) - 4px);
  }

  /* Form notice - reduce outdent to match mobile padding */
  .form-notice {
    margin-left: calc(-1 * var(--space-md));
    padding-left: calc(var(--space-md) - 4px);
  }

  /* Radio/checkbox indent - match mobile spacing */
  .radio-group,
  .checkbox-group {
    margin-left: var(--space-md);
  }

  /* Standalone checkboxes - no extra indent on mobile (already handled by field padding) */
  .form-field-group > .checkbox-item,
  .form-field > .checkbox-item {
    margin-left: 0;
  }
}

/* ==========================================================================
   23. SYSTEM DATA TYPOGRAPHY (Mono Tier)

   IBM Plex Mono is reserved for system-generated data, not user input.
   This signals "official record" and "machine-generated" content.
   ========================================================================== */

/* Reference IDs and case numbers */
.reference-id,
.case-id,
.report-id {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: 0.02em;
}

/* Confirmation codes */
.confirmation-code,
.verification-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* Timestamps and dates (system-generated) */
.timestamp,
.system-date {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

/* Status indicators */
.status-badge {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Generic system data class */
.system-data {
  font-family: var(--font-mono);
  font-size: 0.9em;
}