/* ==========================================================================
   fantasysportsco.chart.v2.css — V2 player game-log chart.
   Parallel to the V1 chart (fantasysportsco.chart.css); both can coexist on
   the same page. V2 is opt-in via window.FSC_CHART_V2 (toggle in projections
   page). All class names are namespaced `.fscv2-*` to avoid colliding with
   V1's `.fscChart*` rules.

   Design reference: design/dfs_chart_reference.html — shared vertical points
   axis with floor/ceiling range bars, projection tick, scored dot, perfect-
   lineup halo, upcoming-game pulsed outline, and a hover tooltip with full
   box score that flips above/below and anchors inward at the edges.
   ========================================================================== */

.fscv2-wrap {
    background: #0d0d12;
    border-radius: 16px;
    /* no vertical padding: the hosts (cards / expanded row) already pad, and
       chart height is precious - the JS height derivation assumes 0 too */
    padding: 0 5px;
    /* the plot height is derived from an ESTIMATED labels-row reserve; when
       the real labels come up a few px short the panel would end above the
       mount's bottom edge - stretch so the panel always fills its host
       (.playerChartArea has a definite height in every mount) */
    box-sizing: border-box;
    min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    position: relative;
    color: rgba(255, 255, 255, 0.9);
}

.fscv2-vh {
    /* Visually hidden — accessible summary that screen readers pick up
       but doesn't take any visual space. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Axis is an absolute overlay on the LEFT edge of the wrap, OUTSIDE the
   scroll container, so the y-axis labels (0, 10, 20, 30…) stay anchored
   at the chart's left edge in medium/large modes when the user scrolls
   horizontally to reveal older games. Opaque background so plot columns
   scrolling beneath it stay hidden. */
.fscv2-axis {
    position: absolute;
    top: 0;        /* match .fscv2-wrap padding-top */
    left: 5px;    /* match .fscv2-wrap padding-left */
    width: 20px;
    z-index: 2;
    background: #0d0d12;
    pointer-events: none;
}
/* Each in-chart text element below pins its font-family / size / weight
   explicitly with .fscv2-wrap as a specificity anchor. The projections
   page is rendered inside a DotNetNuke skin that ships its own body
   text rules; without these locks the chart inherits whatever font /
   size the skin happens to set, which is what made the numbers hard to
   read in the screenshot. */
.fscv2-wrap .fscv2-axis-label {
    position: absolute;
    right: 3px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Scroll container — overflow-x toggles per size mode. margin-left
   reserves the axis's 20px column. */
.fscv2-scroll {
    margin-left: 20px;
    overflow-x: visible;
    overflow-y: visible;
}
.fscv2-wrap[data-size="medium"] .fscv2-scroll,
.fscv2-wrap[data-size="large"]  .fscv2-scroll {
    overflow-x: auto;
}
/* Thin dark scrollbar that fits the panel — Chrome/Edge/Safari first,
   Firefox via scrollbar-color. */
.fscv2-scroll::-webkit-scrollbar { height: 8px; }
.fscv2-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
}
.fscv2-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
}
.fscv2-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.30);
}
.fscv2-scroll {
    scrollbar-color: rgba(255, 255, 255, 0.18) rgba(255, 255, 255, 0.04);
    scrollbar-width: thin;
}

.fscv2-plot {
    position: relative;
    /* height is set inline; width fills scroll container in compact, or
       is set inline by the renderer in medium/large. */
    width: 100%;
}
.fscv2-wrap[data-size="medium"] .fscv2-plot,
.fscv2-wrap[data-size="large"]  .fscv2-plot {
    width: auto;   /* inline width takes over in scroll modes */
}
.fscv2-gridline {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    pointer-events: none;
}
.fscv2-cols {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    gap: 3px;
}
/* --fscv2-gap mirrors the .fscv2-cols gap above and must be redeclared
   beside EVERY gap override below, in the same order, so the season
   divider can centre itself in the gap. */
.fscv2-wrap { --fscv2-gap: 3px; }

/* Each game = one column, full panel height. Hover lightens the column so
   you can see exactly which one the tooltip refers to. */
.fscv2-col {
    flex: 1;
    position: relative;
    border-radius: 8px;
    cursor: default;
    transition: background 0.2s ease;
    min-width: 0;
}
.fscv2-col:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* ── Season divider ────────────────────────────────────────────────────
   Marks where the log crosses into a new season (V1 drew a "<year>
   season →" block; this is the same signal in the V2 idiom). It's a
   child of the first column of the new season, shifted half a column-gap
   left so the rule lands in the gap rather than on top of the column —
   that keeps the plot row and the labels row at identical child counts,
   which is what holds them in horizontal alignment.
   Behind the bars and non-interactive so it can't steal column hover. */
.fscv2-seasonbreak {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--fscv2-gap, 3px) / -2);
    width: 0;
    border-left: 1px dashed rgba(255, 255, 255, 0.22);
    pointer-events: none;
    z-index: 0;
}
/* The year rides in the axis headroom at the top of the plot — the axis
   max is snapped ABOVE the highest plotted value, so that strip is
   reliably clear of bars and dots. */
.fscv2-seasonbreak-yr {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.62);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.35;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* packed charts: keep the rule, drop the chip — no room for it */
.fscv2-wrap[data-density="high"] .fscv2-seasonbreak-yr { display: none; }

/* ── Range band (floor → ceiling) ──────────────────────────────────────
   Rounded vertical bar in a dark-violet gradient. Renders in its final
   state (the entrance animation was removed for render performance). */
.fscv2-band {
    position: absolute;
    left: 50%;
    margin-left: -5px;
    width: 10px;
    border-radius: 6px;
    /* a user band color flattens the gradient to that color (both stops
       resolve to the same var); the default keeps the two-stop gold */
    background: linear-gradient(var(--fscv2-user-band, #facc15), var(--fscv2-user-band, #F9CC00));
    opacity: 0.2;
}
.fscv2-band.is-upcoming {
    background: transparent;
    border: 1.5px dashed var(--fscv2-user-band, #facc15);
    opacity: 1;   /* override the base 0.3 (the pulse animation was removed) */
}

/* ── Projection tick (violet horizontal mark) ───────────────────────── */
.fscv2-proj {
    position: absolute;
    left: 50%;
    margin-left: -10px;
    width: 20px;
    border-top: 2px solid var(--fscv2-user-proj, #a78bfa);
    pointer-events: none;
}

/* ── Projection / Score lines (opt-in SVG overlay connecting points)
   Strokes match the related per-column elements — projection violet
   (tick) and scored blue (dot) — slightly muted so they read as trend
   hints, not walls. Lives inside .fscv2-plot so the SVG scrolls with
   the columns in medium/large modes. */
.fscv2-line { pointer-events: none; }
.fscv2-line-path {
    stroke: var(--fscv2-user-proj, #a78bfa);
    stroke-width: 1.5;
    stroke-opacity: 0.55;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
.fscv2-score-line-path {
    stroke: var(--fscv2-user-scored, #38bdf8);
    stroke-width: 1.5;
    stroke-opacity: 0.55;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* ── Scored dot ──────────────────────────────────────────────────────── */
.fscv2-dot {
    position: absolute;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #0d0d12;
    /* final state directly - the entrance used to start these at
       scale(.3)/opacity 0 and transition in (removed for performance) */
    transform: translate(-50%, -50%);
}
.fscv2-dot.is-scored {
    background: var(--fscv2-user-scored, #38bdf8);
    box-shadow: 0 0 9px 1px rgba(56, 189, 248, 0.45);
}
.fscv2-dot.is-miss {
    background: var(--fscv2-user-bust, #6b7280);
}
.fscv2-dot.is-boom {
    background: var(--fscv2-user-boom, #fbbf24);
    box-shadow: 0 0 12px 2px rgba(251, 191, 36, 0.6);
}

/* Value label above the dot — colored to match the dot state. Holds
   the score number and (optionally, for perfect-lineup games) an inline
   trophy SVG immediately next to it. Selectors are double-tagged with
   .fscv2-wrap so they outweigh any DNN-skin rule targeting child
   elements of the player row; font-family is forced to the system
   stack so the surrounding skin's body font can't make the digits
   render at unexpected sizes / weights. */
.fscv2-wrap .fscv2-actual {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    white-space: nowrap;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1;
    /* Halo so the score reads against bars, ticks, or dots beneath it.
       Two-stop shadow: a tight crisp ring for definition, plus a soft
       outer blur for separation. Light theme replaces this with a white
       halo below. */
    text-shadow:
        0 0 3px rgba(13, 13, 18, 0.85),
        0 0 6px rgba(13, 13, 18, 0.55);
}
.fscv2-wrap .fscv2-actual svg { display: block; flex-shrink: 0; }
.fscv2-wrap .fscv2-actual.is-scored { color: var(--fscv2-user-scored, #38bdf8); }
/* Miss uses the same blue as "scored" so the value above the dot is
   always legible at the same color. The dot itself stays grey to
   communicate "below projection" visually. */
.fscv2-wrap .fscv2-actual.is-miss   { color: var(--fscv2-user-scored, #38bdf8); }
.fscv2-wrap .fscv2-actual.is-boom   { color: var(--fscv2-user-boom, #fbbf24); }

/* upcoming period's projected number: a violet pill with a pulsing "ping" ring so
   it reads as THE live projection for the upcoming game. The themed `color`
   (violet dark / indigo light) drives the text, border, and ring (currentColor). */
.fscv2-wrap .fscv2-projnum {
    position: absolute;
    left: 50%;
    margin-left: 11px;            /* sit just past the right end of the 20px-wide proj tick */
    transform: translateY(-50%);  /* vertically centered on the tick, so it reads as a label on the line */
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: rgba(167, 139, 250, 0.20);
    color: var(--fscv2-user-proj, #a78bfa);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}
/* expanding ring (radar ping) around the pill - draws the eye to the projection */
.fscv2-wrap .fscv2-projnum::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 999px;
    border: 1.5px solid currentColor;
    /* static ring (the infinite ping animation was removed: with several
       charts in view the endless per-frame compositing added up) */
    opacity: 0.45;
    transform: scale(1.1);
    pointer-events: none;
}

/* ── Perfect-lineup trophy badge ─────────────────────────────────────── */
.fscv2-perfect {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -4px;
    color: var(--fscv2-user-boom, #fbbf24);
    border-radius: 50%;
    line-height: 0;
    /* static glow (the infinite box-shadow pulse repainted every visible
       trophy every frame, forever - the single worst idle cost on a page
       of charts) */
    box-shadow: 0 0 10px 2px rgba(251, 191, 36, 0.5);
}

/* ── Per-column bottom labels (order chip, opponent, date) ───────────── */
.fscv2-labels {
    display: flex;
    gap: 3px;
    padding: 10px 0 14px 0;
}
.fscv2-label {
    flex: 1;
    text-align: center;
    line-height: 1.45;
    min-width: 0;
    /* Clip any text that's wider than the column instead of bleeding
       into neighbors. Exception: high-density compact mode decimates
       labels and lets them visibly overflow into the empty placeholder
       columns next door — that rule is below. */
    overflow: hidden;
}
.fscv2-opp,
.fscv2-date {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    /* pinned color: the DNN skin paints bare divs #666666 (element rule
       beats inheritance from the wrap), which is near-invisible on the
       dark chart panel */
    color: rgba(255, 255, 255, 0.62);
}
.fscv2-wrap[data-theme="light"] .fscv2-date { color: rgba(15, 23, 42, 0.6); }
/* High-density compact mode purposefully decimates labels to ~8 ticks
   and lets each visible label overflow into adjacent (empty) columns so
   the text is readable at 5-7px column widths. */
.fscv2-wrap[data-density="high"] .fscv2-label,
.fscv2-wrap[data-density="high"] .fscv2-opp,
.fscv2-wrap[data-density="high"] .fscv2-date {
    overflow: visible;
}

/* Size mode — fixed-width columns + horizontal scroll. The scroll container
   handles overflow; columns and labels share identical sizing so they stay
   vertically aligned at any scroll offset. */
.fscv2-wrap[data-size="medium"] .fscv2-cols   { gap: 4px; }
.fscv2-wrap[data-size="medium"] { --fscv2-gap: 4px; }
.fscv2-wrap[data-size="medium"] .fscv2-col    { flex: 0 0 28px; min-width: 28px; }
.fscv2-wrap[data-size="medium"] .fscv2-labels { gap: 4px; }
.fscv2-wrap[data-size="medium"] .fscv2-label  { flex: 0 0 28px; min-width: 28px; }
/* Right-align the plot + labels when the columns don't fill the scroll
   container. Without this, a 7-game large-mode chart sits flush-left in
   a 700px scroll viewport with empty space on the right, even after the
   scrollLeft snap (nothing to scroll to). margin-left: auto resolves to
   the leftover space when content is narrower, and resolves to 0 when
   content is wider — so the overflow / scroll case is unchanged. */
.fscv2-wrap[data-size="medium"] .fscv2-plot,
.fscv2-wrap[data-size="medium"] .fscv2-labels {
    margin-left: auto;
    margin-right: 0;
}
/* Tighter type so trimmed strings like "@SAS" / "Sep 23" fit 28px.
   The date gets a larger font but only renders on every other column
   (driven by JS in buildLabel — newest column always shown, then every
   other counting back). Overflow has to be visible BOTH on the date AND
   on its parent .fscv2-label, otherwise the label's own hidden-overflow
   (set globally to clip OPP text) would clip the wider date string too.
   The OPP text is still short (3-4 chars) so visible overflow there is
   harmless — and gives "Sep 23" room to spill into the empty neighbor. */
.fscv2-wrap[data-size="medium"] .fscv2-label { overflow: visible; }
.fscv2-wrap[data-size="medium"] .fscv2-opp   { font-size: 10px; overflow: visible; }
.fscv2-wrap[data-size="medium"] .fscv2-date  { font-size: 12px; overflow: visible; }
.fscv2-wrap[data-size="medium"] .fscv2-icons { gap: 2px; height: 15px; margin-bottom: 2px; }
.fscv2-wrap[data-size="medium"] .fscv2-order img,
.fscv2-wrap[data-size="medium"] .fscv2-injury img,
.fscv2-wrap[data-size="medium"] .fscv2-ot img { height: 12px; }
.fscv2-wrap[data-size="medium"] .fscv2-sal { font-size: 9px; }

.fscv2-wrap[data-size="large"]  .fscv2-cols   { gap: 6px; }
.fscv2-wrap[data-size="large"]  { --fscv2-gap: 6px; }
.fscv2-wrap[data-size="large"]  .fscv2-col    { flex: 0 0 52px; min-width: 52px; }
.fscv2-wrap[data-size="large"]  .fscv2-labels { gap: 6px; }
.fscv2-wrap[data-size="large"]  .fscv2-label  { flex: 0 0 52px; min-width: 52px; }
/* Same right-align trick as medium — see comment in the medium block. */
.fscv2-wrap[data-size="large"]  .fscv2-plot,
.fscv2-wrap[data-size="large"]  .fscv2-labels {
    margin-left: auto;
    margin-right: 0;
}
/* Large mode has the breathing room for bumped type — push the in-chart
   text up so this isn't just "compact with more spacing" but actually
   easier to read. Tooltip / inspector stay at their shared sizes since
   they're rendered the same way at every size mode. */
.fscv2-wrap[data-size="large"]  .fscv2-opp         { font-size: 14px; font-weight: 600; }
.fscv2-wrap[data-size="large"]  .fscv2-date        { font-size: 12px; }
.fscv2-wrap[data-size="large"]  .fscv2-axis-label  { font-size: 13px; }
.fscv2-wrap[data-size="large"]  .fscv2-actual      { font-size: 13px; font-weight: 600; }
.fscv2-wrap[data-size="large"]  .fscv2-icons       { gap: 4px; height: 22px; }
.fscv2-wrap[data-size="large"]  .fscv2-order img,
.fscv2-wrap[data-size="large"]  .fscv2-injury img,
.fscv2-wrap[data-size="large"]  .fscv2-ot img      { height: 18px; }
.fscv2-wrap[data-size="large"]  .fscv2-sal         { font-size: 12px; font-weight: 600; }

/* ── Long-name sports (PGA / UFC / esports — the non-matchup sports;
   class set by the JS). Placed AFTER the density/size-mode rules on
   purpose: those set overflow:visible on labels (fine for "@SAS",
   fatal for fight names) and would win the specificity tie from later
   in the file.
   - names ellipsize and never bleed into neighbors (full text lives in
     the title attr + hover inspector)
   - columns get a real 50px minimum; overflow scrolls horizontally at
     every size mode (medium/large scrolled already) ─────────────────── */
.fscv2-wrap.fscv2-longnames .fscv2-label,
.fscv2-wrap.fscv2-longnames .fscv2-opp,
.fscv2-wrap.fscv2-longnames .fscv2-date {
    overflow: hidden;
    text-overflow: ellipsis;
}
/* compact long-names: event labels are DECIMATED (~8 ticks, see
   labelEveryN) and bleed across the empty neighbor columns exactly like
   high-density matchup charts - the ellipsis rule above would clip them
   to nothing at packed column widths */
.fscv2-wrap.fscv2-longnames[data-size="compact"] .fscv2-label,
.fscv2-wrap.fscv2-longnames[data-size="compact"] .fscv2-date {
    overflow: visible;
    text-overflow: clip;
}
/* 50px floor keeps event names readable in the scrolling modes; compact
   is exempt - it drops the name lines (opp/salary) entirely (see
   buildLabel) so its columns pack as tight as the matchup sports' */
.fscv2-wrap.fscv2-longnames:not([data-size="compact"]) .fscv2-col,
.fscv2-wrap.fscv2-longnames:not([data-size="compact"]) .fscv2-label {
    flex: 1 0 50px;
    min-width: 50px;
}
.fscv2-wrap.fscv2-longnames .fscv2-scroll {
    overflow-x: auto;
}

/* Status icons row — sits at the top of each label cell, contains
   the lineup-order/confirmed-starter icon plus an optional injury icon.
   Centered, small gap, matches V1's `.fscChartIcons` strip. */
.fscv2-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 17px;
    margin-bottom: 3px;
    line-height: 0;
}

/* Order chip — holds either the V1 lineup-order icon (alerts/N.png) or
   the confirmed-starter SVG for non-batting-order sports. No background
   on the chip itself; the icon assets already have their own treatment. */
.fscv2-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.fscv2-order img {
    height: 14px;
    width: auto;
    display: block;
}
/* The confirmed-starter SVG sits a bit smaller so its glyph doesn't
   crowd the column at 28px width in medium mode. */
.fscv2-order-starter img {
    height: 13px;
}

/* Injury chip — small PNG indicating injury status; sits to the right
   of the order icon when present. */
.fscv2-injury {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.fscv2-injury img {
    height: 13px;
    width: auto;
    display: block;
}

/* Overtime chip — small clock SVG shown when the game went to OT.
   Sits leftmost in the icons row so it reads as "context for the game"
   before the player-specific order/injury indicators. */
.fscv2-ot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.fscv2-ot img {
    height: 13px;
    width: auto;
    display: block;
    /* The bundled clock asset is a dark glyph; this filter inverts it
       to white-ish so it reads against the dark panel. The light-theme
       block restores the original dark glyph. */
    filter: invert(0.85) brightness(1.2);
    opacity: 0.85;
}

/* Per-period salary line — last line of each label cell. Small,
   tabular-numbered, muted so the OPP/date stay primary. Hidden at high
   density (no room for legible text). */
.fscv2-wrap .fscv2-sal {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
    line-height: 1.1;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* Game result chip (W/L/T + score) — hidden by default, swaps in where
   the date sits when the user hovers the chart. V1 had the same swap;
   the period label gets replaced with the final game result so a quick
   mouse-over reveals box-score outcomes across every column. Cells
   without a game result keep their date visible (no .has-game-score
   class → swap rule doesn't apply). */
.fscv2-wrap .fscv2-game-score {
    display: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    white-space: nowrap;
}
.fscv2-wrap:hover .fscv2-label.has-game-score .fscv2-date  { display: none; }
.fscv2-wrap:hover .fscv2-label.has-game-score .fscv2-game-score { display: block; }

/* Outcome letter colors — green / red / yellow per V1 (`.outcomeWin`,
   `.outcomeLoss`, `.outcomeTie`). Shared between the per-column game
   score and the inspector's result tag. */
.fscv2-wrap .fscv2-outcome {
    font-weight: 800;
    margin-right: 3px;
}
.fscv2-wrap .fscv2-outcome.is-win  { color: #34d399; }
.fscv2-wrap .fscv2-outcome.is-loss { color: #f87171; }
.fscv2-wrap .fscv2-outcome.is-tie  { color: #facc15; }
.fscv2-wrap .fscv2-opp {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.01em;
}
.fscv2-opp.is-upcoming {
    color: var(--fscv2-user-proj, #a78bfa);
}
/* Matchup tinting — V1 parity. .is-matchup-good/bad/neutral applied
   based on d.OPR (opponent rating). Brighter than V1's #059669 / #B91C1C
   so they pop on the dark panel; the light theme block below restores
   V1's exact darker shades for the white background. */
.fscv2-opp.is-matchup-good    { color: #34d399; }
.fscv2-opp.is-matchup-bad     { color: #f87171; }
.fscv2-opp.is-matchup-neutral { color: rgba(255, 255, 255, 0.85); }
/* Upcoming wins over matchup tint — the violet "this is today" signal
   shouldn't be overridden by yesterday's matchup color. */
.fscv2-opp.is-upcoming.is-matchup-good,
.fscv2-opp.is-upcoming.is-matchup-bad,
.fscv2-opp.is-upcoming.is-matchup-neutral { color: var(--fscv2-user-proj, #a78bfa); }

.fscv2-wrap .fscv2-date {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
}

/* ── Settings button + popup ─────────────────────────────────────────
   Replaces the inline bottom legend strip. Gear button sits top-right
   of the chart panel; clicking opens a popup that hosts the key + the
   line/theme/size toggles. Saves ~40px of vertical chart real-estate. */
.fscv2-settings-btn {
    position: absolute;
    bottom: 10px;    /* bottom-left: out of the plot + inspector's way */
    left: 1px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
    /* barely-there until the pointer is over the chart (or the button
       has keyboard focus) - it's chrome, not content */
    opacity: 0.18;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s;
}

.fscv2-wrap:hover .fscv2-settings-btn,
.fscv2-settings-btn:focus-visible {
    opacity: 1;
}
.fscv2-settings-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
}
.fscv2-settings-btn:focus-visible {
    outline: none;
    border-color: rgba(167, 139, 250, 0.65);
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.35);
}
.fscv2-settings-btn svg { display: block; }

.fscv2-settings-panel {
    position: absolute;
    /* opens upward from the relocated bottom-left gear */
    bottom: 44px;
    left: 14px;
    min-width: 250px;
    max-width: 320px;
    background: rgba(26, 26, 34, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 12px 14px;
    color: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55);
    z-index: 25;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
.fscv2-settings-panel.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.fscv2-settings-section {
    margin-bottom: 12px;
}
.fscv2-settings-section:last-child { margin-bottom: 0; }
.fscv2-settings-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 6px;
}
.fscv2-settings-key {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}
.fscv2-settings-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}
.fscv2-settings-row-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    margin-right: 4px;
}

/* The key items inside the popup reuse the legend-item classes — the
   container is gone but these tiny visual chips still work as-is. */
.fscv2-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.fscv2-legend-range {
    width: 9px;
    height: 16px;
    border-radius: 5px;
    background: linear-gradient(var(--fscv2-user-band, #facc15), var(--fscv2-user-band, #F9CC00));
}
.fscv2-legend-proj {
    width: 16px;
    border-top: 2px solid var(--fscv2-user-proj, #a78bfa);
}
.fscv2-legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}
.fscv2-legend-dot.is-scored { background: var(--fscv2-user-scored, #38bdf8); }
.fscv2-legend-dot.is-boom   { background: var(--fscv2-user-boom, #fbbf24); }
.fscv2-legend-dot.is-miss   { background: var(--fscv2-user-bust, #6b7280); }
.fscv2-legend-hint {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.35);
}

/* ── In-chart compact/medium/large icon toggle (legend right edge) ──
   Lives at the right side of the legend, immediately after the hint.
   The three icons each preview their own column-density visually
   (7 thin bars / 4 medium / 3 thick). Clicking calls the page-level
   fscSetChartSize() which persists + re-renders every open chart. */
.fscv2-size-icons {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 2px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.fscv2-size-icon {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 0;       /* tight SVG vertical alignment */
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.fscv2-size-icon:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
}
.fscv2-size-icon:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.55);
}
.fscv2-size-icon.is-active {
    background: rgba(167, 139, 250, 0.18);
    color: var(--fscv2-user-proj, #c4b5fd);
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35);
}

/* ── Inspector panel ─────────────────────────────────────────────────
   Bottom-anchored "stat dashboard" that replaces the floating tooltip.
   One shared element per chart — content updates on column hover, the
   panel itself never moves. Keeps the user's eye in one spot regardless
   of where in the plot the dot lives. */
.fscv2-inspector {
    position: absolute;
    /* left/top/width are set inline by updateInspector (viewport coords -
       the panel lives in a fixed body-portal shell anchored at 0,0 so it
       can float ABOVE the chart instead of covering the plot) */
    left: 0;
    top: 0;
    background: rgba(26, 26, 34, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    padding: 7px 12px 8px;
    color: rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
    pointer-events: none;
    z-index: 5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.fscv2-inspector.is-active {
    opacity: 1;
    transform: translateY(0);
}

/* body-portal shell: keeps .fscv2-wrap[data-theme] scoping for the
   inspector's styles with none of the wrap chrome. Fixed at the viewport
   origin so the inspector's inline left/top are viewport coordinates. */
.fscv2-wrap.fscv2-portal {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    background: none;
    padding: 0;
    border-radius: 0;
    z-index: 100004;   /* above sticky headers/dialogs, below the toast */
    pointer-events: none;
}

/* shell for the SHARED settings panel (same portal trick as the inspector:
   carries .fscv2-wrap[data-theme] so every panel style keeps matching).
   Inert zero-size box; the panel inside positions itself fixed at the gear
   and re-enables pointer events via its own .is-open rule. */
.fscv2-wrap.fscv2-settings-portal {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    background: none;
    padding: 0;
    min-height: 0;
    border-radius: 0;
    overflow: visible;
    z-index: 100001;
    pointer-events: none;
}
.fscv2-inspector-hint {
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
}

/* drill affordance on the current-period column's inspector */
.fscv2-inspector-drillhint {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px dashed rgba(255, 255, 255, 0.14);
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.5);
}

.fscv2-wrap[data-theme="light"] .fscv2-inspector-drillhint {
    border-top-color: rgba(15, 23, 42, 0.15);
    color: rgba(30, 41, 59, 0.55);
}

/* Header row — opp/date on the left, salary right-aligned */
.fscv2-inspector-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 3px;
    gap: 12px;
    line-height: 1.15;
}
.fscv2-inspector-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.fscv2-inspector-opp {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
}
.fscv2-inspector-date {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}
.fscv2-inspector-salary {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Indicators row — status icons on the left, W/L + game score on the
   right. Sits between the header and the proj→scored line so the row's
   spacing reinforces the visual hierarchy (identity → context → stats). */
.fscv2-inspector-indicators {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 3px;
    min-height: 14px;
    line-height: 1;
}
.fscv2-inspector-icons {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.fscv2-inspector-icon {
    height: 14px;
    width: auto;
    display: block;
}
/* Clock SVG renders dark by default — invert against the dark inspector
   surface so it reads as a light glyph. Light theme strips this. */
.fscv2-inspector-icon-ot {
    filter: invert(0.85) brightness(1.2);
    opacity: 0.9;
}
.fscv2-inspector-result-tag {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Presence-flag badges (W / L / QS). The feed sends these as 1-or-absent,
   so they'd read as a pointless "1" in the stat grid; as badges they sit
   with the status icons. The W/L here is the pitcher's decision, which is
   why it can disagree with the team result on the right of this row. */
.fscv2-inspector-flag {
    display: inline-flex;
    align-items: center;
    height: 14px;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
}
.fscv2-inspector-flag.is-win {
    color: #34d399;
    background: rgba(52, 211, 153, 0.14);
    border-color: rgba(52, 211, 153, 0.34);
}
.fscv2-inspector-flag.is-loss {
    color: #f87171;
    background: rgba(248, 113, 113, 0.14);
    border-color: rgba(248, 113, 113, 0.34);
}
.fscv2-inspector-flag.is-qs {
    color: #7dd3fc;
    background: rgba(125, 211, 252, 0.14);
    border-color: rgba(125, 211, 252, 0.34);
}

/* Proj → scored headline. Range / h-AB chips were removed so this row
   is now a single centered phrase — bumped to 15px / weight 600 so the
   primary projection-vs-actual call-out actually reads as a headline. */
.fscv2-inspector-line {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 5px;
    line-height: 1.2;
    text-align: left;
}
.fscv2-inspector-result b { font-weight: 600; }
.fscv2-inspector-boxline {
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
}
.fscv2-inspector-range {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.fscv2-inspector-pending {
    color: rgba(167, 139, 250, 0.85);
    font-style: italic;
}

/* The line uses the shared color classes from the old tooltip. */
.fscv2-inspector-line .fscv2-tip-proj { color: var(--fscv2-user-proj, #a78bfa); font-weight: 700; font-size: 17px; }
.fscv2-inspector-line .fscv2-tip-act  { font-weight: 700; font-size: 17px; }
.fscv2-inspector-line .fscv2-tip-act.is-scored { color: var(--fscv2-user-scored, #38bdf8); }
.fscv2-inspector-line .fscv2-tip-act.is-miss   { color: var(--fscv2-user-scored, #38bdf8); }
.fscv2-inspector-line .fscv2-tip-act.is-boom   { color: var(--fscv2-user-boom, #fbbf24); }
/* floor/ceiling range line under the proj/scored headline */
.fscv2-inspector-line.fscv2-inspector-range { font-size: 11px; opacity: .78; }
.fscv2-inspector-line.fscv2-inspector-range b { font-weight: 600; }

/* Light-theme overrides for the new game-result chip + inspector icons.
   Win/Loss/Tie shift to the darker, more saturated shades V1 used so
   they read against a white surface. The clock icon doesn't need the
   invert filter when on a light surface — its native dark glyph reads
   as-is. */
.fscv2-wrap[data-theme="light"] .fscv2-outcome.is-win  { color: #16a34a; }
.fscv2-wrap[data-theme="light"] .fscv2-outcome.is-loss { color: #dc2626; }
.fscv2-wrap[data-theme="light"] .fscv2-outcome.is-tie  { color: #ca8a04; }
.fscv2-wrap[data-theme="light"] .fscv2-game-score {
    color: rgba(15, 23, 42, 0.85);
}
.fscv2-wrap[data-theme="light"] .fscv2-inspector-result-tag {
    color: rgba(15, 23, 42, 0.85);
}
.fscv2-wrap[data-theme="light"] .fscv2-inspector-icon-ot {
    filter: none;
    opacity: 0.8;
}

/* Stat grid — 7 columns for MLB hitters, configurable for pitchers (6).
   The grid-template-columns is set inline by the renderer so each layout
   distributes evenly without column-count branching here. Compact
   spacing so the inspector fits ~100px tall. */
.fscv2-tip-grid {
    display: grid;
    gap: 1px 8px;
    margin: 0;
    text-align: center;
    padding: 4px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.fscv2-tip-grid .l {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.42);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.1;
}
.fscv2-tip-grid .v {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.fscv2-tip-grid .v.is-hot {
    color: var(--fscv2-user-boom, #fbbf24);
}

/* Box score for every sport — labels top row, values bottom row, one
   column per stat via inline grid-template-columns from the renderer.
   Every stat the feed sent is shown; the is-dense / is-xdense tiers keep
   long lines legible by stepping the type and gap down instead of
   dropping or wrapping columns. */
/* Box-score line = the stat grid plus, at the far right, the presence-flag
   badges stacked vertically (at most a decision + QS). The separator rule
   lives on this wrapper so it spans the badges too. */
.fscv2-tip-box {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 4px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.fscv2-tip-flags {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}
.fscv2-tip-kv {
    display: grid;
    gap: 1px 8px;
    margin: 0;
    text-align: center;
    flex: 1 1 auto;
    min-width: 0;      /* let the grid shrink instead of shoving the badges out */
}
/* cells must be allowed to shrink for minmax(0,1fr) to do its job */
.fscv2-tip-kv .l,
.fscv2-tip-kv .v {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fscv2-tip-kv.is-dense { gap: 1px 5px; }
.fscv2-tip-kv.is-dense .l { font-size: 9px; letter-spacing: 0.03em; }
.fscv2-tip-kv.is-dense .v { font-size: 12px; }
.fscv2-tip-kv.is-xdense { gap: 1px 3px; }
.fscv2-tip-kv.is-xdense .l { font-size: 8px; letter-spacing: 0; }
.fscv2-tip-kv.is-xdense .v { font-size: 11px; }
.fscv2-tip-kv .l {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.42);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.1;
}
.fscv2-tip-kv .v {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
/* Zero filled in because the feed omitted the key for this game (the
   column exists because the player recorded it in some other period).
   Dimmed so a real recorded value reads first. */
.fscv2-tip-kv .v.is-zero {
    color: rgba(255, 255, 255, 0.40);
    font-weight: 500;
}

/* ── Density tiers — the renderer sets data-density on .fscv2-wrap.
   "low":  ≤18 games  — full reference look, every decoration shown
   "mid":  19-35      — drop per-dot value labels, smaller fonts
   "high": 36+        — slim bars/dots, hide order chips + non-boom
                        trophies, decimate bottom labels (every Nth)
   Hover tooltips always show full detail at every tier. */

/* Mid density — bands narrower, slightly tighter columns. Snappier
   transitions too — the 0.55s/0.45s defaults feel slow when 30 columns
   animate at once. */
.fscv2-wrap[data-density="mid"] .fscv2-band {
    width: 8px;
    margin-left: -4px;
    border-radius: 5px;
    transition-duration: 0.4s;
}
.fscv2-wrap[data-density="mid"] .fscv2-dot {
    width: 10px;
    height: 10px;
    border-width: 1.5px;
    transition-duration: 0.28s, 0.32s;
}
.fscv2-wrap[data-density="mid"] .fscv2-cols { gap: 2px; }
.fscv2-wrap[data-density="mid"] { --fscv2-gap: 2px; }
.fscv2-wrap[data-density="mid"] .fscv2-labels { gap: 2px; }
.fscv2-wrap[data-density="mid"] .fscv2-opp,
.fscv2-wrap[data-density="mid"] .fscv2-date { font-size: 10px; }

/* High density — minimal columns, slim everything, hide overlaps,
   shortest transitions so the entrance wave is barely a flash. */
.fscv2-wrap[data-density="high"] .fscv2-band {
    width: 4px;
    margin-left: -2px;
    border-radius: 3px;
    transition-duration: 0.28s;
}
.fscv2-wrap[data-density="high"] .fscv2-proj {
    margin-left: -6px;
    width: 12px;
    border-top-width: 1.5px;
}
.fscv2-wrap[data-density="high"] .fscv2-dot {
    width: 7px;
    height: 7px;
    border-width: 1.5px;
    transition-duration: 0.22s, 0.26s;
    /* Halos are visually noisy at this density; muted glow */
}
.fscv2-wrap[data-density="high"] .fscv2-dot.is-scored {
    box-shadow: 0 0 5px 0 rgba(56, 189, 248, 0.45);
}
.fscv2-wrap[data-density="high"] .fscv2-dot.is-boom {
    box-shadow: 0 0 7px 1px rgba(251, 191, 36, 0.55);
}
.fscv2-wrap[data-density="high"] .fscv2-cols { gap: 1px; }
.fscv2-wrap[data-density="high"] { --fscv2-gap: 1px; }
.fscv2-wrap[data-density="high"] .fscv2-labels { gap: 1px; padding-bottom: 10px; }

/* Empty placeholder cells in the high-density label row — keep the
   column width but render nothing. The visible ones get spaced ~8 apart
   across the timeline. */
.fscv2-wrap[data-density="high"] .fscv2-label.is-empty {
    visibility: hidden;
}

.fscv2-wrap[data-density="high"] .fscv2-opp {
    font-size: 10px;
    font-weight: 500;
    /* The label spans the column it sits over but visually represents
       *that* day specifically; we want it to overflow neighbors without
       pushing column widths. */
    white-space: nowrap;
    overflow: visible;
}
.fscv2-wrap[data-density="high"] .fscv2-date {
    font-size: 9px;
    white-space: nowrap;
    overflow: visible;
}

/* ── V1/V2 toggle pill (lives in the page header, not the chart) ────── */
.fscv2-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 100px;
    background: #f1f5f9;
    box-shadow: inset 0 0 0 1px #e2e8f0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.fscv2-toggle-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 8px;
}
.fscv2-toggle button {
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.fscv2-toggle button.is-active {
    background: #fff;
    color: #1e3a8a;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(30, 58, 138, 0.1);
}

/* ── In-chart theme toggle (sun / moon icons) ──
   Same visual treatment as the size icons; lives just to their left in
   the legend strip. Active state uses the brand violet, matching the
   projection-tick color used elsewhere. */
.fscv2-theme-icons {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 2px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.fscv2-theme-icon {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 0;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.fscv2-theme-icon:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
}
.fscv2-theme-icon:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.55);
}
.fscv2-theme-icon.is-active {
    background: rgba(167, 139, 250, 0.18);
    color: var(--fscv2-user-proj, #c4b5fd);
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35);
}

/* ── In-chart projection-line toggle (single boolean button) ──
   Same visual treatment as theme/size icons; sits to their left. */
.fscv2-line-icons {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 2px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.fscv2-line-icon {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 0;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.fscv2-line-icon:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
}
.fscv2-line-icon:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.55);
}
.fscv2-line-icon.is-active {
    background: rgba(167, 139, 250, 0.18);
    color: var(--fscv2-user-proj, #c4b5fd);
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35);
}

/* Score-line toggle — same shape as the projection-line toggle, but
   active state uses the scored-dot blue so users can tell at a glance
   which line each pill controls. */
.fscv2-score-line-icons {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 2px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.fscv2-score-line-icon {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 0;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.fscv2-score-line-icon:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
}
.fscv2-score-line-icon:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.55);
}
.fscv2-score-line-icon.is-active {
    background: rgba(56, 189, 248, 0.18);
    color: #7dd3fc;
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   ═══════════════════════════════════════════════════════════════════════
   data-theme="light" on .fscv2-wrap. Mirrors the dark structure but with
   inverted surface/text colors and a softer violet range gradient that
   reads well on a light background. Brand accents (boom gold, projection
   violet, scored blue) stay the same hue but bump slightly darker so
   they have enough contrast on white. */

.fscv2-wrap[data-theme="light"] {
    background: #f8fafc;
    color: #1e293b;
}

/* Axis overlay — opaque so plot columns scrolling under it stay hidden */
.fscv2-wrap[data-theme="light"] .fscv2-axis {
    background: #f8fafc;
}
.fscv2-wrap[data-theme="light"] .fscv2-axis-label {
    color: rgba(15, 23, 42, 0.45);
}

/* Plot gridlines */
.fscv2-wrap[data-theme="light"] .fscv2-gridline {
    border-top-color: rgba(15, 23, 42, 0.08);
}

/* Column hover wash */
.fscv2-wrap[data-theme="light"] .fscv2-col:hover {
    background: rgba(15, 23, 42, 0.04);
}

/* Range band — soft yellow gradient. At 0.3 opacity on white this
   reads as a pale wheat tint; saturated enough at the top stop to
   stay legible against the lightened panel. */
.fscv2-wrap[data-theme="light"] .fscv2-band {
    background: linear-gradient(var(--fscv2-user-band, #fde047), var(--fscv2-user-band, #ca8a04));
}
.fscv2-wrap[data-theme="light"] .fscv2-band.is-upcoming {
    background: transparent;
    border-color: var(--fscv2-user-band, #ca8a04);
}

/* Projection tick — must contrast with the light violet range band
   sitting directly behind it (#c4b5fd → #a78bfa). #7c3aed is in the
   same hue family as the band and blends invisibly. Going darker AND
   slightly thicker so the tick reads cleanly when it overlaps a band.
   (Follows the user projection color override when one is set.) */
.fscv2-wrap[data-theme="light"] .fscv2-proj {
    border-top: 3px solid var(--fscv2-user-proj, #312e81);
    margin-top: -1px;
}

/* Dots — same hues, but the inner border (which "punches through" to
   the panel) needs to match the new light background, and miss-grey
   needs to be a bit darker so it's visible. */
.fscv2-wrap[data-theme="light"] .fscv2-dot {
    border-color: #f8fafc;
}
.fscv2-wrap[data-theme="light"] .fscv2-dot.is-scored {
    background: var(--fscv2-user-scored, #0284c7);
    box-shadow: 0 0 9px 1px rgba(2, 132, 199, 0.4);
}
.fscv2-wrap[data-theme="light"] .fscv2-dot.is-miss {
    background: var(--fscv2-user-bust, #94a3b8);
}
.fscv2-wrap[data-theme="light"] .fscv2-dot.is-boom {
    background: var(--fscv2-user-boom, #d97706);
    box-shadow: 0 0 12px 2px rgba(217, 119, 6, 0.55);
}

/* Above-dot value labels — light-theme colors + white halo so the
   numbers stay legible when they cross over the yellow range bars or
   sit close to a dot's blue glow. */
.fscv2-wrap[data-theme="light"] .fscv2-actual {
    text-shadow:
        0 0 3px rgba(248, 250, 252, 0.95),
        0 0 6px rgba(248, 250, 252, 0.7);
}
.fscv2-wrap[data-theme="light"] .fscv2-actual.is-scored { color: var(--fscv2-user-scored, #0284c7); }
/* Miss reuses the scored blue (see dark-theme rule above for rationale). */
.fscv2-wrap[data-theme="light"] .fscv2-actual.is-miss   { color: var(--fscv2-user-scored, #0284c7); }
.fscv2-wrap[data-theme="light"] .fscv2-actual.is-boom   { color: var(--fscv2-user-boom, #d97706); }
.fscv2-wrap[data-theme="light"] .fscv2-projnum {
    color: #312e81;
    background: rgba(49, 46, 129, 0.12);
}

/* Perfect-lineup trophy — bump halo so the warm glow registers on white */
.fscv2-wrap[data-theme="light"] .fscv2-perfect {
    color: var(--fscv2-user-boom, #d97706);
}
.fscv2-wrap[data-theme="light"] .fscv2-perfect svg {
    stroke: var(--fscv2-user-boom, #d97706);
}

/* Bottom labels (order chip, opp, date). Note: .fscv2-order has no
   background/color overrides — it holds the V1 lineup-order PNG which
   already has its own styled background. A translucent chip backdrop
   here would mute and blur the icon. */
.fscv2-wrap[data-theme="light"] .fscv2-opp {
    color: rgba(15, 23, 42, 0.85);
}
.fscv2-wrap[data-theme="light"] .fscv2-opp.is-upcoming {
    color: var(--fscv2-user-proj, #7c3aed);
}
/* Matchup colors in light mode use V1's exact shades for parity. */
.fscv2-wrap[data-theme="light"] .fscv2-opp.is-matchup-good    { color: #059669; }
.fscv2-wrap[data-theme="light"] .fscv2-opp.is-matchup-bad     { color: #b91c1c; }
.fscv2-wrap[data-theme="light"] .fscv2-opp.is-matchup-neutral { color: #111827; }
.fscv2-wrap[data-theme="light"] .fscv2-opp.is-upcoming.is-matchup-good,
.fscv2-wrap[data-theme="light"] .fscv2-opp.is-upcoming.is-matchup-bad,
.fscv2-wrap[data-theme="light"] .fscv2-opp.is-upcoming.is-matchup-neutral {
    color: var(--fscv2-user-proj, #7c3aed);
}
.fscv2-wrap[data-theme="light"] .fscv2-date {
    color: rgba(15, 23, 42, 0.45);
}
.fscv2-wrap[data-theme="light"] .fscv2-sal {
    color: rgba(15, 23, 42, 0.55);
}
/* Light theme — clock glyph reads naturally as a dark icon on the light
   panel, so undo the dark-theme inversion filter. */
.fscv2-wrap[data-theme="light"] .fscv2-ot img {
    filter: none;
    opacity: 0.75;
}

/* Settings button + popup in light mode */
.fscv2-wrap[data-theme="light"] .fscv2-settings-btn {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
    color: rgba(15, 23, 42, 0.6);
}
.fscv2-wrap[data-theme="light"] .fscv2-settings-btn:hover {
    background: rgba(15, 23, 42, 0.08);
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.22);
}
.fscv2-wrap[data-theme="light"] .fscv2-settings-btn:focus-visible {
    border-color: rgba(124, 58, 237, 0.6);
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.25);
}
.fscv2-wrap[data-theme="light"] .fscv2-settings-panel {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(15, 23, 42, 0.14);
    color: rgba(15, 23, 42, 0.88);
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.15);
}
.fscv2-wrap[data-theme="light"] .fscv2-settings-title {
    color: rgba(15, 23, 42, 0.5);
}
.fscv2-wrap[data-theme="light"] .fscv2-settings-key,
.fscv2-wrap[data-theme="light"] .fscv2-settings-row-label {
    color: rgba(15, 23, 42, 0.75);
}

/* Legend strip — keeping these rules in case something still renders
   the inline legend; the in-popup key items use the legend-item /
   legend-range / legend-proj / legend-dot classes which are styled
   above. */
.fscv2-wrap[data-theme="light"] .fscv2-legend {
    color: rgba(15, 23, 42, 0.55);
    border-top-color: rgba(15, 23, 42, 0.1);
}
.fscv2-wrap[data-theme="light"] .fscv2-legend-range {
    background: linear-gradient(var(--fscv2-user-band, #fde047), var(--fscv2-user-band, #ca8a04));
}
.fscv2-wrap[data-theme="light"] .fscv2-legend-proj {
    border-top: 3px solid #312e81;
}
.fscv2-wrap[data-theme="light"] .fscv2-legend-dot.is-scored { background: var(--fscv2-user-scored, #0284c7); }
.fscv2-wrap[data-theme="light"] .fscv2-legend-dot.is-boom   { background: var(--fscv2-user-boom, #d97706); }
.fscv2-wrap[data-theme="light"] .fscv2-legend-dot.is-miss   { background: var(--fscv2-user-bust, #94a3b8); }
.fscv2-wrap[data-theme="light"] .fscv2-legend-hint {
    color: rgba(15, 23, 42, 0.4);
}

/* Theme + size + line + score-line icon groups in the legend */
.fscv2-wrap[data-theme="light"] .fscv2-theme-icons,
.fscv2-wrap[data-theme="light"] .fscv2-size-icons,
.fscv2-wrap[data-theme="light"] .fscv2-line-icons,
.fscv2-wrap[data-theme="light"] .fscv2-score-line-icons {
    background: rgba(15, 23, 42, 0.05);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}
.fscv2-wrap[data-theme="light"] .fscv2-theme-icon,
.fscv2-wrap[data-theme="light"] .fscv2-size-icon,
.fscv2-wrap[data-theme="light"] .fscv2-line-icon,
.fscv2-wrap[data-theme="light"] .fscv2-score-line-icon {
    color: rgba(15, 23, 42, 0.55);
}
.fscv2-wrap[data-theme="light"] .fscv2-theme-icon:hover,
.fscv2-wrap[data-theme="light"] .fscv2-size-icon:hover,
.fscv2-wrap[data-theme="light"] .fscv2-line-icon:hover,
.fscv2-wrap[data-theme="light"] .fscv2-score-line-icon:hover {
    background: rgba(15, 23, 42, 0.05);
    color: rgba(15, 23, 42, 0.85);
}
/* Projection-related toggles share the violet active highlight. */
.fscv2-wrap[data-theme="light"] .fscv2-theme-icon.is-active,
.fscv2-wrap[data-theme="light"] .fscv2-size-icon.is-active,
.fscv2-wrap[data-theme="light"] .fscv2-line-icon.is-active {
    background: rgba(124, 58, 237, 0.12);
    color: var(--fscv2-user-proj, #7c3aed);
    box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.3);
}
/* Score-line toggle in light mode — sky-blue active matching the
   score-line stroke + scored-dot color. */
.fscv2-wrap[data-theme="light"] .fscv2-score-line-icon.is-active {
    background: rgba(2, 132, 199, 0.12);
    color: var(--fscv2-user-scored, #0284c7);
    box-shadow: inset 0 0 0 1px rgba(2, 132, 199, 0.3);
}

/* Projection line in light mode — darker indigo to read on light bg,
   matching the same shift the projection tick gets. */
.fscv2-wrap[data-theme="light"] .fscv2-line-path {
    stroke: var(--fscv2-user-proj, #312e81);
    stroke-opacity: 0.5;
}
/* Score line in light mode — same shift to the darker scored-dot blue
   used elsewhere. */
.fscv2-wrap[data-theme="light"] .fscv2-score-line-path {
    stroke: var(--fscv2-user-scored, #0284c7);
    stroke-opacity: 0.5;
}

/* Scrollbar */
.fscv2-wrap[data-theme="light"] .fscv2-scroll::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.04);
}
.fscv2-wrap[data-theme="light"] .fscv2-scroll::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.2);
}
.fscv2-wrap[data-theme="light"] .fscv2-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.32);
}
.fscv2-wrap[data-theme="light"] .fscv2-scroll {
    scrollbar-color: rgba(15, 23, 42, 0.2) rgba(15, 23, 42, 0.04);
}

/* Inspector panel — same shape, light surface */
.fscv2-wrap[data-theme="light"] .fscv2-inspector {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(15, 23, 42, 0.12);
    color: rgba(15, 23, 42, 0.88);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}
.fscv2-wrap[data-theme="light"] .fscv2-inspector-hint {
    color: rgba(15, 23, 42, 0.4);
}
.fscv2-wrap[data-theme="light"] .fscv2-inspector-opp {
    color: #0f172a;
}
.fscv2-wrap[data-theme="light"] .fscv2-inspector-date {
    color: rgba(15, 23, 42, 0.5);
}
.fscv2-wrap[data-theme="light"] .fscv2-inspector-salary {
    color: rgba(15, 23, 42, 0.65);
}
.fscv2-wrap[data-theme="light"] .fscv2-inspector-line {
    color: rgba(15, 23, 42, 0.7);
}
.fscv2-wrap[data-theme="light"] .fscv2-inspector-boxline {
    color: rgba(15, 23, 42, 0.55);
}
.fscv2-wrap[data-theme="light"] .fscv2-inspector-range {
    color: rgba(15, 23, 42, 0.5);
}
.fscv2-wrap[data-theme="light"] .fscv2-inspector-pending {
    color: var(--fscv2-user-proj, #7c3aed);
}
.fscv2-wrap[data-theme="light"] .fscv2-inspector-line .fscv2-tip-proj { color: var(--fscv2-user-proj, #7c3aed); }
.fscv2-wrap[data-theme="light"] .fscv2-inspector-line .fscv2-tip-act.is-scored { color: var(--fscv2-user-scored, #0284c7); }
.fscv2-wrap[data-theme="light"] .fscv2-inspector-line .fscv2-tip-act.is-miss   { color: #64748b; }
.fscv2-wrap[data-theme="light"] .fscv2-inspector-line .fscv2-tip-act.is-boom   { color: var(--fscv2-user-boom, #d97706); }

/* Stat grids inside the inspector */
.fscv2-wrap[data-theme="light"] .fscv2-tip-grid,
.fscv2-wrap[data-theme="light"] .fscv2-tip-box {
    border-top-color: rgba(15, 23, 42, 0.08);
}
.fscv2-wrap[data-theme="light"] .fscv2-tip-grid .l,
.fscv2-wrap[data-theme="light"] .fscv2-tip-kv .l {
    color: rgba(15, 23, 42, 0.5);
}
.fscv2-wrap[data-theme="light"] .fscv2-tip-grid .v,
.fscv2-wrap[data-theme="light"] .fscv2-tip-kv .v {
    color: #0f172a;
}
.fscv2-wrap[data-theme="light"] .fscv2-tip-grid .v.is-hot {
    color: var(--fscv2-user-boom, #d97706);
}
.fscv2-wrap[data-theme="light"] .fscv2-tip-kv .v.is-zero {
    color: rgba(15, 23, 42, 0.36);
}
/* season divider */
.fscv2-wrap[data-theme="light"] .fscv2-seasonbreak {
    border-left-color: rgba(15, 23, 42, 0.22);
}
.fscv2-wrap[data-theme="light"] .fscv2-seasonbreak-yr {
    background: rgba(15, 23, 42, 0.07);
    color: rgba(15, 23, 42, 0.58);
}
/* presence-flag badges */
.fscv2-wrap[data-theme="light"] .fscv2-inspector-flag.is-win {
    color: #047857;
    background: rgba(4, 120, 87, 0.10);
    border-color: rgba(4, 120, 87, 0.28);
}
.fscv2-wrap[data-theme="light"] .fscv2-inspector-flag.is-loss {
    color: #b91c1c;
    background: rgba(185, 28, 28, 0.10);
    border-color: rgba(185, 28, 28, 0.28);
}
.fscv2-wrap[data-theme="light"] .fscv2-inspector-flag.is-qs {
    color: #0369a1;
    background: rgba(3, 105, 161, 0.10);
    border-color: rgba(3, 105, 161, 0.28);
}

/* =====================================================================
   USER CHART COLORS + LABEL VISIBILITY (settings panel additions)

   Colors: every projection/scored/boom color in this sheet resolves via
   var(--fscv2-user-<key>, <theme default>). The page sets those vars on
   :root from localStorage (fscSetChartColor in ProjectionsLayout), so a
   user pick recolors every chart LIVE in both themes; unset = exact
   theme defaults.

   Labels: fscv2-hide-sal / -opp / -date classes on the wrap (from
   window.FSC_CHART_V2_HIDE) drop label lines; renderChart reserves
   less label height accordingly, so the plot gets the freed room.
   ===================================================================== */
.fscv2-wrap.fscv2-hide-sal  .fscv2-sal  { display: none; }
.fscv2-wrap.fscv2-hide-opp  .fscv2-opp  { display: none; }
.fscv2-wrap.fscv2-hide-date .fscv2-date,
.fscv2-wrap.fscv2-hide-date .fscv2-game-score { display: none; }

/* ---- matchup drill-down ----
   Only the current/upcoming column is tappable (fscv2-col-drill); a back
   pill appears in matchup views to restore the full history. */
.fscv2-col.fscv2-col-drill { cursor: pointer; }
.fscv2-back-btn {
    position: absolute;
    top: 6px;
    left: 38px;              /* clears the y-axis strip */
    z-index: 20;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(26, 26, 34, 0.88);
    color: rgba(255, 255, 255, 0.88);
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
}
.fscv2-back-btn:hover { border-color: rgba(255, 255, 255, 0.55); }
.fscv2-wrap[data-theme="light"] .fscv2-back-btn {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(15, 23, 42, 0.25);
    color: #1e293b;
}
.fscv2-wrap[data-theme="light"] .fscv2-back-btn:hover { border-color: rgba(15, 23, 42, 0.55); }

/* ---- color pickers row ---- */
.fscv2-color-row { display: flex; gap: 12px; flex-wrap: wrap; }
.fscv2-color-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
}
.fscv2-color-item input[type="color"] {
    width: 36px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(128, 128, 128, 0.45);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

/* ---- preset / reset chips ---- */
.fscv2-preset-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.fscv2-preset-btn {
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(128, 128, 128, 0.45);
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.fscv2-preset-btn:hover { border-color: rgba(128, 128, 128, 0.9); }

/* ---- label visibility pills (active = shown) ---- */
.fscv2-hide-row { display: flex; gap: 6px; flex-wrap: wrap; }
.fscv2-hide-btn {
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(128, 128, 128, 0.45);
    background: transparent;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
}
.fscv2-hide-btn.is-active {
    opacity: 1;
    border-color: rgba(128, 128, 128, 0.9);
    box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.35);
}

/* =====================================================================
   COLORBLIND MODE (body.fscColorblind - the projections page's setting)
   Mirrors the page-level Okabe-Ito remap: BLUE = good/win, VERMILLION =
   bad/loss. The chart carries its own theme attribute, so both chart
   themes get variants (dark uses the lighter pair for contrast on navy).
   Tie yellow is colorblind-safe and stays. Pure class overrides - the
   colors flip live when the setting toggles, no chart re-render needed.
   ===================================================================== */
body.fscColorblind .fscv2-wrap .fscv2-outcome.is-win  { color: #58a6ff; }
body.fscColorblind .fscv2-wrap .fscv2-outcome.is-loss { color: #ff9a5b; }
body.fscColorblind .fscv2-opp.is-matchup-good { color: #58a6ff; }
body.fscColorblind .fscv2-opp.is-matchup-bad  { color: #ff9a5b; }

body.fscColorblind .fscv2-wrap[data-theme="light"] .fscv2-outcome.is-win  { color: #0072B2; }
body.fscColorblind .fscv2-wrap[data-theme="light"] .fscv2-outcome.is-loss { color: #D55E00; }
body.fscColorblind .fscv2-wrap[data-theme="light"] .fscv2-opp.is-matchup-good { color: #0072B2; }
body.fscColorblind .fscv2-wrap[data-theme="light"] .fscv2-opp.is-matchup-bad  { color: #D55E00; }

/* re-assert: the violet "upcoming/today" signal still beats matchup tint
   (the overrides above would otherwise out-rank the base precedence rule;
   the var resolves per chart theme, so light charts keep their darker
   violet automatically) */
body.fscColorblind .fscv2-opp.is-upcoming.is-matchup-good,
body.fscColorblind .fscv2-opp.is-upcoming.is-matchup-bad,
body.fscColorblind .fscv2-wrap[data-theme="light"] .fscv2-opp.is-upcoming.is-matchup-good,
body.fscColorblind .fscv2-wrap[data-theme="light"] .fscv2-opp.is-upcoming.is-matchup-bad { color: var(--fscv2-user-proj, #a78bfa); }

/* =====================================================================
   STAT MODE - chart raw box-score stats instead of fantasy points.
   Series colors ride the user-configurable chart colors (scored / boom /
   proj), so color presets and overrides apply to stat series too.
   ===================================================================== */
/* settings panel tab bar (View / Colors / Layout) - the stat picker
   lives on the View tab; tabs keep the taller content set compact */
.fscv2-settings-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 10px;
    padding: 0 0 8px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}
.fscv2-settings-tab {
    flex: 1 1 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 0;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
    text-align: center;
}
.fscv2-settings-tab:hover { opacity: 0.85; }
.fscv2-settings-tab.is-active {
    opacity: 1;
    border-color: rgba(128, 128, 128, 0.45);
    background: rgba(128, 128, 128, 0.12);
}

/* series dots: 0 = scored blue, 1 = boom gold, 2 = proj violet */
.fscv2-dot.is-stat0 {
    background: var(--fscv2-user-scored, #38bdf8);
    box-shadow: 0 0 9px 1px rgba(56, 189, 248, 0.4);
}
.fscv2-dot.is-stat1 {
    background: var(--fscv2-user-boom, #fbbf24);
    box-shadow: 0 0 9px 1px rgba(251, 191, 36, 0.4);
}
.fscv2-dot.is-stat2 {
    background: var(--fscv2-user-proj, #a78bfa);
    box-shadow: 0 0 9px 1px rgba(167, 139, 250, 0.4);
}
.fscv2-wrap[data-theme="light"] .fscv2-dot.is-stat0 { background: var(--fscv2-user-scored, #0284c7); }
.fscv2-wrap[data-theme="light"] .fscv2-dot.is-stat1 { background: var(--fscv2-user-boom, #d97706); }
.fscv2-wrap[data-theme="light"] .fscv2-dot.is-stat2 { background: var(--fscv2-user-proj, #7c3aed); }

/* first-series value label above its dot */
.fscv2-wrap .fscv2-actual.is-stat0 { color: var(--fscv2-user-scored, #38bdf8); }
.fscv2-wrap[data-theme="light"] .fscv2-actual.is-stat0 { color: var(--fscv2-user-scored, #0284c7); }

/* connecting line per series */
.fscv2-stat-line-path {
    stroke-width: 1.5;
    stroke-opacity: 0.55;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
.fscv2-stat-line-path.is-stat0 { stroke: var(--fscv2-user-scored, #38bdf8); }
.fscv2-stat-line-path.is-stat1 { stroke: var(--fscv2-user-boom, #fbbf24); }
.fscv2-stat-line-path.is-stat2 { stroke: var(--fscv2-user-proj, #a78bfa); }
.fscv2-wrap[data-theme="light"] .fscv2-stat-line-path.is-stat0 { stroke: var(--fscv2-user-scored, #0284c7); }
.fscv2-wrap[data-theme="light"] .fscv2-stat-line-path.is-stat1 { stroke: var(--fscv2-user-boom, #d97706); }
.fscv2-wrap[data-theme="light"] .fscv2-stat-line-path.is-stat2 { stroke: var(--fscv2-user-proj, #7c3aed); }

/* selected stats missing from THIS player's history - FP shown instead */
.fscv2-stat-nodata {
    position: absolute;
    top: 4px;
    left: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 2px 9px;
    pointer-events: none;
    z-index: 3;
}
.fscv2-wrap[data-theme="light"] .fscv2-stat-nodata {
    color: rgba(15, 23, 42, 0.55);
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.12);
}

/* =====================================================================
   PROP CHART (props page full-card mode - preparePropChart). Dots are
   colored by the game's result vs the sportsbook line using the site's
   Over/Under tokens (amber/violet - deliberately NOT green/red), with a
   dashed reference line at the line value and a hit-rate chip.
   ===================================================================== */
.fscv2-prop .fscv2-vh-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 11px;
    color: rgba(128, 138, 160, 0.8);
}
/* over/under/push dots + value labels */
.fscv2-dot.is-over  { background: var(--fsc-over, #FBBF24);  box-shadow: 0 0 9px 1px rgba(251, 191, 36, 0.4); }
.fscv2-dot.is-under { background: var(--fsc-under, #A78BFA); box-shadow: 0 0 9px 1px rgba(167, 139, 250, 0.4); }
.fscv2-dot.is-push  { background: #6b7280; }
/* projection dot: dashed outline = "projected, not played"; its FILL and
   label color ride the is-over/is-under/is-push lean class alongside it */
.fscv2-dot.is-prop-proj {
    border: 1.5px dashed rgba(255, 255, 255, 0.75);
    box-sizing: border-box;
}
.fscv2-wrap .fscv2-actual.is-over      { color: var(--fsc-over, #FBBF24); }
.fscv2-wrap .fscv2-actual.is-under     { color: var(--fsc-under, #A78BFA); }
.fscv2-wrap .fscv2-actual.is-push      { color: #9aa3b2; }
/* the sportsbook line: dashed rule + right-edge value tag */
.fscv2-prop-refline {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1.5px dashed rgba(148, 163, 184, 0.65);
    pointer-events: none;
    z-index: 1;
}
.fscv2-prop-reftag {
    position: absolute;
    right: 2px;
    transform: translateY(-50%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    color: rgba(226, 232, 240, 0.9);
    pointer-events: none;
    z-index: 2;
}
/* hit-rate chip, top-left of the wrap */
.fscv2-prop-hitrate {
    position: absolute;
    top: 0;
    left: 30px;    /* clear of the y-axis labels */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.12);
    color: var(--fsc-over, #FBBF24);
    pointer-events: none;
    z-index: 2;
}
/* date labels: decimated to every other column, so let each one bleed
   into its empty neighbor - the base overflow:hidden clips "07-27" to
   "07-" at prop-card column widths (~23px) */
.fscv2-prop .fscv2-label,
.fscv2-prop .fscv2-date {
    overflow: visible;
    text-overflow: clip;
}
.fscv2-prop .fscv2-date {
    font-size: 10px;
    font-weight: 600;
}
/* the PROJ column label leans on the projection violet, matching its
   dashed dot */
.fscv2-prop .fscv2-date.is-upcoming { color: var(--fscv2-user-proj, #a78bfa); }
.fscv2-wrap.fscv2-prop[data-theme="light"] .fscv2-date.is-upcoming { color: var(--fscv2-user-proj, #7c3aed); }

/* connecting series line (played games only) */
.fscv2-prop-series-path {
    stroke: rgba(148, 163, 184, 0.5);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
/* light theme variants */
.fscv2-wrap[data-theme="light"] .fscv2-dot.is-over  { background: var(--fsc-over, #D97706);  box-shadow: 0 0 9px 1px rgba(217, 119, 6, 0.35); }
.fscv2-wrap[data-theme="light"] .fscv2-dot.is-under { background: var(--fsc-under, #7C3AED); box-shadow: 0 0 9px 1px rgba(124, 58, 237, 0.35); }
.fscv2-wrap[data-theme="light"] .fscv2-dot.is-push  { background: #94a3b8; }
.fscv2-wrap[data-theme="light"] .fscv2-actual.is-over      { color: var(--fsc-over, #D97706); }
.fscv2-wrap[data-theme="light"] .fscv2-actual.is-under     { color: var(--fsc-under, #7C3AED); }
.fscv2-wrap[data-theme="light"] .fscv2-actual.is-push      { color: #64748b; }
.fscv2-wrap[data-theme="light"] .fscv2-dot.is-prop-proj    { border-color: rgba(15, 23, 42, 0.55); }
.fscv2-wrap[data-theme="light"] .fscv2-prop-refline { border-top-color: rgba(71, 85, 105, 0.55); }
.fscv2-wrap[data-theme="light"] .fscv2-prop-reftag {
    background: rgba(71, 85, 105, 0.12);
    color: #334155;
}
.fscv2-wrap[data-theme="light"] .fscv2-prop-hitrate {
    background: rgba(217, 119, 6, 0.1);
    color: var(--fsc-over, #D97706);
}
.fscv2-wrap[data-theme="light"] .fscv2-prop-series-path { stroke: rgba(71, 85, 105, 0.4); }