/* ════════════════════════════════════════════════════════════════════════
redesign.css — Hybrid "Data-Dense + Warm" design-system layer (Stage 1)
Loaded LAST (after styles.css + polish.css). Additive + reversible: remove
the to fully revert to the prior look. Driven by the ui-ux-pro-max
skill (Data-Dense Dashboard style + reasoning rules) per the user's choice:
keep the warm --brand accent, adopt data-dense density, structure, tabular
numerics, consistent elevation/radius, AA focus, and smooth state motion.
NO markup/JS changes — restyles the shared component classes only.
════════════════════════════════════════════════════════════════════════ */
:root {
/* Data-dense system variables (skill: --table-row-height 36, padding 12) */
--rd-radius: 10px; /* modern card rounding (was flat 0) */
--rd-radius-sm: 7px; /* controls / inputs */
--rd-radius-pill: 999px; /* status chips */
--rd-row-h: 38px; /* dense table row */
--rd-pad: 13px; /* card padding */
/* taste-skill: tint shadows to the warm background hue; NO saturated glows */
--rd-elev-1: 0 1px 2px rgba(74,46,28,.06);
--rd-elev-2: 0 1px 2px rgba(74,46,28,.06), 0 8px 20px -12px rgba(74,46,28,.18);
--rd-elev-hover: 0 2px 4px rgba(74,46,28,.08), 0 12px 26px -14px rgba(74,46,28,.26);
--rd-rule: var(--rule-soft, rgba(15,14,12,.10));
--rd-rule-strong: rgba(15,14,12,.16);
--rd-row-hover: rgba(178,52,21,.045); /* warm row highlight */
--rd-head-bg: rgba(15,14,12,.03);
--rd-t: 160ms var(--ease-expo, cubic-bezier(.16,1,.3,1));
}
html[data-theme="dark"] {
--rd-rule: rgba(255,255,255,.10);
--rd-rule-strong: rgba(255,255,255,.16);
--rd-row-hover: rgba(248,166,140,.06);
--rd-head-bg: rgba(255,255,255,.04);
--rd-elev-1: 0 1px 2px rgba(0,0,0,.30);
--rd-elev-2: 0 2px 4px rgba(0,0,0,.30), 0 8px 20px -8px rgba(0,0,0,.45);
--rd-elev-hover: 0 6px 16px -6px rgba(0,0,0,.55);
}
/* ── 1. Accessibility: one consistent, visible focus ring everywhere (skill §1) */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, summary:focus-visible {
outline: 2px solid var(--brand, #b23415);
outline-offset: 2px;
border-radius: 3px;
}
/* ── 2. Smooth, meaningful state motion (skill §7: 150–300ms; reduced-motion safe) */
a, button, [role="button"], .posChip, .sub-pill,
.ws-card, .hub-card, .mtd-card, .ws-section, .sub-section, .profile-section,
.lse-field, .study-affected__chip, .next-rail__card, .intel-col {
transition: background-color var(--rd-t), border-color var(--rd-t),
box-shadow var(--rd-t), transform var(--rd-t), color var(--rd-t);
}
@media (prefers-reduced-motion: reduce) {
* { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* ── 3. Tabular numerics for all data (skill: number-tabular — no layout shift) */
.num, .row-adp, .row-mom, .ws-metric__value, .mtd-delta, .mtd-tag,
table td, table th, .sub-stat__value, .glog-tbl td, .lse-step__inp,
.mta2-stat b, .mta2-card__val {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* ── 4. Cards / sections: modern radius + consistent elevation (skill §4 elevation) */
.ws-section, .sub-section, .hub-card, .mtd-card, .profile-section,
.lse-field, .study-affected, .intel-col, .next-rail__card, .ws-card,
.lab-card, .mtd, .pa-strip {
border-radius: var(--rd-radius);
border: 1px solid var(--rd-rule);
background-clip: padding-box;
}
.ws-section, .sub-section, .mtd-card, .profile-section, .study-affected,
.intel-col, .lab-card { box-shadow: var(--rd-elev-1); }
/* Interactive cards lift on hover (skill: state-clarity, scale-feedback) */
.hub-card:hover, .mtd-card:hover, .next-rail__card:hover,
.study-affected__chip:hover, .lab-card:hover {
box-shadow: var(--rd-elev-hover);
border-color: var(--brand-tint, rgba(178,52,21,.20)); /* soft, not a hard saturated outline */
transform: translateY(-1px); /* taste-skill: restrained motion */
}
/* ── 5. Data-dense tables — SUB-PAGE tables only (skill: sticky header,
row-hover, gridlines). The main Rankings table (#tableBody in .table-wrap)
keeps its bespoke dark sticky header at top:64px — intentionally NOT touched
here, to avoid a specificity battle on the most important surface. */
.sub-section table thead th, .glog-tbl thead th {
position: sticky; top: 0; z-index: 2;
background: var(--rd-head-bg);
backdrop-filter: saturate(1.4) blur(2px);
-webkit-backdrop-filter: saturate(1.4) blur(2px);
font: 700 10.5px/1.3 var(--font, system-ui);
letter-spacing: .04em; text-transform: uppercase;
color: var(--text-3, #6a655b);
padding: 9px 12px;
border-bottom: 1px solid var(--rd-rule-strong);
}
.sub-section table tbody td, .glog-tbl tbody td {
padding: 8px 12px;
border-bottom: 1px solid var(--rd-rule);
vertical-align: middle;
}
.sub-section table tbody tr, .glog-tbl tbody tr { transition: background-color var(--rd-t); }
.sub-section table tbody tr:hover, .glog-tbl tbody tr:hover { background: var(--rd-row-hover); }
/* horizontal scroll guard on small screens (skill §5: no horizontal page scroll) */
.table-wrap, .glog-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ── 6. Chips / pills: unified pill geometry (skill: icon/style consistency) */
.posChip, .sub-pill, .row-adp, .row-mini-pill, .pa-chip, .mtd-tag,
.mtd-need-chip, .lab-tier, .study-tier-badge {
border-radius: var(--rd-radius-pill);
}
.row-mom { border-radius: var(--rd-radius-sm); }
/* ── 7. Buttons: consistent radius + press feedback (skill §2, §4 primary-action) */
.lse-btn, .hero__cta, .ops-btn, .mta2-btn, .sub-cta, .lse-seg, .lse-step,
.lse-seg__btn { border-radius: var(--rd-radius-sm); }
.lse-btn:active, .hero__cta:active, .ops-btn:active, .mta2-btn:active {
transform: translateY(1px);
}
/* ── 8. KPI / metric blocks: data-dense card treatment (skill: KPI cards) */
.ws-metric, .mtd-card, .sub-stat {
padding: var(--rd-pad);
}
.ws-metric { border-radius: var(--rd-radius); border: 1px solid var(--rd-rule); background: var(--surface, #fff); }
/* ── 9. Inputs: modern field affordance + AA (skill §8 forms) */
input[type="text"], input[type="number"], input[type="search"], select, textarea,
.ops-form__input, .ops-form__area, .lse-step__inp {
border-radius: var(--rd-radius-sm);
}
/* ════════════════════════════════════════════════════════════════════════
Stage 1.5 — aesthetic steer (taste-skill: precise numerics, refined
hierarchy, single warm accent, no AI-tells). Display VALUES only — never
table cells — so column widths stay stable.
════════════════════════════════════════════════════════════════════════ */
.big-num, .hero-stat__value, .study-stat__value, .attr-card__value,
.attr-li__value, .signal-core__value, .multivar-row__value, .mm-card__big,
.expl-trajectory-stat__value, .expl-headline-figure__num-block,
.ws-metric__value, .sub-stat__value, .mta2-stat b, .mta2-grade,
.mtd-delta, .row-mom, .hero-clean__delta {
font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
font-variant-numeric: tabular-nums;
letter-spacing: -.015em;
}
/* Hierarchy via weight + tracking, not just scale (taste-skill: no oversized H1) */
.sub-hero__title, .ws-section__title, .mtd-title, .hub-hero__title,
.study-article > header h2, .expl-hero__name {
letter-spacing: -.022em;
}
/* Section eyebrows: quiet, technical, mono micro-labels for a data product */
.ws-section__eyebrow, .sub-hero__eyebrow, .mtd-eyebrow, .lse-field__sub {
font-feature-settings: "tnum" 1;
}
/* ════════════════════════════════════════════════════════════════════════
Stage 2 — per-surface information hierarchy (no new effects: spacing,
grouping, emphasis, scanning, fewer/quieter boxes).
════════════════════════════════════════════════════════════════════════ */
/* ── DASHBOARD — primary question: "What changed today for my team?" ──────
The My Team briefing is the answer; compress the decorative hero so it leads,
and make the change-count scannable. De-emphasize, don't remove. */
.hub-workspace[data-workspace="dashboard"] .hub-hero__inner { min-height: 0; }
.hub-workspace[data-workspace="dashboard"] .hub-hero__art {
max-height: 112px; overflow: hidden; align-self: center;
}
.hub-workspace[data-workspace="dashboard"] .hub-hero__photo {
max-height: 112px; width: auto; object-fit: contain;
}
/* "N changes on your roster" = the answer → make it read instantly (hierarchy) */
.mtd-summary { font-size: 13.5px; }
.mtd-summary strong { font-size: 18px; line-height: 1; }
.mtd-head { align-items: center; }
/* a11y: the one too-bright section-pill red (Trade Center) → AA red, keep identity */
a.hub-section-pill[href*="trade-center"] { color: var(--red, #a8201a) !important; }
/* ── PLAYER PAGE — primary question: "Buy / hold / trade / fade?" ──────────
Make the verdict + actionable signal dominate; keep reference content
(comps, attribution, splits, game log, cascade) available but secondary.
CSS-only: emphasis + reorder via stable .profile-section-- classes.
No new effects. */
/* 1. Alerts strip = the verdict → the scannable focal point under the hero */
#explainerMain .pa-strip { margin: 6px 0 16px; gap: 8px; }
#explainerMain .pa-chip { padding: 7px 13px; }
#explainerMain .pa-chip__lab { font-size: 12.5px; }
/* 2. Surface the actionable signal: pull Market Movement (trade signal) + the
Fantasy Thesis (human takeaway) to the top of the detail flow (were ~9th /
~1st-but-below-everything). Reference sections keep DOM order below. */
.explainer-flow { display: flex; flex-direction: column; }
.explainer-flow > .profile-section--market { order: -2; }
.explainer-flow > .profile-section--thesis { order: -1; }
/* 3. Reference sections stay available but quieter (smaller eyebrow) */
.explainer-flow > .profile-section--comps .profile-section__eyebrow,
.explainer-flow > .profile-section--multivar .profile-section__eyebrow,
.explainer-flow > .profile-section--splits .profile-section__eyebrow,
.explainer-flow > .profile-section--gamelog .profile-section__eyebrow {
font-size: 12px;
}
/* ════════════════════════════════════════════════════════════════════════
Stage 2 — Targeted IA fix (no nav overhaul): surface daily actions on the
Dashboard + sharpen Dashboard ("what changed") vs My Team ("what to do").
Layout + hierarchy only — reuses existing pill styling; no new effects.
════════════════════════════════════════════════════════════════════════ */
/* Dashboard quick-actions toolbar: daily tools one click from the hub
(lineup / waivers / start-sit / trade / injuries) instead of buried in the
Operations workspace. Deliberately NOT sticky (unlike .hub-section-strip) so
it never collides with the section-nav strip; the pills reuse
.hub-section-pill and inherit the dashboard workspace tone. */
.hub-quick-actions {
display: flex; flex-wrap: wrap; align-items: center;
gap: 8px; margin: 2px 0 18px;
}
.hub-quick-actions__lab {
font: 700 10.5px/1 var(--font, system-ui);
letter-spacing: .09em; text-transform: uppercase;
color: var(--text-3, #6a655b); margin-right: 4px;
}
/* Briefing → My Team hand-off CTA (de-dup: the Dashboard reports what changed,
My Team is where you act). Accent link using the existing --brand token. */
.mtd-head__act {
font-weight: 600; white-space: nowrap;
color: var(--brand, #b23415); text-decoration: none;
}
.mtd-head__act:hover { text-decoration: underline; }
/* ── TRADE ANALYZER — answer-first: collapse the "Roster construction" advanced
row by default. The markup ships it [hidden] and the Advanced ▾ toggle flips
that attribute, but a base `.mta2-adv{display:flex}` rule overrode it — so the
row was always shown (~50px of config above the verdict) and the toggle was a
no-op. Respecting [hidden] declutters the top AND repairs the toggle. */
.mta2-adv[hidden] { display: none; }
/* a11y (WCAG 1.4.1, surfaced on this route): the empty-state "Import opponents
in Sync" hint has an inline link distinguished by color only — underline it so
it's distinguishable without relying on color. */
.mta2-qa-row a { text-decoration: underline; }
/* ── RESEARCH HUB (studies index, #/research/studies) — mobile answer-first.
The category sidebar is a sticky, height-capped column on desktop, but the
existing ≤900px rule makes it position:static / max-height:none, so its full
category list (~5600px, all 166 study links) stacks ABOVE the index — burying
the tier filter chips, the freshness stamp, and every study card ~6800px down
(0 cards on the first mobile screen). The index is self-navigable on mobile
(tier filter chips + search + category-grouped cards + the Data-Backed vs
Framework/Experimental split), so collapse the redundant sidebar there to
surface the answer. No content is hidden — every study, including experimental,
still renders in the index with its honest tier label. */
@media (max-width: 900px) {
.studies-sidebar { display: none; }
}
/* ── TRADE ANALYZER a11y — muted-text AA on the cream page bg. Companion to the
PE4 fix (polish.css) that darkened --text-4 scoped to .mta2. The remaining
muted labels (.mta2-chip, .mta2-ex__s, .mta2-empty__lead p) use --text-3
(#6a655b ≈ 5.05:1 — borderline) and axe flags them transiently during the
entry fade; darken --text-3 scoped to the analyzer (light theme only) for a
comfortable AA margin (~6:1). The hardcoded inline #6b7280 in rosterQuickAdd
(≈4.21:1 — a genuine fail) is fixed at source in trade-analyzer.js. No hue
change, no layout/logic change; the green/red grade tones are untouched. */
html:not([data-theme="dark"]) .mta2 { --text-3: #5d584d; }
/* ── Owner request (2026-06-08): hide the Methodology tab from the site — it was
an internal/dev surface ("just for me"). One rule covers every render path: the
top-nav tab, the mobile drawer (same .layer1-rail__item, revealed by the burger),
and its hover flyout (a display:none trigger can't be hovered, so the flyout
never populates for methodology). The footer's two methodology doc links are
hidden too. Routes (#/methodology*) are intentionally LEFT INTACT, so the owner
keeps direct-URL access; the "45 stale" data-health chip is unaffected. Fully
reversible — delete these two rules to restore. */
.layer1-rail__item[data-workspace="methodology"] { display: none; }
.home-footer__col a[href*="methodology"] { display: none; }
/* ── Owner request (2026-06-08): remove the "N stale" data-pipeline chip from the
top-right nav. app.js reveals it (inline display) when sources are stale; this
overrides that so it never shows. */
#siteNavDataHealth { display: none !important; }
/* ── Owner branding (2026-06-08): recolor the hero wordmark accent letter ("r")
from the orange --accent gimmick to Ohio State scarlet. */
.hero__title .gradient,
.hero__title--scoreboard .gradient,
.hero__title--clean .gradient {
color: #BB0000 !important;
-webkit-text-fill-color: #BB0000 !important;
}
/* Owner fix (2026-06-08): the wordmark "r" overlapped the "g" — a base rule set
.gradient margin-left:-0.08em (pulling it onto the "g"). Neutralize so the "r"
sits after the "g" at the title's normal tracking (no overlap). */
.hero__title .gradient { margin-left: 0 !important; }
/* Owner branding (2026-06-08): the Risers & fallers card's trend lines (the
rising line + the falling line, stroke=currentColor) → Ohio State scarlet. */
.home-surface__viz .viz-up,
.home-surface__viz .viz-down { color: #BB0000 !important; }
/* ── Owner request (2026-06-08): format section subtitles correctly site-wide.
The shared .profile-section__sub (e.g. Market Movement's "Cross-referenced
signals · …") was 18px/600/near-black — it read as a heading competing with
its own eyebrow label. Render it as a proper muted subtitle (smaller, normal
weight, secondary color) so the eyebrow is the label and this is the descriptor.
Applies to every profile section. */
.profile-section__sub {
font-size: 13.5px !important;
font-weight: 500 !important;
line-height: 1.45 !important;
letter-spacing: 0 !important;
color: var(--text-2, #5a5650) !important;
}
/* ── Owner fix (2026-06-08): rankings table header was overlapping row #1. The
.table-wrap is overflow-x:auto (mobile scroll-guard), which makes the sticky
thead pin to the WRAP rather than the page — so top:64px (meant to clear the
fixed nav when page-pinned) pushed the header 64px DOWN into the first rows.
Pin it to the wrap top instead so the header sits correctly above the rows. */
#tableWrap thead th, .table-wrap thead th { top: 0 !important; } /* generalized 2026-06-16: ALL .table-wrap (prospects/daily/etc.) pin sticky thead to the wrap, not the page — top:64px pushed labels into row 1 */
/* ════════════════════════════════════════════════════════════════════════
Owner request (2026-06-08): RANKINGS-FAMILY LEFT RAIL — a real shared
sidebar modeled on the dashboard Shell-B rail. The rankingsRail() IIFE
(app.js) builds an independent