:root {
    --admin-shell-max-width: 1680px;
    --admin-shell-padding: 28px;
    --admin-shell-padding-sm: 14px;
    --admin-page-gap: 24px;
    --admin-section-gap: 16px;

    --admin-radius-xl: 18px;
    --admin-radius-lg: 14px;
    --admin-radius-md: 10px;
    --admin-radius-sm: 8px;

    --admin-shadow-lg: 0 20px 45px rgba(4, 8, 18, 0.35);
    --admin-shadow-md: 0 10px 26px rgba(3, 10, 24, 0.22);
    --admin-shadow-sm: 0 5px 14px rgba(3, 10, 24, 0.16);

    --admin-control-height: 44px;
    --admin-touch-height: 40px;

    --admin-table-cell-padding-x: 12px;
    --admin-table-cell-padding-y: 10px;
    --admin-table-header-height: 44px;

    /* TRI-229. AppbarBackground is #0F172A in the light theme and #060B19 in the
       dark one, so the app bar is the one dark surface that survives the theme
       toggle — while --mud-palette-* is always the ACTIVE theme's ramp. The env
       chip used to read --mud-palette-warning directly, so darkening the light
       accents for AA on white surfaces dropped "DEVELOPMENT" from 5.54:1 to
       2.71:1 on all 43 routes. These four are AdminTheme.Dark's ramp, pinned as
       literals because MudBlazor exposes only one palette at a time. They score
       5.1-7.0:1 over the bar and leave dark mode pixel-identical.

       They live here, not in MainLayout.razor.css, because `::deep X` compiles
       to `[b-id] X` and needs the scope attribute on an ANCESTOR — Blazor CSS
       isolation only stamps MainLayout's own HTML elements, every one of which
       sits INSIDE MudAppBar. `::deep .admin-appbar` therefore matches nothing
       (the same dead-CSS shape TRI-220 found on --admin-control-border-hover);
       the chip rules work only because .admin-appbar-actions is a stamped
       ancestor of the chip. Verified with tools/qa/tri-229. */
    --admin-appbar-neutral: #94A3B8;    /* = PaletteDark.TextSecondary */
    --admin-appbar-success: #34D399;    /* = PaletteDark.Success */
    --admin-appbar-info: #67E8F9;       /* = PaletteDark.Info */
    --admin-appbar-warning: #FBBF24;    /* = PaletteDark.Warning */
}

html {
    margin: 0;
    min-height: 100%;
    font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--mud-palette-text-primary);
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: inherit;
    background: radial-gradient(130% 140% at 100% -20%, rgba(94, 120, 255, 0.12), transparent 46%),
        radial-gradient(140% 120% at -10% 120%, rgba(45, 209, 201, 0.12), transparent 40%),
        var(--mud-palette-background);
    background-attachment: fixed;
    color: inherit;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.admin-login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(24px, 6vw, 64px);
}

.admin-login-card {
    width: min(100%, 460px);
    padding: clamp(24px, 4vw, 36px);
    border-radius: var(--admin-radius-xl);
    background: linear-gradient(
            145deg,
            color-mix(in oklab, var(--mud-palette-surface) 92%, transparent),
            color-mix(in oklab, var(--mud-palette-background) 72%, var(--mud-palette-primary) 6%));
    box-shadow:
        0 34px 80px rgba(3, 10, 24, 0.42),
        0 0 0 1px color-mix(in oklab, var(--mud-palette-lines-default) 58%, transparent),
        0 0 42px color-mix(in oklab, var(--mud-palette-primary) 14%, transparent);
}

.admin-login-brand {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
}

.admin-login-title {
    margin: 0;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.admin-login-logo {
    display: block;
    width: min(260px, 58vw);
    max-height: 72px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 5px 12px rgba(0, 18, 60, 0.28));
}

.admin-login-subtitle {
    margin-top: 6px;
    color: var(--mud-palette-text-secondary);
}

.admin-login-form {
    display: grid;
    gap: 12px;
}

.admin-login-label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-login-input {
    width: 100%;
    min-height: var(--admin-control-height);
    padding: 0 14px;
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 78%, transparent);
    border-radius: var(--admin-radius-md);
    outline: none;
    color: var(--mud-palette-text-primary);
    background: color-mix(in oklab, var(--mud-palette-surface) 74%, var(--mud-palette-background));
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.admin-login-input:focus {
    border-color: color-mix(in oklab, var(--mud-palette-primary) 70%, var(--mud-palette-lines-default));
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--mud-palette-primary) 18%, transparent);
}

.admin-login-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.9rem;
}

.admin-login-submit {
    min-height: 46px;
}

.admin-login-alert {
    margin-bottom: 18px;
}

/* Drawer nav: MudBlazor ships `.mud-nav-link.active { border-inline-end: 2px solid … }`
   plus palette variants. That reads as a harsh rail (inline-end == physical left in RTL).
   Scoped NavMenu.razor.css can lose specificity wars — mirror kills on the drawer root. */
aside.admin-drawer nav.admin-navmenu a.mud-nav-link.active,
aside.admin-drawer nav.admin-navmenu a.mud-nav-link[data-aggregate-active="true"],
.admin-drawer-content nav.admin-navmenu a.mud-nav-link.active,
.admin-drawer-content nav.admin-navmenu a.mud-nav-link[data-aggregate-active="true"] {
    border: none !important;
    border-color: transparent !important;
    border-inline: none !important;
    border-inline-start: none !important;
    border-inline-end: none !important;
    border-inline-end-style: none !important;
    border-inline-end-width: 0 !important;
    border-inline-start-style: none !important;
    border-inline-start-width: 0 !important;
    box-shadow: none !important;
}

.admin-main-container {
    max-width: var(--admin-shell-max-width);
    margin: 0 auto;
    padding: var(--admin-shell-padding);
}

.admin-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.admin-page-title {
    margin: 0;
    letter-spacing: -0.018em;
    line-height: 1.15;
    font-weight: 700;
}

.admin-page-subtitle {
    margin-top: 6px;
    max-width: 88ch;
    color: var(--mud-palette-text-secondary);
    font-size: 0.94rem;
}

/* Page-level action cluster on the right of an admin-page-header (e.g. a
   Refresh / Export / New button). Sits flush with the page title baseline. */
.admin-page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Inline scope/info banner. Used to clarify what a list represents (e.g.
   what gets logged on the Activity Log). Subtler than MudAlert -- a thin
   tinted strip with an icon, no panel chrome. */
.admin-info-strip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--admin-radius-md);
    background: color-mix(in oklab, var(--mud-palette-info) 8%, transparent);
    border: 1px solid color-mix(in oklab, var(--mud-palette-info) 30%, transparent);
    color: var(--mud-palette-text-primary);
    font-size: 0.82rem;
    line-height: 1.5;
}

.admin-info-strip .mud-icon-root {
    color: var(--mud-palette-info);
    flex-shrink: 0;
    margin-top: 2px;
}

.admin-info-strip strong {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.admin-info-link {
    color: var(--mud-palette-info);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px dotted color-mix(in oklab, var(--mud-palette-info) 60%, transparent);
}

.admin-info-link:hover {
    border-bottom-style: solid;
    color: var(--mud-palette-primary);
}

.admin-page-grid {
    display: grid;
    gap: var(--admin-page-gap);
}

/* ── Page tab navigation ─────────────────────────────────────
   Used by sibling pages that should feel like one tabbed surface
   (Categories: Browse/Refiner/Merges, Players: Browse/Schema, etc.).
   Sits below the page header. */
.admin-page-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    margin-bottom: 18px;
    border-radius: var(--admin-radius-md);
    background: color-mix(in oklab, var(--mud-palette-surface) 60%, var(--mud-palette-background));
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 50%, transparent);
    overflow-x: auto;
    width: fit-content;
    max-width: 100%;
}

.admin-page-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--admin-radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.admin-page-tab:hover {
    background: color-mix(in oklab, var(--mud-palette-primary) 8%, transparent);
    color: var(--mud-palette-text-primary);
}

.admin-page-tab--active {
    background: color-mix(in oklab, var(--mud-palette-primary) 15%, transparent);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mud-palette-primary) 35%, transparent);
}

.admin-page-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    background: color-mix(in oklab, var(--mud-palette-primary) 22%, transparent);
    color: var(--mud-palette-primary);
    font-variant-numeric: tabular-nums;
}

.admin-page-tabs--sticky {
    position: sticky;
    top: 76px;
    z-index: 5;
    backdrop-filter: blur(8px);
    background: color-mix(in oklab, var(--mud-palette-surface) 85%, transparent);
}

/* Scroll-margin keeps anchor links from jumping under the sticky AppBar/tab strip. */
.admin-anchor-section {
    scroll-margin-top: 132px;
}

/* ── Collapsible "Advanced" cards ─────────────────────────────
   Used for power-user surfaces (Bundles Seed Export, anywhere else
   that needs an "open to reveal" container). Uses native <details>
   for a11y; chevron rotates via the [open] selector. */
.admin-collapsible-card {
    list-style: none;
    border-radius: var(--admin-radius-xl);
    overflow: hidden;
}

.admin-collapsible-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    cursor: pointer;
    user-select: none;
}

.admin-collapsible-card-header::-webkit-details-marker {
    display: none;
}

.admin-collapsible-card[open] > .admin-collapsible-card-header {
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 50%, transparent);
}

.admin-collapsible-card[open] > .admin-collapsible-card-header .qe-chevron {
    transform: rotate(180deg);
}

.admin-collapsible-card-body {
    padding: 24px;
}

/* ── Cmd+K command palette ───────────────────────────────── */
.cmdk-overlay {
    position: fixed;
    inset: 0;
    z-index: 1600;
    background: color-mix(in oklab, var(--mud-palette-background) 70%, transparent);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 12vh;
    animation: cmdk-fade 0.12s ease-out;
}

@keyframes cmdk-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cmdk-shell {
    width: min(640px, 92vw);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: color-mix(in oklab, var(--mud-palette-surface) 96%, transparent);
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent);
    border-radius: var(--admin-radius-lg);
    box-shadow:
        0 0 80px rgba(110, 139, 255, 0.08),
        0 25px 60px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    overflow: hidden;
    animation: cmdk-scale 0.16s ease-out;
}

@keyframes cmdk-scale {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.cmdk-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 50%, transparent);
}

.cmdk-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-size: 1rem;
    font-family: inherit;
}

/* TRI-229: this input is enabled and the placeholder is its only label, so the
   disabled-control exemption in WCAG 1.4.3 does not apply. text-disabled
   measured 2.65:1 light / 1.85:1 dark at 16px. */
.cmdk-input::placeholder {
    color: var(--mud-palette-text-secondary);
}

.cmdk-results {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.cmdk-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: var(--admin-radius-sm);
    background: transparent;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    font-size: 0.9rem;
    text-align: left;
    transition: background 0.1s ease;
}

.cmdk-row:hover,
.cmdk-row--active {
    background: color-mix(in oklab, var(--mud-palette-primary) 14%, transparent);
}

.cmdk-row-icon {
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

.cmdk-row-label {
    flex: 1;
    font-weight: 500;
}

.cmdk-row-section {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
    opacity: 0.7;
}

.cmdk-empty {
    padding: 36px 24px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.cmdk-hints {
    display: flex;
    gap: 16px;
    padding: 10px 18px;
    border-top: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 50%, transparent);
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
}

.cmdk-kbd {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: color-mix(in oklab, var(--mud-palette-text-primary) 8%, transparent);
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 80%, transparent);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Publish Schedule timeline strip ─────────────────────── */
.publish-timeline-strip {
    position: relative;
    height: 88px;
    padding-top: 18px;
}

.publish-timeline-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.publish-timeline-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: color-mix(in oklab, var(--mud-palette-lines-default) 50%, transparent);
}

.publish-timeline-tick-label {
    position: absolute;
    top: 0;
    left: 4px;
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.publish-timeline-bars {
    position: absolute;
    top: 22px;
    left: 0;
    right: 0;
    bottom: 6px;
}

.publish-timeline-bar {
    position: absolute;
    height: 18px;
    border-radius: 4px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: default;
    background: color-mix(in oklab, var(--mud-palette-primary) 30%, var(--mud-palette-surface));
    border: 1px solid color-mix(in oklab, var(--mud-palette-primary) 50%, transparent);
    color: var(--mud-palette-text-primary);
}

.publish-timeline-bar + .publish-timeline-bar {
    margin-top: 4px;
    /* Stack overlapping bars vertically by giving each a small offset slot */
    top: 26px;
}

.publish-timeline-bar--event {
    background: color-mix(in oklab, var(--mud-palette-tertiary) 28%, var(--mud-palette-surface));
    border-color: color-mix(in oklab, var(--mud-palette-tertiary) 50%, transparent);
}

.publish-timeline-bar--segment {
    background: color-mix(in oklab, var(--mud-palette-info) 28%, var(--mud-palette-surface));
    border-color: color-mix(in oklab, var(--mud-palette-info) 50%, transparent);
}

.publish-timeline-bar--changeset {
    background: color-mix(in oklab, var(--mud-palette-warning) 28%, var(--mud-palette-surface));
    border-color: color-mix(in oklab, var(--mud-palette-warning) 50%, transparent);
}

.publish-timeline-bar-label {
    font-size: 0.72rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Sparkline ────────────────────────────────────────────── */
.sparkline {
    display: inline-block;
    line-height: 0;
    color: var(--mud-palette-text-secondary);
}

.sparkline svg {
    width: 100%;
    height: 100%;
    display: block;
}

.sparkline-empty {
    font-size: 0.7rem;
    opacity: 0.4;
}

.admin-surface {
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 85%, transparent);
    border-radius: var(--admin-radius-xl);
    box-shadow: var(--admin-shadow-sm);
    background: color-mix(in oklab, var(--mud-palette-surface) 92%, transparent);
    backdrop-filter: blur(2px);
}

.admin-surface--raised {
    box-shadow: var(--admin-shadow-md);
}

.admin-section-title {
    margin: 0 0 8px;
}

.admin-section-divider {
    margin: 6px 0 14px;
    border-color: var(--mud-palette-lines-default) !important;
}

.admin-inline-hint {
    color: var(--mud-palette-text-secondary);
}

.admin-chip {
    border-radius: 999px;
    font-weight: 600;
}

.admin-form-grid {
    row-gap: 24px;
}

.admin-form-grid .mud-input-control {
    min-height: var(--admin-control-height);
}

/* Improved form section spacing */
.admin-form-section {
    margin-bottom: 32px;
}

.admin-form-section-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--mud-palette-text-primary);
}

/* Two-column form layout */
.admin-form-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 768px) {
    .admin-form-2col {
        grid-template-columns: 1fr;
    }
}

/* Three-column form layout with better gaps */
.admin-form-3col {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 1024px) {
    .admin-form-3col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .admin-form-3col {
        grid-template-columns: 1fr;
    }
}

/* Empty state styling */
.admin-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.admin-empty-state-icon {
    font-size: 64px;
    margin-bottom: 16px;
    color: var(--mud-palette-text-secondary);
    opacity: 0.5;
}

.admin-empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--mud-palette-text-primary);
}

.admin-empty-state-subtitle {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    max-width: 400px;
}

/* Spinbutton sizing fixes (exclude MudSwitch toggle base) */
.mud-input-control .mud-icon-button:not(.mud-switch-base) {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
}

.mud-input-control input[type="number"]::-webkit-inner-spin-button,
.mud-input-control input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
}

/* Better slider styling */
.mud-slider .mud-slider-track {
    height: 8px;
    border-radius: 4px;
}

.mud-slider .mud-slider-thumb {
    width: 20px;
    height: 20px;
}

/* Stat card improvements */
.admin-stat-card {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Containment so long values (e.g. 14-character version timestamps in
       Bundle Manager) can never bleed into the next column. */
    min-width: 0;
    overflow: hidden;
    /* Uniform min-height keeps rows of stat cards aligned across pages
       (Jobs/Questions/Releases/Categories all converge at the same baseline). */
    min-height: 132px;
    justify-content: center;
}

.admin-stat-card-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admin-stat-card-value {
    /* Fluid sizing so long values shrink gracefully in narrow columns
       (Bundle Manager's 14-char version timestamp was overflowing the card
       at the previous fixed 2.5rem). */
    font-size: clamp(1.5rem, 2.6vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
    /* Allow long unbroken strings (version IDs, hashes) to wrap inside the
       card instead of overflowing. min-width:0 unlocks shrink in flex columns. */
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    /* Tabular numerals so numeric KPI values across cards stay vertically
       aligned regardless of digit width. */
    font-variant-numeric: tabular-nums;
}

.admin-stat-card-trend {
    font-size: 0.875rem;
    font-weight: 500;
}

.admin-stat-card-trend--up {
    color: var(--mud-palette-success);
}

.admin-stat-card-trend--down {
    color: var(--mud-palette-error);
}

/* Pipeline stages: one column per stage, left rule reading as flow order */
.admin-pipeline-stage {
    height: 100%;
    padding-left: 14px;
    border-left: 2px solid var(--mud-palette-lines-default);
}

.admin-pipeline-stage:hover {
    border-left-color: var(--mud-palette-primary);
}

/* KPI row: tallest tile sets row height; papers fill the grid cell */
.questions-stat-grid.mud-grid {
    align-items: stretch;
}

.questions-stat-grid > .mud-grid-item {
    display: flex;
    align-self: stretch;
}

.questions-stat-grid > .mud-grid-item > .mud-paper {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
}

.question-stat-card {
    position: relative;
    min-height: 156px;
    height: 100%;
    justify-content: flex-start;
    gap: 10px;
    padding: 24px 28px;
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 72%, transparent);
    background:
        radial-gradient(150px 100px at 100% 0%, color-mix(in oklab, var(--mud-palette-primary) 7%, transparent), transparent 62%),
        color-mix(in oklab, var(--mud-palette-surface) 88%, var(--mud-palette-background));
}

.question-stat-card__grow {
    flex: 1 1 auto;
    min-height: 0;
}

.question-stat-card__footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    /* Keeps empty footers aligned when a sibling card shows the CTA */
    min-height: calc(var(--mud-button-small-height, 30px) + 2px);
}

.question-stat-card__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: color-mix(in oklab, var(--mud-palette-text-secondary) 82%, var(--mud-palette-primary));
    font-size: 0.74rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.question-stat-card__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--mud-palette-error);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--mud-palette-error) 14%, transparent);
}

.question-stat-card__value {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    color: var(--mud-palette-text-primary);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.question-stat-card__status {
    color: var(--mud-palette-text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0;
}

.question-stat-card__status--good {
    color: var(--mud-palette-success);
}

.question-stat-card__status--critical {
    color: var(--mud-palette-error);
}

.question-stat-card__hint {
    color: var(--mud-palette-text-secondary);
    font-size: 0.94rem;
    line-height: 1.35;
}

.question-stat-card__cta {
    width: 100%;
    margin-top: 0;
    justify-content: center;
}

.question-stat-card--broken {
    border-color: color-mix(in oklab, var(--mud-palette-error) 48%, var(--mud-palette-lines-default));
    background:
        radial-gradient(140px 120px at 100% 0%, color-mix(in oklab, var(--mud-palette-error) 12%, transparent), transparent 62%),
        color-mix(in oklab, var(--mud-palette-error) 8%, var(--mud-palette-surface));
    box-shadow:
        0 0 0 1px color-mix(in oklab, var(--mud-palette-error) 10%, transparent),
        0 14px 30px color-mix(in oklab, var(--mud-palette-error) 8%, transparent);
}

.question-stat-card--broken .question-stat-card__label {
    color: color-mix(in oklab, var(--mud-palette-error) 86%, var(--mud-palette-text-primary));
}

/* Jobs Header - Flexbox Alignment */
.jobs-compact-header {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

@media (max-width: 768px) {
    .jobs-compact-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
}

.jobs-compact-header .locale-select {
    width: 140px;
    flex-shrink: 0;
}

/* Category Selector */
.jobs-compact-header .category-selector {
    flex: 1 1 auto;
    min-width: 280px;
    width: 100%;
}

.jobs-compact-header .category-selector .mud-menu,
.jobs-compact-header .category-selector .mud-menu > div,
.jobs-compact-header .category-selector .mud-input-control,
.jobs-compact-header .category-selector .mud-input-control-input-container,
.jobs-compact-header .category-selector .mud-input {
    width: 100% !important;
}

/* Strip MudBlazor's default margins so flex-end works perfectly */
.jobs-compact-header .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Force buttons to be exactly 56px to match the inputs */
.jobs-compact-header .settings-toggle,
.jobs-compact-header .queue-button {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.jobs-compact-header .settings-toggle .mud-icon-button {
    height: 56px !important;
    width: 56px !important;
}

.jobs-compact-header .queue-button .mud-button {
    height: 56px !important;
    white-space: nowrap !important;
}


/* Category Dropdown Panel */
.category-dropdown-panel {
    min-width: 560px;
    max-width: 640px;
    max-height: 600px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--admin-radius-lg);
    background: var(--mud-palette-surface);
    box-shadow: var(--admin-shadow-lg);
}

@media (max-width: 680px) {
    .category-dropdown-panel {
        min-width: 300px;
        max-width: calc(100vw - 32px);
    }
}

.category-dropdown-search {
    padding: 16px 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.category-dropdown-tabs {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in oklab, var(--mud-palette-surface) 97%, var(--mud-palette-primary));
}

.category-dropdown-tabs ::deep .mud-tabs-toolbar {
    min-height: 52px;
}

.category-dropdown-tabs ::deep .mud-tab {
    min-height: 52px;
    padding: 14px 24px;
    font-weight: 500;
    font-size: 0.875rem;
    text-transform: none;
    letter-spacing: 0;
}

.category-dropdown-tabs ::deep .mud-tab.mud-tab-active {
    background: color-mix(in oklab, var(--mud-palette-surface) 100%, transparent);
    font-weight: 600;
}

/* CategoryPicker overlay: no MudMenu/MudPopover wrapper, no inline layout
   expansion. The field stays in its row; the absolute panel floats above the UI. */
.category-picker-wrapper {
    position: relative;
    width: 100%;
}

.category-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1600;
    background: transparent;
}

.category-dropdown-panel--overlay {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: max(560px, 100%);
    z-index: 1601;
}

/* backdrop-filter on .admin-surface creates a stacking context. Elevate the
   Suggestions form while its picker is open so later cards cannot paint over
   the dropdown. Keep this scoped to the one page that vertically neighbors a
   large empty/result surface. */
.subcategory-suggestion-form:has(.category-dropdown-panel--overlay) {
    position: relative;
    z-index: 1700;
}

.mud-dialog:has(.category-dropdown-panel--overlay),
.mud-dialog-content:has(.category-dropdown-panel--overlay) {
    overflow: visible !important;
}

.category-dropdown-content {
    padding: 16px 20px;
    overflow-y: auto;
    max-height: 380px;
}

/* Enhanced Category Tree Items - Larger, More Clickable */
.category-tree-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 4px;
}

.category-tree-item:hover {
    background: color-mix(in oklab, var(--mud-palette-primary) 10%, transparent);
}

.category-tree-item--selected {
    background: color-mix(in oklab, var(--mud-palette-primary) 18%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--mud-palette-primary) 40%, transparent);
}

.category-tree-expand {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.15s ease;
    background: color-mix(in oklab, var(--mud-palette-surface) 100%, transparent);
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 50%, transparent);
}

.category-tree-expand:hover {
    background: color-mix(in oklab, var(--mud-palette-primary) 20%, transparent);
    border-color: color-mix(in oklab, var(--mud-palette-primary) 50%, transparent);
    transform: scale(1.05);
}

/* Browse breadcrumb navigation */
.category-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 12px 16px;
    background: color-mix(in oklab, var(--mud-palette-surface) 95%, var(--mud-palette-primary));
    border-radius: 10px;
    margin-bottom: 16px;
}

.category-breadcrumb .mud-button-root {
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.category-breadcrumb .mud-button-root:not(:disabled):hover {
    background: color-mix(in oklab, var(--mud-palette-primary) 12%, transparent);
}

.category-breadcrumb .mud-icon-root {
    color: var(--mud-palette-text-secondary);
    opacity: 0.6;
}

/* Settings Expansion Panel */
.settings-collapsed-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.settings-expanded-panel {
    padding: 20px 24px 24px;
    background: color-mix(in oklab, var(--mud-palette-background) 50%, transparent);
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ── Job queue settings (expanded panel layout) ─────────────────────
   Restructured from a flat 4-column MudGrid into named sections so an
   operator can scan the controls by purpose (Volume / Difficulty / Mode
   / Options) instead of guessing what each row affects. */
.qe-job-settings {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.1fr)
        minmax(280px, 1.4fr)
        minmax(260px, 1.2fr)
        minmax(240px, 1fr);
    gap: 24px 32px;
    align-items: start;
}

@media (min-width: 1200px) {
    .qe-job-settings__section--generation,
    .qe-job-settings__section--targeted,
    .qe-job-settings__section--options {
        grid-column: span 2;
    }
}

@media (max-width: 1199px) {
    .qe-job-settings {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 599px) {
    .qe-job-settings {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.qe-job-settings__section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.qe-job-settings__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.qe-job-settings__hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--mud-palette-text-primary);
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}

.qe-job-settings__fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qe-job-settings__fields--two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Difficulty range pills (5 buttons, click closer endpoint to move it) */
.qe-difficulty-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.qe-difficulty-presets .mud-button-root {
    border-radius: 999px;
    padding: 2px 12px;
    min-width: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.78rem;
    font-weight: 600;
}

.qe-difficulty-chips {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.qe-difficulty-pill {
    background: color-mix(in oklab, var(--mud-palette-surface) 80%, transparent);
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent);
    border-radius: 8px;
    padding: 8px 4px 6px;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    font-family: inherit;
    -webkit-user-select: none;
    user-select: none;
}

.qe-difficulty-pill:hover {
    border-color: color-mix(in oklab, var(--mud-palette-primary) 40%, transparent);
    color: var(--mud-palette-text-primary);
}

.qe-difficulty-pill:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.qe-difficulty-pill--active {
    background: color-mix(in oklab, var(--mud-palette-primary) 14%, transparent);
    border-color: color-mix(in oklab, var(--mud-palette-primary) 50%, transparent);
    color: var(--mud-palette-text-primary);
}

.qe-difficulty-pill--endpoint {
    background: color-mix(in oklab, var(--mud-palette-primary) 26%, transparent);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--mud-palette-primary) 35%, transparent);
}

.qe-difficulty-pill__num {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.qe-difficulty-pill__label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
    line-height: 1;
    /* Reserve a row even on mid pills (2, 4) so all five align vertically. */
    min-height: 0.7rem;
}

/* Image ratio: percentage display + slider + legend */
.qe-image-ratio {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 4px 0;
}

.qe-image-ratio__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.qe-image-ratio__label {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.qe-image-ratio__value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.qe-image-ratio__legend {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
    opacity: 0.7;
    margin-top: -4px;
}

/* Toggle row (switch + 2-line label). Wraps the whole row in <label> so
   clicking anywhere in the copy block still activates the switch. */
.qe-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    cursor: pointer;
}

.qe-toggle-row__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-top: 6px;
}

.qe-toggle-row__title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    line-height: 1.2;
}

.qe-toggle-row__hint {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
    opacity: 0.85;
}

/* Disabled toggle: dim the whole row in tandem with MudSwitch's own dim
   state so the parent rule is visually aligned with the disabled control. */
.qe-toggle-row--disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.qe-toggle-row--disabled .qe-toggle-row__title,
.qe-toggle-row--disabled .qe-toggle-row__hint {
    opacity: 1;
}

/* Quick category chips */
.category-quick-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-chip {
    cursor: pointer;
    transition: all 0.15s ease;
}

.category-chip:hover {
    background: color-mix(in oklab, var(--mud-palette-primary) 15%, transparent);
    border-color: var(--mud-palette-primary);
}

.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 12px;
}

.admin-toolbar > * {
    min-width: 160px;
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.admin-actions .mud-button-root {
    min-height: var(--admin-touch-height);
    padding-inline: 14px;
}

.admin-filter-toolbar {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.admin-filter-toolbar > * {
    grid-column: span 3;
    min-width: 0;
}

.question-filter-card {
    padding: 22px 24px;
}

.question-filter-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.question-filter-card__title {
    margin: 2px 0 4px;
}

.question-filter-card__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.question-filter-card__actions .mud-button-root {
    min-height: 40px;
}

.question-filter-card__primary,
.question-filter-card__filters {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
}

.question-filter-card__primary {
    grid-template-columns: minmax(320px, 1.35fr) minmax(240px, 0.85fr);
}

.question-filter-card__filters {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.question-filter-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 65%, transparent);
}

.question-filter-card__chips {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.question-filter-card .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

.dedupe-maintenance-modal {
    width: min(1180px, 96vw);
    height: min(780px, 92vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dedupe-maintenance-modal__header {
    flex-shrink: 0;
}

.dedupe-maintenance-modal__body {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 16px;
    padding: 18px 20px 20px;
    overflow: auto;
}

.dedupe-maintenance-guardrail {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid color-mix(in oklab, var(--mud-palette-info) 28%, var(--mud-palette-lines-default));
    background: color-mix(in oklab, var(--mud-palette-info) 8%, var(--mud-palette-surface));
}

.dedupe-maintenance-controls {
    display: grid;
    gap: 12px;
}

.dedupe-maintenance-scope {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) 180px;
    gap: 12px;
    align-items: start;
    max-width: 620px;
}

.dedupe-maintenance-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.dedupe-maintenance-actions .mud-button-root {
    height: 40px;
    min-height: 40px;
    padding-inline: 14px;
}

.dedupe-maintenance-results {
    min-height: 220px;
}

.dedupe-maintenance-empty {
    min-height: 220px;
}

.admin-table-container {
    padding: 10px;
}

.question-table.admin-table-container {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.admin-table-container .mud-table-container {
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 80%, transparent);
    border-radius: var(--admin-radius-lg);
    overflow: auto;
}

.question-table .mud-table-container {
    border-color: color-mix(in oklab, var(--mud-palette-lines-default) 58%, transparent);
    background: color-mix(in oklab, var(--mud-palette-surface) 72%, var(--mud-palette-background));
}

.question-table .mud-table-root {
    background: transparent;
}

.question-table .mud-table-head .mud-table-cell {
    height: 42px;
    color: color-mix(in oklab, var(--mud-palette-text-secondary) 78%, var(--mud-palette-primary));
    font-size: 0.68rem;
    font-weight: 760;
    letter-spacing: 0.11em;
}

.question-table .mud-table-body .mud-table-cell {
    padding-top: 12px;
    padding-bottom: 12px;
    vertical-align: middle;
}

.question-table-question {
    display: -webkit-box;
    overflow: hidden;
    color: var(--mud-palette-text-primary);
    font-weight: 650;
    line-height: 1.38;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.question-table-category {
    display: -webkit-box;
    overflow: hidden;
    color: color-mix(in oklab, var(--mud-palette-text-secondary) 86%, var(--mud-palette-text-primary));
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.question-media-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 2px 7px;
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent);
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in oklab, var(--mud-palette-surface) 62%, transparent);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.question-media-chip .mud-icon-root {
    font-size: 0.95rem;
}

.question-media-chip--ready {
    color: color-mix(in oklab, var(--mud-palette-info) 76%, var(--mud-palette-text-primary));
    border-color: color-mix(in oklab, var(--mud-palette-info) 34%, transparent);
    background: color-mix(in oklab, var(--mud-palette-info) 10%, transparent);
}

.question-media-chip--missing {
    color: color-mix(in oklab, var(--mud-palette-error) 82%, var(--mud-palette-text-primary));
    border-color: color-mix(in oklab, var(--mud-palette-error) 36%, transparent);
    background: color-mix(in oklab, var(--mud-palette-error) 10%, transparent);
}

.question-media-chip--text {
    color: color-mix(in oklab, var(--mud-palette-text-secondary) 78%, var(--mud-palette-text-primary));
}

.admin-table-stable .mud-table-table {
    table-layout: fixed;
    width: 100%;
}

/* admin-table-stable enforces fixed widths via column %, so the table
   container should never need horizontal scroll. Suppress the spurious
   bottom scrollbar that appears from sub-pixel rounding when the table
   fits exactly. Mobile (<600px) collapses tables to cards anyway. */
.admin-table-stable.admin-table-container .mud-table-container,
.admin-table-stable .mud-table-container {
    overflow-x: hidden;
}

/* Sticky Actions column for wide tables (Jobs, Players, etc.).
   Cause: column widths summing to ~100% can still push the rightmost
   column off-screen on narrower viewports because overflow-x: hidden
   silently clips excess. Pinning the actions cell to the right edge
   keeps View Details / Cancel reachable without horizontal scrolling
   and without forcing every consumer to recompute column percentages
   when adding a new column. Apply by adding the .admin-actions-sticky
   class to the relevant <MudTh> and <MudTd> Style attribute, or scope
   via [data-label="Actions"] (MudTable sets DataLabel as data-label). */
.admin-table-stable .mud-table-cell[data-label="Actions"] {
    position: sticky;
    right: 0;
    background: var(--mud-palette-surface);
    z-index: 1;
    /* Subtle left shadow so the operator perceives the sticky column
       as floating above the underlying scrolled content rather than
       overlapping it. */
    box-shadow: -2px 0 6px -2px color-mix(in oklab, var(--mud-palette-background) 60%, transparent);
}

.admin-table-stable .mud-table-head .mud-table-cell[data-label="Actions"],
.admin-table-stable .mud-table-head th:last-child {
    position: sticky;
    right: 0;
    background: var(--mud-palette-surface);
    z-index: 2;
}

/* Visually hidden but available to assistive tech (a11y utility).
   Use for column headers that have icon-only content (e.g. kebab menus)
   or any control where the visible text would be redundant. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.admin-table-stable .mud-table-head .mud-table-cell {
    height: var(--admin-table-header-height);
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 0 var(--admin-table-cell-padding-x);
    vertical-align: middle;
    white-space: nowrap;
}

.admin-table-stable .mud-table-body .mud-table-cell {
    padding: var(--admin-table-cell-padding-y) var(--admin-table-cell-padding-x);
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent);
    vertical-align: middle;
    /* Tabular numerals globally: keeps numeric columns (cost, runtime, counts,
       currency, dates) optically aligned without per-page fiddling. */
    font-variant-numeric: tabular-nums;
}

.admin-stat-card-trend {
    font-variant-numeric: tabular-nums;
}

/* ── Asset / image preview surfaces ─────────────────────────────
   Used for category icon thumbnails (white-on-dark + dark-on-light
   contrast pairs) and illustration previews. Replaces hand-coded
   #333 / #eee / #f5f5f5 backgrounds with palette-driven surfaces
   that adapt to dark/light theme. */
.admin-asset-thumb {
    border-radius: var(--admin-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklab, var(--mud-palette-text-primary) 78%, var(--mud-palette-background));
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 40%, transparent);
}

.admin-asset-thumb--dark {
    /* Dark thumb: white-on-dark icons render against the inverse of body text */
    background: color-mix(in oklab, var(--mud-palette-text-primary) 82%, var(--mud-palette-background));
}

.admin-asset-thumb--light {
    /* Light thumb: dark icons render against a near-paper surface */
    background: color-mix(in oklab, var(--mud-palette-text-primary) 12%, var(--mud-palette-surface));
}

.admin-illustration-thumb {
    border-radius: var(--admin-radius-sm);
    background: color-mix(in oklab, var(--mud-palette-surface) 50%, var(--mud-palette-background));
    border: 1px dashed color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent);
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Settings status strip ───────────────────────────────────
   Inline horizontal status row (Model / API Key / Overrides).
   Replaces the misuse of .admin-stat-card for non-numeric status. */
.admin-settings-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    padding: 6px 12px;
    align-items: center;
}

.admin-settings-status-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
}

.admin-settings-status-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.admin-settings-status-value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

.admin-table-stable .mud-table-body tr:last-child .mud-table-cell {
    border-bottom: 0;
}

.admin-table-auto .mud-table-table {
    table-layout: auto;
}

.admin-cell-truncate {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.admin-cell-error {
    max-width: 180px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.8rem;
    opacity: 0.85;
}

.admin-error-tooltip {
    max-width: 400px;
}

.admin-table-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.categories-table .mud-table-container {
    overflow-x: hidden !important;
}

.category-id-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.category-icon-cell,
.category-color-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.category-color-swatch {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, #fff 28%, transparent);
    box-shadow: 0 0 0 1px color-mix(in oklab, #000 30%, transparent) inset;
    flex: 0 0 auto;
}

.categories-actions .mud-icon-button {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

.categories-modal {
    width: min(820px, 94vw);
}

.admin-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.admin-category-browser {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--admin-radius-lg);
    background: color-mix(in oklab, var(--mud-palette-surface) 84%, transparent);
}

.admin-category-browser .mud-list {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--admin-radius-md);
    max-height: 260px;
    overflow-y: auto;
}

.admin-modal-shell {
    width: min(1100px, 96vw);
    max-height: 92vh;
    overflow: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-primary);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.admin-modal-shell.job-modal-v2 {
    height: 90vh;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.admin-modal-close {
    opacity: 0.6;
    transition: opacity 0.15s, background-color 0.15s;
}

.admin-modal-close:hover {
    opacity: 1;
    background-color: color-mix(in oklab, var(--mud-palette-text-primary) 10%, transparent);
}

.mobile-sheet-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in oklab, var(--mud-palette-surface) 93%, transparent);
    backdrop-filter: blur(3px);
}

.mud-paper {
    border-radius: var(--admin-radius-xl);
}

.mud-button-root:not(.mud-switch-base) {
    min-height: 38px;
    border-radius: 8px;
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        box-shadow 140ms ease,
        transform 140ms ease;
}

.mud-button-root:not(.mud-switch-base) .mud-button-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    min-height: 1em;
}

.mud-button-root:not(.mud-switch-base) .mud-button-icon-start,
.mud-button-root:not(.mud-switch-base) .mud-button-icon-end {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.mud-button-root:not(.mud-switch-base) .mud-button-icon-start {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

.mud-button-root:not(.mud-switch-base) .mud-button-icon-end {
    margin-left: 8px !important;
    margin-right: 0 !important;
}

.mud-button-root:not(.mud-switch-base) .mud-icon-root {
    display: block;
    font-size: 1.05rem;
    line-height: 1;
}

/* ── Obsidian form controls ─────────────────────────────────────
   MudBlazor's default outlined inputs read as generic Material UI. These
   rules make selects, text fields, numeric fields, and autocomplete inputs
   feel native to the admin: quieter surfaces, clearer focus, and labels that
   behave like small product captions instead of placeholder text. */
.mud-input-control {
    --admin-control-radius: 8px;
    --admin-control-surface: color-mix(in oklab, var(--mud-palette-background) 62%, var(--mud-palette-surface));
    --admin-control-surface-hover: color-mix(in oklab, var(--mud-palette-background) 54%, var(--mud-palette-surface));
    --admin-control-border: color-mix(in oklab, var(--mud-palette-lines-default) 58%, transparent);
    --admin-control-border-hover: color-mix(in oklab, var(--mud-palette-text-secondary) 30%, var(--mud-palette-lines-default));
    --admin-control-focus: color-mix(in oklab, var(--mud-palette-primary) 64%, var(--mud-palette-lines-default));
}

.mud-input-control .mud-input.mud-input-outlined {
    min-height: var(--admin-control-height);
    border-radius: var(--admin-control-radius);
    background: var(--admin-control-surface);
    box-shadow: inset 0 1px 0 color-mix(in oklab, white 3%, transparent);
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

.mud-input-control .mud-input.mud-input-outlined fieldset {
    border-width: 1px;
    border-color: var(--admin-control-border);
    border-radius: var(--admin-control-radius);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.mud-input-control .mud-input.mud-input-outlined:hover {
    background: var(--admin-control-surface-hover);
}

.mud-input-control .mud-input.mud-input-outlined:hover fieldset {
    border-color: var(--admin-control-border-hover);
}

.mud-input-control .mud-input.mud-input-outlined.mud-input-focused {
    box-shadow:
        inset 0 1px 0 color-mix(in oklab, white 4%, transparent),
        0 0 0 2px color-mix(in oklab, var(--mud-palette-primary) 12%, transparent);
}

.mud-input-control .mud-input.mud-input-outlined.mud-input-focused fieldset {
    border-color: var(--admin-control-focus);
}

.mud-input-label.mud-input-label-outlined {
    color: color-mix(in oklab, var(--mud-palette-text-secondary) 92%, var(--mud-palette-primary));
    font-size: 0.74rem;
    font-weight: 620;
    letter-spacing: 0.01em;
}

.mud-input-label.mud-input-label-outlined.mud-input-label-shrink {
    padding: 0 5px;
    border-radius: 6px;
    color: color-mix(in oklab, var(--mud-palette-text-secondary) 78%, var(--mud-palette-primary));
    background: color-mix(in oklab, var(--mud-palette-surface) 82%, var(--mud-palette-background));
}

.mud-input-slot {
    border-radius: var(--admin-control-radius);
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

.mud-input-control .mud-input-adornment .mud-icon-root,
.mud-select .mud-input-adornment-end .mud-icon-root {
    color: color-mix(in oklab, var(--mud-palette-text-secondary) 72%, var(--mud-palette-primary));
    opacity: 0.95;
}

.mud-input-control .mud-input.mud-disabled {
    opacity: 0.58;
    background: color-mix(in oklab, var(--mud-palette-surface) 50%, var(--mud-palette-background));
}

.mud-popover .mud-list {
    padding: 6px;
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 68%, transparent);
    border-radius: 10px;
    background: color-mix(in oklab, var(--mud-palette-surface) 94%, var(--mud-palette-background));
    box-shadow: var(--admin-shadow-lg);
}

.mud-popover .mud-list-item {
    min-height: 36px;
    border-radius: 7px;
    color: var(--mud-palette-text-primary);
}

.mud-popover .mud-list-item:hover,
.mud-popover .mud-list-item:focus-visible {
    background: color-mix(in oklab, var(--mud-palette-primary) 12%, transparent);
}

.mud-button-filled-primary {
    border: 1px solid color-mix(in oklab, var(--mud-palette-primary) 82%, white 8%) !important;
    background: color-mix(in oklab, var(--mud-palette-primary) 82%, #061a4f 18%) !important;
    color: var(--mud-palette-primary-text) !important;
    box-shadow:
        0 4px 10px color-mix(in oklab, var(--mud-palette-primary) 12%, transparent);
}

.mud-button-filled-primary:hover {
    transform: translateY(-1px);
    background: color-mix(in oklab, var(--mud-palette-primary) 88%, #061a4f 12%) !important;
    box-shadow:
        0 6px 14px color-mix(in oklab, var(--mud-palette-primary) 16%, transparent);
}

.mud-button-filled-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px color-mix(in oklab, var(--mud-palette-primary) 12%, transparent);
}

.mud-button-outlined-primary,
.mud-button-outlined-secondary,
.mud-button-outlined-default {
    border-color: color-mix(in oklab, currentColor 38%, var(--mud-palette-lines-default)) !important;
    background: color-mix(in oklab, var(--mud-palette-surface) 46%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in oklab, white 4%, transparent);
}

.mud-button-outlined-primary:hover,
.mud-button-outlined-secondary:hover,
.mud-button-outlined-default:hover {
    background: color-mix(in oklab, currentColor 9%, var(--mud-palette-surface));
}

.mud-button-filled-warning {
    box-shadow:
        0 6px 14px color-mix(in oklab, var(--mud-palette-warning) 12%, transparent),
        inset 0 0 0 1px color-mix(in oklab, white 10%, transparent);
}

/* MudSwitch: boost track visibility on dark backgrounds */
.mud-switch-track {
    opacity: 0.38;
}

.mud-switch-base-checked ~ .mud-switch-track,
.mud-switch .mud-checked ~ .mud-switch-track {
    opacity: 0.6;
}

.mud-alert {
    border-radius: var(--admin-radius-lg);
}

.blazor-error-boundary {
    margin: 16px;
    border-radius: var(--admin-radius-lg);
    background: #b91c1c;
    color: #fff;
    padding: 12px 16px;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

@media (max-width: 1200px) {
    .admin-filter-toolbar > * {
        grid-column: span 4;
    }

    .question-filter-card__filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .admin-main-container {
        padding: var(--admin-shell-padding-sm);
    }

    .admin-page-header {
        margin-bottom: 14px;
    }

    .admin-filter-toolbar > * {
        grid-column: span 6;
    }

    .question-filter-card__header,
    .question-filter-card__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .question-filter-card__actions,
    .question-filter-card__chips {
        justify-content: flex-start;
    }

    .question-filter-card__primary {
        grid-template-columns: 1fr;
    }

    .dedupe-maintenance-controls {
        grid-template-columns: 1fr;
    }

    .dedupe-maintenance-scope {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .dedupe-maintenance-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .admin-filter-toolbar > * {
        grid-column: span 12;
    }

    .question-filter-card {
        padding: 16px;
    }

    .question-filter-card__filters {
        grid-template-columns: 1fr;
    }

    .admin-actions {
        width: 100%;
    }

    .admin-actions .mud-button-root {
        flex: 1 1 auto;
    }

    .admin-table-stable .mud-table-head .mud-table-cell {
        letter-spacing: 0.04em;
    }
}

/* ── Mobile table & filter behavior ──────────────────────────
   Below 600px:
   - Tables collapse to a stacked-card row layout so the operator
     never has to deal with horizontal scroll. MudBlazor renders
     each cell with the DataLabel as a chip-style header.
   - The filter toolbar wraps to one column.
   - Page header wraps and the tab nav strip becomes scrollable. */
@media (max-width: 599px) {
    .admin-table-stable .mud-table-table,
    .admin-table-stable .mud-table-thead,
    .admin-table-stable .mud-table-tbody,
    .admin-table-stable .mud-table-row,
    .admin-table-stable .mud-table-cell {
        display: block;
        width: 100%;
    }

    .admin-table-stable .mud-table-head {
        display: none;
    }

    .admin-table-stable .mud-table-row {
        margin-bottom: 12px;
        border-radius: var(--admin-radius-md);
        background: color-mix(in oklab, var(--mud-palette-surface) 86%, transparent);
        border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 50%, transparent);
        padding: 8px 12px;
    }

    .admin-table-stable .mud-table-row .mud-table-cell {
        padding: 8px 0;
        border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 30%, transparent);
        text-align: left;
    }

    .admin-table-stable .mud-table-row .mud-table-cell:last-child {
        border-bottom: none;
    }

    .admin-table-stable .mud-table-row .mud-table-cell::before {
        content: attr(data-label);
        display: block;
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--mud-palette-text-secondary);
        margin-bottom: 4px;
    }

    .admin-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-page-tabs {
        max-width: 100%;
        overflow-x: auto;
    }

    /* Sticky tab strips lose the sticky behavior on mobile -- they push
       content down too aggressively in narrow viewports. */
    .admin-page-tabs--sticky {
        position: static;
    }
}

/* Job List: Stacked Progress Bar */
.job-progress-bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    background: color-mix(in oklab, var(--mud-palette-text-primary) 8%, transparent);
    overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--mud-palette-text-primary) 18%, transparent);
}

.job-progress-success {
    height: 100%;
    background: var(--mud-palette-success);
    transition: width 0.3s ease;
}

.job-progress-warning {
    height: 100%;
    background: var(--mud-palette-warning);
    transition: width 0.3s ease;
}

.job-progress-error {
    height: 100%;
    background: var(--mud-palette-error);
    transition: width 0.3s ease;
}

/* Per-row models chip strip on the Jobs table. Tight spacing + monospace label
   for the model token names so the column reads like a tag list rather than free text. */
.job-model-chips {
    flex-wrap: wrap;
    row-gap: 4px;
}

.job-model-chip .mud-chip-content {
    font-family: var(--mud-typography-default-family-monospace, monospace);
    font-size: 0.72rem;
    letter-spacing: 0;
}

/* Job Detail Modal V2 */
.job-v2-fixed {
    flex-shrink: 0;
}

.job-v2-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    opacity: 0.6;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.job-v2-sep {
    opacity: 0.3;
}

.job-v2-error {
    margin-bottom: 10px;
    border-radius: 6px;
}

/* Stat Strip */
.job-v2-stat-strip {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-bottom: 10px;
}

.job-v2-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px;
    border-radius: 6px;
    background: color-mix(in oklab, var(--mud-palette-text-primary) 4%, transparent);
    min-width: 80px;
}

.job-v2-stat--success .job-v2-stat-num { color: var(--mud-palette-success); }
.job-v2-stat--warning .job-v2-stat-num { color: var(--mud-palette-warning); }
.job-v2-stat--error .job-v2-stat-num { color: var(--mud-palette-error); }

.job-v2-stat-num {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.job-v2-stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.5;
    margin-top: 2px;
}

/* Pipeline with labels */
.job-v2-pipeline {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6px 0 4px;
    overflow-x: auto;
}

.job-v2-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 90px;
    position: relative;
    cursor: default;
}

.job-v2-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}

.job-v2-stage-name {
    font-size: 0.7rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
    opacity: 0.75;
}

.job-v2-stage-time {
    font-size: 0.65rem;
    opacity: 0.45;
    text-align: center;
}

.job-v2-conn {
    position: absolute;
    top: 13px;
    left: calc(50% + 16px);
    width: calc(100% - 32px);
    height: 2px;
    z-index: 0;
}

/* Actions */
.job-v2-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0 2px;
}

/* Job Detail Modal V2: Tabs */
.job-v2-tabs {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    margin-top: 4px;
}

.job-v2-tabs .mud-tabpanel {
    padding: 0 !important;
}

.job-v2-tab-content {
    max-height: calc(90vh - 300px);
    overflow-y: auto;
    padding: 10px 2px 2px;
}

.job-v2-log-msg {
    font-size: 0.8rem;
    opacity: 0.8;
}

.job-v2-prompt {
    border-radius: 6px;
    background: color-mix(in oklab, var(--mud-palette-surface) 85%, var(--mud-palette-primary));
}

.job-v2-prompt pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: monospace;
    font-size: 0.82rem;
    margin: 0;
    padding: 12px 16px;
    color: var(--mud-palette-text-secondary);
}

/* ── Question Editor Modal (Design C) ───────────────────────── */

.qe-modal {
    display: flex;
    flex-direction: column;
    max-height: 92vh;
    padding: 0 !important;
    border: none !important;
    box-shadow:
        0 0 80px rgba(110, 139, 255, 0.07),
        0 0 30px rgba(110, 139, 255, 0.04),
        0 25px 60px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

.qe-modal > .admin-modal-header {
    padding: 16px 20px;
    flex-shrink: 0;
}

.qe-body {
    display: flex;
    gap: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.qe-col-left {
    flex: 1 1 58%;
    padding: 0 20px 20px 20px;
    border-right: 1px solid var(--mud-palette-lines-default);
    overflow-y: auto;
}

.qe-col-right {
    flex: 0 0 42%;
    padding: 0 20px 20px 20px;
    overflow-y: auto;
}

.qe-section {
    margin-bottom: 20px;
}

.qe-label {
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.qe-metadata-bar {
    padding: 16px;
    border-radius: var(--admin-radius-sm);
    background: color-mix(in oklab, var(--mud-palette-surface) 60%, var(--mud-palette-background));
}

.qe-meta-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 12px;
}

.qe-meta-row:last-child {
    margin-bottom: 0;
}

.qe-meta-field {
    min-width: 0;
}

.qe-meta-field .mud-input-control {
    margin-bottom: 0 !important;
}

.qe-difficulty-group {
    flex: 1 1 auto;
}

.qe-difficulty-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.qe-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-primary);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s, transform 0.1s;
}

.qe-dot:hover {
    transform: scale(1.2);
}

.qe-dot-filled {
    background: var(--mud-palette-primary);
}

.qe-difficulty-label {
    margin-left: 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.qe-status-group {
    flex: 0 0 auto;
    text-align: right;
}

.qe-status-switch {
    margin-top: 0;
}

.qe-status-switch .mud-switch {
    margin: 0;
}

/* ── Answers ─────────────────────────────────────────── */

.qe-answer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 50%, transparent);
}

.qe-answer:last-of-type {
    border-bottom: none;
}

.qe-answer-correct {
    border-left: 3px solid var(--mud-palette-success);
    padding-left: 10px;
    border-radius: 2px;
    background: color-mix(in oklab, var(--mud-palette-success) 5%, transparent);
}

.qe-answer-incorrect {
    border-left: 3px solid color-mix(in oklab, var(--mud-palette-error) 40%, transparent);
    padding-left: 10px;
    border-radius: 2px;
}

.qe-answer-icon {
    flex-shrink: 0;
}

.qe-answer-field {
    flex: 1 1 auto;
}

.qe-answer-field .mud-input-control {
    margin-bottom: 0 !important;
}

.qe-answer-delete {
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 0.15s;
}

.qe-answer:hover .qe-answer-delete {
    opacity: 1;
}

/* ── Collapsible sections ────────────────────────────── */

.qe-collapsible {
    border-radius: var(--admin-radius-sm);
}

.qe-collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 4px 0;
    list-style: none;
    user-select: none;
}

.qe-collapsible-header::-webkit-details-marker {
    display: none;
}

.qe-chevron {
    transition: transform 0.2s;
    opacity: 0.5;
}

details[open] > .qe-collapsible-header .qe-chevron {
    transform: rotate(180deg);
}

/* ── Visual asset (right panel) ──────────────────────── */

.qe-visual-asset {
    flex: 1 1 auto;
}

.qe-image-preview {
    position: relative;
    border-radius: var(--admin-radius-sm);
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-surface);
}

.qe-image-shimmer-underlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        color-mix(in oklab, var(--mud-palette-surface) 80%, transparent) 25%,
        color-mix(in oklab, var(--mud-palette-primary) 8%, var(--mud-palette-surface)) 50%,
        color-mix(in oklab, var(--mud-palette-surface) 80%, transparent) 75%
    );
    background-size: 200% 100%;
    animation: qe-shimmer 1.5s ease-in-out infinite;
}

.qe-image-preview .qe-image-loaded {
    position: relative;
    z-index: 1;
    width: 100%;
    opacity: 0;
    animation: qe-image-fadein 0.3s ease-out forwards;
    background: var(--mud-palette-surface);
}

.qe-image-preview .qe-image-loaded img {
    display: block;
    margin: 0 auto;
}

@keyframes qe-image-fadein {
    to { opacity: 1; }
}

.qe-image-preview:has(.qe-image-loaded) .qe-image-shimmer-underlay {
    animation: qe-shimmer-hide 0.4s ease-out 0.2s forwards;
}

@keyframes qe-shimmer-hide {
    to { opacity: 0; }
}

.qe-image-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 200px;
    padding: 24px;
    border-radius: var(--admin-radius-sm);
    border: 2px dashed color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent);
    background: color-mix(in oklab, var(--mud-palette-surface) 50%, var(--mud-palette-background));
}

.qe-image-empty .qe-generate-btn {
    margin-top: 8px;
}

/* ── Image skeleton shimmer ──────────────────────────── */

@keyframes qe-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.qe-image-skeleton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 200px;
    border-radius: var(--admin-radius-sm);
    background: linear-gradient(
        90deg,
        color-mix(in oklab, var(--mud-palette-surface) 80%, transparent) 25%,
        color-mix(in oklab, var(--mud-palette-primary) 8%, var(--mud-palette-surface)) 50%,
        color-mix(in oklab, var(--mud-palette-surface) 80%, transparent) 75%
    );
    background-size: 200% 100%;
    animation: qe-shimmer 1.5s ease-in-out infinite;
}

.qe-image-skeleton-caption {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    opacity: 0.7;
}

/* ── Generic skeleton shapes ──────────────────────────────────
   One shimmer family across the app so loading states feel
   coherent. All inherit the qe-shimmer animation; only shape
   differs. Use these instead of MudProgressCircular for any
   content that's mid-load. */
.qe-skel {
    display: block;
    border-radius: var(--admin-radius-sm);
    background: linear-gradient(
        90deg,
        color-mix(in oklab, var(--mud-palette-surface) 80%, transparent) 25%,
        color-mix(in oklab, var(--mud-palette-primary) 8%, var(--mud-palette-surface)) 50%,
        color-mix(in oklab, var(--mud-palette-surface) 80%, transparent) 75%
    );
    background-size: 200% 100%;
    animation: qe-shimmer 1.5s ease-in-out infinite;
}

.qe-skel-line {
    height: 14px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.qe-skel-line--short { width: 30%; }
.qe-skel-line--medium { width: 60%; }
.qe-skel-line--long { width: 92%; }

.qe-skel-row {
    height: 44px;
    margin-bottom: 6px;
    border-radius: 6px;
}

.qe-skel-block {
    height: 120px;
    border-radius: var(--admin-radius-md);
}

.qe-skel-tall {
    height: 240px;
    border-radius: var(--admin-radius-md);
}

.qe-skel-stat {
    height: 132px;
    border-radius: var(--admin-radius-xl);
}

.qe-skel-table {
    /* Stack of 6 row placeholders; lives inside admin-surface */
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
}

.qe-skel-table .qe-skel-row {
    margin-bottom: 0;
}

/* Dashboard / Home skeleton layout */
.dashboard-skeleton {
    display: grid;
    gap: var(--admin-page-gap);
}

.dashboard-skeleton-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.dashboard-skeleton-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

@media (max-width: 959px) {
    .dashboard-skeleton-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Pulsing image-required warning ──────────────────── */

@keyframes qe-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.qe-image-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--admin-radius-sm);
    background: color-mix(in oklab, var(--mud-palette-warning) 8%, transparent);
    border: 1px solid color-mix(in oklab, var(--mud-palette-warning) 25%, transparent);
    margin-top: 12px;
}

.qe-pulse-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--mud-palette-warning);
    animation: qe-pulse 2s ease-in-out infinite;
}

.qe-warning-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-warning);
    margin-bottom: 2px;
}

.qe-warning-text {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

/* ── Generation prompt code block ────────────────────── */

.qe-gen-prompt {
    border-radius: var(--admin-radius-sm);
    background: color-mix(in oklab, var(--mud-palette-surface) 70%, var(--mud-palette-background));
    border: 1px solid var(--mud-palette-lines-default);
    overflow: auto;
    max-height: 200px;
}

.qe-gen-prompt pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: monospace;
    font-size: 0.8rem;
    margin: 0;
    padding: 12px 14px;
    color: var(--mud-palette-text-secondary);
}

/* ── Sticky action bar ───────────────────────────────── */

.qe-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in oklab, var(--mud-palette-surface) 93%, transparent);
    backdrop-filter: blur(4px);
}

.qe-actions-primary {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qe-actions-danger {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qe-save-btn {
    box-shadow: 0 0 12px color-mix(in oklab, var(--mud-palette-primary) 25%, transparent);
}

/* ── Responsive: single column below md ──────────────── */

@media (max-width: 959px) {
    .qe-body {
        flex-direction: column;
    }

    .qe-col-left {
        flex: none;
        border-right: none;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    .qe-col-right {
        flex: none;
    }

    .qe-meta-row {
        flex-wrap: wrap;
    }

    .qe-actions {
        flex-wrap: wrap;
    }
}

/* ============================================================
   Dashboard Grid & Widget System
   ============================================================ */

.dashboard-grid-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.dashboard-grid-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.dashboard-edit-btn {
    text-transform: none !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    border-color: var(--mud-palette-lines-default) !important;
    transition: all 0.2s ease !important;
}

.dashboard-edit-btn--active {
    border-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary) !important;
}

.dashboard-add-btn {
    text-transform: none !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    box-shadow: 0 0 12px color-mix(in oklab, var(--mud-palette-primary) 25%, transparent);
}

.dashboard-reset-btn {
    text-transform: none !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    opacity: 0.7;
}

/* GridStack overrides for Obsidian Core theme */
.grid-stack {
    min-height: 200px;
}

.grid-stack > .grid-stack-item > .grid-stack-item-content {
    border-radius: var(--admin-radius-xl);
    background: color-mix(in oklab, var(--mud-palette-surface) 92%, transparent);
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 85%, transparent);
    box-shadow: var(--admin-shadow-sm);
    overflow: hidden;
    backdrop-filter: blur(2px);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.grid-stack > .grid-stack-item:hover > .grid-stack-item-content {
    box-shadow: var(--admin-shadow-md);
}

.dashboard-edit-mode .grid-stack-item > .grid-stack-item-content {
    border-color: color-mix(in oklab, var(--mud-palette-primary) 30%, var(--mud-palette-lines-default));
}

/* GridStack placeholder during drag */
.grid-stack > .grid-stack-placeholder > .placeholder-content {
    border: 2px dashed color-mix(in oklab, var(--mud-palette-primary) 40%, transparent) !important;
    border-radius: var(--admin-radius-xl) !important;
    background: color-mix(in oklab, var(--mud-palette-primary) 5%, transparent) !important;
}

/* GridStack resize handle */
.grid-stack > .grid-stack-item > .ui-resizable-se {
    width: 20px !important;
    height: 20px !important;
    background: none !important;
    border-right: 3px solid color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent);
    border-bottom: 3px solid color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent);
    border-radius: 0 0 var(--admin-radius-xl) 0;
    right: 4px !important;
    bottom: 4px !important;
}

/* Widget Host */
.widget-host {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Tightened from 12/4 → 10/2 to reclaim 4px for the body. KPI tiles are
       only 110px tall (GridStack cellHeight) and every pixel matters when
       fitting label + 2rem value + trend caption without clipping. */
    padding: 10px 16px 2px;
    min-height: 28px;
    flex-shrink: 0;
}

.widget-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
    opacity: 0.8;
}

.widget-controls {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.widget-host--editable .widget-controls {
    opacity: 0.5;
}

.widget-host--editable:hover .widget-controls {
    opacity: 1;
}

.widget-drag-handle {
    cursor: grab !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
    color: var(--mud-palette-text-secondary);
    transition: background-color 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
}

.widget-drag-handle:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--mud-palette-text-primary);
}

.widget-drag-handle:active {
    cursor: grabbing !important;
}

.widget-remove-btn {
    color: var(--mud-palette-error) !important;
}

.widget-body {
    flex: 1;
    overflow: auto;
    padding: 0 16px 12px;
}

/* KPI tiles never need to scroll. Use a tighter bottom padding (8px instead
   of 12px) since the 110px GridStack tile leaves no headroom, and switch to
   `overflow: visible` so the value's line-box (which can extend a few px past
   the body box due to descender/font-metrics) is never clipped. The parent
   .grid-stack-item-content has its own border-radius and clips anything that
   would actually escape the tile. */
.widget-body:has(.widget-stat-card) {
    overflow: visible;
    padding: 0 16px 8px;
}

/* Stat card inside widget. We TOP-align (flex-start) instead of center so
   that, if the content marginally exceeds the GridStack tile height, the
   overflow happens at the BOTTOM rather than visually clipping the hero
   value at the top. */
.widget-stat-card {
    padding: 0 !important;
    gap: 4px !important;
    min-height: 0;
    height: 100%;
    justify-content: flex-start;
}

/* Widget tiles are vertically constrained (GridStack cellHeight=110, minus
   ~28px header → ~70px content area). Cap the hero value at 2rem and use a
   tight 1.05 line-height so a 110px tile fits label + value + trend with a
   visible bottom margin and no character clipping. */
.widget-stat-card .admin-stat-card-value {
    font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    /* Reserve a sliver below the baseline for any accidental descender
       metrics; cleaner than clipping. */
    padding-bottom: 2px;
}

.widget-stat-card .admin-stat-card-trend {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Trend row: caption + optional sparkline live side-by-side under the value
   so the sparkline never fights the hero number for vertical space. */
.widget-stat-card-trend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.widget-stat-card-trend-row .admin-stat-card-trend {
    flex: 1 1 auto;
    min-width: 0;
}

.widget-stat-card-trend-row .sparkline {
    flex: 0 0 auto;
}

/* Chart container */
.widget-chart-container {
    height: 100%;
    min-height: 120px;
    display: flex;
}

/* MudChart legacy holder -- kept so any remaining MudChart-based widget
   tiles still fill their host. New widgets use ApexCharts (see
   .widget-online-chart-host below). */
.widget-chart-container .mud-chart {
    height: 100% !important;
}

/* ApexCharts inside a flex tile collapses to its content width on first
   paint. Force the wrapper, canvas, and SVG to stretch so the live
   "Online players" area chart fills the dashboard widget edge-to-edge. */
.widget-online-chart-host {
    flex: 1 1 auto;
    min-width: 0;
}
.widget-online-chart-host > div {
    width: 100% !important;
    height: 100% !important;
}
.widget-online-chart-host .apexcharts-canvas,
.widget-online-chart-host .apexcharts-canvas > svg {
    width: 100% !important;
}

/* Empty widget hint */
.widget-empty-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 80px;
    gap: 8px;
}

/* Section labels inside widgets */
.widget-section-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 8px;
    display: block;
}

/* Releases widget */
.widget-releases-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.widget-release-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 40%, transparent);
}

.widget-release-item:last-child {
    border-bottom: none;
}

/* Pinned to the bottom edge of the scrolling body so the release total is on
   screen without scrolling. It sits last in flow, so it also needs an opaque
   backdrop — rows scroll *behind* it, and a translucent footer over a moving
   row is unreadable. */
.widget-release-more {
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    /* Negative inline margin lets the backdrop reach the body's 16px padding,
       so no sliver of a scrolling row shows down either side of the footer. */
    margin: 0 -16px;
    padding: 4px 16px;
    background: var(--mud-palette-surface);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

/* The row passing behind the footer would otherwise be cut by a hard horizontal
   edge, which reads as a rendering fault rather than as "this continues". Fade
   it into the surface instead. Harmless when the list does not overflow: the
   gradient then lies over the surface colour it fades to. */
.widget-release-more::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    /* Kept short deliberately: the fade and the footer both sit over the third
       row, and at 28px they swallowed all but 8px of it. 16px still softens the
       cut but leaves most of that row readable. */
    height: 16px;
    background: linear-gradient(to top, var(--mud-palette-surface), transparent);
    pointer-events: none;
}

.widget-release-more:hover {
    color: var(--mud-palette-primary);
}

.widget-release-version {
    font-weight: 600;
    font-size: 0.85rem;
    min-width: 60px;
}

.widget-release-clients {
    font-size: 1.4rem;
    font-weight: 700;
    flex: 1;
}

/* Unit label for the bare connected-client count, so the number reads as a
   quantity of players rather than an unlabelled figure. */
.widget-release-clients-unit {
    font-size: 0.7rem;
    font-weight: 500;
    margin-left: 4px;
    color: var(--mud-palette-text-secondary);
}

/* Topology widget */
.widget-topology-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.widget-topology-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 40%, transparent);
}

.widget-topology-item:last-child {
    border-bottom: none;
}

/* The instance id is the widest, most variable cell: let it take the slack and
   ellipsize, and keep the two shorter cells at their natural width. */
.widget-topology-id {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--mud-palette-primary);
}

.widget-topology-host {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.widget-topology-proc {
    flex: 0 0 auto;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
}

.widget-topology-sessions {
    flex: 0 0 auto;
    font-weight: 600;
}

.widget-topology-grpc {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* Login map widget */
.widget-login-map-shell {
    position: relative;
    height: 100%;
    min-height: 200px;
}

.widget-login-map {
    height: 100%;
    min-height: 200px;
    border-radius: var(--admin-radius-sm);
    background: color-mix(in oklab, var(--mud-palette-background) 85%, var(--mud-palette-primary));
    position: relative;
    z-index: 0;
}

/* Overlay sits ABOVE the map div's placeholder background so the user
   sees a friendly "waiting for first connection" hint until Leaflet has
   actually initialized the map. Once Leaflet adds .leaflet-container to
   the map div (init complete), we hide the overlay so it doesn't block
   the rendered tiles. */
.widget-login-map-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
    color: var(--mud-palette-text-secondary);
}

.widget-login-map-shell:has(.widget-login-map.leaflet-container) .widget-login-map-overlay {
    display: none;
}

/* Locale coverage widget */
.widget-locale-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.widget-locale-section {
    display: flex;
    flex-direction: column;
}

.widget-locale-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 0.85rem;
}

.widget-locale-count {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* Pipeline health widget.

   This is a 1-row GridStack tile, so the body is 60px tall and its content box
   is 60 minus the body's own bottom padding. At MudBlazor's inherited 1.43
   line-height the three stats measured 60.3px — i.e. the content did not fit
   its box and only *looked* fine because it spilled into the visible padding
   region. That made the browser report 12px of scrollable overflow, and once
   TRI-95 gave `.widget-body` a real 8px scrollbar the tile grew a permanent
   bar for 12px of empty padding with nothing to scroll to (TRI-120).

   There is no general CSS fix for that: a scroll container's end padding is
   part of its scrollable overflow region, so moving the 12px onto an inner
   wrapper (or onto the last child) reproduces the same phantom. The content
   has to actually fit. Tightening the two line-heights and the wrapper's own
   padding brings this wrapper to 47px against a 52px box.
   `overflow: auto` stays, so the conditional generation-error caption below
   still gets a genuine scroll affordance when it appears.
   Measured 1440x1000, headed Chromium: scrollHeight 72 -> 60 against
   clientHeight 60; scrollbar 8px -> 0px. Rig: tools/qa/tri-120/.

   The 4px TOP padding is deliberately kept: it is what lines PUBLISHED up with
   the LOCALE COVERAGE sub-header in the tile beside it. Only the bottom 4px
   goes, since the body already supplies the bottom gutter. */
.widget-pipeline-health {
    padding: 4px 0 0;
}

/* Reserve the same 8px bottom gutter the other 1-row tiles use rather than the
   12px default, so a small font-metric shift cannot resurrect the phantom bar.
   The tile is unchanged visually -- the stats are top-aligned and never reach
   this far down -- it only moves the overflow threshold from 48px to 52px. */
.widget-body:has(.widget-pipeline-health) {
    padding-bottom: 8px;
}

.widget-pipeline-stats {
    display: flex;
    gap: 24px;
}

.widget-pipeline-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.widget-pipeline-label {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
}

.widget-pipeline-value {
    font-size: 1.5rem;
    font-weight: 700;
    /* 1.15 on a 24px font leaves 1.8px of half-leading either side of the em
       box, so digits (no descenders, cap height ~17px) are never clipped. The
       KPI hero value already ships a tighter 1.05 for the same reason. */
    line-height: 1.15;
}

/* DAU/WAU/MAU widget */
.widget-dau-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

.widget-dau-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.widget-dau-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    min-width: 40px;
}

.widget-dau-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    flex: 1;
}

.widget-dau-trend {
    font-size: 0.75rem;
    font-weight: 600;
}

.widget-trend-up {
    color: var(--mud-palette-success);
}

.widget-trend-down {
    color: var(--mud-palette-error);
}

.widget-kpi-context {
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
}

.widget-state-detail {
    color: var(--mud-palette-text-secondary);
    max-width: 34ch;
    text-align: center;
}

.widget-kpi-skeleton,
.widget-retention-skeleton {
    display: grid;
    gap: 12px;
    height: 100%;
    padding: 4px 0;
}

.widget-kpi-skeleton span,
.widget-retention-skeleton span {
    display: block;
    min-height: 32px;
    border-radius: var(--admin-radius-sm);
    background: color-mix(in oklab, var(--mud-palette-surface) 70%, var(--mud-palette-background));
}

.widget-retention-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 4px 0 12px;
}

.widget-retention-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 12px;
    border-radius: var(--admin-radius-sm);
    background: color-mix(in oklab, var(--mud-palette-surface) 72%, var(--mud-palette-background));
}

.widget-retention-day {
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.widget-retention-rate {
    color: var(--mud-palette-text-primary);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}

.widget-retention-count {
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    line-height: 1.35;
}

/* Retention widget legend */
.widget-retention-legend {
    display: flex;
    gap: 16px;
    padding: 4px 0 0;
    flex-wrap: wrap;
}

.widget-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.widget-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* Bar list (category popularity, geo) */
.widget-bar-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

.widget-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.widget-bar-label {
    font-size: 0.8rem;
    min-width: 100px;
    color: var(--mud-palette-text-secondary);
}

.widget-bar-track {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: color-mix(in oklab, var(--mud-palette-lines-default) 40%, transparent);
    overflow: hidden;
}

.widget-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--mud-palette-primary);
    transition: width 0.4s ease;
}

.widget-bar-value {
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 50px;
    text-align: right;
}

/* Session duration widget */
.widget-session-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 4px 0;
}

.widget-session-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.widget-session-label {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
}

.widget-session-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* Question accuracy widget */
.widget-accuracy-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

.widget-accuracy-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.widget-accuracy-label {
    font-size: 0.8rem;
    min-width: 80px;
    color: var(--mud-palette-text-secondary);
}

.widget-accuracy-bar-track {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: color-mix(in oklab, var(--mud-palette-lines-default) 40%, transparent);
    overflow: hidden;
}

.widget-accuracy-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.widget-accuracy-fill--success {
    background: var(--mud-palette-success);
}

.widget-accuracy-fill--warning {
    background: var(--mud-palette-warning);
}

.widget-accuracy-fill--error {
    background: var(--mud-palette-error);
}

.widget-accuracy-pct {
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 36px;
    text-align: right;
}

.widget-accuracy-summary {
    padding-top: 4px;
}

/* Geo distribution widget */
.widget-geo-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

.widget-geo-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-geo-flag {
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 24px;
    color: var(--mud-palette-primary);
}

.widget-geo-name {
    font-size: 0.8rem;
    min-width: 100px;
    color: var(--mud-palette-text-secondary);
}

.widget-geo-bar {
    flex: 1;
}

.widget-geo-pct {
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 36px;
    text-align: right;
}

/* Revenue widget */
.widget-revenue-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 4px 0;
}

.widget-revenue-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.widget-revenue-label {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
}

.widget-revenue-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* Widget Palette (slide-out drawer) */
.widget-palette {
    position: fixed;
    top: 0;
    right: 0;
    width: 340px;
    max-width: 90vw;
    height: 100vh;
    background: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    z-index: 1400;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);
    animation: widget-palette-slide 0.2s ease-out;
}

@keyframes widget-palette-slide {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.widget-palette-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}

.widget-palette-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.widget-palette-category {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
    margin: 16px 0 8px;
    opacity: 0.8;
}

.widget-palette-category:first-child {
    margin-top: 0;
}

.widget-palette-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--admin-radius-md);
    cursor: pointer;
    transition: background 0.15s ease;
}

.widget-palette-item:hover {
    background: color-mix(in oklab, var(--mud-palette-primary) 8%, transparent);
}

.widget-palette-item--exists {
    opacity: 0.5;
}

.widget-palette-icon {
    color: var(--mud-palette-primary);
}

.widget-palette-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.widget-palette-name {
    font-size: 0.85rem;
    font-weight: 500;
}

.widget-palette-size {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
}

/* Edit mode pulsing border */
.dashboard-edit-mode {
    border: 1px dashed color-mix(in oklab, var(--mud-palette-primary) 30%, transparent);
    border-radius: var(--admin-radius-xl);
    padding: 8px;
    animation: dashboard-edit-pulse 3s ease-in-out infinite;
}

@keyframes dashboard-edit-pulse {
    0%, 100% { border-color: color-mix(in oklab, var(--mud-palette-primary) 20%, transparent); }
    50% { border-color: color-mix(in oklab, var(--mud-palette-primary) 50%, transparent); }
}

/* Widget shimmer loading state */
.widget-shimmer {
    position: relative;
    overflow: hidden;
}

.widget-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 25%,
        color-mix(in oklab, var(--mud-palette-primary) 4%, transparent) 50%,
        transparent 75%
    );
    background-size: 200% 100%;
    animation: qe-shimmer 1.5s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
}

/* Responsive: collapse to fewer columns on smaller screens */
@media (max-width: 959px) {
    .dashboard-grid-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .widget-locale-grid {
        grid-template-columns: 1fr;
    }

    .widget-session-stats {
        grid-template-columns: 1fr;
    }

    .widget-revenue-grid {
        grid-template-columns: 1fr;
    }

    .widget-pipeline-stats {
        flex-wrap: wrap;
    }
}

@media (max-width: 599px) {
    .widget-palette {
        width: 100vw;
    }

    .dashboard-grid-actions {
        width: 100%;
        justify-content: flex-start;
    }

    /* Audience widgets occupy a full GridStack row on phones. Reflow their
       repeated metrics across that width and remove the generic widget
       scroller: these cards have enough vertical room at their configured
       mobile heights, while an internal scrollbar both hid context and stole
       width from the values at 390px (TRI-440). */
    .widget-body:has(.widget-dau-stack),
    .widget-body:has(.widget-retention-grid) {
        overflow: hidden;
        padding-inline: 12px;
    }

    .widget-dau-stack {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .widget-dau-item {
        flex-direction: column;
        align-items: center;
        gap: 2px;
        min-width: 0;
    }

    .widget-dau-label {
        min-width: 0;
    }

    .widget-dau-value {
        flex: none;
        max-width: 100%;
        font-variant-numeric: tabular-nums;
        overflow-wrap: anywhere;
    }

    .widget-dau-stack .widget-kpi-context {
        grid-column: 1 / -1;
        text-align: center;
    }

    .widget-retention-grid {
        gap: 6px;
    }

    .widget-retention-item {
        align-items: center;
        padding: 10px 4px;
        text-align: center;
    }

    .widget-retention-count {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .widget-body:has(.widget-retention-grid) > .widget-kpi-context {
        display: block;
        text-align: center;
    }
}

/* Scrollbar styling for widget bodies.
   A widget body that overflows is the only signal an operator gets that there
   is more below the fold, so this scrollbar has to be legible at rest.

   The reset below is load-bearing, not tidying. MudThemeProvider injects a
   global `html, body * { scrollbar-width: thin; scrollbar-color: ... }` into the
   document, and Chrome honours the standard properties *in preference to* the
   ::-webkit-scrollbar pseudo-elements — so every ::-webkit-scrollbar rule in
   this file was dead, and macOS fell back to an overlay bar: zero layout width
   and faded out at rest. That is why the ACTIVE RELEASES tile scrolled correctly
   and still read as a list that simply ended (TRI-95). Returning both properties
   to `auto` on this element (specificity 0,1,0 beats the global 0,0,1) hands
   control back to the pseudo-elements. Measured headed: 0px before, 8px after —
   headless Chromium hides scrollbars, so it cannot see this either way. */
.widget-body {
    scrollbar-width: auto;
    scrollbar-color: auto;
}

.widget-body::-webkit-scrollbar {
    width: 8px;
}

.widget-body::-webkit-scrollbar-track {
    background: color-mix(in oklab, var(--mud-palette-lines-default) 18%, transparent);
    border-radius: 4px;
}

.widget-body::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--mud-palette-text-secondary) 45%, transparent);
    border-radius: 4px;
}

.widget-body::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-text-secondary);
}

/* GridStack item transition during drag */
.grid-stack-item {
    transition: none;
}

.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
                0 0 20px color-mix(in oklab, var(--mud-palette-primary) 15%, transparent) !important;
    border-color: var(--mud-palette-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Help Drawer — In-app docs library (skills, rules, AGENTS, docs/)
   ═══════════════════════════════════════════════════════════════ */

.help-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    z-index: 1500;
    animation: help-overlay-fade 0.18s ease-out;
}

@keyframes help-overlay-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.help-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 540px;
    min-width: 380px;
    max-width: 92vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 1501;
    background: color-mix(in oklab, var(--mud-palette-surface) 92%, transparent);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.45),
                0 0 80px rgba(0, 0, 0, 0.2);
    border-left: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 15%, transparent);
    animation: help-drawer-slide 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--mud-palette-text-primary);
}

/* Resize handle: thin strip on the LEFT edge of the drawer. Default state is
   nearly invisible; hover/focus/active reveal a primary-tinted bar so the
   affordance is discoverable without crowding the content. */
.help-drawer-resize-handle {
    position: absolute;
    top: 0;
    left: -3px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    z-index: 2;
    touch-action: none;
    transition: background-color 0.18s ease;
}

.help-drawer-resize-handle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 3px;
    width: 2px;
    height: 100%;
    background: transparent;
    transition: background-color 0.18s ease;
    pointer-events: none;
}

.help-drawer-resize-handle:hover::before,
.help-drawer-resize-handle:focus-visible::before,
.help-drawer-resize-handle.is-dragging::before {
    background: color-mix(in oklab, var(--mud-palette-primary) 70%, transparent);
}

.help-drawer-resize-handle:focus-visible {
    outline: none;
}

.help-drawer-resize-handle.is-dragging {
    /* Page-wide cursor lock is set by the JS; keep the bar visible while
       dragging even if the pointer briefly leaves the 8px hit area. */
}

@keyframes help-drawer-slide {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* Header */

.help-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 20%, transparent);
    flex-shrink: 0;
    gap: 12px;
}

.help-drawer-title-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.help-drawer-title {
    font-family: 'Manrope', var(--mud-typography-default-family);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
}

.help-drawer-subtitle {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
    opacity: 0.85;
    max-width: 360px;
}

/* Search */

.help-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    margin: 12px 16px 0;
    height: 36px;
    border-radius: var(--admin-radius-sm);
    background: color-mix(in oklab, var(--mud-palette-surface) 65%, var(--mud-palette-background));
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 18%, transparent);
    flex-shrink: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.help-search:focus-within {
    border-color: color-mix(in oklab, var(--mud-palette-primary) 60%, transparent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--mud-palette-primary) 14%, transparent);
}

.help-search-icon {
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

.help-search-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
}

.help-search-input::placeholder {
    color: var(--mud-palette-text-secondary);
    opacity: 0.7;
}

.help-search-clear {
    background: transparent;
    border: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    padding: 2px;
    line-height: 0;
    border-radius: 3px;
    transition: background 0.15s ease, color 0.15s ease;
}

.help-search-clear:hover {
    color: var(--mud-palette-text-primary);
    background: color-mix(in oklab, var(--mud-palette-text-primary) 10%, transparent);
}

/* Two-pane grid */

.help-drawer-pane-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 184px 1fr;
    min-height: 0;
    margin-top: 12px;
    border-top: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 14%, transparent);
}

/* Left nav */

.help-nav {
    overflow-y: auto;
    padding: 12px 8px 16px;
    border-right: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 14%, transparent);
    background: color-mix(in oklab, var(--mud-palette-background) 30%, transparent);
}

.help-nav::-webkit-scrollbar,
.help-content::-webkit-scrollbar {
    width: 6px;
}

.help-nav::-webkit-scrollbar-thumb,
.help-content::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--mud-palette-lines-default) 45%, transparent);
    border-radius: 3px;
}

.help-nav::-webkit-scrollbar-thumb:hover,
.help-content::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklab, var(--mud-palette-lines-default) 80%, transparent);
}

.help-nav-section-label {
    display: block;
    padding: 0 6px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
    opacity: 0.75;
}

.help-nav-pinned {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed color-mix(in oklab, var(--mud-palette-lines-default) 18%, transparent);
}

.help-nav-pinned .help-nav-doc--pinned {
    background: color-mix(in oklab, var(--mud-palette-primary) 6%, transparent);
}

.help-nav-pinned .help-nav-doc--pinned:hover {
    background: color-mix(in oklab, var(--mud-palette-primary) 12%, transparent);
}

.help-nav-empty {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
}

.help-nav-cat {
    margin-bottom: 4px;
}

.help-nav-cat-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    border-radius: var(--admin-radius-sm);
    transition: background 0.12s ease;
    text-align: left;
}

.help-nav-cat-toggle:hover {
    background: color-mix(in oklab, var(--mud-palette-text-primary) 6%, transparent);
}

.help-nav-cat-icon {
    color: var(--mud-palette-primary);
    opacity: 0.85;
    flex-shrink: 0;
}

.help-nav-cat-title {
    flex: 1;
    font-size: 0.77rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.help-nav-cat-count {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--mud-palette-text-primary) 8%, transparent);
}

.help-nav-cat-chevron {
    color: var(--mud-palette-text-secondary);
    transition: transform 0.18s ease;
    opacity: 0.7;
}

.help-nav-cat--collapsed .help-nav-cat-chevron {
    transform: rotate(-90deg);
}

.help-nav-cat-body {
    margin: 4px 0 8px 4px;
    padding-left: 12px;
    border-left: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 18%, transparent);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.help-nav-doc {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
}

.help-nav-doc:hover {
    background: color-mix(in oklab, var(--mud-palette-text-primary) 8%, transparent);
}

.help-nav-doc--active {
    background: color-mix(in oklab, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary-text);
}

.help-nav-doc--active:hover {
    background: color-mix(in oklab, var(--mud-palette-primary) 22%, transparent);
}

.help-nav-doc-title {
    font-size: 0.77rem;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
    overflow-wrap: anywhere;
}

.help-nav-doc-summary {
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    opacity: 0.85;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.help-nav-doc--active .help-nav-doc-summary {
    color: color-mix(in oklab, var(--mud-palette-primary-text) 80%, transparent);
}

/* Right pane: landing + doc */

.help-content {
    overflow-y: auto;
    padding: 18px 20px 20px;
}

/* Landing view */

.help-landing {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.help-landing-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.help-landing-tip {
    margin: 0;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
}

.help-landing-tip code {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.72rem;
    padding: 1px 6px;
    border-radius: 4px;
    background: color-mix(in oklab, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary-text);
}

.help-landing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 4px;
}

.help-landing-card,
.help-landing-cat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: var(--admin-radius-sm);
    background: color-mix(in oklab, var(--mud-palette-surface) 60%, var(--mud-palette-background));
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 14%, transparent);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.help-landing-card:hover,
.help-landing-cat:hover {
    background: color-mix(in oklab, var(--mud-palette-surface) 80%, var(--mud-palette-background));
    border-color: color-mix(in oklab, var(--mud-palette-primary) 28%, transparent);
    transform: translateY(-1px);
}

.help-landing-card-title,
.help-landing-cat-title {
    font-family: 'Manrope', var(--mud-typography-default-family);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--mud-palette-text-primary);
}

.help-landing-cat {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.help-landing-cat-title {
    flex: 1 0 auto;
}

.help-landing-card-summary,
.help-landing-cat-summary {
    width: 100%;
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.45;
}

/* Doc view */

.help-doc {
    display: flex;
    flex-direction: column;
}

.help-doc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.help-doc-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 6px;
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 22%, transparent);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.help-doc-back:hover {
    background: color-mix(in oklab, var(--mud-palette-text-primary) 8%, transparent);
    color: var(--mud-palette-text-primary);
    border-color: color-mix(in oklab, var(--mud-palette-lines-default) 40%, transparent);
}

.help-doc-path {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px dashed color-mix(in oklab, var(--mud-palette-lines-default) 22%, transparent);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    font-size: 0.7rem;
    max-width: 100%;
    overflow: hidden;
}

.help-doc-path:hover {
    color: var(--mud-palette-text-primary);
    border-color: color-mix(in oklab, var(--mud-palette-primary) 35%, transparent);
}

.help-doc-path code {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.7rem;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.help-doc-path-copy {
    color: var(--mud-palette-text-secondary);
    opacity: 0.8;
}

.help-doc-title {
    font-family: 'Manrope', var(--mud-typography-default-family);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
    margin: 0 0 6px;
}

.help-doc-summary {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.55;
    margin: 0 0 18px;
}

.help-doc-skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.help-doc-skeleton-line {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--mud-palette-text-primary) 6%, transparent) 0%,
        color-mix(in oklab, var(--mud-palette-text-primary) 14%, transparent) 50%,
        color-mix(in oklab, var(--mud-palette-text-primary) 6%, transparent) 100%);
    background-size: 200% 100%;
    animation: help-skel-shimmer 1.6s linear infinite;
}

@keyframes help-skel-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Markdown body styles -- scoped to .help-doc-body so they don't leak */

.help-doc-body {
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}

.help-doc-body h1,
.help-doc-body h2,
.help-doc-body h3,
.help-doc-body h4,
.help-doc-body h5,
.help-doc-body h6 {
    font-family: 'Manrope', var(--mud-typography-default-family);
    color: var(--mud-palette-text-primary);
    margin: 22px 0 8px;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.help-doc-body > h1:first-child,
.help-doc-body > h2:first-child,
.help-doc-body > h3:first-child {
    margin-top: 0;
}

.help-doc-body h1 { font-size: 1.05rem; font-weight: 700; }
.help-doc-body h2 {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 18%, transparent);
    padding-bottom: 6px;
    margin-top: 26px;
}
.help-doc-body h3 { font-size: 0.86rem; font-weight: 600; }
.help-doc-body h4 { font-size: 0.78rem; font-weight: 600; color: var(--mud-palette-text-secondary); }

.help-doc-body p {
    margin: 0 0 12px;
}

.help-doc-body strong { color: var(--mud-palette-text-primary); font-weight: 600; }
.help-doc-body em { color: var(--mud-palette-text-primary); }

.help-doc-body ul,
.help-doc-body ol {
    margin: 0 0 12px;
    padding-left: 22px;
}

.help-doc-body li {
    margin-bottom: 4px;
}

.help-doc-body li > p:last-child {
    margin-bottom: 4px;
}

.help-doc-body a {
    color: var(--mud-palette-primary);
    text-decoration: none;
    border-bottom: 1px dashed color-mix(in oklab, var(--mud-palette-primary) 35%, transparent);
    transition: border-color 0.12s ease, color 0.12s ease;
}

.help-doc-body a:hover {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
}

.help-doc-body code {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.74rem;
    padding: 1px 5px;
    border-radius: 3px;
    background: color-mix(in oklab, var(--mud-palette-surface) 70%, var(--mud-palette-background));
    color: var(--mud-palette-text-primary);
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 14%, transparent);
}

.help-doc-body pre {
    margin: 12px 0;
    padding: 12px 14px;
    background: color-mix(in oklab, var(--mud-palette-background) 70%, var(--mud-palette-surface));
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 18%, transparent);
    border-radius: var(--admin-radius-sm);
    overflow-x: auto;
    font-size: 0.74rem;
    line-height: 1.55;
}

.help-doc-body pre code {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-size: inherit;
}

.help-doc-body blockquote {
    margin: 12px 0;
    padding: 8px 14px;
    border-left: 3px solid color-mix(in oklab, var(--mud-palette-primary) 40%, transparent);
    background: color-mix(in oklab, var(--mud-palette-primary) 6%, transparent);
    border-radius: 0 var(--admin-radius-sm) var(--admin-radius-sm) 0;
    color: var(--mud-palette-text-secondary);
}

.help-doc-body blockquote p:last-child { margin-bottom: 0; }

.help-doc-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

.help-doc-body th,
.help-doc-body td {
    padding: 6px 10px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 18%, transparent);
    text-align: left;
    vertical-align: top;
}

.help-doc-body th {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    background: color-mix(in oklab, var(--mud-palette-text-primary) 4%, transparent);
}

.help-doc-body hr {
    border: none;
    border-top: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 18%, transparent);
    margin: 22px 0;
}

.help-doc-body img {
    max-width: 100%;
    border-radius: var(--admin-radius-sm);
}

/* Footer */

.help-drawer-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 16%, transparent);
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in oklab, var(--mud-palette-background) 35%, transparent);
}

.help-drawer-footer-meta {
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

.help-kbd {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: color-mix(in oklab, var(--mud-palette-text-primary) 10%, transparent);
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 28%, transparent);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1;
}

/* Mobile: full width, vertical stack */

@media (max-width: 720px) {
    .help-drawer {
        width: 100vw !important;
        min-width: 0;
        max-width: 100vw;
    }

    .help-drawer-resize-handle {
        display: none;
    }

    .help-drawer-pane-grid {
        grid-template-columns: 1fr;
    }

    .help-nav {
        max-height: 220px;
        border-right: none;
        border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 14%, transparent);
    }
}

.release-notes-content {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
    padding: 8px 0;
}

/* ── Circuit watchdog (TRI-84) ───────────────────────────────
   Global rather than scoped: the dimming rule below targets the MudBlazor
   shell, which lives outside CircuitWatchdog.razor, so Blazor's scoped-CSS
   rewriting would never match it. */

#triviai-circuit-watchdog {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 20000; /* above MudBlazor's app bar and dialog layers */
    background: #7f1d1d;
    color: #fff5f5;
    border-bottom: 1px solid #f87171;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

#triviai-circuit-watchdog[hidden] {
    display: none;
}

/* Stage 1 (TRI-101): the connection is late, not dead. Amber rather than red,
   and none of the blocking treatment below -- an operator can keep reading.
   "dropped" (TRI-137) is the same shape for the same reason: the rejoin may
   still land, so it states the fact without the terminal treatment. */
#triviai-circuit-watchdog[data-stage="connecting"],
#triviai-circuit-watchdog[data-stage="dropped"] {
    background: #78350f;
    color: #fffbeb;
    border-bottom-color: #fbbf24;
}

/* Both stages ship in the markup so the swap needs no re-render; data-stage
   picks one. Nothing shows until the module sets it.

   Selectors here are id-prefixed on purpose: the base .triviai-circuit-watchdog-text
   rule further down sets `display: flex`, and a bare class selector at equal
   specificity would lose to it on source order -- which renders BOTH stages at
   once, putting "never established" on screen during a healthy slow start. That
   is the very lie TRI-101 exists to remove. */
#triviai-circuit-watchdog .triviai-circuit-watchdog-icon,
#triviai-circuit-watchdog .triviai-circuit-watchdog-text {
    display: none;
}

#triviai-circuit-watchdog[data-stage="connecting"] .triviai-circuit-watchdog-icon-connecting,
#triviai-circuit-watchdog[data-stage="dropped"] .triviai-circuit-watchdog-icon-connecting,
#triviai-circuit-watchdog[data-stage="dead"] .triviai-circuit-watchdog-icon-dead,
#triviai-circuit-watchdog[data-stage="lost"] .triviai-circuit-watchdog-icon-dead {
    display: block;
}

#triviai-circuit-watchdog[data-stage="connecting"] .triviai-circuit-watchdog-text-connecting,
#triviai-circuit-watchdog[data-stage="dead"] .triviai-circuit-watchdog-text-dead,
#triviai-circuit-watchdog[data-stage="dropped"] .triviai-circuit-watchdog-text-dropped,
#triviai-circuit-watchdog[data-stage="lost"] .triviai-circuit-watchdog-text-lost {
    display: flex;
}

/* Offering "Reload page" against a slow start restarts the same race and can
   flash again -- an operator can loop without ever landing on a live page.
   "dropped" is not in this list on purpose: a reload there really does try a
   fresh circuit, which is the one action that can help. */
#triviai-circuit-watchdog[data-stage="connecting"] #triviai-circuit-watchdog-reload {
    display: none;
}

#triviai-circuit-watchdog[data-stage="connecting"] .triviai-circuit-watchdog-icon-connecting,
#triviai-circuit-watchdog[data-stage="dropped"] .triviai-circuit-watchdog-icon-connecting {
    fill: #fcd34d;
    animation: triviai-circuit-spin 1.1s linear infinite;
}

#triviai-circuit-watchdog[data-stage="connecting"] .triviai-circuit-watchdog-text span,
#triviai-circuit-watchdog[data-stage="dropped"] .triviai-circuit-watchdog-text span {
    color: #fde68a;
}

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

@media (prefers-reduced-motion: reduce) {
    #triviai-circuit-watchdog[data-stage="connecting"] .triviai-circuit-watchdog-icon-connecting,
    #triviai-circuit-watchdog[data-stage="dropped"] .triviai-circuit-watchdog-icon-connecting {
        animation: none;
    }
}

.triviai-circuit-watchdog-body {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: var(--admin-shell-max-width);
    margin: 0 auto;
    padding: 12px 20px;
}

.triviai-circuit-watchdog-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    fill: #fca5a5;
}

.triviai-circuit-watchdog-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.triviai-circuit-watchdog-text strong {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.triviai-circuit-watchdog-text span {
    color: #fecaca;
}

#triviai-circuit-watchdog-reload {
    flex: 0 0 auto;
    margin-left: auto;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid #fca5a5;
    border-radius: var(--admin-radius-sm);
    background: transparent;
    color: #fff5f5;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

#triviai-circuit-watchdog-reload:hover {
    background: rgba(255, 255, 255, 0.12);
}

#triviai-circuit-watchdog-reload:focus-visible {
    outline: 2px solid #fecaca;
    outline-offset: 2px;
}

/* Make the inertness legible rather than merely stated: the shell behind a dead
   circuit is a static snapshot, so stop it from reading as an operable UI.
   Terminal stage only -- desaturating a page that is merely still connecting
   was the visible half of the TRI-101 false alarm. */
html[data-triviai-circuit="dead"] .mud-layout,
html[data-triviai-circuit="dead"] .admin-login-shell,
html[data-triviai-circuit="lost"] .mud-layout,
html[data-triviai-circuit="lost"] .admin-login-shell {
    filter: saturate(0.55);
    opacity: 0.72;
}

/* The app bar and drawer are position:fixed, so the banner would otherwise sit
   on top of them and take the environment chip with it -- the one piece of
   chrome an operator most needs mid-incident ("is this prod?"). Shift the fixed
   chrome down by the measured banner height instead of covering it.
   --triviai-circuit-banner-h is set by CircuitWatchdog.razor.js.

   Matched by "attribute present and not live" rather than by listing the
   stages (TRI-137 added two more, and an unlisted stage would silently bury
   the app bar). The attribute is absent in the prerendered HTML, so a page
   that has not been judged yet is untouched; and the height is 0px whenever
   the module leaves the banner hidden, which makes each of these a no-op
   rather than a guess about which stages are on screen. */
html[data-triviai-circuit]:not([data-triviai-circuit="live"]) .mud-appbar {
    top: var(--triviai-circuit-banner-h, 0px);
}

html[data-triviai-circuit]:not([data-triviai-circuit="live"]) .mud-drawer {
    top: var(--triviai-circuit-banner-h, 0px);
    height: calc(100% - var(--triviai-circuit-banner-h, 0px));
}

html[data-triviai-circuit]:not([data-triviai-circuit="live"]) .mud-main-content {
    padding-top: calc(64px + var(--triviai-circuit-banner-h, 0px));
}

html[data-triviai-circuit]:not([data-triviai-circuit="live"]) .admin-login-shell {
    padding-top: var(--triviai-circuit-banner-h, 0px);
}

@media (max-width: 720px) {
    .triviai-circuit-watchdog-body {
        flex-wrap: wrap;
        padding: 10px 14px;
    }

    #triviai-circuit-watchdog-reload {
        margin-left: 0;
        width: 100%;
    }
}