/* ══════════════════════════════════════════════
   TERI Self-Assessment — interactive tool styles
   Loads alongside base.css + teri.css.
   v0.1 — April 2026
   ══════════════════════════════════════════════ */

#as-app { min-height: 60vh; }
.as-panel { width: 100%; position: relative; }
/* Respect the boolean `hidden` attribute across all our elements —
   .as-btn and .as-panel both set explicit display values that would
   otherwise beat the UA's `[hidden] { display: none }` rule. */
[hidden] { display: none !important; }

/* ── ENTRY ── */
/* Brand gradient bar at the top of the entry — matches the prompt-ed
   parent flyer and roadmap hero treatment. Sits flush under the nav. */
.as-entry-gradient {
  height: 6px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 50%, var(--pop) 100%);
}
.as-entry-inner {
  max-width: 1100px;
  margin: 0 auto;
  /* Horizontal padding moves to #as-entry (the section wrapper) so the
     1100px content width matches .teri-problem-inner exactly — both
     sections now contain content within the same horizontal bounds.
     Without this, the tool reads ~64px narrower than the problem
     paragraphs above it, breaking visual alignment. */
  padding: 48px 0 64px;
}
.as-title-accent {
  font-style: italic;
  color: var(--pop);
  font-weight: 700;
}

.as-entry-header {
  text-align: left;
  margin-bottom: 32px;
}
.as-breadcrumb {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 14px;
}
.as-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.as-breadcrumb a:hover { color: var(--primary); text-decoration: underline; }
.as-sep { margin: 0 6px; color: var(--gray-400); }

.as-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 10px;
}
.as-title {
  font-family: var(--serif);
  font-size: clamp(28px, 4.2vw, 42px);
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  max-width: 700px;
}
.as-subtitle {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 620px;
}

.as-entry-card {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 28px 32px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.as-entry-section { margin-bottom: 28px; }
.as-entry-section:last-of-type { margin-bottom: 0; }
.as-entry-section--two {
  display: grid;
  /* Two-column with the date column wide enough to keep the label
     "Audit date (shown on board report cover)" on a single line at
     normal font sizes. 280px → ~30 chars at 13px label = enough. */
  grid-template-columns: 1fr 280px;
  gap: 18px;
  align-items: end;
}
.as-entry-field--date .as-input { font-family: inherit; }
.as-entry-section--single { display: block; }
.as-entry-section--single .as-entry-field { width: 100%; }
@media (max-width: 720px) {
  .as-entry-section--two { grid-template-columns: 1fr; gap: 14px; }
}

.as-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.as-label-opt {
  font-weight: 400;
  color: var(--text-faint);
  margin-left: 4px;
  font-size: 12px;
}
.as-hint {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
  max-width: 640px;
}

.as-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.as-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(13,148,136,0.15);
}

/* ── Overview block (replaces former mode picker) ── */
.as-overview {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gray-200);
}
.as-overview-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.as-overview-stat {
  background: var(--bg);
  border-radius: 10px;
  padding: 18px 14px 16px;
  text-align: center;
  position: relative;
  border-top: 3px solid var(--primary);
}
.as-overview-stat:nth-child(2) { border-top-color: var(--accent); }
.as-overview-stat:nth-child(3) { border-top-color: var(--pop); }
.as-overview-stat-num {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
  letter-spacing: -0.015em;
}
.as-overview-stat:nth-child(2) .as-overview-stat-num { color: var(--accent); }
.as-overview-stat:nth-child(3) .as-overview-stat-num { color: #b45309; }
.as-overview-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 6px;
}
.as-overview-block { margin-bottom: 22px; }
.as-overview-block:last-child { margin-bottom: 0; }
.as-overview-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 10px;
}

/* Collapsible overview block — used for "Preview the five layers" so
   the layer accordions don't visually compete with the audit-entry
   inputs below. Closed by default; users who want to look around can
   expand, but the default scan goes overview → inputs → Start.
   Styled to match the static .as-overview-label appearance — same
   uppercase brand color — with a caret that flips on open. */
.as-overview-block--collapsible {
  border-top: 1px dashed var(--gray-200);
  padding-top: 14px;
}
.as-overview-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  margin-bottom: 0;
  list-style: none;
  padding: 4px 0;
}
.as-overview-summary::-webkit-details-marker { display: none; }
.as-overview-summary:hover {
  color: var(--primary-hover);
}
.as-overview-summary-caret {
  font-size: 14px;
  color: var(--primary);
  transition: transform 0.18s ease;
  flex-shrink: 0;
  line-height: 1;
}
.as-overview-block--collapsible[open] .as-overview-summary-caret {
  transform: rotate(180deg);
}
.as-overview-block--collapsible[open] .as-overview-summary {
  margin-bottom: 10px;
}
.as-overview-label-opt {
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--text-muted);
  font-size: 11.5px;
  margin-left: 4px;
}
.as-overview-block p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 8px;
}
.as-overview-block p:last-child { margin-bottom: 0; }

/* Layer accordions on the entry overview — replaces a flat list with
   inline progressive disclosure so a superintendent scanning the entry
   page can preview each layer's checkpoints without leaving. Bodies
   are JS-populated from content.json on init. */
.as-overview-layer-hint {
  font-size: 12px;
  color: var(--text-faint);
  font-style: italic;
  margin-bottom: 10px !important;
}
.as-overview-layer-accordions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.as-overview-layer-accordion {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.as-overview-layer-accordion[open] {
  border-color: var(--primary);
  box-shadow: 0 1px 3px rgba(13, 148, 136, 0.06);
}
.as-overview-layer-accordion summary {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.as-overview-layer-accordion summary::-webkit-details-marker { display: none; }
.as-overview-layer-accordion summary:hover { background: var(--bg); }
.as-overview-layer-accordion[open] summary { background: var(--primary-faint); }
.as-overview-layer-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary-faint);
  color: var(--primary-hover);
  font-size: 12px;
  font-weight: 700;
}
.as-overview-layer-accordion[open] .as-overview-layer-num {
  background: var(--primary);
  color: white;
}
.as-overview-layer-name {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
}
.as-overview-layer-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.as-overview-layer-accordion[open] .as-overview-layer-count {
  color: var(--primary-hover);
}
.as-overview-layer-count::after {
  content: " checkpoints";
  font-weight: 500;
  letter-spacing: 0.02em;
}
.as-overview-layer-caret {
  font-size: 12px;
  color: var(--text-faint);
  transition: transform 0.2s;
}
.as-overview-layer-accordion[open] .as-overview-layer-caret {
  transform: rotate(180deg);
  color: var(--primary);
}
.as-overview-layer-body {
  padding: 16px 18px 18px;
  border-top: 1px solid var(--gray-200);
  background: var(--surface);
}
.as-overview-layer-intro {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 14px !important;
}
.as-overview-cp-chips {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.as-overview-cp-chip {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
  transition: border-color 0.12s, background 0.12s;
}
.as-overview-cp-chip:hover {
  border-color: var(--primary);
  background: white;
}
.as-overview-cp-chip-id {
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.02em;
  font-size: 12px;
}
.as-overview-cp-chip-name {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--text);
}
.as-overview-cp-chip-badges {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .as-overview-layer-accordion summary { grid-template-columns: 24px 1fr auto; gap: 10px; }
  .as-overview-layer-caret { display: none; }
  .as-overview-cp-chip { grid-template-columns: 36px 1fr; gap: 8px; }
  .as-overview-cp-chip-badges { grid-column: 2; padding-top: 2px; }
}

.as-overview-key {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.as-overview-key-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}
.as-overview-key-row .teri-badge {
  margin-top: 1px;
}
.as-overview-key-text { padding-top: 2px; }

@media (max-width: 720px) {
  .as-overview-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .as-overview-stat-num { font-size: 22px; }
  .as-overview-key-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Save-your-work notice on the entry — renders just above the action
   buttons so it's read at the start of the session. Pairs with the
   matching .rp-save-notice on the report. Marigold accent draws the eye
   without alarming red. */
.as-save-notice {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 18px;
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid var(--pop);
  border-radius: 0 8px 8px 0;
  margin-top: 24px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}
.as-save-notice-icon {
  color: var(--pop);
  margin-top: 1px;
}
.as-save-notice-body strong { color: #92400e; font-weight: 700; display: block; margin-bottom: 2px; }

.as-entry-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
  align-items: center;
}
/* Top quick-start row — sits at the top of the entry card so users
   who already know what they want don't have to scroll past the
   whole orientation block. */
.as-entry-actions--top {
  margin-top: 0;
  margin-bottom: 24px;
  padding: 16px 18px;
  background: var(--primary-faint);
  border: 1px solid rgba(13, 148, 136, 0.20);
  border-radius: 10px;
}
.as-entry-actions-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
  flex: 1 1 100%;
  margin: 0;
  line-height: 1.5;
}
@media (min-width: 720px) {
  .as-entry-actions-hint {
    flex: 1 1 auto;
    margin-left: 4px;
  }
}
.as-privacy {
  margin-top: 18px;
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.55;
  max-width: 640px;
}

/* ── BUTTONS ── */
.as-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.as-btn--primary {
  background: var(--primary);
  color: white;
}
.as-btn--primary:hover { background: var(--primary-hover); }
.as-btn--primary:disabled {
  background: var(--gray-400);
  cursor: not-allowed;
}
.as-btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--gray-200);
}
.as-btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
.as-btn--ghost:disabled { opacity: 0.4; cursor: not-allowed; }
.as-btn--ghost-sm {
  background: transparent;
  color: var(--primary);
  border-color: var(--gray-200);
  padding: 6px 12px;
  font-size: 12px;
}
.as-btn--ghost-sm:hover { border-color: var(--primary); background: var(--primary-faint); }

/* Secondary variant — for the "View your report →" skip button that
   surfaces in the run-nav when every CP is already answered. Reads as
   a strong-but-not-primary action: marigold-bordered with text-color
   text, hover fills marigold. Distinct enough from .as-btn--primary
   (Continue) that the eye routes "Continue forward" vs "Jump to
   report" without confusion. */
.as-btn--secondary {
  background: white;
  color: var(--text);
  border-color: var(--pop);
  font-weight: 600;
}
.as-btn--secondary:hover {
  background: var(--pop);
  color: white;
  border-color: var(--pop);
}

/* ══════════════════════════════════════════════
   RUN PANEL — top chrome (mode switch + progress)
   ══════════════════════════════════════════════ */

.as-run-header {
  background: var(--surface);
  border-bottom: 1px solid var(--gray-200);
  padding: 16px 24px;
  position: sticky;
  top: 58px; /* sits under the site nav */
  z-index: 50;
}
.as-run-header-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
}
@media (max-width: 720px) {
  .as-run-header-inner { grid-template-columns: 1fr; gap: 10px; }
}

/* Sticky compact layer chip in the run header — orientation cue across
   35 checkpoints. Color-coded per layer to reinforce the layer color
   tier used elsewhere on the site. */
.as-run-layer-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--primary-faint);
  color: var(--primary-hover);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.as-run-layer-chip[data-layer="1"],
.as-run-layer-chip[data-layer="2"] { background: rgba(19, 78, 74, 0.10); color: var(--accent); }
.as-run-layer-chip[data-layer="3"],
.as-run-layer-chip[data-layer="4"] { background: rgba(13, 148, 136, 0.12); color: var(--primary-hover); }
.as-run-layer-chip[data-layer="5"] { background: rgba(94, 234, 212, 0.18); color: #115e59; }
.as-run-layer-chip-num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.as-run-layer-chip-name {
  font-weight: 600;
}
@media (max-width: 720px) {
  .as-run-layer-chip { align-self: flex-start; }
}

/* Progress */
.as-run-progress { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.as-run-progress-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
}
.as-run-progress-label #as-progress-text { font-weight: 700; }
.as-run-progress-sub { color: var(--text-faint); }
.as-run-progress-bar {
  height: 6px;
  background: var(--gray-200);
  border-radius: 999px;
  overflow: hidden;
}
.as-run-progress-fill {
  height: 100%;
  background: var(--primary);
  transition: width 0.3s ease;
}

/* Live tier indicator under the progress bar — calm informational display,
   not gamified. Updates as answers come in. Mirrors the color hierarchy
   used in the layer cards: deep teal Leading → primary teal Established
   → light teal Engaged. Frontier-honest framing in `blockers` text. */
.as-run-tier {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
  flex-wrap: wrap;
}
.as-run-tier-label {
  color: var(--text-faint);
  font-weight: 500;
}
.as-run-tier-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.as-run-tier-pill[data-tier=""],
.as-run-tier-pill:not([data-tier]) {
  background: var(--gray-200);
  color: var(--text-muted);
}
.as-run-tier-pill[data-tier="engaged"] {
  background: rgba(20, 184, 166, 0.12);
  color: var(--primary-hover);
  border-color: rgba(20, 184, 166, 0.4);
}
.as-run-tier-pill[data-tier="established"] {
  background: rgba(13, 148, 136, 0.16);
  color: var(--primary-hover);
  border-color: rgba(13, 148, 136, 0.5);
}
.as-run-tier-pill[data-tier="leading"] {
  background: rgba(19, 78, 74, 0.14);
  color: var(--accent);
  border-color: rgba(19, 78, 74, 0.5);
  position: relative;
}
.as-run-tier-pill[data-tier="leading"]::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pop);
  margin-left: 6px;
  vertical-align: 1px;
}
.as-run-tier-hint {
  color: var(--text-faint);
  font-style: italic;
}

.as-run-actions { text-align: right; }

/* ══════════════════════════════════════════════
   SCREEN HOST — renders current checkpoint / layer
   ══════════════════════════════════════════════ */

.as-screen-host {
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 32px 24px;
}

/* Single-checkpoint screen (Standard + Deep modes) */
.as-cp-screen { }
.as-cp-layer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--primary-faint);
  color: var(--primary-hover);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.as-cp-id-title {
  font-family: var(--serif);
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.as-cp-id-title .as-cp-id {
  color: var(--primary);
  margin-right: 8px;
}
.as-cp-badges { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: 0.2em; }

/* "What this is" — auto-collapsing accordion. Open by default on the
   first checkpoint; auto-collapsed on subsequent ones once the user has
   recorded a definite answer somewhere. Reduces re-reading load across
   35 screens without sacrificing audit fidelity. */
.as-cp-what-details {
  margin-bottom: 22px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
.as-cp-what-details[open] {
  border-color: rgba(13, 148, 136, 0.35);
}
.as-cp-what-details summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: var(--bg);
}
.as-cp-what-details summary::-webkit-details-marker { display: none; }
.as-cp-what-details[open] summary {
  background: var(--primary-faint);
  border-bottom: 1px solid rgba(13, 148, 136, 0.20);
}
.as-cp-what-details summary:hover { background: var(--primary-faint); }
.as-cp-what-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.as-cp-what-details[open] .as-cp-what-label { color: var(--primary-hover); }
.as-cp-what-caret {
  font-size: 12px;
  color: var(--text-faint);
  transition: transform 0.2s;
}
.as-cp-what-details[open] .as-cp-what-caret {
  transform: rotate(180deg);
  color: var(--primary);
}
.as-cp-what {
  font-size: 15px;
  color: var(--text);
  line-height: 1.65;
  padding: 16px 22px 18px;
}

/* First-encounter indicator tooltips — small inline explainers shown
   the first time ⚖ or ◆ appears in the assessment, then dismissed for
   the session. seenIndicators tracks which kinds have been shown. */
.as-cp-indicator-tips {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.as-cp-indicator-tip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 18px;
  background: var(--bg);
  border: 1px dashed var(--gray-300, #cbd5e1);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
}
.as-cp-indicator-tip .teri-badge {
  margin-top: 1px;
  cursor: default;
}
.as-cp-indicator-tip p {
  margin: 0;
  color: var(--text-muted);
}
.as-cp-indicator-tip strong { color: var(--text); }
.as-cp-indicator-tip em {
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
}

/* State-law verification cue — sits just above the level picker on
   state-law-flagged checkpoints. Mirrors the frontier cue but uses
   primary teal to match the state-law badge color tier. The imperative
   phrasing in the body ("Verify with your state…") makes the audit
   action explicit at the decision moment — earlier framing read like
   the district had to be at Established to comply, when actually the
   correct level depends on each state's specific law. */
.as-cp-state-cue {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  margin-bottom: 14px;
  background: rgba(13, 148, 136, 0.08);
  border-left: 3px solid var(--primary);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.as-cp-state-cue strong { color: var(--primary-hover); font-weight: 700; }
.as-cp-state-cue-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--primary);
  margin-top: 2px;
}
.as-cp-state-cue-icon svg { width: 14px; height: 14px; }

/* Frontier honesty cue — sits just above the level picker on frontier
   checkpoints so the framing is read at the decision moment, not just
   when the badge first catches the eye. */
.as-cp-frontier-cue {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  margin-bottom: 14px;
  background: rgba(245, 158, 11, 0.10);
  border-left: 3px solid var(--pop);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  line-height: 1.55;
  color: #78350f;
}
.as-cp-frontier-cue strong { color: #92400e; font-weight: 700; }
.as-cp-frontier-cue em { color: #92400e; font-style: italic; font-weight: 600; }
.as-cp-frontier-cue-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--pop);
  margin-top: 2px;
}
.as-cp-frontier-cue-icon svg { width: 14px; height: 14px; }

/* Sustainability lens cue — same grid pattern as state-law / frontier
   cues. Lime-leaning palette so it reads distinct from the teal state-
   law cue and the marigold frontier cue. */
.as-cp-sustainability-cue {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  margin-bottom: 14px;
  background: rgba(101, 163, 13, 0.10);
  border-left: 3px solid #65a30d;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  line-height: 1.55;
  color: #3f6212;
}
.as-cp-sustainability-cue strong { color: #365314; font-weight: 700; }
.as-cp-sustainability-cue em { color: #3f6212; font-style: italic; font-weight: 600; }
.as-cp-sustainability-cue-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #65a30d;
  margin-top: 2px;
}
.as-cp-sustainability-cue-icon svg { width: 14px; height: 14px; }

/* ── Per-checkpoint accordions (Why / Connects / Go deeper) ──
   Uses native <details>/<summary> for keyboard + a11y. Sits below the
   level picker so the answer flow stays uninterrupted; opening one is
   pure progressive disclosure for districts that want more context. */
.as-cp-accordions {
  margin-top: 26px;
  margin-bottom: 18px;
  border-top: 1px solid var(--gray-200);
}
.as-cp-accordion {
  border-bottom: 1px solid var(--gray-200);
}
.as-cp-accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.as-cp-accordion summary::-webkit-details-marker { display: none; }
.as-cp-accordion summary:hover { color: var(--primary); }
.as-cp-accordion-summary-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.as-cp-accordion[open] .as-cp-accordion-summary-label { color: var(--primary-hover); }
.as-cp-accordion-caret {
  font-size: 11px;
  color: var(--text-faint);
  transition: transform 0.2s;
}
.as-cp-accordion[open] .as-cp-accordion-caret {
  transform: rotate(180deg);
  color: var(--primary);
}
.as-cp-accordion-body {
  padding: 4px 4px 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}
.as-cp-gd-section { margin-bottom: 12px; }
.as-cp-gd-section:last-child { margin-bottom: 0; }
.as-cp-gd-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.as-cp-gd-list {
  margin: 0;
  padding-left: 18px;
}
.as-cp-gd-list li {
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: 13px;
}

/* Maturity level picker */
.as-cp-ask {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
}

/* Comparison cards (Option D, locked 2026-04-25) — four equally-wide
   cards stacked vertically. Each card shows the full criteria for that
   level so the reader can scan all four at once before committing.
   Hover/focus lifts a card with the level color border + soft shadow.
   Click commits — selected card stays elevated with a tinted bg + a
   "✓ Selected" pill. Funding row attaches inside the selected card
   for Established / Leading. */
.as-compare-deck {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.as-compare-card {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 16px;
  align-items: stretch;
  padding: 16px 22px 16px 16px;
  background: var(--surface);
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  text-align: left;
  width: 100%;
  position: relative;
  /* role=radio is set in markup; keep the visual focus ring tight. */
}
.as-compare-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.as-compare-card-rail {
  width: 4px;
  border-radius: 2px;
  align-self: stretch;
  justify-self: center;
  background: var(--gray-200);
  transition: background 0.18s ease, width 0.18s ease;
}
.as-compare-card[data-level="not-started"] .as-compare-card-rail { background: #9ca3af; }
.as-compare-card[data-level="emerging"]    .as-compare-card-rail { background: #d97706; }
.as-compare-card[data-level="established"] .as-compare-card-rail { background: #0d9488; }
.as-compare-card[data-level="leading"]     .as-compare-card-rail { background: #134e4a; }
.as-compare-card-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.as-compare-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.18s ease;
}
.as-compare-card[data-level="not-started"] .as-compare-card-label { color: #6b7280; }
.as-compare-card[data-level="emerging"]    .as-compare-card-label { color: #b45309; }
.as-compare-card[data-level="established"] .as-compare-card-label { color: var(--primary-hover); }
.as-compare-card[data-level="leading"]     .as-compare-card-label { color: var(--accent); }
.as-compare-card-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
}

/* Hover / focus — lifts the card with the level's color border and a
   soft shadow. Doesn't commit yet. The rail thickens as a secondary
   affordance so the level color stays prominent. */
.as-compare-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}
.as-compare-card[data-level="not-started"]:hover { border-color: #9ca3af; }
.as-compare-card[data-level="emerging"]:hover    { border-color: #d97706; }
.as-compare-card[data-level="established"]:hover { border-color: #0d9488; }
.as-compare-card[data-level="leading"]:hover     { border-color: #134e4a; }
.as-compare-card:hover .as-compare-card-rail { width: 6px; }

/* Selected (committed) — solid colored border + tinted background +
   "✓ Selected" pill so the choice is unmistakable when the user moves
   off the card. */
.as-compare-card--selected {
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
  border-width: 2px;
}
.as-compare-card--selected[data-level="not-started"] { border-color: #6b7280; background: #f9fafb; }
.as-compare-card--selected[data-level="emerging"]    { border-color: #d97706; background: #fffbeb; }
.as-compare-card--selected[data-level="established"] { border-color: #0d9488; background: #f0fdfa; }
.as-compare-card--selected[data-level="leading"]     { border-color: #134e4a; background: #ecfdf5; }
.as-compare-card--selected .as-compare-card-rail { width: 6px; }
.as-compare-card--selected::after {
  content: "✓ Selected";
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: white;
  color: var(--text-muted);
  pointer-events: none;
}
.as-compare-card--selected[data-level="not-started"]::after { color: #6b7280; border: 1px solid #9ca3af; }
.as-compare-card--selected[data-level="emerging"]::after    { color: #b45309; border: 1px solid #d97706; }
.as-compare-card--selected[data-level="established"]::after { color: var(--primary-hover); border: 1px solid #0d9488; }
.as-compare-card--selected[data-level="leading"]::after     { color: var(--accent); border: 1px solid #134e4a; }

/* Per-checkpoint funding row — only shown when a user has answered
   Established or Leading on a checkpoint. Replaces the prior bottom-
   of-report single budget checkbox with an at-the-moment-of-decision
   ask. Rollup is computed automatically and gates the Integrated tier. */
.as-cp-funding {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  margin: 10px 0 4px;
  background: rgba(245, 158, 11, 0.10);
  border-left: 3px solid var(--pop);
  border-radius: 0 8px 8px 0;
}
.as-cp-funding--acknowledged {
  background: rgba(13, 148, 136, 0.10);
  border-left-color: var(--primary);
}
.as-cp-funding-label {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.as-cp-funding-label input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--pop);
  cursor: pointer;
  flex-shrink: 0;
}
.as-cp-funding--acknowledged .as-cp-funding-label input[type="checkbox"] {
  accent-color: var(--primary);
}
.as-cp-funding-text strong { color: #92400e; }
.as-cp-funding--acknowledged .as-cp-funding-text strong { color: var(--primary-hover); }
.as-cp-funding-status {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  padding-left: 30px;
  line-height: 1.5;
}
.as-cp-funding--acknowledged .as-cp-funding-status {
  color: var(--primary-hover);
  font-style: normal;
  font-weight: 600;
}

/* Forward-looking budget heads-up — only rendered when the user has
   committed Emerging. Subtle, informational; no interaction. Pairs
   "where you are" (Emerging) with "what's coming" (the budget gate at
   Established). Visually quieter than .as-cp-funding so it reads as
   advisory, not a required step. */
.as-cp-budget-headsup {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  margin: 10px 0 4px;
  background: var(--bg);
  border: 1px dashed var(--gray-300, #cbd5e1);
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.as-cp-budget-headsup strong { color: #92400e; font-weight: 700; }
.as-cp-budget-headsup-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--pop);
  font-weight: 700;
  font-size: 14px;
  margin-top: 1px;
}

/* "I'm not sure" — secondary action below the level cards. Replaces
   the prior 5th radio ('Not sure yet') so it doesn't visually compete
   with the four audit levels. Clicking flags the checkpoint for
   follow-up research; clicking again unflags. Becomes a checked
   "✓ Flagged for follow-up research" pill in the active state. */
.as-cp-unsure-row {
  display: flex;
  justify-content: flex-end;
  margin: 22px 0 18px;
  /* Hairline separator above the unsure pill so it reads as a
     deliberately-separate option, not "the next thing in the level
     list." Prevents the accidental click where a user means to pick
     Leading and lands on the unsure flag because the buttons feel
     contiguous. Fallbacks on the var() calls so the rule survives
     environments where base.css hasn't loaded yet. */
  padding-top: 14px;
  border-top: 1px dashed var(--gray-200, #e5e7eb);
  position: relative;
}
.as-cp-unsure-row::before {
  content: 'or, if you need to research';
  position: absolute;
  top: -8px;
  right: 16px;
  background: var(--surface, #ffffff);
  padding: 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-faint, #94a3b8);
}
.as-cp-unsure-link {
  background: transparent;
  border: 1px dashed var(--gray-300, #cbd5e1);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-style: italic;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.as-cp-unsure-link:hover {
  border-color: var(--text-muted);
  color: var(--text);
  background: var(--bg);
}
.as-cp-unsure-link--active {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.6);
  border-style: solid;
  color: #92400e;
  font-style: normal;
}
.as-cp-unsure-link--active:hover {
  background: rgba(245, 158, 11, 0.18);
  color: #78350f;
}

/* ══════════════════════════════════════════════
   PER-CHECKPOINT NOTES — captures snapshot-in-time
   evidence / rationale alongside each level commitment.
   Surfaces in live results + saved HTML export so the
   district can carry context to its own working doc and
   to board summaries. Free-text, unbounded, persisted
   on input. Not encoded in the share URL.
   ══════════════════════════════════════════════ */
.as-cp-note-block {
  margin: 10px 0 4px;
  padding: 12px 14px 12px;
  background: rgba(13, 148, 136, 0.06);
  border-left: 3px solid var(--primary);
  border-radius: 0 8px 8px 0;
}
/* When the unsure flag is the active answer, notes render below the
   level deck (no card to sit inside). Slightly more breathing room so
   the standalone block doesn't collide with the unsure-row pill above. */
.as-cp-screen > .as-cp-note-block {
  margin: 18px 0 22px;
  padding: 16px 18px 14px;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--primary);
  border-radius: 0 10px 10px 0;
}
.as-cp-note-label {
  display: block;
  margin-bottom: 10px;
  cursor: pointer;
}
.as-cp-note-label-main {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.as-cp-note-label-hint {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}
.as-cp-note-label-hint strong {
  color: var(--primary-hover);
  font-weight: 700;
}
.as-cp-note-textarea {
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.as-cp-note-textarea::placeholder {
  color: var(--text-faint);
  font-style: italic;
}
.as-cp-note-textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

/* ══════════════════════════════════════════════
   AUTO-ADVANCE CUE — bottom-floating toast shown
   between level click and the next checkpoint render
   ══════════════════════════════════════════════ */
/* When a user picks Not Started / Emerging / Established / Leading,
   the assessment auto-advances to the next checkpoint after ~500ms.
   This toast confirms what's happening + offers a Cancel so the user
   doesn't feel railroaded. Hidden by default; shown via the
   `--visible` modifier. */
.as-auto-advance-cue {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 16px;
  background: var(--text);
  color: white;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 200;
}
.as-auto-advance-cue--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.as-auto-advance-cue-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: white;
  border-radius: 50%;
  animation: as-aa-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes as-aa-spin { to { transform: rotate(360deg); } }
.as-auto-advance-cue-text { white-space: nowrap; }
.as-auto-advance-cue-cancel {
  background: transparent;
  border: none;
  color: var(--pop);
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 6px;
  margin-left: 4px;
  border-radius: 4px;
}
.as-auto-advance-cue-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
}
@media (prefers-reduced-motion: reduce) {
  .as-auto-advance-cue { transition: none; }
  .as-auto-advance-cue-spinner { animation: none; }
}
@media (max-width: 560px) {
  .as-auto-advance-cue { bottom: 76px; font-size: 12px; padding: 7px 12px; }
}

/* ══════════════════════════════════════════════
   LAYER INTERSTITIAL — between L1→L2, L2→L3, etc.
   ══════════════════════════════════════════════ */
/* Brief pause screen between layers — celebrates progress, snapshots
   the layer's distribution, previews the next layer, and reassures
   that work is auto-saved if the user wants to step away. */
.as-interstitial {
  text-align: center;
  padding: 24px 0 12px;
  max-width: 640px;
  margin: 0 auto;
}
.as-interstitial-icon {
  display: inline-flex;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary-faint);
  color: var(--primary);
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.as-interstitial-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 10px;
}
.as-interstitial-title {
  font-family: var(--serif);
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.as-interstitial-sub {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 20px;
}
.as-interstitial-snapshot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}
.as-int-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.as-int-pill[data-level="leading"]      { background: #134e4a; color: white; }
.as-int-pill[data-level="established"]  { background: #0d9488; color: white; }
.as-int-pill[data-level="emerging"]     { background: #fef3c7; color: #92400e; }
.as-int-pill[data-level="not-started"]  { background: #f3f4f6; color: #4b5563; }
.as-int-pill[data-level="unsure"]       { background: rgba(245, 158, 11, 0.18); color: #92400e; font-style: italic; }

.as-interstitial-next {
  margin-bottom: 18px;
  text-align: left;
}
.as-int-next-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.as-int-next-card {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-left: 5px solid var(--primary);
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
}
.as-int-next-card.layer-1,
.as-int-next-card.layer-2 { border-left-color: var(--accent); }
.as-int-next-card.layer-3,
.as-int-next-card.layer-4 { border-left-color: var(--primary); }
.as-int-next-card.layer-5 { border-left-color: #14b8a6; }
.as-int-next-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 4px;
}
.as-int-next-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.25;
}
.as-int-next-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 6px;
}
.as-int-next-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}
.as-interstitial-resume-hint {
  font-size: 12px;
  color: var(--text-faint);
  font-style: italic;
  line-height: 1.55;
  text-align: center;
  margin-top: 8px;
}

/* ══════════════════════════════════════════════
   RUN — bottom nav
   ══════════════════════════════════════════════ */
.as-run-nav {
  background: var(--surface);
  border-top: 1px solid var(--gray-200);
  padding: 16px 24px;
  position: sticky;
  bottom: 0;
  z-index: 40;
}
.as-run-nav-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 560px) {
  .as-run-nav-inner { flex-direction: column; }
  .as-run-nav-inner .as-btn { width: 100%; justify-content: center; }
}

/* Persistent in-development line under the run nav. Visually
   restrained (smaller type, muted background) so it doesn't compete
   with the CP question, but always available so an auditing
   superintendent has a feedback channel one click away. */
.as-run-status {
  background: rgba(13, 148, 136, 0.05);
  border-top: 1px solid var(--gray-200);
  padding: 10px 24px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.as-run-status-pill {
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
}
.as-run-status a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.as-run-status a:hover { color: var(--primary-hover); }

/* ══════════════════════════════════════════════
   RESULTS — reuses report-sample styling, populated live
   ══════════════════════════════════════════════ */

/* Anchor for the rendered report markup. Actual styles reused from the
   report-sample.html pattern via these class aliases so a future CSS
   extraction can consolidate both. */
.as-results-sheet {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--surface);
}
.as-results-sheet .as-results-back {
  padding: 16px 32px 0;
}
.as-results-sheet .as-results-back a {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
}
.as-results-sheet .as-results-back a:hover { color: var(--primary); }

/* Results chrome (reuses `.rp-*` patterns via cloning in JS) —
   if user revisits, they see the same look as the sample report. */

/* ══════════════════════════════════════════════
   INLINE EDIT MODAL — opened from FAS row Edit
   buttons. Lets users adjust one CP's level,
   notes, and funding flag without leaving the
   report. Reuses .as-compare-card markup so the
   level picker matches the run flow.
   ══════════════════════════════════════════════ */
.as-edit-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 25, 0.55);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  overflow-y: auto;
  animation: as-edit-modal-fade 0.18s ease-out;
}
@keyframes as-edit-modal-fade {
  from { background: rgba(10, 22, 25, 0); }
  to   { background: rgba(10, 22, 25, 0.55); }
}
.as-edit-modal {
  background: var(--surface);
  border-radius: 12px;
  max-width: 720px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(10, 22, 25, 0.30);
  margin: auto 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 64px);
  overflow: hidden;
  animation: as-edit-modal-slide 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes as-edit-modal-slide {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.as-edit-modal-head {
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--gray-200);
  background: var(--bg);
  position: relative;
}
.as-edit-modal-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 10px;
}
.as-edit-modal-layer-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--gray-100, #f3f4f6);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.as-edit-modal-layer-chip[data-layer="1"] { color: #134e4a; background: rgba(19, 78, 74, 0.10); }
.as-edit-modal-layer-chip[data-layer="2"] { color: #0d9488; background: rgba(13, 148, 136, 0.10); }
.as-edit-modal-layer-chip[data-layer="3"] { color: #0f766e; background: rgba(94, 234, 212, 0.18); }
.as-edit-modal-layer-chip[data-layer="4"] { color: #6d28d9; background: rgba(109, 40, 217, 0.10); }
.as-edit-modal-layer-chip[data-layer="5"] { color: #b45309; background: rgba(245, 158, 11, 0.14); }
.as-edit-modal-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}
.as-edit-modal-id {
  font-family: var(--serif);
  color: var(--text-muted);
  margin-right: 10px;
}
.as-edit-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.as-edit-modal-close:hover {
  background: var(--gray-200);
  color: var(--text);
}
.as-edit-modal-body {
  padding: 22px 28px 8px;
  overflow-y: auto;
  flex: 1;
}
.as-edit-modal-prompt {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.as-edit-modal-foot {
  padding: 16px 28px 22px;
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--bg);
}
/* Body-class lock so the page behind the modal doesn't scroll while
   the modal is open. */
body.as-edit-modal-open {
  overflow: hidden;
}

/* ── Print ──
   Note: the rich print pagination rules (break-inside: avoid on cards,
   break-after: avoid on headers, orphans/widows, @page footer with
   copyright + page numbers, density tightening) live in
   assessment.js → injectResultsStyles() so the saved-HTML download
   carries them too. The rules here just hide app chrome that doesn't
   make sense in print. */
@media print {
  nav, footer,
  .as-run-header, .as-run-nav,
  .as-results-back,
  .as-edit-modal-overlay { display: none !important; }
  body { background: white !important; }
  .as-panel { max-width: 100%; }
  .as-results-sheet { max-width: 100%; box-shadow: none; }
}