/* Leader Workspace component layer. Loaded after dashboard and legacy styles.
   Tokens are owned here; legacy Settings adapters are deliberately scoped to
   the new category boundary until those templates finish their migration. */
body.leader-workspace-active,
html body.leader-workspace-active .lw-shell {
    /* Spec §4.1 exact dark values (docs/superpowers/sdd/2026-09-11-leader-workspace-completion/global-constraints.md). */
    --lw-canvas: #11151B;
    --lw-surface: #1B2028;
    --lw-surface-2: #242B35;
    --lw-border: #39424F;
    --lw-control-border: #8290A3;
    --lw-text: #F1F5F9;
    --lw-text-muted: #B5C0CE;
    --lw-text-faint: #a9b7cc;
    --lw-accent: #A5B4FC;
    --lw-action: #4338CA;
    --lw-action-hover: #3730A3;
    --lw-selected: #303653;
    --lw-shadow: 0 1px 3px rgb(0 0 0 / 18%);
    --lw-success-text: #86EFAC;
    --lw-success-bg: #17372B;
    --lw-warning-text: #FCD34D;
    --lw-warning-bg: #3B2C15;
    --lw-error-text: #FCA5A5;
    --lw-error-bg: #3D232B;
    --lw-sidebar-bg: #161B22;
    --lw-sidebar-border: #39424F;
}
html[data-theme="light"] body.leader-workspace-active,
html[data-theme="light"] body.leader-workspace-active .lw-shell {
    /* Spec §4.1 exact light values. */
    --lw-canvas: #F8FAFC;
    --lw-surface: #FFFFFF;
    --lw-surface-2: #F1F5F9;
    --lw-border: #E2E8F0;
    --lw-control-border: #64748B;
    --lw-text: #0F172A;
    --lw-text-muted: #475569;
    --lw-text-faint: #526178;
    --lw-accent: #4338CA;
    --lw-action: #4338CA;
    --lw-action-hover: #3730A3;
    --lw-selected: #EEF2FF;
    --lw-shadow: 0 1px 3px rgb(15 23 42 / 5%);
    --lw-success-text: #166534;
    --lw-success-bg: #DCFCE7;
    --lw-warning-text: #92400E;
    --lw-warning-bg: #FEF3C7;
    --lw-error-text: #B91C1C;
    --lw-error-bg: #FEF2F2;
    --lw-sidebar-bg: #F1F5F9;
    --lw-sidebar-border: #CBD5E1;
}
html body.leader-workspace-standalone { background: var(--lw-canvas); color: var(--lw-text); }
html body.leader-workspace-active .lw-shell [data-tab-key] { --lw-accent: inherit; }
html body.leader-workspace-active .leader-page-topbar {
    background: var(--lw-surface); border-color: var(--lw-border); backdrop-filter: none;
}
html body.leader-workspace-active #leader-page-title { color: var(--lw-text); font-weight: 750; }
/* Team name under the page title (req 1): truncates with an ellipsis on
   desktop (the full name is still reachable via its title attribute) and
   wraps instead of clipping once the topbar itself wraps to two lines. */
html body.leader-workspace-active #leader-page-team {
    margin-block-start: 2px;
    max-width: 100%;
    overflow: hidden;
    color: var(--lw-text-muted);
    font-size: 13px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 767px) {
    html body.leader-workspace-active #leader-page-team {
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
    }
}
html body.leader-workspace-active .leader-workspace-eyebrow { color: var(--lw-accent); }
/* Skip link (spec §10.2): the first focusable element on the page, offscreen
   until it receives keyboard focus. */
html body.leader-workspace-active .lw-skip-link {
    position: fixed;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    z-index: 100;
    padding: 10px 16px;
    border: 1px solid var(--lw-control-border);
    border-radius: 8px;
    background: var(--lw-surface);
    color: var(--lw-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-150%);
    transition: transform 140ms ease;
}
html body.leader-workspace-active .lw-skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--lw-accent);
    outline-offset: 2px;
}
html body.leader-workspace-active :is(#leader-page-back, #leader-page-bell, #leader-page-theme-toggle, #leader-page-refresh, #leader-account-menu-btn) {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; min-width: 40px; border: 1px solid var(--lw-control-border);
    border-radius: 8px; background: var(--lw-surface); color: var(--lw-text); font-size: 14px;
}
html body.leader-workspace-active :is(#leader-page-back, #leader-page-bell, #leader-page-theme-toggle, #leader-page-refresh, #leader-account-menu-btn):hover {
    background: var(--lw-surface-2);
}
html body.leader-workspace-active :is(#leader-account-menu-panel, #leader-notifications-panel, #leader-page-status) {
    background: var(--lw-surface); border-color: var(--lw-border); color: var(--lw-text); backdrop-filter: none;
}
html body.leader-workspace-active :is(#leader-account-menu-panel, #leader-notifications-panel) :is(p, a, button) { color: var(--lw-text); }
html body.leader-workspace-active :is(#leader-account-menu-panel, #leader-notifications-panel) :is(a, button):hover { background: var(--lw-surface-2); }
html body.leader-workspace-active #leader-page-signout { color: var(--lw-danger, #f87171); }
html[data-theme="light"] body.leader-workspace-active #leader-page-signout { color: #b91c1c; }
html body.leader-workspace-active .lw-content-header { backdrop-filter: none; border-radius: 12px; padding: 16px 20px; }
html body.leader-workspace-active .lw-content-heading { font-size: 20px; font-weight: 700; white-space: normal; }
html body.leader-workspace-active .lw-content-description { margin-block-start: 4px; color: var(--lw-text-muted); font-size: 13px; line-height: 1.5; }
html body.leader-workspace-active .lw-subtabs { max-width: 100%; overflow-x: auto; background: var(--lw-surface-2); border-color: var(--lw-border); }
html body.leader-workspace-active .lw-subtabs button { min-height: 40px; font-size: 14px; color: var(--lw-text-muted); }
html body.leader-workspace-active .lw-subtabs button[aria-selected="true"] { background: var(--lw-selected); color: var(--lw-accent); box-shadow: inset 0 -2px var(--lw-accent); }
html body.leader-workspace-active .lw-subtabs button:hover { background: var(--lw-selected); color: var(--lw-accent); }
html body.leader-workspace-active #team-management-content :is(.lw-btn, button[type="submit"]) {
    min-height: 40px; padding: 9px 16px; font-size: 14px; font-weight: 600; line-height: 1.4; border-radius: 8px;
}
/* Color/variant rules for .lw-btn live in the "Shared components" section at
   the end of this file, scoped under body.leader-workspace-active (not
   #team-management-content) so they beat css/style.css's .lw-btn--primary/
   --ghost (lines ~1861-1869) and apply outside the Settings content pane
   too — do not add another #team-management-content-scoped override here. */
html body.leader-workspace-active #team-management-content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
    background: var(--lw-surface) !important; color: var(--lw-text) !important; border-color: var(--lw-control-border) !important;
    font-size: 14px; min-height: 40px; max-width: 100%; border-radius: 8px;
}
html body.leader-workspace-active #team-management-content :is(input, textarea)::placeholder { color: var(--lw-text-muted); opacity: 1; }
html body.leader-workspace-active #team-management-content :is(button, input, select, textarea):disabled { opacity: .6; cursor: not-allowed; }
html body.leader-workspace-active #team-management-content input[type="checkbox"] { accent-color: var(--lw-action); }
html body.leader-workspace-active #team-management-content .lw-switch {
    inline-size: 42px; block-size: 26px; background: var(--lw-surface-2); border: 1px solid var(--lw-control-border);
}
html body.leader-workspace-active #team-management-content .lw-switch::after { inline-size: 18px; block-size: 18px; background: var(--lw-text-muted); }
html body.leader-workspace-active #team-management-content .lw-switch:checked { background: var(--lw-action); border-color: var(--lw-accent); }
html body.leader-workspace-active #team-management-content .lw-switch:checked::after { background: #fff; inset-inline-start: 19px; }
html body.leader-workspace-active .lw-switch-row { background: transparent; border: 0; border-bottom: 1px solid var(--lw-border); border-radius: 0; padding: 16px 0; min-height: 64px; }
html body.leader-workspace-active .lw-switch-title { font-size: 14px; line-height: 1.45; }
html body.leader-workspace-active :is(.lw-switch-hint, .lw-more-body, .lw-more > summary, .lw-field-label, .lw-field-hint) { font-size: 13px; line-height: 1.55; color: var(--lw-text-muted); }
html body.leader-workspace-active .lw-field-error { color: var(--lw-error-text); font-size: 13px; font-weight: 600; line-height: 1.5; margin-block-start: 4px; }
/* Setting labels (spec §4.2): 14px/600 sentence case, not the uppercase micro-label from style.css. */
html body.leader-workspace-active #team-management-content .lw-settings-category .lw-field-label { color: var(--lw-text); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
html body.leader-workspace-active .lw-more > summary { padding-block: 4px; }
html body.leader-workspace-active .lw-settings-heading { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--lw-text); }
html body.leader-workspace-active .lw-savebar { background: var(--lw-surface); border-color: var(--lw-border); box-shadow: 0 -2px 12px rgb(0 0 0 / 10%); backdrop-filter: none; flex-wrap: wrap; }
html body.leader-workspace-active .lw-savebar-text { font-size: 14px; }
/* Search and section surfaces are shared by every category. */
.lw-settings-search { position: relative; max-width: 1120px; margin-block-end: 20px; }
.lw-settings-search > label { display: block; margin-block-end: 8px; color: var(--lw-text); font-size: 14px; font-weight: 600; }
.lw-settings-search input { width: 100%; padding: 12px 14px; }
.lw-settings-results { max-height: 360px; overflow-y: auto; margin-block-start: 8px; background: var(--lw-surface); border: 1px solid var(--lw-border); border-radius: 10px; padding: 8px; box-shadow: var(--lw-shadow); }
.lw-settings-results:empty, .lw-settings-results[hidden] { display: none; }
.lw-settings-results :is(button, a) { display: block; text-align: start; width: 100%; padding: 12px; min-height: 44px; border-radius: 6px; color: var(--lw-text); }
.lw-settings-results :is(button, a):hover { background: var(--lw-selected); }
.lw-settings-results :is(small, p) { color: var(--lw-text-muted); font-size: 13px; line-height: 1.5; }
.lw-settings-category { width: 100%; max-width: 1120px; min-width: 0; padding-block-end: 100px; }
.lw-settings-category > header { margin-block-end: 24px; }
.lw-settings-category > header h2 { font-size: 20px; font-weight: 700; color: var(--lw-text); }
.lw-settings-category > header p { color: var(--lw-text-muted); margin-block-start: 8px; font-size: 14px; line-height: 1.6; }
.lw-settings-section { margin-block: 24px; scroll-margin-block-start: 24px; }
html body.leader-workspace-active #team-management-content .lw-settings-category :is(section, [data-lw-card]) {
    background: var(--lw-surface) !important; border-color: var(--lw-border) !important; box-shadow: none; border-radius: 10px;
}
html body.leader-workspace-active #team-management-content .lw-settings-category section section {
    background: transparent !important; border: 0; border-top: 1px solid var(--lw-border); border-radius: 0; padding-inline: 0; padding-block: 20px;
}
html body.leader-workspace-active #team-management-content .lw-settings-category :is(h3, h4, h5) { color: var(--lw-text) !important; text-transform: none; letter-spacing: 0; font-size: 16px; line-height: 1.5; }
html body.leader-workspace-active #team-management-content .lw-settings-category :is(.text-gray-400, .text-gray-500, .text-gray-600, .text-xs) { color: var(--lw-text-muted) !important; font-size: 13px; line-height: 1.6; }
html body.leader-workspace-active #team-management-content .lw-settings-category .lw-settings-grid { gap: 12px 24px; }
html body.leader-workspace-active :is(.lw-shell, .leader-page-topbar) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--lw-accent) !important; outline-offset: 3px; scroll-margin-block: 24px 100px;
}

/* ── Sidebar navigation (spec §3.2/§3.2.1/§4.2, LW-21 – LW-25) ──────────────
   Rows and children are buttons marked with aria-current (never tab roles).
   The aside itself never scrolls: .lw-nav is the single scrollport, so the
   collapse toggle stays on top and revealLwNavBranch() in
   js/leader-workspace-shell.js scrolls the navigation alone. One accent; a
   distinct surface plus a 1px border separate it from the canvas without
   relying on shadow (LW-25). Logical properties throughout, so RTL mirrors. */
html body.leader-workspace-active .lw-sidebar {
    background: var(--lw-sidebar-bg);
    border: 1px solid var(--lw-sidebar-border);
    border-radius: 12px;
    box-shadow: none;
    backdrop-filter: none;
    overflow: hidden;
}
html body.leader-workspace-active .lw-sidebar > :is(.lw-sidebar-toggle, .lw-drawer-close) { flex: 0 0 auto; }
html body.leader-workspace-active .lw-sidebar .lw-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--lw-control-border) transparent;
}
/* Collapsed 64px rail: a thin scrollbar on overflow eats a few px on one
   edge only, enough to visibly shift the centered icons off the rail's true
   center at short viewports. The rail is icon-only, so hiding the scrollbar
   here costs nothing — wheel/touch/keyboard scroll still work. */
html body.leader-workspace-active .lw-sidebar--collapsed .lw-nav {
    scrollbar-width: none;
}
html body.leader-workspace-active .lw-sidebar--collapsed .lw-nav::-webkit-scrollbar {
    display: none;
}
html body.leader-workspace-active :is(.lw-nav-group--bottom, .lw-nav-divider, .lw-sidebar-toggle, .lw-drawer-close) { border-color: var(--lw-sidebar-border); }
html body.leader-workspace-active .lw-nav-group-label {
    color: var(--lw-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: none;
}
html body.leader-workspace-active .lw-sidebar :is([data-lw-nav], .lw-sidebar-toggle) {
    min-height: 36px;
    padding-block: 6px;
    padding-inline: 10px;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: start;
}
html body.leader-workspace-active .lw-sidebar [data-lw-nav] { border-radius: 8px; color: var(--lw-text); }
html body.leader-workspace-active .lw-sidebar .lw-sidebar-toggle { color: var(--lw-text-muted); }
html body.leader-workspace-active .lw-sidebar :is([data-lw-nav], .lw-sidebar-toggle) .lw-tab-icon { width: 16px; height: 16px; opacity: 1; }
html body.leader-workspace-active .lw-page-children {
    display: grid;
    gap: 2px;
    margin-block: 2px 6px;
    margin-inline-start: 17px;
    padding-inline-start: 8px;
    border-inline-start: 1px solid var(--lw-sidebar-border);
}
html body.leader-workspace-active .lw-page-children[hidden] { display: none; }
html body.leader-workspace-active .lw-sidebar .lw-nav-child {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    padding-block: 6px;
    padding-inline: 10px;
    border-radius: 8px;
    color: var(--lw-text-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: start;
    overflow-wrap: anywhere;
}
html body.leader-workspace-active .lw-nav-chevron { display: inline-flex; flex: 0 0 auto; color: var(--lw-text-muted); transition: transform 140ms ease; }
html body.leader-workspace-active .lw-nav-chevron[hidden] { display: none; }
html body.leader-workspace-active .lw-nav-chevron-icon { width: 14px; height: 14px; }
html[dir="rtl"] body.leader-workspace-active .lw-nav-chevron { transform: scaleX(-1); }
html body.leader-workspace-active [data-lw-nav][aria-expanded="true"] .lw-nav-chevron { transform: rotate(90deg); }
html body.leader-workspace-active .lw-sidebar :is([data-lw-nav], .lw-nav-child, .lw-sidebar-toggle):not([aria-current="page"]):hover {
    background: color-mix(in srgb, var(--lw-text) 7%, var(--lw-sidebar-bg));
    color: var(--lw-text);
}
html body.leader-workspace-active .lw-sidebar :is([data-lw-nav], .lw-nav-child)[aria-current="page"] {
    background: var(--lw-selected);
    color: var(--lw-accent);
    font-weight: 600;
    box-shadow: none;
}
html body.leader-workspace-active .lw-sidebar :is([data-lw-nav], .lw-nav-child)[aria-current="page"]::before {
    content: '';
    position: absolute;
    inset-block: 6px;
    inset-inline-start: 0;
    inline-size: 2px;
    border-radius: 2px;
    background: var(--lw-accent);
}
/* Parent of the active child: the quieter treatment — accent text, no fill or marker. */
html body.leader-workspace-active .lw-sidebar [data-lw-nav][data-lw-parent-active]:not([aria-current="page"]) { color: var(--lw-accent); font-weight: 600; }
/* A section child the leader scrolled to (aria-current="location"). */
html body.leader-workspace-active .lw-sidebar .lw-nav-child[aria-current="location"] { color: var(--lw-text); font-weight: 600; }
/* Inset ring: .lw-nav clips overflow, so an outset ring would be cut off at its edges. */
html body.leader-workspace-active #lw-sidebar :is(button, [tabindex]):focus-visible { outline-offset: -2px; }
@media (min-width: 1024px) {
    /* Full available height: the variable is the sidebar's live distance from
       the viewport top (measureLwSidebarViewportTop). height, never
       max-height — the panel does not end at its content height. */
    html body.leader-workspace-active .lw-sidebar {
        height: calc(100dvh - var(--lw-sidebar-viewport-top, 84px) - 12px);
        max-height: none;
    }
    html body.leader-workspace-active .lw-sidebar--collapsed :is(.lw-page-children, .lw-nav-chevron) { display: none; }
    /* The sidebar is authoritative for a mirrored in-page strip here; the
       collapsed rail shows no children, so the strip stays visible there. */
    html body.leader-workspace-active .lw-shell:not(.lw-shell--collapsed) .lw-subtabs--mirrored { display: none; }
}
@media (max-width: 1023.98px) {
    /* Drawer: full viewport height (style.css already fixes and offsets it). */
    html body.leader-workspace-active .lw-sidebar {
        inset-block: 0;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        border-block: 0;
        /* Physical on purpose: css/style.css pins the drawer to the physical
           LEFT edge (left: 0; translateX(-105%)) in both directions, so its
           viewport-facing edge is always the left one and its content-facing
           edge always the right one. The old logical border-inline-start: 0
           removed the content-facing border in RTL. */
        border-left: 0;
    }
}
@media (max-width: 767px) {
    html body.leader-workspace-active .lw-sidebar :is([data-lw-nav], .lw-nav-child) { min-height: 44px; }
}
html body.leader-workspace-active .lw-settings-highlight { outline: 2px solid var(--lw-accent); outline-offset: 5px; border-radius: 6px; }
@media (max-width: 1100px) {
    html body.leader-workspace-active .lw-content-header { flex-wrap: wrap; }
    html body.leader-workspace-active .lw-content-meta { flex-wrap: wrap; justify-content: flex-start; }
}
@media (max-width: 767px) {
    html body.leader-workspace-active .lw-content-header { padding: 14px; gap: 10px; }
    html body.leader-workspace-active .lw-content-meta { flex-basis: 100%; }
    html body.leader-workspace-active .lw-settings-category { padding-block-end: 140px; }
    html body.leader-workspace-active .lw-settings-category :is(section, [data-lw-card]) { padding: 14px; }
    html body.leader-workspace-active #team-management-content .lw-btn,
    html body.leader-workspace-active .leader-page-topbar :is(button, #leader-page-back) { min-height: 44px; }
    html body.leader-workspace-active #leader-notifications-panel { position: fixed; top: 128px; inset-inline: 12px; width: auto; max-width: none; max-height: calc(100dvh - 145px); overflow-y: auto; }
    html body.leader-workspace-active .lw-subtabs { display: flex; width: 100%; }
    html body.leader-workspace-active .lw-savebar-actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    body.leader-workspace-active .lw-shell, body.leader-workspace-active .lw-shell * { transition: none !important; scroll-behavior: auto !important; }
}
html body.leader-workspace-active #team-management-content [data-settings-category][hidden],
html body.leader-workspace-active #team-management-content [data-settings-record][hidden],
html body.leader-workspace-active #team-management-content .lw-settings-results[hidden] { display: none !important; }
.lw-settings-category-header { margin-block: 20px; }
.lw-settings-category-header h3 { font-size: 20px !important; font-weight: 700; }
/* Scope statement (LW-11): a secondary line under the category description
   naming what Save changes covers — tighter margin than the description
   above it so the two read as one related block. */
.lw-settings-category-header .lw-settings-category-scope { margin-block-start: 4px; font-size: 13px; }
/* Danger zone (spec §5.4): a separate, visually distinct destructive region
   at the end of General & visibility. A plain div (not `section`) so it
   never picks up the generic .lw-settings-category :is(section,[data-lw-card])
   / "section section" surface rules above, which are tuned for ordinary
   setting groups, not a consequential action. */
html body.leader-workspace-active #team-management-content .lw-settings-category .lw-danger-zone {
    margin-block-start: 24px; padding: 16px; border: 1px solid var(--lw-error-text);
    border-radius: 12px; background: var(--lw-error-bg);
}
html body.leader-workspace-active #team-management-content .lw-settings-category .lw-danger-zone-title {
    color: var(--lw-error-text) !important; font-size: 15px; font-weight: 700; margin: 0 0 8px;
}
.lw-danger-zone-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
html body.leader-workspace-active .lw-danger-zone-row p { margin: 0; flex: 1 1 320px; color: var(--lw-error-text); font-size: 13px; line-height: 1.5; }
.lw-settings-on-page { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-block: 16px; padding-block: 12px; border-block: 1px solid var(--lw-border); }
.lw-settings-on-page a { color: var(--lw-accent); text-decoration: underline; text-underline-offset: 3px; }
.lw-settings-results ul { display: grid; gap: 8px; list-style: none; margin-block: 12px; padding: 0; }
.lw-settings-results li button { display: grid; gap: 4px; width: 100%; text-align: start; padding: 12px 16px; }
.lw-settings-results li span { color: var(--lw-text-muted); font-size: 13px; }
.lw-settings-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block: 12px; }
.lw-settings-list-tools { margin-block: 16px; }
.lw-settings-list-tools label { display: grid; gap: 6px; max-width: 360px; }
.lw-settings-found { outline: 3px solid var(--lw-accent) !important; outline-offset: 4px; }
html[data-theme="light"] body.leader-workspace-standalone { background: var(--lw-canvas); background-image: none; }
html body.leader-workspace-active #team-management-content .lw-settings-search input {
    width: 100%; padding: 10px 12px; border: 1px solid var(--lw-control-border);
}
html body.leader-workspace-active #team-management-content :is(.lw-settings-results, .lw-settings-pagination) button {
    min-height: 40px; padding: 8px 12px; background: var(--lw-surface); color: var(--lw-text);
    border: 1px solid var(--lw-control-border); border-radius: 8px;
}
.lw-settings-search input { max-width: 680px !important; }
.lw-settings-search > p { font-size: 13px; color: var(--lw-text-muted); margin-block: 8px; }
.lw-drawer-close { display: none; }
@media (max-width: 1023.98px) {
    .lw-drawer-close { display: block; min-height: 44px; padding: 10px; color: var(--lw-text); border-bottom: 1px solid var(--lw-border); }
}
html body.leader-workspace-active .lw-savebar {
    position: fixed; inset-block-end: max(16px, env(safe-area-inset-bottom));
    inset-inline-start: 304px; inset-inline-end: 32px; z-index: 45;
    max-width: 1120px; margin: 0;
}
html body.leader-workspace-active .lw-shell--collapsed .lw-savebar { inset-inline-start: 112px; }
@media (max-width: 1023.98px) {
    html body.leader-workspace-active :is(.lw-shell, .lw-shell--collapsed) .lw-savebar { inset-inline: 16px; }
}
@media (forced-colors: active) {
    html body.leader-workspace-active :is(.lw-shell, .leader-page-topbar) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: Highlight !important; }
    html body.leader-workspace-active #team-management-content .lw-switch:checked { background: Highlight; }
    html body.leader-workspace-active #team-management-content .lw-switch:checked::after { background: HighlightText; }
    html body.leader-workspace-active .lw-sidebar :is([data-lw-nav], .lw-nav-child)[aria-current="page"] { border: 2px solid Highlight; }
}

/* Leaderboard (Task 6; spec §6.1/§6.2): a context line + the shared period
   toolbar, four neutral summary cards, the ranked table, member details and a
   secondary "How scores work" disclosure. This block sits BEFORE the shared
   components below, so anything that must beat .lw-card / .lw-table is scoped
   one class deeper (.lw-card.lw-score-…, .lw-table.lw-score-…) — equal
   specificity would lose on load order. Focus rings come from the workspace
   :focus-visible rule near the top of this file. */
html body.leader-workspace-active .lw-shell input { color-scheme: dark; }
html[data-theme="light"] body.leader-workspace-active .lw-shell input { color-scheme: light; }
/* minmax(0, 1fr): an implicit `auto` track would grow to the tables' minimum
   width and push the cards past a phone screen instead of letting each table
   scroll inside its own container. */
html body.leader-workspace-active .lw-score-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; }
html body.leader-workspace-active .lw-score-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
html body.leader-workspace-active .lw-score-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
html body.leader-workspace-active .lw-score-context { margin: 0; color: var(--lw-text-muted); font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }

/* Shared period toolbar (renderQuickRangeButtons / renderDateRangeControls). */
html body.leader-workspace-active .lw-period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
html body.leader-workspace-active .lw-period .lw-segmented { flex-wrap: wrap; }
html body.leader-workspace-active .lw-period-dates { display: flex; flex-wrap: wrap; gap: 12px; }
html body.leader-workspace-active :is(.lw-period, .lw-score-toolbar, .lw-history-toolbar) .lw-field { display: grid; gap: 4px; min-width: 0; }
html body.leader-workspace-active :is(.lw-period, .lw-score-toolbar, .lw-history-toolbar) .lw-field-label { margin: 0; color: var(--lw-text); font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.4; text-transform: none; }
html body.leader-workspace-active :is(.lw-period, .lw-score-toolbar, .lw-history-toolbar) input,
html body.leader-workspace-active .lw-history-toolbar select { min-height: 40px; padding: 8px 12px; border: 1px solid var(--lw-control-border); border-radius: 8px; }
html body.leader-workspace-active .lw-period input[type="date"] { inline-size: 11.5rem; max-inline-size: 100%; }

/* Summary: four neutral cards; the denominator sits under each value. */
html body.leader-workspace-active .lw-score-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 12px; margin: 0; }
html body.leader-workspace-active .lw-score-stat { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 16px; border: 1px solid var(--lw-border); border-radius: 12px; background: var(--lw-surface); color: var(--lw-text); }
html body.leader-workspace-active .lw-score-stat dt { color: var(--lw-text-muted); font-size: 13px; font-weight: 600; line-height: 1.4; }
html body.leader-workspace-active .lw-score-stat dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
html body.leader-workspace-active .lw-score-stat-value { color: var(--lw-text); font-size: 22px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
html body.leader-workspace-active .lw-score-stat-sub { color: var(--lw-text-muted); font-size: 13px; line-height: 1.5; }

/* Rankings. */
html body.leader-workspace-active .lw-score-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-block-end: 16px; }
html body.leader-workspace-active .lw-score-toolbar input { inline-size: 18rem; max-inline-size: 100%; }
html body.leader-workspace-active .lw-table.lw-score-table { min-width: 34rem; }
html body.leader-workspace-active .lw-table.lw-score-table td { vertical-align: middle; }
html body.leader-workspace-active .lw-table.lw-score-table tr.is-selected td { background: var(--lw-selected); }
html body.leader-workspace-active .lw-table.lw-score-table td.lw-score-rank { position: relative; inline-size: 1%; color: var(--lw-text-muted); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
html body.leader-workspace-active .lw-score-rank .lw-badge { margin-inline-start: 4px; }
html body.leader-workspace-active .lw-table.lw-score-table .lw-score-row--first td.lw-score-rank { color: var(--lw-text); }
/* First place: a restrained inline-start marker, nothing more (spec §6.1). */
html body.leader-workspace-active .lw-score-row--first .lw-score-rank::before { content: ''; position: absolute; inset-block: 12px; inset-inline-start: 0; inline-size: 3px; border-radius: 3px; background: var(--lw-accent); }
html body.leader-workspace-active .lw-score-member { font-weight: 600; overflow-wrap: anywhere; }
html body.leader-workspace-active .lw-table td.lw-score-points { font-weight: 700; white-space: nowrap; }
html body.leader-workspace-active .lw-table td.lw-score-points--negative,
html body.leader-workspace-active .lw-score-breakdown .lw-score-points--negative { color: var(--lw-error-text); }
html body.leader-workspace-active .lw-score-status-inline { display: none; }
html body.leader-workspace-active .lw-score-detail { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 4px 12px; border: 1px solid var(--lw-control-border); border-radius: 8px; background: var(--lw-surface); color: var(--lw-accent); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
html body.leader-workspace-active .lw-score-detail:hover { background: var(--lw-selected); }
html body.leader-workspace-active .lw-score-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: 16px; color: var(--lw-text-muted); font-size: 13px; }
html body.leader-workspace-active .lw-score-pagination p { margin: 0; }
html body.leader-workspace-active .lw-score-pager-controls { display: flex; align-items: center; gap: 8px; }
html body.leader-workspace-active .lw-score-pager-controls span { font-variant-numeric: tabular-nums; white-space: nowrap; }
html body.leader-workspace-active :is([data-leader-score-row], [data-leader-score-empty], [data-leader-score-pager-controls])[hidden] { display: none !important; }
html body.leader-workspace-active .lw-score-empty { margin: 12px 0 0; color: var(--lw-text-muted); font-size: 14px; }
html body.leader-workspace-active .lw-score-excluded { margin-block-start: 16px; }

/* Member details. */
html body.leader-workspace-active .lw-score-detail-card .lw-card-description { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html body.leader-workspace-active #lw-score-logs { overflow-wrap: anywhere; }
html body.leader-workspace-active .lw-score-breakdown { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: var(--lw-surface-2); }
html body.leader-workspace-active .lw-score-breakdown > div { display: grid; gap: 4px; min-width: 0; }
html body.leader-workspace-active .lw-score-breakdown dt { color: var(--lw-text-muted); font-size: 13px; font-weight: 600; }
html body.leader-workspace-active .lw-score-breakdown dd { margin: 0; color: var(--lw-text); font-size: 14px; }
html body.leader-workspace-active .lw-score-breakdown-value { font-weight: 700; font-variant-numeric: tabular-nums; }
html body.leader-workspace-active .lw-score-breakdown-sub { color: var(--lw-text-muted); }
html body.leader-workspace-active .lw-table.lw-score-log-table { min-width: 38rem; }
html body.leader-workspace-active .lw-table.lw-score-log-table td { vertical-align: top; }
html body.leader-workspace-active .lw-table.lw-score-log-table td.lw-score-time { color: var(--lw-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
html body.leader-workspace-active .lw-table.lw-score-log-table td.lw-score-explain { min-width: 12rem; color: var(--lw-text-muted); font-size: 13px; overflow-wrap: anywhere; }
/* A compact table action: 32px tall at every width (global geometry); the
   negative inline-start margin keeps "#123" aligned with the column text. */
html body.leader-workspace-active .lw-score-ticket { display: inline-flex; align-items: center; min-height: 32px; margin-inline-start: -8px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--lw-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
html body.leader-workspace-active .lw-score-ticket:hover { background: var(--lw-selected); }

/* How scores work. */
html body.leader-workspace-active .lw-card.lw-score-help { padding-block: 0; }
html body.leader-workspace-active .lw-score-help > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding-block: 8px; border-radius: 8px; cursor: pointer; list-style: none; }
html body.leader-workspace-active .lw-score-help > summary::-webkit-details-marker { display: none; }
/* A vertical chevron: physical sides on purpose, so RTL never mirrors it sideways. */
html body.leader-workspace-active .lw-score-help > summary::after { content: ''; flex: 0 0 auto; inline-size: 8px; block-size: 8px; margin-inline-end: 4px; border-right: 2px solid var(--lw-text-muted); border-bottom: 2px solid var(--lw-text-muted); transform: translateY(-2px) rotate(45deg); transition: transform 140ms ease; }
html body.leader-workspace-active .lw-score-help[open] > summary::after { transform: translateY(2px) rotate(225deg); }
@media (prefers-reduced-motion: reduce) {
    html body.leader-workspace-active .lw-score-help > summary::after { transition: none; }
}
html body.leader-workspace-active .lw-score-help-list { display: grid; gap: 8px; margin: 0 0 16px; padding-inline-start: 24px; list-style: disc; color: var(--lw-text); font-size: 14px; line-height: 1.55; }
html body.leader-workspace-active .lw-score-help-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-block-end: 16px; color: var(--lw-text-muted); font-size: 13px; }

/* Empty period. */
html body.leader-workspace-active .lw-card.lw-score-empty-period { display: grid; gap: 4px; justify-items: center; padding-block: 32px; text-align: center; }
html body.leader-workspace-active .lw-score-empty-period p { margin: 0; }
html body.leader-workspace-active .lw-score-empty-title { color: var(--lw-text); font-size: 16px; font-weight: 700; }
html body.leader-workspace-active .lw-score-empty-hint { color: var(--lw-text-muted); font-size: 14px; }
html body.leader-workspace-active .lw-score-empty-period .lw-score-excluded { justify-self: stretch; text-align: start; }

@media (max-width: 767px) {
    html body.leader-workspace-active .lw-period { gap: 12px; }
    html body.leader-workspace-active .lw-period .lw-segmented { inline-size: 100%; }
    html body.leader-workspace-active .lw-period .lw-segmented button { flex: 1 1 auto; min-height: 44px; padding-inline: 8px; }
    /* 44px phone fields. !important: #team-management-content's ID-scoped
       input rule (min-height 40px) outranks any class selector here. */
    html body.leader-workspace-active :is(.lw-period, .lw-score-toolbar, .lw-history-toolbar) input,
    html body.leader-workspace-active .lw-history-toolbar select { min-height: 44px !important; }
    html body.leader-workspace-active .lw-period-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: 100%; }
    html body.leader-workspace-active .lw-period input[type="date"] { inline-size: 100%; }
    html body.leader-workspace-active .lw-score-toolbar .lw-field { flex: 1 1 100%; }
    html body.leader-workspace-active .lw-score-toolbar input { inline-size: 100%; }
    html body.leader-workspace-active .lw-score-detail { min-height: 44px; }
    html body.leader-workspace-active .lw-history-toolbar .lw-field { flex: 1 1 100%; }
}
/* Phones: the Status column folds under the member name so the table fits
   without sideways scrolling and "View" stays reachable. */
@media (max-width: 640px) {
    html body.leader-workspace-active .lw-table.lw-score-table { min-width: 0; }
    html body.leader-workspace-active .lw-table.lw-score-table :is(th, td) { padding-inline: 8px; }
    html body.leader-workspace-active .lw-table.lw-score-table .lw-score-status-cell { display: none; }
    html body.leader-workspace-active .lw-score-status-inline { display: block; margin-block-start: 4px; }
    /* A tie badge sits under its rank number instead of widening the column. */
    html body.leader-workspace-active .lw-table.lw-score-table td.lw-score-rank { white-space: normal; }
    html body.leader-workspace-active .lw-score-rank .lw-badge { display: flex; inline-size: fit-content; margin-inline-start: 0; margin-block-start: 4px; }
    /* Events keep Time, Event and Points on screen; Ticket and Details scroll. */
    html body.leader-workspace-active .lw-table.lw-score-log-table { min-width: 30rem; }
    html body.leader-workspace-active .lw-table.lw-score-log-table :is(th, td) { padding-inline: 8px; }
    html body.leader-workspace-active .lw-table.lw-score-log-table td.lw-score-time { min-width: 5.5rem; white-space: normal; }
    html body.leader-workspace-active .lw-table.lw-score-log-table td.lw-score-explain { min-width: 10rem; }
}

/* ── Shared components (spec §4.3/§4.4, LW-02/03/04/05/06/08/14/18) ─────────
   js/leader-workspace-components.js renders the markup for these; every
   later task's own renderers build on the same classes. Scoped under
   body.leader-workspace-active (never #team-management-content) so they
   apply across the whole workspace — including outside the Settings
   content pane — and beat css/style.css's plain .lw-btn family
   (~line 1830) on specificity and load order alone (no !important needed:
   two classes + two type selectors here vs. one class there). */

/* The `hidden` attribute means hidden — everywhere under the workspace body
   class. An author `display` always beats the UA `[hidden]{display:none}`
   rule (author origin outranks user-agent origin regardless of
   specificity), so every component that sets its own display — .lw-alert
   (grid), .lw-pager and .lw-recipient-row (flex), .lw-btn (inline-flex),
   .lw-field-error and Tailwind's `block` — silently ignored
   `el.hidden = true`. Per-component guards kept missing the next case (the
   Team email "Filter by name" hid nothing), so this ONE rule replaces them.
   hidden="until-found" keeps its find-in-page behavior. */
html body.leader-workspace-active [hidden]:not([hidden="until-found"]) { display: none !important; }

/* Buttons — one shared geometry, variant-specific fill/border/text. */
html body.leader-workspace-active .lw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 8px;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    /* Today's deployment "Join" link-button (Task 8) is the first <a> to
       reuse this family — buttons never show an underline by default, so
       this only ever affects anchors. */
    text-decoration: none;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
html body.leader-workspace-active .lw-btn:focus-visible {
    outline: 2px solid var(--lw-accent);
    outline-offset: 2px;
}
html body.leader-workspace-active .lw-btn:disabled,
html body.leader-workspace-active .lw-btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
}
html body.leader-workspace-active .lw-btn[aria-busy="true"] {
    cursor: progress;
}
html body.leader-workspace-active .lw-btn[aria-busy="true"]::before {
    content: '';
    inline-size: 14px;
    block-size: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    animation: lw-btn-spin .6s linear infinite;
    flex: 0 0 auto;
}
@media (prefers-reduced-motion: reduce) {
    html body.leader-workspace-active .lw-btn[aria-busy="true"]::before { animation: none; }
}
@keyframes lw-btn-spin { to { transform: rotate(360deg); } }

html body.leader-workspace-active .lw-btn--primary {
    background: var(--lw-action);
    border-color: var(--lw-action);
    color: #FFFFFF;
}
html body.leader-workspace-active .lw-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--lw-action-hover);
    border-color: var(--lw-action-hover);
}
html body.leader-workspace-active .lw-btn--primary:active:not(:disabled):not([aria-disabled="true"]) {
    background: #312E81;
    border-color: #312E81;
}
html body.leader-workspace-active :is(.lw-btn--secondary, .lw-btn--ghost) {
    background: var(--lw-surface);
    border-color: var(--lw-control-border);
    color: var(--lw-text);
}
html body.leader-workspace-active :is(.lw-btn--secondary, .lw-btn--ghost):hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--lw-surface-2);
}
html body.leader-workspace-active .lw-btn--tertiary {
    background: transparent;
    border-color: transparent;
    color: var(--lw-accent);
}
html body.leader-workspace-active .lw-btn--tertiary:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--lw-selected);
}
html body.leader-workspace-active .lw-btn--danger {
    background: var(--lw-error-bg);
    border-color: var(--lw-error-text);
    color: var(--lw-error-text);
}
html body.leader-workspace-active .lw-btn--danger:hover:not(:disabled):not([aria-disabled="true"]) {
    background: color-mix(in srgb, var(--lw-error-bg) 80%, var(--lw-error-text));
}
html body.leader-workspace-active .lw-icon-btn {
    padding: 0;
    min-width: 40px;
    border-color: var(--lw-control-border);
    background: var(--lw-surface);
    color: var(--lw-text);
}
html body.leader-workspace-active .lw-icon-btn:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--lw-surface-2);
}
@media (max-width: 767px) {
    /* !important: the older #team-management-content :is(.lw-btn, …) rule
       (kept intact — see the "Color/variant rules" note near the top of
       this file) is ID-scoped, so it outranks this class-only override on
       specificity alone regardless of media query or source order. Same fix
       pattern as the v2-tokens.css input trap in CLAUDE.md: match or beat
       specificity, add !important, load later. */
    html body.leader-workspace-active :is(.lw-btn, .lw-icon-btn) { min-height: 44px !important; }
    html body.leader-workspace-active .lw-icon-btn { min-width: 44px; }
}

/* Cards. */
html body.leader-workspace-active .lw-card {
    background: var(--lw-surface);
    border: 1px solid var(--lw-border);
    border-radius: 12px;
    padding: 20px;
    color: var(--lw-text);
}
html body.leader-workspace-active .lw-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 16px;
}
html body.leader-workspace-active .lw-card-heading { display: grid; gap: 4px; min-width: 0; }
html body.leader-workspace-active .lw-card-title { font-size: 16px; font-weight: 700; margin: 0; color: var(--lw-text); }
html body.leader-workspace-active .lw-card-description { font-size: 13px; line-height: 1.5; color: var(--lw-text-muted); margin: 0; }
html body.leader-workspace-active .lw-card-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
@media (max-width: 767px) {
    html body.leader-workspace-active .lw-card { padding: 16px; }
}

/* Badges — short status pills, never the sole carrier of meaning (icon/text
   pairs elsewhere handle that); tone maps 1:1 to the alert tones below. */
html body.leader-workspace-active .lw-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
html body.leader-workspace-active .lw-badge--neutral { background: var(--lw-surface-2); color: var(--lw-text-muted); }
html body.leader-workspace-active .lw-badge--ok { background: var(--lw-success-bg); color: var(--lw-success-text); }
html body.leader-workspace-active .lw-badge--warn { background: var(--lw-warning-bg); color: var(--lw-warning-text); }
html body.leader-workspace-active .lw-badge--danger { background: var(--lw-error-bg); color: var(--lw-error-text); }
html body.leader-workspace-active .lw-badge--info { background: var(--lw-selected); color: var(--lw-accent); }

/* Alerts — a 3px inline-start marker in the tone color; ok/warn/error also
   tint the whole banner with their paired text/bg tokens (info stays on the
   neutral surface since it has no dedicated bg/text pair). */
html body.leader-workspace-active .lw-alert {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 10px;
    border-inline-start: 3px solid transparent;
    background: var(--lw-surface-2);
    color: var(--lw-text);
    font-size: 14px;
    line-height: 1.5;
}
html body.leader-workspace-active .lw-alert p { margin: 0; }
html body.leader-workspace-active .lw-alert--info { border-inline-start-color: var(--lw-accent); }
html body.leader-workspace-active .lw-alert--ok { border-inline-start-color: var(--lw-success-text); background: var(--lw-success-bg); color: var(--lw-success-text); }
html body.leader-workspace-active .lw-alert--warn { border-inline-start-color: var(--lw-warning-text); background: var(--lw-warning-bg); color: var(--lw-warning-text); }
html body.leader-workspace-active .lw-alert--error { border-inline-start-color: var(--lw-error-text); background: var(--lw-error-bg); color: var(--lw-error-text); }
html body.leader-workspace-active .lw-alert-title { font-size: 14px; font-weight: 700; margin: 0; }
html body.leader-workspace-active .lw-alert-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Tables. */
html body.leader-workspace-active .lw-table-scroll { max-width: 100%; overflow-x: auto; }
html body.leader-workspace-active .lw-table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: start; }
html body.leader-workspace-active .lw-table th {
    padding: 10px 12px;
    background: var(--lw-surface-2);
    color: var(--lw-text-muted);
    font-size: 12px;
    font-weight: 600;
    text-align: start;
}
html body.leader-workspace-active .lw-table td {
    padding: 10px 12px;
    border-block-end: 1px solid var(--lw-border);
    color: var(--lw-text);
    font-size: 14px;
}
/* .lw-num already names the Settings number-input wrapper (css/style.css
   ~line 1455, background/border/fixed width for a spinner + unit suffix).
   Reused here for numeric table cells per the component spec — reset every
   input-only property so the two contexts never fight. */
html body.leader-workspace-active .lw-table .lw-num {
    background: transparent;
    border: 0;
    border-radius: 0;
    inline-size: auto;
    padding-block: 10px;
    padding-inline: 12px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    text-align: end;
}
/* …but the reset above also wiped the table's own header fill, header size
   and row divider (it outranks the plain th/td rules); put those back for
   numeric cells so a Score/Points column never breaks the header band or
   rows — and its header reads at the same 12px as every other header. */
html body.leader-workspace-active .lw-table th.lw-num { text-align: end; background: var(--lw-surface-2); font-size: 12px; }
html body.leader-workspace-active .lw-table td.lw-num { border-block-end: 1px solid var(--lw-border); }

/* Pagination. */
html body.leader-workspace-active .lw-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-start: 16px;
    font-size: 13px;
    color: var(--lw-text-muted);
}
html body.leader-workspace-active .lw-pager-range { margin: 0; }
html body.leader-workspace-active .lw-pager-controls { display: flex; align-items: center; gap: 10px; }
html body.leader-workspace-active .lw-pager-status { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Segmented control — a row of toggle buttons sharing one selected state
   (aria-pressed), for filters/rankings rather than navigation. */
html body.leader-workspace-active .lw-segmented {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--lw-surface-2);
    border: 1px solid var(--lw-border);
    border-radius: 10px;
}
html body.leader-workspace-active .lw-segmented button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--lw-text-muted);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}
html body.leader-workspace-active .lw-segmented button:hover:not(:disabled) { color: var(--lw-text); }
html body.leader-workspace-active .lw-segmented button[aria-pressed="true"] {
    background: var(--lw-surface);
    color: var(--lw-accent);
    box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
}
html body.leader-workspace-active .lw-segmented button:focus-visible {
    outline: 2px solid var(--lw-accent);
    outline-offset: 2px;
}

/* Phone touch targets (spec §4.2: 44px controls at ≤767px) for the compact
   controls that are not .lw-btn: segmented filters (Macros/SLA/Rules status,
   Analytics period — the Leaderboard's .lw-period copy already had this),
   interactive chips (mailbox switcher, filtered-mail filter, email
   templates) and inline link buttons (Add mailbox's method switches). Only
   the <button> chips — a static count pill (<span class="lw-chip">) is not a
   target. `button.lw-link-btn` (0,2,3) outranks the Task 11 section's later
   `.lw-link-btn { padding: 0 }` (0,2,2) without !important. */
@media (max-width: 767px) {
    html body.leader-workspace-active .lw-segmented button,
    html body.leader-workspace-active button.lw-chip,
    html body.leader-workspace-active button.lw-link-btn { min-height: 44px; }
    html body.leader-workspace-active button.lw-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-inline: 14px;
    }
    html body.leader-workspace-active button.lw-link-btn {
        display: inline-flex;
        align-items: center;
        padding-inline: 4px;
        vertical-align: middle;
    }
}
/* Chip text stays readable at every width (metadata ≥12px, spec §4.2) —
   css/style.css's base .lw-chip is 0.66rem (~10.5px). */
html body.leader-workspace-active .lw-chip { font-size: 12px; }

/* Loading state (aria-busy wrapper + skeleton rows). */
html body.leader-workspace-active .lw-loading { display: grid; gap: 8px; }
html body.leader-workspace-active .lw-skel {
    block-size: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--lw-surface-2) 25%, var(--lw-border) 37%, var(--lw-surface-2) 63%);
    background-size: 400% 100%;
    animation: lw-skel-shimmer 1.4s ease infinite;
}
@keyframes lw-skel-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
    html body.leader-workspace-active .lw-skel { animation: none; }
}

/* Utilities. */
html body.leader-workspace-active .lw-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
html body.leader-workspace-active .lw-muted { color: var(--lw-text-muted); }

/* ── Dialog (js/leader-workspace-dialog.js; spec §5.4/§5.10, LW-12/LW-19) ────
   A native <dialog> appended to <body>: it sits outside .lw-shell and
   #team-management-content, so the --lw-* tokens reach it through
   body.leader-workspace-active and every rule it needs lives here — its text
   field included (the #team-management-content input override above does
   not reach it). Actions reuse the .lw-btn families. */
html body.leader-workspace-active .lw-dialog {
    box-sizing: border-box;
    width: min(520px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow: auto;
    margin: auto;
    padding: 24px;
    background: var(--lw-surface);
    color: var(--lw-text);
    border: 1px solid var(--lw-border);
    border-radius: 12px;
    box-shadow: 0 24px 48px rgb(15 23 42 / 28%);
    text-align: start;
}
html body.leader-workspace-active .lw-dialog::backdrop { background: rgb(15 23 42 / 55%); }
html body.leader-workspace-active .lw-dialog-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--lw-text);
}
html body.leader-workspace-active .lw-dialog-message {
    margin: 0;
    margin-block-start: 8px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--lw-text-muted);
    /* Multi-line messages (the SLA pack list) keep their line breaks. */
    white-space: pre-line;
}
html body.leader-workspace-active .lw-dialog-body { margin-block-start: 16px; }
html body.leader-workspace-active .lw-dialog-label {
    display: block;
    margin-block-end: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--lw-text);
}
html body.leader-workspace-active .lw-dialog .lw-dialog-input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 9px 12px;
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--lw-text);
    background: var(--lw-surface);
    border: 1px solid var(--lw-control-border);
    border-radius: 8px;
    resize: vertical;
}
html body.leader-workspace-active .lw-dialog .lw-dialog-input:focus-visible {
    outline: 2px solid var(--lw-accent);
    outline-offset: 2px;
}
html body.leader-workspace-active .lw-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-block-start: 24px;
}
@media (max-width: 767px) {
    html body.leader-workspace-active .lw-dialog .lw-dialog-input { min-height: 44px; }
}

/* ── Overview & Today's operations (Task 8; spec §7/§3.3/§8) ────────────────
   The date/context line both pages open with; Overview's section grid;
   Today's Needs-attention card grid; and the one row pattern its
   Deployments, Schedule coverage, Active broadcasts and Recent member
   changes sections all share. */
html body.leader-workspace-active .lw-context-line {
    margin: 0;
    color: var(--lw-text-muted);
    font-size: 14px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

/* Needs attention / Team now / Recent activity / Quick stats (in that DOM
   order — §7): plain row-major auto-placement, no grid-template-areas and
   no `order`, so visual reading order always matches DOM/reading order. A
   single column stacked all four at full width, which left a two-avatar
   "Team now" as a near-empty full-width band at 1900px (review fix round 1,
   spec §3.3 "avoid a giant empty canvas"); two columns above ~1100px halves
   that waste, and the max-width keeps a very wide screen from stretching
   either column further still. */
html body.leader-workspace-active .lw-overview-sections {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    /* A short card keeps its own height instead of stretching to its
       row-mate's in the two-column layout below. */
    align-items: start;
}
@media (min-width: 1100px) {
    html body.leader-workspace-active .lw-overview-sections {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        max-width: 1600px;
    }
}

html body.leader-workspace-active .lw-attention-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}
@media (min-width: 700px) {
    html body.leader-workspace-active .lw-attention-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    html body.leader-workspace-active .lw-attention-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
html body.leader-workspace-active .lw-attention-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--lw-border);
    border-radius: 10px;
    background: var(--lw-surface-2);
    color: var(--lw-text);
    text-align: start;
    transition: border-color 140ms ease;
}
html body.leader-workspace-active .lw-attention-item:hover { border-color: var(--lw-control-border); }
html body.leader-workspace-active .lw-attention-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html body.leader-workspace-active .lw-attention-label { font-size: 14px; font-weight: 600; }
html body.leader-workspace-active .lw-attention-detail { font-size: 13px; color: var(--lw-text-muted); }

html body.leader-workspace-active .lw-today-list { display: flex; flex-direction: column; gap: 8px; }
html body.leader-workspace-active .lw-today-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--lw-border);
    border-radius: 10px;
    background: var(--lw-surface-2);
}
html body.leader-workspace-active .lw-today-row-main { display: grid; gap: 4px; min-width: 0; flex: 1 1 220px; }
html body.leader-workspace-active .lw-today-row-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--lw-text); }
/* A member's personalization color as a decorative swatch, never as the
   name's own text color — an arbitrary hex cannot be guaranteed to clear
   text contrast against the card surface, so the name stays --lw-text and
   the color becomes a bordered dot instead (spec §10.2). */
html body.leader-workspace-active .lw-color-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-inline-end: 6px;
    border: 1px solid var(--lw-border);
    border-radius: 999px;
    vertical-align: middle;
}
html body.leader-workspace-active .lw-today-row-sub { margin: 0; font-size: 13px; color: var(--lw-text-muted); }
html body.leader-workspace-active .lw-today-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
html body.leader-workspace-active .lw-today-row-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; flex: 0 0 auto; }

/* A compact 32px row action (global geometry) for the schedule coverage
   member-edit button — shared with Attendance's identical renderMemberEditButton
   call, so it gets the same fix there for free. */
html body.leader-workspace-active .lw-row-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 32px;
    min-width: 32px;
    padding: 6px;
    border: 1px solid var(--lw-control-border);
    border-radius: 8px;
    background: var(--lw-surface);
    color: var(--lw-text-muted);
    transition: color 140ms ease, border-color 140ms ease;
}
html body.leader-workspace-active .lw-row-edit-btn:hover { color: var(--lw-accent); border-color: var(--lw-accent); }
@media (max-width: 767px) {
    html body.leader-workspace-active .lw-row-edit-btn { min-height: 44px; min-width: 44px; }
}

/* ── Macros / SLA policies / Automation rules (Task 9; spec §7 rows Macros/
   SLA policies/Automation rules, §5.2.3, §4.3, LW-18) ──────────────────────
   The three "Tickets & Automation" list pages share one record-row/toolbar
   language. Text-input theming (background/color/border) already comes free
   from the #team-management-content input/select/textarea rule near the top
   of this file — these rules only add layout, the checkbox-label pattern,
   and the record/coverage/token-chip components. */
html body.leader-workspace-active .lw-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 12px;
}
html body.leader-workspace-active .lw-list-search { flex: 1 1 260px; max-width: 420px; }
html body.leader-workspace-active .lw-list-count {
    margin: 0 0 8px;
    color: var(--lw-text-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
html body.leader-workspace-active .lw-list-note {
    margin-block-start: 8px;
    color: var(--lw-text-muted);
    font-size: 13px;
}
html body.leader-workspace-active .lw-record-list { display: flex; flex-direction: column; gap: 8px; margin-block-end: 12px; }
html body.leader-workspace-active .lw-record-row {
    padding: 16px;
    border: 1px solid var(--lw-border);
    border-radius: 12px;
    background: var(--lw-surface);
}
/* Inactive/disabled records are quieter via surface + border, never via
   opacity on the row (which would also fade the text below the contrast
   gates) — spec §10.2, brief req 3. */
html body.leader-workspace-active .lw-record-row--inactive {
    background: var(--lw-surface-2);
    border-color: var(--lw-border);
}
html body.leader-workspace-active .lw-record-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
html body.leader-workspace-active .lw-record-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
html body.leader-workspace-active .lw-record-name {
    color: var(--lw-text);
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html body.leader-workspace-active .lw-record-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 0 0 auto; }
html body.leader-workspace-active .lw-record-usage { color: var(--lw-text-muted); font-size: 13px; white-space: nowrap; }
html body.leader-workspace-active .lw-record-meta {
    margin: 8px 0 0;
    color: var(--lw-text-muted);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-line;
}
html body.leader-workspace-active .lw-record-meta strong { color: var(--lw-text); font-weight: 700; }
html body.leader-workspace-active .lw-record-meta em { color: var(--lw-text-muted); font-style: normal; font-weight: 600; }

/* Checkbox + its own label text (macro/SLA/rule editors' Active/Enabled/
   Pause/Stop toggles and the SLA calendar's day boxes). */
html body.leader-workspace-active .lw-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--lw-text);
    font-size: 14px;
    cursor: pointer;
}

/* The "currently editing" card: same radius/padding as .lw-card, plus an
   accent border and the --lw-selected tint so it visually stands apart from
   the record rows below it. */
html body.leader-workspace-active .lw-editor-card {
    padding: 16px;
    border: 1px solid var(--lw-accent);
    border-radius: 12px;
    background: var(--lw-selected);
    margin-block-end: 16px;
}

/* Template gallery cards' explicit action line (req 5) — secondary weight,
   never the primary indigo (a template only fills the editor, it writes
   nothing). Lives here because it's new with Task 9; the rest of .lw-tpl-*
   predates it in css/style.css. */
html body.leader-workspace-active .lw-tpl-cta {
    margin-block-start: 2px;
    color: var(--lw-accent);
    font-size: 12px;
    font-weight: 700;
}

/* Macro token reference chips. */
html body.leader-workspace-active .lw-token-chip {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid var(--lw-border);
    border-radius: 6px;
    background: var(--lw-surface-2);
    color: var(--lw-accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

/* Rule editor's amber time-condition row. */
html body.leader-workspace-active .lw-rule-time-condition {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--lw-warning-text);
    border-radius: 10px;
    background: var(--lw-warning-bg);
    color: var(--lw-warning-text);
}

/* SLA priority coverage row. */
html body.leader-workspace-active .lw-sla-coverage-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-block-end: 16px;
}
html body.leader-workspace-active .lw-sla-coverage-item { display: inline-flex; align-items: center; gap: 6px; }
html body.leader-workspace-active .lw-sla-coverage-priority { color: var(--lw-text); font-size: 13px; font-weight: 600; }

@media (max-width: 767px) {
    html body.leader-workspace-active .lw-list-toolbar { align-items: stretch; }
    html body.leader-workspace-active .lw-list-search { max-width: 100%; flex-basis: 100%; }
}

/* ── Attendance & Broadcasts (Task 10; spec §7 rows Attendance/Broadcasts,
   §5.2.3, LW-19) ───────────────────────────────────────────────────────────
   A small non-interactive stat pill (renderMiniStat, replacing the old raw-
   Tailwind renderStat), the member-history toolbar/table-empty/tone helpers,
   the broadcast item card, and the restyled member-editor overlay. */

html body.leader-workspace-active .lw-stat-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (min-width: 640px) {
    html body.leader-workspace-active .lw-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    html body.leader-workspace-active .lw-stat-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
html body.leader-workspace-active .lw-stat-pill {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--lw-border);
    border-radius: 10px;
    background: var(--lw-surface-2);
}
html body.leader-workspace-active .lw-stat-pill-label {
    margin: 0;
    color: var(--lw-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}
html body.leader-workspace-active .lw-stat-pill-value {
    margin: 4px 0 0;
    color: var(--lw-text);
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
html body.leader-workspace-active .lw-stat-pill-value--ok { color: var(--lw-success-text); }
html body.leader-workspace-active .lw-stat-pill-value--warn { color: var(--lw-warning-text); }
html body.leader-workspace-active .lw-stat-pill-value--danger { color: var(--lw-error-text); }
html body.leader-workspace-active .lw-stat-pill-value--info { color: var(--lw-accent); }

/* Breathing room after a stat row — Attendance's schedule rows/empty state,
   Broadcasts' Message field, whatever a card puts directly under it. */
html body.leader-workspace-active .lw-stat-row + * { margin-block-start: 16px; }

/* Member-history filter row + table-empty/tone helpers. */
html body.leader-workspace-active .lw-history-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-block-end: 16px;
}
html body.leader-workspace-active .lw-history-toolbar .lw-field { flex: 0 1 200px; min-width: 160px; }
html body.leader-workspace-active .lw-history-toolbar select { inline-size: 100%; }
html body.leader-workspace-active .lw-table-empty-cell {
    padding: 32px 12px;
    text-align: center;
    color: var(--lw-text-muted);
    font-size: 14px;
}
html body.leader-workspace-active .lw-table tr.is-selected td { background: var(--lw-selected); }
html body.leader-workspace-active .lw-num--danger { color: var(--lw-error-text); }
html body.leader-workspace-active .lw-num--warn { color: var(--lw-warning-text); }
html body.leader-workspace-active .lw-num--ok { color: var(--lw-success-text); }

/* Broadcasts: compose hint + one card per message. */
html body.leader-workspace-active .lw-broadcast-hint { margin: 8px 0 0; color: var(--lw-text-muted); font-size: 13px; }
html body.leader-workspace-active .lw-broadcast-compose-actions { display: flex; justify-content: flex-end; margin-block-start: 12px; }
html body.leader-workspace-active .lw-broadcast-list { display: flex; flex-direction: column; gap: 12px; }
html body.leader-workspace-active .lw-broadcast-item {
    padding: 14px 16px;
    border: 1px solid var(--lw-border);
    border-radius: 12px;
    background: var(--lw-surface-2);
}
html body.leader-workspace-active .lw-broadcast-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-block-end: 8px;
}
html body.leader-workspace-active .lw-broadcast-read-count { color: var(--lw-text-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
html body.leader-workspace-active .lw-broadcast-message { margin: 0; color: var(--lw-text); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
html body.leader-workspace-active .lw-broadcast-meta { margin: 8px 0 0; color: var(--lw-text-muted); font-size: 13px; }
html body.leader-workspace-active .lw-broadcast-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-start: 10px;
    padding-block-start: 10px;
    border-block-start: 1px solid var(--lw-border);
}

/* Member editor overlay (LW-19): body content beyond what .lw-dialog /
   .lw-card-header / .lw-dialog-field already theme — vertical rhythm between
   the header/fields/error/actions, and the color-swatch grid. */
html body.leader-workspace-active #team-member-editor-modal form > * + * { margin-block-start: 16px; }
html body.leader-workspace-active .lw-color-swatches {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
    margin-block: 8px;
}
html body.leader-workspace-active .lw-color-swatch {
    block-size: 32px;
    border: 1px solid var(--lw-border);
    border-radius: 8px;
    cursor: pointer;
}
html body.leader-workspace-active .lw-color-swatch[aria-pressed="true"] { outline: 2px solid var(--lw-accent); outline-offset: 2px; }
html body.leader-workspace-active .lw-color-swatch:focus-visible { outline: 2px solid var(--lw-accent); outline-offset: 2px; }
html body.leader-workspace-active .lw-color-input {
    display: block;
    inline-size: 100%;
    block-size: 40px;
    padding: 4px;
    border: 1px solid var(--lw-control-border);
    border-radius: 8px;
    background: var(--lw-surface);
    cursor: pointer;
}

@media (max-width: 767px) {
    html body.leader-workspace-active .lw-history-toolbar .lw-field { flex-basis: 100%; }
}

/* ── Task 11: Team email & Mailboxes ── */
/* Status text (Team email's #leader-email-status live region, and the
   Filtered mail load-error line) — replaces raw text-red-300/text-emerald-
   300/text-indigo-200 with token colors that hold up in both themes. */
html body.leader-workspace-active .lw-status-text {
    font-size: 13px;
    color: var(--lw-text-muted);
}
html body.leader-workspace-active .lw-status-text--success { color: var(--lw-success-text); }
html body.leader-workspace-active .lw-status-text--error { color: var(--lw-error-text); }

/* Recipients grid (Team email) — one row per teammate, checkbox + name +
   email; hidden via the native [hidden] attribute by the name filter (the
   workspace-wide [hidden] rule in Shared components is what makes that win
   over .lw-recipient-row's own display:flex). */
html body.leader-workspace-active .lw-recipient-grid {
    display: grid;
    gap: 6px;
}
@media (min-width: 640px) {
    html body.leader-workspace-active .lw-recipient-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html body.leader-workspace-active .lw-recipient-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--lw-border);
    border-radius: 8px;
    background: var(--lw-surface-2);
    font-size: 13px;
    cursor: pointer;
}
html body.leader-workspace-active .lw-recipient-name { color: var(--lw-text); font-weight: 600; white-space: nowrap; }
html body.leader-workspace-active .lw-recipient-email {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--lw-text-muted);
}

/* Email preview (Team email, spec §7): the ONE deliberate exception to the
   token migration — it previews the real outgoing email (white background,
   dark body text) regardless of the active app theme, so it is exempt from
   both the lw-* color tokens and the "no raw gray utilities" check. */
html body.leader-workspace-active .lw-email-preview {
    background: #ffffff;
    color: #111827;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 16px;
}

/* Mailbox switcher chips' state dot (Active/Paused/Disabled at a glance,
   alongside the chip's own text label — never color-only). */
html body.leader-workspace-active .lw-dot {
    display: inline-block;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 999px;
    flex: 0 0 auto;
}
html body.leader-workspace-active .lw-dot--ok { background: var(--lw-success-text); }
html body.leader-workspace-active .lw-dot--warn { background: var(--lw-warning-text); }
html body.leader-workspace-active .lw-dot--neutral { background: var(--lw-text-muted); }
html body.leader-workspace-active .lw-dot--danger { background: var(--lw-error-text); }

/* Diagnostics <pre> (mailbox error log) — brief req 2: readable in both
   themes off --lw-surface-2/--lw-text, not the old hardcoded bg-black/40 +
   text-red-200 (illegible in light mode). */
html body.leader-workspace-active .lw-pre {
    margin: 0;
    max-height: 220px;
    overflow: auto;
    padding: 12px;
    border: 1px solid var(--lw-border);
    border-radius: 8px;
    background: var(--lw-surface-2);
    color: var(--lw-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Replies & assignment key/value rows. */
html body.leader-workspace-active .lw-kv-list { display: flex; flex-direction: column; gap: 8px; }
html body.leader-workspace-active .lw-kv-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
}
html body.leader-workspace-active .lw-kv-row dt { margin: 0; }
html body.leader-workspace-active .lw-kv-row dd { margin: 0; color: var(--lw-text); text-align: end; overflow-wrap: anywhere; }

/* Inline text-link buttons (Add-mailbox panel's "Use IMAP instead" /
   "Connect with Microsoft instead" switches) — a plain accent-colored link,
   not a bordered/filled button, since they toggle a form section in place. */
html body.leader-workspace-active .lw-link-btn {
    background: none;
    border: 0;
    padding: 0;
    color: var(--lw-accent);
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
html body.leader-workspace-active .lw-link-btn:focus-visible {
    outline: 2px solid var(--lw-accent);
    outline-offset: 2px;
}


/* ── Task 12: Reports & Analytics ── */

/* Analytics trend sparklines (js/team-management.js insightsSparkline calls):
   stroke/fill use currentColor, so the wrapping element's `color` is what
   actually renders — token-driven instead of raw text-*-300 utilities. */
html body.leader-workspace-active .lw-spark--opened { color: var(--lw-accent); }
html body.leader-workspace-active .lw-spark--closed { color: var(--lw-success-text); }
html body.leader-workspace-active .lw-spark--backlog { color: var(--lw-warning-text); }

/* Analytics hero ("Tickets closed"): a plain .lw-card with an accent
   inline-start border replaces the old dark gradient background-image. */
html body.leader-workspace-active .lw-insights-hero {
    border-inline-start: 4px solid var(--lw-accent);
}
html body.leader-workspace-active .lw-insights-hero-value {
    color: var(--lw-text);
    font-size: 2.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
html body.leader-workspace-active .lw-insights-hero-note {
    color: var(--lw-text-muted);
    font-size: 12px;
}
html body.leader-workspace-active .lw-insights-hero-note strong {
    color: var(--lw-success-text);
    font-weight: 700;
}
/* ── Task 13: KPI & goals and AI Assistant ── */

/* A smaller button for a repeated per-row/inline action (spec "compact table
   actions 32px") — quick-question chips, the Copilot bubble's Copy link, and
   a KPI goal row's Remove. Still `.lw-btn`, so the ≤767px !important rule
   above still bumps it to 44px there. */
html body.leader-workspace-active .lw-btn--compact { min-height: 32px; padding: 6px 12px; font-size: 13px; }
/* A toggled compact button (Copilot's quick-question filter, and the KPI
   quick-range segmented buttons reuse .lw-segmented itself) shows selection
   the same way .lw-segmented does: filled surface + accent text. */
html body.leader-workspace-active .lw-btn--secondary[aria-pressed="true"] {
    background: var(--lw-selected);
    border-color: var(--lw-accent);
    color: var(--lw-accent);
}
html body.leader-workspace-active .lw-btn .lw-badge { margin-inline-start: 6px; }

/* Generic progress bar (AI Assistant monthly budget). Tone maps to the same
   success/warning/error tokens as badges/alerts. */
html body.leader-workspace-active .lw-progress-track {
    block-size: 8px;
    border-radius: 999px;
    background: var(--lw-surface-2);
    overflow: hidden;
}
html body.leader-workspace-active .lw-progress-fill { block-size: 100%; border-radius: inherit; }
html body.leader-workspace-active .lw-progress-fill--ok { background: var(--lw-success-text); }
html body.leader-workspace-active .lw-progress-fill--warn { background: var(--lw-warning-text); }
html body.leader-workspace-active .lw-progress-fill--danger { background: var(--lw-error-text); }

/* AI Assistant — Usage strip + Usage & Keys sub-tab. */
html body.leader-workspace-active .lw-assistant-usage-chips { display: flex; flex-wrap: wrap; gap: 8px; }
html body.leader-workspace-active .lw-assistant-usage-chip-detail { margin-inline-start: 4px; font-weight: 500; opacity: .8; }
html body.leader-workspace-active .lw-ai-key-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html body.leader-workspace-active .lw-ai-key-daily { margin-block-start: 4px; padding-block-start: 12px; border-block-start: 1px solid var(--lw-border); }

/* AI Assistant — Ops Brain (its default sub-tab). js/ai-ops-brain.js paints
   its dashboard with the app THEME tokens (--bg-card, --text-muted,
   --color-*-bg …), which css/style.css pins to the app's own palettes:
   there, muted labels (#64748B) measured 1.9–3.7:1 and secondary text
   (#94A3B8) 3.6–3.8:1 on the dark cards, and muted labels 2.3–2.6:1 in
   light — found by the release matrix once the Ops Brain loader actually ran
   under mocks (every earlier test only ever rendered its error card). Map
   those tokens onto the workspace's validated --lw-* palette so every
   text/surface pair here is one the rest of the workspace already clears
   4.5:1 with, in both themes. The id outranks style.css's
   html:not([data-theme="light"]) … .ai-ops-brain pin (0,3,2) whatever the
   load order; the main app's own Ops Brain page is untouched. */
html body.leader-workspace-active #leader-workspace-tab-body .ai-ops-brain {
    --bg-card: var(--lw-surface);
    --bg-subtle: var(--lw-surface-2);
    --bg-muted: var(--lw-surface-2);
    --text-primary: var(--lw-text);
    --text-secondary: var(--lw-text-muted);
    --text-muted: var(--lw-text-muted);
    --text-link: var(--lw-accent);
    --border-default: var(--lw-border);
    --border-strong: var(--lw-control-border);
    --color-brand: var(--lw-action);
    --color-brand-hover: var(--lw-action-hover);
    --color-brand-fg: #FFFFFF;
    --color-brand-bg: var(--lw-selected);
    --color-brand-border: var(--lw-accent);
    --color-selected-fg: var(--lw-accent);
    --color-selected-bg: var(--lw-selected);
    --color-selected-border: var(--lw-accent);
    --color-success-fg: var(--lw-success-text);
    --color-success-bg: var(--lw-success-bg);
    --color-success-border: var(--lw-success-text);
    --color-warning-fg: var(--lw-warning-text);
    --color-warning-bg: var(--lw-warning-bg);
    --color-warning-border: var(--lw-warning-text);
    --color-danger-fg: var(--lw-error-text);
    --color-danger-bg: var(--lw-error-bg);
    --color-danger-border: var(--lw-error-text);
}

/* AI Assistant — Copilot chat thread. A user bubble sits on the accent
   "selected" tint; the assistant bubble sits on the neutral surface with a
   border — both keep var(--lw-text) so they read in either theme (no
   hardcoded light-on-dark bubble colors). */
/* The thread scrolls inside a fixed-height box (the renderer's old
   max-h-[26rem] was never in the purged Tailwind build, so it did nothing). */
html body.leader-workspace-active .lw-chat-thread { max-block-size: 26rem; overflow-y: auto; }
html body.leader-workspace-active .lw-chat-row { display: flex; }
html body.leader-workspace-active .lw-chat-row--user { justify-content: flex-end; }
html body.leader-workspace-active .lw-chat-row--assistant { justify-content: flex-start; }
html body.leader-workspace-active .lw-chat-bubble {
    max-inline-size: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--lw-text);
}
html body.leader-workspace-active .lw-chat-bubble--user { background: var(--lw-selected); border-end-end-radius: 4px; }
html body.leader-workspace-active .lw-chat-bubble--assistant { background: var(--lw-surface-2); border: 1px solid var(--lw-border); border-end-start-radius: 4px; }
html body.leader-workspace-active .lw-chat-answer { margin: 0; }
html body.leader-workspace-active .lw-chat-section { margin-block-start: 8px; }
html body.leader-workspace-active .lw-chat-section-label { margin: 0; color: var(--lw-text-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
html body.leader-workspace-active .lw-chat-list { display: grid; gap: 4px; margin: 4px 0 0; padding-inline-start: 18px; color: var(--lw-text); font-size: 13px; list-style: disc; }
html body.leader-workspace-active .lw-chat-tickets { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 8px; }
html body.leader-workspace-active .lw-chat-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-start: 8px; }
html body.leader-workspace-active .lw-chat-meta { color: var(--lw-text-muted); font-size: 12px; }
html body.leader-workspace-active .lw-chat-empty { margin: 0; padding: 12px; border: 1px solid var(--lw-border); border-radius: 8px; background: var(--lw-surface-2); color: var(--lw-text-muted); font-size: 14px; }
html body.leader-workspace-active .lw-chat-input { flex: 1 1 auto; min-width: 0; }

/* AI Assistant — a generated report's nested sections. */
html body.leader-workspace-active .lw-ai-report-section { padding: 12px 16px; border-radius: 12px; background: var(--lw-surface-2); }

/* KPI Performance — per-member enhancement suggestion (was an amber-tinted
   box; now the warning tone tokens so both themes stay readable). */
html body.leader-workspace-active .lw-kpi-suggestion { padding: 12px; border-radius: 12px; background: var(--lw-warning-bg); }
html body.leader-workspace-active .lw-kpi-suggestion-name { margin: 0; color: var(--lw-warning-text); font-size: 13px; font-weight: 700; }
html body.leader-workspace-active .lw-kpi-suggestion-text { margin: 4px 0 0; color: var(--lw-warning-text); font-size: 12px; line-height: 1.5; }

/* KPI Goals editor. */
html body.leader-workspace-active .lw-kpi-weight { font-weight: 700; font-variant-numeric: tabular-nums; }
html body.leader-workspace-active .lw-kpi-weight--ok { color: var(--lw-success-text); }
html body.leader-workspace-active .lw-kpi-weight--warn { color: var(--lw-warning-text); }
html body.leader-workspace-active .lw-kpi-goals-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0; font-size: 14px; color: var(--lw-text); }
html body.leader-workspace-active .lw-kpi-goals-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-block-start: 12px; border-block-start: 1px solid var(--lw-border); }
html body.leader-workspace-active .lw-card.lw-kpi-goal-row { display: grid; gap: 10px; }
html body.leader-workspace-active .lw-kpi-goal-row-head { display: flex; align-items: center; justify-content: space-between; }
html body.leader-workspace-active .lw-kpi-goal-row-index { color: var(--lw-text-muted); font-size: 13px; font-weight: 700; }
html body.leader-workspace-active .lw-kpi-goal-row-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }