/* Voltage · Command-rail · C·4 Storm/heat-lightning theme tokens + motifs.
 *
 * Flattened from the mockup's layered inheritance chain (docs/ux/site-redesign/
 * src/theme-voltage.css -> theme-voltage-c.css -> theme-voltage-c-shared.css ->
 * theme-voltage-c-round4.css) into one file, since this redesign ships exactly
 * one variant rather than the mockup's many side-by-side comparisons.
 *
 * Deliberately NOT tied to `data-theme` (which still drives DaisyUI's own
 * theme resolution / the admin Site Settings picker at pfs_web/theme.py) --
 * these are plain custom properties on :root, loaded only on pages that use
 * the pf- prefixed classes. See pfs-web/pfs_web/static/pf/pf-base.css's header
 * comment for the collision-avoidance policy.
 *
 * Live-tile framing (README §11): fine frame on lineup tiles, the stronger
 * frame on the clock chip / pick clock / live badges (§11.4's "two frames"
 * recommendation), heat-lightning sky, no live-quarter lane (round 4 drops it
 * in favor of framing the tiles themselves).
 */

:root {
  --pf-bg: #06080d; --pf-bg-2: #0d1118; --pf-bg-3: #151b25; --pf-bg-4: #1d2532;
  --pf-line: #1c2431; --pf-line-2: #2a3546;
  --pf-fg: #f2f3f5; --pf-fg-2: #a6adb8; --pf-fg-3: #6a717c;
  --pf-accent: #f5d90a; --pf-accent-fg: #17140a; --pf-accent-2: #38bdf8;
  --pf-live: #38bdf8; --pf-ok: #34d399; --pf-warn: #f59e0b; --pf-danger: #f43f5e;
  --pf-radius: 4px; --pf-radius-sm: 3px; --pf-radius-pill: 3px;
  --pf-font-display: 'Barlow Condensed', sans-serif;
  --pf-font-body: 'Barlow', system-ui, sans-serif;
  --pf-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --pf-nav-bg: #090c12; --pf-nav-fg: #a6adb8; --pf-nav-active-bg: #1b1e24; --pf-nav-active-fg: #7dd3fc;
  --pf-top-bg: #090c12; --pf-top-fg: #f2f3f5;
  /* Frame strengths: fine on tiles, the stronger "shock" frame on chrome. */
  --pf-shock: url('assets/shock-frame.svg'); --pf-shock-slice: 12; --pf-shock-bw: 8px; --pf-shock-in: -5px;
  --pf-shock-fine: url('assets/shock-frame-fine.svg'); --pf-shock-fine-slice: 10; --pf-shock-fine-bw: 7px; --pf-shock-fine-in: -4px;
}

/* ---------- Top bar / rail / bottom bar: translucent over the sky ---------- */
.pf-topbar { border-bottom: 1px solid rgba(56, 189, 248, .32); background: linear-gradient(180deg, rgba(14, 19, 27, .86), rgba(10, 13, 20, .86)); box-shadow: 0 1px 0 rgba(56, 189, 248, .06), 0 3px 14px rgba(56, 189, 248, .10); }
.pf-brand .pf-mark { box-shadow: 0 0 18px rgba(245, 217, 10, .45); }
.pf-rail { background: linear-gradient(180deg, rgba(9, 12, 18, .9), rgba(9, 12, 18, .98)); }
.pf-rail a.pf-active { background: linear-gradient(90deg, rgba(56, 189, 248, .14), rgba(56, 189, 248, .02)); box-shadow: inset 3px 0 0 #38bdf8; }
.pf-rail a .pf-cnt { background: #38bdf8; color: #06202b; }
.pf-bottombar { background: linear-gradient(180deg, rgba(14, 19, 27, .92), rgba(10, 13, 20, .92)); border-top: 1px solid rgba(56, 189, 248, .32); box-shadow: 0 -3px 14px rgba(56, 189, 248, .08); }
.pf-bottombar > a.pf-active .pf-ic, .pf-bottombar > button.pf-active .pf-ic { filter: drop-shadow(0 0 6px rgba(56, 189, 248, .9)); }
.pf-clockchip { background: #0d1a25; border-color: rgba(56, 189, 248, .55); color: #e0f6ff; }
.pf-clockchip .pf-dot { background: #e0f6ff; box-shadow: 0 0 0 3px rgba(56, 189, 248, .45), 0 0 10px #38bdf8; }

/* ---------- Heat-lightning sky: cloud band across the top, faded by the first screen ---------- */
/* No `overflow: hidden` here (the mockup's artboard-only .app rule had it,
   to clip the sky art at the comparison frame's edge) -- background images
   never bleed past their own element's box regardless, and clipping this
   ancestor would also clip any fixed-positioned descendant (DaisyUI toasts,
   modals) whose box happens to fall within it. */
.pf-app { position: relative; isolation: isolate; }
.pf-app::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 8, 13, 0) 24%, rgba(6, 8, 13, .88) 58%),
    url('assets/storm-sky-heat.svg') center top / 100% auto no-repeat;
}
@media (max-width: 1023px) {
  /* 820px is the sky's minimum width on phones/tablets; `max(..., 100%)` lets it fill the viewport
   * between 821 and 1023px instead of leaving plain-background bars either side of a fixed 820px. */
  .pf-app::before { background-size: auto, max(820px, 100%) auto; background-position: 0 0, center -10px; }
}
/* Lifts ordinary content above the ::before sky layer (z-index: -1) --
   excludes .pf-topbar/.pf-bottombar, which set their own higher z-index
   (40) to stay above <main> content; matching them here would reset that
   back to 0 at equal specificity (this rule loads after pf-base.css's). */
.pf-app > *:not(.pf-topbar):not(.pf-bottombar) { position: relative; z-index: 0; }
.pf-card { background: rgba(13, 17, 24, .96); }

/* ---------- Cards / buttons keep the yellow "power" accent ---------- */
.pf-card-h h2 { box-shadow: inset 3px 0 0 #38bdf8; }
.pf-h1::before { border-radius: 0; box-shadow: 0 0 14px rgba(56, 189, 248, .8); background: #38bdf8; }
.pf-weekstep .pf-wk b, .pf-weekpick a.pf-selected { color: #7dd3fc; }
/* League's current week in the picker: electrified like the live clock chip (shock frame, inset
 * so the list's overflow clip doesn't cut it) plus a glow on the label. */
.pf-weekpick a.pf-current { position: relative; color: #e0f6ff; text-shadow: 0 0 10px rgba(56, 189, 248, .9); background: linear-gradient(90deg, rgba(56, 189, 248, .14), transparent 70%); }
.pf-weekpick a.pf-current small { color: #7dd3fc; }
.pf-weekpick a.pf-current::after {
  content: ''; position: absolute; inset: 2px; pointer-events: none;
  border: 6px solid transparent; border-image: var(--pf-shock-fine) var(--pf-shock-fine-slice) round;
}

/* The viewer's own matchup card (Matchups list + detail panel): the same shock frame as the
 * lineup tiles, run right out to the card's edge. Unlike the week picker's entry (inset 2px to
 * survive its overflow clip) this lets the card overflow and uses the frame's own negative inset,
 * so the jagged edges spill a few px past the border box -- that spill is intended. */
.pf-card.pf-elec { position: relative; overflow: visible; border-color: rgba(56, 189, 248, .55); box-shadow: 0 0 24px rgba(56, 189, 248, .22); }
.pf-card.pf-elec::after {
  content: ''; position: absolute; inset: var(--pf-shock-fine-in); z-index: 3; pointer-events: none;
  border: var(--pf-shock-fine-bw) solid transparent; border-image: var(--pf-shock-fine) var(--pf-shock-fine-slice) round;
}

/* ---------- Live = electrified. No lane (round 4) -- frame the tiles/chrome themselves. ----------
 * `.pf-timeline`-scoped for the same reason as pf-base.css's timeline block:
 * this stylesheet loads globally, and today's unmigrated lineup page must
 * not pick up frame/shock rules meant for the Slice-4 rebuild. */
.pf-timeline .qhead div.live { background: none; padding-bottom: 4px; }
.pf-timeline .cell.live { background: none; }

.pf-clockchip, .pf-badge-live, .pf-statuschip.pf-live { position: relative; }
.pf-clockchip::after, .pf-badge-live::after, .pf-statuschip.pf-live::after {
  content: ''; position: absolute; inset: var(--pf-shock-in); z-index: 3; pointer-events: none;
  border: var(--pf-shock-bw) solid transparent; border-image: var(--pf-shock) var(--pf-shock-slice) round;
}
.pf-badge-live::after { inset: calc(var(--pf-shock-in) + 1px); border-width: calc(var(--pf-shock-bw) - 2px); }

.pf-timeline .tspan.live { position: relative; }
.pf-timeline .tspan.live::after {
  content: ''; position: absolute; inset: var(--pf-shock-fine-in); z-index: 3; pointer-events: none;
  border: var(--pf-shock-fine-bw) solid transparent; border-image: var(--pf-shock-fine) var(--pf-shock-fine-slice) round;
}
@media (max-width: 1023px) {
  .pf-timeline .tspan.live::after { inset: calc(var(--pf-shock-fine-in) + 1px); border-width: calc(var(--pf-shock-fine-bw) - 1px); }
}

/* Draft on-the-clock bar / pick clock (not built this pass, styled for reuse) */
.pf-onclock { display: flex; align-items: center; gap: 16px; padding: 10px 14px; border-radius: var(--pf-radius); border-color: rgba(56, 189, 248, .4); background: linear-gradient(90deg, rgba(56, 189, 248, .10), transparent 45%), var(--pf-bg-2); margin-bottom: 14px; border: 1px solid rgba(56, 189, 248, .4); }
.pf-playclock { font-family: var(--pf-font-mono); font-size: 34px; font-weight: 700; line-height: 1; color: #e0f6ff; text-shadow: 0 0 22px rgba(56, 189, 248, .9); letter-spacing: -.02em; padding: 4px 12px; border-radius: 8px; background: var(--pf-bg); border: 1px solid rgba(56, 189, 248, .5); box-shadow: 0 0 24px rgba(56, 189, 248, .25); position: relative; }
.pf-playclock::after {
  content: ''; position: absolute; inset: calc(var(--pf-shock-in) - 4px); z-index: 3; pointer-events: none;
  border: calc(var(--pf-shock-bw) + 6px) solid transparent; border-image: var(--pf-shock) var(--pf-shock-slice) round;
}

/* ---------- Error pages: the status code is electrified like the pick clock ---------- */
.pf-err-code { position: relative; color: #e0f6ff; text-shadow: 0 0 22px rgba(56, 189, 248, .9); border: 1px solid rgba(56, 189, 248, .5); box-shadow: 0 0 24px rgba(56, 189, 248, .25); }
.pf-err-code::after {
  content: ''; position: absolute; inset: calc(var(--pf-shock-in) - 4px); z-index: 3; pointer-events: none;
  border: calc(var(--pf-shock-bw) + 6px) solid transparent; border-image: var(--pf-shock) var(--pf-shock-slice) round;
}

/* ---------- Player-availability chip (Q / D / O / IR / S): bold mono so a lone Q reads as Q, not O ---------- */
.status-chip { font-family: var(--pf-font-mono); font-weight: 700; letter-spacing: 0; }