/* ═══════════════════════════════════════════════════════════
   F&O TERMINAL — BLOOMBERG-GRADE (v4.1 design, Apr 21 2026)
   ═══════════════════════════════════════════════════════════
   Philosophy:
   - Pure black (#000). No dark-gray cop-outs.
   - Amber #FFA629 is the single living accent (Bloomberg's signature).
   - Sharp rectangles, zero border-radius, 1px hairline borders.
   - IBM Plex Mono for numbers (tabular-nums). Plex Sans for labels.
   - Dense. ~12px base. This is a terminal, not a blog.
   - No gradients. No drop-shadows. No glows that aren't data.
   - Flash animations on price updates — brief, functional.
   - Mobile: horizontal-scroll tables, not stripped-down cards.
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ─── Surfaces ─── */
    --bg:            #000000;
    --bg-base:       #000000;
    --bg-card:       #0a0a0a;
    --bg-elevated:   #141414;
    --bg-hover:      #1a1a1a;

    /* ─── Borders (hairline, unmistakably Bloomberg) ─── */
    --border:        #1f1f1f;
    --border-light:  #2a2a2a;
    --border-strong: #3a3a3a;

    /* ─── Text (tight greyscale ladder, no blue tint) ─── */
    --text:          #e8e8e8;
    --text-primary:  #e8e8e8;
    --text-bright:   #ffffff;
    --text-secondary:#a0a0a0;
    --text-muted:    #6e6e6e;
    --text-dim:      #4a4a4a;

    /* ─── Accent: Bloomberg amber ─── */
    --accent:        #ffa629;
    --accent-dim:    rgba(255, 166, 41, 0.12);
    --accent-glow:   rgba(255, 166, 41, 0.28);
    --accent-strong: #ffb84d;

    /* ─── Semantic (hard, saturated — flat without being cartoonish) ─── */
    --green:         #00d665;
    --green-dim:     rgba(0, 214, 101, 0.11);
    --green-glow:    rgba(0, 214, 101, 0.25);

    --red:           #ff3b30;
    --red-dim:       rgba(255, 59, 48, 0.11);
    --red-glow:      rgba(255, 59, 48, 0.25);

    --yellow:        #ffdf00;  /* flash + warning */
    --yellow-dim:    rgba(255, 223, 0, 0.12);

    --cyan:          #00b4d8;  /* secondary accent, rarely used */

    /* ─── Radii: ZERO. Bloomberg is rectangular. ─── */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;

    /* ─── Timing ─── */
    --transition: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 80ms linear;

    /* ─── Type ─── */
    --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
    --font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;

    /* ─── Shadow (almost never used) ─── */
    --shadow-md: none;
}

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

html {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.35;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    font-feature-settings: 'tnum' 1, 'kern' 1;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
}

body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
}

body.dashboard-body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Selection */
::selection {
    background: var(--accent);
    color: #000;
}

/* Scrollbars — thin, terminal-like */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg);
}
::-webkit-scrollbar-thumb {
    background: var(--border-light);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY UTILITIES
   ═══════════════════════════════════════════════════════════ */
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }
.sans { font-family: var(--font-sans); }

/* Label: the Bloomberg ALL-CAPS 10px label that's everywhere */
.label,
.dim {
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 500;
    font-family: var(--font-sans);
}
.dim { letter-spacing: 0; text-transform: none; }  /* .dim is a softer dim, not always label */

.bright { color: var(--text-bright); }
.muted  { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }

.green { color: var(--green); }
.red   { color: var(--red); }
.amber, .accent { color: var(--accent); }
.yellow { color: var(--yellow); }
.cyan  { color: var(--cyan); }

h1, h2, h3, h4, h5 {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--text-bright);
    letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════
   NAV (top strip — Bloomberg command bar)
   ═══════════════════════════════════════════════════════════ */
.nav {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    height: 32px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 14px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-size: 10.5px;
    border-right: 1px solid var(--border);
    transition: color var(--transition), background var(--transition);
    position: relative;
}
.nav a:hover {
    color: var(--text-bright);
    background: var(--bg-card);
}
.nav a.active {
    color: var(--accent);
    background: var(--bg-card);
}
.nav a.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    background: var(--accent);
}

.nav .spacer {
    flex: 1;
}

.nav #clock,
.nav > span {
    padding: 0 10px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-muted);
    border-right: 1px solid var(--border);
    height: 100%;
    display: flex;
    align-items: center;
}
.nav > span:last-child {
    border-right: none;
}

/* Legacy pipe separators in the nav — hide them (we use borders now) */
.nav > span[style*="color:var(--border)"] {
    display: none;
}

.nav-sep {
    display: none;
}

/* Status chips */
.status, .nav-status {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.4px;
    padding: 0 10px;
    color: var(--green);
    background: transparent;
}
.status.off, .nav-status.off {
    color: var(--red);
}
/* Explicit .on selector needed so specificity (0,2,0) beats
   `.nav a` (0,1,1) — otherwise anchor-based status chips inherit
   the neutral text-secondary color from the nav rule. */
.status.on, .nav-status.on {
    color: var(--green);
}

/* ═══════════════════════════════════════════════════════════
   CARDS / SURFACES
   ═══════════════════════════════════════════════════════════ */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 14px 16px;
}

.card-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 8px;
}

.card-desc {
    font-size: 11px;
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════
   HERO — the top-of-dashboard P&L block
   Bloomberg-style: big bright numbers on black, tiny labels above
   ═══════════════════════════════════════════════════════════ */
.hero {
    padding: 18px 20px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.hero-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-avg-daily,
.hero-stat .value {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text-bright);
    font-feature-settings: 'tnum' 1;
}

/* ═══════════════════════════════════════════════════════════
   TABLES (the core data surface — Bloomberg is nothing without tables)
   ═══════════════════════════════════════════════════════════ */
table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 11.5px;
}

th {
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    text-align: left;
    padding: 7px 10px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    position: sticky;
    top: 32px;  /* below nav */
    z-index: 2;
}

td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    color: var(--text);
    font-feature-settings: 'tnum' 1;
}

tbody tr {
    transition: background var(--transition-fast);
}
tbody tr:hover td {
    background: var(--bg-card);
}
tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.008);
}
tbody tr:nth-child(even):hover td {
    background: var(--bg-card);
}

/* Table-specific cells */
.cell-rank   { color: var(--text-muted); width: 32px; }
.cell-symbol { color: var(--text-bright); font-weight: 500; }
.cell-price  { text-align: right; }
.cell-change { text-align: right; font-weight: 500; }
.col-num     { text-align: right; }

/* ═══════════════════════════════════════════════════════════
   FLASH ANIMATIONS — for live price updates
   ═══════════════════════════════════════════════════════════ */
@keyframes flash-up {
    0%   { background-color: rgba(0, 214, 101, 0.35); }
    100% { background-color: transparent; }
}
@keyframes flash-down {
    0%   { background-color: rgba(255, 59, 48, 0.35); }
    100% { background-color: transparent; }
}
@keyframes flash-neutral {
    0%   { background-color: rgba(255, 223, 0, 0.30); }
    100% { background-color: transparent; }
}

.flash-up   { animation: flash-up 500ms ease-out; }
.flash-down { animation: flash-down 500ms ease-out; }
.flash      { animation: flash-neutral 400ms ease-out; }

/* ═══════════════════════════════════════════════════════════
   BADGES / PILLS (BUY CE, BUY PE, WATCH, SKIP)
   Sharp rectangles. No border-radius. No padding bloat.
   ═══════════════════════════════════════════════════════════ */
.badge-buy,
.badge-watch,
.badge-none,
.action-badge,
.action-pill,
.action-buy-ce,
.action-buy-pe,
.action-watch,
.action-skip {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 2px 7px;
    text-transform: uppercase;
    line-height: 1.5;
}

.action-buy-ce,
.badge-buy {
    background: var(--green-dim);
    color: var(--green);
    border-left: 2px solid var(--green);
}
.action-buy-pe {
    background: var(--red-dim);
    color: var(--red);
    border-left: 2px solid var(--red);
}
.action-watch,
.badge-watch {
    background: var(--accent-dim);
    color: var(--accent);
    border-left: 2px solid var(--accent);
}
.action-skip,
.badge-none {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    border-left: 2px solid var(--border-strong);
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn,
button.btn,
button:not([class]) {
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 7px 14px;
    background: var(--bg-card);
    color: var(--text-bright);
    border: 1px solid var(--border-strong);
    cursor: pointer;
    transition: all var(--transition);
}
.btn:hover,
button:not([class]):hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--bg-elevated);
}
.btn-primary {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
}
.btn-primary:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #000;
}
.btn-danger {
    color: var(--red);
    border-color: var(--red);
}
.btn-danger:hover {
    background: var(--red);
    color: #000;
}

/* ═══════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════ */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
select,
textarea {
    font-family: var(--font-mono);
    font-size: 11.5px;
    padding: 7px 10px;
    background: var(--bg-card);
    color: var(--text-bright);
    border: 1px solid var(--border-light);
    transition: border-color var(--transition);
}
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-elevated);
}
input::placeholder {
    color: var(--text-dim);
    font-family: var(--font-sans);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.4px;
}

label, .field label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 500;
}

.field {
    margin-bottom: 14px;
}

/* ═══════════════════════════════════════════════════════════
   ALERTS / BANNERS
   ═══════════════════════════════════════════════════════════ */
.alert {
    padding: 10px 14px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    font-size: 12px;
    margin-bottom: 12px;
}
.alert-error,
.alert.error {
    border-left: 3px solid var(--red);
    color: var(--red);
    background: var(--red-dim);
}
.alert-success,
.alert.success {
    border-left: 3px solid var(--green);
    color: var(--green);
    background: var(--green-dim);
}
.alert-info {
    border-left: 3px solid var(--cyan);
    color: var(--cyan);
}

/* View-only banner on /scanner */
.view-only-banner {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════
   DOT INDICATORS (position status)
   ═══════════════════════════════════════════════════════════ */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dot-open  { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.dot-win   { background: var(--green); }
.dot-loss  { background: var(--red); }
.dot       { background: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════
   CHIPS (inline key-value pairs, e.g. dashboard summary strip)
   ═══════════════════════════════════════════════════════════ */
.chip-icon {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--accent);
    margin-right: 6px;
}
.chip-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}
.chip-value {
    font-family: var(--font-mono);
    color: var(--text-bright);
    font-weight: 500;
    margin-left: 4px;
}

/* ═══════════════════════════════════════════════════════════
   DECISION / DAY BAR — dashboard side blocks
   ═══════════════════════════════════════════════════════════ */
.day-bar {
    height: 4px;
    background: var(--border);
    position: relative;
    overflow: hidden;
}
.day-bar .bar {
    height: 100%;
    background: var(--accent);
    transition: width var(--transition);
}

.decision-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    font-size: 11px;
    border-bottom: 1px solid var(--border);
}
.decision-row:last-child {
    border-bottom: none;
}
.decision-row .time {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 10.5px;
    min-width: 44px;
}

.empty-msg {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-dim);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════════
   LINKS (inline)
   ═══════════════════════════════════════════════════════════ */
a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover {
    color: var(--accent-strong);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   LOGIN / SETUP — center-of-screen forms
   ═══════════════════════════════════════════════════════════ */
body:has(form.auth),
body.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════
   TICKER RULE — thin decorative top stripe for key sections
   Usage: <div class="ticker-rule"></div>
   ═══════════════════════════════════════════════════════════ */
.ticker-rule {
    height: 2px;
    background: linear-gradient(90deg,
        var(--accent) 0%,
        var(--accent) 30%,
        var(--border) 30%,
        var(--border) 100%);
}

/* ═══════════════════════════════════════════════════════════
   UTILITY
   ═══════════════════════════════════════════════════════════ */
.hidden { display: none !important; }
.flex   { display: flex; }
.flex-1 { flex: 1; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }

/* Numeric alignment */
.text-right { text-align: right; }
.tabular { font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════
   MOBILE (< 768px)
   Bloomberg philosophy: don't dumb it down. Give horizontal scroll
   with a sticky first column. Density > prettiness.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    html {
        font-size: 11px;
    }

    .nav {
        height: 30px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .nav a {
        padding: 0 10px;
        font-size: 10px;
    }
    .nav > span {
        font-size: 10px;
        padding: 0 8px;
    }

    /* Tables: allow horizontal scroll within container, keep density */
    .trades-wrap,
    .scanner-wrap,
    table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    th, td {
        padding: 5px 7px;
        font-size: 11px;
    }
    th { top: 30px; }

    /* Hero — smaller numbers but same layout */
    .hero {
        padding: 12px 12px 10px;
    }
    .hero-avg-daily,
    .hero-stat .value {
        font-size: 18px;
    }

    /* Cards pad less */
    .card { padding: 10px 12px; }
}

/* ═══════════════════════════════════════════════════════════
   PRINT (in case anyone ever prints a trade log)
   ═══════════════════════════════════════════════════════════ */
@media print {
    html { background: #fff; color: #000; }
    .nav, .btn, button { display: none !important; }
    table, td, th { border-color: #000; color: #000; }
}

/* ═══════════════ UI-REBUILD SHARED (2026-07-07) — additive only ═══════════════ */
@media (max-width: 900px) {
    body.dashboard-body { display: block; height: auto; overflow: auto; }
}
.nav-brand { font-family: var(--font-sans); font-size: 11px; font-weight: 700;
    letter-spacing: 1.5px; color: var(--accent); padding: 0 14px;
    border-right: 1px solid var(--border); height: 100%; display: inline-flex; align-items: center; }
.nav-clock { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-secondary);
    font-feature-settings: 'tnum' 1; margin-right: 12px; }
/* row 1 — status lights + clock, above the brand/tabs nav row */
.nav-top { display: flex; align-items: center; height: 26px; padding: 0 14px;
    border-bottom: 1px solid var(--border); flex-shrink: 0;
    overflow-x: auto; scrollbar-width: none; }
.nav-top::-webkit-scrollbar { display: none; }
.nav-top .nav-clock { display: inline-flex; margin-left: auto; }   /* clock lives in this row now — always shown, pushed to the right edge (nav .spacer doesn't apply here) */
.hl-dots { display: inline-flex; gap: 14px; align-items: center; margin-right: 12px; }
@media (max-width: 900px) { .hl-dots { gap: 9px; margin-right: 6px; } }
.hl { font-family: var(--font-sans); font-size: 8.5px; font-weight: 600;
    letter-spacing: 0.6px; color: var(--text-muted); white-space: nowrap; }
.hl .hl-dot { font-size: 8px; margin-right: 3px; color: var(--text-dim); }
.hl-blink { animation: hlblink 1s step-end infinite; }
@keyframes hlblink { 50% { opacity: 0.15; } }
/* clickable light (KITE → /kite) — resets the .nav a tab styling */
.nav a.hl-link { padding: 0; height: auto; display: inline-flex; align-items: center;
    border-bottom: none; border-right: none; text-decoration: none; cursor: pointer;
    font-size: 8.5px; font-weight: 600; letter-spacing: 0.6px; color: var(--text-muted); }
.nav a.hl-link:hover { color: var(--text-bright); background: none; }
/* one type system — two-line cells shared by positions + logs (terminal spec §2) */
.c-sym { color: var(--text-bright); font-weight: 600; font-size: 11px; }
.l-t1 { font-size: 9.5px; color: var(--text-muted); }
.l-t2 { font-size: 9.5px; color: var(--text-dim); }
/* chip strip shared grammar */
.chip-strip { display: flex; align-items: center; height: 30px;
    border-bottom: 1px solid var(--border); padding: 0; font-size: 11.5px;
    white-space: nowrap; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chip-strip::-webkit-scrollbar { display: none; }
.chip-strip .chip:first-child { padding-left: 10px; }  /* aligns with panel headers */
.chip-strip .chip { display: inline-flex; align-items: center; gap: 6px;
    padding: 0 14px; border-right: 1px solid var(--border); height: 100%; flex-shrink: 0; }
.chip-strip .cl, .chip-strip .cv, .chip-strip .k-sub { line-height: 1; }
.chip-strip .chip:last-child { border-right: none; }
.chip-strip .cl { font-family: var(--font-sans); font-size: 8.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); }
.chip-strip .cv { color: var(--text-bright); font-weight: 600; font-feature-settings: 'tnum' 1; }

/* ═══════════════════════════════════════════════════════════
   TEXT ROLES — ONE TYPOGRAPHY AUTHORITY (operator, 2026-08-16)

   /terminal is the canonical surface. Every value below was MEASURED
   from it with getComputedStyle, not chosen here, and the scanner's
   selectors are listed alongside the role classes so the two pages
   cannot drift into "almost the same grey". Adding a page to a role
   means adding its selector to that role's list — never re-declaring
   the values in a page's own <style>.

   Terminal references (dashboard.html, FROZEN — read, never edited):
     symbol      #tradelog-rows .c-sym       Mono 11/600  --text-bright
     data cell   #tradelog-rows tbody td     Mono 11/400  --text
     numeric     #tradelog-rows td.muted     Mono 11/400  --text-muted
     subtext     #tradelog-rows .l-t2        Mono 9.5/400 --text-dim
     header      #tradelog-rows th           Sans 8.5/600 ls0.6 UC --text-muted
     state       .reason-txt                 Sans 8.5/700 ls0.4 + state colour
     annotation  .at-d                       Sans 9/400   --text-muted
     chip label  #day-status .cl             Sans 8.5/600 ls0.6 UC --text-muted
     chip value  #day-status .cv             Mono 11/400
   ═══════════════════════════════════════════════════════════ */

/* A · SYMBOL — the row's identity */
.t-symbol,
.perf-t td.t-symbol,          /* beats the .perf-t td default in role B */
#decided .cr .cr-s,
.d-sym,
.gs-gate,
.log-wrap .c-sym,
.j-hero {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    color: var(--text-bright); letter-spacing: normal; text-transform: none;
}

/* B · DATA CELL — a value the operator reads as fact */
.t-data,
.gate > span:last-child,
.band-count,
.ga-chg,
.log-wrap .l-t1,
.perf-t td,
.j-val,
#inspector .ins-kv > span:last-child,
#inspector .ins-tl > span:first-child,
#decided .arb-row span:last-child {
    font-family: var(--font-mono); font-size: 11px; font-weight: 400;
    color: var(--text); letter-spacing: normal; text-transform: none;
    font-feature-settings: 'tnum' 1;
}

/* C · NUMERIC, SECONDARY — times, counts that support the fact */
.t-num,
.gate > span:first-child,
.perf-t td.muted,             /* beats the .perf-t td default in role B */
#decided .cr .cr-t,
.d-time,
.gs-nums,
.u-chg {
    font-family: var(--font-mono); font-size: 11px; font-weight: 400;
    color: var(--text-muted); letter-spacing: normal; text-transform: none;
    font-feature-settings: 'tnum' 1;
}

/* D · SUBTEXT — the second line of an identity (family, contract) */
.t-sub,
#decided .cr .cr-f,
#decided .cr .cr-st,
.d-ev,
.u-sym,
.ga-shape,
.cd-fam,
.ql-band,
.log-wrap .l-t2,
.log-wrap .fam-txt,
.tech-line {
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 400;
    color: var(--text-dim); letter-spacing: normal; text-transform: none;
}

/* E · HEADER — column heads and section titles */
.t-head,
.snav-item,
.f-label,
.sub-head,
.cp-l,
.dz-head .dz-title,
#decided .sec .sec-t,
#decided .arb-h,
#inspector .ins-bt,
.band-name,
.gs-head span,
.panel-title,
.ql-head span,
.log-wrap th,
.perf-t th,
.mgrid th,
.jr-title,
.j-tag {
    font-family: var(--font-sans); font-size: 8.5px; font-weight: 600;
    letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-muted);
}

/* F · STATE LABEL — what happened, in the EXIT METHOD voice. Colour is
   the state's own; the type is shared. */
.t-state,
#decided .cr .cr-o,
.ql-state,
.ql-out,
.log-wrap .reason-txt,
.ev-type,
.mode-badge, .warn-badge, .basis-badge, .obs-badge, .zero-badge {
    font-family: var(--font-sans); font-size: 8.5px; font-weight: 700;
    letter-spacing: 0.4px; text-transform: none;
}

/* G · ANNOTATION — the muted sentence that explains a thing */
.t-ann,
.snav-item .hint,
.f-sub,
.sec-desc,
.cp-s,
.dz-does, .dz-not,
.d-why,
.band-desc,
.panel-sub,
.panel-meta,
.empty-note,
.ql-why,
.j-sub,
#decided .sec .sec-s,
#decided .arb-s,
#decided .cr .cr-w,
#inspector .ins-kv > span:first-child,
#inspector .ins-tl > span:last-child,
#decided .arb-row span:first-child,
#qdist .qd-s {
    font-family: var(--font-sans); font-size: 9px; font-weight: 400;
    letter-spacing: normal; text-transform: none; color: var(--text-muted);
}

/* H · CHIP LABEL / VALUE — the KPI strip's two roles */
.t-chip-l,
#funnel .fn .fn-l,
#qdist .qb-l,
#qdist .qd-t {
    font-family: var(--font-sans); font-size: 8.5px; font-weight: 600;
    letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-muted);
}
.t-chip-v,
.cp-v,
.f-main > .line > span:first-child,
#funnel .fn .fn-v,
#kpi-strip .chip .cv,
#qdist .qb-n {
    font-family: var(--font-mono); font-size: 11px; font-weight: 400;
    letter-spacing: normal; text-transform: none; color: var(--text-bright);
    font-feature-settings: 'tnum' 1;
}

/* L · MONEY — a rupee figure carries its sign in BOTH colour and weight.
   Measured from /terminal (dashboard.html:124-125), which declared these
   locally first; the values are that declaration verbatim, so the frozen
   terminal renders unchanged and other pages stop shipping money at 400.
   Use these for ₹ amounts; `.pos`/`.neg` stay for percentages and ratios,
   which are coloured but not weighted. */
.pos-pnl-pos, .perf-t td.pos-pnl-pos { color: var(--green); font-weight: 600; }
.pos-pnl-neg, .perf-t td.pos-pnl-neg { color: var(--red); font-weight: 600; }

/* J · CHIP SUB-LINE — the third line in a KPI chip (window, date, count).
   Measured from /terminal's `#day-status .k-sub`: Mono 9.5/400, muted. */
.t-chip-s,
#kpi-strip .k-sub,
#day-status .k-sub {
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 400;
    letter-spacing: normal; text-transform: none; color: var(--text-muted);
    white-space: nowrap;
}

/* K · SECTION TOGGLE — the boxed switcher that picks which cut of a panel
   is on screen. /scanner declared it first (`.mode-toggle2`); the values
   here are that declaration verbatim, so the frozen scanner renders
   unchanged and /performance stops inventing an underline-tab idiom. */
.mode-toggle2 button,
.p-toggle button {
    font-family: var(--font-sans); font-size: 9px; font-weight: 700;
    letter-spacing: 0.8px; text-transform: uppercase; padding: 4px 12px;
    cursor: pointer; background: var(--bg);
    border: 1px solid var(--border-strong); color: var(--text-dim);
}
.mode-toggle2 button.on,
.p-toggle button.on {
    border-color: var(--accent); color: var(--accent); background: var(--accent-dim);
}
.p-toggle { display: flex; flex-shrink: 0; }
.p-toggle button + button { border-left: none; }

/* I · Q SCORE BANDS — Q is OBSERVATION. The band colours say "where this
   sat in the distribution", never "approved to trade": high is the same
   green as any positive figure, mid the same amber, low the same muted
   grey, and none of them is a signal. Measured from /terminal, which
   declared these locally first; both pages now read one definition. */
.q-hi { color: var(--green); font-weight: 600; }
.q-mid { color: var(--accent); }
.q-lo { color: var(--text-muted); }

/* A state label may borrow the palette's state COLOURS, but never a money
   cell's weight: .pos-pnl-pos/.neg carry font-weight 600 because they are
   built for rupee figures, and a label that picks them up drifts 600 vs
   the role's 700. Restated here, once, at matching specificity. */
.ql-state.pos-pnl-pos, .ql-state.pos-pnl-neg,
.ql-out.pos-pnl-pos, .ql-out.pos-pnl-neg,
#decided .cr .cr-o.pos-pnl-pos, #decided .cr .cr-o.pos-pnl-neg {
    font-weight: 700;
}