/* ==========================================================================
   Xdrinks platform — the shared layer.

   Loaded on EVERY page of both heads plus the platform-owned pages (chooser,
   login, cycles). It owns the design tokens, the single nav bar, and the shared
   chrome; each head's own style.css still owns its page-specific rules.

   Tokens live here and nowhere else. A colour typed directly into a template or
   a chart helper is a bug — read var(--…) instead, or the dark theme silently
   skips it.
   ========================================================================== */

:root {
    /* ground + ink */
    --ground:        #F7F2E9;
    --panel:         #FFFDF8;
    --panel-2:       #F1EADC;
    --ink:           #2A2724;
    --ink-soft:      #6B6459;
    --ink-faint:     #948B7C;
    --hairline:      #E3DACA;
    --hairline-firm: #D2C6AE;

    /* accent */
    --accent:        #B08D4C;
    --accent-ink:    #6E5629;
    --accent-wash:   #F3EADB;

    /* semantic */
    --ok:            #3F7A56;
    --warn:          #B0762C;
    --bad:           #9E4437;
    --ok-wash:       #E9F0EA;
    --warn-wash:     #F7EEDF;
    --bad-wash:      #F6E9E6;

    /* type */
    --display: Georgia, "Iowan Old Style", "Times New Roman", serif;
    --text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --numerals: var(--display);

    --radius: 4px;
    --nav-h: 46px;

    /* charts read these through getComputedStyle, so a series colour is a token like
       everything else and the dark theme cannot be missed */
    --chart-1: #B08D4C;
    --chart-2: #4A6E8F;
    --chart-3: #8C8378;
    --chart-axis: #6B6459;
    --chart-grid: rgba(42, 39, 36, 0.08);
}

:root[data-theme="dark"] {
    --ground:        #12161C;
    --panel:         #1A2029;
    --panel-2:       #212936;
    --ink:           #E8EDF2;
    --ink-soft:      #9AA7B4;
    --ink-faint:     #6D7B8A;
    --hairline:      #262D37;
    --hairline-firm: #333D4A;

    --accent:        #3DD6A3;
    --accent-ink:    #8DF0CC;
    --accent-wash:   #16302A;

    --ok:            #3DD6A3;
    --warn:          #E0B252;
    --bad:           #F0806E;
    --ok-wash:       #15302A;
    --warn-wash:     #302914;
    --bad-wash:      #33201D;

    /* figures go monospace in the dark theme — the emerald-on-slate look is a
       terminal, and proportional serif numerals fight it */
    --numerals: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

    --chart-1: #3DD6A3;
    --chart-2: #5FA8E8;
    --chart-3: #8C97A5;
    --chart-axis: #9AA7B4;
    --chart-grid: rgba(232, 237, 242, 0.09);
}

/* ---------------------------------------------------------------- chrome -- */
html { background: var(--ground); }
body {
    background: var(--ground);
    color: var(--ink);
    font-family: var(--text);
    margin: 0;
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }

/* ------------------------------------------------------------- the nav ---- */
/* ONE bar. Left: wordmark + head switcher. Centre: the CURRENT head's sections.
   Right: the data chip + the user menu. Nothing appears in two places. */
.xnav {
    display: flex; align-items: center; gap: 18px;
    height: var(--nav-h); padding: 0 16px;
    background: var(--panel);
    border-bottom: 1px solid var(--hairline-firm);
    font-size: 13px;
    position: sticky; top: 0; z-index: 50;
}
.xnav a { color: var(--ink-soft); text-decoration: none; }
.xnav a:hover { color: var(--ink); }

.xnav-mark {
    font-family: var(--display); font-size: 15px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.xnav-sections { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.xnav-sections a.on { color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.xnav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* the two dropdowns (head switcher, user menu) — <details>, no javascript */
.xmenu { position: relative; }
.xmenu > summary {
    list-style: none; cursor: pointer; color: var(--ink-soft);
    padding: 4px 8px; border: 1px solid var(--hairline-firm); border-radius: var(--radius);
    white-space: nowrap;
}
.xmenu > summary::-webkit-details-marker { display: none; }
.xmenu[open] > summary { color: var(--ink); background: var(--panel-2); }
.xmenu-body {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 190px;
    background: var(--panel); border: 1px solid var(--hairline-firm);
    border-radius: var(--radius); padding: 6px 0; z-index: 60;
    box-shadow: 0 6px 20px rgba(0,0,0,.10);
}
.xmenu-right .xmenu-body { left: auto; right: 0; }
.xmenu-body a, .xmenu-body .xmenu-dead, .xmenu-body button {
    display: block; width: 100%; text-align: left; box-sizing: border-box;
    padding: 7px 14px; font: inherit; background: none; border: 0; cursor: pointer;
    color: var(--ink-soft);
}
.xmenu-body a:hover, .xmenu-body button:hover { background: var(--panel-2); color: var(--ink); }
.xmenu-body .xmenu-dead { color: var(--ink-faint); cursor: default; }
.xmenu-sep { height: 1px; background: var(--hairline); margin: 6px 0; }
.xmenu-head { padding: 4px 14px; color: var(--ink-faint);
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }

/* the data chip — one compact statement of how current the numbers are */
.xchip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: 999px;
    background: var(--accent-wash); border: 1px solid var(--hairline-firm);
    color: var(--ink-soft); font-size: 12px; white-space: nowrap;
}
.xchip b { color: var(--ink); font-weight: 600; font-family: var(--numerals); }
.xchip.provisional::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--warn);
}

/* ------------------------------------------------------- chooser landing -- */
.xchooser { max-width: 940px; margin: 8vh auto; padding: 0 20px; }
.xchooser h1 { font-size: 30px; margin: 0 0 6px; }
.xchooser .lede { color: var(--ink-soft); margin: 0 0 30px; }
.xheads { display: flex; gap: 18px; flex-wrap: wrap; }
.xhead-card {
    flex: 1; min-width: 240px; padding: 22px;
    background: var(--panel); border: 1px solid var(--hairline-firm);
    border-radius: var(--radius); text-decoration: none; color: inherit;
    display: block;
}
a.xhead-card:hover { border-color: var(--accent); }
.xhead-card h2 { margin: 0 0 6px; font-size: 20px; }
.xhead-card p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.xhead-card.disabled { opacity: .55; }
.xhead-card .tag {
    display: inline-block; margin-top: 12px; font-size: 11px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}

/* ----------------------------------------------------------- login page --- */
.xlogin { max-width: 340px; margin: 12vh auto; padding: 0 20px; }
.xlogin h1 { font-size: 24px; margin: 0 0 4px; }
.xlogin .lede { color: var(--ink-soft); font-size: 13px; margin: 0 0 22px; }
.xlogin input {
    width: 100%; box-sizing: border-box; padding: 9px 10px; margin-bottom: 10px;
    background: var(--panel); color: var(--ink);
    border: 1px solid var(--hairline-firm); border-radius: var(--radius); font: inherit;
}
.xlogin button, .xbtn {
    background: var(--accent); color: var(--panel); border: 0;
    border-radius: var(--radius); padding: 9px 16px; font: inherit; cursor: pointer;
}
:root[data-theme="dark"] .xlogin button, :root[data-theme="dark"] .xbtn { color: #10201B; }
.xlogin button { width: 100%; }
.xerr { color: var(--bad); background: var(--bad-wash); padding: 8px 10px;
        border-radius: var(--radius); margin-bottom: 12px; font-size: 13px; }

/* ------------------------------------------------ shared page container --- */
.xpage { padding: 18px 20px 40px; }
.xpage h1 { font-size: 24px; margin: 0 0 14px; }

@media (max-width: 720px) {
    .xnav { flex-wrap: wrap; height: auto; gap: 10px; padding: 8px 12px; }
    .xnav-sections { order: 3; width: 100%; gap: 12px; font-size: 13px; }
    .xnav-right { margin-left: auto; }
    .xchip { font-size: 11px; }
}

/* ==========================================================================
   Shared components — the pieces both heads render. Colour comes from tokens
   ONLY; the heads' own stylesheets keep layout and their page-specific rules.

   Density note: this is Option A's shell (cream, serif display, gold accent,
   hairline rules) around B's table density. The chrome breathes; the data does
   not. A row of figures should stay scannable at a glance, not airy.
   ========================================================================== */

/* ------------------------------------------------------------ the thread -- */
.ask-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.xbtn-quiet {
    font-size: 12px; padding: 4px 10px; border-radius: var(--radius);
    border: 1px solid var(--hairline-firm); color: var(--ink-soft); text-decoration: none;
}
.xbtn-quiet:hover { color: var(--ink); border-color: var(--accent); }

.thread { margin: 14px 0 4px; display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 78ch; padding: 10px 14px; border-radius: 10px; }
.bubble.ask {
    align-self: flex-end; background: var(--accent-wash);
    border: 1px solid var(--hairline-firm); border-bottom-right-radius: 3px;
}
.bubble.reply {
    align-self: flex-start; background: var(--panel);
    border: 1px solid var(--hairline); border-bottom-left-radius: 3px;
    max-width: 100%; width: 100%;
}
.bubble.reply .narr { background: none; border-left: 0; padding: 0; margin: 0 0 8px; }
.bubble p:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
    .bubble { max-width: 100%; }
}