/* HQ Design System — component stylesheet.
   Loaded after tokens.css. Sections 1 and 3 are copied verbatim from the HQ app
   (bundles/hockeyquant/frontend/src/assets/css/styles.css); section 2 maps the type-family
   tokens onto the app's --ds-font-* names and carries the motion tokens; section 4 turns the
   app's inline-styled renderers (components.py) into classes, values unchanged. */


/* ── 2. Font and motion tokens under the app's names ───────────────────── */
:root {
    --ds-font-display : var(--font-display);
    --ds-font-body    : var(--font-body);
    --ds-font-ui      : var(--font-ui);
    --ds-font-mono    : var(--font-mono);
    --ds-font-icon    : var(--font-icon);
    --ds-ease         : cubic-bezier(0.4, 0, 0.2, 1);
    --ds-ease-out     : cubic-bezier(0.16, 1, 0.3, 1);
    --ds-dur-fast     : 120ms;
    --ds-dur-base     : 200ms;
    --ds-dur-slow     : 320ms;
}
body { font-family: var(--ds-font-body); color: var(--ds-text); background: var(--ds-bg-app); -webkit-font-smoothing: antialiased; }
a { color: var(--ds-accent-deep); }
[data-theme="dark"] a { color: var(--ds-accent); }

/* ── 1. Typography classes (verbatim) ─────────────────────────────────── */
/* ============================================================
   Semantic typography classes — apply directly to elements
   ============================================================ */

.ds-display, h1.ds-h0 {
    font-family   : var(--ds-font-display);
    font-weight   : var(--ds-fw-bold);
    font-size     : var(--ds-fs-display);
    line-height   : var(--ds-lh-tight);
    color         : var(--ds-primary);
    letter-spacing: 0.005em;
    margin        : 0;
}

.ds-h1 {
    font-family   : var(--ds-font-ui);
    font-weight   : var(--ds-fw-bold);
    font-size     : var(--ds-fs-h1);
    line-height   : 1.2;
    color         : var(--ds-text);
    letter-spacing: 0.005em;
    margin        : 0;
}

.ds-h2 {
    font-family : var(--ds-font-display);
    font-weight : var(--ds-fw-bold);
    font-size   : var(--ds-fs-h2);
    line-height : 1.25;
    color       : var(--ds-primary);
    margin      : 0;
}

/* Section subheader — pairs Material icon with title */
.ds-h3, .ds-section-subheader {
    font-family : var(--ds-font-display);
    font-weight : 800;
    font-size   : var(--ds-fs-h3);
    line-height : 1.2;
    color       : var(--ds-primary);
    margin      : 0;
    display     : inline-flex;
    align-items : center;
    gap         : 8px;
}

.ds-card-title {
    font-family : var(--ds-font-display);
    font-weight : var(--ds-fw-bold);
    font-size   : var(--ds-fs-card-title);
    color       : var(--ds-text);
    margin      : 0;
}

.ds-body {
    font-family : var(--ds-font-body);
    font-weight : var(--ds-fw-regular);
    font-size   : var(--ds-fs-body);
    line-height : var(--ds-lh-relaxed);
    color       : var(--ds-text);
}

.ds-body-sm {
    font-family : var(--ds-font-body);
    font-weight : var(--ds-fw-regular);
    font-size   : var(--ds-fs-body-sm);
    line-height : 1.45;
    color       : var(--ds-text);
}

.ds-meta {
    font-family : var(--ds-font-body);
    font-size   : var(--ds-fs-meta);
    color       : var(--ds-text-muted);
}

.ds-kpi-title {
    font-family : var(--ds-font-body);
    font-weight : var(--ds-fw-semibold);
    font-size   : 14px;
    color       : var(--ds-text-secondary);
    margin      : 0 0 4px 0;
}

.ds-kpi-value {
    font-family : var(--ds-font-display);
    font-weight : var(--ds-fw-bold);
    font-size   : var(--ds-fs-kpi-value);
    color       : var(--ds-text);
    line-height : 1.1;
    margin      : 0;
}

.ds-kpi-delta--up   { color: var(--ds-success-deep); font-weight: 600; font-size: 13px; }
.ds-kpi-delta--down { color: var(--ds-danger);       font-weight: 600; font-size: 13px; }


/* ── 3. HQ marks (verbatim) ───────────────────────────────────────────── */
/* ============================================================
   Material Symbols — the ligature fix (pitfall 3.7) + default tint
   ============================================================ */
.material-symbols-outlined {
    font-family            : 'Material Symbols Outlined';
    font-weight            : normal;
    font-style             : normal;
    display                : inline-block;
    line-height            : 1;
    text-transform         : none;
    letter-spacing         : normal;
    white-space            : nowrap;
    word-wrap              : normal;
    direction              : ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings  : 'liga';
    -webkit-font-smoothing : antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    color                  : var(--ds-primary);
    user-select            : none;
    vertical-align         : middle;
}
.material-symbols-outlined.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ============================================================
   Diverging heat map — cell / pill / legend (Design Pass, Jul 2026)
   Emitted by frontend/src/sections/heat.py. Fills come from --ds-heat-div-*.
   ============================================================ */
.hq-hc {
    display        : inline-block;
    box-sizing     : border-box;
    text-align     : center;
    padding        : 4px 8px;
    border-radius  : 6px;
    font-family    : var(--ds-font-display);
    font-weight    : 800;
    font-size      : 13px;
    line-height    : 1.15;
    white-space    : nowrap;
}
.hq-hc--block  { display: block; width: 100%; }
.hq-hc--empty  { background: transparent; color: var(--ds-text-muted); font-weight: 600; }
/* Wrapping a heat cell in a drill link (Compare table -> Event Explorer): kill Streamlit's link
   blue/underline so the cell keeps its own heat colors, and show a pointer. */
.hq-celllink, .hq-celllink:link, .hq-celllink:visited, .hq-celllink:hover, .hq-celllink:active {
    text-decoration: none !important; color: inherit !important; display: inline-block; cursor: pointer;
}
/* heat pill for the depth-chart chip: solid light-ramp fill + hairline ring so it separates on navy */
.hq-hpill {
    display        : inline-flex;
    align-items    : center;
    gap            : 5px;
    padding        : 3px 9px;
    border-radius  : 7px;
    font-family    : var(--ds-font-display);
    font-weight    : 800;
    font-size      : 12.5px;
    box-shadow     : inset 0 0 0 1px var(--ds-heat-chip-ring);
}
.hq-hpill small { font-family: var(--ds-font-mono); font-weight: 700; font-size: 8.5px; opacity: 0.72; }
/* percentile legend strip (place once under a dense heat table) */
.hq-legend-wrap {
    display        : flex;
    align-items    : center;
    gap            : 10px;
    max-width      : 760px;
}
.hq-legend-title {
    font-size      : 11px;
    font-weight    : 700;
    text-transform : uppercase;
    letter-spacing : .03em;
    color          : var(--ds-text-secondary);
    white-space    : nowrap;
}
.hq-legend {
    display        : flex;
    flex           : 1 1 0;
    min-width      : 0;
    height         : 22px;
    border-radius  : 6px;
    overflow       : hidden;
    border         : 1px solid var(--ds-border-soft);
    font-family    : var(--ds-font-display);
}
.hq-legend > span {
    flex           : 1 1 0;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 10.5px;
    font-weight    : 700;
    white-space    : nowrap;
    min-width      : 0;
    padding        : 0 4px;
}
.hq-legend-ends {
    display        : flex;
    justify-content: space-between;
    margin-top     : 4px;
    font-family    : var(--ds-font-mono);
    font-size      : 10px;
    color          : var(--ds-text-muted);
}

/* ============================================================
   Line View depth chart (Command Centre) — the navy chip board.
   Rendered via st.markdown, so tokens/classes/theme all apply.
   ============================================================ */
.lv-board   { display:flex; flex-direction:column; gap:8px; }
.lv-colhead { display:grid; grid-template-columns:34px 1fr 1fr 1fr; gap:8px; text-align:center;
              font-family:var(--ds-font-mono); font-size:10px; font-weight:700; letter-spacing:.08em;
              color:var(--ds-text-muted); }
.lv-row     { display:grid; grid-template-columns:34px 1fr 1fr 1fr; gap:8px; align-items:stretch; }
.lv-tag     { align-self:center; text-align:center; font-family:var(--ds-font-display);
              font-weight:800; font-size:11px; color:var(--ds-primary); }
.lv-chip    { background:#01317a; border:1px solid #2C3D7C;
              border-radius:10px; padding:8px 10px; display:block; }
/* The whole chip is a link; Streamlit's markdown-link styling (blue + underline) out-specifies a
   plain class, so force white text + no underline across the chip and its children. */
.lv-chip, .lv-chip:link, .lv-chip:visited, .lv-chip:hover, .lv-chip:active { color:#FFFFFF !important; }
.lv-chip, .lv-chip * { text-decoration:none !important; }
.lv-chip:hover { border-color:#4257A0; }
.lv-r1      { display:flex; align-items:baseline; gap:5px; }
.lv-num     { font-family:var(--ds-font-mono); font-size:10px; color:rgba(255,255,255,.5); }
.lv-nm      { font-family:var(--ds-font-display); font-weight:800; font-size:13px; flex:1;
              color:#FFFFFF !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lv-r2      { display:flex; align-items:baseline; gap:6px; font-size:11px; margin-top:1px; }
.lv-cap     { font-weight:700; color:#FFFFFF !important; }
.lv-el      { margin-left:auto; font-family:var(--ds-font-mono); font-size:9px; color:rgba(255,255,255,.55); }
.lv-tm      { font-size:9.5px; color:rgba(255,255,255); margin-top:1px; white-space:nowrap;
              overflow:hidden; text-overflow:ellipsis; }
.lv-bd      { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.lv-empty   { border:1px dashed var(--ds-border,#D9D9D9); border-radius:10px; opacity:.45; min-height:92px; }

/* Dark-surface heat steps live in styles.dark.css, keyed to the APP theme (the top-bar toggle),
   not to prefers-color-scheme — an OS-dark viewer on the light theme used to get the dark ramp's
   cells on light surfaces. */

/* ══ Re-spine (Jul 2026): the three-stat spine's system marks ═══════════════
   Badges/tags that travel with Avg PV · PV/60 · Value Delta everywhere a
   player is scored. Emitters live in sections/spine.py. */

/* canonical stat label — dotted underline signals the gloss on hover */
.hq-sp-l { font-weight: 700; font-size: 11px; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--ds-text-muted, #5B6472);
    border-bottom: 1px dotted var(--ds-border, #D7DBE2); cursor: help; }

/* contract-status badge (ELC / RFA) — a CBA-set price is a stated fact */
.hq-sp-cb { display: inline-block; margin-left: 5px; padding: 0 5px;
    border-radius: 4px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em;
    vertical-align: middle; cursor: help; line-height: 15px; }
.hq-sp-cb.elc { background: var(--ds-badge-elc-bg); color: var(--ds-badge-elc-fg); border: 1px solid var(--ds-badge-elc-border); }
.hq-sp-cb.rfa { background: var(--ds-badge-rfa-bg); color: var(--ds-badge-rfa-fg); border: 1px solid var(--ds-badge-rfa-border); }
.hq-sp-cb.sm  { padding: 0 4px; font-size: 9px; line-height: 13px; }

/* cap-unknown — the honest missing state, never $0 */
.hq-sp-unk { font-size: 11px; color: var(--ds-text-muted, #5B6472);
    font-style: italic; cursor: help; white-space: nowrap; }
.hq-sp-unk.sm { font-size: 10px; }

/* "Full season" marker — Value Delta never slices by phase */
.hq-sp-fs { display: inline-block; margin-left: 5px; padding: 0 5px;
    border-radius: 4px; font-size: 9.5px; font-weight: 700; line-height: 15px;
    background: var(--ds-primary-soft, #E8ECFB); color: var(--ds-primary, #001F96);
    cursor: help; vertical-align: middle; }

/* games-played tag — mandatory beside ranked rate stats; warns under 15 GP */
.hq-sp-gp { font-family: var(--ds-font-mono, monospace); font-size: 10.5px;
    color: var(--ds-text-muted, #5B6472); white-space: nowrap; cursor: help; }
.hq-sp-gp.low { color: var(--ds-warn); font-weight: 700; }

/* rank tag — a rank beside a value without doubling the cell's weight */
.hq-sp-rk { font-family: var(--ds-font-mono, monospace); font-size: 10.5px;
    font-weight: 700; color: var(--ds-primary, #001F96); margin-left: 5px;
    white-space: nowrap; }
.hq-sp-rk small { font-weight: 500; color: var(--ds-text-muted, #5B6472); }
.hq-sp-rk.sm { font-size: 10px; }

/* the ES/PP split beside PV/60 — deployment visible, not modelled away */
.hq-sp-split { display: inline-block; margin-left: 6px;
    font-family: var(--ds-font-mono, monospace); font-size: 10px;
    color: var(--ds-text-muted, #5B6472); white-space: nowrap; cursor: help; }

.hq-sp-none { color: var(--ds-text-muted, #5B6472); }

/* the composed triad (hover-card / chip rows) */
.hq-sp-triad { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hq-sp-chip { display: inline-flex; flex-direction: column; gap: 2px;
    padding: 5px 9px; border: 1px solid var(--ds-border, #D7DBE2);
    border-radius: 8px; background: var(--ds-surface, #FFFFFF); }
.hq-sp-chip-l { display: inline-flex; align-items: center; gap: 4px; }
.hq-sp-chip.gp { justify-content: center; border-style: dashed; }
.hq-sp-triad.sm .hq-sp-chip { padding: 4px 7px; }

/* Dark theme: the navy depth-chart chip (verbatim from styles.dark.css, keyed to data-theme) */
[data-theme="dark"] .lv-chip       { background: #0F2237; border-color: #25324A; }
[data-theme="dark"] .lv-chip:hover { border-color: var(--ds-accent); }

/* ── 4. Renderers from components.py, as classes (values unchanged) ────── */

/* card(): container surface, radius 12, shadow-md, 18px 20px */
.ds-card { background: var(--ds-bg-container); border-radius: var(--ds-radius-xl); box-shadow: var(--ds-shadow-md); padding: 18px 20px; }
.ds-card > .ds-card-title { margin: 0 0 .5rem 0; }
.ds-card > .ds-h3 { margin: 0 0 .5rem 0; }
/* section_subheader(): filled Material Symbol at 26px beside .ds-h3 */
.ds-h3 .material-symbols-outlined { font-size: 26px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* kpi_card(): 16px 18px; delta chip 13px / 600 */
.ds-kpi-card { background: var(--ds-bg-container); border-radius: var(--ds-radius-xl); box-shadow: var(--ds-shadow-md); padding: 16px 18px; }
.ds-kpi-card .ds-kpi-sub { font-size: var(--ds-fs-meta); color: var(--ds-text-muted); margin-top: 4px; overflow-wrap: anywhere; }
.ds-kpi-card .ds-kpi-delta--up, .ds-kpi-card .ds-kpi-delta--down { display: inline-flex; align-items: center; margin-top: 4px; }

/* key_metric_tile(): centred, label tinted primary, value 24px / 700 */
.ds-metric-tile { background: var(--ds-bg-container); border-radius: var(--ds-radius-xl); box-shadow: var(--ds-shadow-md); padding: 14px 12px; text-align: center; }
.ds-metric-tile-label { font-family: var(--ds-font-body); font-weight: 600; font-size: 14px; color: var(--ds-primary); margin: 0 0 2px 0; }
.ds-metric-tile-value { font-family: var(--ds-font-display); font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--ds-text); margin: 0; }
.ds-metric-tile-value.pos { color: var(--ds-pos); }
.ds-metric-tile-value.neg { color: var(--ds-neg); }
.ds-metric-tile-sub { font-size: var(--ds-fs-meta); color: var(--ds-text-muted); margin-top: 2px; }

/* status_pill(): pill shape, 13px / 600, 2px solid border in the kind's accent */
.ds-pill { display: inline-flex; align-items: center; justify-content: center; padding: 2px 10px; border-radius: var(--ds-radius-pill);
    font-family: var(--ds-font-body); font-size: var(--ds-fs-pill); font-weight: 600; white-space: nowrap; border: 2px solid; }
.ds-pill--green   { color: var(--ds-pill-green);   background: var(--ds-pill-green-bg);   border-color: var(--ds-pill-green); }
.ds-pill--red     { color: var(--ds-pill-red);     background: var(--ds-pill-red-bg);     border-color: var(--ds-pill-red-accent); }
.ds-pill--yellow  { color: var(--ds-pill-yellow);  background: var(--ds-pill-yellow-bg);  border-color: var(--ds-pill-yellow-accent); }
.ds-pill--neutral { color: var(--ds-pill-neutral); background: var(--ds-pill-neutral-bg); border-color: var(--ds-pill-neutral); }
.ds-pill--dark    { color: var(--ds-pill-white);   background: var(--ds-pill-dark-bg);    border-color: var(--ds-pill-dark-accent); }

/* notice_strip(): primary-tint fill, soft primary border, radius 10 */
.ds-notice { display: flex; align-items: flex-start; gap: 10px; background: var(--ds-primary-tint); border: 1px solid var(--ds-primary-soft);
    border-radius: 10px; padding: 11px 14px; font-size: 13px; color: var(--ds-text); line-height: 1.45; }
.ds-notice > .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }
.ds-notice--warn { background: var(--ds-warn-bg); border-color: var(--ds-warn-border); }
.ds-notice--warn > .material-symbols-outlined { color: var(--ds-warn); }

/* Buttons: Streamlit's button (radius 8, 40px tall) in the HQ skin. Primary fill = config.toml primaryColor
   (ds-accent-deep, white text 4.9:1 in both themes); secondary/tertiary turn ds-accent on hover, as styles.dark.css does. */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 4px 14px;
    border-radius: var(--ds-radius-md); border: 1px solid var(--ds-border); background: var(--ds-bg-container); color: var(--ds-text);
    font-family: var(--ds-font-body); font-size: var(--ds-fs-body); font-weight: 400; line-height: 1.4; text-decoration: none; cursor: pointer;
    transition: color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease), filter var(--ds-dur-fast) var(--ds-ease); }
.ds-btn:hover { color: var(--ds-accent-deep); border-color: var(--ds-accent-deep); }
[data-theme="dark"] .ds-btn:hover { color: var(--ds-accent); border-color: var(--ds-accent); }
.ds-btn--primary, .ds-btn--primary:hover { background: var(--ds-accent-deep); border-color: var(--ds-accent-deep); color: var(--ds-text-on-primary); }
[data-theme="dark"] .ds-btn--primary:hover { color: var(--ds-text-on-primary); border-color: var(--ds-accent-deep); }
.ds-btn--primary:hover { filter: brightness(0.92); }
.ds-btn--tertiary { background: transparent; border-color: transparent; color: var(--ds-text-secondary); }
.ds-btn--tertiary:hover { border-color: transparent; }
.ds-btn .material-symbols-outlined { color: inherit; font-size: 20px; }
.ds-btn:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; box-shadow: var(--ds-shadow-focus); }
.ds-btn[disabled] { color: var(--ds-text-disabled); border-color: var(--ds-border-soft); cursor: not-allowed; filter: none; }
.ds-btn--primary[disabled] { background: var(--ds-border-soft); color: var(--ds-text-disabled); }

/* Heat-cell bin fills: heat.style() writes these inline in the app; the classes carry the same pair. */
.hq-bin-1 { background: var(--ds-heat-div-1); color: var(--ds-heat-div-ink-1); }
.hq-bin-2 { background: var(--ds-heat-div-2); color: var(--ds-heat-div-ink-2); }
.hq-bin-3 { background: var(--ds-heat-div-3); color: var(--ds-heat-div-ink-3); }
.hq-bin-4 { background: var(--ds-heat-div-4); color: var(--ds-heat-div-ink-4); }
.hq-bin-5 { background: var(--ds-heat-div-5); color: var(--ds-heat-div-ink-5); }
.hq-bin-6 { background: var(--ds-heat-div-6); color: var(--ds-heat-div-ink-6); }
.hq-bin-7 { background: var(--ds-heat-div-7); color: var(--ds-heat-div-ink-7); }
/* heat.marker(): the colour-blind-safe stacked arrows beside every heat number */
.hq-mk { display: inline-flex; flex-direction: column; justify-content: center; line-height: .9; font-size: .62em; margin-left: 3px; vertical-align: middle; }
.hq-mk > span { display: block; }
.hq-mk--mid { display: inline-block; font-size: .7em; opacity: .75; }
.hq-hpill .hq-mk { margin-left: 0; }

@media (prefers-reduced-motion: reduce) { .ds-btn { transition: none; } }