/**
 * UoL Cortex design system v5.5.0 — tokens, cascade layers and visual identity.
 *
 * WHY LAYERS
 * Before v5.5.0 this file carried 188 `!important` declarations, and the codebase carried
 * 1,699. The cause was not carelessness: page heads load module stylesheets and this file in
 * a different order on almost every route (Marketing Intelligence loads its own CSS *before*
 * the design system; Admissions loads two module sheets first), so nothing could be relied on
 * to win by source order and every shared rule had to shout.
 *
 * Cascade layers make precedence explicit and order-independent. A later layer beats an
 * earlier one regardless of specificity or source order, so shared identity rules win over
 * module CSS by declaration, not by force. The single rule to remember:
 *
 *     NEVER write a rule outside a layer. Unlayered CSS beats every layer.
 *
 * Layer order, lowest precedence first:
 *   reset      — normalisation only
 *   base       — tokens and bare-element defaults
 *   components — shared, reusable component classes (buttons, cards, tables, pills)
 *   modules    — per-route stylesheets; may freely restyle components
 *   identity   — the approved visual identity; overrides modules by design
 *   responsive — breakpoint-scoped adjustments
 *   utilities  — single-purpose helpers and state classes, last word
 *
 * COLOUR
 * The palette and its fixed semantic meanings are unchanged from v1.3 and remain governed by
 * DESIGN_SYSTEM.md. Purple anchors value, blue-purple forecasts, teal traffic and leads,
 * green positive, yellow pending, orange spend and risk, red critical, fuchsia brand.
 * Yellow and green never carry text: they fail contrast on white and are fills only.
 */
@layer reset, base, components, modules, shell, identity, responsive, utilities;

@layer base {
  :root {
    /* ---- Approved palette (unchanged; see DESIGN_SYSTEM.md) ---------------------- */
    --uol-purple: #623F99;
    --uol-purple-80: #8165AD;
    --uol-purple-30: #D0C5E0;
    --uol-purple-15: #E7E2F0;
    --uol-blue-purple: #5C66AE;
    --uol-blue-purple-30: #CED1E7;
    --uol-blue-purple-15: #E8E9F3;
    --uol-teal: #00B6C8;
    --uol-teal-30: #B3E9EF;
    --uol-teal-15: #D9F4F6;
    --uol-green: #A4CE4C;
    --uol-green-30: #DAEBB7;
    --uol-green-15: #F1F7E4;
    --uol-yellow: #FFE750;
    --uol-yellow-30: #FFF4A6;
    --uol-yellow-15: #FFFBE5;
    --uol-orange: #F58A1F;
    --uol-orange-30: #FBD0A5;
    --uol-orange-15: #FDEDDC;
    --uol-red: #EE4050;
    --uol-red-30: #F8B3BA;
    --uol-red-15: #FCE3E6;
    --uol-fuchsia: #ED3C95;
    --uol-fuchsia-30: #F8B1D5;
    --uol-fuchsia-15: #FCE2F0;
    --uol-black: #000000;
    --uol-warm-gray: #B5ADA6;
    --uol-warm-gray-30: #E1DEDB;
    --uol-warm-gray-15: #F4F3F2;

    /* Surfaces and text. */
    --uol-surface: #FFFFFF;
    --uol-canvas: #F7F6F8;
    --uol-ink: #201A24;
    --uol-muted: #6F6874;
    --uol-border: #E4E0E6;

    /* Accessible text colours for the tinted status backgrounds. Each is >= 4.5:1 on its
       own 15% tint, which is why the light palette colours are never used for text. */
    --uol-ink-on-green: #3F6710;
    --uol-ink-on-yellow: #6A5600;
    --uol-ink-on-red: #A51F31;
    --uol-ink-on-orange: #9A4B00;
    --uol-ink-on-teal: #006E78;
    --uol-ink-on-blue-purple: #464F94;

    /* Derived brand surfaces. Not new palette colours: these name the two dark purples the
       platform already used for headers, hero panels and the sign-in screen, which were
       previously spelled out as nine different hex values across ten stylesheets. */
    --uol-purple-deep: #45245D;
    --uol-purple-night: #180D20;

    /* Text and hairlines on those dark surfaces, where the light values invert. */
    --uol-muted-inverse: rgba(247, 246, 248, .72);
    --uol-border-inverse: rgba(208, 197, 224, .16);

    /* ---- Spacing scale ---------------------------------------------------------- */
    /* One 4px ramp. Every padding, margin and gap in the platform resolves to a step
       here; 315 ad-hoc padding declarations collapsed into these eight. */
    --uol-space-1: 4px;
    --uol-space-2: 8px;
    --uol-space-3: 12px;
    --uol-space-4: 16px;
    --uol-space-5: 24px;
    --uol-space-6: 32px;
    --uol-space-7: 48px;
    --uol-space-8: 64px;

    /* ---- Type scale ------------------------------------------------------------- */
    /* Fluid, so one definition serves 390px and 1440px. 12px is the hard floor: the
       platform previously shipped 7px, 7.5px, 8px and 9px text. */
    --uol-text-xs: 0.75rem;
    --uol-text-sm: 0.875rem;
    --uol-text-base: 1rem;
    --uol-text-lg: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
    --uol-text-xl: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
    --uol-text-2xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
    --uol-text-3xl: clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem);
    --uol-text-4xl: clamp(2rem, 1.5rem + 2.4vw, 2.75rem);

    --uol-leading-tight: 1.15;
    --uol-leading-snug: 1.3;
    --uol-leading-normal: 1.5;
    --uol-leading-relaxed: 1.6;

    --uol-tracking-tight: -0.01em;
    --uol-tracking-normal: 0;
    --uol-tracking-wide: 0.035em;

    --uol-weight-regular: 400;
    --uol-weight-medium: 550;
    --uol-weight-semibold: 700;
    --uol-weight-bold: 850;

    --uol-font-sans: "Commissioner", "Aptos", "Segoe UI", Arial, sans-serif;
    --uol-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* ---- Elevation and shape ---------------------------------------------------- */
    --uol-shadow-sm: 0 5px 18px rgba(38, 24, 48, .07);
    --uol-shadow-md: 0 14px 38px rgba(38, 24, 48, .10);
    --uol-shadow-lg: 0 24px 60px rgba(38, 24, 48, .14);
    --uol-radius-sm: 10px;
    --uol-radius-md: 16px;
    --uol-radius-lg: 24px;
    --uol-radius-pill: 999px;

    /* ---- Controls --------------------------------------------------------------- */
    /* 44px is the WCAG 2.2 AA target-size floor; touch devices get 48px via the
       coarse-pointer query below. 16px input text stops iOS Safari zooming on focus. */
    --uol-control-h: 44px;
    --uol-control-h-sm: 36px;
    --uol-control-px: var(--uol-space-4);
    --uol-input-font-size: var(--uol-text-base);

    /* ---- Layout ----------------------------------------------------------------- */
    /* Three content widths, and every page wrapper resolves to one of them in
       cortex-responsive.css?v=d81b844b7fcd. `--uol-container-page` is the standard module column: it is the
       width `.module-hero` already used, so a page header and the content beneath it are one
       measurement rather than two. `--uol-container-workspace` is the deliberate exception for
       a builder that needs more room than a reading column, and `--uol-container-narrow` the
       exception for a single-column form. Thirteen module sheets used to declare their own
       figure between 1080px and 1780px, which is why no two routes lined up. */
    --uol-container: 1320px;
    --uol-container-page: 1540px;
    --uol-container-workspace: 1780px;
    --uol-container-narrow: 1120px;
    --uol-gutter: var(--uol-space-4);

    /* ---- Z-index scale --------------------------------------------------------- */
    /* One named ramp, replacing the 40 unrelated numbers v5.4.4 shipped (which ran from
       -3 to 10020 and had to be reverse-engineered every time something stacked wrongly).
       What each step is for:

         behind    decorative pseudo-elements that sit under their own content
         base      the normal flow
         raised    stacking inside a single component — a sticky `th`, a dialog header
         sticky    filter and tab bars that pin inside a module while it scrolls
         nav       the global shell and module-level command bars
         overlay   popovers, dropdowns and menus anchored to a control
         drawer    record drawers, side panels, modal dialogs and their backdrops
         toast     transient messages and live regions; always the topmost layer

       A menu that opens from inside a drawer uses `calc(var(--uol-z-drawer) + 1)` rather
       than a new step. Anything that stacks uses a step here, never a bare number. */
    --uol-z-behind: -1;
    --uol-z-base: 0;
    --uol-z-raised: 10;
    --uol-z-sticky: 100;
    --uol-z-nav: 200;
    --uol-z-overlay: 900;
    --uol-z-drawer: 1000;
    --uol-z-toast: 1100;

    /* ---- Motion ---------------------------------------------------------------- */
    --uol-transition: .16s ease;
  }

  /* Touch pointers get the larger target and a gutter that clears the safe area. */
  @media (pointer: coarse) {
    :root {
      --uol-control-h: 48px;
      --uol-control-h-sm: 44px;
    }
  }

  html { scroll-behavior: smooth; }

  body {
    background: var(--uol-canvas);
    color: var(--uol-ink);
    font-family: var(--uol-font-sans);
    font-size: var(--uol-text-base);
    line-height: var(--uol-leading-normal);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  h1 { font-size: var(--uol-text-3xl); line-height: var(--uol-leading-tight); letter-spacing: var(--uol-tracking-tight); }
  h2 { font-size: var(--uol-text-2xl); line-height: var(--uol-leading-snug); }
  h3 { font-size: var(--uol-text-xl); line-height: var(--uol-leading-snug); }
  h4 { font-size: var(--uol-text-lg); line-height: var(--uol-leading-snug); }
  h5, h6 { font-size: var(--uol-text-base); line-height: var(--uol-leading-snug); }
  p, li, dd, dt { line-height: var(--uol-leading-normal); }
  small { font-size: var(--uol-text-sm); }

  ::selection { background: var(--uol-purple-30); color: var(--uol-ink); }

  a, button, input, select, textarea { font: inherit; }

  /* Inputs never fall below 16px: anything smaller makes iOS Safari zoom the viewport,
     which is one of the ways the platform felt broken on a phone. */
  input, select, textarea { font-size: var(--uol-input-font-size); }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid var(--uol-teal-30);
    outline-offset: 2px;
  }
}

@layer identity {
  /* ---- Platform shell ---------------------------------------------------------- */
  .global-shell {
    border-top: 4px solid var(--uol-purple);
    border-bottom: 1px solid var(--uol-border);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 5px 20px rgba(32, 18, 41, .06);
  }
  .global-shell-inner { min-height: 76px; }
  .shell-logo-box {
    background: linear-gradient(135deg, var(--uol-purple), var(--uol-blue-purple));
    border-radius: var(--uol-radius-sm);
    box-shadow: 0 8px 18px rgba(98, 63, 153, .22);
  }
  .shell-brand-copy strong { color: var(--uol-purple); letter-spacing: var(--uol-tracking-tight); }
  .shell-brand-copy small { color: var(--uol-muted); }

  .primary-nav a {
    border: 1px solid transparent;
    color: #5F5864;
    transition: background-color var(--uol-transition), color var(--uol-transition),
                border-color var(--uol-transition), transform var(--uol-transition);
  }
  .primary-nav a:hover { background: var(--uol-purple-15); border-color: var(--uol-purple-30); transform: translateY(-1px); }
  .primary-nav a.active,
  .primary-nav a[aria-current="page"] {
    background: var(--uol-purple);
    color: #fff;
    box-shadow: 0 7px 17px rgba(98, 63, 153, .22);
  }

  .global-ay, .utility-link, .user-chip, .nav-toggle {
    border-color: var(--uol-border);
    background: #fff;
    color: var(--uol-purple);
    box-shadow: 0 3px 10px rgba(34, 20, 43, .04);
  }
  .global-ay { border-top: 3px solid var(--uol-blue-purple); }
  .utility-link:nth-of-type(1) { border-top: 3px solid var(--uol-teal); }
  .utility-link:nth-of-type(2) { border-top: 3px solid var(--uol-orange); }
  .user-chip { border-top: 3px solid var(--uol-fuchsia); }
  .user-chip > span:first-child { background: var(--uol-purple); }
  .nav-badge { background: var(--uol-red); }

  /* ---- Hero and page architecture --------------------------------------------- */
  .platform-hero-card, .module-hero-card, .home-hero-card, .login-shell {
    background: linear-gradient(135deg, var(--uol-purple) 0%, var(--uol-blue-purple) 100%);
  }
  .platform-hero-card, .module-hero-card, .home-hero-card {
    box-shadow: 0 22px 52px rgba(69, 44, 102, .22);
    border: 1px solid rgba(255, 255, 255, .16);
  }
  .platform-hero-card::before, .module-hero-card::before, .home-hero-card::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 255, 255, .08), transparent 42%);
  }
  .platform-eyebrow, .module-eyebrow { color: #F1ECF6; }
  .platform-hero p, .module-hero p { color: #F6F2F9; }
  .module-hero-card { position: relative; overflow: hidden; }

  /* ---- Buttons ----------------------------------------------------------------- */
  /* Exactly three levels. `.platform-btn` is primary, `.secondary` is the outlined
     level, `.tertiary` is text-only. Everything else is an icon button or lives in an
     overflow menu — see DESIGN_SYSTEM.md, "Control density". */
  .platform-btn, .btn, .pm-btn, .mini-btn, .ap-edit, .eec-link, .pm-link, .budget-button, .cxui-btn {
    min-height: var(--uol-control-h);
    padding-inline: var(--uol-control-px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--uol-space-2);
    border-radius: var(--uol-radius-sm);
    font-size: var(--uol-text-sm);
    font-weight: var(--uol-weight-semibold);
    cursor: pointer;
    transition: transform var(--uol-transition), box-shadow var(--uol-transition),
                background-color var(--uol-transition), border-color var(--uol-transition),
                color var(--uol-transition);
  }
  .platform-btn, .btn-primary, .pm-btn-primary, .btn-purple, .budget-button, .cxui-btn-primary {
    background: var(--uol-purple);
    color: #fff;
    border: 1px solid var(--uol-purple);
    box-shadow: 0 7px 16px rgba(98, 63, 153, .18);
  }
  .platform-btn:hover, .btn-primary:hover, .pm-btn-primary:hover, .btn-purple:hover, .budget-button:hover, .cxui-btn-primary:hover {
    background: var(--uol-blue-purple);
    border-color: var(--uol-blue-purple);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(92, 102, 174, .22);
  }
  .platform-btn.secondary, .btn.secondary, .btn:not(.btn-primary), .pm-btn-light, .btn-light,
  .budget-button.secondary, .cxui-btn-secondary {
    background: #fff;
    color: var(--uol-purple);
    border: 1px solid var(--uol-purple-30);
    box-shadow: 0 4px 12px rgba(42, 25, 52, .05);
  }
  .platform-btn.secondary:hover, .btn.secondary:hover, .btn:not(.btn-primary):hover,
  .pm-btn-light:hover, .btn-light:hover, .budget-button.secondary:hover, .cxui-btn-secondary:hover {
    background: var(--uol-purple-15);
    border-color: var(--uol-purple);
    transform: translateY(-1px);
  }
  .platform-btn.tertiary, .cxui-btn-tertiary {
    background: transparent;
    color: var(--uol-purple);
    border: 1px solid transparent;
    box-shadow: none;
  }
  .platform-btn.tertiary:hover, .cxui-btn-tertiary:hover { background: var(--uol-purple-15); }

  /* Destructive actions are visually distinct and never sit beside the primary action. */
  .pm-btn-danger, .btn-danger, [data-action="delete"], .danger, .budget-button.danger, .cxui-btn-danger {
    background: var(--uol-red);
    color: #fff;
    border: 1px solid var(--uol-red);
    box-shadow: none;
  }
  .pm-btn-danger:hover, .btn-danger:hover, .danger:hover, .budget-button.danger:hover, .cxui-btn-danger:hover { background: #D62C3C; border-color: #D62C3C; }

  button:disabled, .platform-btn:disabled, .btn:disabled, .pm-btn:disabled, [aria-disabled="true"] {
    opacity: .48;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: grayscale(.2);
  }
  button[aria-busy="true"] { cursor: progress; }

  /* Icon-only buttons must still meet the target size and carry an accessible name. */
  .cxui-icon-btn {
    min-width: var(--uol-control-h);
    min-height: var(--uol-control-h);
    padding: 0;
    border-radius: var(--uol-radius-sm);
  }

  /* ---- Progressive disclosure --------------------------------------------------- */
  /* Two components carry every "there is more here" case in the platform, and both are
     built on `<details>`. That is deliberate: the browser gives us the open/close
     behaviour, the keyboard handling and the `aria-expanded` mapping for free, and a
     closed `<details>` is genuinely not on screen — so a screen reader, a keyboard user
     and the control-density budget all agree on what is currently visible.

     `.cxui-disclosure` reveals secondary *inputs* in place: the fifth to tenth filter on
     a workspace, where two filters answer most questions.
     `.cxui-overflow` reveals secondary *actions* in a floating menu: one primary action
     stays on the surface, the rest — including anything destructive, which must never sit
     beside the primary action — moves inside. */
  .cxui-disclosure, .cxui-overflow { min-width: 0; }
  .cxui-disclosure > summary, .cxui-overflow > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--uol-space-2);
    min-height: var(--uol-control-h);
    padding-inline: var(--uol-control-px);
    border: 1px solid var(--uol-purple-30);
    border-radius: var(--uol-radius-sm);
    background: #fff;
    color: var(--uol-purple);
    font-size: var(--uol-text-sm);
    font-weight: var(--uol-weight-semibold);
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
  }
  .cxui-disclosure > summary::-webkit-details-marker,
  .cxui-overflow > summary::-webkit-details-marker { display: none; }
  .cxui-disclosure > summary:hover, .cxui-overflow > summary:hover {
    background: var(--uol-purple-15);
    border-color: var(--uol-purple);
  }
  .cxui-disclosure > summary::after {
    content: "\25BE";
    font-size: var(--uol-text-xs);
    transition: transform var(--uol-transition);
  }
  .cxui-disclosure[open] > summary::after { transform: rotate(180deg); }
  .cxui-disclosure[open] > summary {
    background: var(--uol-purple-15);
    border-color: var(--uol-purple);
  }
  .cxui-disclosure-body {
    display: grid;
    gap: var(--uol-space-3);
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--uol-space-3);
    padding: var(--uol-space-4);
    border: 1px solid var(--uol-border);
    border-radius: var(--uol-radius-md);
    background: var(--uol-surface);
  }

  /* The overflow trigger is an icon button by default; give it a label for wider surfaces. */
  .cxui-overflow > summary {
    min-width: var(--uol-control-h);
    padding-inline: var(--uol-space-2);
  }
  .cxui-overflow { position: relative; }
  .cxui-overflow-menu {
    position: absolute;
    right: 0;
    top: calc(100% + var(--uol-space-2));
    z-index: var(--uol-z-overlay);
    display: grid;
    gap: var(--uol-space-1);
    min-width: 220px;
    max-width: min(320px, calc(100vw - var(--uol-space-6)));
    padding: var(--uol-space-2);
    border: 1px solid var(--uol-border);
    border-radius: var(--uol-radius-md);
    background: var(--uol-surface);
    box-shadow: var(--uol-shadow-lg);
  }
  .cxui-overflow-menu > button, .cxui-overflow-menu > a {
    justify-content: flex-start;
    width: 100%;
    box-shadow: none;
    background: transparent;
    border-color: transparent;
    color: var(--uol-ink);
    text-align: left;
  }
  .cxui-overflow-menu > button:hover, .cxui-overflow-menu > a:hover {
    background: var(--uol-purple-15);
    border-color: transparent;
    color: var(--uol-purple);
    transform: none;
  }
  /* A destructive item is separated from the rest of the menu, not just recoloured. */
  .cxui-overflow-menu > .cxui-menu-danger {
    margin-top: var(--uol-space-2);
    padding-top: var(--uol-space-2);
    border-top: 1px solid var(--uol-border);
    color: var(--uol-ink-on-red);
  }
  .cxui-overflow-menu > .cxui-menu-danger:hover {
    background: var(--uol-red-15);
    color: var(--uol-ink-on-red);
  }
  .cxui-menu-label {
    padding: var(--uol-space-1) var(--uol-space-2);
    color: var(--uol-muted);
    font-size: var(--uol-text-xs);
    font-weight: var(--uol-weight-semibold);
    text-transform: uppercase;
    letter-spacing: .06em;
  }

  /* ---- Cards and KPI surfaces -------------------------------------------------- */
  .platform-card, .platform-kpi, .simple-card, .card, .mi-card, .eec-card, .pm-card,
  .ap-card, .quality-item, .metric-card {
    background: var(--uol-surface);
    border: 1px solid var(--uol-border);
    border-radius: var(--uol-radius-md);
    box-shadow: var(--uol-shadow-sm);
    padding: var(--uol-space-5);
  }
  .platform-card, .platform-kpi, .mi-card, .eec-card, .pm-card, .ap-card, .simple-card, .card {
    position: relative;
    overflow: hidden;
  }
  .platform-card::before, .platform-kpi::before, .mi-card::before, .eec-card::before,
  .pm-card::before, .ap-card::before, .simple-card::before, .card::before {
    content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px;
    background: var(--card-accent, var(--uol-purple));
  }
  .platform-card:hover, .mi-card:hover, .eec-card:hover, .pm-card:hover, .ap-card:hover {
    border-color: var(--uol-purple-30);
    box-shadow: var(--uol-shadow-md);
  }

  /* The eight-colour rotation, applied wherever cards or KPIs are laid out in a series. */
  :where(.platform-grid, .platform-kpis, .mi-kpis, .eec-kpis, .pm-kpis, .ap-kpis,
         .budget-kpis, .admissions-kpis, .intel-kpis, .quality-kpis, .kpis) > :nth-child(8n+1) { --card-accent: var(--uol-purple);      --card-tint: var(--uol-purple-15); }
  :where(.platform-grid, .platform-kpis, .mi-kpis, .eec-kpis, .pm-kpis, .ap-kpis,
         .budget-kpis, .admissions-kpis, .intel-kpis, .quality-kpis, .kpis) > :nth-child(8n+2) { --card-accent: var(--uol-teal);        --card-tint: var(--uol-teal-15); }
  :where(.platform-grid, .platform-kpis, .mi-kpis, .eec-kpis, .pm-kpis, .ap-kpis,
         .budget-kpis, .admissions-kpis, .intel-kpis, .quality-kpis, .kpis) > :nth-child(8n+3) { --card-accent: var(--uol-blue-purple); --card-tint: var(--uol-blue-purple-15); }
  :where(.platform-grid, .platform-kpis, .mi-kpis, .eec-kpis, .pm-kpis, .ap-kpis,
         .budget-kpis, .admissions-kpis, .intel-kpis, .quality-kpis, .kpis) > :nth-child(8n+4) { --card-accent: var(--uol-green);       --card-tint: var(--uol-green-15); }
  :where(.platform-grid, .platform-kpis, .mi-kpis, .eec-kpis, .pm-kpis, .ap-kpis,
         .budget-kpis, .admissions-kpis, .intel-kpis, .quality-kpis, .kpis) > :nth-child(8n+5) { --card-accent: var(--uol-yellow);      --card-tint: var(--uol-yellow-15); }
  :where(.platform-grid, .platform-kpis, .mi-kpis, .eec-kpis, .pm-kpis, .ap-kpis,
         .budget-kpis, .admissions-kpis, .intel-kpis, .quality-kpis, .kpis) > :nth-child(8n+6) { --card-accent: var(--uol-orange);      --card-tint: var(--uol-orange-15); }
  :where(.platform-grid, .platform-kpis, .mi-kpis, .eec-kpis, .pm-kpis, .ap-kpis,
         .budget-kpis, .admissions-kpis, .intel-kpis, .quality-kpis, .kpis) > :nth-child(8n+7) { --card-accent: var(--uol-red);         --card-tint: var(--uol-red-15); }
  :where(.platform-grid, .platform-kpis, .mi-kpis, .eec-kpis, .pm-kpis, .ap-kpis,
         .budget-kpis, .admissions-kpis, .intel-kpis, .quality-kpis, .kpis) > :nth-child(8n+8) { --card-accent: var(--uol-fuchsia);     --card-tint: var(--uol-fuchsia-15); }

  .platform-icon {
    background: var(--card-tint, var(--uol-purple-15));
    color: var(--card-accent, var(--uol-purple));
    border: 1px solid color-mix(in srgb, var(--card-accent, var(--uol-purple)) 24%, white);
  }
  .platform-card h2 { color: var(--uol-ink); }
  .platform-card-foot { color: var(--card-accent, var(--uol-purple)); }
  .platform-kpi strong { color: var(--card-accent, var(--uol-purple)); }

  :where(.mi-kpi, .eec-kpi, .pm-kpi, .ap-kpi, .kpi, .quality-kpi, .metric-card) {
    border-top: 4px solid var(--card-accent, var(--uol-purple));
    background: linear-gradient(180deg, var(--card-tint, var(--uol-purple-15)) 0, white 48%);
  }
  :where(.mi-kpi, .eec-kpi, .pm-kpi, .ap-kpi, .kpi, .quality-kpi, .metric-card) strong,
  :where(.mi-kpi, .eec-kpi, .pm-kpi, .ap-kpi, .kpi, .quality-kpi, .metric-card) .value {
    color: var(--card-accent, var(--uol-purple));
    font-size: var(--uol-text-2xl);
    line-height: var(--uol-leading-tight);
  }
  .kpis > .kpi::before { background: var(--card-accent, var(--uol-purple)); }
  .kpis > .kpi .value:not(.positive):not(.negative) { color: var(--card-accent, var(--uol-purple)); }

  /* ---- Sidebar and section navigation ----------------------------------------- */
  .module-sidebar, .glossary-side, .pm-sidebar {
    border-color: var(--uol-border);
    box-shadow: var(--uol-shadow-sm);
  }
  :where(.module-sidebar .tab, .page-anchor-nav a, .mi-tabs button, .eec-tabs button,
         .pm-nav button, .ap-tabs button, .cxui-tab) {
    border-left: 3px solid transparent;
    min-height: var(--uol-control-h);
    transition: background-color var(--uol-transition), color var(--uol-transition),
                border-color var(--uol-transition);
  }
  :where(.module-sidebar .tab, .page-anchor-nav a, .mi-tabs button, .eec-tabs button, .pm-nav button, .ap-tabs button):nth-child(8n+1) { --tab-accent: var(--uol-purple);      --tab-tint: var(--uol-purple-15); }
  :where(.module-sidebar .tab, .page-anchor-nav a, .mi-tabs button, .eec-tabs button, .pm-nav button, .ap-tabs button):nth-child(8n+2) { --tab-accent: var(--uol-teal);        --tab-tint: var(--uol-teal-15); }
  :where(.module-sidebar .tab, .page-anchor-nav a, .mi-tabs button, .eec-tabs button, .pm-nav button, .ap-tabs button):nth-child(8n+3) { --tab-accent: var(--uol-blue-purple); --tab-tint: var(--uol-blue-purple-15); }
  :where(.module-sidebar .tab, .page-anchor-nav a, .mi-tabs button, .eec-tabs button, .pm-nav button, .ap-tabs button):nth-child(8n+4) { --tab-accent: var(--uol-green);       --tab-tint: var(--uol-green-15); }
  :where(.module-sidebar .tab, .page-anchor-nav a, .mi-tabs button, .eec-tabs button, .pm-nav button, .ap-tabs button):nth-child(8n+5) { --tab-accent: var(--uol-yellow);      --tab-tint: var(--uol-yellow-15); }
  :where(.module-sidebar .tab, .page-anchor-nav a, .mi-tabs button, .eec-tabs button, .pm-nav button, .ap-tabs button):nth-child(8n+6) { --tab-accent: var(--uol-orange);      --tab-tint: var(--uol-orange-15); }
  :where(.module-sidebar .tab, .page-anchor-nav a, .mi-tabs button, .eec-tabs button, .pm-nav button, .ap-tabs button):nth-child(8n+7) { --tab-accent: var(--uol-red);         --tab-tint: var(--uol-red-15); }
  :where(.module-sidebar .tab, .page-anchor-nav a, .mi-tabs button, .eec-tabs button, .pm-nav button, .ap-tabs button):nth-child(8n+8) { --tab-accent: var(--uol-fuchsia);     --tab-tint: var(--uol-fuchsia-15); }

  :where(.module-sidebar .tab, .page-anchor-nav a, .mi-tabs button, .eec-tabs button, .pm-nav button, .ap-tabs button):hover,
  :where(.module-sidebar .tab, .page-anchor-nav a, .mi-tabs button, .eec-tabs button, .pm-nav button, .ap-tabs button).active,
  :where(.module-sidebar .tab, .page-anchor-nav a, .mi-tabs button, .eec-tabs button, .pm-nav button, .ap-tabs button)[aria-selected="true"],
  :where(.module-sidebar .tab, .page-anchor-nav a, .mi-tabs button, .eec-tabs button, .pm-nav button, .ap-tabs button)[aria-pressed="true"] {
    background: var(--tab-tint, var(--uol-purple-15));
    color: var(--tab-accent, var(--uol-purple));
    border-left-color: var(--tab-accent, var(--uol-purple));
  }

  /* ---- Forms ------------------------------------------------------------------- */
  input, select, textarea {
    border: 1px solid var(--uol-border);
    background: #fff;
    color: var(--uol-ink);
    border-radius: var(--uol-radius-sm);
    min-height: var(--uol-control-h);
    padding: var(--uol-space-2) var(--uol-space-3);
  }
  textarea { min-height: calc(var(--uol-control-h) * 2); }
  input[type="checkbox"], input[type="radio"] { min-height: 0; }
  input:hover, select:hover, textarea:hover { border-color: var(--uol-purple-30); }
  input:focus, select:focus, textarea:focus {
    border-color: var(--uol-purple);
    box-shadow: 0 0 0 3px var(--uol-purple-15);
  }
  label > span, .field-label, .mi-label {
    color: var(--uol-muted);
    font-size: var(--uol-text-sm);
    font-weight: var(--uol-weight-semibold);
  }

  /* ---- Data tables ------------------------------------------------------------- */
  :where(.simple-table, .mi-table, .eec-table, .pm-table, .ap-table, .glossary-table,
         .admissions-table-wrap table, .budget-page table, .table-wrap table) {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    background: #fff;
    font-size: var(--uol-text-sm);
  }
  :where(.simple-table, .mi-table, .eec-table, .pm-table, .ap-table, .glossary-table,
         .admissions-table-wrap table, .budget-page table, .table-wrap table) thead th {
    background: #fff;
    color: var(--uol-ink);
    border-top: 4px solid var(--column-accent, var(--uol-purple));
    border-bottom: 1px solid var(--uol-border);
    font-size: var(--uol-text-xs);
    font-weight: var(--uol-weight-bold);
    letter-spacing: var(--uol-tracking-wide);
    text-transform: uppercase;
    vertical-align: bottom;
    padding: var(--uol-space-3);
    text-align: left;
  }
  :where(.simple-table, .mi-table, .eec-table, .pm-table, .ap-table, .glossary-table, .admissions-table-wrap table, .budget-page table, .table-wrap table) thead th:nth-child(8n+1) { --column-accent: var(--uol-purple);      background: var(--uol-purple-15); }
  :where(.simple-table, .mi-table, .eec-table, .pm-table, .ap-table, .glossary-table, .admissions-table-wrap table, .budget-page table, .table-wrap table) thead th:nth-child(8n+2) { --column-accent: var(--uol-teal);        background: var(--uol-teal-15); }
  :where(.simple-table, .mi-table, .eec-table, .pm-table, .ap-table, .glossary-table, .admissions-table-wrap table, .budget-page table, .table-wrap table) thead th:nth-child(8n+3) { --column-accent: var(--uol-blue-purple); background: var(--uol-blue-purple-15); }
  :where(.simple-table, .mi-table, .eec-table, .pm-table, .ap-table, .glossary-table, .admissions-table-wrap table, .budget-page table, .table-wrap table) thead th:nth-child(8n+4) { --column-accent: var(--uol-green);       background: var(--uol-green-15); }
  :where(.simple-table, .mi-table, .eec-table, .pm-table, .ap-table, .glossary-table, .admissions-table-wrap table, .budget-page table, .table-wrap table) thead th:nth-child(8n+5) { --column-accent: var(--uol-yellow);      background: var(--uol-yellow-15); }
  :where(.simple-table, .mi-table, .eec-table, .pm-table, .ap-table, .glossary-table, .admissions-table-wrap table, .budget-page table, .table-wrap table) thead th:nth-child(8n+6) { --column-accent: var(--uol-orange);      background: var(--uol-orange-15); }
  :where(.simple-table, .mi-table, .eec-table, .pm-table, .ap-table, .glossary-table, .admissions-table-wrap table, .budget-page table, .table-wrap table) thead th:nth-child(8n+7) { --column-accent: var(--uol-red);         background: var(--uol-red-15); }
  :where(.simple-table, .mi-table, .eec-table, .pm-table, .ap-table, .glossary-table, .admissions-table-wrap table, .budget-page table, .table-wrap table) thead th:nth-child(8n+8) { --column-accent: var(--uol-fuchsia);     background: var(--uol-fuchsia-15); }
  :where(.simple-table, .mi-table, .eec-table, .pm-table, .ap-table, .glossary-table,
         .admissions-table-wrap table, .budget-page table, .table-wrap table) tbody td {
    border-bottom: 1px solid #ECE9ED;
    background: #fff;
    padding: var(--uol-space-3);
  }
  :where(.simple-table, .mi-table, .eec-table, .pm-table, .ap-table, .glossary-table,
         .admissions-table-wrap table, .budget-page table, .table-wrap table) tbody tr:nth-child(even) td { background: #FCFBFC; }
  :where(.simple-table, .mi-table, .eec-table, .pm-table, .ap-table, .glossary-table,
         .admissions-table-wrap table, .budget-page table, .table-wrap table) tbody tr:hover td { background: var(--uol-purple-15); }

  :where(.mi-table-wrap, .eec-table-wrap, .pm-table-wrap, .ap-table-wrap, .table-wrap,
         .admissions-table-wrap, .glossary-table-wrap) {
    border: 1px solid var(--uol-border);
    border-radius: var(--uol-radius-md);
    box-shadow: 0 4px 16px rgba(32, 18, 42, .04);
  }

  /* ---- Chart surfaces ---------------------------------------------------------- */
  :where(.chart-wrap, .mi-chart, .eec-chart, .pm-chart, .ap-chart) {
    background: linear-gradient(180deg, #fff, var(--uol-warm-gray-15));
    border: 1px solid var(--uol-border);
    border-radius: var(--uol-radius-md);
    padding: var(--uol-space-3);
  }
  .uol-chart-legend { display: flex; flex-wrap: wrap; gap: var(--uol-space-2); margin-top: var(--uol-space-3); }
  .uol-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: var(--uol-space-1);
    min-height: var(--uol-control-h-sm);
    font-size: var(--uol-text-xs);
    color: var(--uol-muted);
  }
  /* The swatch colour is per-series, so it is supplied as a custom property through
     `data-cortex-style` rather than being enumerated here. */
  .uol-chart-legend i {
    width: var(--uol-space-3);
    height: var(--uol-space-3);
    border-radius: var(--uol-radius-sm);
    background: var(--legend-color, var(--uol-purple));
  }

  /* ---- Semantic status colours ------------------------------------------------- */
  /* Text colour is always the dark companion ink, never the palette colour itself. */
  :where(.status-pill, .status-chip, .ap-pill, .pm-pill, .data-badge, .source-badge, .role-chip) {
    display: inline-flex;
    align-items: center;
    gap: var(--uol-space-1);
    padding: var(--uol-space-1) var(--uol-space-2);
    border-radius: var(--uol-radius-pill);
    font-size: var(--uol-text-xs);
    font-weight: var(--uol-weight-semibold);
    background: var(--uol-purple-15);
    color: var(--uol-purple);
    border: 1px solid var(--uol-purple-30);
  }
  :where(.good, .positive, .finance-pos, .pm-pill-green, .budget-ok, .forecast-ontrack, .trend-positive) { background: var(--uol-green-15);       color: var(--uol-ink-on-green);  border-color: var(--uol-green-30); }
  :where(.warn, .medium, .pm-pill-amber, .budget-warning, .forecast-risk, .severity-medium, .priority-medium) { background: var(--uol-yellow-15); color: var(--uol-ink-on-yellow); border-color: var(--uol-yellow-30); }
  :where(.bad, .negative, .finance-neg, .pm-pill-red, .budget-over, .forecast-critical, .severity-critical, .priority-critical, .worklist-overdue) { background: var(--uol-red-15); color: var(--uol-ink-on-red); border-color: var(--uol-red-30); }
  :where(.pm-pill-blue, .forecast-neutral, .source-badge) { background: var(--uol-blue-purple-15); color: var(--uol-blue-purple); border-color: var(--uol-blue-purple-30); }
  :where(.high, .severity-high, .priority-high) { background: var(--uol-orange-15); color: var(--uol-ink-on-orange); border-color: var(--uol-orange-30); }
  :where(.low, .severity-low, .priority-low) { background: var(--uol-teal-15); color: var(--uol-ink-on-teal); border-color: var(--uol-teal-30); }

  /* ---- Overlays, empty states, notifications ---------------------------------- */
  :where(.mi-dialog, .eec-dialog, .pm-dialog, .access-denied-card, .login-card) {
    border: 1px solid var(--uol-border);
    border-radius: var(--uol-radius-lg);
    box-shadow: var(--uol-shadow-lg);
  }
  :where(.mi-modal, .eec-modal, .pm-modal) {
    background: rgba(26, 18, 32, .58);
    backdrop-filter: blur(5px);
    z-index: var(--uol-z-overlay);
  }
  .pm-empty, .ap-empty, .empty-result {
    background: var(--uol-warm-gray-15);
    border: 1px dashed var(--uol-warm-gray);
    border-radius: var(--uol-radius-md);
    padding: var(--uol-space-5);
  }

  /* ---- Data surface states ------------------------------------------------------ */
  /* Every data surface has four states beyond "populated", and before v5.5.0 each module
     invented its own markup for them — one route said "No records", the next rendered an
     empty table with no explanation at all. `CortexUI.state()` builds these from one
     place. `role="status"` means the change is announced rather than silently repainted. */
  .cxui-state {
    display: grid;
    gap: var(--uol-space-2);
    justify-items: start;
    padding: var(--uol-space-6) var(--uol-space-5);
    border: 1px dashed var(--uol-border);
    border-radius: var(--uol-radius-md);
    background: var(--uol-warm-gray-15);
    color: var(--uol-muted);
    font-size: var(--uol-text-sm);
    line-height: var(--uol-leading-normal);
  }
  .cxui-state strong {
    color: var(--uol-ink);
    font-size: var(--uol-text-base);
  }
  .cxui-state-loading { background: var(--uol-purple-15); border-color: var(--uol-purple-30); }
  .cxui-state-error {
    background: var(--uol-red-15);
    border-style: solid;
    border-color: var(--uol-red-30);
    color: var(--uol-ink-on-red);
  }
  .cxui-state-error strong { color: var(--uol-ink-on-red); }
  .cxui-state-readonly { background: var(--uol-teal-15); border-color: var(--uol-teal-30); color: #174F55; }

  /* A read-only user must never be shown a control they cannot use. Marking the region
     rather than each control means one attribute governs the whole surface, and `inert`
     keeps the disabled controls out of the tab order as well as out of reach. */
  [data-cortex-readonly] .cxui-write-only { display: none; }
  .pm-toast.success { background: var(--uol-green); color: #1C3000; }
  .pm-toast.error, .auth-error { color: var(--uol-ink-on-red); }

  .page-footer, .footer { color: var(--uol-muted); border-top: 1px solid var(--uol-border); }

  /* ---- Public Marketing Request form ------------------------------------------ */
  .request-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--uol-purple), var(--uol-blue-purple));
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: var(--uol-shadow-lg);
  }
  .request-hero::after {
    content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%;
    right: -90px; top: -130px; background: rgba(255, 255, 255, .08);
  }
  .request-hero-logo { width: min(300px, 55%); display: block; margin: 0 0 var(--uol-space-5); position: relative; z-index: var(--uol-z-raised); }
  .request-hero small, .request-hero h1, .request-hero p { position: relative; z-index: var(--uol-z-raised); }
  .request-hero small { color: #F1ECF6; }
  .request-hero p { color: #F6F2F9; }
  .form-card { border-color: var(--uol-border); box-shadow: var(--uol-shadow-md); }
  .form-section legend, .reference { color: var(--uol-purple); }
  .form-note { background: var(--uol-teal-15); border-color: var(--uol-teal-30); color: #174F55; }
  .check { border-color: var(--uol-border); background: #fff; }
  .check:has(input:checked) { background: var(--uol-green-15); border-color: var(--uol-green-30); }
  .message.success { background: var(--uol-green-15); color: #31530A; border-color: var(--uol-green-30); }
  .message.error { background: var(--uol-red-15); color: var(--uol-ink-on-red); border-color: var(--uol-red-30); }

  /* ---- Module canvases --------------------------------------------------------- */
  .action-page, .pm-page, .eec-page, .glossary-page { background: var(--uol-canvas); }
  .admissions-banner, .intel-banner, .budget-banner, .source-banner, .mi-boundary {
    background: linear-gradient(135deg, #fff, var(--uol-purple-15));
    border-color: var(--uol-purple-30);
  }
  .management-summary, .summary-box, .finance-rules {
    background: var(--uol-teal-15);
    border-color: var(--uol-teal-30);
  }
}

@layer responsive {
  /* Mobile-first: the rules above are the phone layout. These three min-width steps are
     the only breakpoints in the platform — 480 / 768 / 1024. See DESIGN_SYSTEM.md. */
  .platform-grid, .platform-kpis { display: grid; gap: var(--uol-space-4); grid-template-columns: 1fr; }

  @media (min-width: 481px) {
    .platform-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 769px) {
    .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .platform-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* Revealed filters spread out once there is room; on a phone they stay a single stack. */
    .cxui-disclosure-body { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  }
  @media (min-width: 1025px) {
    .platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .platform-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
}

@layer utilities {
  /* `hidden` is the platform's own way of saying "not on screen", and roughly sixty runtime
     surfaces — drawers, menus, panels, the assistant — are dismissed by setting it. It is
     declared here, in the last cascade layer, because a `display` written for the same element
     in any earlier layer would otherwise win: the assistant panel picked up
     `display: flex` in `responsive`, which outranks the `[hidden]` rule in `shell`, and the
     result was a dialog that stayed on screen after it had been closed, over the sign-in
     fields, with a minimise button that changed the attribute and nothing else. A guard in the
     final layer cannot be outranked, so no component has to remember to restate it. */
  [hidden] { display: none; }

  /* Spacing utilities. These exist for one reason: a Content-Security-Policy of
     `style-src 'self'` blocks every inline `style` attribute, and v5.4.4 had 85 of them
     across the static pages and the HTML built in JavaScript. Almost all were a one-off
     top margin. Expressing those as tokenised classes removes the CSP blocker and stops
     the same gap being written as 14px, 15px, 16px and 20px on four different pages.
     Runtime-computed values (a bar's width, a swatch's colour) must be set through the
     CSSOM — `element.style.width = …` — which CSP permits; only the attribute is blocked. */
  .u-mt-1 { margin-top: var(--uol-space-1); }
  .u-mt-2 { margin-top: var(--uol-space-2); }
  .u-mt-3 { margin-top: var(--uol-space-3); }
  .u-mt-4 { margin-top: var(--uol-space-4); }
  .u-mt-5 { margin-top: var(--uol-space-5); }
  .u-mt-6 { margin-top: var(--uol-space-6); }
  .u-mt-7 { margin-top: var(--uol-space-7); }
  .u-mt-8 { margin-top: var(--uol-space-8); }

  /* A search or text field that should take the width it needs without forcing its row to
     overflow a phone. */
  .u-field-wide { min-width: min(520px, 100%); max-width: 100%; }

  /* A panel that scrolls internally rather than growing without limit. */
  .u-scroll-panel { max-height: 260px; overflow: auto; }

  /* A block of explanatory copy, held to a readable measure. */
  .u-measure-narrow { max-width: 330px; }

  /* Two equal columns from tablet up, one column on a phone. */
  .u-cols-2 { display: grid; gap: var(--uol-space-4); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 769px) {
    .u-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Visually hidden but available to assistive technology. */
  .cxui-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    /* The one justified `!important` block: motion suppression must beat any author rule,
       including inline styles set by the Studio canvases at runtime. */
    *, *::before, *::after {
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
    }
  }

  /* Shared print rules. These live in `utilities` — the highest layer — so hiding interactive
     chrome beats every module and shell rule without needing `!important`. Previously each
     module repeated its own print block with forced declarations. */
  @media print {
    .global-shell, .primary-nav, .cortex-more, .cortex-more-menu, .shell-utility,
    .page-anchor-nav, .module-sidebar, .upload-panel, .controls,
    .tabs, .mi-tabs, .table-tools, .mi-filterbar, .platform-btn, .btn, .pm-btn, .mini-btn,
    .cxui-overflow, .cxui-disclosure > summary,
    .ask-cortex-launcher, .ask-cortex-panel, .cortex-toast, .page-footer {
      display: none;
    }
    /* Filters that are merely collapsed on screen still describe the printed dataset. */
    .cxui-disclosure > .cxui-disclosure-body { display: block; border: 0; padding: 0; }
    .container, .mi-container, main { max-width: none; padding: 0; }
    .tab-panel, [role="tabpanel"] { display: block; }
    .platform-card, .card, .kpi, .platform-kpi, .mi-card, .pm-card, .ap-card, .eec-card {
      box-shadow: none;
      break-inside: avoid;
    }
    .chart-wrap, .mi-chart, .eec-chart, .pm-chart, .ap-chart { height: 260px; }
    .table-wrap, .mi-table-wrap, .admissions-table-wrap { max-height: none; overflow: visible; }
    a[href]::after { content: ""; }
  }
}