/* ============================================================================
   Parlay footer -- stake rail + Parlay Health panel
   ----------------------------------------------------------------------------
   Extracted 2026-08-30 from parlayHealthMLB.js `_injectCss()`, VERBATIM. It was
   injected as a <style> by an MLB-only module, so NFL could never get the look
   even with identical markup. Moving it to a real stylesheet lets both sports
   share it; the popup rules (.pbh-*) stay in that module.

   Load order matters and is preserved: index.html links this AFTER
   workbench.css. Several rules below are equal-specificity duels with
   workbench.css (`#pf-stats-default .x` vs `#your-parlay-column .x`) that are
   only won on source order, and the !important pairs are noted inline in the
   original. Do not move this link above workbench.css.

   Everything is scoped by the #pf-stats-default id, as it was in the module.
   ========================================================================== */

#pf-stats-default{display:flex;align-items:stretch;gap:8px}
#pf-stats-default .pf-wager-rail{display:flex;flex-direction:column;flex:0 0 auto;min-width:104px;background:var(--pb-surface-card,#0A1616);border:1px solid var(--pb-border,rgba(20,110,103,.35));border-radius:10px;padding:6px 11px;box-sizing:border-box;justify-content:center;gap:4px}
#pf-stats-default .pf-wager-cell{display:flex;flex-direction:column;gap:0}
#pf-stats-default .pf-wager-cell--win{border-top:1px solid rgba(255,255,255,.07);padding-top:4px}
#pf-stats-default .pf-payout-label{font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.4);line-height:1.35}
#pf-stats-default .pf-wager-static{display:flex;align-items:baseline;gap:.6em}
#pf-stats-default .pf-payout-amount,#pf-stats-default .pf-wager-amount,#pf-stats-default .pf-wager-unit{font-family:"JetBrains Mono","SF Mono",monospace;font-size:14px;font-weight:700;line-height:1.3;color:#00D3BD;font-variant-numeric:tabular-nums;min-width:0;text-align:left}
.pf-grade-box.pbh-clickable{cursor:pointer;position:relative}
#pf-stats-default .pf-grade-box{flex:1 1 auto;align-self:stretch;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:6px;max-height:none;padding:6px 13px;background:var(--pb-surface-card,#0A1616);border:1px solid var(--pb-border,rgba(20,110,103,.35));border-radius:10px;box-sizing:border-box}
#pf-stats-default .pf-grade-label{display:flex;align-items:center;gap:6px;font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.4);white-space:nowrap;line-height:1.35}
#pf-stats-default .pf-grade-main{display:flex;align-items:center;gap:12px}
#pf-stats-default .pf-grade-readout{display:flex;flex-direction:column;align-items:flex-start;flex:0 0 auto;min-width:38px}
#pf-stats-default .pf-grade-value{font-size:26px;line-height:1}
#pf-stats-default .pf-grade-word{font-size:10px;font-weight:700;line-height:1.3;white-space:nowrap}
#pf-stats-default .pf-grade-meter{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
#pf-stats-default .pf-meter-track{display:block;height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
#pf-stats-default .pf-meter-fill{display:block;height:100%;border-radius:99px;transition:width .28s ease}
#pf-stats-default .pf-meter-axis{display:flex;justify-content:space-between;font-size:8.5px;color:rgba(255,255,255,.32);font-variant-numeric:tabular-nums;line-height:1}
#pf-stats-default .pbh-i{color:rgba(255,255,255,.4);font-size:11px;line-height:1;flex:0 0 auto;transition:color .15s}
#pf-stats-default .pf-grade-box.pbh-clickable:hover .pbh-i{color:rgba(255,255,255,.65)}
#pf-stats-default .pf-grade-box.pbh-clickable:hover .pf-grade-value{filter:brightness(1.15)}
@media (max-width:1000px) {
  /* Scaled 2026-08-30 to sit in the same type ladder as the enlarged leg cards.
     Measured before this: the footer's captions were 14px while a leg's matchup
     caption is 29px, and "3 leg parlay" was 24px against a 35px player name --
     the summary header was smaller than the detail beneath it. The card work
     scaled ~1.18x and the footer had never moved.
     !important is required, not sloppiness: workbench.css's <=1000px block
     declares font-size/min-width with !important on .pf-payout-label,
     .pf-payout-amount, .pf-grade-label, .pf-grade-value and .pf-wager-amount
     (min-width:70px). An !important beats any non-important rule regardless of
     specificity, so plain declarations here are silently discarded. */
  #pf-stats-default{gap:14px}
  #pf-stats-default .pf-wager-rail{min-width:214px;padding:14px 20px;gap:9px}
  #pf-stats-default .pf-wager-cell--win{padding-top:9px}
  #pf-stats-default .pf-payout-label{font-size:20px !important}
  #pf-stats-default .pf-payout-amount,#pf-stats-default .pf-wager-amount,#pf-stats-default .pf-wager-unit{font-size:30px !important;min-width:0 !important}
  #pf-stats-default .pf-grade-box{padding:14px 22px;gap:12px;min-height:0;align-self:stretch}
  #pf-stats-default .pf-grade-label{font-size:20px !important;gap:11px}
  #pf-stats-default .pf-grade-value{font-size:52px !important}
  #pf-stats-default .pf-grade-readout{min-width:78px}
  #pf-stats-default .pf-grade-word{font-size:21px}
  #pf-stats-default .pf-grade-main{gap:24px}
  #pf-stats-default .pf-grade-meter{gap:12px}
  #pf-stats-default .pf-meter-track{height:16px}
  #pf-stats-default .pf-meter-axis{font-size:19px}
  #pf-stats-default .pbh-i{font-size:24px}
}


/* Placeholder health readout. NFL has no model yet, so #parlay-grade-val holds
   "--"; without this it inherits the teal value colour and reads as two stray
   dashes next to an empty meter. Muted until a real score is written. */
#pf-stats-default .pf-grade-value:empty,
#pf-stats-default .pf-grade-value[data-placeholder="1"]{color:rgba(255,255,255,.28)}

/* Footer header + CTA row, same ladder as above. These live in workbench.css's
   mobile block at smaller sizes; scaled here so the summary line is not smaller
   than the leg detail above it. */
@media (max-width:1000px){
  #parlay-footer .pf-leg-count{font-size:31px}
  #parlay-footer .pf-odds{font-size:31px}
}

/* ---------------------------------------------------------------------------
   CTA row + teaser, scaled into the same ladder (2026-08-30).
   These were 19px / 62px tall -- the same height as an OVER pill INSIDE a leg
   card -- despite being the slip's primary actions. For scale, Build Parlay in
   the odds block is 95px tall at 36px.

   workbench.css:1824 caps them at 19px with the note "the largest size where
   Challenge fits the middle slot three-across at 375px". That was measured
   against a device-width viewport; this app has no <meta viewport> and always
   lays out on a 980px canvas, where each of the three slots is ~305px and
   "Challenge" needs ~150px at 28px. Verified non-overflowing at 980.
   !important is needed to beat that rule's own !important.
   --------------------------------------------------------------------------- */
@media (max-width:1000px){
  #parlay-footer .pf-leg-count,
  #parlay-footer .pf-odds{font-size:31px !important}

  #parlay-footer .pf-btn-place,
  #parlay-footer .pf-btn-challenge,
  #parlay-footer .pf-btn-save{
    padding:23px 14px !important;
    font-size:28px !important;
  }
  #parlay-footer .pf-btn-logo{height:34px;border-radius:7px}
  #parlay-footer .pf-cta-row{gap:16px}

  #parlay-footer .pf-challenge-teaser{margin-top:26px;font-size:26px}
}

/* Surface system (2026-08-30): STAKE/TO WIN and PARLAY HEALTH belong to the same
   component family as the player cards, so they take the same lift. */
@media (max-width:1000px){
  #pf-stats-default .pf-wager-rail,
  #pf-stats-default .pf-grade-box{ box-shadow: var(--pb-lift); }
}

/* Secondary CTAs (Link, Save Parlay) join the surface family: dark
   teal-charcoal body, thin teal border, teal text. Challenge is deliberately
   NOT touched -- it stays the bright filled-teal primary. Both were
   rgba(255,255,255,.04), a neutral grey that read as a different system.
   Placed here rather than editing workbench.css:1203/1241 so the whole surface
   change lives in one file and reverts as one. */
#parlay-footer .pf-btn-place,
#parlay-footer .pf-btn-save {
  background: var(--pb-surface-card, #0A1616);
  border-color: var(--pb-border-strong, rgba(20, 110, 103, 0.55));
}
#parlay-footer .pf-btn-place:hover,
#parlay-footer .pf-btn-save:hover {
  background: var(--pb-surface-raised, #0E1A1C);
}
@media (max-width:1000px){
  #parlay-footer .pf-btn-place,
  #parlay-footer .pf-btn-save{ box-shadow: var(--pb-lift); }
}

/* ---- LIQUID GLASS footer (phones only, both sports, 2026-09-03) ----
   The stake rail, the Parlay Health panel and the secondary CTAs move off
   the dark-teal surface onto the same neutral glass the v2 prop cards use:
   white tint, light top edge, soft shadow, teal kept for the accents only
   (money values, the health number's tier colour, and Challenge, which
   stays the one solid-teal primary). Appended LAST so file order wins over
   the earlier mobile block; the core's injected footer CSS sets sizes only. */
@media (max-width:1000px){
  #pf-stats-default .pf-wager-rail,
  #pf-stats-default .pf-grade-box{
    background:
      linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.02) 100%);
    border:1px solid rgba(255,255,255,.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 8px 20px rgba(0,0,0,.55);
    border-radius:22px;
  }
  #pf-stats-default .pf-wager-cell--win{border-top-color:rgba(255,255,255,.09)}
  #pf-stats-default .pf-meter-track{background:rgba(255,255,255,.09)}
  /* Secondary CTAs: glass buttons, white labels; the FanDuel/DK logos stay. */
  #parlay-footer .pf-btn-place,
  #parlay-footer .pf-btn-save{
    background:
      linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.02) 100%);
    border:1px solid rgba(255,255,255,.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 6px 16px rgba(0,0,0,.55);
    color:rgba(255,255,255,.92);
    border-radius:22px;
  }
  #parlay-footer .pf-btn-place:hover,
  #parlay-footer .pf-btn-save:hover{background:linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.035) 100%)}
  #parlay-footer .pf-btn-challenge{border-radius:22px; box-shadow:0 10px 28px rgba(0,0,0,.42), 0 0 0 1px rgba(45,212,191,.35)}
}

/* ---- V1 primary: Challenge (phones only, 2026-09-03) ----
   Same recipe as Build Parlay; the animated diagonal gradient is off on
   phones. The red feedback state is untouched. */
@media (max-width:1000px){
  #parlay-footer .pf-btn-challenge:not(.feedback-shown){
    background: linear-gradient(180deg, #14dcc6 0%, #00c9b3 100%);
    color: #06201c;
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.18), 0 8px 20px rgba(0,0,0,.55);
    text-shadow: none;
    background-size:auto;
    animation:none;
  }
  #parlay-footer .pf-btn-challenge:not(.feedback-shown):hover{ background: linear-gradient(180deg, #24e6d0 0%, #08d3bd 100%); }
}

/* ---- CAPPED, SCROLLABLE SLIP (phones only, 2026-09-03) ----
   The slip stops growing at three full cards plus a peek of the fourth
   (3×212 + 2×20 gaps + ~100 peek ≈ 790 canvas px, ~316px on glass) and
   scrolls inside itself beyond that, so the payout, Health and the CTAs stay
   with the slip instead of sliding a screen away. Fewer legs: nothing
   changes, the container fits its content. `overscroll-behavior: contain`
   stops a flick inside the slip from chaining into the page; overflow-x is
   clipped explicitly because the swipe fly-out translates cards sideways;
   `touch-action: pan-y` on the cards leaves horizontal motion to the swipe
   handler while the browser owns vertical scrolling. Later file than
   prop-cards.css, so these !important rules beat its `overflow: visible`. */
@media (max-width:1000px){
  /* .has-legs is set by workbenchCore while the slip holds legs; the empty
     slip (the Build panel) is never capped. */
  #your-parlay-container.has-legs{
    max-height:790px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    /* room for the cards' side shadow inside the clipped box */
    margin-left:-6px !important; margin-right:-6px !important;
    padding-left:6px !important; padding-right:6px !important;
    scrollbar-width:none;
  }
  #your-parlay-container::-webkit-scrollbar{ display:none; }
  #your-parlay-container .prop-card{ touch-action:pan-y; }
  /* Bottom fade, only while the slip actually scrolls (class set by JS). */
  #your-parlay-container.pc-scroll::after{
    content:''; display:block; position:sticky; bottom:0; left:0; right:0;
    height:64px; margin-top:-64px; flex:0 0 64px; pointer-events:none;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 100%);
  }
}

/* ---- DESKTOP V2 "clear" glass footer (>=1001px, both sports, 2026-09-03) ----
   Stake rail + Parlay Health panel = glass panes (radius 14 to match the
   desktop slip cards), Link / Save Parlay = glass secondaries, Challenge =
   the V1 primary (solid fill, glass edge, gradShift off). Every rule keeps
   the #pf-stats-default id scope; sizes are untouched (workbench.css's
   #your-parlay-column font/padding rules still apply). Appended LAST. */
@media (min-width:1001px){
  #pf-stats-default .pf-wager-rail,
  #pf-stats-default .pf-grade-box{
    background:
      linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.02) 100%);
    border:1px solid rgba(255,255,255,.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 3px 8px rgba(0,0,0,.55);
    border-radius:14px;
  }
  #pf-stats-default .pf-wager-cell--win{border-top-color:rgba(255,255,255,.09)}
  #pf-stats-default .pf-meter-track{background:rgba(255,255,255,.09)}

  #parlay-footer .pf-btn-place,
  #parlay-footer .pf-btn-save{
    background:
      linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.02) 100%);
    border:1px solid rgba(255,255,255,.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 3px 8px rgba(0,0,0,.55);
    color:rgba(255,255,255,.92);
    border-radius:14px;
  }
  #parlay-footer .pf-btn-place:hover,
  #parlay-footer .pf-btn-save:hover{background:linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.035) 100%)}

  #parlay-footer .pf-btn-challenge:not(.feedback-shown){
    background: linear-gradient(180deg, #14dcc6 0%, #00c9b3 100%);
    color: #06201c;
    border: 1px solid rgba(255,255,255,.22);
    border-radius:14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.55);
    text-shadow: none;
    background-size:auto;
    animation:none;
  }
  #parlay-footer .pf-btn-challenge:not(.feedback-shown):hover{ background: linear-gradient(180deg, #24e6d0 0%, #08d3bd 100%); }
}

/* ---- Remove-all sits INLINE on desktop too (founder 2026-09-03) ----
   The header row is [legs | remove-all | odds] on phones; desktop kept the
   old full-width row above via `flex:0 0 100%; order:-1` (workbench.css:988).
   Match mobile: the button becomes an ordinary middle item on the one line.
   This sheet loads after workbench.css, and `#parlay-footer .pf-header #id`
   (1,2,1) beats that rule (0,2,1), so no !important is needed. */
@media (min-width:1001px){
  #parlay-footer .pf-header{ flex-wrap:nowrap; }
  /* The button PRECEDES the leg count in the markup, so order is what puts
     it in the middle: legs -1, button 0, odds 1. `justify-content:
     space-between` on .pf-header then holds the two ends and centres it. */
  #parlay-footer .pf-header #reset-parlay-button{
    flex:0 0 auto;
    order:0;
    margin:0 12px;
    white-space:nowrap;
    /* the base rule is `width:100%` (workbench.css:933) — it made the button
       span the header even with flex:0 0 auto */
    width:auto;
  }
  #parlay-footer .pf-header .pf-leg-count{ order:-1; }
  #parlay-footer .pf-header .pf-odds{ order:1; }
}