/* ============================================================================
   WEIGHT CLASSES — the federation tables, one document.

   2026-09-01. Built because /faq/ sends people here: a fighter who does not
   know his division cannot use the app, and the question has search volume in
   every one of these sports.

   IT BORROWS /faq/'s LANGUAGE, NOT ITS FILE. White panels on the #F5F5F3 stage,
   hairlines inside them, main.css's shared `.eyebrow` for the column labels —
   the same grammar, declared here, because a route stylesheet is one route's.
   What it does NOT borrow is the centred head: that is /faq/'s own departure,
   granted for that page. This one anchors `.pmast` left against its rule, like
   every other satellite.

   THE NUMBERS ARE NOT IN THIS FILE and must never be. They live in render.py,
   copied from the app's `WeightClassCatalog`, and the two move together.
   ========================================================================== */

.weights-doc {
  /* Wider than /faq/'s 760: two columns of divisions side by side, and boxing's
     seventeen rows need somewhere to go. */
  --wcol: 940px;
}

/* ---- head --------------------------------------------------------------- */

/* The rule stops at the column rather than running the full shell — the same
   width the content below it uses. Nothing else about the chrome moves. */
.weights-doc .pmast {
  width: 100%;
  max-width: var(--wcol);
  margin-inline: auto;
}

.wlead {
  width: 100%;
  max-width: var(--wcol);
  margin: 14px auto 0;
  color: var(--ink-2);
  font-size: 1rem;
  letter-spacing: -0.012em;
  line-height: 1.5;
  text-wrap: pretty;
}

/* ---- body --------------------------------------------------------------- */

.wbody {
  width: 100%;
  max-width: var(--wcol);
  margin-inline: auto;
  padding: clamp(24px, 3vw, 36px) 0 clamp(40px, 5vw, 72px);
}

/* Jump links, not a sticky rail: the page is six sections long and a rail would
   need script to know where it is. An anchor row costs nothing and works with
   JavaScript off, which is the whole site's position. */
.wnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(20px, 2.4vw, 28px);
}

.wnav a {
  padding: 8px 14px;
  border: 1px solid var(--line);
  /* Literal, not `var(--r-full, 999px)`: `--r-full` is declared in faq.css,
     which never loads on this route, so the token was decorative and only the
     fallback ever painted. A fallback that is always the value is a lie about
     where the number lives. */
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-2);
  font-size: 0.855rem;
  font-weight: 540;
  letter-spacing: -0.012em;
  transition: color 180ms var(--ease-ui), border-color 180ms var(--ease-ui);
}

.wnav a:hover { color: var(--ink); border-color: rgba(14, 14, 13, 0.24); }

.wintro, .wend {
  max-width: 72ch;
  margin: 0;
  color: var(--ink-2);
  font-size: 0.965rem;
  line-height: 1.66;
  letter-spacing: -0.009em;
  text-wrap: pretty;
}

.wintro strong { color: var(--ink); font-weight: 620; }
.wend { margin-top: clamp(28px, 3vw, 40px); }
.wend a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.wend a:hover { text-decoration-color: var(--ink); }

/* ---- one sport ---------------------------------------------------------- */

.wsec { margin-top: clamp(30px, 3.6vw, 46px); scroll-margin-top: 24px; }

.wsec__t {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.3rem, 1.9vw, 1.55rem);
  font-weight: 660;
  letter-spacing: -0.032em;
  line-height: 1.15;
}

/* The sanctioning body, directly under its name. Sentence-case sans at eyebrow
   weight — never the mono UPPERCASE micro-label (main.css says so once, for the
   whole site). */
.wsec__f { margin: 6px 0 0; color: var(--ink-3); font-size: 0.815rem; font-weight: 560; letter-spacing: -0.006em; }
.wsec__n { max-width: 72ch; margin: 11px 0 0; color: var(--ink-2); font-size: 0.94rem; line-height: 1.6; letter-spacing: -0.009em; text-wrap: pretty; }

/* ---- the table ---------------------------------------------------------- */

.wpanel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(22px, 2.6vw, 40px);
  margin-top: 16px;
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px);
  background: var(--paper);
  /* Same edge and same shadow as `.fpanel`. The two were identical declaration
     for declaration and have to stay that way — this is one house panel used on
     two routes, not two panels that happen to agree. The audit of 2026-09-01
     measured white-on-`--stage` at 3.51 ΔL* with a 1px 10% line: a surface that
     does not separate from its ground at arm's length. The 26px shadow ramp is
     what the eye integrates; the hairline is not. */
  border: 1px solid rgba(14, 14, 13, 0.14);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(14, 14, 13, 0.05), 0 14px 34px -18px rgba(14, 14, 13, 0.22);
}

/* Boxing shares one table between the men's and the women's side, so the panel
   holds a single list — and seventeen rows in one column is a tower. It breaks
   into two print-style columns instead, which keeps the panel the same shape as
   its neighbours. */
.wpanel--one { grid-template-columns: minmax(0, 1fr); }
.wpanel--one .wlist { columns: 2; column-gap: clamp(22px, 2.6vw, 40px); }
.wpanel--one .wrow { break-inside: avoid; }

.wcol { min-width: 0; }
.wcol .eyebrow { margin: 0 0 4px; }

.wlist { margin: 0; padding: 0; list-style: none; }

.wrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(14, 14, 13, 0.06);
}

.wrow:last-child { border-bottom: 0; }
.wpanel--one .wrow:last-child { border-bottom: 1px solid rgba(14, 14, 13, 0.06); }

.wrow__n { color: var(--ink); font-size: 0.94rem; font-weight: 550; letter-spacing: -0.016em; }

/* Wrestling does not name its divisions: the name IS the
   limit. One cell, left-anchored, and the row stops pretending to be a pair. */
.wrow--solo { justify-content: flex-start; }
.wrow--solo .wrow__v { font-weight: 550; }

.wrow__v {
  flex: none;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.012em;
  white-space: nowrap;
}

/* The second unit, for the two federations that publish both. Not italic — <i>
   is here for the shape of the markup, not for the slant. */
.wrow__v i { margin-left: 8px; color: var(--ink-3); font-size: 0.8rem; font-weight: 500; font-style: normal; }

/* ---- mobile ------------------------------------------------------------- */

/* The bar is sticky from 1024 down, not from 760, so this override has to live
   in its own block: a hash link from the sport chips landed the section title
   24px from the top with 64px of bar over it, and every one of the six targets
   arrived with its heading hidden. Same fix, same number, as faq.css's `.q`. */
@media (max-width: 1024px) {
  .wsec { scroll-margin-top: 82px; }
  /* 32px chips are the page's own navigation. */
  .wnav a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 760px) {
  .wpanel { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wpanel--one .wlist { columns: 1; }
  .wcol + .wcol { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
  .wrow { padding: 11px 0; }
  .wnav { gap: 7px; }
  .wnav a { padding: 7px 12px; font-size: 0.82rem; }
}

/* Scoped, not `*`: a route stylesheet reaching the chrome through the universal
   selector is a § 6.1 breach that happens to be invisible, and main.css already
   zeroes durations globally. */
@media (prefers-reduced-motion: reduce) {
  .wnav a, .wsec { transition: none !important; }
}