/* Canonical breakpoint: mobile <=768px, desktop >=769px. Do not hand-write boundaries. */

/* Anomaly Rising primary stylesheet.

   Visual direction: restrained strategic sci-fi command interface — dark
   layered surfaces, blue accent, sparing gold highlight, readable data
   density. See docs/UI_RULESET.md for the full design system. CRT scanlines,
   ambient phosphor glow, hazard stripes and heavy bracket chrome are
   intentionally absent: glow is reserved for focus + active state. */

/* === CSS Reset === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* === Design Tokens =====================================================
   Canonical tokens follow docs/UI_RULESET.md section 16. Backward-compat
   aliases at the end let pre-refactor selectors keep working without
   touching other CSS files or templates.
   ===================================================================== */
:root {
    /* Surfaces */
    --color-bg-app: #0b1220;
    --color-bg-panel: #0f1624;
    --color-bg-panel-raised: #152233;
    --color-bg-input: #0a111d;

    /* Borders */
    --color-border-subtle: #1e2a3a;
    --color-border-active: #34689a;

    /* Brand + status */
    --color-accent: #3b82f6;
    --color-accent-soft: #6aa9f8;
    --color-accent-rgb: 59, 130, 246;
    --color-highlight: #f5b942;
    --color-highlight-rgb: 245, 185, 66;
    --color-success: #22c55e;
    --color-success-rgb: 34, 197, 94;
    --color-warning: #f59e0b;
    --color-warning-rgb: 245, 158, 11;
    --color-danger: #ef4444;
    --color-danger-rgb: 239, 68, 68;

    /* Text */
    --color-text-primary: #e6eaf2;
    --color-text-secondary: #b1bac7;
    --color-text-muted: #8290a2;

    /* Spacing — 8px rhythm */
    --space-0-5: 0.25rem;   /* 4px */
    --space-1: 0.5rem;      /* 8px */
    --space-1-5: 0.75rem;   /* 12px */
    --space-2: 1rem;        /* 16px */
    --space-3: 1.5rem;      /* 24px */
    --space-4: 2rem;        /* 32px */
    --space-5: 2.5rem;      /* 40px */
    --space-6: 3rem;        /* 48px */
    --space-8: 4rem;        /* 64px */

    /* Shape */
    --radius-control: 0.5rem;   /* 8px */
    --radius-panel: 0.75rem;    /* 12px */

    /* Motion */
    --transition-fast: 120ms ease;
    --transition-normal: 180ms ease;

    /* Focus */
    --focus-ring: 0 0 0 2px var(--color-accent);

    /* Typography — body uses system sans for readable density; display +
       numeric data stay on Space Mono (already loaded via base.html). */
    --font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Space Mono', 'JetBrains Mono', ui-monospace, monospace;
    --font-mono: 'Space Mono', 'JetBrains Mono', ui-monospace, monospace;

    /* Shell */
    --shell-max: 1600px;
    --shell-container-height: 1200px;
    --sidebar-width: 232px;
    --resource-bar-height: 68px;

}

/* === Race-specific accent overrides ===================================
   Each race tints its empire's accent. Tints flow through --color-accent /
   --color-accent-soft / --accent-rgb so every accent-aware component picks
   them up automatically; --text-accent + --race-primary stay aliased for
   legacy consumers in other CSS files. */
body.race-terran {
    --color-accent: #3b82f6;
    --color-accent-soft: #6aa9f8;
    --color-accent-rgb: 59, 130, 246;
}

body.race-aspharian {
    --color-accent: #f59e0b;
    --color-accent-soft: #fbbf24;
    --color-accent-rgb: 245, 158, 11;
}

body.race-omarian {
    --color-accent: #a78bfa;
    --color-accent-soft: #c4b5fd;
    --color-accent-rgb: 167, 139, 250;
}

body.race-raukarian {
    --color-accent: #f87171;
    --color-accent-soft: #fca5a5;
    --color-accent-rgb: 248, 113, 113;
}

body.race-caelan {
    --color-accent: #60a5fa;
    --color-accent-soft: #93c5fd;
    --color-accent-rgb: 96, 165, 250;
}

body[class*="race-"] {
    --text-accent: var(--color-accent);
    --accent-rgb: var(--color-accent-rgb);
    --race-primary: var(--color-accent);
    --race-primary-rgb: var(--color-accent-rgb);
}

/* === Base elements =================================================== */
html {
    font-size: 16px;
    line-height: 1.45;
    color-scheme: dark;
}

body {
    font-family: var(--font-body);
    font-size: 0.875rem;
    background: var(--color-bg-app);
    color: var(--color-text-primary);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Heading scale per ruleset §4.1. Uppercase + letter-spacing reserved for
   headings and micro-labels only — body and table content stay sentence case. */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

h1 { font-size: 2rem;    letter-spacing: 0.01em; }   /* 32px */
h2 { font-size: 1.125rem; letter-spacing: 0.08em; font-weight: 600; }  /* 18px */
h3 { font-size: 0.875rem; letter-spacing: 0.04em; font-weight: 600; }  /* 14px */
h4 { font-size: 0.8125rem; letter-spacing: 0.04em; font-weight: 600; }
h5 { font-size: 0.75rem; letter-spacing: 0.06em; font-weight: 600; }
h6 { font-size: 0.6875rem; letter-spacing: 0.08em; font-weight: 600; color: var(--color-text-secondary); }

p {
    color: var(--color-text-secondary);
    line-height: 1.55;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-soft);
    text-decoration: none;
}

a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

code, pre {
    font-family: var(--font-mono);
}


::selection {
    background: rgba(var(--color-accent-rgb), 0.35);
    color: var(--color-text-primary);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-app);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-subtle);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-active);
}

abbr[title] {
    text-decoration: none;
    cursor: help;
    border-bottom: none;
}

details > summary {
    list-style: none;
    cursor: pointer;
}
details > summary::-webkit-details-marker {
    display: none;
}
details > summary::before {
    content: '\25B8';
    display: inline-block;
    margin-right: var(--space-1);
    transition: transform var(--transition-fast);
    color: var(--color-text-muted);
}
details[open] > summary::before {
    transform: rotate(90deg);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[x-cloak] { display: none !important; }

/* Sidebar rules moved to shell.desktop.css */
/* Main content area shell rules moved to shell.desktop.css */

.app-content {
    flex: 1;
    padding: var(--space-3);
}

.app-main {
    position: relative;
}

.page {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* Bottom tabs are hidden by default everywhere; shell.mobile.css flips them
   to flex at <=768px. This default must live in always-loaded base.css so the
   bar stays hidden on desktop (shell.mobile.css does not load at >=769px). */
.bottom-tabs { display: none; }

@media print {
    html, body {
        overflow: visible !important;
        height: auto !important;
        background: white;
        color: black;
    }
    .app-shell {
        height: auto !important;
        margin: 0 !important;
        max-width: none;
        background: white;
    }
    .app-main {
        overflow-y: visible !important;
        height: auto !important;
        margin-left: 0 !important;
    }
    .app-sidebar,
    .bottom-tabs,
    .status-bar {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}