/* ==========================================================================
   Crates — RETRO SKIN (early-2000s web treatment)
   --------------------------------------------------------------------------
   An OVERRIDE LAYER, not a rewrite. Loaded AFTER style.css (see layout.php),
   gated on Config::RETRO_SKIN with a ?skin=classic|retro per-session preview.
   Deleting this file + the layout hook restores the modern site exactly.

   Why a layer: the site carries 267 border-radius declarations across
   style.css and 21 views' inline <style> blocks. Re-authoring all of those is
   a huge, high-risk diff on a live game. But style.css is already CSS-variable
   driven, so retokenising :root reskins most of the site for free — including
   the inline view styles, which reference var(--fg2), var(--bg2) etc. What's
   left is a thin flattening pass plus component re-skins.

   On !important: view <style> blocks sit in the body and would otherwise win
   source-order ties against a <head> sheet. The flatteners below therefore use
   `*` + !important — specificity 0, so any later class rule (also !important)
   still beats them cleanly. That's deliberate, not laziness.

   PALETTE: default is "slate" (navy-slate + amber). Alternates ship below and
   are selectable with ?palette=forum|terminal for side-by-side comparison.
   ========================================================================== */

/* ── 1. TOKENS ───────────────────────────────────────────────────────────
   Retokenising the EXISTING variables reskins every component that already
   uses them, including inline view styles. Radii go to 0 here so anything
   using var(--radius) squares up without needing a flattener. */
:root, :root[data-palette="slate"] {
    /* surfaces: deep navy-slate */
    --bg_h:  #090d12;
    --bg:    #0e1319;
    --bg_s:  #131a22;
    --bg1:   #1a2029;
    --bg2:   #202834;
    --bg3:   #27313f;
    --bg4:   #2f3a4a;

    /* foreground */
    --fg:    #ccd4de;
    --fg1:   #e2e8f0;
    --fg2:   #d9922e;          /* legacy "accent" name, used site-wide */
    --fg3:   rgba(204,212,222,.62);
    --fg4:   rgba(204,212,222,.42);

    /* brand: amber/gold instead of the red→orange→gold gradient */
    --accent-1: #8f5309;
    --accent-2: #d9922e;
    --accent-3: #f0bb54;
    --accent-grad: linear-gradient(to bottom, #f0a838 0%, #c97d16 50%, #8f5309 100%);
    --accent-grad-soft: linear-gradient(to bottom, rgba(240,168,56,.16), rgba(143,83,9,.10));

    --line:      #2a3441;
    --line-soft: #212a35;

    --green-hi: #7fc45a;
    --red-hi:   #d4645c;
    --info-hi:  #6ba3d6;

    --radius-sm: 0px;
    --radius:    0px;
    --radius-lg: 0px;
    --shadow-sm: none;
    --shadow:    none;

    /* retro-only tokens */
    --rt-bar-hi:   #33465f;
    --rt-bar-lo:   #1e2b3c;
    --rt-bevel-hi: #46586f;
    --rt-bevel-lo: #080b0f;
    --rt-link:     #7fb2e0;
    --rt-acc-hi:   #f0a838;
    --rt-acc-lo:   #8f5309;
    --rt-acc-br:   #ffc873;
    --rt-font: Verdana, Tahoma, Geneva, "DejaVu Sans", sans-serif;
    /* ONE knob for the whole page width. The nav, the flash strip and the
     * 3-column content row all read from this so they line up exactly —
     * previously the nav capped at 1280px (style.css) and the content row at
     * 1180px, so they visibly disagreed. Lower it for a tighter 2000s column,
     * raise it to fill bigger monitors. */
    --rt-site-w: 1720px;
}

/* Alternate palette — classic forum blue (lighter, phpBB/vBulletin era) */
:root[data-palette="forum"] {
    --bg_h:#121821; --bg:#18202b; --bg_s:#1d2733; --bg1:#243040; --bg2:#2b394b;
    --bg3:#334458; --bg4:#3d5066;
    --fg:#d5dde6; --fg1:#eef3f8; --fg2:#6f9fd0;
    --fg3:rgba(213,221,230,.62); --fg4:rgba(213,221,230,.42);
    --accent-1:#2c5d94; --accent-2:#4a86c4; --accent-3:#7fb2e0;
    --accent-grad: linear-gradient(to bottom,#6fa5d8 0%,#3f74ad 50%,#2c5d94 100%);
    --line:#38495e; --line-soft:#2d3c4d;
    --rt-bar-hi:#4a6a92; --rt-bar-lo:#2c4462; --rt-bevel-hi:#5d7da5;
    --rt-bevel-lo:#101820; --rt-link:#9cc6ec;
    --rt-acc-hi:#6fa5d8; --rt-acc-lo:#2c5d94; --rt-acc-br:#a9cdef;
}
/* Alternate palette — amber phosphor terminal */
:root[data-palette="terminal"] {
    --bg_h:#000000; --bg:#0a0805; --bg_s:#100c07; --bg1:#16110a; --bg2:#1e170d;
    --bg3:#281f12; --bg4:#33281a;
    --fg:#e8c98a; --fg1:#ffe6b0; --fg2:#d98f1e;
    --fg3:rgba(232,201,138,.62); --fg4:rgba(232,201,138,.42);
    --accent-1:#7a4a05; --accent-2:#d98f1e; --accent-3:#ffcc66;
    --accent-grad: linear-gradient(to bottom,#ffcc66 0%,#c8860f 50%,#7a4a05 100%);
    --line:#3a2d18; --line-soft:#2b2112;
    --green-hi:#9ec93f; --red-hi:#d9663f; --info-hi:#d9a53f;
    --rt-bar-hi:#4a3a1c; --rt-bar-lo:#2a2010; --rt-bevel-hi:#6b5527;
    --rt-bevel-lo:#000000; --rt-link:#ffcc66;
    --rt-acc-hi:#ffcc66; --rt-acc-lo:#7a4a05; --rt-acc-br:#ffe6b0;
}

/* ── 2. FLATTEN ──────────────────────────────────────────────────────────
   Kills the modern idiom wherever it is hardcoded. `*` = specificity 0, so
   every component rule further down overrides these without a fight. */
*, *::before, *::after { border-radius: 0 !important; }
/* .userpfp is exempt: several cosmetic frames (pfp24 prismatic, pfp25 ember,
 * the pfp20-23 glows) ARE box-shadows. Killing shadows globally erased them. */
*:not(.userpfp), *::before, *::after { box-shadow: none !important; }
/* Glows are the least period-correct thing on the site. Headers re-add a hard
   1px shadow below (higher specificity, so they win). */
*, *::before, *::after { text-shadow: none !important; }
/* No lift/scale/rotate on hover — 2000s pages did not move. */
a:hover, button:hover, [class*="card"]:hover, [class*="tile"]:hover,
[class*="chip"]:hover, [class*="btn"]:hover, tr:hover { transform: none !important; }
/* Backdrop blur / glassmorphism */
* { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ── 3. TYPOGRAPHY ───────────────────────────────────────────────────────
   Verdana 11-12px. Applied to real text elements only — a blanket
   `* { font-family }` would break every Font Awesome icon on the site. */
body, p, div, span, td, th, li, dd, dt, label, legend, caption, blockquote,
h1, h2, h3, h4, h5, h6, a, small, strong, b, em, figcaption,
input, button, select, textarea, option {
    font-family: var(--rt-font) !important;
    letter-spacing: 0 !important;
}
/* Put Font Awesome back — higher specificity than the element list above. */
.fa, .fas, .far, .fal, .fab, .fad,
.fa-solid, .fa-regular, .fa-light, .fa-brands, .fa-duotone,
[class^="fa-"], [class*=" fa-"], [class^="fa-"]::before, [class*=" fa-"]::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands",
                 "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome" !important;
}
html { font-size: 13px !important; }   /* was 16px — shrinks every rem-based view style by ~19% */
body { font-size: 12px !important; line-height: 1.45 !important; -webkit-font-smoothing: auto !important; }
h1 { font-size: 18px !important; } h2 { font-size: 15px !important; }
h3 { font-size: 13px !important; } h4, h5, h6 { font-size: 12px !important; }
h1, h2, h3, h4, h5, h6 { font-weight: bold !important; margin: 0 0 8px !important; }

/* ── 4. PAGE ─────────────────────────────────────────────────────────────
   style.css sets a multi-stop radial-gradient body background with
   !important; same specificity here, but this sheet loads later, so it wins. */
body {
    background: var(--bg) !important;
    color: var(--fg) !important;
    background-attachment: scroll !important;
}
html { scroll-behavior: auto !important; }
a { color: var(--rt-link) !important; text-decoration: none !important; }
a:hover { color: #c3dcf2 !important; text-decoration: underline !important; }
hr { border: 0 !important; border-top: 1px solid var(--rt-bevel-lo) !important;
     border-bottom: 1px solid var(--rt-bevel-hi) !important; height: 0 !important; margin: 8px 0 !important; }

/* Page width — nav, flash and the 3-column content row share --rt-site-w so
 * their left/right edges align. width:97% keeps a small gutter on narrow
 * screens without needing a media query. */
body > center > .d-flex,
body > center > nav,
body > center > nav.d-lg-flex,
.flash {
    max-width: var(--rt-site-w) !important;
    width: 97% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body > center > .d-flex { gap: 8px !important; }
.content.flex-fill { min-width: 0 !important; }

/* ── 5. BEVELLED PANELS ──────────────────────────────────────────────────
   The core retro primitive: light top/left, dark bottom/right, no radius.  */
.content, .sidecontent, .tabcontent, .sidebar,
.crate-card, .store-card, .prize-card, .milestone-row, .broke-help,
.panel, .card, .arc-card, .duck-card, .player-card, .group-card {
    background: var(--bg1) !important;
    border-top: 1px solid var(--rt-bevel-hi) !important;
    border-left: 1px solid var(--rt-bevel-hi) !important;
    border-right: 1px solid var(--rt-bevel-lo) !important;
    border-bottom: 1px solid var(--rt-bevel-lo) !important;
}
.content, .sidecontent { padding: 10px !important; }

/* Section headings render as gradient title bars, like an old panel header. */
.content > h1, .content > h2, .content > h3,
.content > .container > h1, .content > .container > h2, .content > .container > h3,
.content > .text-center > h1, .content > .text-center > h2,
.store-section > h3, .cosmetic-section > h3, .crate-intro h1, .tabcontent > h2, .sb-header {
    background: linear-gradient(to bottom, var(--rt-bar-hi), var(--rt-bar-lo)) !important;
    border-top: 1px solid var(--rt-bevel-hi) !important;
    border-left: 1px solid var(--rt-bevel-hi) !important;
    border-right: 1px solid var(--rt-bevel-lo) !important;
    border-bottom: 1px solid var(--rt-bevel-lo) !important;
    color: #e6ecf3 !important;
    text-shadow: 0 1px 0 #000 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 11px !important;
    padding: 6px 9px !important;
    margin: 0 0 10px !important;
    text-align: left !important;
}

/* ── 6. BUTTONS ──────────────────────────────────────────────────────────
   Hard vertical gradient + 1px bevel. No radius, no glow, no motion. */
.tabbutton, .navbutton, .mNavbutton, .socials, .nav-cta, .again-btn,
.crate-open-btn, button.btn, input[type="submit"], .btn-primary,
.arc-cta, .buy-btn, .wl-btn, .fg-btn, .fg-start-btn, .dv-cta,
.ddx-cta, .ref-cta-btn, .tri-watch-btn, .daily-claim-btn, .footbutton, .shop-btn,
.onboard-go, .sidebarbttn, .dash-tab-bar button {
    background: linear-gradient(to bottom, var(--rt-acc-hi) 0%, #c97d16 50%, var(--rt-acc-lo) 100%) !important;
    color: #2b1a02 !important;
    font-weight: bold !important;
    font-size: 11px !important;
    text-shadow: none !important;
    padding: 4px 12px !important;
    border-top: 1px solid var(--rt-acc-br) !important;
    border-left: 1px solid var(--rt-acc-br) !important;
    border-right: 1px solid #3d2404 !important;
    border-bottom: 1px solid #3d2404 !important;
    cursor: pointer !important;
    text-transform: none !important;
    height: auto !important;
    min-height: 0 !important;
}
.tabbutton:hover, .navbutton:hover, .mNavbutton:hover, .socials:hover,
.nav-cta:hover, .again-btn:hover, .crate-open-btn:hover, button.btn:hover,
.arc-cta:hover, .buy-btn:hover, .wl-btn:hover, .fg-btn:hover,
.fg-start-btn:hover, .dv-cta:hover, .ddx-cta:hover, .ref-cta-btn:hover,
.tri-watch-btn:hover, .daily-claim-btn:hover, .footbutton:hover,
.onboard-go:hover, .dash-tab-bar button:hover {
    background: linear-gradient(to bottom, #ffc054 0%, #d98c1f 50%, #a1600c 100%) !important;
    color: #1c1000 !important; text-decoration: none !important;
}
/* Secondary / neutral buttons */
.socials, .again-btn, .btn-close {
    background: linear-gradient(to bottom, var(--bg3), var(--bg1)) !important;
    color: var(--fg) !important;
    border-top-color: var(--rt-bevel-hi) !important; border-left-color: var(--rt-bevel-hi) !important;
    border-right-color: var(--rt-bevel-lo) !important; border-bottom-color: var(--rt-bevel-lo) !important;
}
.socials:hover, .again-btn:hover {
    background: linear-gradient(to bottom, var(--bg4), var(--bg2)) !important; color: var(--fg1) !important;
}
button:disabled, .crate-open-btn:disabled, button[disabled] {
    background: linear-gradient(to bottom, var(--bg2), var(--bg1)) !important;
    color: var(--fg4) !important; cursor: default !important;
    border-top-color: var(--bg4) !important; border-left-color: var(--bg4) !important;
    border-right-color: var(--rt-bevel-lo) !important; border-bottom-color: var(--rt-bevel-lo) !important;
}

/* ── 7. FORM CONTROLS — inset bevel (light comes from top-left) ────────── */
input[type="text"], input[type="number"], input[type="password"], input[type="email"],
input[type="search"], select, textarea, .form-control {
    background: var(--bg_h) !important;
    color: var(--fg) !important;
    font-size: 11px !important;
    padding: 4px 6px !important;
    border-top: 1px solid var(--rt-bevel-lo) !important;
    border-left: 1px solid var(--rt-bevel-lo) !important;
    border-right: 1px solid var(--rt-bevel-hi) !important;
    border-bottom: 1px solid var(--rt-bevel-hi) !important;
    outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--fg4) !important; }

/* ── 8. TABLES — dense, striped, square ──────────────────────────────── */
table { border-collapse: collapse !important; }
th {
    background: linear-gradient(to bottom, var(--rt-bar-hi), var(--rt-bar-lo)) !important;
    color: #dfe6ee !important;
    text-shadow: 0 1px 0 #000 !important;
    text-transform: uppercase !important;
    font-size: 10px !important;
    letter-spacing: .5px !important;
    padding: 5px 6px !important;
    border-bottom: 1px solid var(--rt-bevel-lo) !important;
}
td { padding: 4px 6px !important; border-bottom: 1px solid var(--line) !important; font-size: 11px !important; }
tbody tr:nth-child(even) td, tr.mkt-row:nth-child(even) { background: var(--bg_s) !important; }
tr.mkt-row:hover, tbody tr:hover { background: var(--bg3) !important; }

/* ── 9. SITE CHROME ──────────────────────────────────────────────────── */
/* Wordmark: flat, uppercase, no gradient text-fill. */
body > center > h3 {
    font-size: 15px !important; text-transform: uppercase !important;
    letter-spacing: 2px !important; color: var(--accent-3) !important;
    -webkit-text-fill-color: var(--accent-3) !important;
    background: none !important; padding: 6px 0 !important;
}
/* Desktop nav strip */
.navbar, .topbar, .navbuttons {
    background: linear-gradient(to bottom, var(--bg3), var(--bg1)) !important;
    border-top: 1px solid var(--rt-bevel-hi) !important;
    border-bottom: 1px solid var(--rt-bevel-lo) !important;
}
.navbutton {
    background: linear-gradient(to bottom, var(--bg3), var(--bg1)) !important;
    color: var(--fg) !important; text-transform: uppercase !important;
    font-size: 11px !important; letter-spacing: .5px !important;
    border-top-color: var(--rt-bevel-hi) !important; border-left-color: var(--rt-bevel-hi) !important;
    border-right-color: var(--rt-bevel-lo) !important; border-bottom-color: var(--rt-bevel-lo) !important;
}
.navbutton:hover { background: linear-gradient(to bottom, var(--bg4), var(--bg2)) !important; color: var(--fg1) !important; }
/* Profile pictures square up, but the FRAME must stay visible.
 * Every cosmetic frame (.pfp0-.pfp25) works by overriding border-COLOR on
 * .userpfp, which carries `border: 2px solid`. Setting the border shorthand
 * here beat all of them and flattened every frame to the same grey — the
 * cosmetics silently stopped existing. Only width/style are set now; colour is
 * left entirely to the .pfpN classes. Bumped to 3px so frames read at nav size. */
.userpfp { border-width: 3px !important; border-style: solid !important; }
/* Flash messages */
.flash {
    border-top: 1px solid var(--rt-bevel-hi) !important; border-left: 1px solid var(--rt-bevel-hi) !important;
    border-right: 1px solid var(--rt-bevel-lo) !important; border-bottom: 1px solid var(--rt-bevel-lo) !important;
    font-size: 11px !important; padding: 6px 10px !important;
}
/* Tickers read as a status strip rather than a floating pill. */
.news-ticker, .live-trades-ticker, [class*="ticker"] {
    background: var(--bg_h) !important;
    border-top: 1px solid var(--rt-bevel-lo) !important;
    border-bottom: 1px solid var(--rt-bevel-hi) !important;
    font-size: 11px !important;
}

/* ── 10. GAME COMPONENTS ─────────────────────────────────────────────── */
/* Progress meters (pity, milestone, timers) — square track, hard fill.
 * NOTE: enumerated explicitly on purpose. An earlier draft used
 * [class*="-bar"] / [class*="-fill"] and those matched Bootstrap's
 * `flex-fill` — the main content column — painting every page amber, and
 * `fa-bars`, squashing the mobile nav icon to 8px. Never wildcard-match
 * class fragments in a theme layer that sits on top of a utility framework. */
.pity-bar, .ms-bar, .tri-bar, .dv-timer-bar, .fg-meter, .cmb-meter,
.race-track, .cev-track, .land-ducks-track, .onboard-progress, .progress {
    background: var(--bg_h) !important;
    border-top: 1px solid var(--rt-bevel-lo) !important;
    border-left: 1px solid var(--rt-bevel-lo) !important;
    border-right: 1px solid var(--rt-bevel-hi) !important;
    border-bottom: 1px solid var(--rt-bevel-hi) !important;
}
.pity-fill, .ms-fill, .dv-timer-fill, .progress-bar {
    background: linear-gradient(to bottom, var(--rt-acc-hi), var(--rt-acc-lo)) !important;
}
/* Crate / item art sits in a square inset well. */
.crate-card .cimg, .prize-card img, .reel-item {
    background: var(--bg_h) !important;
    border: 1px solid var(--rt-bevel-lo) !important;
}
/* Wallet chips → flat inline labels */
.wallet-chip {
    background: var(--bg_h) !important;
    border-top: 1px solid var(--rt-bevel-lo) !important; border-left: 1px solid var(--rt-bevel-lo) !important;
    border-right: 1px solid var(--rt-bevel-hi) !important; border-bottom: 1px solid var(--rt-bevel-hi) !important;
    font-size: 11px !important; padding: 3px 8px !important;
}
/* Keep the crate roulette usable: the reel is driven by a JS inline transition,
   so it is deliberately NOT flattened away — only its chrome is squared off. */
.reel-container { border: 1px solid var(--rt-bevel-lo) !important; background: var(--bg_h) !important; }

/* ── 11. BOOTSTRAP / VENDOR ──────────────────────────────────────────── */
.offcanvas, .modal-content, .dropdown-menu, .tooltip-inner, .popover {
    background: var(--bg1) !important; color: var(--fg) !important;
    border: 1px solid var(--rt-bevel-lo) !important;
}
.offcanvas-header, .modal-header {
    background: linear-gradient(to bottom, var(--rt-bar-hi), var(--rt-bar-lo)) !important;
    border-bottom: 1px solid var(--rt-bevel-lo) !important;
}

/* ── 12. DENSITY PASS ────────────────────────────────────────────────────
 * The modern skin breathes (22px card padding, 46px inputs, big margins).
 * 2000s pages did not. Everything below is spacing only. */
.crate-card, .store-card, .arc-card, .prize-card { padding: 8px !important; gap: 5px !important; }
.crate-card .blurb { min-height: 0 !important; }
.crate-card .cimg { width: 78px !important; height: 78px !important; }
.crate-intro p, .content > p { margin: 4px 0 !important; }
.milestone-row, .broke-help { padding: 6px 9px !important; margin: 8px auto !important; }
.wallet-row { gap: 6px !important; margin: 6px 0 3px !important; }
.crate-grid { gap: 6px !important; margin: 10px auto !important; }
input[type="text"], input[type="number"], input[type="search"], select {
    height: 24px !important; line-height: 1.2 !important;
}
#mktSearch { height: 26px !important; padding: 0 6px 0 26px !important; font-size: 11px !important; }
.sb-panel, .sidecontent { padding: 0 !important; }
.sb-header { margin: 0 !important; }
.sb-list { padding: 5px !important; }
.sb-row { padding: 3px 4px !important; }
.content { padding: 8px !important; }
br { line-height: 0.5 !important; }

/* Page-title bars read better left-aligned even inside .text-center wrappers. */
.content > h1, .content > h2, .content > h3,
.content > .container > h1, .content > .container > h2, .content > .container > h3 { text-align: left !important; }

/* CTA buttons are often <a> elements — the global link colour/underline would
 * fight the button treatment, so pin them here (after the `a` rules). */
a.arc-cta, a.dv-cta, a.ddx-cta, a.ref-cta-btn, a.buy-btn,
a.tabbutton, a.footbutton, a.nav-cta, a.wl-btn, a.onboard-go {
    color: #2b1a02 !important; text-decoration: none !important; display: inline-block !important;
}
a.arc-cta:hover, a.dv-cta:hover, a.ddx-cta:hover,
a.ref-cta-btn:hover, a.buy-btn:hover, a.tabbutton:hover, a.footbutton:hover,
a.nav-cta:hover, a.wl-btn:hover, a.onboard-go:hover { color: #1c1000 !important; text-decoration: none !important; }

/* ── 13. FILL THE WIDER COLUMN ───────────────────────────────────────────
 * View inline styles cap their content at 520-1000px — tuned for the old
 * narrow centre column. With the page widened those caps leave big empty
 * gutters, so the data-bearing containers are released to full width.
 * Prose blocks are deliberately NOT included: long measure hurts reading. */
.content table, .mkt-table, .crate-grid, .mkt-search-wrap,
.milestone-row, .broke-help, .prize-grid, .store-grid,
.content > .container, .content > .text-center {
    max-width: 100% !important;
    width: 100% !important;
}
.content table { width: 100% !important; }
/* Crate cards can breathe now — fit more per row instead of stretching two. */
.crate-grid { grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)) !important; }
/* Crates carry different numbers of odds rows and only some have a pity meter,
 * so the QTY + Open block lands at a different height on every card. The card
 * is already a flex column, so pushing the form down bottom-aligns the whole
 * row of actions. */
.crate-card > form { margin-top: auto !important; }

/* ── 14. SIDEBAR WIDTHS ──────────────────────────────────────────────────
 * style.css sizes both rails at width:22% + 18px margins. Proportional rails
 * meant widening the page mostly widened the RAILS: at 1720px they took ~830px
 * between them and the centre column only went 537->839. They hold a compact
 * movers list and a portfolio list, so they want a fixed width; every extra
 * pixel of page width should go to the content. */
.sidecontent, .emptysidecontent {
    width: 248px !important;
    flex: 0 0 248px !important;
    margin: 8px 0 !important;
}
.emptysidecontent { border: 0 !important; background: none !important; }

/* ── 15. READING MEASURE ─────────────────────────────────────────────────
 * Releasing the content caps in §13 was right for TABLES and GRIDS but wrong
 * for prose: at 1170px a paragraph runs ~180 characters per line, well past
 * the ~75-90 that stays readable. Cap the measure and centre the block inside
 * centred wrappers. Harmless inside cards, which are already narrower. */
.content p, .content > .container > p, .content li { max-width: 82ch !important; }
.content > p,
.content > .container > p,
.content > .text-center > p,
.content > .container.text-center p,
.content > .container > .text-center p { margin-left: auto !important; margin-right: auto !important; }

/* ── 16. DASHBOARD ───────────────────────────────────────────────────────
 * Rearranged to the retro idiom: a left tab rail of square buttons, an account
 * panel with the facts in a table, and a uniform row of stat boxes. */

/* Left tab rail — full-width square buttons, selected state reads as pressed. */
.sidebar { background: var(--bg1) !important; padding: 6px !important;
    border-top: 1px solid var(--rt-bevel-hi) !important; border-left: 1px solid var(--rt-bevel-hi) !important;
    border-right: 1px solid var(--rt-bevel-lo) !important; border-bottom: 1px solid var(--rt-bevel-lo) !important;
    width: 176px !important; flex: 0 0 176px !important; align-self: flex-start !important; }
.sidebarbttn { display: block !important; width: 100% !important; text-align: left !important;
    margin: 0 0 3px !important; padding: 5px 9px !important; text-transform: uppercase !important;
    letter-spacing: .5px !important; font-size: 10px !important;
    background: linear-gradient(to bottom, var(--bg3), var(--bg1)) !important; color: var(--fg) !important;
    border-top: 1px solid var(--rt-bevel-hi) !important; border-left: 1px solid var(--rt-bevel-hi) !important;
    border-right: 1px solid var(--rt-bevel-lo) !important; border-bottom: 1px solid var(--rt-bevel-lo) !important; }
.sidebarbttn:hover { background: linear-gradient(to bottom, var(--bg4), var(--bg2)) !important; color: var(--fg1) !important; }
.sidebarbttn.active, .sidebarbttn[style*="background"] {
    background: linear-gradient(to bottom, var(--rt-bar-lo), var(--rt-bar-hi)) !important;
    color: #fff !important;
    border-top: 1px solid var(--rt-bevel-lo) !important; border-left: 1px solid var(--rt-bevel-lo) !important;
    border-right: 1px solid var(--rt-bevel-hi) !important; border-bottom: 1px solid var(--rt-bevel-hi) !important; }

/* Account panel */
.dash-hero { display: flex !important; gap: 12px !important; align-items: flex-start !important;
    text-align: left !important; padding: 10px !important; background: var(--bg_s) !important;
    border-top: 1px solid var(--rt-bevel-hi) !important; border-left: 1px solid var(--rt-bevel-hi) !important;
    border-right: 1px solid var(--rt-bevel-lo) !important; border-bottom: 1px solid var(--rt-bevel-lo) !important; }
.dash-hero .avatar { width: 84px !important; height: 84px !important; flex: 0 0 84px !important; }
.dash-id { flex: 1 1 auto !important; min-width: 0 !important; }
.dash-id h1 { font-size: 16px !important; margin: 0 0 2px !important; background: none !important;
    border: 0 !important; padding: 0 !important; text-transform: none !important; letter-spacing: 0 !important; }
.dash-id .bio { font-style: italic !important; color: var(--fg3) !important; margin: 0 0 6px !important; }
/* Needs the .content prefix to outrank `.content table {width:100%}` in §13 —
 * a key/value list must shrink-wrap, not stretch the label away from the value. */
.content table.dash-facts, .dash-facts { margin: 0 0 8px !important; width: auto !important; }
.content table.dash-facts td { padding-right: 0 !important; }
.dash-facts th { background: none !important; border: 0 !important; text-align: left !important;
    color: var(--fg4) !important; font-weight: normal !important; text-transform: uppercase !important;
    font-size: 10px !important; padding: 1px 14px 1px 0 !important; text-shadow: none !important; white-space: nowrap !important; }
.dash-facts td { border: 0 !important; padding: 1px 0 !important; color: var(--fg) !important; }
.ref-code { color: var(--rt-acc-hi) !important; letter-spacing: .5px !important; }
.dash-actions { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; margin-bottom: 7px !important; }
.dash-ref-note { color: var(--fg3) !important; font-size: 10px !important; margin: 0 !important; max-width: 70ch !important; }

/* Stat boxes — one uniform row, inset wells, no mixed accent borders. */
.dash-stat-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 5px !important; margin: 8px 0 !important; }
.dash-stat { background: var(--bg_h) !important; padding: 6px 8px !important; text-align: left !important;
    border-top: 1px solid var(--rt-bevel-lo) !important; border-left: 1px solid var(--rt-bevel-lo) !important;
    border-right: 1px solid var(--rt-bevel-hi) !important; border-bottom: 1px solid var(--rt-bevel-hi) !important; }
.dash-stat .label { color: var(--fg4) !important; text-transform: uppercase !important; font-size: 10px !important; }
.dash-stat .value { color: var(--fg1) !important; font-size: 15px !important; font-weight: bold !important; }
.progress-container { background: var(--bg) !important; height: 12px !important; margin-top: 3px !important;
    border-top: 1px solid var(--rt-bevel-lo) !important; border-left: 1px solid var(--rt-bevel-lo) !important;
    border-right: 1px solid var(--rt-bevel-hi) !important; border-bottom: 1px solid var(--rt-bevel-hi) !important; }
.progress-bar { background: linear-gradient(to bottom, var(--rt-acc-hi), var(--rt-acc-lo)) !important; height: 100% !important; }
.progress-bar p { margin: 0 !important; padding: 0 !important; font-size: 9px !important; color: #2b1a02 !important; line-height: 10px !important; }

/* Daily / onboarding cards: flat panels, not muddy gradients. */
.daily-card, .onboard-card { background: var(--bg_s) !important;
    border-top: 1px solid var(--rt-bevel-hi) !important; border-left: 1px solid var(--rt-bevel-hi) !important;
    border-right: 1px solid var(--rt-bevel-lo) !important; border-bottom: 1px solid var(--rt-bevel-lo) !important;
    padding: 8px 10px !important; }
.onboard-step { background: var(--bg1) !important; border: 1px solid var(--rt-bevel-lo) !important; padding: 6px 8px !important; }
.onboard-title { font-size: 13px !important; }
.daily-dot { width: 9px !important; height: 9px !important; }
.cosmetic-card { background: var(--bg1) !important; padding: 6px !important;
    border-top: 1px solid var(--rt-bevel-hi) !important; border-left: 1px solid var(--rt-bevel-hi) !important;
    border-right: 1px solid var(--rt-bevel-lo) !important; border-bottom: 1px solid var(--rt-bevel-lo) !important; }
.cosmetic-card.selected { border-color: var(--rt-acc-hi) !important; background: var(--bg3) !important; }

/* ── 17. FOOTER ──────────────────────────────────────────────────────────
 * Was a floating oversized wordmark with a big gap above it. Now a proper
 * bordered end-of-page strip, like a 2000s site footer. */
.footer { background: var(--bg_s) !important; margin-top: 14px !important; padding: 10px !important;
    border-top: 1px solid var(--rt-bevel-hi) !important; border-left: 1px solid var(--rt-bevel-hi) !important;
    border-right: 1px solid var(--rt-bevel-lo) !important; border-bottom: 1px solid var(--rt-bevel-lo) !important;
    text-align: center !important; }
.footer br { display: none !important; }
.footer-brand { font-size: 13px !important; font-weight: bold !important; text-transform: uppercase !important;
    letter-spacing: 2px !important; color: var(--accent-3) !important; margin: 0 0 6px !important;
    -webkit-text-fill-color: var(--accent-3) !important; background: none !important; }
.footer .footbutton { margin: 0 2px !important; }
/* max-width:auto margins — the §15 82ch prose cap otherwise pins these left
 * inside their (wider) box, so centred text renders off-centre. */
.footer p { color: var(--fg4) !important; font-size: 10px !important;
    margin: 7px auto 0 !important; max-width: none !important; }

/* Balance-graph range selector — square segmented control. */
.graph-range { display: flex !important; gap: 2px !important; margin-bottom: 6px !important; }
.graph-range button {
    background: linear-gradient(to bottom, var(--bg3), var(--bg1)) !important;
    color: var(--fg) !important; font-size: 10px !important; font-weight: bold !important;
    text-transform: uppercase !important; letter-spacing: .5px !important; padding: 3px 10px !important;
    border-top: 1px solid var(--rt-bevel-hi) !important; border-left: 1px solid var(--rt-bevel-hi) !important;
    border-right: 1px solid var(--rt-bevel-lo) !important; border-bottom: 1px solid var(--rt-bevel-lo) !important;
    cursor: pointer !important; }
.graph-range button:hover { background: linear-gradient(to bottom, var(--bg4), var(--bg2)) !important; }
.graph-range button.active {
    background: linear-gradient(to bottom, var(--rt-acc-hi), var(--rt-acc-lo)) !important;
    color: #2b1a02 !important;
    border-top: 1px solid var(--rt-acc-br) !important; border-left: 1px solid var(--rt-acc-br) !important;
    border-right: 1px solid #3d2404 !important; border-bottom: 1px solid #3d2404 !important; }
.graph-wrap { background: var(--bg_h) !important; padding: 6px !important; height: 320px !important;
    border-top: 1px solid var(--rt-bevel-lo) !important; border-left: 1px solid var(--rt-bevel-lo) !important;
    border-right: 1px solid var(--rt-bevel-hi) !important; border-bottom: 1px solid var(--rt-bevel-hi) !important; }
.cosmetic-section { margin-bottom: 12px !important; }
.cosmetic-grid { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.cos-label { display: block !important; font-size: 10px !important; color: var(--fg3) !important; }
.cos-selected-tag { display: block !important; font-size: 9px !important; text-transform: uppercase !important;
    letter-spacing: .5px !important; color: var(--green-hi) !important; }
.cos-more { font-size: 11px !important; color: var(--fg3) !important;
    margin: 7px 0 0 !important; max-width: none !important; text-align: left !important; }
