/* ============================================================
   EdEquity Design System — Chart & Data Storytelling
   Version: 1.0.0

   Inspired by The Economist, FT (John Burn-Murdoch), and
   Edward Tufte. Charts tell stories, not just display data.

   Usage: <link rel="stylesheet" href="/static/ee-design-system.css">
   ============================================================ */

/* -----------------------------------------------------------
   1. DESIGN TOKENS
   ----------------------------------------------------------- */
:root {
    /* Brand */
    --ee-blue:          #0C5EE2;
    --ee-blue-dark:     #0A4FC0;
    --ee-blue-light:    #DBEAFE;
    --ee-blue-lighter:  #EFF6FF;
    --ee-green:         #02E29C;
    --ee-green-dark:    #029E7A;
    --ee-green-a11y:    #008A60;   /* WCAG AA on white — use on charts */
    --ee-navy:          #0F172A;

    /* Semantic */
    --ee-error:         #DC2626;
    --ee-error-light:   #FEE2E2;
    --ee-warning:       #F59E0B;
    --ee-warning-light: #FEF3C7;
    --ee-success:       #008A60;
    --ee-success-light: #D1FAE5;

    /* Performance intensity (replaces RAG — single-hue blue scale) */
    --ee-perf-strong:   #0C5EE2;   /* Above benchmark (full brand blue) */
    --ee-perf-expected: #60A5FA;   /* Near benchmark (mid blue) */
    --ee-perf-below:    #BFDBFE;   /* Below benchmark (light blue) */

    /* RAG aliases (backward compat — mapped to performance scale) */
    --ee-rag-red:       #BFDBFE;
    --ee-rag-amber:     #60A5FA;
    --ee-rag-green:     #0C5EE2;

    /* Neutrals */
    --ee-text:          #1A1A1A;
    --ee-text-secondary:#424242;
    --ee-text-muted:    #6B7280;
    --ee-text-light:    #9CA3AF;
    --ee-border:        #E5E7EB;
    --ee-border-light:  #F0F0F0;
    --ee-bg:            #FAFAFA;
    --ee-bg-grey:       #F3F4F6;
    --ee-surface:       #FFFFFF;

    /* Chart-specific */
    --ee-chart-title:   #333333;
    --ee-chart-subtitle:#595959;
    --ee-chart-label:   #595959;
    --ee-chart-value:   #333333;
    --ee-chart-grid:    #E0E0E0;
    --ee-chart-annotation: #757575;
    --ee-tooltip-bg:    #1A1A2E;
    --ee-tooltip-text:  #FFFFFF;

    /* Chart Series — ordered, use in this sequence */
    --ee-series-1:      #0C5EE2;   /* Brand blue — focal group */
    --ee-series-2:      #40C4AA;   /* Teal — comparator group */
    --ee-series-3:      #8B8FA3;   /* Slate — context/benchmark */
    --ee-series-4:      #E8913A;   /* Warm amber — third series */
    --ee-series-5:      #6366F1;   /* Indigo — fourth series */
    --ee-series-6:      #A78BFA;   /* Lavender — fifth series */

    /* Attendance domain */
    --ee-presence:      #0C5EE2;
    --ee-absence:       #E8913A;   /* Warm amber (aligned with palette) */
    --ee-auth-absence:  #E8913A;
    --ee-unauth-absence:#6366F1;   /* Indigo — distinct from auth */

    /* Comparison (2-series: focus + comparator) */
    --ee-primary-bar:   #0C5EE2;   /* Brand blue — focal group */
    --ee-context-bar:   #40C4AA;   /* Teal — comparator */

    /* Sequential blue palette */
    --ee-seq-1:         #DBEAFE;
    --ee-seq-2:         #93C5FD;
    --ee-seq-3:         #3B82F6;
    --ee-seq-4:         #0C5EE2;
    --ee-seq-5:         #1E3A8A;

    /* Diverging palette (below ↔ above benchmark) */
    --ee-div-neg-strong:#E8913A;   /* Warm amber (strong below) */
    --ee-div-neg:       #F5C78E;   /* Light amber */
    --ee-div-neutral:   #E5E7EB;
    --ee-div-pos:       #93C5FD;   /* Light blue */
    --ee-div-pos-strong:#0C5EE2;   /* Brand blue (strong above) */

    /* Typography */
    --ee-font:          'Aptos', 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --ee-font-mono:     'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;

    /* Spacing */
    --ee-space-xs:      4px;
    --ee-space-sm:      8px;
    --ee-space-md:      16px;
    --ee-space-lg:      24px;
    --ee-space-xl:      32px;
    --ee-space-2xl:     48px;
    --ee-card-gap:      16px;
    --ee-section-gap:   32px;

    /* Radii */
    --ee-radius-sm:     6px;
    --ee-radius:        10px;
    --ee-radius-lg:     12px;
    --ee-radius-pill:   100px;

    /* Shadows */
    --ee-shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.08);
    --ee-shadow-md:     0 4px 12px rgba(0, 0, 0, 0.08);
    --ee-shadow-lg:     0 8px 24px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --ee-transition:    150ms ease;
    --ee-transition-slow: 300ms ease;
}

/* -----------------------------------------------------------
   2. RESET & BASE
   ----------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--ee-font);
    background: var(--ee-bg);
    color: var(--ee-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* -----------------------------------------------------------
   3. HEADER / NAVIGATION
   ----------------------------------------------------------- */
.ee-header {
    background: var(--ee-surface);
    border-bottom: 1px solid var(--ee-border);
    padding: 14px var(--ee-space-xl);
    display: flex;
    align-items: center;
    gap: var(--ee-space-md);
    box-shadow: var(--ee-shadow-sm);
    position: relative;
}

/* Brand accent stripe — Economist-style */
.ee-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ee-blue) 0%, var(--ee-green) 100%);
}

.ee-logo {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--ee-blue), var(--ee-blue-dark));
    border-radius: var(--ee-radius);
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 700; font-size: 16px;
    flex-shrink: 0;
}

.ee-header h1 {
    font-size: 18px;
    font-weight: 700;
    color: var(--ee-text);
}

.ee-header .ee-subtitle {
    font-size: 13px;
    color: var(--ee-text-muted);
}

.ee-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--ee-space-sm);
}

.ee-nav-link {
    color: var(--ee-text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: var(--ee-radius-sm);
    transition: var(--ee-transition);
}
.ee-nav-link:hover {
    background: var(--ee-bg);
    color: var(--ee-text);
}
.ee-nav-link.active {
    background: var(--ee-blue-lighter);
    color: var(--ee-blue);
    font-weight: 600;
}

.ee-select {
    padding: 6px 12px;
    border: 1px solid var(--ee-border);
    border-radius: var(--ee-radius-sm);
    font-size: 13px;
    font-family: var(--ee-font);
    background: var(--ee-surface);
    color: var(--ee-text-secondary);
    cursor: pointer;
    transition: var(--ee-transition);
    outline: none;
}
.ee-select:hover { border-color: var(--ee-blue); }
.ee-select:focus { border-color: var(--ee-blue); box-shadow: 0 0 0 2px var(--ee-blue-light); }

.ee-btn {
    padding: 6px 14px;
    border: 1px solid var(--ee-border);
    border-radius: var(--ee-radius-sm);
    font-size: 13px;
    font-family: var(--ee-font);
    font-weight: 500;
    color: var(--ee-text-muted);
    background: var(--ee-surface);
    cursor: pointer;
    transition: var(--ee-transition);
}
.ee-btn:hover { border-color: var(--ee-blue); color: var(--ee-blue); }
.ee-btn--danger:hover { border-color: var(--ee-error); color: var(--ee-error); }
.ee-btn--primary { background: var(--ee-blue); color: white; border-color: var(--ee-blue); }
.ee-btn--primary:hover { background: var(--ee-blue-dark); }

/* -----------------------------------------------------------
   4. PAGE LAYOUT
   ----------------------------------------------------------- */
.ee-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--ee-space-lg) var(--ee-space-xl);
}

.ee-page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--ee-chart-title);
    margin-bottom: var(--ee-space-xs);
    line-height: 1.2;
}

.ee-page-subtitle {
    font-size: 15px;
    color: var(--ee-chart-subtitle);
    margin-bottom: var(--ee-space-lg);
}

.ee-source {
    font-size: 12px;
    color: var(--ee-text-light);
    margin-top: var(--ee-space-lg);
    padding-top: var(--ee-space-md);
    border-top: 1px solid var(--ee-border-light);
}

/* -----------------------------------------------------------
   5. KPI TILES — The 2-Second Summary
   ----------------------------------------------------------- */
.ee-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--ee-card-gap);
    margin-bottom: var(--ee-space-lg);
}

.ee-kpi {
    background: var(--ee-surface);
    border: 1px solid var(--ee-border);
    border-radius: var(--ee-radius);
    padding: 16px 20px;
    box-shadow: var(--ee-shadow-sm);
    position: relative;
    overflow: hidden;
}

/* Subtle left accent border */
.ee-kpi::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ee-blue);
}

/* Performance intensity KPI accents */
.ee-kpi--strong::before { background: var(--ee-perf-strong); }
.ee-kpi--expected::before { background: var(--ee-perf-expected); }
.ee-kpi--below::before  { background: var(--ee-perf-below); }
/* Backward-compat aliases */
.ee-kpi--green::before  { background: var(--ee-perf-strong); }
.ee-kpi--amber::before  { background: var(--ee-perf-expected); }
.ee-kpi--red::before    { background: var(--ee-perf-below); }

.ee-kpi__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ee-text-muted);
    font-weight: 600;
    margin-bottom: 2px;
}

.ee-kpi__value {
    font-size: 26px;
    font-weight: 700;
    color: var(--ee-chart-title);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.ee-kpi__detail {
    font-size: 12px;
    color: var(--ee-text-muted);
    margin-top: 2px;
}

.ee-kpi__trend {
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
}
.ee-kpi__trend--up   { color: var(--ee-blue); }
.ee-kpi__trend--down { color: var(--ee-perf-below); }
.ee-kpi__trend--flat { color: var(--ee-text-muted); }

/* -----------------------------------------------------------
   5b. INSIGHTS FILTER BAR — domain narrowing on the Insights landing
   Sits between the KPI row and the three-column insight grid.
   The dropdown filters all three columns by domain (attendance /
   suspensions / behaviour / assessment) so the user can focus on
   one metric area at a time. The hint reminds them each column is
   capped at the top N most-significant insights.
   ----------------------------------------------------------- */
.ee-insights-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--ee-space-md);
    padding: 12px 16px;
    background: var(--ee-surface);
    border: 1px solid var(--ee-border-light);
    border-radius: var(--ee-radius);
    box-shadow: var(--ee-shadow-sm);
}
.ee-insights-filter-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ee-text-primary);
}
.ee-insights-filter-select {
    padding: 6px 12px;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--ee-text-primary);
    background: #ffffff;
    border: 1px solid var(--ee-border);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color var(--ee-transition);
}
.ee-insights-filter-select:hover,
.ee-insights-filter-select:focus {
    border-color: var(--ee-blue);
    outline: none;
}
.ee-insights-filter-hint {
    font-size: 0.8125rem;
    color: var(--ee-text-muted);
    margin-left: auto;
}
.ee-insights-count {
    font-weight: 500;
    color: var(--ee-text-muted);
    margin-left: 4px;
}

/* -----------------------------------------------------------
   5c. DATA-BASIS CAPTION — explains the WoW comparison weeks
   Rendered at the top of insights pages by EE.dataBasisCaption().
   Compact, low-attention by default; the embedded "skipped N
   weeks" warning gets a louder colour so users notice when a
   holiday period changes the comparison cadence.
   ----------------------------------------------------------- */
.ee-data-basis {
    font-size: 0.8125rem;
    color: var(--ee-text-muted);
    padding: 6px 12px;
    margin-bottom: var(--ee-space-md);
    background: rgba(0, 0, 0, 0.02);
    border-left: 3px solid var(--ee-blue);
    border-radius: 4px;
}
.ee-data-basis__domain {
    font-weight: 600;
    color: var(--ee-text-primary);
    text-transform: capitalize;
}
.ee-data-basis__warn {
    color: var(--ee-warning, #b45309);
    font-weight: 500;
    margin-left: 4px;
}

/* -----------------------------------------------------------
   6. CHART CARDS — The Story Container
   ----------------------------------------------------------- */
.ee-chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ee-card-gap);
    margin-bottom: var(--ee-space-lg);
}
.ee-chart-grid--three { grid-template-columns: 1fr 1fr 1fr; }
.ee-chart-grid--full  { grid-template-columns: 1fr; }

.ee-chart-card {
    background: var(--ee-surface);
    border: 1px solid var(--ee-border-light);
    border-radius: var(--ee-radius);
    padding: 20px 24px;
    box-shadow: var(--ee-shadow-sm);
    transition: box-shadow var(--ee-transition);
}
.ee-chart-card:hover {
    box-shadow: var(--ee-shadow-md);
}

.ee-chart-card--full { grid-column: 1 / -1; }

/* --- Chart header: the narrative title system --- */
.ee-chart-header {
    margin-bottom: var(--ee-space-md);
}

/* Finding title — bold, tells you what the data shows */
.ee-chart-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ee-chart-title);
    line-height: 1.3;
    margin-bottom: 2px;
}

/* Icon + label composition for chart titles. Used by the Insights
   landing page column headers (Celebrate / Equity Gaps / Focus
   Areas) where each title pairs an inline SVG with its text label.
   The icon inherits the title colour by default; per-icon accent
   classes (ee-icon--celebrate / --equity / --focus) override it. */
.ee-chart-title-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ee-icon {
    display: inline-flex;
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    color: inherit;
}
.ee-icon--celebrate { color: #d97706; }   /* amber sparkle */
.ee-icon--equity    { color: #2563eb; }   /* blue scales */
.ee-icon--focus     { color: #b91c1c; }   /* red target */

/* KPI strip — two-row layout (YTD top, weekly bottom). The
   section wraps both rows + their labels so spacing between
   rows is tighter than between unrelated sections, and the
   row label aligns with the tile grid below it. Placeholder
   tiles render where a metric has no weekly meaning (Total
   Students, Disadvantaged) so the grid stays even. */
.ee-kpi-section { margin-bottom: 16px; }
.ee-kpi-row-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ee-chart-subtitle);
    margin: 12px 0 4px;
}
.ee-kpi-row-label__hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ee-chart-subtitle);
    margin-left: 6px;
    font-size: 11px;
}
.ee-kpi--placeholder {
    background: #fafafa;
    border-color: #e5e7eb;
    box-shadow: none;
}
.ee-kpi__value--muted {
    color: #9ca3af;
}

/* Context subtitle — date range, scope, methodology */
.ee-chart-subtitle {
    font-size: 13px;
    color: var(--ee-chart-subtitle);
    line-height: 1.4;
}
/* Meta variant — compact second-line caption for the data-basis
   "comparing wk X vs Y" indicator inlined under the first chart's
   subtitle on insights drilldowns. Kept thin so it doesn't claim a
   visual row of its own — the value is contextual, not headline. */
.ee-chart-subtitle--meta {
    font-size: 11px;
    margin-top: 2px;
    opacity: 0.8;
}

/* Annotation — inline insight callout */
.ee-chart-annotation {
    font-size: 12px;
    font-style: italic;
    color: var(--ee-chart-annotation);
    margin-top: var(--ee-space-sm);
    padding-left: 12px;
    border-left: 2px solid var(--ee-border);
}

/* Badge for contextual info */
.ee-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--ee-radius-pill);
    vertical-align: middle;
    margin-left: 8px;
}
/* Performance intensity badges */
.ee-badge--blue   { background: var(--ee-blue-light); color: var(--ee-blue); }
.ee-badge--strong { background: #DBEAFE; color: #0C5EE2; }
.ee-badge--expected { background: #EFF6FF; color: #3B82F6; }
.ee-badge--below  { background: #F0F4FF; color: #60A5FA; }
.ee-badge--grey   { background: var(--ee-bg-grey); color: var(--ee-text-muted); }
/* Backward-compat aliases */
.ee-badge--green  { background: #DBEAFE; color: #0C5EE2; }
.ee-badge--amber  { background: #EFF6FF; color: #3B82F6; }
.ee-badge--red    { background: #F0F4FF; color: #60A5FA; }

/* Chart body — canvas container */
.ee-chart-body {
    position: relative;
}
.ee-chart-body--sm  { height: 220px; }
.ee-chart-body--md  { height: 300px; }
.ee-chart-body--lg  { height: 400px; }
.ee-chart-body--xl  { height: 500px; }

/* -----------------------------------------------------------
   7. SECTION DIVIDERS
   ----------------------------------------------------------- */
.ee-section {
    margin-top: var(--ee-section-gap);
    margin-bottom: var(--ee-space-md);
}

.ee-section__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ee-chart-title);
    margin-bottom: 4px;
}

.ee-section__subtitle {
    font-size: 14px;
    color: var(--ee-chart-subtitle);
}

.ee-section__rule {
    width: 40px;
    height: 3px;
    background: var(--ee-blue);
    border: none;
    margin-top: var(--ee-space-sm);
    border-radius: 2px;
}

/* -----------------------------------------------------------
   8. DATA TABLES
   ----------------------------------------------------------- */
.ee-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ee-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ee-text-muted);
    font-weight: 600;
    border-bottom: 2px solid var(--ee-border);
    background: var(--ee-bg);
}

.ee-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--ee-border-light);
    color: var(--ee-text-secondary);
}

.ee-table tbody tr {
    transition: background var(--ee-transition);
}
.ee-table tbody tr:hover td {
    background: var(--ee-blue-lighter);
}
.ee-table tbody tr[data-clickable] {
    cursor: pointer;
}

/* Numeric columns: header AND cells right-aligned so the column
   reads as a clean stack of digits. Apply class="num" to both the
   <th> and the <td> for any column carrying a number — without it
   on the <th>, the header drifts left while the cells right-align
   and the column header no longer sits over its own values
   (visible bug 2026-04-29 on the suspensions per-school WoW table).
   See docs/chart-authoring.md → "Tables" for the full rule. */
.ee-table .num,
.ee-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Inline bar in table cell */
.ee-table .bar-cell {
    position: relative;
    padding-right: 60px !important;
}
.ee-table .bar-cell .bar {
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    border-radius: 3px;
    opacity: 0.12;
}

/* -----------------------------------------------------------
   9. LOADING STATE
   ----------------------------------------------------------- */
.ee-loading {
    text-align: center;
    padding: 80px 0;
    color: var(--ee-text-muted);
    font-size: 14px;
}

.ee-spinner {
    display: inline-block;
    width: 24px; height: 24px;
    border: 3px solid var(--ee-border);
    border-top-color: var(--ee-blue);
    border-radius: 50%;
    animation: ee-spin 0.8s linear infinite;
    margin-bottom: 12px;
}

@keyframes ee-spin { to { transform: rotate(360deg); } }

/* -----------------------------------------------------------
   10. RESPONSIVE
   ----------------------------------------------------------- */
@media (max-width: 1024px) {
    .ee-chart-grid--three { grid-template-columns: 1fr 1fr; }
    .ee-insight-list--grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .ee-chart-grid,
    .ee-chart-grid--three { grid-template-columns: 1fr; }
    .ee-insight-list--grid { grid-template-columns: 1fr; }
    .ee-kpi-row { grid-template-columns: repeat(5, 1fr); }
    .ee-container { padding: var(--ee-space-md); }
    .ee-header { padding: 12px var(--ee-space-md); }
    .ee-chart-title { font-size: 15px; }
}

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

/* -----------------------------------------------------------
   11. SPA SHELL LAYOUT
   ----------------------------------------------------------- */

/* Full viewport app container */
.ee-app {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Sidebar — fixed left column */
.ee-sidebar {
    width: 240px;
    min-width: 240px;
    background: var(--ee-navy);
    color: #CBD5E1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,0.06);
}

.ee-sidebar__header {
    padding: 20px 16px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ee-sidebar__header .ee-logo {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.ee-sidebar__header h2 {
    font-size: 15px;
    font-weight: 700;
    color: #F1F5F9;
    line-height: 1.2;
}

.ee-sidebar__header .ee-subtitle {
    font-size: 11px;
    color: #64748B;
    display: block;
}

/* Report group */
.ee-sidebar__group {
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ee-sidebar__group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748B;
    cursor: pointer;
    user-select: none;
    transition: color var(--ee-transition);
}

.ee-sidebar__group-title:hover {
    color: #94A3B8;
}

.ee-sidebar__group-title .chevron {
    font-size: 10px;
    transition: transform var(--ee-transition);
}

.ee-sidebar__group-title .chevron--open {
    transform: rotate(90deg);
}

.ee-sidebar__group-items {
    padding-bottom: 4px;
}

.ee-sidebar__group.collapsed .ee-sidebar__group-items {
    display: none;
}

/* Page link within a group */
.ee-sidebar__item {
    display: block;
    padding: 7px 16px 7px 28px;
    font-size: 13px;
    color: #94A3B8;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--ee-transition);
    border-left: 3px solid transparent;
}

.ee-sidebar__item:hover {
    color: #E2E8F0;
    background: rgba(255,255,255,0.04);
}

.ee-sidebar__item--active {
    color: #FFFFFF;
    background: rgba(12, 94, 226, 0.2);
    border-left-color: var(--ee-blue);
    font-weight: 600;
}

.ee-sidebar__item--disabled {
    color: #475569;
    cursor: not-allowed;
    pointer-events: none;
    font-style: italic;
}

.ee-sidebar__item--disabled::after {
    content: 'soon';
    font-size: 9px;
    font-style: normal;
    background: rgba(255,255,255,0.06);
    padding: 1px 6px;
    border-radius: var(--ee-radius-pill);
    margin-left: 8px;
    vertical-align: middle;
}

/* Main content area */
.ee-main {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Filter bar — sticky below header */
.ee-filter-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ee-surface);
    border-bottom: 1px solid var(--ee-border);
    padding: 8px var(--ee-space-xl);
    display: flex;
    align-items: center;
    gap: var(--ee-space-md);
    box-shadow: var(--ee-shadow-sm);
}

.ee-filter-bar__group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ee-filter-bar__group label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--ee-text-muted);
    white-space: nowrap;
}

.ee-filter-bar__spacer {
    flex: 1;
}

/* Active filter chips bar */
.ee-active-filters {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px var(--ee-space-xl);
    background: #FEF3C7;
    border-bottom: 1px solid #F59E0B;
    font-size: 12px;
    color: var(--ee-text);
    flex-wrap: wrap;
}
.ee-active-filters.ee-active-filters--visible {
    display: flex;
}
.ee-active-filters__label {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #92400E;
    margin-right: 2px;
    white-space: nowrap;
}
.ee-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #FFF;
    border: 1px solid #F59E0B;
    border-radius: 12px;
    padding: 2px 8px 2px 10px;
    font-size: 12px;
    font-weight: 500;
    color: #92400E;
}
.ee-filter-chip__remove {
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: #B45309;
    border: none;
    background: none;
    padding: 0 0 0 2px;
    font-weight: 700;
}
.ee-filter-chip__remove:hover {
    color: #DC2626;
}
.ee-active-filters__clear {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: #B45309;
    cursor: pointer;
    border: none;
    background: none;
    text-decoration: underline;
    white-space: nowrap;
}
.ee-active-filters__clear:hover {
    color: #DC2626;
}

/* Breadcrumb row — flex container so the page-meta slot can sit
   inline-right of the breadcrumb itself. Saves a row of vertical
   space versus rendering meta as its own block at the top of
   page content. */
.ee-breadcrumb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ee-space-md);
    padding: var(--ee-space-md) var(--ee-space-xl) 0;
}

/* Breadcrumb sits in the row now — drop its old standalone
   padding so the row's padding controls layout. */
.ee-breadcrumb {
    font-size: 12px;
    color: var(--ee-text-muted);
    flex: 1 1 auto;
    min-width: 0;
}

.ee-breadcrumb span {
    color: var(--ee-text-light);
}

.ee-breadcrumb strong {
    color: var(--ee-text-secondary);
    font-weight: 600;
}

/* Right-aligned meta slot for lightweight per-page context.
   Stays empty by default — page renderers fill via EE.setPageMeta()
   once their data lands. */
.ee-page-meta {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--ee-text-muted);
}
/* When the meta slot hosts a data-basis caption, suppress the
   caption's own block-level styling (background/border/padding)
   so it reads as inline text in the breadcrumb row instead of
   a coloured banner. */
.ee-page-meta .ee-data-basis {
    background: transparent;
    border-left: none;
    padding: 0;
    margin: 0;
    font-size: inherit;
    color: inherit;
    display: inline;
}

/* Page-meta fallback — used by EE.setPageMeta when the host has no
   #page-meta slot (the SaaS Razor shell). Renders a small inline
   strip just above the report content with the same data-basis
   caption + onward link as the standalone breadcrumb-row variant. */
.ee-page-meta-fallback {
    padding: 8px 24px;
    margin-bottom: 12px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--ee-text-muted);
    background: transparent;
}

/* Onward link — small pill in the page-meta slot pointing users
   from an insights drilldown to the corresponding full report. */
.ee-onward-link {
    display: inline-block;
    margin-left: var(--ee-space-md);
    padding: 4px 10px;
    border: 1px solid var(--ee-border);
    border-radius: 999px;
    color: var(--ee-blue);
    background: var(--ee-surface);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--ee-transition), border-color var(--ee-transition);
    white-space: nowrap;
}
.ee-onward-link:hover {
    background: var(--ee-blue);
    border-color: var(--ee-blue);
    color: white;
}

/* Filter slide-out panel */
.ee-filter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ee-transition-slow);
}

.ee-filter-overlay--open {
    opacity: 1;
    pointer-events: auto;
}

.ee-filter-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    background: var(--ee-surface);
    z-index: 950;
    transform: translateX(100%);
    transition: transform var(--ee-transition-slow);
    box-shadow: var(--ee-shadow-lg);
    display: flex;
    flex-direction: column;
}

.ee-filter-panel--open {
    transform: translateX(0);
}

.ee-filter-panel__header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ee-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ee-filter-panel__header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--ee-text);
}

.ee-filter-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--ee-space-md);
}

.ee-filter-panel__group label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--ee-text-muted);
    margin-bottom: 4px;
}

.ee-filter-panel__group .ee-select {
    width: 100%;
}

.ee-filter-panel__footer {
    padding: 16px 20px;
    border-top: 1px solid var(--ee-border);
    display: flex;
    gap: var(--ee-space-sm);
}

.ee-filter-panel__footer .ee-btn { flex: 1; }

/* Coming soon placeholder */
.ee-coming-soon {
    text-align: center;
    padding: 120px 40px;
    color: var(--ee-text-muted);
}

.ee-coming-soon__icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.ee-coming-soon h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--ee-text-secondary);
    margin-bottom: 8px;
}

.ee-coming-soon p {
    font-size: 14px;
    max-width: 400px;
    margin: 0 auto;
}

/* Responsive: collapse sidebar on small screens */
@media (max-width: 900px) {
    .ee-sidebar {
        width: 200px;
        min-width: 200px;
    }
    .ee-filter-panel { width: 300px; }
}

@media (max-width: 640px) {
    .ee-sidebar { display: none; }
    .ee-filter-panel { width: 100%; }
}


/* ============================================================
   CHAT WIDGET
   ============================================================
   Scoped under `.ee-chat` so the host page can never collide.
   The widget owns its own colour palette via CSS custom properties
   so it stays visually consistent regardless of where it's embedded.
   To restyle, override the `--ee-chat-*` vars on `.ee-chat`.
   ============================================================ */

.ee-chat {
    /* palette — overridable per-instance */
    --ee-chat-bg:            #f8f9fb;
    --ee-chat-surface:       #ffffff;
    --ee-chat-surface-hover: #f0f1f4;
    --ee-chat-border:        #e2e4e9;
    --ee-chat-border-light:  #eef0f3;
    --ee-chat-text:          #1a1d27;
    --ee-chat-text-muted:    #6b7084;
    --ee-chat-accent:        #0C5EE2;
    --ee-chat-accent-light:  #3B82F6;
    --ee-chat-accent-bg:     rgba(12, 94, 226, 0.06);
    --ee-chat-green:         #16a34a;
    --ee-chat-purple:        #7c3aed;
    --ee-chat-cyan:          #0891b2;
    --ee-chat-cyan-bg:       rgba(8, 145, 178, 0.06);
    --ee-chat-cyan-border:   rgba(8, 145, 178, 0.18);
    --ee-chat-red:           #dc2626;
    --ee-chat-amber:         #d97706;
    --ee-chat-shadow-sm:     0 1px 2px rgba(0,0,0,0.05);
    --ee-chat-mono:          'SF Mono', 'Fira Code', 'Consolas', monospace;
    --ee-chat-thread-max:    860px;

    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    color: var(--ee-chat-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: var(--ee-chat-bg);
}
.ee-chat *,
.ee-chat *::before,
.ee-chat *::after {
    box-sizing: border-box;
}

.ee-chat--dark {
    --ee-chat-bg:            #0f1117;
    --ee-chat-surface:       #181b24;
    --ee-chat-surface-hover: #1f232e;
    --ee-chat-border:        #262a36;
    --ee-chat-border-light:  #1f232e;
    --ee-chat-text:          #e7e8ea;
    --ee-chat-text-muted:    #9aa0aa;
    --ee-chat-accent-bg:     rgba(12, 94, 226, 0.18);
}

/* Root flex container — composer pinned to bottom, thread fills the rest */
.ee-chat__root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* Header (optional reset bar) */
.ee-chat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ee-chat-border);
    background: var(--ee-chat-surface);
    flex-shrink: 0;
}
.ee-chat__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ee-chat-text-muted);
}
.ee-chat__reset {
    background: var(--ee-chat-bg);
    border: 1px solid var(--ee-chat-border);
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
    color: var(--ee-chat-text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.ee-chat__reset:hover { border-color: var(--ee-chat-accent); color: var(--ee-chat-accent); }

/* Thread — scrollable conversation area */
.ee-chat__thread {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Welcome / suggestions */
.ee-chat__welcome {
    max-width: var(--ee-chat-thread-max);
    margin: 30px auto;
    text-align: center;
    padding: 0 12px;
}
.ee-chat__welcome-title { font-size: 20px; font-weight: 600; margin: 0 0 6px; }
.ee-chat__welcome-body { color: var(--ee-chat-text-muted); margin: 0 0 18px; font-size: 14px; line-height: 1.5; }
.ee-chat__suggestions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
    text-align: left;
}
.ee-chat__suggestion {
    background: var(--ee-chat-surface);
    border: 1px solid var(--ee-chat-border);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: var(--ee-chat-shadow-sm);
}
.ee-chat__suggestion:hover {
    border-color: var(--ee-chat-accent);
    background: var(--ee-chat-surface-hover);
}

/* Messages */
.ee-chat__msg {
    max-width: var(--ee-chat-thread-max);
    width: 100%;
    margin: 0 auto;
    animation: ee-chat-fadeIn 0.2s ease;
}
@keyframes ee-chat-fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ee-chat__msg--user {
    background: var(--ee-chat-surface);
    border: 1px solid var(--ee-chat-border);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: var(--ee-chat-shadow-sm);
}
.ee-chat__msg--user .ee-chat__msg-label { color: var(--ee-chat-accent); }
.ee-chat__msg--assistant {
    background: transparent;
    padding: 0 16px;
}
.ee-chat__msg--assistant .ee-chat__msg-label { color: var(--ee-chat-green); }
.ee-chat__msg-label {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ee-chat__msg-content {
    line-height: 1.6;
    color: var(--ee-chat-text);
    font-size: 14px;
}
.ee-chat__msg-content h2 { font-size: 16px; margin: 14px 0 6px; }
.ee-chat__msg-content h3 { font-size: 14px; margin: 10px 0 4px; }
.ee-chat__msg-content h4 { font-size: 13px; margin: 8px 0 4px; color: var(--ee-chat-text-muted); font-weight: 600; }
.ee-chat__msg-content p { margin: 4px 0; }
.ee-chat__msg-content strong { color: var(--ee-chat-text); font-weight: 600; }
.ee-chat__msg-content ul,
.ee-chat__msg-content ol { padding-left: 20px; margin: 4px 0; }
.ee-chat__msg-content li { margin: 1px 0; }
.ee-chat__msg-content li br { display: none; }
.ee-chat__msg-content code {
    background: var(--ee-chat-bg);
    border: 1px solid var(--ee-chat-border-light);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-family: var(--ee-chat-mono);
}
.ee-chat__hr {
    border: none;
    border-top: 1px solid var(--ee-chat-border);
    margin: 16px 0;
}

/* Inline tables produced by markdown pipes */
.ee-chat__msg-content table,
.ee-chat__data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
    background: var(--ee-chat-surface);
    border: 1px solid var(--ee-chat-border);
    border-radius: 8px;
    overflow: hidden;
}
.ee-chat__msg-content th,
.ee-chat__data-table th {
    text-align: left;
    padding: 9px 12px;
    border-bottom: 2px solid var(--ee-chat-border);
    color: var(--ee-chat-text-muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--ee-chat-bg);
}
.ee-chat__msg-content td,
.ee-chat__data-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--ee-chat-border-light);
}
.ee-chat__msg-content tr:last-child td,
.ee-chat__data-table tr:last-child td { border-bottom: none; }

.ee-chat__error { color: var(--ee-chat-red); font-weight: 600; }
.ee-chat__muted { color: var(--ee-chat-text-muted); font-size: 13px; }

/* Tool call (provenance card) */
.ee-chat__tc-wrapper {
    max-width: var(--ee-chat-thread-max);
    width: 100%;
    margin: 4px auto;
}
.ee-chat__tc {
    background: var(--ee-chat-cyan-bg);
    border: 1px solid var(--ee-chat-cyan-border);
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}
.ee-chat__tc:hover { background: rgba(8, 145, 178, 0.10); }
.ee-chat__tc-icon { color: var(--ee-chat-cyan); font-size: 13px; }
.ee-chat__tc-fn {
    color: var(--ee-chat-cyan);
    font-weight: 600;
    font-family: var(--ee-chat-mono);
    font-size: 11px;
}
.ee-chat__tc-result {
    color: var(--ee-chat-text-muted);
    margin-left: auto;
    font-size: 11px;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ee-chat__tc-timing { color: var(--ee-chat-text-muted); font-size: 11px; white-space: nowrap; }
.ee-chat__tc-chevron {
    color: var(--ee-chat-text-muted);
    font-size: 11px;
    transition: transform 0.2s;
    margin-left: 4px;
}
.ee-chat__tc-wrapper--expanded .ee-chat__tc { border-radius: 8px 8px 0 0; }
.ee-chat__tc-wrapper--expanded .ee-chat__tc-chevron { transform: rotate(90deg); }
.ee-chat__tc-wrapper--flash .ee-chat__tc { outline: 2px solid var(--ee-chat-accent); }

.ee-chat__tc-details {
    display: none;
    background: var(--ee-chat-surface);
    border: 1px solid var(--ee-chat-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    margin-top: -1px;
    overflow: hidden;
}
.ee-chat__tc-wrapper--expanded .ee-chat__tc-details { display: block; }

.ee-chat__prov-tabs {
    display: flex;
    border-bottom: 1px solid var(--ee-chat-border);
    background: var(--ee-chat-bg);
}
.ee-chat__prov-tab {
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ee-chat-text-muted);
    cursor: pointer;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    font-family: inherit;
    transition: all 0.15s;
}
.ee-chat__prov-tab:hover { color: var(--ee-chat-text); }
.ee-chat__prov-tab--active {
    color: var(--ee-chat-accent);
    border-bottom-color: var(--ee-chat-accent);
}
.ee-chat__prov-panel {
    display: none;
    padding: 13px 16px;
    font-size: 13px;
}
.ee-chat__prov-panel--active { display: block; }

.ee-chat__prov-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ee-chat__prov-fact { display: flex; flex-direction: column; gap: 3px; }
.ee-chat__prov-fact-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--ee-chat-text-muted);
}
.ee-chat__prov-fact-value { font-size: 12px; font-weight: 500; }
.ee-chat__prov-fact-value code {
    font-family: var(--ee-chat-mono);
    font-size: 11px;
    background: var(--ee-chat-bg);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--ee-chat-cyan);
}
.ee-chat__prov-params { margin-top: 12px; }
.ee-chat__params-table {
    width: 100%;
    font-size: 11px;
    margin-top: 6px;
    border-collapse: collapse;
}
.ee-chat__params-table td { padding: 3px 8px 3px 0; vertical-align: top; }
.ee-chat__params-table td:first-child {
    font-weight: 600;
    color: var(--ee-chat-text-muted);
    white-space: nowrap;
    font-family: var(--ee-chat-mono);
}

.ee-chat__sql-block {
    background: var(--ee-chat-bg);
    border: 1px solid var(--ee-chat-border-light);
    border-radius: 6px;
    padding: 12px 14px;
    font-family: var(--ee-chat-mono);
    font-size: 11px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.6;
    color: var(--ee-chat-text);
}

.ee-chat__assumption-list { list-style: none; padding: 0; margin: 0; }
.ee-chat__assumption-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ee-chat-border-light);
    font-size: 12px;
    line-height: 1.5;
}
.ee-chat__assumption-list li:last-child { border-bottom: none; }
.ee-chat__assumption-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 1px;
}
.ee-chat__assumption-icon--rule {
    background: rgba(217, 119, 6, 0.1);
    color: var(--ee-chat-amber);
}
.ee-chat__assumption-icon--scope {
    background: rgba(8, 145, 178, 0.1);
    color: var(--ee-chat-cyan);
}

.ee-chat__lineage-flow {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 12px 0;
}
.ee-chat__lineage-node {
    background: var(--ee-chat-bg);
    border: 1px solid var(--ee-chat-border);
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
    min-width: 90px;
}
.ee-chat__lineage-node--highlight {
    border-color: var(--ee-chat-accent);
    background: var(--ee-chat-accent-bg);
}
.ee-chat__lineage-icon { font-size: 16px; margin-bottom: 3px; }
.ee-chat__lineage-name { font-size: 11px; font-weight: 600; }
.ee-chat__lineage-desc { font-size: 10px; color: var(--ee-chat-text-muted); margin-top: 2px; }
.ee-chat__lineage-arrow { color: var(--ee-chat-text-muted); font-size: 16px; }

/* Inline claim badges */
.ee-chat__claim {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 5px;
    font-weight: 600;
    font-size: inherit;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}
.ee-chat__claim:hover { filter: brightness(0.95); }
.ee-chat__claim-inspect { font-size: 9px; opacity: 0.5; transition: opacity 0.15s; }
.ee-chat__claim:hover .ee-chat__claim-inspect { opacity: 1; }
.ee-chat__claim--verified {
    background: rgba(22, 163, 74, 0.08);
    border: 1px solid rgba(22, 163, 74, 0.25);
    color: var(--ee-chat-green);
}
.ee-chat__claim--insight {
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.25);
    color: var(--ee-chat-purple);
}
.ee-chat__claim--warning {
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.25);
    color: var(--ee-chat-red);
}
.ee-chat__claim-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ee-chat-surface);
    border: 1px solid var(--ee-chat-accent);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 11px;
    color: var(--ee-chat-text-muted);
    white-space: nowrap;
    z-index: 50;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    font-weight: 400;
    text-align: left;
}
.ee-chat__claim:hover .ee-chat__claim-tooltip { display: block; }
.ee-chat__claim-tt-label {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ee-chat-text-muted);
    margin-bottom: 2px;
    margin-top: 4px;
}
.ee-chat__claim-tooltip code {
    font-family: var(--ee-chat-mono);
    color: var(--ee-chat-cyan);
    font-size: 10px;
    background: var(--ee-chat-bg);
    padding: 1px 4px;
    border-radius: 3px;
}

/* Chart container */
.ee-chat__chart {
    position: relative;
    background: var(--ee-chat-surface);
    border: 1px solid var(--ee-chat-border);
    border-radius: 10px;
    padding: 16px;
    margin: 12px 0;
    box-shadow: var(--ee-chat-shadow-sm);
}
.ee-chat__chart canvas { max-height: 380px; }

/* Drill-down chips */
.ee-chat__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.ee-chat__chip {
    background: var(--ee-chat-accent-bg);
    border: 1px solid rgba(12, 94, 226, 0.20);
    border-radius: 18px;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--ee-chat-accent);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    user-select: none;
}
.ee-chat__chip:hover {
    background: rgba(12, 94, 226, 0.12);
    border-color: var(--ee-chat-accent);
}

/* Thinking indicator */
.ee-chat__thinking {
    max-width: var(--ee-chat-thread-max);
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    color: var(--ee-chat-text-muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ee-chat__dots span { animation: ee-chat-blink 1.4s infinite both; font-size: 16px; }
.ee-chat__dots span:nth-child(2) { animation-delay: 0.2s; }
.ee-chat__dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ee-chat-blink {
    0%, 80%, 100% { opacity: 0.2; }
    40%           { opacity: 1; }
}

/* Composer */
.ee-chat__composer {
    padding: 12px 16px;
    border-top: 1px solid var(--ee-chat-border);
    background: var(--ee-chat-surface);
    flex-shrink: 0;
}
.ee-chat__composer-form {
    max-width: var(--ee-chat-thread-max);
    margin: 0 auto;
    display: flex;
    gap: 8px;
}
.ee-chat__input {
    flex: 1;
    background: var(--ee-chat-bg);
    border: 1px solid var(--ee-chat-border);
    border-radius: 10px;
    padding: 11px 14px;
    color: var(--ee-chat-text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-width: 0;
}
.ee-chat__input:focus {
    border-color: var(--ee-chat-accent);
    box-shadow: 0 0 0 3px rgba(12, 94, 226, 0.1);
}
.ee-chat__input::placeholder { color: var(--ee-chat-text-muted); }
.ee-chat__send {
    background: var(--ee-chat-accent);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
}
.ee-chat__send:hover { background: var(--ee-chat-accent-light); }
.ee-chat__send:disabled { opacity: 0.5; cursor: not-allowed; }

/* Narrow layout — drawer / sidebar embeds */
@media (max-width: 480px) {
    .ee-chat__thread { padding: 12px 10px; }
    .ee-chat__msg--assistant { padding: 0 10px; }
    .ee-chat__welcome { margin: 16px auto; }
    .ee-chat__suggestions { grid-template-columns: 1fr; }
    .ee-chat__prov-summary { grid-template-columns: 1fr; }
    .ee-chat__composer { padding: 10px 12px; }
    .ee-chat__send { padding: 10px 14px; }
}

/* -----------------------------------------------------------
   UNIVERSAL CHART EXPAND / MINIMISE
   (button injected by ee-chart-theme.js::makeExpandable)
   ----------------------------------------------------------- */

/* Ensure every wrapper the button can anchor into is positioned. */
.ee-chart,
.chart-container {
    position: relative;
}

.ee-chart-expand-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    color: #4a5563;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
    z-index: 5;
    font-family: inherit;
}
.ee-chart-expand-btn:hover {
    background: #ffffff;
    color: #0c5ee2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}
.ee-chart-expand-btn:focus-visible {
    outline: 2px solid #0c5ee2;
    outline-offset: 2px;
}
.ee-chart-expand-btn__icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
    display: block;
}
/* Swap which icon is visible based on button state. */
.ee-chart-expand-btn__icon--minimise { display: none; }
.ee-chart-expand-btn--minimise .ee-chart-expand-btn__icon--expand  { display: none; }
.ee-chart-expand-btn--minimise .ee-chart-expand-btn__icon--minimise { display: block; }

/* Modal overlay that hosts the expanded chart wrapper. */
.ee-chart-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    font-family: var(--ee-font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
.ee-chart-modal--open { display: block; }

.ee-chart-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(14, 20, 36, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.ee-chart-modal__stage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(94vw, 1400px);
    height: min(90vh, 900px);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    padding: 40px 24px 24px;
    box-sizing: border-box;
}

.ee-chart-modal__close {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #4a5563;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}
.ee-chart-modal__close:hover { background: #f1f4f8; color: #0c5ee2; }

.ee-chart-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* When a wrapper is moved into the modal, it must fill the stage and
   release any fixed heights / max-heights set by its original context. */
.ee-chart-modal__body > .ee-chart-wrap--expanded {
    flex: 1 1 auto;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0;
    margin: 0 !important;
    padding: 16px !important;
    box-sizing: border-box;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}
.ee-chart-modal__body > .ee-chart-wrap--expanded canvas {
    max-height: none !important;
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
}

/* Hide the wrapper's expand button while inside the modal — the modal's
   own close button (×) is the sole close affordance, so we don't surface
   two overlapping controls in the same corner. (Fullscreen in-place mode
   keeps the wrap's button visible — it acts as the close affordance there.) */
.ee-chart-modal__body > .ee-chart-wrap--expanded .ee-chart-expand-btn { display: none; }

/* ─── In-place fullscreen mode (report-page charts) ──────────────────
   Used by `.ee-chart-body` wrappers that should expand without a modal
   or backdrop, so the host app's screenshot feature can capture them
   unobscured. No DOM move, no blur layer.

   Two flavours:

   1. `.ee-chart-wrap--fullscreen` (fallback) — `position: fixed` to the
      viewport. Used when the host has not marked a canvas element. Will
      cover headers/nav.

   2. `.ee-chart-wrap--fullscreen.ee-chart-wrap--fullscreen-canvas` —
      `position: absolute` inside the host's `data-ee-chart-canvas`
      element. Fills only the central content panel, leaving the host's
      nav/header/sidebar visible. This is the preferred mode — hosts
      should add `data-ee-chart-canvas` to their main report panel. */
.ee-chart-wrap--fullscreen {
    position: fixed !important;
    inset: 16px !important;
    z-index: 9999 !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 24px !important;
    background: #ffffff !important;
    border: 1px solid #e5e9f0 !important;
    border-radius: 8px !important;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18) !important;
    box-sizing: border-box !important;
    display: block !important;
    overflow: hidden !important;
}
.ee-chart-wrap--fullscreen.ee-chart-wrap--fullscreen-canvas {
    position: absolute !important;
    inset: 0 !important;
    z-index: 50 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 16px !important;
}
.ee-chart-wrap--fullscreen canvas {
    max-height: none !important;
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
}

/* Prevent background scroll while modal is open. */
body.ee-chart-modal-lock { overflow: hidden; }

/* ============================================================
   Transparency Mode
   ============================================================ */

/* ── Toggle bar ─────────────────────────────────────────────── */
.ee-tp-toggle-bar {
    display: flex;
    justify-content: flex-end;
    padding: 8px 0;
    margin-top: 8px;
}

.ee-tp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--ee-border, #e2e8f0);
    border-radius: 20px;
    background: var(--ee-surface, #fff);
    color: var(--ee-text-muted, #64748b);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.ee-tp-toggle:hover {
    border-color: var(--ee-blue, #0C5EE2);
    color: var(--ee-blue, #0C5EE2);
}

.ee-tp-toggle--active {
    border-color: var(--ee-blue, #0C5EE2);
    color: var(--ee-blue, #0C5EE2);
    background: rgba(12, 94, 226, 0.06);
}

.ee-tp-toggle-switch {
    width: 32px;
    height: 18px;
    border-radius: 9px;
    background: #cbd5e1;
    position: relative;
    transition: background 0.2s;
}

.ee-tp-toggle--active .ee-tp-toggle-switch {
    background: var(--ee-blue, #0C5EE2);
}

.ee-tp-toggle-slider {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.ee-tp-toggle--active .ee-tp-toggle-slider {
    transform: translateX(14px);
}

/* ── Info icons on visuals ──────────────────────────────────── */
.ee-tp-icon {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--ee-border, #e2e8f0);
    background: var(--ee-surface, #fff);
    color: var(--ee-blue, #0C5EE2);
    cursor: pointer;
    z-index: 10;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.ee-transparency-on .ee-tp-icon {
    display: flex;
    animation: ee-tp-fade-in 0.2s ease-out;
}

.ee-tp-icon:hover {
    background: var(--ee-blue, #0C5EE2);
    color: #fff;
    border-color: var(--ee-blue, #0C5EE2);
    transform: scale(1.1);
}

@keyframes ee-tp-fade-in {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Visual highlight when panel is open ────────────────────── */
.ee-tp-highlight {
    outline: 2px solid var(--ee-blue, #0C5EE2);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ── Overlay ────────────────────────────────────────────────── */
.ee-tp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 9998;
    transition: background 0.3s ease;
}

.ee-tp-overlay--visible {
    background: rgba(0, 0, 0, 0.25);
}

/* ── Slide-out panel ────────────────────────────────────────── */
.ee-tp-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 90vw;
    height: 100vh;
    background: var(--ee-surface, #fff);
    border-left: 1px solid var(--ee-border, #e2e8f0);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ee-tp-panel--open {
    transform: translateX(0);
}

.ee-tp-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--ee-border, #e2e8f0);
    flex-shrink: 0;
}

.ee-tp-panel__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ee-text, #1e293b);
}

.ee-tp-panel__close {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    font-size: 22px;
    color: var(--ee-text-muted, #64748b);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.ee-tp-panel__close:hover {
    background: #f1f5f9;
    color: var(--ee-text, #1e293b);
}

.ee-tp-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.ee-tp-panel__footer {
    padding: 12px 20px;
    border-top: 1px solid var(--ee-border, #e2e8f0);
    flex-shrink: 0;
}

.ee-tp-panel__footer code {
    font-size: 11px;
    color: var(--ee-text-muted, #64748b);
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 3px;
}

/* ── Panel sections ─────────────────────────────────────────── */
.ee-tp-section {
    margin-bottom: 20px;
}

.ee-tp-section__title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--ee-text-muted, #64748b);
    margin-bottom: 6px;
    font-weight: 600;
}

.ee-tp-section__text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ee-text, #1e293b);
    margin: 0;
}

.ee-tp-calc {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 10px 12px;
    color: #1e40af;
    line-height: 1.6;
    word-break: break-word;
}

/* ── Technical-detail dropdown ──────────────────────────────── */
.ee-tp-details {
    margin-top: 4px;
    border: 1px solid var(--ee-border, #e2e8f0);
    border-radius: 8px;
    background: #f8fafc;
    overflow: hidden;
}

.ee-tp-details__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 14px;
    cursor: pointer;
    list-style: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--ee-text, #1e293b);
    user-select: none;
}

/* Hide the native disclosure triangle — we render our own chevron. */
.ee-tp-details__summary::-webkit-details-marker { display: none; }
.ee-tp-details__summary::marker { content: ''; }

.ee-tp-details__summary:hover {
    background: #f1f5f9;
}

.ee-tp-details__summary:focus-visible {
    outline: 2px solid var(--ee-primary, #2563eb);
    outline-offset: -2px;
}

.ee-tp-details__chevron {
    color: var(--ee-text-muted, #64748b);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.ee-tp-details[open] .ee-tp-details__chevron {
    transform: rotate(180deg);
}

.ee-tp-details__body {
    padding: 4px 14px 14px;
    border-top: 1px solid var(--ee-border, #e2e8f0);
}

.ee-tp-details__body .ee-tp-section:first-child {
    margin-top: 14px;
}

.ee-tp-details__body .ee-tp-section:last-child {
    margin-bottom: 0;
}

/* ── Tags ───────────────────────────────────────────────────── */
.ee-tp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ee-tp-tag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #334155;
    font-family: 'SF Mono', 'Fira Code', monospace;
    white-space: nowrap;
}

.ee-tp-tag--col {
    background: #ecfdf5;
    color: #065f46;
}

.ee-tp-tag--filter {
    background: #fff7ed;
    color: #9a3412;
}

/* ── Business rules list ────────────────────────────────────── */
.ee-tp-rules {
    margin: 0;
    padding: 0 0 0 18px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--ee-text, #1e293b);
}

.ee-tp-rules li {
    margin-bottom: 2px;
}

/* ── SQL block ──────────────────────────────────────────────── */
.ee-tp-sql {
    margin: 6px 0 0;
    padding: 12px 14px;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
    max-height: 360px;
    overflow-y: auto;
}
.ee-tp-sql code {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
}
.ee-tp-sql-source {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #dcfce7;
    color: #166534;
}
.ee-tp-sql-source--inline {
    background: #fef3c7;
    color: #92400e;
}
.ee-tp-sql-copy {
    float: right;
    border: 1px solid var(--ee-border, #e2e8f0);
    background: #fff;
    color: var(--ee-text, #1e293b);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 11px;
    cursor: pointer;
}
.ee-tp-sql-copy:hover {
    background: #f1f5f9;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .ee-tp-panel {
        width: 100vw;
        max-width: 100vw;
    }
}

/* ═══════════════════════════════════════════════════════════════
   INSIGHTS CARDS & LAYOUT
   ═══════════════════════════════════════════════════════════════ */

/* Insight card list inside chart-cards */
.ee-insight-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}

/* Grid variant — compact tiles for drilldown pages */
.ee-insight-list--grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: var(--ee-space-lg);
}

/* Individual insight card */
.ee-insight-card {
    border: 1px solid var(--ee-border, #e2e8f0);
    border-radius: 8px;
    padding: 12px 16px;
    background: var(--ee-surface, #fff);
    transition: box-shadow 0.15s ease;
}
.ee-insight-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.ee-insight-card[style*="cursor: pointer"]:hover {
    border-color: var(--ee-blue, #3b82f6);
}

/* Type-specific left border accents */
.ee-insight-card--win {
    border-left: 4px solid #10b981;
}
.ee-insight-card--concern {
    border-left: 4px solid #ef4444;
}
.ee-insight-card--equity_gap {
    border-left: 4px solid #f59e0b;
}
.ee-insight-card--kpi {
    border-left: 4px solid #3b82f6;
}

/* Card inner elements */
.ee-insight-card__domain {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ee-muted, #64748b);
    margin-bottom: 4px;
}
.ee-insight-card__headline {
    font-size: 14px;
    font-weight: 600;
    color: var(--ee-value, #1e293b);
    line-height: 1.3;
}
.ee-insight-card__detail {
    font-size: 12px;
    color: var(--ee-muted, #64748b);
    margin-top: 2px;
}
.ee-insight-card__metric {
    font-size: 20px;
    font-weight: 700;
    color: var(--ee-value, #1e293b);
    margin-top: 4px;
}

/* Direction arrows */
.ee-insight-card__arrow--up {
    color: #10b981;
}
.ee-insight-card__arrow--down {
    color: #ef4444;
}

/* Text helpers */
.ee-text--positive { color: #10b981; }
.ee-text--negative { color: #ef4444; }

/* Empty state */
.ee-empty {
    color: var(--ee-muted, #64748b);
    font-size: 13px;
    font-style: italic;
    padding: 16px 0;
}

/* KPI trend arrows */
.ee-kpi__trend {
    font-size: 12px;
    font-weight: 600;
}
.ee-kpi__trend--up { color: #10b981; }
.ee-kpi__trend--down { color: #ef4444; }
.ee-kpi__trend--flat { color: #94a3b8; }

/* ─── Utility classes ─────────────────────────────────────── */
.ee-hidden { display: none !important; }

/* ─── Student 360 ─────────────────────────────────────────── */
.ee-student-search-wrap {
    position: relative;
    max-width: 480px;
    margin: 0 auto 1.5rem;
}
.ee-student-search {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 2px solid var(--ee-border, #d1d5db);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.15s;
}
.ee-student-search:focus {
    border-color: var(--ee-accent, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.ee-student-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--ee-border, #d1d5db);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    max-height: 320px;
    overflow-y: auto;
    z-index: 100;
}
.ee-student-dropdown__item {
    padding: 0.6rem 1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.1s;
}
.ee-student-dropdown__item:hover {
    background: #f0f5ff;
}
.ee-student-dropdown__name { font-weight: 600; }
.ee-student-dropdown__meta { font-size: 0.82rem; color: #6b7280; }

/* Demographic chips */
.ee-chip-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.3rem; }
.ee-chip {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ee-chip--pp   { background: #dbeafe; color: #1e40af; }
.ee-chip--send { background: #fef3c7; color: #92400e; }
.ee-chip--eal  { background: #d1fae5; color: #065f46; }
.ee-chip--lac  { background: #fce7f3; color: #9d174d; }
.ee-chip--fsm  { background: #e0e7ff; color: #3730a3; }

/* Risk indicator cards */
.ee-risk-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.ee-risk-card {
    flex: 1 1 200px;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    border-left: 4px solid;
    font-size: 0.85rem;
}
.ee-risk-card--critical { background: #fef2f2; border-color: #dc2626; }
.ee-risk-card--high     { background: #fffbeb; border-color: #f59e0b; }
.ee-risk-card--medium   { background: #fefce8; border-color: #eab308; }
.ee-risk-card__flag { font-weight: 700; margin-bottom: 0.15rem; }
.ee-risk-card__detail { color: #6b7280; font-size: 0.78rem; }

/* Day-of-week heatmap */
.ee-day-heatmap {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    max-width: 400px;
}
.ee-day-cell {
    text-align: center;
    padding: 1rem 0.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.ee-day-cell__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem; }
.ee-day-cell__value { font-size: 1.1rem; }

/* Assessment journey timeline */
.ee-journey {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    padding: 1rem 0;
}
.ee-journey__node {
    flex: 0 0 auto;
    text-align: center;
    padding: 0.75rem 1.2rem;
    background: #f8fafc;
    border: 2px solid var(--ee-border, #d1d5db);
    border-radius: 12px;
    min-width: 100px;
}
.ee-journey__node--active { border-color: var(--ee-accent, #2563eb); background: #eff6ff; }
.ee-journey__stage { font-size: 0.72rem; text-transform: uppercase; font-weight: 700; color: #6b7280; }
.ee-journey__result { font-size: 1.1rem; font-weight: 700; margin: 0.2rem 0; }
.ee-journey__year { font-size: 0.72rem; color: #9ca3af; }
.ee-journey__connector { flex: 0 0 24px; height: 2px; background: #d1d5db; }

/* Student profile header */
.ee-profile-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.ee-profile-name { font-size: 1.5rem; font-weight: 700; color: #1e293b; }
.ee-profile-school { font-size: 0.95rem; color: #6b7280; }

/* ── OEAI Interim Assessment diagnostic page ── */
.ee-oeai-staging { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 8px 4px; }
.ee-oeai-staging__chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-height: 28px; align-items: center; }
.ee-oeai-staging__actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.ee-oeai-muted { color: var(--ee-text-muted, #6b7084); font-style: italic; font-size: 13px; }
.ee-oeai-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; background: #fef3c7; border: 1px solid #d97706; border-radius: 999px; font-size: 12px; cursor: pointer; }
.ee-oeai-chip--saved { background: #d1fae5; border-color: #059669; }
.ee-oeai-chip__x { font-weight: 700; color: #dc2626; padding-left: 2px; }
.ee-oeai-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; background: #f3f4f6; border: 1px solid var(--ee-border, #e2e4e9); border-radius: 999px; font-size: 11px; font-family: ui-monospace, Menlo, monospace; cursor: help; margin: 2px 0; }
.ee-oeai-pill--unmapped { background: #fef3c7; border-color: #d97706; }
.ee-oeai-pill--mapped { background: #d1fae5; border-color: #059669; }
.ee-oeai-pill__n { color: var(--ee-text-muted, #6b7084); font-variant-numeric: tabular-nums; }
.ee-oeai-co { max-width: 420px; }
.ee-oeai-coline { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 3px; }
.ee-oeai-coline:last-child { margin-bottom: 0; }
.ee-oeai-colabel { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ee-text-muted, #6b7084); margin-right: 4px; min-width: 60px; }
.ee-oeai-sv { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.ee-oeai-meta { color: var(--ee-text-muted, #6b7084); font-size: 12px; }
.ee-oeai-select { padding: 4px 8px; border-radius: 4px; border: 1px solid var(--ee-border, #e2e4e9); font-size: 12px; background: #fff; }

/* OEAI coverage card grid (4-up for subjects, 3-up for others fall back to default ee-chart-grid which is 2-up) */
.ee-chart-grid--four { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.ee-oeai-coverage-card .ee-chart-body { padding: 12px 14px; }
.ee-oeai-coverage-card .ee-oeai-staging__chips { gap: 4px; margin-bottom: 10px; }
.ee-oeai-gap { background: #fef3c7; border: 1px solid #d97706; border-radius: 6px; padding: 8px 10px; margin: 8px 0; font-size: 12px; color: #92400e; }
.ee-oeai-gap__list { margin-top: 4px; font-family: ui-monospace, Menlo, monospace; color: #57534e; }
.ee-oeai-gap__list code { background: rgba(255,255,255,0.6); padding: 1px 5px; border-radius: 3px; margin-right: 4px; font-size: 11px; }
.ee-oeai-search { margin-top: 8px; }
.ee-oeai-search__input { width: 100%; padding: 6px 10px; border: 1px solid var(--ee-border, #e2e4e9); border-radius: 4px; font-size: 12px; }
.ee-oeai-suggestions { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 6px; }
.ee-oeai-suggestions td { padding: 4px 6px; border-bottom: 1px solid var(--ee-border-light, #eef0f3); vertical-align: middle; }
.ee-oeai-suggestions td:first-child { font-family: ui-monospace, Menlo, monospace; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ee-btn--sm { padding: 3px 8px; font-size: 11px; }
.ee-num { text-align: right; font-variant-numeric: tabular-nums; }

.ee-oeai-chip--inactive { background: #f3f4f6; border-color: #9ca3af; color: #6b7280; border-style: dashed; }

/* ════════════════════════════════════════════════════════════════
   Predictive Absence — student quick-reference drawer
   Click-to-peek panel on the Tomorrow / School lists. Mirrors the
   transparency drawer's slide-in, a touch wider for the richer content.
   ════════════════════════════════════════════════════════════════ */
.ee-qr-row { cursor: pointer; transition: background 0.12s ease; }
.ee-qr-row:hover { background: var(--ee-blue-50, #eff6ff); }

.ee-qr-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0); z-index: 9998; transition: background 0.3s ease; }
.ee-qr-overlay--visible { background: rgba(0, 0, 0, 0.25); }

.ee-qr-panel {
    position: fixed; top: 0; right: 0;
    width: clamp(420px, 48vw, 720px); max-width: 96vw; height: 100vh;
    background: var(--ee-surface, #fff); border-left: 1px solid var(--ee-border, #e2e8f0);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12); z-index: 9999;
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ee-qr-panel--open { transform: translateX(0); }

.ee-qr-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 18px 22px; border-bottom: 1px solid var(--ee-border, #e2e8f0); flex-shrink: 0; }
.ee-qr-name { font-size: 1.15rem; font-weight: 700; color: var(--ee-text, #1e293b); line-height: 1.2; }
.ee-qr-sub { font-size: 0.85rem; color: var(--ee-text-muted, #64748b); margin-top: 2px; }
.ee-qr-close { width: 30px; height: 30px; border: none; background: transparent; font-size: 22px; line-height: 1; color: var(--ee-text-muted, #64748b); cursor: pointer; border-radius: 6px; flex-shrink: 0; }
.ee-qr-close:hover { background: var(--ee-bg-subtle, #f1f5f9); color: var(--ee-text, #1e293b); }

.ee-qr-body { padding: 18px 22px; overflow-y: auto; flex: 1; }
.ee-qr-footer { padding: 14px 22px; border-top: 1px solid var(--ee-border, #e2e8f0); flex-shrink: 0; display: flex; gap: 0.5rem; }
.ee-qr-footer .ee-btn { flex: 1; }

.ee-qr-banner { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; border: 1px solid; border-radius: 0.6rem; margin-bottom: 1.1rem; }
.ee-qr-banner__sub { color: var(--ee-text-muted, #6b7280); font-size: 0.85rem; margin-top: 2px; }

.ee-qr-section { margin-bottom: 1.1rem; }
.ee-qr-section__title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ee-text-muted, #64748b); margin-bottom: 0.5rem; }
.ee-qr-reason { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.3rem 0; line-height: 1.4; font-size: 0.9rem; color: var(--ee-text, #1e293b); }
.ee-qr-cohort { font-size: 0.8rem; color: var(--ee-text-muted, #6b7280); border-top: 1px solid var(--ee-border-light, #f1f5f9); margin-top: 0.45rem; padding-top: 0.45rem; }
.ee-qr-muted { font-size: 0.85rem; color: var(--ee-text-muted, #64748b); font-style: italic; }

.ee-qr-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1.1rem; }
.ee-qr-kpi { border: 1px solid var(--ee-border, #e2e8f0); border-radius: 0.5rem; padding: 0.6rem 0.7rem; background: var(--ee-bg-subtle, #f8fafc); }
.ee-qr-kpi__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ee-text-muted, #64748b); }
.ee-qr-kpi__value { font-size: 1.05rem; font-weight: 700; color: var(--ee-text, #1e293b); margin-top: 2px; line-height: 1.2; }
.ee-qr-kpi__sub { font-size: 0.72rem; color: var(--ee-text-muted, #94a3b8); margin-top: 1px; }

.ee-qr-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ee-qr-chip { font-size: 0.74rem; font-weight: 600; padding: 3px 9px; border-radius: 10px; background: var(--ee-bg-subtle, #f1f5f9); color: var(--ee-text-muted, #475569); border: 1px solid var(--ee-border, #e2e8f0); }