/* ════════════════════════════════════════════════════════════════════════════
   ██████  QLYNIC DASHBOARD DESIGN SYSTEM — "NOCTURNE CORE"  v5.2
   ────────────────────────────────────────────────────────────────────────────
   THE THESIS
   v4 was an instrument panel in costume. v5 takes the costume off. Same
   skeleton, same class names, same JS — but every surface is now calm,
   every control is now ONE control, and every state colour is computed by
   one engine that cannot be out-cascaded. Stripe density, Apple restraint,
   Qlynic's filament as the only jewellery.

   WHAT CHANGED AND WHY (the v4 bug ledger, each verified in the shipped file)
   · qd-btn--accent / --danger turned near-black on hover in dark mode.
     ROOT CAUSE: `.qd .qd-btn:hover` (0,3,0) out-ranked `.qd .qd-btn--accent`
     (0,2,0), so the generic hover repainted every variant with panel colours.
     FIX: the BUTTON ENGINE below. The base button only *consumes* private
     custom properties (--_bg, --_bg-h …); variants only *set* them.
     Specificity can never bite again — there is nothing left to out-rank.
   · Light-mode hover was invisible (white button → white panel).
     FIX: dedicated secondary-button tokens with a real hover step in BOTH
     themes, and the border carries the signal (#D7DEE7 → #B9C3CF).
   · Danger hover used filter:brightness() — fragile, and beaten by the same
     specificity bug. FIX: explicit rest/hover/press reds, all ≥4.8:1 white.
   · Fat chrome everywhere. FIX: control 40→36, row 44→40, panel pad 20→16,
     list rows 54→44, menu items 36→32, radii 14/10→12/8. A logs list is a
     list again, not a wall of upholstery.
   · The animated double-helix "weave", corner brackets, and most glows are
     RETIRED. Panels are quiet; the filament alone signs the product.
   · Kit horizontal scroll. ROOT CAUSE: .qd-main is a grid; grid children
     default to min-width:auto, so any wide <pre>/table pushed the page.
     FIX: `.qd-main > * { min-width:0 }` + `overflow-x:clip` on .qd-body +
     .qd-call.is-full no longer uses 100vw. Fixed for every page, not just
     the kit.

   ONE MODEL PER CONTROL (the simplification you asked for)
     SUBMIT   → .qd-btn--primary. `--accent` is now an ALIAS of it: one
                submit button in the whole product. Cyan remains STATE ONLY.
     QUIET    → .qd-btn (secondary) · --soft (tinted quiet) · --ghost (bare)
     DANGER   → .qd-btn--danger (the only red fill)
     AI       → .qd-btn--ai (LAW 8's sanctioned exception, violet)
     INPUT    → one text-input skin shared by input/select/textarea/search/
                tokenput/smart-select. One checkbox. One radio. One switch.
                One segmented control. One chip.

   DUAL MODE, EQUAL CITIZENS
     .qd                      dark — night ops, the default
     .qd[data-theme="light"]  light — the same instrument in daylight
   Every interactive pair re-measured for v5 (WCAG, computed not asserted):
     dark  primary 17.0 · secondary 15.0 · danger 4.8/5.6/6.8 · act 10.3
     light primary 17.9 · secondary 19.1 · danger 5.6/6.6/8.2 · act 5.4

   LAWS (v5)
     1  One panel surface + one filament. Everywhere. No other ornament.
     2  Neutral primary. Cyan = state only (focus, selection, live, links).
        --accent aliases --primary; a coloured submit no longer exists.
     3  Semantics: emerald good · amber waiting · rose bad · slate neutral.
     4  Nothing floating may leave the viewport (enforced in the JS).
     5  Text never below --qd-faint. Meta only at that weight.
     6  Motion is 140ms. Loaders and the filament are the only performers.
     7  .qd [hidden] stays hidden — load-bearing.
     8  AI is the one theatrical actor: the violet family + the filament
        gradient belong to AI features alone.
     9  Every page is HERO + TOOLBAR + panels. Density is the default;
        [data-density="compact"] is the archive setting, not the fix.
    10  Variants set variables; bases consume them. New components follow
        the engine pattern or they don't ship.

   FILES  qlynic-dashboard.css · qlynic-dashboard.js (required for LAW 4)
   INSTALL <body class="qd"> or <body class="qd" data-theme="light">
   COMPAT  every v4 class name still exists (some as documented aliases);
           every v4 token name is still defined. Pages restyle, never break.
   ════════════════════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Martian+Mono:wdth,wght@87.5,400;87.5,500;87.5,600&display=swap");

/* ── 01 · DARK (default) ──────────────────────────────────────────────────── */
.qd {
    --qd-ground: #06080B;
    --qd-ground-2: #0A0E13;
    --qd-panel: #0E1319;
    --qd-panel-2: #141A21;
    --qd-hair: rgba(148, 180, 214, .11);
    --qd-hair-2: rgba(148, 180, 214, .20);
    --qd-hair-3: rgba(148, 180, 214, .32);
    /* THE FILAMENT — the Qlynic logo, structural */
    --qd-filament: linear-gradient(90deg, #2BD9EC 0%, #4D8DFF 52%, #8A7CFF 100%);
    --qd-brand-1: #2BD9EC;
    --qd-brand-2: #4D8DFF;
    --qd-brand-3: #8A7CFF;
    /* PRIMARY ACTION — chrome on dark. The one submit button. */
    --qd-btn: #E9EFF7;
    --qd-btn-hover: #FFFFFF;
    --qd-btn-press: #CBD6E4;
    --qd-on-btn: #080B0F; /* 17.04:1 */
    --qd-btn-sh: 0 1px 2px rgba(0, 0, 0, .35);
    /* SECONDARY ACTION — v5. A real surface with a real hover in the dark. */
    --qd-btn2: #151B23; /* ink 14.97:1 */
    --qd-btn2-hov: #1B222C; /* ink 13.84:1 */
    --qd-btn2-press: #10151C;
    --qd-btn2-line: rgba(148, 180, 214, .16);
    --qd-btn2-line-h: rgba(148, 180, 214, .34);
    /* DANGER — v5. Explicit rest/hover/press; hover DARKENS in both themes. */
    --qd-danger: #D62F4C; /* white 4.81:1 */
    --qd-danger-hov: #C42843; /* white 5.63:1 */
    --qd-danger-press: #B02039; /* white 6.75:1 */
    --qd-on-danger: #FFFFFF;
    /* GENERIC HOVER FILM — rows, ghost buttons, menu items. Never panel-2. */
    --qd-hov: rgba(148, 180, 214, .07);
    --qd-press: rgba(148, 180, 214, .12);
    /* ELECTRIC STATE — cyan means something is selected, live, or focused */
    --qd-act: #22D3EE; /* 10.32:1 on panel */
    --qd-act-ink: #5FE3F5; /* 12.25:1 */
    --qd-act-soft: rgba(34, 211, 238, .11);
    --qd-act-line: rgba(34, 211, 238, .32);
    --qd-act-glow: 0 0 0 3px rgba(34, 211, 238, .15);
    --qd-ring: 0 0 0 2px var(--qd-panel), 0 0 0 4px #22D3EE;
    /* INK */
    --qd-ink: #E9EFF7; /* 16.12:1 */
    --qd-ink-2: #B7C3D2; /* 10.44:1 */
    --qd-ink-3: #8A97A8; /*  6.28:1 */
    --qd-faint: #69768A; /*  4.05:1 */
    /* SEMANTICS */
    --qd-good: #34D399;
    --qd-good-ink: #34D399;
    --qd-good-tint: rgba(52, 211, 153, .12);
    --qd-good-line: rgba(52, 211, 153, .30);
    --qd-warn: #FBBF24;
    --qd-warn-ink: #FBBF24;
    --qd-warn-tint: rgba(251, 191, 36, .12);
    --qd-warn-line: rgba(251, 191, 36, .30);
    --qd-bad: #FF5E7A;
    --qd-bad-ink: #FF5E7A;
    --qd-bad-tint: rgba(255, 94, 122, .12);
    --qd-bad-line: rgba(255, 94, 122, .30);
    --qd-info: #93A3B8;
    --qd-info-ink: #93A3B8;
    --qd-info-tint: rgba(147, 163, 184, .10);
    --qd-info-line: rgba(147, 163, 184, .24);
    /* CHARTS */
    --qd-chart-1: #22D3EE;
    --qd-chart-2: #8A7CFF;
    --qd-chart-3: #34D399;
    --qd-chart-4: #FBBF24;
    --qd-chart-5: #FF5E7A;
    --qd-chart-6: #5B8AA6;
    --qd-chart-grid: rgba(148, 180, 214, .09);
    --qd-chart-axis: #8A97A8;
    --qd-chart-tip-bg: #141A21;
    --qd-chart-tip-ink: #E9EFF7;
    /* AI — the one theatrical actor (LAW 8) */
    --qd-ai: #8A7CFF; /* 6.6:1 on panel */
    --qd-ai-ink: #A99DFF; /* 8.1:1 */
    --qd-ai-soft: rgba(138, 124, 255, .12);
    --qd-ai-line: rgba(138, 124, 255, .32);
    --qd-ai-glow: 0 0 18px -6px rgba(138, 124, 255, .40);
    --qd-ai-btn-1: #B3A6FF; /* ink 9.33:1 */
    --qd-ai-btn-2: #8A7CFF; /* ink 6.09:1 */
    --qd-ai-btn-ink: #0B0616;
    /* SHELL — constant night chrome in both themes */
    --qd-shell: #080B0F;
    --qd-shell-2: #05070A;
    --qd-shell-ink: #E9EFF7;
    --qd-shell-faint: #7C8A9E;
    --qd-shell-hair: rgba(148, 180, 214, .10);
    --qd-shell-hov: rgba(233, 239, 247, .07);
    --qd-shell-press: rgba(233, 239, 247, .11);
    --qd-shell-well: rgba(233, 239, 247, .06);
    --qd-shell-act: #22D3EE;
    --qd-shell-act-ink: #5FE3F5;
    --qd-shell-act-soft: rgba(34, 211, 238, .12);
    --qd-shell-act-line: rgba(34, 211, 238, .34);
    --qd-shell-ai: #8A7CFF;
    --qd-shell-ai-ink: #A99DFF;
    --qd-shell-ai-soft: rgba(138, 124, 255, .13);
    --qd-shell-ai-line: rgba(138, 124, 255, .34);
    /* kept for page-CSS back-compat; the weave itself is retired in v5 */
    --qd-scan: rgba(148, 180, 214, .085);
    /* ELEVATION — hairline borders do the work; shadow is a whisper */
    --qd-sh-1: 0 1px 2px rgba(0, 0, 0, .40);
    --qd-sh-2: 0 4px 10px rgba(0, 0, 0, .35), 0 16px 32px -16px rgba(0, 0, 0, .50);
    --qd-sh-3: 0 10px 24px rgba(0, 0, 0, .45), 0 32px 64px -24px rgba(0, 0, 0, .60);
    /* TYPE */
    --qd-font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --qd-mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --qd-fs-0: .75rem;
    --qd-fs-1: .8125rem;
    --qd-fs-2: .875rem;
    --qd-fs-3: .9375rem;
    --qd-fs-4: 1.0625rem;
    --qd-fs-5: 1.3125rem;
    --qd-fs-6: 1.625rem;
    --qd-fs-7: 2rem;
    --qd-lh-tight: 1.18;
    --qd-lh-snug: 1.35;
    --qd-lh: 1.55;
    --qd-lh-read: 1.65; /* v5 · was referenced by page CSS but never defined — latent bug closed */
    /* v5.1 · native widgets follow the theme: the calendar/clock glyphs inside
       date & time inputs are drawn by the BROWSER, not by CSS — without this
       they render black-on-dark. One declaration fixes every native control. */
    color-scheme: dark;
    /* GEOMETRY + MOTION — the v5 density spec */
    --qd-r-ctl: 8px;
    --qd-r-panel: 12px;
    --qd-r-lg: 14px;
    --qd-r-pill: 999px;
    --qd-sp-1: 4px;
    --qd-sp-2: 8px;
    --qd-sp-3: 12px;
    --qd-sp-4: 16px;
    --qd-sp-5: 20px;
    --qd-sp-6: 24px;
    --qd-sp-7: 32px;
    --qd-sp-8: 44px;
    --qd-row: 40px;
    --qd-ctl-h: 36px;
    --qd-ctl-h-sm: 28px;
    --qd-ctl-h-lg: 44px;
    --qd-pan-x: 16px;
    --qd-pan-y: 12px;
    --qd-side-w: 240px;
    --qd-top-h: 54px;
    --qd-ease: cubic-bezier(.3, .9, .35, 1);
    --qd-spring: cubic-bezier(.32, 1.5, .55, 1);
    --qd-t: 140ms;
    /* APP CHROME INSETS · v5.2 — the shell (Site.Master) reserves strips of
       the viewport: a taskbar along the bottom, and anything it may add on
       top later. Those strips are invisible to a page's position:fixed
       layer, which is why a page's bottom bar used to slide UNDER the
       taskbar. The shell publishes its reservation here and every fixed
       layer below honours it, so the collision is impossible by
       construction rather than by each page remembering a magic number.
       Default 0: a page opened without the shell behaves exactly as before. */
    --qd-safe-b: 0px;
    --qd-safe-t: 0px;
    --qd-z-sticky: 30;
    /* transient layers cover persistent chrome (Qlynic's ladder is 900–1200) */
    --qd-z-drawer: 1360;
    --qd-z-modal: 1370;
    --qd-z-float: 1385;
    --qd-z-toast: 1390;
}

    /* ── 02 · LIGHT — the same instrument in daylight ─────────────────────────── */
    .qd[data-theme="light"] {
        color-scheme: light;
        --qd-ground: #F5F7FA;
        --qd-ground-2: #ECF0F4;
        --qd-panel: #FFFFFF;
        --qd-panel-2: #F8FAFC;
        --qd-hair: #E5EAF0;
        --qd-hair-2: #D5DCE4;
        --qd-hair-3: #B9C3CF;
        --qd-btn: #12181F;
        --qd-btn-hover: #05090D;
        --qd-btn-press: #000000;
        --qd-on-btn: #FFFFFF; /* 17.85:1 */
        --qd-btn-sh: 0 1px 1px rgba(16, 24, 40, .18);
        /* SECONDARY — white card, border carries the hover signal */
        --qd-btn2: #FFFFFF; /* ink 19.08:1 */
        --qd-btn2-hov: #EEF2F6; /* ink 16.96:1 */
        --qd-btn2-press: #E4EAF0;
        --qd-btn2-line: #D7DEE7;
        --qd-btn2-line-h: #AEB9C6;
        --qd-danger: #C0304C; /* white 5.57:1 */
        --qd-danger-hov: #AD2A44; /* white 6.58:1 */
        --qd-danger-press: #971F38; /* white 8.17:1 */
        --qd-on-danger: #FFFFFF;
        --qd-hov: #F1F4F8;
        --qd-press: #E7ECF2;
        --qd-act: #0E7490; /* white on it 5.36:1 */
        --qd-act-ink: #0B5E75; /* 7.31:1 on panel */
        --qd-act-soft: #E0F4F8;
        --qd-act-line: #A9DCE7;
        --qd-act-glow: 0 0 0 3px rgba(14, 116, 144, .13);
        --qd-ring: 0 0 0 2px var(--qd-panel), 0 0 0 4px #0E7490;
        --qd-ink: #0B1017; /* 19.08:1 */
        --qd-ink-2: #39424F; /* 10.16:1 */
        --qd-ink-3: #5C6675; /*  5.81:1 */
        --qd-faint: #8792A3; /*  3.15:1 — meta only, LAW 5 */
        --qd-good: #0F7A52;
        --qd-good-ink: #0F7A52;
        --qd-good-tint: #E3F5EC;
        --qd-good-line: #B6DFCA;
        --qd-warn: #9A6207;
        --qd-warn-ink: #9A6207;
        --qd-warn-tint: #FCF1DC;
        --qd-warn-line: #E6CFA0;
        --qd-bad: #C0304C;
        --qd-bad-ink: #C0304C;
        --qd-bad-tint: #FBE7EB;
        --qd-bad-line: #EEBCC6;
        --qd-info: #4A5565;
        --qd-info-ink: #4A5565;
        --qd-info-tint: #EEF1F5;
        --qd-info-line: #D5DCE5;
        --qd-chart-1: #0E7490;
        --qd-chart-2: #6D5BD0;
        --qd-chart-3: #0F7A52;
        --qd-chart-4: #9A6207;
        --qd-chart-5: #C0304C;
        --qd-chart-6: #3F6F8A;
        --qd-chart-grid: #E8ECF2;
        --qd-chart-axis: #5C6675;
        --qd-chart-tip-bg: #0B1017;
        --qd-chart-tip-ink: #F4F6F9;
        --qd-ai: #6D5BD0; /* 5.5:1 on white */
        --qd-ai-ink: #4F3FB0; /* 7.9:1 */
        --qd-ai-soft: #EEEAFB;
        --qd-ai-line: #CFC6F2;
        --qd-ai-glow: 0 0 18px -8px rgba(109, 91, 208, .28);
        --qd-ai-btn-1: #6F5AE0; /* white 4.98:1 */
        --qd-ai-btn-2: #5B44D6; /* white 6.48:1 */
        --qd-ai-btn-ink: #FFFFFF;
        --qd-shell: #0B1017;
        --qd-shell-2: #06090E;
        --qd-shell-ink: #EAEEF3;
        --qd-shell-faint: #93A1B3;
        --qd-shell-hair: rgba(234, 238, 243, .10);
        --qd-scan: rgba(11, 16, 23, .06);
        --qd-sh-1: 0 1px 2px rgba(16, 24, 40, .05);
        --qd-sh-2: 0 4px 10px -2px rgba(16, 24, 40, .07), 0 12px 24px -8px rgba(16, 24, 40, .08);
        --qd-sh-3: 0 8px 16px -4px rgba(16, 24, 40, .10), 0 24px 48px -12px rgba(16, 24, 40, .18);
    }

    /* ── 03 · FOUNDATION + TYPE ───────────────────────────────────────────────── */
    .qd, .qd *, .qd *::before, .qd *::after {
        box-sizing: border-box;
    }

.qd {
    background: var(--qd-ground);
    color: var(--qd-ink);
    font: 400 var(--qd-fs-2)/var(--qd-lh) var(--qd-font);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    color-scheme: dark;
}

    .qd[data-theme="light"] {
        color-scheme: light;
    }

    .qd ::selection {
        background: var(--qd-act-soft);
        color: var(--qd-act-ink);
    }

    .qd :focus {
        outline: none;
    }

    /* the ring is a box-shadow — it follows each element's own radius (v4 fix kept) */
    .qd :focus-visible {
        outline: none;
        box-shadow: var(--qd-ring);
    }

    .qd [hidden] {
        display: none !important;
    }

    .qd h1, .qd h2, .qd h3, .qd h4, .qd h5 {
        margin: 0;
        color: var(--qd-ink);
        font-family: var(--qd-font);
        text-wrap: balance;
    }

    .qd h1 {
        font-size: var(--qd-fs-7);
        font-weight: 700;
        line-height: var(--qd-lh-tight);
        letter-spacing: -.022em;
    }

    .qd h2 {
        font-size: var(--qd-fs-6);
        font-weight: 700;
        line-height: var(--qd-lh-tight);
        letter-spacing: -.018em;
    }

    .qd h3 {
        font-size: var(--qd-fs-5);
        font-weight: 650;
        line-height: var(--qd-lh-snug);
        letter-spacing: -.014em;
    }

    .qd h4 {
        font-size: var(--qd-fs-4);
        font-weight: 650;
        line-height: var(--qd-lh-snug);
        letter-spacing: -.01em;
    }

    .qd h5 {
        font-size: var(--qd-fs-3);
        font-weight: 650;
        line-height: var(--qd-lh-snug);
    }

    .qd p {
        margin: 0 0 var(--qd-sp-3);
        color: var(--qd-ink-2);
        text-wrap: pretty;
        max-width: 76ch;
    }

    .qd small {
        font-size: var(--qd-fs-1);
        color: var(--qd-ink-3);
    }

    /* THE LINK — and the one exception that had been silently breaking buttons.
   The button engine's base is `.qd :where(button, .qd-btn)`, and :where()
   contributes ZERO specificity, so that rule scores (0,1,0) while `.qd a`
   scores (0,1,1). A plain `.qd a` therefore OUT-RANKED the engine: every
   <a class="qd-btn"> in the product lost its ink and border to link cyan
   plus an act-line underline — the "is it a button or a link?" shape.
   The exclusion below is wrapped in :where() so the rule keeps its original
   (0,1,1) score for real links and simply STOPS MATCHING anything that has
   already declared itself a control. Nothing else in the cascade moves. */
    .qd a:where(:not(.qd-btn):not(.qd-chip):not(.qd-menu__i):not(.qd-fb__pill):not(.qd-tab)) {
        color: var(--qd-act-ink);
        text-decoration: none;
        border-bottom: 1px solid var(--qd-act-line);
        transition: border-color var(--qd-t) var(--qd-ease);
    }

        .qd a:where(:not(.qd-btn):not(.qd-chip):not(.qd-menu__i):not(.qd-fb__pill):not(.qd-tab)):hover {
            border-bottom-color: var(--qd-act-ink);
        }

    /* an anchor wearing a control class IS that control — inline-flex, no
   underline, and it inherits every engine variable exactly like a button */
    .qd a:where(.qd-btn, .qd-chip, .qd-menu__i, .qd-fb__pill) {
        text-decoration: none;
    }

    .qd hr {
        border: 0;
        border-block-start: 1px solid var(--qd-hair);
        margin: var(--qd-sp-5) 0;
    }

    .qd strong, .qd b {
        font-weight: 600;
        color: var(--qd-ink);
    }

    .qd code, .qd kbd, .qd .qd-mono {
        font-family: var(--qd-mono);
        font-size: .92em;
    }

    .qd code {
        background: var(--qd-ground-2);
        border: 1px solid var(--qd-hair);
        border-radius: 6px;
        padding: .1em .4em;
        color: var(--qd-act-ink);
    }

    .qd kbd {
        background: var(--qd-panel-2);
        border: 1px solid var(--qd-hair-2);
        border-block-end-width: 2px;
        border-radius: 6px;
        padding: .1em .45em;
        font-size: var(--qd-fs-0);
        color: var(--qd-ink-2);
    }

    .qd .qd-num {
        font-family: var(--qd-mono);
        font-weight: 500;
        font-variant-numeric: tabular-nums;
        letter-spacing: -.02em;
    }

    .qd .qd-lede {
        font-size: var(--qd-fs-3);
        line-height: 1.7;
        color: var(--qd-ink-2);
    }

    .qd .qd-eyebrow {
        font: 700 var(--qd-fs-0)/1 var(--qd-mono);
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--qd-faint);
    }

    .qd .qd-brandtext {
        background: var(--qd-filament);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .qd .qd-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .qd .qd-sr {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .qd ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .qd ::-webkit-scrollbar-track {
        background: transparent;
    }

    .qd ::-webkit-scrollbar-thumb {
        background: var(--qd-hair-2);
        border-radius: 99px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }

        .qd ::-webkit-scrollbar-thumb:hover {
            background: var(--qd-hair-3);
            background-clip: padding-box;
        }

.qd {
    scrollbar-width: thin;
    scrollbar-color: var(--qd-hair-2) transparent;
}

    /* ── 04 · BUTTONS — THE ENGINE ────────────────────────────────────────────────
   LAW 10 in action. The base rule is wrapped in :where() so it carries the
   lowest possible specificity, and it paints ONLY from private variables:

       --_bg / --_bg-h / --_bg-a     background: rest / hover / active
       --_bd / --_bd-h               border:     rest / hover
       --_ink / --_ink-h             text:       rest / hover
       --_sh                         resting shadow

   Variants (--primary, --danger, --ai, …) do nothing but assign these
   variables. Hover and active are therefore ALWAYS correct for every
   variant, in both themes — the v4 class of bug (generic :hover repainting
   an accent button black) is structurally impossible here.
   ------------------------------------------------------------------------ */
    .qd :where(button, .qd-btn) {
        --_bg: var(--qd-btn2);
        --_bg-h: var(--qd-btn2-hov);
        --_bg-a: var(--qd-btn2-press);
        --_bd: var(--qd-btn2-line);
        --_bd-h: var(--qd-btn2-line-h);
        --_ink: var(--qd-ink);
        --_ink-h: var(--qd-ink);
        --_sh: none;
        appearance: none;
        -webkit-appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: var(--qd-ctl-h);
        padding: 0 14px;
        border: 1px solid var(--_bd);
        border-radius: var(--qd-r-ctl);
        background: var(--_bg);
        color: var(--_ink);
        box-shadow: var(--_sh);
        font: 550 var(--qd-fs-2)/1 var(--qd-font);
        cursor: pointer;
        user-select: none;
        text-decoration: none;
        white-space: nowrap;
        transition: background var(--qd-t) var(--qd-ease), border-color var(--qd-t) var(--qd-ease), box-shadow var(--qd-t) var(--qd-ease), color var(--qd-t) var(--qd-ease), transform var(--qd-t) var(--qd-ease);
    }

        .qd :where(button, .qd-btn):hover {
            background: var(--_bg-h);
            border-color: var(--_bd-h);
            color: var(--_ink-h);
        }

        .qd :where(button, .qd-btn):active {
            background: var(--_bg-a);
            transform: translateY(.5px);
        }

        .qd :where(button, .qd-btn):disabled,
        .qd :where(.qd-btn)[aria-disabled="true"] {
            opacity: .45;
            cursor: not-allowed;
            transform: none;
        }

    /* PRIMARY — the one submit button (LAW 2) */
    .qd .qd-btn--primary {
        --_bg: var(--qd-btn);
        --_bg-h: var(--qd-btn-hover);
        --_bg-a: var(--qd-btn-press);
        --_bd: var(--qd-btn);
        --_bd-h: var(--qd-btn-hover);
        --_ink: var(--qd-on-btn);
        --_ink-h: var(--qd-on-btn);
        --_sh: var(--qd-btn-sh);
    }

    /* ACCENT — v5 ALIAS of primary. One submit button in the whole product.
   The class survives so no page markup breaks; the cyan submit does not. */
    .qd .qd-btn--accent {
        --_bg: var(--qd-btn);
        --_bg-h: var(--qd-btn-hover);
        --_bg-a: var(--qd-btn-press);
        --_bd: var(--qd-btn);
        --_bd-h: var(--qd-btn-hover);
        --_ink: var(--qd-on-btn);
        --_ink-h: var(--qd-on-btn);
        --_sh: var(--qd-btn-sh);
    }

    /* SOFT — the tinted quiet action (used by toast actions, chips of intent) */
    .qd .qd-btn--soft {
        --_bg: var(--qd-act-soft);
        --_bg-h: var(--qd-act-soft);
        --_bg-a: var(--qd-act-soft);
        --_bd: var(--qd-act-line);
        --_bd-h: var(--qd-act);
        --_ink: var(--qd-act-ink);
        --_ink-h: var(--qd-act-ink);
    }

    /* GHOST — bare text, film on hover */
    .qd .qd-btn--ghost {
        --_bg: transparent;
        --_bg-h: var(--qd-hov);
        --_bg-a: var(--qd-press);
        --_bd: transparent;
        --_bd-h: transparent;
        --_ink: var(--qd-ink-2);
        --_ink-h: var(--qd-ink);
    }

    /* DANGER — the only red fill. Hover darkens; the warning never disappears. */
    .qd .qd-btn--danger {
        --_bg: var(--qd-danger);
        --_bg-h: var(--qd-danger-hov);
        --_bg-a: var(--qd-danger-press);
        --_bd: var(--qd-danger);
        --_bd-h: var(--qd-danger-hov);
        --_ink: var(--qd-on-danger);
        --_ink-h: var(--qd-on-danger);
        --_sh: var(--qd-btn-sh);
    }

    /* AI — LAW 8's sanctioned exception. Gradients ride the same variables. */
    .qd .qd-btn--ai {
        --_bg: linear-gradient(155deg, var(--qd-ai-btn-1), var(--qd-ai-btn-2));
        --_bg-h: linear-gradient(155deg, color-mix(in srgb, var(--qd-ai-btn-1) 90%, #fff), color-mix(in srgb, var(--qd-ai-btn-2) 90%, #fff));
        --_bg-a: linear-gradient(155deg, color-mix(in srgb, var(--qd-ai-btn-1) 92%, #000), color-mix(in srgb, var(--qd-ai-btn-2) 92%, #000));
        --_bd: transparent;
        --_bd-h: transparent;
        --_ink: var(--qd-ai-btn-ink);
        --_ink-h: var(--qd-ai-btn-ink);
        --_sh: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(5, 8, 18, .28), var(--qd-ai-glow);
        font-weight: 650;
    }

        .qd .qd-btn--ai .qd-i {
            transition: transform var(--qd-t) var(--qd-spring);
        }

        .qd .qd-btn--ai:hover .qd-i {
            transform: rotate(-12deg) scale(1.1);
        }

    /* SIZES */
    .qd .qd-btn--sm {
        min-height: var(--qd-ctl-h-sm);
        padding: 0 10px;
        font-size: var(--qd-fs-1);
        border-radius: 7px;
        gap: 6px;
    }

    .qd .qd-btn--lg {
        min-height: var(--qd-ctl-h-lg);
        padding: 0 var(--qd-sp-5);
        font-size: var(--qd-fs-3);
        border-radius: 10px;
    }

    .qd .qd-btn--icon {
        width: var(--qd-ctl-h);
        padding: 0;
    }

        .qd .qd-btn--icon.qd-btn--sm {
            width: var(--qd-ctl-h-sm);
        }

        .qd .qd-btn--icon.qd-btn--lg {
            width: var(--qd-ctl-h-lg);
        }

    .qd .qd-btn--block {
        width: 100%;
    }

    .qd .qd-btn .qd-i, .qd button .qd-i {
        width: 15px;
        height: 15px;
        flex: none;
    }

    /* LOADING — spinner centred (v4 fix kept), rims read from the live ink */
    .qd .qd-btn.is-loading {
        color: transparent !important;
        pointer-events: none;
        position: relative;
    }

        .qd .qd-btn.is-loading::after {
            content: "";
            position: absolute;
            inset: 0;
            margin: auto;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 2px solid color-mix(in srgb, var(--_ink) 28%, transparent);
            border-block-start-color: var(--_ink);
            animation: qd-spin .7s linear infinite;
        }

    /* GROUP */
    .qd .qd-btngroup {
        display: inline-flex;
    }

        .qd .qd-btngroup > * {
            border-radius: 0;
            margin-inline-start: -1px;
        }

        .qd .qd-btngroup > :first-child {
            border-start-start-radius: var(--qd-r-ctl);
            border-end-start-radius: var(--qd-r-ctl);
            margin-inline-start: 0;
        }

        .qd .qd-btngroup > :last-child {
            border-start-end-radius: var(--qd-r-ctl);
            border-end-end-radius: var(--qd-r-ctl);
        }

        .qd .qd-btngroup > :hover {
            position: relative;
            z-index: 1;
        }

    /* ── 05 · FORMS — one input skin ──────────────────────────────────────────────
   :where() keeps the base at (0,1,1) so every modifier wins by design.
   The same skin is worn by native selects, the smart select, the search
   field, the tokenput and the textarea — one model, everywhere.
   ------------------------------------------------------------------------ */
    .qd label {
        display: block;
        font: 600 var(--qd-fs-1)/1.3 var(--qd-font);
        color: var(--qd-ink-2);
        margin: 0 0 5px;
    }

        .qd label .qd-req {
            color: var(--qd-bad-ink);
            margin-inline-start: 2px;
        }

    .qd input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])),
    .qd select, .qd textarea {
        appearance: none;
        -webkit-appearance: none;
        width: 100%;
        min-height: var(--qd-ctl-h);
        padding: 0 var(--qd-sp-3);
        border: 1px solid var(--qd-btn2-line);
        border-radius: var(--qd-r-ctl);
        background: var(--qd-btn2);
        color: var(--qd-ink);
        font: 500 var(--qd-fs-2)/1.4 var(--qd-font);
        transition: border-color var(--qd-t) var(--qd-ease), box-shadow var(--qd-t) var(--qd-ease), background var(--qd-t) var(--qd-ease);
    }

    .qd input[type="search"]::-webkit-search-decoration,
    .qd input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
    }

    .qd textarea {
        min-height: 96px;
        padding-block: 9px;
        resize: vertical;
        line-height: var(--qd-lh);
        max-height: 60svh;
    }

        .qd input::placeholder, .qd textarea::placeholder {
            color: var(--qd-faint);
            font-weight: 400;
        }

        .qd input:hover, .qd select:hover, .qd textarea:hover {
            border-color: var(--qd-btn2-line-h);
        }

        .qd input:focus-visible, .qd select:focus-visible, .qd textarea:focus-visible {
            border-color: var(--qd-act);
            box-shadow: var(--qd-act-glow);
            background: var(--qd-panel);
        }

        .qd input:disabled, .qd select:disabled, .qd textarea:disabled {
            opacity: .5;
            cursor: not-allowed;
        }

    .qd input[readonly] {
        background: var(--qd-ground-2);
    }

    .qd [aria-invalid="true"] {
        border-color: var(--qd-bad) !important;
    }

        .qd [aria-invalid="true"]:focus-visible {
            box-shadow: 0 0 0 3px var(--qd-bad-tint) !important;
        }

    .qd input[type="date"], .qd input[type="time"], .qd input[type="datetime-local"] {
        font-family: var(--qd-mono);
        font-size: var(--qd-fs-1);
    }

        .qd input[type="date"]::-webkit-calendar-picker-indicator {
            opacity: .55;
            cursor: pointer;
            filter: var(--qd-cal, invert(1));
        }

    .qd[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator {
        filter: none;
    }

    .qd .qd-field {
        margin-block-end: var(--qd-sp-4);
    }

    .qd .qd-field__help {
        margin-block-start: 5px;
        font-size: var(--qd-fs-1);
        color: var(--qd-ink-3);
    }

    .qd .qd-field__err {
        margin-block-start: 5px;
        font: 500 var(--qd-fs-1)/1.4 var(--qd-font);
        color: var(--qd-bad-ink);
    }

    .qd .qd-field__count {
        float: inline-end;
        font: 500 var(--qd-fs-0)/1 var(--qd-mono);
        color: var(--qd-faint);
    }

    /* native select chevron */
    .qd .qd-selwrap {
        position: relative;
    }

        .qd .qd-selwrap > select {
            padding-inline-end: 34px;
            cursor: pointer;
        }

        .qd .qd-selwrap::after {
            content: "";
            position: absolute;
            inset-inline-end: 13px;
            inset-block-start: 50%;
            width: 8px;
            height: 8px;
            border-inline-end: 1.75px solid var(--qd-ink-3);
            border-block-end: 1.75px solid var(--qd-ink-3);
            transform: translateY(-70%) rotate(45deg);
            pointer-events: none;
        }

    /* prefix / suffix affixes */
    .qd .qd-affix {
        position: relative;
    }

    .qd .qd-affix__p {
        position: absolute;
        inset-inline-start: 12px;
        inset-block-start: 50%;
        transform: translateY(-50%);
        font-family: var(--qd-mono);
        font-size: var(--qd-fs-1);
        color: var(--qd-ink-3);
        pointer-events: none;
        z-index: 1;
    }

    .qd .qd-affix__s {
        position: absolute;
        inset-inline-end: 12px;
        inset-block-start: 50%;
        transform: translateY(-50%);
        font-family: var(--qd-mono);
        font-size: var(--qd-fs-1);
        color: var(--qd-ink-3);
        pointer-events: none;
        z-index: 1;
    }

    .qd .qd-affix:has(.qd-affix__s) input {
        padding-inline-end: 42px;
    }

    .qd .qd-affix > input {
        padding-inline-start: 28px;
    }

    /* search — same skin as every input (v5: the pill is retired; one radius) */
    .qd .qd-search {
        position: relative;
    }

        .qd .qd-search > .qd-i {
            position: absolute;
            inset-inline-start: 12px;
            inset-block-start: 50%;
            transform: translateY(-50%);
            width: 14px;
            height: 14px;
            color: var(--qd-faint);
            pointer-events: none;
            z-index: 1;
        }

        .qd .qd-search > input {
            padding-inline-start: 34px;
        }

            .qd .qd-search > input:focus-visible + .qd-i, .qd .qd-search:focus-within > .qd-i {
                color: var(--qd-act);
            }

    /* v5.1 · DATE FIELD — LitePicker is the ONLY date control (no native
   type=date; the browser's black indicator is unfixable by CSS alone).
   The wrapper mirrors qd-search: same skin, our glyph in OUR ink.
   litepicker.css + litepicker.qlynic.js style and drive the popover. */
    .qd .qd-date {
        position: relative;
    }

        .qd .qd-date > input {
            padding-inline-end: 38px;
            cursor: pointer;
        }

        .qd .qd-date > .qd-i, .qd .qd-date > svg {
            position: absolute;
            inset-block-start: 50%;
            inset-inline-end: 12px;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            color: var(--qd-faint);
            pointer-events: none;
            transition: color var(--qd-t) var(--qd-ease);
        }

        .qd .qd-date:focus-within > .qd-i, .qd .qd-date:focus-within > svg {
            color: var(--qd-act-ink);
        }

    /* checkbox + radio — one model, 16px, act fill when on */
    .qd input[type="checkbox"], .qd input[type="radio"] {
        appearance: none;
        -webkit-appearance: none;
        position: relative; /* v5.1 · glyph centres via inset:0 + margin:auto —
                           grid place-content drifted a sub-pixel on some DPRs */
        width: 16px;
        height: 16px;
        margin: 0;
        flex: none;
        border: 1.5px solid var(--qd-hair-3);
        background: var(--qd-btn2);
        cursor: pointer;
        vertical-align: -3px;
        transition: border-color var(--qd-t) var(--qd-ease), background var(--qd-t) var(--qd-ease);
    }

    .qd input[type="checkbox"] {
        border-radius: 4px;
    }

    .qd input[type="radio"] {
        border-radius: 50%;
    }

        .qd input[type="checkbox"]:hover, .qd input[type="radio"]:hover {
            border-color: var(--qd-act);
        }

    .qd input[type="checkbox"]::before {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 9px;
        height: 9px;
        transform: scale(0);
        transition: transform 120ms var(--qd-spring);
        background: var(--qd-on-btn);
        clip-path: polygon(14% 46%, 0 62%, 40% 100%, 100% 18%, 84% 4%, 38% 70%);
    }

    .qd input[type="radio"]::before {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 6px; /* v5.1 · even air on every side of a 13px core, at any DPR */
        height: 6px;
        border-radius: 50%;
        background: var(--qd-on-btn);
        transform: scale(0);
        transition: transform 120ms var(--qd-spring);
    }

    .qd input[type="checkbox"]:checked, .qd input[type="radio"]:checked,
    .qd input[type="checkbox"]:indeterminate {
        background: var(--qd-act);
        border-color: var(--qd-act);
    }

        .qd input[type="checkbox"]:indeterminate::before {
            transform: scale(1);
            clip-path: polygon(10% 42%, 90% 42%, 90% 58%, 10% 58%);
        }

        .qd input[type="checkbox"]:checked::before, .qd input[type="radio"]:checked::before {
            transform: scale(1);
        }

    .qd input[type="checkbox"]:focus-visible, .qd input[type="radio"]:focus-visible {
        box-shadow: var(--qd-ring);
    }

    .qd .qd-check {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font: 500 var(--qd-fs-2)/1.3 var(--qd-font);
        color: var(--qd-ink-2);
        cursor: pointer;
        margin: 0;
    }

    /* switch — one model. 36×20 track, no glow; state speaks, light stays quiet */
    .qd .qd-switch {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        cursor: pointer;
        font: 500 var(--qd-fs-2)/1.3 var(--qd-font);
        color: var(--qd-ink-2);
        margin: 0;
    }

        .qd .qd-switch input {
            position: absolute;
            opacity: 0;
            width: 36px;
            height: 20px;
            margin: 0;
            cursor: pointer;
        }

        .qd .qd-switch i {
            width: 36px;
            height: 20px;
            border-radius: 99px;
            flex: none;
            position: relative;
            background: var(--qd-ground-2);
            border: 1px solid var(--qd-hair-2);
            transition: background var(--qd-t) var(--qd-ease), border-color var(--qd-t) var(--qd-ease), box-shadow var(--qd-t) var(--qd-ease);
        }

            .qd .qd-switch i::before {
                content: "";
                position: absolute;
                inset-block-start: 2px;
                inset-inline-start: 2px;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background: var(--qd-ink-3);
                box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
                transition: transform 160ms var(--qd-spring), background var(--qd-t) var(--qd-ease);
            }

        .qd .qd-switch input:checked + i {
            background: var(--qd-act);
            border-color: var(--qd-act);
        }

            .qd .qd-switch input:checked + i::before {
                transform: translateX(16px);
                background: var(--qd-on-btn);
            }

    .qd[data-theme="light"] .qd-switch input:checked + i::before {
        background: #FFFFFF;
    }

    .qd .qd-switch input:focus-visible + i {
        box-shadow: var(--qd-ring);
    }

    .qd .qd-switch input:disabled + i {
        opacity: .45;
    }

    /* segmented — one model */
    .qd .qd-seg {
        display: inline-flex;
        padding: 2px;
        background: var(--qd-ground-2);
        border: 1px solid var(--qd-hair);
        border-radius: 9px;
        gap: 2px;
    }

        .qd .qd-seg > button {
            --_bg: transparent;
            --_bg-h: var(--qd-hov);
            --_bg-a: var(--qd-press);
            --_bd: transparent;
            --_bd-h: transparent;
            --_ink: var(--qd-ink-3);
            --_ink-h: var(--qd-ink);
            min-height: 26px;
            padding: 0 11px;
            border-radius: 7px;
            font: 600 var(--qd-fs-1)/1 var(--qd-font);
        }

        .qd .qd-seg > [aria-pressed="true"] {
            --_bg: var(--qd-panel);
            --_bg-h: var(--qd-panel);
            --_bg-a: var(--qd-panel);
            --_ink: var(--qd-act-ink);
            --_ink-h: var(--qd-act-ink);
            box-shadow: var(--qd-sh-1);
        }

    /* drop zone */
    .qd .qd-drop {
        display: grid;
        place-items: center;
        gap: 6px;
        padding: var(--qd-sp-6) var(--qd-sp-5);
        text-align: center;
        border: 1.5px dashed var(--qd-hair-2);
        border-radius: var(--qd-r-panel);
        background: var(--qd-panel-2);
        color: var(--qd-ink-3);
        cursor: pointer;
        transition: border-color var(--qd-t) var(--qd-ease), background var(--qd-t) var(--qd-ease);
    }

        .qd .qd-drop:hover, .qd .qd-drop.is-over {
            border-color: var(--qd-act);
            background: var(--qd-act-soft);
            color: var(--qd-act-ink);
        }

    /* ── 06 · THE FILAMENT · PANELS ───────────────────────────────────────────────
   The signature, and in v5 the ONLY jewellery: a 1px hairline of the Qlynic
   logo gradient sealing the top of every panel, masked at both ends so it
   reads as a seam of light. The corner brackets and the helix weave are
   retired — a vault door needs a seam, not stickers.
   ------------------------------------------------------------------------ */
    .qd .qd-panel, .qd .qd-kpi--card, .qd .qd-tablewrap {
        position: relative;
        background: var(--qd-panel);
        border: 1px solid var(--qd-hair);
        border-radius: var(--qd-r-panel);
        box-shadow: var(--qd-sh-1);
    }

        .qd .qd-panel::before, .qd .qd-kpi--card::before, .qd .qd-tablewrap::before {
            content: "";
            position: absolute;
            inset-block-start: -1px;
            inset-inline: 10px;
            height: 1px;
            border-radius: 1px;
            pointer-events: none;
            background: var(--qd-filament);
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            opacity: .85;
        }

    .qd .qd-panel--bare::before {
        display: none;
    }

    /* v5.1 · legacy alias — kpis are bare by default now, the class stays valid */
    .qd .qd-kpi--bare {
        background: transparent;
    }

    /* live panels: the filament travels */
    .qd .qd-panel--live::before {
        background: var(--qd-filament);
        background-size: 240% 100%;
        animation: qd-filament 5.5s var(--qd-ease) infinite;
    }

@keyframes qd-filament {
    0%, 100% {
        background-position: 0% 0;
    }

    50% {
        background-position: 100% 0;
    }
}

/* v5 · vault brackets retired — the class is a harmless alias of qd-panel */
.qd .qd-panel--vault::after {
    content: none;
}

.qd .qd-panel__hd {
    display: flex;
    align-items: center;
    gap: var(--qd-sp-3);
    padding: var(--qd-pan-y) var(--qd-pan-x);
    border-block-end: 1px solid var(--qd-hair);
}

.qd .qd-panel__tl {
    font: 650 var(--qd-fs-3)/1.3 var(--qd-font);
    letter-spacing: -.012em;
    color: var(--qd-ink);
}

.qd .qd-panel__sub {
    font-size: var(--qd-fs-1);
    color: var(--qd-ink-3);
    margin-block-start: 1px;
}

.qd .qd-panel__tools {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--qd-sp-2);
    flex-wrap: wrap;
}

.qd .qd-panel__bd {
    padding: var(--qd-pan-x);
}

.qd .qd-panel__bd--flush {
    padding: 0;
}

.qd .qd-panel__ft {
    padding: 10px var(--qd-pan-x);
    border-block-start: 1px solid var(--qd-hair);
    display: flex;
    align-items: center;
    gap: var(--qd-sp-3);
    background: var(--qd-panel-2);
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
}

/* v5.1 · THE STAT DOCTRINE — a number is typography, not furniture.
   qd-kpi is now a FLAT cell: no background, no border, no shadow, no seam.
   Group stats with .qd-statrow (hairline-divided, straight on the ground —
   the Stripe/Apple read) or the boxed .qd-strip when they must share one
   panel. A lone stat that truly needs a card takes qd-kpi--card. */
.qd .qd-kpi {
    display: grid;
    gap: 4px;
    align-content: start;
    padding: 4px 2px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.qd .qd-kpi--card {
    padding: 14px var(--qd-pan-x);
    border-radius: var(--qd-r-panel);
}

/* a stat can be a filter, like Stripe's Succeeded / Refunded row */
.qd .qd-kpi.is-click, .qd .qd-kpi[role="button"] {
    cursor: pointer;
    border-radius: var(--qd-r-ctl);
    padding-inline: 10px;
    transition: background var(--qd-t) var(--qd-ease);
}

    .qd .qd-kpi.is-click:hover, .qd .qd-kpi[role="button"]:hover {
        background: var(--qd-hov);
    }

.qd .qd-kpi.is-on {
    box-shadow: inset 0 -2px 0 var(--qd-act);
    border-radius: var(--qd-r-ctl) var(--qd-r-ctl) 0 0;
}

/* THE STATROW — one flat rail of numbers, divided by hairlines.
   The canonical stats presentation from v5.1 on. */
.qd .qd-statrow {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    row-gap: 14px;
}

    .qd .qd-statrow > .qd-kpi {
        flex: 1 1 0;
        min-width: 128px;
        padding: 2px 18px;
    }

        .qd .qd-statrow > .qd-kpi:first-child {
            padding-inline-start: 2px;
        }

        .qd .qd-statrow > .qd-kpi + .qd-kpi {
            border-inline-start: 1px solid var(--qd-hair);
        }

.qd .qd-kpi__l {
    font: 600 var(--qd-fs-0)/1.3 var(--qd-font);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--qd-ink-3);
}

.qd .qd-kpi__v {
    font: 600 var(--qd-fs-6)/1.05 var(--qd-mono);
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--qd-ink);
}

/* ── WORD-VALUED STATS (v5.4) ────────────────────────────────────────────
   qd-kpi was built for NUMBERS: the value is mono, tabular and short, and
   the cell's flex basis of 0 works because nothing inside it is wide. Feed
   it a phrase — "General consultation", "Solo wins" — and the value, a grid
   item with the default min-width:auto, refuses to shrink below its own
   min-content and shoves into the neighbouring cell across the hairline.
   `qd-kpi--word` is the opt-in for text values: the floor is released, the
   phrase wraps instead of pushing, and the type drops to the display face
   at a size words actually read at.
   STRICTLY OPT-IN — no existing numeric statrow changes by a single pixel. */
.qd .qd-kpi--word,
.qd .qd-kpi--word > * {
    min-width: 0;
}

    .qd .qd-kpi--word .qd-kpi__v {
        font: 700 var(--qd-fs-3)/1.25 var(--qd-font);
        letter-spacing: -.01em;
        font-variant-numeric: normal;
        overflow-wrap: anywhere;
    }

.qd .qd-kpi--hero .qd-kpi__v {
    background: var(--qd-filament);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.qd .qd-kpi__d {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: 600 var(--qd-fs-1)/1 var(--qd-font);
}

    .qd .qd-kpi__d.is-up {
        color: var(--qd-good-ink);
    }

    .qd .qd-kpi__d.is-down {
        color: var(--qd-bad-ink);
    }

    .qd .qd-kpi__d.is-flat {
        color: var(--qd-ink-3);
    }

/* ── 07 · TABLE — the density flagship ────────────────────────────────────────
   40px rows (v4: 44). Hover uses the --qd-hov film, not panel-2, so a hover
   is actually visible on a white panel in light mode. [data-density=
   "compact"] drops to 32px for archives and logs.
   ------------------------------------------------------------------------ */
.qd .qd-tablewrap {
    overflow: auto;
}

.qd table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--qd-fs-2);
}

.qd thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: var(--qd-panel-2);
    font: 600 var(--qd-fs-0)/1.3 var(--qd-font);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--qd-ink-3);
    text-align: start;
    padding: 8px var(--qd-sp-3);
    border-block-end: 1px solid var(--qd-hair-2);
    white-space: nowrap;
}

.qd th.is-sort {
    cursor: pointer;
    user-select: none;
}

    .qd th.is-sort:hover {
        color: var(--qd-act-ink);
    }

    .qd th.is-sort[aria-sort]::after {
        content: "";
        display: inline-block;
        margin-inline-start: 6px;
        width: 6px;
        height: 6px;
        border-inline-end: 1.75px solid currentColor;
        border-block-end: 1.75px solid currentColor;
        transform: rotate(45deg) translateY(-2px);
    }

    .qd th.is-sort[aria-sort="ascending"]::after {
        transform: rotate(-135deg) translateY(-1px);
    }

.qd tbody td {
    height: var(--qd-row);
    padding: 4px var(--qd-sp-3);
    border-block-end: 1px solid var(--qd-hair);
    color: var(--qd-ink-2);
    vertical-align: middle;
}

.qd tbody tr:last-child td {
    border-block-end: 0;
}

.qd tbody tr {
    transition: background var(--qd-t) var(--qd-ease);
}

    .qd tbody tr:hover {
        background: var(--qd-hov);
    }

    .qd tbody tr.is-selected {
        background: var(--qd-act-soft);
        box-shadow: inset 2px 0 0 var(--qd-act);
    }

.qd td.qd-td-num, .qd th.qd-td-num {
    text-align: end;
    font-family: var(--qd-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.qd td.qd-td-main {
    color: var(--qd-ink);
    font-weight: 600;
}

.qd[data-density="compact"] {
    --qd-row: 32px;
}

    .qd[data-density="compact"] tbody td {
        padding-block: 2px;
        font-size: var(--qd-fs-1);
    }

    .qd[data-density="compact"] .qd-li {
        min-height: 38px;
    }

.qd .qd-pager {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
}

    .qd .qd-pager > button {
        --_bg: transparent;
        --_bg-h: var(--qd-hov);
        --_bg-a: var(--qd-press);
        --_bd: transparent;
        --_bd-h: transparent;
        --_ink: var(--qd-ink-3);
        --_ink-h: var(--qd-ink);
        min-width: 30px;
        min-height: 30px;
        padding: 0 8px;
        border-radius: 8px;
        font: 600 var(--qd-fs-1)/1 var(--qd-mono);
    }

        .qd .qd-pager > button[aria-current="page"] {
            --_bg: var(--qd-act-soft);
            --_bg-h: var(--qd-act-soft);
            --_bd: var(--qd-act-line);
            --_bd-h: var(--qd-act-line);
            --_ink: var(--qd-act-ink);
            --_ink-h: var(--qd-act-ink);
        }

.qd .qd-pager__meta {
    margin-inline-start: auto;
    font: 500 var(--qd-fs-1)/1 var(--qd-font);
    color: var(--qd-ink-3);
}

/* ── 08 · BADGES · TAGS · AVATARS ─────────────────────────────────────────── */
.qd .qd-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 21px;
    padding: 0 9px;
    border-radius: var(--qd-r-pill);
    border: 1px solid var(--qd-info-line);
    background: var(--qd-info-tint);
    color: var(--qd-info-ink);
    font: 600 var(--qd-fs-0)/1 var(--qd-font);
    white-space: nowrap;
}

    .qd .qd-badge::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
    }

.qd .qd-badge--good {
    background: var(--qd-good-tint);
    border-color: var(--qd-good-line);
    color: var(--qd-good-ink);
}

.qd .qd-badge--warn {
    background: var(--qd-warn-tint);
    border-color: var(--qd-warn-line);
    color: var(--qd-warn-ink);
}

.qd .qd-badge--bad {
    background: var(--qd-bad-tint);
    border-color: var(--qd-bad-line);
    color: var(--qd-bad-ink);
}

.qd .qd-badge--accent {
    background: var(--qd-act-soft);
    border-color: var(--qd-act-line);
    color: var(--qd-act-ink);
}

.qd .qd-badge--live::before {
    animation: qd-pulse 1.6s var(--qd-ease) infinite;
}

.qd .qd-badge--plain::before {
    display: none;
}

@keyframes qd-pulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 currentColor;
    }

    60% {
        opacity: .5;
        box-shadow: 0 0 0 4px transparent;
    }
}

/* domain aliases — booking / billing / identity states map to semantics */
.qd .qd-badge.is-booked, .qd .qd-badge.is-confirmed, .qd .qd-badge.is-active, .qd .qd-badge.is-paid,
.qd .qd-badge.is-completed, .qd .qd-badge.is-arrived, .qd .qd-badge.is-verified, .qd .qd-badge.is-approved {
    background: var(--qd-good-tint);
    border-color: var(--qd-good-line);
    color: var(--qd-good-ink);
}

.qd .qd-badge.is-pending, .qd .qd-badge.is-sent, .qd .qd-badge.is-waiting, .qd .qd-badge.is-draft,
.qd .qd-badge.is-trial, .qd .qd-badge.is-review, .qd .qd-badge.is-partial {
    background: var(--qd-warn-tint);
    border-color: var(--qd-warn-line);
    color: var(--qd-warn-ink);
}

.qd .qd-badge.is-cancelled, .qd .qd-badge.is-rejected, .qd .qd-badge.is-noshow, .qd .qd-badge.is-overdue,
.qd .qd-badge.is-expired, .qd .qd-badge.is-failed, .qd .qd-badge.is-declined, .qd .qd-badge.is-denied {
    background: var(--qd-bad-tint);
    border-color: var(--qd-bad-line);
    color: var(--qd-bad-ink);
}

.qd .qd-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 21px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--qd-ground-2);
    border: 1px solid var(--qd-hair);
    color: var(--qd-ink-2);
    font: 500 var(--qd-fs-0)/1 var(--qd-font);
}

.qd .qd-avatar {
    display: inline-grid;
    place-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--qd-act-soft);
    color: var(--qd-act-ink);
    border: 1px solid var(--qd-act-line);
    font: 700 var(--qd-fs-0)/1 var(--qd-font);
    overflow: hidden;
    flex: none;
}

    .qd .qd-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.qd .qd-avatar--sm {
    width: 24px;
    height: 24px;
    font-size: 10px;
}

.qd .qd-avatar--lg {
    width: 42px;
    height: 42px;
    font-size: var(--qd-fs-2);
}

.qd .qd-avstack {
    display: inline-flex;
}

    .qd .qd-avstack .qd-avatar {
        margin-inline-start: -8px;
        box-shadow: 0 0 0 2px var(--qd-panel);
    }

        .qd .qd-avstack .qd-avatar:first-child {
            margin-inline-start: 0;
        }

/* ── 09 · FLOATING LAYER (LAW 4 — positioned by the JS) ───────────────────── */
.qd .qd-float {
    position: fixed;
    z-index: var(--qd-z-float);
    margin: 0;
    opacity: 0;
    transform: scale(.97);
    pointer-events: none;
    transition: opacity 120ms var(--qd-ease), transform 120ms var(--qd-ease);
}

    .qd .qd-float.is-open {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .qd .qd-float[data-side="top"] {
        transform-origin: bottom center;
    }

    .qd .qd-float[data-side="bottom"] {
        transform-origin: top center;
    }

    .qd .qd-float[data-side="left"] {
        transform-origin: right center;
    }

    .qd .qd-float[data-side="right"] {
        transform-origin: left center;
    }

.qd .qd-tip {
    max-width: 260px;
    padding: 6px 9px;
    border-radius: 8px;
    background: var(--qd-chart-tip-bg);
    color: var(--qd-chart-tip-ink);
    font: 500 var(--qd-fs-0)/1.4 var(--qd-font);
    text-wrap: pretty;
    box-shadow: var(--qd-sh-2);
    border: 1px solid var(--qd-hair);
}

.qd .qd-tip__arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
    transform: rotate(45deg);
    border: 1px solid var(--qd-hair);
}

.qd .qd-tip__k {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 1px 5px;
    border: 1px solid rgba(148, 180, 214, .3);
    border-radius: 5px;
    font: 600 10px/1.3 var(--qd-mono);
    opacity: .85;
}

.qd .qd-float[data-side="top"] .qd-tip__arrow {
    border-block-start: 0;
    border-inline-start: 0;
}

.qd .qd-float[data-side="bottom"] .qd-tip__arrow {
    border-block-end: 0;
    border-inline-end: 0;
}

.qd .qd-float[data-side="left"] .qd-tip__arrow {
    border-block-end: 0;
    border-inline-start: 0;
}

.qd .qd-float[data-side="right"] .qd-tip__arrow {
    border-block-start: 0;
    border-inline-end: 0;
}

.qd .qd-menu {
    min-width: 196px;
    max-height: min(60svh, 420px);
    overflow: auto;
    padding: 4px;
    background: var(--qd-panel);
    border: 1px solid var(--qd-hair-2);
    border-radius: 10px;
    box-shadow: var(--qd-sh-3);
}

    .qd .qd-menu::before {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline: 12px;
        height: 1px;
        background: var(--qd-filament);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
    }

.qd .qd-menu__i {
    --_bg: transparent;
    --_bg-h: var(--qd-hov);
    --_bg-a: var(--qd-press);
    --_bd: transparent;
    --_bd-h: transparent;
    --_ink: var(--qd-ink-2);
    --_ink-h: var(--qd-ink);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    width: 100%;
    min-height: 32px;
    padding: 0 9px;
    border: 0;
    border-radius: 7px;
    text-align: start;
    font: 500 var(--qd-fs-2)/1 var(--qd-font);
}

    .qd .qd-menu__i.is-active {
        background: var(--qd-hov);
        color: var(--qd-ink);
    }

    .qd .qd-menu__i.is-danger {
        --_ink: var(--qd-bad-ink);
        --_ink-h: var(--qd-bad-ink);
        --_bg-h: var(--qd-bad-tint);
    }

    .qd .qd-menu__i[aria-selected="true"] {
        background: var(--qd-act-soft);
        color: var(--qd-act-ink);
    }

.qd .qd-menu__lbl {
    padding: 7px 9px 3px;
    font: 700 var(--qd-fs-0)/1 var(--qd-mono);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--qd-faint);
}

.qd .qd-menu__k {
    margin-inline-start: auto;
    font-family: var(--qd-mono);
    font-size: var(--qd-fs-0);
    color: var(--qd-faint);
}

/* smart select — wears the input skin, not the button skin */
.qd .qd-sel {
    position: relative;
}

.qd .qd-sel__btn {
    --_bg: var(--qd-btn2);
    --_bg-h: var(--qd-btn2);
    --_bg-a: var(--qd-btn2);
    --_bd: var(--qd-btn2-line);
    --_bd-h: var(--qd-btn2-line-h);
    --_ink: var(--qd-ink);
    --_ink-h: var(--qd-ink);
    width: 100%;
    min-height: var(--qd-ctl-h);
    padding: 0 34px 0 var(--qd-sp-3);
    justify-content: flex-start;
    font-weight: 500;
    border-radius: var(--qd-r-ctl);
}

    .qd .qd-sel__btn::after {
        content: "";
        position: absolute;
        inset-inline-end: 13px;
        inset-block-start: 50%;
        width: 8px;
        height: 8px;
        border-inline-end: 1.75px solid var(--qd-ink-3);
        border-block-end: 1.75px solid var(--qd-ink-3);
        transform: translateY(-70%) rotate(45deg);
        transition: transform var(--qd-t) var(--qd-ease);
    }

    .qd .qd-sel__btn[aria-expanded="true"] {
        border-color: var(--qd-act);
        box-shadow: var(--qd-act-glow);
    }

        .qd .qd-sel__btn[aria-expanded="true"]::after {
            transform: translateY(-25%) rotate(-135deg);
        }

.qd .qd-sel__ph {
    color: var(--qd-faint);
    font-weight: 400;
}

/* ── 10 · LOADERS — the trace, and the decrypt ────────────────────────────── */
.qd .qd-trace {
    display: inline-block;
    width: 132px;
    height: 30px;
    color: var(--qd-act);
}

    .qd .qd-trace svg {
        width: 100%;
        height: 100%;
        overflow: visible;
    }

.qd .qd-trace__ln {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 92 260;
    stroke-dashoffset: 352;
    animation: qd-trace 1.9s var(--qd-ease) infinite;
}

.qd .qd-trace__gh {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    opacity: .12;
}

.qd .qd-trace--lg {
    width: 220px;
    height: 46px;
}

@keyframes qd-trace {
    0% {
        stroke-dashoffset: 352;
    }

    55%, 100% {
        stroke-dashoffset: 0;
    }
}

.qd .qd-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 20px;
    color: var(--qd-act);
}

    .qd .qd-bars i {
        width: 3px;
        height: 100%;
        border-radius: 2px;
        background: currentColor;
        transform-origin: bottom;
        animation: qd-bar 1s var(--qd-ease) infinite;
    }

        .qd .qd-bars i:nth-child(2) {
            animation-delay: .12s;
        }

        .qd .qd-bars i:nth-child(3) {
            animation-delay: .24s;
        }

        .qd .qd-bars i:nth-child(4) {
            animation-delay: .36s;
        }

        .qd .qd-bars i:nth-child(5) {
            animation-delay: .48s;
        }

@keyframes qd-bar {
    0%, 100% {
        transform: scaleY(.28);
        opacity: .45;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.qd .qd-spin {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--qd-act-line);
    border-block-start-color: var(--qd-act);
    animation: qd-spin .7s linear infinite;
    flex: none;
}

.qd .qd-orbit {
    width: 20px;
    height: 20px;
    position: relative;
    color: var(--qd-act);
    flex: none;
}

    .qd .qd-orbit::before, .qd .qd-orbit::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2px solid transparent;
    }

    .qd .qd-orbit::before {
        border-block-start-color: currentColor;
        animation: qd-spin .8s linear infinite;
    }

    .qd .qd-orbit::after {
        inset: 5px;
        border-block-end-color: currentColor;
        opacity: .55;
        animation: qd-spin .6s linear reverse infinite;
    }

.qd .qd-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    color: var(--qd-act);
}

    .qd .qd-dots i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
        animation: qd-dot 1.05s var(--qd-ease) infinite;
    }

        .qd .qd-dots i:nth-child(2) {
            animation-delay: .15s;
        }

        .qd .qd-dots i:nth-child(3) {
            animation-delay: .3s;
        }

@keyframes qd-dot {
    0%, 100% {
        opacity: .25;
        transform: translateY(0) scale(.85);
    }

    45% {
        opacity: 1;
        transform: translateY(-3px) scale(1);
    }
}

.qd .qd-decrypt {
    font-family: var(--qd-mono);
    font-variant-numeric: tabular-nums;
}

    .qd .qd-decrypt.is-scrambling {
        color: var(--qd-act);
    }

.qd .qd-meter {
    height: 6px;
    border-radius: 99px;
    background: var(--qd-ground-2);
    border: 1px solid var(--qd-hair);
    overflow: hidden;
    position: relative;
}

    .qd .qd-meter > i {
        display: block;
        height: 100%;
        width: var(--v, 40%);
        border-radius: inherit;
        background: var(--qd-filament);
        transition: width 400ms var(--qd-ease);
    }

.qd .qd-meter--warn > i {
    background: var(--qd-warn);
}

.qd .qd-meter--bad > i {
    background: var(--qd-bad);
}

.qd .qd-meter--good > i {
    background: var(--qd-good);
}

.qd .qd-meter--indet > i {
    width: 38%;
    animation: qd-indet 1.25s var(--qd-ease) infinite;
}

@keyframes qd-indet {
    0% {
        transform: translateX(-110%);
    }

    100% {
        transform: translateX(300%);
    }
}

.qd .qd-meter__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-block-end: 6px;
    font: 500 var(--qd-fs-1)/1 var(--qd-font);
    color: var(--qd-ink-3);
}

    .qd .qd-meter__row b {
        font-family: var(--qd-mono);
        color: var(--qd-ink);
    }

.qd .qd-meter__tick {
    position: absolute;
    inset-block: -2px;
    inset-inline-start: var(--p, 50%);
    width: 2px;
    border-radius: 2px;
    background: var(--qd-ink-3);
    opacity: .7;
}

.qd .qd-topbar {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 2px;
    z-index: 999;
    pointer-events: none;
}

    .qd .qd-topbar > i {
        display: block;
        height: 100%;
        width: 0;
        background: var(--qd-filament);
        transition: width 220ms var(--qd-ease), opacity 260ms var(--qd-ease);
    }

.qd .qd-skel {
    position: relative;
    overflow: hidden;
    background: var(--qd-ground-2);
    border-radius: 7px;
    min-height: 12px;
}

    .qd .qd-skel::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, var(--qd-hair), transparent);
        animation: qd-shimmer 1.4s var(--qd-ease) infinite;
    }

.qd .qd-skel--text {
    height: 12px;
    margin-block-end: 8px;
}

@keyframes qd-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes qd-shimmer {
    to {
        transform: translateX(100%);
    }
}

.qd .qd-empty {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: var(--qd-sp-7) var(--qd-sp-5);
    text-align: center;
}

.qd .qd-empty__ic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-content: center;
    background: var(--qd-ground-2);
    border: 1px solid var(--qd-hair);
    color: var(--qd-ink-3);
}

.qd .qd-empty__t {
    font: 650 var(--qd-fs-3)/1.3 var(--qd-font);
    color: var(--qd-ink);
}

.qd .qd-empty__d {
    font-size: var(--qd-fs-1);
    color: var(--qd-ink-3);
    max-width: 38ch;
}

.qd .qd-empty--bad .qd-empty__ic {
    background: var(--qd-bad-tint);
    border-color: var(--qd-bad-line);
    color: var(--qd-bad-ink);
}

/* ── 11 · FEEDBACK ────────────────────────────────────────────────────────── */
.qd .qd-toasts {
    position: fixed;
    inset-block-end: calc(16px + var(--qd-safe-b));
    inset-inline-end: 16px;
    display: grid;
    gap: 8px;
    z-index: var(--qd-z-toast);
    width: min(348px, calc(100vw - 32px));
}

.qd .qd-toast {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 9px;
    padding: 11px 10px 10px 12px;
    border-radius: var(--qd-r-panel);
    background: var(--qd-panel);
    border: 1px solid var(--qd-hair-2);
    box-shadow: var(--qd-sh-3);
    animation: qd-toast-in 240ms var(--qd-spring);
    overflow: hidden;
}

    .qd .qd-toast::before {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline: 0;
        height: 2px;
        background: var(--qd-info);
    }

.qd .qd-toast--good::before {
    background: var(--qd-good);
}

.qd .qd-toast--warn::before {
    background: var(--qd-warn);
}

.qd .qd-toast--bad::before {
    background: var(--qd-bad);
}

.qd .qd-toast.is-out {
    animation: qd-toast-out 180ms var(--qd-ease) forwards;
}

.qd .qd-toast__ic {
    width: 17px;
    height: 17px;
    margin-block-start: 1px;
    color: var(--qd-info-ink);
}

.qd .qd-toast--good .qd-toast__ic {
    color: var(--qd-good-ink);
}

.qd .qd-toast--warn .qd-toast__ic {
    color: var(--qd-warn-ink);
}

.qd .qd-toast--bad .qd-toast__ic {
    color: var(--qd-bad-ink);
}

.qd .qd-toast__t {
    font: 650 var(--qd-fs-2)/1.3 var(--qd-font);
    color: var(--qd-ink);
}

.qd .qd-toast__d {
    font: 400 var(--qd-fs-1)/1.45 var(--qd-font);
    color: var(--qd-ink-3);
    margin-block-start: 1px;
}

.qd .qd-toast__x {
    --_bg: transparent;
    --_bg-h: var(--qd-hov);
    --_bg-a: var(--qd-press);
    --_bd: transparent;
    --_bd-h: transparent;
    --_ink: var(--qd-faint);
    --_ink-h: var(--qd-ink);
    min-height: 0;
    padding: 2px;
    border-radius: 6px;
}

.qd .qd-alert {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: var(--qd-fs-2);
    background: var(--qd-info-tint);
    border: 1px solid var(--qd-info-line);
    color: var(--qd-info-ink);
    border-inline-start-width: 3px;
}

.qd .qd-alert--good {
    background: var(--qd-good-tint);
    border-color: var(--qd-good-line);
    color: var(--qd-good-ink);
}

.qd .qd-alert--warn {
    background: var(--qd-warn-tint);
    border-color: var(--qd-warn-line);
    color: var(--qd-warn-ink);
}

.qd .qd-alert--bad {
    background: var(--qd-bad-tint);
    border-color: var(--qd-bad-line);
    color: var(--qd-bad-ink);
}

.qd .qd-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--qd-z-modal);
    background: rgba(3, 5, 8, .70);
    -webkit-backdrop-filter: blur(4px) saturate(1.1);
    backdrop-filter: blur(4px) saturate(1.1);
    display: grid;
    place-items: center;
    padding: var(--qd-sp-5);
    animation: qd-fade 140ms var(--qd-ease);
    overflow: auto;
}

.qd[data-theme="light"] .qd-overlay {
    background: rgba(11, 16, 23, .42);
}

.qd .qd-modal {
    position: relative;
    width: min(560px, 100%);
    max-height: min(86svh, 800px);
    display: flex;
    flex-direction: column;
    background: var(--qd-panel);
    border: 1px solid var(--qd-hair-2);
    border-radius: var(--qd-r-lg);
    box-shadow: var(--qd-sh-3);
    animation: qd-pop 200ms var(--qd-spring);
}

    .qd .qd-modal::before {
        content: "";
        position: absolute;
        inset-block-start: -1px;
        inset-inline: 14px;
        height: 1px;
        background: var(--qd-filament);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    }

.qd .qd-modal--sm {
    width: min(420px, 100%);
}

.qd .qd-modal--lg {
    width: min(820px, 100%);
}

.qd .qd-modal--full {
    width: min(1400px, calc(100vw - 28px));
    height: calc(100svh - 28px);
    max-height: none;
}

.qd .qd-modal__hd {
    display: flex;
    align-items: center;
    gap: var(--qd-sp-3);
    padding: var(--qd-pan-y) var(--qd-pan-x);
    border-block-end: 1px solid var(--qd-hair);
    flex: none;
}

.qd .qd-modal__tl {
    font: 650 var(--qd-fs-4)/1.25 var(--qd-font);
    letter-spacing: -.014em;
}

.qd .qd-modal__bd {
    padding: var(--qd-pan-x);
    overflow: auto;
}

.qd .qd-modal__ft {
    display: flex;
    justify-content: flex-end;
    gap: var(--qd-sp-2);
    padding: 10px var(--qd-pan-x);
    border-block-start: 1px solid var(--qd-hair);
    background: var(--qd-panel-2);
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
    flex: none;
    flex-wrap: wrap;
}

.qd .qd-drawer {
    position: fixed;
    inset-block: var(--qd-safe-t) var(--qd-safe-b);
    inset-inline-end: 0;
    z-index: var(--qd-z-drawer);
    width: min(440px, 94vw);
    background: var(--qd-panel);
    border-inline-start: 1px solid var(--qd-hair-2);
    box-shadow: var(--qd-sh-3);
    display: grid;
    /* v5.4 · THE COLUMN THE DRAWER NEVER DECLARED. Rows were declared, the
       column was not — so the implicit column sized to `auto`, and a grid
       item's default min-width:auto means it REFUSES to shrink below its
       own min-content. One long email, ref string or clinical note therefore
       widened the track past the drawer's own width and every child — body,
       header, footer buttons — overflowed the panel edge together. Declaring
       minmax(0, 1fr) gives the track a real floor, and the floor below gives
       every child one too. Fixes the overflow on EVERY page at once. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    animation: qd-slide 220ms var(--qd-ease);
}

    .qd .qd-drawer > * {
        min-width: 0;
    }

    /* long unbreakable strings (emails, refs, note bodies) wrap instead of
   pushing — the drawer is a reading surface, not a horizontal scroller */
    .qd .qd-drawer .qd-modal__bd {
        overflow-wrap: anywhere;
    }

.qd .qd-drawer--wide {
    width: min(640px, 96vw);
}

/* exit choreography — reverse of the entry, slightly quicker */
.qd .qd-overlay.is-out {
    animation: qd-fade 150ms var(--qd-ease) reverse forwards;
    pointer-events: none;
}

    .qd .qd-overlay.is-out .qd-modal {
        animation: qd-pop 170ms var(--qd-ease) reverse forwards;
    }

.qd .qd-drawer.is-out {
    animation: qd-slide 190ms var(--qd-ease) reverse forwards;
    pointer-events: none;
}

/* bottom sheet */
.qd .qd-drawer--bottom {
    inset: auto 0 var(--qd-safe-b) 0;
    width: auto;
    max-height: min(82svh, 720px);
    border-inline-start: 0;
    border-block-start: 1px solid var(--qd-hair-2);
    border-start-start-radius: var(--qd-r-lg);
    border-start-end-radius: var(--qd-r-lg);
    animation: qd-sheet-up 240ms var(--qd-spring);
}

    .qd .qd-drawer--bottom::before {
        content: "";
        position: absolute;
        inset-block-start: 7px;
        inset-inline-start: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--qd-hair-3);
    }

    .qd .qd-drawer--bottom.is-out {
        animation: qd-sheet-up 180ms var(--qd-ease) reverse forwards;
    }

@keyframes qd-sheet-up {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* header tray */
.qd .qd-drawer--top {
    inset: 0 0 auto 0;
    width: auto;
    max-height: min(70svh, 560px);
    border-inline-start: 0;
    border-block-end: 1px solid var(--qd-hair-2);
    border-end-start-radius: var(--qd-r-lg);
    border-end-end-radius: var(--qd-r-lg);
    animation: qd-tray-down 240ms var(--qd-spring);
}

    .qd .qd-drawer--top.is-out {
        animation: qd-tray-down 180ms var(--qd-ease) reverse forwards;
    }

@keyframes qd-tray-down {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* pinned — floating dock, page interactive behind */
.qd .qd-drawer.is-pinned {
    box-shadow: var(--qd-sh-2);
}

.qd .qd-drawer [data-qd-pin] .qd-i {
    transition: transform var(--qd-t) var(--qd-spring), color var(--qd-t) var(--qd-ease);
}

.qd .qd-drawer [data-qd-pin][aria-pressed="true"] {
    --_bg: var(--qd-act-soft);
    --_bg-h: var(--qd-act-soft);
    --_bd: var(--qd-act-line);
    --_bd-h: var(--qd-act-line);
    --_ink: var(--qd-act-ink);
    --_ink-h: var(--qd-act-ink);
}

    .qd .qd-drawer [data-qd-pin][aria-pressed="true"] .qd-i {
        transform: rotate(-38deg);
    }

@keyframes qd-fade {
    from {
        opacity: 0;
    }
}

@keyframes qd-pop {
    from {
        opacity: 0;
        transform: scale(.97) translateY(6px);
    }
}

@keyframes qd-slide {
    from {
        transform: translateX(24px);
        opacity: 0;
    }
}

@keyframes qd-toast-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }
}

@keyframes qd-toast-out {
    to {
        opacity: 0;
        transform: translateY(6px) scale(.98);
    }
}

/* ── 12 · NAV · STEPS · ACCORDION · TIMELINE ──────────────────────────────── */
.qd .qd-tabs {
    display: flex;
    gap: var(--qd-sp-2);
    border-block-end: 1px solid var(--qd-hair);
    overflow-x: auto;
    scrollbar-width: none;
}

    .qd .qd-tabs::-webkit-scrollbar {
        display: none;
    }

    .qd .qd-tabs > button {
        --_bg: transparent;
        --_bg-h: transparent;
        --_bg-a: transparent;
        --_bd: transparent;
        --_bd-h: transparent;
        --_ink: var(--qd-ink-3);
        --_ink-h: var(--qd-ink);
        border: 0;
        border-radius: 0;
        min-height: 38px;
        padding: 0 var(--qd-sp-2);
        margin-block-end: -1px;
        font: 600 var(--qd-fs-2)/1 var(--qd-font);
        border-block-end: 2px solid transparent;
        flex: none;
    }

    .qd .qd-tabs > [aria-selected="true"] {
        --_ink: var(--qd-act-ink);
        --_ink-h: var(--qd-act-ink);
        border-block-end-color: var(--qd-act);
    }

.qd .qd-tabs--pills {
    border-block-end: 0;
    gap: 6px;
}

    .qd .qd-tabs--pills > button {
        --_bg: var(--qd-btn2);
        --_bg-h: var(--qd-btn2-hov);
        --_bg-a: var(--qd-btn2-press);
        --_bd: var(--qd-btn2-line);
        --_bd-h: var(--qd-btn2-line-h);
        border: 1px solid var(--_bd);
        border-radius: var(--qd-r-pill);
        min-height: 30px;
        padding: 0 13px;
        margin: 0;
    }

    .qd .qd-tabs--pills > [aria-selected="true"] {
        --_bg: var(--qd-act-soft);
        --_bg-h: var(--qd-act-soft);
        --_bd: var(--qd-act-line);
        --_bd-h: var(--qd-act-line);
        --_ink: var(--qd-act-ink);
        --_ink-h: var(--qd-act-ink);
        border-block-end-color: transparent;
    }

.qd .qd-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font: 500 var(--qd-fs-1)/1 var(--qd-font);
    color: var(--qd-ink-3);
}

    .qd .qd-crumb a {
        border: 0;
        color: var(--qd-ink-3);
    }

        .qd .qd-crumb a:hover {
            color: var(--qd-act-ink);
        }

    .qd .qd-crumb i {
        font-style: normal;
        color: var(--qd-hair-3);
    }

    .qd .qd-crumb b {
        font-weight: 600;
        color: var(--qd-ink);
    }

.qd .qd-steps {
    display: flex;
    gap: var(--qd-sp-2);
}

.qd .qd-step {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.qd .qd-step__n {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-content: center;
    background: var(--qd-ground-2);
    border: 1px solid var(--qd-hair-2);
    color: var(--qd-ink-3);
    font: 600 var(--qd-fs-0)/1 var(--qd-mono);
}

.qd .qd-step__t {
    font: 600 var(--qd-fs-1)/1.3 var(--qd-font);
    color: var(--qd-ink-3);
}

.qd .qd-step__ln {
    flex: 1;
    height: 1px;
    background: var(--qd-hair-2);
}

.qd .qd-step.is-on .qd-step__n {
    background: var(--qd-act);
    border-color: var(--qd-act);
    color: var(--qd-on-btn);
}

.qd .qd-step.is-on .qd-step__t {
    color: var(--qd-ink);
}

.qd .qd-step.is-done .qd-step__n {
    background: var(--qd-good-tint);
    border-color: var(--qd-good-line);
    color: var(--qd-good-ink);
}

.qd .qd-acc {
    border: 1px solid var(--qd-hair);
    border-radius: var(--qd-r-panel);
    background: var(--qd-panel);
    overflow: hidden;
}

.qd .qd-acc__h {
    --_bg: transparent;
    --_bg-h: var(--qd-hov);
    --_bg-a: var(--qd-press);
    --_bd: transparent;
    --_bd-h: transparent;
    --_ink: var(--qd-ink);
    --_ink-h: var(--qd-ink);
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
    min-height: 44px;
    border: 0;
    border-radius: 0;
    font-weight: 600;
    padding-inline: var(--qd-pan-x);
}

    .qd .qd-acc__h + .qd-acc__h, .qd .qd-acc__p + .qd-acc__h {
        border-block-start: 1px solid var(--qd-hair);
    }

    .qd .qd-acc__h::after {
        content: "";
        margin-inline-start: auto;
        width: 7px;
        height: 7px;
        border-inline-end: 1.75px solid var(--qd-ink-3);
        border-block-end: 1.75px solid var(--qd-ink-3);
        transform: rotate(45deg);
        transition: transform var(--qd-t) var(--qd-ease);
    }

    .qd .qd-acc__h[aria-expanded="true"]::after {
        transform: rotate(-135deg);
    }

.qd .qd-acc__p {
    padding: 0 var(--qd-pan-x) var(--qd-pan-x);
    color: var(--qd-ink-2);
}

/* timeline — ● | title / meta | date (the v4-fixed anatomy, densified) */
.qd .qd-tl {
    display: grid;
    position: relative;
}

    .qd .qd-tl::before {
        content: "";
        position: absolute;
        inset-block: 16px;
        inset-inline-start: 10px;
        width: 2px;
        border-radius: 1px;
        background: var(--qd-hair-2);
    }

.qd .qd-tl__i {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    grid-template-areas: "b t d" "b m d";
    column-gap: 11px;
    row-gap: 2px;
    align-items: start;
    padding-block: 9px;
    position: relative;
}

.qd .qd-tl__b {
    grid-area: b;
    width: 9px;
    height: 9px;
    margin: 5px 0 0 6px;
    border-radius: 50%;
    background: var(--qd-panel);
    border: 2.5px solid var(--qd-act);
    box-shadow: 0 0 0 4px var(--qd-panel);
    z-index: 1;
}

.qd .qd-tl__i.is-good .qd-tl__b {
    border-color: var(--qd-good);
}

.qd .qd-tl__i.is-warn .qd-tl__b {
    border-color: var(--qd-warn);
}

.qd .qd-tl__i.is-bad .qd-tl__b {
    border-color: var(--qd-bad);
}

.qd .qd-tl__i.is-ai .qd-tl__b {
    border-color: var(--qd-ai);
}

.qd .qd-tl__t {
    grid-area: t;
    font: 620 var(--qd-fs-2)/1.35 var(--qd-font);
    color: var(--qd-ink);
    letter-spacing: -.01em;
}

.qd .qd-tl__m {
    grid-area: m;
    font: 450 var(--qd-fs-1)/1.45 var(--qd-font);
    color: var(--qd-ink-3);
}

.qd .qd-tl__d {
    grid-area: d;
    justify-self: end;
    margin-inline-start: var(--qd-sp-4);
    padding-block-start: 3px;
    font: 500 var(--qd-fs-0)/1.4 var(--qd-mono);
    color: var(--qd-faint);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
    .qd .qd-tl__i {
        grid-template-columns: 22px minmax(0, 1fr);
        grid-template-areas: "b t" "b m" "b d";
    }

    .qd .qd-tl__d {
        justify-self: start;
        margin-inline-start: 0;
        padding-block-start: 1px;
    }
}

/* ── 13 · SHELL — sidebar, topbar, main ───────────────────────────────────────
   The shell keeps its night surface in BOTH themes. v5 retires the helix
   weave that used to drift behind the content: a premium ground is a quiet
   ground. The two overflow guards at the bottom of this section are the
   permanent fix for the horizontal-scroll class of bug — grid children
   default to min-width:auto, so one wide <pre> or table used to shove the
   whole page sideways.
   ------------------------------------------------------------------------ */
.qd .qd-shell {
    display: grid;
    grid-template-columns: var(--qd-side-w) minmax(0, 1fr);
    min-height: 100svh;
}

.qd .qd-side {
    position: sticky;
    inset-block-start: 0;
    height: 100svh;
    overflow: auto;
    background: linear-gradient(180deg, var(--qd-shell), var(--qd-shell-2));
    color: var(--qd-shell-ink);
    padding: var(--qd-sp-4) var(--qd-sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--qd-sp-2);
    border-inline-end: 1px solid var(--qd-hair);
}

    .qd .qd-side::after {
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline-end: 0;
        width: 1px;
        background: var(--qd-filament);
        opacity: .45;
        -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
        mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
    }

.qd .qd-side__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 12px;
    font: 800 var(--qd-fs-3)/1 var(--qd-font);
    letter-spacing: -.02em;
}

    .qd .qd-side__brand i {
        width: 26px;
        height: 26px;
        border-radius: 8px;
        background: var(--qd-filament);
        display: inline-grid;
        place-content: center;
        color: #04060A;
        font: 800 13px/1 var(--qd-mono);
        font-style: normal;
        flex: none;
    }

.qd .qd-side__lbl {
    padding: 12px 10px 4px;
    font: 700 10.5px/1 var(--qd-mono);
    letter-spacing: .15em;
    color: var(--qd-shell-faint);
    text-transform: uppercase;
}

.qd .qd-nav {
    display: grid;
    gap: 2px;
}

.qd .qd-nav__i {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--qd-shell-faint);
    text-decoration: none;
    border: 0;
    font: 600 var(--qd-fs-2)/1 var(--qd-font);
    transition: background var(--qd-t) var(--qd-ease), color var(--qd-t) var(--qd-ease);
}

    .qd .qd-nav__i:hover {
        background: var(--qd-shell-hov);
        color: var(--qd-shell-ink);
        border: 0;
    }

    .qd .qd-nav__i.is-on {
        background: var(--qd-shell-act-soft);
        color: var(--qd-shell-act-ink);
    }

        .qd .qd-nav__i.is-on::before {
            content: "";
            position: absolute;
            inset-inline-start: 0;
            inset-block: 8px;
            width: 2px;
            border-radius: 2px;
            background: var(--qd-shell-act);
        }

    .qd .qd-nav__i .qd-i {
        width: 16px;
        height: 16px;
        flex: none;
    }

.qd .qd-top {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--qd-z-sticky);
    display: flex;
    align-items: center;
    gap: var(--qd-sp-3);
    min-height: var(--qd-top-h);
    padding: 0 var(--qd-sp-5);
    background: color-mix(in srgb, var(--qd-ground) 86%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--qd-hair);
}

.qd .qd-body {
    position: relative;
    overflow-x: clip; /* v5 · nothing inside can push the page sideways */
}

.qd .qd-main {
    position: relative;
    z-index: 1;
    padding: var(--qd-sp-5);
    display: grid;
    gap: var(--qd-sp-4);
    align-content: start;
}

    /* v5 · the other half of the horizontal-scroll fix: grid children may shrink */
    .qd .qd-main > *,
    .qd .qd-stack > * {
        min-width: 0;
    }

.qd .qd-pagehd {
    display: flex;
    align-items: flex-end;
    gap: var(--qd-sp-4);
    flex-wrap: wrap;
}

.qd .qd-pagehd__t h1 {
    font-size: var(--qd-fs-6);
}

.qd .qd-pagehd__t p {
    margin: 4px 0 0;
    color: var(--qd-ink-3);
    font-size: var(--qd-fs-2);
}

.qd .qd-pagehd__act {
    margin-inline-start: auto;
    display: flex;
    gap: var(--qd-sp-2);
    flex-wrap: wrap;
}

/* ── 14 · CHARTS ──────────────────────────────────────────────────────────────
   Read colours via qd.chartTheme() — never hard-code a hex in a page script.
   All six series clear 3:1 on the panel in BOTH modes.
   ------------------------------------------------------------------------ */
.qd .qd-chart {
    position: relative;
    min-height: 120px;
}

    .qd .qd-chart canvas {
        max-width: 100%;
    }

.qd .qd-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-block-start: var(--qd-sp-3);
}

.qd .qd-chart__key {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 500 var(--qd-fs-1)/1 var(--qd-font);
    color: var(--qd-ink-3);
}

    .qd .qd-chart__key i {
        width: 9px;
        height: 9px;
        border-radius: 3px;
        flex: none;
    }

        .qd .qd-chart__key i.c1 {
            background: var(--qd-chart-1);
        }

        .qd .qd-chart__key i.c2 {
            background: var(--qd-chart-2);
        }

        .qd .qd-chart__key i.c3 {
            background: var(--qd-chart-3);
        }

        .qd .qd-chart__key i.c4 {
            background: var(--qd-chart-4);
        }

        .qd .qd-chart__key i.c5 {
            background: var(--qd-chart-5);
        }

        .qd .qd-chart__key i.c6 {
            background: var(--qd-chart-6);
        }

/* ── 15 · GRID + UTILITIES ────────────────────────────────────────────────── */
.qd .qd-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--qd-sp-4);
}

.qd .qd-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--qd-sp-4);
}

.qd [class*="qd-col-"] {
    grid-column: span 12;
    min-width: 0;
}

.qd .qd-col-1 {
    grid-column: span 1
}

.qd .qd-col-2 {
    grid-column: span 2
}

.qd .qd-col-3 {
    grid-column: span 3
}

.qd .qd-col-4 {
    grid-column: span 4
}

.qd .qd-col-5 {
    grid-column: span 5
}

.qd .qd-col-6 {
    grid-column: span 6
}

.qd .qd-col-7 {
    grid-column: span 7
}

.qd .qd-col-8 {
    grid-column: span 8
}

.qd .qd-col-9 {
    grid-column: span 9
}

.qd .qd-col-10 {
    grid-column: span 10
}

.qd .qd-col-11 {
    grid-column: span 11
}

.qd .qd-col-12 {
    grid-column: span 12
}

.qd .qd-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min, 240px), 1fr));
    gap: var(--qd-sp-4);
}

.qd .qd-muted {
    color: var(--qd-ink-3);
}

.qd .qd-right {
    text-align: end;
}

.qd .qd-center {
    text-align: center;
}

.qd .qd-flex {
    display: flex;
    align-items: center;
    gap: var(--qd-sp-3);
}

.qd .qd-flex--wrap {
    flex-wrap: wrap;
}

.qd .qd-stack {
    display: grid;
    gap: var(--qd-sp-4);
}

.qd .qd-grow {
    flex: 1 1 auto;
    min-width: 0;
}

.qd .qd-divlbl {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: var(--qd-sp-5) 0 var(--qd-sp-3);
    font: 700 10.5px/1 var(--qd-mono);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--qd-faint);
}

    .qd .qd-divlbl::before, .qd .qd-divlbl::after {
        content: "";
        height: 1px;
        flex: 1;
        background: var(--qd-hair);
    }

/* ── 16 · RESPONSIVE · A11Y · PRINT ───────────────────────────────────────── */
@media (min-width: 576px) {
    .qd .qd-container {
        max-width: 540px;
    }

    .qd .qd-col-sm-3 {
        grid-column: span 3
    }

    .qd .qd-col-sm-4 {
        grid-column: span 4
    }

    .qd .qd-col-sm-6 {
        grid-column: span 6
    }

    .qd .qd-col-sm-12 {
        grid-column: span 12
    }
}

@media (min-width: 768px) {
    .qd .qd-container {
        max-width: 720px;
    }

    .qd .qd-col-md-2 {
        grid-column: span 2
    }

    .qd .qd-col-md-3 {
        grid-column: span 3
    }

    .qd .qd-col-md-4 {
        grid-column: span 4
    }

    .qd .qd-col-md-6 {
        grid-column: span 6
    }

    .qd .qd-col-md-8 {
        grid-column: span 8
    }

    .qd .qd-col-md-12 {
        grid-column: span 12
    }
}

@media (min-width: 992px) {
    .qd .qd-container {
        max-width: 960px;
    }

    .qd .qd-col-lg-2 {
        grid-column: span 2
    }

    .qd .qd-col-lg-3 {
        grid-column: span 3
    }

    .qd .qd-col-lg-4 {
        grid-column: span 4
    }

    .qd .qd-col-lg-5 {
        grid-column: span 5
    }
    /* v5 · additive */
    .qd .qd-col-lg-6 {
        grid-column: span 6
    }

    .qd .qd-col-lg-7 {
        grid-column: span 7
    }
    /* v5 · additive */
    .qd .qd-col-lg-8 {
        grid-column: span 8
    }

    .qd .qd-col-lg-9 {
        grid-column: span 9
    }
}

@media (min-width: 1200px) {
    .qd .qd-container {
        max-width: 1140px;
    }

    .qd .qd-col-xl-3 {
        grid-column: span 3
    }

    .qd .qd-col-xl-4 {
        grid-column: span 4
    }

    .qd .qd-col-xl-6 {
        grid-column: span 6
    }
}

@media (min-width: 1400px) {
    .qd .qd-container {
        max-width: 1320px;
    }
}

.qd .qd-only-mobile {
    display: none;
}

@media (max-width: 991.98px) {
    .qd .qd-shell {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .qd .qd-side {
        padding-inline: 8px;
    }

    .qd .qd-side__brand span, .qd .qd-side__lbl, .qd .qd-nav__i span {
        display: none;
    }

    .qd .qd-nav__i {
        justify-content: center;
        padding: 0;
    }

    .qd .qd-hide-md {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .qd .qd-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .qd .qd-side {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        width: min(280px, 86vw);
        z-index: var(--qd-z-drawer);
        transform: translateX(-102%);
        transition: transform 240ms var(--qd-ease);
        padding-inline: var(--qd-sp-3);
    }

        .qd .qd-side.is-open {
            transform: none;
            box-shadow: var(--qd-sh-3);
        }

    .qd .qd-side__brand span, .qd .qd-side__lbl, .qd .qd-nav__i span {
        display: revert;
    }

    .qd .qd-nav__i {
        justify-content: flex-start;
        padding: 0 10px;
    }

    .qd .qd-main {
        padding: var(--qd-sp-4);
    }

    .qd .qd-top {
        padding-inline: var(--qd-sp-4);
    }

    .qd .qd-only-mobile {
        display: revert;
    }

    .qd .qd-hide-sm {
        display: none;
    }

    /* iOS zoom guard */
    .qd input:where(:not([type="checkbox"]):not([type="radio"])), .qd select, .qd textarea {
        font-size: 16px;
    }

    /* touch targets */
    .qd button, .qd .qd-btn {
        min-height: 42px;
    }

    .qd .qd-btn--sm {
        min-height: 34px;
    }

    .qd .qd-btn--icon {
        width: 42px;
    }

        .qd .qd-btn--icon.qd-btn--sm {
            width: 34px;
        }

    .qd .qd-toasts {
        inset-inline: 12px;
        inset-block-end: 12px;
        width: auto;
    }

    .qd .qd-modal {
        max-height: calc(100svh - 24px);
    }

    .qd .qd-modal--full {
        width: calc(100vw - 12px);
        height: calc(100svh - 12px);
    }

    .qd .qd-drawer {
        width: 100%;
    }

    .qd .qd-drawer--wide {
        width: 100%;
    }

    .qd .qd-pagehd__act {
        width: 100%;
    }

        .qd .qd-pagehd__act > .qd-btn {
            flex: 1;
        }

    .qd .qd-table--stack thead {
        display: none;
    }

    .qd .qd-table--stack, .qd .qd-table--stack tbody, .qd .qd-table--stack tr, .qd .qd-table--stack td {
        display: block;
        width: 100%;
    }

        .qd .qd-table--stack tr {
            border-block-end: 1px solid var(--qd-hair);
            padding: var(--qd-sp-3) var(--qd-sp-4);
        }

        .qd .qd-table--stack td {
            height: auto;
            padding: 3px 0;
            border: 0;
            display: flex;
            align-items: baseline;
            gap: 12px;
        }

            .qd .qd-table--stack td::before {
                content: attr(data-label);
                flex: none;
                min-width: 34%;
                font: 600 var(--qd-fs-0)/1.4 var(--qd-font);
                letter-spacing: .05em;
                text-transform: uppercase;
                color: var(--qd-faint);
            }

            .qd .qd-table--stack td.qd-td-num {
                text-align: start;
            }
}

@media (max-width: 575.98px) {
    .qd .qd-main {
        padding: var(--qd-sp-3);
    }

    .qd h1 {
        font-size: var(--qd-fs-6);
    }

    .qd .qd-kpi__v {
        font-size: var(--qd-fs-5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .qd *, .qd *::before, .qd *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .qd .qd-trace__ln {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }

    .qd .qd-skel::after {
        display: none;
    }
}

@media (prefers-contrast: more) {
    .qd {
        --qd-hair: rgba(148, 180, 214, .3);
        --qd-hair-2: rgba(148, 180, 214, .45);
        --qd-btn2-line: rgba(148, 180, 214, .40);
    }

        .qd[data-theme="light"] {
            --qd-hair: #C3CBD6;
            --qd-hair-2: #9AA6B5;
            --qd-btn2-line: #9AA6B5;
            --qd-faint: #5C6675;
        }
}

@media print {
    .qd {
        background: #fff;
        color: #000;
    }

        .qd .qd-side, .qd .qd-top, .qd .qd-toasts, .qd .qd-pagehd__act, .qd .qd-float, .qd .qd-topbar,
        .qd .qd-veil, .qd .qd-cmdk, .qd .qd-call, .qd .qd-calltab, .qd .qd-banner {
            display: none !important;
        }

        .qd .qd-shell {
            grid-template-columns: minmax(0, 1fr);
        }

        .qd .qd-panel, .qd .qd-kpi, .qd .qd-tablewrap, .qd .qd-hero, .qd .qd-strip, .qd .qd-cal, .qd .qd-ai-card, .qd .qd-evt {
            box-shadow: none;
            border-color: #999;
            break-inside: avoid;
            animation: none;
        }

            .qd .qd-panel::before, .qd .qd-kpi::before, .qd .qd-tablewrap::before, .qd .qd-hero::before, .qd .qd-strip::before {
                background: #333 !important;
            }
}

/* ── 17 · HERO — every page opens the same way ────────────────────────────────
   v5: the aurora wash is retired from the base hero — a hero is a promoted
   panel, and a premium panel is quiet. Only the two "speaking" variants
   keep a single faint wash: --ai (the machine, LAW 8) and --bad (the
   incident page). Padding 24→20, icon 46→40, title clamped one step lower.
   ------------------------------------------------------------------------ */
.qd .qd-hero {
    position: relative;
    background: var(--qd-panel);
    border: 1px solid var(--qd-hair);
    border-radius: var(--qd-r-lg);
    box-shadow: var(--qd-sh-1);
    padding: var(--qd-sp-5);
    overflow: hidden;
    isolation: isolate;
}

    .qd .qd-hero::before {
        content: "";
        position: absolute;
        inset-block-start: -1px;
        inset-inline: 12px;
        height: 1px;
        border-radius: 1px;
        background: var(--qd-filament);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
        z-index: 2;
    }

.qd .qd-hero__in {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--qd-sp-4);
    flex-wrap: wrap;
}

.qd .qd-hero__icon {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 11px;
    display: grid;
    place-content: center;
    color: var(--qd-act-ink);
    background: var(--qd-act-soft);
    border: 1px solid var(--qd-act-line);
}

    .qd .qd-hero__icon .qd-i, .qd .qd-hero__icon svg {
        width: 19px;
        height: 19px;
    }

.qd .qd-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 700 var(--qd-fs-0)/1 var(--qd-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--qd-act-ink);
    margin-block-end: 3px;
}

    .qd .qd-hero__kicker svg {
        width: 11px;
        height: 11px;
    }

.qd .qd-hero__t h1, .qd .qd-hero__title {
    font-size: clamp(var(--qd-fs-4), 2.2vw, var(--qd-fs-6));
    font-weight: 700;
    letter-spacing: -.022em;
    line-height: var(--qd-lh-tight);
}

.qd .qd-hero__sub {
    margin-block-start: 4px;
    color: var(--qd-ink-3);
    font-size: var(--qd-fs-2);
    max-width: 64ch;
    text-wrap: pretty;
}

.qd .qd-hero__act {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--qd-sp-2);
    flex-wrap: wrap;
}

/* the DECK — a hero can carry its KPIs on the right instead of actions */
.qd .qd-hero__deck {
    margin-inline-start: auto;
    display: grid;
    grid-auto-flow: column;
    gap: var(--qd-sp-2);
}

    .qd .qd-hero__deck .qd-kpi {
        min-width: 96px;
        padding: 2px 16px;
        gap: 3px;
    }

        .qd .qd-hero__deck .qd-kpi + .qd-kpi {
            border-inline-start: 1px solid var(--qd-hair);
        }

        .qd .qd-hero__deck .qd-kpi:first-child {
            padding-inline-start: 0;
        }

    .qd .qd-hero__deck .qd-kpi__v {
        font-size: var(--qd-fs-5);
    }

/* variants — who is speaking. The wash marks the voice, once, faintly. */
.qd .qd-hero--ai::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(480px 180px at 12% -32%, var(--qd-ai-soft), transparent 70%);
    opacity: .7;
}

.qd .qd-hero--ai .qd-hero__icon {
    color: var(--qd-ai-ink);
    background: var(--qd-ai-soft);
    border-color: var(--qd-ai-line);
}

.qd .qd-hero--ai .qd-hero__kicker {
    color: var(--qd-ai-ink);
}

.qd .qd-hero--bad::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(480px 180px at 12% -32%, var(--qd-bad-tint), transparent 70%);
    opacity: .7;
}

.qd .qd-hero--bad .qd-hero__icon {
    color: var(--qd-bad-ink);
    background: var(--qd-bad-tint);
    border-color: var(--qd-bad-line);
}

.qd .qd-hero--bad .qd-hero__kicker {
    color: var(--qd-bad-ink);
}

.qd .qd-hero--sm {
    padding: 14px var(--qd-pan-x);
    border-radius: var(--qd-r-panel);
}

/* ── 18 · KPI v2 — tones, icons, sub-lines, sparklines, divided strips ──────
   The VALUE keeps its ink; the tone lives in the icon chip and the delta.
   ------------------------------------------------------------------------ */
.qd .qd-kpi__ic {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-content: center;
    background: var(--qd-act-soft);
    border: 1px solid var(--qd-act-line);
    color: var(--qd-act-ink);
    margin-block-end: 2px;
}

    .qd .qd-kpi__ic svg, .qd .qd-kpi__ic .qd-i {
        width: 14px;
        height: 14px;
    }

.qd .qd-kpi__s {
    font: 500 var(--qd-fs-0)/1.35 var(--qd-font);
    color: var(--qd-faint);
}

.qd .qd-kpi--good .qd-kpi__ic {
    background: var(--qd-good-tint);
    border-color: var(--qd-good-line);
    color: var(--qd-good-ink);
}

.qd .qd-kpi--warn .qd-kpi__ic {
    background: var(--qd-warn-tint);
    border-color: var(--qd-warn-line);
    color: var(--qd-warn-ink);
}

.qd .qd-kpi--bad .qd-kpi__ic {
    background: var(--qd-bad-tint);
    border-color: var(--qd-bad-line);
    color: var(--qd-bad-ink);
}

.qd .qd-kpi--ai .qd-kpi__ic {
    background: var(--qd-ai-soft);
    border-color: var(--qd-ai-line);
    color: var(--qd-ai-ink);
}

.qd .qd-kpi--good .qd-kpi__v {
    color: var(--qd-good-ink);
}

.qd .qd-kpi--warn .qd-kpi__v {
    color: var(--qd-warn-ink);
}

.qd .qd-kpi--bad .qd-kpi__v {
    color: var(--qd-bad-ink);
}

.qd .qd-kpi--ai .qd-kpi__v {
    color: var(--qd-ai-ink);
}

/* sparkline slot — feed it with qd.spark(el, values) */
.qd .qd-kpi__spark {
    height: 32px;
    margin-block-start: 3px;
    color: var(--qd-act);
}

    .qd .qd-kpi__spark svg {
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible;
    }

.qd .qd-spark__ln {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.qd .qd-spark__ar {
    fill: currentColor;
    opacity: .1;
}

.qd .qd-spark__dot {
    fill: currentColor;
}

/* standalone delta chip */
.qd .qd-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: 600 var(--qd-fs-0)/1 var(--qd-mono);
    padding: 2px 7px;
    border-radius: var(--qd-r-pill);
    border: 1px solid var(--qd-info-line);
    background: var(--qd-info-tint);
    color: var(--qd-info-ink);
    white-space: nowrap;
}

    .qd .qd-delta.is-up {
        background: var(--qd-good-tint);
        border-color: var(--qd-good-line);
        color: var(--qd-good-ink);
    }

    .qd .qd-delta.is-down {
        background: var(--qd-bad-tint);
        border-color: var(--qd-bad-line);
        color: var(--qd-bad-ink);
    }

/* the STRIP — one panel, big numbers separated by hairlines */
.qd .qd-strip {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    background: var(--qd-panel);
    border: 1px solid var(--qd-hair);
    border-radius: var(--qd-r-panel);
    box-shadow: var(--qd-sh-1);
    padding: 14px 0;
}

    .qd .qd-strip::before {
        content: "";
        position: absolute;
        inset-block-start: -1px;
        inset-inline: 10px;
        height: 1px;
        border-radius: 1px;
        background: var(--qd-filament);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    }

.qd .qd-strip__c {
    flex: 1 1 0;
    min-width: 124px;
    padding: 2px var(--qd-pan-x);
    display: grid;
    gap: 3px;
    align-content: start;
}

    .qd .qd-strip__c + .qd-strip__c {
        border-inline-start: 1px solid var(--qd-hair);
    }

.qd .qd-strip__v {
    font: 600 var(--qd-fs-6)/1.05 var(--qd-mono);
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--qd-ink);
}

.qd .qd-strip__l {
    font: 600 var(--qd-fs-0)/1.3 var(--qd-font);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--qd-ink-3);
}

/* ── 19 · TOOLBAR + CHIPS — the filter row under every hero ──────────────────
   v5: sticky variant no longer uses negative margins (they could overflow
   any parent without matching padding — one of the sideways-scroll donors).
   ------------------------------------------------------------------------ */
.qd .qd-toolbar {
    display: flex;
    align-items: center;
    gap: var(--qd-sp-2);
    flex-wrap: wrap;
}

.qd .qd-toolbar__r {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--qd-sp-2);
    flex-wrap: wrap;
}

.qd .qd-toolbar--sticky {
    position: sticky;
    inset-block-start: calc(var(--qd-top-h) + 8px);
    z-index: calc(var(--qd-z-sticky) - 1);
    padding: 8px 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--qd-ground) 84%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.qd .qd-count {
    font: 500 var(--qd-fs-1)/1 var(--qd-mono);
    color: var(--qd-ink-3);
    white-space: nowrap;
}

.qd .qd-chiprow {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.qd .qd-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 11px;
    border-radius: var(--qd-r-pill);
    border: 1px solid var(--qd-btn2-line);
    background: var(--qd-btn2);
    color: var(--qd-ink-2);
    font: 600 var(--qd-fs-1)/1 var(--qd-font);
    cursor: pointer;
    user-select: none;
    transition: border-color var(--qd-t) var(--qd-ease), background var(--qd-t) var(--qd-ease), color var(--qd-t) var(--qd-ease);
}

    .qd .qd-chip:hover {
        border-color: var(--qd-btn2-line-h);
        background: var(--qd-btn2-hov);
    }

    .qd .qd-chip.is-on, .qd .qd-chip[aria-pressed="true"] {
        background: var(--qd-act-soft);
        border-color: var(--qd-act-line);
        color: var(--qd-act-ink);
    }

    .qd .qd-chip .qd-chip__x {
        display: inline-grid;
        place-content: center;
        width: 15px;
        height: 15px;
        margin-inline-end: -4px;
        border-radius: 50%;
        color: var(--qd-faint);
    }

        .qd .qd-chip .qd-chip__x:hover {
            background: var(--qd-bad-tint);
            color: var(--qd-bad-ink);
        }

/* ── 20 · SCHEDULE — Today's timeline ─────────────────────────────────────── */
.qd .qd-sched {
    display: grid;
}

.qd .qd-sched__i {
    display: grid;
    grid-template-columns: 54px 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 10px;
    min-height: 48px;
    position: relative;
    animation: qd-rise-in .4s var(--qd-ease) both;
    animation-delay: calc(var(--i, 0) * 40ms);
}

    .qd .qd-sched__i::before {
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline-start: calc(54px + 10px + 11px);
        width: 1px;
        background: var(--qd-hair);
    }

    .qd .qd-sched__i:first-child::before {
        inset-block-start: 50%;
    }

    .qd .qd-sched__i:last-child::before {
        inset-block-end: 50%;
    }

.qd .qd-sched__t {
    font: 500 var(--qd-fs-1)/1 var(--qd-mono);
    color: var(--qd-ink-3);
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.qd .qd-sched__dot {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    z-index: 1;
    font-size: 11px;
    background: var(--qd-panel);
    border: 1.5px solid var(--qd-act);
    color: var(--qd-act-ink);
}

.qd .qd-sched__i.is-active .qd-sched__dot {
    background: var(--qd-act);
    color: var(--qd-on-btn);
    border-color: var(--qd-act);
    box-shadow: 0 0 0 4px var(--qd-act-soft);
    animation: qd-pulse 1.8s var(--qd-ease) infinite;
}

.qd .qd-sched__i.is-done .qd-sched__dot {
    background: var(--qd-good-tint);
    border-color: var(--qd-good-line);
    color: var(--qd-good-ink);
}

.qd .qd-sched__i.is-bad .qd-sched__dot {
    background: var(--qd-bad-tint);
    border-color: var(--qd-bad-line);
    color: var(--qd-bad-ink);
}

.qd .qd-sched__i.is-done .qd-sched__n, .qd .qd-sched__i.is-bad .qd-sched__n {
    color: var(--qd-ink-3);
}

.qd .qd-sched__n {
    font: 600 var(--qd-fs-2)/1.3 var(--qd-font);
    color: var(--qd-ink);
}

.qd .qd-sched__m {
    grid-column: 3;
    font: 400 var(--qd-fs-1)/1.35 var(--qd-font);
    color: var(--qd-ink-3);
}

.qd .qd-sched__side {
    grid-row: 1 / span 2;
    grid-column: 4;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* the NOW line */
.qd .qd-sched__now {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
    color: var(--qd-act-ink);
    font: 700 var(--qd-fs-0)/1 var(--qd-mono);
    letter-spacing: .1em;
}

    .qd .qd-sched__now::before {
        content: "";
        width: 54px;
        flex: none;
    }

    .qd .qd-sched__now::after {
        content: "";
        flex: 1;
        height: 2px;
        border-radius: 2px;
        background: var(--qd-act);
        opacity: .8;
    }

@keyframes qd-rise-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

/* ── 21 · CALENDAR — the week grid and the month wall ────────────────────────
   The page owns the data and the maths; the system owns every pixel.
   ------------------------------------------------------------------------ */
.qd .qd-cal {
    --qd-slot-h: 92px;
    --qd-gut-w: 52px;
    position: relative;
    background: var(--qd-panel);
    border: 1px solid var(--qd-hair);
    border-radius: var(--qd-r-panel);
    box-shadow: var(--qd-sh-1);
    overflow: auto;
}

    .qd .qd-cal::before {
        content: "";
        position: sticky;
        inset-block-start: 0;
        display: block;
        height: 1px;
        margin: -1px 10px 0;
        border-radius: 1px;
        background: var(--qd-filament);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
        z-index: 6;
    }

.qd .qd-cal__wk {
    min-width: 760px; /* seven readable days; the wrapper pans on phones */
}

.qd .qd-cal__hd {
    position: sticky;
    inset-block-start: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: var(--qd-gut-w) repeat(7, minmax(0, 1fr));
    background: color-mix(in srgb, var(--qd-panel) 90%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-block-end: 1px solid var(--qd-hair-2);
}

.qd .qd-cal__hc {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 8px 4px;
    border-inline-start: 1px solid var(--qd-hair);
}

.qd .qd-cal__hday {
    font: 700 var(--qd-fs-0)/1 var(--qd-mono);
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--qd-faint);
}

.qd .qd-cal__hdate {
    min-width: 24px;
    height: 24px;
    padding: 0 4px;
    display: grid;
    place-content: center;
    border-radius: 8px;
    font: 600 var(--qd-fs-2)/1 var(--qd-mono);
    color: var(--qd-ink-2);
}

.qd .qd-cal__hc.is-today .qd-cal__hdate {
    background: var(--qd-act);
    color: var(--qd-on-btn);
}

.qd .qd-cal__hcount {
    font: 600 10px/1 var(--qd-mono);
    color: var(--qd-act-ink);
    background: var(--qd-act-soft);
    border: 1px solid var(--qd-act-line);
    border-radius: 99px;
    padding: 2px 6px;
}

.qd .qd-cal__bd {
    display: grid;
    grid-template-columns: var(--qd-gut-w) repeat(7, minmax(0, 1fr));
}

.qd .qd-cal__gut {
    position: relative;
}

.qd .qd-cal__glabel {
    height: var(--qd-slot-h);
    position: relative;
}

    .qd .qd-cal__glabel span {
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 8px;
        transform: translateY(-50%);
        font: 500 10.5px/1 var(--qd-mono);
        color: var(--qd-faint);
        background: var(--qd-panel);
        padding: 2px 0 2px 4px;
    }

    .qd .qd-cal__glabel:first-child span {
        transform: none;
    }

.qd .qd-cal__col {
    position: relative;
    border-inline-start: 1px solid var(--qd-hair);
    background: repeating-linear-gradient(180deg, var(--qd-hair) 0 1px, transparent 1px var(--qd-slot-h));
}

    .qd .qd-cal__col.is-today {
        background-color: color-mix(in srgb, var(--qd-act) 4%, transparent);
    }

    .qd .qd-cal__col.is-off {
        background-color: color-mix(in srgb, var(--qd-ground-2) 55%, transparent);
    }

.qd .qd-cal__shade {
    position: absolute;
    inset-inline: 0;
    background: repeating-linear-gradient(-45deg, var(--qd-hair) 0 1px, transparent 1px 7px);
    pointer-events: none;
}

.qd .qd-cal__now {
    position: absolute;
    inset-inline: 0;
    height: 2px;
    background: var(--qd-act);
    z-index: 3;
    pointer-events: none;
}

    .qd .qd-cal__now::before {
        content: "";
        position: absolute;
        inset-inline-start: -4px;
        inset-block-start: -3px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--qd-act);
    }

/* EVENT BLOCK */
.qd .qd-evt {
    position: absolute;
    inset-inline: 3px;
    border-radius: 7px;
    background: var(--qd-panel-2);
    border: 1px solid var(--qd-hair-2);
    border-inline-start: 3px solid var(--evt-c, var(--qd-act));
    padding: 3px 7px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--qd-sh-1);
    transition: box-shadow var(--qd-t) var(--qd-ease), border-color var(--qd-t) var(--qd-ease), transform var(--qd-t) var(--qd-ease);
    z-index: 1;
}

    .qd .qd-evt:hover {
        border-color: var(--qd-hair-3);
        border-inline-start-color: var(--evt-c, var(--qd-act));
        box-shadow: var(--qd-sh-2);
        z-index: 2;
    }

.qd .qd-evt__t {
    font: 600 10px/1.2 var(--qd-mono);
    color: var(--qd-ink-3);
    font-variant-numeric: tabular-nums;
}

.qd .qd-evt__n {
    font: 600 var(--qd-fs-1)/1.25 var(--qd-font);
    color: var(--qd-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qd .qd-evt__m {
    font: 400 10.5px/1.25 var(--qd-font);
    color: var(--qd-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qd .qd-evt__g {
    position: absolute;
    inset-block-start: 3px;
    inset-inline-end: 4px;
    font: 700 9px/1 var(--qd-mono);
    color: var(--qd-act-ink);
    background: var(--qd-act-soft);
    border: 1px solid var(--qd-act-line);
    border-radius: 99px;
    padding: 2px 5px;
}

/* status — the block keeps its doctor colour; state changes the SKIN */
.qd .qd-evt.is-done {
    opacity: .68;
}

    .qd .qd-evt.is-done .qd-evt__n {
        color: var(--qd-ink-3);
    }

.qd .qd-evt.is-noshow {
    background: var(--qd-bad-tint);
    border-color: var(--qd-bad-line);
    border-inline-start-color: var(--qd-bad);
}

    .qd .qd-evt.is-noshow .qd-evt__n {
        text-decoration: line-through;
        color: var(--qd-bad-ink);
    }

.qd .qd-evt.is-pending {
    background: var(--qd-warn-tint);
    border: 1.5px dashed var(--qd-warn-line);
    border-inline-start: 3px solid var(--qd-warn);
}

.qd .qd-evt.is-conflict {
    border-color: var(--qd-bad) !important;
    box-shadow: 0 0 0 3px var(--qd-bad-tint), var(--qd-sh-2);
    animation: qd-shake .3s var(--qd-ease);
}

.qd .qd-evt.is-drag {
    box-shadow: var(--qd-sh-3);
    transform: scale(1.02);
    z-index: 5;
    cursor: grabbing;
}

.qd .qd-evt__grip {
    position: absolute;
    inset-inline: 0;
    height: 7px;
    cursor: ns-resize;
    display: grid;
    place-content: center;
}

    .qd .qd-evt__grip::before {
        content: "";
        width: 20px;
        height: 3px;
        border-radius: 2px;
        background: var(--qd-hair-3);
    }

    .qd .qd-evt__grip.is-top {
        inset-block-start: 0;
    }

    .qd .qd-evt__grip.is-bot {
        inset-block-end: 0;
    }

/* MONTH WALL */
.qd .qd-cal__mhd {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-block-end: 1px solid var(--qd-hair-2);
}

    .qd .qd-cal__mhd span {
        padding: 8px 10px;
        font: 700 var(--qd-fs-0)/1 var(--qd-mono);
        letter-spacing: .11em;
        text-transform: uppercase;
        color: var(--qd-faint);
        border-inline-start: 1px solid var(--qd-hair);
    }

.qd .qd-cal__month {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.qd .qd-cal__mc {
    min-height: 104px;
    padding: 5px;
    border-inline-start: 1px solid var(--qd-hair);
    border-block-end: 1px solid var(--qd-hair);
    display: grid;
    gap: 3px;
    align-content: start;
    transition: background var(--qd-t) var(--qd-ease);
}

    .qd .qd-cal__mc:hover {
        background: var(--qd-hov);
    }

    .qd .qd-cal__mc.is-other {
        background: color-mix(in srgb, var(--qd-ground-2) 55%, transparent);
    }

        .qd .qd-cal__mc.is-other .qd-cal__mnum {
            color: var(--qd-faint);
        }

.qd .qd-cal__mnum {
    justify-self: start;
    min-width: 21px;
    height: 21px;
    padding: 0 3px;
    display: grid;
    place-content: center;
    border-radius: 6px;
    font: 600 var(--qd-fs-1)/1 var(--qd-mono);
    color: var(--qd-ink-2);
}

.qd .qd-cal__mc.is-today .qd-cal__mnum {
    background: var(--qd-act);
    color: var(--qd-on-btn);
}

.qd .qd-evt--mini {
    position: static;
    inset-inline: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 20px;
    padding: 1px 6px;
    box-shadow: none;
    border-radius: 6px;
}

    .qd .qd-evt--mini .qd-evt__t {
        flex: none;
    }

    .qd .qd-evt--mini .qd-evt__n {
        font-size: 11px;
    }

.qd .qd-cal__more {
    --_bg: transparent;
    --_bg-h: var(--qd-act-soft);
    --_bg-a: var(--qd-act-soft);
    --_bd: transparent;
    --_bd-h: transparent;
    --_ink: var(--qd-act-ink);
    --_ink-h: var(--qd-act-ink);
    justify-self: start;
    border: 0;
    min-height: 0;
    padding: 2px 6px;
    border-radius: 6px;
    font: 600 10.5px/1 var(--qd-mono);
}

@keyframes qd-shake {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-3px);
    }

    75% {
        transform: translateX(3px);
    }
}

/* ── 22 · TELEHEALTH — the call dock, the live tab, the now pill ─────────────
   v5 fix inside: is-full used to be width:100vw, which includes the
   scrollbar gutter on Windows and produced a permanent sideways scroll
   while a call was maximised. It is now inset-pinned.
   ------------------------------------------------------------------------ */
.qd .qd-call {
    position: fixed;
    inset-block: var(--qd-safe-t) var(--qd-safe-b);
    inset-inline-end: 0;
    z-index: var(--qd-z-drawer);
    width: min(500px, 100%);
    background: var(--qd-panel);
    border-inline-start: 1px solid var(--qd-hair-2);
    box-shadow: var(--qd-sh-3);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    transform: translateX(103%);
    transition: transform 240ms var(--qd-ease), width 200ms var(--qd-ease);
}

    .qd .qd-call.is-open {
        transform: none;
    }

    .qd .qd-call.is-full {
        width: auto;
        inset-inline: 0;
        z-index: var(--qd-z-modal);
        border: 0;
    }

.qd .qd-call__hd {
    display: flex;
    align-items: center;
    gap: var(--qd-sp-3);
    min-height: 50px;
    padding: 0 var(--qd-sp-4);
    border-block-end: 1px solid var(--qd-hair);
}

.qd .qd-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 700 var(--qd-fs-0)/1 var(--qd-mono);
    letter-spacing: .13em;
    color: var(--qd-bad-ink);
}

    .qd .qd-live i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--qd-bad);
        animation: qd-pulse 1.4s var(--qd-ease) infinite;
    }

.qd .qd-call__timer {
    font: 600 var(--qd-fs-2)/1 var(--qd-mono);
    font-variant-numeric: tabular-nums;
    color: var(--qd-ink);
}

.qd .qd-call__stage {
    position: relative;
    background: #000;
}

    .qd .qd-call__stage iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

.qd .qd-call__connect {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 14px;
    background: #000;
    color: #E9EFF7;
    transition: opacity 400ms var(--qd-ease);
}

    .qd .qd-call__connect.is-hidden {
        opacity: 0;
        pointer-events: none;
    }

.qd .qd-call__ft {
    display: flex;
    align-items: center;
    gap: var(--qd-sp-2);
    padding: 10px var(--qd-sp-4);
    border-block-start: 1px solid var(--qd-hair);
    background: var(--qd-panel-2);
}

/* the floating LIVE tab while the dock is collapsed */
.qd .qd-calltab {
    position: fixed;
    inset-block-end: calc(16px + var(--qd-safe-b));
    inset-inline-end: 16px;
    z-index: var(--qd-z-float);
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 15px 0 12px;
    border-radius: var(--qd-r-pill);
    border: 1px solid var(--qd-hair-2);
    background: var(--qd-panel);
    box-shadow: var(--qd-sh-3);
    font: 600 var(--qd-fs-2)/1 var(--qd-font);
    color: var(--qd-ink);
    transform: translateY(140%);
    transition: transform 240ms var(--qd-spring), box-shadow var(--qd-t) var(--qd-ease), border-color var(--qd-t) var(--qd-ease);
}

    .qd .qd-calltab.is-visible {
        transform: none;
    }

    .qd .qd-calltab:hover {
        border-color: var(--qd-act-line);
        box-shadow: var(--qd-sh-3), 0 0 0 3px var(--qd-act-soft);
    }

    .qd .qd-calltab .qd-call__timer {
        color: var(--qd-ink-3);
        font-size: var(--qd-fs-1);
    }

/* the clinic clock pill in page headers */
.qd .qd-nowpill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 12px;
    border-radius: var(--qd-r-pill);
    border: 1px solid var(--qd-act-line);
    background: var(--qd-act-soft);
    color: var(--qd-act-ink);
    font: 600 var(--qd-fs-1)/1 var(--qd-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

    .qd .qd-nowpill i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        animation: qd-pulse 1.8s var(--qd-ease) infinite;
    }

/* ── 23 · THE AI KIT — the machine gets a voice, and only one ────────────────
   LAW 8. Violet + the filament mark everything AI does, nothing else. The
   narrative card wears a slowly turning conic seam — the only animated
   border in the product, reserved for "the machine is thinking here".
   ------------------------------------------------------------------------ */
.qd .qd-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 23px;
    padding: 0 10px;
    border-radius: var(--qd-r-pill);
    background: var(--qd-ai-soft);
    border: 1px solid var(--qd-ai-line);
    color: var(--qd-ai-ink);
    font: 700 var(--qd-fs-0)/1 var(--qd-font);
    letter-spacing: .03em;
    white-space: nowrap;
}

    .qd .qd-ai-badge svg {
        width: 12px;
        height: 12px;
    }

@property --qd-ai-a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.qd .qd-ai-card {
    position: relative;
    border-radius: var(--qd-r-lg);
    padding: var(--qd-pan-x);
    border: 1px solid transparent;
    background: linear-gradient(var(--qd-panel), var(--qd-panel)) padding-box, conic-gradient(from var(--qd-ai-a), var(--qd-ai-line), var(--qd-act-line), var(--qd-ai) 32%, var(--qd-ai-line) 60%, var(--qd-act-line), var(--qd-ai-line)) border-box;
    box-shadow: var(--qd-sh-1), var(--qd-ai-glow);
    animation: qd-ai-turn 10s linear infinite;
}

@keyframes qd-ai-turn {
    to {
        --qd-ai-a: 360deg;
    }
}

.qd .qd-ai-card__hd {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block-end: var(--qd-sp-3);
}

.qd .qd-ai-card__t {
    font: 650 var(--qd-fs-4)/1.25 var(--qd-font);
    letter-spacing: -.014em;
}

.qd .qd-ai-card__body {
    color: var(--qd-ink-2);
    font-size: var(--qd-fs-3);
    line-height: 1.62;
    text-wrap: pretty;
    white-space: pre-wrap;
}

.qd .qd-caret::after {
    content: "▍";
    color: var(--qd-ai-ink);
    animation: qd-caret 1s steps(1) infinite;
    margin-inline-start: 1px;
}

@keyframes qd-caret {
    50% {
        opacity: 0;
    }
}

.qd .qd-dots--ai {
    color: var(--qd-ai-ink);
}

/* percentile vs peer — AI Review's benchmark rows */
.qd .qd-perc {
    display: grid;
    gap: 5px;
    padding-block: 9px;
}

    .qd .qd-perc + .qd-perc {
        border-block-start: 1px solid var(--qd-hair);
    }

.qd .qd-perc__hd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font: 600 var(--qd-fs-1)/1.3 var(--qd-font);
    color: var(--qd-ink);
}

.qd .qd-perc__rank {
    font: 600 var(--qd-fs-0)/1 var(--qd-mono);
    color: var(--qd-faint);
}

.qd .qd-perc__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font: 500 var(--qd-fs-1)/1 var(--qd-font);
    color: var(--qd-ink-3);
}

.qd .qd-perc__you {
    font: 600 var(--qd-fs-2)/1 var(--qd-mono);
    color: var(--qd-ink);
}

.qd .qd-perc .qd-meter > i {
    background: var(--qd-act);
}

.qd .qd-perc.is-good .qd-meter > i {
    background: var(--qd-good);
}

.qd .qd-perc.is-warn .qd-meter > i {
    background: var(--qd-warn);
}

.qd .qd-perc.is-bad .qd-meter > i {
    background: var(--qd-bad);
}

/* heat cells — booking heatmap; --v is 0..100 */
.qd .qd-heat {
    display: grid;
    grid-template-columns: repeat(var(--cols, 24), 1fr);
    gap: 3px;
}

    .qd .qd-heat i {
        aspect-ratio: 1;
        min-width: 10px;
        border-radius: 3px;
        border: 1px solid var(--qd-hair);
        background: color-mix(in srgb, var(--qd-act) calc(var(--v, 0) * 1%), var(--qd-ground-2));
        transition: transform var(--qd-t) var(--qd-ease), box-shadow var(--qd-t) var(--qd-ease);
    }

        .qd .qd-heat i:hover {
            transform: scale(1.2);
            box-shadow: 0 0 0 2px var(--qd-act-line);
            z-index: 1;
        }

/* ── 24 · COMMAND PALETTE — ⌘K / Ctrl+K ───────────────────────────────────── */
.qd .qd-cmdk {
    position: fixed;
    inset: 0;
    z-index: var(--qd-z-modal);
    background: rgba(3, 5, 8, .70);
    -webkit-backdrop-filter: blur(4px) saturate(1.1);
    backdrop-filter: blur(4px) saturate(1.1);
    display: grid;
    justify-items: center;
    align-content: start;
    padding: 13vh var(--qd-sp-4) var(--qd-sp-4);
    animation: qd-fade 120ms var(--qd-ease);
}

.qd[data-theme="light"] .qd-cmdk {
    background: rgba(11, 16, 23, .42);
}

.qd .qd-cmdk__box {
    position: relative;
    width: min(620px, 100%);
    background: var(--qd-panel);
    border: 1px solid var(--qd-hair-2);
    border-radius: var(--qd-r-lg);
    box-shadow: var(--qd-sh-3);
    overflow: hidden;
    animation: qd-pop 200ms var(--qd-spring);
}

    .qd .qd-cmdk__box::before {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline: 14px;
        height: 1px;
        background: var(--qd-filament);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    }

.qd .qd-cmdk__in {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px;
    border-block-end: 1px solid var(--qd-hair);
}

    .qd .qd-cmdk__in .qd-i {
        width: 16px;
        height: 16px;
        color: var(--qd-faint);
        flex: none;
    }

    .qd .qd-cmdk__in input {
        border: 0;
        background: transparent;
        min-height: 48px;
        padding: 0;
        font: 500 var(--qd-fs-3)/1.3 var(--qd-font);
        border-radius: 0;
    }

        .qd .qd-cmdk__in input:focus-visible {
            box-shadow: none;
            border: 0;
            background: transparent;
        }

.qd .qd-cmdk__list {
    max-height: min(52svh, 420px);
    overflow: auto;
    padding: 4px;
    overscroll-behavior: contain;
}

.qd .qd-cmdk mark {
    background: transparent;
    color: var(--qd-act-ink);
    text-decoration: underline;
    text-decoration-color: var(--qd-act-line);
    text-underline-offset: 2px;
}

.qd .qd-cmdk .qd-menu__i.is-active {
    background: var(--qd-act-soft);
    color: var(--qd-act-ink);
}

.qd .qd-cmdk__empty {
    padding: var(--qd-sp-6);
    text-align: center;
    color: var(--qd-ink-3);
    font-size: var(--qd-fs-1);
}

.qd .qd-cmdk__ft {
    display: flex;
    gap: 14px;
    padding: 7px 14px;
    border-block-start: 1px solid var(--qd-hair);
    background: var(--qd-panel-2);
    font: 500 var(--qd-fs-0)/1.6 var(--qd-font);
    color: var(--qd-faint);
}

/* ── 25 · SHORTCUT SHEET ──────────────────────────────────────────────────── */
.qd .qd-keys {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 4px 24px;
}

.qd .qd-keys__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
    font: 500 var(--qd-fs-2)/1.3 var(--qd-font);
    color: var(--qd-ink-2);
}

.qd .qd-keys__k {
    display: inline-flex;
    gap: 4px;
    flex: none;
}

/* ── 26 · VEIL — the full-page loading moment ─────────────────────────────── */
.qd .qd-veil {
    position: fixed;
    inset: 0;
    z-index: var(--qd-z-modal);
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--qd-ground) 72%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms var(--qd-ease);
}

    .qd .qd-veil.is-open {
        opacity: 1;
        pointer-events: auto;
    }

.qd .qd-veil__card {
    display: grid;
    justify-items: center;
    gap: 11px;
    min-width: 220px;
    padding: var(--qd-sp-5) var(--qd-sp-6);
    background: var(--qd-panel);
    border: 1px solid var(--qd-hair-2);
    border-radius: var(--qd-r-lg);
    box-shadow: var(--qd-sh-3);
    position: relative;
}

    .qd .qd-veil__card::before {
        content: "";
        position: absolute;
        inset-block-start: -1px;
        inset-inline: 12px;
        height: 1px;
        background: var(--qd-filament);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    }

.qd .qd-veil__t {
    font: 600 var(--qd-fs-2)/1.3 var(--qd-font);
    color: var(--qd-ink);
}

.qd .qd-veil__s {
    font: 500 var(--qd-fs-0)/1.4 var(--qd-mono);
    color: var(--qd-faint);
}

/* ── 27 · LIST ROWS — leaderboards, logs, top clients ─────────────────────────
   The user-named offender. 54→44px, padding halved. A logs list is a list.
   ------------------------------------------------------------------------ */
.qd .qd-li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 11px;
    min-height: 44px;
    padding: 4px var(--qd-sp-3);
    transition: background var(--qd-t) var(--qd-ease);
}

    .qd .qd-li + .qd-li {
        border-block-start: 1px solid var(--qd-hair);
    }

    .qd .qd-li:hover {
        background: var(--qd-hov);
    }

.qd .qd-li__rank {
    width: 20px;
    text-align: center;
    font: 600 var(--qd-fs-1)/1 var(--qd-mono);
    color: var(--qd-faint);
}

.qd .qd-li:nth-child(1) .qd-li__rank {
    color: var(--qd-act-ink);
}

.qd .qd-li__t {
    font: 600 var(--qd-fs-2)/1.3 var(--qd-font);
    color: var(--qd-ink);
}

.qd .qd-li__m {
    grid-column: 2;
    font: 400 var(--qd-fs-1)/1.35 var(--qd-font);
    color: var(--qd-ink-3);
}

.qd .qd-li__v {
    grid-row: 1 / span 2;
    grid-column: 3;
    text-align: end;
    font: 600 var(--qd-fs-2)/1.2 var(--qd-mono);
    font-variant-numeric: tabular-nums;
    color: var(--qd-ink);
    display: grid;
    justify-items: end;
    gap: 3px;
}

.qd .qd-li--flat {
    grid-template-rows: auto;
}

    .qd .qd-li--flat .qd-li__v {
        grid-row: 1;
    }

/* ── 28 · BANNER — sticky page notices ────────────────────────────────────── */
.qd .qd-banner {
    position: sticky;
    inset-block-start: calc(var(--qd-top-h) + 8px);
    z-index: var(--qd-z-sticky);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    border-radius: 10px;
    background: var(--qd-act-soft);
    border: 1px solid var(--qd-act-line);
    color: var(--qd-act-ink);
    font: 500 var(--qd-fs-2)/1.4 var(--qd-font);
    box-shadow: var(--qd-sh-2);
    animation: qd-toast-in 240ms var(--qd-spring);
}

.qd .qd-banner--warn {
    background: var(--qd-warn-tint);
    border-color: var(--qd-warn-line);
    color: var(--qd-warn-ink);
}

.qd .qd-banner--bad {
    background: var(--qd-bad-tint);
    border-color: var(--qd-bad-line);
    color: var(--qd-bad-ink);
}

.qd .qd-banner .qd-btn {
    min-height: 26px;
}

/* ── 29 · SMALL INSTRUMENTS — avatar tones, copy, shake, rise, theme toggle ── */
.qd .qd-avatar--t1 {
    background: color-mix(in srgb, var(--qd-chart-1) 16%, var(--qd-panel));
    border-color: color-mix(in srgb, var(--qd-chart-1) 42%, transparent);
    color: var(--qd-chart-1);
}

.qd .qd-avatar--t2 {
    background: color-mix(in srgb, var(--qd-chart-2) 16%, var(--qd-panel));
    border-color: color-mix(in srgb, var(--qd-chart-2) 42%, transparent);
    color: var(--qd-chart-2);
}

.qd .qd-avatar--t3 {
    background: color-mix(in srgb, var(--qd-chart-3) 16%, var(--qd-panel));
    border-color: color-mix(in srgb, var(--qd-chart-3) 42%, transparent);
    color: var(--qd-chart-3);
}

.qd .qd-avatar--t4 {
    background: color-mix(in srgb, var(--qd-chart-4) 16%, var(--qd-panel));
    border-color: color-mix(in srgb, var(--qd-chart-4) 42%, transparent);
    color: var(--qd-chart-4);
}

.qd .qd-avatar--t5 {
    background: color-mix(in srgb, var(--qd-chart-5) 16%, var(--qd-panel));
    border-color: color-mix(in srgb, var(--qd-chart-5) 42%, transparent);
    color: var(--qd-chart-5);
}

.qd .qd-avatar--t6 {
    background: color-mix(in srgb, var(--qd-chart-6) 16%, var(--qd-panel));
    border-color: color-mix(in srgb, var(--qd-chart-6) 42%, transparent);
    color: var(--qd-chart-6);
}

.qd .qd-avatar--t7 {
    background: var(--qd-warn-tint);
    border-color: var(--qd-warn-line);
    color: var(--qd-warn-ink);
}

.qd .qd-avatar--t8 {
    background: var(--qd-good-tint);
    border-color: var(--qd-good-line);
    color: var(--qd-good-ink);
}

.qd[data-theme="light"] .qd-avatar--t1 {
    color: var(--qd-act-ink);
}

.qd [data-qd-copy] {
    cursor: pointer;
}

    .qd [data-qd-copy]:hover {
        color: var(--qd-act-ink);
    }

    .qd [data-qd-copy].is-copied {
        color: var(--qd-good-ink);
    }

.qd .qd-shake {
    animation: qd-shake .3s var(--qd-ease);
}

/* rise reveal — panels breathe in as they enter; qd.boot wires the observer */
.qd [data-qd-rise] {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .45s var(--qd-ease), transform .45s var(--qd-ease);
    transition-delay: calc(var(--i, 0) * 50ms);
}

    .qd [data-qd-rise].is-in {
        opacity: 1;
        transform: none;
    }

/* the theme toggle — sun and moon share one socket */
.qd .qd-themetoggle {
    position: relative;
    width: var(--qd-ctl-h);
    padding: 0;
}

    .qd .qd-themetoggle .qd-i {
        position: absolute;
        inset: 0;
        margin: auto;
        transition: opacity 220ms var(--qd-ease), transform 320ms var(--qd-spring);
    }

        .qd .qd-themetoggle .qd-i[data-ic="sun"] {
            opacity: 0;
            transform: rotate(-90deg) scale(.5);
        }

        .qd .qd-themetoggle .qd-i[data-ic="moon"] {
            opacity: 1;
            transform: none;
            color: var(--qd-act-ink);
        }

.qd[data-theme="light"] .qd-themetoggle .qd-i[data-ic="sun"] {
    opacity: 1;
    transform: none;
    color: var(--qd-warn-ink);
}

.qd[data-theme="light"] .qd-themetoggle .qd-i[data-ic="moon"] {
    opacity: 0;
    transform: rotate(90deg) scale(.5);
}

/* ── 30 · THEME REVEAL — the switch is a moment, not a repaint ─────────────── */
::view-transition-old(root), ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 2;
}

/* ── RESPONSIVE ADDENDA for sections 17-29 ────────────────────────────────── */
@media (max-width: 767.98px) {
    .qd .qd-hero {
        padding: var(--qd-sp-4);
    }

    .qd .qd-hero__act, .qd .qd-hero__deck {
        margin-inline-start: 0;
        width: 100%;
    }

    .qd .qd-hero__deck {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qd .qd-strip__c {
        flex-basis: 40%;
    }

    .qd .qd-chiprow {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

        .qd .qd-chiprow::-webkit-scrollbar {
            display: none;
        }

    .qd .qd-chip {
        flex: none;
        min-height: 34px;
    }

    .qd .qd-call {
        width: 100%;
    }

    .qd .qd-calltab {
        inset-inline: 12px;
        justify-content: center;
    }

    .qd .qd-cmdk {
        padding-block-start: 7vh;
    }

    .qd .qd-cal {
        --qd-gut-w: 44px;
        --qd-slot-h: 80px;
    }

    .qd .qd-cal__mc {
        min-height: 80px;
    }

    .qd .qd-sched__i {
        grid-template-columns: 46px 23px minmax(0, 1fr);
    }

    .qd .qd-sched__side {
        grid-row: auto;
        grid-column: 3;
        justify-content: flex-start;
        padding-block-start: 2px;
    }

    .qd .qd-toolbar--sticky {
        inset-block-start: 8px;
    }
}

/* ══ 31 · EXOTIC INPUTS — the advanced-search armory ════════════════════════
   ▸ TOKENPUT   qd.tokenput(input, opts) — a textbox that grows CHIPS inline.
   ▸ RANGE BRUSH qd.rangebrush(host, opts) — two thumbs over a histogram.
   ▸ SCRUBBER    qd.scrub(handle, input) — drag a label sideways to change a
     number. Shift ×10, Alt ÷10.
   The typeahead popover IS the system menu (.qd-menu.qd-float). One
   suggestion anatomy, everywhere. All three wear the ONE input skin.
   ═══════════════════════════════════════════════════════════════════════════ */
.qd .qd-tokenput {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-height: var(--qd-ctl-h);
    padding: 4px 8px;
    background: var(--qd-btn2);
    border: 1px solid var(--qd-btn2-line);
    border-radius: var(--qd-r-ctl);
    cursor: text;
    transition: border-color var(--qd-t) var(--qd-ease), box-shadow var(--qd-t) var(--qd-ease);
}

    .qd .qd-tokenput:hover {
        border-color: var(--qd-btn2-line-h);
    }

    .qd .qd-tokenput:focus-within {
        border-color: var(--qd-act);
        box-shadow: var(--qd-act-glow);
    }

.qd .qd-tokenput__in {
    flex: 1 1 90px;
    min-width: 90px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--qd-ink);
    font: 500 var(--qd-fs-2)/1.4 var(--qd-font);
    padding: 3px 2px;
}

    .qd .qd-tokenput__in::placeholder {
        color: var(--qd-faint);
    }

/* the chip */
.qd .qd-tok {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    border-radius: 7px;
    border: 1px solid var(--qd-act-line);
    background: var(--qd-act-soft);
    color: var(--qd-act-ink);
    font: 600 var(--qd-fs-1)/1 var(--qd-font);
    overflow: hidden;
    user-select: none;
    animation: qdTokIn .16s var(--qd-spring);
    transition: box-shadow var(--qd-t) var(--qd-ease);
}

@keyframes qdTokIn {
    from {
        transform: scale(.85);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.qd .qd-tok__k,
.qd .qd-tok__v {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qd .qd-tok__k {
    background: color-mix(in srgb, currentColor 13%, transparent);
    border-inline-end: 1px solid var(--qd-act-line);
    font-weight: 700;
    font-size: var(--qd-fs-0);
    letter-spacing: .02em;
    text-transform: uppercase;
}

.qd .qd-tok__x {
    display: inline-flex;
    align-items: center;
    padding: 0 7px 0 5px;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .55;
    cursor: pointer;
    font: inherit;
    min-height: 0;
    transition: opacity var(--qd-t) var(--qd-ease), background var(--qd-t) var(--qd-ease);
}

    .qd .qd-tok__x:hover {
        opacity: 1;
        background: color-mix(in srgb, currentColor 14%, transparent);
        border: 0;
        color: inherit;
    }

/* armed for deletion — the two-stage backspace */
.qd .qd-tok.is-sel {
    box-shadow: 0 0 0 3px var(--qd-act-soft), 0 0 0 1.5px var(--qd-act);
}

/* a field chosen, value still typing — dashed, breathing */
.qd .qd-tok.is-pend {
    border-style: dashed;
    animation: qdTokIn .16s var(--qd-spring), qdPendPulse 1.4s var(--qd-ease) .3s infinite;
}

@keyframes qdPendPulse {
    50% {
        border-color: var(--qd-act);
    }
}

/* negated — "everything EXCEPT this" */
.qd .qd-tok.is-neg {
    border-color: var(--qd-bad-line);
    background: var(--qd-bad-tint);
    color: var(--qd-bad-ink);
}

    .qd .qd-tok.is-neg .qd-tok__k {
        border-inline-end-color: var(--qd-bad-line);
    }

    .qd .qd-tok.is-neg .qd-tok__v::before {
        content: "≠ ";
        font-weight: 800;
        opacity: .75;
    }

/* status-toned chips */
.qd .qd-tok--good {
    border-color: var(--qd-good-line);
    background: var(--qd-good-tint);
    color: var(--qd-good-ink);
}

    .qd .qd-tok--good .qd-tok__k {
        border-inline-end-color: var(--qd-good-line);
    }

.qd .qd-tok--warn {
    border-color: var(--qd-warn-line);
    background: var(--qd-warn-tint);
    color: var(--qd-warn-ink);
}

    .qd .qd-tok--warn .qd-tok__k {
        border-inline-end-color: var(--qd-warn-line);
    }

.qd .qd-tok--bad {
    border-color: var(--qd-bad-line);
    background: var(--qd-bad-tint);
    color: var(--qd-bad-ink);
}

    .qd .qd-tok--bad .qd-tok__k {
        border-inline-end-color: var(--qd-bad-line);
    }

.qd .qd-tok--ai {
    border-color: var(--qd-ai-line);
    background: var(--qd-ai-soft);
    color: var(--qd-ai-ink);
}

    .qd .qd-tok--ai .qd-tok__k {
        border-inline-end-color: var(--qd-ai-line);
    }

/* the "＋ Create" row inside the typeahead */
.qd .qd-menu__i.is-create {
    border-block-start: 1px dashed var(--qd-hair-2);
    color: var(--qd-act-ink);
    font-weight: 650;
}

/* RANGE BRUSH */
.qd .qd-range {
    --qd-range-hist: 38px;
    position: relative;
    padding-block: 6px 4px;
}

.qd .qd-range__hist {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: var(--qd-range-hist);
    margin-block-end: 8px;
}

.qd .qd-range__bar {
    flex: 1 1 0;
    min-width: 2px;
    height: max(2px, var(--h, 10%));
    border-radius: 2px 2px 0 0;
    background: color-mix(in srgb, var(--qd-act) 16%, transparent);
    transition: background var(--qd-t) var(--qd-ease), height .25s var(--qd-ease);
}

    .qd .qd-range__bar.is-in {
        background: color-mix(in srgb, var(--qd-act) 62%, transparent);
    }

.qd .qd-range__tr {
    position: relative;
    height: 4px;
    border-radius: 3px;
    background: var(--qd-hair-2);
    cursor: pointer;
}

.qd .qd-range__fill {
    position: absolute;
    inset-block: 0;
    border-radius: 3px;
    background: var(--qd-act);
}

.qd .qd-range__th {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: var(--qd-panel);
    border: 2px solid var(--qd-act);
    box-shadow: var(--qd-sh-1);
    cursor: grab;
    touch-action: none;
    transition: transform var(--qd-t) var(--qd-spring), box-shadow var(--qd-t) var(--qd-ease);
}

    .qd .qd-range__th:hover {
        transform: scale(1.12);
    }

    .qd .qd-range__th:focus-visible {
        outline: none;
        box-shadow: var(--qd-sh-1), 0 0 0 3px var(--qd-act-soft), 0 0 0 1.5px var(--qd-act);
    }

    .qd .qd-range__th.is-drag {
        cursor: grabbing;
        transform: scale(1.18);
        box-shadow: var(--qd-sh-2), 0 0 0 5px var(--qd-act-soft);
    }

.qd .qd-range__bub {
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translate(-50%, 3px);
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--qd-panel);
    border: 1px solid var(--qd-hair-2);
    box-shadow: var(--qd-sh-1);
    font: 600 var(--qd-fs-0)/1 var(--qd-mono);
    font-variant-numeric: tabular-nums;
    color: var(--qd-ink);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--qd-t) var(--qd-ease), transform var(--qd-t) var(--qd-ease);
}

.qd .qd-range__th:hover .qd-range__bub,
.qd .qd-range__th:focus-visible .qd-range__bub,
.qd .qd-range__th.is-drag .qd-range__bub {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* SCRUBBER */
.qd .qd-scrubhandle {
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    border-block-end: 1px dashed var(--qd-act-line);
    color: var(--qd-act-ink);
    transition: color var(--qd-t) var(--qd-ease), border-color var(--qd-t) var(--qd-ease);
}

    .qd .qd-scrubhandle:hover {
        border-block-end-style: solid;
    }

    .qd .qd-scrubhandle.is-scrubbing {
        color: var(--qd-act);
        border-block-end-color: var(--qd-act);
    }

@media (prefers-reduced-motion: reduce) {
    .qd .qd-tok,
    .qd .qd-tok.is-pend {
        animation: none;
    }
}


/* ══ 32 · FILTER BAR — the Stripe-grade query rail · v5.3 ════════════════════
   qd.filterbar(host, {filters:[…], end?}) renders a row of filter PILLS.
   An unset pill reads "＋ Label" in a dashed skin; once a value is chosen
   the pill morphs to "⊗ Label │ Value ▾" — the label goes quiet, the VALUE
   carries the ink, exactly the Stripe read. Click opens a submenu (after a
   small, deliberate beat) built on the system menu, so it inherits LAW 4:
   it can never open off-screen, and it follows the pill on scroll. Multi-
   select menus stay open while you tick; the pill re-labels live. The ⊗
   clears that one filter without opening anything.

   ▓▓ THE ROW LAW (v5.3) — how this rail stays perfect on every page ▓▓
   The first field integration crammed the rail into the middle of a
   one-line toolbar as a shrinkable flex child. Result: pills wrapped
   raggedly inside their slot on desktop, and on phones the rail's
   overflow slid UNDERNEATH the sibling buttons. The cure is a layout
   contract, not a page patch:

   1 · THE RAIL OWNS ITS ROW. flex-basis:100% below means that inside ANY
       flex parent it drops onto its own line, full width. Nothing can sit
       beside it → nothing can squeeze it → nothing can ever paint over
       it. This is Stripe's own anatomy: toolbar row above (search, dates,
       tools), filter row below.
   2 · TWO ZONES, ONE ROW. Pills grow left; the optional end slot
       (opts.end → .qd-fb__end) rides right — Export / Edit-columns /
       page tools — exactly the Stripe transactions header.
   3 · DESKTOP WRAPS TIDILY. When pills outgrow the row they wrap into
       clean 8px rows; the end slot stays glued to the last row's right.
   4 · PHONES SCROLL, NEVER WRAP. ≤768px the rail becomes one snap-scroll
       lane (proximity snap, contained overscroll, hidden scrollbar,
       36px touch pills). Because the rail owns the row, a clipped pill is
       a scroll affordance — not a casualty.
   Pages therefore need ZERO sizing CSS for this component. Give it a host
   anywhere in a toolbar and the contract does the rest.
   ------------------------------------------------------------------------ */
.qd .qd-fb {
    /* THE ROW LAW — never an inline citizen of someone else's row.
       flex-basis 100% claims the row in flex parents; grid-column 1/-1
       claims it in grid parents (inert everywhere else). */
    flex: 0 0 100%;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── THE ROW LAW'S ONE EXEMPTION ─────────────────────────────────────────
   The Law exists because a rail squeezed between other controls wraps
   raggedly and, on phones, slides under its neighbours. But a SPARSE bar —
   two or three pills beside a small nav — pays for that safety with an
   empty second row, which reads as a mistake rather than as structure.
   `qd-fb--inline` opts that bar out: the rail becomes an ordinary flex
   citizen that grows into whatever room is left, while KEEPING every other
   guarantee — it still wraps tidily when it outgrows the line, and below
   768px it still becomes the snap-scroll lane (that rule targets .qd-fb,
   so the modifier never reaches it).
   Use it only when the bar's other content is genuinely small; if in doubt,
   leave the Law alone — a claimed row is never wrong, only ever generous. */
.qd .qd-fb--inline {
    flex: 1 1 auto;
    grid-column: auto;
    width: auto;
    min-width: 0;
}

/* the right-hand zone — page actions on the rail's own row, Stripe-style */
.qd .qd-fb__end {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.qd .qd-fb__pill {
    --_bg: transparent;
    --_bg-h: var(--qd-hov);
    --_bg-a: var(--qd-press);
    --_bd: var(--qd-hair-2);
    --_bd-h: var(--qd-hair-3);
    --_ink: var(--qd-ink-3);
    --_ink-h: var(--qd-ink-2);
    --_sh: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 11px 0 9px;
    border-radius: var(--qd-r-pill);
    border-style: dashed;
    font: 600 var(--qd-fs-1)/1 var(--qd-font);
    max-width: 100%;
}

    .qd .qd-fb__pill.is-set {
        --_bg: var(--qd-btn2);
        --_bg-h: var(--qd-btn2-hov);
        --_bg-a: var(--qd-btn2-press);
        --_bd: var(--qd-btn2-line);
        --_bd-h: var(--qd-btn2-line-h);
        --_ink: var(--qd-ink);
        --_ink-h: var(--qd-ink);
        border-style: solid;
        padding-inline-start: 7px;
    }

    .qd .qd-fb__pill.is-open {
        --_bd: var(--qd-act);
        --_bd-h: var(--qd-act);
        box-shadow: var(--qd-act-glow);
    }

    .qd .qd-fb__pill:active {
        transform: scale(.97);
    }

/* the leading glyph — ＋ when unset, becomes the ⊗ CLEAR control when set */
.qd .qd-fb__ic {
    display: inline-grid;
    place-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex: none;
    color: var(--qd-faint);
    transition: color var(--qd-t) var(--qd-ease), background var(--qd-t) var(--qd-ease), transform var(--qd-t) var(--qd-spring);
}

    .qd .qd-fb__ic svg {
        width: 12px;
        height: 12px;
        display: block;
    }

.qd .qd-fb__pill.is-set .qd-fb__ic {
    color: var(--qd-ink-3);
}

    .qd .qd-fb__pill.is-set .qd-fb__ic:hover {
        color: var(--qd-bad-ink);
        background: var(--qd-bad-tint);
        transform: scale(1.1);
    }

.qd .qd-fb__lbl {
    white-space: nowrap;
}

.qd .qd-fb__pill.is-set .qd-fb__lbl {
    color: var(--qd-ink-3);
    font-weight: 550;
}

/* the internal hairline between label and value — the Stripe seam */
.qd .qd-fb__sep {
    width: 1px;
    align-self: stretch;
    margin-block: 5px;
    background: var(--qd-hair-2);
    flex: none;
}

.qd .qd-fb__val {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22ch;
    color: var(--qd-ink);
    animation: qd-fb-swap 200ms var(--qd-spring);
}

@keyframes qd-fb-swap {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
}

.qd .qd-fb__pill .qd-caret {
    margin-inline-start: -1px;
}

    .qd .qd-fb__pill .qd-caret::after {
        content: none; /* the typing caret animation must not fire here */
    }

.qd .qd-fb__caret {
    width: 8px;
    height: 8px;
    flex: none;
    border-inline-end: 1.6px solid var(--qd-faint);
    border-block-end: 1.6px solid var(--qd-faint);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--qd-t) var(--qd-ease);
}

.qd .qd-fb__pill.is-open .qd-fb__caret {
    transform: rotate(-135deg) translateY(-1px);
}

/* the trailing text controls */
.qd .qd-fb__clear {
    --_bg: transparent;
    --_bg-h: transparent;
    --_bg-a: transparent;
    --_bd: transparent;
    --_bd-h: transparent;
    --_ink: var(--qd-act-ink);
    --_ink-h: var(--qd-act-ink);
    --_sh: none;
    min-height: 28px;
    padding: 0 6px;
    font: 600 var(--qd-fs-1)/1 var(--qd-font);
    border: 0;
}

    .qd .qd-fb__clear:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
        border: 0;
    }

/* ── the SUBMENU — the system menu, tuned for choosing ── */
.qd .qd-fbmenu {
    min-width: 220px;
    padding-block: 5px;
}

    .qd .qd-fbmenu.is-open {
        animation: qd-fb-open 200ms var(--qd-spring);
    }

@keyframes qd-fb-open {
    from {
        opacity: 0;
        transform: translateY(-5px) scale(.97);
    }
}

/* option rows cascade in — the "awesome animation" is restraint on a timer */
.qd .qd-fbmenu .qd-menu__i {
    animation: qd-fb-item 260ms var(--qd-ease) both;
    animation-delay: calc(var(--i, 0) * 18ms);
}

@keyframes qd-fb-item {
    from {
        opacity: 0;
        transform: translateX(-5px);
    }
}

/* the selection glyph — a radio dot or a check square, painted like our inputs */
.qd .qd-fb__box {
    position: relative;
    width: 15px;
    height: 15px;
    flex: none;
    border: 1.5px solid var(--qd-hair-3);
    background: var(--qd-btn2);
    transition: border-color var(--qd-t) var(--qd-ease), background var(--qd-t) var(--qd-ease);
}

.qd .qd-fb__box--r {
    border-radius: 50%;
}

.qd .qd-fb__box--c {
    border-radius: 4px;
}

.qd .qd-fb__box::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    transform: scale(0);
    transition: transform 130ms var(--qd-spring);
    background: var(--qd-on-btn);
}

.qd .qd-fb__box--r::before {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.qd .qd-fb__box--c::before {
    width: 8px;
    height: 8px;
    clip-path: polygon(14% 46%, 0 62%, 40% 100%, 100% 18%, 84% 4%, 38% 70%);
}

.qd .qd-menu__i[aria-checked="true"] .qd-fb__box {
    background: var(--qd-act);
    border-color: var(--qd-act);
}

    .qd .qd-menu__i[aria-checked="true"] .qd-fb__box::before {
        transform: scale(1);
    }

.qd .qd-menu__i[aria-checked="true"] {
    color: var(--qd-ink);
    font-weight: 600;
}

/* tone dots for status-flavoured options */
.qd .qd-fb__tone {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--qd-faint);
}

.qd .qd-fb__tone--good {
    background: var(--qd-good);
}

.qd .qd-fb__tone--warn {
    background: var(--qd-warn);
}

.qd .qd-fb__tone--bad {
    background: var(--qd-bad);
}

/* the search row of a searchable menu */
.qd .qd-fb__find {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -5px -4px 5px;
    padding: 4px 12px;
    border-block-end: 1px solid var(--qd-hair);
}

    .qd .qd-fb__find .qd-i {
        width: 13px;
        height: 13px;
        color: var(--qd-faint);
        flex: none;
    }

    .qd .qd-fb__find input {
        border: 0;
        background: transparent;
        min-height: 32px;
        padding: 0;
        font: 500 var(--qd-fs-1)/1.3 var(--qd-font);
        border-radius: 0;
        flex: 1;
        min-width: 0;
    }

        .qd .qd-fb__find input:focus-visible {
            box-shadow: none;
            border: 0;
            background: transparent;
        }

/* multi-select footer: Clear · n selected · Done */
.qd .qd-fb__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 5px -4px -5px;
    padding: 6px 8px 6px 12px;
    border-block-start: 1px solid var(--qd-hair);
}

    .qd .qd-fb__foot .qd-count {
        margin-inline-start: auto;
    }

.qd .qd-fbmenu .qd-cmdk__empty {
    padding: var(--qd-sp-4);
}

@media (max-width: 767.98px) {
    .qd .qd-fb {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding-block: 3px; /* the is-open ring must not clip on the lane */
    }

        .qd .qd-fb::-webkit-scrollbar {
            display: none;
        }

    /* below 768 the Law returns even for an exempted rail: the lane needs the
       full width to be a lane at all, so --inline gives its row back */
    .qd .qd-fb--inline {
        flex-basis: 100%;
    }

    .qd .qd-fb__pill {
        flex: none;
        min-height: 36px;
        scroll-snap-align: start;
    }

    .qd .qd-fb__clear {
        flex: none;
        min-height: 36px;
    }

    /* on the lane the end slot rides after Clear instead of floating right —
       one finger-track holds the whole vocabulary */
    .qd .qd-fb__end {
        margin-inline-start: 0;
        flex: none;
        flex-wrap: nowrap;
    }

        .qd .qd-fb__end .qd-btn {
            min-height: 36px;
        }
}

@media (prefers-reduced-motion: reduce) {
    .qd .qd-fbmenu .qd-menu__i, .qd .qd-fb__val {
        animation: none;
    }
}


/* ── 33 · ACTION BAR — the "apply / save" rail at the foot of a page ────────
   Pages were each inventing this: a bar pinned to the bottom holding the
   commit action for a form or a filter set. Hand-rolled, they picked
   arbitrary z-index values (85 · 101 · 200 were all in the wild) and sat at
   bottom:0, which put them UNDER the shell's taskbar. This is the one
   model: it is STICKY, so it rides inside the content column and can never
   cover the sidebar; it clears the app chrome through --qd-safe-b; and its
   z-index comes from the ladder instead of a guess.

   <div class="qd-actionbar">
     <span class="qd-actionbar__l">3 filters · 42 results</span>
     <button class="qd-btn qd-btn--ghost">Reset</button>
     <button class="qd-btn qd-btn--primary">Apply</button>
   </div>
   ------------------------------------------------------------------------ */
.qd .qd-actionbar {
    position: sticky;
    inset-block-end: calc(var(--qd-safe-b) + 12px);
    z-index: var(--qd-z-sticky);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--qd-sp-2);
    min-height: 52px;
    margin-block-start: var(--qd-sp-4);
    padding: 8px 12px;
    border-radius: var(--qd-r-panel);
    border: 1px solid var(--qd-hair-2);
    background: color-mix(in srgb, var(--qd-panel) 90%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--qd-sh-2);
}

.qd .qd-actionbar__l {
    margin-inline-end: auto;
    min-width: 0;
    font: 500 var(--qd-fs-1)/1.35 var(--qd-font);
    color: var(--qd-ink-3);
}

    .qd .qd-actionbar__l b {
        color: var(--qd-ink);
        font-weight: 650;
    }

/* it can retire itself when there is nothing to commit */
.qd .qd-actionbar.is-idle {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--qd-t) var(--qd-ease), transform var(--qd-t) var(--qd-ease);
}

/* a page that genuinely needs it welded to the viewport (a builder canvas,
   say) opts in — it still clears the chrome, and still never crosses the
   sidebar because it is pinned to the content column's inline box */
.qd .qd-actionbar--float {
    position: fixed;
    inset-inline: auto;
    inset-block-end: calc(var(--qd-safe-b) + 12px);
    z-index: calc(var(--qd-z-drawer) - 2);
    width: min(760px, calc(100vw - var(--qd-side-w) - 48px));
}

@media (max-width: 767.98px) {
    .qd .qd-actionbar {
        inset-block-end: calc(var(--qd-safe-b) + 8px);
        padding: 8px 10px;
    }

        .qd .qd-actionbar > .qd-btn {
            flex: 1 1 auto;
        }

    .qd .qd-actionbar--float {
        width: calc(100vw - 24px);
    }
}

/* ── LAST WORD · the floating layer must never lose a cascade tie ──────────
   Compound (0,3,0) re-declarations at the end of the file, so no future
   component rule can take the position property back (learned in v3).
   --------------------------------------------------------------------- */
.qd .qd-float, .qd .qd-menu.qd-float, .qd .qd-tip.qd-float,
.qd .qd-cmdk, .qd .qd-veil, .qd .qd-call, .qd .qd-calltab {
    position: fixed;
}

/* ─────────────────────────────────────────────────────────────────────────
   LONG LABELS STAY INSIDE SELECT BUTTONS (kit-wide)
   A 48-character doctor name ("Bartholomew-Montgomery Van-Der-Bilderbeck-
   Smythe") walked straight out of .qd-sel__btn in Add_Doctor's shifts
   header. The label span now ellipsizes instead of escaping; the caret
   pseudo-element keeps its room. Appended last so the cascade wins in
   every page that uses the kit select, both themes.
   ────────────────────────────────────────────────────────────────────── */
.qd .qd-sel__btn {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.qd .qd-sel__btn > span {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}