/* Base styles: theme vars, page header, appbar, typography, login, language, kebab, drag-drop, empty-state, keyboard hints, reduced-motion. */
/* ── Theme-aware custom variables ─────────────────────────────────────── */
:root {
    --survey-above-target: #81C784;
}

/* ── Page header: back button + breadcrumb ────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    position: sticky;
    top: var(--mud-appbar-height, 48px);
    z-index: 10;
    background: var(--mud-palette-background);
    margin: -16px -16px 16px -16px;
    padding: 12px 16px;
}
.page-header-parent {
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
}
.page-header-parent:hover {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}
/* Right-aligned action slot inside PageHeader (icons, buttons that belong
   with the title bar rather than the filter bar — used on OrgChartGraph
   mobile to hoist Reset + Settings up to the title row). */
.page-header-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* Stay on the title row even when 3+ icons get hoisted; wrapping would push
       them below the title and break the visual rhythm. */
    flex-wrap: nowrap;
}
/* Bubble icon next to the mobile short-form "Size" caption. Previously set
   via an inline style="font-size:12px;color:…;vertical-align:middle" — moved
   here for easier theming and to keep the Razor markup clean. */
.org-graph-caption-icon {
    font-size: 12px !important;
    color: var(--mud-palette-text-secondary);
    vertical-align: middle;
}

/* Pattern A row-with-kebab (ROADMAP #51/#51a) — HTML-valid alternative
   to "<div @onclick> containing <button>" patterns. The wrapper is NOT
   clickable; it holds a primary-button child (flex:1) that takes the
   main action, plus sibling secondary buttons (expand-all, kebab) at
   the end. Visual row treatment (hover/focus) cascades to the wrapper
   via :has(), so focusing or hovering the primary lights up the whole
   row — giving the illusion of a single clickable row with nested
   buttons, without the HTML5 violation. */
.row-with-kebab {
    display: flex;
    align-items: center;
    gap: 6px;
}
.row-with-kebab:has(.row-primary:hover),
.row-with-kebab:has(.row-primary:focus-visible) {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}
/* Fallback for browsers without :has() support (notably iOS < 15.4, which
   remains ~3–4 % of mobile traffic). :focus-within bubbles focus from the
   primary button to the wrapper — keyboard users still see the row light
   up. Mouse hover on the row won't glow in these older browsers, but the
   button itself still shows its own :hover styling — acceptable
   degradation for a small, shrinking cohort. */
@supports not selector(:has(*)) {
    .row-with-kebab:focus-within {
        background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
    }
}
.row-primary {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}

/* Generic reset for <button> and <a> elements that have to impersonate
   span/div inline content (ROADMAP #51 — a11y conversions where the
   native semantics matter but visual styling belongs to parent/inline
   style). Preserves inherited typography and colour. */
.clickable-reset {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
    text-decoration: none;
}
.clickable-reset:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 2px;
}
.clickable-reset:hover { text-decoration: none; }

/* Settings page swatch + rating-tile pickers. Semantic <button role="radio">
   inside a parent role="radiogroup"; aria-checked drives the selected-state
   outline and glow. The swatch background colour stays inline (dynamic per
   iteration); everything else lives here. */
.settings-swatch {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: none;
    padding: 0;
    cursor: pointer;
    background: transparent;
    outline: 1px solid var(--mud-palette-divider);
    outline-offset: 0;
    transition: box-shadow 0.15s, outline 0.15s;
}
.settings-swatch[aria-checked="true"] {
    outline: 3px solid var(--mud-palette-primary);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
}
.settings-swatch:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
.settings-swatch-default {
    background: repeating-conic-gradient(var(--mud-palette-divider) 0% 25%, transparent 0% 50%) 50% / 16px 16px;
}
.settings-rating-tile {
    width: 48px;
    height: 48px;
    border: none;
    padding: 0;
    border-radius: 8px;
    cursor: pointer;
    background: var(--mud-palette-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.15s, outline 0.15s, background-color 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.settings-rating-tile[aria-checked="true"] {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
    outline: 2px solid var(--mud-palette-primary);
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.settings-rating-tile:hover:not([aria-checked="true"]) {
    box-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.24);
}
.settings-rating-tile:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Card-as-link pattern for Home.razor tiles. The card's styling (background,
   border, elevation) stays on the MudPaper parent; this anchor fills the paper
   and carries the navigation + keyboard + AT semantics. Colour/decoration
   reset so the anchor doesn't show the default blue-underline treatment. */
.home-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border-radius: inherit;
    outline: none;
}
.home-card-link:hover { text-decoration: none; }
.home-card-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
/* Row inside the Needs Attention list — semantically a link, styled as a
   flex row. Same reset as .home-card-link plus the original flex layout. */
.home-attention-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--mud-palette-warning) 6%, transparent);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    outline: none;
}
.home-attention-row:hover { text-decoration: none; }
.home-attention-row:focus-visible {
    outline: 2px solid var(--mud-palette-warning);
    outline-offset: 2px;
}

/* Screen-reader only — visually hidden but accessible to AT */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Compact appbar globally ──────────────────────────────────────────── */
:root { --mud-appbar-height: 48px; }
.mud-appbar { min-height: 48px !important; height: 48px !important; }

/* ── Ensure content clears the fixed appbar ──────────────────────────── */
.mud-main-content {
    padding-top: var(--mud-appbar-height, 48px) !important;
}
/* Compact page titles — h4 as page title, h5 as section header */
.mud-main-content .mud-typography-h4 {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}
.mud-main-content .mud-typography-h5 {
    font-size: 1rem !important;
    line-height: 1.3 !important;
}
/* ── Responsive show/hide helpers ─────────────────────────────────────── */
.hide-mobile, .hide-desktop { }
@media (max-width: 600px) {
    .hide-mobile { display: none !important; }
}
@media (min-width: 601px) {
    .hide-desktop { display: none !important; }
}

/* ── Login page layout ───────────────────────────────────────────────── */
.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(calc(var(--dvh, 1vh) * 100) - var(--mud-appbar-height, 64px) - 2rem);
}
/* Login employee select: items wrap within the popover */
.login-select-popover .mud-list-item-text {
    white-space: normal !important;
    word-break: break-word;
}
/* Mobile multi-line select items: add spacing between entries */
.login-select-item {
    padding: 4px 0;
}
.login-select-popover .mud-list-item {
    border-bottom: 1px solid var(--mud-palette-divider);
}
/* DEMO-11: branded circuit-error banner replacing Blazor's default yellow stripe.
   Blazor toggles visibility by setting style="display: block" inline; we keep
   display:none in the rule so the banner stays hidden until the framework flips
   it on. Inline content + absolute-positioned dismiss button avoids fighting the
   framework's inline display value. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 12px 48px 12px 20px;
    background: var(--mud-palette-warning);
    color: #fff;
    font-size: 0.9rem;
    border-top: 4px solid color-mix(in srgb, var(--mud-palette-warning) 70%, black);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}
#blazor-error-ui .blazor-error-icon { margin-right: 8px; font-size: 1.1rem; }
#blazor-error-ui .blazor-error-text { margin-right: 16px; }
#blazor-error-ui a {
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 8px;
    margin-left: 4px;
    border-radius: 4px;
}
#blazor-error-ui a:hover { background: rgba(255, 255, 255, 0.15); }
#blazor-error-ui .dismiss {
    text-decoration: none;
    font-weight: 600;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

/* DEMO-13: 1-line role description per persona on /login. Renders inside both
   the dropdown items (desktop + mobile) and the selected-persona preview card.
   Italic in the preview card signals "context, not data". */
.login-role-description {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.3;
    margin-top: 3px;
}
.login-role-description--preview {
    font-style: italic;
    font-size: 0.85rem;
    margin-top: 0;
    margin-bottom: 4px;
}
@media (max-width: 600px) {
    /* Make the select input tall enough to show the 3-line selected item */
    .login-card .mud-select .mud-input-slot {
        min-height: 64px !important;
        height: auto !important;
        align-items: center;
    }
    .login-card .mud-select .mud-input {
        height: auto !important;
    }
    .login-card .mud-select .mud-input-control {
        height: auto !important;
    }
    /* Ensure popover is tall enough for multi-line items */
    .login-select-popover .mud-list {
        max-height: 60vh !important;
    }
}

@media (max-width: 600px) {
    .login-wrapper {
        display: block;
        min-height: 0;
        padding-top: 16px;
    }
    .login-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: 100% !important;
    }
    .login-card {
        border-radius: 8px;
    }
}

/* ── Mobile language dropdown ────────────────────────────────────────── */
.lang-mobile-only { display: inline-flex; }
@media (min-width: 600px) {
    .lang-mobile-only { display: none; }
}


/* ── Kebab (⋮) row-action menu ────────────────────────────────────────────
   The menu button is hidden by default and revealed only when the parent
   row / card / panel header is hovered, keeping the UI uncluttered. */

/* Hidden until hover */
.row-kebab-btn-wrap {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s;
    flex-shrink: 0;
}

.row-kebab-host:hover .row-kebab-btn-wrap,
tr:hover .row-kebab-btn-wrap,
.mud-expansion-panel-header:hover .row-kebab-btn-wrap,
.mud-card:hover .row-kebab-btn-wrap {
    opacity: 1;
    pointer-events: auto;
}

/* On competency cards, outline the kebab button to match the card border. */
.comp-card .row-kebab-btn-wrap .mud-icon-button {
    border: 1px solid var(--folder-border-color, var(--mud-palette-divider));
    border-radius: 4px;
}

/* Right-click context menu. */
.row-ctx-paper {
    position: fixed;
    z-index: 1300;
    min-width: 160px;
    padding: 4px 0;
    border-radius: 4px;
    background: var(--mud-palette-surface);
    box-shadow: var(--mud-elevation-8);
}
.row-ctx-header {
    padding: 8px 16px 6px;
    max-width: 240px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    justify-content: center;
}
/* Context menu items left-aligned */
.row-ctx-paper .mud-list-item,
.row-ctx-paper .mud-list-item-gutters,
.row-ctx-paper .mud-list-item-text,
.row-ctx-paper .mud-list-item > div {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: center !important;
}
.row-ctx-paper .mud-list {
    text-align: left !important;
}
.row-ctx-paper .mud-list-item-text > * {
    text-align: left !important;
    display: block !important;
}
.row-ctx-header .mud-chip {
    font-size: 0.85rem !important;
    height: 28px !important;
}

/* ── Employees grid: banded (striped) rows ───────────────────────────────
   Uses theme primary with transparency for dark-mode compat. */
.employees-grid {
    --mud-palette-table-striped: var(--table-banding, color-mix(in srgb, var(--mud-palette-primary) 7%, transparent));
}

/* Competency cards – styling shared by all competency cards. */
.comp-card {
    position: relative;
    border-width: 1.5px !important;
    box-shadow: var(--mud-elevation-2) !important;
}
.comp-card .mud-card-header { padding-bottom: 8px; }
.comp-card .mud-card-content { padding-top: 8px; }

/* ── Generic card drag-and-drop feedback ─────────────────────────────────
   Used by both Competencies and Profiles pages via window.dnd. */

/* Empty card container: always rendered so SortableJS has a drop target. */
.dnd-cards-empty {
    min-height: 64px;
    border: 2px dashed var(--mud-palette-divider);
    border-radius: 4px;
    align-items: center;
}
/* Non-draggable hint text inside an empty container. */
.dnd-card-hint {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    padding: 4px 8px;
    pointer-events: none;
}

/* Ghost: the placeholder that stays in place while the card is being dragged. */
.dnd-card-ghost {
    opacity: 0.35;
    border-style: dashed !important;
}
/* Drag: the element that follows the cursor. */
.dnd-card-drag {
    box-shadow: var(--mud-elevation-8) !important;
    opacity: 0.92;
    transform: rotate(1.5deg);
    cursor: grabbing !important;
}


/* ── Empty state (no data / no results / nothing-to-do) ────────────── */
.empty-state {
    padding: 48px 16px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.empty-state-compact { padding: 28px 12px; }
.empty-state .empty-state-icon {
    color: var(--mud-palette-text-disabled);
    opacity: 0.75;
    margin-bottom: 4px;
}
.empty-state-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}
.empty-state-compact .empty-state-title { font-size: 0.875rem; }
.empty-state-desc {
    font-size: 0.8125rem;
    max-width: 320px;
    line-height: 1.5;
}
.empty-state-actions { margin-top: 12px; }

/* ── Keyboard shortcut hint (desktop-only, survey Rate phase) ──────── */
.kb-hint {
    display: none;
    margin: 14px auto 0;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    align-items: center;
    gap: 12px;
    padding: 6px 14px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 16px;
    animation: kb-hint-fade 0.35s ease-out;
    width: fit-content;
    /* Button-default overrides — .kb-hint is now a <button>. Keep the
       element's own background/border/padding; reset only what the UA
       style adds (font family, text alignment) and wire a visible focus
       state. */
    font-family: inherit;
    text-align: inherit;
    cursor: pointer;
}
.kb-hint:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
.kb-hint.kb-hint-dismissing {
    animation: kb-hint-fade-out 0.25s ease-in forwards;
}
.kb-hint .kb-key {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, var(--mud-palette-surface));
    border: 1px solid var(--mud-palette-divider);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    /* WCAG 1.4.4 — keep body-ish text ≥12 px. Was 0.6875rem (11 px) until
       #57 audit flagged it. Kbd-style glyphs still read as compact at 12 px
       because of the monospace + padding + border combo. */
    font-size: 0.75rem;
    color: var(--mud-palette-text-primary);
    text-align: center;
}
.kb-hint .kb-group { display: inline-flex; align-items: center; gap: 4px; }
@media (hover: hover) and (pointer: fine) {
    .kb-hint { display: inline-flex; }
}
/* Fade-in and fade-out animations for the keyboard-hint banner. Both are
   handled by Layer 1 of the two-layer reduced-motion policy (see the
   @media block at the bottom of this file — Closes ROADMAP #56). The
   hint is purely decorative (a discoverability affordance, not a
   state-change signal), so appearing/disappearing instantly is the
   correct reduced-motion behaviour; no Layer 2 exemption needed. */
@keyframes kb-hint-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
@keyframes kb-hint-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; transform: translateY(-2px); }
}

/* ── Audit Detail Cards: swiper container ─────────────────────────────────
   Desktop: flex row — both Before and After cards visible side-by-side.
   Mobile: switches to a horizontal scroll-snap carousel so each panel takes
   the full card width and users swipe/tap tabs to switch. */
.audit-swiper {
    display: flex;
    gap: 12px;
    padding: 8px;
    align-items: flex-start;
}
.audit-swiper > .audit-panel {
    flex: 1 1 0;
    min-width: 250px;          /* desktop default — wraps on narrow desktops */
}
@media (max-width: 959.98px) {
    .audit-swiper.swipeable {
        padding: 0;
        gap: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }
    .audit-swiper.swipeable::-webkit-scrollbar { display: none; }
    .audit-swiper.swipeable > .audit-panel {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;           /* override the desktop min-width */
        scroll-snap-align: start;
    }
    /* Non-swipeable case on mobile (Created / Deleted / Enforced): single
       panel should fill the card, not cling to its 250 px min-width. */
    .audit-swiper:not(.swipeable) > .audit-panel {
        min-width: 0;
        width: 100%;
    }
    .audit-tabs {
        display: flex;
        gap: 4px;
        padding: 6px 8px 4px;
    }
    .audit-tab {
        flex: 1;
        padding: 6px 10px;
        background: transparent;
        border: 1px solid var(--mud-palette-divider);
        border-radius: 6px;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: var(--mud-palette-text-secondary);
        -webkit-tap-highlight-color: transparent;
    }
    .audit-tab.before.active {
        background: color-mix(in srgb, var(--mud-palette-error) 12%, var(--mud-palette-surface));
        border-color: var(--mud-palette-error);
        color: var(--mud-palette-error);
    }
    .audit-tab.after.active {
        background: color-mix(in srgb, var(--mud-palette-success) 12%, var(--mud-palette-surface));
        border-color: var(--mud-palette-success);
        color: var(--mud-palette-success-darken);
    }
    .audit-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        padding: 6px 0 4px;
    }
    .audit-dots > span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--mud-palette-action-disabled);
        transition: background 0.15s, width 0.15s, border-radius 0.15s;
    }
    .audit-dots > span.active {
        background: var(--mud-palette-primary);
        width: 20px;
        border-radius: 4px;
    }
    .audit-hint {
        text-align: center;
        padding: 2px 8px 8px;
        font-size: 0.68rem;
        color: var(--mud-palette-text-disabled);
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Card help popover (shared by /team-report dashboard + /team-report/<id> detail)

   Lives here rather than inside either page's <style> block so it loads on both
   and stays consistent. Positioning (absolute vs relative anchor, mobile full-
   width behaviour) is page-specific and overridden in each page's local style.
   ────────────────────────────────────────────────────────────────────────── */
.card-help { position: static; display: inline-flex; align-items: center; }

.tr-help-chip {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid var(--mud-palette-text-secondary);
    color: var(--mud-palette-text-secondary);
    background: transparent; font-size: 11px; font-weight: 700; line-height: 1;
    display: grid; place-items: center; cursor: pointer; opacity: .55;
    padding: 0;
    transition: transform .12s ease, opacity .12s ease, background .12s ease,
                border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.tr-help-chip:hover,
.tr-help-chip:focus-visible,
.tr-help-chip.active {
    opacity: 1;
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: #fff;
    transform: scale(1.2);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

.tr-help-overlay { position: fixed; inset: 0; z-index: 1298; background: transparent; }

.tr-help-pop {
    /* Always out of flow — page-specific overrides (.tr-card .tr-help-pop on the dashboard,
       .trd-help-host .tr-help-pop on the detail page, and the mobile fixed variant) fill in
       the actual anchor coords. Without this default, an override that only set top/right
       without re-declaring position would fall back to static and push sibling content down. */
    position: absolute;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .16);
    padding: 14px 16px 16px;
    z-index: 1300;
    text-transform: none; letter-spacing: 0;
    font-size: 13px; line-height: 1.5;
    cursor: default;
}
.tr-help-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tr-help-title { font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--mud-palette-text-primary); }
.tr-help-close {
    /* DEMO-14 (MOB-4): 22 → 44 px to meet WCAG 2.5.5 minimum touch-target size. */
    width: 44px; height: 44px; border: none; background: transparent;
    color: var(--mud-palette-text-secondary); font-size: 18px; cursor: pointer; border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
}
.tr-help-close:hover { background: color-mix(in srgb, var(--mud-palette-text-secondary) 10%, transparent); }
.tr-help-pop section { margin-bottom: 12px; }
.tr-help-pop section:last-of-type { margin-bottom: 0; }

/* Help-chip host + popover anchor for pages that embed the ? chip inside
   a PageHeader (originally only TeamReportDetail had this via inline <style>;
   promoted to global so every page using <span class="trd-help-host"> gets
   the same behaviour, and so the popover is never rendered at default
   top-left-of-ancestor coords). Viewport-safe: max-width + max-height
   + overflow so the popover stays fully visible on small windows. */
.trd-help-host { position: relative; display: inline-flex; margin-left: 6px; }
.trd-help-host .tr-help-pop {
    position: absolute;
    top: calc(100% + 8px);
    /* Anchor to the host's LEFT edge (not centre under the chip). Centring
       with translateX(-50%) pushes the popover's left edge off-screen when
       the ? chip sits near the left viewport edge (which it always does —
       page header, leading position). Left-anchor means the popover grows
       rightward from roughly under the chip; arrow at left: 11px lines up
       with the chip's centre. max-width + viewport-minus-padding prevents
       right-edge clipping on narrow windows. */
    left: 0;
    right: auto;
    transform: none;
    width: 420px;
    max-width: calc(100vw - 24px);
    max-height: calc(calc(var(--dvh, 1vh) * 100) - 120px);
    overflow-y: auto;
}
.trd-help-host .tr-help-pop::before {
    content: ''; position: absolute; top: -6px;
    /* Chip is ~22 px wide; 11 px aligns the arrow's diamond-tip under its
       centre given the host's inline-flex width matches the chip. */
    left: 11px; right: auto;
    width: 12px; height: 12px;
    background: var(--mud-palette-surface);
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent);
    transform: translateX(-50%) rotate(45deg);
}
/* Narrow viewport: the inline host sits near the right edge; the
   translateX(-50%) centring would push the popover off-screen. Promote to
   fixed and span the viewport like the dashboard popover does, drop the
   arrow because it can't point back at the chip reliably. */
@media (max-width: 720px) {
    .trd-help-host .tr-help-pop {
        position: fixed;
        top: 72px;       /* below the appbar + page header */
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        max-height: calc(calc(var(--dvh, 1vh) * 100) - 96px);
        overflow-y: auto;
        transform: none;   /* cancel the desktop translateX centring */
    }
    .trd-help-host .tr-help-pop::before { display: none; }
}
.tr-help-pop h3 {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px;
    color: var(--mud-palette-text-secondary); margin: 0 0 4px; font-weight: 700;
}
.tr-help-pop p,
.tr-help-pop ul { margin: 0; font-size: 13px; line-height: 1.5; }
.tr-help-pop ul { padding-left: 18px; margin-top: 2px; }
.tr-help-pop li { margin-bottom: 3px; }

/* ── Threshold legend (ROADMAP #34) ─────────────────────────────────────
   Three-row colour→value key rendered inside CardHelpPopover's Thresholds
   slot and (on detail pages) standalone below the chart. Kept compact so
   it fits the popover's ~260px width without wrapping; swatch takes a
   fixed 12×12 square so the rows align vertically regardless of range
   text length. */
.threshold-legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    line-height: 1.4;
}
.threshold-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.threshold-legend-swatch {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}
.threshold-legend-range {
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: 12px;
    color: var(--mud-palette-text-primary);
    min-width: 56px;
}
.threshold-legend-label {
    color: var(--mud-palette-text-secondary);
    flex: 1;
    min-width: 0;
}

/* ── Reduced-motion: two-layer policy (ROADMAP #26 verified 2026-04-23).
   Layer 1 is a blanket neutralizer for users who opted out of animation,
   using the WCAG-recommended pattern (near-zero duration, not 'none') so
   JS-driven callbacks that expect transitionend still fire.
   Layer 2 exempts specific classes whose animations communicate user-
   initiated state changes — without them the UI either hides information
   the user needs (countdown bars, ready confirmation) or regresses a
   static element to a sub-optimal resting state (pulsing dots).
   The rule of thumb when adding a new keyframe: if removing the animation
   would leave the user without a signal they need to act on, exempt it;
   otherwise let the blanket flatten it. Class-specificity (0,1,0) beats
   the universal selector (0,0,0) so the exemptions win without needing
   extra !important stacking beyond what's already on each property. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Rating-dot pulse: survey-dot-pulse's 0%/100% keyframe sits at
       opacity 0.55, so the blanket's 0.01 ms duration leaves the dot
       permanently dim. Colour already communicates state (grey = unrated,
       red = below target), so disable the animation entirely and let the
       dot display at its un-animated styles. */
    .survey-dot-unrated,
    .survey-dot-below {
        animation: none !important;
    }

    /* Countdown bars: the visible shrinking IS the cancel-window
       affordance. Without it, reduced-motion users see no timer — the
       auto-advance feels unexplained. Restore the shrink duration;
       the lead-in fill stays instant (acceptable — the bar just
       appears full, then visibly empties over the cancel window). */
    .survey-countdown-bar {
        animation-duration: 0.01ms, var(--countdown-duration) !important;
    }
    .survey-transition-bar {
        animation-duration: 0.01ms, var(--transition-duration, 6000ms) !important;
    }

    /* Ready-button pulse: one visible pulse still conveys "you're ready"
       without the vestibular hazard of an infinite loop. The blanket
       already clamps iteration-count to 1; we only need to restore the
       duration so the single pulse is visible rather than 0.01 ms. */
    .survey-ready-pulse {
        animation-duration: 1.6s !important;
    }
}

/* ── Org-graph size-metric paired segmented control ──
   Two buttons visually fused at their shared edge so Direct/Team reads as a
   single question ("how do we count reports?") instead of two independent chips.
   Theme-aware via MudBlazor CSS variables so it inherits light/dark automatically. */
.org-graph-metric-pair {
    display: inline-flex;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 30%, transparent);
}
.org-graph-pair-btn {
    border: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    padding: 4px 12px;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 120ms ease, color 120ms ease;
}
/* Between-button separator. Each button is wrapped in a MudTooltip span, so
   `.btn + .btn` no longer works; we target every non-first *flex child* of the
   group (whether it's a bare button or a tooltip wrapper) and put the border
   on whatever's first inside it. */
.org-graph-metric-pair > *:not(:first-child) > .org-graph-pair-btn,
.org-graph-metric-pair > *:not(:first-child).org-graph-pair-btn {
    border-left: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 30%, transparent);
}
.org-graph-pair-btn:hover:not(.active) {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}
.org-graph-pair-btn.active {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 500;
}
.org-graph-pair-btn:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* ── Org-graph split layout (tree left + force graph right) ──
   Added in 7ae. Replaces the ECharts legend widget entirely with a compact,
   clickable dept tree that drives which employees appear on the graph side. */
.org-split {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 0;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    /* Desktop height = viewport minus chrome budget (~260 px covers appbar +
       PageHeader + single-line filter bar + margins). Previously written
       inline on the Razor element, but inline styles beat the mobile
       media-query height rule — that made the 7be mobile viewport fix a
       no-op. Promoting to a CSS rule lets the media query below override
       on narrow screens. Floor stays at 420 px for very-short viewports. */
    height: calc(calc(var(--dvh, 1vh) * 100) - 260px);
    min-height: 420px;
}
.org-split-left {
    border-right: 1px solid var(--mud-palette-divider);
    display: flex; flex-direction: column;
    min-width: 0;
    min-height: 0;    /* allow .org-tree-body's flex:1 + overflow-y:auto to kick in */
}
.org-split-right {
    position: relative;
    min-width: 0;
    overflow: hidden;
    /* Hand 2-finger pinches to JS (echartsInterop) instead of the browser's
       built-in page-zoom. No effect on mouse input, so desktop is unchanged. */
    touch-action: none;
}
.org-tree-header {
    padding: 8px 10px;
    border-bottom: 1px solid var(--mud-palette-divider);
    display: flex; align-items: center; gap: 8px;
    /* WCAG 1.4.4: was 11 px, bumped per #57 audit. Uppercase + letter-
       spacing keeps the visual "section-label" feel at 12 px. */
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, var(--mud-palette-surface));
}
.org-tree-header-count {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 11px; font-weight: 500;
    letter-spacing: 0; text-transform: none;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}
.org-tree-body {
    flex: 1;
    overflow-y: auto;
    padding: 6px 4px;
    /* Thin theme-aware scrollbar. Firefox gets the native `scrollbar-*` props;
       WebKit/Blink get a custom track+thumb. Keeps the panel from looking
       "browser default" next to the MudBlazor-styled chrome. */
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--mud-palette-text-secondary) 40%, transparent) transparent;
}
.org-tree-body::-webkit-scrollbar { width: 8px; }
.org-tree-body::-webkit-scrollbar-track { background: transparent; }
.org-tree-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 35%, transparent);
    border-radius: 4px;
}
.org-tree-body::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 55%, transparent);
}
/* Fold-cycle button in the tree header — bordered-surface look matching the
   <DepartmentTree>'s row chevrons. `!important` overrides MudIconButton's
   default transparent variant; without it MudBlazor's compiled rules win on
   specificity. */
.org-tree-foldcycle-btn {
    border: 1px solid var(--mud-palette-divider) !important;
    background: var(--mud-palette-surface) !important;
    border-radius: 4px !important;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.org-tree-foldcycle-btn:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface)) !important;
    border-color: color-mix(in srgb, var(--mud-palette-primary) 50%, var(--mud-palette-divider)) !important;
}

/* The dept-list look on /orgchart-graph is now provided by RowStyle.AccentBar
   (see department-tree.css). Page-scoped overrides previously here are gone —
   the styling lives with the component so any future caller picks it up via
   Style="RowStyle.AccentBar" without per-page CSS. */
.org-tree-count {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    border-radius: 8px;
    padding: 0 6px;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ── Mobile-only bottom-sheet + FAB trigger ────────────────────────────
   Added in 7ar. Reuses the Departments-page mobile-dialog pattern:
   sticky header + role="dialog" body + --dvh height + focus trap via
   window.focusTrap. Desktop layout (>720 px) is completely untouched —
   these rules only fire inside the media query below. */
.org-mobile-fab {
    display: none;                /* desktop: hidden */
    position: absolute;
    bottom: 14px; left: 14px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 20px;
    padding: 6px 12px;
    align-items: center; gap: 6px;
    font-size: 12px; font-weight: 500;
    color: var(--mud-palette-text-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    cursor: pointer;
    z-index: 5;
    font-family: inherit;
}
.org-mobile-fab-icon {
    font-size: 14px;
    color: var(--mud-palette-primary);
}
.org-mobile-fab .org-tree-count { font-size: 11px; }

.org-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1200;
}
.org-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--mud-palette-surface);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -8px 20px rgba(0,0,0,0.2);
    display: flex; flex-direction: column;
    z-index: 1201;
    /* `--dvh` is kept current by the visualViewport listener in App.razor
       — survives soft-keyboard open on Android. */
    max-height: calc(var(--dvh, 1vh) * 85);
}
.org-sheet-handle {
    width: 36px; height: 4px;
    background: var(--mud-palette-text-secondary);
    border-radius: 2px;
    margin: 8px auto 4px;
    opacity: 0.35;
    flex-shrink: 0;
}
.org-sheet-header {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 12px 10px;
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}
.org-sheet-title {
    flex: 1;
    /* DEMO-14 (MOB-5): 12 → 14 px — 12 px borders WCAG-min for body content. */
    font-size: 14px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--mud-palette-text-secondary);
}
.org-sheet-close {
    /* DEMO-14 (MOB-4): 28 → 44 px to meet WCAG 2.5.5 minimum touch-target size. */
    width: 44px; height: 44px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 14px;
    padding: 0;
    font-family: inherit;
}
.org-sheet-close:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
}
.org-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 6px;
    min-height: 0;
}

@media (max-width: 720px) {
    /* Stack to single column; hide the permanent tree panel (the sheet takes
       over). The desktop `.org-tree-header` + `.org-tree-body` CSS still
       applies inside the sheet via the shared org-tree-* classes.
       Height now pinned to remaining viewport (see the second .org-split
       block lower in this media query) so the graph bottom edge is visible. */
    .org-split {
        grid-template-columns: 1fr;
    }
    .org-split-left { display: none; }

    /* Reveal the mobile FAB only at this breakpoint. */
    .org-mobile-fab { display: inline-flex; }

    /* Settings panel promoted to a bottom sheet on mobile. Its desktop flex-
       row grid becomes a vertical stack so the 4 sliders read top-to-bottom
       instead of wrapping awkwardly. */
    .org-settings-panel.mud-paper {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        top: auto;
        margin: 0;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        max-height: calc(var(--dvh, 1vh) * 85);
        overflow-y: auto;
        z-index: 1201;
        box-shadow: 0 -8px 20px rgba(0,0,0,0.2) !important;
    }
    .org-settings-panel .mud-stack {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .org-settings-panel .mud-stack > div {
        min-width: 0 !important;
    }

    /* Filter bar -> 2-column grid on mobile so "Node size" and "Label"
       captions share a left column and both chip groups start at the
       same x. `auto auto` keeps the chip column only as wide as the
       widest chip row — chips don't stretch to the right edge. */
    .org-graph-filterbar {
        display: grid !important;
        grid-template-columns: auto auto;
        column-gap: 10px;
        row-gap: 6px;
        align-items: center;
        justify-content: start;
        /* Don't stretch each chip-pair to the column width — row 2 has 3
           chips vs row 1's 4, and without this the 3 chips get inflated to
           match row 1's total width. */
        justify-items: start;
    }
    /* Force every direct child onto the grid's flow; MudSpacer + icons that
       belonged in the desktop filter bar are hidden separately below. */
    .org-graph-filterbar > * { margin: 0 !important; }
    .org-graph-filterbar .mud-spacer { display: none; }

    /* Reset + Settings icons are hoisted to the page-header's RightActions
       slot on mobile; the filter-bar copies are hidden (no inline display
       style on the span — it would outrank this rule). */
    .org-graph-filterbar-icons { display: none !important; }

    /* Pin the graph height to the remaining viewport so the bottom edge is
       always visible. 210 px covers: 48 appbar + ~70 sticky PageHeader +
       ~80 two-row filter bar + margin. 260 min-height keeps a usable canvas
       on very short landscape viewports. */
    .org-split {
        height: calc(var(--dvh, 1vh) * 100 - 210px);
        min-height: 260px;
    }
}

/* Desktop default for the filter-bar icons wrapper. Mobile CSS above hides
   it; this keeps the desktop flex row without needing an inline style. */
.org-graph-filterbar-icons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Home greeting — reserves vertical space and fades in once the clock is ready.
   See docs/superpowers/specs/2026-04-28-user-timezone-design.md. */
.home-greeting-slot {
    min-height: 1.75rem;
    display: flex;
    align-items: center;
}
.home-greeting-fade-in {
    animation: cm-greeting-fade-in 200ms ease-out;
}
@keyframes cm-greeting-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Filter-bar captions ("Node size" / "Label"). One class across both rows so
   font-size and colour match — the original mix of plain <span> (desktop
   node-size) and <MudText Typo="caption"> (label) rendered at different
   sizes on mobile. Mirrors MudBlazor's Typo.caption: 0.75rem + secondary. */
.org-graph-filterbar-caption {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
/* Desktop-only breathing room before "Label:" so it doesn't hug the previous
   chip group. Not needed on mobile — the grid row handles spacing. */
@media (min-width: 721px) {
    .org-graph-filterbar-caption-label { margin-left: 12px; }
}

/* Short-label/long-label toggle pair for the segmented chips.
   Desktop shows the long form ("Direct reports"), mobile shows the short
   form ("Direct") to keep all chips on a single row. Breakpoint matches
   the rest of the org-graph mobile CSS (720 px). */
.org-graph-label-short { display: none; }
.org-graph-label-long  { display: inline; }
@media (max-width: 720px) {
    .org-graph-label-short { display: inline; }
    .org-graph-label-long  { display: none; }
}

/* /orgchart view-toggle row. Replaces the old MudStack Row="true" layout
   that didn't wrap on narrow phones (3 buttons + spacer overflowed
   horizontally on < 360 px viewports). flex-wrap: wrap reflows the Graph
   button to a second line when needed; the spacer is a flex-grow div
   shown only on desktop, so on mobile the buttons sit side-by-side
   without the empty fill. ROADMAP /orgchart mobile-layout item. */
.orgchart-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.orgchart-toolbar-spacer { flex: 1; }
/* DEMO-14 follow-up: MudBlazor's default .mud-treeview-item-content has a
   hard `height: 36px`. The OrgChart Chain-of-Command rows use
   <MudStack Row="true" Style="flex-wrap:wrap"> so when profile chips wrap to
   a second line the row's outer container stays 36 px tall and the wrapped
   chips render on top of each other (visible at narrow widths and / or many
   profiles per employee). Allow the row to grow with content while keeping
   36 px as the empty-row minimum. align-items: flex-start so the avatar
   stays at the top of the row rather than being recentered as the row
   grows. */
.orgchart-cmd-tree .mud-treeview-item-content {
    height: auto !important;
    min-height: 36px !important;
    align-items: flex-start !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

@media (max-width: 600px) {
    /* Reduce tree indent on the Chain-of-Command MudTreeView so deeply
       nested employee chains don't push their content past the right
       edge. The employee row's MudStack already wraps, so the only
       remaining horizontal-overflow source is the per-level indent. */
    .orgchart-cmd-tree { --app-tree-indent: 12px; }
}

/* DEMO-14 — tiered text-drop on the OrgChart toolbar so all three buttons
   fit on one row even at very narrow viewports (and / or wider-glyph
   languages like KO). Priority order: Graph already icon-only via
   MudIconButton swap, Chain drops next at 480 px, Structure drops last at
   380 px. Each tier hides the short-label span AND tightens the parent
   button's padding (via :has()) so the leftover icon visually approaches a
   square. Browser support for :has() is mainstream as of 2024. */
@media (max-width: 480px) {
    .orgchart-toolbar .tb-text-pri-med { display: none !important; }
    /* Force exact 36×36 square via explicit width = height. aspect-ratio
       alone wasn't enough — MudButton's intrinsic min-height + horizontal
       padding kept producing rectangles. */
    .orgchart-toolbar .mud-button:has(.tb-text-pri-med) {
        min-width: 36px !important;
        width: 36px !important;
        min-height: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        flex: 0 0 36px;
    }
    .orgchart-toolbar .mud-button:has(.tb-text-pri-med) .mud-button-icon-start {
        margin: 0 !important;
    }
}
@media (max-width: 380px) {
    .orgchart-toolbar .tb-text-pri-high { display: none !important; }
    .orgchart-toolbar .mud-button:has(.tb-text-pri-high) {
        min-width: 36px !important;
        width: 36px !important;
        min-height: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        flex: 0 0 36px;
    }
    .orgchart-toolbar .mud-button:has(.tb-text-pri-high) .mud-button-icon-start {
        margin: 0 !important;
    }
}

/* DEMO-9: AppBar last-reset chip — tiny secondary text next to the admin reset button.
   See ROADMAP DEMO-9. Reads its label from MainLayout.LastResetLabel. */
.last-reset-chip {
    align-items: center;
    font-size: 0.75rem;
    line-height: 1;
    opacity: 0.75;
    margin-right: 0.5rem;
    white-space: nowrap;
}

/* DEMO-8 watermark — env-gated DEMO strip rendered by DemoWatermark.razor
   in non-Development. Pinned to the top of the viewport above MudAppBar
   (which is fixed at top:0, z-index 1100). MudAppBar + MudMainContent
   get pushed down by the watermark's height via the :has() selector. */
.demo-watermark {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1400;
    background: color-mix(in srgb, var(--mud-palette-warning) 18%, var(--mud-palette-surface));
    color: var(--mud-palette-warning-darken);
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 24px;
    box-sizing: border-box;
}
.demo-watermark-icon {
    font-size: 0.9rem;
}
body:has(.demo-watermark) header.mud-appbar {
    top: 24px !important;
}
body:has(.demo-watermark) main.mud-main-content {
    padding-top: calc(var(--mud-appbar-height, 64px) + 24px) !important;
}