/* ===========================================================================
   POUND-FOR-POUND (.p4-*) — the simulation-driven board.

   Built from the same three fade moves the DWCS section uses (documented in
   dwcs_section.css) so this reads as the same product: the body's radial bloom
   behind the title, a 180deg panel wash, and a 90deg meter ramp that lands on
   the solid accent.

   COLOUR DISCIPLINE (style.css rules, not decoration):
     * Brand green #00e5a0 is OUR read. Dominance and the P4P rating are ours,
       so they wear the logo colour. This page is the house's flagship ranking,
       so green dresses the chrome here too — unlike the DWCS section, where
       blue carries the Contender Series identity and green is reserved for the
       number alone.
     * Blue #4aa8ff is used ONLY for the division-level anchor, because that
       half of the score comes from Elo rather than from the simulator. Two
       inputs, two colours — you can see which half is which at a glance.
     * Amber stays caution. It is never a probability.

   THE CLARITY RULE, learned the hard way on the DWCS cards: a bare percentage
   is unreadable. "26%" prompted "who and what does that mean?". Every number
   here carries its own label in the same visual unit, and the claim is legible
   before anything is expanded.
   =========================================================================== */

/* ---- hero ---------------------------------------------------------------- */
.p4-hero { max-width: 1000px; margin: 0 auto; padding: 30px 16px 0; position: relative; }
.p4-hero::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 28% 45%, #00e5a022, transparent 70%),
    radial-gradient(420px 170px at 82% 15%, #4aa8ff14, transparent 72%);
}
.p4-hero > * { position: relative; z-index: 1; }
.p4-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.p4-mark { width: 34px; height: 34px; flex: 0 0 auto; opacity: .95;
           filter: drop-shadow(0 0 12px #00e5a044); }
.p4-title {
  font-size: clamp(30px, 5.2vw, 44px); font-weight: 800; letter-spacing: -.035em;
  margin: 0; line-height: .92;
  background: linear-gradient(180deg, #ffffff 0%, #d3f4e7 46%, #4fbb96 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.p4-badge {
  font: 700 10.5px var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); opacity: .85; padding: 4px 9px;
  border: 1px solid #00e5a033; border-radius: 999px;
  background: linear-gradient(180deg, #00e5a014, #00e5a006); white-space: nowrap;
}
.p4-blurb { font-size: 13.5px; line-height: 1.65; color: var(--dim);
            margin: 12px 0 0; max-width: 700px; }
.p4-blurb b { color: var(--text, #e8eef7); font-weight: 650; }

/* ---- how it is built ----------------------------------------------------- */
.p4-method {
  max-width: 1000px; margin: 18px auto 0; padding: 0 16px;
}
.p4-method > div {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  background: linear-gradient(180deg, #0c1119, #0e141f 55%, #0c1119);
}
.p4-method summary {
  cursor: pointer; list-style: none; font: 600 11px var(--mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
.p4-method summary::-webkit-details-marker { display: none; }
.p4-method summary::after { content: " ⌄"; opacity: .6; }
.p4-method details[open] summary::after { content: " ⌃"; }
.p4-method p { font-size: 13px; line-height: 1.7; color: var(--dim); margin: 12px 0 0; }
.p4-method code { font: 600 12px var(--mono); color: var(--accent); }
.p4-method .anchor { color: var(--blue); }

/* ---- rows ---------------------------------------------------------------- */
.p4-list { max-width: 1000px; margin: 22px auto 0; padding: 0 16px; }
.p4-row {
  border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px;
  background: linear-gradient(180deg, #0c1119, #0e141f 55%, #0c1119);
  overflow: hidden; transition: border-color .16s ease;
}
.p4-row[open], .p4-row:hover { border-color: #00e5a038; }
.p4-row > summary { list-style: none; cursor: pointer; display: grid;
  grid-template-columns: 54px 1fr auto; gap: 4px 16px; align-items: center;
  padding: 16px 18px; }
.p4-row > summary::-webkit-details-marker { display: none; }

.p4-rank { font: 800 26px/1 var(--mono); color: var(--dim);
           font-variant-numeric: tabular-nums; text-align: center; }
.p4-row:nth-child(-n+3) .p4-rank { color: var(--accent); text-shadow: 0 0 18px #00e5a033; }

/* Direct child only. Unscoped, this also caught the <b> inside .p4-wr and
   forced the win rate to display:block at 17.5px, breaking it onto its own
   line and making it compete with the rating for the eye. */
.p4-who > b { display: block; font-size: 17.5px; font-weight: 650; line-height: 1.25; }
.p4-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px;
           flex-wrap: wrap; font-size: 12.5px; color: var(--dim); }
.p4-div { font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase;
          color: var(--blue); opacity: .9; }
.p4-tag {
  font: 700 9.5px var(--mono); letter-spacing: .14em; padding: 2px 7px;
  border-radius: 999px; border: 1px solid var(--line); color: var(--dim);
}
.p4-tag.champ { color: #0a0e14; background: var(--accent); border-color: var(--accent); }

/* The win rate, sitting with the record rather than acting as the hero — it is
   a stat about the fighter, not the thing the list is ordered by. */
.p4-wr { display: block; margin-top: 6px; font-size: 12.5px; color: var(--dim); }
.p4-wr b { color: var(--accent); font-weight: 700;
           font-variant-numeric: tabular-nums; }

/* The headline number is the rating, because that IS the sort order. It is
   never shown bare — the label sits directly under it in the same block,
   because "26%" with no label is the exact failure the DWCS cards were rebuilt
   to fix. */
.p4-num { text-align: right; }
.p4-num b { display: block; font: 800 27px/1 var(--num); color: var(--accent);
            font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.p4-num i {
  display: block; margin-top: 5px; font: 600 9px var(--mono); font-style: normal;
  letter-spacing: .13em; text-transform: uppercase; color: var(--dim);
  max-width: 130px; line-height: 1.45;
}

/* ---- expanded body ------------------------------------------------------- */
.p4-body { padding: 4px 18px 18px; border-top: 1px solid var(--line);
           margin: 0 0 0; }
.p4-lead { font-size: 13.5px; line-height: 1.7; color: var(--dim);
           margin: 14px 0 16px; }
.p4-lead b { color: var(--accent); font-weight: 700; }
.p4-lead .anchor { color: var(--blue); font-weight: 700; }

.p4-h { font: 600 10px var(--mono); letter-spacing: .16em; text-transform: uppercase;
        color: var(--dim); margin: 0 0 10px; }

/* head-to-head meters: the four bouts that produced the number */
.p4-h2h { display: grid; gap: 8px; margin: 0 0 18px; }
.p4-bout { display: grid; grid-template-columns: 1fr 58px; gap: 12px;
           align-items: center; }
.p4-bout > span:first-child { font-size: 13.5px; }
.p4-bout a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.p4-bout a:hover { border-bottom-color: #00e5a055; }
.p4-meter { grid-column: 1 / -1; height: 5px; border-radius: 999px;
            background: #131a26; overflow: hidden; margin-top: -3px; }
.p4-meter i { display: block; height: 100%; border-radius: 999px;
              background: linear-gradient(90deg, #00e5a055, var(--accent)); }
.p4-bout.loss .p4-meter i { background: linear-gradient(90deg, #2a3546, #4a5a70); }
.p4-pct { text-align: right; font: 700 14px var(--mono); color: var(--accent);
          font-variant-numeric: tabular-nums; }
.p4-bout.loss .p4-pct { color: var(--dim); }

/* score construction: the two halves, in their own colours */
.p4-build { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
            background: var(--line); border: 1px solid var(--line);
            border-radius: 10px; overflow: hidden; }
.p4-build div { background: #0c1119; padding: 11px 12px; }
.p4-build b { display: block; font: 700 17px var(--mono); font-variant-numeric: tabular-nums; }
.p4-build .anchor b { color: var(--blue); }
.p4-build .sep b { color: var(--accent); }
/* The belt term is deliberately NOT green: green only ever means Bout Scout's
   own number, and championship credit is the sport's fact, not our simulation.
   --amber is the token .title-pill already uses for title fights site-wide, so
   the colour means the same thing here as everywhere else. */
.p4-build .belt b { color: var(--amber); }
.p4-build .tot b { color: #fff; }
.p4-build i { display: block; margin-top: 4px; font: 600 8.5px var(--mono);
              font-style: normal; letter-spacing: .1em; text-transform: uppercase;
              color: var(--dim); line-height: 1.4; }

/* Championship credit on the closed card. It sits under the win rate because it
   is the term that explains why the order and the win rate disagree. */
.p4-cr { display: block; margin-top: 4px; font-size: 12px; color: var(--dim); }
.p4-cr b { color: var(--amber); font-weight: 700; margin-right: 5px;
           font-variant-numeric: tabular-nums; }
/* The gap is a margin, not a space in the markup: the Jinja that builds the
   label list uses whitespace-stripping tags ({%- -%}) and ate a literal one. */

ul.p4-cred { margin: 8px 0 0; padding: 0; list-style: none; }
ul.p4-cred li { display: flex; gap: 10px; align-items: baseline; padding: 7px 0;
                border-bottom: 1px solid var(--line); font-size: 13px;
                line-height: 1.45; }
ul.p4-cred li:last-child { border-bottom: 0; }
ul.p4-cred b { flex: 0 0 auto; min-width: 46px; color: var(--amber);
               font: 700 13px var(--mono); font-variant-numeric: tabular-nums; }

.p4-more { display: inline-block; margin-top: 14px; font: 600 11px var(--mono);
           letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
           text-decoration: none; }
.p4-more:hover { text-decoration: underline; }

.p4-foot { max-width: 1000px; margin: 20px auto 0; padding: 0 16px 10px;
           font-size: 12px; line-height: 1.7; color: var(--dim); }

/* ---- mobile: the binding constraint -------------------------------------- */
@media (max-width: 640px) {
  .p4-row > summary { grid-template-columns: 38px 1fr auto; gap: 3px 12px;
                      padding: 14px 13px; }
  .p4-rank { font-size: 19px; }
  .p4-who b { font-size: 15.5px; }
  .p4-num b { font-size: 22px; }
  .p4-num i { font-size: 8.5px; max-width: 76px; letter-spacing: .08em; }
  .p4-wr { font-size: 12px; margin-top: 5px; }
  .p4-body { padding: 4px 13px 16px; }
  .p4-build { grid-template-columns: 1fr; }
  .p4-build b { font-size: 15px; }
}