/* base.css
   Design tokens (Nine Realms + Yggdrasil palette), Dynamic Active Realm theme engine,
   100dvh Zero-Scroll viewport lock, full-bleed real estate container, top nav, UA-CH bar, and accessibility helpers.
   Load order: base.css -> components.css -> responsive.css */

:root {
    /* Core Obsidian & Blood Red Foundation */
    --bg-obsidian: #060609;
    --bg-surface: #0c0d13;
    --bg-card: #11131a;
    --bg-attr: #090a0f;
    --border-subtle: #232634;
    --text-main: #f4f5f8;
    --text-secondary: #cbd5e1;
    --text-muted: #a7bccb;
    --steel-silver: #e2e8f0;

    /* Nine Realms Color Palette Tokens */
    /* 1. Midgard (Websites & Public Presence) — Sovereign Blood Crimson */
    --midgard-main: #dc2626;
    --midgard-light: #f87171;
    --midgard-bg: rgba(220, 38, 38, 0.14);
    --midgard-border: rgba(220, 38, 38, 0.54);
    --midgard-grad: linear-gradient(180deg, rgba(220, 38, 38, 0.13) 0%, #11131a 44%);

    /* 2. Asgard (Domains, Email Shield & Watchtower) — Imperial Bifrost Gold */
    --asgard-main: #d97706;
    --asgard-light: #fbbf24;
    --asgard-bg: rgba(245, 158, 11, 0.14);
    --asgard-border: rgba(245, 158, 11, 0.54);
    --asgard-grad: linear-gradient(180deg, rgba(245, 158, 11, 0.13) 0%, #11131a 44%);

    /* 3. Vanaheim (QR Menus, Forms & Local Commerce) — Verdant Harvest Emerald */
    --vanaheim-main: #059669;
    --vanaheim-light: #34d399;
    --vanaheim-bg: rgba(16, 185, 129, 0.14);
    --vanaheim-border: rgba(16, 185, 129, 0.54);
    --vanaheim-grad: linear-gradient(180deg, rgba(16, 185, 129, 0.13) 0%, #11131a 44%);

    /* 4. Alfheim (Resumes, Bids & Admin Concierge) — Luminous Starlight Cyan */
    --alfheim-main: #0284c7;
    --alfheim-light: #38bdf8;
    --alfheim-bg: rgba(56, 189, 248, 0.14);
    --alfheim-border: rgba(56, 189, 248, 0.54);
    --alfheim-grad: linear-gradient(180deg, rgba(56, 189, 248, 0.13) 0%, #11131a 44%);

    /* 5. Nidavellir (3-Doc Fillable E-Sign Contracts) — Dwarven Forge Copper/Bronze */
    --nidavellir-main: #ea580c;
    --nidavellir-light: #fb923c;
    --nidavellir-bg: rgba(234, 88, 12, 0.14);
    --nidavellir-border: rgba(234, 88, 12, 0.54);
    --nidavellir-grad: linear-gradient(180deg, rgba(234, 88, 12, 0.13) 0%, #11131a 44%);

    /* 6. Muspelheim (Vehicle & Equipment Buyer's Guide) — Primordial Flame Rose-Red */
    --muspelheim-main: #e11d48;
    --muspelheim-light: #fb7185;
    --muspelheim-bg: rgba(225, 29, 72, 0.14);
    --muspelheim-border: rgba(225, 29, 72, 0.54);
    --muspelheim-grad: linear-gradient(180deg, rgba(225, 29, 72, 0.13) 0%, #11131a 44%);

    /* 7. Svartalfheim (Budget Trackers & Monthly Expense Optimization) — Deep Treasury Amethyst */
    --svartalfheim-main: #9333ea;
    --svartalfheim-light: #c084fc;
    --svartalfheim-bg: rgba(168, 85, 247, 0.14);
    --svartalfheim-border: rgba(168, 85, 247, 0.54);
    --svartalfheim-grad: linear-gradient(180deg, rgba(168, 85, 247, 0.13) 0%, #11131a 44%);

    /* 8. Niflheim / Helheim (Home Insurance & Legacy Vault) — Glacial Frost Teal */
    --niflheim-main: #0d9488;
    --niflheim-light: #2dd4bf;
    --niflheim-bg: rgba(20, 184, 166, 0.14);
    --niflheim-border: rgba(20, 184, 166, 0.54);
    --niflheim-grad: linear-gradient(180deg, rgba(20, 184, 166, 0.13) 0%, #11131a 44%);

    /* 9. Jotunheim (Billing Disputes & Monthly Bill Watchdog) — Frost-Giant Indigo Steel */
    --jotunheim-main: #4f46e5;
    --jotunheim-light: #818cf8;
    --jotunheim-bg: rgba(99, 102, 241, 0.14);
    --jotunheim-border: rgba(99, 102, 241, 0.54);
    --jotunheim-grad: linear-gradient(180deg, rgba(99, 102, 241, 0.13) 0%, #11131a 44%);

    /* 10. Yggdrasil (Nine-Realms Convergence Bundles) — Sovereign Crown Gold */
    --yggdrasil-main: #d97706;
    --yggdrasil-light: #fde047;
    --yggdrasil-bg: rgba(245, 158, 11, 0.16);
    --yggdrasil-border: rgba(251, 191, 36, 0.65);

    /* Dynamic Active Realm Tokens (Synchronized by js/deck.js on page/card switch) */
    --active-main: var(--midgard-main);
    --active-light: var(--midgard-light);
    --active-bg: var(--midgard-bg);
    --active-border: var(--midgard-border);
}

html[data-active-realm="midgard"] {
    --active-main: var(--midgard-main);
    --active-light: var(--midgard-light);
    --active-bg: var(--midgard-bg);
    --active-border: var(--midgard-border);
}
html[data-active-realm="asgard"] {
    --active-main: var(--asgard-main);
    --active-light: var(--asgard-light);
    --active-bg: var(--asgard-bg);
    --active-border: var(--asgard-border);
}
html[data-active-realm="vanaheim"] {
    --active-main: var(--vanaheim-main);
    --active-light: var(--vanaheim-light);
    --active-bg: var(--vanaheim-bg);
    --active-border: var(--vanaheim-border);
}
html[data-active-realm="alfheim"] {
    --active-main: var(--alfheim-main);
    --active-light: var(--alfheim-light);
    --active-bg: var(--alfheim-bg);
    --active-border: var(--alfheim-border);
}
html[data-active-realm="nidavellir"] {
    --active-main: var(--nidavellir-main);
    --active-light: var(--nidavellir-light);
    --active-bg: var(--nidavellir-bg);
    --active-border: var(--nidavellir-border);
}
html[data-active-realm="muspelheim"] {
    --active-main: var(--muspelheim-main);
    --active-light: var(--muspelheim-light);
    --active-bg: var(--muspelheim-bg);
    --active-border: var(--muspelheim-border);
}
html[data-active-realm="svartalfheim"] {
    --active-main: var(--svartalfheim-main);
    --active-light: var(--svartalfheim-light);
    --active-bg: var(--svartalfheim-bg);
    --active-border: var(--svartalfheim-border);
}
html[data-active-realm="niflheim"] {
    --active-main: var(--niflheim-main);
    --active-light: var(--niflheim-light);
    --active-bg: var(--niflheim-bg);
    --active-border: var(--niflheim-border);
}
html[data-active-realm="jotunheim"] {
    --active-main: var(--jotunheim-main);
    --active-light: var(--jotunheim-light);
    --active-bg: var(--jotunheim-bg);
    --active-border: var(--jotunheim-border);
}
html[data-active-realm="yggdrasil"] {
    --active-main: var(--yggdrasil-main);
    --active-light: var(--yggdrasil-light);
    --active-bg: var(--yggdrasil-bg);
    --active-border: var(--yggdrasil-border);
}

* {
    box-sizing: border-box;
}

/* Zero Horizontal Scroll Lock Across All UA-CH Modes */
html,
body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

body {
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;
    background-color: var(--bg-obsidian);
    background-image: radial-gradient(circle at 12% 0%, rgba(220, 38, 38, 0.14) 0%, transparent 40%), radial-gradient(circle at 88% 8%, rgba(217, 119, 6, 0.1) 0%, transparent 38%);
    color: var(--text-main);
    line-height: 1.36;
    -webkit-font-smoothing: antialiased;
}

/* 100dvh Zero-Vertical-Scroll Lock in Paged Mode (Desktop & Mobile UA-CH) */
html[data-view="paged"],
html[data-view="paged"] body {
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

html[data-view="all"],
html[data-view="all"] body {
    height: auto;
    min-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
}

/* Top Executive Bar with UA-CH Telemetry Pill */
.top-nav {
    flex-shrink: 0;
    background: rgba(6, 6, 9, 0.96);
    backdrop-filter: blur(12px);
    border-bottom: 2px solid var(--active-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.72);
    width: 100%;
    z-index: 100;
    transition: border-color 0.18s ease;
}

.nav-inner {
    width: min(98vw, 1760px);
    max-width: 1760px;
    margin: 0 auto;
    padding: 4px 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text-main);
    flex-shrink: 0;
}

.nav-rune-badge {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--active-bg);
    border: 1.5px solid var(--active-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.98em;
    font-weight: 800;
    color: var(--active-light);
    transition: all 0.18s ease;
}

.nav-brand-text {
    font-weight: 800;
    font-size: 0.88em;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

.nav-brand-text span {
    color: var(--active-light);
    font-weight: 600;
}

/* UA-CH Client Hints Telemetry & Mode Switcher */
.uach-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    background: var(--bg-attr);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.69em;
    min-width: 0;
    max-width: 100%;
}

.uach-status {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--active-light);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uach-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.uach-btn {
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 0.92em;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.uach-btn.active {
    background: var(--active-bg);
    color: #ffffff;
    border-color: var(--active-main);
}

.nav-cta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.74em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.btn-primary {
    background: linear-gradient(135deg, var(--midgard-main), #991b1b);
    color: #ffffff;
    border: 1px solid var(--midgard-light);
}

.btn-outline {
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--active-border);
}

/* Main Viewport Container — Maximizes Real Estate (Up to 1760px / 98vw) */
.container {
    width: min(98vw, 1760px);
    max-width: 1760px;
    margin: 0 auto;
    padding: 5px 12px 6px 12px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5px;
}

.deck-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Accessibility: skip link, visible keyboard focus, hover states */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 2000;
    background: var(--midgard-main);
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus {
    left: 12px;
}
:focus-visible {
    outline: 2px solid var(--active-light);
    outline-offset: 2px;
}
#main-content:focus {
    outline: none;
}
.btn-outline:hover,
.uach-btn:hover,
.legend-chip:hover {
    color: #fff;
    border-color: var(--active-border);
}
.btn-primary:hover {
    filter: brightness(1.12);
}
.legend-chip[role="button"] {
    cursor: pointer;
}