/* ===================================================================
   WHITEFLAG — base.css
   Single source of truth for shared styles across all pages.
   Page-specific overrides go in each page's inline <style> block.
   =================================================================== */

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

/* ---- LIGHT GREYSCALE PALETTE ---- */
:root {
    /* Backgrounds */
    --bg:            #ffffff;
    --bg-elevated:   #f7f7f8;
    --bg-surface:    #f0f0f2;
    --bg-hover:      rgba(0,0,0,0.03);  /* canonical (styleguide.html) */
    --bg-active:     rgba(0,0,0,0.06);  /* canonical (styleguide.html) */

    /* Cards — flat, no gradient */
    --card-bg:       #f7f7f8;
    --card-bg-solid: #f7f7f8;

    /* Accent — restrained, only used where color is needed.
       NOTE: --accent doubles as both default dark text color AND a "filled
       button / pill / active tab" background. This is a contrast trap:
       writing `background: var(--accent); color: var(--text-main)` looks
       like a contrasting pair but resolves to #1a1a1a on #1a1a1a (invisible).
       Whenever you set `background: var(--accent)`, set `color: var(--accent-on)`. */
    --accent:        #1a1a1a;
    --accent-on:     #ffffff;  /* paired foreground for any --accent background */
    --accent-hover:  #000000;
    --accent-muted:  rgba(0,0,0,0.06);
    --accent-subtle: rgba(0,0,0,0.04);  /* canonical (styleguide.html) */
    --accent-red:    #c4200a;

    /* Text */
    --text-primary:  #111111;
    --text-main:     #1a1a1a;
    --text-secondary:#4a4a4a;
    --text-tertiary: #757575;
    --text-muted:    #999999;
    --text-faint:    #c0c0c0;

    /* Borders */
    --border:        rgba(0,0,0,0.08);
    --border-strong: rgba(0,0,0,0.15);
    --border-accent: rgba(0,0,0,0.2);

    /* Semantic — muted, desaturated tones for light bg */
    --positive:      #1a7f5a;
    --negative:      #b91c1c;
    --warning:       #a16207;
    --info:          #2563eb;
    --purple:        #8b5cf6;
    --caution:       #c2410c;

    /* Entity-type palette — neutral distinguishing hues for categorical
       encoding (e.g. Network Constructor coalition members). Deliberately
       avoids reusing --positive / --negative / --warning so that the same
       view can layer SEMANTIC color (good/bad/score) on top of CATEGORICAL
       color (entity type) without visual collision. All five are AA-legible
       on white at 12px. Used as both text color and as background at low
       opacity (typically `${tc}20` for fill + `${tc}40` for border). */
    --type-city:                 #2563eb;  /* urban/blue */
    --type-state:                #475569;  /* slate/institutional */
    --type-territory:            #0e7490;  /* teal/geographic */
    --type-sovereign-city-state: #7c3aed;  /* purple/hybrid */
    --type-platform:             #be185d;  /* magenta/corporate */

    /* Type Scale (1.25 ratio, 14px base) */
    --text-2xs:  9px;
    --text-xs:   10px;
    --text-sm:   12px;
    --text-base: 14px;
    --text-md:   16px;
    --text-lg:   20px;
    --text-xl:   24px;
    --text-2xl:  32px;
    --text-3xl:  40px;
    --text-4xl:  48px;

    /* Spacing (8px base scale) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Radii — sharp editorial: 0 everywhere */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
}

/* ---- BODY ---- */
html, body {
    /* Clip horizontal overflow at the document level so a single wide
       child element (a wide <table>, <pre>, image, etc.) cannot push
       the document wider than the viewport. This is critical on mobile:
       when the document is wider than the viewport, position:fixed
       elements anchor to the wider document (per the CSS spec's
       "initial containing block" rules), so a dropdown with right: 0
       lands offscreen instead of at the visible right edge. The fix
       belongs at the document root because individual pages have
       legitimate wide content (data tables, code blocks) that should
       scroll inside their own containers, not via the page itself. */
    overflow-x: hidden;
}
body {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text-main);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ---- FOUT PREVENTION ---- */
.logo-group h1, header h1 { opacity: 0; transition: opacity 0.15s ease-in; }
.fonts-loaded .logo-group h1, .fonts-loaded header h1 { opacity: 1; }

/* ---- HEADER / NAV / LOGO ---- */
header {
    background: var(--bg);
    color: var(--text-main);
    padding: 15px 40px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo-group { min-height: 45px; }
.logo-group h1 {
    font-family: 'DynaPuff', cursive;
    font-size: 28px;
    letter-spacing: 0.05em;
    color: var(--text-primary) !important;
    margin: 0;
    line-height: 1;
    font-weight: 700;
}
.logo-group h1 a,
.logo-group h1 a:hover,
.logo-group h1 a:visited { color: var(--text-primary) !important; text-decoration: none; }

.tagline {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 3px;
    font-family: 'IBM Plex Mono', monospace;
    line-height: 1;
}

header nav {
    display: flex;
    align-items: center;
    gap: 0;
}
header nav a {
    color: var(--text-secondary);
    text-decoration: none;
    margin-left: 30px;
    font-size: 12px;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    transition: color 0.2s;
    line-height: 1;
}
header nav a:hover,
header nav a.active {
    color: var(--text-primary);
}

/* ---- HAMBURGER (mobile) ---- */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 8px;
    margin-right: 4px;
}
.hamburger span {
    width: 15px;
    height: 2px;
    background: var(--text-main);
    margin: 2px 0;
    border-radius: 2px;
    transition: all 0.3s;
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(3px, 3px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(3.5px, -3.5px); }

/* ---- CONTAINER ---- */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px;
}

/* ---- FOOTER ---- */
footer {
    background: var(--bg);
    color: var(--text-secondary);
    text-align: center;
    padding: 20px 40px;
    font-size: 12px;
    margin-top: 60px;
    border-top: 1px solid var(--border);
}
footer a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
}
footer a:hover {
    text-decoration: underline;
}

/* ---- LINKS (global) ---- */
a { color: var(--text-primary); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }

/* ---- LEGAL DISCLAIMER BANNER ---- */
.legal-banner {
    background: #fefce8;
    border-bottom: 1px solid rgba(161,98,7,0.15);
    padding: 15px 20px;
}
.legal-banner-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.legal-banner-text {
    font-size: 13px;
    color: var(--text-secondary);
    flex: 1;
}
.legal-banner-text strong {
    color: var(--warning);
}
.legal-banner-text a {
    color: var(--warning);
    text-decoration: underline;
    font-weight: 600;
}
.legal-banner-dismiss {
    background: rgba(161,98,7,0.08);
    color: var(--warning);
    border: 1px solid rgba(161,98,7,0.2);
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s;
}
.legal-banner-dismiss:hover {
    background: rgba(161,98,7,0.15);
}

/* ========== CODEX DRAWER ========== */
.codex-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-muted);
    color: var(--text-secondary);
    border: none;
    font-size: 10px;
    font-weight: 700;
    font-family: 'IBM Plex Sans', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    vertical-align: middle;
    margin-left: 6px;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
.codex-trigger:hover {
    background: var(--border-strong);
    box-shadow: none;
}

.codex-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    height: 100vh;
    background: var(--bg);
    border-left: 1px solid var(--border-strong);
    z-index: 10000;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0,0,0,0.06);
}
.codex-drawer.open { transform: translateX(0); }

.codex-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
    flex-shrink: 0;
}
.codex-drawer-header .codex-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: 'IBM Plex Mono', monospace;
}
.codex-drawer-header .codex-ref {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'IBM Plex Mono', monospace;
}
.codex-drawer-header .codex-ref a { color: var(--text-primary); text-decoration: none; }
.codex-drawer-header .codex-ref a:hover { text-decoration: underline; }

.codex-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 0;
    transition: all 0.2s;
    line-height: 1;
}
.codex-close:hover { color: var(--text-primary); background: var(--bg-hover); }

.codex-drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
.codex-drawer-body::-webkit-scrollbar { width: 6px; }
.codex-drawer-body::-webkit-scrollbar-track { background: transparent; }
.codex-drawer-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 3px; }
.codex-drawer-body::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }

.codex-entry-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; line-height: 1.3; }
.codex-entry-summary { font-size: 13px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 20px; }

.codex-formula-block {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-muted);
    border-radius: 0;
    padding: 14px 16px;
    margin-bottom: 20px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-x: auto;
}

.codex-section-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    margin-top: 16px;
}
.codex-section-text { font-size: 12px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 12px; }

.codex-data-sources {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.codex-related {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.codex-related-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.codex-related a { display: block; font-size: 12px; color: var(--text-primary); text-decoration: none; padding: 4px 0; cursor: pointer; transition: color 0.2s; }
.codex-related a:hover { color: var(--text-tertiary); }

.codex-full-link { display: block; margin-top: 16px; font-size: 12px; color: var(--text-primary); text-decoration: none; font-weight: 600; transition: color 0.2s; }
.codex-full-link:hover { color: var(--text-tertiary); }

.codex-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; }
.codex-overlay.active { display: block; }

/* --- LAYOUT UTILITIES --- */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }

/* --- CARD / CONTAINER --- */
.wf-card { padding: var(--space-4); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); }

/* --- CALLOUT (border-left accent) --- */
.wf-callout { border-left: 4px solid var(--accent); padding: var(--space-4); background: var(--bg-elevated); border-radius: var(--radius-md); }
.wf-callout--positive { border-left-color: var(--positive); }
.wf-callout--negative { border-left-color: var(--negative); }
.wf-callout--warning  { border-left-color: var(--warning); }
.wf-callout--info     { border-left-color: var(--info); }

/* --- TYPOGRAPHY --- */
.font-mono { font-family: 'IBM Plex Mono', monospace; }
.text-data { font-family: 'IBM Plex Mono', monospace; font-size: var(--text-xs); }
.text-label { font-family: 'IBM Plex Mono', monospace; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }

/* --- SEMANTIC COLOR CLASSES (for JS templates) --- */
.color-positive { color: var(--positive); }
.color-negative { color: var(--negative); }
.color-warning  { color: var(--warning); }
.color-info     { color: var(--info); }

/* --- BUTTON (legacy, kept for backwards compat — prefer .btn-primary etc.) --- */
.wf-btn { padding: 8px 15px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); font-family: 'IBM Plex Sans', sans-serif; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }

/* --- MAP --- */
.map-container { --map-no-data: #e0e0e0; --map-stroke: rgba(0,0,0,0.1); }

/* ===================================================================
   COMPONENT LIBRARY (canonical, ported from styleguide.html Feb 2026)
   Use these classes in markup; pages should not redefine them inline.
   =================================================================== */

/* --- TYPE SCALE --- */
.type-display-4xl { font-size: var(--text-4xl); font-weight: 800; line-height: 1.1;  letter-spacing: -0.02em; }
.type-display-3xl { font-size: var(--text-3xl); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.type-display-2xl { font-size: var(--text-2xl); font-weight: 800; line-height: 1.2;  letter-spacing: -0.01em; }
.type-heading-xl  { font-size: var(--text-xl);  font-weight: 700; line-height: 1.25; }
.type-heading-lg  { font-size: var(--text-lg);  font-weight: 700; line-height: 1.3;  }
.type-body-md     { font-size: var(--text-md);   font-weight: 400; line-height: 1.6; color: var(--text-secondary); }
.type-body-base   { font-size: var(--text-base); font-weight: 400; line-height: 1.6; color: var(--text-secondary); }
.type-body-sm     { font-size: var(--text-sm);   font-weight: 400; line-height: 1.5; color: var(--text-tertiary); }
.type-caption     { font-size: var(--text-xs);  font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); }
.type-micro       { font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }

/* --- BUTTONS ---
   .btn / .btn-primary / .btn-outline / .btn-ghost / .btn-sm intentionally
   omitted from base.css for now: 12 pages already define their own .btn
   inline. Will be added in Phase 3 alongside the per-page port to avoid
   silently inheriting text-transform/font-weight into existing buttons.
   See styleguide.html lines 400-445 for the canonical spec. */

/* --- HEADLINE CARD — single source of truth, no per-phase color --- */
.headline-card {
    background: transparent;
    border: 1px solid var(--border);
    border-top: 2px solid var(--accent);
    border-radius: 0;
    padding: var(--space-4);
}
.headline-card .fit-badge {
    background: rgba(0,0,0,0.06);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 2px 5px;
    font-size: var(--text-2xs);
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--accent);
}
.headline-card .tag {
    font-size: var(--text-2xs);
    padding: 2px 6px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    background: rgba(0,0,0,0.04);
    color: var(--text-secondary);
}
.headline-card .tag.phase-tag {
    background: rgba(0,0,0,0.04);
    border-left: 3px solid var(--accent);
    color: var(--text-secondary);
    font-weight: 700;
}
.headline-card .rationale {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
    border-top: 1px solid rgba(0,0,0,0.04);
    padding-top: 10px;
}

/* --- CARDS --- */
.card-flat {
    background: rgba(0,0,0,0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}
.card-gradient {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}
.card-accented {
    background: rgba(0,0,0,0.03);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}
.card-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    margin-bottom: var(--space-2);
}
.card-title {
    font-size: var(--text-md);
    font-weight: 700;
    margin-bottom: var(--space-2);
}
/* .card-body intentionally omitted: index.html already uses .card-body
   as a panel layout class (padding/flex/scroll). Add in Phase 3 after
   index.html's panel is renamed. Canonical spec: styleguide.html:486. */

/* --- DATA TABLE --- */
.sample-table {
    width: 100%;
    border-collapse: collapse;
}
.sample-table thead { background: rgba(0,0,0,0.04); }
.sample-table th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border-strong);
    font-weight: 700;
}
.sample-table td {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    border-bottom: 1px solid var(--border);
}
.sample-table tr:nth-child(even) { background: rgba(0,0,0,0.015); }
.sample-table tr:hover            { background: rgba(0,0,0,0.03); }
.sample-table .mono     { font-family: 'IBM Plex Mono', monospace; }
.sample-table .positive { color: var(--positive); }
.sample-table .negative { color: var(--negative); }

/* --- BADGES ---
   .badge intentionally omitted: faq.html and valuation-framework.html
   already define their own .badge inline. Add in Phase 3.
   Canonical spec: styleguide.html lines 541-556. */

/* --- TABS ---
   .tab-bar / .tab-item intentionally omitted: terminal.html already
   defines its own .tab-bar inline. Add in Phase 3.
   Canonical spec: styleguide.html lines 559-590. */

/* --- INPUTS --- */
.input-field {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: rgba(0,0,0,0.03);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-family: 'IBM Plex Sans', sans-serif;
    transition: border-color 0.15s;
}
.input-field::placeholder { color: var(--text-faint); }
.input-field:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}
.input-label {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

/* --- STAT DISPLAYS ---
   .stat-number / .stat-number-light / .stat-label intentionally omitted:
   detachable-assets.html nests these heavily inside .network-stat-card,
   .fa-stat-card, .detachments-stat-card, etc. (see lines 600, 755, 990).
   Add in Phase 3 alongside the detachable-assets port.
   Canonical spec: styleguide.html lines 768-800. */

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
    header { padding: 10px 15px; }
    .logo-group h1 { font-size: 18px; }

    header nav {
        position: fixed;
        top: 50px;
        left: auto;
        right: 0;
        width: 33.33%;
        min-width: 160px;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        border-left: 1px solid var(--border);
        flex-direction: column;
        padding: 0;
        display: none;
        z-index: 999;
    }
    header nav.active { display: flex; }
    header nav a {
        margin: 0;
        padding: 12px 20px;
        border-bottom: 1px solid var(--border);
        font-size: 11px;
        width: 100%;
        text-align: right;
    }
    header nav a:last-child { border-bottom: none; }

    .hamburger { display: flex; }

    .container { padding: 30px 15px; }

    .codex-drawer {
        width: 100%;
        height: 60vh;
        top: auto;
        bottom: 0;
        right: 0;
        border-left: none;
        border-top: 1px solid var(--border);
        border-radius: 0;
        transform: translateY(100%);
    }
    .codex-drawer.open { transform: translateY(0); }
    .codex-drawer::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: rgba(0,0,0,0.1);
        border-radius: 2px;
        margin: 8px auto 0;
    }
    .codex-trigger { width: 14px; height: 14px; font-size: 9px; }
}

@media (max-width: 480px) {
    .logo-group h1 { font-size: 16px; }
    .container { padding: 20px 15px; }
}