/* (c) 2026 Wayne State University. All rights reserved. */
/*
 * EEGSimLab shared design system (ui-system.css).
 * Linked first on every page. Three cascade layers: tokens (custom properties),
 * base (element defaults, focus ring) and components (.sl- prefixed classes).
 * Page stylesheets are unlayered, so they win over this file; they should hold
 * layout only and read colours, type and radii from the --sl- tokens below.
 * Themes: light (default), dim (dim room) and dim-paper (dim room with a white-paper EEG),
 * selected with data-sl-theme on <html>. Presentation size scales type through --sl-ui-scale.
 * Contrast of every declared token pair is checked by tests/ui-system.test.mjs.
 */
@layer tokens, base, components;

/* ------------------------------------------------------------------ tokens */
@layer tokens {
  :root {
    /* Surfaces */
    --sl-bg: #F3F5F1;
    --sl-surface: #FFFFFF;
    --sl-surface-subtle: #F7F9F5;
    --sl-surface-sunken: #EEF2EE;
    /* Text; text-3 is the lightest grey allowed for any text */
    --sl-text-1: #17261F;
    --sl-text-2: #3E5047;
    --sl-text-3: #56685E;
    /* Borders: border-control for every interactive boundary, border for decoration only */
    --sl-border: #D5DDD6;
    --sl-border-control: #7A8C81;
    /* Brand */
    --sl-brand: #123F35;
    --sl-brand-hover: #0B2E26;
    --sl-brand-tint: #E5EFE8;
    --sl-on-brand: #FFFFFF;
    --sl-brand-accent: #E3C164;
    --sl-link: #1B5444;
    /* Focus ring */
    --sl-focus: #1A5FB4;
    /* Semantic ink / tint pairs */
    --sl-info-ink: #1F5A92;
    --sl-info-tint: #E7F0F8;
    --sl-success-ink: #2D6A45;
    --sl-success-tint: #E6F2EA;
    --sl-warning-ink: #8A5300;
    --sl-warning-tint: #FBF1DF;
    --sl-danger-ink: #A3271F;
    --sl-danger-tint: #FBE9E7;
    --sl-neutral-ink: #4E5F56;
    --sl-neutral-tint: #EEF2EE;
    --sl-on-danger: #FFFFFF;
    /* Figure (EEG paper); read from canvas code through getToken() */
    --sl-paper: #FFFFFF;
    --sl-trace-ink: #101814;
    --sl-figure-label: #3E5047;
    --sl-grid-major: #B9C4BC;
    --sl-grid-minor: #E7ECE8;
    --sl-cursor: #C62828;
    --sl-stim: #8A5300;
    --sl-series-left: #1F6A96;
    --sl-series-right: #A0522A;

    /* Type: system stacks only, 12-px floor, 14-px base, scaled by Presentation size */
    --sl-ui-scale: 1;
    --sl-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sl-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --sl-fs-1: calc(12px * var(--sl-ui-scale));
    --sl-fs-2: calc(13px * var(--sl-ui-scale));
    --sl-fs-3: calc(14px * var(--sl-ui-scale));
    --sl-fs-4: calc(16px * var(--sl-ui-scale));
    --sl-fs-5: calc(20px * var(--sl-ui-scale));
    --sl-fs-6: calc(24px * var(--sl-ui-scale));
    --sl-fs-7: calc(30px * var(--sl-ui-scale));
    --sl-lh-1: 1.34;
    --sl-lh-2: 1.38;
    --sl-lh-3: 1.43;
    --sl-lh-4: 1.5;

    /* Spacing (4-pt), radii, elevation */
    --sl-space-1: 4px;
    --sl-space-2: 8px;
    --sl-space-3: 12px;
    --sl-space-4: 16px;
    --sl-space-5: 24px;
    --sl-space-6: 32px;
    --sl-space-7: 48px;
    --sl-space-8: 64px;
    --sl-radius-sm: 4px;
    --sl-radius-md: 8px;
    --sl-radius-lg: 12px;
    --sl-radius-pill: 999px;
    --sl-shadow-1: 0 1px 3px rgb(16 24 20 / 0.10);
    --sl-shadow-2: 0 8px 32px rgb(16 24 20 / 0.18);

    /* Sizes */
    --sl-header-h: 56px;
    --sl-control-h: 36px;
    --sl-control-h-dense: 32px;
    --sl-target-min: 24px;

    /* Layers */
    --sl-z-header: 10;
    --sl-z-sticky: 20;
    --sl-z-drawer: 30;
    --sl-z-dialog: 40;
    --sl-z-toast: 50;

    /* Motion */
    --sl-dur-fast: 120ms;
    --sl-dur: 200ms;
    --sl-ease: cubic-bezier(0.2, 0, 0, 1);
  }

  /* Dim-room theme (optional, user choice) */
  :root[data-sl-theme="dim"],
  :root[data-sl-theme="dim-paper"] {
    --sl-bg: #0F1714;
    --sl-surface: #16211C;
    --sl-surface-subtle: #1A2721;
    --sl-surface-sunken: #0B120F;
    --sl-text-1: #E7EEE9;
    --sl-text-2: #B7C4BC;
    --sl-text-3: #93A39A;
    --sl-border: #2C3B34;
    --sl-border-control: #7D9085;
    --sl-brand: #7CC8A4;
    --sl-brand-hover: #9AD8BA;
    --sl-brand-tint: #1C3A2E;
    --sl-on-brand: #0F1714;
    --sl-brand-accent: #E3C164;
    --sl-link: #8FD3B2;
    --sl-focus: #8AB4F8;
    --sl-info-ink: #8AB4F8;
    --sl-info-tint: #172A3E;
    --sl-success-ink: #81C995;
    --sl-success-tint: #15301F;
    --sl-warning-ink: #E8B04B;
    --sl-warning-tint: #33270F;
    --sl-danger-ink: #F28B82;
    --sl-danger-tint: #3A1916;
    --sl-neutral-ink: #B7C4BC;
    --sl-neutral-tint: #23302A;
    --sl-on-danger: #0F1714;
    --sl-paper: #121B17;
    --sl-trace-ink: #DDE6E0;
    --sl-figure-label: #B7C4BC;
    --sl-grid-major: #4A5A52;
    --sl-grid-minor: #24302A;
    --sl-cursor: #FF8A80;
    --sl-stim: #E8B04B;
    --sl-series-left: #7FB8E0;
    --sl-series-right: #F0A070;
  }

  /* Dim room, but the EEG keeps a white-paper figure */
  :root[data-sl-theme="dim-paper"] {
    --sl-paper: #FFFFFF;
    --sl-trace-ink: #101814;
    --sl-figure-label: #3E5047;
    --sl-grid-major: #B9C4BC;
    --sl-grid-minor: #E7ECE8;
    --sl-cursor: #C62828;
    --sl-stim: #8A5300;
    --sl-series-left: #1F6A96;
    --sl-series-right: #A0522A;
  }

  @media (pointer: coarse) {
    :root {
      --sl-control-h: 44px;
      --sl-control-h-dense: 44px;
      --sl-target-min: 44px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --sl-dur-fast: 0ms;
      --sl-dur: 0ms;
    }
  }

  /* Print always uses the light palette */
  @media print {
    :root,
    :root[data-sl-theme] {
      --sl-bg: #FFFFFF;
      --sl-surface: #FFFFFF;
      --sl-text-1: #000000;
      --sl-text-2: #222222;
      --sl-text-3: #333333;
      --sl-paper: #FFFFFF;
      --sl-trace-ink: #000000;
      --sl-figure-label: #222222;
      --sl-grid-major: #9AA69E;
      --sl-grid-minor: #D9DFDA;
    }
  }
}

/* -------------------------------------------------------------------- base */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    font-family: var(--sl-font-sans);
    font-size: var(--sl-fs-3);
    line-height: var(--sl-lh-3);
    color: var(--sl-text-1);
    background: var(--sl-bg);
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-variant-numeric: tabular-nums;
    scroll-padding-top: calc(var(--sl-header-h) + var(--sl-space-2));
  }
  :root[data-sl-theme="dim"],
  :root[data-sl-theme="dim-paper"] { color-scheme: dark; }

  body { margin: 0; background: var(--sl-bg); color: var(--sl-text-1); }

  h1 { font-size: var(--sl-fs-6); line-height: 1.33; font-weight: 600; letter-spacing: -0.01em; }
  h2 { font-size: var(--sl-fs-5); line-height: 1.4; font-weight: 600; }
  h3 { font-size: var(--sl-fs-4); line-height: var(--sl-lh-4); font-weight: 600; }

  button, input, select, textarea { font: inherit; color: inherit; }
  a { color: var(--sl-link); text-underline-offset: 3px; }
  code, kbd, samp, pre { font-family: var(--sl-font-mono); }

  /* One focus ring: 2-px outline plus a 2-px surface halo that keeps it visible on brand fills */
  :focus-visible {
    outline: 2px solid var(--sl-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--sl-surface);
  }

  [hidden] { display: none !important; }

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

  @media (forced-colors: active) {
    :focus-visible { outline: 2px solid Highlight; box-shadow: none; }
  }
}

/* -------------------------------------------------------------- components */
@layer components {
  /* Utilities */
  .sl-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .sl-icon {
    width: 16px;
    height: 16px;
    flex: none;
    vertical-align: -3px;
  }
  .sl-icon--lg { width: 20px; height: 20px; }
  .sl-kbd {
    display: inline-block;
    min-width: 22px;
    padding: 0 var(--sl-space-1);
    border: 1px solid var(--sl-border-control);
    border-bottom-width: 2px;
    border-radius: var(--sl-radius-sm);
    background: var(--sl-surface);
    color: var(--sl-text-1);
    font: 500 var(--sl-fs-1) / 18px var(--sl-font-mono);
    text-align: center;
  }

  /* Skip links: hidden until focused */
  .sl-skip {
    position: absolute;
    left: var(--sl-space-2);
    top: var(--sl-space-2);
    z-index: calc(var(--sl-z-toast) + 1);
    display: flex;
    gap: var(--sl-space-2);
  }
  .sl-skip a {
    position: absolute;
    transform: translateY(-200%);
    padding: var(--sl-space-2) var(--sl-space-3);
    border-radius: var(--sl-radius-sm);
    background: var(--sl-brand);
    color: var(--sl-on-brand);
    font-size: var(--sl-fs-3);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  .sl-skip a:focus { position: static; transform: none; }

  /* Header: one 56-px row */
  .sl-header {
    position: sticky;
    top: 0;
    z-index: var(--sl-z-header);
    display: flex;
    align-items: center;
    gap: var(--sl-space-4);
    height: var(--sl-header-h);
    margin: 0;
    padding: 0 var(--sl-space-4);
    background: var(--sl-surface);
    border-bottom: 1px solid var(--sl-border);
    color: var(--sl-text-1);
    font-size: var(--sl-fs-3);
  }
  .sl-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sl-space-2);
    min-height: var(--sl-target-min);
    color: var(--sl-brand);
    font-size: var(--sl-fs-4);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  .sl-brand .sl-icon { width: 24px; height: 24px; }
  .sl-header__slot { display: flex; align-items: center; gap: var(--sl-space-2); }
  .sl-header__slot:empty { display: none; }
  .sl-utility {
    display: flex;
    align-items: center;
    gap: var(--sl-space-2);
    margin-left: auto;
  }

  /* Module navigation */
  .sl-nav { position: relative; display: flex; align-items: center; min-width: 0; }
  .sl-nav .sl-nav__toggle { display: none; }
  .sl-nav__list {
    display: flex;
    align-items: center;
    gap: var(--sl-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .sl-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--sl-control-h-dense);
    padding: 0 var(--sl-space-3);
    border-radius: var(--sl-radius-sm);
    color: var(--sl-text-2);
    font-size: var(--sl-fs-3);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
  }
  .sl-nav__link:hover { color: var(--sl-text-1); background: var(--sl-surface-sunken); }
  .sl-nav__link[aria-current="page"] {
    color: var(--sl-brand);
    background: var(--sl-brand-tint);
    box-shadow: inset 0 -2px 0 var(--sl-brand);
    font-weight: 600;
  }

  /* Buttons */
  .sl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sl-space-2);
    min-height: var(--sl-control-h);
    min-width: var(--sl-target-min);
    padding: 0 var(--sl-space-3);
    border: 1px solid var(--sl-border-control);
    border-radius: var(--sl-radius-sm);
    background: var(--sl-surface);
    color: var(--sl-text-1);
    font-size: var(--sl-fs-3);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--sl-dur-fast) var(--sl-ease), border-color var(--sl-dur-fast) var(--sl-ease);
  }
  .sl-btn:hover:not(:disabled) { background: var(--sl-surface-sunken); }
  .sl-btn:disabled, .sl-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
  .sl-btn--dense { min-height: var(--sl-control-h-dense); padding: 0 var(--sl-space-2); }
  .sl-btn--primary { background: var(--sl-brand); border-color: var(--sl-brand); color: var(--sl-on-brand); }
  .sl-btn--primary:hover:not(:disabled) { background: var(--sl-brand-hover); border-color: var(--sl-brand-hover); }
  .sl-btn--tertiary { border-color: transparent; background: transparent; color: var(--sl-link); }
  .sl-btn--tertiary:hover:not(:disabled) { background: var(--sl-brand-tint); }
  .sl-btn--danger { background: var(--sl-danger-ink); border-color: var(--sl-danger-ink); color: var(--sl-on-danger); }
  .sl-btn--danger:hover:not(:disabled) { filter: brightness(0.92); background: var(--sl-danger-ink); }
  .sl-btn--icon { padding: 0; width: var(--sl-control-h); }
  .sl-btn[aria-busy="true"] { cursor: progress; }
  .sl-linkbtn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--sl-link);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  /* ToggleButton: fixed label, state through aria-pressed */
  .sl-toggle[aria-pressed="true"] {
    background: var(--sl-brand-tint);
    border-color: var(--sl-brand);
    box-shadow: inset 0 0 0 1px var(--sl-brand);
    color: var(--sl-brand);
    font-weight: 600;
  }
  .sl-toggle__state { display: none; }
  .sl-toggle[aria-pressed="true"] .sl-toggle__state { display: inline-flex; }

  /* Chips and ACNS category chips (text plus colour, never colour alone) */
  .sl-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sl-space-1);
    min-height: 24px;
    padding: 0 var(--sl-space-2);
    border: 1px solid transparent;
    border-radius: var(--sl-radius-pill);
    background: var(--sl-neutral-tint);
    color: var(--sl-neutral-ink);
    font-size: var(--sl-fs-1);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
  }
  .sl-chip--neutral { background: var(--sl-neutral-tint); color: var(--sl-neutral-ink); }
  .sl-chip--info { background: var(--sl-info-tint); color: var(--sl-info-ink); }
  .sl-chip--success { background: var(--sl-success-tint); color: var(--sl-success-ink); }
  .sl-chip--warning { background: var(--sl-warning-tint); color: var(--sl-warning-ink); }
  .sl-chip--danger { background: var(--sl-danger-tint); color: var(--sl-danger-ink); }
  .sl-chip--outlined { border-color: currentColor; }
  .sl-chip--solid.sl-chip--danger { background: var(--sl-danger-ink); color: var(--sl-on-danger); }
  .sl-chip .sl-icon { width: 14px; height: 14px; vertical-align: -2px; }
  .sl-chip--status { border-color: var(--sl-border-control); background: var(--sl-surface); color: var(--sl-text-2); }
  .sl-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
  }

  /* Session menu (disclosure pattern) */
  .sl-menu { position: relative; }
  .sl-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + var(--sl-space-1));
    z-index: var(--sl-z-drawer);
    display: grid;
    gap: var(--sl-space-3);
    min-width: 272px;
    padding: var(--sl-space-3);
    border: 1px solid var(--sl-border-control);
    border-radius: var(--sl-radius-md);
    background: var(--sl-surface);
    box-shadow: var(--sl-shadow-1);
  }
  .sl-menu__heading { margin: 0; color: var(--sl-text-2); font-size: var(--sl-fs-1); font-weight: 600; }
  .sl-menu__sep { height: 1px; margin: 0; border: 0; background: var(--sl-border); }

  /* Fields */
  .sl-field { display: grid; gap: var(--sl-space-1); margin: 0 0 var(--sl-space-3); }
  .sl-label { color: var(--sl-text-1); font-size: var(--sl-fs-2); font-weight: 500; }
  .sl-hint { margin: 0; color: var(--sl-text-3); font-size: var(--sl-fs-1); }
  .sl-error { margin: 0; color: var(--sl-danger-ink); font-size: var(--sl-fs-1); font-weight: 600; }
  .sl-input, .sl-select {
    width: 100%;
    min-height: var(--sl-control-h);
    padding: 0 var(--sl-space-3);
    border: 1px solid var(--sl-border-control);
    border-radius: var(--sl-radius-sm);
    background: var(--sl-surface);
    color: var(--sl-text-1);
    font-size: var(--sl-fs-3);
  }
  .sl-input[aria-invalid="true"], .sl-select[aria-invalid="true"] {
    border-color: var(--sl-danger-ink);
    box-shadow: inset 0 0 0 1px var(--sl-danger-ink);
  }
  .sl-input-wrap { position: relative; display: flex; align-items: center; }
  .sl-input-wrap .sl-input { padding-right: calc(var(--sl-space-3) + 4ch); }
  .sl-unit {
    position: absolute;
    right: var(--sl-space-3);
    color: var(--sl-text-3);
    font-size: var(--sl-fs-2);
    pointer-events: none;
  }

  /* Slider: label, value output (aria-live off), range, default tick, reset, ACNS category slot */
  .sl-slider {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sl-space-1) var(--sl-space-2);
    margin: 0 0 var(--sl-space-3);
  }
  .sl-slider__head {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sl-space-2);
  }
  .sl-output {
    color: var(--sl-text-1);
    font-size: var(--sl-fs-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .sl-slider__track { position: relative; display: flex; align-items: center; min-height: var(--sl-target-min); }
  .sl-slider__tick {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 12px;
    margin-left: -1px;
    transform: translateY(-50%);
    background: var(--sl-text-2);
    pointer-events: none;
  }
  .sl-slider__category { grid-column: 1 / -1; font-size: var(--sl-fs-1); color: var(--sl-text-2); }
  .sl-slider__category:empty { display: none; }
  .sl-slider .sl-hint { grid-column: 1 / -1; }
  .sl-range {
    width: 100%;
    height: var(--sl-target-min);
    margin: 0;
    background: transparent;
    accent-color: var(--sl-brand);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  .sl-range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: var(--sl-radius-pill);
    background: var(--sl-border-control);
  }
  .sl-range::-moz-range-track {
    height: 4px;
    border-radius: var(--sl-radius-pill);
    background: var(--sl-border-control);
  }
  .sl-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -6px;
    border: 2px solid var(--sl-surface);
    border-radius: 50%;
    background: var(--sl-brand);
    box-shadow: 0 0 0 1px var(--sl-brand);
  }
  .sl-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid var(--sl-surface);
    border-radius: 50%;
    background: var(--sl-brand);
    box-shadow: 0 0 0 1px var(--sl-brand);
  }
  .sl-range:disabled { opacity: 0.55; cursor: not-allowed; }

  /*
   * SegmentedControl: native radios inside a radiogroup. Separators are the 1-px gaps showing the
   * control-border colour behind the options, so they stay correct when the options wrap: options grow
   * to fill each row, and a control too wide for its container becomes a stacked, fully divided list.
   */
  .sl-segmented { display: grid; gap: var(--sl-space-1); }
  .sl-segmented__options {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1px;
    width: fit-content;
    max-width: 100%;
    border: 1px solid var(--sl-border-control);
    border-radius: var(--sl-radius-sm);
    background: var(--sl-border-control);
    overflow: hidden;
  }
  .sl-segmented__option { position: relative; display: flex; flex: 1 1 auto; background: var(--sl-surface); }
  .sl-segmented__option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  .sl-segmented__option span {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: var(--sl-control-h-dense);
    padding: 0 var(--sl-space-3);
    color: var(--sl-text-2);
    font-size: var(--sl-fs-3);
    font-weight: 500;
  }
  .sl-segmented__option input:checked + span {
    background: var(--sl-brand-tint);
    box-shadow: inset 0 -2px 0 var(--sl-brand);
    color: var(--sl-brand);
    font-weight: 600;
  }
  .sl-segmented__option input:focus-visible + span {
    outline: 2px solid var(--sl-focus);
    outline-offset: -4px;
  }
  .sl-segmented__option input:disabled + span { opacity: 0.55; }

  /* InspectorSection: accordion with summary chip, modified dot and section reset */
  .sl-section { border-bottom: 1px solid var(--sl-border); background: var(--sl-surface); }
  .sl-section__summary {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--sl-space-2);
    min-height: 44px;
    padding: 0 var(--sl-space-4);
    background: var(--sl-surface-subtle);
    cursor: pointer;
    list-style: none;
  }
  .sl-section__summary::-webkit-details-marker { display: none; }
  .sl-section__chevron { transition: transform var(--sl-dur-fast) var(--sl-ease); color: var(--sl-text-2); }
  .sl-section[open] .sl-section__chevron { transform: rotate(180deg); }
  .sl-section__title { font-size: var(--sl-fs-3); font-weight: 600; color: var(--sl-text-1); }
  .sl-section__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--sl-space-2);
    margin-left: auto;
    min-width: 0;
  }
  .sl-section__modified { color: var(--sl-brand); display: inline-flex; align-items: center; gap: var(--sl-space-1); }
  .sl-section__body { padding: var(--sl-space-3) var(--sl-space-4) var(--sl-space-4); }
  .sl-section__tools { display: flex; justify-content: flex-end; margin-bottom: var(--sl-space-2); }

  /* Callout */
  .sl-callout {
    display: flex;
    gap: var(--sl-space-3);
    margin: 0 0 var(--sl-space-3);
    padding: var(--sl-space-3);
    border: 1px solid currentColor;
    border-left-width: 4px;
    border-radius: var(--sl-radius-md);
    background: var(--sl-info-tint);
    color: var(--sl-info-ink);
  }
  .sl-callout--info { background: var(--sl-info-tint); color: var(--sl-info-ink); }
  .sl-callout--tip { background: var(--sl-success-tint); color: var(--sl-success-ink); }
  .sl-callout--warning { background: var(--sl-warning-tint); color: var(--sl-warning-ink); }
  .sl-callout--error { background: var(--sl-danger-tint); color: var(--sl-danger-ink); }
  .sl-callout__title { margin: 0 0 var(--sl-space-1); font-weight: 600; }
  .sl-callout__body { margin: 0; color: var(--sl-text-1); }

  /* Dialog: native <dialog> */
  .sl-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    border: 1px solid var(--sl-border-control);
    border-radius: var(--sl-radius-lg);
    background: var(--sl-surface);
    color: var(--sl-text-1);
    box-shadow: var(--sl-shadow-2);
  }
  .sl-dialog::backdrop { background: rgb(8 14 11 / 0.55); }
  .sl-dialog__head {
    display: flex;
    align-items: center;
    gap: var(--sl-space-3);
    padding: var(--sl-space-4) var(--sl-space-5) 0;
  }
  .sl-dialog__title { margin: 0; font-size: var(--sl-fs-5); font-weight: 600; }
  .sl-dialog__close { margin-left: auto; }
  .sl-dialog__body { padding: var(--sl-space-3) var(--sl-space-5); overflow: auto; }
  .sl-dialog__body p { margin: 0 0 var(--sl-space-3); }
  .sl-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sl-space-2);
    margin: 0;
    padding: 0 var(--sl-space-5) var(--sl-space-5);
  }
  .sl-shortcuts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--sl-space-2) var(--sl-space-4);
    margin: 0;
  }
  .sl-shortcuts dt { white-space: nowrap; }
  .sl-shortcuts dd { margin: 0; color: var(--sl-text-2); }

  /* Toast: confirmations only, at least 6 s, announced through the page's single live region */
  .sl-toast-region {
    position: fixed;
    right: var(--sl-space-4);
    bottom: var(--sl-space-4);
    z-index: var(--sl-z-toast);
    display: grid;
    gap: var(--sl-space-2);
    max-width: min(420px, calc(100vw - 32px));
  }
  .sl-toast {
    display: flex;
    align-items: center;
    gap: var(--sl-space-3);
    padding: var(--sl-space-3) var(--sl-space-4);
    border-radius: var(--sl-radius-md);
    background: var(--sl-text-1);
    color: var(--sl-bg);
    box-shadow: var(--sl-shadow-2);
    font-size: var(--sl-fs-3);
  }

  /* EmptyState and Progress */
  .sl-empty {
    display: grid;
    justify-items: start;
    gap: var(--sl-space-2);
    padding: var(--sl-space-5);
    border: 1px dashed var(--sl-border-control);
    border-radius: var(--sl-radius-md);
    color: var(--sl-text-2);
  }
  .sl-empty__title { margin: 0; color: var(--sl-text-1); font-size: var(--sl-fs-4); font-weight: 600; }
  .sl-empty__body { margin: 0; }
  .sl-progress { display: grid; gap: var(--sl-space-1); }
  .sl-progress progress { width: 100%; height: 8px; accent-color: var(--sl-brand); }

  /* Figure helpers used by pages and the print stylesheet */
  .sl-figure { background: var(--sl-paper); color: var(--sl-trace-ink); }
  .sl-caption { color: var(--sl-text-2); font-size: var(--sl-fs-1); }
  .sl-print-only { display: none; }

  /* External links: arrow plus visually hidden text added by markExternalLinks() */
  .sl-external__mark { margin-left: 0.2em; text-decoration: none; display: inline-block; }

  /* Footer */
  .sl-footer {
    margin: 0;
    padding: var(--sl-space-4);
    border-top: 1px solid var(--sl-border);
    background: var(--sl-surface);
    color: var(--sl-text-2);
    font-size: var(--sl-fs-1);
    line-height: var(--sl-lh-1);
  }
  .sl-footer__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sl-space-1) var(--sl-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .sl-footer__list li + li::before { content: "·"; margin-right: var(--sl-space-2); color: var(--sl-text-3); }
  .sl-footer .sl-linkbtn { font-size: var(--sl-fs-1); min-height: var(--sl-target-min); }

  /* Presentation layout (learner display): no nav, lower header */
  :root[data-sl-layout="presentation"] { --sl-header-h: 48px; }

  /*
   * Responsive header (widths measured with the five module labels):
   * >= 1440 px everything visible; 1200-1439 px utility buttons become icon-only and the chip shortens
   * to "Offline"; < 1200 px the nav becomes a "Modules" menu; < 900 px Shortcuts is icon-only and the
   * chip again reads "Offline"; < 600 px every utility is icon-only and the brand shows its mark only.
   * The offline status is therefore always visible. Names stay in the accessibility tree because labels
   * are visually hidden, not removed (the short chip text is aria-hidden; the full text is read).
   */
  .sl-chip__short { display: none; }
  @media (min-width: 1200px) and (max-width: 1439px) {
    .sl-utility .sl-btn__label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .sl-utility .sl-chip__long {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .sl-utility .sl-chip__short { display: inline; }
  }
  @media (max-width: 1199px) {
    .sl-nav .sl-nav__toggle { display: inline-flex; }
    .sl-nav__list {
      position: absolute;
      left: 0;
      top: calc(100% + var(--sl-space-1));
      z-index: var(--sl-z-drawer);
      display: none;
      flex-direction: column;
      align-items: stretch;
      min-width: 240px;
      padding: var(--sl-space-2);
      border: 1px solid var(--sl-border-control);
      border-radius: var(--sl-radius-md);
      background: var(--sl-surface);
      box-shadow: var(--sl-shadow-1);
    }
    .sl-nav[data-open="true"] .sl-nav__list { display: flex; }
    .sl-nav__link { min-height: var(--sl-control-h); }
  }
  @media (max-width: 899px) {
    .sl-utility [data-sl-u="shortcuts"] .sl-btn__label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .sl-utility .sl-chip__long {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .sl-utility .sl-chip__short { display: inline; }
  }
  @media (max-width: 599px) {
    .sl-header { gap: var(--sl-space-2); padding: 0 var(--sl-space-3); }
    .sl-utility { gap: var(--sl-space-1); }
    .sl-utility .sl-btn__label,
    .sl-brand__text {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .sl-utility .sl-kbd { display: none; }
    .sl-footer { padding: var(--sl-space-3); }
  }
  @media (pointer: coarse) {
    .sl-segmented__option span, .sl-nav__link { min-height: 44px; }
  }

  /* Forced colours: system colours, outlines kept */
  @media (forced-colors: active) {
    .sl-btn, .sl-chip, .sl-callout, .sl-dialog, .sl-menu__panel, .sl-toast, .sl-segmented__options, .sl-section {
      border: 1px solid CanvasText;
    }
    .sl-toggle[aria-pressed="true"],
    .sl-nav__link[aria-current="page"],
    .sl-segmented__option input:checked + span {
      forced-color-adjust: none;
      background: Highlight;
      color: HighlightText;
    }
    .sl-range::-webkit-slider-runnable-track { background: CanvasText; }
    .sl-range::-moz-range-track { background: CanvasText; }
    .sl-dot, .sl-slider__tick { background: CanvasText; }
    .sl-segmented__option input:focus-visible + span { outline-color: Highlight; }
    .sl-segmented__options { background: CanvasText; }
    .sl-segmented__option { background: Canvas; }
  }

  /* Print: figure, caption and descriptor only; navigation and controls hidden */
  @media print {
    .sl-skip, .sl-header, .sl-nav, .sl-utility, .sl-menu, .sl-toast-region, .sl-print-hide,
    .sl-btn, .sl-slider, .sl-segmented, .sl-dialog { display: none !important; }
    .sl-print-only { display: block; }
    html, body { background: #FFFFFF; color: #000000; }
    .sl-figure, .sl-caption, .sl-descriptor { break-inside: avoid; }
    .sl-figure canvas, .sl-figure img, .sl-figure svg { max-width: 100%; height: auto; }
    .sl-footer { border-top: 1px solid #000000; background: #FFFFFF; color: #000000; }
    .sl-footer .sl-linkbtn { color: #000000; text-decoration: none; }
  }
}