/* =====================================================================
   College2U — c2u-homepage.css  v1.0.0 · June 2026
   ---------------------------------------------------------------------
   Homepage-ONLY additive layer for the Admissions OS hero cockpit.
   Loaded after college2u-enterprise.css via $extra_head in index.php.

   SCOPE RULE: this file only adds NEW cockpit-step primitives introduced
   in the HOME_OS pass (step labels, stream step, approximation note, the
   inline validation error state). It deliberately does NOT redefine any
   existing .hp-* layout that already lives in college2u-enterprise.css —
   keeping the homepage's teal-on-black aesthetic as the single source of
   truth and the blast radius explainable.

   All values reference confirmed design tokens (see :root in
   college2u-enterprise.css) with hard fallbacks so the cascade is safe
   even if a token is renamed.
   ===================================================================== */

/* Numbered 1→2→3 step labels above each cockpit section */
.hp-cockpit__step-label {
  margin: var(--space-3, 0.75rem) 0 var(--space-2, 0.5rem);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary, #00a878);
}
.hp-cockpit__step-label:first-of-type { margin-top: 0; }

/* "Not sure yet" panel + COMED-K hint copy */
.hp-cockpit__hint {
  margin: 0;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.5;
  color: var(--color-text-muted, #9fb3ad);
  background: var(--color-surface-1, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-md, 0.5rem);
}

/* Honest approximation disclaimer — never claim invented cut-offs */
.hp-cockpit__approx-note {
  margin: var(--space-3, 0.75rem) 0 0;
  font-size: var(--text-xs, 0.75rem);
  line-height: 1.45;
  color: var(--color-text-faint, #7c8c87);
}

/* Inline validation error (set by c2u-homepage.js, polite live region) */
.hp-cockpit__error {
  margin: var(--space-2, 0.5rem) 0 0;
  min-height: 1em;                 /* reserve space → zero CLS when it appears */
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  color: var(--color-error, #ef5350);
}
.hp-cockpit__input.is-invalid {
  border-color: var(--color-error, #ef5350) !important;
  outline: 2px solid var(--color-error-dim, rgba(239, 83, 80, 0.35));
  outline-offset: 1px;
}

/* Submit busy state while routing to the predictor endpoint */
.hp-cockpit__submit[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hp-cockpit__submit { transition: none !important; }
}