/* =============================================================================
   PARLAYS CONSOLE — desktop master-list + detail view for /user/dashboard
   =============================================================================
   EVERY rule in this file is double-gated:
     1. @media (min-width: 1001px)  — the phone can never reach it
     2. body.pbc-on                 — added only by _renderConsole(), which
                                      returns early unless _isDesktop()

   The ONE exception is the .pbc-console{display:none} default below, which
   must be unmediated so the container is hidden everywhere until the console
   actually renders.

   WHY A SEPARATE FILE. dashboard-parlays.css has five media queries and all
   five are max-width:1000px, so every .parlay-card / .parlay-leg /
   .leg-progress-* rule is unbreakpointed base CSS serving the phone and the
   desktop from the same bytes. The mobile layout is signed off; nothing here
   opens that file, or dashboard.css, duel.css, ranked.css or profile.css.
   The proof is `git diff --stat` over those five paths printing nothing.

   Namespace is pbc-*. Verified free: `grep -rn "pbc-" static/ templates/`
   returned zero before this file existed. (pc-* was NOT free — prop-cards.css
   and research/prop-correlation.css both use it, and both always load.)
   ============================================================================= */

.pbc-console { display: none; }

@media (min-width: 1001px) {

  body.pbc-on .pbc-console { display: block; }

  /* 1560 = 820 feed + 28 gap + 648 rail + 64 padding. Same cap as
     core/pickem.css:138, nfl/nfl-game-detail.css:105 and
     mlb/mlb-game-detail.css:2845; the 1320 it replaces appears nowhere else
     in the app.
     :not(.dash-logged-out) is load-bearing, not decoration — dashboard.css:1840
     sets body.dash-logged-out .dashboard-page{max-width:none} at (0,2,1), and
     this file loads later, so a bare (0,2,1) rule here would win a tie it must
     never enter and cap the logged-out pitch. */
  body.pbc-on:not(.dash-logged-out) .dashboard-page { max-width: 1560px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Everything below is inside the same double gate. Surfaces are the softened
   desktop recipe from the console mockup: the phone's .045/.20/.26 are tuned
   for a 980px canvas at 0.398x, where a 1px rim is 0.4 device px and has to
   shout; at 1:1 those same numbers read as frost.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1001px) {
  body.pbc-on .pbc-console {
    --pbc-accent: rgb(var(--theme-accent-rgb, 0, 211, 189));
    --pbc-ink: #F2F5F4;
    --pbc-ink-2: #C2CBC9;
    --pbc-ink-3: #8A9391;
    --pbc-ink-4: #5F6A68;
    --pbc-pane: linear-gradient(180deg, rgba(255,255,255,.022) 0%, rgba(255,255,255,.008) 100%) #101216;
    --pbc-rim: rgba(255,255,255,.11);
    --pbc-lift: 0 4px 14px rgba(0,0,0,.5);
    --pbc-nest: rgba(255,255,255,.028);
    --pbc-nest-rim: rgba(255,255,255,.07);
    --pbc-hair: rgba(255,255,255,.06);
    --pbc-pill: #0B0C0C;
    --pbc-pill-rim: #2C3232;
    font-family: inherit;
    color: var(--pbc-ink);
    display: flex; flex-direction: column; gap: 18px;
    margin-bottom: 20px;
    /* Fit the screen instead of a hardcoded pane height. 86px is where the
       console starts under the site header, 64px is the fixed bottom nav, and
       16px keeps the pane off it. Measured, and the same at every desktop
       width. Taller screen, taller panes; short screen, the scrollers take up
       the slack. A MAX-height, so a near-empty console still shrinks to its
       content rather than leaving a black gap under it. */
    max-height: calc(100vh - 166px);
  }
  body.pbc-on .pbc-console *,
  body.pbc-on .pbc-console *::before { box-sizing: border-box; }
  body.pbc-on .pbc-console button { font-family: inherit; cursor: pointer; }
  body.pbc-on .pbc-console :focus-visible { outline: 2px solid var(--pbc-accent); outline-offset: 2px; }

  body.pbc-on .pbc-pane,
  body.pbc-on .pbc-tile {
    background: var(--pbc-pane); border: 1px solid var(--pbc-rim);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), var(--pbc-lift);
  }

  /* ── head ── */
  /* flex: none on every band above a scroller. The console and both panes
     are height-capped flex columns, and a flex item shrinks by default —
     without this the tab row is the first thing crushed when the content
     runs long. Only .pbc-rows and .pbc-dcard are allowed to give. */
  body.pbc-on .pbc-head,
  body.pbc-on .pbc-strip,
  body.pbc-on .pbc-tabs,
  body.pbc-on .pbc-chips,
  body.pbc-on .pbc-dhead,
  body.pbc-on .pbc-dstats { flex: none; }
  body.pbc-on .pbc-head { display: flex; flex-wrap: wrap; gap: 14px;
    align-items: flex-start; justify-content: space-between; }
  body.pbc-on .pbc-title h2 { font-size: 26px; font-weight: 800; letter-spacing: -.025em;
    margin: 0; line-height: 1.05; color: var(--pbc-ink); }
  body.pbc-on .pbc-title p { margin: 5px 0 0; font-size: 13px; color: var(--pbc-ink-3); }
  body.pbc-on .pbc-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  body.pbc-on .pbc-search { display: inline-flex; align-items: center; gap: 9px;
    height: 38px; padding: 0 14px; min-width: 210px;
    background: var(--pbc-pill); border: 1px solid var(--pbc-pill-rim);
    border-radius: 10px; color: var(--pbc-ink-4); }
  body.pbc-on .pbc-search input { flex: 1; min-width: 0; border: 0; background: none;
    color: var(--pbc-ink); font-size: 13px; font-family: inherit; outline: none; }
  body.pbc-on .pbc-search input::placeholder { color: var(--pbc-ink-4); }
  body.pbc-on .pbc-range { display: inline-flex; gap: 3px; padding: 3px;
    background: var(--pbc-pill); border: 1px solid var(--pbc-pill-rim); border-radius: 10px; }
  body.pbc-on .pbc-range button { height: 30px; padding: 0 12px; border: 1px solid transparent;
    border-radius: 7px; background: none; color: var(--pbc-ink-3);
    font-size: 12.5px; font-weight: 600; }
  body.pbc-on .pbc-range button[aria-pressed="true"] { border-color: var(--pbc-accent); color: var(--pbc-accent); }
  body.pbc-on .pbc-avatar { width: 38px; height: 38px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-size: 12px; font-weight: 800;
    background: rgba(0,211,189,.12); border: 1px solid rgba(0,211,189,.4); color: var(--pbc-accent); }

  /* ── stat strip. Five tiles never grid cleanly at a fixed column count, so
        the row capacity steps 5 -> 3 (3+2), never 4, which strands one. ── */
  body.pbc-on .pbc-strip { display: flex; flex-wrap: wrap; gap: 13px; }
  body.pbc-on .pbc-tile { flex: 1 1 200px; min-width: 0;
    padding: 15px 17px; display: flex; gap: 13px; align-items: flex-start; }
  body.pbc-on .pbc-tile-i { width: 36px; height: 36px; border-radius: 10px; flex: none;
    display: grid; place-items: center; color: var(--pbc-accent);
    background: rgba(0,211,189,.09); border: 1px solid rgba(0,211,189,.18); }
  body.pbc-on .pbc-tile-b { min-width: 0; display: flex; flex-direction: column; }
  body.pbc-on .pbc-tile-k { font-size: 12.5px; font-weight: 600; color: var(--pbc-ink-3); }
  body.pbc-on .pbc-tile-v { font-size: 23px; font-weight: 800; letter-spacing: -.02em;
    margin-top: 2px; font-variant-numeric: tabular-nums; }
  body.pbc-on .pbc-tile-n { font-size: 11.5px; font-weight: 600; color: var(--pbc-ink-4); margin-top: 5px; }
  body.pbc-on .pbc-tile-d { font-size: 11.5px; font-weight: 600; margin-top: 5px; color: var(--pbc-ink-4); }
  body.pbc-on .pbc-tile-d.up { color: #2ad4bb; }
  body.pbc-on .pbc-tile-d.dn { color: #ef9182; }

  /* ── body split ── */
  /* One height for both panes, declared once as --pbc-pane-h. Each pane is a
     flex column whose scroller takes the leftover, so the caps can never drift
     apart as the headers above each scroller change size: the list carries tabs
     + chips, the detail carries a title and a stat row, and hand-tuning two
     max-heights to land on the same baseline only holds until one of those
     grows. align-items: stretch then squares the shorter pane to the taller. */
  body.pbc-on .pbc-body { display: grid; grid-template-columns: 446px minmax(0, 1fr);
    gap: 16px; align-items: stretch; flex: 1 1 auto; min-height: 0; }
  body.pbc-on .pbc-list { padding: 13px; display: flex; flex-direction: column; gap: 11px;
    min-width: 0; min-height: 0; }
  body.pbc-on .pbc-detail { padding: 18px 20px; min-width: 0; min-height: 0;
    display: flex; flex-direction: column; }

  /* ── tabs + chips: the NFL game page's props position filters ── */
  body.pbc-on .pbc-tabs { display: flex; gap: 2px; padding-bottom: 10px;
    border-bottom: 1px solid var(--pbc-hair); overflow-x: auto; scrollbar-width: thin; }
  body.pbc-on .pbc-tab { display: inline-flex; align-items: baseline; gap: 5px; flex: none;
    line-height: 17px; padding: 7px 9px; border: 1px solid transparent; border-radius: 9px;
    background: transparent; color: var(--pbc-ink-3); font-size: 12.5px; font-weight: 600; }
  body.pbc-on .pbc-tab:hover { color: var(--pbc-ink-2); }
  body.pbc-on .pbc-tab[aria-selected="true"] { background: var(--pbc-pill);
    border-color: var(--pbc-accent); color: var(--pbc-accent); }
  /* Inherits the label's 12.5px on purpose. At 11.5px the digits were a full
     size below the word beside them, so their cap height sat inside the
     label's and the count read as a raised annotation rather than part of
     the same line. Same size + shared baseline puts it back on the line;
     the dimming is what keeps it secondary. */
  body.pbc-on .pbc-tab .n { font-weight: 700; opacity: .75; font-variant-numeric: tabular-nums; }
  body.pbc-on .pbc-chips { display: flex; gap: 7px; flex-wrap: wrap; }
  body.pbc-on .pbc-chip { height: 29px; padding: 0 12px; border-radius: 999px;
    background: var(--pbc-pill); border: 1px solid var(--pbc-pill-rim);
    color: var(--pbc-ink-3); font-size: 12px; font-weight: 600; }
  body.pbc-on .pbc-chip:hover { border-color: #3A4242; color: var(--pbc-ink-2); }
  body.pbc-on .pbc-chip[aria-pressed="true"] { border-color: var(--pbc-accent); color: var(--pbc-accent); }

  /* ── rows ── */
  body.pbc-on .pbc-rows { display: flex; flex-direction: column; gap: 8px;
    flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
  body.pbc-on .pbc-rows::-webkit-scrollbar { width: 6px; }
  body.pbc-on .pbc-rows::-webkit-scrollbar-thumb { background: #2A3232; border-radius: 3px; }
  body.pbc-on .pbc-row { width: 100%; text-align: left; display: grid; gap: 6px;
    padding: 11px 12px; color: inherit; border-radius: 13px;
    background: var(--pbc-nest); border: 1px solid var(--pbc-nest-rim);
    transition: border-color .14s, background .14s; }
  body.pbc-on .pbc-row:hover { border-color: rgba(255,255,255,.18); }
  body.pbc-on .pbc-row[aria-current="true"] { border-color: var(--pbc-accent);
    background: rgba(0,211,189,.06); }
  body.pbc-on .pbc-row-t { display: flex; align-items: center; gap: 8px; }
  body.pbc-on .pbc-row-n { flex: 1; min-width: 0; font-size: 14px; font-weight: 700;
    letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.pbc-on .pbc-row-o { font-size: 14px; font-weight: 800; color: var(--pbc-accent);
    font-variant-numeric: tabular-nums; }
  body.pbc-on .pbc-row-l { font-size: 11.5px; color: var(--pbc-ink-4);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.pbc-on .pbc-row-b { display: flex; align-items: center; gap: 10px;
    font-size: 11.5px; color: var(--pbc-ink-4); }
  body.pbc-on .pbc-row-m { margin-left: auto; color: var(--pbc-ink-2); font-weight: 600;
    font-variant-numeric: tabular-nums; }
  body.pbc-on .pbc-row-m .to { color: var(--pbc-accent); }
  body.pbc-on .pbc-row-c { opacity: .45; display: flex; }

  /* ── status chips: one vocabulary, list and detail ── */
  body.pbc-on .pbc-st { display: inline-flex; align-items: center; gap: 6px; flex: none;
    height: 21px; padding: 0 9px; border-radius: 999px; border: 1px solid transparent;
    font-size: 10px; font-weight: 700; letter-spacing: .07em; }
  body.pbc-on .pbc-st i { width: 6px; height: 6px; border-radius: 50%; display: block; flex: none; }
  body.pbc-on .pbc-st-live { background: rgba(231,76,60,.16); border-color: rgba(231,76,60,.45); color: #ff8071; }
  body.pbc-on .pbc-st-live i { background: #e74c3c; animation: parlay-live-pulse 1.5s ease-in-out infinite; }
  body.pbc-on .pbc-st-open { background: rgba(90,150,255,.12); border-color: rgba(90,150,255,.38); color: #8fb4ff; }
  body.pbc-on .pbc-st-open i { background: #8fb4ff; }
  body.pbc-on .pbc-st-saved { background: rgba(0,211,189,.12); border-color: rgba(0,211,189,.4); color: var(--pbc-accent); }
  body.pbc-on .pbc-st-won { background: rgba(0,153,135,.18); border-color: rgba(0,153,135,.45); color: #2ad4bb; }
  body.pbc-on .pbc-st-won i { background: #2ad4bb; }
  /* Returned at least the stake despite a miss — a good outcome, so it reads
     like one, but distinct from WON because a leg did go down. */
  body.pbc-on .pbc-st-paid { background: rgba(0,153,135,.14); border-color: rgba(0,153,135,.40); color: #2ad4bb; }
  body.pbc-on .pbc-st-paid i { background: #2ad4bb; }
  /* Returned something, but less than was staked. Neither a win nor a wipeout. */
  body.pbc-on .pbc-st-partial { background: rgba(255,193,7,.12); border-color: rgba(255,193,7,.38); color: #ffc107; }
  body.pbc-on .pbc-st-partial i { background: #ffc107; }
  body.pbc-on .pbc-st-lost { background: rgba(231,76,60,.14); border-color: rgba(231,76,60,.38); color: #ef9182; }
  body.pbc-on .pbc-st-lost i { background: #ef9182; }
  /* Flex is a STAKE MODE, not a status — a slip can be flex and live at once —
     so it sits beside the status chip rather than replacing it. Amber is the
     phone's .parlay-flex-badge colour (duel.css:1100) and is the one hue no
     status chip claims, so the two surfaces read as the same concept. */
  body.pbc-on .pbc-flex { display: inline-flex; align-items: center; gap: 4px; flex: none;
    height: 21px; padding: 0 8px; border-radius: 999px;
    background: rgba(255,193,7,.13); border: 1px solid rgba(255,193,7,.40);
    color: #ffc107; font-size: 10px; font-weight: 700; letter-spacing: .07em; }
  body.pbc-on .pbc-flex svg { flex: none; }
  body.pbc-on .pbc-st-settled { background: rgba(255,255,255,.05); border-color: var(--pbc-nest-rim); color: var(--pbc-ink-3); }
  body.pbc-on .pbc-st-duel { background: rgba(167,139,250,.14); border-color: rgba(167,139,250,.42); color: #c4b5fd; }

  /* ── detail ── */
  body.pbc-on .pbc-dhead { display: flex; flex-wrap: wrap; gap: 11px; align-items: center; }
  body.pbc-on .pbc-dhead h3 { flex: 1; min-width: 0; margin: 0; font-size: 20px;
    font-weight: 800; letter-spacing: -.02em; }
  body.pbc-on .pbc-dodds { font-size: 20px; font-weight: 800; color: var(--pbc-accent);
    font-variant-numeric: tabular-nums; }
  body.pbc-on .pbc-dstats { display: grid; grid-template-columns: repeat(6, minmax(0,1fr));
    margin-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--pbc-hair); }
  body.pbc-on .pbc-dstat { padding: 0 16px; border-left: 1px solid var(--pbc-hair);
    min-width: 0; display: flex; flex-direction: column; }
  body.pbc-on .pbc-dstat:first-child { border-left: 0; padding-left: 2px; }
  body.pbc-on .pbc-dstat .k { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; color: var(--pbc-ink-3); }
  body.pbc-on .pbc-dstat .v { font-size: 18px; font-weight: 800; margin-top: 3px;
    letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  body.pbc-on .pbc-dstat .v.teal { color: var(--pbc-accent); }

  /* The reused card sheds its own plate — it is already inside one.
     It also scrolls inside the pane rather than growing the page: a 10-leg slip
     is taller than any screen, and on a wide monitor the answer to "is my slip
     winning" should not be below the fold. The header and the stat row stay
     put; only the legs move. 556px pairs with the list's 640px cap so the two
     columns end at roughly the same place. */
  body.pbc-on .pbc-dcard {
    margin-top: 4px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 4px;
  }
  body.pbc-on .pbc-dcard::-webkit-scrollbar { width: 6px; }
  body.pbc-on .pbc-dcard::-webkit-scrollbar-thumb { background: #2A3232; border-radius: 3px; }
  /* The id is load-bearing. dashboard.css:1736 paints #111319 on every
     .parlay-card and .duel-card at desktop width, and at (1,1,0) it outranked
     the class-only selector this used to be — so background:none lost and a grey
     slab sat between this pane and the leg tiles, a card inside a card. Every
     other declaration here was winning; only the background was not. */
  body.pbc-on #pbc-console .pbc-dcard > .parlay-card,
  body.pbc-on #pbc-console .pbc-dcard > .duel-card {
    background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0;
  }
  body.pbc-on .pbc-dcard .parlay-card-header { display: none; }

  body.pbc-on .pbc-empty { padding: 54px 20px; text-align: center;
    color: var(--pbc-ink-3); font-size: 14px; line-height: 1.6; }
  body.pbc-on .pbc-empty span { font-size: 12.5px; color: var(--pbc-ink-4); }
  body.pbc-on .pbc-empty.small { padding: 30px 16px; font-size: 13px; }

  /* ── reflow ── */
  @media (max-width: 1420px) {
    body.pbc-on .pbc-tile { flex-basis: calc(33.333% - 9px); }
    body.pbc-on .pbc-body { grid-template-columns: 396px minmax(0, 1fr); }
    /* the narrower column cannot hold five tabs with three-digit counts at
       full padding — trim the tab gutters rather than let the filter row
       become a horizontal scroller */
    body.pbc-on .pbc-tab { padding-left: 7px; padding-right: 7px; }
    body.pbc-on .pbc-dstats { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 12px; }
    body.pbc-on .pbc-dstat:nth-child(3n+1) { border-left: 0; }
  }
  @media (max-width: 1120px) {
    /* Stacked, the two panes cannot both fit a screen, so stop pinning the
       console to the viewport and let the page scroll as it always has. */
    body.pbc-on .pbc-body { grid-template-columns: minmax(0, 1fr); }
    body.pbc-on .pbc-console { max-height: none; }
    body.pbc-on .pbc-rows { max-height: 360px; }
    body.pbc-on .pbc-dcard { max-height: 460px; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE FLIP — the console becomes the desktop view.
   Hides the legacy expanded-card feed and the desktop tab bar it drove. The
   right rail (Tonight's Slate, Shared Exposure) is KEPT, per the founder: the
   console takes column one of .dashboard-main-content's existing grid and the
   rail keeps column two.
   Both rules are inside @media (min-width: 1001px) AND on body.pbc-on, so they
   cannot fire on a phone even if the class leaked.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1001px) {
  body.pbc-on .dashboard-parlays-section,
  body.pbc-on #desktop-tab-bar { display: none; }

  /* The console spans the grid's first column; it also carries its own inner
     list|detail split, so it needs the room the feed used plus the feed's own. */
  body.pbc-on .dashboard-main-content {
    grid-template-columns: minmax(0, 1fr) 368px;
    display: grid;
    column-gap: 20px;
    align-items: start;
  }
  body.pbc-on .pbc-console { margin-bottom: 0; }

  /* The rail's five stat tiles are now duplicated by the console's own strip. */
  body.pbc-on .dashboard-right-column #desktop-sidebar [data-card="overview"] { display: none; }

  @media (max-width: 1240px) {
    body.pbc-on .dashboard-main-content { grid-template-columns: minmax(0, 1fr); }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DETAIL PANE — the card at desktop amplitude
   ═══════════════════════════════════════════════════════════════════════════
   The reused card is drawn for a 980px canvas downscaled 0.398x. At 1:1 its
   portraits are tiny and its per-game matchup line eats a full row of height
   for one short string. Here the portrait carries the row and the matchup moves
   INSIDE the leg (relocated by decorateDetail, which also drops the now-empty
   group headers). Scoped to #pbc-console: the phone's card never sees any of it.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1001px) {

  /* no focus ring on the search — the caret is the affordance */
  body.pbc-on .pbc-search:focus-within { border-color: var(--pbc-pill-rim); }
  body.pbc-on .pbc-search input:focus,
  body.pbc-on .pbc-search input:focus-visible { outline: none; box-shadow: none; }

  /* ── header + stat row, scaled up ── */
  body.pbc-on .pbc-dhead h3 { font-size: 23px; }
  body.pbc-on .pbc-dodds { font-size: 25px; }
  body.pbc-on .pbc-dstats { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 16px; padding-bottom: 16px; }
  body.pbc-on .pbc-dstat .k { font-size: 11px; letter-spacing: .1em; }
  body.pbc-on .pbc-dstat .v { font-size: 22px; margin-top: 5px; }

  /* ── each leg is its own tile ── */
  body.pbc-on .pbc-dcard .parlay-card-legs { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 0; }
  body.pbc-on .pbc-dcard .parlay-leg {
    background: var(--pbc-nest); border: 1px solid var(--pbc-nest-rim);
    border-radius: 14px; padding: 14px 16px; gap: 16px; align-items: center;
  }
  body.pbc-on .pbc-dcard .leg-avatar-wrap { width: 58px; height: 58px; min-height: 58px; align-self: center; }
  body.pbc-on .pbc-dcard .leg-avatar-clip { border-radius: 14px; background: #141A22; }
  body.pbc-on .pbc-dcard .leg-avatar { transform: none; }
  body.pbc-on .pbc-dcard .leg-content { gap: 3px; }
  body.pbc-on .pbc-dcard .leg-player { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
  body.pbc-on .pbc-dcard .leg-odds { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
  body.pbc-on .pbc-dcard .leg-details { font-size: 12.5px; }

  /* the relocated matchup, third line of the leg */
  body.pbc-on .pbc-leg-mu {
    display: block; margin-top: 4px;
    font-size: 12px; font-weight: 500; color: var(--pbc-ink-3);
  }

  /* The bar's base margin-left:-44px pulls it under the portrait, which was
     right when the portrait was a 36px circle outside the content column. In a
     leg tile with a 58px portrait it overlaps it. Zero, and the track starts
     where the name does. */
  body.pbc-on .pbc-dcard .leg-progress-bar {
    margin-left: 0;
    margin-top: 8px;
    --side-width: 72px;
  }

  /* ── money footer ── */
  body.pbc-on .pbc-dcard .parlay-card-footer {
    background: var(--pbc-nest); border: 1px solid var(--pbc-nest-rim);
    border-radius: 14px; padding: 15px 18px; margin-top: 14px;
    align-items: center; gap: 12px;
  }
  body.pbc-on .pbc-dcard .parlay-footer-value { font-size: 21px; font-weight: 800; }
  body.pbc-on .pbc-dcard .parlay-footer-label { font-size: 11px; letter-spacing: .1em; }
  body.pbc-on .pbc-dcard .parlay-footer-item { flex: 1 1 0; align-items: center; text-align: center; }
  body.pbc-on .pbc-dcard .parlay-footer-item:first-child { align-items: flex-start; text-align: left; }
  body.pbc-on .pbc-dcard .parlay-footer-item:last-child { align-items: flex-end; text-align: right; }
  body.pbc-on .pbc-dcard .parlay-footer-actions { gap: 10px; }
  body.pbc-on .pbc-dcard .parlay-reuse-btn,
  body.pbc-on .pbc-dcard .parlay-unstake-btn {
    height: 44px; padding: 0 20px; font-size: 14px; border-radius: 12px; gap: 10px;
  }
  body.pbc-on .pbc-dcard .parlay-reuse-btn i,
  body.pbc-on .pbc-dcard .parlay-unstake-btn i { font-size: 13px; }
  /* Cash Out moves chips — the one action here that is not reversible, so it
     carries the accent outline rather than sitting identical to Reuse. */
  body.pbc-on .pbc-dcard .parlay-unstake-btn {
    border-color: rgba(0,211,189,.5); color: var(--pbc-accent);
  }
  body.pbc-on .pbc-dcard .parlay-placed-at { font-size: 12px; }

  /* ── duel: the same tightening, plus room between the two sides ── */
  body.pbc-on .pbc-dcard .duel-mu-header { margin: 0 0 12px; padding: 16px 18px; }
  /* duel.css:2090 strips the side card's fill, border, padding and shadow but
     leaves the base .parlay-card's border-radius:20px and overflow:hidden
     (dashboard-parlays.css:224-226). The side card's bottom edge lands exactly
     on the last tile's, so that 20px arc shaves the 12px corners off the bottom
     row; the top row escapes only because the card starts 14px above it. A box
     with no fill has nothing to round and nothing to clip. Collapse is done with
     display:none, not a max-height animation, so the hidden overflow is not
     load-bearing here. */
  body.pbc-on .pbc-dcard .duel-parlay-side > .parlay-card {
    border-radius: 0;
    overflow: visible;
  }
  body.pbc-on .pbc-dcard .duel-parlay-side .parlay-leg {
    padding: 11px 12px; gap: 12px; border-radius: 12px;
  }
  body.pbc-on .pbc-dcard .duel-parlay-side .leg-avatar-wrap { width: 40px; height: 40px; min-height: 40px; }
  body.pbc-on .pbc-dcard .duel-parlay-side .leg-player { font-size: 14px; }
  body.pbc-on .pbc-dcard .duel-parlay-side .leg-details { font-size: 11.5px; }
  body.pbc-on .pbc-dcard .duel-parlay-side .parlay-card-legs { gap: 8px; }
  body.pbc-on .pbc-dcard .duel-parlay-side .pbc-leg-mu { font-size: 11px; margin-top: 3px; }
  /* duel.css:2169 right-aligns .leg-details on the last side so that half of the
     duel mirrors. The matchup line is injected after that rule's author and is a
     sibling of .leg-details, so it has to be told to follow. */
  body.pbc-on .pbc-dcard .duel-parlay-side:last-child .pbc-leg-mu { text-align: right; }
  /* duel.css:2010 sets gap:2px, which reads as two columns touching. column-gap
     alone, never the shorthand: the vertical rhythm between leg rows comes from
     .parlay-card-legs above and must not move. */
  body.pbc-on .pbc-dcard .duel-parlays-row { column-gap: 18px; }
  /* 1241-1420px is the one band where the detail pane bottoms out — the rail is
     still 368px wide while the list column has already dropped to 396px — so an
     18px gutter would come straight out of a ~95px text column and start
     clipping player names. Step it down there. */
  @media (max-width: 1420px) {
    body.pbc-on .pbc-dcard .duel-parlays-row { column-gap: 12px; }
  }
  /* The compact inline scoreboard is emitted inside the leg for a live duel
     game; keep it in the content column instead of running back under the
     portrait, and let it wrap rather than push the row wider. */
  body.pbc-on .pbc-dcard .duel-parlay-side .game-scoreboard-inline {
    margin-left: 0;
    margin-top: 4px;
    flex-wrap: wrap;
    row-gap: 2px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UPCOMING GAMES — the rail's sport filter
   ═══════════════════════════════════════════════════════════════════════════
   THE ONE SECTION IN THIS FILE THAT IS NOT GATED ON body.pbc-on, and the reason
   is not cosmetic: the right rail renders whether or not the parlays console
   does. `localStorage.pbParlaysConsole = '0'` withholds body.pbc-on while
   _renderDesktopSidebar still runs, so a console-gated chip would come out
   unstyled for exactly the reader who turned the console off.

   It still cannot reach a phone. Every .slate-* rule lives in dashboard.css,
   which is protected, and the rail itself is display:none below 1001px — so
   these rules live here, in the last-loaded unprotected dashboard sheet, under
   the same desktop gate rather than in a new stylesheet the page would have to
   fetch.

   The values are LITERAL copies of .pbc-chip rather than the class itself. Its
   colours resolve through --pbc-* tokens declared only on .pbc-console, so
   reusing the class outside that subtree yields a transparent, currentColor
   chip in the UA button font. --theme-accent-rgb is global (core/themes.css)
   and is the same accent the console reads.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1001px) {
  /* Sits at the far end of the card title. .sidebar-card-title is already a
     flex row, so margin-left:auto is all it takes. */
  .pbslate-tz {
    margin-left: auto;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: none;
    color: #5F6A68;
  }
  .pbslate-filter {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 2px 0 10px;
  }
  .pbslate-chip {
    height: 26px;
    padding: 0 11px;
    border-radius: 999px;
    background: #0B0C0C;
    border: 1px solid #2C3232;
    color: #8A9391;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: border-color .14s, color .14s;
  }
  .pbslate-chip:hover { border-color: #3A4242; color: #C2CBC9; }
  .pbslate-chip[aria-pressed="true"] {
    border-color: rgb(var(--theme-accent-rgb, 0, 211, 189));
    color: rgb(var(--theme-accent-rgb, 0, 211, 189));
  }
  .pbslate-chip:focus-visible {
    outline: 2px solid rgb(var(--theme-accent-rgb, 0, 211, 189));
    outline-offset: 2px;
  }
  /* Day divider. Quiet on purpose: it is a signpost between groups of rows, not
     a heading competing with the card title above it. */
  .pbslate-day {
    margin: 10px 0 4px;
    padding: 0 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #5F6A68;
  }
  .pbslate-day:first-child { margin-top: 2px; }

  /* MEASURED: the rail row is 330px and the two name tracks get 78px each, of
     which 50px is text. "Steelers" and "Panthers" need 51 — they were losing by
     a single pixel, which is why NFL read "Steel…" where MLB was fine. NFL club
     names run longer than MLB's.
     The 11px comes from the row's own gutters, NOT from the score column: that
     column is 58px because it also has to hold "17 - 14" on a live row, and
     narrowing it only for upcoming rows would step the scores out of line the
     moment one game kicks off. */
  .slate-game {
    padding-left: 2px;
    padding-right: 2px;
    gap: 7px;
  }
}