/* ===========================================================================
   DWCS SECTION — shared chrome for Fights / 138 MMA / First-Round Props.

   OPTION A ("Broadcast") — chosen by the owner 2026-08-10, with one amendment:
   the hot-state colour is the BRAND GREEN, not orange. That is the more correct
   reading of the existing rule anyway — the R1-KO percentage IS our read, so it
   wears the logo colour. Tier is then carried by SATURATION down a green ramp
   (#00e5a0 -> #00b781 -> #2b7d64 -> grey), which is the same technique style.css
   already uses for the book number: "hierarchy is preserved by SATURATION".
   Orange survives only as the 138-disagreement flag, where it means something
   other than a probability.

   BRAND RULES OBSERVED (style.css documents these; they are not decoration):
     * Brand green #00e5a0 is the LOGO colour and belongs to OUR read. The
       owner's 2026-08-08 rule is explicit — "our read wears the brand green ...
       because the number IS the brand's signature". So house numbers stay green
       here, even inside a blue section.
     * Blue #4aa8ff is the Contender Series identity (owner, 2026-08-10) and
       dresses the section CHROME: rule lines, tabs, kickers, headings.
     * Amber = caution (Root Beer), orange = disagreement (conflict). Neither is
       ever used for a probability, so a colour never means two things.

   FADE VOCABULARY, borrowed from the existing site rather than invented:
     * body already carries radial-gradient(1200px 500px at 70% -10%, ...)
     * panels use soft 180deg washes (#0c1119 -> #0e141f -> #0c1119)
     * meters use 90deg colour ramps that end on the solid accent
   Everything below is built from those three moves so the section reads as the
   same product, one notch dressier.
   =========================================================================== */

/* ---- section header ------------------------------------------------------ */
.dw-sec {
  max-width: 1000px; margin: 0 auto; padding: 30px 16px 0;
  position: relative;
}
/* The signature fade: a wide, low-opacity blue bloom behind the title that
   dissolves before it reaches the content. Mirrors the body's own radial so the
   section feels lit from the same source rather than pasted on. */
.dw-sec::before {
  content: ""; position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  width: min(1100px, 130%); height: 320px; pointer-events: none; z-index: 0;
  background:
    radial-gradient(620px 220px at 25% 45%, #4aa8ff26, transparent 70%),
    radial-gradient(420px 170px at 80% 18%, #00e5a014, transparent 72%);
}
.dw-sec > * { position: relative; z-index: 1; }

.dw-sec-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Wordmark lockup: the octagon mark beside the title, the way the header does
   it, so the section is unmistakably Bout Scout's rather than a bare page. */
.dw-sec-mark {
  width: 34px; height: 34px; flex: 0 0 auto; opacity: .95;
  filter: drop-shadow(0 0 12px #00e5a044);
}
.dw-sec-title {
  font-size: clamp(32px, 5.4vw, 46px); font-weight: 800; letter-spacing: -.035em;
  margin: 0; line-height: .92;
  background: linear-gradient(180deg, #ffffff 0%, #cfe4ff 46%, #6fb0e8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dw-sec-season {
  font: 700 10.5px var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--blue); opacity: .78;
  padding: 4px 9px; border: 1px solid #4aa8ff33; border-radius: 999px;
  background: linear-gradient(180deg, #4aa8ff14, #4aa8ff06);
}
.dw-sec-blurb {
  font-size: 13.5px; line-height: 1.6; color: var(--dim);
  margin: 10px 0 0; max-width: 660px;
}

/* ---- tabs ---------------------------------------------------------------- */
.dw-tabs {
  display: flex; gap: 4px; margin: 20px 0 0; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  /* the rule line itself fades out to the right, so the strip ends softly */
  border-image: linear-gradient(90deg, var(--line) 0%, var(--line) 62%, transparent 100%) 1;
}
.dw-tabs::-webkit-scrollbar { display: none; }
.dw-tab {
  flex: 0 0 auto; padding: 11px 17px; text-decoration: none; white-space: nowrap;
  font: 700 11.5px var(--mono); letter-spacing: .11em; text-transform: uppercase;
  color: var(--dim); border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0; transition: color .14s ease, background .14s ease;
}
.dw-tab:hover { color: var(--text); background: linear-gradient(180deg, #4aa8ff0d, transparent); }
.dw-tab.on {
  color: var(--blue); border-bottom-color: var(--blue);
  background: linear-gradient(180deg, #4aa8ff20, #4aa8ff00 85%);
  text-shadow: 0 0 18px #4aa8ff66;
}

/* ---- shared panel treatment --------------------------------------------- */
/* One card look across all three tabs. The 180deg wash + hairline top highlight
   is the site's existing panel move; the left rail carries the state colour. */
.dwx-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px;
  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, transform .16s ease;
}
.dwx-card:hover { border-color: #24405c; }
.dwx-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--blue), #4aa8ff22);
}
.dwx-card.is-hot::before   { background: linear-gradient(180deg, #00e5a0, #00e5a022); }
.dwx-card.is-warm::before  { background: linear-gradient(180deg, #00b781, #00b78122); }
.dwx-card.is-cool::before  { background: linear-gradient(180deg, var(--dim), #6b727a22); }
.dwx-card.is-flip::before  { background: linear-gradient(180deg, #ff7a45, #ff7a4522); }

/* the brand green stays reserved for OUR number */
.dwx-ours { color: var(--accent); }
.dwx-theirs { color: var(--blue); }

/* pills */
.dwx-pill {
  display: inline-block; font: 700 9px var(--mono); letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  border: 1px solid currentColor;
  background: linear-gradient(180deg, #ffffff0d, transparent);
}

/* meters reuse the site ramp so a bar means the same thing everywhere */
.dwx-meter { position: relative; height: 6px; border-radius: 3px;
             background: var(--panel2); overflow: hidden; }
.dwx-meter i { position: absolute; inset: 0 auto 0 0; border-radius: 3px;
               background: linear-gradient(90deg, #4aa8ff44, var(--blue));
               box-shadow: 0 0 12px #4aa8ff55; }
.dwx-meter.ours i { background: linear-gradient(90deg, #00e5a044, var(--accent));
                    box-shadow: 0 0 12px #00e5a055; }
.dwx-meter.hot i  { background: linear-gradient(90deg, #00e5a044, var(--accent));
                    box-shadow: 0 0 12px #00e5a055; }

/* footer credit line, used on every tab */
.dwx-credit { margin-top: 26px; padding-top: 14px; font-size: 12px; color: var(--dim);
              border-top: 1px solid var(--line);
              border-image: linear-gradient(90deg, var(--line), transparent) 1; }

@media (max-width: 560px) {
  .dw-sec { padding-top: 22px; }
  .dw-tab { padding: 10px 13px; font-size: 10.5px; letter-spacing: .08em; }
  .dw-sec-mark { width: 25px; height: 25px; }
}

/* ===========================================================================
   SELECTION CARDS — modelled on the odds board's call card (owner, 2026-08-10:
   "remodel how the selections look, model after the odds page").

   Same vocabulary, deliberately: a --tier-c variable drives the rail, dot,
   label and pill so the state colour is set ONCE per card and can never drift
   between elements; --glow is derived from it rather than declared. The
   face-off is the odds page's own device — our corner against theirs with the
   pill on the seam — because on this section the comparison is the point
   (model vs 138 on Fights, headline vs divisional base on Props).

   Brand rules carry over unchanged: the green corner is ALWAYS Bout Scout and
   carries the wordmark under the number — the brand signing its read. Nothing
   else may wear green.
   =========================================================================== */
.dws-call { --tier-c: var(--accent);
            --glow: color-mix(in srgb, var(--tier-c) 55%, transparent); }
.dws-call { position: relative; background: var(--panel); border: 1px solid var(--line);
            border-left: 0; border-radius: 11px; padding: 15px 16px 14px;
            margin-bottom: 10px; }
.dws-call::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
                    width: 3px; border-radius: 0 3px 3px 0; background: var(--tier-c);
                    box-shadow: 0 0 10px var(--glow), 0 0 20px var(--glow); }
.dws-call.muted::before { opacity: .45; }

.dws-eyebrow { display: flex; align-items: center; gap: 7px; margin-bottom: 7px;
               flex-wrap: wrap; }
.dws-dot { width: 7px; height: 7px; border-radius: 50%; flex: none;
           background: var(--tier-c); box-shadow: 0 0 8px var(--glow); }
.dws-tier { font: 700 9.5px var(--mono); letter-spacing: .17em; text-transform: uppercase;
            color: var(--tier-c); }
.dws-flag { font: 700 8.5px var(--mono); letter-spacing: .12em; text-transform: uppercase;
            padding: 2px 7px; border-radius: 999px; border: 1px solid currentColor; }
.dws-flag.conflict { color: #ff7a45; cursor: pointer; }
.dws-flag.root { color: var(--amber); }

.dws-pick { font: 700 23px/1.1 var(--num); font-stretch: condensed; margin: 0;
            overflow-wrap: anywhere; }
.dws-over { margin: 3px 0 0; font: 600 13px var(--num); font-stretch: condensed;
            color: var(--dim); }
.dws-rule { height: 1px; background: var(--line); margin: 13px 0 12px; }

/* face-off */
.dws-face { position: relative; display: grid; grid-template-columns: 1fr 1fr;
            border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.dws-corner { padding: 15px 8px 12px; display: flex; flex-direction: column;
              align-items: center; gap: 6px; }
.dws-corner.us { background: rgba(0,229,160,.06); }
.dws-corner.them { background: rgba(74,168,255,.055); border-left: 1px solid var(--line); }
.dws-corner b { font: 700 33px/.9 var(--num); font-stretch: condensed;
                font-variant-numeric: tabular-nums; }
.dws-corner.us b { color: var(--accent); }
.dws-corner.them b { color: var(--blue); }
.dws-corner i { font: 600 8.5px var(--mono); letter-spacing: .14em; text-transform: uppercase;
                font-style: normal; color: #4a5666; }
.dws-lkp { height: 14px; width: auto; display: block; }
.dws-pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
            background: var(--panel); border: 1px solid var(--tier-c); border-radius: 8px;
            padding: 5px 9px 4px; text-align: center; box-shadow: 0 0 14px var(--glow); }
.dws-pill b { font: 700 16px/1 var(--num); font-stretch: condensed;
              font-variant-numeric: tabular-nums; color: var(--tier-c); }
.dws-pill span { display: block; margin-top: 2px; font: 600 7.5px var(--mono);
                 letter-spacing: .16em; text-transform: uppercase; color: #4a5666; }

.dws-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px;
            flex-wrap: wrap; margin-top: 13px; }
.dws-meth { margin: 0; font: 600 12px var(--num); font-stretch: condensed; color: var(--dim); }
.dws-meth b { color: var(--text); font-weight: 700; }
.dws-open { font: 700 10px var(--mono); letter-spacing: .13em; text-transform: uppercase;
            color: var(--blue); text-decoration: none; }
.dws-open:hover { text-decoration: underline; }
.dws-thin { margin: 8px 0 0; font: 600 9px var(--mono); letter-spacing: .1em;
            text-transform: uppercase; color: #4a5666; }

/* Single-figure panel (props). Replaced the two-corner face-off: that device
   only works when both sides are the SAME unit — our % against the book's %,
   as on the odds board. Props have no market to face, so the card states one
   number and signs it. */
.dws-single { display: flex; flex-direction: column; align-items: center; gap: 7px;
              padding: 18px 10px 15px; border: 1px solid var(--line); border-radius: 9px;
              background: rgba(0,229,160,.06); }
.dws-single b { font: 700 46px/.9 var(--num); font-stretch: condensed;
                font-variant-numeric: tabular-nums; color: var(--tier-c); }
.dws-single i { font: 600 8.5px var(--mono); letter-spacing: .14em; text-transform: uppercase;
                font-style: normal; color: #4a5666; }

/* provenance line under the figure — states the weighting on its face so the
   number is never mistaken for a pure model output */
.dws-split { font: 600 9.5px var(--mono); letter-spacing: .06em; color: var(--dim);
             opacity: .8; text-align: center; margin-top: 2px; }

/* ---- claim-first card (props) -------------------------------------------
   The number alone was ambiguous: a percentage between two fighter names reads
   as a win probability. So the CLAIM is stated as a sentence beside the figure,
   and the supporting detail is collapsed until asked for. <details>/<summary>
   rather than JS: keyboard and screen-reader behaviour for free. */
details.dws-call { padding: 0; }
details.dws-call > summary { list-style: none; cursor: pointer; padding: 15px 16px 12px 18px; }
details.dws-call > summary::-webkit-details-marker { display: none; }
details.dws-call[open] > summary { padding-bottom: 8px; }

.dws-when { font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase;
            color: var(--dim); opacity: .75; margin-left: auto; white-space: nowrap; }
.dws-tier { min-width: 0; }
.dws-bout { font: 700 19px/1.15 var(--num); font-stretch: condensed; margin: 2px 0 12px; }
.dws-bout em { font-style: normal; color: var(--dim); font-weight: 400; }

.dws-claimrow { display: flex; align-items: center; justify-content: space-between; gap: 14px;
                border: 1px solid var(--line); border-radius: 9px; padding: 13px 15px;
                background: rgba(0,229,160,.05); }
.dws-claim { font-size: 13px; line-height: 1.4; color: var(--dim); }
.dws-claim strong { color: var(--text); font-weight: 700; }
.dws-big { font: 800 40px/.9 var(--num); font-stretch: condensed;
           font-variant-numeric: tabular-nums; color: var(--tier-c); flex: 0 0 auto; }

.dws-more { display: flex; align-items: center; gap: 6px; margin-top: 9px;
            font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase;
            color: var(--blue); opacity: .75; }
.dws-chev { font-style: normal; transition: transform .15s ease; }
details.dws-call[open] .dws-chev { transform: rotate(90deg); }
details.dws-call[open] .dws-more span::after { content: " — hide"; }

.dws-body { padding: 4px 16px 15px 18px; border-top: 1px dashed var(--line); margin-top: 4px; }
.dws-kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0;
          font-size: 12.5px; color: var(--dim); border-bottom: 1px solid #131a2688; }
.dws-kv b { color: var(--text); font-weight: 700; text-align: right; }
.dws-sub { font: 700 9.5px var(--mono); letter-spacing: .16em; text-transform: uppercase;
           color: var(--blue); opacity: .8; margin: 16px 0 4px; }
.dws-why { margin: 6px 0 0; font-size: 12px; line-height: 1.55; color: var(--dim); }
.dws-why b { color: var(--text); }
@media (max-width: 420px) { .dws-big { font-size: 34px; } .dws-bout { font-size: 17px; } }

/* Favoured side on the collapsed card. The headline is FIGHT-level, so without
   this the reader had to open every card to learn which man carries the threat —
   the exact hunt the five-second rule exists to prevent. */
.dws-lead { margin-top: 9px; font-size: 12.5px; color: var(--dim); }
.dws-lead b { color: var(--text); font-weight: 700; }
.dws-lead span { color: var(--tier-c); font-weight: 700; font-variant-numeric: tabular-nums; }

/* No-play slot. An em-dash at 40px reads as a broken graphic rather than an
   absent number, so the slot states the outcome in words instead. */
.dws-nobig { font: 700 15px/1.15 var(--mono); letter-spacing: .1em; text-transform: uppercase;
             color: var(--amber); text-align: right; flex: 0 0 auto; opacity: .9; }