/* Muscat Hub design system stylesheet — component rules only.
 *
 * Token definitions live in wwwroot/css/tokens.css (which both the Web app and
 * the Playground load alongside this file). This file contributes the
 * component-level styling that consumes those tokens via var(--…) references.
 *
 * Editing colours: see ../design-tokens.README.md. Never add hex literals to
 * this file — every colour must come through a var(--…) lookup.
 */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: var(--fs-base);
    color: var(--color-foreground);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lexend', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    color: var(--color-foreground);
    margin: 0;
    letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-3xl); font-weight: 600; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); text-decoration: underline; }
code, .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }

/* =========== App shell =========== */

.app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: var(--topbar-h) 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar main";
    min-height: 100vh;
}

.sidebar {
    grid-area: sidebar;
    background: var(--color-primary);
    color: #CBD5E1;
    padding: var(--s-5) 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.sidebar-brand {
    padding: 0 var(--s-5) var(--s-5);
    display: flex;
    align-items: center;
    gap: var(--s-3);
    border-bottom: 1px solid #334155;
    margin-bottom: var(--s-4);
}
.sidebar-brand .logo {
    width: 32px; height: 32px;
    background: var(--color-accent);
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    color: white; font-family: 'Lexend'; font-weight: 700;
}
.sidebar-brand .name {
    font-family: 'Lexend';
    font-weight: 600;
    font-size: var(--fs-md);
    color: white;
    letter-spacing: -0.01em;
}
.sidebar-brand .name small {
    display: block;
    font-size: 10px;
    color: #94A3B8;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.sidebar-section-label {
    padding: var(--s-3) var(--s-5) var(--s-2);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748B;
    font-weight: 600;
}
.sidebar-nav {
    display: flex; flex-direction: column;
    list-style: none; padding: 0; margin: 0;
}
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 9px var(--s-5);
    color: #CBD5E1;
    font-size: var(--fs-sm);
    font-weight: 500;
    border-left: 2px solid transparent;
    text-decoration: none;
    transition: background 150ms, color 150ms, border-color 150ms;
}
.sidebar-nav a:hover {
    background: rgba(255,255,255,0.04);
    color: white;
    text-decoration: none;
}
.sidebar-nav a.active {
    background: rgba(37, 99, 235, 0.12);
    color: white;
    border-left-color: var(--color-accent);
}

.topbar {
    grid-area: topbar;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    padding: 0 var(--s-6);
    gap: var(--s-4);
    position: sticky;
    top: 0;
    z-index: 30;
}
.topbar-title {
    font-family: 'Lexend';
    font-weight: 500;
    font-size: var(--fs-md);
    color: var(--color-foreground);
}
.topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

/* =========== Topbar context selectors (MH-UI-012) ===========
 *
 * The holding (Organization) and company (Company) switchers each wrap their
 * native <select> in a `label.context-select` shell (WI-001 markup). The shell
 * owns the border, the muted caption, and a token-drawn chevron; the native
 * <select class="… input"> stays fully interactive but sheds its own box so the
 * two read as a single branded control. Behavior, classes, and aria labels are
 * untouched — this is pure presentation. */
.context-select {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    height: 36px;
    max-width: 14rem;
    padding: 0 var(--s-3);
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    background: var(--color-surface);
    transition: border-color 150ms, box-shadow 150ms;
}
.context-select__label {
    flex: none;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    white-space: nowrap;
}
/* Per-context accent keeps the two selectors distinct at a glance. */
.context-select--holding .context-select__label { color: var(--color-info-ink); }
.context-select--company .context-select__label { color: var(--color-secondary); }

.context-select__control {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0; /* allow the native select to truncate instead of widening the shell */
}
/* The native select sheds its own box inside the shell — the shell is the box. */
.context-select__control .input {
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 0 var(--s-5) 0 0; /* room for the chevron affordance */
    border: none;
    background: transparent;
    font-size: var(--fs-sm);
    color: var(--color-foreground);
    appearance: none;
    -webkit-appearance: none;
    text-overflow: ellipsis;
}
/* Suppress the nested control's own focus ring; focus is shown on the shell. */
.context-select__control .input:focus {
    border: none;
    box-shadow: none;
}
.context-select__control .input:disabled {
    color: var(--color-muted);
    cursor: not-allowed;
}
/* Token-colored chevron affordance, replacing the native dropdown arrow. */
.context-select__control::after {
    content: "";
    position: absolute;
    right: var(--s-1);
    top: 50%;
    width: 7px;
    height: 7px;
    transform: translateY(-65%) rotate(45deg);
    border-right: 2px solid var(--color-muted);
    border-bottom: 2px solid var(--color-muted);
    pointer-events: none;
}
/* Focus-visible treatment driven by the inner select (focus-within). */
.context-select:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.main {
    grid-area: main;
    padding: var(--s-6) var(--s-8);
    overflow: auto;
}

/* =========== Responsive app shell (MH-UI-008d) ===========
 *
 * Contract:
 *  - >= 1024px (desktop / wide): the rules above are authoritative and UNCHANGED.
 *    The hamburger toggle and backdrop are display:none, the sidebar keeps its fixed
 *    grid column, and the topbar action cluster sits on one row as before.
 *  - < 1024px (tablet / mobile): the grid collapses to a single column, the sidebar
 *    becomes an off-canvas drawer reachable via the .nav-toggle button, a click scrim
 *    appears, and the topbar action cluster is allowed to wrap.
 *
 * All small-screen behaviour lives inside the max-width media query so it can never
 * alter the 1024/1440 layout. Reduced-motion is honoured for the drawer slide.
 */

/* Hamburger toggle: hidden on desktop, shown only inside the drawer breakpoint. */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: calc(var(--s-2) * -1);
    padding: 0;
    border: none;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--color-foreground);
    cursor: pointer;
    transition: background 150ms;
}
.nav-toggle:hover { background: var(--color-surface-2); }
.nav-toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Click-outside scrim for the drawer: inert (display:none) on desktop. */
.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    transition: opacity 200ms ease;
}

/* MH-UI-010 Track B: right context-drawer toggle — hidden on desktop, shown only inside the
   drawer breakpoint (mirrors .nav-toggle on the left). */
.ctx-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--color-foreground);
    cursor: pointer;
    transition: background 150ms;
}
.ctx-toggle:hover { background: var(--color-surface-2); }
.ctx-toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Click-outside scrim for the right context drawer: inert (display:none) on desktop. Sits in
   the topbar stacking context (it is rendered inside the header) so the panel stays above it. */
.ctx-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    transition: opacity 200ms ease;
}

@media (max-width: 1023.98px) {
    /* Single-column shell: topbar then main; the sidebar is lifted out of the grid
       flow and presented as an overlay drawer instead of a fixed column. */
    .app {
        grid-template-columns: 1fr;
        /* MH-UI-010: size the topbar row to its content instead of a fixed --topbar-h. Below
           1024px the topbar grows to two rows (wrapped controls + MH-UI-009 breadcrumb-below);
           a fixed track let that taller bar overflow and overlap .main (page H1 over the
           controls @375, breadcrumb over the first content row @768). `auto` lets the track
           grow so .main always starts below the full topbar. Desktop (>=1024) is unchanged. */
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "topbar"
            "main";
    }

    /* Off-canvas drawer. Slides in from the left when .is-open is applied. */
    .app .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 40;
        width: min(var(--sidebar-w), 84vw);
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 220ms ease;
        box-shadow: var(--sh-lg);
    }
    .app .sidebar.is-open { transform: translateX(0); }

    /* Reveal the toggle and (when open) the scrim. */
    .nav-toggle { display: inline-flex; }
    .app--nav-open .nav-backdrop {
        display: block;
        opacity: 1;
    }

    /* MH-UI-010 Track B: below the shell breakpoint the topbar action cluster leaves the bar
       and becomes a right-side off-canvas drawer (revealed by .ctx-toggle), so the primary row
       no longer wraps and the breadcrumb-below never collides with page content. The cluster
       stacks vertically and fills the drawer; when open, the scrim shows. Desktop (>=1024) keeps
       the inline cluster untouched. */
    .ctx-toggle { display: inline-flex; }

    .topbar-actions {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 40;
        width: min(20rem, 88vw);
        height: 100vh;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--s-3);
        padding: var(--s-5) var(--s-4);
        background: var(--color-surface);
        box-shadow: var(--sh-lg);
        transform: translateX(100%);
        transition: transform 220ms ease;
        overflow-y: auto;
    }
    .topbar-actions.is-open { transform: translateX(0); }
    .app--ctx-open .ctx-backdrop {
        display: block;
        opacity: 1;
    }

    /* Inside the drawer the controls fill the width and stack; the scope pill still truncates a
       long holding name rather than forcing the drawer wider. */
    .topbar-actions .tenant-switcher,
    .topbar-actions .company-switcher {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    /* MH-UI-012: the branded shell drops its desktop max-width cap and fills the drawer,
       letting the inner select truncate rather than widen the panel. */
    .topbar-actions .context-select {
        width: 100%;
        max-width: 100%;
    }
    .topbar-actions .scope-indicator {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }
    .topbar-actions .scope-indicator__label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .main { padding: var(--s-5) var(--s-4); }
}

/* Tighten further on small phones (375px class) without touching wider layouts. */
@media (max-width: 600px) {
    .main { padding: var(--s-4) var(--s-3); }
    .topbar-title { font-size: var(--fs-sm); }
    /* MH-UI-010 Track B: the action cluster now lives in the full-width right drawer, so the
       selects fill it on small phones too (no narrow inline cap needed). */
    .topbar-actions .tenant-switcher,
    .topbar-actions .company-switcher {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app .sidebar { transition: none; }
    .nav-backdrop { transition: none; }
    .topbar-actions { transition: none; }
    .ctx-backdrop { transition: none; }
}

/* =========== Page chrome =========== */

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-6);
    flex-wrap: wrap;
}
.page-header h1 { font-size: 24px; }
.page-header .sub { color: var(--color-muted); font-size: var(--fs-md); margin-top: 4px; }
.page-header .row { display: flex; gap: var(--s-3); }

.section-eyebrow {
    font-family: 'Lexend', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin: var(--s-8) 0 var(--s-4);
}
.section-eyebrow.muted-eyebrow { color: var(--color-muted-2); }

/* =========== Buttons =========== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0 var(--s-4);
    height: 34px;
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-weight: 500;
    font-family: inherit;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 150ms;
    white-space: nowrap;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* MH-UI-008f: app-defined keyboard focus rings for the shared interactive controls. Reuses the
   008a dropzone / 008e rail__item / nav-toggle treatment (accent outline, :focus-visible only, so
   mouse clicks show no ring). Kept in the global sheet — not per-component overrides — so the ring
   is a single source of truth (also asserted by Theming/FocusVisibleContractTests). The component
   base styles for .icon-btn / .tab / .snav live in their scoped *.razor.css; the global rules below
   still match those elements by class. The .snav ring is inset (-2px) so a full-width sidebar item's
   ring is not clipped by the sidebar edge. Does not touch the .tab--active / .snav--active active
   indicators (owned by 008l). */
.btn:focus-visible      { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.icon-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tab:focus-visible      { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.snav:focus-visible     { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.btn-primary   { background: var(--color-accent); color: white; }
.btn-primary:hover:not(:disabled)   { background: var(--color-accent-hover); }
.btn-secondary { background: var(--color-surface); color: var(--color-foreground); border-color: var(--color-border); }
.btn-secondary:hover:not(:disabled) { background: var(--color-surface-2); }
.btn-ghost     { background: transparent; color: var(--color-muted); }
.btn-ghost:hover:not(:disabled)     { background: var(--color-surface-2); color: var(--color-foreground); }
.btn-danger    { background: var(--color-danger); color: white; }
.btn-danger:hover:not(:disabled)    { background: #B91C1C; }
/* MH-UI-008g: leading icon + reused MudProgressCircular busy spinner, sized to the button line.
   The .btn flex layout supplies the gap between marker and label. */
.btn__spinner, .btn__icon { display: inline-flex; align-items: center; line-height: 0; }
.btn__spinner .mud-progress-circular { width: 16px; height: 16px; }

/* =========== Badges & status =========== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.01em;
}
.badge-neutral { background: var(--color-surface-2); color: var(--color-secondary); }
.badge-success { background: var(--color-success-soft); color: var(--color-success-ink); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning-ink); }
.badge-danger  { background: var(--color-danger-soft);  color: var(--color-danger-ink); }
.badge-info    { background: var(--color-info-soft);    color: var(--color-info-ink); }

.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot-success { background: var(--color-success); }
.dot-warning { background: var(--color-warning); }
.dot-danger  { background: var(--color-danger); }
.dot-info    { background: var(--color-info); }
.dot-muted   { background: var(--color-muted-2); }

/* =========== Cards =========== */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}
.stack-card { margin-bottom: var(--s-4); }
.card-header {
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
}
.card-header h3 { font-size: var(--fs-md); font-weight: 600; font-family: 'Lexend', sans-serif; }
.card-header .meta { font-size: var(--fs-sm); color: var(--color-muted); }
.card-body { padding: var(--s-5); }

.row-spread { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.col-tight { display: flex; flex-direction: column; gap: var(--s-4); }

.faded { opacity: 0.92; }
.faded > .card-header { background: var(--color-surface-2); }

/* =========== KPI cards =========== */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: var(--s-4);
}
@media (max-width: 1024px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
.kpi {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    box-shadow: var(--sh-sm);
}
.kpi .label {
    font-size: var(--fs-sm);
    color: var(--color-muted);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}
.kpi .value {
    font-family: 'Lexend', sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-top: var(--s-2);
    color: var(--color-foreground);
}
.kpi .delta {
    margin-top: var(--s-2);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}
.kpi .delta.up   { color: var(--color-success); }
.kpi .delta.down { color: var(--color-danger); }
.kpi .delta.flat { color: var(--color-muted); }
.kpi .footer { margin-top: var(--s-3); font-size: 12px; color: var(--color-muted); }

/* =========== Form inputs (server-rendered Razor Pages) =========== */

label.field {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-foreground);
    margin-bottom: 6px;
}
label.field .req { color: var(--color-danger); margin-left: 2px; }
.input {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    padding: 0 var(--s-3);
    height: 36px;
    font-size: var(--fs-sm);
    font-family: inherit;
    color: var(--color-foreground);
    background: var(--color-surface);
    transition: border 150ms, box-shadow 150ms;
}
.input:focus {
    outline: none;
    border-color: var(--auth-accent);
    box-shadow: 0 0 0 3px var(--auth-accent-ring);
}
.help { font-size: 12px; color: var(--color-muted); margin-top: 4px; }
.alert {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    margin-bottom: var(--s-4);
}
.alert-danger { background: var(--color-danger-soft); color: var(--color-danger-ink); border: 1px solid var(--color-danger); }
.alert-success { background: var(--color-success-soft); color: var(--color-success-ink); border: 1px solid var(--color-success); }

/* =========== One-time code (TOTP) =========== */

.otp { display: flex; gap: 10px; justify-content: center; }
.otp-digit {
    width: 48px; height: 56px;
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    background: var(--color-surface);
    text-align: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 22px;
    font-weight: 600;
    color: var(--color-foreground);
}
.otp-digit:focus {
    outline: none;
    border-color: var(--auth-accent);
    box-shadow: 0 0 0 3px var(--auth-accent-ring);
}
.otp-digit.filled { border-color: var(--auth-accent); background: var(--auth-accent-soft); }

/* =========== Auth layout =========== */

.auth-wrap {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: linear-gradient(180deg, var(--auth-bg-from) 0%, var(--auth-bg-to) 100%);
}
@media (max-width: 900px) {
    .auth-wrap { grid-template-columns: 1fr; }
    /* Higher specificity than the base `.auth-side` rule below so the rail
       actually hides on mobile regardless of source order. */
    .auth-wrap .auth-side { display: none; }
}
.auth-side {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1100px 600px at -10% 10%, var(--auth-panel-glow-1), transparent 60%),
        radial-gradient(700px 500px at 110% 90%, var(--auth-panel-glow-2), transparent 60%),
        linear-gradient(160deg, var(--auth-panel-from) 0%, var(--auth-panel-to) 70%);
    color: white;
    padding: 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.auth-side::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 24px);
    pointer-events: none;
}
.auth-side > * { position: relative; z-index: 1; }
/* Muscat imagery slideshow: stacked photos cover the rail; auth.js crossfades
   through them. The gradient on .auth-side stays as the no-image fallback. */
.auth-side__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.auth-side__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Readability overlay so the white rail copy stays legible over any photo. */
    background:
        linear-gradient(155deg, rgba(9, 16, 32, 0.82) 0%, rgba(9, 16, 32, 0.52) 48%, rgba(9, 16, 32, 0.74) 100%);
}
.auth-side__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
    will-change: opacity;
}
/* No-JS / single-image fallback: show the first (random) slide. */
.auth-side__slide:first-child { opacity: 1; }
/* When auth.js takes over, only the active slide is visible. */
.auth-side__bg.is-enhanced .auth-side__slide { opacity: 0; }
.auth-side__bg.is-enhanced .auth-side__slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .auth-side__slide { transition: none; }
}
.auth-side .brand {
    display: flex; align-items: center; gap: var(--s-3);
    font-family: 'Lexend'; font-weight: 600; font-size: var(--fs-xl);
}
.auth-side .brand .logo {
    width: 36px; height: 36px;
    background: var(--auth-accent);
    border-radius: var(--r-lg);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: white;
    box-shadow: 0 6px 16px var(--auth-accent-ring);
}
.auth-side h2 {
    color: white;
    font-size: 36px;
    line-height: 1.2;
    max-width: 480px;
    letter-spacing: -0.02em;
    margin-top: 48px;
}
.auth-side .tagline { color: var(--auth-panel-muted); font-size: var(--fs-md); max-width: 460px; margin-top: var(--s-4); line-height: 1.65; }

.auth-pane {
    display: flex; align-items: center; justify-content: center;
    padding: var(--s-12) var(--s-8);
}
.auth-card {
    width: min(440px, 100%);
    padding: var(--s-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
}
.auth-card__title { font-family: 'Lexend', sans-serif; font-size: var(--fs-2xl); font-weight: 600; margin-bottom: var(--s-2); }
.auth-card__sub { color: var(--color-muted); font-size: var(--fs-sm); margin-bottom: var(--s-6); }
.auth-card__body { display: flex; flex-direction: column; gap: var(--s-4); }

/* =========== Empty / Error states =========== */

.empty-state { text-align: center; padding: var(--s-10) var(--s-4); color: var(--color-muted); }
.empty-state__icon { width: 48px; height: 48px; margin: 0 auto var(--s-4); color: var(--color-muted-2); }
.empty-state__title { font-family: 'Lexend', sans-serif; font-size: var(--fs-lg); font-weight: 600; color: var(--color-foreground); }
.empty-state__body { margin-top: var(--s-2); font-size: var(--fs-sm); }
.empty-state__action { margin-top: var(--s-4); display: inline-flex; }

.error-state { text-align: center; padding: var(--s-10) var(--s-4); }
.error-state__icon { width: 48px; height: 48px; margin: 0 auto var(--s-4); color: var(--color-danger); }
.error-state__title { font-family: 'Lexend', sans-serif; font-size: var(--fs-lg); font-weight: 600; color: var(--color-foreground); }
.error-state__body { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--color-muted); }
.error-state__action { margin-top: var(--s-4); }

/* =========== Skeleton =========== */

.skeleton { display: flex; flex-direction: column; gap: var(--s-2); }
.skeleton__line {
    height: 0.9em;
    background: linear-gradient(90deg, var(--color-surface-2) 0%, var(--color-border) 50%, var(--color-surface-2) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite linear;
    border-radius: var(--r-sm);
}
.skeleton__line:last-child { width: 60%; }
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton__line { animation: none; }
}

/* =========== Tenant badge =========== */

.tenant-badge { display: inline-flex; align-items: center; gap: var(--s-2); }
.tenant-badge__name { font-weight: 600; color: var(--color-foreground); font-size: var(--fs-sm); }
.badge-outline { background: transparent; border: 1px solid var(--color-border); color: var(--color-muted); }

/* =========== Dropzone =========== */

.dropzone { display: block; padding: var(--s-8) var(--s-4); border: 2px dashed var(--color-border-strong); border-radius: var(--r-lg); text-align: center; cursor: pointer; background: var(--color-surface-2); transition: border-color 150ms, background 150ms; width: 100%; }
.dropzone:hover, .dropzone:focus-within { border-color: var(--color-accent); background: var(--color-accent-soft); outline: none; }
/* Keyboard focus must stay visible: the label is the operable control (role=button),
   so a focus-visible ring is required even though focus-within drops the outline. */
.dropzone:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Drag-over: purely visual cue while a file is dragged over the zone. */
.dropzone--dragover { border-color: var(--color-accent); border-style: solid; background: var(--color-accent-soft); }
/* Invalid: a page-supplied validation message is showing. */
.dropzone--invalid { border-color: var(--color-danger); background: var(--color-danger-soft); }
.dropzone__validation { color: var(--color-danger); font-size: var(--fs-sm); font-weight: 600; margin-top: var(--s-2); }
.dropzone__prompt { color: var(--color-muted); font-size: var(--fs-sm); }
.dropzone input[type='file'] { display: none; }
/* Grouped accepted-format presentation. Scoped to the --grouped variant so flat
   AcceptedFormats call sites (report upload, weekly attachments) render unchanged. */
.dropzone__formats--grouped { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-2); }
.dropzone__formats--grouped .dropzone__format-group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.dropzone__formats--grouped .dropzone__format-label { font-size: var(--fs-xs); font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.dropzone__formats--grouped .dropzone__pill { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 2px 8px; font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--color-muted); }

/* Flat accepted-format presentation. FileDropzone styles these via its own scoped
   CSS, but UploadDropzone reuses the same class names in its flat AcceptedFormats
   branch and has no matching scoped rules, so its pills rendered unstyled (run
   together as one string). These global rules cover the flat call sites
   (report upload, budget/interim/weekly entry, weekly attachments); FileDropzone's
   higher-specificity scoped rules still win for its own markup. */
.dropzone__formats { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--color-muted); }
.dropzone__pill { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 2px 8px; font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--color-muted); }

/* =========== Checklist row =========== */

.checklist-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: var(--s-4); align-items: center; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--color-border); }
.checklist-row:last-child { border-bottom: none; }
.checklist-row__title { font-weight: 600; color: var(--color-foreground); }
.checklist-row__due { font-size: var(--fs-sm); color: var(--color-muted); }

/* =========== Currency =========== */

.currency { display: inline-flex; align-items: baseline; gap: var(--s-2); }
.currency__amount { font-weight: 600; color: var(--color-foreground); }
.currency__iso { font-size: 11px; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.mono-num { font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* =========== Tabs =========== */

.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--s-5); }
.tabs .tab { padding: 10px var(--s-4); font-size: var(--fs-sm); font-weight: 500; color: var(--color-muted); border-bottom: 2px solid transparent; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.tabs .tab:hover { color: var(--color-foreground); text-decoration: none; }
.tabs .tab.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.tabs .tab .count { background: var(--color-surface-2); font-size: 11px; padding: 1px 6px; border-radius: 10px; color: var(--color-muted); }
.tabs .tab.active .count { background: var(--color-accent-soft); color: var(--color-accent); }

/* =========== Data table =========== */

.table-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.data thead th { background: var(--color-surface-2); text-align: left; font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--color-border); white-space: nowrap; }
table.data tbody td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--color-border); color: var(--color-foreground); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--color-surface-2); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }
table.data .primary-col { font-weight: 600; }

/* MH-CONS-011 / MH-CONS-012: analysis result tables scroll inside their card —
   horizontal for many periods, capped height for many companies — keeping the
   header row pinned. The table itself uses the standard table.data look, so the
   only addition is the scroll container + a sticky header. */
.analysis-table-scroll { overflow: auto; max-height: 32rem; }
.analysis-table-scroll table.data thead th { position: sticky; top: 0; z-index: 1; }
/* MH-UI-008j: sortable column header — a button that inherits the header text styling. */
table.data th .th-sort { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
table.data th .th-sort:hover { color: var(--color-foreground); }
table.data th .th-sort:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
table.data th .th-sort__ind { font-size: 10px; color: var(--color-accent); }

/* =========== Progress =========== */

.progress { width: 100%; height: 6px; background: var(--color-surface-2); border-radius: 999px; overflow: hidden; }
.progress .bar { height: 100%; background: var(--color-accent); border-radius: 999px; }
.progress .bar.success { background: var(--color-success); }
.progress .bar.warn { background: var(--color-warning); }
.progress .bar.danger { background: var(--color-danger); }

/* =========== Select =========== */

.select { width: 100%; border: 1px solid var(--color-border); border-radius: var(--r-md); padding: 0 var(--s-3); height: 36px; font-size: var(--fs-sm); font-family: inherit; color: var(--color-foreground); background: var(--color-surface); }
.select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }

/* =========== Common helpers =========== */

.row { display: flex; align-items: center; gap: var(--s-3); }
.col { display: flex; flex-direction: column; gap: var(--s-3); }
.spacer { flex: 1; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* =========== Helpers =========== */

.muted { color: var(--color-muted); }
.small { font-size: 12px; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* =========== Callouts (info/warning/danger/accent banners) =========== */

.callout {
    display: flex;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-size: var(--fs-sm);
    align-items: flex-start;
}
.callout__icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; }
.callout__title { font-weight: 600; }
.callout__body { color: inherit; line-height: 1.5; }
.callout-info    { background: var(--color-info-soft);    color: var(--color-info-ink);    border-color: rgba(37,99,235,0.2); }
.callout-warning { background: var(--color-warning-soft); color: var(--color-warning-ink); border-color: rgba(217,119,6,0.2); }
.callout-danger  { background: var(--color-danger-soft);  color: var(--color-danger-ink);  border-color: rgba(220,38,38,0.2); }
.callout-success { background: var(--color-success-soft); color: var(--color-success-ink); border-color: rgba(22,163,74,0.2); }
.callout-accent  { background: var(--color-accent-soft);  color: var(--color-info-ink);    border-color: rgba(37,99,235,0.2); }

/* =========== Icon bubble (timeline, feed, notification icons) =========== */

.icon-bubble {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
}
.icon-bubble.success { background: var(--color-success-soft); color: var(--color-success-ink); }
.icon-bubble.warn    { background: var(--color-warning-soft); color: var(--color-warning-ink); }
.icon-bubble.danger  { background: var(--color-danger-soft);  color: var(--color-danger-ink); }
.icon-bubble.info    { background: var(--color-info-soft);    color: var(--color-info-ink); }
.icon-bubble.muted   { background: var(--color-surface-2);    color: var(--color-muted); }
.icon-bubble.sm { width: 24px; height: 24px; font-size: 11px; }
.icon-bubble.lg { width: 40px; height: 40px; font-size: 16px; }

/* =========== Timeline / activity feed =========== */

.timeline { display: flex; flex-direction: column; gap: var(--s-3); }
.timeline__item {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: var(--s-3);
    align-items: flex-start;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.timeline__item:last-child { border-bottom: none; }
.timeline__content { font-size: var(--fs-sm); line-height: 1.55; }
.timeline__content strong { font-weight: 600; }
.timeline__meta { font-size: 12px; color: var(--color-muted); margin-top: 2px; }
.timeline__time { font-size: 12px; color: var(--color-muted-2); white-space: nowrap; }

/* =========== Rail (vertical sticky nav) =========== */

.rail {
    position: sticky;
    top: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rail__group { padding: var(--s-3) var(--s-2) var(--s-1); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted-2); }
.rail__item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 8px var(--s-3);
    border-radius: var(--r-md);
    color: var(--color-foreground);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    border-left: 2px solid transparent;
    cursor: pointer;
    transition: background 150ms, border-color 150ms;
}
/* MH-UI-008e: filter rails use real <button>s so they are keyboard- and AT-operable.
   Strip the UA button chrome so a button.rail__item is visually identical to the
   anchor variant, and keep keyboard focus visible (same ring as the 008a dropzone). */
button.rail__item { width: 100%; background: none; border: none; border-left: 2px solid transparent; font-family: inherit; text-align: left; }
.rail__item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.rail__item:hover { background: var(--color-surface-2); text-decoration: none; }
.rail__item.active { background: var(--color-accent-soft); color: var(--color-accent); border-left-color: var(--color-accent); }
.rail__item .count { margin-left: auto; font-size: 11px; font-weight: 600; background: var(--color-surface-2); padding: 1px 6px; border-radius: 10px; color: var(--color-muted); }
.rail__item.active .count { background: var(--color-accent); color: white; }

/* =========== Segmented control (currency/unit selectors) =========== */

.segmented {
    display: inline-flex;
    background: var(--color-surface-2);
    border-radius: var(--r-md);
    padding: 2px;
    gap: 2px;
}
.segmented__chip {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-muted);
    cursor: pointer;
    background: transparent;
    border: none;
    transition: all 150ms;
}
.segmented__chip:hover { color: var(--color-foreground); }
.segmented__chip.active { background: var(--color-surface); color: var(--color-foreground); box-shadow: var(--sh-sm); }
.segmented__chip:disabled { color: var(--color-muted-2); cursor: not-allowed; }

/* =========== Stat grid (small inline stats) =========== */

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.stat { padding: var(--s-2) 0; }
.stat__label { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.stat__value { font-family: 'Lexend', sans-serif; font-size: 18px; font-weight: 600; margin-top: 2px; color: var(--color-foreground); }
.stat__value.success { color: var(--color-success); }
.stat__value.warning { color: var(--color-warning); }
.stat__value.danger  { color: var(--color-danger); }

/* =========== Stepper (horizontal & vertical) =========== */

.stepper { display: flex; align-items: center; gap: var(--s-2); }
.stepper__step { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--color-muted); }
.stepper__num { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; background: var(--color-surface-2); color: var(--color-muted); }
.stepper__step.active .stepper__num { background: var(--color-accent); color: white; }
.stepper__step.done .stepper__num { background: var(--color-success); color: white; }
.stepper__step.active { color: var(--color-foreground); font-weight: 600; }
.stepper__step.done { color: var(--color-foreground); }
.stepper__sep { width: 32px; height: 1px; background: var(--color-border); flex-shrink: 0; }

.step-rail-v { display: flex; flex-direction: column; gap: var(--s-2); position: sticky; top: var(--s-4); }
.step-rail-v .stepper__step { padding: var(--s-2) var(--s-3); border-radius: var(--r-md); }
.step-rail-v .stepper__step.active { background: var(--color-accent-soft); }

.step-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* =========== Ring chart =========== */

.ring-chart { position: relative; display: inline-block; }
.ring-chart svg { display: block; transform: rotate(-90deg); }
.ring-chart__track { fill: none; stroke: var(--color-surface-2); }
.ring-chart__fill  { fill: none; stroke: var(--color-accent); stroke-linecap: round; transition: stroke-dashoffset 400ms; }
.ring-chart__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Lexend', sans-serif;
}
.ring-chart__center-value { font-size: 18px; font-weight: 600; }
.ring-chart__center-label { font-size: 10px; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.ring-chart.lg .ring-chart__center-value { font-size: 28px; }

/* =========== Domain pills (v-pill, scope-pill, status-pill, computed-tag) =========== */

.v-pill { display: inline-flex; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--color-surface-2); color: var(--color-muted); }
.scope-pill { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; }
.scope-pill.tenant  { background: rgba(15,23,42,0.08); color: var(--color-foreground); border: 1px solid var(--color-border); }
.scope-pill.company { background: var(--color-accent-soft); color: var(--color-info-ink); }
.scope-pill.both    { background: var(--color-surface-2); color: var(--color-muted); border: 1px solid var(--color-border); }
.status-pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.status-pill.provided { background: var(--color-success-soft); color: var(--color-success-ink); }
.status-pill.na       { background: var(--color-surface-2);    color: var(--color-muted); }
.status-pill.notavail { background: var(--color-warning-soft); color: var(--color-warning-ink); }
.computed-tag { display: inline-flex; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--color-accent-soft); color: var(--color-info-ink); text-transform: uppercase; letter-spacing: 0.04em; }

/* =========== Filter bar =========== */

.filter-bar {
    display: flex;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    align-items: flex-end;
    flex-wrap: wrap;
}
.filter-bar__group { display: flex; flex-direction: column; gap: 4px; }
.filter-bar__label { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.filter-bar__sep { width: 1px; align-self: stretch; background: var(--color-border); }

/* =========== Page layouts =========== */

.split-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s-4); }
.split-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s-4); }
.workspace-3col { display: grid; grid-template-columns: 220px 1fr 320px; gap: var(--s-4); }
@media (max-width: 1200px) {
    .workspace-3col { grid-template-columns: 200px 1fr; }
    .workspace-3col > :nth-child(3) { display: none; }
}
@media (max-width: 900px) {
    .split-2-1, .split-1-2 { grid-template-columns: 1fr; }
    .workspace-3col { grid-template-columns: 1fr; }
}

/* =========== Switch toggle =========== */

.switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-border-strong); border-radius: 999px; transition: 200ms; }
.switch .slider::before { content: ""; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: white; border-radius: 50%; transition: 200ms; box-shadow: var(--sh-sm); }
.switch input:checked + .slider { background: var(--color-accent); }
.switch input:checked + .slider::before { transform: translateX(16px); }
.switch input:disabled + .slider { opacity: 0.5; cursor: not-allowed; }

/* =========== Meta grid =========== */

.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-4); padding: var(--s-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-md); }
.meta-grid__label { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.meta-grid__value { font-size: var(--fs-sm); font-weight: 600; color: var(--color-foreground); margin-top: 2px; }

/* =========== Person row (avatar + name + meta + action) =========== */

.person-row { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--color-border); }
.person-row:last-child { border-bottom: none; }
.person-row__avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #2563EB, #1E40AF); color: white; display: inline-flex; align-items: center; justify-content: center; font-family: 'Lexend', sans-serif; font-weight: 600; font-size: 13px; }
.person-row__name { font-size: var(--fs-sm); font-weight: 600; }
.person-row__meta { font-size: 12px; color: var(--color-muted); margin-top: 1px; }

/* =========== Values table (parsed cells, FX, volumes) =========== */

table.values { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.values thead th { background: var(--color-surface-2); text-align: left; font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--color-border); }
table.values tbody td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
table.values tbody tr:last-child td { border-bottom: none; }
table.values .num { text-align: right; font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
table.values .cell-ref { font-family: 'JetBrains Mono', monospace; font-size: 11px; background: var(--color-surface-2); padding: 1px 6px; border-radius: 3px; color: var(--color-muted); }
table.values .subtotal { background: var(--color-surface-2); font-weight: 600; }
table.values .subtotal td { border-top: 1px solid var(--color-border-strong); }
table.values .computed td { background: rgba(37,99,235,0.04); }
table.values .ic-flag td { background: var(--color-warning-soft); }

/* =========== Tabs (sticky horizontal nav) =========== */

.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--s-5); }
.tabs__tab { padding: 10px var(--s-4); font-size: var(--fs-sm); font-weight: 500; color: var(--color-muted); border-bottom: 2px solid transparent; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: transparent; border-left: none; border-right: none; border-top: none; }
.tabs__tab:hover { color: var(--color-foreground); text-decoration: none; }
.tabs__tab.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.tabs__tab .count { background: var(--color-surface-2); font-size: 11px; padding: 1px 6px; border-radius: 10px; color: var(--color-muted); }
.tabs__tab.active .count { background: var(--color-accent-soft); color: var(--color-accent); }

/* =========== Data table (with hover, num cells, mono) =========== */

.table-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.data thead th { background: var(--color-surface-2); text-align: left; font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--color-border); white-space: nowrap; }
table.data tbody td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--color-border); color: var(--color-foreground); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--color-surface-2); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
table.data .muted { color: var(--color-muted); }
table.data tfoot td { background: var(--color-primary); color: white; padding: var(--s-3) var(--s-4); font-weight: 600; }
table.data tfoot td.num { color: white; }

/* =========== Progress bar =========== */

.progress { width: 100%; height: 6px; background: var(--color-surface-2); border-radius: 999px; overflow: hidden; }
.progress__bar { height: 100%; background: var(--color-accent); border-radius: 999px; transition: width 300ms; }
.progress__bar.warn    { background: var(--color-warning); }
.progress__bar.danger  { background: var(--color-danger); }
.progress__bar.success { background: var(--color-success); }

/* =========== Chart placeholder (defer chart library decision) =========== */

.chart-placeholder {
    background: linear-gradient(135deg, var(--color-surface-2) 0%, var(--color-accent-soft) 100%);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--r-md);
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    font-size: var(--fs-sm);
    font-style: italic;
    padding: var(--s-4);
}

/* =========== Avatar =========== */

.avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563EB, #1E40AF);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Lexend', sans-serif;
    font-weight: 600;
    font-size: 12px;
}
.avatar.lg { width: 48px; height: 48px; font-size: 16px; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }

/* Admin — cadence row layout */
.cadence-row {
    display: grid;
    grid-template-columns: 60px 1fr 1fr auto auto;
    gap: var(--s-3);
    align-items: center;
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--color-border);
}
.cadence-row--tinted { background: var(--color-danger-soft); }
.v-pill--danger      { background: var(--color-danger); color: var(--color-on-primary); }

/* Environment + version chip — rendered in both Blazor layouts and the
   Razor Pages auth layout (server-side). Must live in the shared
   stylesheet because Razor Pages can't consume Blazor scoped css. */
.env-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 999px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.04));
    color: var(--color-text-muted, #666);
    line-height: 1.6;
    user-select: none;
}
.env-badge--dev {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.4);
    color: #b45309;
}
.env-badge--prod {
    background: rgba(20, 184, 166, 0.10);
    border-color: rgba(20, 184, 166, 0.35);
    color: #0f766e;
}
.env-badge__sep { opacity: 0.6; }
.env-badge__ver {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

/* =========== Auth pages — login / MFA / enrollment ===========
   Blue/navy palette via --auth-* tokens (see tokens.css). Used only by the
   /account/* Razor Pages rendered through _AuthLayout.cshtml. */

/* hero panel enrichments */
.auth-side .stats { display: flex; flex-wrap: wrap; gap: 24px 40px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; }
.auth-side .stats .label { color: var(--auth-panel-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.auth-side .stats .val { font-family: 'Lexend'; font-size: 24px; font-weight: 600; margin-top: 4px; }
.auth-side .stats .auth-version {
    max-width: 220px;
    font-size: 18px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* form scaffolding */
.form-row { margin-bottom: var(--s-4); }
.form-field { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--color-foreground); margin-bottom: 6px; }
.form-field .req { color: var(--color-danger); margin-left: 2px; }
/* MH-UI-008h: FormField helper/error line + FormActions save/cancel bar. */
.form-field__help { margin-top: var(--s-2); }
.form-field__error { color: var(--color-danger); font-size: var(--fs-sm); font-weight: 600; margin-top: var(--s-2); }
.ds-form-actions { display: flex; gap: var(--s-3); }

/* inputs with leading icon + password toggle */
.field-wrap { position: relative; }
.field-wrap .field-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-muted); pointer-events: none; }
.input.with-icon { padding-left: 38px; height: 42px; font-size: var(--fs-md); }
.password-input { position: relative; }
.password-input .toggle {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    color: var(--color-muted); cursor: pointer; background: none; border: none; padding: 6px; border-radius: 4px;
}
.password-input .toggle:hover { color: var(--color-foreground); background: var(--color-surface-2); }

/* remember row + inline checkbox */
.remember-row { display: flex; align-items: center; justify-content: space-between; margin: -4px 0 var(--s-5); }
.remember-row label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--color-foreground); }
.remember-row label.is-disabled { color: var(--color-muted-2); cursor: not-allowed; }
.remember-row .note { font-size: var(--fs-sm); color: var(--color-muted); }
.checkbox {
    width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--color-border-strong);
    display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface); color: transparent;
}
.checkbox.checked { background: var(--auth-accent); border-color: var(--auth-accent); color: white; }
.checkbox.is-disabled { background: var(--color-surface-2); border-color: var(--color-border); }

/* divider + SSO button */
.or-row { display: flex; align-items: center; gap: var(--s-3); color: var(--color-muted); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; margin: var(--s-5) 0; }
.or-row::before, .or-row::after { content: ''; height: 1px; background: var(--color-border); flex: 1; }
.btn-sso {
    width: 100%; height: 42px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-md);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-size: var(--fs-sm); font-weight: 500; color: var(--color-foreground); font-family: inherit; cursor: pointer; transition: all 150ms;
}
.btn-sso:hover:not(:disabled) { background: var(--color-surface-2); border-color: var(--color-border-strong); }
.btn-sso:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-sso .ms-logo { width: 16px; height: 16px; display: inline-grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.btn-sso .ms-logo span:nth-child(1) { background: #F25022; }
.btn-sso .ms-logo span:nth-child(2) { background: #7FBA00; }
.btn-sso .ms-logo span:nth-child(3) { background: #00A4EF; }
.btn-sso .ms-logo span:nth-child(4) { background: #FFB900; }
.btn-sso .soon { margin-left: 6px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); }

/* info strip + help row + footer */
.info-strip {
    margin-top: var(--s-5); padding: 12px 14px; background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--r-md); display: flex; gap: 10px; font-size: 12px; color: var(--color-muted); line-height: 1.55;
}
.info-strip .ic { color: var(--auth-accent); flex-shrink: 0; margin-top: 1px; }
.info-strip strong { color: var(--color-foreground); }
.help-row { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: 12px; font-size: 13px; }
.help-row a { color: var(--auth-accent); }
.auth-footer { margin-top: var(--s-6); font-size: 12px; color: var(--color-muted); text-align: center; }
.auth-footer a { color: var(--color-muted); }
.auth-footer a:hover { color: var(--auth-accent); }

/* error banner (richer than .alert; keeps .alert-danger usable elsewhere) */
.err-banner {
    background: var(--auth-danger-soft); border: 1px solid var(--auth-danger-border); color: var(--auth-danger-ink);
    border-radius: var(--r-md); padding: 10px 12px; font-size: var(--fs-sm);
    display: flex; gap: 8px; align-items: flex-start; margin-bottom: var(--s-4); line-height: 1.5;
}
/* The author display:flex above overrides the UA [hidden]{display:none} rule, so an
   .err-banner authored with the hidden attribute (e.g. #passkey-error) would otherwise
   render as an empty red banner until JS reveals it. Keep hidden meaning hidden. */
.err-banner[hidden] { display: none; }
.err-banner svg { color: var(--color-danger); flex-shrink: 0; margin-top: 2px; }

/* enrollment: QR frame + manual secret */
.qr-row { display: grid; grid-template-columns: 200px 1fr; gap: var(--s-6); align-items: start; }
@media (max-width: 600px) { .qr-row { grid-template-columns: 1fr; } }
.qr-frame { width: 200px; height: 200px; background: white; border: 1px solid var(--color-border); border-radius: var(--r-md); padding: 10px; box-shadow: var(--sh-sm); }
.qr-frame img { width: 100%; height: 100%; display: block; }
.secret-row {
    display: flex; align-items: center; gap: var(--s-2); padding: 10px var(--s-3);
    background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--r-md);
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; letter-spacing: 0.05em; margin-top: var(--s-3);
}
.secret-row .secret-val { word-break: break-all; }
.secret-row .copy { margin-left: auto; color: var(--color-muted); cursor: pointer; background: none; border: none; padding: 4px; }
.secret-row .copy:hover { color: var(--auth-accent); }