@import url('_tokens.css');

/* ==========================================================================
   IB Marker - Editorial design language, shared component layer
   Extracted 2026-07 from school-site.css (the v5.75.0 reference
   implementation) as the single source of truth for every Section 4
   component of Design_Language_Schema.md: chassis, sidebar/topbar chrome,
   panels, KPI rows, meters, tables, pills, buttons, forms, tabs, feeds,
   bar charts, ledgers, quick-action cards, compose, announcements,
   settings shell, alerts, modals, toasts, update cards, empty
   states, motion, view transitions, scrollbar, responsive behavior.

   Consumed by SchoolSite.Master + TeacherSite.Master (student portal
   migrates in a later effort). Load this BEFORE the portal sheet. The
   portal master adds the ed-app / ed-anim / ed-sidebar / ed-main /
   ed-topbar / ed-content classes alongside its portal-prefixed ones.

   All values resolve through the editorial tokens in _tokens.css - a brand
   change is an edit THERE, not here, and never in a portal sheet.
   ========================================================================== */

html, body { margin: 0; padding: 0; }

body {
    /* Editorial chassis: #0a0a14 with two teal radial glows (top-right,
       bottom-left) and a soft corner vignette - exactly the mockup paint. */
    min-height: 100vh;
    background-color: var(--chassis-bg-base);
    background-image: var(--ed-chassis-image);
    background-attachment: fixed;
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    font-size: var(--ed-text-base);
    line-height: 1.45;
}

.ed-app *,
.ed-app *::before,
.ed-app *::after {
    box-sizing: border-box;
}

.ed-app input[type="checkbox"] { accent-color: var(--brand-teal); }

/* ==========================================================================
   Sidebar (frosted)
   ========================================================================== */

.ed-sidebar {
    background: rgba(13, 13, 26, 0.55);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 0;
    height: 100vh;
    /* The rail itself never scrolls - the nav is the scroll region, so the
       brand block stays pinned at the top and the profile row + sign-out
       stay pinned at the bottom (matches the student rail). */
    overflow: hidden;
}

/* ----- Brand ----- */

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}
.brand-icon,
.brand-mark {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: transform var(--t-slow) var(--ease-paper);
}
img.brand-icon,
img.brand-mark {
    background: transparent;
    border: none;
    border-radius: 0;
    object-fit: contain;
}
.brand-icon:hover,
.brand-mark:hover { transform: rotate(-3deg) scale(1.04); }
.brand-text { display: flex; flex-direction: column; }
.brand-title,
.brand-name {
    font-family: var(--font-display);
    font-size: var(--ed-text-brand);
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink);
}
.brand-subtitle,
.brand-sub {
    font-size: var(--ed-text-tiny);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
    margin-top: 2px;
}

/* ----- School info card ----- */

.school-info-badge,
.school-card {
    background: linear-gradient(160deg, var(--surface-2), rgba(255, 255, 255, 0.015));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 12px 14px;
    position: relative;
    overflow: hidden;
    /* overflow:hidden zeroes the automatic flex minimum - without this the
       sidebar flex column crushes the card when the nav overflows 100vh */
    flex-shrink: 0;
    transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease;
    cursor: default;
}
.school-info-badge::before,
.school-card::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid var(--card-inset);
    border-radius: 2px;
    pointer-events: none;
}
.school-info-badge:hover,
.school-card:hover {
    border-color: rgba(var(--brand-teal-rgb, 45, 212, 168), 0.30);
    box-shadow: 0 0 0 3px var(--accent-tint);
}
.school-info-badge .eyebrow,
.school-card .eyebrow {
    font-size: var(--ed-text-label);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ink-3);
    margin-bottom: 5px;
}
.school-info-badge .school-info-name,
.school-card .name {
    font-size: var(--ed-text-ui);
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.school-info-badge .school-info-code,
.school-card .code {
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: var(--ed-text-fine);
    color: var(--ink-2);
}
.school-card .code b {
    color: var(--brand-teal);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* compact school selector inside the card */
.school-card .school-switch {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--rule);
    display: none;
}
.school-card .school-switch.is-multi { display: block; }
.school-card .school-switch label {
    display: block;
    font-size: var(--ed-text-label);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-3);
    margin-bottom: 6px;
}
.school-card .school-switch select {
    width: 100%;
    border: 1px solid var(--rule);
    background: rgba(255, 255, 255, 0.04);
    padding: 7px 8px;
    font-family: inherit;
    font-size: var(--ed-text-detail);
    color: var(--ink);
    border-radius: 3px;
}
.school-card .school-switch select option { background: var(--pop-modal); color: var(--ink); }

/* ----- Navigation ----- */

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
    /* min-height:0 lets the nav shrink below its content height so it can
       scroll inside the fixed-height rail instead of pushing the footer
       below the fold. */
    min-height: 0;
    overflow-y: auto;
}
.nav-section { display: flex; flex-direction: column; gap: 2px; }
.nav-section-title {
    font-size: var(--ed-text-micro);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
    margin: 0 10px 6px;
}
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    color: var(--ink-2);
    font-size: var(--ed-text-ui);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.nav-item .nav-icon,
.nav-item .ico {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    opacity: 0.75;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nav-item .nav-icon svg,
.nav-item .ico svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}
.nav-item .nav-text { flex: 1; }
.nav-item:not(.active):hover {
    background: var(--surface-2);
    color: var(--ink);
}
.nav-item:not(.active):hover .nav-icon,
.nav-item:not(.active):hover .ico { opacity: 1; }
.nav-item.active {
    background: var(--accent-tint-2);
    border-color: rgba(var(--brand-teal-rgb, 45, 212, 168), 0.22);
    color: var(--brand-teal-bright);
    font-weight: 500;
}
.nav-item.active .nav-icon,
.nav-item.active .ico { opacity: 1; }
.nav-badge {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--ed-text-fine);
    background: rgba(var(--brand-teal-rgb, 45, 212, 168), 0.14);
    color: var(--brand-teal-bright);
    padding: 1px 8px;
    border-radius: 999px;
    line-height: 1.4;
}

/* ----- Sidebar footer ----- */

.sidebar-footer {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}
.user-profile,
.user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 4px;
}
.user-avatar,
.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(var(--brand-teal-rgb, 45, 212, 168), 0.14);
    color: var(--brand-teal-bright);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--ed-text-detail);
    flex-shrink: 0;
}
.user-info { min-width: 0; flex: 1; }
.user-name {
    font-size: var(--ed-text-body);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}
.user-role {
    font-size: var(--ed-text-fine);
    color: var(--ink-3);
    margin-top: 2px;
}
.logout-btn,
.signout {
    margin-top: 12px;
    width: 100%;
    text-align: left;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 8px 10px;
    font-size: var(--ed-text-detail);
    color: var(--ink-2);
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: border-color var(--t-fast) ease, color var(--t-fast) ease, background var(--t-fast) ease;
}
.logout-btn:hover,
.signout:hover {
    background: rgba(255, 255, 255, 0.09);
    color: var(--ink);
}
.logout-btn svg,
.signout svg { width: 13px; height: 13px; fill: currentColor; }

/* ==========================================================================
   Main column
   ========================================================================== */

.ed-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0 var(--ed-main-pad-x);
}

.ed-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 18px;
    padding: 36px 0 16px;
    border-bottom: 1px solid var(--card-border);
}

.topbar-left { min-width: 0; }
.topbar-eyebrow,
.ed-topbar .breadcrumb {
    font-family: var(--font-body);
    font-size: var(--ed-text-label);
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--brand-coral);
    margin-bottom: 5px;
}
/* Pages with no breadcrumb (Dashboard greeting) collapse the eyebrow row. */
.topbar-eyebrow:empty { display: none; }
.ed-topbar h1,
.ed-topbar .page-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--ed-text-title);
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.ed-topbar h1 em,
.ed-topbar .page-title em {
    font-family: var(--font-accent);
    font-style: italic;
    color: var(--brand-teal);
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Optional sub-line under the title: a greeting or one-sentence lede (the Blazor
   v2 student and teacher pages carry sentence-length copy here). Meta chips stay
   for codes and counts; this is prose. */
.topbar-sub {
    margin: 4px 0 0;
    font-size: var(--ed-text-body);
    color: var(--ink-3);
    max-width: 62ch;
}

.topbar-right,
.topbar-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.topbar-meta .meta-chip {
    font-family: var(--font-mono);
    font-size: var(--ed-text-small);
    color: var(--ink-2);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--card-border);
    padding: 7px 14px;
    border-radius: 3px;
    white-space: nowrap;
}

/* mobile menu button - kept for responsive behavior */
.mobile-menu-btn {
    display: none;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 3px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink);
    margin-right: 12px;
}
.mobile-menu-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* ==========================================================================
   Content
   ========================================================================== */

.ed-content {
    padding: 20px 0 32px;
    flex: 1;
}

.stack-md > * + * { margin-top: 16px; }
.stack-sm > * + * { margin-top: 12px; }
.row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.grid-2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Equal-width pairing (quick-action 2x2 grid on the dashboard). */
.grid-2.grid-even { grid-template-columns: 1fr 1fr; gap: 14px; }

.muted { color: var(--ink-3); }
.small { font-size: var(--ed-text-small); }
.ink   { color: var(--ink); }
.coral { color: var(--brand-coral); }
.dt {
    font-family: var(--font-mono);
    font-size: var(--ed-text-micro);
    color: var(--ink-3);
    letter-spacing: 0.03em;
}
.mono {
    font-family: var(--font-mono);
    font-feature-settings: "tnum";
    color: var(--ink);
}

/* ==========================================================================
   Section eyebrow / rule cap
   ========================================================================== */

.section-eyebrow {
    font-family: var(--font-body);
    font-size: var(--ed-text-tiny);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--brand-coral);
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--brand-coral);
    opacity: 0.35;
}
.rule-cap {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px 0 14px;
    color: var(--ink-3);
    font-size: var(--ed-text-label);
    text-transform: uppercase;
    letter-spacing: 0.22em;
}
.rule-cap::before, .rule-cap::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rule);
}

/* ==========================================================================
   Panel / card (frosted)
   ========================================================================== */

.panel {
    background: var(--card-grad);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease;
}
.panel::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid var(--card-inset);
    border-radius: 2px;
    pointer-events: none;
    z-index: 0;
}
.panel > * { position: relative; z-index: 1; }
.panel:hover {
    border-color: rgba(var(--brand-teal-rgb, 45, 212, 168), 0.35);
    box-shadow: 0 10px 28px var(--shadow-mid);
}
.panel-pad { padding: 14px 20px 20px; }
.panel-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 20px 10px;
    margin: 0 20px;
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid var(--card-border);
}
.panel-h h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--ed-text-small);
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.panel-h .h-meta {
    font-family: var(--font-mono);
    font-size: var(--ed-text-micro);
    color: var(--ink-3);
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
}
.panel-h .h-meta .num {
    font-family: var(--font-mono);
    color: var(--ink);
}
/* number prefix used inside panel headers (01, I, II, ...) */
.panel-h .roman {
    font-family: var(--font-mono);
    font-size: var(--ed-text-micro);
    font-weight: 400;
    color: var(--brand-teal);
    letter-spacing: 0;
    margin-right: 4px;
}
.panel-h .roman.danger { color: var(--brand-coral); }

/* ==========================================================================
   KPI row
   ========================================================================== */

.kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--card-grad);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.kpi {
    padding: 16px 18px;
    border-right: 1px dashed var(--rule);
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    z-index: 1;
    cursor: default;
    transition: background var(--t-base) ease, transform var(--t-base) var(--ease-paper);
}
.kpi:last-child { border-right: none; }
.kpi:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-1px);
}
.kpi .label {
    font-family: var(--font-body);
    font-size: var(--ed-text-label);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-2);
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.kpi .label .ref {
    font-family: var(--font-mono);
    color: var(--ink-3);
    font-size: var(--ed-text-label);
    letter-spacing: 0.04em;
    margin-left: auto;
    text-transform: none;
}
.kpi .num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--ed-text-title);
    color: var(--ink);
    letter-spacing: -0.01em;
    font-feature-settings: "tnum";
    line-height: 1.1;
    transition: color var(--t-base) ease;
}
.kpi:hover .num { color: var(--brand-teal); }
.kpi .num small {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 400;
    font-size: var(--ed-text-ui);
    color: var(--ink-2);
    margin-left: 3px;
}
.kpi .sub {
    font-size: var(--ed-text-small);
    color: var(--ink-3);
    display: flex;
    gap: 6px;
    align-items: center;
}
.kpi .sub .delta { font-size: var(--ed-text-small); }
.kpi .sub .delta.up { color: var(--brand-teal); }
.kpi .sub .delta.down { color: var(--brand-coral); }

/* ==========================================================================
   Meter
   ========================================================================== */

.meter {
    height: var(--ed-meter-h);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 2px;
    position: relative;
}
.meter > span {
    display: block;
    height: 100%;
    background: var(--brand-teal);
    width: 0;
    transform-origin: left;
}
.meter > span.warn { background: var(--brand-amber); }
.meter > span.crit { background: var(--brand-coral); }
.meter-label {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: var(--ed-text-micro);
    color: var(--ink-3);
    margin-top: 4px;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ed-text-body);
}
.table thead th {
    text-align: left;
    padding: 13px 18px;
    font-family: var(--font-body);
    font-size: var(--ed-text-label);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--ink-2);
    border-bottom: 1px solid var(--rule);
    background: transparent;
}
.table thead th.r { text-align: right; }
.table tbody td {
    padding: 12px 18px;
    border-bottom: 1px solid var(--card-inset);
    vertical-align: middle;
    color: var(--ink-2);
    transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.table tbody td.r { text-align: right; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--row-hover); }

/* ==========================================================================
   Pills (status)
   ========================================================================== */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--ed-text-detail);
    text-transform: lowercase;
    letter-spacing: 0;
    padding: 1px 9px 2px;
    border: 1px solid currentColor;
    color: var(--ink-3);
    background: transparent;
    line-height: 1.4;
    border-radius: 2px;
}
.pill.paid    { color: var(--brand-teal); }
.pill.due     { color: var(--brand-amber); }
.pill.over    { color: var(--brand-coral); }
.pill.draft   { color: var(--ink-mute); }
.pill.solid {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.14);
    color: var(--ink-2);
}
.pill.solid.posted    { background: rgba(var(--brand-teal-rgb, 45, 212, 168), 0.85); border-color: transparent; color: var(--accent-ink); }
.pill.solid.scheduled { background: var(--brand-amber);   border-color: transparent; color: var(--amber-ink); }
.pill.solid.draft     { background: rgba(255, 255, 255, 0.14); border-color: transparent; color: var(--ink-2); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: var(--ed-text-compact);
    font-weight: 600;
    padding: 9px 18px;
    border: 1px solid var(--brand-teal);
    background: var(--brand-teal);
    color: var(--accent-ink);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 3px;
    text-decoration: none;
    transition: background var(--t-fast) ease, border-color var(--t-fast) ease,
                color var(--t-fast) ease, box-shadow var(--t-base) ease;
}
.btn:hover {
    background: var(--brand-teal-bright);
    border-color: var(--brand-teal-bright);
    box-shadow: 0 3px 10px var(--accent-tint-3);
}
.btn.ghost {
    background: var(--surface-2);
    color: var(--ink-2);
    border-color: var(--rule);
    font-weight: 400;
}
.btn.ghost:hover {
    background: rgba(255, 255, 255, 0.09);
    color: var(--ink);
    border-color: var(--rule);
    box-shadow: none;
}
.btn.subtle {
    background: var(--surface-2);
    color: var(--ink-2);
    border-color: var(--rule);
    font-weight: 400;
    font-size: var(--ed-text-compact);
    padding: 8px 16px;
}
.btn.subtle:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--rule);
    color: var(--ink);
    box-shadow: none;
}
.btn.subtle.small { padding: 7px 12px; font-size: var(--ed-text-detail); }
.btn.danger {
    background: rgba(255, 140, 140, 0.12);
    border-color: rgba(255, 140, 140, 0.35);
    color: var(--brand-coral);
}
.btn.danger:hover {
    background: rgba(255, 140, 140, 0.2);
    border-color: rgba(255, 140, 140, 0.5);
    box-shadow: none;
}
.btn.gold {
    background: var(--brand-amber);
    border-color: var(--brand-amber);
    color: var(--amber-ink);
}
.btn .ico,
.btn svg { width: 13px; height: 13px; fill: currentColor; }

.btn[disabled],
.btn[disabled]:hover,
.btn:disabled,
.btn:disabled:hover {
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none;
}

/* mini-btn - for approval / notice rows (uppercase editorial ghost) */
.mini-btn {
    background: transparent;
    border: 1px solid rgba(var(--brand-teal-rgb, 45, 212, 168), 0.45);
    font-family: var(--font-body);
    font-size: var(--ed-text-label);
    font-weight: 600;
    padding: 5px 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--brand-teal);
    cursor: pointer;
    border-radius: 2px;
    transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease, letter-spacing var(--t-base) ease;
}
.mini-btn:hover,
.mini-btn.ok:hover {
    background: var(--accent-tint-2);
    letter-spacing: 0.18em;
}
.mini-btn.ok {
    background: transparent;
    border-color: rgba(var(--brand-teal-rgb, 45, 212, 168), 0.45);
    color: var(--brand-teal);
}
.mini-btn.no {
    color: var(--brand-coral);
    border-color: rgba(255, 140, 140, 0.45);
    background: transparent;
}
.mini-btn.no:hover {
    background: rgba(255, 140, 140, 0.12);
    letter-spacing: 0.18em;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule-soft);
}
.form-row:last-child { border-bottom: none; }
.form-label {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 400;
    font-size: var(--ed-text-ui);
    color: var(--ink);
    letter-spacing: 0;
}
.form-label .req { color: var(--brand-coral); margin-left: 2px; }
.form-help {
    font-size: var(--ed-text-small);
    color: var(--ink-3);
    margin-top: 4px;
    max-width: 280px;
    line-height: 1.5;
}
.input,
.select,
.textarea,
.form-input {
    width: 100%;
    border: 1px solid var(--rule);
    background: rgba(255, 255, 255, 0.04);
    padding: 9px 12px;
    font-family: var(--font-body);
    font-size: var(--ed-text-body);
    color: var(--ink);
    border-radius: 3px;
    transition: border-color var(--t-fast) ease, background var(--t-base) ease, box-shadow var(--t-base) ease;
}
.input::placeholder,
.textarea::placeholder,
.form-input::placeholder { color: var(--ink-3); }
.select option { background: var(--pop-modal); color: var(--ink); }
.input:hover,
.select:hover,
.textarea:hover,
.form-input:hover { border-color: rgba(255, 255, 255, 0.2); }
.input:focus,
.select:focus,
.textarea:focus,
.form-input:focus {
    outline: none;
    border-color: var(--brand-teal);
    background: var(--surface-2);
    box-shadow: 0 0 0 3px var(--accent-tint-2);
}
.input.mono { font-family: var(--font-mono); font-size: var(--ed-text-compact); letter-spacing: 0.02em; }
.input[disabled],
.select[disabled],
.form-input[disabled] {
    background: rgba(255, 255, 255, 0.02);
    color: var(--ink-3);
    cursor: not-allowed;
}

.input-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.input-prefix {
    padding: 9px 10px;
    border: 1px solid var(--rule);
    border-right: none;
    border-radius: 3px 0 0 3px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: var(--ed-text-detail);
}
.input-with-prefix {
    display: flex;
    flex: 1;
}
.input-with-prefix .input,
.input-with-prefix .form-input {
    border-left: none;
    border-radius: 0 3px 3px 0;
    min-width: 0;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: var(--ed-text-compact);
    color: var(--ink-2);
    cursor: pointer;
}
.checkbox-row input { accent-color: var(--brand-teal); width: 15px; height: 15px; }

.field-note,
.field-status {
    margin-top: 6px;
    font-size: var(--ed-text-fine);
    color: var(--ink-3);
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 16px;
}
.field-note .dot,
.field-status .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-teal);
    display: inline-block;
}
.field-note.warn .dot,
.field-status.warn .dot { background: var(--brand-amber); }
.field-note.warn,
.field-status.warn,
.field-status.status-warn { color: var(--ink-2); }
.field-status.status-warn::before,
.field-note.warn::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%; background: var(--brand-amber); display: inline-block;
}
.field-note.error,
.field-status.error,
.field-status.status-error { color: var(--brand-coral); }
.field-note.error .dot,
.field-status.error .dot { background: var(--brand-coral); }
.field-status.status-error::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-coral); display: inline-block;
}
.field-note.success,
.field-status.success,
.field-status.status-ok { color: var(--brand-teal); }
.field-status.status-ok::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-teal); display: inline-block;
}
.field-status.status-info { color: var(--brand-teal); }
.field-status.status-info::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-teal); display: inline-block;
}
/* Empty state: keep the row reserved but suppress the dot. */
.field-status:not(.status-warn):not(.status-error):not(.status-ok):not(.status-info)::before {
    content: none;
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    font-size: var(--ed-text-body);
    color: var(--ink-2);
    background: var(--surface);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    letter-spacing: 0;
    position: relative;
    transition: color var(--t-fast) ease, border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.tab .num {
    font-family: var(--font-mono);
    font-style: normal;
    color: var(--ink-3);
    font-size: var(--ed-text-micro);
}
.tab.active {
    background: rgba(var(--brand-teal-rgb, 45, 212, 168), 0.10);
    color: var(--ink);
    border-bottom-color: var(--brand-teal);
    font-weight: 500;
}
.tab.active .num { color: var(--brand-teal); }
.tab:not(.active):hover {
    background: var(--accent-tint);
    color: var(--ink);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ==========================================================================
   Approvals + activity feed
   ========================================================================== */

.approval-list {
    display: flex;
    flex-direction: column;
}
.approval {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule-soft);
    cursor: pointer;
    position: relative;
    transition: background var(--t-fast) ease;
}
.approval:last-child { border-bottom: none; }
.approval:hover { background: var(--row-hover-strong); }
.approval:hover .nm { color: var(--brand-teal); }
.approval .av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(var(--brand-teal-rgb, 45, 212, 168), 0.14);
    border: none;
    color: var(--brand-teal-bright);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--ed-text-detail);
}
.approval .nm {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--ed-text-ui);
    color: var(--ink);
    transition: color var(--t-fast) ease;
}
.approval .em {
    font-size: var(--ed-text-detail);
    color: var(--ink-3);
}
.approval .em .sep {
    color: var(--ink-mute);
    margin: 0 6px;
}
.approval .actions {
    display: flex;
    gap: 6px;
}

/* feed */
.feed { display: flex; flex-direction: column; }
.feed-item {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--card-inset);
    align-items: baseline;
}
.feed-item:last-child { border-bottom: none; }
.feed-item .when {
    font-family: var(--font-mono);
    font-size: var(--ed-text-fine);
    color: var(--ink-3);
}
.feed-item .who { color: var(--ink); font-weight: 500; }
.feed-item .what { color: var(--ink-2); font-size: var(--ed-text-compact); }
.feed-item .ref {
    font-family: var(--font-mono);
    font-size: var(--ed-text-micro);
    color: var(--ink-3);
}

/* ==========================================================================
   Bar chart
   ========================================================================== */

.bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 150px;
    padding: 12px 0 0;
}
.bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    height: 100%;
    justify-content: flex-end;
}
.bar-stack {
    /* DOM order: .bar.alt (exams) first, so a plain column puts the coral
       exam segment on top of the practice segment - as in the mockup. */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    gap: 1px;
}
.bar {
    background: rgba(255, 255, 255, 0.28);
    transform-origin: bottom;
    transition: filter var(--t-base) ease;
    cursor: default;
}
.bar.alt   { background: var(--brand-coral); opacity: 0.65; }
.bar.muted { background: rgba(255, 255, 255, 0.10); }
.bar:hover { filter: brightness(1.2); }
.bar-x {
    font-family: var(--font-mono);
    font-size: var(--ed-text-tiny);
    color: var(--ink-3);
    text-align: center;
}

.legend {
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: var(--ed-text-micro);
    color: var(--ink-2);
}
.legend-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.legend-key .sw {
    width: 9px;
    height: 9px;
    background: rgba(255, 255, 255, 0.35);
    display: inline-block;
}
.legend-key .sw.k1 { background: rgba(255, 255, 255, 0.35); }
.legend-key .sw.k2 { background: var(--brand-coral); opacity: 0.65; }
.legend-key .sw.k3 { background: rgba(255, 255, 255, 0.14); }

/* ==========================================================================
   Ledger (capacity / volume summary)
   ========================================================================== */

.ledger {
    border: 1px solid var(--card-border);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.02);
}
.ledger-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px dotted var(--rule);
    font-size: var(--ed-text-detail);
}
.ledger-row:last-child { border-bottom: none; }
.ledger-row .l { color: var(--ink-3); }
.ledger-row .r {
    font-family: var(--font-mono);
    font-size: var(--ed-text-detail);
    color: var(--ink-2);
    font-feature-settings: "tnum";
}
.ledger-row .r.ink { color: var(--ink); }

/* ==========================================================================
   Quick action card
   ========================================================================== */

.qa-card {
    background: var(--card-grad);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--t-base) var(--ease-paper),
                border-color var(--t-base) ease, box-shadow var(--t-base) ease;
}
.qa-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--brand-teal-rgb, 45, 212, 168), 0.35);
    box-shadow: 0 10px 26px var(--shadow-mid);
}
.qa-card .qa-h {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 700;
    font-size: var(--ed-text-base);
    color: var(--ink);
}
.qa-card .qa-d {
    font-size: var(--ed-text-small);
    color: var(--ink-3);
    line-height: 1.5;
}
.qa-card .qa-foot {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.qa-card .qa-link,
.qa-link {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--ed-text-micro);
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--brand-teal);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: letter-spacing var(--t-base) ease, color var(--t-fast) ease;
}
.qa-card:hover .qa-link { letter-spacing: 0.8px; }
.qa-link:hover { color: var(--brand-teal-bright); }
.qa-card .qa-link svg,
.qa-link svg { width: 12px; height: 12px; fill: none; stroke: currentColor; }
.qa-card .section-eyebrow { margin-bottom: 4px; }

/* ==========================================================================
   Compose card (announcements)
   ========================================================================== */

.compose {
    background: var(--card-grad);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.compose::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid var(--card-inset);
    border-radius: 2px;
    pointer-events: none;
}
.compose > * { position: relative; }
.compose .top {
    padding: 20px 20px 10px;
    margin: 0 0 4px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--card-border);
}
.compose h2 {
    margin: 0;
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 500;
    font-size: var(--ed-text-serif-h);
    color: var(--ink);
}
.compose .top .dt { font-size: var(--ed-text-micro); }
.compose .body {
    padding: 14px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.compose .title-input {
    font-family: var(--font-display) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: var(--ed-text-item-title) !important;
    padding: 11px 14px !important;
}
.compose .actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-top: 1px solid var(--card-border);
    background: transparent;
    gap: 12px;
    flex-wrap: wrap;
}
.compose .opts {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    color: var(--ink-3);
    font-size: var(--ed-text-small);
}
.compose .opts .mono { font-size: var(--ed-text-small); }
.compose .opts .mono.ink { color: var(--ink-2); }

/* chips */
.chip-group { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
    padding: 5px 12px;
    font-size: var(--ed-text-detail);
    border: 1px solid var(--rule);
    color: var(--ink-2);
    background: var(--surface);
    letter-spacing: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.chip:not(.on):not(.acc-on):hover {
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--ink);
}
.chip.on,
.chip.acc-on {
    background: var(--accent-tint-2);
    color: var(--brand-teal-bright);
    border-color: rgba(var(--brand-teal-rgb, 45, 212, 168), 0.4);
}

/* ==========================================================================
   Announcement card (feed)
   ========================================================================== */

.ann {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 22px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--rule-soft);
    cursor: pointer;
    position: relative;
    transition: background var(--t-base) ease;
}
.ann:last-child { border-bottom: none; }
.ann:hover { background: rgba(255, 255, 255, 0.02); }
.ann:hover h3 { color: var(--brand-teal-bright); }
.ann .date {
    border-right: 1px dashed var(--rule);
    padding-right: 18px;
    color: var(--ink);
}
.ann .date .day {
    font-family: var(--font-accent);
    font-style: normal;
    font-weight: 500;
    font-size: var(--ed-text-hero);
    line-height: 1;
    letter-spacing: 0;
    color: var(--ink);
    font-feature-settings: "tnum";
    transition: color var(--t-base) ease;
}
.ann:hover .date .day { color: var(--brand-teal); }
.ann .date .mo {
    font-family: var(--font-body);
    font-size: var(--ed-text-micro);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-2);
    margin-top: 4px;
}
.ann .date .yr {
    font-family: var(--font-mono);
    font-size: var(--ed-text-micro);
    color: var(--ink-3);
    margin-top: 2px;
}
.ann h3 {
    margin: 0 0 5px;
    font-family: var(--font-display);
    font-style: normal;
    font-size: var(--ed-text-item-title);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    color: var(--ink);
    transition: color var(--t-base) ease;
}
.ann p {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--ed-text-compact);
    color: var(--ink-2);
    max-width: 62ch;
    line-height: 1.5;
}
.ann .ann-meta {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: var(--ed-text-small);
    color: var(--ink-3);
    text-transform: none;
    letter-spacing: 0;
}
.ann .ann-meta b { color: var(--ink-2); font-weight: 500; }
.ann .right-col {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    font-size: var(--ed-text-tiny);
    color: var(--ink-3);
    flex-shrink: 0;
}
.ann .right-col .views {
    font-family: var(--font-mono);
    color: var(--ink);
    font-size: var(--ed-text-h3);
}
.ann .ann-tags {
    display: flex;
    gap: 6px;
    margin-bottom: 7px;
    flex-wrap: wrap;
}

/* ==========================================================================
   Settings shell & sticky nav
   ========================================================================== */

.settings-shell {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 24px;
    align-items: start;
}
.settings-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 22px;
    align-self: start;
}
.settings-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: var(--ed-text-compact);
    font-weight: 400;
    border-left: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--t-fast) ease, background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.settings-nav a:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.04);
}
.settings-nav a.active {
    color: var(--ink);
    border-left-color: var(--brand-teal);
    background: rgba(var(--brand-teal-rgb, 45, 212, 168), 0.08);
}
.settings-nav a .num {
    font-family: var(--font-mono);
    font-style: normal;
    color: var(--ink-3);
    font-size: var(--ed-text-micro);
    width: 18px;
    flex-shrink: 0;
}
.settings-nav a.active .num { color: var(--brand-teal); }
/* Danger-zone entry (last in the nav) leans coral. */
.settings-nav a:last-child .num { color: var(--brand-coral); }
.settings-nav a:last-child:hover { background: rgba(255, 140, 140, 0.06); color: var(--brand-coral); }
.settings-nav a:last-child.active { border-left-color: var(--brand-coral); background: var(--coral-tint); }

/* ==========================================================================
   Danger zone
   ========================================================================== */

.danger-panel {
    border-color: rgba(255, 140, 140, 0.22);
    background: linear-gradient(160deg, rgba(255, 140, 140, 0.05), rgba(255, 255, 255, 0.01));
}
.danger-panel::before { border-color: var(--coral-tint); }
.danger-panel:hover {
    border-color: rgba(255, 140, 140, 0.35);
    box-shadow: 0 10px 28px var(--shadow-mid);
}
.danger-panel .panel-h {
    background: transparent;
    border-bottom-color: rgba(255, 140, 140, 0.14);
}
.danger-panel .panel-h h2 { color: var(--brand-coral); }
.danger-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule-soft);
}
.danger-row:last-child { border-bottom: none; }
.danger-row.final { padding-top: 18px; padding-bottom: 6px; }
.form-label.coral { color: var(--brand-coral); }

/* ==========================================================================
   Inline alerts
   ========================================================================== */

.alert-box {
    padding: 14px 18px;
    border: 1px solid var(--card-border);
    border-radius: 3px;
    background: var(--surface);
    font-size: var(--ed-text-compact);
    color: var(--ink-2);
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 16px;
}
.alert-box strong {
    font-family: var(--font-accent);
    font-style: italic;
    color: var(--ink);
}
.alert-info    { border-left: 3px solid var(--brand-teal); }
.alert-warning { border-left: 3px solid var(--brand-amber); }
.alert-danger  { border-left: 3px solid var(--brand-coral); color: var(--brand-coral); }
.alert-success { border-left: 3px solid var(--brand-teal); color: var(--brand-teal); }
/* ==========================================================================
   Modals
   ========================================================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--modal-backdrop);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: none;
    place-items: center;
    z-index: 1000;
    padding: 24px;
}
.modal-overlay.is-open {
    display: grid;
    animation: backdrop-in 0.35s ease both;
}
.modal-card {
    background: var(--pop-modal);
    border: 1px solid var(--rule);
    border-radius: 4px;
    width: min(560px, 100%);
    max-height: calc(100vh - 60px);
    overflow: auto;
    position: relative;
    box-shadow: 0 24px 60px var(--shadow-hard), 0 6px 18px var(--shadow-mid);
    animation: modal-in 0.45s var(--ease-paper) both;
    animation-delay: 0.05s;
}
.modal-card::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid var(--card-inset);
    border-radius: 2px;
    pointer-events: none;
}
.modal-card > * { position: relative; }
.modal-h {
    padding: 20px 24px 14px;
    border-bottom: 1px solid var(--card-border);
    background: linear-gradient(180deg, var(--surface), transparent);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.modal-h .eyebrow {
    font-family: var(--font-body);
    font-size: var(--ed-text-tiny);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--brand-coral);
    font-weight: 600;
    margin-bottom: 6px;
}
.modal-h h3 {
    margin: 0;
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 500;
    font-size: var(--ed-text-h3);
    letter-spacing: -0.005em;
    color: var(--ink);
    line-height: 1.15;
}
.modal-h .x {
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 3px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-family: var(--font-accent);
    font-style: italic;
    color: var(--ink-3);
    flex-shrink: 0;
    transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) ease;
}
.modal-h .x:hover {
    background: rgba(255, 140, 140, 0.14);
    border-color: rgba(255, 140, 140, 0.4);
    color: var(--brand-coral);
    transform: rotate(90deg);
}
.modal-body {
    padding: 20px 24px;
    font-family: var(--font-body);
    font-size: var(--ed-text-body);
    color: var(--ink-2);
    line-height: 1.55;
}
.modal-body p { margin-bottom: 12px; }
.modal-body .lede {
    font-family: var(--font-body);
    font-size: var(--ed-text-ui);
    line-height: 1.5;
    color: var(--ink);
    margin-bottom: 16px;
}
.modal-body .lede em { font-family: var(--font-accent); font-style: italic; color: var(--brand-teal); }
.modal-rows {
    border-top: 1px solid var(--rule-soft);
    border-bottom: 1px solid var(--rule-soft);
    margin: 14px 0;
}
.modal-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    padding: 9px 0;
    align-items: baseline;
    border-bottom: 1px dashed var(--rule-soft);
}
.modal-row:last-child { border-bottom: none; }
.modal-row .k {
    font-family: var(--font-body);
    font-size: var(--ed-text-label);
    letter-spacing: 0.18em;
    color: var(--ink-3);
    text-transform: uppercase;
    font-weight: 500;
}
.modal-row .v {
    font-family: var(--font-mono);
    font-size: var(--ed-text-detail);
    color: var(--ink);
    text-align: right;
}
.modal-row .v.serif {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--ed-text-body);
}
.modal-foot {
    padding: 14px 24px;
    border-top: 1px solid var(--card-border);
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.modal-foot .note {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--ed-text-small);
    color: var(--ink-3);
    flex: 1;
}
.modal-foot .actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ==========================================================================
   Sidebar overlay (mobile)
   ========================================================================== */

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--modal-backdrop);
    z-index: 50;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.sidebar-overlay.active { display: block; }

/* ==========================================================================
   Toast container
   ========================================================================== */

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.toast {
    background: var(--pop-toast);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--brand-teal);
    border-radius: 3px;
    padding: 12px 16px;
    color: var(--ink);
    font-size: var(--ed-text-compact);
    box-shadow: 0 6px 18px var(--shadow-hard);
    opacity: 0;
    transform: translateX(8px);
    transition: opacity var(--t-base) ease, transform var(--t-base) var(--ease-paper);
    max-width: 360px;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast.success { border-left-color: var(--brand-teal); }
.toast.warning { border-left-color: var(--brand-amber); }
.toast.error   { border-left-color: var(--brand-coral); }

/* ==========================================================================
   Update card (product updates)
   ========================================================================== */

.updates-list { display: flex; flex-direction: column; }
.update-card {
    background: var(--card-grad);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease;
    margin-bottom: 16px;
}
.update-card::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid var(--card-inset);
    border-radius: 2px;
    pointer-events: none;
}
.update-card > * { position: relative; z-index: 1; }
.update-card:hover {
    border-color: rgba(var(--brand-teal-rgb, 45, 212, 168), 0.35);
    box-shadow: 0 10px 28px var(--shadow-mid);
}
.update-header {
    padding: 16px 22px;
    border-bottom: 1px solid var(--card-border);
    background: linear-gradient(180deg, var(--surface), transparent);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.update-head-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}
.update-ref {
    font-family: var(--font-mono);
    font-size: var(--ed-text-micro);
    color: var(--brand-teal);
}
.update-title {
    margin: 0;
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 500;
    font-size: var(--ed-text-serif-h);
    color: var(--ink);
    letter-spacing: 0;
}
.update-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: var(--ed-text-fine);
    color: var(--ink-3);
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.update-date .date-icon svg {
    width: 13px;
    height: 13px;
    fill: var(--ink-3);
}
.update-body { padding: 16px 22px 20px; }
.features-list { display: flex; flex-direction: column; gap: 5px; }
.feature-item {
    display: flex;
    gap: 9px;
    align-items: baseline;
    font-size: var(--ed-text-compact);
    color: var(--ink-2);
    line-height: 1.55;
}
.feature-item.highlighted { color: var(--ink); }
.feature-icon,
.feature-dash {
    color: var(--brand-teal);
    flex-shrink: 0;
}
.feature-item.highlighted .feature-icon,
.feature-item.highlighted .feature-dash { color: var(--brand-amber); }
.feature-icon svg { width: 12px; height: 12px; fill: currentColor; position: relative; top: 1px; }
.feature-text { font-family: var(--font-body); font-size: var(--ed-text-compact); }

/* ==========================================================================
   Empty state
   ========================================================================== */

.school-empty-state {
    padding: 40px 24px;
    text-align: center;
    color: var(--ink-3);
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    background: transparent;
}
.school-empty-state h3 {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 500;
    font-size: var(--ed-text-serif-h);
    color: var(--ink);
    margin: 0 0 6px;
}
.school-empty-state p { margin: 0; font-size: var(--ed-text-compact); max-width: 44ch; margin-inline: auto; }

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes ed-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ed-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ed-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes modal-in {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ed-anim .kpi-row,
.ed-anim .panel,
.ed-anim .qa-card,
.ed-anim .compose,
.ed-anim .tier-hero,
.ed-anim .ledger,
.ed-anim .use-list,
.ed-anim .sso-list {
    animation: ed-rise 0.6s var(--ease-paper) both;
    animation-delay: 0.08s;
}
.ed-anim .stack-md > .panel:nth-child(2) { animation-delay: 0.16s; }
.ed-anim .stack-md > .panel:nth-child(3) { animation-delay: 0.24s; }
.ed-anim .stack-md > .panel:nth-child(4) { animation-delay: 0.32s; }
.ed-anim .stack-md > .panel:nth-child(5) { animation-delay: 0.40s; }
.ed-anim .stack-md > .panel:nth-child(6) { animation-delay: 0.48s; }
.ed-anim .approval { animation: ed-fade 0.5s ease both; }
.ed-anim .approval:nth-of-type(1) { animation-delay: 0.32s; }
.ed-anim .approval:nth-of-type(2) { animation-delay: 0.40s; }
.ed-anim .approval:nth-of-type(3) { animation-delay: 0.48s; }
.ed-anim .approval:nth-of-type(4) { animation-delay: 0.56s; }
.ed-anim .approval:nth-of-type(5) { animation-delay: 0.64s; }
.ed-anim .ann { animation: ed-rise 0.55s var(--ease-paper) both; }
.ed-anim .ann:nth-of-type(1) { animation-delay: 0.34s; }
.ed-anim .ann:nth-of-type(2) { animation-delay: 0.42s; }
.ed-anim .ann:nth-of-type(3) { animation-delay: 0.50s; }
.ed-anim .ann:nth-of-type(4) { animation-delay: 0.58s; }
.ed-anim .bar {
    animation: ed-fill 0.7s var(--ease-paper) both;
    animation-delay: 0.45s;
}
.ed-anim .meter > span {
    animation: ed-fill 0.9s var(--ease-paper) both;
    animation-delay: 0.55s;
}
.ed-anim .kpi .num,
.ed-anim .tier-hero .v {
    animation: ed-fade 0.9s ease both;
    animation-delay: 0.25s;
}

/* ==========================================================================
   PAGE TRANSITIONS (View Transitions API)
   Sidebar + topbar hold in place across navigations; only content fades.
   ========================================================================== */
@view-transition {
    navigation: auto;
}

/* view-transition-name is a per-portal INSTANCE identity - each portal
   sheet names its own sidebar/topbar (e.g. school-site.css). */

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 320ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* ==========================================================================
   Notification modal - shared centered pop-out shell
   Replaces sidebar-anchored dropdowns: the rail clips overflowing panels
   and its backdrop-filter makes it the containing block even for
   position:fixed descendants, so the markup must live at BODY level.
   Quiet motion both ways (visibility keeps it focusable only while open);
   the global reduced-motion collapse applies.
   ========================================================================== */

.ntf-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: var(--modal-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base) ease;
}
.ntf-backdrop.open { opacity: 1; pointer-events: auto; }

.ntf-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 901;
    width: min(460px, calc(100vw - 32px));
    max-height: min(70vh, 620px);
    display: flex;
    flex-direction: column;
    background: var(--pop-modal);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    transform: translate(-50%, -50%) scale(0.97);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base) ease,
                transform var(--t-base) var(--ease-paper),
                visibility 0s linear var(--t-base);
    overflow: hidden;
}
.ntf-modal::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid var(--card-inset);
    border-radius: 2px;
    pointer-events: none;
    z-index: 1;
}
.ntf-modal.open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity var(--t-base) ease,
                transform var(--t-base) var(--ease-paper);
}
.ntf-modal .notification-list,
.ntf-modal .notification-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ==========================================================================
   Custom scrollbar inside the app
   ========================================================================== */

/* Portals that load global.css inherit its legacy universal
   `* { scrollbar-color: rgba(var(--theme-accent-rgb, 74,222,128), 0.4) ... }`,
   whose green fallback paints every scrollbar inside the editorial shell -
   and in Chromium a set scrollbar-color disables ::-webkit-scrollbar styling
   entirely. Winning the standard property (0,1,0 beats the universal 0,0,0)
   restores the editorial recipe everywhere at once. */
.ed-app,
.ed-app * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* Non-Chromium fallback path (ignored by Chromium once scrollbar-color is set) */
.ed-app ::-webkit-scrollbar { width: 8px; height: 8px; }
.ed-app ::-webkit-scrollbar-track { background: transparent; }
.ed-app ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}
.ed-app ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1280px) {
    .ed-main { padding: 0 28px; }
    .grid-2 { grid-template-columns: 1.4fr 1fr; }
    .form-row { grid-template-columns: 200px 1fr; gap: 18px; }
    .settings-shell { grid-template-columns: 180px 1fr; gap: 20px; }
}

@media (max-width: 1024px) {
    .ed-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform var(--t-slow) var(--ease-paper);
        background: rgba(13, 13, 26, 0.97);
    }
    .ed-sidebar.active { transform: translateX(0); }
    .mobile-menu-btn { display: inline-flex; }
    .ed-topbar { padding-top: 22px; }
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    .kpi { border-right: 1px dashed var(--rule); }
    .kpi:nth-child(2) { border-right: none; }
    .kpi:nth-child(1),
    .kpi:nth-child(2) { border-bottom: 1px dashed var(--rule); }
    .grid-2 { grid-template-columns: 1fr; }
    .grid-2.grid-even { grid-template-columns: 1fr 1fr; }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .ed-main { padding: 0 20px; }
    .ed-topbar { flex-direction: column; align-items: flex-start; gap: 12px; }
    /* Stacked topbar: a lede capped at 62ch or a non-wrapping action group would
       otherwise size to its own max-content and overflow the column. */
    .ed-topbar .topbar-left,
    .ed-topbar .topbar-meta { max-width: 100%; }
    /* A tab strip wider than the column (four tabs at 375px) wraps rather than scrolls. */
    .tabs { flex-wrap: wrap; }
    .ed-topbar h1, .ed-topbar .page-title { font-size: var(--ed-text-h3); }
    .kpi-row { grid-template-columns: 1fr; }
    .kpi { border-right: none; border-bottom: 1px dashed var(--rule); }
    .kpi:last-child { border-bottom: none; }
    .grid-2.grid-even { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; gap: 12px; }
    .settings-shell { grid-template-columns: 1fr; gap: 18px; }
    .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; }
    .settings-nav a { border-left: none; border-bottom: 2px solid transparent; }
    .settings-nav a.active { border-bottom-color: var(--brand-teal); }
    .ann { grid-template-columns: 80px 1fr; gap: 16px; padding: 16px; }
    .ann .date { padding-right: 14px; }
    .ann .right-col { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
    .approval { grid-template-columns: 36px 1fr; }
    .approval .actions { grid-column: 2 / 3; }

    /* Mobile-first (owner directive 2026-09-05): 44 px minimum tap targets on phones.
       Desktop sizes are untouched - the padding-derived height stays the rule above
       720px, and this only raises a control that would otherwise land under a thumb. */
    .btn { min-height: 44px; }
    select,
    textarea,
    input:not([type="checkbox"]):not([type="radio"]) { min-height: 44px; }
    /* v5.147.0: the floor reaches .mini-btn too (the practice hero's Discard was 27 px). */
    .mini-btn { min-height: 44px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .ed-anim .ed-topbar,
    .ed-anim .kpi-row,
    .ed-anim .panel,
    .ed-anim .qa-card,
    .ed-anim .compose,
    .ed-anim .tier-hero,
    .ed-anim .ledger,
    .ed-anim .use-list,
    .ed-anim .sso-list,
    .ed-anim .approval,
    .ed-anim .ann,
    .ed-anim .bar,
    .ed-anim .meter > span,
    .ed-anim .kpi .num,
    .ed-anim .tier-hero .v {
        animation: none !important;
    }
    .ed-app *,
    .ed-app *::before,
    .ed-app *::after {
        transition-duration: 0.01ms !important;
    }
}