/* ============================================================
 * CATHEDRAL COMPONENT LIBRARY
 * KIPP Delta Analytics Platform V2
 *
 * 22 reusable components. All values from tokens.css.
 * Mobile-first. BEM-like naming. Print-safe.
 *
 * Components:
 *   1.  .card                  Base card
 *   2.  .kpi-grid              KPI metric layout
 *   3.  .kpi-card              Individual KPI metric
 *   4.  .school-card           School summary card
 *   5.  .data-table            Sortable data table
 *   6.  .risk-bar              Stacked risk distribution bar
 *   7.  .chart-container       Chart wrapper
 *   8.  .deep-dive-card        Threshold-triggered deep dive
 *   9.  .nav-breadcrumb        Breadcrumb navigation
 *  10.  .page-header           Page hero
 *  11.  .section-header        Section divider
 *  12.  .badge                 Status badges
 *  13.  .alert-bar             Top-of-page alerts
 *  14.  .metric-gauge          Circular/semicircular gauge
 *  15.  .teacher-tab-nav       Section navigation tabs
 *  16.  .inline-student-card   Expandable student row
 *  17.  .compliance-gauge      Attendance compliance indicator
 *  18.  .rc-*                 Research context (nudge, popout, section)
 *  19.  .prescription-banner  Prescription-first page banner
 *  20.  .segment-dashboard    Four-segment intervention dashboard
 *  21.  .priority-action-card Executive priority action card
 *  22.  .bubble-student-list  Grouped bubble student list
 *  23.  .intervention-card    Grade-level intervention action card
 *
 * Last updated: 2026-03-05 (prescriptive components)
 * ============================================================ */


/* ============================================================
 * GLOBAL RESET & BASE
 * ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--surface-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
 * 1. CARD
 *
 * Base card with elevation and padding.
 * Usage: <div class="card">...</div>
 *        <div class="card card--flat">...</div>
 * ============================================================ */

.card {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--card-padding);
  box-shadow: var(--shadow-sm);
}

.card--flat {
  box-shadow: none;
}

.card--elevated {
  box-shadow: var(--shadow-md);
}

.card--interactive {
  cursor: pointer;
  transition: box-shadow var(--transition-fast),
              border-color var(--transition-fast);
}

.card--interactive:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.card--interactive:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media print {
  .card {
    box-shadow: none;
    border: 1px solid var(--border-default);
    break-inside: avoid;
    page-break-inside: avoid;
  }
}


/* ============================================================
 * 2. KPI GRID
 *
 * Grid layout for KPI metric cards.
 * Usage: <div class="kpi-grid">
 *          <div class="kpi-card">...</div>
 *          ...
 *        </div>
 * ============================================================ */

.kpi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kpi-gap);
}

@media (min-width: 480px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .kpi-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media print {
  .kpi-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
  }
}


/* ============================================================
 * 3. KPI CARD
 *
 * Individual KPI metric with label, value, and trend.
 * Usage: <div class="kpi-card">
 *          <span class="kpi-card__label">% On Track</span>
 *          <span class="kpi-card__value">27.7%</span>
 *          <span class="kpi-card__trend kpi-card__trend--up">+2.1%</span>
 *        </div>
 * ============================================================ */

.kpi-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--card-padding-sm);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.kpi-card__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.kpi-card__value {
  font-family: var(--font-data);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

.kpi-card__trend {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.kpi-card__trend--up {
  color: var(--color-success);
}

.kpi-card__trend--down {
  color: var(--color-danger);
}

.kpi-card__trend--flat {
  color: var(--text-muted);
}

/* Accent border for highlighted KPIs */
.kpi-card--critical {
  border-left: 3px solid var(--color-critical);
}

.kpi-card--warning {
  border-left: 3px solid var(--color-warning);
}

.kpi-card--success {
  border-left: 3px solid var(--color-success);
}

@media print {
  .kpi-card {
    break-inside: avoid;
  }
}


/* ============================================================
 * 4. SCHOOL CARD
 *
 * School-level summary card used on executive page.
 * Usage: <div class="school-card">
 *          <div class="school-card__header">
 *            <h3 class="school-card__name">BCPS</h3>
 *            <span class="school-card__enrollment">258 students</span>
 *          </div>
 *          <div class="school-card__body">
 *            <div class="kpi-grid">...</div>
 *          </div>
 *        </div>
 * ============================================================ */

.school-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.school-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-4) var(--card-padding);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-inset);
}

.school-card__name {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.school-card__enrollment {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.school-card__body {
  padding: var(--card-padding);
}

.school-card--interactive {
  cursor: pointer;
  transition: box-shadow var(--transition-fast);
}

.school-card--interactive:hover {
  box-shadow: var(--shadow-md);
}

.school-card--interactive:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Prescriptive school card extensions */
.school-card--prescriptive .school-card__header {
  border-bottom: none;
  padding-bottom: 0;
}

.school-card__projection {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--card-padding) var(--space-2);
}

.school-card__grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  font-family: var(--font-data);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--surface-elevated);
  flex-shrink: 0;
}

.school-card__grade-badge--a { background: #1a7a3a; }
.school-card__grade-badge--b { background: #2d7a3a; }
.school-card__grade-badge--c { background: #d4a843; }
.school-card__grade-badge--d { background: #c25450; }
.school-card__grade-badge--f { background: #8b2020; }

.school-card__projection-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.school-card__grade-trajectory {
  font-family: var(--font-data);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.school-card__grade-margin {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.school-card__action {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: var(--space-1) var(--card-padding) var(--space-2);
  line-height: var(--leading-relaxed);
}

@media print {
  .school-card {
    box-shadow: none;
    break-inside: avoid;
  }
}


/* ============================================================
 * 5. DATA TABLE
 *
 * Sortable data table with alternating rows.
 * Usage: <div class="data-table-wrap">
 *          <table class="data-table">
 *            <thead>...</thead>
 *            <tbody>...</tbody>
 *          </table>
 *        </div>
 * ============================================================ */

.data-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

.data-table thead {
  background: var(--surface-inset);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.data-table th {
  padding: var(--table-cell-padding);
  text-align: left;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-bottom: 2px solid var(--border-strong);
  white-space: nowrap;
  user-select: none;
}

.data-table th[data-sortable] {
  cursor: pointer;
}

.data-table th[data-sortable]:hover {
  color: var(--text-primary);
}

.data-table th[data-sortable]::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: var(--space-1);
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--text-muted);
}

.data-table th[aria-sort="ascending"]::after {
  border-top: none;
  border-bottom: 4px solid var(--color-blue);
}

.data-table th[aria-sort="descending"]::after {
  border-top: 4px solid var(--color-blue);
}

.data-table td {
  padding: var(--table-cell-padding);
  border-bottom: 1px solid var(--border-default);
  vertical-align: middle;
}

.data-table tbody tr:nth-child(even) {
  background: var(--surface-inset);
}

.data-table tbody tr:hover {
  background: var(--color-blue-lighter);
}

/* Right-align numeric columns */
.data-table td[data-type="number"],
.data-table th[data-type="number"] {
  text-align: right;
  font-family: var(--font-data);
}

/* Compact variant for inline student lists */
.data-table--compact th,
.data-table--compact td {
  padding: var(--table-cell-padding-sm);
  font-size: var(--text-xs);
}

@media (max-width: 480px) {
  .data-table th,
  .data-table td {
    padding: var(--table-cell-padding-sm);
    font-size: var(--text-xs);
  }
}

@media print {
  .data-table-wrap {
    overflow: visible;
  }
  .data-table tbody tr:hover {
    background: inherit;
  }
  .data-table thead {
    position: static;
  }
}


/* ============================================================
 * 6. RISK BAR
 *
 * Horizontal stacked bar showing risk distribution.
 * Usage: <div class="risk-bar">
 *          <div class="risk-bar__segment risk-bar__segment--critical"
 *               style="width: 14.5%"
 *               title="Critical: 14.5%">
 *            <span class="risk-bar__label">14.5%</span>
 *          </div>
 *          ...
 *        </div>
 * ============================================================ */

.risk-bar {
  display: flex;
  height: 28px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-gray-100);
  border: 1px solid var(--border-default);
}

.risk-bar__segment {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  transition: opacity var(--transition-fast);
}

.risk-bar__segment:hover {
  opacity: 0.85;
}

.risk-bar__segment--critical {
  background: var(--color-critical);
  color: var(--text-inverse);
}

.risk-bar__segment--at-risk {
  background: var(--color-at-risk);
  color: var(--text-inverse);
}

.risk-bar__segment--watch {
  background: var(--color-watch);
  color: var(--text-primary);
}

.risk-bar__segment--on-track {
  background: var(--color-on-track);
  color: var(--text-inverse);
}

.risk-bar__label {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  padding: 0 var(--space-1);
}

/* Hide labels on segments too narrow to display them */
.risk-bar__segment[style*="width: 0"] .risk-bar__label,
.risk-bar__segment[style*="width: 1%"] .risk-bar__label,
.risk-bar__segment[style*="width: 2%"] .risk-bar__label,
.risk-bar__segment[style*="width: 3%"] .risk-bar__label,
.risk-bar__segment[style*="width: 4%"] .risk-bar__label,
.risk-bar__segment[style*="width: 5%"] .risk-bar__label {
  visibility: hidden;
}

/* Legend variant (horizontal inline below the bar) */
.risk-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.risk-bar-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.risk-bar-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

@media print {
  .risk-bar {
    border: 1px solid #999;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .risk-bar__segment {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}


/* ============================================================
 * 7. CHART CONTAINER
 *
 * Wrapper for CSS and Canvas charts.
 * Usage: <div class="chart-container">
 *          <div class="chart-container__header">
 *            <h4 class="chart-container__title">Risk Distribution</h4>
 *          </div>
 *          <div class="chart-container__body">
 *            <canvas></canvas>
 *          </div>
 *        </div>
 * ============================================================ */

.chart-container {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.chart-container__header {
  padding: var(--space-3) var(--card-padding);
  border-bottom: 1px solid var(--border-default);
}

.chart-container__title {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.chart-container__subtitle {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-0-5);
}

.chart-container__body {
  padding: var(--card-padding);
  position: relative;
  min-height: 120px;
}

.chart-container__body canvas {
  width: 100%;
  height: auto;
}

.chart-container__footer {
  padding: var(--space-2) var(--card-padding);
  border-top: 1px solid var(--border-default);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

@media print {
  .chart-container {
    break-inside: avoid;
  }
}


/* ============================================================
 * 8. DEEP DIVE CARD
 *
 * Threshold-triggered deep dive entry point.
 * Severity: red (visible on load), yellow (available), green (hidden).
 * Usage: <div class="deep-dive-card deep-dive-card--red">
 *          <div class="deep-dive-card__icon">...</div>
 *          <div class="deep-dive-card__content">
 *            <h4 class="deep-dive-card__title">Attendance Alert</h4>
 *            <p class="deep-dive-card__summary">DCHS below 85%</p>
 *          </div>
 *          <a class="deep-dive-card__link" href="...">View</a>
 *        </div>
 * ============================================================ */

.deep-dive-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--card-padding);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--surface-elevated);
  transition: border-color var(--transition-fast);
}

.deep-dive-card:hover {
  border-color: var(--border-strong);
}

.deep-dive-card--red {
  border-left: 4px solid var(--color-critical);
  background: var(--color-critical-bg);
}

.deep-dive-card--yellow {
  border-left: 4px solid var(--color-watch);
  background: var(--color-watch-bg);
}

.deep-dive-card--green {
  display: none;
}

.deep-dive-card__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
}

.deep-dive-card__content {
  flex: 1;
  min-width: 0;
}

.deep-dive-card__title {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.deep-dive-card__summary {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-0-5);
}

.deep-dive-card__link {
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-link);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
}

.deep-dive-card__link:hover {
  color: var(--text-link-hover);
  background: var(--color-blue-lighter);
}

.deep-dive-card__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media print {
  .deep-dive-card--green {
    display: none;
  }
  .deep-dive-card {
    break-inside: avoid;
  }
}


/* ============================================================
 * 9. NAV BREADCRUMB
 *
 * Breadcrumb navigation: Region > School > Grade > Teacher
 * Usage: <nav class="nav-breadcrumb" aria-label="Breadcrumb">
 *          <ol class="nav-breadcrumb__list">
 *            <li class="nav-breadcrumb__item">
 *              <a href="/">Region</a>
 *            </li>
 *            <li class="nav-breadcrumb__item">
 *              <a href="/school/bcps/">BCPS</a>
 *            </li>
 *            <li class="nav-breadcrumb__item" aria-current="page">
 *              Grade 3
 *            </li>
 *          </ol>
 *        </nav>
 * ============================================================ */

.nav-breadcrumb {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
}

.nav-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--breadcrumb-gap);
  list-style: none;
}

.nav-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--breadcrumb-gap);
  color: var(--text-secondary);
}

.nav-breadcrumb__item + .nav-breadcrumb__item::before {
  content: '/';
  color: var(--text-muted);
}

.nav-breadcrumb__item a {
  color: var(--text-link);
  text-decoration: none;
  padding: var(--space-1) var(--space-0-5);
  border-radius: var(--radius-sm);
}

.nav-breadcrumb__item a:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

.nav-breadcrumb__item a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.nav-breadcrumb__item[aria-current="page"] {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}


/* ============================================================
 * 10. PAGE HEADER
 *
 * Page hero with title, subtitle, and date.
 * Usage: <header class="page-header">
 *          <h1 class="page-header__title">KIPP Delta Region</h1>
 *          <p class="page-header__subtitle">1,055 students across 4 buildings</p>
 *          <time class="page-header__date">Updated Feb 27, 2026</time>
 *        </header>
 * ============================================================ */

.page-header {
  padding: var(--space-6) 0 var(--space-4);
  border-bottom: 2px solid var(--color-gold);
  margin-bottom: var(--section-gap);
}

.page-header__title {
  font-family: var(--font-ui);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

@media (min-width: 768px) {
  .page-header__title {
    font-size: var(--text-3xl);
  }
}

.page-header__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

.page-header__date {
  display: block;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-2);
  letter-spacing: var(--tracking-wide);
}

@media print {
  .page-header {
    border-bottom-color: #999;
  }
}


/* ============================================================
 * 11. SECTION HEADER
 *
 * Section divider with optional subtitle.
 * Usage: <div class="section-header">
 *          <h2 class="section-header__title">Risk Overview</h2>
 *          <p class="section-header__subtitle">Concordance model V2.2</p>
 *        </div>
 * ============================================================ */

.section-header {
  padding: var(--space-4) 0 var(--space-3);
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--space-4);
}

.section-header__title {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.section-header__subtitle {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}


/* ============================================================
 * 12. BADGE
 *
 * Status badges for risk tier, assessment level, concordance.
 * Usage: <span class="badge badge--critical">Critical</span>
 *        <span class="badge badge--inflated">Inflated</span>
 * ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--badge-padding);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border-radius: var(--radius-full);
  white-space: nowrap;
  vertical-align: middle;
}

/* Risk tier badges */
.badge--critical {
  background: var(--color-critical-bg);
  color: var(--color-critical);
  border: 1px solid var(--color-critical-border);
}

.badge--at-risk {
  background: var(--color-at-risk-bg);
  color: var(--color-at-risk);
  border: 1px solid var(--color-at-risk-border);
}

.badge--watch {
  background: var(--color-watch-bg);
  color: var(--color-watch);
  border: 1px solid var(--color-watch-border);
}

.badge--on-track {
  background: var(--color-on-track-bg);
  color: var(--color-on-track);
  border: 1px solid var(--color-on-track-border);
}

/* Concordance badges */
.badge--inflated {
  background: var(--color-at-risk-bg);
  color: var(--color-at-risk);
  border: 1px solid var(--color-at-risk-border);
}

.badge--deflated {
  background: var(--color-info-bg);
  color: var(--color-info);
  border: 1px solid var(--color-blue-light);
}

.badge--aligned {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-on-track-border);
}

/* Neutral/default badge */
.badge--neutral {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  border: 1px solid var(--color-gray-200);
}

@media print {
  .badge {
    border: 1px solid #999;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}


/* ============================================================
 * 13. ALERT BAR
 *
 * Top-of-page alerts and notices.
 * Usage: <div class="alert-bar alert-bar--warning">
 *          <span class="alert-bar__text">
 *            Ice storm closures: Jan 26-30, Feb 2-3.
 *            Data may reflect irregular operations.
 *          </span>
 *        </div>
 * ============================================================ */

.alert-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--card-padding);
  border-radius: var(--radius-md);
  border: 1px solid;
  margin-bottom: var(--space-4);
}

.alert-bar--info {
  background: var(--color-info-bg);
  border-color: var(--color-blue-light);
}

.alert-bar--warning {
  background: var(--color-warning-bg);
  border-color: var(--color-watch-border);
}

.alert-bar--danger {
  background: var(--color-danger-bg);
  border-color: var(--color-critical-border);
}

.alert-bar--success {
  background: var(--color-success-bg);
  border-color: var(--color-on-track-border);
}

.alert-bar__text {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: var(--leading-normal);
}

.alert-bar__dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--text-lg);
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.alert-bar__dismiss:hover {
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.05);
}

.alert-bar__dismiss:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media print {
  .alert-bar__dismiss {
    display: none;
  }
}


/* ============================================================
 * 14. METRIC GAUGE
 *
 * Semicircular gauge for attendance rate, compliance, etc.
 * Built with CSS conic-gradient -- no Canvas, no JS.
 * Usage: <div class="metric-gauge" style="--gauge-value: 0.832">
 *          <div class="metric-gauge__arc"></div>
 *          <div class="metric-gauge__center">
 *            <span class="metric-gauge__value">83.2%</span>
 *            <span class="metric-gauge__label">Attendance</span>
 *          </div>
 *        </div>
 * ============================================================ */

.metric-gauge {
  --gauge-size: 120px;
  --gauge-track: var(--color-gray-200);
  --gauge-fill: var(--color-blue);
  --gauge-value: 0;

  position: relative;
  width: var(--gauge-size);
  height: calc(var(--gauge-size) / 2 + 10px);
  overflow: hidden;
}

.metric-gauge__arc {
  width: var(--gauge-size);
  height: var(--gauge-size);
  border-radius: 50%;
  background: conic-gradient(
    var(--gauge-fill) 0deg,
    var(--gauge-fill) calc(var(--gauge-value) * 180deg),
    var(--gauge-track) calc(var(--gauge-value) * 180deg),
    var(--gauge-track) 180deg,
    transparent 180deg
  );
  transform: rotate(-90deg);
  position: relative;
}

.metric-gauge__arc::after {
  content: '';
  position: absolute;
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: var(--surface-elevated);
}

.metric-gauge__center {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.metric-gauge__value {
  display: block;
  font-family: var(--font-data);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: 1;
}

.metric-gauge__label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-0-5);
}

/* Color modifiers based on compliance thresholds */
.metric-gauge--high {
  --gauge-fill: var(--color-compliance-high);
}

.metric-gauge--mid {
  --gauge-fill: var(--color-compliance-mid);
}

.metric-gauge--low {
  --gauge-fill: var(--color-compliance-low);
}

@media print {
  .metric-gauge__arc {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}


/* ============================================================
 * 15. TEACHER TAB NAV
 *
 * Section grouping by department for teacher pages.
 * Max 6 visible tabs, overflow handled with horizontal scroll.
 * Usage: <nav class="teacher-tab-nav" aria-label="Sections">
 *          <div class="teacher-tab-nav__scroll">
 *            <button class="teacher-tab-nav__tab
 *                          teacher-tab-nav__tab--active"
 *                    aria-selected="true">
 *              Language Arts
 *              <span class="teacher-tab-nav__count">42</span>
 *            </button>
 *            <button class="teacher-tab-nav__tab">
 *              Math
 *              <span class="teacher-tab-nav__count">42</span>
 *            </button>
 *          </div>
 *        </nav>
 * ============================================================ */

.teacher-tab-nav {
  border-bottom: 2px solid var(--border-default);
  margin-bottom: var(--space-4);
}

.teacher-tab-nav__scroll {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  gap: var(--space-0-5);
}

/* Hide scrollbar but preserve functionality */
.teacher-tab-nav__scroll::-webkit-scrollbar {
  height: 2px;
}

.teacher-tab-nav__scroll::-webkit-scrollbar-track {
  background: transparent;
}

.teacher-tab-nav__scroll::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--radius-full);
}

.teacher-tab-nav__tab {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  min-height: var(--touch-target);
  transition: color var(--transition-fast),
              border-color var(--transition-fast);
}

.teacher-tab-nav__tab:hover {
  color: var(--text-primary);
  border-bottom-color: var(--color-gray-300);
}

.teacher-tab-nav__tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.teacher-tab-nav__tab--active {
  color: var(--color-blue);
  font-weight: var(--weight-semibold);
  border-bottom-color: var(--color-blue);
}

.teacher-tab-nav__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

.teacher-tab-nav__tab--active .teacher-tab-nav__count {
  background: var(--color-blue-light);
  color: var(--color-blue);
}

/* Overflow indicator for narrow screens */
.teacher-tab-nav__overflow {
  display: none;
  align-items: center;
  padding: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

@media (max-width: 480px) {
  .teacher-tab-nav__tab {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }
}

@media print {
  .teacher-tab-nav {
    display: none;
  }
}


/* ============================================================
 * 16. INLINE STUDENT CARD
 *
 * Expandable student row. The fractal heart's atomic unit.
 * Compact when collapsed: name, risk badge, key metric.
 * Expanded: The Gap (report card vs assessment), concordance,
 * attendance, action items.
 *
 * Usage: <div class="inline-student" data-expanded="false">
 *          <button class="inline-student__header"
 *                  aria-expanded="false">
 *            <span class="inline-student__name">Henderson, T.</span>
 *            <span class="badge badge--critical">Critical</span>
 *            <span class="inline-student__metric">95.1% att</span>
 *            <span class="inline-student__chevron"></span>
 *          </button>
 *          <div class="inline-student__body">
 *            <div class="inline-student__gap">...</div>
 *            <div class="inline-student__actions">...</div>
 *          </div>
 *        </div>
 * ============================================================ */

.inline-student {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  margin-bottom: var(--space-2);
  transition: border-color var(--transition-fast);
}

.inline-student:hover {
  border-color: var(--border-strong);
}

.inline-student__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--inline-card-padding);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-primary);
  min-height: var(--touch-target);
}

.inline-student__header:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-md);
}

.inline-student__name {
  font-weight: var(--weight-semibold);
  min-width: 0;
  flex-shrink: 1;
}

.inline-student__metric {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  margin-left: auto;
}

.inline-student__chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 2px solid var(--text-muted);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
}

.inline-student[data-expanded="true"] .inline-student__chevron {
  transform: rotate(-135deg);
}

.inline-student__body {
  display: none;
  padding: 0 var(--card-padding) var(--card-padding);
  border-top: 1px solid var(--border-default);
}

.inline-student[data-expanded="true"] .inline-student__body {
  display: block;
}

/* The Gap: side-by-side report card vs assessment */
.inline-student__gap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

@media (max-width: 480px) {
  .inline-student__gap {
    grid-template-columns: 1fr;
  }
}

.inline-student__gap-col {
  min-width: 0;
}

.inline-student__gap-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-2);
}

/* Course rows within The Gap */
.inline-student__course {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1-5) 0;
  border-bottom: 1px solid var(--border-default);
  font-size: var(--text-sm);
}

.inline-student__course:last-child {
  border-bottom: none;
}

.inline-student__course-name {
  color: var(--text-secondary);
  font-family: var(--font-ui);
}

.inline-student__course-grade {
  font-family: var(--font-data);
  font-weight: var(--weight-medium);
}

.inline-student__growth {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  padding-left: var(--space-2);
  margin-top: 1px;
  margin-bottom: var(--space-1);
}

/* Action items section */
.inline-student__actions {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-default);
}

.inline-student__action {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-1-5) 0;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.inline-student__action-priority {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  margin-top: 6px;
}

.inline-student__action-priority--high {
  background: var(--color-critical);
}

.inline-student__action-priority--medium {
  background: var(--color-watch);
}

.inline-student__action-priority--low {
  background: var(--color-on-track);
}

/* N caveat for small groups */
.inline-student__caveat {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--text-muted);
  margin-top: var(--space-2);
}

@media print {
  .inline-student {
    break-inside: avoid;
  }
  .inline-student__body {
    display: block;
  }
  .inline-student__chevron {
    display: none;
  }
}


/* ============================================================
 * 17. COMPLIANCE GAUGE
 *
 * Attendance-taking compliance indicator.
 * At KBC: building-level notice replaces teacher gauge.
 * At other buildings: teacher-level gauge with color coding.
 *
 * Usage (standard): <div class="compliance-gauge">
 *   <div class="metric-gauge metric-gauge--high"
 *        style="--gauge-value: 0.907">
 *     <div class="metric-gauge__arc"></div>
 *     <div class="metric-gauge__center">
 *       <span class="metric-gauge__value">90.7%</span>
 *       <span class="metric-gauge__label">Compliance</span>
 *     </div>
 *   </div>
 * </div>
 *
 * Usage (suppressed, KBC): <div class="compliance-gauge
 *   compliance-gauge--suppressed">
 *   <div class="compliance-gauge__notice">
 *     <p class="compliance-gauge__notice-text">
 *       Attendance at this building is entered centrally.
 *       Individual compliance gauges are not displayed.
 *     </p>
 *   </div>
 * </div>
 * ============================================================ */

.compliance-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.compliance-gauge__context {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
}

/* Suppressed state for KBC */
.compliance-gauge--suppressed {
  align-items: stretch;
}

.compliance-gauge__notice {
  padding: var(--space-3) var(--card-padding);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  text-align: center;
}

.compliance-gauge__notice-text {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

@media print {
  .compliance-gauge--suppressed {
    break-inside: avoid;
  }
}


/* ============================================================
 * UTILITY: Page Container
 * ============================================================ */

.page-container {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--page-margin);
}

@media (min-width: 1024px) {
  .page-container {
    padding: 0 var(--page-margin-desktop);
  }
}

/* ============================================================
 * UTILITY: Screen Reader Only
 * ============================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================================
 * UTILITY: Focus Visible
 * ============================================================ */

:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

/* ============================================================
 * UTILITY: Reduced Motion
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
 * 18. RESEARCH CONTEXT
 *
 * Research nudge, popout, and section components.
 * Surfaces published research findings alongside deep dive data.
 * Three levels of detail: nudge (1 line), popout (expandable),
 * section (full article list).
 *
 * Usage:
 *   Nudge:   <p class="rc-nudge">One sentence...</p>
 *   Popout:  <details class="rc-popout">...</details>
 *   Section: <div class="rc-section">...</div>
 *   Link:    <a class="rc-article-link" href="...">Title</a>
 * ============================================================ */

/* ---- Nudge: subtle one-liner below deep dive summary ---- */
.rc-nudge {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-2);
  font-style: italic;
}

/* ---- Popout: expandable details panel ---- */
.rc-popout {
  background: var(--surface-secondary);
  border-left: 3px solid var(--accent-blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: var(--space-4) 0;
}

.rc-popout__summary {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-link);
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  list-style: none;
  user-select: none;
}

.rc-popout__summary::-webkit-details-marker {
  display: none;
}

.rc-popout__summary::before {
  content: '\25B6';
  display: inline-block;
  font-size: var(--text-xs);
  margin-right: var(--space-2);
  transition: transform var(--transition-fast);
}

.rc-popout[open] .rc-popout__summary::before {
  transform: rotate(90deg);
}

.rc-popout__summary:hover {
  color: var(--text-link-hover);
}

.rc-popout__summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.rc-popout__body {
  padding: 0 var(--space-4) var(--space-4);
}

.rc-popout__text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

/* ---- Section: full research block on deep dive pages ---- */
.rc-section {
  margin: var(--space-8) 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-default);
}

.rc-section__title {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.rc-section__summary {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}

.rc-section__articles {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rc-section__article {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-default);
}

.rc-section__article:last-child {
  border-bottom: none;
}

.rc-section__finding {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-1);
}

/* ---- Article link: shared across popout and section ---- */
.rc-article-link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-link);
  text-decoration: none;
}

.rc-article-link:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

.rc-article-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---- Print ---- */
@media print {
  .rc-popout {
    border-left-color: #999;
  }
  .rc-popout__body {
    display: block;
  }
  .rc-popout__summary::before {
    display: none;
  }
  .rc-nudge {
    font-style: italic;
  }
  .rc-section {
    break-inside: avoid;
  }
  .rc-article-link {
    color: #000;
    text-decoration: underline;
  }
}

/* ---- Visible variant (replaces expandable popout) ---- */
.rc-popout--visible {
  display: block;
}

.rc-popout--visible .rc-popout__body {
  padding: var(--space-3) var(--space-4);
}

.rc-popout__label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-link);
  padding: var(--space-3) var(--space-4) 0;
}


/* ============================================================
 * 19. PRESCRIPTION BANNER
 *
 * Prescription-first banner for the top of every page.
 * Leads with the insight, not the data.
 * Usage: <div class="prescription-banner">
 *          <div class="prescription-banner__content">
 *            <h2 class="prescription-banner__headline">...</h2>
 *            <p class="prescription-banner__subtext">...</p>
 *          </div>
 *          <span class="prescription-banner__confidence">...</span>
 *        </div>
 * ============================================================ */

.prescription-banner {
  background: var(--color-cream);
  border-left: 3px solid var(--color-blue);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.prescription-banner__content {
  flex: 1;
  min-width: 0;
}

.prescription-banner__headline {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  margin: 0;
}

.prescription-banner__subtext {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-2);
}

.prescription-banner__bubble-def {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
}

.prescription-banner__confidence {
  flex-shrink: 0;
  font-family: var(--font-data);
  font-size: 0.6875rem; /* 11px */
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
  line-height: 1;
  margin-top: var(--space-1);
}

.prescription-banner__confidence--high {
  background: var(--color-on-track-bg);
  color: var(--color-on-track);
  border: 1px solid var(--color-on-track-border);
}

.prescription-banner__confidence--medium {
  background: var(--color-watch-bg);
  color: var(--color-watch);
  border: 1px solid var(--color-watch-border);
}

.prescription-banner__confidence--low {
  background: var(--color-critical-bg);
  color: var(--color-critical);
  border: 1px solid var(--color-critical-border);
}

.prescription-banner__term-note {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin: var(--space-2) 0 0 var(--space-4);
  line-height: var(--leading-relaxed);
}

@media (max-width: 480px) {
  .prescription-banner {
    flex-direction: column;
    padding: var(--space-4) var(--space-4);
  }
  .prescription-banner__headline {
    font-size: var(--text-xl);
  }
}

@media print {
  .prescription-banner {
    border-left: 3px solid #333;
    background: #fff;
    break-inside: avoid;
  }
}


/* ============================================================
 * 20. SEGMENT DASHBOARD
 *
 * Four-column layout showing the 4-segment intervention breakdown.
 * Usage: <div class="segment-dashboard">
 *          <div class="segment-dashboard__card"
 *               style="border-left-color: #2d7a3a;">
 *            <span class="segment-dashboard__label">Almost There</span>
 *            <span class="segment-dashboard__count">24</span>
 *            <p class="segment-dashboard__rx">Ready for intensified instruction</p>
 *          </div>
 *          ...
 *        </div>
 * ============================================================ */

.segment-dashboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .segment-dashboard {
    grid-template-columns: repeat(4, 1fr);
  }
}

.segment-dashboard__card {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-left: 3px solid #999;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  cursor: pointer;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.segment-dashboard__card:hover {
  box-shadow: var(--shadow-md);
}

.segment-dashboard__label {
  display: block;
  font-family: var(--font-data);
  font-size: 0.6875rem; /* 11px */
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-secondary);
}

.segment-dashboard__count {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  margin-top: var(--space-1);
}

.segment-dashboard__subject-breakdown {
  display: block;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

.segment-dashboard__criteria {
  font-family: var(--font-body);
  font-size: 0.6875rem; /* 11px */
  font-weight: var(--weight-normal);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-1);
  font-style: italic;
}

.segment-dashboard__rx {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  margin-top: var(--space-2);
}

@media print {
  .segment-dashboard {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
  }
  .segment-dashboard__card {
    box-shadow: none;
    break-inside: avoid;
  }
}


/* ============================================================
 * 21. PRIORITY ACTION CARD
 *
 * Executive-level priority action card with urgency coding.
 * Usage: <div class="priority-action-card priority-action-card--risk">
 *          <div class="priority-action-card__content">
 *            <h4 class="priority-action-card__title">...</h4>
 *            <p class="priority-action-card__body">...</p>
 *          </div>
 *          <span class="priority-action-card__metric">208</span>
 *        </div>
 * ============================================================ */

.priority-action-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--card-padding);
}

.priority-action-card--risk {
  border-left-color: #c25450;
}

.priority-action-card--opportunity {
  border-left-color: #2d7a3a;
}

.priority-action-card--urgent {
  border-left-color: #d4a843;
}

.priority-action-card__content {
  flex: 1;
  min-width: 0;
}

.priority-action-card__title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  margin: 0;
}

.priority-action-card__body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-2);
}

.priority-action-card__metric {
  flex-shrink: 0;
  font-family: var(--font-data);
  font-size: 1.75rem; /* 28px */
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: 1;
  text-align: right;
  min-width: 3rem;
}

@media print {
  .priority-action-card {
    break-inside: avoid;
    box-shadow: none;
  }
}


/* ============================================================
 * 22. BUBBLE STUDENT LIST
 *
 * Grouped student list organized by intervention segment.
 * Usage: <div class="bubble-student-list">
 *          <div class="bubble-student-list__section">
 *            <div class="bubble-student-list__header">...</div>
 *            <div class="bubble-student-list__rows">...</div>
 *          </div>
 *        </div>
 * ============================================================ */

.bubble-student-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.bubble-student-list__section {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.bubble-student-list__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid #999;
  background: var(--surface-inset);
  border-bottom: 1px solid var(--border-default);
}

.bubble-student-list__segment-name {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.bubble-student-list__segment-count {
  font-family: var(--font-data);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.bubble-student-list__rows {
  padding: 0;
}

.bubble-student-list__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  font-size: var(--text-sm);
  flex-wrap: wrap;
}

.bubble-student-list__row:last-child {
  border-bottom: none;
}

.bubble-student-list__name {
  font-family: var(--font-ui);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  min-width: 140px;
}

.bubble-student-list__gaps {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.bubble-student-list__contrast {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.bubble-student-list__rx {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-style: italic;
  flex-basis: 100%;
  padding-left: 0;
}

.bubble-student-list__pattern-group {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-raised, #fafafa);
}

.bubble-student-list__pattern-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

.bubble-student-list__pattern-students {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  line-height: 1.5;
}

@media print {
  .bubble-student-list__section {
    break-inside: avoid;
  }
  .bubble-student-list__row {
    page-break-inside: avoid;
  }
}


/* ============================================================
 * 23. INTERVENTION CARD
 *
 * Action-oriented card for school-grade pages.
 * Usage: <div class="intervention-card">
 *          <div class="intervention-card__header">
 *            <h4 class="intervention-card__title">...</h4>
 *            <span class="intervention-card__count">12</span>
 *          </div>
 *          <p class="intervention-card__action">...</p>
 *          <div class="intervention-card__students">...</div>
 *        </div>
 * ============================================================ */

.intervention-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--card-padding);
}

.intervention-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.intervention-card__title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0;
}

.intervention-card__count {
  font-family: var(--font-data);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: 1;
  flex-shrink: 0;
}

.intervention-card__action {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-2);
}

.intervention-card__students {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-default);
}

.intervention-card__student {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.intervention-card__subject-dist {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-2);
  padding: var(--space-1) var(--card-padding);
}

@media print {
  .intervention-card {
    break-inside: avoid;
  }
}


/* ============================================================
 * SEGMENT BADGE (inline_student extension)
 *
 * Colored pill badge for segment classification on student rows.
 * ============================================================ */

.badge--segment {
  font-family: var(--font-data);
  font-size: 0.6875rem; /* 11px */
  font-weight: var(--weight-medium);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  vertical-align: middle;
}


/* ============================================================
 * 24. CATHEDRAL GLOSSARY
 *
 * Collapsible "How to Read This Page" panel with term definitions,
 * symbol legends, and segment criteria. Appears above the footer
 * on every page via base.html.
 *
 * Usage: <details class="cathedral-glossary">
 *          <summary class="cathedral-glossary__toggle">...</summary>
 *          <div class="cathedral-glossary__body">...</div>
 *        </details>
 * ============================================================ */

.cathedral-glossary {
  margin-top: var(--space-12);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
}

.cathedral-glossary__toggle {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cathedral-glossary__toggle::-webkit-details-marker {
  display: none;
}

.cathedral-glossary__toggle::before {
  content: "\25B6"; /* right triangle */
  font-size: 0.625rem;
  transition: transform 0.15s ease;
}

.cathedral-glossary[open] > .cathedral-glossary__toggle::before {
  transform: rotate(90deg);
}

.cathedral-glossary__body {
  padding: 0 var(--space-4) var(--space-4);
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .cathedral-glossary__body {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4) var(--space-6);
  }
}

.cathedral-glossary__section {
  min-width: 0;
}

.cathedral-glossary__term {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.cathedral-glossary__def {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.cathedral-glossary__legend {
  list-style: none;
  padding: 0;
  margin: var(--space-1) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cathedral-glossary__legend li {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.cathedral-glossary__symbol {
  font-size: var(--text-base);
  color: #2d7a3a;
  margin-right: var(--space-1);
}

.cathedral-glossary__symbol--up {
  color: #4a6fa5;
}

.cathedral-glossary__symbol--down {
  color: #c25450;
}

@media print {
  .cathedral-glossary {
    display: none;
  }
}