/* ==========================================================================
   LEC Estimator — Eligibility intake forms (Task 2.1)
   Built on shared/tokens.css (Turing navy/gold identity). WCAG 2.2 AA:
   visible focus (2.4.7/2.4.11), sufficient contrast, persistent labels,
   target size >= 44px (2.5.8), state not conveyed by color alone (1.4.1).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-secondary-gray);
}

/* ---- Skip link (WCAG 2.4.1) ---- */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -60px;
  z-index: 1000;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--border-radius-md);
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--space-3); }

/* ---- Global visible focus (WCAG 2.4.7 / 2.4.11) ---- */
:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}
main:focus-visible,
.step__title:focus-visible { outline: none; }

/* ---- Header ---- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-inverse);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
}
.brand__logo {
  height: 32px;
  width: auto;
  display: block;
  /* color inherited from .brand (white on the navy header) → currentColor fill */
}
.app-header__badge { margin: 0; font-size: var(--text-sm); color: var(--color-brand-light); }

/* ---- Autosave status ---- */
.autosave {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: var(--max-width-content);
  margin: var(--space-3) auto 0;
  padding: 0 var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.autosave__dot { width: 10px; height: 10px; border-radius: 50%; background: #2f855a; }
#save-status[data-state="saving"] ~ .autosave__dot,
.autosave:has(#save-status[data-state="saving"]) .autosave__dot { background: var(--color-warning); }
.autosave:has(#save-status[data-state="error"]) .autosave__dot { background: #c53030; }

/* ---- Layout ---- */
main { max-width: var(--max-width-content); margin: 0 auto; padding: var(--space-5); }

/* ---- Stepper / progress ---- */
.stepper { margin-bottom: var(--space-6); }
.stepper__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
}
.stepper__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.stepper__num {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--color-secondary-gray-mid);
  background: var(--color-secondary-white);
  font-weight: var(--font-weight-semibold);
}
.stepper__item.is-current .stepper__num { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-inverse); }
.stepper__item.is-done .stepper__num { border-color: var(--color-brand); background: var(--color-brand); color: #000; }
.stepper__item.is-current { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.stepper__meta { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }

/* ---- Visually-hidden live regions ---- */
.live-region {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ---- Card ---- */
.card {
  background: var(--color-secondary-white);
  border: 1px solid var(--color-secondary-gray-mid);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.step__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-brand-strong);
}
.step__title { margin: 0 0 var(--space-3); font-size: var(--text-2xl); line-height: var(--leading-tight); color: var(--color-primary); }
.step__lead { margin: 0 0 var(--space-5); font-size: var(--text-md); color: var(--color-text-secondary); max-width: var(--max-width-text); }

/* ---- Forms ---- */
.field-stack { display: block; }
.field { margin-bottom: var(--space-5); }
.field__label { display: block; margin-bottom: var(--space-2); font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.field__req { color: #9b2c2c; }
.field__hint { display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: var(--space-3);
  min-height: 44px; /* target size (WCAG 2.5.8) */
  font: inherit;
  color: var(--color-text-primary);
  background: var(--color-secondary-white);
  border: 1.5px solid var(--color-text-muted);
  border-radius: var(--border-radius-md);
}
.field__textarea { min-height: 96px; resize: vertical; }
.field__input:focus,
.field__select:focus,
.field__textarea:focus { border-color: var(--color-primary); }

/* Validation state — driven by data-state, NOT color alone (WCAG 1.4.1). */
.field[data-state="invalid"] .field__input,
.field[data-state="invalid"] .field__select,
.field[data-state="invalid"] .field__textarea,
.field__input[aria-invalid="true"],
.field__select[aria-invalid="true"],
.field__textarea[aria-invalid="true"] { border-color: #c53030; }
.field[data-state="valid"] .field__input,
.field[data-state="valid"] .field__select,
.field[data-state="valid"] .field__textarea { border-color: #2f855a; }

.field__state { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-secondary); }
.field[data-state="valid"] .field__state { color: #276749; }
.field[data-state="valid"] .field__state::before { content: "✓ "; }
.field__error {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: #9b2c2c; /* AA on white */
  font-weight: var(--font-weight-medium);
}
.field[data-state="invalid"] .field__error::before { content: "⚠ "; }

/* Mobile-first: single column, deterministic 2-column max on ≥641px (tidiness fix). */
.grid-2 { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 641px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Buttons ---- */
.actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  border-radius: var(--border-radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.btn--primary { background: var(--color-cta); color: var(--color-cta-contrast); border-color: var(--color-cta); }
.btn--primary:hover { background: var(--color-cta-hover); }
.btn--secondary { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--secondary:hover { background: var(--color-secondary-gray); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Footer ---- */
.app-footer {
  max-width: var(--max-width-content);
  margin: var(--space-8) auto 0;
  padding: var(--space-5);
  border-top: 1px solid var(--color-secondary-gray-mid);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ---- Small screens ---- */
@media (max-width: 640px) {
  .actions .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Activity lines — per-line capture (Task 2.2). Each line is a <fieldset>
   grouped by a <legend>; controls reuse the .field primitive above. WCAG 2.2
   AA: grouped semantics (1.3.1), >= 44px targets on add/remove, visible focus.
   ========================================================================== */

.activity-lines { display: block; }

.line-list { display: flex; flex-direction: column; gap: var(--space-5); }

.line-editor {
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-secondary-gray-mid);
  border-radius: var(--border-radius-lg);
  background: var(--color-secondary-gray);
}
.line-editor__legend {
  padding: 0 var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}
.line-editor__legend:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 2px;
}

/* The conditional (related-party reason) block reuses .field-stack spacing. */
.line-editor [data-conditional="true"] { margin-top: var(--space-2); }

.line-editor__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-4);
}
.line-editor__remove { min-height: 44px; }

.line-list__footer { margin-top: var(--space-5); }
.line-list__add { min-height: 44px; }

@media (max-width: 640px) {
  .line-editor__actions { justify-content: stretch; }
  .line-editor__remove,
  .line-list__add { flex: 1 1 100%; }
}

/* ==========================================================================
   Increment 4 — Quality norm picker, Payroll cohorts, Fiscal, and the Teaser
   result view. All reuse the .field primitive + .card shell. WCAG 2.2 AA:
   grouped semantics (1.3.1), state in text not color-only (1.4.1), >= 44px
   targets, visible focus, live regions for async/state (4.1.3).
   ========================================================================== */

/* ---- Contextual notes (visible status lines, not visually hidden) ---- */
.revenue-reconciliation { margin: var(--space-2) 0 var(--space-4); font-size: var(--text-sm); color: var(--color-text-secondary); }
.revenue-reconciliation[data-status="ok"] { color: #276749; }
.revenue-reconciliation[data-status="under_total_with_remainder"] { color: var(--color-warning); }
.revenue-reconciliation[data-status="exceeds_total"] { color: #9b2c2c; }

/* ---- Quality norm picker (checkbox group) ---- */
.quality-norms {
  margin: var(--space-4) 0 0;
  padding: var(--space-5);
  border: 1px solid var(--color-secondary-gray-mid);
  border-radius: var(--border-radius-lg);
  background: var(--color-secondary-gray);
}
.quality-norms[hidden] { display: none; }
.quality-norms__legend { padding: 0 var(--space-2); font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.quality-norms__row { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; }
.quality-norms__checkbox { width: 20px; height: 20px; }
.quality-norms__label { font-weight: var(--font-weight-medium); }

/* ---- Payroll cohorts ---- */
.payroll-mode-host { margin-top: var(--space-4); }
.cohort-list { display: flex; flex-direction: column; gap: var(--space-5); }
.cohort-editor {
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-secondary-gray-mid);
  border-radius: var(--border-radius-lg);
  background: var(--color-secondary-gray);
}
.cohort-editor__legend { padding: 0 var(--space-2); font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.cohort-editor__actions { display: flex; justify-content: flex-end; margin-top: var(--space-4); }
.cohort-editor__remove,
.cohort-list__add { min-height: 44px; }
.cohort-list__footer { margin-top: var(--space-5); }

@media (max-width: 640px) {
  .cohort-editor__actions { justify-content: stretch; }
  .cohort-editor__remove,
  .cohort-list__add { flex: 1 1 100%; }
}

/* ---- Teaser result view ---- */
.teaser__live { margin-bottom: var(--space-4); font-size: var(--text-sm); color: var(--color-text-secondary); }
.teaser__error { margin-bottom: var(--space-4); color: #9b2c2c; font-weight: var(--font-weight-medium); }
.teaser__body > * + * { margin-top: var(--space-5); }
.teaser__state {
  padding: var(--space-4);
  border-left: 4px solid var(--color-primary);
  background: var(--color-secondary-gray);
  border-radius: var(--border-radius-md);
}
.teaser__state[data-state="alta"] { border-left-color: #2f855a; }
.teaser__state[data-state="condicionada"] { border-left-color: var(--color-warning); }
.teaser__state[data-state="no_reune"],
.teaser__state[data-state="insuficiente"] { border-left-color: #9b2c2c; }
.teaser__state-label { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.teaser__confidence { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.teaser__range-value { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.teaser__range-note { color: var(--color-text-secondary); }
.teaser__drivers h3,
.teaser__range h3,
.teaser__assumptions h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); color: var(--color-primary); }
.teaser__drivers-list,
.teaser__assumptions-list { margin: 0; padding-left: var(--space-5); }
.teaser__driver,
.teaser__assumptions-list li { margin-bottom: var(--space-2); }
.teaser__disclaimer { font-size: var(--text-sm); color: var(--color-text-muted); border-top: 1px solid var(--color-secondary-gray-mid); padding-top: var(--space-4); }