/* fight.css — FightIndex's own layer on top of the shared Identity A sheets.
   Kept deliberately small: styles.css + data.css already carry the ring's type
   scale, colour tokens, tables and bands. Everything here is either the brand
   accent repair or a component the ring does not have. */

:root {
  --accent: #8C2F39;
  --accent-soft: #8C2F3914;
  --accent-line: #8C2F3933;
}
:root[data-theme="dark"] {
  --accent: #E0616D;
  --accent-soft: #E0616D1a;
  --accent-line: #E0616D33;
}

/* ------------------------------------------------------------ answer band
   The first thing on every page: the finding, stated plainly. Given a tinted
   rule rather than a box so it reads as emphasis, not as a callout widget. */
.answer { padding-block: clamp(1.1rem, 3vw, 1.8rem); }
.answer .answer-t {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.12rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.42; margin: 0; max-width: 62ch;
  border-left: 3px solid var(--accent); padding-left: clamp(.85rem, 2vw, 1.15rem);
}

/* ------------------------------------------------------- the percentile bar
   The site's core visual. A track, a fill to the percentile, and a marker at
   the exact position. Deliberately not a chart library: it is three divs, it
   renders identically everywhere, and it costs nothing. */
.pbar { margin: .9rem 0 .35rem; }
.pbar-track {
  position: relative; height: 12px; border-radius: 999px;
  background: linear-gradient(90deg, var(--surface-2, #e8e2d9), var(--accent-soft));
  border: 1px solid var(--rule, #0001);
}
.pbar-fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  background: var(--accent); opacity: .22;
}
.pbar-mark {
  position: absolute; top: 50%; width: 3px; height: 22px; border-radius: 2px;
  background: var(--accent); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px var(--bg, #fff);
}
.pbar-scale {
  display: flex; justify-content: space-between;
  font-size: .74rem; letter-spacing: .02em; opacity: .6; margin-top: .45rem;
}

/* ---------------------------------------------------------------- stat tiles */
.statrow { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat { padding: .2rem 0; }
.stat-k { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; opacity: .65; margin: 0 0 .2rem; }
.stat-v { font-family: Fraunces, Georgia, serif; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); line-height: 1; margin: 0; font-variant-numeric: tabular-nums; }
.stat-n { font-size: .84rem; opacity: .72; margin: .3rem 0 0; max-width: 34ch; }
.stat.big .stat-v { color: var(--accent); }

.grid-2 { display: grid; gap: clamp(1.2rem, 3vw, 2.2rem); grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ------------------------------------------------------------------- tables */
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl caption { text-align: left; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; opacity: .65; padding-bottom: .5rem; }
.tbl th, .tbl td { padding: .55rem .6rem; border-bottom: 1px solid var(--rule, #0001); text-align: left; }
.tbl thead th { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.tbl .pc, .tbl .adv { color: var(--accent); white-space: nowrap; }
.tbl .rk { opacity: .5; width: 2.5rem; }
.tbl .alt { opacity: .55; font-size: .88em; }
/* wide tables must scroll inside themselves, never the page */
.band .wrap > .tbl, .tbl.rank { display: block; overflow-x: auto; }
@media (min-width: 640px) { .tbl.rank { display: table; } }

.tbl.vs td { width: 38%; }
.tbl.vs th[scope="row"] { text-align: center; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.tbl.vs td.w { font-weight: 650; color: var(--accent); }
.tbl.vs thead th { text-align: center; font-size: 1rem; text-transform: none; opacity: 1; }
.tbl.vs thead th:nth-child(1) { text-align: left; }
.tbl.vs thead th:nth-child(3) { text-align: right; }
.tbl.vs td:last-child { text-align: right; }

/* -------------------------------------------------------------- mix meters */
.mix { list-style: none; padding: 0; margin: .6rem 0 1.4rem; display: grid; gap: .45rem; }
.mix li { display: grid; grid-template-columns: 8rem 1fr 3rem; gap: .7rem; align-items: center; font-size: .9rem; }
.mix-k { text-transform: capitalize; opacity: .8; }
.mix-b { height: 9px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.mix-b i { display: block; height: 100%; background: var(--accent); opacity: .55; }
.mix-v { text-align: right; font-variant-numeric: tabular-nums; opacity: .75; }

/* ------------------------------------------------------------------- cards */
.cards { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cards a {
  display: grid; gap: .18rem; padding: .8rem .9rem; height: 100%;
  border: 1px solid var(--rule, #0002); border-radius: 10px; text-decoration: none;
  transition: border-color .12s ease, background-color .12s ease;
}
.cards a:hover { border-color: var(--accent); background: var(--accent-soft); }
.c-n { font-weight: 620; }
.c-v { font-family: Fraunces, Georgia, serif; font-size: 1.3rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.c-s { font-size: .82rem; opacity: .7; }

/* ------------------------------------------------------------------ a-to-z */
.az { list-style: none; padding: 0; margin: .5rem 0 1.6rem; columns: 2; column-gap: 2rem; }
@media (min-width: 900px) { .az { columns: 3; } }
.az li { break-inside: avoid; padding: .16rem 0; font-size: .93rem; }
.az-m { opacity: .55; font-size: .82em; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------- prose */
.lede-s { max-width: 62ch; opacity: .82; }
.note { font-size: .88rem; opacity: .72; margin-top: .8rem; }
.formula {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .95rem;
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  padding: .7rem .9rem; border-radius: 0 6px 6px 0; overflow-x: auto;
}
.bullets { max-width: 66ch; }
.bullets li { margin-bottom: .5rem; }
.srcline { font-size: .84rem; opacity: .7; margin-top: 1rem; }