, 1fr) makes the tracks
shrinkable AND wraps rows to fewer columns (ultimately one chart per
row) once a column would drop below a readable width. Sized to the
CONTAINER, so it adapts to panel expansion, not just viewport media
queries. The min() guard stops the minimum itself overflowing very
narrow containers. */
.ee-chart-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
gap: var(--ee-card-gap);
margin-bottom: var(--ee-space-lg);
}
.ee-chart-grid--three { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
/* minmax(0,1fr), not plain 1fr — keeps the single track shrinkable below
the canvas's rendered width so full-width charts can never lock either. */
.ee-chart-grid--full { grid-template-columns: minmax(0, 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);
/* Cards must be able to shrink with their track — without this a long
unbreakable title or legend could re-pin the min-content width. */
min-width: 0;
}
.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);
}
.ee-chart-header--interactive {
position: relative;
padding-right: 150px;
min-height: 24px;
}
/* Shared interaction affordance. It is injected by EE.interactions only
after a chart or table row has actually been wired, so its presence is a
reliable promise: "selectable" means an action will open. Static visuals
deliberately receive no badge. */
.ee-ix-affordance {
display: inline-flex;
align-items: center;
gap: 5px;
width: max-content;
padding: 4px 8px;
border: 1px solid color-mix(in srgb, var(--ee-blue) 28%, var(--ee-border-light));
border-radius: 999px;
background: var(--ee-blue-lighter);
color: var(--ee-blue);
font-size: 11px;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}
.ee-chart-header--interactive > .ee-ix-affordance {
position: absolute;
top: 0;
right: 0;
}
.ee-ix-affordances--standalone {
display: flex;
justify-content: flex-end;
gap: 6px;
margin: -4px 0 8px;
}
.ee-selection-toolbar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 12px 16px;
}
.ee-selection-toolbar__count {
color: var(--text-muted);
font-size: var(--fs-sm);
font-weight: 600;
white-space: nowrap;
}
.ee-selection-toolbar__actions {
display: flex;
align-items: center;
gap: 8px;
}
@media (max-width: 560px) {
.ee-selection-toolbar { justify-content: space-between; }
}
.ee-ix-card-affordance {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 10px;
color: var(--ee-blue);
font-size: 11px;
font-weight: 700;
line-height: 1.2;
}
.ee-ix-card-affordance span { font-size: 14px; }
@media (max-width: 560px) {
.ee-chart-header--interactive { padding-right: 0; }
.ee-chart-header--interactive > .ee-ix-affordance {
position: static;
margin-top: 7px;
}
}
/* 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;
}
/* Chart legend for encodings Chart.js cannot describe itself — a per-mark
performance ramp, a drawn target tick, a dashed reference line. Built by
EE.swatchLegend(); colours arrive as live tokens so tenant/dark themes hold. */
.ee-chart-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 16px;
margin: 6px 0 0;
font-size: 12px;
color: var(--ee-text-secondary);
}
.ee-chart-legend__label {
font-weight: 600;
color: var(--ee-text-muted);
}
.ee-chart-legend__item {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.ee-chart-legend__mark {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 3px;
flex: none;
}
.ee-chart-legend__mark--tick,
.ee-chart-legend__mark--line {
width: 18px;
height: 3px;
border-radius: 2px;
}
/* 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[data-clickable]:hover td {
background: var(--ee-blue-lighter);
}
.ee-table tbody tr[data-clickable] {
cursor: pointer;
}
.ee-table td[data-clickable] { cursor: pointer; }
.ee-table tbody tr[data-clickable]:focus-visible > td {
background: var(--ee-blue-lighter);
outline: 2px solid var(--ee-blue);
outline-offset: -2px;
}
.ee-table td[data-clickable]:focus-visible {
outline: 2px solid var(--ee-blue);
outline-offset: -2px;
}
/* The same contract also serves bespoke grid/list renderers whose rows are
divs rather than table rows. Page-local pointer styles are not sufficient:
these states make the action visible to keyboard users as well. */
[data-clickable]:not(tr):not(td) { cursor: pointer; }
[data-clickable]:not(tr):not(td):focus-visible,
[data-ee-disclosure]:focus-visible,
th[data-ee-sortable]:focus-visible {
outline: 2px solid var(--ee-blue);
outline-offset: 2px;
}
.ee-ix-disclosure {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin-right: 6px;
color: var(--ee-text-muted);
font-size: 15px;
line-height: 1;
transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
.ee-ix-disclosure { transition: transform .15s ease; }
}
.ee-ix-disclosure--open { transform: rotate(90deg); }
th[data-ee-sortable] {
cursor: pointer;
user-select: none;
white-space: nowrap;
}
th[data-ee-sortable]:hover { color: var(--ee-blue); }
/* The sort control must be visible, not discovered by hovering: an idle ↕ on
every sortable header and ↑ / ↓ on the active one, matching the V2 shell's
own tables (.table th.sortable) so report and shell tables read alike. */
th[data-ee-sortable]::after {
content: '\2195';
margin-left: 5px;
font-size: 10px;
opacity: 0.45;
}
th[data-ee-sortable][aria-sort="ascending"],
th[data-ee-sortable][aria-sort="descending"] { color: var(--ee-blue); }
th[data-ee-sortable][aria-sort="ascending"]::after { content: '\2191'; opacity: 1; }
th[data-ee-sortable][aria-sort="descending"]::after { content: '\2193'; opacity: 1; }
.ee-chart-card.ee-ix-interactive:focus-within {
box-shadow: 0 0 0 2px var(--ee-blue), var(--ee-shadow-md);
}
/* Numeric columns: header AND cells right-aligned so the column
reads as a clean stack of digits. Apply class="num" to both the
| and the | for any column carrying a number — without it
on the | , 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;
}
/* Comparison cells lead with the GAP (design gate, marge-report-design):
arrow + magnitude first, the reference value beneath in .ee-cell-note.
The arrow is the non-colour cue; colour marks ONLY the favourable
direction, so the unfavourable side keeps full text contrast. Promoted
from the Weekly Monitor's page stylesheet so every report shares one
treatment. Token-only: follows the tenant brand and dark mode. */
.ee-gap {
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ee-gap--favourable { color: var(--ee-blue); }
.ee-gap--unfavourable { color: var(--ee-text); }
.ee-gap--level,
.ee-gap--none { color: var(--ee-text-muted); font-weight: 500; }
.ee-cell-note {
display: block;
font-size: 11px;
font-weight: 400;
color: var(--ee-text-muted);
margin-top: 3px;
white-space: nowrap;
}
.ee-sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
/* 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;
}
/* Magnitude data-bars: a faint background bar behind each numeric value, scaled
to the cell's number vs the table's (or per-column) min/max, so a dense table
of figures reads at a glance instead of cell-by-cell. Opt in with class
.ee-table--bars on the (optionally data-bar-scope="column" | "row");
EE.tableBars() — auto-run by the router after each render — tags the numeric
cells .ee-bar and sets --ee-bar-w. The number stays on top and readable. */
.ee-table--bars td.ee-bar {
background-image: linear-gradient(to right,
var(--ee-bar-color, rgba(21, 145, 209, 0.18)) var(--ee-bar-w, 0%),
transparent var(--ee-bar-w, 0%));
background-repeat: no-repeat;
background-size: 100% calc(100% - 8px);
background-position: left center;
}
/* -----------------------------------------------------------
9. LOADING STATE
----------------------------------------------------------- */
.ee-loading {
text-align: center;
padding: 80px 0;
color: var(--ee-text-muted);
font-size: 14px;
}
/* Full-pane loading runs the mark at the same 44px the busy veil already
uses — one canvas size, not two. The component's 96px default stays for
anything that asks for it explicitly; at full size on an empty pane the
mark reads clunky rather than calm (Matt, 12 Aug). */
.ee-loading .ee-spinner { --ee-spinner-size: 44px; }
/* .ee-spinner — the logomark breathe spinner.
Ported from the MG V2 Shell design system (components/loading-spinner.html
+ styles.css § LOADING SPINNER). The mark's four quadrants breathe in a
clockwise sequence from the top-right: scale .7 → 1.08 → .9, opacity
.3 → 1 → .6, each offset by a quarter of the cycle. Size with
--ee-spinner-size, tempo with --ee-spinner-dur.
The four s are emitted by EE.spinner() in ee-chart-theme.js — call
that rather than hand-writing the geometry, so a change to the mark lands
in one place. The class name is unchanged from the old border spinner, so
every existing container rule (.ee-loading, .ee-busy-veil) still applies.
The greens and blues are the logomark's own FIXED brand colours — never
tenant-tinted, so these are literals by design, not missing tokens. Dark
mode swaps to the alternate mark by flipping .tile-b to white; nothing
else changes. */
.ee-spinner {
display: inline-block;
margin-bottom: 12px;
}
.ee-spinner svg {
width: var(--ee-spinner-size, 96px);
height: var(--ee-spinner-size, 96px);
display: block;
overflow: visible;
}
.ee-spinner .tile {
transform-box: fill-box;
transform-origin: center;
animation: ee-spinner-breathe var(--ee-spinner-dur, 2s) cubic-bezier(.4, 0, .4, 1) infinite;
}
.ee-spinner .tile-g { fill: #02E29C; }
.ee-spinner .tile-b { fill: #0C5EE2; }
[data-theme="dark"] .ee-spinner .tile-b { fill: #FFFFFF; }
.ee-spinner .tile:nth-of-type(1) { animation-delay: 0s; } /* top-right */
.ee-spinner .tile:nth-of-type(2) { animation-delay: calc(var(--ee-spinner-dur, 2s) * .25); } /* bottom-right */
.ee-spinner .tile:nth-of-type(3) { animation-delay: calc(var(--ee-spinner-dur, 2s) * .5); } /* bottom-left */
.ee-spinner .tile:nth-of-type(4) { animation-delay: calc(var(--ee-spinner-dur, 2s) * .75); } /* top-left */
@keyframes ee-spinner-breathe {
0%, 100% { transform: scale(.7); opacity: .3; }
25% { transform: scale(1.08); opacity: 1; }
55% { transform: scale(.9); opacity: .6; }
}
/* The old border spinner animated regardless of the user's motion setting.
The mark holds still and reads at full strength instead. */
@media (prefers-reduced-motion: reduce) {
.ee-spinner .tile { animation: none; opacity: 1; }
}
/* Busy veil — in-page refetch feedback (Open Data chip switches etc.).
Covers the page container so the user can't stack clicks while a
query runs; the fade-in makes the response to a click feel instant.
The dim/blur sits on a pseudo-element deliberately. A backdrop-filter
on .ee-busy-veil itself makes it a containing block in WebKit, which
traps a fixed child inside the (potentially very tall) page container.
Keeping that effect on ::before lets the inner wrapper be genuinely
fixed to — and centred in — the visible viewport. */
.ee-busy-veil {
position: absolute;
inset: 0;
z-index: 30;
font-size: 13px;
color: var(--ee-text-muted);
animation: ee-veil-in 0.15s ease;
}
.ee-busy-veil::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.65);
-webkit-backdrop-filter: blur(1.5px);
backdrop-filter: blur(1.5px);
}
.ee-busy-veil__inner {
position: fixed;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 22px;
}
/* The veil sits the mark beside its label on one row, not above it, so it
takes the compact size — the 96px default would dwarf a 13px label. */
.ee-busy-veil .ee-spinner { margin-bottom: 0; --ee-spinner-size: 44px; }
@keyframes ee-veil-in { from { opacity: 0; } to { opacity: 1; } }
/* -----------------------------------------------------------
10. RESPONSIVE
----------------------------------------------------------- */
@media (max-width: 1024px) {
/* .ee-chart-grid--three override removed — the base rule's
repeat(auto-fit, minmax(...)) already drops columns as the CONTAINER
narrows, and the old `1fr 1fr` here re-pinned the tracks at the
canvases' rendered width (the Chart.js shrink lock). */
.ee-insight-list--grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
/* minmax(0,1fr), not 1fr — single column but still shrinkable below
the canvas's rendered width (see .ee-chart-grid). */
.ee-chart-grid,
.ee-chart-grid--three { grid-template-columns: minmax(0, 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: flex-end;
padding: 10px 16px;
border-bottom: 1px solid var(--ee-chat-border);
background: var(--ee-chat-surface);
flex-shrink: 0;
}
.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);
}
/* Trusted Visual Catalogue navigation appended outside model markdown. */
.ee-chat__visual-links {
display: grid;
gap: 8px;
margin: 12px 0 2px;
}
.ee-chat__visual-link {
appearance: none;
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border: 1px solid color-mix(in srgb, var(--ee-chat-green) 30%, transparent);
border-radius: 9px;
background: color-mix(in srgb, var(--ee-chat-green) 8%, var(--ee-chat-surface));
color: var(--ee-chat-green);
font: inherit;
text-align: left;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.ee-chat__visual-link:hover {
background: color-mix(in srgb, var(--ee-chat-green) 14%, var(--ee-chat-surface));
border-color: var(--ee-chat-green);
}
.ee-chat__visual-link:focus-visible {
outline: 2px solid var(--ee-chat-green);
outline-offset: 2px;
}
.ee-chat__visual-link-copy { flex: 1; min-width: 0; }
.ee-chat__visual-link strong,
.ee-chat__visual-link small { display: block; }
.ee-chat__visual-link strong { color: inherit; font-size: 13px; }
.ee-chat__visual-link small {
margin-top: 1px;
color: var(--ee-chat-text-muted);
font-size: 11px;
font-weight: 400;
}
.ee-chat__visual-link-arrow { flex: none; font-size: 15px; }
/* 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: var(--ee-chart-btn-bg, rgba(255, 255, 255, 0.85));
border: 1px solid var(--ee-chart-btn-border, rgba(0, 0, 0, 0.08));
border-radius: 6px;
color: var(--ee-chart-btn-fg, #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: var(--ee-chart-btn-bg-hover, #ffffff);
color: var(--ee-blue, #0c5ee2);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}
.ee-chart-expand-btn:focus-visible {
outline: 2px solid var(--ee-blue, #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; }
/* -----------------------------------------------------------
CHART ZOOM MODE
(buttons + selection rect injected by ee-chart-theme.js::makeZoomable;
line charts only, sits left of the expand button)
----------------------------------------------------------- */
.ee-chart-zoom-btn,
.ee-chart-zoomreset-btn {
position: absolute;
top: 8px;
width: 28px;
height: 28px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--ee-chart-btn-bg, rgba(255, 255, 255, 0.85));
border: 1px solid var(--ee-chart-btn-border, rgba(0, 0, 0, 0.08));
border-radius: 6px;
color: var(--ee-chart-btn-fg, #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;
z-index: 5;
font-family: inherit;
}
.ee-chart-zoom-btn { right: 42px; } /* expand sits at 8px + 28px + 6px gap */
.ee-chart-zoomreset-btn { right: 76px; display: none; }
.ee-chart-zoomreset-btn--visible { display: inline-flex; }
.ee-chart-zoom-btn:hover,
.ee-chart-zoomreset-btn:hover {
background: var(--ee-chart-btn-bg-hover, #ffffff);
color: var(--ee-blue, #0c5ee2);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}
.ee-chart-zoom-btn:focus-visible,
.ee-chart-zoomreset-btn:focus-visible {
outline: 2px solid var(--ee-blue, #0c5ee2);
outline-offset: 2px;
}
.ee-chart-zoom-btn--active {
background: var(--ee-blue, #0c5ee2);
border-color: var(--ee-blue, #0c5ee2);
color: #ffffff;
}
.ee-chart-zoom-btn--active:hover {
background: var(--ee-blue-dark, #0a4cc0);
color: #ffffff;
}
.ee-chart-zoom-btn__icon {
width: 14px;
height: 14px;
fill: currentColor;
display: block;
}
/* Drag-selection rectangle over the plot area. */
.ee-chart-zoom-selection {
position: absolute;
display: none;
background: color-mix(in srgb, var(--ee-blue, #0c5ee2) 14%, transparent);
border: 1px solid var(--ee-blue, #0c5ee2);
border-radius: 2px;
pointer-events: none;
z-index: 4;
}
/* 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);
}
.ee-insight-card[data-clickable]:hover,
.ee-insight-card[data-clickable]:focus-visible {
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); }
/* -----------------------------------------------------------
CANVAS INTERACTIONS (P0 lab) — context menu, details popover,
per-card state chips, toast. docs/canvas-interactions-rnd.md
----------------------------------------------------------- */
.ee-ctx-menu { position: fixed; z-index: 1200; min-width: 236px; background: var(--ee-surface, #fff); border: 1px solid var(--ee-border, #e5e7eb); border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 23, 42, .16); padding: 5px; font-size: 13px; }
.ee-ctx-menu__head { padding: 7px 11px 6px; border-bottom: 1px solid var(--ee-border-light, #f0f0f0); margin-bottom: 4px; }
.ee-ctx-menu__head b { display: block; font-size: 12.5px; color: var(--ee-text, #1a1a1a); }
.ee-ctx-menu__head span { font-size: 11px; color: var(--ee-text-muted, #6b7280); }
.ee-ctx-menu__item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 11px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ee-text-secondary, #424242); border-radius: 7px; cursor: pointer; text-align: left; }
.ee-ctx-menu__item:hover:not([disabled]), .ee-ctx-menu__item:focus-visible { background: var(--ee-blue-lighter, #eff6ff); color: var(--ee-text, #1a1a1a); outline: none; }
.ee-ctx-menu__item[disabled] { opacity: .45; cursor: default; }
.ee-ctx-menu__icon { width: 16px; text-align: center; color: var(--ee-blue, #0c5ee2); font-weight: 700; flex: none; }
.ee-ctx-menu__tag { margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; color: var(--ee-text-muted, #6b7280); border: 1px solid var(--ee-border, #e5e7eb); border-radius: 4px; padding: 1px 5px; flex: none; }
.ee-popover { position: fixed; z-index: 1150; width: min(330px, calc(100vw - 24px)); background: var(--ee-surface, #fff); border: 1px solid var(--ee-border, #e5e7eb); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .16); padding: 14px 16px 12px; font-size: 13px; }
.ee-popover__close { position: absolute; top: 8px; right: 8px; border: 0; background: none; cursor: pointer; color: var(--ee-text-muted, #6b7280); font-size: 16px; padding: 2px 8px; border-radius: 6px; }
.ee-popover__close:hover { background: var(--ee-bg-grey, #f3f4f6); color: var(--ee-text, #1a1a1a); }
.ee-popover__kicker { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ee-blue, #0c5ee2); margin-bottom: 2px; }
.ee-popover h4 { margin: 0 0 2px; font-size: 14.5px; color: var(--ee-text, #1a1a1a); }
.ee-popover__big { font-size: 24px; font-weight: 650; color: var(--ee-text, #1a1a1a); margin: 4px 0 8px; }
.ee-popover__big small { font-size: 12px; font-weight: 500; color: var(--ee-text-muted, #6b7280); margin-left: 6px; }
.ee-popover__grid { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px; font-size: 12.5px; }
.ee-popover__grid .lbl { color: var(--ee-text-muted, #6b7280); }
.ee-popover__grid .val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ee-text, #1a1a1a); text-align: right; }
.ee-popover__grid .cmp { font-variant-numeric: tabular-nums; color: var(--ee-text-muted, #6b7280); text-align: right; }
.ee-popover__foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--ee-border-light, #f0f0f0); font-size: 10.5px; font-style: italic; color: var(--ee-text-muted, #6b7280); }
.ee-lab-banner { display: flex; align-items: center; gap: 10px; background: var(--ee-blue-lighter, #eff6ff); border: 1px solid var(--ee-blue-light, #dbeafe); color: var(--ee-text-secondary, #424242); border-radius: 9px; padding: 8px 14px; font-size: 12.5px; margin-bottom: 14px; }
.ee-ix-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.ee-ix-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--ee-blue-lighter, #eff6ff); border: 1px solid var(--ee-blue-light, #dbeafe); border-radius: 999px; padding: 2.5px 5px 2.5px 10px; font-size: 11.5px; color: var(--ee-text-secondary, #424242); }
.ee-ix-chip__tag { font-size: 9px; font-weight: 700; letter-spacing: .05em; color: var(--ee-blue, #0c5ee2); }
.ee-ix-chip__remove { border: 0; background: none; cursor: pointer; color: var(--ee-text-muted, #6b7280); font-size: 13px; line-height: 1; padding: 0 3px; border-radius: 50%; }
.ee-ix-chip__remove:hover { color: var(--ee-text, #1a1a1a); background: var(--ee-blue-light, #dbeafe); }
.ee-ix-sort { border: 1px solid var(--ee-border, #e5e7eb); background: none; border-radius: 6px; padding: 3px 9px; font-size: 11.5px; color: var(--ee-text-muted, #6b7280); cursor: pointer; flex: none; }
.ee-ix-sort:hover { color: var(--ee-blue, #0c5ee2); border-color: var(--ee-blue-light, #dbeafe); }
.ee-ix-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1300; background: var(--ee-tooltip-bg, #1a1a2e); color: var(--ee-tooltip-text, #fff); border-radius: 8px; padding: 8px 16px; font-size: 12.5px; opacity: 0; transition: opacity .25s; pointer-events: none; }
.ee-ix-toast--show { opacity: 1; }
/* Details-on-demand stat block (P2 detail endpoint) */
.ee-pop-sec { font-size: 10px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--ee-text-muted, #6b7280); margin: 11px 0 5px; }
.ee-pop-iqr { display: block; width: 100%; height: auto; }
.ee-pop-band { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 12px; color: var(--ee-text-secondary, #424242); }
.ee-pop-band__lbl { width: 62px; color: var(--ee-text-muted, #6b7280); flex: none; }
.ee-pop-band__bar { display: inline-block; height: 10px; border-radius: 3px; flex: none; }
.ee-pop-band b { font-variant-numeric: tabular-nums; }
.ee-pop-band__pct { color: var(--ee-text-muted, #6b7280); }
.ee-pop-bench { display: flex; justify-content: space-between; font-size: 12.5px; padding: 4px 0; border-top: 1px solid var(--ee-border-light, #f0f0f0); }
.ee-pop-bench b { font-variant-numeric: tabular-nums; color: var(--ee-text, #1a1a1a); }
.ee-pop-loading { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ee-text-muted, #6b7280); padding: 10px 0; }
/* Inline variant — the mark on the same line as a label, inside a popover
body or a disclosure button. Sits on the text baseline and carries no
bottom margin. 18px is the floor at which four separate quadrants still
read as the logomark; the design system's own smallest documented size is
32px, which is far too big for a 12.5px line of text.
Use it as `class="ee-spinner ee-spinner--inline"` — it is a size modifier
on the one spinner, not a second implementation. */
.ee-spinner--inline {
margin-bottom: 0;
vertical-align: middle;
--ee-spinner-size: 18px;
}
/* Rows-behind-aggregate pupil drawer (P2 rows-behind) */
.ee-ix-drawer__overlay { position: fixed; inset: 0; z-index: 1180; background: rgba(15, 23, 42, .28); }
.ee-ix-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1190; width: min(520px, 94vw); background: var(--ee-surface, #fff); box-shadow: -8px 0 32px rgba(15, 23, 42, .18); display: flex; flex-direction: column; transform: translateX(100%); }
@media (prefers-reduced-motion: no-preference) { .ee-ix-drawer { transition: transform .2s ease; } }
.ee-ix-drawer--open { transform: translateX(0); }
.ee-ix-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 15px 18px 12px; border-bottom: 1px solid var(--ee-border, #e5e7eb); }
.ee-ix-drawer__title { font-size: 15px; font-weight: 650; color: var(--ee-text, #1a1a1a); }
.ee-ix-drawer__sub { font-size: 12px; color: var(--ee-text-muted, #6b7280); margin-top: 2px; }
.ee-ix-drawer__close { border: 0; background: none; cursor: pointer; color: var(--ee-text-muted, #6b7280); font-size: 20px; line-height: 1; padding: 2px 8px; border-radius: 6px; }
.ee-ix-drawer__close:hover { background: var(--ee-bg-grey, #f3f4f6); color: var(--ee-text, #1a1a1a); }
.ee-ix-drawer__bands { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px; border-bottom: 1px solid var(--ee-border-light, #f0f0f0); }
.ee-ix-band { font-size: 12px; font-weight: 550; color: var(--ee-text-secondary, #424242); background: none; border: 1px solid var(--ee-border, #e5e7eb); border-radius: 999px; padding: 3px 11px; cursor: pointer; }
.ee-ix-band:hover { border-color: var(--ee-blue-light, #dbeafe); color: var(--ee-blue, #0c5ee2); }
.ee-ix-band--on { background: var(--ee-blue, #0c5ee2); border-color: var(--ee-blue, #0c5ee2); color: #fff; }
.ee-ix-drawer__body { flex: 1; overflow-y: auto; padding: 4px 18px; }
.ee-ix-drawer__body table { width: 100%; }
.ee-ix-drawer__foot { padding: 9px 18px; border-top: 1px solid var(--ee-border, #e5e7eb); font-size: 11.5px; color: var(--ee-text-muted, #6b7280); font-variant-numeric: tabular-nums; }
.ee-ix-record { margin: 0; padding: 8px 0 18px; }
.ee-ix-record__row { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(0, 1.2fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ee-border-light, #f0f0f0); }
.ee-ix-record__row dt { color: var(--ee-text-muted, #6b7280); font-size: 12px; font-weight: 650; }
.ee-ix-record__row dd { margin: 0; color: var(--ee-text, #1a1a1a); font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.ee-ix-record__row dd small { display: block; margin-top: 3px; color: var(--ee-text-muted, #6b7280); font-size: 11px; font-weight: 400; }
.ee-ix-chips[hidden] { display: none !important; }
@media (max-width: 560px) {
.ee-ix-record__row { grid-template-columns: 1fr; gap: 4px; }
}
/* In-place drill breadcrumb (P2 drill-down) */
.ee-ix-crumbs { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ee-text-muted, #6b7280); margin: 2px 0 8px; }
.ee-ix-crumbs a { color: var(--ee-blue, #0c5ee2); cursor: pointer; font-weight: 550; }
.ee-ix-crumbs a:hover { text-decoration: underline; }
.ee-ix-crumbs__sep { color: var(--ee-text-light, #9ca3af); }
.ee-ix-crumbs__here { color: var(--ee-text-secondary, #424242); font-weight: 600; }
/* Tree table — expandable nested rows (P2 tree tables) */
.ee-ix-tree__label { display: inline-flex; align-items: center; gap: 6px; }
.ee-ix-tree__chev { border: 0; background: none; cursor: pointer; color: var(--ee-text-muted, #6b7280); font-size: 10px; line-height: 1; width: 16px; height: 16px; padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; }
@media (prefers-reduced-motion: no-preference) { .ee-ix-tree__chev { transition: transform .15s; } }
.ee-ix-tree__chev--open { transform: rotate(90deg); }
.ee-ix-tree__chev--leaf { width: 16px; flex: none; }
.ee-ix-tree__row--l1 > td:first-child, .ee-ix-tree__row[data-level="1"] > td:first-child { color: var(--ee-text-secondary, #424242); }
.ee-ix-tree__row[data-level="1"] > td { background: color-mix(in srgb, var(--ee-bg-grey, #f3f4f6) 40%, transparent); }
.ee-ix-tree__row--click { cursor: pointer; }
.ee-ix-tree__row--click:hover > td { background: var(--ee-blue-lighter, #eff6ff); }
/* ============================================================
CURRICULUM & CONTEXT — design-uplift layer (2026-07)
Additive only. Token gap-fillers + dark mode at the token layer
+ the three shared components (provenance passport, chip family,
KPI hierarchy) promoted out of the five curriculum renderers.
Design ref: docs/curriculum-ux-handover (Claude Design handoff).
============================================================ */
/* --- token gap-fillers (names the uplift references) --- */
:root {
--ee-border-strong: #CBD3DE;
--ee-origin-real: var(--ee-blue);
--ee-origin-real-soft: #EAF1FE;
--ee-origin-syn: #8A5E14; /* legible warm amber for text */
--ee-origin-syn-soft: #FBF1DC;
--ee-origin-syn-line: #E3C583;
--ee-series-5-soft: #E7E9FD;
}
/* --- dark mode: override token VALUES only; every var() inherits --- */
[data-theme="dark"] {
--ee-blue:#5A9BFF; --ee-blue-dark:#4C8DFF; --ee-blue-light:#1E3A6B; --ee-blue-lighter:#122542;
--ee-green:#33E9B0; --ee-green-dark:#2BC698; --ee-green-a11y:#33E9B0; --ee-navy:#0B1220;
--ee-error:#F87171; --ee-error-light:#3A1B1B; --ee-warning:#FBBF24; --ee-warning-light:#332811;
--ee-success:#34D399; --ee-success-light:#0F2A20;
--ee-div-neg-strong:#F0A65A; --ee-div-neg:#8A6533; --ee-div-neutral:#33415C;
--ee-div-pos:#3E5C86; --ee-div-pos-strong:#5A9BFF;
--ee-seq-1:#17263F; --ee-seq-2:#254069; --ee-seq-3:#3A6FB0; --ee-seq-4:#5A9BFF; --ee-seq-5:#9CC2FF;
--ee-series-5:#A5B4FC; --ee-series-5-soft:#1F2440;
--ee-text:#E7ECF3; --ee-text-secondary:#C3CCDA; --ee-text-muted:#9AA6B8; --ee-text-light:#68738A;
--ee-border:#22304A; --ee-border-light:#1A2740; --ee-border-strong:#354763;
--ee-bg:#080D16; --ee-bg-grey:#0D1524; --ee-surface:#111A2B;
--ee-origin-real:#5A9BFF; --ee-origin-real-soft:#122542;
--ee-origin-syn:#E0B366; --ee-origin-syn-soft:#241C0F; --ee-origin-syn-line:#5A4A22;
--ee-shadow-sm:0 1px 3px rgba(0,0,0,.45);
--ee-shadow-md:0 8px 26px rgba(0,0,0,.5);
--ee-shadow-lg:0 10px 30px rgba(0,0,0,.55);
}
/* ============================================================
V2 SHELL — dark-mode completion + shell chrome tokens (2026-07)
Additive only. Token VALUES only; no component rules.
The block above (curriculum uplift) darkened the core palette —
text, borders, surfaces, sequential and diverging ramps. It left
the chart chrome, the categorical series, the RAG/performance
scales and the attendance colours on their light-mode values,
which is why a chart in dark mode still drew #333 titles and
#E0E0E0 gridlines onto a near-black surface. This completes the
set so every --ee-* token has a dark counterpart.
============================================================ */
:root {
/* Shell chrome. Named here so the theme bridge has something to
write to; the white-label contract drives them per tenant. */
--ee-header-bg: #FFFFFF;
--ee-sidebar-bg: #FFFFFF;
--ee-sidebar-text: #1A1A1A;
/* Text that sits ON a coloured surface. Recomputed per tenant by
ee-shell-theme.js, because a pale brand needs dark text. */
--ee-on-brand: #FFFFFF;
--ee-on-header: #1A1A1A;
--ee-on-sidebar: #1A1A1A;
}
[data-theme="dark"] {
/* Chart chrome — the gap that mattered most. These were the only
tokens still resolving to near-black ink on a near-black card. */
--ee-chart-title: #E7ECF3;
--ee-chart-subtitle: #C3CCDA;
--ee-chart-label: #9AA6B8;
--ee-chart-value: #E7ECF3;
--ee-chart-grid: #22304A;
--ee-chart-grid-light: #1A2740;
--ee-chart-annotation: #9AA6B8;
/* De-emphasis inverts: paler than the ink in light, darker in dark. */
--ee-chart-muted: #68738A;
--ee-chart-context: #3A4A66;
--ee-chart-border: rgba(255, 255, 255, 0.14);
/* Tooltip inverts in dark mode: a near-black tooltip on a near-black
card has no edge, so it goes light-on-dark-surface instead. */
--ee-tooltip-bg: #E7ECF3;
--ee-tooltip-text: #0B1220;
/* Expand chip. The light values are a white wash of the card, so in
dark it is a wash of the dark card — not a white chip on it. */
--ee-chart-btn-bg: rgba(17, 26, 43, 0.85);
--ee-chart-btn-bg-hover: #1B2740;
--ee-chart-btn-border: rgba(255, 255, 255, 0.16);
--ee-chart-btn-fg: #C3CCDA;
/* Categorical series. Lifted in lightness and slightly desaturated —
fully-saturated hues vibrate against a dark ground. Hue order is
preserved so a series keeps its identity across a mode flip. */
--ee-series-1: #5A9BFF; /* brand blue — focal group */
--ee-series-2: #45D6BB; /* teal — comparator */
--ee-series-3: #A3AABC; /* slate — context/benchmark */
--ee-series-4: #F0A65A; /* warm amber — third series */
--ee-series-6: #C4B5FD; /* lavender — fifth series */
/* Performance + RAG ramps (blue-scale, not literal red/amber/green —
the light-mode comment applies unchanged). */
--ee-perf-strong: #5A9BFF;
--ee-perf-expected: #3A6FB0;
--ee-perf-below: #254069;
--ee-rag-red: #254069;
--ee-rag-amber: #3A6FB0;
--ee-rag-green: #5A9BFF;
/* Attendance. Presence/absence must stay separable for colour-blind
readers, so the blue/amber split is kept and only lifted. */
--ee-presence: #5A9BFF;
--ee-absence: #F0A65A;
--ee-auth-absence: #F0A65A;
--ee-unauth-absence: #A5B4FC;
--ee-primary-bar: #5A9BFF;
--ee-context-bar: #45D6BB;
/* Shell chrome. Not pure black: a near-black surface with a lighter
header/sidebar keeps the elevation model readable. */
--ee-header-bg: #111A2B;
--ee-sidebar-bg: #0D1524;
--ee-sidebar-text: #E7ECF3;
--ee-on-brand: #0B1220;
--ee-on-header: #E7ECF3;
--ee-on-sidebar: #E7ECF3;
}
/* Curriculum page root: carries the theme + a themed backdrop so a page
sits correctly in either mode (the demo toggle sets data-theme here). */
.cur-root { color: var(--ee-text); }
.cur-root[data-theme="dark"] {
background: var(--ee-bg);
border-radius: var(--ee-radius-lg);
padding: 2px;
}
/* ---------- (1) provenance passport ---------- */
/* Replaces the 5x copy-pasted .cur-provenance banner + badge soup.
Origin language: REAL = solid border + filled dot; SYNTHETIC =
dashed border + hollow dashed dot. Reuse the -real/-synthetic
modifiers anywhere real vs illustrative must be distinguished. */
.ee-provenance {
display: flex; flex-wrap: wrap; align-items: stretch;
border: 1px solid var(--ee-border); border-radius: var(--ee-radius-lg);
overflow: hidden; margin-bottom: var(--ee-space-md); background: var(--ee-surface);
}
.ee-provenance--synthetic { border-style: dashed; border-color: var(--ee-origin-syn-line); }
.ee-provenance__stamp {
display: flex; align-items: center; gap: 9px; padding: 11px 16px;
border-right: 1px solid var(--ee-border); min-width: 128px;
background: var(--ee-origin-real-soft);
}
.ee-provenance--synthetic .ee-provenance__stamp {
background: var(--ee-origin-syn-soft); border-right: 1px dashed var(--ee-origin-syn-line);
}
.ee-provenance__dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto;
background: var(--ee-origin-real); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ee-origin-real) 22%, transparent); }
.ee-provenance--synthetic .ee-provenance__dot { background: transparent; border: 2px dashed var(--ee-origin-syn); box-shadow: none; }
.ee-provenance__title { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--ee-origin-real); }
.ee-provenance--synthetic .ee-provenance__title { color: var(--ee-origin-syn); }
.ee-provenance__sub { font-size: 10px; color: var(--ee-text-muted); }
.ee-provenance__body { flex: 1; min-width: 240px; display: flex; align-items: center;
padding: 11px 16px; font-size: 12.5px; color: var(--ee-text); line-height: 1.45; }
.ee-provenance__howto {
align-self: center; margin: 0 12px 0 auto; white-space: nowrap;
border: 1px solid var(--ee-border-strong); background: var(--ee-surface); color: var(--ee-text);
padding: 6px 12px; border-radius: var(--ee-radius-pill); font-size: 12px; font-weight: 600;
cursor: pointer; font-family: var(--ee-font);
}
.ee-provenance__howto:hover { border-color: var(--ee-blue); color: var(--ee-blue); }
.ee-howto {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px;
margin-bottom: var(--ee-space-md); animation: cur-fade .2s ease both;
}
.ee-howto__card { border: 1px solid var(--ee-border); border-radius: var(--ee-radius);
background: var(--ee-bg-grey); padding: 12px 14px; }
.ee-howto__card b { display: block; font-size: 12px; margin-bottom: 3px; }
.ee-howto__card span { font-size: 11.5px; color: var(--ee-text-muted); line-height: 1.5; }
/* ---------- (2) chip family ---------- */
.ee-chip {
display: inline-flex; align-items: center; gap: 7px;
padding: 3px 11px; border-radius: var(--ee-radius-pill);
font-size: 11.5px; font-weight: 700; line-height: 1.5; white-space: nowrap;
background: var(--ee-bg-grey); color: var(--ee-text-muted);
}
.ee-chip__dots { letter-spacing: 1px; font-size: .95em; }
.ee-chip--conf-high { background: var(--ee-success-light); color: var(--ee-success); }
.ee-chip--conf-mid { background: var(--ee-warning-light); color: var(--ee-warning); }
.ee-chip--conf-low { background: var(--ee-error-light); color: var(--ee-error); }
.ee-chip--demo { background: var(--ee-origin-syn-soft); color: var(--ee-origin-syn);
border: 1px dashed var(--ee-origin-syn-line); font-weight: 600; }
.ee-chip--info { background: var(--ee-bg-grey); color: var(--ee-text-muted);
border: 1px solid var(--ee-border); font-weight: 600; }
/* per-claim evidence bases (Tutor Context) */
.ee-chip--basis-attendance { background: var(--ee-origin-real-soft); color: var(--ee-origin-real); font-weight: 600; }
.ee-chip--basis-curriculum { background: var(--ee-seq-1); color: var(--ee-seq-4); font-weight: 600; }
.ee-chip--basis-assessment { background: var(--ee-success-light); color: var(--ee-success); font-weight: 600; }
.ee-chip--basis-mixed { background: var(--ee-series-5-soft); color: var(--ee-series-5); font-weight: 600; }
/* ---------- (3) KPI hierarchy (extends existing .ee-kpi) ---------- */
.ee-kpi-strip { display: grid; gap: var(--ee-space-sm); align-items: stretch; }
.ee-kpi-tile { border-radius: var(--ee-radius-lg); padding: 13px 15px;
background: var(--ee-bg-grey); border: 1px solid var(--ee-border); }
.ee-kpi-tile__label { font-size: 10px; font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: var(--ee-text-light); }
.ee-kpi-tile__value { font-size: 19px; font-weight: 800; line-height: 1.05;
font-variant-numeric: tabular-nums; color: var(--ee-text); margin-top: 2px; }
.ee-kpi-tile__sub { font-size: 10.5px; color: var(--ee-text-muted); }
.ee-kpi-tile--primary { background: var(--ee-navy); border-color: var(--ee-navy); color: #fff; }
.ee-kpi-tile--primary .ee-kpi-tile__label { color: rgba(255,255,255,.7); }
.ee-kpi-tile--primary .ee-kpi-tile__value { color: #fff; font-size: 26px; }
.ee-kpi-tile--primary .ee-kpi-tile__sub { color: rgba(255,255,255,.72); }
/* Band chips. The .ee-badge--* variants hard-code a light hex pair and had no
dark override, so every "Top 25%" / "Below Average" chip stayed a pale block
on a dark table — the same complaint as the chart ink, in CSS rather than
canvas. Backgrounds become a tinted wash of the surface and the ink goes
light, keeping each variant's hue so the band still reads at a glance.
Light mode is untouched: these only apply under [data-theme="dark"]. */
[data-theme="dark"] .ee-badge--strong { background: rgba(96, 165, 250, 0.18); color: #BFDBFE; }
[data-theme="dark"] .ee-badge--expected { background: rgba(96, 165, 250, 0.14); color: #A9C9F8; }
[data-theme="dark"] .ee-badge--below { background: rgba(96, 165, 250, 0.10); color: #93B4E8; }
[data-theme="dark"] .ee-badge--green { background: rgba(96, 165, 250, 0.18); color: #BFDBFE; }
[data-theme="dark"] .ee-badge--amber { background: rgba(96, 165, 250, 0.14); color: #A9C9F8; }
[data-theme="dark"] .ee-badge--red { background: rgba(96, 165, 250, 0.10); color: #93B4E8; }
|