/*
 * ============================================================================
 * NEOARV DESIGN TOKEN SYSTEM - Theme_Default.css
 * ============================================================================
 *
 * Product-wide Neo visual foundation. Immersive scenes can layer local styling
 * over it, but there is no second product theme and no Retro fallback.
 *
 * PROTECTED ASSETS (Do Not Modify):
 * - Victory/Defeat sequences
 * - Zoom Image Carousel
 * - Connectivity Logic
 *
 * ============================================================================
 */

@import '../fonts/fonts.css';

/* Neo tokens. Mud components use the matching palette in Themes.cs. */
:root,
[data-theme="neo"] {
    /* ========================================================================
     * COLOR TOKENS - Neo dark field
     * ======================================================================== */
    /* Surface Hierarchy (Elevation Law: dark → light as elevation increases) */
    --neoarv-color-surface-base: #08090a;
    --neoarv-color-app-surface: #101113;
    --neoarv-color-surface-raised: #17181b;
    --neoarv-color-surface-elevated: #1d1f22;
    --neoarv-color-surface-peak: #25282c;
    /* Form fields sit *below* cards — darker trough (black alpha over card) */
    --neoarv-color-surface-input: #0c0d0f;
    --neoarv-color-surface-input-hover: #0f1114;
    /* Surface with Alpha (for glass morphism) */
    --neoarv-color-surface-glass: rgb(23 24 27 / 92%);
    --neoarv-color-surface-glass-elevated: rgb(29 31 34 / 96%);
    /* The standard panel veil: a light lift over whatever the page paints behind
       it. Every panel-like surface wears this one value so they cannot drift. */
    --neoarv-color-surface-veil: rgb(255 255 255 / 4%);
    /* The content veil: a sixteenth of white over whatever the page paints
       behind it. Lighter than the panel veil on purpose — this one covers a
       whole scrolling area, not a card. */
    --neoarv-color-content-veil: rgb(255 255 255 / 2.5%);
    /* The warm chrome tone: the page gradient's top glow AND the bottom
       tab bar's surface share this single value, so the header band and
       the nav band read as the same material (Alan, 2026-08-04 — the
       transparent bar over the gradient's near-black floor read as a
       plain black strip while the header sat on warm brown). */
    --neoarv-chrome-warm: #0c0d0f;
    /* Film-grain texture shared by the vignette layer and the nav bar. */
    --neoarv-grain-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
    /* Restored 2026-07-25 from pre-16989e67 (desaturated gray experiment) */
    --neoarv-page-gradient: linear-gradient(180deg, rgb(4 5 7 / 18%), rgb(4 5 7 / 82%)), url('/images/backgrounds/room.webp') center / auto 100dvh no-repeat, #000;
    --neoarv-page-vignette: radial-gradient(ellipse at 50% 42%, transparent 12%, rgb(2 3 5 / 0.38) 72%, rgb(2 3 5 / 0.78) 100%);
    --neoarv-page-background: var(--neoarv-page-vignette), var(--neoarv-page-gradient);
    /* Shared immersive backdrop. Scenes may cover or extend this field without
       switching the product to a second theme. */
    --neoarv-room-backdrop: var(--neoarv-page-background);
    --neoarv-card-gradient: linear-gradient(180deg, rgb(31 33 37 / 96%), rgb(19 20 23 / 98%));
    --neoarv-card-gradient-subtle: linear-gradient(180deg, rgb(27 29 32 / 92%), rgb(17 18 21 / 96%));
    --neoarv-data-surface: #202329;
    --neoarv-data-surface-muted: #191b20;
    --neoarv-sketch-transparent-white-filter: invert(1) brightness(1.05) contrast(1.08);
    /* Accent Palette (Amber/Gold - matches MudBlazor Primary #F59E0B) */
    --neoarv-color-accent-primary: #f29a32;
    --neoarv-color-accent-primary-bright: #ff9c24;
    --neoarv-color-accent-primary-dim: #8f561c;
    --neoarv-color-accent-primary-soft: rgb(242 154 50 / 15%);
    --neoarv-color-guided: #aa8bea;
    --neoarv-color-signal: #67c7dc;
    --neoarv-color-signal-soft: rgb(103 199 220 / 13%);
    /* Accent Glows (for shadows and focus states) */
    --neoarv-color-glow-primary: rgb(242 154 50 / 52%);
    --neoarv-color-glow-focus: rgb(242 154 50 / 42%);
    /* Text Hierarchy */
    --neoarv-color-text-primary: #eeeeeb;
    --neoarv-color-text-secondary: #b9bab6;
    --neoarv-color-text-muted: #7f817e;
    --neoarv-color-text-inverse: #08090a;
    /* Semantic States */
    --neoarv-color-success: #6fd4a4;
    --neoarv-color-success-glow: rgb(111 212 164 / 38%);
    --neoarv-color-error: #ff7d5f;
    --neoarv-color-error-glow: rgb(255 125 95 / 30%);
    --neoarv-color-warning: #f29a32;
    --neoarv-color-warning-text: #d2a57a;
    --neoarv-color-warning-glow: rgb(242 154 50 / 30%);
    /* Border Colors */
    --neoarv-color-border-subtle: rgb(255 255 255 / 8.5%);
    --neoarv-color-border-default: rgb(255 255 255 / 20%);
    --neoarv-color-border-focus: #f29a32;
    --neoarv-color-border-error: rgb(255 125 95 / 75%);
    /* ========================================================================
     * TYPOGRAPHY TOKENS - Clamped Scaling
     * px allowed ONLY as floor/ceiling guards in clamp()
     * ======================================================================== */
    --neoarv-font-family-primary: var(--font-alansans, "Alan Sans"), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --neoarv-font-family-display: var(--font-notosansdisplay, "Noto Sans Display"), var(--neoarv-font-family-primary);
    --neoarv-font-family-mono: var(--font-m1, "JetBrains Mono"), 'Consolas', 'Courier New', monospace;
    --neoarv-font-family-workbench: var(--font-workbench, "Workbench"), var(--neoarv-font-family-mono);
    --neoarv-font-family-h1: var(--neoarv-font-family-display);
    --neoarv-font-family-h2: var(--neoarv-font-family-display);
    --neoarv-font-family-h3: var(--neoarv-font-family-display);
    --neoarv-font-family-h4: var(--neoarv-font-family-display);
    --neoarv-font-family-h5: var(--neoarv-font-family-display);
    --neoarv-font-family-h6: var(--neoarv-font-family-primary);
    --neoarv-font-family-body1: var(--neoarv-font-family-primary);
    --neoarv-font-family-body2: var(--neoarv-font-family-primary);
    --neoarv-font-family-caption: var(--neoarv-font-family-mono);
    --neoarv-font-family-overline: var(--neoarv-font-family-mono);
    --neoarv-font-family-subtitle1: var(--neoarv-font-family-primary);
    --neoarv-font-family-subtitle2: var(--neoarv-font-family-primary);
    /* Font Sizes - scale with the usable viewport, not height alone. */
    --neoarv-font-size-xs: clamp(0.68rem, 0.62rem + 0.22vw, 0.82rem);
    --neoarv-font-size-sm: clamp(0.8rem, 0.74rem + 0.24vw, 0.95rem);
    --neoarv-font-size-body: clamp(0.96rem, 0.87rem + 0.34vw, 1.18rem);
    --neoarv-font-size-lg: clamp(1.08rem, 0.96rem + 0.5vw, 1.4rem);
    --neoarv-font-size-xl: clamp(1.35rem, 1.14rem + 0.84vw, 1.9rem);
    --neoarv-font-size-2xl: clamp(1.75rem, 1.38rem + 1.45vw, 2.7rem);
    --neoarv-font-size-hero: clamp(2.35rem, 1.55rem + 3.15vw, 4.8rem);
    /* Font Weights */
    --neoarv-font-weight-normal: 400;
    --neoarv-font-weight-medium: 500;
    --neoarv-font-weight-semibold: 600;
    --neoarv-font-weight-bold: 700;
    --neoarv-font-weight-black: 900;
    /* Letter Spacing */
    --neoarv-letter-spacing-tight: -0.02em;
    --neoarv-letter-spacing-normal: 0.01em;
    --neoarv-letter-spacing-wide: 0.05em;
    --neoarv-letter-spacing-caps: 0.06em;
    /* Line Heights */
    --neoarv-line-height-tight: 1.08;
    --neoarv-line-height-normal: 1.5;
    --neoarv-line-height-relaxed: 1.65;
    /* ========================================================================
     * SPACING TOKENS - Clamped Scaling
     * ======================================================================== */

    --neoarv-size-gap-xs: clamp(3px, 0.33dvw, 8px);
    --neoarv-size-gap-sm: clamp(8px, 1.2dvw, 12px);
    --neoarv-size-gap-md: clamp(12px, 2dvw, 20px);
    --neoarv-size-gap-lg: clamp(16px, 3dvw, 28px);
    --neoarv-size-gap-xl: clamp(32px, 5dvw, 64px);
    --neoarv-size-gap-2xl: clamp(32px, 5dvw, 56px);
    /* Padding Tokens */
    --neoarv-size-padding-xs: clamp(4px, 0.8dvw, 8px);
    --neoarv-size-padding-sm: clamp(8px, 1.2dvw, 12px);
    --neoarv-size-padding-md: clamp(12px, 2dvw, 20px);
    --neoarv-size-padding-lg: clamp(16px, 2.5dvw, 24px);
    --neoarv-size-padding-card: clamp(16px, 2.5dvw, 32px);
    /* ========================================================================
     * BORDER RADIUS TOKENS
     * ======================================================================== */
    --neoarv-radius-sm: 4px;
    --neoarv-radius-md: 6px;
    --neoarv-radius-lg: 10px;
    --neoarv-radius-xl: 14px;
    --neoarv-radius-card: 8px;
    --neoarv-radius-pill: 999px;
    --neoarv-radius-input: 5px;
    /* ========================================================================
     * EFFECTS TOKENS - Blur, Shadows, Glows
     * Scaling Law: ALL values use dvmin for proportional viewport scaling
     * ======================================================================== */
    /* Backdrop Blur - scales with viewport for consistent visual density */
    --neoarv-blur-sm: blur(clamp(4px, 1dvmin, 12px));
    --neoarv-blur-card: blur(clamp(12px, 2.5dvmin, 28px));
    --neoarv-blur-modal: blur(clamp(20px, 3.5dvmin, 40px));
    /* Box Shadows (Elevation) - proportional to viewport for depth perception */
    --neoarv-shadow-sm: 0 clamp(1px, 0.25dvmin, 3px) clamp(4px, 1dvmin, 12px) hsla(0, 0%, 0%, 0.3);
    --neoarv-shadow-card: 0 clamp(4px, 1dvmin, 12px) clamp(16px, 4dvmin, 48px) hsla(0, 0%, 0%, 0.4);
    --neoarv-shadow-elevated: 0 clamp(8px, 2dvmin, 24px) clamp(24px, 6dvmin, 64px) hsla(0, 0%, 0%, 0.5);
    --neoarv-shadow-modal: 0 clamp(12px, 3dvmin, 32px) clamp(32px, 8dvmin, 80px) hsla(0, 0%, 0%, 0.6);
    /* Focus Glow Shadows - proportional glow radius */
    --neoarv-shadow-focus: 0 0 0 clamp(2px, 0.35dvmin, 4px) var(--neoarv-color-glow-focus);
    --neoarv-shadow-focus-input: 0 0 clamp(8px, 1.5dvmin, 16px) var(--neoarv-color-glow-focus);
    --neoarv-shadow-glow-primary: 0 0 8px var(--neoarv-color-glow-primary);
    --neoarv-shadow-glow-success: 0 0 clamp(12px, 2.5dvmin, 28px) var(--neoarv-color-success-glow);
    /* ========================================================================
     * Z-INDEX STACK - Architectural Layers (100s for sub-layering)
     * ======================================================================== */
    --neoarv-z-background: -100;
    --neoarv-z-background-effects: -50;
    --neoarv-z-stage-content: 1; /* Fixed content layer - above bg, below everything else */
    --neoarv-z-content: 50;
    --neoarv-z-card: 100;
    --neoarv-z-card-content: 150;
    --neoarv-z-appbar: 200;
    --neoarv-z-sticky: 200;
    --neoarv-z-action-floor: 400; /* Below nav so gradient doesn't cover it */
    --neoarv-z-nav-drawer: 500;
    --neoarv-z-action-floor-btn: 600; /* Button above nav */
    --neoarv-z-overlay: 800;
    --neoarv-z-modal: 900;
    --neoarv-z-modal-content: 950;
    --neoarv-z-protected: 1000; /* Victory/Defeat - DO NOT EXCEED */
    --neoarv-z-system: 9999; /* Snackbars, tooltips */
    /* ========================================================================
     * LAYOUT TOKENS - Grid & Constraints
     * ======================================================================== */
    /* App Grid Constraints */
    --neoarv-layout-max-aspect: none;
    --neoarv-layout-stage-max-width: 100dvw;
    --neoarv-content-width: var(--neoarv-layout-stage-max-width);
    /* 1% of constrained width (replaces dvw usage inside content area) */
    --neoarv-cvw: calc(var(--neoarv-content-width) / 100);
    /* Action Floor (Calculated Token) */
    --neoarv-layout-action-btn-height: clamp(44px, 5.5dvh, 52px);
    --neoarv-layout-action-padding: clamp(8px, 1dvh, 12px);
    --neoarv-layout-action-safety: clamp(4px, 0.5dvh, 8px);
    --neoarv-layout-action-floor-height: calc( var(--neoarv-layout-action-btn-height) + (var(--neoarv-layout-action-padding) * 2) + var(--neoarv-layout-action-safety) );
    /* THE CHROME INSET LAW (Alan, 2026-08-04): the corner chrome (hamburger,
       wordmark, person icon) sits exactly this far from the SIDE edges and
       the SAME distance from the TOP — on every page, both header modes, no
       deviation. This token is the single knob; never position corner
       chrome with per-page offsets or translate nudges again. */
    --neoarv-chrome-inset: 1.5%;
    /* Navigation Drawer */
    --neoarv-layout-nav-height: clamp(60px, 10dvh, 80px);
    --bottom-nav-height: var(--neoarv-layout-nav-height); /* Legacy alias */
    /* Fixed MudAppBar (MainLayoutWithHeader) — non-dense default height */
    --neoarv-layout-appbar-height: 64px;
    /* Gap between fixed appbar bottom edge and first page content */
    --neoarv-layout-appbar-content-gap: clamp(16px, 2.5dvh, 28px);
    /* Content Bottom Padding - only nav drawer, content scrolls behind transparent gradient */
    --neoarv-layout-content-bottom: calc(var(--neoarv-layout-nav-height) + env(safe-area-inset-bottom, 0px));
    /* Safe Areas (for notched devices) */
    --neoarv-safe-top: env(safe-area-inset-top, 0px);
    --neoarv-safe-bottom: env(safe-area-inset-bottom, 0px);
    --neoarv-safe-left: env(safe-area-inset-left, 0px);
    --neoarv-safe-right: env(safe-area-inset-right, 0px);
    /* ========================================================================
     * ANIMATION TOKENS - Timing & Easing
     * ======================================================================== */
    --neoarv-timing-instant: 100ms;
    --neoarv-timing-fast: 200ms;
    --neoarv-timing-normal: 300ms;
    --neoarv-timing-slow: 500ms;
    --neoarv-timing-glow: 2s;
    --neoarv-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
    --neoarv-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --neoarv-easing-smooth: ease-in-out;
    /* ========================================================================
     * INPUT TOKENS - Form Controls
     * ======================================================================== */
    --neoarv-input-height: clamp(44px, 6dvh, 56px);
    --neoarv-input-padding-x: clamp(12px, 2dvh, 16px);
    --neoarv-input-padding-y: clamp(10px, 1.5dvh, 14px);
    --neoarv-input-number-spinner-width: 24px;
    --neoarv-input-border-width: clamp(1px, 0.25dvmin, 3px);
    /* Ghost Slot for Validation (pre-allocated space) */
    --neoarv-input-error-height: clamp(16px, 2.5dvh, 22px);
    /* Filled field face — black alpha over the card (Elevation Law: trough) */
    --neoarv-input-surface: #0c0d0f;
    --neoarv-input-surface-hover: #0f1114;
    /* Select/menu panels (portaled MudPopover). Tuned against card troughs. */
    --neoarv-input-menu-surface: #17191d;
    /* ========================================================================
     * BUTTON TOKENS
     * ======================================================================== */
    --neoarv-btn-height-sm: clamp(32px, 5dvh, 40px);
    --neoarv-btn-height-md: clamp(44px, 6dvh, 52px);
    --neoarv-btn-height-lg: clamp(52px, 7dvh, 64px);
    --neoarv-btn-padding-x: clamp(16px, 3dvh, 32px);
    --neoarv-btn-padding-y: clamp(12px, 2dvh, 20px);
    /* Primary Action Button Gradient */
    --neoarv-btn-gradient-primary: linear-gradient(180deg, rgb(48 41 33 / 86%) 0%, rgb(23 22 22 / 96%) 100%);
    --neoarv-btn-gradient-success: linear-gradient( 135deg, hsl(160, 70%, 45%) 0%, hsl(180, 70%, 40%) 100% );
    /* ========================================================================
    * SCROLLBAR TOKENS
     * ======================================================================== */
    --neoarv-scrollbar-width: clamp(4px, 0.8dvmin, 8px);
    --neoarv-scrollbar-thumb-idle: transparent;
    --neoarv-scrollbar-thumb-hot: rgb(242 154 50 / 58%);
    --neoarv-scrollbar-thumb-hot-strong: rgb(242 154 50 / 82%);
    --neoarv-scrollbar-track: #101113;
}

/* ============================================================================
 * GLOBAL RESETS & BASE STYLES
 * ============================================================================ */

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

/* No text selection ANYWHERE in the UI by default — this is an
   application, not a document. Selecting the label of a button when
   the user clicks it (especially on a fast double-click) breaks the
   feel of the interaction. The * selector covers absolutely every
   element, including pseudo-elements and dynamically-added content.
   Touch devices also need -webkit-touch-callout to suppress the
   long-press selection magnifier. */
*,
*::before,
*::after {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

/* Re-enable text selection ONLY where it's genuinely needed:
   - real form inputs (text/textarea/contenteditable) so users can type
     and select what they typed
   - any element opted-in via the .neoarv-selectable utility class
     (use this on logs, copyable IDs, code snippets, etc.)
   - POLICY: pure document pages (the /about tree, /terms, /privacy) are
     documents, not application surfaces, and their prose must be
     selectable. They all get this class from StaticDocumentLayout's
     content container. Interactive chrome stays outside that container
     and keeps app behavior. */
input,
textarea,
[contenteditable="true"],
.neoarv-selectable,
.neoarv-selectable * {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-touch-callout: default;
}

html, body {
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
    font-family: var(--neoarv-font-family-primary);
    font-size: var(--neoarv-font-size-body);
    line-height: var(--neoarv-line-height-normal);
    color: var(--neoarv-color-text-primary);
    background: var(--neoarv-page-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

#components-reconnect-modal.neoarv-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4dvw, 56px);
    z-index: calc(var(--neoarv-z-system) + 10);
    color: var(--neoarv-color-text-primary);
    font-family: var(--neoarv-font-family-primary);
    background: rgb(3 5 7 / 78%);
    backdrop-filter: var(--neoarv-blur-modal);
    -webkit-backdrop-filter: var(--neoarv-blur-modal);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

#components-reconnect-modal.components-reconnect-hide {
    display: none;
}

.neoarv-reconnect-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--neoarv-size-gap-lg);
    width: min(calc(100dvw - clamp(32px, 8dvw, 96px)), clamp(280px, 74dvw, 560px));
    padding: var(--neoarv-size-padding-card);
    color: var(--neoarv-color-text-primary);
    background:
        linear-gradient(180deg, rgb(255 255 255 / 4%), transparent 42%),
        var(--neoarv-color-surface-elevated);
    border: var(--neoarv-input-border-width) solid var(--neoarv-color-border-default);
    border-radius: var(--neoarv-radius-card);
    box-shadow: var(--neoarv-shadow-modal);
}

/* The .neoarv-reconnect-orbit spinner rules live in WebUi App.razor's inline
   head style, not here: the boot shell (ADO 196) needs the spinner styled
   before this stylesheet has loaded, and the reconnect modal reuses the same
   rules from there. */

.neoarv-reconnect-copy {
    min-width: 0;
}

.neoarv-reconnect-title,
.neoarv-reconnect-detail {
    display: none;
    margin: 0;
}

.neoarv-reconnect-title {
    font-size: var(--neoarv-font-size-lg);
    font-weight: var(--neoarv-font-weight-semibold);
    line-height: var(--neoarv-line-height-tight);
}

.neoarv-reconnect-detail {
    margin-top: var(--neoarv-size-gap-sm);
    color: var(--neoarv-color-text-secondary);
    font-size: var(--neoarv-font-size-sm);
    line-height: var(--neoarv-line-height-relaxed);
}

#components-reconnect-modal.components-reconnect-show:not(.components-reconnect-retrying) .neoarv-reconnect-title--show,
#components-reconnect-modal.components-reconnect-paused:not(.components-reconnect-retrying) .neoarv-reconnect-title--show,
#components-reconnect-modal.components-reconnect-retrying .neoarv-reconnect-title--retrying,
#components-reconnect-modal.components-reconnect-failed .neoarv-reconnect-title--failed,
#components-reconnect-modal.components-reconnect-rejected .neoarv-reconnect-title--rejected,
#components-reconnect-modal.components-reconnect-show:not(.components-reconnect-retrying) .neoarv-reconnect-detail--attempting,
#components-reconnect-modal.components-reconnect-paused:not(.components-reconnect-retrying) .neoarv-reconnect-detail--attempting,
#components-reconnect-modal.components-reconnect-retrying .neoarv-reconnect-detail--attempting,
#components-reconnect-modal.components-reconnect-failed .neoarv-reconnect-detail--waiting,
#components-reconnect-modal.components-reconnect-rejected .neoarv-reconnect-detail--reload {
    display: block;
}

#components-reconnect-current-attempt,
#components-reconnect-max-retries,
#components-seconds-to-next-attempt {
    color: var(--neoarv-color-text-primary);
    font-weight: var(--neoarv-font-weight-semibold);
}

.neoarv-sketch-transparent-white {
    filter: var(--neoarv-sketch-transparent-white-filter);
    mix-blend-mode: screen;
    background: transparent;
}

.neoarv-sketch-black-on-white {
    mix-blend-mode: difference;    
}

/* ============================================================================
 * AUTO-HIDING SCROLLBARS - All Platforms
 * ============================================================================
 * Invisible by default, appears on hover. Works on:
 * - Firefox (scrollbar-width, scrollbar-color)
 * - Chrome, Safari, Edge, Android WebView (-webkit-scrollbar)
 * ============================================================================ */ 
/* Shared scrollbar treatment for every page, component, and overlay owner. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--neoarv-scrollbar-thumb-idle) var(--neoarv-scrollbar-track) !important;
}

*:hover,
*:focus-within {
    scrollbar-color: var(--neoarv-scrollbar-thumb-hot) var(--neoarv-scrollbar-track) !important;
}

/* WebKit scrollbar (Chrome, Safari, Edge, Android) */
*::-webkit-scrollbar {
    width: var(--neoarv-scrollbar-width);
}

*::-webkit-scrollbar-track {
    background: var(--neoarv-scrollbar-track) !important;
}

*::-webkit-scrollbar-thumb {
    background: var(--neoarv-scrollbar-thumb-idle) !important;
    border-radius: var(--neoarv-radius-pill);
}

*:hover::-webkit-scrollbar-thumb,
*:focus-within::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
        var(--neoarv-scrollbar-thumb-hot-strong),
        var(--neoarv-scrollbar-thumb-hot)) !important;
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
        var(--neoarv-color-accent-primary),
        var(--neoarv-scrollbar-thumb-hot-strong)) !important;
}

/* One product carousel contract: native touch scrolling, Interact.js mouse/pen
   inertia, and the same clickable position controls on every card rail. */
[data-horizontal-carousel] {
    scrollbar-gutter: auto;
}

/* Explicit route markers document the intended scroll owner. The universal
   stable gutter above also covers dialogs, sheets, and future scroll owners. */
[data-scroll-owner] {
    scrollbar-gutter: stable;
}

[data-horizontal-carousel][data-carousel-scrollable="true"] {
    touch-action: pan-y;
}

[data-horizontal-carousel] > * {
    scroll-snap-align: center !important;
}

.horizontal-carousel-viewport {
    position: relative;
}

.horizontal-carousel-viewport:has(> [data-carousel-scrollable="true"]) {
    width: 100dvw;
    margin-inline: calc(50% - 50dvw);
}

[data-horizontal-carousel] img {
    -webkit-user-drag: none;
    user-select: none;
}

.horizontal-carousel-indicators {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: max-content;
    margin: 0.15rem auto 1rem;
}

.horizontal-carousel-indicators[hidden] {
    display: none;
}

.horizontal-carousel-indicators button {
    width: 44px;
    height: 44px;
    position: relative;
    display: grid;
    place-items: center;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.horizontal-carousel-indicators button::before {
    width: 6px;
    height: 6px;
    border-radius: var(--neoarv-radius-pill);
    background: var(--neoarv-color-text-muted);
    content: "";
    transition: width 180ms ease, background-color 180ms ease;
}

.horizontal-carousel-indicators button[aria-current="true"]::before {
    width: 20px;
    background: var(--neoarv-color-accent-primary);
}

.horizontal-carousel-indicators button:focus-visible {
    outline: 2px solid var(--neoarv-color-border-focus);
    outline-offset: -4px;
    border-radius: var(--neoarv-radius-pill);
}

/* ============================================================================
 * LAYOUT PLANES - Z-Index Architecture
 * ============================================================================
 * Plane 0 (Ambient): Background effects - spans 100dvw
 * Plane 1 (Stage): App content grid - constrained to 4:3 max aspect
 * Plane 2 (Floating): Action floor, nav drawer - constrained to Stage
 * Plane 3 (Protected): Modals, overlays - spans 100dvw
 * ============================================================================ */

/* OLD - COMMENTED OUT - replaced by new layered approach
.neoarv-ambient-bg {
    position: fixed;
    inset: 0;
    width: 100dvw;
    height: 100dvh;
    background: var(--neoarv-page-gradient);
    z-index: var(--neoarv-z-background);
    pointer-events: none;
}
*/

/* ============================================
 * NEW BACKGROUND LAYER SYSTEM
 * Layer order determined by DOM order (no z-index tricks)
 * Body has NO background - layers stack naturally
 * ============================================ */

/* Layer 1: Fallback solid color (DOM first = visually bottom) */
.neoarv-bg-color-layer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: var(--neoarv-layout-stage-max-width);
    margin: 0 auto;
    background: var(--neoarv-page-gradient);
    pointer-events: none;
}

/* Layer 2: Background image (DOM second = on top of color) */
.neoarv-bg-image-layer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: var(--neoarv-layout-stage-max-width);
    margin: 0 auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Layer 3: Vignette overlay (DOM third = on top of image) */
.neoarv-vignette-layer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: var(--neoarv-layout-stage-max-width);
    margin: 0 auto;
    background: var(--neoarv-page-vignette);
    pointer-events: none;
}

.neoarv-vignette-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.08;
    mix-blend-mode: soft-light;
    background-image: var(--neoarv-grain-texture);
    background-repeat: repeat;
}

/* Dark background override — immersive routes (coin flip, sketch) start black */
.neoarv-bg--dark {
    background: #000000 !important;
    background-image: none !important;
}

/* Plane 1: Stage Container - centered with 4:3 max aspect ratio */
.neoarv-stage {
    position: relative;
    width: 100dvw;
    height: 100dvh;
    max-width: var(--neoarv-layout-stage-max-width);
    margin: 0 auto;
    overflow-x: hidden; /* Only clip horizontal overflow for pillar-boxing */
    overflow-y: visible; /* Allow mask effect to work */
    z-index: var(--neoarv-z-content);
}

/* Anonymous: no full tab drawer. Floating exit FAB overlays when present —
   do not reserve a dead full-width strip (that left empty black under CONTINUE
   on pages where the FAB is hidden). Safe-area only; FAB sits above content. */
/* No bottom nav bar on this screen, so reserve no room for one — otherwise
   the page pads for a bar that is not there and the last control floats
   above a dead strip. Two cases: guests (no bar at all) and the immersive
   session flows, where a member's bar is deliberately hidden. */
.neoarv-stage--anon,
.neoarv-stage--no-nav {
    --neoarv-layout-nav-height: 0px;
    --bottom-nav-height: 0px;
    --neoarv-layout-content-bottom: max(
        env(safe-area-inset-bottom, 0px),
        clamp(8px, 1.5dvh, 16px)
    );
}

/* App Grid inside Stage - container for positioned content */
.neoarv-app-grid {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Stage content container - fade effect moved to ScrollableContent component */
.neoarv-stage-content {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
}

/* Ensure nav drawer stays fixed to viewport - defense against stacking context issues */
.bottom-tab-drawer {
    position: fixed !important;
    bottom: 0 !important;
    z-index: var(--neoarv-z-nav-drawer) !important;
}


/* ============================================================================
 * HEADER / APP BAR STYLES
 * ============================================================================ */

.neoarv-appbar {
    background: hsla(240, 20%, 6%, 0.9);
    backdrop-filter: var(--neoarv-blur-card);
    -webkit-backdrop-filter: var(--neoarv-blur-card);
    border-bottom: clamp(1px, 0.25dvmin, 3px) solid hsla(200, 60%, 45%, 0.3);
}

.neoarv-appbar--transparent {
    background: hsla(240, 20%, 6%, 0.5);
    border-bottom: clamp(1px, 0.15dvmin, 2px) solid hsla(200, 60%, 45%, 0.2);
}

.neoarv-appbar--fixed {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    max-width: var(--neoarv-layout-stage-max-width);
    margin: 0 auto;
    z-index: var(--neoarv-z-appbar);
}

/* Page Content - Fills available space, no scroll by default
   Individual pages control their own internal scrolling.

   NO PADDING OF ITS OWN by default (Alan, 2026-08-04). This element paints
   nothing, so padding here shows the page background through a band that
   neighbours its own surfaces. The header band and the stage header carry
   their drop from the top; immersive surfaces manage their own space. The one
   exception is the bottom reserve directly below — see why it is safe there. */
.neoarv-page-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: 0;
    /* No horizontal padding: the scrollable area below must run edge to edge so
       its veil does too. The heading and the scroll area each carry their own
       inset instead — see .neoarv-page-heading and .neoarv-scrollable-content. */
    background: transparent;
    /* The wood-desk texture is reserved for "simulation mode" screens —
       SketchPad applies it via its own scoped CSS, and the judging picker
       picks it up via .neoarv-page-content:has(.judging-header) in
       Judging_css. Other pages let the MainLayout background layers show through. */
}

/* THE BOTTOM RESERVE — the mirror of the heading band (Alan, 2026-08-05).
   The heading is an in-flow item: it occupies real height, so the scroll area
   below it starts at the heading's edge and never runs behind it. The tab bar
   is position:fixed, so nothing was holding its space and the scroll area ran
   all the way to the viewport floor, behind the bar. Reserving the bar's
   footprint here gives the bottom edge the same treatment as the top: the
   scroll area stops AT the bar, and its bottom mask ramp dissolves against
   that edge exactly as the top ramp dissolves against the heading.

   Scoped to pages that actually have a scroll area, so immersive screens keep
   managing their own space. The band this opens up is exactly the bar's
   footprint and the bar paints it — the "mismatched strip" the 2026-08-04 note
   warned about only appeared while the bar painted nothing.

   The token already collapses to a safe-area-only value on the guest and
   no-nav stages, so those reserve nothing for a bar they do not show. */
.neoarv-page-content:has(.neoarv-scrollable-wrapper) {
    padding-bottom: var(--neoarv-layout-content-bottom);
}

/* Page Footer - pinned to bottom of flex column, never shrinks.
   The #ffffff07 film is Alan's tuned value (2026-08-04): the footer band
   wears the same subtle white lift the content area gets from its veil,
   instead of showing the raw page background as a black strip. The bottom
   padding folds in the safe-area inset that used to live on
   .session-flow-modal — the footer, not the modal, owns the screen edge. */
.neoarv-page-content footer {
    flex-shrink: 0;
    padding:
        clamp(8px, 1.5dvh, 16px)
        clamp(8px, 1.5dvh, 16px)
        max(env(safe-area-inset-bottom, 0px), clamp(8px, 1.5dvh, 16px));
    /* background: #ffffff07; */
}

/* Page Stage Header - shared title/subtitle for intermediate feature pseudo-pages */
/* Owns its own drop from the viewport edge and its own side inset: these
   stage pages (coin flip, judging) render no PageHeading, so nothing above
   them reserves space, and the title sat hard against the top edge while
   the subtitle ran into the side edges (Alan, 2026-08-04). */
.neoarv-page-content .neoarv-stage-header {
    flex-shrink: 0;
    text-align: center;
    padding-top: max(env(safe-area-inset-top, 0px), clamp(16px, 3dvh, 34px));
    padding-inline: clamp(16px, 5vw, 34px);
    padding-bottom: clamp(4px, 1dvh, 12px);
}

.neoarv-stage-header h1, .stage-header h1 {
    /*font-size: clamp(24px, 6dvw, 48px);*/
    font-weight: 900;
    letter-spacing: 0.05em;
    margin: 0 0 clamp(4px, 1dvh, 12px) 0;
    background: linear-gradient(135deg, var(--neoarv-color-text-primary) 0%, var(--neoarv-color-accent-primary-bright) 50%, var(--neoarv-color-accent-primary) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: neoarv-title-glow 3s ease-in-out infinite alternate;
}

.neoarv-stage-header .mud-typography-subtitle1,
.stage-header .mud-typography-subtitle1 {
    color: var(--neoarv-color-text-secondary);
    /*font-size: clamp(13px, 3dvw, 24px);*/
    font-weight: 400;
    letter-spacing: 0.02em;
    margin: 0;
}

@keyframes neoarv-title-glow {
    from { filter: brightness(1); }
    to { filter: brightness(1.2); }
}

/* Header-aware padding — clear fixed appbar + breathing room under brand bar.
   Prior clamp(56–72) could sit under or flush against the 64px MudAppBar. */
.neoarv-page-content--with-header {
    padding-top: calc(
        var(--neoarv-layout-appbar-height)
        + max(env(safe-area-inset-top, 0px), 0px)
        + var(--neoarv-layout-appbar-content-gap)
    );
}

/* Brand Styles — wordmark + radio arcs (replaces fortune-ball header mark) */
.neoarv-brand-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
}

/* MudAppBar: center the brand when using the new mark */
.neoarv-appbar--brand-center .mud-toolbar {
    justify-content: center;
}

.neoarv-appbar--brand-center .mud-toolbar-appbar {
    justify-content: center;
}

/* The NeoARV wordmark (NeoArvBrandMark.razor) is real artwork carrying its own brand
   colours, so nothing here sets colour — sized by HEIGHT only, with width following
   the intrinsic 2216:404 ratio declared on the element. */
.neoarv-mark {
    display: block;
    width: auto;
    user-select: none;
    opacity: 0.92;
    /* Keeps the mark from sitting flat on the dark field, in the same spirit as the
       glow the text wordmark carried — tuned to the logo's own orange, not amber. */
    filter: drop-shadow(0 0 6px hsl(21deg 100% 50% / 0.22));
}

.neoarv-mark--header {
    height: clamp(1.15rem, 3.6dvw, 1.5rem);
}

.neoarv-mark--hero {
    height: clamp(1.6rem, 6.5dvw, 2.3rem);
}

.neoarv-brand-link:hover .neoarv-mark,
.neoarv-brand-link:focus-visible .neoarv-mark {
    /* Compose with the resting glow: `filter` replaces rather than adds, so the
       drop-shadow has to be restated or the mark loses it on hover. */
    filter: drop-shadow(0 0 8px hsl(21deg 100% 50% / 0.38)) brightness(1.08);
}

/* Legacy split-word helpers (unused by new mark; keep for any residual markup) */
.neoarv-brand-content {
    display: flex;
    align-items: center;
    gap: var(--neoarv-size-gap-md);
}

.neoarv-brand-tagline {
    font-size: var(--neoarv-font-size-sm);
    font-weight: 600;
    color: var(--neoarv-color-text-secondary);
    letter-spacing: var(--neoarv-letter-spacing-wide);
    text-transform: uppercase;
    margin-left: var(--neoarv-size-gap-md);
    opacity: 0.8;
}

/* Build timestamp - barely visible debugging aid */
/* ============================================================================
 * ACTION FLOOR - Floating Primary Action Zone
 * ============================================================================ */

.neoarv-action-floor {
    position: fixed;
    /* Anchored to viewport bottom - button container above nav */
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    /* Bottom padding = nav height + gap, pushing button just above nav */
    padding: clamp(16px, 3dvh, 24px) 0 calc(var(--neoarv-layout-nav-height) + clamp(4px, 0.5dvh, 8px));
    /* Below nav drawer */
    z-index: var(--neoarv-z-action-floor);
    pointer-events: none;

    /* Flex to center content container */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    /* No gradient overlay - content fades via mask-image on .neoarv-stage-content */
}

/* Content container - constrained to Stage width */
.neoarv-action-floor-content {
    width: 100%;
    max-width: var(--neoarv-layout-stage-max-width);
    padding: 0 1rem;
    pointer-events: auto;
    /* Button needs to be above nav drawer */
    position: relative;
    z-index: var(--neoarv-z-action-floor-btn);
}

/* ============================================================================
 * CARD / PANEL COMPONENT - Milled look
 *
 * ============================================================================ */

:root {
    --stain-color: hsl(28deg 35% 22%);
    --raw-color: hsl(26deg 30% 14%);
}

/* 
    PROVIDES NO PADDING.
    
    for padding add class neoarv-pad to the panel or child/ren
*/
.neoarv-panel {
    width: 100%;
    align-items: center;
    border-radius: var(--neoarv-radius-card);
    margin: 0 0 var(--neoarv-size-gap-md);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    /* Flat-mode panel (Alan, 2026-08-05): no drop shadow lifting it off the
       page and no surface fill — just a warm light wash INSIDE the top edge,
       so the panel reads as its own area without pretending to float. */
    box-shadow: inset 0 clamp(10px, 1.8dvh, 18px) clamp(22px, 4dvh, 40px) hsl(30.46deg 100% 94.78% / 10%);
    /* background-color: var(--neoarv-color-surface-veil); */
}

.neoarv-pad {
    padding: clamp(16px, 3dvw, 24px);
}

.neoarv-card--elevated {
    background: var(--neoarv-color-surface-glass-elevated);
    box-shadow: var(--neoarv-shadow-elevated);
    z-index: var(--neoarv-z-modal);
}

.neoarv-picker-surface {
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--neoarv-radius-md, clamp(8px, 1.2dvh, 12px));
    background: hsl(0 0% 100% / 0.08) !important;
    box-shadow:
        inset 0 0 0 1px hsl(0 0% 100% / 0.05),
        0 clamp(5px, 1.2dvh, 12px) clamp(12px, 2dvh, 20px) hsl(230 90% 4% / 0.35);
}

/* ============================================================================
 * BUTTON COMPONENTS
 * ============================================================================ */

/* Every button on the site is the landing page's struck-plate button: a hard
   1972 control panel key, not a glowing pill. The shape, the type and the
   lighting live HERE and are shared; a colour theme supplies only its face
   gradient and the four ink/lighting variables below. Adding a theme means
   setting five custom properties, never restating the shadow stack.

   --btn-face-hi  top inset highlight, the lit edge
   --btn-face-lo  bottom inset lip, the shadowed underside that gives depth
   --btn-ink      label colour (dark, printed into the face)
   --btn-ink-hi   label's 1px lower highlight — the engraved-then-filled look */
.neoarv-btn {
    --btn-face-hi: hsl(45 90% 90% / 0.95);
    --btn-face-lo: hsl(38 70% 20% / 0.7);
    --btn-ink: #3A2A08;
    --btn-ink-hi: hsl(45 90% 88% / 0.65);

    position: relative; /* For absolute spinner positioning */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--neoarv-size-gap-sm);
    height: var(--neoarv-btn-height-md);
    padding: var(--neoarv-btn-padding-y) var(--neoarv-btn-padding-x);
    font-family: var(--font-s16, Georgia, serif);
    font-size: var(--neoarv-font-size-body);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
    /*text-transform: uppercase;*/
    text-decoration: none;
    white-space: nowrap; /* Single line only */
    color: var(--btn-ink);
    text-shadow: 0 1px 0 var(--btn-ink-hi);
    border: none;
    border-radius: 4px;
    box-shadow:
        inset 0 1px 0 hsl(0deg 0% 52.44% / 35%),
        inset 0 0px 0 var(--btn-face-lo),
        0 3px 5px hsl(0 0% 0% / 0.65);
    cursor: pointer;
    transition:
        transform var(--neoarv-timing-fast) var(--neoarv-easing-default),
        box-shadow var(--neoarv-timing-fast) var(--neoarv-easing-default),
        filter var(--neoarv-timing-fast) var(--neoarv-easing-default);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Pressed: the key travels down and its cast shadow shortens with it. */
.neoarv-btn:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 1px 0 var(--btn-face-hi),
        0 2px 7px hsl(0 0% 0% / 0.65);
}

/* Primary Action Button - default theme is the landing page's brass. */
.neoarv-btn--primary {
    background: linear-gradient(180deg, #E7C97A 0%, #C9A24E 46%, #9A7628 100%);
    font-size: 1.35em;
}

    .neoarv-btn--primary:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 3px;
        filter: brightness(1.06);
    }

/* Disabled state - fully grayed out, no interaction */
.neoarv-btn--primary:disabled,
.neoarv-btn--primary.neoarv-btn--disabled {
    cursor: not-allowed;
    opacity: 0.42;
    filter: grayscale(1) brightness(0.42) contrast(0.75) !important;
    box-shadow: none !important;
    text-shadow: none;
}

/* Processing state - muted but still colored, with spinner */
.neoarv-btn--primary.neoarv-btn--processing {
    opacity: 0.7;
    cursor: wait;
    filter: brightness(0.8) !important;
    box-shadow: none !important;
}

/* ----------------------------------------
   COLOR THEME VARIANTS
   ---------------------------------------- */

/* Default theme: aliased to Sri1975. The actual rules live alongside the
   Sri1975 selectors below — search for .neoarv-btn--theme-default,.neoarv-btn--theme-sri1975. */

/* Each theme sets its face gradient and its four lighting/ink variables.
   Shape, type, shadow stack and press behaviour all come from .neoarv-btn.
   Colours are unchanged from before — only the treatment is new. */

/* Ember Theme - warm orange/red gradient */
.neoarv-btn--theme-ember {
    --btn-face-hi: hsl(20 100% 88% / 0.9);
    --btn-face-lo: hsl(340 70% 18% / 0.7);
    --btn-ink: #4A0F1E;
    --btn-ink-hi: hsl(20 100% 88% / 0.55);
    background: linear-gradient(180deg, #FF9B6B 0%, #FF6B35 46%, #C0185C 100%);
}

/* Ocean Theme - deep teal gradient */
.neoarv-btn--theme-ocean {
    --btn-face-hi: hsl(168 90% 90% / 0.9);
    --btn-face-lo: hsl(202 80% 14% / 0.7);
    --btn-ink: #03303C;
    --btn-ink-hi: hsl(168 90% 90% / 0.55);
    background: linear-gradient(180deg, #6BEBD3 0%, #00D4AA 46%, #0077B6 100%);
}

/* Cosmic Theme - blue-to-purple gradient */
.neoarv-btn--theme-cosmic {
    --btn-face-hi: hsl(265 80% 93% / 0.9);
    --btn-face-lo: hsl(265 55% 20% / 0.7);
    --btn-ink: #241640;
    --btn-ink-hi: hsl(265 80% 93% / 0.55);
    background: linear-gradient(180deg, #A8DCFF 0%, #64C8FF 46%, #9333EA 100%);
}


/* override for the button to match the 70's theme */
/* Default theme is aliased to Sri1975 — every Sri1975 selector below
   has .neoarv-btn--theme-default appended. The dim Sri1975Dark variant
   stays separate (different filter / color). */
/* The green stays exactly the green it was — only the treatment changed. */
.neoarv-btn--theme-sri1975 {
    --btn-face-hi: hsl(134 55% 85% / 0.9);
    --btn-face-lo: hsl(134 60% 8% / 0.75);
    --btn-ink: #0B2612;
    --btn-ink-hi: hsl(134 55% 85% / 0.55);
    background: linear-gradient(180deg, #7FD48D 0%, #4fb461 46%, #0e2112 100%);
}

.neoarv-btn--theme-sri1975dark {
    --btn-face-hi: hsl(30 20% 78% / 0.75);
    --btn-face-lo: hsl(30 15% 8% / 0.75);
    --btn-ink: #1E1B17;
    --btn-ink-hi: hsl(30 20% 78% / 0.45);
    background: linear-gradient(180deg, #8A8078 0%, #625951 46%, #211f1c 100%);
}

    /* Sliding-highlight hover effect — a soft white sheen sweeps from left
       to right across the button face once per hover-enter. Pure CSS,
       GPU-accelerated translateX, no JS. Gated to hover-capable pointers
       so touch screens don't get a sticky sheen sitting on the button
       after a tap. */
    .neoarv-btn--theme-sri1975,
    .neoarv-btn--theme-sri1975dark {
        overflow: hidden; /* clip the sheen sweep to the pill border-radius */
    }

    .neoarv-btn--theme-sri1975::before,
    .neoarv-btn--theme-sri1975dark::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.30) 50%,
            transparent 100%
        );
        transform: translateX(-100%);
        pointer-events: none;
    }

    @@keyframes neoarv-btn-sheen-sweep {
        0%   { transform: translateX(-100%); }
        100% { transform: translateX( 100%); }
    }

    @media (hover: hover) and (pointer: fine) {
        .neoarv-btn--theme-default:not(:disabled):not(.neoarv-btn--processing):hover::before,
        .neoarv-btn--theme-sri1975:not(:disabled):not(.neoarv-btn--processing):hover::before,
        .neoarv-btn--theme-sri1975dark:not(:disabled):not(.neoarv-btn--processing):hover::before {
            animation: neoarv-btn-sheen-sweep 0.7s ease-out;
        }
    }

    /* Active (mouse + touch) — tactile press feedback. Just a brief scale
       dip; box-shadow stays put so the button doesn't feel like it's
       physically moving on the page. Quick transition overrides keep the
       press perceptually instant. */
    .neoarv-btn--theme-default:not(:disabled):not(.neoarv-btn--processing):active,
    .neoarv-btn--theme-sri1975:not(:disabled):not(.neoarv-btn--processing):active,
    .neoarv-btn--theme-sri1975dark:not(:disabled):not(.neoarv-btn--processing):active {
        transform: scale(0.96);
        transition: transform 60ms ease-out;
    }


/* override for the button to match the 70's theme */
/* This later block wins the cascade over the one above - same treatment, its own colour. */
.neoarv-btn--theme-sri1975dark {
    --btn-face-hi: hsl(70 80% 85% / 0.9);
    --btn-face-lo: hsl(70 60% 10% / 0.75);
    --btn-ink: #1F2405;
    --btn-ink-hi: hsl(70 80% 85% / 0.55);
    background: linear-gradient(180deg, #C3E84A 0%, #89b900 46%, #241d15 100%);
    filter: brightness(0.75);
}

    .neoarv-btn--theme-sri1975dark:focus-visible {
        box-shadow: var(--neoarv-shadow-focus),box-shadow: 0px 0px 15px #5430bbdb;
    }

    .neoarv-btn--theme-sri1975dark .neoarv-btn-content {
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.55), 0 -2px 1px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.40), 0 2px 1px rgba(255, 255, 255, 0.20);
    }


/* ----------------------------------------
   STRUCK BRASS — the default PrimaryActionBtn face.

   Matches the "Guess it" plate on the landing page so the front door and the
   flow are visibly the same product. Geometry is untouched: height, padding,
   font-size and letter-spacing all still come from .neoarv-btn / .neoarv-btn--primary.
   Only the face changes.

   The three shadows are what make it read as a struck plate rather than a
   painted rectangle: a bright inset along the top edge is the light catching
   the bevel, a dark inset along the bottom is the plate's thickness, and the
   outer shadow lifts it off the page. Overriding `background` alone leaves the
   old amber glow (0 0 7px #ffc572) ringing it, and the white glowing text-shadow
   from .neoarv-btn--primary unreadable on a light face — so all three are reset.
   ---------------------------------------- */
.neoarv-btn--primary.neoarv-btn--theme-default {
    background: linear-gradient(180deg, #E7C97A 0%, #C9A24E 46%, #9A7628 100%);
    box-shadow:
        inset 0 1px 0 hsl(45 90% 90% / 0.95),
        inset 0 0px 0 hsl(38 70% 20% / 0.7),
        0 3px 5px hsl(0 0% 0% / 0.65);
    border-radius: 7.2px;
    color: #3A2A08;
    text-shadow: 0 1px 0 hsl(45 90% 88% / 0.65);
}

    .neoarv-btn--primary.neoarv-btn--theme-default:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 3px;
        box-shadow:
            inset 0 1px 0 hsl(45 90% 90% / 0.95),
            inset 0 0px 0 hsl(38 70% 20% / 0.7),
            0 3px 5px hsl(0 0% 0% / 0.65);
        filter: none;
    }

/* The violet counterpart, matching the second plate on the landing page.
   Select it with ColorTheme="ButtonColorTheme.Violet". */
.neoarv-btn--primary.neoarv-btn--theme-violet {
    background: linear-gradient(180deg, #C9BBE7 0%, #8E79C4 46%, #5B4790 100%);
    box-shadow:
        inset 0 1px 0 hsl(265 80% 93% / 0.9),
        inset 0 0px 0 hsl(265 55% 20% / 0.7),
        0 3px 5px hsl(0 0% 0% / 0.65);
    border-radius: 7.2px;
    color: #241640;
    text-shadow: 0 1px 0 hsl(265 80% 93% / 0.55);
}

    .neoarv-btn--primary.neoarv-btn--theme-violet:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 3px;
        box-shadow:
            inset 0 1px 0 hsl(265 80% 93% / 0.9),
            inset 0 0px 0 hsl(265 55% 20% / 0.7),
            0 3px 5px hsl(0 0% 0% / 0.65);
        filter: none;
    }

/* Both plates get the press dip and the hover sheen the other themes have. */
.neoarv-btn--theme-violet {
    overflow: hidden;
}

.neoarv-btn--theme-violet::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.30) 50%, transparent 100%);
    transform: translateX(-100%);
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .neoarv-btn--theme-violet:not(:disabled):not(.neoarv-btn--processing):hover::before {
        animation: neoarv-btn-sheen-sweep 0.7s ease-out;
    }
}

.neoarv-btn--theme-violet:not(:disabled):not(.neoarv-btn--processing):active {
    transform: scale(0.96);
    transition: transform 60ms ease-out;
}

/* Secondary Action Button - Outlined/subtle style */
.neoarv-btn--secondary {
    --btn-face-hi: rgb(255 255 255 / 8%);
    --btn-face-lo: rgb(0 0 0 / 28%);
    --btn-ink: var(--neoarv-color-text-secondary);
    --btn-ink-hi: rgb(0 0 0 / 52%);
    border: 1px solid var(--neoarv-color-border-default);
    background: var(--neoarv-color-surface-elevated);
    color: var(--neoarv-color-text-secondary);
}

    .neoarv-btn--secondary:focus-visible {
        outline: 2px solid var(--neoarv-color-accent-primary);
        outline-offset: 3px;
        border-color: var(--neoarv-color-border-default);
        background: var(--neoarv-color-surface-peak);
        box-shadow: none;
    }

.neoarv-btn--secondary:active {
    transform: scale(0.98);
}

.neoarv-btn--dimmed {
    filter: saturate(0.1) brightness(0.85);
}

/* Disabled state - fully grayed out, no interaction */
.neoarv-btn--secondary:disabled,
.neoarv-btn--secondary.neoarv-btn--disabled {
    cursor: not-allowed;
    filter: grayscale(1) brightness(0.5);
    box-shadow: none;
}

/* Processing state - muted but still colored, with spinner */
.neoarv-btn--secondary.neoarv-btn--processing {
    opacity: 0.7;
    cursor: wait;
    filter: brightness(0.8);
    box-shadow: none;
}

/* Success/Confirm Button */
.neoarv-btn--success {
    --btn-face-hi: hsl(140 70% 88% / 0.9);
    --btn-face-lo: hsl(140 60% 10% / 0.7);
    --btn-ink: #0C2A14;
    --btn-ink-hi: hsl(140 70% 88% / 0.55);
    background: var(--neoarv-btn-gradient-success);
    color: var(--neoarv-color-text-primary);
    /*var(--neoarv-shadow-glow-success);*/
}

/* Ghost/Text Button */
.neoarv-btn--ghost {
    background: transparent;
    color: var(--neoarv-color-text-secondary);
    box-shadow: none;
}

.neoarv-btn--ghost:focus-visible {
    outline: none;
    color: var(--neoarv-color-text-primary);
    box-shadow: var(--neoarv-shadow-focus);
}

/* Full Width Modifier */
.neoarv-btn--full {
    display: flex; /* Override inline-flex for margin auto centering */
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

/* Size Modifiers - min-widths allow growth for longer text */
.neoarv-btn--sm {
    height: var(--neoarv-btn-height-sm);
    min-width: clamp(80px, 20dvw, 120px);
    font-size: var(--neoarv-font-size-sm);
    padding: var(--neoarv-size-padding-xs) var(--neoarv-size-padding-md);
}

.neoarv-btn--md {
    min-width: clamp(120px, 30dvw, 180px);
}

.neoarv-btn--lg {
    height: var(--neoarv-btn-height-lg);
    min-width: clamp(160px, 40dvw, 240px);
    /* font-size: var(--neoarv-font-size-lg); */
}

/* ============================================================================
 * INPUT COMPONENTS - MudBlazor Overrides
 *
 * Elevation Law: fields are a trough inside the card — darker fill, not glass.
 * Apply on .mud-input (the outlined shell), not the transparent fieldset border.
 * ============================================================================ */

/* Text + number + password + textarea + select shells (rest state = trough) */
.neoarv-page-content .mud-input.mud-input-outlined,
.neoarv-page-content .mud-input.mud-input-filled,
.neoarv-page-content .mud-input.mud-input-text,
.neoarv-page-content .mud-select .mud-input,
.neoarv-page-content .mud-input-control.mud-select .mud-input,
.neoarv-page-content .mud-autocomplete .mud-input,
.neoarv-page-content .mud-input-control .mud-input {
    background: var(--neoarv-input-surface) !important;
    background-color: var(--neoarv-input-surface) !important;
    border-radius: var(--neoarv-radius-input);
    transition:
        background var(--neoarv-timing-fast) var(--neoarv-easing-default),
        background-color var(--neoarv-timing-fast) var(--neoarv-easing-default),
        box-shadow var(--neoarv-timing-fast) var(--neoarv-easing-default);
}

/* Hover + open/focus — stronger trough (50% black) */
.neoarv-page-content .mud-input.mud-input-outlined:hover:not(.mud-disabled),
.neoarv-page-content .mud-input.mud-input-filled:hover:not(.mud-disabled),
.neoarv-page-content .mud-input.mud-input-outlined:focus-within,
.neoarv-page-content .mud-input.mud-input-outlined.mud-input-focus,
.neoarv-page-content .mud-select .mud-input:hover:not(.mud-disabled),
.neoarv-page-content .mud-select .mud-input:focus-within,
.neoarv-page-content .mud-select .mud-input.mud-input-focus,
.neoarv-page-content .mud-autocomplete .mud-input:hover:not(.mud-disabled),
.neoarv-page-content .mud-autocomplete .mud-input:focus-within {
    background: var(--neoarv-input-surface-hover) !important;
    background-color: var(--neoarv-input-surface-hover) !important;
}

/* Outline stroke lives on the pseudo-border element — keep it transparent of fill */
.neoarv-page-content .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--neoarv-color-border-default);
    border-width: var(--neoarv-input-border-width);
    border-style: solid;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: var(--neoarv-radius-input);
}

.neoarv-page-content .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border,
.neoarv-page-content .mud-input.mud-input-outlined.mud-input-focus .mud-input-outlined-border {
    border-color: var(--neoarv-color-border-focus);
    box-shadow: var(--neoarv-shadow-focus-input);
}

/* Text color on shell. Do NOT zero .mud-input background here. */
.neoarv-page-content .mud-input:not(.mud-disabled),
.neoarv-page-content .mud-select:not(.mud-disabled) {
    color: var(--neoarv-color-text-primary) !important;
    -webkit-text-fill-color: var(--neoarv-color-text-primary) !important;
    opacity: 1 !important;
}

/* Inner text/password/textarea faces transparent so shell trough shows.
   MudSelect's .mud-select-input is included — shell still carries the fill. */
.neoarv-page-content .mud-input-root:not(:disabled),
.neoarv-page-content .mud-input-slot:not(:disabled),
.neoarv-page-content .mud-select-input:not(:disabled),
.neoarv-page-content input.mud-input-root:not(:disabled),
.neoarv-page-content textarea.mud-input-root:not(:disabled) {
    color: var(--neoarv-color-text-primary) !important;
    -webkit-text-fill-color: var(--neoarv-color-text-primary) !important;
    opacity: 1 !important;
    background-color: transparent !important;
    background: transparent !important;
}

/* MudSelect closed face: Mud paints palette Surface (#303751 gray-blue) on the
   control in some builds. Force the same trough as text fields at rest. */
.neoarv-page-content .mud-input-control.mud-select .mud-input.mud-input-outlined,
.neoarv-page-content .mud-select > .mud-input-control-input-container > .mud-input {
    background: var(--neoarv-input-surface) !important;
    background-color: var(--neoarv-input-surface) !important;
}

/* Select dropdown list is portaled under MudPopoverProvider (NOT under
   .neoarv-page-content), so it was using Mud Palette Surface gray-blue. */
.mud-popover .mud-paper,
.mud-popover .mud-list,
.mud-popover-provider .mud-list {
    background: var(--neoarv-input-menu-surface) !important;
    background-color: var(--neoarv-input-menu-surface) !important;
    color: var(--neoarv-color-text-primary) !important;
}

.mud-popover .mud-list-item,
.mud-popover .mud-list-item .mud-typography {
    color: var(--neoarv-color-text-primary) !important;
}

.mud-popover .mud-list-item:hover,
.mud-popover .mud-list-item.mud-list-item-clickable:hover,
.mud-popover .mud-list-item.mud-selected-item {
    background: color-mix(in srgb, black 25%, transparent) !important;
}

.neoarv-page-content input.mud-input-root::placeholder,
.neoarv-page-content textarea.mud-input-root::placeholder,
.neoarv-page-content .mud-input input::placeholder,
.neoarv-page-content .mud-input textarea::placeholder {
    color: color-mix(in srgb, var(--neoarv-color-text-primary) 55%, transparent) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--neoarv-color-text-primary) 55%, transparent) !important;
    opacity: 1 !important;
}

/* Disabled fields: same trough, muted */
.neoarv-page-content .mud-input.mud-disabled,
.neoarv-page-content .mud-select.mud-disabled .mud-input {
    background: color-mix(in srgb, var(--neoarv-input-surface) 70%, black) !important;
}

.neoarv-page-content .mud-input-control.mud-input-number-control .mud-input-numeric-spin {
    right: var(--neoarv-input-padding-x);
    inset-inline-end: var(--neoarv-input-padding-x);
}

.neoarv-page-content .mud-input-control.mud-input-number-control.mud-input-showspin .mud-input:not(.mud-input-adorned-end) input {
    padding-right: calc(var(--neoarv-input-number-spinner-width) + var(--neoarv-input-padding-x));
    padding-inline-end: calc(var(--neoarv-input-number-spinner-width) + var(--neoarv-input-padding-x));
}

/*.neoarv-input .mud-input > input.mud-input-root-outlined,
.neoarv-input .mud-input input,
.neoarv-input .mud-input textarea,
.neoarv-input div.mud-input-slot.mud-input-root-outlined,
.neoarv-input .mud-input-slot,
.neoarv-input .mud-select-input {
    padding: var(--neoarv-input-padding-y) var(--neoarv-input-padding-x);
    font-size: var(--neoarv-font-size-body);
    color: var(--neoarv-color-text-primary) !important;
    -webkit-text-fill-color: var(--neoarv-color-text-primary) !important;
    opacity: 1 !important;
}*/

/*.neoarv-input .mud-input-root,
.neoarv-input .mud-input,
.neoarv-input .mud-select {
    color: var(--neoarv-color-text-primary) !important;
    -webkit-text-fill-color: var(--neoarv-color-text-primary) !important;
    opacity: 1 !important;
}

.neoarv-input input::placeholder,
.neoarv-input textarea::placeholder {
    color: color-mix(in srgb, var(--neoarv-color-text-primary) 74%, transparent) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--neoarv-color-text-primary) 74%, transparent) !important;
    opacity: 1 !important;
}*/

/* Label styling - default and focused states */
/*.neoarv-input .mud-input-label {
    color: var(--neoarv-color-text-secondary);
    transition: color var(--neoarv-timing-fast) var(--neoarv-easing-default);
}*/

/* Label color when input is focused - uses focus-within on parent container */
/*.neoarv-input .mud-input-control:focus-within .mud-input-label {
    color: var(--neoarv-color-accent-primary);
}*/

/* Helper text styling */
/*.neoarv-input .mud-input-helper-text {
    color: var(--neoarv-color-text-muted);
    font-size: var(--neoarv-font-size-xs);
}*/

/* Error State - Manual error via HasError parameter */
.neoarv-input--error .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--neoarv-color-border-error);
    box-shadow: 0 0 clamp(4px, 1dvmin, 12px) var(--neoarv-color-error-glow);
}

/* Error State - MudBlazor validation error (automatic) */
.neoarv-input .mud-input-error .mud-input-outlined-border,
.neoarv-input .mud-input-control-error .mud-input-outlined-border,
.neoarv-input .mud-error .mud-input-outlined-border,
.neoarv-input.mud-input-error .mud-input-outlined-border {
    border-color: var(--neoarv-color-border-error) !important;
    box-shadow: 0 0 clamp(4px, 1dvmin, 12px) var(--neoarv-color-error-glow) !important;
}

/* Error label color */
.neoarv-input .mud-input-error + .mud-input-label,
.neoarv-input .mud-input-control-error .mud-input-label,
.neoarv-input .mud-error .mud-input-label {
    color: var(--neoarv-color-error) !important;
}

/* Validation Message (Ghost Slot - no layout shift) */
.neoarv-input-error {
    height: var(--neoarv-input-error-height);
    font-size: var(--neoarv-font-size-xs);
    color: var(--neoarv-color-error);
    opacity: 0;
    transition: opacity var(--neoarv-timing-fast) var(--neoarv-easing-default);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neoarv-input--error .neoarv-input-error {
    opacity: 1;
}

/* Error Shake Animation */
@keyframes neoarv-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-0.5dvmin); }
    75% { transform: translateX(0.5dvmin); }
}

.neoarv-input--error .mud-input-outlined-border {
    animation: neoarv-shake var(--neoarv-timing-normal) var(--neoarv-easing-default);
}

.mud-timeline-horizontal .mud-timeline-item .mud-timeline-item-divider {
    min-height: 0 !important;
}

.mud-timeline-horizontal .mud-timeline-item {
    padding: 0 !important;
}

.mud-timeline-horizontal.mud-timeline-position-top::before {
    top: 4px !important;
}

.mud-timeline-horizontal.mud-timeline-position-top .mud-timeline-item {
    height: 8px !important;
}

.mud-timeline-item-dot.mud-timeline-dot-size-small .mud-timeline-item-dot-inner {
    height: 24px !important;
    width: 24px !important;
}

.mud-timeline-item .mud-icon-size-small {
    font-size: 1rem !important;
}

.mud-timeline-item-dot .mud-timeline-item-dot-inner.mud-timeline-dot-default {
    background-color: #7b3fb58a;
}
/* ============================================================================
 * QUOTATIONS
 * ============================================================================
 * The product-wide pull-quote: accent rule on the left, primary ink, and the
 * attribution in muted mono beneath it.
 *
 * These rules used to live inside StaticDocumentLayout, which meant only the
 * /about documents could quote a source properly. The /tools reference panels
 * quote the same research under a different layout, so the treatment moved
 * here and both surfaces read from one definition.
 *
 * Bare elements on purpose: a blockquote is a blockquote everywhere, and no
 * page should have to know a class name to attribute a quote correctly.
 * StaticDocumentLayout still overrides these for the LEGAL document family
 * (parchment gold on shadowed white); every other surface takes what is here.
 * ============================================================================ */

blockquote {
    margin: 14px 0;
    padding: 2px 0 2px 16px;
    border-left: 3px solid var(--neoarv-color-accent-primary);
    font-style: normal;
    font-size: clamp(21px, min(3.1dvh, 5.6vw), 27px);
    line-height: 1.3;
    color: var(--neoarv-color-text-primary);
}

blockquote cite {
    display: block;
    margin-top: 9px;
    color: var(--neoarv-color-text-muted);
    font-family: var(--neoarv-font-family-mono);
    font-size: 12px;
    font-style: normal;
}

/* ============================================================================
 * SECTION HEADERS
 * ============================================================================ */

.neoarv-section-heading {
    display: flex;
    flex-direction: column;
    /* gap: var(--neoarv-size-gap-xs); */
    margin-bottom: var(--neoarv-size-gap-md);
    text-shadow: none;
}

.neoarv-section-title {
    color: var(--neoarv-color-text-primary);
    text-transform: uppercase;
    margin: 0;
}

.neoarv-section-heading .mud-typography-subtitle2 {
    font-style: italic;
    color: color-mix(in srgb, var(--neoarv-color-accent-primary) 62%, var(--neoarv-color-text-secondary));
    margin: -1.25rem 0.5rem 0.5rem 0;
    display: flex;
    justify-content: right;
    border-bottom: 2px solid var(--neoarv-color-border-default);
    font-size: var(--neoarv-font-size-xs);
}

/* ============================================================================
 * PAGE HEADERS
 * ============================================================================ */

.neoarv-page-heading {
    position: relative;
    display: block;
    /* The corner chrome is FIXED at the chrome inset (see PageHeading_css)
       and the title flows BELOW that band, full width and centred — the
       iOS large-title convention. This keeps the title dead-centred at
       every window width: the old grid put chrome in the title's own row
       (wide titles pushed right of centre, line-count changes made
       everything jump), and a symmetric side-clearance strangled titles
       on phones. */
    /* The padding clears the FIXED chrome band (chrome-inset law — see
       PageHeading_css); min-height equals it, so a chrome-only header (no
       title) reserves exactly the band. No bottom margin and no side
       margins (Alan, 2026-08-04 — "remove this space"; corners are fixed
       to the viewport now, and the title centres full-width): the scroll
       area's own top padding is the seam below. */
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--neoarv-chrome-inset) + 44px);
    min-height: calc(env(safe-area-inset-top, 0px) + var(--neoarv-chrome-inset) + 44px);
    margin-bottom: 0;
    /* The IDENTICAL surface stack the bottom tab bar paints (Alan,
       2026-08-04: header and footer bands share one background style):
       the content veil over the warm chrome token. The transparent
       overlay mode below overrides this back to transparent — the
       landing and document pages sit on their own room art. */
    /* The band paints nothing (Alan, 2026-08-05): with the content veil off
       too, the scroll mask dissolves content straight into the page gradient at
       both ends, and the seam needs no painted help. Kept for the record — the
       warm-to-dark version below was the attempt to fake at the top the hard
       edge the gradient's near-black floor gives the bottom for free. */
    /* background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--neoarv-chrome-warm) 55%, transparent) 0%,
        color-mix(in srgb, var(--neoarv-chrome-warm) 45%, transparent) 62%,
        hsl(20 30% 2.5% / 0.55) 84%,
        hsl(20 30% 2.5% / 0.85) 100%); */
}

/* Transparent (overlay) mode — landing + document pages. The corner chrome
   positions ITSELF (fixed, chrome-inset law), so this container has zero
   footprint: identical chrome geometry to the member pages BY CONSTRUCTION,
   not by a second calibration (Alan, 2026-08-04: "universally, no
   deviation"). Those pages carry no Title, so the normal mode's clearance
   padding must not reserve space here. */
.neoarv-page-heading--transparent {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    overflow: visible;
    background: transparent;
    z-index: 4;
}


h1.neoarv-page-title {
    color: var(--neoarv-color-text-primary);
    font-size: var(--neoarv-font-size-hero) !important;
    line-height: 1;
    margin: 0;
}

.neoarv-page-subtitle {
    color: var(--neoarv-color-text-secondary);
    font-size: var(--neoarv-font-size-sm) !important;
    line-height: 1.2;
    margin: 0;
    margin-bottom: 0.5rem;
}

/* ============================================================================
 * MUDBLAZOR OVERRIDES - Global Consistency
 * ============================================================================ */

/* MudLink inherits font-size from parent for inline usage */
.mud-link {
    font-size: inherit;
}

/* MudExpansionPanels - ensure full width */
.mud-expansion-panels {
    width: 100%;
}

.mud-expand-panel {
    width: 100%;
    background-color: inherit !important;
}

/* Inside ContentCard: keep separator lines when a panel expands.
   MudBlazor’s default expanded rule sets margin + border-bottom:none, which
   eats the divider between stacked panels (e.g. Sidereal “About” / “Research”). */
.neoarv-panel .mud-expand-panel {
    margin: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--neoarv-color-border-default) !important;
}

.neoarv-panel .mud-expand-panel:last-child {
    border-bottom: none !important;
}

.neoarv-panel .mud-expand-panel.mud-panel-expanded {
    margin: 0 !important;
    border-radius: 0 !important;
}

.neoarv-page-content .mud-paper,
.neoarv-page-content .mud-expansion-panel {
    background: var(--neoarv-card-gradient-subtle) !important;
    color: var(--neoarv-color-text-primary) !important;
}

.neoarv-page-content .mud-expansion-panel-header,
.neoarv-page-content .mud-table {
    background: transparent !important;
    color: var(--neoarv-color-text-primary) !important;
}

.neoarv-page-content .mud-alert {
    background: #fff1 !important;
}

    .neoarv-page-content .neoarv-picker-surface.mud-paper,
    .neoarv-page-content .neoarv-picker-surface.mud-expansion-panels,
    .neoarv-page-content .neoarv-picker-surface.mud-expansion-panel {
        background: hsl(0 0% 100% / 0.08) !important;
        color: var(--neoarv-color-text-primary) !important;
    }

        .neoarv-page-content .neoarv-picker-surface .mud-expansion-panel,
        .neoarv-page-content .neoarv-picker-surface .mud-expand-panel,
        .neoarv-page-content .neoarv-picker-surface .mud-expand-panel-header,
        .neoarv-page-content .neoarv-picker-surface .mud-expand-panel-content {
            background: transparent !important;
            background-color: transparent !important;
            color: var(--neoarv-color-text-primary) !important;
        }
    /* MudBlazor Layout Overrides */
    .mud-main-content {
        flex-grow: 1;
        overflow-y: auto;
        padding: 0 !important;
    }

    .mud-layout {
        height: 100dvh !important;
    }
    /* MudGrid spacing adjustments for design system */
    .mud-grid {
        gap: var(--neoarv-size-gap-sm, clamp(8px, 1.2dvh, 12px));
    }
    /* MudAlert customization */
    .mud-alert {
        border-radius: var(--neoarv-radius-md, clamp(8px, 1.2dvh, 12px)) !important;
    }
    /* MudDialog customization */
    .mud-dialog {
        background-color: rgb(77 77 77);
    }

    .mud-dialog .mud-dialog-content {
        padding: 0;
        box-shadow: 0 0 48px #ffffff6b;
        border-radius: 0;
    }
    /* MudButton text variant styling */
    .mud-button-text {
        font-size: var(--neoarv-font-size-sm, clamp(12px, 1.8dvh, 14px)) !important;
        letter-spacing: var(--neoarv-letter-spacing-caps, 0.1em) !important;
    }

    .mud-icon-root.mud-svg-icon {
        color: #ffffff60;
        --mud-ripple-color: #ffffffa0;
        filter: drop-shadow(0px 0px 2px black);
    }
    /* MudBlazor Gap utility */
    .gap-2 {
        gap: var(--neoarv-size-gap-sm, clamp(8px, 1.2dvh, 12px));
    }
    /* MudBlazor Margin bottom utility */
    .mb-3 {
        margin-bottom: var(--neoarv-size-gap-md, clamp(12px, 2dvh, 20px));
    }
    /* ============================================================================
 * UTILITY CLASSES
 * ============================================================================ */
    /* Text Truncation */
    .neoarv-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Visually Hidden (Accessibility) */
    .neoarv-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;
    }
    /* Focus Ring Utility */
    .neoarv-focus-ring:focus-visible {
        outline: none;
        box-shadow: var(--neoarv-shadow-focus);
    }
    /* Glow Text Animation */
    .neoarv-glow-text {
        text-shadow: 0 0 clamp(12px, 2.5dvmin, 28px) currentColor;
        animation: neoarv-glow var(--neoarv-timing-glow) var(--neoarv-easing-smooth) infinite;
    }

    @keyframes neoarv-glow {
        0%, 100% {
            filter: brightness(1);
        }

        50% {
            filter: brightness(1.3);
        }
    }
    /* Label style - etched into the material */
    .mud-expand-panel {
        width: 100%;
        left: 0;
        right: 0;
        align-items: center;
        font-size: var(--neoarv-font-size-sm);
        line-height: 1;
        min-height: 48px;
        outline: none;
        position: relative;
        transition: min-height .3s cubic-bezier(0.25, 0.8, 0.5, 1);
        user-select: none;
    }
    /* ============================================================================
 * PAGE TRANSITIONS - Pleasing fade-in animation. 
 * ============================================================================
 * Use class="page-enter" on the outermost container of your page 
 * to get a pleasing fade-in animation.
 *
 * Replaces use of <PageTransitions_css/> and <PageTransitions_v2_css/>
 * ============================================================================ */
    /* Page entry animation - fade in with subtle upward motion.
     * Uses `forwards` fill INTENTIONALLY: the persistent identity-matrix
     * transform left behind on `.neoarv-page-content` creates a containing
     * block for `position: fixed` descendants. That trap letterboxes
     * full-screen overlays (backgrounds, FeedbackReveal letters/overlay,
     * etc.) to the pillar-boxed content rect — exactly what we want, so
     * `100dvw` / `inset: 0` rendered overlays read as letterbox-bound.
     * Without `forwards` you get a visible layout jump after the
     * animation ends (overlays snap from letterboxed → full-viewport).
     * Components that need to break out of the trap (e.g. coin-flip-modal)
     * must do so explicitly via their own positioning math. */
    .page-enter {
        animation: pageEnter var(--neoarv-timing-slow) var(--neoarv-easing-default) forwards;
    }

    @keyframes pageEnter {
        from {
            opacity: 0;
            transform: translateY(var(--neoarv-size-gap-sm));
        }

        to {
            opacity: 1;
            /* INTENTIONAL: leave a non-`none` transform on `.neoarv-page-content`
             * after the animation completes (combined with `forwards` fill on
             * .page-enter). The persistent identity-matrix transform creates
             * a containing block for descendant `position: fixed` elements,
             * which traps full-screen overlays (RandomBackground canvases,
             * FeedbackReveal letters/overlay, etc.) inside the pillar-boxed
             * page-content rect instead of the raw viewport. That's the
             * design — backgrounds and reveal animations are sized in dvw and
             * we want dvw units to mean "viewport-relative within the
             * letterbox," which the trap delivers for free. Switching this
             * to `transform: none` causes a visible layout jump after the
             * animation ends because elements suddenly expand to the full
             * viewport width. Don't change this without also explicitly
             * letterboxing every consuming overlay. */
            transform: translateY(0);
        }
    }
    /* Alternative: faster, more subtle. See .page-enter for the `forwards`
     * fill rationale — keeps the containing block trap active. */
    .page-enter-fast {
        animation: pageEnterFast var(--neoarv-timing-normal) var(--neoarv-easing-default) forwards;
    }

    @keyframes pageEnterFast {
        from {
            opacity: 0;
            transform: translateY(var(--neoarv-size-gap-xs));
        }

        to {
            opacity: 1;
            /* See pageEnter — keep this as a real transform value
             * (translateY(0)) so the containing block trap stays active
             * after the animation completes. */
            transform: translateY(0);
        }
    }
    /* Alternative: scale in with fade. See .page-enter for the `forwards`
     * fill rationale — keeps the containing block trap active. */
    .page-enter-scale {
        animation: pageEnterScale var(--neoarv-timing-normal) var(--neoarv-easing-default) forwards;
    }

    @keyframes pageEnterScale {
        from {
            opacity: 0;
            transform: scale(0.98);
        }

        to {
            opacity: 1;
            /* See pageEnter — keep this as a real transform value (scale(1))
             * so the containing block trap stays active after completion. */
            transform: scale(1);
        }
    }
    /* Staggered children animation - for cards and list items.
     * Uses `forwards` fill (see .page-enter rationale). The opacity:0
     * base hides each child until its stagger-delayed animation reaches
     * opacity:1, then forwards fill preserves opacity:1 indefinitely. */
    .page-enter-stagger > * {
        opacity: 0;
        animation: staggerIn var(--neoarv-timing-normal) var(--neoarv-easing-default) forwards;
    }
        /* Stagger delays - calculated offsets (intentionally hardcoded for precision) */
        .page-enter-stagger > *:nth-child(1) {
            animation-delay: 0.05s;
        }

        .page-enter-stagger > *:nth-child(2) {
            animation-delay: 0.1s;
        }

        .page-enter-stagger > *:nth-child(3) {
            animation-delay: 0.15s;
        }

        .page-enter-stagger > *:nth-child(4) {
            animation-delay: 0.2s;
        }

        .page-enter-stagger > *:nth-child(5) {
            animation-delay: 0.25s;
        }

        .page-enter-stagger > *:nth-child(6) {
            animation-delay: 0.3s;
        }

        .page-enter-stagger > *:nth-child(7) {
            animation-delay: 0.35s;
        }

        .page-enter-stagger > *:nth-child(8) {
            animation-delay: 0.4s;
        }

    @keyframes staggerIn {
        from {
            opacity: 0;
            transform: translateY(var(--neoarv-size-gap-sm));
        }

        to {
            opacity: 1;
            /* See pageEnter — keep translateY(0) (real transform) so any
             * containing block trap on this descendant remains active. */
            transform: translateY(0);
        }
    }

/* ============================================================================
 * NEO PRODUCT SURFACES
 * ============================================================================
 * These final rules retire the old struck-key and leather treatments without
 * disturbing component behavior. Feature-specific immersive CSS can still
 * layer on top when a rendered scene needs its own controls.
 * ============================================================================ */

html,
body {
    background: var(--neoarv-page-background);
    color-scheme: dark;
}

.neoarv-bg-color-layer {
    max-width: none;
    background: var(--neoarv-page-gradient);
}

.neoarv-vignette-layer {
    max-width: none;
    background: var(--neoarv-page-vignette);
}

.neoarv-vignette-layer::after {
    opacity: 0.025;
}

.neoarv-stage {
    max-width: none;
}

.neoarv-appbar,
.neoarv-appbar--transparent {
    background: rgb(8 9 10 / 88%);
    border-bottom: 1px solid var(--neoarv-color-border-subtle);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.neoarv-panel {
    border-radius: var(--neoarv-radius-card);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%);
}

.neoarv-card--elevated,
.neoarv-picker-surface {
    background: var(--neoarv-card-gradient-subtle) !important;
    border: 1px solid var(--neoarv-color-border-subtle);
    border-radius: var(--neoarv-radius-card);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 6%),
        0 12px 34px rgb(0 0 0 / 22%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.neoarv-btn--primary.neoarv-btn--theme-default {
    --btn-ink: var(--neoarv-color-accent-primary);
    --btn-ink-hi: transparent;
    min-height: 44px;
    height: auto;
    padding: 0.78rem 1.25rem;
    border: 1px solid rgb(255 169 77 / 74%);
    border-radius: 6px;
    background: var(--neoarv-btn-gradient-primary);
    color: var(--neoarv-color-accent-primary);
    font-family: var(--neoarv-font-family-primary);
    font-size: var(--neoarv-font-size-sm);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: 0.075em;
    text-shadow: none;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 9%),
        inset 0 -1px 0 rgb(0 0 0 / 42%),
        0 1px 0 rgb(0 0 0 / 54%);
    filter: none;
    transform: none;
    transition:
        background 140ms ease,
        border-color 140ms ease,
        box-shadow 90ms ease,
        filter 140ms ease,
        transform 90ms ease;
}

.neoarv-btn--primary.neoarv-btn--theme-default::before {
    content: none !important;
    animation: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .neoarv-btn--primary.neoarv-btn--theme-default:not(:disabled):not(.neoarv-btn--processing):hover {
        filter: brightness(1.06);
        box-shadow:
            inset 0 1px 0 rgb(255 255 255 / 34%),
            inset 0 -1px 0 rgb(74 27 0 / 32%),
            0 0 0 1px rgb(242 154 50 / 18%);
    }
}

.neoarv-btn--primary.neoarv-btn--theme-default:not(:disabled):not(.neoarv-btn--processing):active {
    transform: translateY(1px);
    filter: brightness(0.94);
    box-shadow:
        inset 0 2px 5px rgb(67 24 0 / 48%),
        inset 0 0 0 1px rgb(255 210 154 / 12%);
    transition-duration: 60ms;
}

.neoarv-btn--primary.neoarv-btn--theme-default:focus-visible,
.neoarv-btn--primary.neoarv-btn--theme-violet:focus-visible {
    outline: 2px solid rgb(255 181 90 / 92%);
    outline-offset: 3px;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 30%),
        0 0 0 1px var(--neoarv-color-accent-primary);
}

.neoarv-btn--primary.neoarv-btn--theme-violet,
.neoarv-btn--theme-violet {
    --btn-ink: #f3eefc;
    border-color: rgb(170 139 234 / 72%);
    background: linear-gradient(180deg, #5d4f7a 0%, #463961 52%, #302740 100%);
    color: #f3eefc;
    text-shadow: none;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 16%),
        inset 0 -1px 0 rgb(17 9 31 / 48%),
        0 1px 0 rgb(0 0 0 / 58%);
}

.neoarv-btn--secondary {
    --btn-ink: var(--neoarv-color-text-primary);
    min-height: 44px;
    border: 1px solid var(--neoarv-color-border-default);
    border-radius: 6px;
    background: linear-gradient(180deg, #222428 0%, #181a1d 100%);
    color: var(--neoarv-color-text-primary);
    text-shadow: none;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 7%),
        inset 0 -1px 0 rgb(0 0 0 / 48%);
}

.neoarv-btn--secondary:focus-visible {
    outline: 2px solid rgb(255 181 90 / 92%);
    outline-offset: 3px;
    border-color: var(--neoarv-color-accent-primary);
    box-shadow: inset 0 -2px 0 var(--neoarv-color-accent-primary);
}

.neoarv-btn--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--neoarv-color-text-secondary);
    box-shadow: none;
}

.neoarv-page-content .mud-input.mud-input-outlined,
.neoarv-page-content .mud-input.mud-input-filled,
.neoarv-page-content .mud-input.mud-input-text,
.neoarv-page-content .mud-select .mud-input,
.neoarv-page-content .mud-input-control.mud-select .mud-input,
.neoarv-page-content .mud-autocomplete .mud-input,
.neoarv-page-content .mud-input-control .mud-input {
    background: var(--neoarv-input-surface) !important;
    border-radius: var(--neoarv-radius-input);
    box-shadow:
        inset 0 2px 7px rgb(0 0 0 / 58%),
        inset 0 1px 0 rgb(255 255 255 / 3%);
}

.neoarv-page-content .mud-input.mud-input-outlined:hover:not(.mud-disabled),
.neoarv-page-content .mud-input.mud-input-filled:hover:not(.mud-disabled),
.neoarv-page-content .mud-select .mud-input:hover:not(.mud-disabled),
.neoarv-page-content .mud-autocomplete .mud-input:hover:not(.mud-disabled) {
    background: var(--neoarv-input-surface-hover) !important;
}

.neoarv-page-content .mud-input.mud-input-outlined:focus-within,
.neoarv-page-content .mud-input.mud-input-outlined.mud-input-focus,
.neoarv-page-content .mud-select .mud-input:focus-within,
.neoarv-page-content .mud-select .mud-input.mud-input-focus,
.neoarv-page-content .mud-autocomplete .mud-input:focus-within {
    background: var(--neoarv-input-surface-hover) !important;
    box-shadow:
        inset 0 2px 7px rgb(0 0 0 / 62%),
        inset 0 -2px 0 var(--neoarv-color-accent-primary) !important;
}

.neoarv-page-content .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border,
.neoarv-page-content .mud-input.mud-input-outlined.mud-input-focus .mud-input-outlined-border {
    border-color: var(--neoarv-color-border-default);
    box-shadow: none;
}

.mud-popover-paper,
.mud-menu-paper,
.mud-select-popover {
    background: #17191d !important;
    border: 1px solid var(--neoarv-color-border-default) !important;
    border-radius: var(--neoarv-radius-card) !important;
    box-shadow: 0 18px 42px rgb(0 0 0 / 48%) !important;
}

.mud-dialog {
    background: var(--neoarv-card-gradient) !important;
    border: 1px solid var(--neoarv-color-border-default);
    border-radius: var(--neoarv-radius-card) !important;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 7%),
        0 24px 70px rgb(0 0 0 / 58%) !important;
}

.mud-dialog-title {
    border-bottom: 1px solid var(--neoarv-color-border-subtle);
}

.mud-drawer {
    background: #101113;
    color: var(--neoarv-color-text-primary);
}

.neoarv-page-content .mud-paper,
.neoarv-page-content .mud-expansion-panel,
.neoarv-page-content .mud-expansion-panel-header,
.neoarv-page-content .mud-table {
    background-color: rgb(23 24 27 / 84%) !important;
    background-image: linear-gradient(180deg, rgb(255 255 255 / 2.5%), transparent) !important;
    color: var(--neoarv-color-text-primary) !important;
}

.neoarv-reconnect-panel {
    background:
        linear-gradient(180deg, rgb(255 255 255 / 4%), transparent 42%),
        var(--neoarv-color-surface-elevated);
    border-color: var(--neoarv-color-border-default);
    border-radius: var(--neoarv-radius-card);
}

#components-reconnect-modal.neoarv-reconnect-modal {
    background: rgb(3 5 7 / 82%);
}

@media (max-width: 640px) {
    .mud-dialog-container {
        align-items: flex-end;
        padding: 0;
    }

    .mud-dialog:not(:has(.neoarv-msgbox)) {
        width: 100%;
        max-width: none;
        margin: 0;
        border-radius: 14px 14px 0 0 !important;
        border-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}