/* ==========================================================================
   Education collective assessment — shared respondent experience
   --------------------------------------------------------------------------
   The anonymous, single-page education surveys (Classroom Culture, Student
   Experience & Agency, School Enablement) share this stylesheet so they match
   the branded assessment design language used across the site (see
   deep-dive-assessment.css): the same intro, option, progress and card
   vocabulary, every colour drawn from tokens.css. All rules are scoped under
   .eca so the generic class names the page scripts emit (.card, .option,
   .question) stay page-local and never leak.
   ========================================================================== */

.eca { max-width: 820px; margin: 0 auto; padding: clamp(40px, 6vw, 64px) 22px 96px; }

/* ── Intro ────────────────────────────────────────────────────────────── */
.eca-eyebrow { margin: 0; font-family: var(--font-display); font-size: 11px; font-weight: var(--w-black); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand-primary); }
.eca-powered { margin: 10px 0 0; font-size: 13px; color: var(--grey-500); }
.eca-powered strong { color: var(--charcoal); font-weight: var(--w-bold); }
.eca h1 { margin: 14px 0 16px; font-family: var(--font-display); font-size: clamp(36px, 6.2vw, 60px); font-weight: var(--w-black); line-height: 1.02; letter-spacing: var(--tracking-tight); color: var(--charcoal); }
.eca-lead { margin: 0; font-size: clamp(17px, 2vw, 20px); line-height: 1.62; color: var(--fg-2); }

.eca-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.eca-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--white); font-size: 13px; font-weight: var(--w-bold); color: var(--fg-1); }
.eca-pill::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-primary); }

/* ── Cards ────────────────────────────────────────────────────────────── */
.eca .card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 24px; margin-top: 20px; box-shadow: var(--shadow-xs); }
.eca-privacy-card { border-left: 4px solid var(--brand-primary); }
.eca .privacy { margin: 0; font-size: 14px; line-height: 1.6; color: var(--fg-2); }
.eca .privacy + .privacy { margin-top: 12px; }
.eca .privacy strong { color: var(--charcoal); }

/* Section header cards (emitted by the page script) and the missing-link card */
.eca .card > h2 { margin: 0; font-family: var(--font-display); font-size: clamp(21px, 3vw, 27px); font-weight: var(--w-black); line-height: 1.2; color: var(--charcoal); }
.eca .section-note { margin: 10px 0 0; color: var(--fg-2); line-height: 1.6; }

/* Safeguarding support callout — a calm, noticeable "if you need help now"
   box used by residential-life surveys. Warm gold accent so it reads as care,
   not alarm; all drawn from the brand accent tokens. */
.eca .help { background: var(--gold-100); border-color: var(--gold-600); border-left: 4px solid var(--gold-600); }
.eca .help h2 { font-family: var(--font-display); }
.eca .help a { font-weight: var(--w-black); color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; }

/* ── Questions ────────────────────────────────────────────────────────── */
/* Each question is emitted as its own `card question`, so it reads as a clean
   bordered card — no inner divider and a lighter surface than the intro cards. */
.eca .question { padding: 22px; box-shadow: none; }
.eca .question > p { margin: 0 0 16px; font-family: var(--font-display); font-size: clamp(17px, 1.9vw, 20px); font-weight: var(--w-black); line-height: 1.4; letter-spacing: var(--tracking-snug); color: var(--charcoal); }

.eca .options { display: grid; gap: 10px; }
.eca .option { display: flex; align-items: flex-start; gap: 13px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); line-height: 1.5; cursor: pointer; transition: border-color .18s var(--ease-out), background .18s var(--ease-out), transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.eca .option:hover { border-color: var(--brand-primary); transform: translateY(-1px); }
.eca .option:focus-within { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(180, 0, 0, .14); }
.eca .option:has(input:checked) { border-color: var(--brand-primary); background: var(--red-50); box-shadow: inset 0 0 0 1px var(--brand-primary); }

/* Custom radio so the selected answer reads clearly on brand */
.eca .option input { appearance: none; -webkit-appearance: none; flex: 0 0 20px; width: 20px; height: 20px; margin: 1px 0 0; border: 2px solid var(--border-strong); border-radius: 50%; background: var(--white); cursor: pointer; position: relative; transition: border-color .18s var(--ease-out); }
.eca .option input:checked { border-color: var(--brand-primary); }
.eca .option input:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand-primary); }
.eca .option input:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.eca .option span { flex: 1; color: var(--fg-1); }
.eca .option:has(input:checked) span { color: var(--charcoal); font-weight: var(--w-medium); }

/* ── Sticky progress (inserted by education-collective-assessment.js) ──── */
.eca-progress { position: sticky; top: 81px; z-index: 20; display: flex; align-items: center; gap: 14px; margin: 20px 0 0; padding: 11px 18px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-sm); }
.eca-progress-text { flex: 0 0 auto; font-size: 13px; font-weight: var(--w-bold); color: var(--charcoal); white-space: nowrap; }
.eca-progress-track { flex: 1; height: 7px; border-radius: 999px; background: var(--grey-100); overflow: hidden; }
.eca-progress-bar { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--brand-primary); transition: width .3s var(--ease-out); }
.eca-progress.is-complete .eca-progress-text { color: var(--brand-primary); }

/* ── Submit + status ──────────────────────────────────────────────────── */
.eca-submit-card { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.eca .btn { border: 0; border-radius: var(--radius-pill); background: var(--brand-primary); color: var(--white); padding: 15px 30px; font-family: var(--font-display); font-size: 15px; font-weight: var(--w-bold); cursor: pointer; transition: background .18s var(--ease-out), transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.eca .btn:hover { background: var(--brand-dark); box-shadow: var(--shadow-brand); transform: translateY(-1px); }
.eca .btn:active { transform: translateY(0); }
.eca .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.eca .status { min-height: 20px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.eca .status.error { color: var(--brand-primary); font-weight: var(--w-bold); }

/* ── Success + missing-link states ────────────────────────────────────── */
.eca .success { margin-top: 22px; padding: clamp(28px, 5vw, 40px); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--white); box-shadow: var(--shadow-xs); }
.eca .success::before { content: "\2713"; display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%; background: var(--red-50); color: var(--brand-primary); font-size: 26px; font-weight: var(--w-black); }
.eca .success h2 { margin: 0 0 10px; font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 34px); line-height: 1.1; color: var(--charcoal); }
.eca .success p { margin: 0; color: var(--fg-2); line-height: 1.65; }

.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .eca .option, .eca .btn, .eca-progress-bar { transition: none; }
  .eca .option:hover, .eca .btn:hover { transform: none; }
}

@media (max-width: 620px) {
  .eca { padding-left: 18px; padding-right: 18px; }
  .eca .card { padding: 20px; }
  .eca-progress { top: 65px; padding: 10px 14px; gap: 11px; }
  .eca-progress-text { font-size: 12px; }
}