/* ============================================================
   SLATE DESIGN SYSTEM — tokens, legacy remap, base, components.
   Source of truth: the "Node editor aesthetic improvement" Claude
   Design project (.dc.html mockups). Loaded LAST of the app CSS so
   its :root remap wins over style.css's legacy token block.

   Rules:
   - `--sl-*` and `.sl-*` are the only namespaces this file owns.
   - States are `.is-active` / `.is-selected` / `.is-danger`.
   - No `!important`. Never restyle `.sl-*` from other files —
     extend with a co-located modifier class instead.
   - Old style.css sections migrate per-surface: markup adopts
     `.sl-*`, that section's hexes become `var(--sl-*)`, and the
     section header gets tagged `[SLATE-MIGRATED]`.
   ============================================================ */

/* ---------- §1 Tokens ---------- */
/* PatchWork Standard v1 (Sep 2026) — "PatchWork Standard.dc.html".
   Five surfaces, three control states, three text steps, one accent.
   Status colours are for dots + text only, never fills or buttons.
   The older fine-grained names below are ALIASES onto the Standard
   so existing rules re-theme without edits; new code uses the
   canonical names in the first block. */
:root {
    /* surfaces (darkest → lightest) — each step has one job */
    --sl-app:     oklch(0.165 0.004 250);  /* 1 page background behind everything */
    --sl-panel:   oklch(0.19 0.005 250);   /* 2 sidebar, drawers, inputs, table headers */
    --sl-card:    oklch(0.2 0.006 250);    /* 3 cards, lists, section containers */
    --sl-raised:  oklch(0.235 0.005 250);  /* 4 modals, menus, popovers, prompt bars */
    --sl-control: oklch(0.29 0.006 250);   /* 5 secondary buttons */
    --sl-control-hover: oklch(0.355 0.006 250);

    /* control states (not surfaces) */
    --sl-quiet:       oklch(0.22 0.007 250);  /* idle chips, quiet buttons */
    --sl-quiet-hover: oklch(0.26 0.008 250);
    --sl-selected:    oklch(0.26 0.008 250);  /* active sidebar row, selected session */
    --sl-segment-on:  oklch(0.3 0.01 250);    /* active item in a segmented control */
    --sl-row-hover:   oklch(0.21 0.006 250);  /* table row hover */

    /* lines & overlays */
    --sl-hairline: oklch(1 0 0 / 0.06);       /* row dividers, card borders */
    --sl-border:   oklch(1 0 0 / 0.09);       /* inputs, controls */
    --sl-border-strong: oklch(1 0 0 / 0.16);  /* hover borders, menus */
    --sl-wash:     oklch(1 0 0 / 0.05);       /* row + menu item hover */
    --sl-scrim:    oklch(0.1 0.004 250 / 0.65);

    /* text — tertiary is the smallest allowed */
    --sl-text-1: oklch(0.95 0.002 250);
    --sl-text-2: oklch(0.72 0.005 250);
    --sl-text-3: oklch(0.6 0.005 250);

    /* accent — the only brand colour */
    --sl-accent:      oklch(0.72 0.13 230);
    --sl-on-accent:   oklch(0.15 0.02 240);
    --sl-accent-tint: oklch(0.72 0.13 230 / 0.14);
    --sl-accent-line: oklch(0.72 0.13 230 / 0.45);
    --sl-accent-text: oklch(0.88 0.1 230);    /* text on an accent tint */
    --sl-link:        oklch(0.78 0.11 230);
    --sl-link-hover:  oklch(0.86 0.1 232);
    --sl-focus:       oklch(0.6 0.1 230);

    /* status — dots and text only */
    --sl-success: oklch(0.78 0.14 155);
    --sl-warning: oklch(0.83 0.12 85);
    --sl-error:   oklch(0.76 0.15 25);
    --sl-danger-line: oklch(0.65 0.19 25 / 0.35);  /* outlined destructive button */
    --sl-danger-wash: oklch(0.65 0.19 25 / 0.14);
    --sl-danger-text: oklch(0.78 0.12 25);

    /* fonts — Onest for all interface text, headings included */
    --sl-font-ui:   'Onest', system-ui, sans-serif;
    --sl-font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* radii: 6 segments/tags · 8 buttons/inputs · 10 menus · 12 cards · 14 modals */
    --sl-r-6: 6px; --sl-r-8: 8px; --sl-r-10: 10px; --sl-r-12: 12px; --sl-r-14: 14px;

    /* control heights */
    --sl-h-sm: 28px; --sl-h: 32px; --sl-h-lg: 36px; --sl-h-xl: 40px;

    /* shadows */
    --sl-shadow-pop:   0 18px 40px -10px oklch(0 0 0 / 0.9);
    --sl-shadow-modal: 0 30px 90px oklch(0.08 0.01 250 / 0.6);
    --sl-shadow-card:  0 8px 20px -8px oklch(0 0 0 / 0.6);
    --sl-shadow-float: 0 14px 34px -14px oklch(0 0 0 / 0.75);

    /* canvas dot grid */
    --sl-dot-grid: radial-gradient(oklch(0.36 0.01 250 / 0.65) 1px, transparent 1px);
}

/* Legacy aliases → Standard. Do not use in new code. */
:root {
    --sl-bg-tool:   var(--sl-app);
    --sl-bg-page:   var(--sl-app);
    --sl-bg-panel:  var(--sl-panel);
    --sl-bg-shelf:  var(--sl-panel);
    --sl-bg-rail:   var(--sl-panel);
    --sl-bg-card:   var(--sl-card);
    --sl-bg-card-2: var(--sl-card);
    --sl-bg-chip:   var(--sl-quiet);
    --sl-bg-pop:    var(--sl-raised);
    --sl-bg-hover:  var(--sl-quiet-hover);
    --sl-bg-active: var(--sl-segment-on);

    --sl-line:     var(--sl-hairline);
    --sl-line-2:   var(--sl-hairline);
    --sl-line-3:   var(--sl-border);
    --sl-line-pop: oklch(1 0 0 / 0.13);
    --sl-inset:    inset 0 0 0 1px var(--sl-hairline);

    --sl-text-hi:    var(--sl-text-1);
    --sl-text:       var(--sl-text-1);
    --sl-text-mid:   var(--sl-text-2);
    --sl-text-nav:   var(--sl-text-2);
    --sl-text-dim:   var(--sl-text-3);
    --sl-text-faint: var(--sl-text-3);
    --sl-text-ghost: var(--sl-text-3);

    --sl-sky:       var(--sl-accent);
    --sl-sky-hover: oklch(0.78 0.13 230);
    --sl-sky-text:  var(--sl-link);
    --sl-sky-icon:  var(--sl-link);
    --sl-on-sky:    var(--sl-on-accent);
    --sl-green:      var(--sl-success);
    --sl-green-text: var(--sl-success);
    --sl-amber:      var(--sl-warning);
    --sl-red:        oklch(0.65 0.19 25);
    --sl-red-text:   var(--sl-danger-text);

    --sl-sky-10: oklch(0.72 0.13 230 / 0.10);
    --sl-sky-12: oklch(0.72 0.13 230 / 0.12);
    --sl-sky-14: var(--sl-accent-tint);
    --sl-sky-16: oklch(0.72 0.13 230 / 0.16);
    --sl-sky-35: oklch(0.72 0.13 230 / 0.35);
    --sl-sky-50: oklch(0.72 0.13 230 / 0.5);
    --sl-green-14: oklch(0.66 0.14 155 / 0.14);
    --sl-green-45: oklch(0.66 0.14 155 / 0.45);
    --sl-amber-14: oklch(0.8 0.14 80 / 0.14);
    --sl-amber-40: oklch(0.8 0.14 80 / 0.4);
    --sl-red-12: oklch(0.65 0.19 25 / 0.12);
    --sl-ring-track: oklch(1 0 0 / 0.1);

    --sl-font-display: var(--sl-font-ui);   /* Space Grotesk retired */

    --sl-r-xs: var(--sl-r-6);
    --sl-r-sm: var(--sl-r-8);
    --sl-r-md: var(--sl-r-8);
    --sl-r-lg: var(--sl-r-12);
    --sl-r-xl: var(--sl-r-14);
}

/* ---------- §2 Legacy remap (coexistence mechanism) ----------
   Reassign the old token names so every var()-driven rule in
   style.css / mobile.css / injected CSS re-themes at once.
   Hardcoded hexes stay pinned until their section migrates. */
:root {
    --bg-primary: var(--sl-bg-page);
    --bg-secondary: var(--sl-bg-card-2);
    --bg-tertiary: var(--sl-bg-active);
    --accent: var(--sl-sky);
    --accent-hover: var(--sl-sky-hover);
    --text-primary: var(--sl-text-hi);
    --text-secondary: var(--sl-text-dim);
    --border-color: var(--sl-line-2);
    --success: var(--sl-green);
    --warning: var(--sl-amber);
    --danger: var(--sl-red);
}

/* ---------- §3 Base ---------- */
body {
    font-family: var(--sl-font-ui);
    background: var(--sl-app);
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: oklch(0.32 0.008 250); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: oklch(0.32 0.008 250) transparent; }

/* type scale */
.sl-h1 {   /* page title */
    font-family: var(--sl-font-ui); font-weight: 700; font-size: 26px;
    line-height: 1.1; letter-spacing: -0.02em; color: var(--sl-text-1);
}
.sl-h2 {   /* section */
    font-family: var(--sl-font-ui); font-weight: 700; font-size: 17px;
    letter-spacing: -0.01em; color: var(--sl-text-1); margin: 0;
}
.sl-card-title { font-size: 13.5px; font-weight: 600; color: var(--sl-text-1); }
.sl-body    { font-size: 13px; line-height: 1.55; color: var(--sl-text-1); }
.sl-small   { font-size: 12px; color: var(--sl-text-2); }
.sl-caption { font-size: 11px; color: var(--sl-text-3); }
.sl-data    { font-family: var(--sl-font-mono); font-size: 11px; color: oklch(0.85 0.005 250); }

/* ---------- §4 Shared components ---------- */

/* buttons — at most one primary per area; destructive is outlined */
.sl-btn-primary, .sl-btn-secondary, .sl-btn-ghost, .sl-btn-danger, .sl-btn-icon {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: var(--sl-h); padding: 0 12px; border-radius: var(--sl-r-8);
    font-family: var(--sl-font-ui); font-size: 12px; font-weight: 600;
    cursor: pointer; white-space: nowrap; box-sizing: border-box;
}
.sl-btn-primary {
    padding: 0 14px; border: none; font-weight: 700;
    background: var(--sl-accent); color: var(--sl-on-accent);
}
.sl-btn-primary:hover { filter: brightness(1.07); }
.sl-btn-secondary {
    border: 1px solid oklch(1 0 0 / 0.1);
    background: var(--sl-control); color: var(--sl-text-1);
}
.sl-btn-secondary:hover { background: var(--sl-control-hover); border-color: oklch(1 0 0 / 0.2); }
.sl-btn-ghost { padding: 0 4px; border: none; background: transparent; color: var(--sl-link); }
.sl-btn-ghost:hover { color: var(--sl-link-hover); }
.sl-btn-danger {
    border: 1px solid var(--sl-danger-line); background: transparent; color: var(--sl-danger-text);
}
.sl-btn-danger:hover { background: var(--sl-danger-wash); }
.sl-btn-icon {
    width: var(--sl-h); padding: 0; border: 1px solid oklch(1 0 0 / 0.1);
    background: var(--sl-control); color: oklch(0.85 0.005 250);
}
.sl-btn-icon:hover { background: var(--sl-control-hover); }
.sl-btn-sm { height: var(--sl-h-sm); padding: 0 10px; font-size: 11.5px; }
.sl-btn-icon.sl-btn-sm { width: var(--sl-h-sm); padding: 0; }
.sl-btn-lg { height: var(--sl-h-lg); }
.sl-btn-primary:disabled, .sl-btn-secondary:disabled, .sl-btn-danger:disabled { opacity: 0.45; cursor: default; filter: none; }

/* input */
.sl-input {
    height: var(--sl-h); box-sizing: border-box; padding: 0 11px;
    border-radius: var(--sl-r-8); background: var(--sl-panel);
    border: 1px solid var(--sl-border); font-family: var(--sl-font-ui);
    font-size: 12.5px; color: var(--sl-text-1); outline: none;
}
.sl-input:focus { border-color: var(--sl-focus); }
.sl-input::placeholder { color: oklch(0.5 0.005 250); }
textarea.sl-input { height: auto; padding: 8px 11px; line-height: 1.5; resize: vertical; }

/* switch 38x22 */
.sl-switch {
    flex: none; width: 38px; height: 22px; border-radius: 12px; padding: 0;
    display: inline-flex; align-items: center; justify-content: flex-start; cursor: pointer;
    border: 1px solid oklch(1 0 0 / 0.1); background: var(--sl-control);
}
.sl-switch::after {
    content: ""; display: block; width: 16px; height: 16px; margin: 0 2px;
    border-radius: 50%; background: oklch(0.74 0.005 250);
}
.sl-switch.is-on { justify-content: flex-end; border-color: oklch(0.72 0.13 230 / 0.5); background: oklch(0.72 0.13 230 / 0.85); }
.sl-switch.is-on::after { background: oklch(0.19 0.02 240); }

/* chips — idle quiet grey; selected gets the accent tint (toggle groups) */
.sl-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: var(--sl-h-sm); padding: 0 10px; border-radius: var(--sl-r-6); cursor: pointer;
    background: var(--sl-quiet); border: 1px solid var(--sl-hairline);
    color: var(--sl-text-2); font-family: var(--sl-font-ui);
    font-size: 12px; font-weight: 600; white-space: nowrap; box-sizing: border-box;
}
.sl-chip:hover { background: var(--sl-quiet-hover); }
.sl-chip.is-active,
.sl-chip.is-active-amber {
    background: var(--sl-accent-tint); border-color: var(--sl-accent-line); color: var(--sl-accent-text);
}
.sl-chip-count {   /* plain mono count — no pill */
    font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-3);
}

/* tabs — page sections, one row under the page header */
.sl-tabs { display: flex; flex-wrap: wrap; gap: 0 16px; border-bottom: 1px solid oklch(1 0 0 / 0.07); }
.sl-tab {
    font-family: var(--sl-font-ui); font-size: 13px; font-weight: 600; padding: 0 0 10px;
    color: oklch(0.64 0.005 250); background: none; border: none; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.sl-tab:hover { color: var(--sl-text-1); }
.sl-tab.is-active { color: var(--sl-text-1); border-bottom-color: var(--sl-accent); }

/* mono uppercase section label */
.sl-kicker {
    font-family: var(--sl-font-mono); font-size: 9.5px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--sl-text-3);
}

/* search field */
.sl-search {
    display: flex; align-items: center; gap: 8px; box-sizing: border-box;
    height: var(--sl-h); background: var(--sl-panel); border: 1px solid var(--sl-border);
    border-radius: var(--sl-r-8); padding: 0 11px; color: var(--sl-text-3);
}
.sl-search:focus-within { border-color: var(--sl-focus); }
.sl-search input {
    flex: 1; min-width: 0; background: transparent; border: none; outline: none;
    font-family: var(--sl-font-ui); font-size: 12.5px; color: var(--sl-text-1);
}
.sl-search input::placeholder { color: oklch(0.5 0.005 250); }
.sl-kbd {
    font-family: var(--sl-font-mono); font-size: 10px; color: var(--sl-text-3);
    border: 1px solid var(--sl-border); border-radius: 5px; padding: 2px 6px;
}

/* gen ring (conic) — JS sets --p (0-100), --ring-color, --ring-hole */
.sl-ring {
    --p: 0; --ring-color: var(--sl-warning); --ring-hole: var(--sl-card);
    width: 36px; height: 36px; border-radius: 50%; flex: none;
    background: conic-gradient(var(--ring-color) calc(var(--p) * 3.6deg), var(--sl-ring-track) 0);
    display: flex; align-items: center; justify-content: center;
}
.sl-ring .sl-ring-hole {
    width: 27px; height: 27px; border-radius: 50%; background: var(--ring-hole);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--sl-font-mono); font-size: 9.5px; font-weight: 600;
    color: var(--ring-color); font-variant-numeric: tabular-nums;
}
.sl-ring.sl-ring--sm { width: 30px; height: 30px; }
.sl-ring.sl-ring--sm .sl-ring-hole { width: 22px; height: 22px; font-size: 8.5px; }

/* segmented control — 2-4 options; active item is grey, not blue */
.sl-seg {
    display: inline-flex; gap: 2px; padding: 3px; box-sizing: border-box;
    background: var(--sl-panel); border: 1px solid var(--sl-hairline); border-radius: 9px;
}
.sl-seg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    height: 26px; padding: 0 10px; border: none; border-radius: var(--sl-r-6);
    background: transparent; color: oklch(0.62 0.005 250);
    font-family: var(--sl-font-ui); font-size: 12px; font-weight: 600; cursor: pointer;
}
.sl-seg-btn:hover { color: var(--sl-text-1); }
.sl-seg-btn.is-active { background: var(--sl-segment-on); color: var(--sl-text-1); }
/* toggle group — looks segmented, several can be on */
.sl-seg-btn.is-on {
    background: oklch(0.72 0.13 230 / 0.16); box-shadow: inset 0 0 0 1px var(--sl-accent-line);
    color: var(--sl-accent-text);
}

/* menus + popovers: raised, 10 radius, 5 pad, 28px rows, radius 6 */
.sl-popover {
    background: var(--sl-raised); border: 1px solid var(--sl-line-pop);
    border-radius: var(--sl-r-10); box-shadow: var(--sl-shadow-pop); padding: 5px;
    z-index: 300; box-sizing: border-box;
}
.sl-menu-label {
    font-family: var(--sl-font-mono); font-size: 9px; letter-spacing: 0.12em;
    text-transform: uppercase; color: oklch(0.55 0.005 250); padding: 6px 9px 4px;
}
.sl-menu-item {
    display: flex; align-items: center; gap: 9px; height: var(--sl-h-sm);
    padding: 0 9px; border-radius: var(--sl-r-6); cursor: pointer; box-sizing: border-box;
    color: oklch(0.88 0.002 250); font-family: var(--sl-font-ui); font-size: 12px; font-weight: 500;
    background: none; border: none; width: 100%; text-align: left;
}
.sl-menu-item > svg, .sl-menu-item .sl-menu-icon { width: 13px; height: 13px; flex: none; color: oklch(0.62 0.005 250); }
.sl-menu-item:hover { background: oklch(1 0 0 / 0.06); }
.sl-menu-item.is-danger, .sl-menu-item.is-danger > svg { color: var(--sl-red-text); }
.sl-menu-item.is-danger:hover { background: var(--sl-red-12); }
.sl-menu-key { margin-left: auto; font-family: var(--sl-font-mono); font-size: 10.5px; color: oklch(0.55 0.005 250); }
.sl-menu-sep { height: 1px; background: oklch(1 0 0 / 0.07); margin: 4px 6px; }

/* toasts + notification tray — design 5a ("When the tray fills up").
   main.js showToast pops a card into .sl-toast-stack (positioned by
   _applyToastPosition); js/notification-tray.js owns the tray + log.
   Direct feedback (.sl-toast without .sl-notif-pop) is click-through so it
   never eats a click on what is under it (the editor's track headers sit
   right there); kept cards take the pointer for their close and actions.
   Tone washes are the one place status colours fill: faint, rows only. */
:root {
    --sl-notif-warn-wash: oklch(0.83 0.12 85 / 0.08);
    --sl-notif-error-wash: oklch(0.68 0.17 25 / 0.08);
    --sl-notif-row: oklch(1 0 0 / 0.03);
}
.sl-toast-stack {
    position: fixed; z-index: 10001;
    display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 8px;
    pointer-events: none;
}
.sl-toast-stack.is-right { align-items: flex-end; }
.sl-toast {
    pointer-events: none;
    display: flex; align-items: center; gap: 8px;
    max-width: 360px; padding: 8px 12px; box-sizing: border-box;
    background: var(--sl-raised); border: 1px solid var(--sl-line-pop);
    border-radius: var(--sl-r-10); box-shadow: var(--sl-shadow-pop);
    color: var(--sl-text-1); font-family: var(--sl-font-ui); font-size: 12.5px; font-weight: 500;
    animation: toastSlideIn 0.2s ease;
    transition: opacity 0.2s ease;
}
.sl-toast.is-leaving { opacity: 0; }
.sl-toast.is-from-right { animation-name: toastSlideInRight; }
.sl-toast-msg { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-toast-msg a, .sl-notif-pop-text a { color: var(--sl-link); pointer-events: auto; }
/* "Clear all" rides the far end of the stack (order: 1 under column-reverse). */
.sl-toast-clear {
    order: 1; pointer-events: auto; cursor: pointer; padding: 3px 10px;
    background: var(--sl-raised); border: 1px solid var(--sl-line-pop); border-radius: var(--sl-r-8);
    box-shadow: var(--sl-shadow-pop);
    color: var(--sl-text-2); font-family: var(--sl-font-ui); font-size: 11px; font-weight: 500;
}
.sl-toast-clear:hover { color: var(--sl-text-1); }
.sl-toast-clear[hidden] { display: none; }

/* tone icons */
.sl-notif-ic { display: inline-flex; flex: none; }
.sl-notif-ic.is-pick, .sl-notif-ic.is-warning { color: var(--sl-warning); }
.sl-notif-ic.is-error { color: var(--sl-error); }
.sl-notif-ic.is-success { color: var(--sl-success); }
.sl-notif-ic.is-info { color: var(--sl-link); }
.sl-notif-src-ic { color: var(--sl-text-3); }

/* pop-in card: one group, source header on top */
.sl-toast.sl-notif-pop {
    pointer-events: auto;
    flex-direction: column; align-items: stretch; gap: 6px;
    width: 340px; max-width: calc(100vw - 32px);
    padding: 9px 10px 10px 12px; border-radius: var(--sl-r-12);
}
.sl-toast.sl-notif-pop.is-error { border-color: var(--sl-danger-line); }
.sl-notif-pop-head { display: flex; align-items: center; gap: 8px; min-height: 18px; }
.sl-notif-pop-name {
    flex: 1; min-width: 0; font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-notif-pop-rows { display: flex; flex-direction: column; gap: 6px; }
.sl-notif-pop-row { display: flex; flex-direction: column; gap: 3px; }
.sl-notif-pop-row + .sl-notif-pop-row { border-top: 1px solid var(--sl-hairline); padding-top: 6px; }
.sl-notif-pop-line { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.sl-notif-pop-text {
    flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--sl-text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-notif-pop-detail {
    padding-left: 25px; font-family: var(--sl-font-mono); font-size: 11px; line-height: 1.45;
    color: var(--sl-text-2); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* shared bits: close, actions, mono values */
.sl-notif-x {
    flex: none; width: 20px; height: 20px; padding: 0; border: none; border-radius: var(--sl-r-6);
    display: inline-flex; align-items: center; justify-content: center;
    background: none; color: var(--sl-text-3); cursor: pointer;
}
.sl-notif-x:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.sl-notif-link {
    flex: none; padding: 0 2px; border: none; background: none; cursor: pointer;
    color: var(--sl-link); font-family: var(--sl-font-ui); font-size: 12px; font-weight: 600;
}
.sl-notif-link:hover { color: var(--sl-link-hover); }
.sl-notif-btn-primary, .sl-notif-btn-secondary {
    flex: none; height: var(--sl-h-sm); padding: 0 11px; box-sizing: border-box; cursor: pointer;
    border-radius: var(--sl-r-8); font-family: var(--sl-font-ui); font-size: 12px; font-weight: 600;
}
.sl-notif-btn-primary { border: none; background: var(--sl-accent); color: var(--sl-on-accent); }
.sl-notif-btn-primary:hover { background: var(--sl-sky-hover); }
.sl-notif-btn-secondary { border: 1px solid var(--sl-border-strong); background: var(--sl-control); color: var(--sl-text-1); }
.sl-notif-btn-secondary:hover { background: var(--sl-control-hover); }
.sl-notif-row .sl-notif-btn-secondary { height: 24px; padding: 0 9px; margin: -4px -4px -4px 0; }
.sl-notif-value { flex: none; font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-2); }
.sl-notif-time { flex: none; font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-3); }

/* tray popover: 60% of the window, 520px cap (max-height set by JS) */
.sl-notif-tray {
    position: fixed; z-index: 10000;
    display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden;
    background: var(--sl-raised); border: 1px solid var(--sl-line-pop);
    border-radius: var(--sl-r-12); box-shadow: var(--sl-shadow-pop);
    color: var(--sl-text-1); font-family: var(--sl-font-ui);
    animation: slNotifIn 0.14s ease;
}
@keyframes slNotifIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sl-notif-head {
    flex: none; display: flex; align-items: center; gap: 8px;
    padding: 9px 10px 9px 14px; border-bottom: 1px solid var(--sl-hairline);
}
.sl-notif-title { font-size: 13px; font-weight: 700; }
.sl-notif-count { font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-3); }
.sl-notif-spacer { flex: 1; }
.sl-notif-icon-btn {
    width: 26px; height: 26px; padding: 0; border: none; border-radius: var(--sl-r-6);
    display: inline-flex; align-items: center; justify-content: center;
    background: none; color: var(--sl-text-3); cursor: pointer;
}
.sl-notif-icon-btn:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.sl-notif-clear {
    height: 26px; padding: 0 6px; border: none; border-radius: var(--sl-r-6); background: none; cursor: pointer;
    color: var(--sl-text-2); font-family: var(--sl-font-ui); font-size: 11.5px; font-weight: 500;
}
.sl-notif-clear:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.sl-notif-clear[hidden] { display: none; }
.sl-notif-body { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.sl-notif-scroll {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: oklch(1 0 0 / 0.14) transparent;
}
.sl-notif-fade {
    position: absolute; left: 0; right: 0; bottom: 0; height: 56px; pointer-events: none;
    background: linear-gradient(to bottom, oklch(0.235 0.005 250 / 0), var(--sl-raised));
    opacity: 0; transition: opacity 0.15s ease;
}
.sl-notif-tray.is-overflowing .sl-notif-fade { opacity: 1; }
.sl-notif-group { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.sl-notif-group + .sl-notif-group { border-top: 1px solid var(--sl-hairline); }
.sl-notif-ghead { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.sl-notif-gname {
    flex: 1; min-width: 0; font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-notif-gcount { font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-3); }
.sl-notif-rows { display: flex; flex-direction: column; gap: 1px; border-radius: var(--sl-r-8); overflow: hidden; }
.sl-notif-row {
    display: flex; align-items: center; gap: 10px; min-height: 35px; box-sizing: border-box;
    padding: 9px 10px; background: var(--sl-notif-row);
}
.sl-notif-row.is-pick, .sl-notif-row.is-warning { background: var(--sl-notif-warn-wash); }
.sl-notif-row.is-error { background: var(--sl-notif-error-wash); }
.sl-notif-text {
    flex: 1; min-width: 0; font-size: 12.5px; color: var(--sl-text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-notif-row.is-pick .sl-notif-text, .sl-notif-row.is-warning .sl-notif-text, .sl-notif-row.is-error .sl-notif-text { font-weight: 600; }
.sl-notif-more {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; box-sizing: border-box;
    padding: 8px 10px; border: none; background: oklch(1 0 0 / 0.02); cursor: pointer; text-align: left;
    color: var(--sl-text-3); font-family: var(--sl-font-ui);
}
.sl-notif-more:hover { background: var(--sl-wash); }
.sl-notif-more-label { flex: 1; font-size: 12px; color: var(--sl-text-2); }
.sl-notif-dots { display: flex; gap: 4px; }
.sl-notif-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sl-text-3); }
.sl-notif-dot.is-error { background: var(--sl-error); }
.sl-notif-dot.is-warning { background: var(--sl-warning); }
.sl-notif-dot.is-success { background: var(--sl-success); }
.sl-notif-clear-done { font-size: 11.5px; color: var(--sl-text-3); cursor: pointer; }
.sl-notif-clear-done:hover { color: var(--sl-text-1); }
.sl-notif-foot {
    flex: none; display: flex; align-items: center; gap: 8px; min-height: 36px; box-sizing: border-box;
    padding: 8px 14px; border-top: 1px solid var(--sl-hairline); background: oklch(0 0 0 / 0.08);
}
.sl-notif-below { flex: 1; font-size: 11.5px; color: var(--sl-text-3); }
.sl-notif-foot .sl-notif-link { font-size: 11.5px; }
.sl-notif-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 30px 16px; color: var(--sl-text-2); font-size: 12.5px;
}
.sl-notif-empty svg { color: var(--sl-text-3); }

/* the log: every notification, newest first */
.sl-notif-log-scrim { z-index: 10003; }
.sl-notif-log { width: min(560px, calc(100vw - 32px)); max-height: min(72vh, 680px); display: flex; flex-direction: column; font-family: var(--sl-font-ui); color: var(--sl-text-1); }
.sl-notif-log-head { display: flex; align-items: center; gap: 8px; padding-right: 10px; }
.sl-notif-log-count { font-family: var(--sl-font-mono); font-size: 10.5px; font-weight: 400; color: var(--sl-text-3); }
.sl-notif-log-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 0; }
.sl-notif-log-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 14px; }
.sl-notif-log-row + .sl-notif-log-row { border-top: 1px solid var(--sl-hairline); }
.sl-notif-log-row > .sl-notif-ic { margin-top: 1px; }
.sl-notif-log-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sl-notif-log-text { font-size: 12.5px; overflow-wrap: anywhere; }
.sl-notif-log-detail { font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-2); overflow-wrap: anywhere; }
.sl-notif-log-meta { display: flex; align-items: center; gap: 6px; font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-3); min-width: 0; }
.sl-notif-log-meta > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-notif-log-time { flex: none; font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-3); margin-top: 2px; }

/* bells: rail footer (home + tools) and the canvas top bar */
.sl-notif-bell .sl-navicon { position: relative; }
.sl-notif-badge {
    position: absolute; top: -6px; right: -8px;
    min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center; pointer-events: none;
    background: var(--sl-accent); color: var(--sl-on-accent);
    font-family: var(--sl-font-mono); font-size: 10px; font-weight: 500; line-height: 1;
}
.sl-notif-badge[hidden] { display: none; }
.sl-notif-topbar-btn {
    position: relative; flex: none; width: var(--sl-h); height: var(--sl-h); padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: var(--sl-r-8); background: none; cursor: pointer; color: var(--sl-text-2);
}
.sl-notif-topbar-btn:hover, .sl-notif-topbar-btn[aria-expanded="true"] { background: var(--sl-wash); color: var(--sl-text-1); }
.sl-notif-topbar-btn .sl-notif-badge { top: 1px; right: 0; }

/* checkbox */
.sl-check {
    width: 16px; height: 16px; border-radius: 5px; flex: none; cursor: pointer;
    border: 1.5px solid oklch(1 0 0 / 0.18); background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    color: transparent;
}
.sl-check.is-checked { background: var(--sl-accent); border-color: var(--sl-accent); color: var(--sl-on-accent); }

/* cards — 12 radius; hover turns the border accent */
.sl-card {
    background: var(--sl-card); border: 1px solid var(--sl-hairline);
    border-radius: var(--sl-r-12);
}
.sl-card:hover { border-color: oklch(0.72 0.13 230 / 0.5); }
.sl-card.sl-card-static:hover { border-color: var(--sl-hairline); }

/* tables — rows 10x14, hairline dividers, mono uppercase header */
.sl-table { border-radius: var(--sl-r-12); border: 1px solid oklch(1 0 0 / 0.07); overflow: hidden; }
.sl-table-head {
    padding: 9px 14px; background: var(--sl-panel);
    font-family: var(--sl-font-mono); font-size: 9.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: oklch(0.55 0.005 250);
}
.sl-table-row { padding: 10px 14px; border-top: 1px solid oklch(1 0 0 / 0.05); }
.sl-table-row:hover { background: var(--sl-row-hover); }

/* status — dot plus coloured text, never a filled block */
.sl-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sl-text-2); }
.sl-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.sl-status.is-success { color: var(--sl-success); }
.sl-status.is-warning { color: var(--sl-warning); }
.sl-status.is-error   { color: var(--sl-error); }
.sl-status.is-accent  { color: var(--sl-link); }

/* nav rail item — 32px rows, 12.5px, 15px icons */
.sl-navitem {
    display: flex; align-items: center; gap: 10px; height: var(--sl-h);
    padding: 0 9px; border-radius: var(--sl-r-8); cursor: pointer; box-sizing: border-box;
    color: oklch(0.76 0.005 250); font-family: var(--sl-font-ui);
    font-size: 12.5px; font-weight: 500; text-decoration: none;
    border: none; background: transparent; width: 100%; text-align: left;
}
.sl-navitem:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.sl-navitem.is-active { background: var(--sl-selected); color: var(--sl-text-1); font-weight: 600; }
.sl-navitem.is-active .sl-navicon { color: var(--sl-link); }
.sl-navicon { display: inline-flex; flex: none; color: currentColor; }
.sl-navicon svg { width: 15px; height: 15px; }

/* modal — scrim 65% + 2px blur, 14 radius */
.sl-scrim {
    position: fixed; inset: 0; background: var(--sl-scrim); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; z-index: 400;
}
.sl-modal {
    background: var(--sl-raised); border: 1px solid oklch(1 0 0 / 0.1);
    border-radius: var(--sl-r-14); box-shadow: var(--sl-shadow-modal); overflow: hidden;
}
.sl-modal-head { padding: 12px 14px; border-bottom: 1px solid var(--sl-hairline); font-weight: 700; font-size: 14px; }
.sl-modal-body { padding: 14px; }
.sl-modal-foot { display: flex; justify-content: flex-end; gap: 6px; padding: 9px 14px; border-top: 1px solid var(--sl-hairline); }

/* drawer — 340-360px, pushes content, actions pinned to the bottom */
.sl-drawer { width: 350px; flex: none; background: var(--sl-panel); border-left: 1px solid oklch(1 0 0 / 0.07); display: flex; flex-direction: column; min-height: 0; }
.sl-drawer-head { padding: 10px 12px; border-bottom: 1px solid var(--sl-hairline); font-size: 12px; font-weight: 600; }
.sl-drawer-body { flex: 1; min-height: 0; overflow: auto; padding: 12px; }
.sl-drawer-foot { padding: 9px 12px; border-top: 1px solid var(--sl-hairline); }

/* progress bar */
.sl-progress {
    height: 4px; border-radius: 2px; background: oklch(1 0 0 / 0.08);
    overflow: hidden; position: relative;
}
.sl-progress > span {
    display: block; height: 100%; border-radius: 2px;
    background: var(--sl-accent);
}

/* small tags — 6 radius, grey; roles are text, not coloured badges */
.sl-badge-role {
    font-family: var(--sl-font-ui); font-size: 11px; font-weight: 600;
    background: oklch(1 0 0 / 0.07); color: var(--sl-text-2);
    padding: 2px 7px; border-radius: var(--sl-r-6);
}
.sl-lang-tag {
    font-family: var(--sl-font-mono); font-size: 10px; font-weight: 600;
    background: oklch(1 0 0 / 0.07); color: var(--sl-text-1);
    padding: 2px 7px; border-radius: var(--sl-r-6);
}
.sl-lang-tag.on-thumb { background: oklch(0 0 0 / 0.5); color: #fff; }
.sl-tag-thumb {   /* e.g. "Canvas" badge on a card thumbnail */
    display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px;
    border-radius: var(--sl-r-6); background: oklch(0 0 0 / 0.5);
    font-size: 10.5px; font-weight: 600; color: #fff;
}

/* page frame — 30px top, 40px sides */
.sl-page { padding: 30px 40px 48px; box-sizing: border-box; }
.sl-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; color: var(--sl-text-2); font-size: 13px; text-align: center; }
.sl-empty svg { width: 20px; height: 20px; color: var(--sl-text-3); }

/* ---------- Onboarding quiz + UI tour (js/onboarding-quiz.js, js/tour.js) ----------
   "TourOverlay.dc.html". Both sit above the home screen (9999), the gate
   (99998) and the welcome panel (100000). */
.pw-quiz-scrim { z-index: 100005; padding: 16px; box-sizing: border-box; }
.pw-quiz {
    width: min(520px, 100%); box-sizing: border-box; padding: 20px 20px 14px;
    font-family: var(--sl-font-ui); color: var(--sl-text-1);
}
.pw-quiz-kicker, .pw-tour-label {
    font-family: var(--sl-font-mono); font-size: 10px; letter-spacing: 0.1em; color: oklch(0.75 0.12 230);
}
.pw-quiz-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-top: 8px; }
.pw-quiz-sub { font-size: 12.5px; color: var(--sl-text-2); margin-top: 4px; }
.pw-quiz-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 20px; min-height: 64px; align-content: flex-start; }
.pw-quiz-opt { height: var(--sl-h); padding: 0 12px; font-size: 12.5px; }
.pw-quiz-foot { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--sl-hairline); }
.pw-quiz-dots, .pw-tour-dots { display: flex; gap: 4px; flex: 1; align-items: center; }
.pw-quiz-dot, .pw-tour-dot {
    width: 5px; height: 5px; border-radius: 3px; background: oklch(1 0 0 / 0.15); transition: width 0.2s ease;
}
.pw-quiz-dot.is-done, .pw-tour-dot.is-done { background: var(--sl-accent); }
.pw-quiz-dot.is-current, .pw-tour-dot.is-current { width: 16px; background: var(--sl-accent); }
.pw-quiz-skip { color: var(--sl-text-3); }
.pw-quiz-skip:hover { color: var(--sl-text-1); }

.pw-tour { position: fixed; inset: 0; z-index: 100010; font-family: var(--sl-font-ui); color: var(--sl-text-1); }
.pw-tour-scrim { position: fixed; inset: 0; background: oklch(0.08 0.004 250 / 0.72); }
.pw-tour-spot {
    position: fixed; display: none; border-radius: var(--sl-r-10); pointer-events: none;
    box-shadow: 0 0 0 2px var(--sl-accent), 0 0 0 9999px oklch(0.08 0.004 250 / 0.72);
    transition: left 0.28s ease, top 0.28s ease, width 0.28s ease, height 0.28s ease;
}
.pw-tour.has-target .pw-tour-scrim { background: transparent; }
.pw-tour.has-target .pw-tour-spot { display: block; }
.pw-tour-card {
    position: fixed; width: 320px; box-sizing: border-box; padding: 16px 16px 14px;
    background: var(--sl-raised); border: 1px solid oklch(1 0 0 / 0.12); border-radius: var(--sl-r-14);
    box-shadow: 0 24px 60px oklch(0 0 0 / 0.55); transition: left 0.28s ease, top 0.28s ease;
}
.pw-tour-top { display: flex; align-items: center; gap: 8px; }
.pw-tour-flex { flex: 1; }
.pw-tour-skip {
    background: transparent; border: none; padding: 0; font-family: var(--sl-font-ui);
    font-size: 11.5px; font-weight: 600; color: var(--sl-text-3); cursor: pointer;
}
.pw-tour-skip:hover { color: var(--sl-text-1); }
.pw-tour-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-top: 8px; }
.pw-tour-body { font-size: 12.5px; line-height: 1.55; color: oklch(0.76 0.005 250); margin-top: 6px; text-wrap: pretty; }
.pw-tour-list { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.pw-tour-list[hidden] { display: none; }
.pw-tour-li { display: flex; align-items: flex-start; gap: 9px; }
.pw-tour-li-icon { display: inline-flex; flex: none; margin-top: 2px; color: oklch(0.75 0.12 230); }
.pw-tour-li-icon svg { width: 14px; height: 14px; }
.pw-tour-li-text { font-size: 12px; line-height: 1.45; color: oklch(0.78 0.005 250); }
.pw-tour-li-name { font-weight: 600; color: var(--sl-text-1); }
.pw-tour-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.pw-tour-foot [hidden] { display: none; }
/* Phones: the card is a full-width bottom sheet, clear of the home indicator. */
.pw-tour-card.is-sheet {
    left: 0; right: 0; bottom: 0; top: auto; width: auto;
    border-radius: var(--sl-r-14) var(--sl-r-14) 0 0; border-bottom: none;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.pw-tour-card.is-sheet .pw-tour-foot .sl-btn-primary,
.pw-tour-card.is-sheet .pw-tour-foot .sl-btn-secondary { height: var(--sl-h-lg); }
@media (prefers-reduced-motion: reduce) {
    .pw-tour-spot, .pw-tour-card, .pw-quiz-dot, .pw-tour-dot { transition: none; }
}