/*
 * tokens.css — fanfav-dev-ui design tokens.
 *
 * COPY-AND-ADAPT of fanfav-ui/presentation/static/css/tokens.css (D5 styling
 * pass). Same look-and-feel, DEV-specific values — the "uncurated twin" of the
 * production surface. Inherits the locked fanfav-ui decisions
 * (UI_DESIGN_PHILOSOPHY, mirrored here):
 *   Inter typeface, tabular figures on numeric columns.
 *   Type scale 18 / 13 / 11; two weights (400 / 500).
 *   Spacing rhythm 8 / 12 / 16; ~6px row padding (dense).
 *   Dark mode default, light mode via :root.light.
 *   Restrained grayscale base; ALL color reserved for meaning.
 *   FOUR signal colors — green / red / amber / blue — and nothing else.
 *   Hierarchy by shade + weight; borders for the table grid only.
 *
 * DEV DIVERGENCE (intentional, not drift):
 *   - The cockpit adds a VERDICT-PILL gradient (strong/holding/watch) and a
 *     STATUS-STRIP the user app has no analog for. Both are built INSIDE the
 *     four-signal budget: strong=green, holding=amber, watch=red — text +
 *     colored border, never a saturated fill (the .pp-tier idiom from
 *     fanfav-ui, reused here). No fifth color is introduced.
 *   - Directional player signals (lean_in/fade, hot/cold) map onto the same
 *     four: lean_in/hot=green (act on it), fade/cold=amber (directional, NOT
 *     "bad" → not red), neutral=tertiary text. Color rides on the text label,
 *     never color-alone.
 *
 * The base primitives below (tokens, tables, pills, filter bar, player rows)
 * are LIFTED from the fanfav-ui sheet so the dev surfaces — already written
 * against those class names — inherit the identical look. The dev-only cockpit
 * section is appended after.
 */

:root {
    /* Type scale */
    --type-title: 18px;
    --type-body: 13px;
    --type-meta: 11px;

    /* Two weights only */
    --weight-normal: 400;
    --weight-medium: 500;

    /* One spacing rhythm */
    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --row-pad-y: 6px;

    /* Dark mode (default) — restrained cool neutrals */
    --bg-primary:    #0e1014;
    --bg-secondary:  #161a20;
    --bg-tertiary:   #1d2128;
    --text-primary:   #e6e7ea;
    --text-secondary: #9ca0a8;
    --text-tertiary:  #6b6f78;
    --border-faint:   #25293055;
    --border-grid:    #2a2f37;

    /* Signal colors — the only color in the app */
    --signal-positive: #6ec97f;
    --signal-negative: #d97070;
    --signal-caution:  #d9a76e;
    --signal-info:     #6b9dd9;
}

:root.light {
    --bg-primary:    #f7f7f5;
    --bg-secondary:  #ffffff;
    --bg-tertiary:   #ececea;
    --text-primary:   #1a1a1c;
    --text-secondary: #5c5e62;
    --text-tertiary:  #92959a;
    --border-faint:   #d4d6d655;
    --border-grid:    #d4d6d6;

    --signal-positive: #2a8a3a;
    --signal-negative: #b03434;
    --signal-caution:  #a06820;
    --signal-info:     #2c5fa3;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--type-body);
    font-weight: var(--weight-normal);
    line-height: 1.5;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
}

body { display: flex; flex-direction: column; }
main { flex: 1; padding: var(--space-3); }

.tabular { font-variant-numeric: tabular-nums; }

/* --- header + footer (mirrors fanfav-ui §2.1 / §2.4) --- */
header {
    border-bottom: 1px solid var(--border-faint);
    padding: var(--space-3) var(--space-3) var(--space-2);
}
.surface-title {
    font-size: var(--type-title);
    font-weight: var(--weight-medium);
}
footer {
    border-top: 1px solid var(--border-faint);
    padding: var(--space-2) var(--space-3);
    font-size: var(--type-meta);
    color: var(--text-tertiary);
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
}

/* --- headings inside a surface: shade + weight hierarchy, no accent --- */
main h1 {
    font-size: var(--type-title);
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-1);
    letter-spacing: -0.01em;
}
main h2 {
    font-size: 15px;
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    margin: calc(var(--space-3) + var(--space-1)) 0 var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--border-faint);
    letter-spacing: -0.01em;
}
/* the small grey parenthetical that rides in many h2 spans — keep it quiet */
main h2 span { font-weight: var(--weight-normal); letter-spacing: 0; }
main h3 {
    font-size: var(--type-body);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    margin: var(--space-2) 0 var(--space-1);
}
main p {
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    max-width: 115ch;   /* spans most of the screen; capped for ultrawide readability */
}
main p code, code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.92em;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    padding: 1px 4px;
    border-radius: 3px;
}
main a { color: var(--signal-info); text-decoration: none; }
main a:hover { text-decoration: underline; }
main ul { margin: 0 0 var(--space-2) var(--space-3); color: var(--text-secondary); }
main li { margin-bottom: 4px; }

/* --- filter bar + pills (lifted from fanfav-ui I1/I3) --- */
.filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0 var(--space-2);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-faint);
    color: var(--text-secondary);
}
.pill {
    font-size: var(--type-meta);
    color: var(--text-secondary);
    text-decoration: none;
    padding: 3px var(--space-2);
    border: 1px solid var(--border-grid);
    border-radius: 3px;
    background: transparent;
}
button.pill { cursor: pointer; font-family: inherit; }
.pill:hover { color: var(--text-primary); }
.pill.active {
    color: var(--text-primary);
    font-weight: var(--weight-medium);
    background: var(--bg-tertiary);
    border-color: var(--text-tertiary);
}
.filter-count { font-size: var(--type-meta); color: var(--text-tertiary); }

/* --- shared table primitive (lifted; borders for the grid only) --- */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-body);
    margin-bottom: var(--space-2);
}
thead th {
    font-size: var(--type-meta);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    text-align: left;
    padding: var(--row-pad-y) var(--space-2);
    border-bottom: 1px solid var(--border-grid);
    white-space: nowrap;
}
th.num, td.num { text-align: right; }
tbody td {
    padding: var(--row-pad-y) var(--space-2);
    border-bottom: 1px solid var(--border-faint);
    color: var(--text-primary);
}
/* SVG figures (F2 trend, F3 band) sit on the grid border like the tables do */
figure svg, svg { max-width: 100%; }

/* --- player surface (lifted from fanfav-ui I3) --- */
.pl-filters { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-2); }
.pl-filter-row { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.pl-filter-label { font-size: var(--type-meta); color: var(--text-tertiary); min-width: 56px; }
.pl-search {
    margin-left: var(--space-1);
    font-family: inherit; font-size: var(--type-meta);
    color: var(--text-primary); background: var(--bg-secondary);
    border: 1px solid var(--border-grid); border-radius: 3px;
    padding: 3px var(--space-2); min-width: 160px;
}
.pl-search::placeholder { color: var(--text-tertiary); }
.pl-search:focus { outline: none; border-color: var(--text-tertiary); }
.player-row:hover { background: var(--bg-secondary); }
.player-name { color: var(--text-primary); font-weight: var(--weight-medium); }
.pl-empty { color: var(--text-tertiary); font-size: var(--type-meta); padding: var(--space-2) 0; }

/* =========================================================================
 * DEV-ONLY — the cockpit vocabulary the user app has no analog for.
 * D5 STYLING PASS. All color stays inside the four-signal budget
 * (green/amber/red + info-blue); pills use a faint role-tint WASH behind a
 * colored border + a status dot — a status chip, never a saturated fill. The
 * richness is concentrated on the HEALTH SIGNAL, which is the cockpit's whole
 * job (glance and know where to look), so the diagnostic read carries the
 * visual weight the dense fanfav-ui tables deliberately don't.
 * ========================================================================= */

/* --- family / cockpit question heads: an ACCENT-EDGED CARD -----------------
 * The whole header reads as one contained object with a colored left edge in
 * the verdict's color — so the family's health registers before a word is
 * read. The edge color is set by a modifier class (.head-strong/holding/watch)
 * the template stamps from the verdict label. Neutral (no modifier) = a quiet
 * grid edge, used on the cockpit landing head (no single verdict).
 * ------------------------------------------------------------------------- */
.family-head, .cockpit-head {
    background: var(--bg-secondary);
    border: 1px solid var(--border-faint);
    border-left: 3px solid var(--border-grid);
    border-radius: 6px;
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
}
.family-head.head-strong  { border-left-color: var(--signal-positive); }
.family-head.head-holding { border-left-color: var(--signal-caution); }
.family-head.head-watch   { border-left-color: var(--signal-negative); }
.family-head h1, .cockpit-head h1 { margin-bottom: 4px; }
.b-question {
    color: var(--text-secondary);
    font-weight: var(--weight-normal);
    margin: 0 0 var(--space-1);
    max-width: 115ch;
}
.b-question strong { color: var(--text-primary); font-weight: var(--weight-medium); }

/* --- the verdict pill: strong/holding/watch, tinted-chip form --------------
 * wash bg (role color @ ~10%) + colored border + status dot + colored label.
 * NOT a saturated fill — the wash is faint enough that the bordered label
 * still leads. The dot gives a pre-attentive status cue at a glance.
 * ------------------------------------------------------------------------- */
.verdict-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--type-meta);
    font-weight: var(--weight-medium);
    padding: 3px var(--space-1);
    border: 1px solid var(--border-grid);
    border-radius: 3px;
    color: var(--text-secondary);
    background: transparent;
    white-space: nowrap;
}
.verdict-pill::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.verdict-pill.v-strong  { color: var(--signal-positive); border-color: var(--signal-positive); background: color-mix(in srgb, var(--signal-positive) 10%, transparent); }
.verdict-pill.v-holding { color: var(--signal-caution);  border-color: var(--signal-caution);  background: color-mix(in srgb, var(--signal-caution) 10%, transparent); }
.verdict-pill.v-watch   { color: var(--signal-negative); border-color: var(--signal-negative); background: color-mix(in srgb, var(--signal-negative) 10%, transparent); }
.verdict-pill .v-note { color: var(--text-tertiary); font-weight: var(--weight-normal); }
/* the small "(placeholder · D4)" tag, if a pill is ever still a placeholder */
.verdict-pill em { color: var(--text-tertiary); font-style: normal; font-weight: var(--weight-normal); }

/* --- the status strip: traffic-light column + enlarged glance -------------
 * Each row carries a left-edge health tick in the verdict color; the glance
 * NUMBER (the thing you're there to read) is enlarged; the verdict cell holds
 * the tinted chip. The strip scans top-to-bottom as a health column.
 * ------------------------------------------------------------------------- */
.status-strip { width: 100%; }
.status-strip tbody tr { border-left: 3px solid transparent; }
.status-strip tbody tr.v-strong  { border-left-color: var(--signal-positive); }
.status-strip tbody tr.v-holding { border-left-color: var(--signal-caution); }
.status-strip tbody tr.v-watch   { border-left-color: var(--signal-negative); }
.status-strip tbody td:first-child { padding-left: var(--space-2); }
.status-strip .strip-q { color: var(--text-secondary); }
.status-strip .strip-gap,
.status-strip .strip-rate {
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-medium);
    font-size: 15px;
    color: var(--text-primary);
}
.status-strip .strip-gap + span,
.status-strip .strip-rate + span { display: block; }
.status-strip .strip-pointer { color: var(--text-tertiary); font-style: italic; }

/* --- directional player-signal labels (lean_in/fade, hot/cold) -----------
 * Inside the four-signal budget: the ACT-ON-IT direction is green, the
 * directional-other is amber (not red — "fade"/"cold" is a direction, not a
 * failure), neutral is quiet tertiary text. A faint dot echoes the pill cue.
 * ------------------------------------------------------------------------- */
.sig {
    display: inline-flex; align-items: center; gap: 5px;
    font-weight: var(--weight-medium); font-size: var(--type-meta);
    white-space: nowrap;
}
.sig::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.sig-lean, .sig-hot  { color: var(--signal-positive); }
.sig-fade, .sig-cold { color: var(--signal-caution); }
.sig-neutral { color: var(--text-tertiary); font-weight: var(--weight-normal); }
.sig-neutral::before { background: var(--text-tertiary); opacity: 0.5; }

/* --- cockpit family index list: bordered rows, chevron affordance --------- */
.cockpit-families { list-style: none; margin-left: 0; }
.cockpit-families li {
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--border-faint);
    color: var(--text-secondary);
}
.cockpit-families li:last-child { border-bottom: none; }

/* --- a touch more air between a surface's intro prose and its first table - */
main section > p:first-of-type { margin-bottom: var(--space-3); }
main figure { margin-bottom: var(--space-2); }
main figcaption { color: var(--text-secondary); }

/* =========================================================================
 * D5 READABILITY OVERRIDE (Batch 3).
 * The templates hardcode caption/footnote/subhead color as inline
 * style="color:#555|#666|#999" — literal dark greys baked into the markup.
 * On the near-black (#0e1014) surface those read too dim. Inline styles beat
 * normal stylesheet rules, so these overrides use !important — the correct
 * tool when the markup hardcodes a color the stylesheet must reclaim. The
 * durable fix (tokenising those inline colors) rides with any later pass that
 * edits the template internals; this reclaims readability now without churn.
 *
 * Lift map (on the dark surface):
 *   #555 / #666  (captions, footnotes, figure legends, h2 parentheticals)
 *     -> --text-secondary (#9ca0a8)  — readable supporting text
 *   #999         (was reserved for the deferred [SCOPE] stubs, now removed)
 *     -> --text-secondary too, for any stray remaining
 * Genuinely incidental micro-labels can stay quiet, but the blanket lift is
 * the right call: nothing in these templates uses #555/#666 for anything but
 * legible supporting prose.
 * ========================================================================= */
main [style*="color:#555"],
main [style*="color:#666"],
main [style*="color: #555"],
main [style*="color: #666"] {
    color: var(--text-secondary) !important;
}
main [style*="color:#999"],
main [style*="color: #999"] {
    color: var(--text-secondary) !important;
}
/* the #333 figcaption title (portfolio band cards) — lift to primary so the
   card's own caption title leads its lighter body caption underneath */
main [style*="color:#333"],
main [style*="color: #333"] {
    color: var(--text-primary) !important;
}


/* =========================================================================
 * D5 BATCH 4 — table density + graph polish.
 *
 * SUMMARY TABLES (.data-table.summary): the narrow 3-6 column summary tables
 * (calibration coverage / per-position / reliability ladder; portfolio
 * margins / scorecards / controller) look stretched-thin at full width — the
 * label column gets acres of empty space while the last numeric column is
 * flung to the far edge. Constrain them to a tidy cluster and right-align every
 * column after the first (the label), so numbers stack cleanly. The WIDE player
 * LISTS keep full width (they earn it — many columns) by NOT carrying .summary.
 * ========================================================================= */
.data-table.summary { width: auto; }   /* size to content — no stretch, no clamp; numbers right-align below */
.data-table.summary th:not(:first-child),
.data-table.summary td:not(:first-child) { text-align: right; }
/* bare <table> in portfolio that we tag .summary also picks up the base table
   rules already defined above; the right-align is what they were missing. */

/* =========================================================================
 * D5 BATCH 7 — F2 trend colour legend (swatch + one-line explainer each).
 * Scannable colour key beneath the F2 description: a small SVG swatch (green
 * dot / blue line / dashed line) beside a short sentence, one per row. Reads
 * instantly, like the Portfolio band-card captions.
 * ========================================================================= */
.trend-legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 var(--space-2);
}
.trend-legend .tl-item {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--type-body);
}
.trend-legend .tl-item svg { flex: none; align-self: center; }
.trend-legend .tl-item strong { color: var(--text-primary); font-weight: var(--weight-medium); }
.trend-guidance { color: var(--text-secondary); max-width: 115ch; }

/* =========================================================================
 * D5 HOVER PASS — info-icon + stat tooltip (mirrors fanfav-ui I5).
 * A small info glyph on cryptic column headers; hover/focus shows an on-brand
 * dark card with the 1-2 sentence definition. The card is positioned in
 * document coords by stat_tooltip.js. .info-icon is focusable (keyboard).
 * ========================================================================= */
.info-icon {
    color: var(--text-tertiary);
    cursor: help;
    margin-left: 3px;
    font-size: var(--type-meta);
    font-style: normal;
}
.info-icon:hover { color: var(--text-secondary); }
.info-icon:focus { outline: none; color: var(--text-primary); }
.info-icon:focus-visible {
    outline: 1px solid var(--text-tertiary);
    outline-offset: 2px;
    border-radius: 2px;
}
.stat-tooltip {
    position: absolute;
    z-index: 70;
    max-width: 300px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-grid);
    border-radius: 6px;
    padding: var(--space-1) var(--space-2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    font-size: var(--type-meta);
    line-height: 1.5;
    color: var(--text-secondary);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.stat-tooltip[hidden] { display: none !important; }
.stat-tooltip-label { color: var(--text-primary); font-weight: var(--weight-medium); }
.stat-tooltip-body { color: var(--text-secondary); }

/* --- D6: sign-out link (header) ---------------------------------------------
   base.html renders <a class="sign-out"> inside the header, Jinja-guarded on the
   Clerk config. Without a rule it falls back to the UA default (blue, underlined)
   — the one visual regression the D6 auth wiring introduced. Styled here as a
   quiet secondary affordance: it is plumbing, not a cockpit signal, so it must
   not compete with the verdict pills for attention. */
.sign-out {
    color: var(--text-secondary);
    font-size: var(--type-meta);
    text-decoration: none;
    border: 1px solid var(--border-faint);
    border-radius: 4px;
    padding: var(--space-1) var(--space-2);
    transition: color 0.12s ease, border-color 0.12s ease;
}

.sign-out:hover {
    color: var(--text-primary);
    border-color: var(--text-primary);
}