/* BOUT SCOUT — /contender-series showpiece (.dw-* only; loaded on that page
   alone). Design brief: 30% high-end-realty airiness (huge light type,
   generous vertical padding, one idea per band), 50% Bout Scout command
   center (dark base, --accent green, mono microlabels, panels), 20%
   futuristic analytics (grid/scanlines, glow, reveal-on-scroll). All motion
   sits behind prefers-reduced-motion: no-preference. */

html { scroll-behavior: smooth; }

/* full-bleed bands inside the 1100px <main> */
.dw-page { margin-top: -22px; }
.dw-band { width: 100vw; margin-left: calc(50% - 50vw); padding: 52px 20px; }
.dw-wrap { max-width: 1060px; margin: 0 auto; }
.dw-wrap-narrow { max-width: 760px; margin: 0 auto; }

/* conversational centered band intros — the realty touch */
.dw-intro { text-align: center; max-width: 780px; margin: 0 auto 54px; }
.dw-intro .microlabel { color: var(--accent); }
.dw-intro h2 {
  margin-top: 14px; font-weight: 300; letter-spacing: -.01em;
  font-size: clamp(28px, 4.6vw, 44px); line-height: 1.12; color: var(--text);
}
.dw-intro h2 b { font-weight: 750; }
.dw-intro h2 em { font-style: italic; font-family: Georgia, "Times New Roman", serif; color: var(--accent); }
.dw-intro p { color: var(--dim); margin-top: 14px; font-size: 16px; line-height: 1.65; }

/* big CTA — .tapology-btn's louder sibling */
.dw-cta {
  display: inline-block; padding: 16px 34px; min-height: 44px;
  border: 1px solid var(--accent); border-radius: 8px; color: var(--accent);
  font: 700 13px var(--mono); text-transform: uppercase; letter-spacing: .14em;
  background: #00e5a00d; box-shadow: 0 0 24px #00e5a022, inset 0 0 14px #00e5a00e;
}
.dw-cta:hover { background: var(--accent-dim); box-shadow: 0 0 34px #00e5a03a; }
.dw-cta.ghost { border-color: var(--line); color: var(--dim); box-shadow: none; background: transparent; }
.dw-cta.ghost:hover { color: var(--text); border-color: var(--dim); }

/* ---------------- HERO ---------------- */
/* Tightened 2026-08-06 (owner rule: no page opens on a full screen of
   headline). The cage art and photo wall survive — they just share the
   screen with the week's card instead of owning it. */
.dw-hero {
  position: relative; overflow: hidden; min-height: min(44vh, 420px);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 46px 20px 42px;
  background: radial-gradient(1100px 520px at 50% -8%, #12303177, transparent 70%),
              radial-gradient(900px 480px at 82% 108%, #0e243855, transparent 70%),
              linear-gradient(180deg, #0a0e14 0%, #0b1119 55%, #0a0e14 100%);
}
.dw-hero-layer { position: absolute; inset: -6% -2%; pointer-events: none; will-change: transform; }
.dw-hero-art svg { width: 100%; height: 100%; }
.dw-hero-grid {
  background: linear-gradient(#12202e55 1px, transparent 1px),
              linear-gradient(90deg, #12202e55 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(75% 65% at 50% 45%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(75% 65% at 50% 45%, #000 30%, transparent 100%);
}
.dw-hero-scan {
  background: repeating-linear-gradient(180deg, transparent 0 3px, #00e5a006 3px 4px);
  mix-blend-mode: screen;
}
.dw-hero-photos { position: absolute; inset: 0; pointer-events: none; }
.dw-hero-photos img {
  position: absolute; width: 30%; max-width: 340px; aspect-ratio: 3/4;
  object-fit: cover; border-radius: 10px; opacity: .16;
  filter: grayscale(1) contrast(1.15) brightness(.9);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.dw-hero-photos img:nth-child(1) { left: 3%; bottom: -4%; transform: rotate(-4deg); }
.dw-hero-photos img:nth-child(2) { right: 3%; bottom: -6%; transform: rotate(3deg); }
.dw-hero-photos img:nth-child(3) { right: 26%; bottom: -14%; width: 22%; opacity: .10; transform: rotate(-2deg); }
.dw-hero-shade {
  background: linear-gradient(180deg, #0a0e1488 0%, #0a0e1420 30%,
              #0a0e1444 68%, var(--bg) 98%);
}
.dw-hero-inner { position: relative; z-index: 3; max-width: 900px; }
.dw-hero .microlabel { color: var(--accent); font-size: 12px; letter-spacing: .34em; }
.dw-hero h1 {
  margin: 22px 0 10px; font-weight: 250; letter-spacing: -.02em;
  font-size: clamp(52px, 11vw, 118px); line-height: .98; color: var(--text);
}
.dw-hero h1 em {
  font-style: italic; font-family: Georgia, "Times New Roman", serif;
  font-weight: 400; color: var(--accent); text-shadow: 0 0 44px #00e5a055;
}
.dw-hero-sub {
  color: var(--dim); font-size: clamp(15px, 2vw, 19px); line-height: 1.6;
  max-width: 640px; margin: 18px auto 34px;
}
.dw-hero-sub b { color: var(--text); font-weight: 650; }
.dw-hero-sub .num { color: var(--accent); }
.dw-scrolldown {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  color: var(--dim); font: 600 10px var(--mono); letter-spacing: .3em;
  text-transform: uppercase; z-index: 3;
}
.dw-scrolldown::after {
  content: ""; display: block; width: 1px; height: 34px; margin: 8px auto 0;
  background: linear-gradient(var(--accent), transparent);
}

/* ---------------- THIS WEEK ---------------- */
.dw-band-week { background: var(--bg); padding-top: 110px; }
.dw-datechip {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px;
  border: 1px solid var(--line); border-radius: 999px; margin-top: 18px;
  color: var(--dim); font: 600 12px var(--mono); letter-spacing: .12em;
  text-transform: uppercase;
}
.dw-datechip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
                    box-shadow: 0 0 10px var(--accent); }
.dw-bouts { display: grid; gap: 14px; max-width: 860px; margin: 0 auto; }
.dw-bout {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px 14px;
  align-items: center; padding: 22px 24px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.dw-bout .wc { grid-column: 1 / -1; text-align: center; }
.dw-bout .fighter { font-size: clamp(16px, 2.6vw, 21px); font-weight: 650; line-height: 1.2; }
.dw-bout .fighter.a { text-align: right; }
.dw-bout .fighter.b { text-align: left; }
.dw-bout .fighter a:hover { color: var(--accent); }
.dw-bout .fighter .picked { color: var(--accent); }
.dw-bout .vs { color: var(--dim); font: 800 12px var(--mono); letter-spacing: .1em; }
.dw-bout .result-line { grid-column: 1 / -1; text-align: center; color: var(--dim);
                        font: 12.5px var(--mono); margin-top: 4px; }
.dw-bout .result-line b { color: var(--accent); }
.dw-pickrow { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto;
              gap: 12px; align-items: center; margin-top: 10px; }
.dw-pickrow .who { font: 700 11px var(--mono); letter-spacing: .1em;
                   text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.dw-meter { position: relative; height: 8px; border-radius: 4px; background: var(--panel2);
            overflow: hidden; }
.dw-meter i {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, #00e5a044, var(--accent));
  box-shadow: 0 0 12px #00e5a066;
}
.dw-meter.lean i { background: linear-gradient(90deg, #4aa8ff44, var(--blue)); box-shadow: 0 0 12px #4aa8ff55; }
.dw-meter.watch i { background: linear-gradient(90deg, #ffb02e44, var(--amber)); box-shadow: 0 0 12px #ffb02e55; }
.dw-pickrow .pct { font: 700 15px var(--mono); color: var(--accent); min-width: 46px; text-align: right; }

/* ---- finish projection (fightiq/dwcs_finish.py) --------------------------
   A SECOND, independent question from the winner pick: will this end early?
   Deliberately styled in ember/red so it never reads as a confidence tier —
   on this card most winner picks are PASS while every bout still carries a
   finish projection, and the two must not look like the same claim. */
.dw-finishrow { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto;
                gap: 12px; align-items: center; margin-top: 8px; }
.dw-finishrow .who { font: 700 11px var(--mono); letter-spacing: .1em;
                     text-transform: uppercase; color: #ff7a45; white-space: nowrap; }
.dw-finishrow .r1 { font: 600 11.5px var(--mono); color: var(--dim);
                    min-width: 76px; text-align: right; white-space: nowrap; }
.dw-meter.fin i { background: linear-gradient(90deg, #ff7a4533, #ff7a45);
                  box-shadow: 0 0 12px #ff7a4555; }
.dw-finchip { margin-left: 8px; padding: 2px 8px; border-radius: 999px;
              font: 700 10.5px var(--mono); letter-spacing: .08em;
              color: #ff7a45; border: 1px solid #ff7a4566; }
.dw-finchip.high { color: #ff5a2e; border-color: #ff5a2e88; background: #ff5a2e14; }
.dw-finchip.low  { color: var(--dim); border-color: var(--line); }
.dw-finishrow.low .who { color: var(--dim); }
.dw-finishrow.low .dw-meter.fin i { background: linear-gradient(90deg, #6b727a33, #6b727a);
                                    box-shadow: none; }

/* round strip — where the fight ends. Same four buckets the traditional
   simulator's round_breakdown produces (R1/R2/R3 + decision), so a Contender
   Series bout and an ordinary card bout read identically. Bar height is the
   probability, so the front-loading is visible at a glance. */
.dw-roundstrip { grid-column: 1 / -1; display: flex; align-items: flex-end;
                 gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.dw-roundstrip .rd {
  flex: 1 1 0; min-width: 44px; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; gap: 4px;
  min-height: 74px; border-bottom: 2px solid #ff7a4566;
}
.dw-roundstrip .rd::before {
  content: ""; width: 100%; border-radius: 3px 3px 0 0;
  /* --p is a plain 0-100 number; 0.62px per point tops a 65%+ bar out at
     ~40px, which keeps the tallest heavyweight R1 bar inside the row */
  height: calc(min(var(--p), 65) * 0.62px);
  min-height: 3px;
  background: linear-gradient(180deg, #ff7a45, #ff7a4544);
}
.dw-roundstrip .rd.dec { border-bottom-color: var(--line); }
.dw-roundstrip .rd.dec::before { background: linear-gradient(180deg, #6b727a, #6b727a33); }
.dw-roundstrip .lbl { font: 700 9.5px var(--mono); letter-spacing: .1em;
                      color: var(--dim); }
.dw-roundstrip .val { font: 700 12px var(--mono); color: #ff7a45; }
.dw-roundstrip .rd.dec .val { color: var(--dim); }
.dw-roundstrip .cmp { flex: 1 0 100%; font: 500 11.5px var(--mono);
                      color: var(--dim); text-align: right; margin-top: 2px; }
.dw-roundstrip .cmp b { color: var(--fg); }

/* card-level headline: "expect N of M to end early" */
.dw-finishcall {
  margin-top: 22px; border: 1px solid #ff7a4533; border-left: 3px solid #ff7a45;
  border-radius: 10px; padding: 16px 20px; background: #ff7a450a; text-align: left;
}
.dw-finishcall .dw-fc-head { display: flex; flex-direction: column; gap: 6px; }
.dw-finishcall .microlabel { color: #ff7a45; }
.dw-finishcall b { color: var(--fg); font-size: 17px; line-height: 1.45; }
.dw-finishcall p { color: var(--dim); font-size: 13.5px; line-height: 1.65;
                   margin-top: 10px; }
.dw-finishcall p b { color: #ff7a45; font-size: inherit; }

/* the analysis drawer's finish block */
.dw-an-finish { border: 1px solid #ff7a4526; border-radius: 10px;
                padding: 14px 16px; background: #ff7a4508; margin-top: 4px; }
.dw-an-finish .nums { display: flex; flex-wrap: wrap; gap: 22px; }
.dw-an-finish .cell { display: flex; flex-direction: column; gap: 2px; }
.dw-an-finish .cell b { font: 700 20px var(--mono); color: #ff7a45; }
.dw-an-finish .cell span { font: 600 10.5px var(--mono); letter-spacing: .08em;
                           text-transform: uppercase; color: var(--dim); }
.dw-an-finish .rounds { margin-top: 14px; border-top: 1px solid #ff7a4526; }
.dw-an-finish .rrow { display: grid; grid-template-columns: 1fr auto auto;
                      gap: 14px; padding: 7px 0;
                      border-bottom: 1px solid var(--line); align-items: baseline; }
.dw-an-finish .rrow.head span { font: 600 9.5px var(--mono); letter-spacing: .08em;
                                text-transform: uppercase; color: var(--dim); }
.dw-an-finish .rrow.head { border-bottom-color: #ff7a4526; }
.dw-an-finish .rrow .lbl { font: 700 12px var(--mono); color: var(--fg); }
.dw-an-finish .rrow .a { font: 700 13px var(--mono); color: #ff7a45;
                         min-width: 46px; text-align: right; }
.dw-an-finish .rrow .b { font: 600 13px var(--mono); color: var(--dim);
                         min-width: 46px; text-align: right; }
.dw-an-finish .rrow.dec .lbl, .dw-an-finish .rrow.dec .a { color: var(--dim); }
.dw-an-finish .rrow:last-child { border-bottom: none; }
.dw-an-finish .lift { color: var(--dim); font-size: 12.5px; line-height: 1.6;
                      margin-top: 10px; padding: 10px 12px; border-radius: 8px;
                      background: #ff7a450c; border-left: 2px solid #ff7a4566; }
.dw-an-finish .basis { color: var(--dim); font-size: 13px; line-height: 1.6;
                       margin-top: 12px; }
.dw-an-finish .thin { color: var(--dim); font-size: 12.5px; line-height: 1.55;
                      margin-top: 8px; opacity: .85; font-style: italic; }
.dw-nopicks {
  max-width: 640px; margin: 26px auto 0; text-align: center; color: var(--dim);
  font-size: 13.5px; line-height: 1.6; border: 1px dashed var(--line);
  border-radius: 10px; padding: 16px 20px;
}
.dw-contract-tag { display: inline-block; margin-left: 8px; padding: 2px 7px;
  border: 1px solid var(--amber); color: var(--amber); border-radius: 4px;
  font: 700 9.5px var(--mono); letter-spacing: .1em; vertical-align: 2px; }

/* ---------------- BEST BETS ---------------- */
.dw-band-bets { background: linear-gradient(180deg, #0c1119, #0e141f 50%, #0c1119); }
.dw-oddsnote {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
  border: 1px solid var(--amber); color: var(--amber); border-radius: 999px;
  font: 700 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase;
  background: #ffb02e12; margin-top: 16px;
}
.dw-bets { display: grid; gap: 12px; max-width: 760px; margin: 0 auto; counter-reset: bet; }
.dw-bet {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center;
  padding: 18px 22px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; counter-increment: bet;
}
.dw-bet::before {
  content: counter(bet, decimal-leading-zero);
  font: 800 22px var(--mono); color: var(--accent); opacity: .85;
}
.dw-bet .pickname { font-size: 17px; font-weight: 700; }
.dw-bet .ctx { color: var(--dim); font: 12px var(--mono); margin-top: 3px; }
.dw-bet .pct { font: 800 24px var(--mono); color: var(--accent); }
.dw-bet .dw-meter { margin-top: 8px; }
.dw-bets-empty {
  max-width: 640px; margin: 0 auto; text-align: center; color: var(--dim);
  border: 1px dashed var(--line); border-radius: 12px; padding: 34px 26px;
  font-size: 14.5px; line-height: 1.7;
}
.dw-bets-empty b { color: var(--text); }

/* ---------------- RESEARCH ---------------- */
.dw-band-research { background: var(--bg); }
.dw-counters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
               max-width: 900px; margin: 0 auto 46px; }
@media (min-width: 760px) { .dw-counters { grid-template-columns: repeat(4, 1fr); } }
.dw-counter {
  text-align: center; padding: 30px 14px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px;
}
.dw-counter b {
  display: block; font: 800 clamp(34px, 5vw, 52px)/1 var(--mono);
  color: var(--accent); text-shadow: 0 0 26px #00e5a033;
  font-variant-numeric: tabular-nums;
}
.dw-counter span {
  display: block; margin-top: 10px; color: var(--dim);
  font: 600 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase;
}
.dw-rbars { max-width: 680px; margin: 0 auto; display: grid; gap: 20px; }
.dw-rbar .lbl { display: flex; justify-content: space-between; align-items: baseline;
                margin-bottom: 8px; }
.dw-rbar .lbl span { color: var(--dim); font-size: 14px; }
.dw-rbar .lbl b { font: 800 18px var(--mono); color: var(--accent); }
.dw-rbar .track { height: 10px; border-radius: 5px; background: var(--panel2);
                  overflow: hidden; }
.dw-rbar .track i {
  display: block; height: 100%; width: 0; border-radius: 5px;
  background: linear-gradient(90deg, #00e5a033, var(--accent));
  box-shadow: 0 0 14px #00e5a055;
}
.dw-rsrc { text-align: center; color: var(--dim); font: 11px var(--mono);
           margin-top: 30px; letter-spacing: .06em; }

/* ---------------- FUNNEL ---------------- */
.dw-band-funnel { background: linear-gradient(180deg, #0c1119, #0e141f 50%, #0c1119); }
.dw-tracker { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 18px;
              max-width: 1000px; margin: 0 auto 44px; }
.dw-tkweek {
  flex: 0 0 auto; min-width: 108px; min-height: 44px; text-align: center;
  padding: 14px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel);
}
.dw-tkweek .w { font: 700 10px var(--mono); letter-spacing: .14em; color: var(--dim);
                text-transform: uppercase; }
.dw-tkweek .d { font: 700 14px var(--mono); margin-top: 5px; }
.dw-tkweek .n { color: var(--dim); font: 11px var(--mono); margin-top: 4px; }
.dw-tkweek.done { border-color: #00e5a055; }
.dw-tkweek.done .d { color: var(--accent); }
.dw-tkweek.next { border-color: var(--accent); background: var(--accent-dim);
                  box-shadow: 0 0 18px #00e5a022; }
.dw-tkweek.next .d { color: var(--accent); }
.dw-tkweek.next .w::after { content: " · next"; color: var(--accent); }
.dw-seasons { max-width: 860px; margin: 0 auto; }
.dw-srow {
  display: grid; grid-template-columns: 92px 1fr 120px; gap: 8px 18px;
  align-items: center; padding: 13px 6px; border-bottom: 1px solid #161e2b;
}
.dw-srow:last-child { border-bottom: 0; }
.dw-srow .s { font: 700 13px var(--mono); }
.dw-srow .s span { color: var(--dim); font-weight: 600; font-size: 11px; }
.dw-srow .track { height: 8px; border-radius: 4px; background: var(--panel2);
                  overflow: hidden; }
.dw-srow .track i { display: block; height: 100%; width: 0; border-radius: 4px;
                    background: linear-gradient(90deg, #00e5a033, var(--accent)); }
.dw-srow.current .track i { background: linear-gradient(90deg, #ffb02e33, var(--amber)); }
.dw-srow .v { text-align: right; font: 700 13px var(--mono); white-space: nowrap; }
.dw-srow .v span { color: var(--dim); font-weight: 400; font-size: 11px; }

/* ---------------- ALUMNI ---------------- */
.dw-band-alumni { background: var(--bg); }
.dw-wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
           max-width: 1000px; margin: 0 auto 34px; }
@media (min-width: 700px) { .dw-wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .dw-wall { grid-template-columns: repeat(5, 1fr); } }
.dw-alum {
  position: relative; display: block; aspect-ratio: 3/4; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--line); background: var(--panel);
}
.dw-alum img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  filter: grayscale(.9) contrast(1.08);
  transition: filter .5s, transform .5s;
}
@media (prefers-reduced-motion: no-preference) {
  .dw-alum:hover img { filter: grayscale(0); transform: scale(1.04); }
}
.dw-alum .veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, #0a0e14ee 92%);
}
.dw-alum .who { position: absolute; left: 12px; right: 12px; bottom: 10px; }
.dw-alum .who b { display: block; font-size: 14.5px; line-height: 1.25; }
.dw-alum .who span { color: var(--accent); font: 600 10px var(--mono);
                     letter-spacing: .12em; text-transform: uppercase; }
.dw-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
            max-width: 820px; margin: 0 auto; }
.dw-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--text); font: 600 12.5px var(--mono);
}
.dw-chip span { color: var(--dim); font-size: 10.5px; }
.dw-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

/* ---------------- METHOD + DISCLAIMER ---------------- */
.dw-band-method { background: linear-gradient(180deg, #0c1119, #0a0e14);
                  padding-bottom: 70px; }
.dw-method { display: grid; gap: 14px; max-width: 760px; margin: 0 auto 40px; }
.dw-mcard { background: var(--panel); border: 1px solid var(--line);
            border-radius: 12px; padding: 20px 24px; }
.dw-mcard h3 { font: 700 11px var(--mono); letter-spacing: .16em;
               text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.dw-mcard p { color: var(--dim); font-size: 13.5px; line-height: 1.65; }
.dw-disclaimer {
  max-width: 760px; margin: 0 auto; text-align: center; color: var(--dim);
  font-size: 12.5px; line-height: 1.7; border-top: 1px solid var(--line);
  padding-top: 26px;
}
.dw-disclaimer b { color: var(--amber); font: 700 11px var(--mono);
                   letter-spacing: .14em; text-transform: uppercase; }
.dw-credits { margin-top: 12px; font: 11px var(--mono); color: var(--dim);
              opacity: .8; }

/* ---------------- motion (reveal + counters), gated ---------------- */
@media (prefers-reduced-motion: no-preference) {
  /* .dw-js is stamped by an inline script in the template: without JS the
     page simply renders visible — reveal styling can never hide content */
  .dw-js .dw-reveal { opacity: 0; transform: translateY(26px);
               transition: opacity .7s ease, transform .7s ease; }
  .dw-js .dw-reveal.in { opacity: 1; transform: none; }
  .dw-reveal.d1 { transition-delay: .08s; } .dw-reveal.d2 { transition-delay: .16s; }
  .dw-reveal.d3 { transition-delay: .24s; } .dw-reveal.d4 { transition-delay: .32s; }
  .dw-meter i, .dw-rbar .track i, .dw-srow .track i { transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------------- small screens ---------------- */
@media (max-width: 640px) {
  .dw-band { padding: 34px 16px; }
  .dw-hero { min-height: 0; padding: 32px 16px 30px; }
  .dw-hero-photos img { width: 44%; opacity: .10; }
  .dw-hero-photos img:nth-child(3) { display: none; }
  .dw-bout { grid-template-columns: 1fr; text-align: center; padding: 18px 16px; }
  .dw-bout .fighter.a, .dw-bout .fighter.b { text-align: center; }
  .dw-bout .vs { text-align: center; }
  .dw-pickrow { grid-template-columns: 1fr auto; }
  .dw-pickrow .who { grid-column: 1 / -1; }
  .dw-finishrow { grid-template-columns: 1fr auto; }
  .dw-finishrow .who { grid-column: 1 / -1; }
  .dw-an-finish .nums { gap: 16px; }
  .dw-bet { grid-template-columns: 34px 1fr; }
  .dw-bet .pct { grid-column: 2; justify-self: end; }
  .dw-srow { grid-template-columns: 74px 1fr 96px; gap: 8px; }
}

/* ================================================================
   GROUP D EXTENSION — expandable pick analysis (owner's "every pick
   clickable" ask). Bout/bet cards are now <details class="dw-expand">:
   the card face lives in <summary> (keeps the original grid), the
   lazy-loaded panel is .bs-analysis.dw-analysis — a cleanly wrappable
   unit (future paywall boundary; NO gating now). Extension only:
   nothing above this line changed.
   ================================================================ */

/* the details element keeps the card chrome; the summary takes over the
   grid the old <article> carried */
details.dw-bout, details.dw-bet { display: block; padding: 0; }
details.dw-expand > summary { cursor: pointer; list-style: none; }
details.dw-expand > summary::-webkit-details-marker { display: none; }
details.dw-bout > summary {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px 14px;
  align-items: center; padding: 22px 24px;
}
details.dw-bet > summary {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 16px;
  align-items: center; padding: 18px 22px;
}
details.dw-bet::before { content: none; }        /* number moved to summary */
details.dw-bet > summary::before {
  content: counter(bet, decimal-leading-zero);
  font: 800 22px var(--mono); color: var(--accent); opacity: .85;
}
details.dw-expand:hover, details.dw-expand:focus-within,
details.dw-expand[open] { border-color: var(--accent); }

/* the tap affordance — reads "Tap for the analysis", flips when open */
.dw-openhint {
  grid-column: 1 / -1; text-align: center; margin-top: 10px;
  font: 700 10.5px var(--mono); letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim); opacity: .75;
}
details.dw-expand:hover .dw-openhint,
details.dw-expand:focus-within .dw-openhint { color: var(--accent); opacity: 1; }
.dw-openhint .opened { display: none; }
details[open] > summary .dw-openhint .closed { display: none; }
details[open] > summary .dw-openhint .opened { display: inline; }

/* the analysis panel (.bs-analysis = future paywall boundary) */
.dw-analysis {
  border-top: 1px solid var(--line); padding: 20px 24px 24px;
  text-align: left;
}
.dw-an-kicker {
  font: 700 10.5px var(--mono); letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent); margin-top: 18px;
}
.dw-an-kicker:first-child { margin-top: 0; }
.dw-an-pick { margin-top: 8px; font: 700 15px var(--mono); color: var(--text); }
.dw-an-pick b { color: var(--accent); }
.dw-an-why { margin-top: 8px; color: var(--text); font-size: 14.5px; line-height: 1.7; }
.dw-an-tier {
  margin-top: 12px; padding: 12px 16px; border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 8px;
}
.dw-an-tier.pass { border-left-color: var(--amber); }
.dw-an-tier b {
  display: block; font: 700 10.5px var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber); margin-bottom: 6px;
}
.dw-an-tier p { color: var(--dim); font-size: 13px; line-height: 1.65; }
.dw-an-grid { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 700px) { .dw-an-grid { grid-template-columns: 1fr 1fr; } }
.dw-an-corner {
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 16px;
}
.dw-an-corner .name { font-size: 15px; font-weight: 700; }
.dw-an-corner .rec { margin-top: 4px; font: 700 13px var(--mono); color: var(--accent); }
.dw-an-corner .facts { list-style: none; margin: 8px 0 0; padding: 0; }
.dw-an-corner .facts li {
  color: var(--dim); font-size: 12.5px; line-height: 1.6; padding: 2px 0;
}
.dw-an-corner .facts li.thin { color: var(--amber); }
.dw-an-graded { margin-top: 14px; color: var(--text); font: 700 13px var(--mono); }
.dw-an-loading { color: var(--dim); font: 12.5px var(--mono); }
.dw-an-foot {
  margin-top: 12px; color: var(--dim); font: 11px var(--mono);
  letter-spacing: .06em; opacity: .8;
}

/* motion (hover fades only), gated exactly like the rest of the page */
@media (prefers-reduced-motion: no-preference) {
  details.dw-expand, .dw-openhint {
    transition: border-color .25s, color .25s, opacity .25s;
  }
}

/* small screens: summaries mirror the old card breakpoints */
@media (max-width: 640px) {
  details.dw-bout > summary { grid-template-columns: 1fr; text-align: center;
                              padding: 18px 16px; }
  details.dw-bet > summary { grid-template-columns: 34px 1fr; }
  details.dw-bet > summary .pct { grid-column: 2; justify-self: end; }
  .dw-analysis { padding: 16px 16px 20px; }
}

.dw-tierchip { margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font: 700 10px var(--mono); letter-spacing: .08em; }
.dw-tierchip.lean { color: var(--blue); border: 1px solid #4aa8ff66; }
.dw-tierchip.watch { color: var(--amber); border: 1px solid #ffb02e66; }
.dw-tierchip.strong { color: var(--accent); border: 1px solid #00e5a066; }
.dw-tierchip.pass { color: var(--dim); border: 1px solid var(--line); }

/* ---- scouting report (2026-08-08) ---------------------------------------
   The Contender Series page used to show two names and nothing else, because
   an unsigned prospect has no UFC fights for the engine to read. The regional
   index fills that in from the feeder circuit. The one rule this styling has
   to enforce: UNKNOWN must never look like a record. A missing record is a
   different claim from 0-0, and 44 of season 10's 70 fighters are missing. */
.dw-rec { display:block; margin-top:.25rem; font-size:.78rem; letter-spacing:.02em;
          color:var(--dw-ink-dim,#9aa4b2); font-variant-numeric:tabular-nums; }
.dw-rec .dw-recx { opacity:.62; }
.dw-rec.unknown { color:#7b8494; font-style:italic; letter-spacing:.01em; }

.dw-scout { display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1.4rem;
            margin:.85rem 0 .2rem; padding:.85rem 0 .1rem;
            border-top:1px solid rgba(148,163,184,.16); }
.dw-scoutname { font-weight:650; font-size:.84rem; margin-bottom:.35rem; }
.dw-scoutline { font-size:.79rem; line-height:1.45; color:var(--dw-ink-dim,#9aa4b2); }
.dw-scoutline.unknown { color:#7b8494; font-style:italic; }
.dw-scoutfights { list-style:none; margin:.45rem 0 0; padding:0;
                  font-size:.76rem; font-variant-numeric:tabular-nums; }
.dw-scoutfights li { display:flex; gap:.4rem; align-items:baseline;
                     padding:.12rem 0; color:var(--dw-ink-dim,#9aa4b2); }
.dw-scoutfights .rd { opacity:.55; min-width:5.4rem; }
.dw-scoutfights li.w > b { color:#4ade80; }
.dw-scoutfights li.l > b { color:#f87171; }
.dw-scoutfights .rm { opacity:.6; }

@media (max-width:640px) {
  .dw-scout { grid-template-columns:1fr; gap:.75rem; }
  .dw-scoutfights .rd { min-width:4.8rem; }
}

/* ==========================================================================
   DESIGN HARMONISATION (2026-08-10, owner request: "make the design look
   similar to the way the odds page and record page look").

   Those two pages share a restrained utility language: a compact bold page
   title, mono micro-labels in wide letterspacing, bordered rounded panels, a
   coloured left accent bar on feature cards, and big confident numerals. The
   Contender Series page had drifted into a cinematic register — a 118px
   hairline display title over a photo montage — which read as a different
   product. These overrides pull it back into the system.

   EXPLICITLY PRESERVED: .dw-roundstrip and its orange .rd bars. The owner
   called those out to keep, so nothing below touches them.
   ========================================================================== */

/* --- Hero: page header, not a movie poster ------------------------------- */
.dw-hero { min-height: 0; padding: 40px 20px 34px; }
.dw-hero h1 {
  margin: 14px 0 8px;
  font-weight: 700;                      /* was 250 hairline */
  font-size: clamp(34px, 5.2vw, 56px);   /* was up to 118px */
  letter-spacing: -.015em; line-height: 1.04;
}
.dw-hero .microlabel { font-size: 10.5px; letter-spacing: .22em; }
.dw-hero-sub { font-size: clamp(14px, 1.5vw, 16.5px); margin: 12px auto 22px; }
/* photo montage down to a texture so the type leads, as on odds/record */
.dw-hero-photos img { opacity: .06 !important; }
.dw-hero-photos img:nth-child(3) { opacity: .045 !important; }

/* --- Bands: tighter vertical rhythm; the page was ~12,900px tall --------- */
.dw-band { padding: 40px 20px; }
.dw-intro { margin-bottom: 34px; }
.dw-intro h2 { font-size: clamp(23px, 3.2vw, 34px); }
.dw-intro p { font-size: 15px; }

/* --- Shared card shell, matching the odds-page pick cards ---------------- */
.dw-bout, .dw-bet, .an-bout {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0d131c 0%, #0b1017 100%);
  position: relative; overflow: hidden;
}
.dw-bout::before, .dw-bet::before, .an-bout::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); opacity: .55;
}
.an-bout { padding-left: 17px; }

/* --- Micro-labels: one voice across every band -------------------------- */
.microlabel, .an-clabel, .dw-fc-head .microlabel {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
}

/* --- The 138 MMA band, aligned to the same system ----------------------- */
#dw-138 .an-wrap { max-width: 1000px; }
#dw-138 h2.dw-h2 {
  font-size: clamp(23px, 3.2vw, 34px); font-weight: 700; margin: 0 0 10px;
}
#dw-138 .an-cell { background: #0a0f16; border-radius: 9px; }
#dw-138 .an-cpick { font-size: 15.5px; }
#dw-138 .an-tag { padding: 4px 8px; border-radius: 4px; }
/* conflict cards earn an orange rail, the same signal language as .dw-finchip */
#dw-138 .an-bout:has(.an-tag.conflict)::before { background: #ff8a5c; opacity: .8; }
#dw-138 .an-bout:has(.an-tag.rootbeer)::before { background: #c8963e; opacity: .7; }

/* --- Reveal: never let the animation strand content invisible ------------ */
.dw-js .dw-reveal { transition-duration: .38s; }
@media (prefers-reduced-motion: reduce) {
  .dw-js .dw-reveal { opacity: 1 !important; transform: none !important; }
}

/* FULL-BLEED CORRECTION FOR THE DESKTOP RAIL (2026-08-31).
   .dw-band uses the centred full-bleed trick — width:100vw with
   margin-left:calc(50% - 50vw) — which is only correct when the content
   column is centred in the viewport. From 1080px up, shell.css pins a 178px
   navigation rail and pads the body past it, so the column is NOT centred and
   the band overshoots by exactly that offset: measured at 1512px, the document
   scrolled to 1601px and every band's left edge was clipped off-screen.
   Invisible until the Contender Series boards became the public front door.

   Fixed by bleeding to the container instead of the viewport at rail widths.
   The band still spans the full reading column; it just stops pretending the
   viewport starts where the column does. */
@media (min-width: 1080px) {
  body:has(.bs-side) .dw-band { width: auto; margin-left: 0; margin-right: 0; }
}

/* SIDEWAYS SCROLL ON PHONES (2026-08-31). Measured at 375px: the document
   scrolled 36px wider than the viewport, so every screen could be dragged
   sideways off its own content. Pre-existing, and it stopped being cosmetic
   the moment these boards became the only public page — the owner's standing
   rule is that mobile is the binding constraint.

   `clip`, not `hidden`: hidden would make .dw-page a scroll container, which
   silently breaks position:sticky for anything inside it. clip just trims the
   bleed. The week tracker keeps its own overflow-x:auto and still scrolls. */
.dw-page { overflow-x: clip; }

/* ===========================================================================
   THE PICK BOARDS (.bl-*) — the locked sheet and the blend.

   THESE LIVED INSIDE THE BLEND BAND'S OWN <style> BLOCK, which sat inside
   `{% if blend %}`. The LOCKED board uses the same classes but renders under a
   different guard, so whenever there was a locked card and no blend the locked
   board rendered with none of its styling: .bl-wrap fell back to max-width
   `none` and its 23px/800 gradient heading rendered as 15px plain grey body
   text. That is precisely the state /contender-series was in on 2026-08-31 —
   the top board of the page the owner had just opened to the public.

   A style block that only exists when an UNRELATED section renders is a trap,
   not a stylesheet. These now live where every other rule on this page lives.
   =========================================================================== */
.bl-wrap { max-width: 1000px; margin: 0 auto; padding: 0 16px; }
.bl-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.bl-h2 {
  font-size: 23px; font-weight: 800; letter-spacing: -.02em; margin: 0;
  background: linear-gradient(180deg, #ffffff, #bcd6ee);
  background-clip: text; -webkit-background-clip: text; color: transparent;
}
.bl-meta { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .5; }
.bl-note { font-size: 12.5px; line-height: 1.6; opacity: .7; margin: 0 0 16px; max-width: 660px; }
.bl-row {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px 13px 17px;
  margin-bottom: 9px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #0e141f 0%, #0c1119 55%, #0b1017 100%);
  box-shadow: 0 1px 0 #ffffff08 inset, 0 10px 24px -18px #000;
  transition: border-color .16s ease;
}
.bl-row:hover { border-color: #24405c; }
.bl-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--blue), #4aa8ff22);
}
.bl-row.flip::before { background: linear-gradient(180deg, #ff7a45, #ff7a4522); }
.bl-row.noplay::before { background: linear-gradient(180deg, var(--amber), #ffb02e22); }
.bl-bout { font-size: 14.5px; font-weight: 600; }
.bl-sub { font: 500 11px var(--mono); opacity: .55; margin-top: 4px; }
.bl-pick { text-align: right; }
.bl-name { font-size: 15px; font-weight: 700; }
.bl-prob {
  font: 800 22px/1 var(--num); letter-spacing: -.02em;
  background-image: linear-gradient(180deg, #5cf5c0, #00c88a);
  background-clip: text; -webkit-background-clip: text; color: transparent;
}
.bl-row.noplay .bl-name { color: var(--amber); }
.bl-tag {
  display: inline-block; font: 700 8.5px var(--mono); letter-spacing: .09em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 3px; margin-left: 6px;
  border: 1px solid currentColor;
  background: linear-gradient(180deg, #ffffff0d, transparent);
}
.bl-tag.flip { color: #ff7a45; }
.bl-tag.np { color: var(--amber); }
@media (max-width: 560px) { .bl-row { grid-template-columns: 1fr; } .bl-pick { text-align: left; } }

/* THIS WEEK LEADS (owner, 2026-08-31: "only display this week's picks ...
   all the other stuff can be below it"). The picks band opens the page now, so
   it carries the top padding the hero used to absorb, and .dw-band-week no
   longer needs the 110px it used to need for clearing the hero's lower edge. */
.dw-band-picks { padding-top: 34px; }
.dw-band-picks + .dw-band { padding-top: 18px; }
.dw-page > .dw-band-week { padding-top: 34px; }

/* ===========================================================================
   THE VERDICT BOARD (owner, 2026-09-08). One row per bout, three labelled
   columns: OUR MODEL / 138 MMA / THE VERDICT.

   BRAND RULE, observed strictly: green #00e5a0 may only ever mean Bout
   Scout's own number. So the verdict cell — the only cell that is ours — is
   the only green thing in the row. Our model's cell is neutral (it is an
   INPUT to the verdict, not the position), and 138 MMA wears the section's
   blue, because he is the other party in the comparison. Amber is reserved
   for the bouts we sit out.

   Built phone-up. At <=620px the two input cells sit side by side and the
   verdict takes the full width beneath them, at a larger size — on the screen
   where most of these readers are, the answer must not be a third of a row.
   =========================================================================== */
.vb-wrap { max-width: 1000px; margin: 0 auto; padding: 0 16px; }
.dw-band-picks { padding-top: 30px; padding-bottom: 26px; }

.vb-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vb-h {
  margin: 0; font-size: clamp(24px, 6vw, 31px); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.05;
  background: linear-gradient(180deg, #ffffff, #bcd6ee);
  background-clip: text; -webkit-background-clip: text; color: transparent;
}
.vb-meta { font: 600 11px var(--mono); letter-spacing: .12em;
           text-transform: uppercase; color: var(--dim); opacity: .8; }
.vb-lede { margin: 9px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--dim);
           max-width: 660px; }
.vb-lede b { color: var(--text); font-weight: 750; }
.vb-lock { display: block; margin-top: 3px; font: 600 10.5px var(--mono);
           letter-spacing: .06em; opacity: .62; }

/* the column key — stated once so the cells can stay short */
.vb-key { list-style: none; margin: 15px 0 14px; padding: 0;
          display: grid; gap: 7px; }
.vb-key li { display: grid; grid-template-columns: 10px auto 1fr; gap: 9px;
             align-items: baseline; font-size: 12px; color: var(--dim);
             line-height: 1.45; }
.vb-key i { width: 8px; height: 8px; border-radius: 2px; transform: translateY(1px); }
.vb-key .k1 { background: #7f8c9b; }
.vb-key .k2 { background: var(--blue); }
.vb-key .k3 { background: var(--accent); box-shadow: 0 0 9px #00e5a066; }
.vb-key b { color: var(--text); font-weight: 700; white-space: nowrap; }
.vb-key span { opacity: .78; }

.vb-rows { display: grid; gap: 11px; }

/* ---- one bout ---------------------------------------------------------- */
.vb-row {
  --edge: var(--accent);
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-left: 0; border-radius: 12px; overflow: hidden;
}
.vb-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
                  width: 3px; background: var(--edge);
                  box-shadow: 0 0 10px color-mix(in srgb, var(--edge) 55%, transparent); }
.vb-row.is-no_play, .vb-row.is-no_tape, .vb-row.is-none { --edge: #ffb02e; }
.vb-row.is-no_play::before, .vb-row.is-no_tape::before { opacity: .5; }
.vb-row > summary { list-style: none; cursor: pointer; padding: 14px 15px 13px 18px; }
.vb-row > summary::-webkit-details-marker { display: none; }
.vb-row[open] > summary { padding-bottom: 9px; }

.vb-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
          margin-bottom: 7px; }
.vb-badge { font: 800 10px var(--mono); letter-spacing: .17em; text-transform: uppercase;
            color: var(--edge); padding: 3px 8px; border-radius: 4px;
            border: 1px solid color-mix(in srgb, var(--edge) 55%, transparent);
            background: color-mix(in srgb, var(--edge) 10%, transparent); }
.vb-div { font: 600 9.5px var(--mono); letter-spacing: .15em; text-transform: uppercase;
          color: var(--dim); opacity: .8; }
.vb-agree { margin-left: auto; font: 700 9px var(--mono); letter-spacing: .12em;
            text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
            border: 1px solid currentColor; white-space: nowrap; }
.vb-agree.yes  { color: #6fd3ff; }
.vb-agree.no   { color: #ff7a45; }
.vb-agree.none { color: #6b727a; }

.vb-bout { font: 700 clamp(17px, 4.6vw, 21px)/1.2 var(--num); font-stretch: condensed;
           margin: 0 0 11px; overflow-wrap: anywhere; }
.vb-bout .on  { color: #fff; font-weight: 800; }
.vb-bout .off { color: var(--dim); font-weight: 500; }
.vb-bout em { font-style: normal; color: var(--dim); font-weight: 400; opacity: .7;
              padding: 0 3px; }

/* ---- the three columns -------------------------------------------------- */
.vb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vb-cell { border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px 9px;
           min-width: 0; }
.vb-cell i { display: block; font: 700 8.5px var(--mono); letter-spacing: .16em;
             text-transform: uppercase; font-style: normal; color: #6b727a;
             margin-bottom: 5px; }
.vb-cell b { display: block; font: 700 15px/1.2 var(--num); font-stretch: condensed;
             color: var(--text); overflow-wrap: anywhere; }
.vb-cell u { display: block; margin-top: 3px; text-decoration: none;
             font: 600 10.5px var(--mono); letter-spacing: .04em; color: var(--dim);
             opacity: .85; }
.vb-cell b.dash, .vb-cell b.np { color: #ffb02e; }
.c-model { background: #ffffff05; }
.c-138   { background: rgba(74,168,255,.055); border-color: #4aa8ff2e; }
.c-138 i { color: var(--blue); opacity: .85; }

/*  THE ANSWER. Full width under the two inputs on a phone, and the only cell
    allowed to carry the brand green. Everything about it — width, weight,
    size, glow — says "this is the one you came for". */
.c-final { grid-column: 1 / -1; background: rgba(0,229,160,.07);
           border-color: color-mix(in srgb, var(--edge) 40%, transparent);
           padding: 12px 14px 11px; }
.c-final i { color: var(--edge); opacity: .9; }
/*  The name takes the full width and the supporting figure sits under it. An
    earlier cut floated the figure to the right of the name; a long name then
    wrapped to two lines and the percentage hung in the gutter beside the
    wrap, reading as if it belonged to the second line. */
.c-final b { font-size: clamp(22px, 6.4vw, 27px); font-weight: 800; line-height: 1.08;
             color: var(--edge); letter-spacing: -.015em;
             text-shadow: 0 0 20px color-mix(in srgb, var(--edge) 28%, transparent); }
.c-final u { margin-top: 5px; font-size: 10px; color: var(--dim); opacity: .9; }
.is-no_play .c-final, .is-no_tape .c-final, .is-none .c-final {
  background: rgba(255,176,46,.07); }

.vb-more { display: flex; align-items: center; gap: 6px; margin-top: 10px;
           font: 700 10px var(--mono); letter-spacing: .13em; text-transform: uppercase;
           color: var(--blue); opacity: .78; }
.vb-more i { font-style: normal; transition: transform .15s ease; }
.vb-row[open] .vb-more i { transform: rotate(90deg); }
.vb-row[open] .vb-more span::after { content: " — hide"; }

.vb-body { padding: 2px 16px 15px 18px; border-top: 1px dashed var(--line); }
.vb-lead { margin: 12px 0 2px; font-size: 13.5px; line-height: 1.6; color: var(--text);
            border-left: 2px solid color-mix(in srgb, var(--edge) 45%, transparent);
            padding-left: 11px; }
.vb-kv { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0;
         font-size: 12.5px; color: var(--dim); border-bottom: 1px solid #131a2688; }
.vb-kv b { color: var(--text); font-weight: 650; text-align: right; }
.vb-sub { font: 700 9.5px var(--mono); letter-spacing: .16em; text-transform: uppercase;
          color: var(--blue); opacity: .8; margin: 15px 0 4px; }
.vb-why { margin: 5px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--dim); }
.vb-credit { margin: 13px 0 0; font: 500 11px var(--mono); color: #6b727a; }
.vb-credit a { color: var(--blue); }

@media (min-width: 620px) {
  /* Three across, with the verdict given the extra room — it carries the
     longest content (a name plus a locked flag) and the most weight. */
  .vb-grid { grid-template-columns: 1fr 1fr 1.35fr; }
  .c-final { grid-column: auto; }
  .vb-key { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .vb-key li { grid-template-columns: 10px 1fr; align-content: start; }
  .vb-key span { grid-column: 2; font-size: 11.5px; }
}

/* ---- previous weeks ------------------------------------------------------ */
.vb-past-band { padding-top: 4px; padding-bottom: 40px; }
.vb-past { border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
           overflow: hidden; }
.vb-past > summary, .vb-wk > summary { list-style: none; cursor: pointer; }
.vb-past > summary::-webkit-details-marker,
.vb-wk > summary::-webkit-details-marker { display: none; }
.vb-past > summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
                     padding: 15px 17px; }
.vb-past > summary b { font-size: 15px; font-weight: 750; }
.vb-past > summary span { font: 600 10.5px var(--mono); letter-spacing: .08em;
                          text-transform: uppercase; color: var(--dim); opacity: .75; }
.vb-past > summary i, .vb-wk > summary i { margin-left: auto; font-style: normal;
                          color: var(--blue); transition: transform .15s ease; }
.vb-past[open] > summary i, .vb-wk[open] > summary i { transform: rotate(90deg); }
.vb-past-body { padding: 0 12px 12px; display: grid; gap: 8px; }

.vb-wk { border: 1px solid var(--line); border-radius: 9px; background: #ffffff04; }
.vb-wk > summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
                   padding: 11px 13px; }
.vb-wk > summary b { font-size: 13.5px; font-weight: 750; }
.vb-wk-date { font: 600 10.5px var(--mono); color: var(--dim); opacity: .8; }
/*  The week's score chip is coloured by the score. It used to be green
    unconditionally, so a 0/3 week wore the same confident green as a 4/5 one
    — a scoreboard where losing and winning look identical is not a
    scoreboard. Green above 60%, amber around even, red below 40%. */
.vb-wk-score { margin-left: auto; font: 700 9.5px var(--mono); letter-spacing: .1em;
               text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
               white-space: nowrap; color: var(--dim);
               border: 1px solid var(--line); }
.vb-wk-score.good { color: var(--accent); border-color: #00e5a055; }
.vb-wk-score.even { color: #ffb02e; border-color: #ffb02e55; }
.vb-wk-score.bad  { color: #ff5a5a; border-color: #ff5a5a55; }
.vb-wk-score.none { color: var(--dim); border-color: var(--line); }
/* the chevron follows the chip rather than claiming the auto margin itself */
.vb-wk > summary i { margin-left: 8px; }

/*  A five-column table at 375px is unreadable, so on a phone every row becomes
    a labelled block. The header row is hidden there and each cell carries its
    own label from data-l — the same information, laid out for the screen it
    is actually on. */
.vb-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.vb-tbl th { text-align: left; font: 700 8.5px var(--mono); letter-spacing: .14em;
             text-transform: uppercase; color: #6b727a; padding: 7px 10px;
             border-bottom: 1px solid var(--line); }
.vb-tbl td { padding: 9px 10px; border-bottom: 1px solid #131a2688;
             vertical-align: top; color: var(--dim); }
.vb-tbl td b { color: var(--text); font-weight: 650; }
.vb-tbl td span { display: block; font: 600 9.5px var(--mono); opacity: .7;
                  margin-top: 2px; }
.vb-tbl td em { font-style: normal; opacity: .55; padding: 0 2px; }
.vb-tbl td.v b { color: var(--accent); }
.vb-tbl td.v b.np { color: #ffb02e; }
.vb-tbl td u { display: inline-block; margin-top: 4px; text-decoration: none;
               font: 700 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.vb-tbl td u.ok  { color: var(--accent); }
.vb-tbl td u.bad { color: #ff5a5a; }
.vb-tbl tr.hit  { background: rgba(0,229,160,.05); }
.vb-tbl tr.miss { background: rgba(255,90,90,.045); }

@media (max-width: 620px) {
  .vb-tbl thead { display: none; }
  .vb-tbl, .vb-tbl tbody, .vb-tbl tr, .vb-tbl td { display: block; width: 100%; }
  .vb-tbl tr { border-bottom: 1px solid var(--line); padding: 4px 0 8px; }
  .vb-tbl td { border: 0; padding: 4px 12px; }
  .vb-tbl td.f { padding-top: 10px; font-size: 13.5px; }
  .vb-tbl td:not(.f)::before {
    content: attr(data-l) " "; font: 700 8.5px var(--mono); letter-spacing: .14em;
    text-transform: uppercase; color: #6b727a; display: block; margin-bottom: 2px; }
}