/* ============================================================================
   ROOT PORTAL · datacenter.vote
   THEME 01 · COMMAND LINE — "density as authority"

   Same visual language as the 32 state sites (DataCenter.Shared/css/
   theme-commandline.css), so the front door and the instruments behind it read
   as one system.

   SINGLE THEME ON PURPOSE. Command Line is a committed dark instrument look —
   the whole direction is a strict luminance ladder on near-black. Making it
   follow the viewer's light/dark preference would dissolve its identity, so
   there is no prefers-color-scheme block here. Every colour is painted
   explicitly, including body background, so the page never borrows a host
   ground.
   ============================================================================ */

:root {
    /* surfaces: two clear steps, not two shades of one grey */
    --bg:      #070A0E;
    --surface: #0C1118;
    --raised:  #16202B;

    /* edges you can actually see — the single highest-impact choice here */
    --border:  #22303F;
    --border2: #2E4054;

    /* luminance ladder. Order matters more than the individual values. */
    --text-hi: #F2F7FC;   /* values — brightest on screen */
    --text:    #D6DEE8;
    --text2:   #B7C4D2;
    --muted:   #7A8CA0;
    --dim:     #5A6B7D;

    /* instrument accents, saturated, never on body copy */
    --green: #3DDC84;
    --red:   #FF4D6A;
    --blue:  #4DA6FF;
    --amber: #FFB020;

    --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --radius: 2px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Full-bleed. Command Line is density as authority — a centred 1180px column on a
   2560px monitor is the opposite of that, and it was leaving half the screen empty. */
.shell { width: 100%; max-width: none; margin: 0; padding: 0 clamp(1rem, 2.2vw, 2rem); }
.mono  { font-family: var(--mono); font-size: .88em; }
.dim   { color: var(--dim); }

h1, h2, h3 { color: var(--text-hi); margin: 0; line-height: 1.1; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.6vw, 2.9rem); font-weight: 600; letter-spacing: -.02em; }
h2 {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1.2rem;
}
h3 { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
p { margin: 0 0 1rem; }
a { color: var(--green); }

/* ------------------------------------------------------------------ topbar */
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar .shell {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; height: 52px;
}
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
/*  Amber outline, not a green fill. Green is the instrument colour across the product --
    live pip, active nav, positive delta -- and a permanent green chip on every page spends
    that signal on furniture. Matches the state-site topbar mark and the favicon. */
.mark {
    display: grid; place-items: center; width: 26px; height: 26px;
    border-radius: var(--radius);
    background: transparent; color: var(--amber, #FFB020);
    border: 1.5px solid var(--amber, #FFB020);
    font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .04em;
    transition: background .15s, color .15s;
}
.brand:hover .mark { background: var(--amber, #FFB020); color: var(--bg); }
.wordmark {
    font-family: var(--mono); font-size: 12.5px; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase; color: var(--green);
}
.tld { color: var(--dim); }
.topnav { display: flex; gap: 1.4rem; }
.topnav a {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted); text-decoration: none;
}
.topnav a:hover { color: var(--text-hi); }
.topnav a[aria-current="page"],
.topnav a.active { color: var(--green); }

/* -------------------------------------------------------------------- hero */
/* The hero is a band, not a page. Title and readouts sit on one line at desk
   widths so the cards — the actual content — start near the top of the fold. */
.hero {
    padding: clamp(1.6rem, 3vw, 2.4rem) 0 clamp(1.4rem, 2.4vw, 2rem);
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: end;
}
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; align-items: start; } }

.hero h1 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.lede { font-size: clamp(.95rem, 1.2vw, 1.02rem); color: var(--text2); max-width: 72ch; margin: .7rem 0 0; }
.prose { max-width: 72ch; color: var(--text2); }

/* Readouts: mono label over the brightest value on screen. */
.figs { display: flex; gap: clamp(1.4rem, 2.6vw, 2.6rem); margin: 0; }
.figs > div { padding: 0; margin: 0; border: none; white-space: nowrap; }
.figs dt {
    font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted);
}
.figs dd {
    margin: .3rem 0 0;
    font-family: var(--mono); font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-weight: 600;
    color: var(--text-hi); line-height: 1; font-variant-numeric: tabular-nums;
}
/* The one figure that should read as a signal, not a statistic. */
.figs .live-count dd { color: var(--green); }

section { padding: clamp(2.4rem, 5vw, 3.4rem) 0 0; }
main.shell { padding-bottom: 4.5rem; }

/* ------------------------------------------------------------- state cards */
/* Four across, stepping down cleanly rather than reflowing at arbitrary widths. */
.grid { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1500px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1040px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .grid { grid-template-columns: 1fr; } }

/* THE SIGNATURE MOVE, carried over from the state sites: a bracket reticle in
   the corner instead of a coloured top edge. One pseudo-element, no markup. */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 15px 12px;
    position: relative;
    display: flex; flex-direction: column; gap: .75rem;
}
.card::before {
    content: "";
    position: absolute; left: -1px; top: -1px;
    width: 9px; height: 9px;
    border-left: 2px solid var(--green);
    border-top: 2px solid var(--green);
    pointer-events: none;
}
/* States with no roll yet get an amber reticle; states with no subdomain a dim one. */
.card:has(.badge.wait)::before { border-color: var(--amber); }
.card.pending { background: transparent; border-style: dashed; }
.card.pending::before { border-color: var(--dim); }

.card-hd { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.card-hd h3 { color: var(--text-hi); }
.code {
    font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .1em;
    color: var(--green); background: rgba(61, 220, 132, .1);
    padding: .18rem .4rem; border-radius: var(--radius);
}
.card.pending .code { color: var(--dim); background: var(--raised); }

.meta { margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.meta > div { display: flex; justify-content: space-between; gap: .8rem; }
.meta dt {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
}
.meta dd {
    margin: 0; font-family: var(--mono); font-size: 11px;
    color: var(--text2); text-align: right;
}

.card-ft {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; flex-wrap: wrap;
    margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--border);
}
.badge {
    font-family: var(--mono); font-size: 9px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    padding: .2rem .45rem; border-radius: var(--radius); white-space: nowrap;
}
.badge.live { background: var(--green); color: var(--bg); }
.badge.wait { background: rgba(255, 176, 32, .14); color: var(--amber); }
.badge.none { background: var(--raised); color: var(--dim); }
.go {
    font-family: var(--mono); font-size: 10.5px; color: var(--text2); text-decoration: none;
}
.go:hover { color: var(--text-hi); text-decoration: underline; }
.go.muted { color: var(--dim); }

/* ------------------------------------------------------------------ footer */
.foot { border-top: 1px solid var(--border); background: var(--surface); }
.foot .shell {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--muted);
}
.foot-grid {
    display: grid; grid-template-columns: 1fr auto auto;
    align-items: center; gap: 2rem; padding-block: 18px;
}
.foot-brand { display: flex; align-items: center; gap: .7rem; }
.foot-mark { width: 20px; height: 20px; font-size: 9px; border-width: 1px; }
.foot-tagline { color: var(--muted); font-size: 10px; letter-spacing: .06em; }
.foot-copy { color: var(--dim); font-size: 9.5px; letter-spacing: .08em; white-space: nowrap; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Sign-out sits in the topnav as a real form POST, so it needs to stop looking
   like a button and start looking like the links beside it. */
.topnav .signout { margin: 0; display: inline-flex; }
.topnav .signout button {
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
}
.topnav .signout button:hover { color: var(--text-hi); }

/* ---------------------------------------------------- public content pages */
/* Card body copy. The state cards carry only key/value metadata, so .card had no
   prose style until the public pages needed one. */
.cardtext { margin: 0; font-size: .875rem; color: var(--text2); line-height: 1.55; }

/* A standing caveat, not an error: used where a page is honest about being a draft
   or about information that is deliberately not published yet. Amber rather than red
   — it is a note to the owner, not a failure. */
.notice {
    border-left: 3px solid var(--amber);
    background: rgba(255, 176, 32, .07);
    padding: .9rem 1.1rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--text2);
}
.notice strong { color: var(--text-hi); }

.footnav { display: flex; align-items: center; gap: 1.2rem; }
.footnav a {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted); text-decoration: none;
}
.footnav a:hover { color: var(--text-hi); }

@media (max-width: 720px) {
    .foot-grid { grid-template-columns: 1fr; gap: .8rem; padding-block: 1rem; }
    .topbar .shell { height: auto; padding-top: .7rem; padding-bottom: .7rem;
                     flex-wrap: wrap; gap: .6rem; }
    .topnav { flex-wrap: wrap; gap: .9rem; }
}

/* ------------------------------------------------------------ auth screens */
/* The Identity pages arrived as Bootstrap markup: white .form-control inputs and a
   blue .btn-primary on a near-black page. These rules replace that vocabulary rather
   than fighting it, so the sign-in screen belongs to the same product as the rest. */

.auth { display: flex; justify-content: center; padding: clamp(2rem, 6vh, 4.5rem) 0; }
.auth-card {
    width: 100%; max-width: 26rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.9rem 1.8rem 1.6rem;
    position: relative;
}
/* The bracket reticle again — the sign-in card is an object like any other. */
.auth-card::before {
    content: ""; position: absolute; left: -1px; top: -1px;
    width: 11px; height: 11px;
    border-left: 2px solid var(--green); border-top: 2px solid var(--green);
}
.auth-card h1 { font-size: 1.5rem; margin-bottom: .45rem; }
.auth-sub { color: var(--muted); font-size: .82rem; line-height: 1.5; margin-bottom: 1.5rem; }

.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.field label {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted);
}
.input {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .62rem .7rem;
    color: var(--text-hi);
    font-family: var(--sans); font-size: .95rem;
}
.input::placeholder { color: var(--dim); }
.input-toggle { position: relative; }
.input-toggle .input { padding-right: 2.5rem; }
.toggle-pw {
    position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--muted); font-size: 1.2rem;
    cursor: pointer; padding: .2rem .3rem; line-height: 1;
}
.toggle-pw:hover { color: var(--text-hi); }
.input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 2px rgba(61, 220, 132, .18);
}

.remember { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.4rem;
            font-size: .85rem; color: var(--text2); cursor: pointer; }
.remember input { accent-color: var(--green); width: 15px; height: 15px; }

/* Dark ink on the mint, not white: white on #3DDC84 measures 1.78:1, which the audit
   flagged as unreadable. Near-black on it is about 11:1. */
.auth-btn {
    width: 100%; cursor: pointer;
    background: var(--green); color: var(--bg);
    border: none; border-radius: var(--radius);
    padding: .68rem 1rem;
    font-family: var(--mono); font-size: 11px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
}
.auth-btn:hover { filter: brightness(1.08); }

.auth-or { display: flex; align-items: center; gap: .8rem; margin: 1.3rem 0 1rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-or span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
                text-transform: uppercase; color: var(--dim); }

.auth-alt {
    display: block; width: 100%; text-align: center; cursor: pointer;
    background: transparent; color: var(--text2);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: .6rem 1rem; text-decoration: none;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
}
.auth-alt:hover { color: var(--text-hi); border-color: var(--border2); }

.auth-error { color: var(--red); font-size: .82rem; }
.auth-error ul { margin: 0; padding-left: 1.1rem; }
.auth-foot { margin: 1.5rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--border);
             font-size: .8rem; color: var(--muted); }

/* The Account area still carries some Bootstrap markup on the Manage pages. Bootstrap's
   .text-muted is #6c757d !important, which measures 1.16:1 on this ground — the audit
   found 281 usages rendering as effectively invisible. Override it at the same weight. */
.text-muted { color: var(--muted) !important; }

/* ============================================================================
   PUBLIC PAGES — the marketing layer
   Scoped under .pub so the dashboard and the auth screens keep the plain
   instrument treatment. Everything here is CSS or inline SVG: no stock imagery,
   no external requests, and it recolours with the theme tokens instead of
   fighting them.
   ============================================================================ */

.pub { position: relative; }

/* ---- animated field: a survey grid with a slow drift and a radial bloom ---- */
.pub-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.pub-field::before {
    content: ""; position: absolute; inset: -40%;
    background-image:
        linear-gradient(to right, rgba(61,220,132,.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(61,220,132,.055) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
    animation: pub-drift 34s linear infinite;
}
.pub-field::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 45% at 18% 0%,  rgba(61,220,132,.13), transparent 60%),
        radial-gradient(ellipse 50% 40% at 82% 8%,  rgba(77,166,255,.10), transparent 60%);
}
@keyframes pub-drift { to { transform: translate3d(46px, 46px, 0); } }

.pub > * { position: relative; z-index: 1; }

/* ---- hero ---- */
.pub-hero { padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--border); }
.pub-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--green); border: 1px solid rgba(61,220,132,.3);
    background: rgba(61,220,132,.07); padding: .3rem .6rem; border-radius: 999px;
    margin-bottom: 1.4rem;
}
.pub-eyebrow i {
    width: 6px; height: 6px; border-radius: 50%; background: var(--green);
    box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: pub-pulse 2.6s ease-out infinite;
}
@keyframes pub-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(61,220,132,.55); }
    70%  { box-shadow: 0 0 0 7px rgba(61,220,132,0); }
    100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); }
}
.pub-h1 {
    font-size: clamp(2.2rem, 5.6vw, 4rem); font-weight: 600; letter-spacing: -.035em;
    line-height: 1.03; max-width: 20ch; margin: 0;
}
.pub-h1 em {
    font-style: normal;
    background: linear-gradient(100deg, var(--green) 10%, #7FE8FF 90%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pub-lede { font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--text2); max-width: 62ch; margin: 1.3rem 0 0; line-height: 1.6; }

.pub-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.pub-btn {
    display: inline-block; text-decoration: none; border-radius: var(--radius);
    padding: .66rem 1.2rem;
    font-family: var(--mono); font-size: 10.5px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
}
.pub-btn.primary { background: var(--green); color: var(--bg); }
.pub-btn.primary:hover { filter: brightness(1.08); }
.pub-btn.ghost { border: 1px solid var(--border2); color: var(--text2); }
.pub-btn.ghost:hover { color: var(--text-hi); border-color: var(--green); }

/* ---- readout strip ---- */
.pub-readout {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px; background: var(--border);
    border: 1px solid var(--border); border-radius: var(--radius);
    margin-top: 2.6rem; overflow: hidden;
}
.pub-readout > div { background: var(--surface); padding: 1rem 1.1rem 1.05rem; }
.pub-readout dt { font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
                  text-transform: uppercase; color: var(--muted); }
.pub-readout dd {
    margin: .4rem 0 0; font-family: var(--mono); font-size: 1.6rem; font-weight: 600;
    color: var(--text-hi); line-height: 1; font-variant-numeric: tabular-nums;
}
.pub-readout .accent dd { color: var(--green); text-shadow: 0 0 22px rgba(61,220,132,.35); }

/* ---- section head ---- */
.pub-sec { padding: clamp(3rem, 6vw, 4.5rem) 0 0; }
.pub-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
              text-transform: uppercase; color: var(--green); margin: 0 0 .7rem; }
/* Must reset font-family, text-transform and color too: the base h2 rule is the
   mono uppercase section label used on the dashboard, and overriding only size and
   weight left these headings rendering as small-caps muted mono. */
.pub-h2 {
    font-family: var(--sans); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600;
    letter-spacing: -.025em; text-transform: none; color: var(--text-hi); margin: 0;
}
.pub-sub { color: var(--text2); max-width: 66ch; margin: .8rem 0 0; }

/* ---- feature cards with depth ---- */
.pub-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); margin-top: 1.8rem; }
.pub-card {
    position: relative; overflow: hidden;
    background: linear-gradient(165deg, #101823 0%, var(--surface) 55%);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 1.3rem 1.35rem 1.25rem;
    transition: border-color .18s ease, transform .18s ease;
}
.pub-card::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
    background: linear-gradient(90deg, var(--green), transparent 70%);
    opacity: .55;
}
.pub-card:hover { border-color: var(--border2); transform: translateY(-2px); }
.pub-card .n {
    font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--green);
    display: block; margin-bottom: .8rem;
}
.pub-card h3 { font-size: 1rem; font-weight: 600; margin: 0 0 .5rem; color: var(--text-hi); }
.pub-card p { margin: 0; font-size: .865rem; color: var(--text2); line-height: 1.55; }

/* ---- inline SVG figures ---- */
.pub-figure { margin-top: 2rem; border: 1px solid var(--border); border-radius: 6px;
              background: var(--surface); padding: 1.4rem; overflow-x: auto; }
.pub-figure svg { display: block; width: 100%; height: auto; min-width: 520px; }
.pub-figcap { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
              text-transform: uppercase; color: var(--muted); margin: .9rem 0 0; }

/* Dashed connectors that look like data moving through the pipeline. */
.flow { stroke-dasharray: 5 7; animation: flow-dash 1.5s linear infinite; }
@keyframes flow-dash { to { stroke-dashoffset: -24; } }

/* ---- coverage bar ---- */
.pub-coverage-bar {
    display: flex; align-items: center; margin-top: 1.6rem;
    height: 32px; background: var(--raised); border-radius: var(--radius);
    border: 1px solid var(--border); overflow: hidden;
    font-family: var(--mono); font-size: 10px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
}
.pub-cov-fill {
    height: 100%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(90deg, var(--green), rgba(61,220,132,.6));
    color: var(--bg); min-width: 60px; white-space: nowrap; padding: 0 12px;
}
.pub-cov-rest {
    padding: 0 12px; color: var(--muted); white-space: nowrap;
}

/* ---- prose blocks on legal pages ---- */
.pub-prose { max-width: 70ch; color: var(--text2); }
.pub-prose h3 { color: var(--text-hi); font-size: 1rem; margin: 2rem 0 .6rem; }
.pub-prose p { line-height: 1.68; }

@media (prefers-reduced-motion: reduce) {
    .pub-field::before, .pub-eyebrow i, .flow { animation: none !important; }
    .pub-card { transition: none; }
}

/* ============================================================================
   DASHBOARD — the all-India view
   Command Line tokens only; no chart library. Every figure here is server
   rendered from DCIndia.StateRollup, so the page has no client-side data path
   and nothing to load before it reads correctly.
   ============================================================================ */

.dash-hero { display: grid; gap: 22px; margin-bottom: 26px; }
.dash-hero-t h1 { margin: 4px 0 8px; font-size: 30px; letter-spacing: -.02em; color: var(--text-hi); }
.dash-hero-t .lede { max-width: 68ch; color: var(--text2); }

.dash-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.kpi {
    position: relative; background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 15px 16px 14px; overflow: visible;
}
/* Same corner reticle as .stat-card, so the dashboard reads as the same system
   as the state sites rather than a separate product. */
.kpi::before {
    content: ""; position: absolute; left: -1px; top: -1px; width: 9px; height: 9px;
    border-left: 2px solid var(--border2); border-top: 2px solid var(--border2);
}
.kpi.accent::before { border-color: var(--green); }
.kpi-l {
    display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
}
.kpi-v {
    display: block; font-family: var(--mono); font-size: 27px; font-weight: 600;
    line-height: 1; color: var(--text-hi); font-variant-numeric: tabular-nums;
}
.kpi-s {
    display: block; margin-top: 7px; font-family: var(--mono); font-size: 9.5px;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted2);
}

.dash-charts {
    display: grid; gap: 14px; margin: 26px 0 30px;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.1fr);
}
@media (max-width: 1100px) { .dash-charts { grid-template-columns: 1fr; } }
.panel.chart { padding: 16px 18px 18px; }
.panel.chart h4 { margin: 0 0 3px; }
.chart-sub {
    margin: 0 0 15px; font-size: 11.5px; color: var(--muted2); line-height: 1.5;
}

/* ---- horizontal bars: roll size by state ---- */
.bars { display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 118px 1fr 92px; align-items: center; gap: 11px; }
.bar-row .bl { font-size: 11.5px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .bt { height: 9px; background: var(--bg3); border-radius: 0; overflow: hidden; }
.bar-row .bt i { display: block; height: 100%; background: var(--green); }
.bar-row .bv {
    font-family: var(--mono); font-size: 11.5px; color: var(--text-hi);
    text-align: right; font-variant-numeric: tabular-nums;
}

/* ---- donut: gender split ---- */
.donut { width: 100%; max-width: 190px; margin: 2px auto 14px; display: block; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 3.6; }
.d-track { stroke: var(--bg3); }
.d-f { stroke: var(--green); }
.d-m { stroke: var(--blue); }
.donut text { transform: rotate(90deg); transform-origin: 21px 21px; text-anchor: middle; }
.d-big { font-family: var(--mono); font-size: 6px; font-weight: 600; fill: var(--text-hi); }
.d-cap {
    font-family: var(--mono); font-size: 2.6px; letter-spacing: .18em;
    text-transform: uppercase; fill: var(--muted);
}
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.legend li {
    display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text2);
}
.legend li b {
    margin-left: auto; font-family: var(--mono); color: var(--text-hi); font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.sw.f { background: var(--green); } .sw.m { background: var(--blue); } .sw.o { background: var(--amber); }

/* ---- vertical bars: age distribution ---- */
.agebars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; }
.ab { display: grid; justify-items: center; gap: 6px; }
.ab-t {
    display: flex; align-items: flex-end; height: 132px; width: 100%;
    background: linear-gradient(var(--bg3), var(--bg3)) bottom / 100% 1px no-repeat;
}
.ab-t i { display: block; width: 100%; background: var(--green); min-height: 2px; }
.ab-l, .ab-n {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted2);
}
.ab-v {
    font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text-hi);
    font-variant-numeric: tabular-nums;
}

/* ---- PDAG stacked bar ---- */
.pdag-stack {
    display: flex; height: 28px; border-radius: 4px; overflow: hidden; margin: 0 0 14px;
}
.ps-seg { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.ps-l { font-size: 8.5px; font-weight: 600; color: #fff; line-height: 1; white-space: nowrap; }
.ps-v { font-family: var(--mono); font-size: 8px; color: rgba(255,255,255,.8); line-height: 1; }
.seg-p { background: #f59e0b; } .seg-d { background: #ef4444; }
.seg-a { background: #22c55e; } .seg-g { background: #3b82f6; }
.sw.seg-p { background: #f59e0b; } .sw.seg-d { background: #ef4444; }
.sw.seg-a { background: #22c55e; } .sw.seg-g { background: #3b82f6; }
.pdag-legend { margin-top: 4px; }
.pdag-legend-sm li { font-size: 10px; }

/* ---- religion donut colors ---- */
.d-hindu { stroke: #f97316; }
.d-muslim { stroke: #22c55e; }
.d-relother { stroke: #8b5cf6; }
.d-relunk { stroke: var(--bg3); }
.sw.hindu { background: #f97316; } .sw.muslim { background: #22c55e; }
.sw.relother { background: #8b5cf6; } .sw.relunk { background: var(--bg3); border: 1px solid var(--border); }

/* ---- classification coverage bars ---- */
.class-bars .bar-row .bt i.bar-high { background: var(--green); }
.class-bars .bar-row .bt i.bar-mid { background: #f59e0b; }
.class-bars .bar-row .bt i.bar-low { background: #ef4444; }

/* ---- PDAG by state stacked ---- */
.pdag-by-state { display: grid; gap: 7px; }
.pbs-row { display: grid; grid-template-columns: 118px 1fr 24px; align-items: center; gap: 11px; }
.pbs-name { font-size: 11.5px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbs-bar { display: flex; height: 12px; border-radius: 2px; overflow: hidden; background: var(--bg3); }
.pbs-seg { min-width: 1px; }
.pbs-dom { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text-hi); text-align: center; }

/* ---- filter tabs ---- */
.card-filters {
    display: flex; gap: 4px; margin: 0 0 14px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 3px; width: fit-content;
}
.cfilt {
    background: none; border: none; cursor: pointer;
    font-family: var(--mono); font-size: 10px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); padding: 6px 12px; border-radius: var(--radius);
    transition: background .15s, color .15s;
}
.cfilt:hover { color: var(--text2); }
.cfilt.active { background: var(--raised); color: var(--green); }
.cfilt b {
    font-weight: 600; margin-left: 4px; font-variant-numeric: tabular-nums;
}

/* ---- richer state cards ---- */
.card {
    transition: border-color .22s, box-shadow .22s, transform .22s;
    overflow: hidden;
}
.card:hover {
    border-color: var(--border2);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
}

/* Live cards: a top-edge gradient accent and a subtle background glow */
.card.has-data {
    border-color: var(--border2);
    background: linear-gradient(175deg, #0E1A24 0%, var(--surface) 40%);
}
.card.has-data::after {
    content: ""; position: absolute; top: -1px; left: -1px; right: -1px;
    height: 3px; border-radius: var(--radius) var(--radius) 0 0;
    background: linear-gradient(90deg, var(--green), var(--blue) 60%, var(--green));
    opacity: .7;
}
.card.has-data:hover {
    border-color: rgba(61,220,132,.5);
    box-shadow: 0 0 40px rgba(61,220,132,.06), 0 12px 32px rgba(0,0,0,.5);
}

/* Animated glow behind live cards on hover */
.card-glow {
    position: absolute; inset: 0; opacity: 0;
    background: radial-gradient(ellipse 80% 60% at 30% 0%, rgba(61,220,132,.06), transparent 70%);
    transition: opacity .3s;
    pointer-events: none;
}
.card:hover .card-glow { opacity: 1; }

/* Header */
.card-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.card-hd-left { display: flex; flex-direction: column; gap: 4px; }
.card-hd-right { display: flex; align-items: center; gap: 6px; }
.card-hd h3 { color: var(--text-hi); font-size: 15px; }

/* Type badge */
.card-type-badge {
    display: inline-block;
    font-family: var(--mono); font-size: 8px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    padding: 2px 6px; border-radius: 3px;
}
.card-type-badge.st { color: var(--blue); background: rgba(77,166,255,.1); }
.card-type-badge.ut { color: var(--amber); background: rgba(255,176,32,.1); }

/* Rank indicator */
.card-rank {
    font-family: var(--mono); font-size: 11px; font-weight: 700;
    color: var(--dim); letter-spacing: -.02em;
}

/* Hero number */
.card-hero-num { padding: 8px 0 2px; }
.card-big-val {
    display: block; font-family: var(--mono); font-size: 24px; font-weight: 700;
    color: var(--text-hi); line-height: 1; font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.card-big-label {
    display: block; margin-top: 5px;
    font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted);
}

/* Scale bar with percentage label */
.card-scale {
    display: flex; align-items: center; gap: 8px;
    margin: 8px 0 10px;
}
.card-scale-track {
    flex: 1; height: 4px; background: var(--raised); border-radius: 2px;
    overflow: hidden;
}
.card-scale-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--green), rgba(61,220,132,.4));
    border-radius: 2px;
    transition: width .5s cubic-bezier(.22,.68,0,1);
}
.card-scale-pct {
    font-family: var(--mono); font-size: 9px; color: var(--dim);
    min-width: 26px; text-align: right; font-variant-numeric: tabular-nums;
}

/* Stats row with icons */
.card-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
    padding: 10px 0; border-block: 1px solid var(--border);
}
.cs { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cs-icon { color: var(--dim); flex-shrink: 0; }
.cs-v {
    font-family: var(--mono); font-size: 13px; font-weight: 600;
    color: var(--text-hi); font-variant-numeric: tabular-nums; line-height: 1;
}
.cs-l {
    font-family: var(--mono); font-size: 7.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
}

/* Gender section with ratio + bar */
.card-gender { margin-top: 8px; }
.cg-ratio {
    display: flex; align-items: baseline; gap: 6px; margin-bottom: 7px;
}
.cg-ratio-val {
    font-family: var(--mono); font-size: 18px; font-weight: 700;
    color: var(--green); line-height: 1; font-variant-numeric: tabular-nums;
}
.cg-ratio-label {
    font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
}
.cg-bar {
    height: 8px; background: var(--blue); border-radius: 4px; overflow: hidden;
    position: relative;
}
.cg-f {
    height: 100%; background: linear-gradient(90deg, var(--green), #5BE8A0);
    border-radius: 4px; position: relative; min-width: 30px;
}
.cg-pct {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    font-family: var(--mono); font-size: 7px; font-weight: 700;
    color: var(--bg); letter-spacing: .04em;
}

/* ---- card PDAG bar ---- */
.card-pdag { margin-top: 8px; }
.cpdag-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.cpdag-label { font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cpdag-pct { font-family: var(--mono); font-size: 8.5px; color: var(--muted2); }
.cpdag-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--bg3); }
.cpdag-seg { min-width: 1px; }

/* Pending cards */
.card.pending {
    background: repeating-linear-gradient(
        -45deg,
        transparent, transparent 18px,
        rgba(90,107,125,.04) 18px, rgba(90,107,125,.04) 19px
    ), var(--bg);
}
.card-empty {
    display: flex; gap: 14px; align-items: center;
    padding: 12px 0; flex: 1;
}
.card-empty-vis { color: var(--dim); flex-shrink: 0; }
.card-empty-info { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.card-empty-host {
    font-family: var(--mono); font-size: 11px; color: var(--text2);
}
.card-empty-db {
    font-family: var(--mono); font-size: 11px; color: var(--muted);
}

/* Pipeline progress indicator */
.card-pipeline {
    display: flex; align-items: center; gap: 4px;
}
.pip {
    font-family: var(--mono); font-size: 8px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 3px;
    background: var(--raised); color: var(--dim);
}
.pip.done { background: rgba(61,220,132,.15); color: var(--green); }
.pip.next {
    background: rgba(255,176,32,.12); color: var(--amber);
    box-shadow: 0 0 0 1px rgba(255,176,32,.25);
}
.pip-sep { color: var(--dim); font-size: 9px; }

/* Live badge dot */
.badge.live { display: inline-flex; align-items: center; gap: 5px; }
.live-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--bg);
    box-shadow: 0 0 0 0 rgba(7,10,14,.5);
    animation: live-blink 2.4s ease-out infinite;
}
@keyframes live-blink {
    0%   { box-shadow: 0 0 0 0 rgba(7,10,14,.55); }
    70%  { box-shadow: 0 0 0 5px rgba(7,10,14,0); }
    100% { box-shadow: 0 0 0 0 rgba(7,10,14,0); }
}

.dash-foot {
    margin-top: 20px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted2);
}

/* ---------------------------------------------------------------------------
   Card chrome for the dashboard sections.

   .panel had no base rule in this stylesheet — only ".panel.chart { padding }" —
   so the three charts rendered with no background, border or corner mark at all,
   floating on the page ground. The base class lives in theme-commandline.css,
   which the 32 state sites load through the RCL and the portal does not.
   Defined here rather than importing that sheet, because the portal has its own
   surface token and only needs these few rules.
   --------------------------------------------------------------------------- */

.panel {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px 18px;
}
/* The same corner reticle as .card and .kpi. It is what makes a rectangle read as
   part of this system rather than a generic bordered box. */
.panel::before {
    content: "";
    position: absolute; left: -1px; top: -1px; width: 9px; height: 9px;
    border-left: 2px solid var(--border2); border-top: 2px solid var(--border2);
    pointer-events: none;
}
.panel.chart::before { border-color: var(--green); }

/* Chart headings: mono label, not a display heading. Without this they inherited
   the h2/h3 sans treatment and read as page sections rather than card titles. */
.panel.chart h4 {
    margin: 0 0 4px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}
.panel.chart .chart-sub { margin: 0 0 16px; }

/* Hero as a card too, so the top of the page has the same edge as everything
   under it and the KPI row does not float against bare ground. */
.dash-hero {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 20px 20px;
    position: relative;
}
.dash-hero::before {
    content: "";
    position: absolute; left: -1px; top: -1px; width: 11px; height: 11px;
    border-left: 2px solid var(--green); border-top: 2px solid var(--green);
    pointer-events: none;
}
/* The KPI tiles sit INSIDE the hero card now, so drop their own heavy border to
   a divider and let the hero supply the outer edge — nested identical borders
   read as noise. */
.dash-hero .kpi { background: var(--bg); border-color: var(--bg3); }
.dash-hero .kpi::before { border-color: var(--bg4); }
.dash-hero .kpi.accent::before { border-color: var(--green); }

/* Section heading above the state grid, given the same mono treatment so it
   groups with the cards below rather than competing with the hero. */
.dash-section-hd {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; margin: 30px 0 12px;
}
.dash-section-hd .count {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted2);
}

/* ============================================================================
   STATE OVERVIEW — /states/{slug}
   ============================================================================ */

.so-breadcrumb {
    display: flex; align-items: center; gap: .5rem;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
    padding: 18px 0 0;
}
.so-breadcrumb a { color: var(--green); text-decoration: none; }
.so-breadcrumb a:hover { text-decoration: underline; }
.so-sep { color: var(--dim); }

.so-hero {
    padding: 28px 0 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 28px;
}
.so-hero-title h1 {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    margin: 10px 0 6px;
}
.so-hero-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.so-host-link {
    font-family: var(--mono); font-size: 11px; color: var(--green);
    text-decoration: none; letter-spacing: .06em;
}
.so-host-link:hover { text-decoration: underline; }

.so-kpi-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px; margin-top: 22px;
}

.so-section { padding: 28px 0 0; }
.so-section h2 {
    font-family: var(--mono); font-size: 11px; font-weight: 600;
    letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
    margin: 0 0 16px;
}

/* Gender */
.so-gender-grid { max-width: 600px; }
.so-gender-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px; position: relative;
}
.so-gender-card::before {
    content: ""; position: absolute; left: -1px; top: -1px;
    width: 9px; height: 9px;
    border-left: 2px solid var(--green); border-top: 2px solid var(--green);
}
.so-gender-ratio { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.so-ratio-num {
    font-family: var(--mono); font-size: 32px; font-weight: 700;
    color: var(--green); line-height: 1; font-variant-numeric: tabular-nums;
}
.so-ratio-label {
    font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
}
.so-gender-bar-wrap { margin-bottom: 16px; }
.so-gender-bar {
    display: flex; height: 14px; border-radius: 7px; overflow: hidden;
    background: var(--blue);
}
.so-gb-f {
    background: linear-gradient(90deg, var(--green), #5BE8A0);
    display: flex; align-items: center; justify-content: center;
    min-width: 50px; position: relative;
}
.so-gb-m {
    flex: 1; display: flex; align-items: center; justify-content: center;
    position: relative;
}
.so-gb-lbl {
    font-family: var(--mono); font-size: 8px; font-weight: 700;
    color: var(--bg); letter-spacing: .04em; white-space: nowrap;
}
.so-gender-nums { display: flex; gap: 24px; }
.so-gn { display: flex; align-items: center; gap: 8px; }
.so-gn-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.so-gn-dot.f { background: var(--green); }
.so-gn-dot.m { background: var(--blue); }
.so-gn-dot.o { background: var(--amber); }
.so-gn-l { font-size: 12px; color: var(--text2); }
.so-gn-v {
    font-family: var(--mono); font-size: 13px; font-weight: 600;
    color: var(--text-hi); font-variant-numeric: tabular-nums;
}

/* Age */
.so-age-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    max-width: 500px;
}
.so-age-band {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 10px 12px; position: relative;
}
.so-age-band::before {
    content: ""; position: absolute; left: -1px; top: -1px;
    width: 7px; height: 7px;
    border-left: 2px solid var(--border2); border-top: 2px solid var(--border2);
}
.so-age-bar-track {
    width: 100%; height: 80px; display: flex; align-items: flex-end;
    background: linear-gradient(var(--raised), var(--raised)) bottom / 100% 1px no-repeat;
}
.so-age-bar-fill {
    width: 100%; background: var(--green); min-height: 4px; border-radius: 2px 2px 0 0;
}
.so-age-pct {
    font-family: var(--mono); font-size: 14px; font-weight: 600;
    color: var(--text-hi); font-variant-numeric: tabular-nums;
}
.so-age-label {
    font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
}
.so-age-count {
    font-family: var(--mono); font-size: 10px; color: var(--dim);
    font-variant-numeric: tabular-nums;
}

/* Geography */
.so-geo-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.so-geo-item {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px; position: relative;
    display: flex; flex-direction: column; gap: 6px;
}
.so-geo-item::before {
    content: ""; position: absolute; left: -1px; top: -1px;
    width: 7px; height: 7px;
    border-left: 2px solid var(--border2); border-top: 2px solid var(--border2);
}
.so-geo-val {
    font-family: var(--mono); font-size: 22px; font-weight: 700;
    color: var(--text-hi); line-height: 1; font-variant-numeric: tabular-nums;
}
.so-geo-label {
    font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
}

/* Data availability */
.so-avail-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}
.so-avail-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border);
}
.so-avail-item.available { border-color: rgba(61,220,132,.25); }
.so-avail-icon {
    font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--dim);
    width: 20px; text-align: center; flex-shrink: 0;
}
.so-avail-item.available .so-avail-icon { color: var(--green); }
.so-avail-name {
    font-size: 12px; color: var(--text2);
}
.so-avail-item.available .so-avail-name { color: var(--text-hi); }

/* CTA & footer */
.so-cta-section { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 32px; }
.so-foot {
    margin: 24px 0 0; padding: 16px 0;
    border-top: 1px solid var(--border);
    font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted2);
}

/* Pending */
.so-pending .panel { max-width: 500px; padding: 24px; }
.so-pending-text { color: var(--text2); margin: 8px 0 0; }
.so-empty { padding: 60px 0; text-align: center; }
.so-empty h1 { font-size: 1.6rem; margin-bottom: .6rem; }

@media (max-width: 640px) {
    .so-age-grid { grid-template-columns: repeat(2, 1fr); }
    .so-gender-nums { flex-direction: column; gap: 10px; }
}

/* ── election.ltd hero footer ──────────────────────────────────── */
.site-footer { padding: 2rem clamp(1rem, 2.2vw, 2rem) 1.5rem; margin-top: 2rem; font-size: 13px; color: rgba(255,255,255,.55); }
.ft-hero {
    border: 1px solid var(--border); border-radius: 22px;
    padding: 16px; background: rgba(255,255,255,.02);
}
.ft-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ft-card {
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px; padding: 18px 20px;
}
.ft-brand-card { display: flex; flex-direction: column; gap: .4rem; }
.ft-logo { font-size: 28px; font-weight: 800; color: #fff; line-height: 1; }
.ft-logo span { color: var(--green); }
.ft-name { font-weight: 700; color: rgba(255,255,255,.85); font-size: 14px; }
.ft-desc { line-height: 1.5; margin: .15rem 0 .4rem; font-size: 11.5px; }
.ft-email { color: var(--green); text-decoration: none; font-size: 12px; }
.ft-email:hover { text-decoration: underline; }
.ft-card h4 { font-size: 11px; font-weight: 700; margin: 0 0 .6rem; text-transform: uppercase; letter-spacing: .06em; }
h4.cyan  { color: rgb(34, 211, 238); }
h4.amber { color: rgb(245, 158, 11); }
h4.green { color: rgb(16, 185, 129); }
.ft-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ft-card li { display: flex; align-items: center; gap: 8px; }
.ft-card li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ft-card:nth-child(2) li::before { background: rgba(34,211,238,.5); }
.ft-card:nth-child(3) li::before { background: rgba(245,158,11,.5); }
.ft-card:nth-child(4) li::before { background: rgba(16,185,129,.5); }
.ft-card a { color: rgba(255,255,255,.55); text-decoration: none; font-size: 12.5px; }
.ft-card a:hover { color: #fff; }
.ft-bar {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
    margin-top: 12px; padding: 12px 20px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05);
    border-radius: 12px; font-size: 11px; color: rgba(255,255,255,.35);
}
.ft-bar b { color: rgba(255,255,255,.55); }
@media (max-width: 900px) { .ft-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) {
    .site-footer { padding: 1.5rem .5rem 1rem; }
    .ft-hero { padding: 10px; border-radius: 16px; }
    .ft-cards { grid-template-columns: 1fr; gap: 8px; }
    .ft-card { border-radius: 10px; padding: 14px 16px; }
    .ft-bar { flex-direction: column; align-items: center; gap: .4rem; border-radius: 10px; padding: 10px 14px; }
}