/* ============================================================================
   THEME · 01 COMMAND LINE
   "A war room that looks like one. Density as authority."

   Loads AFTER app.css and overrides its :root tokens, so no page markup and no
   component changes. The 166 pages keep emitting .stat-card / .card-value /
   .panel / .data-table exactly as before.

   This answers six specific defects in the base sheet, not a matter of taste:

     1. Invisible edges  app.css sets --border to rgba(255,255,255,.06), so
                         cards never read as objects. Here borders are a solid
                         #22303F and cards become discrete panels.
     2. No hierarchy     A strict luminance ladder: value #F2F7FC is the
                         brightest thing on screen, then body, then label, then
                         dim. The eye lands on the number every time.
     3. Micro-type noise 9-10px uppercase mono labels became texture. Labels go
                         up to 10.5px with wider tracking so they read as
                         labels, and stop competing with the value.
     4. Absent brand     Accent was a 2px hairline on a card's top edge. It
                         becomes the bracket reticle -- see .stat-card::before.
     5. No depth         Not solved with shadow (this direction is deliberately
                         flat); solved with visible structure and a real
                         two-step surface ladder, #070A0E under #0C1118.
     6. Muted data       Chart and bar fills take the full-strength accents
                         rather than the desaturated base palette.
   ============================================================================ */

:root {
    /* ---- surfaces: two clear steps, not two shades of the same grey ---- */
    --bg:  #070A0E;
    --bg2: #0C1118;
    --bg3: #16202B;
    --bg4: #1D2A38;

    /* ---- the fix that does the most work: edges you can actually see ---- */
    --border:  #22303F;
    --border2: #2E4054;

    /* ---- luminance ladder. Order matters more than the individual values ---- */
    --text:   #D6DEE8;   /* body copy                       */
    --text-hi:#F2F7FC;   /* values -- brightest on screen   */
    --text2:  #B7C4D2;   /* secondary copy                  */
    --muted:  #7A8CA0;   /* labels, table headers           */
    --muted2: #5A6B7D;   /* card sub-text, disabled         */

    /* ---- instrument accents: saturated, used sparingly, never on body text ---- */
    --green: #3DDC84;  --green-dim: rgba(61,220,132,.14);
    --red:   #FF4D6A;  --red-dim:   rgba(255,77,106,.14);
    --blue:  #4DA6FF;  --blue-dim:  rgba(77,166,255,.14);
    --amber: #FFB020;  --amber-dim: rgba(255,176,32,.14);
    --cyan:  #3DDC84;  --cyan-dim:  rgba(61,220,132,.12);
    --purple:#B08CFF;  --purple-dim:rgba(176,140,255,.14);
    --orange:#FF8A3D;
    --accent:#3DDC84;  --accent-dim:rgba(61,220,132,.12);

    /* ---- square corners. A war room is not rounded. ---- */
    --radius: 2px;

    /* ---- IBM Plex: mono as a deliberate instrument voice, not a default ---- */
    --mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, Consolas, monospace;
    --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --login-accent: #3DDC84;
}

body { background: var(--bg); color: var(--text); font-family: var(--sans); }

/* ---------------------------------------------------------------- topbar --- */
.topbar {
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
}
.topbar-logo {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--green);
    text-transform: uppercase;
}
.topbar-logo span { color: var(--muted2); }
.topbar-right {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    color: var(--muted);
}

/* The live pip becomes a hard-edged tag, legible at a glance across a room. */
.live-dot {
    background: var(--green);
    color: var(--bg);
    border-radius: 2px;
    box-shadow: none;
}
.live-dot--idle { background: var(--muted2); color: var(--bg); }

/* --------------------------------------------------------------- sidebar --- */
.sidebar { background: var(--bg2); border-right: 1px solid var(--border); }
.nav-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted2);
}
.nav-link { color: var(--text2); border-radius: 0; }
.nav-link:hover { background: var(--bg3); color: var(--text-hi); }
.nav-link.active {
    background: var(--bg3);
    color: var(--text-hi);
    /* A left rule rather than a fill: marks position without shouting. */
    box-shadow: inset 2px 0 0 0 var(--green);
}

/* ------------------------------------------------------------- stat cards --- */
/* THE SIGNATURE MOVE. The accent stops being a top hairline and becomes a
   bracket reticle in the corner -- one pseudo-element, no markup change. */
.stat-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 13px 14px;
    position: relative;
    overflow: visible;
}
.stat-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;
}

/* Kill the base sheet's coloured top edge in favour of the bracket. */
.stat-card.c-green,
.stat-card.c-red,
.stat-card.c-amber,
.stat-card.c-blue,
.stat-card.c-cyan,
.stat-card.c-purple,
.stat-card.c-gray { border-top: 1px solid var(--border); }

.stat-card.c-red::before    { border-color: var(--red); }
.stat-card.c-amber::before  { border-color: var(--amber); }
.stat-card.c-blue::before   { border-color: var(--blue); }
.stat-card.c-cyan::before   { border-color: var(--cyan); }
.stat-card.c-purple::before { border-color: var(--purple); }
.stat-card.c-gray::before   { border-color: var(--muted2); }

.card-label {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 9px;
}

/* The luminance ladder, enforced. The base sheet tints the value with the
   card's accent, which flattens four cards into four equal colours and means
   nothing is the hero. Here every value is the brightest thing on screen and
   the accent identifies the card through its bracket instead. Specificity is
   .stat-card.c-x .card-value (0,3,0) so it beats app.css's .c-x .card-value. */
.card-value {
    font-family: var(--mono);
    font-size: 23px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-hi);
    letter-spacing: -.01em;
}
.stat-card.c-green  .card-value,
.stat-card.c-red    .card-value,
.stat-card.c-amber  .card-value,
.stat-card.c-blue   .card-value,
.stat-card.c-cyan   .card-value,
.stat-card.c-purple .card-value,
.stat-card.c-gray   .card-value { color: var(--text-hi); }

.card-sub {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .08em;
    color: var(--muted2);
    margin-top: 6px;
    text-transform: uppercase;
}

/* ------------------------------------------------------------ panels/hdrs --- */
.panel, .gcard, .ccard, .rcard, .geo-card, .cf-card, .fam-panel, .cp-panel {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
}
.panel h4, .section-hdr, .gcard-head, .cd-h {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}
.page-header {
    border-bottom: 1px solid var(--border);
    background: transparent;
}

/* ------------------------------------------------------------------ bars --- */
/* Square fills. A progress bar in an instrument is a gauge, not a pill. */
.bar-row .bt, .fam-bar, .cp-bar, .mistake-bar, .metric-row {
    background: var(--bg3);
    border-radius: 0;
}
.bar-row .bt i { border-radius: 0; background: var(--green); }
.bv { font-family: var(--mono); color: var(--text-hi); }
.bl { font-family: var(--mono); color: var(--text2); }

/* ----------------------------------------------------------------- table --- */
.data-table th, .cf-tbl th, .fam-table th, .cp-table th {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    background: transparent;
}
.data-table td, .cf-tbl td, .fam-table td, .cp-table td {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--text);
    border-bottom: 1px solid var(--bg3);
}
.data-table tbody tr:hover td { background: var(--bg3); color: var(--text-hi); }
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius); }

/* Numeric columns line up; that is half of what makes a table readable. */
.data-table td, .data-table th { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ semantics --- */
.pos { color: var(--green); }
.neg { color: var(--red); }
.chip, .hub-chip {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg3);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .08em;
}

/* ------------------------------------------------------------------ misc --- */
.empty {
    font-family: var(--mono);
    color: var(--muted2);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 11px;
}
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Back to the national portal, sitting with the other topbar controls. Outside the
   AuthorizeView on purpose: a signed-out visitor who lands on a state site still needs
   a way back to datacenter.vote rather than a dead end. */
.india-link {
    /* Geometry copied from .logout-btn / .login-link in app.css so the three topbar
       controls read as one set rather than three near-misses. */
    display: inline-block;
    padding: 5px 13px;
    background: var(--bg3);
    color: var(--muted2);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: all .15s;
}
/* Green, where Logout hovers red. Going to the portal is navigation; signing out is
   destructive, and the two should not look like the same kind of action. */
.india-link:hover { background: var(--green-dim); color: var(--green); border-color: var(--green); }
.india-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }