/* PR-ADMIN-FROM-SCRATCH-1 (2026-05-28) — clean foundation.
 *
 * Replaces the prior 600-line admin-shell.css + 232-line admin-polish.css.
 * Operator: "remove the old UI entirely first and rebuild it."
 *
 * NINE tokens. ONE button system. ONE card primitive. ONE input style.
 * No tints. No hover-tints. No state-secondary-soft. Restraint is the
 * polish.
 *
 * Scoped to body[data-admin-shell="on"] so existing non-admin pages
 * (login, tablets, etc.) are unaffected. Every admin page opts in via
 * the body attribute + including this file.
 */

/* ────────────────────────────────────────────────────────────────
   Tokens — 9 colors, 6 type sizes, 9 spacing values, 4 radii
   ──────────────────────────────────────────────────────────────── */

body[data-admin-shell="on"] {
    /* Color — nine tokens. Values MIRROR the main SPA light theme
       (app.css :root[data-theme="light"]) so the admin console + every
       standalone page that rides these tokens (pricing, standards, …)
       reads as the SAME app, in the SAME light/dark themes. */
    --canvas:   #F3F5F8;      /* page bg      = main --bg   */
    --paper:    #FFFFFF;      /* card bg      = main --pn   */
    --ink:      #1A222E;      /* primary text = main --txt  */
    --muted:    #5A6573;      /* secondary    = main --dim  */
    --faint:    #D9DFE7;      /* borders      = main --bdr  */
    --hairline: #EEF1F5;      /* subtle dividers            */
    --accent:   #2563EB;      /* blueprint blue = main --acc (was cyan #0891b2) */
    --danger:   #D33A4B;      /* = main --no   */
    --warn:     #C77700;      /* = main --warn */

    /* Sidebar palette — deep slate, white-tint hovers. Ink/muted kept bright
       for legibility on the dark rail (PR-ADMIN-NAV-CONTRAST 2026-08-07). */
    --side-bg:    #0f172a;
    --side-ink:   #E2E8F0;
    --side-hot:   #ffffff;
    --side-muted: #93A2B7;
    --side-hover: rgba(255, 255, 255, 0.04);
    --side-rule:  rgba(255, 255, 255, 0.06);

    /* Type scale: 12 / 14 / 16 / 20 / 28 / 40 */
    --t-xs:  12px;
    --t-sm:  14px;
    --t:     16px;
    --t-md:  20px;
    --t-lg:  28px;
    --t-xl:  40px;

    /* Spacing: 4 8 12 16 24 32 48 64 96 */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  24px;
    --s-6:  32px;
    --s-7:  48px;
    --s-8:  64px;
    --s-9:  96px;

    /* Radii */
    --r-sm: 6px;
    --r:    8px;
    --r-md: 12px;
    --r-lg: 16px;

    /* One shadow, layered subtle */
    --shadow:
        0 1px 0 rgba(15, 23, 42, 0.04),
        0 1px 3px rgba(15, 23, 42, 0.06);

    background: var(--canvas);
    color: var(--ink);
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    font-size: var(--t-sm);
    line-height: 1.5;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ────────────────────────────────────────────────────────────────
   Body layout — home-style shell (PR-ADMIN-HOME-SHELL 2026-08-09).
   A slim dark TOP BAR (hamburger · Home · user/sign-out) with the full
   nav living in a SLIDE-OUT DRAWER the hamburger opens — mirrors
   index.html's #app-topbar + #app-sidebar overlay so the admin console
   reads as the same product.
   ──────────────────────────────────────────────────────────────── */

body[data-admin-shell="on"].admin-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Top bar: hamburger + Home (left) · spacer · user + sign-out (right) ── */
body[data-admin-shell="on"] .admin-topbar {
    position: sticky;
    top: 0;
    z-index: 90;   /* above the drawer + backdrop so the hamburger stays live */
    box-sizing: border-box;
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0 var(--s-4);
    background: var(--side-bg);
    color: var(--side-ink);
    border-bottom: 1px solid var(--side-rule);
}

body[data-admin-shell="on"] .admin-menu-btn {
    flex-shrink: 0;
    width: 44px; height: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r);
    color: var(--side-ink);
    cursor: pointer;
    transition: background 120ms, color 120ms;
}
body[data-admin-shell="on"] .admin-menu-btn:hover {
    background: var(--side-hover);
    color: var(--side-hot);
    border-color: transparent;
}
body[data-admin-shell="on"] .admin-menu-btn svg { width: 24px; height: 24px; display: block; }

body[data-admin-shell="on"] a.admin-home-btn {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: var(--s-1);
    height: 40px; padding: 0 var(--s-3);
    color: var(--side-hot);
    text-decoration: none;
    font-size: var(--t-sm); font-weight: 600;
    border: 1px solid var(--side-rule);
    border-radius: var(--r);
    transition: background 120ms, border-color 120ms;
}
body[data-admin-shell="on"] a.admin-home-btn:hover {
    background: var(--side-hover);
    border-color: var(--side-muted);
    text-decoration: none;
}
body[data-admin-shell="on"] a.admin-home-btn.active {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent) 50%, var(--side-rule));
}
body[data-admin-shell="on"] a.admin-home-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

body[data-admin-shell="on"] .admin-topbar-spacer { flex: 1 1 auto; }

body[data-admin-shell="on"] .admin-topbar-user {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: var(--s-3);
    padding-left: var(--s-3);
}
body[data-admin-shell="on"] .admin-topbar-user .who {
    color: var(--side-hot);
    font-size: var(--t-sm); font-weight: 600;
    white-space: nowrap;
}
body[data-admin-shell="on"] .admin-topbar-user a.sign-out {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--side-muted);
    font-size: var(--t-xs); font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    padding: 6px 8px; border-radius: var(--r-sm);
    transition: color 120ms, background 120ms;
}
body[data-admin-shell="on"] .admin-topbar-user a.sign-out:hover {
    color: var(--side-hot);
    background: var(--side-hover);
    text-decoration: none;
}

/* ── Horizontal admin nav inside the top bar (Back to app + sections) ── */
body[data-admin-shell="on"] .admin-topnav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--s-1);
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
body[data-admin-shell="on"] .admin-topnav::-webkit-scrollbar { height: 0; }

body[data-admin-shell="on"] .admin-topnav-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--s-1);
    flex-shrink: 0;
}
body[data-admin-shell="on"] .admin-topnav-group + .admin-topnav-group {
    border-left: 1px solid var(--side-rule);
    margin-left: var(--s-2);
    padding-left: var(--s-2);
}

body[data-admin-shell="on"] .admin-topnav a.admin-sidebar-link {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 8px var(--s-3);
    color: var(--side-ink);
    text-decoration: none;
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--r);
    transition: color 120ms, background 120ms;
}
body[data-admin-shell="on"] .admin-topnav a.admin-sidebar-link:hover {
    color: var(--side-hot);
    background: var(--side-hover);
    text-decoration: none;
}
body[data-admin-shell="on"] .admin-topnav a.admin-sidebar-link.active {
    color: var(--side-hot);
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    font-weight: 600;
}

/* Setup group in the top bar — caret points DOWN (flyout drops below). */
body[data-admin-shell="on"] .admin-topnav .nav-group { position: relative; display: inline-flex; }
body[data-admin-shell="on"] .admin-topnav a.admin-sidebar-link.nav-parent {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}
body[data-admin-shell="on"] .admin-topnav .nav-parent .nav-caret {
    transform: rotate(90deg);   /* › → ⌄ */
}
body[data-admin-shell="on"] .admin-topnav .nav-group:hover .nav-parent .nav-caret {
    color: var(--side-hot);
    transform: rotate(90deg) translateX(1px);
}

/* ── Backdrop behind the drawer (click to dismiss) ── */
body[data-admin-shell="on"] .admin-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}
body[data-admin-shell="on"][data-admin-nav-open="true"] .admin-nav-backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* ────────────────────────────────────────────────────────────────
   Slide-out side-nav DRAWER — the full vertical nav, opened by the
   hamburger. Off-canvas by default; slides in over the backdrop.
   ──────────────────────────────────────────────────────────────── */

body[data-admin-shell="on"] .admin-sidebar {
    position: fixed;
    top: 56px; left: 0; bottom: 0;   /* slides in below the top bar */
    z-index: 80;
    width: 288px; max-width: 88vw;
    box-sizing: border-box;
    background: var(--side-bg);
    color: var(--side-ink);
    border-right: 1px solid var(--side-rule);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;                /* inner .admin-nav-scroll scrolls */
    transform: translateX(-100%);    /* HIDDEN by default */
    transition: transform 200ms ease;
}
body[data-admin-shell="on"][data-admin-nav-open="true"] .admin-sidebar {
    transform: translateX(0);
}

/* Drawer close (X) — top-right of the drawer. */
body[data-admin-shell="on"] .admin-nav-close {
    position: absolute;
    top: 10px; right: 10px;
    width: 32px; height: 32px; min-height: 0;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    background: transparent; border: none; border-radius: var(--r-sm);
    color: var(--side-muted); cursor: pointer;
    transition: color 120ms, background 120ms;
}
body[data-admin-shell="on"] .admin-nav-close:hover { color: var(--side-hot); background: var(--side-hover); }
body[data-admin-shell="on"] .admin-nav-close svg { width: 18px; height: 18px; display: block; }

/* ── Drawer nav (mirrors the SPA sidebar): grouped, icon + label rows ── */
body[data-admin-shell="on"] .admin-nav-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 44px var(--s-3) var(--s-3);   /* 44px top clears the close (X) */
    scrollbar-width: thin;
    scrollbar-color: var(--side-rule) transparent;
}

body[data-admin-shell="on"] .admin-nav-group {
    padding: var(--s-2) 0;
}
body[data-admin-shell="on"] .admin-nav-group + .admin-nav-group {
    border-top: 1px solid var(--side-rule);
}

body[data-admin-shell="on"] .admin-nav-section {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--side-muted);
    padding: var(--s-2) var(--s-3) 6px;
}

body[data-admin-shell="on"] a.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px var(--s-3);
    margin: 1px 0;
    border-radius: var(--r);
    border-left: 3px solid transparent;
    color: var(--side-ink);
    text-decoration: none;
    font-size: var(--t);
    font-weight: 500;
    line-height: 1.2;
    transition: background 120ms, color 120ms, border-color 120ms;
}
body[data-admin-shell="on"] a.admin-nav-item:hover {
    background: var(--side-hover);
    color: var(--side-hot);
    text-decoration: none;
}
body[data-admin-shell="on"] a.admin-nav-item .nav-ico {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--side-muted);
    transition: color 120ms;
}
body[data-admin-shell="on"] a.admin-nav-item .nav-ico svg { width: 20px; height: 20px; display: block; }
body[data-admin-shell="on"] a.admin-nav-item:hover .nav-ico { color: var(--side-ink); }
body[data-admin-shell="on"] a.admin-nav-item .nav-lbl { flex: 1; }
body[data-admin-shell="on"] a.admin-nav-item .nav-ext { flex-shrink: 0; color: var(--side-muted); font-size: 12px; }
body[data-admin-shell="on"] a.admin-nav-item.active {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border-left-color: var(--accent);
    color: var(--side-hot);
    font-weight: 600;
}
body[data-admin-shell="on"] a.admin-nav-item.active .nav-ico { color: var(--accent); }

body[data-admin-shell="on"] .admin-sidebar-brand {
    padding: 0 var(--s-5) var(--s-5);
    border-bottom: 1px solid var(--side-rule);
    margin-bottom: var(--s-4);
    cursor: pointer;
}

body[data-admin-shell="on"] .admin-sidebar-brand .brand-name {
    font-size: var(--t);
    font-weight: 600;
    color: var(--side-hot);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

body[data-admin-shell="on"] .admin-sidebar-brand .brand-sub {
    font-size: var(--t-xs);
    color: var(--side-muted);
    font-weight: 500;
    margin-top: 2px;
}

body[data-admin-shell="on"] .admin-sidebar-section {
    padding: var(--s-3) 0;
}

body[data-admin-shell="on"] .admin-sidebar-section + .admin-sidebar-section {
    border-top: 1px solid var(--side-rule);
    margin-top: var(--s-3);
}

body[data-admin-shell="on"] .admin-sidebar a.admin-sidebar-link {
    display: block;
    padding: 8px var(--s-5);
    color: var(--side-ink);
    text-decoration: none;
    font-size: var(--t-sm);
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: color 120ms, background 120ms, border-color 120ms;
    line-height: 1.5;
}

body[data-admin-shell="on"] .admin-sidebar a.admin-sidebar-link:hover {
    color: var(--side-hot);
    background: var(--side-hover);
}

body[data-admin-shell="on"] .admin-sidebar a.admin-sidebar-link.active {
    color: var(--side-hot);
    background: var(--side-hover);
    border-left-color: var(--accent);
    font-weight: 600;
}

/* ────────────────────────────────────────────────────────────────
   Setup nav — the rail row + its SECONDARY FLYOUT nav bar
   (PR-SETUP-FLYOUT). Hovering "Setup" opens a cascading flyout to the
   RIGHT of the drawer, the 5 sections shown as one-open-at-a-time
   accordions. Mobile (ui-mode) hides the flyout — Setup is just a link.
   ──────────────────────────────────────────────────────────────── */
body[data-admin-shell="on"] .nav-group { position: relative; }

/* Rail row: label left, caret right — the caret signals "opens a menu"
   (leaf items have none). It brightens while the flyout is open (hover). */
body[data-admin-shell="on"] .admin-sidebar a.admin-sidebar-link.nav-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}
body[data-admin-shell="on"] .nav-parent .nav-caret {
    color: var(--side-muted);
    font-size: 15px;
    line-height: 1;
    transition: transform 150ms ease, color 120ms;
}
body[data-admin-shell="on"] .nav-group:hover .nav-parent .nav-caret {
    color: var(--side-hot);
    transform: translateX(1px);
}

/* ── Setup nav: QuickBooks-style cascading FLYOUT CARDS ───────────────
   Two content-sized, rounded, floating cards (NOT full-height bars).
   Card A (.setup-flyout) lists the 5 sections; hovering a section opens
   Card B (.setup-subflyout) beside THAT section with its pages
   (progressive: Setup → A, section → B). Both are fixed on <body>,
   JS-positioned next to their trigger, rounded on every corner with a
   layered shadow so they float, and dismiss on a 220ms delay.
   ──────────────────────────────────────────────────────────────────── */
body[data-admin-shell="on"] .setup-flyout,
body[data-admin-shell="on"] .setup-subflyout {
    position: fixed;
    top: 0; left: 240px;                 /* JS sets the real top/left */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 16px);
    background: var(--side-bg);
    border-radius: var(--r-md);          /* rounded on ALL corners */
    overflow: hidden;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-6px);
    transition: opacity 130ms ease, transform 130ms ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 12px 32px rgba(0, 0, 0, 0.55),
        0 28px 60px rgba(0, 0, 0, 0.32);
}
body[data-admin-shell="on"] .setup-flyout { width: 234px; }
body[data-admin-shell="on"] .setup-subflyout { width: 290px; z-index: 201; }
body[data-admin-shell="on"] .setup-flyout.is-visible,
body[data-admin-shell="on"] .setup-subflyout.is-visible {
    opacity: 1; pointer-events: auto; transform: translateX(0);
}

/* Card headers */
body[data-admin-shell="on"] .sf-header {
    flex-shrink: 0;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--side-rule);
}
body[data-admin-shell="on"] .sf-header-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 0.10em;
    text-transform: uppercase; color: var(--side-muted); line-height: 1; margin-bottom: 5px;
}
body[data-admin-shell="on"] .sf-header-title {
    font-size: 13px; font-weight: 400; color: var(--side-ink); line-height: 1.4;
}
body[data-admin-shell="on"] .sf-subheader {
    flex-shrink: 0;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--side-rule);
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--side-muted); line-height: 1;
}
body[data-admin-shell="on"] .setup-flyout-close {
    flex-shrink: 0; width: 26px; height: 26px; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: var(--r-sm);
    color: var(--side-muted); cursor: pointer; font-size: 17px; line-height: 1; padding: 0;
    transition: color 120ms, background 120ms;
}
body[data-admin-shell="on"] .setup-flyout-close:hover { color: var(--side-hot); background: var(--side-hover); }

/* Scroll region (content-sized; scrolls only if taller than the viewport) */
body[data-admin-shell="on"] .sf-scroll {
    overflow-y: auto; padding: 6px 0;
    scrollbar-width: thin; scrollbar-color: var(--side-rule) transparent;
}

/* Section rows (Card A) — rounded pill on hover / open, icon tints accent. */
body[data-admin-shell="on"] .sf-section-row {
    display: flex; align-items: center; gap: 10px;
    padding: 0 12px 0 14px; height: 46px; margin: 1px 6px;
    border-radius: var(--r); cursor: pointer; user-select: none; position: relative;
    transition: background 120ms, color 120ms;
}
body[data-admin-shell="on"] .sf-section-row:hover,
body[data-admin-shell="on"] .sf-section-row.is-open { background: var(--side-hover); }
body[data-admin-shell="on"] .sf-section-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
body[data-admin-shell="on"] .sf-section-icon {
    flex-shrink: 0; width: 16px; height: 16px; color: var(--side-muted);
    display: inline-flex; align-items: center; justify-content: center; transition: color 120ms;
}
body[data-admin-shell="on"] .sf-section-icon svg { width: 16px; height: 16px; display: block; }
body[data-admin-shell="on"] .sf-section-row.is-open .sf-section-icon,
body[data-admin-shell="on"] .sf-section-row.is-current .sf-section-icon { color: var(--accent); }
body[data-admin-shell="on"] .sf-section-label {
    flex: 1; font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--side-muted); line-height: 1; transition: color 120ms;
}
body[data-admin-shell="on"] .sf-section-row:hover .sf-section-label,
body[data-admin-shell="on"] .sf-section-row.is-open .sf-section-label,
body[data-admin-shell="on"] .sf-section-row.is-current .sf-section-label { color: var(--side-hot); }
body[data-admin-shell="on"] .sf-section-chevron {
    flex-shrink: 0; font-size: 14px; color: var(--side-muted); line-height: 1;
    transition: transform 120ms, color 120ms;
}
body[data-admin-shell="on"] .sf-section-row:hover .sf-section-chevron,
body[data-admin-shell="on"] .sf-section-row.is-open .sf-section-chevron { transform: translateX(2px); color: var(--side-ink); }

/* PR-SETUP-FLYOUT-DASHBOARD (2026-08-07): the direct Dashboard link at the top
   of Card A. Styled as a section row for visual consistency, but it's a real
   <a> LEAF (no chevron, no sub-flyout) — so kill the underline and give it the
   accent-tinted "current" state used by the Card B items. */
body[data-admin-shell="on"] a.sf-section-link { text-decoration: none; }
body[data-admin-shell="on"] a.sf-section-link.is-current { background: rgba(37, 99, 235, 0.14); }
body[data-admin-shell="on"] a.sf-section-link.is-current .sf-section-icon { color: var(--accent); }
body[data-admin-shell="on"] a.sf-section-link.is-current .sf-section-label { color: var(--side-hot); }
/* Hairline splitting the direct link from the expandable sections below. */
body[data-admin-shell="on"] .sf-divider { height: 1px; background: var(--side-rule); margin: 5px 12px; }

/* Item rows (Card B) — name + description, rounded hover pill. */
body[data-admin-shell="on"] a.sf-item {
    display: block; padding: 9px 14px; margin: 1px 6px; text-decoration: none;
    border-radius: var(--r); transition: background 120ms;
}
body[data-admin-shell="on"] a.sf-item:hover { background: var(--side-hover); text-decoration: none; }
body[data-admin-shell="on"] a.sf-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
body[data-admin-shell="on"] a.sf-item.is-current { background: rgba(37, 99, 235, 0.14); }
body[data-admin-shell="on"] .sf-item-name {
    font-size: 14px; font-weight: 500; color: var(--side-ink); line-height: 1.35; transition: color 120ms;
}
body[data-admin-shell="on"] a.sf-item:hover .sf-item-name,
body[data-admin-shell="on"] a.sf-item.is-current .sf-item-name { color: var(--side-hot); }
body[data-admin-shell="on"] .sf-item-desc {
    font-size: 12px; font-weight: 400; color: var(--side-muted); line-height: 1.4; margin-top: 2px;
}

body[data-admin-shell="on"] .admin-sidebar-footer {
    flex: 0 0 auto;
    margin-top: 0;
    padding: var(--s-2) var(--s-3) var(--s-4);
    border-top: 1px solid var(--side-rule);
}

/* Appearance switch (PR-ADMIN-THEME-TOGGLE 2026-08-07). A subtle pill on the
   dark rail — overrides the generic admin button (light paper bg) so it reads
   as sidebar chrome, not a page button. */
body[data-admin-shell="on"] .admin-sidebar-footer .admin-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0 0 var(--s-2);
    padding: 7px 12px;
    background: var(--side-hover);
    border: 1px solid var(--side-rule);
    color: var(--side-ink);
    border-radius: var(--r);
    font-size: var(--t-xs);
    font-weight: 600;
    min-height: 0;
    cursor: pointer;
    transition: color 120ms, background 120ms, border-color 120ms;
}

body[data-admin-shell="on"] .admin-sidebar-footer .admin-theme-toggle:hover {
    color: var(--side-hot);
    border-color: var(--side-muted);
    background: var(--side-hover);
}

body[data-admin-shell="on"] .admin-sidebar-footer .admin-theme-toggle .tt-ico {
    font-size: 14px;
    line-height: 1;
}

/* ────────────────────────────────────────────────────────────────
   Main column — generous breathing room
   ──────────────────────────────────────────────────────────────── */

body[data-admin-shell="on"] .admin-main {
    padding: var(--s-8) var(--s-9);
    /* PR-ADMIN-P6 (owner-locked): 1200px is the ARTICLE default; dense
       pages (floor, station lists, inventory) opt into full width with
       data-admin-wide on <body>. */
    max-width: 1200px;
    margin: 0 auto;             /* PR-ADMIN-TOP-NAV: center under the full-width top bar */
    width: 100%;
    box-sizing: border-box;
}
body[data-admin-shell="on"][data-admin-wide] .admin-main {
    max-width: none;
}

@media (max-width: 1100px) {
    body[data-admin-shell="on"] .admin-main { padding: var(--s-6) var(--s-6); }
}

/* Narrow window / MOBILE mode: the drawer pattern already works at every size,
   so the nav is unchanged — just tighten the main padding and drop the Setup
   flyout (hover cascades don't suit touch; Setup stays a link to the overview,
   and its child pages are reachable from the Setup dashboard). */
@media (max-width: 720px) {
    body[data-admin-shell="on"] .setup-flyout,
    body[data-admin-shell="on"] .setup-subflyout { display: none; }
    body[data-admin-shell="on"] .admin-main { padding: var(--s-5); }
}
html[data-ui-mode="mobile"] body[data-admin-shell="on"] .setup-flyout,
html[data-ui-mode="mobile"] body[data-admin-shell="on"] .setup-subflyout { display: none !important; }
html[data-ui-mode="mobile"] body[data-admin-shell="on"] .nav-parent .nav-caret { display: none; }
html[data-ui-mode="mobile"] body[data-admin-shell="on"] .admin-main { padding: var(--s-5); }

/* ────────────────────────────────────────────────────────────────
   Page header — title + subtitle, no chrome
   ──────────────────────────────────────────────────────────────── */

/* Per-page back button (injected by admin-shell.js on every sub-page). Sits
   above the page-head so drilling in from Setup/System always has a way back. */
body[data-admin-shell="on"] .admin-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--s-4);
    padding: 6px 2px;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    transition: color 120ms;
}

body[data-admin-shell="on"] .admin-back:hover {
    color: var(--accent);
}

body[data-admin-shell="on"] .page-head {
    margin: 0 0 var(--s-7) 0;
}

body[data-admin-shell="on"] .page-head h1 {
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
}

body[data-admin-shell="on"] .page-head .sub {
    color: var(--muted);
    font-size: var(--t);
    margin: var(--s-2) 0 0 0;
    max-width: 60ch;
    line-height: 1.55;
}

/* ────────────────────────────────────────────────────────────────
   Cards — single primitive
   ──────────────────────────────────────────────────────────────── */

body[data-admin-shell="on"] .card {
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: var(--s-6);
    box-shadow: var(--shadow);
    margin-bottom: var(--s-5);
}

body[data-admin-shell="on"] .card.warn   { border-left: 3px solid var(--warn); }
body[data-admin-shell="on"] .card.danger { border-left: 3px solid var(--danger); }
body[data-admin-shell="on"] .card.ok     { border-left: 3px solid var(--accent); }

body[data-admin-shell="on"] .card-head {
    color: var(--muted);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 var(--s-4) 0;
}

body[data-admin-shell="on"] .card .lead {
    font-size: var(--t-md);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0 0 var(--s-2) 0;
}

body[data-admin-shell="on"] .card p {
    color: var(--muted);
    font-size: var(--t-sm);
    line-height: 1.6;
    margin: 0;
}

body[data-admin-shell="on"] .card p + p {
    margin-top: var(--s-3);
}

/* ────────────────────────────────────────────────────────────────
   Big number — used inside cards for hero metrics
   ──────────────────────────────────────────────────────────────── */

body[data-admin-shell="on"] .number {
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}

body[data-admin-shell="on"] .number-label {
    color: var(--muted);
    font-size: var(--t-xs);
    margin-top: var(--s-2);
    letter-spacing: 0.04em;
}

/* ────────────────────────────────────────────────────────────────
   Settings-list — Apple Settings style rows
   ──────────────────────────────────────────────────────────────── */

body[data-admin-shell="on"] .settings-list {
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: var(--s-5);
}

body[data-admin-shell="on"] .settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    padding: var(--s-5) var(--s-6);
    border-bottom: 1px solid var(--hairline);
    text-decoration: none;
    color: var(--ink);
    transition: background 120ms;
}

body[data-admin-shell="on"] .settings-row:last-child {
    border-bottom: none;
}

body[data-admin-shell="on"] .settings-row:hover {
    background: var(--canvas);
}

body[data-admin-shell="on"] .settings-row .label {
    flex: 1;
}

body[data-admin-shell="on"] .settings-row .label-title {
    font-size: var(--t);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.3;
}

body[data-admin-shell="on"] .settings-row .label-sub {
    color: var(--muted);
    font-size: var(--t-sm);
    margin-top: 2px;
    line-height: 1.5;
}

body[data-admin-shell="on"] .settings-row .chev {
    color: var(--muted);
    font-size: var(--t);
    flex-shrink: 0;
}

body[data-admin-shell="on"] .settings-row:hover .chev {
    color: var(--accent);
}

/* ────────────────────────────────────────────────────────────────
   Grouped settings — section header above each .settings-list card
   (iOS inset-grouped pattern). Breaks a long flat list into scannable
   labeled chunks. Tokens only — adapts to light/dark automatically.
   ──────────────────────────────────────────────────────────────── */

body[data-admin-shell="on"] .settings-section-label {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin: var(--s-6) 0 var(--s-2);
    padding: 0 var(--s-2);
}

body[data-admin-shell="on"] .settings-section-label:first-of-type {
    margin-top: var(--s-2);
}

body[data-admin-shell="on"] .settings-section-label .section-desc {
    display: block;
    margin-top: 3px;
    font-size: var(--t-xs);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
}

/* The setup wizard is an ACTION, not a setting — its own card at the top,
   marked with an accent rail + accent title so it reads as "start here"
   without a loud tint (admin shell ethos: restraint, tokens only). */
body[data-admin-shell="on"] .settings-row.is-wizard {
    box-shadow: inset 3px 0 0 var(--accent);
}

body[data-admin-shell="on"] .settings-row.is-wizard .label-title {
    color: var(--accent);
}

/* ────────────────────────────────────────────────────────────────
   Person/Worker row — used on People page
   ──────────────────────────────────────────────────────────────── */

body[data-admin-shell="on"] .person-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--hairline);
}

body[data-admin-shell="on"] .person-row:last-child {
    border-bottom: none;
}

body[data-admin-shell="on"] .person-row .who {
    flex: 1;
}

body[data-admin-shell="on"] .person-row .who .name {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink);
}

body[data-admin-shell="on"] .person-row .who .meta {
    color: var(--muted);
    font-size: var(--t-xs);
    margin-top: 2px;
}

body[data-admin-shell="on"] .person-row .pill {
    flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────────
   Queue bar — used on Floor page
   ──────────────────────────────────────────────────────────────── */

body[data-admin-shell="on"] .queue-row {
    display: grid;
    grid-template-columns: 140px 1fr 100px;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-3) 0;
}

body[data-admin-shell="on"] .queue-row .station {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink);
}

body[data-admin-shell="on"] .queue-row .bar {
    height: 8px;
    background: var(--hairline);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

body[data-admin-shell="on"] .queue-row .bar-fill {
    height: 100%;
    background: var(--ink);
    border-radius: 4px;
    transition: width 240ms ease-out;
}

body[data-admin-shell="on"] .queue-row .remain {
    font-size: var(--t-xs);
    color: var(--muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ────────────────────────────────────────────────────────────────
   Buttons — one system. Primary (filled accent) / default (ghost) / danger
   ──────────────────────────────────────────────────────────────── */

body[data-admin-shell="on"] button:not([class*="admin-"]):not([class*="cmdk-"]):not([class*="sf-"]):not([class*="nav-"]),
body[data-admin-shell="on"] .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 8px var(--s-4);
    font-family: inherit;
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid var(--faint);
    background: var(--paper);
    color: var(--ink);
    border-radius: var(--r);
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms, border-color 120ms, transform 80ms;
    min-height: 36px;
}

body[data-admin-shell="on"] button:not([class*="admin-"]):not([class*="cmdk-"]):not([class*="sf-"]):not([class*="nav-"]):hover,
body[data-admin-shell="on"] .btn:hover {
    border-color: var(--muted);
    background: var(--canvas);
}

body[data-admin-shell="on"] button:not([class*="admin-"]):not([class*="cmdk-"]):not([class*="sf-"]):not([class*="nav-"]):active,
body[data-admin-shell="on"] .btn:active {
    transform: translateY(0.5px);
}

body[data-admin-shell="on"] button.primary,
body[data-admin-shell="on"] .btn.primary {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

body[data-admin-shell="on"] button.primary:hover,
body[data-admin-shell="on"] .btn.primary:hover {
    /* PR-ADMIN-P6: was cyan-700 #0e7490, a leftover from the pre-blue
       accent era — hover now darkens the actual accent (blue-600 → 700). */
    background: #1D4ED8;
    border-color: #1D4ED8;
}

body[data-admin-shell="on"] button.danger,
body[data-admin-shell="on"] .btn.danger {
    color: var(--danger);
}

body[data-admin-shell="on"] button.danger:hover,
body[data-admin-shell="on"] .btn.danger:hover {
    background: rgba(220, 38, 38, 0.06);
    border-color: var(--danger);
}

body[data-admin-shell="on"] button:not([class*="admin-"]):not([class*="cmdk-"]):not([class*="sf-"]):not([class*="nav-"]):disabled,
body[data-admin-shell="on"] .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ────────────────────────────────────────────────────────────────
   Form inputs — one system
   ──────────────────────────────────────────────────────────────── */

body[data-admin-shell="on"] input[type="text"],
body[data-admin-shell="on"] input[type="email"],
body[data-admin-shell="on"] input[type="number"],
body[data-admin-shell="on"] input[type="date"],
body[data-admin-shell="on"] input[type="search"],
body[data-admin-shell="on"] input[type="password"],
body[data-admin-shell="on"] input:not([type]),
body[data-admin-shell="on"] textarea,
body[data-admin-shell="on"] select {
    width: 100%;
    box-sizing: border-box;
    padding: 8px var(--s-3);
    font-family: inherit;
    font-size: var(--t-sm);
    line-height: 1.4;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--faint);
    border-radius: var(--r);
    min-height: 36px;
    transition: border-color 120ms, box-shadow 120ms;
}

body[data-admin-shell="on"] input:focus,
body[data-admin-shell="on"] textarea:focus,
body[data-admin-shell="on"] select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

body[data-admin-shell="on"] input::placeholder {
    color: var(--muted);
    opacity: 0.7;
}

body[data-admin-shell="on"] label {
    display: block;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--s-2);
}

body[data-admin-shell="on"] input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    min-height: 0;
    box-shadow: none;
    margin: 0;
}

/* ────────────────────────────────────────────────────────────────
   Status pill — used sparingly for "PIN set" / "needs setup" etc.
   ──────────────────────────────────────────────────────────────── */

body[data-admin-shell="on"] .pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--t-xs);
    font-weight: 500;
    background: var(--hairline);
    color: var(--muted);
}

body[data-admin-shell="on"] .pill.ok {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--accent);
}

body[data-admin-shell="on"] .pill.warn {
    background: rgba(234, 88, 12, 0.08);
    color: var(--warn);
}

body[data-admin-shell="on"] .pill.danger {
    background: rgba(220, 38, 38, 0.08);
    color: var(--danger);
}

/* ────────────────────────────────────────────────────────────────
   Hairline divider
   ──────────────────────────────────────────────────────────────── */

body[data-admin-shell="on"] .rule {
    border: 0;
    border-top: 1px solid var(--hairline);
    margin: var(--s-5) 0;
}

/* ────────────────────────────────────────────────────────────────
   Footer link (e.g. "View suggestions →")
   ──────────────────────────────────────────────────────────────── */

body[data-admin-shell="on"] .card-link {
    display: inline-block;
    margin-top: var(--s-4);
    color: var(--accent);
    text-decoration: none;
    font-size: var(--t-sm);
    font-weight: 500;
}

body[data-admin-shell="on"] .card-link:hover {
    color: #0e7490;
}

/* ────────────────────────────────────────────────────────────────
   Toast (replaces inline flash() patterns on existing pages)
   ──────────────────────────────────────────────────────────────── */

body[data-admin-shell="on"] .toast {
    position: fixed;
    bottom: var(--s-5);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: var(--paper);
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r);
    font-size: var(--t-sm);
    box-shadow: var(--shadow);
    z-index: 100;
}

/* ────────────────────────────────────────────────────────────────
   Legacy compat — old pages still depend on these class names
   ──────────────────────────────────────────────────────────────── */

body[data-admin-shell="on"] .paper,
body[data-admin-shell="on"] .panel,
body[data-admin-shell="on"] .group-card,
body[data-admin-shell="on"] .paper-card {
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: var(--s-6);
    box-shadow: var(--shadow);
    margin-bottom: var(--s-5);
}

body[data-admin-shell="on"] h1 {
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 var(--s-4) 0;
}

body[data-admin-shell="on"] h2 {
    font-size: var(--t);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
    margin: 0 0 var(--s-3) 0;
}

body[data-admin-shell="on"] h3 {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink);
    margin: var(--s-4) 0 var(--s-2) 0;
}

body[data-admin-shell="on"] p.subtitle,
body[data-admin-shell="on"] .subtitle,
body[data-admin-shell="on"] .note {
    color: var(--muted);
    font-size: var(--t-sm);
    line-height: 1.55;
    margin: 0 0 var(--s-3) 0;
}

body[data-admin-shell="on"] table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-sm);
}

body[data-admin-shell="on"] table th,
body[data-admin-shell="on"] table td {
    text-align: left;
    padding: var(--s-3) var(--s-2);
    border-bottom: 1px solid var(--hairline);
}

body[data-admin-shell="on"] table th {
    color: var(--muted);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body[data-admin-shell="on"] code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    background: var(--hairline);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--ink);
}

body[data-admin-shell="on"] a {
    color: var(--accent);
    text-decoration: none;
}

body[data-admin-shell="on"] a:hover {
    text-decoration: underline;
}

body[data-admin-shell="on"] hr {
    border: 0;
    border-top: 1px solid var(--hairline);
    margin: var(--s-6) 0;
}

/* ================================================================
   DARK THEME (2026-07-18) — admin pages + every standalone page on
   these tokens adopt the main SPA dark palette so the whole product
   reads as ONE app. The token names stay; only their values flip
   under html[data-theme="dark"]. Values MIRROR app.css
   :root[data-theme="dark"] exactly.
   ================================================================ */
html[data-theme="dark"] body[data-admin-shell="on"] {
    --canvas:   #000000;      /* = main --bg  */
    --paper:    #16181C;      /* = main --pn  */
    --ink:      #E7E9EA;      /* = main --txt */
    --muted:    #9AA3B0;      /* = main --dim */
    --faint:    #2F3336;      /* = main --bdr */
    --hairline: #202327;      /* subtle dividers on black */
    --accent:   #4C8DFF;      /* = main --acc */
    --danger:   #F2566B;      /* = main --no  */
    --warn:     #F0B429;      /* = main --warn */
    --side-bg:    #0A0A0C;     /* near-black rail, a hair off the canvas */
    --side-ink:   #D3DAE4;     /* PR-ADMIN-NAV-CONTRAST: brighter labels on near-black */
    --side-hot:   #FFFFFF;
    --side-muted: #8B94A3;     /* PR-ADMIN-NAV-CONTRAST: readable descriptions */
    --side-hover: rgba(255,255,255,0.05);
    --side-rule:  rgba(255,255,255,0.07);
}

/* ======================================================================
   PR-UI-MODE (2026-07-30) — admin data tables in MOBILE mode
   ======================================================================
   Gated on html[data-ui-mode="mobile"] (set by ui-mode.js) so desktop is
   untouched. Safety net: any admin table becomes horizontally SCROLLABLE
   instead of forcing the page wider. Opt-in: add class="responsive-table"
   (with td[data-label="Col"]) to get the stacked-card layout. */
html[data-ui-mode="mobile"] body[data-admin-shell="on"] table:not(.responsive-table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
html[data-ui-mode="mobile"] table.responsive-table thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
html[data-ui-mode="mobile"] table.responsive-table,
html[data-ui-mode="mobile"] table.responsive-table tbody,
html[data-ui-mode="mobile"] table.responsive-table tr,
html[data-ui-mode="mobile"] table.responsive-table td { display: block; width: 100%; }
html[data-ui-mode="mobile"] table.responsive-table tr {
    border: 1px solid var(--bdr, #d9dfe7);
    border-radius: 8px; margin-bottom: 10px; padding: 6px 10px;
}
html[data-ui-mode="mobile"] table.responsive-table td {
    border: none; padding: 4px 0;
    display: flex; justify-content: space-between; gap: 12px;
    text-align: right;
}
html[data-ui-mode="mobile"] table.responsive-table td::before {
    content: attr(data-label);
    font-weight: 600; color: var(--dim, #64748b); text-align: left;
}
html[data-ui-mode="mobile"] table.responsive-table td:not([data-label])::before { content: ""; }

/* ═══════════════════════════════════════════════════════════════════
   PR-ADMIN-P1 (2026-08-27) — the console joins the app.
   Appended as a cascade-final layer on purpose: overrides win without
   touching the 1,293 lines above.

   1) ALIASES → TOKENS. admin-shell.js now injects /tokens.css; every
      admin alias points at the app token so ONE palette edit reaches
      both surfaces. Dark flips automatically via tokens.css — the old
      dark alias literals below in this file are overridden here too.
   2) TOPBAR → SPA ANATOMY. Light --sf bar (was dark slate — the #1
      "second app" tell), ☰ · ‹ Back · ⌂ · title · ⌘K · user.
   3) THE RAIL. Admin sections move to a slim sticky row under the bar.
   ═══════════════════════════════════════════════════════════════════ */

body[data-admin-shell="on"],
html[data-theme="dark"] body[data-admin-shell="on"] {
    --canvas:   var(--bg, #F3F5F8);
    --paper:    var(--pn, #FFFFFF);
    --ink:      var(--txt, #1A222E);
    --muted:    var(--dim, #5A6573);
    --faint:    var(--bdr, #D9DFE7);
    --hairline: var(--bdr, #D9DFE7);
    --accent:   var(--acc, #2563EB);
    --danger:   var(--no, #D33A4B);
    /* PR-ADMIN-WARN-TOKEN (2026-09-05): `--warn` is NOT aliased, on purpose.
       Every other line here renames an app token onto its admin alias
       (--acc→--accent, --no→--danger). The app's amber is ALSO called
       `--warn`, so the alias read `--warn: var(--warn, #C77700)` — a custom
       property referencing itself. CSS calls that a cycle and makes the
       property invalid at computed-value time, so `var(--warn)` resolved to
       NOTHING everywhere in the console, and every rule using it fell back to
       transparent. Found by measuring: an amber status rail computed
       `background: rgba(0,0,0,0)` while the identical rule using --accent
       painted fine.
       Deleting the alias is the fix, not repairing it: tokens.css is injected
       by admin-shell.js and declares `--warn` on :root, so the value simply
       inherits — which is what the alias was trying to arrange — and it now
       flips for dark mode with the rest of the palette, which the literal
       fallback never did. */
}

/* ── Topbar: the app's bar, verbatim anatomy ── */
body[data-admin-shell="on"] .admin-topbar {
    background: var(--sf, #E9EDF2);
    color: var(--txt, #1A222E);
    border-bottom: 1px solid var(--bdr, #D9DFE7);
    gap: 8px;
}
body[data-admin-shell="on"] .admin-menu-btn {
    color: var(--txt, #1A222E);
}
body[data-admin-shell="on"] .admin-menu-btn:hover {
    background: var(--pn-h, #F0F3F7);
    color: var(--txt, #1A222E);
}
body[data-admin-shell="on"] .admin-bar-btn {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 6px;
    height: 40px; min-width: 40px; padding: 0 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 6px);
    color: var(--txt, #1A222E);
    font: 600 13px var(--ff-ui, Inter, sans-serif);
    cursor: pointer;
    text-decoration: none;
}
body[data-admin-shell="on"] .admin-bar-btn:hover {
    background: var(--pn-h, #F0F3F7);
    border-color: var(--bdr, #D9DFE7);
}
body[data-admin-shell="on"] .admin-bar-title {
    font: 600 15px var(--ff-ui, Inter, sans-serif);
    color: var(--txt, #1A222E);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 34ch;
    margin-left: 4px;
}
body[data-admin-shell="on"] .admin-cmdk-chip {
    flex-shrink: 1;
    display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 12px;
    background: var(--inp, #FFFFFF);
    border: 1px solid var(--bdr, #D9DFE7);
    border-radius: var(--radius-md, 10px);
    color: var(--dim, #5A6573);
    font: 500 13px var(--ff-ui, Inter, sans-serif);
    cursor: pointer;
    min-width: 0;
}
body[data-admin-shell="on"] .admin-cmdk-chip:hover { border-color: var(--bdr-h, #AAB3C0); background: var(--inp, #FFFFFF); }
body[data-admin-shell="on"] .admin-cmdk-chip .cmdk-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-admin-shell="on"] .admin-cmdk-chip kbd {
    font: 600 10.5px var(--ff-mono, monospace);
    background: var(--pn-h, #F0F3F7);
    border: 1px solid var(--bdr, #D9DFE7);
    border-radius: 4px; padding: 1px 6px;
    color: var(--dim, #5A6573);
}
body[data-admin-shell="on"] .admin-topbar-user { color: var(--txt, #1A222E); }
body[data-admin-shell="on"] .admin-topbar-user .who { color: var(--dim, #5A6573); }
body[data-admin-shell="on"] .admin-topbar-user .sign-out { color: var(--txt, #1A222E); }
body[data-admin-shell="on"] .admin-topbar-user .sign-out:hover { background: var(--pn-h, #F0F3F7); }

/* ── The rail: admin sections, one slim sticky row under the bar ── */
body[data-admin-shell="on"] .admin-rail {
    position: sticky;
    top: 56px;
    z-index: 80;
    display: flex; align-items: center;
    gap: 4px;
    height: 42px;
    padding: 0 16px;
    background: var(--bg, #F3F5F8);
    border-bottom: 1px solid var(--bdr, #D9DFE7);
    overflow-x: auto;
    scrollbar-width: none;
}
body[data-admin-shell="on"] .admin-rail::-webkit-scrollbar { display: none; }
body[data-admin-shell="on"] .admin-rail-group {
    display: flex; align-items: center; gap: 2px;
    padding: 0 10px;
    border-left: 1px solid var(--bdr, #D9DFE7);
}
body[data-admin-shell="on"] .admin-rail-group:first-child { border-left: none; padding-left: 0; }
body[data-admin-shell="on"] .admin-rail .admin-sidebar-link {
    display: inline-flex; align-items: center;
    height: 30px; padding: 0 11px;
    border-radius: 999px;
    color: var(--dim, #5A6573);
    font: 600 13px var(--ff-ui, Inter, sans-serif);
    text-decoration: none;
    white-space: nowrap;
}
body[data-admin-shell="on"] .admin-rail .admin-sidebar-link:hover {
    color: var(--txt, #1A222E);
    background: var(--pn-h, #F0F3F7);
}
body[data-admin-shell="on"] .admin-rail .admin-sidebar-link.active {
    color: var(--acc-ink, #FFFFFF);
    background: var(--acc, #2563EB);
}

/* ── ⌘K palette ── */
body[data-admin-shell="on"] .cmdk-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(10, 14, 20, 0.45);
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 12vh;
}
body[data-admin-shell="on"] .cmdk-box {
    width: min(620px, 92vw);
    background: var(--pn, #FFFFFF);
    border: 1px solid var(--bdr, #D9DFE7);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-4, 0 18px 50px rgba(0,0,0,.25));
    overflow: hidden;
}
body[data-admin-shell="on"] .cmdk-input {
    width: 100%; box-sizing: border-box;
    padding: 15px 18px;
    border: none; outline: none;
    background: transparent;
    color: var(--txt, #1A222E);
    font: 500 16px var(--ff-ui, Inter, sans-serif);
    border-bottom: 1px solid var(--bdr, #D9DFE7);
}
body[data-admin-shell="on"] .cmdk-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
body[data-admin-shell="on"] .cmdk-row {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: baseline;
    padding: 9px 12px;
    border-radius: var(--radius-sm, 6px);
    text-decoration: none;
    cursor: pointer;
}
body[data-admin-shell="on"] .cmdk-row.sel { background: var(--pn-h, #F0F3F7); }
body[data-admin-shell="on"] .cmdk-lbl { color: var(--txt, #1A222E); font: 600 14px var(--ff-ui, Inter, sans-serif); }
body[data-admin-shell="on"] .cmdk-grp { color: var(--dim, #5A6573); font: 500 11.5px var(--ff-mono, monospace); text-align: right; }
body[data-admin-shell="on"] .cmdk-desc { grid-column: 1 / -1; color: var(--dim, #5A6573); font-size: 12.5px; margin-top: 1px; }

/* Setup flyout drops from the rail now — nudge its anchor math is JS-side;
   just make sure the cards sit above the rail. */
body[data-admin-shell="on"] .setup-flyout,
body[data-admin-shell="on"] .setup-subflyout { z-index: 120; }

/* ── PR-ADMIN-P2: the touch/narrow sheet (coverage — desktop flyouts are
      the design center). Replaces the old display:none dead-end that made
      Setup unreachable under 720px. ── */
body[data-admin-shell="on"] .admin-sheet {
    position: fixed; inset: 0; z-index: 210;
    background: var(--bg, #F3F5F8);
    display: flex; flex-direction: column;
}
body[data-admin-shell="on"] .admin-sheet-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--bdr, #D9DFE7);
    background: var(--sf, #E9EDF2);
}
body[data-admin-shell="on"] .admin-sheet-close {
    width: 44px; height: 44px; font-size: 26px; line-height: 1;
    background: transparent; border: 1px solid var(--bdr, #D9DFE7);
    border-radius: 10px; color: var(--txt, #1A222E); cursor: pointer;
}
body[data-admin-shell="on"] .admin-sheet-scroll { overflow-y: auto; padding: 14px 16px 40px; }
body[data-admin-shell="on"] .admin-sheet-leaf {
    display: block; padding: 13px 14px; margin-bottom: 8px;
    background: var(--pn, #FFF); border: 1px solid var(--bdr, #D9DFE7);
    border-radius: 10px; color: var(--txt, #1A222E);
    font: 600 15px var(--ff-ui, Inter, sans-serif); text-decoration: none;
}
body[data-admin-shell="on"] .admin-sheet-group {
    font: 700 11.5px var(--ff-mono, monospace); letter-spacing: .09em;
    text-transform: uppercase; color: var(--dim, #5A6573);
    margin: 18px 2px 8px;
}
body[data-admin-shell="on"] .admin-sheet-item {
    display: block; padding: 11px 14px; margin-bottom: 6px;
    background: var(--pn, #FFF); border: 1px solid var(--bdr, #D9DFE7);
    border-radius: 10px; text-decoration: none;
}
body[data-admin-shell="on"] .admin-sheet-item.is-current { border-color: var(--acc, #2563EB); }
body[data-admin-shell="on"] .admin-sheet-item .sf-item-name { color: var(--txt, #1A222E); font: 600 14.5px var(--ff-ui, Inter, sans-serif); }
body[data-admin-shell="on"] .admin-sheet-item .sf-item-desc { color: var(--dim, #5A6573); font-size: 12.5px; margin-top: 2px; }