/* scores/scores.css — Ownership Momentum Rank (OMR) public page.
   Uses design-system tokens (var(--color-*)); the rank badge uses a single-hue
   blue intensity ramp (never buy/sell green/red). Tone chips are the only
   directional green/red. Theme-aware (light default + [data-theme="dark"]). */

:root {
    --omr-accent-rgb: 59, 130, 246;   /* #3b82f6 */
    --omr-pos: #16a34a;  --omr-pos-bg: rgba(22,163,74,.12);
    --omr-neg: #dc2626;  --omr-neg-bg: rgba(220,38,38,.12);
    --omr-mix-bg: rgba(120,130,150,.14);
}
[data-theme="dark"] {
    --omr-accent-rgb: 96, 165, 250;   /* #60a5fa */
    --omr-pos: #4ade80;  --omr-pos-bg: rgba(74,222,128,.14);
    --omr-neg: #f87171;  --omr-neg-bg: rgba(248,113,113,.14);
    --omr-mix-bg: rgba(148,163,184,.16);
}

.omr-wrap { max-width: 980px; margin: 0 auto; padding: 8px 16px 64px; }

/* ─── Hero ─────────────────────────────────────────────────────── */
.omr-hero { padding: 8px 0 6px; }
.omr-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--color-text-muted); text-transform: uppercase; }
.omr-h1 { font-size: 30px; font-weight: 800; color: var(--color-text-primary); margin: 8px 0 10px; line-height: 1.2; }
.omr-lede { font-size: 15.5px; color: var(--color-text-secondary); line-height: 1.65; max-width: 760px; }
.omr-lede strong { color: var(--color-text-primary); }
.omr-hero-meta { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.omr-date-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--color-text-secondary);
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 5px 12px; }
.omr-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--omr-accent-rgb), 1); }
.omr-hero-link { font-size: 13px; font-weight: 600; color: rgba(var(--omr-accent-rgb), 1); text-decoration: none; }
.omr-hero-link:hover { text-decoration: underline; }

/* ─── Pillars explainer ────────────────────────────────────────── */
.omr-pillars-explain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.omr-pill-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 16px; }
.omr-pill-w { display: inline-block; font-size: 20px; font-weight: 800; color: rgba(var(--omr-accent-rgb), 1); }
.omr-pill-card h3 { font-size: 15.5px; font-weight: 800; color: var(--color-text-primary); margin: 4px 0 2px; }
.omr-pill-q { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); font-style: italic; margin: 0 0 6px; }
.omr-pill-d { font-size: 13px; color: var(--color-text-secondary); line-height: 1.55; margin: 0; }
.omr-pill-note { grid-column: 1 / -1; font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.7;
    background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid rgba(var(--omr-accent-rgb), 1);
    border-radius: 8px; padding: 12px 16px; }
.omr-pill-note strong { color: var(--color-text-primary); }
.omr-pill-note a { color: rgba(var(--omr-accent-rgb), 1); text-decoration: none; font-weight: 600; }
.omr-pill-note a:hover { text-decoration: underline; }
.omr-ctx { white-space: nowrap; margin: 0 2px; }
.omr-flag { font-size: 13px; }

/* ─── Leaderboard head ─────────────────────────────────────────── */
.omr-board-head { margin-top: 36px; }
.omr-h2 { font-size: 20px; font-weight: 800; color: var(--color-text-primary); margin: 0 0 4px; }
.omr-board-sub { font-size: 13.5px; color: var(--color-text-secondary); margin: 0; }
.omr-board-sub strong { color: var(--color-text-primary); }

/* ─── Controls ─────────────────────────────────────────────────── */
.omr-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 16px 0 10px; }
.omr-ctrl { display: flex; flex-direction: column; gap: 4px; }
.omr-ctrl label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--color-text-muted); }
.omr-ctrl select, .omr-ctrl input {
    height: 34px; padding: 0 10px; font-size: 13px; color: var(--color-text-primary);
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; }
/* The site themes via data-theme on <html>, not prefers-color-scheme, so the
   browser doesn't know to draw native controls dark — the <option> popup then
   renders white-on-white in dark mode. color-scheme fixes the native popup;
   the explicit option colors are a belt-and-suspenders for browsers that honor
   option CSS. */
.omr-ctrl select { color-scheme: light; }
[data-theme="dark"] .omr-ctrl select { color-scheme: dark; }
.omr-ctrl select option { background: var(--color-surface); color: var(--color-text-primary); }
.omr-ctrl input#inp-min { width: 72px; }
.omr-ctrl input#inp-ticker { width: 96px; text-transform: uppercase; }
.omr-apply { height: 34px; padding: 0 16px; background: rgba(var(--omr-accent-rgb), 1); color: #fff; border: none;
    border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer; }
.omr-apply:hover { filter: brightness(1.05); }

.omr-stats { display: flex; gap: 16px; font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 8px; }
.omr-stats strong { color: var(--color-text-primary); }

/* ─── Table ────────────────────────────────────────────────────── */
.omr-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: 10px; }
.omr-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.omr-table thead th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    color: var(--color-text-muted); padding: 10px 14px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); white-space: nowrap; }
.omr-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.omr-table tbody tr:last-child td { border-bottom: none; }
.omr-table tbody tr:hover { background: var(--color-surface); }
.omr-c-rank { width: 40px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.omr-c-ticker { min-width: 180px; }
.omr-sym { font-weight: 700; color: rgba(var(--omr-accent-rgb), 1); text-decoration: none; }
.omr-sym:hover { text-decoration: underline; }
.omr-name { display: block; font-size: 11.5px; color: var(--color-text-muted); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.omr-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 30px; padding: 0 6px;
    border-radius: 8px; border: 1.5px solid rgba(var(--omr-accent-rgb), 1); color: var(--color-text-primary);
    font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.omr-tone { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
    padding: 2px 7px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }
/* QoQ score-move chip — the move itself is a signal (green up / red down,
   consistent with the holder-delta chip; the blue rank badge stays blue). */
.omr-qoq { display: inline-block; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
    padding: 2px 6px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.omr-qoq.pos  { color: var(--omr-pos); background: var(--omr-pos-bg); }
.omr-qoq.neg  { color: var(--omr-neg); background: var(--omr-neg-bg); }
.omr-qoq.flat { color: var(--color-text-muted); background: var(--omr-mix-bg); }

.omr-pillars { display: flex; gap: 8px; }
.omr-pl { width: 42px; }
.omr-pl-track { height: 6px; border-radius: 999px; background: var(--color-border); overflow: hidden; margin-bottom: 2px; }
.omr-pl-fill { height: 100%; border-radius: 999px; }
.omr-pl-lbl { font-size: 9px; color: var(--color-text-muted); text-transform: uppercase; text-align: center; }
.omr-pl-na { font-size: 11px; color: var(--color-text-muted); text-align: center; }

.omr-hc { font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.omr-delta { font-size: 11.5px; font-weight: 700; margin-left: 4px; }
.omr-delta.pos { color: var(--omr-pos); }
.omr-delta.neg { color: var(--omr-neg); }
.omr-flags span { font-size: 13px; margin-right: 5px; }

/* ─── Pager / legend / disclaimer ──────────────────────────────── */
.omr-pager { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
.omr-pager span { font-size: 12.5px; color: var(--color-text-muted); }
.omr-more { height: 30px; padding: 0 14px; background: var(--color-bg); color: var(--color-text-primary);
    border: 1px solid var(--color-border); border-radius: 6px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.omr-more:hover { border-color: rgba(var(--omr-accent-rgb), 1); }
.omr-more:disabled { opacity: .5; cursor: default; }

.omr-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 14px; font-size: 12px; color: var(--color-text-secondary); }
.omr-legend strong { color: var(--color-text-primary); }
.omr-legend > span strong { color: rgba(var(--omr-accent-rgb), 1); margin-right: 3px; }
.omr-legend-na { margin-left: auto; color: var(--color-text-muted); }

.omr-disclaimer { margin-top: 24px; padding: 12px 16px; background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 8px; font-size: 12px; color: var(--color-text-muted); font-style: italic; line-height: 1.6; }
.omr-disclaimer strong { color: var(--color-text-secondary); font-style: normal; }

/* ─── Responsive ───────────────────────────────────────────────── */
@media (max-width: 720px) {
    .omr-pillars-explain { grid-template-columns: 1fr; }
    .omr-hide-sm { display: none; }
    .omr-h1 { font-size: 25px; }
}