/* ============================================================
   KitPalette — football kit colour reference
   ------------------------------------------------------------
   Design constraints driving this file:

   1. NO IMAGES. Every swatch, kit strip and colour block is
      rendered from numeric values in CSS. The two strongest
      competitors (footylogos, clubcolorcodes) reproduce club
      crests; not doing so is this site's legal advantage and
      the stylesheet has to make that viable.

   2. Palette avoids the owner's sibling sites' footprint
      (npibase #00897B, tips-health #0F6B52 — both teal/green).
      Ink blue + amber here.

   3. Swatches must sit on a neutral surface. Any tint in the
      page background shifts the perceived colour of a swatch,
      which defeats the purpose of a colour reference.

   4. The page is therefore built in two grounds, and the
      boundary between them carries meaning:

        DARK  — masthead and hero. Brand territory. Team colour
                is allowed to run full-bleed here, because
                nothing in this band is a value to be trusted.
        LIGHT — everything from the first swatch down. Reference
                territory, held neutral so published values are
                read accurately.

      The visual language is a stadium scoreboard: expanded
      display type set like squad numerals, rules that behave
      like pitch markings, and figures aligned on tabular
      numerals. That vocabulary comes from the subject rather
      than from a generic landing-page template.
   ============================================================ */

:root {
  /* --- surfaces: deliberately neutral greys, no colour cast --- */
  --ink:      #15171c;
  --ink-2:    #3b404a;
  --ink-3:    #666d79;
  --line:     #d6d9df;
  --line-2:   #e9ebef;
  --card:     #ffffff;
  --bg:       #f5f6f8;
  --sunk:     #fafbfc;

  /* --- brand ground: used ONLY above the first swatch ---
     Not a pure black. Biased a few points toward the interactive
     blue so the dark band and the links read as one family; a
     neutral #111 beside #2b4acb looks like two unrelated decisions. */
  --pitch:    #0E1117;
  --pitch-2:  #171B23;
  --pitch-3:  #232834;
  --chalk:    #F2F4F7;
  --chalk-2:  #AEB6C2;

  /* --- interactive --- */
  --act:      #2b4acb;
  --act-dark: #1e3699;
  --act-wash: #eef1fe;
  --act-edge: #c7d2f8;
  --act-lift: #7e93e8;   /* the blue, lifted to carry on --pitch */

  /* --- the single accent, spent in one place: the live figure
         in the hero. Amber already owns focus rings, so the page
         has one warm note and one cool one, not five. --- */
  --flag:     #E8A317;

  /* --- semantic: pass/fail on contrast data --- */
  --pass:     #19673a;
  --pass-wash:#e8f5ed;
  --warn:     #8a5700;
  --warn-wash:#fdf5e6;
  --warn-edge:#ecdab2;
  --fail:     #99201d;
  --fail-wash:#fcecec;

  --f:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fm: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  /* Display face. Archivo at full width stretch reads like squad
     numerals and scoreboard lettering — the subject's own type. */
  --fd: 'Archivo', 'Inter', system-ui, sans-serif;

  --r:    6px;
  --r-sm: 4px;
  --max:  1160px;

  --sh: 0 1px 2px rgba(20,23,28,.06);
  --sh-lift: 0 4px 14px rgba(20,23,28,.10);
}

/* Figures must align in columns wherever they are compared */
.mono, code, table, .cmp-head__metrics dd, .ratio, .pair__r { font-variant-numeric: tabular-nums; }

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition: none !important; animation: none !important; }
}

body {
  font-family: var(--f);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4 { line-height: 1.25; font-weight: 700; letter-spacing: -0.018em; text-wrap: balance; }
/* h1/h2 take the display face: section openings should feel like
   scoreboard labels. h3/h4 stay on the body face so dense prose
   does not turn into a wall of expanded caps. */
h1, h2 {
  font-family: var(--fd); font-weight: 800; font-stretch: 112%;
  letter-spacing: -.015em;
}
h1 { font-size: clamp(1.75rem, 4vw, 2.3rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }
p  { margin-bottom: 1rem; }

a { color: var(--act); text-decoration: none; }
a:hover { text-decoration: underline; }

/* One focus style, everywhere. Amber reads clearly against both the
   neutral chrome and against arbitrary club colours in swatches. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--warn);
  outline-offset: 2px;
  border-radius: 3px;
}

button { font: inherit; color: inherit; }
code, .mono { font-family: var(--fm); font-size: 0.875em; }

/* ============================================================
   SKIP LINK — static first child of <body>, works without JS
   ============================================================ */
.skip {
  position: absolute; top: -100%; left: 0; z-index: 200;
  background: var(--act); color: #fff; font-weight: 600;
  padding: .75rem 1.25rem;
}
.skip:focus { top: 0; color: #fff; }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }
.prose { max-width: 72ch; }
.pad-b { padding-bottom: 3rem; }

/* ============================================================
   HEADER
   ============================================================ */
.hdr { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 60; }
.hdr-in {
  max-width: var(--max); margin: 0 auto; padding: .8rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.logo {
  font-family: var(--fd); font-weight: 800; font-stretch: 125%;
  font-size: 1.05rem; color: var(--ink);
  letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .6rem;
}
.logo b { color: var(--act); font-weight: 800; }
.logo:hover { text-decoration: none; }

/* The mark sits a touch below the cap line so the two read as one object
   rather than as an icon parked beside a word. */
.logo__mark { width: 19px; height: 20px; flex: none; }
.logo__a { fill: var(--act); }
.logo__b { fill: var(--flag); }
.hdr--dark .logo__a { fill: var(--act-lift); }

.nav { display: flex; gap: .15rem; align-items: center; }
.nav a {
  padding: .5rem .8rem; font-size: .9rem; font-weight: 500; color: var(--ink-2);
  border-radius: var(--r-sm); min-height: 42px; display: inline-flex; align-items: center;
}
.nav a:hover, .nav a[aria-current="page"] { background: var(--act-wash); color: var(--act); text-decoration: none; }

.burger {
  display: none; background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
  min-width: 42px; min-height: 42px; cursor: pointer; align-items: center; justify-content: center;
}
.burger svg { width: 22px; height: 22px; stroke: var(--ink); }

.hdr-act { display: flex; align-items: center; gap: .5rem; }

/* ------------------------------------------------------------
   SEARCH TRIGGER
   Styled as a field rather than an icon: the shape tells a
   visitor they can type, which an icon alone does not. The key
   hint is on the button because that is where it is looked for.
   ------------------------------------------------------------ */
.srch-btn {
  display: none; align-items: center; gap: .5rem;
  padding: .45rem .6rem .45rem .7rem; min-height: 42px;
  background: var(--sunk); border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer;
  color: var(--ink-3); font: inherit; font-size: .88rem;
}
.has-search .srch-btn { display: inline-flex; }
.srch-btn:hover { border-color: var(--act-edge); background: var(--act-wash); color: var(--act); }
.srch-btn svg { width: 17px; height: 17px; flex: none; }
.srch-btn__label { font-weight: 500; }
.srch-btn__key {
  font-family: var(--fm); font-size: .72rem; line-height: 1;
  padding: .22rem .4rem; border: 1px solid var(--line);
  border-radius: 4px; background: var(--card); color: var(--ink-3);
}
.hdr--dark .srch-btn {
  background: var(--pitch-2); border-color: var(--pitch-3); color: var(--chalk-2);
}
.hdr--dark .srch-btn:hover { background: var(--pitch-3); color: var(--chalk); }
.hdr--dark .srch-btn__key { background: var(--pitch); border-color: var(--pitch-3); color: var(--chalk-2); }

@media (max-width: 620px) {
  /* The label and key hint go first: on a touch screen there is no "/" to
     press, and the icon alone is unambiguous at this width. */
  .srch-btn__label, .srch-btn__key { display: none; }
  .srch-btn { padding: .45rem; min-width: 42px; justify-content: center; }
}

/* ============================================================
   SEARCH DIALOG
   ============================================================ */
.srch { position: fixed; inset: 0; z-index: 200; }
.srch[hidden] { display: none; }
.srch__scrim { position: absolute; inset: 0; background: rgba(14, 17, 23, .55); }
body.srch-open { overflow: hidden; }

.srch__box {
  position: relative; max-width: 620px;
  /* Sits in the upper third rather than dead centre: the results grow
     downward, and a centred panel would jump as they appear. */
  margin: min(12vh, 7rem) auto 0; width: calc(100% - 2rem);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-lift);
  display: flex; flex-direction: column; max-height: 72vh; overflow: hidden;
}

.srch__bar {
  display: flex; align-items: center; gap: .65rem;
  padding: .85rem 1rem; border-bottom: 1px solid var(--line-2);
}
.srch__icon { width: 19px; height: 19px; color: var(--ink-3); flex: none; }
.srch__input {
  flex: 1; border: 0; background: none; font: inherit; font-size: 1.02rem;
  color: var(--ink); min-width: 0; padding: .2rem 0;
}
.srch__input:focus { outline: none; }
.srch__input::placeholder { color: var(--ink-3); }
.srch__input::-webkit-search-cancel-button { display: none; }
.srch__close {
  font-family: var(--fm); font-size: .72rem; color: var(--ink-3);
  padding: .3rem .45rem; border: 1px solid var(--line);
  border-radius: 4px; background: var(--sunk); cursor: pointer;
}
.srch__close:hover { color: var(--ink); border-color: var(--ink-3); }

.srch__results { overflow-y: auto; padding: .4rem; }
.srch__hint { padding: 1.4rem 1rem; color: var(--ink-3); font-size: .9rem; text-align: center; }

.srch__hit {
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem .7rem; border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none;
}
.srch__hit:hover, .srch__hit.is-on { background: var(--act-wash); text-decoration: none; }

/* The palette is the point of the site, so every result carries its colours
   rather than a generic result icon. */
.srch__chips {
  display: flex; flex: none; width: 46px; height: 28px;
  border-radius: 5px; overflow: hidden; border: 1px solid var(--line);
}
.srch__chip { flex: 1; min-width: 0; }
.srch__chip--none { background: var(--sunk); }

.srch__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; }
.srch__title { font-weight: 600; font-size: .94rem; }
.srch__meta {
  font-size: .78rem; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.srch__kind {
  flex: none; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 600; color: var(--ink-3);
}

.srch__foot {
  display: flex; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1rem; border-top: 1px solid var(--line-2);
  background: var(--sunk); font-size: .76rem; color: var(--ink-3);
}
.srch__foot span:last-child { margin-left: auto; }
.srch__foot kbd {
  font-family: var(--fm); font-size: .7rem; padding: .1rem .3rem; margin-right: .15rem;
  border: 1px solid var(--line); border-radius: 3px; background: var(--card);
}

@media (max-width: 620px) {
  .srch__box { margin-top: 0; width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; border: 0; }
  .srch__foot span:last-child { display: none; }
}

/* ------------------------------------------------------------
   The masthead joins the dark ground when it sits over the hero,
   so the band reads as one piece rather than a white bar parked
   on top of it. Scoped to a modifier, because only the index
   page opens on dark.
   ------------------------------------------------------------ */
/* Not sticky on the dark ground. A sticky bar here scrolls out of
   the hero and leaves the page background showing above the rail;
   letting it scroll away keeps the band whole. The light pages
   keep their sticky header, where there is nothing to expose. */
.hdr--dark { background: var(--pitch); border-bottom-color: var(--pitch-3); position: static; }
.hdr--dark .logo { color: var(--chalk); }
.hdr--dark .logo b { color: var(--act-lift); }
.hdr--dark .nav a { color: var(--chalk-2); }
.hdr--dark .nav a:hover,
.hdr--dark .nav a[aria-current="page"] { background: var(--pitch-2); color: var(--chalk); }
.hdr--dark .burger { border-color: var(--pitch-3); }
.hdr--dark .burger svg { stroke: var(--chalk); }
@media (max-width: 860px) {
  .hdr--dark .nav.open { background: var(--pitch); border-color: var(--pitch-3); }
}

@media (max-width: 860px) {
  .hdr-in { position: relative; }
  .burger { display: inline-flex; }
  .nav { display: none; }
  .nav.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--card); border: 1px solid var(--line); border-top: none;
    padding: .5rem; box-shadow: var(--sh-lift);
  }
  .nav.open a { font-size: 1rem; padding: .75rem; }
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.bc { font-size: .85rem; color: var(--ink-3); padding: 1rem 0 0; }
.bc a { color: var(--ink-3); }
.bc a:hover { color: var(--act); }
.bc .s { margin: 0 .4rem; color: var(--line); }

/* ============================================================
   HERO — the dark band
   ------------------------------------------------------------
   A scoreboard, not a landing-page hero. Three things carry it:

   1. A live colour rail across the top, built from real team
      values in the dataset. It is the subject stating itself —
      and it is honest, because no value in this band is being
      published as reference data.
   2. Expanded display type, set tight, like squad numerals.
   3. One live figure — the contrast ratio — rendered in the
      page's single accent. The hero demonstrates the product
      instead of describing it.

   This band is the ONLY place team colour touches the ground.
   Below it the page returns to neutral for the whole reference
   section. See constraint 4 at the top of this file.
   ============================================================ */
.hero {
  background: var(--pitch);
  color: var(--chalk);
  position: relative;
  overflow: hidden;
}

/* The rail: each segment is one team's primary, straight from
   the dataset. Rendered from values, never from artwork.

   Several NFL primaries are very dark (#002244, #0B162A,
   #241773) and simply vanish against this ground — a colour
   rail with invisible segments fails at its only job. A hairline
   between segments restores the edge without tinting any swatch,
   and the rail is tall enough for a colour to actually register. */
.hero__rail { display: flex; height: 14px; }
.hero__rail span {
  flex: 1;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.16);
}
.hero__rail span:first-child { box-shadow: none; }

.hero__in {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(2.5rem, 5.5vw, 4rem) 1.25rem clamp(2.5rem, 5vw, 3.75rem);
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2.5rem 3.5rem;
  /* Centred, not bottom-aligned: the card is a companion to the
     headline, and `end` left it stranded at the foot of a tall column. */
  align-items: center;
}
@media (max-width: 880px) {
  .hero__in { grid-template-columns: 1fr; align-items: start; gap: 2rem; }
}

.hero__eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--chalk-2);
  display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem;
}
/* A pitch marking, not a decorative flourish */
.hero__eyebrow::after { content: ''; height: 1px; flex: 1; background: var(--pitch-3); }

.hero__h {
  font-family: var(--fd);
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(2.15rem, 5.4vw, 3.9rem);
  line-height: .95;
  letter-spacing: -.022em;
  text-transform: uppercase;
  /* The line breaks are authored with <br>, so balancing would
     fight them; pretty only guards against a short last line. */
  text-wrap: pretty;
  margin-bottom: 0;
}
/* The second line drops to the body face: the contrast between a
   numeral-like display line and plain text is the type pairing
   doing its job. */
.hero__h em {
  display: block; font-family: var(--f); font-style: normal;
  font-weight: 500; font-stretch: normal; text-transform: none;
  font-size: clamp(.95rem, 1.7vw, 1.25rem); line-height: 1.5;
  letter-spacing: 0; color: var(--chalk-2);
  margin-top: 1.1rem; max-width: 46ch;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.9rem; }
.hero__btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .72rem 1.15rem; border-radius: var(--r-sm);
  font-size: .92rem; font-weight: 600; min-height: 46px;
  border: 1px solid transparent;
}
.hero__btn--main { background: var(--chalk); color: var(--pitch); }
.hero__btn--main:hover { background: #fff; text-decoration: none; }
.hero__btn--ghost { border-color: var(--pitch-3); color: var(--chalk); }
.hero__btn--ghost:hover { border-color: var(--chalk-2); background: var(--pitch-2); text-decoration: none; }

/* ------------------------------------------------------------
   HERO PROOF CARD
   The product, running, in the hero. Two real team colours, the
   ratio computed by the same engine that powers every page.
   ------------------------------------------------------------ */
.proof {
  background: var(--pitch-2); border: 1px solid var(--pitch-3);
  border-radius: var(--r); padding: 1.1rem; width: min(300px, 100%);
}
.proof__l {
  font-size: .68rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--chalk-2); margin-bottom: .75rem;
}
.proof__demo {
  border-radius: var(--r-sm); padding: 1.15rem .9rem; text-align: center;
  font-family: var(--fd); font-weight: 800; font-stretch: 125%;
  font-size: 1.3rem; text-transform: uppercase; letter-spacing: -.01em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
/* The figure leads and the explanation sits beneath it, rather
   than the two competing for a narrow row. */
.proof__r { margin-top: .85rem; }
.proof__n {
  display: block;
  font-family: var(--fd); font-weight: 800; font-stretch: 125%;
  font-size: 2.3rem; line-height: 1; color: var(--flag);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.proof__v {
  display: block; font-size: .8rem; line-height: 1.45;
  color: var(--chalk-2); margin-top: .4rem;
}

/* ============================================================
   PAGE HEAD
   ============================================================ */
.ph { padding: 1.1rem 0 1.75rem; }
.ph .eyebrow {
  font-size: .73rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-3); margin-bottom: .55rem;
}
.ph h1 { margin-bottom: .7rem; max-width: 32ch; }
.ph .sub { font-size: 1.08rem; color: var(--ink-2); max-width: 66ch; }

/* ------------------------------------------------------------
   PROVENANCE BAR
   The site's core differentiator: no competitor states where a
   value came from or when it was checked.
   ------------------------------------------------------------ */
.prov {
  display: flex; flex-wrap: wrap; gap: .55rem 1.4rem; align-items: center;
  margin-top: 1.2rem; padding: .8rem 1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  font-size: .85rem; color: var(--ink-2); box-shadow: var(--sh);
}
.prov-i { display: inline-flex; align-items: center; gap: .45rem; }
.prov-i svg { width: 15px; height: 15px; flex-shrink: 0; }
.prov a { font-weight: 600; }

/* ============================================================
   SWATCH — the core content unit
   ============================================================ */
.sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px,1fr)); gap: 1rem; margin-bottom: 1.5rem; }

.sw { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); }

/* The chip carries an arbitrary club colour, so it needs an inner
   hairline rather than relying on contrast with the page. Without
   this, white and near-white kit colours become invisible blocks. */
.sw__chip { height: 104px; position: relative; box-shadow: inset 0 0 0 1px rgba(20,23,28,.10); }
.sw__chip .ratio {
  position: absolute; right: .45rem; bottom: .45rem;
  font-family: var(--fm); font-size: .68rem; font-weight: 600;
  padding: .14rem .4rem; border-radius: 3px;
  background: rgba(255,255,255,.94); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.sw__body { padding: .8rem; }
.sw__name { font-weight: 700; font-size: .95rem; }
.sw__role { font-size: .73rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-bottom: .55rem; }
.sw__codes { border-top: 1px solid var(--line-2); }
.sw__row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .32rem 0; border-bottom: 1px solid var(--line-2); }
.sw__row:last-child { border-bottom: none; }
.sw__k { font-size: .7rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.sw__v { font-family: var(--fm); font-size: .8rem; }

/* ============================================================
   COPY BUTTON
   ============================================================ */
.copy {
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--fm); font-size: .78rem; padding: .18rem .45rem;
  cursor: pointer; min-height: 30px; transition: border-color .15s, background .15s, color .15s;
}
.copy:hover { border-color: var(--act); color: var(--act); }
.copy[data-done] { background: var(--pass-wash); border-color: var(--pass); color: var(--pass); }

/* ============================================================
   KIT TABS + KIT STRIP
   Home/away/third differ and change every season — no competitor
   splits them, which is the main content gap this site fills.
   ============================================================ */
.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; overflow-x: auto; }
.tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: .7rem 1rem; font-size: .9rem; font-weight: 600; color: var(--ink-3);
  cursor: pointer; white-space: nowrap; min-height: 44px;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--act); border-bottom-color: var(--act); }
.pane { display: none; }
.pane[data-on] { display: block; }

.strip { display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.piece { width: 78px; }
.piece__c { height: 66px; border-radius: 4px 4px 7px 7px; box-shadow: inset 0 0 0 1px rgba(20,23,28,.14); }
.piece__l { font-size: .69rem; color: var(--ink-3); text-align: center; margin-top: .3rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* ============================================================
   CONTRAST PAIR CARDS
   Live demonstration — the text is actually rendered in the two
   colours being measured, so the reader sees the result.
   ============================================================ */
.pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px,1fr)); gap: .8rem; margin-bottom: 1.25rem; }
.pair { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); }
.pair__demo { padding: 1.05rem .75rem; text-align: center; font-weight: 700; font-size: 1.02rem; box-shadow: inset 0 0 0 1px rgba(20,23,28,.07); }
.pair__meta { padding: .45rem .7rem; border-top: 1px solid var(--line-2); display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.pair__r { font-family: var(--fm); font-size: .78rem; font-weight: 600; }

.tag { font-size: .68rem; font-weight: 700; padding: .12rem .42rem; border-radius: 3px; letter-spacing: .03em; white-space: nowrap; }
.tag--aaa  { background: var(--pass-wash); color: var(--pass); }
.tag--aa   { background: var(--pass-wash); color: var(--pass); }
.tag--lg   { background: var(--warn-wash); color: var(--warn); }
.tag--fail { background: var(--fail-wash); color: var(--fail); }

/* ============================================================
   KIT MOCKUP
   ------------------------------------------------------------
   A vector shirt diagram filled from the club's own colour
   values. This is the visual hook the site needs, built without
   touching club artwork: the geometry is a generic shirt outline
   we draw, and the only club-derived input is the hex codes.
   Competitors reproduce crests and offer logo downloads, which
   distributes registered trademarks — this does not.
   ============================================================ */
.mock {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--sh);
}
@media (max-width: 720px) { .mock { grid-template-columns: 1fr; } }

/* Neutral stage — any tint here would distort the kit colours */
.mock__stage {
  background: repeating-conic-gradient(var(--sunk) 0% 25%, #fff 0% 50%) 50%/16px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: .75rem;
}
.mock__stage svg { width: 100%; height: auto; display: block; }

.mock__side > :last-child { margin-bottom: 0; }
.mock__title { font-weight: 700; font-size: 1.02rem; margin-bottom: .2rem; }
.mock__note { font-size: .85rem; color: var(--ink-3); margin-bottom: 1rem; }

/* Colour pickers — let the reader test their own values against
   the diagram, which is something a photograph can never do. */
.mock__ctrl { display: grid; gap: .55rem; margin-bottom: 1rem; }
.mock__row { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: center; }
.mock__lab { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.mock__hex { font-family: var(--fm); font-size: .8rem; color: var(--ink-2); min-width: 7ch; text-align: right; }
.mock__row input[type="color"] {
  -webkit-appearance: none; appearance: none;
  width: 44px; height: 32px; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
}
.mock__row input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.mock__row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 2px; }
.mock__row input[type="color"]::-moz-color-swatch { border: none; border-radius: 2px; }

/* Pushes a kit's palette into the diagram above */
.btn-preset {
  background: var(--act-wash); border: 1px solid var(--act-edge); border-radius: var(--r-sm);
  padding: .4rem .7rem; font-size: .82rem; font-weight: 600; color: var(--act);
  cursor: pointer; min-height: 38px;
}
.btn-preset:hover { background: var(--act); border-color: var(--act); color: #fff; }

/* Pattern switcher */
.mock__pat { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1rem; }
.mock__pat button {
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .34rem .62rem; font-size: .8rem; font-weight: 600; color: var(--ink-2);
  cursor: pointer; min-height: 36px;
}
.mock__pat button:hover { border-color: var(--act); color: var(--act); }
.mock__pat button[aria-pressed="true"] { background: var(--act); border-color: var(--act); color: #fff; }

/* ============================================================
   LOGO PLACEMENT
   ------------------------------------------------------------
   The visitor's own artwork, dropped onto the diagram. No team
   logo ships with this site; everything rendered here arrives at
   runtime from the visitor's machine and never leaves it.
   ============================================================ */
.mark {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.25rem; margin-bottom: 1.5rem; box-shadow: var(--sh);
}
.mark__head {
  display: flex; justify-content: space-between; align-items: start;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.mark__title { font-size: 1.05rem; margin: 0 0 .25rem; }
.mark__sub { font-size: .9rem; color: var(--ink-2); max-width: 62ch; }

/* The privacy claim is the first thing a cautious visitor looks for */
.mark__priv {
  display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0;
  font-size: .78rem; font-weight: 600; color: var(--pass);
  background: var(--pass-wash); border-radius: var(--r-sm); padding: .35rem .6rem;
}
.mark__priv svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------
   DROP ZONE — also the file-picker label, so one target serves
   drag-and-drop, click and keyboard alike.
   ------------------------------------------------------------ */
.mark__drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; text-align: center; cursor: pointer;
  padding: 1.6rem 1rem; border: 2px dashed var(--line);
  border-radius: var(--r); background: var(--sunk);
  transition: border-color .15s, background .15s;
}
.mark__drop:hover { border-color: var(--act); background: var(--act-wash); }
.mark__drop.is-over { border-color: var(--act); background: var(--act-wash); border-style: solid; }
.mark__drop svg { width: 26px; height: 26px; stroke: var(--ink-3); }
.mark__drop:hover svg, .mark__drop.is-over svg { stroke: var(--act); }
.mark__drop-t { font-weight: 600; font-size: .92rem; }
.mark__drop-s { font-size: .78rem; color: var(--ink-3); }
/* Keyboard focus lands on the visually hidden input, so the ring
   has to be drawn on the label the user can actually see. */
.mark__drop:focus-within { outline: 3px solid var(--warn); outline-offset: 2px; }

.mark__note { font-size: .83rem; color: var(--ink-3); margin: .65rem 0 0; }
.mark-note--bad { color: var(--fail); font-weight: 600; }

/* Controls appear only once there is a mark to control */
.mark__panel { display: none; margin-top: 1.1rem; }
[data-has-logo] .mark__panel { display: block; }
[data-has-logo] .mark__drop { padding: .9rem 1rem; }
[data-has-logo] .mark__drop-s { display: none; }

.mark__hint {
  font-size: .88rem; color: var(--ink-2);
  background: var(--act-wash); border: 1px solid var(--act-edge);
  border-radius: var(--r-sm); padding: .6rem .75rem; margin-bottom: 1rem;
}

.mark__ctrl { display: grid; gap: .6rem; margin-bottom: 1rem; }
.mark__row { display: grid; grid-template-columns: 4.5rem 1fr 3.5rem; gap: .75rem; align-items: center; }
.mark__row input[type="range"] { width: 100%; accent-color: var(--act); min-height: 32px; }
.mark__val { font-size: .8rem; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }

.mark__tints { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.mark__tints .mock__lab { margin-right: .35rem; }
.mark__tints button {
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .34rem .7rem; font-size: .82rem; font-weight: 600; color: var(--ink-2);
  cursor: pointer; min-height: 36px;
}
.mark__tints button:hover { border-color: var(--act); color: var(--act); }
.mark__tints button[aria-pressed="true"] { background: var(--act); border-color: var(--act); color: #fff; }

.mark__acts { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; }
.mark__clear {
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .4rem .7rem; font-size: .82rem; font-weight: 600; color: var(--ink-3);
  cursor: pointer; min-height: 38px;
}
.mark__clear:hover { border-color: var(--fail); color: var(--fail); }

/* ------------------------------------------------------------
   CONTRAST READOUT — the question a printer actually has:
   will this mark read on this fabric colour.
   ------------------------------------------------------------ */
.mark-read:empty { display: none; }
.mark-read {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--sunk); padding: .85rem;
}
.mark-read__grid { display: flex; gap: .85rem; align-items: start; }
.mark-read__sw {
  width: 54px; height: 54px; border-radius: var(--r-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(20,23,28,.18);
}
.mark-read__dot { width: 22px; height: 22px; border-radius: 50%; }
.mark-read__r { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.mark-read__r .mono { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mark-read__p { font-size: .88rem; color: var(--ink-2); margin-bottom: .25rem; }
.mark-read__m { font-size: .78rem; color: var(--ink-3); }
.mark-read__none { font-size: .85rem; color: var(--ink-3); }

/* ------------------------------------------------------------
   THE MARK ON THE DIAGRAM
   Sits above the SVG rather than inside it, so re-rendering the
   shirt cannot destroy it.
   ------------------------------------------------------------ */
.mark-layer {
  position: absolute; cursor: grab; touch-action: none;
  /* A permanent ring, not a hover-only one: the mark has to look
     draggable before the pointer is anywhere near it. It never
     reaches the exported PNG, which is composed on canvas from the
     source image rather than from this element. */
  outline: 2px dashed rgba(20,23,28,.45); outline-offset: 4px;
}
/* A grab handle, so the affordance survives on touch where there
   is no hover state at all. */
.mark-layer::after {
  content: ''; position: absolute; right: -9px; bottom: -9px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--act); box-shadow: 0 0 0 2px #fff;
}
.mark-layer:hover { outline-color: var(--act); }
.mark-layer.is-dragging { cursor: grabbing; outline: 2px solid var(--act); }
.mark-layer__img { width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; }

@media (max-width: 560px) {
  .mark__row { grid-template-columns: 3.75rem 1fr 3rem; gap: .5rem; }
  .mark-read__grid { flex-direction: column; }
}

/* ============================================================
   EXPORT BLOCK
   ============================================================ */
.export { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 1.5rem; box-shadow: var(--sh); }
.export .tabs { margin-bottom: 0; }
.export__pane { padding: 1rem; display: none; }
.export__pane[data-on] { display: block; }
.export pre {
  font-family: var(--fm); font-size: .82rem; line-height: 1.7;
  background: var(--sunk); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: .85rem; overflow-x: auto;
}
.export__foot { display: flex; justify-content: flex-end; padding: 0 1rem 1rem; }

/* ============================================================
   PANEL + FACT TABLE
   ============================================================ */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 1.25rem; box-shadow: var(--sh); }
.panel__h {
  padding: .8rem 1rem; border-bottom: 1px solid var(--line); background: var(--sunk);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-3); display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
}
.panel__b { padding: 1rem; }
.panel__b > :last-child { margin-bottom: 0; }

.facts { width: 100%; border-collapse: collapse; font-size: .93rem; }
.facts th, .facts td { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.facts th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 700; width: 32%; }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: none; }

@media (max-width: 560px) {
  .facts th, .facts td { display: block; width: auto; }
  .facts th { border-bottom: none; padding-bottom: 0; }
  .facts td { padding-top: .15rem; }
}

/* ============================================================
   CALLOUT
   ============================================================ */
.call { border: 1px solid var(--line); border-left: 4px solid var(--act); border-radius: var(--r); background: var(--card); padding: 1rem; margin-bottom: 1.25rem; }
.call--warn { border-left-color: var(--warn); background: var(--warn-wash); border-color: var(--warn-edge); }
.call h4 { margin-bottom: .4rem; }
.call p { font-size: .92rem; color: var(--ink-2); }
.call > :last-child { margin-bottom: 0; }

/* ============================================================
   CITATION
   ============================================================ */
.cite { font-size: .83rem; color: var(--ink-3); border-left: 2px solid var(--line); padding-left: .85rem; margin-bottom: 1.25rem; }
.cite a { color: var(--ink-3); text-decoration: underline; }

/* ============================================================
   HISTORY TIMELINE — editorial content that cannot be generated
   from a hex value. This is what defeats "thin content".
   ============================================================ */
.hist { border-left: 2px solid var(--line); margin: 1.25rem 0 1.5rem; padding-left: 1.3rem; }
.hist__row { position: relative; padding-bottom: 1.15rem; }
.hist__row::before {
  content: ''; position: absolute; left: -1.62rem; top: .5rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--act); box-shadow: 0 0 0 3px var(--bg);
}
.hist__yr { font-family: var(--fm); font-size: .78rem; color: var(--act); font-weight: 600; }
.hist__t { font-weight: 700; font-size: .96rem; }
.hist__d { font-size: .89rem; color: var(--ink-2); }
.hist__sw { display: inline-flex; gap: .2rem; vertical-align: -2px; margin-left: .35rem; }
.hist__sw i { width: 13px; height: 13px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(20,23,28,.18); display: inline-block; }

/* ============================================================
   INDEX CARDS — league/club listings
   ============================================================ */
.ix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px,1fr)); gap: 1rem; }
.ix {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; color: var(--ink); box-shadow: var(--sh);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ix:hover { border-color: var(--act); box-shadow: var(--sh-lift); transform: translateY(-2px); text-decoration: none; color: var(--ink); }

/* Colour identity via a CSS strip, never a crest image. The strip
   is tall enough to actually show the palette — at 9px it read as
   a border; the colours are the content, so they get the space. */
.ix__strip { height: 46px; display: flex; }
.ix__strip span { flex: 1; transition: flex .22s ease; }
/* The primary takes over on hover: the card previews its own
   palette hierarchy rather than just lifting. */
.ix:hover .ix__strip span:first-child { flex: 2.2; }
@media (prefers-reduced-motion: reduce) {
  .ix__strip span, .ix:hover .ix__strip span:first-child { transition: none; flex: 1; }
}

.ix__b { padding: .85rem 1rem; }
.ix__n {
  font-family: var(--fd); font-weight: 800; font-stretch: 112%;
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: -.01em;
  margin-bottom: .18rem;
}
.ix__m { font-size: .8rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }

/* ============================================================
   SECTION HEAD — conference / league dividers
   ------------------------------------------------------------
   A label, a rule and a count. The rule is a pitch marking and
   the count is real information (how many teams are listed),
   so the structure encodes something true rather than decorating.
   ============================================================ */
.sec {
  display: flex; align-items: baseline; gap: 1rem;
  margin: 2.75rem 0 .35rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  /* The heading, rule and count sit on one line when there is room and wrap
     when there is not. Without this the nowrap heading forced the whole page
     wider than a phone viewport on every generated page that uses a section
     head — which is almost all of them. */
  flex-wrap: wrap;
}
.sec:first-of-type { margin-top: 2rem; }
.sec h2 { margin: 0; min-width: 0; }
.sec__r { flex: 1 1 2rem; height: 1px; background: var(--line-2); }
.sec__n {
  font-family: var(--fm); font-size: .78rem; font-weight: 600;
  color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  /* The rule earns its space only when the row fits; on a phone it just
     pushes the count onto its own line. */
  .sec__r { display: none; }
  .sec { gap: .5rem 1rem; }
}
.sec + .mute { margin-bottom: 1.25rem; }

/* ============================================================
   TABLES IN PROSE
   ============================================================ */
.prose h2 { margin: 2.4rem 0 .9rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.prose h3 { margin: 1.6rem 0 .6rem; }
.prose ul, .prose ol { margin: 0 0 1rem 1.5rem; }
.prose li { margin-bottom: .4rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.prose th, .prose td { padding: .62rem .8rem; text-align: left; border-bottom: 1px solid var(--line-2); }
.prose thead th { background: var(--sunk); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.prose tbody tr:last-child td { border-bottom: none; }

/* Wide tables scroll inside their own container — the page body
   must never scroll horizontally. */
.scroll-x { overflow-x: auto; margin-bottom: 1.25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.scroll-x table { margin: 0; }

/* ============================================================
   SEARCH
   ------------------------------------------------------------
   Filters the club dataset client-side. Deliberately a real
   <form> wrapping a real <input>: with scripting off it still
   submits somewhere sensible rather than being a dead box.
   ============================================================ */
.search { position: relative; margin: 2.25rem 0 1.5rem; max-width: 520px; }
.search__field { display: flex; gap: .5rem; }
.search input[type="search"] {
  flex: 1; min-width: 0;
  padding: .7rem .9rem; font-size: 1rem;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  min-height: 46px;
}
.search input[type="search"]:focus { border-color: var(--act); }
.search__count { font-size: .82rem; color: var(--ink-3); margin-top: .45rem; }

/* Result list sits under the field, as a plain list — no overlay,
   so it works on touch and keyboard without focus trapping. */
.search__out { margin-top: .75rem; }
.search__hit {
  display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center;
  padding: .55rem .7rem; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink); margin-bottom: .4rem;
}
.search__hit:hover { border-color: var(--act); text-decoration: none; color: var(--ink); }
.search__dots { display: flex; gap: .15rem; }
.search__dots i {
  width: 13px; height: 13px; border-radius: 3px; display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(20,23,28,.20);
}
.search__name { font-weight: 600; font-size: .94rem; }
.search__meta { font-size: .78rem; color: var(--ink-3); }
.search__empty { font-size: .9rem; color: var(--ink-3); padding: .6rem 0; }

/* ============================================================
   RELATED CLUBS
   ------------------------------------------------------------
   The cheapest lever on pages-per-session: a reader who came for
   one club usually wants the rival or the city neighbour next.
   ============================================================ */
.rel { margin: 2rem 0; }
.rel h2 { margin-top: 0; }
.rel__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: .7rem; }
.rel__card {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; color: var(--ink); box-shadow: var(--sh);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.rel__card:hover { border-color: var(--act); transform: translateY(-2px); box-shadow: var(--sh-lift); text-decoration: none; color: var(--ink); }
.rel__strip { height: 34px; display: flex; }
.rel__strip span { flex: 1; }
.rel__b { padding: .6rem .7rem; }
.rel__n { font-weight: 700; font-size: .9rem; }
.rel__w { font-size: .76rem; color: var(--ink-3); }

/* ============================================================
   COLOUR GAME
   ------------------------------------------------------------
   Pure data: shows a palette, asks which club it belongs to.
   Needs no artwork, and gives a reason to return.
   ============================================================ */
.game {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.25rem; margin-bottom: 1.5rem; box-shadow: var(--sh);
}
.game__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.game__title { font-weight: 700; font-size: 1.05rem; }
.game__score { font-family: var(--fm); font-size: .85rem; color: var(--ink-3); }

.game__swatch { display: flex; height: 92px; border-radius: var(--r-sm); overflow: hidden; margin-bottom: .5rem; box-shadow: inset 0 0 0 1px rgba(20,23,28,.14); }
.game__swatch span { flex: 1; }
.game__hexes { display: flex; gap: .5rem; flex-wrap: wrap; font-family: var(--fm); font-size: .78rem; color: var(--ink-3); margin-bottom: 1rem; }

.game__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: .5rem; }
.game__opt {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .65rem .8rem; font-size: .92rem; font-weight: 600; color: var(--ink);
  cursor: pointer; text-align: left; min-height: 46px;
}
.game__opt:hover:not(:disabled) { border-color: var(--act); color: var(--act); }
.game__opt:disabled { cursor: default; }
.game__opt[data-state="right"] { background: var(--pass-wash); border-color: var(--pass); color: var(--pass); }
.game__opt[data-state="wrong"] { background: var(--fail-wash); border-color: var(--fail); color: var(--fail); }
.game__opt[data-state="dim"]   { opacity: .55; }

.game__after { margin-top: 1rem; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.game__verdict { font-size: .92rem; font-weight: 600; }
.game__next {
  background: var(--act); border: 1px solid var(--act); border-radius: var(--r-sm);
  color: #fff; padding: .5rem .9rem; font-size: .88rem; font-weight: 600;
  cursor: pointer; min-height: 40px;
}
.game__next:hover { background: var(--act-dark); }

/* ============================================================
   TWO-TEAM COMPARISON
   ------------------------------------------------------------
   The one block no competitor has. Every incumbent publishes
   one team per page, so the cross-team pairings — the ones a
   matchup graphic actually needs — exist nowhere.
   ============================================================ */

/* --- pickers --- */
.cmp-pick {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1rem; margin-bottom: 1.5rem; box-shadow: var(--sh);
}
.cmp-pick__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem; align-items: end; }
.cmp-pick__col { display: grid; gap: .3rem; min-width: 0; }
.cmp-pick select {
  width: 100%; font: inherit; font-size: .95rem;
  padding: .6rem .7rem; min-height: 46px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
}
.cmp-pick select:focus { border-color: var(--act); }
.cmp-pick__foot { margin-top: .85rem; }

/* Sits between the two selects, so it aligns to their boxes, not their labels */
.cmp-swap {
  background: var(--act-wash); border: 1px solid var(--act-edge); border-radius: var(--r-sm);
  color: var(--act); cursor: pointer;
  width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cmp-swap:hover { background: var(--act); border-color: var(--act); color: #fff; }
.cmp-swap svg { width: 20px; height: 20px; }

@media (max-width: 620px) {
  .cmp-pick__row { grid-template-columns: 1fr; }
  /* Rotate the arrows a quarter turn once the selects stack vertically */
  .cmp-swap { justify-self: center; transform: rotate(90deg); }
}

/* ------------------------------------------------------------
   VERDICT HEADER
   The answer before the evidence: someone checking a matchup
   wants "do these clash" first and the ratios second.
   ------------------------------------------------------------ */
.cmp-head {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; margin-bottom: 1.75rem; box-shadow: var(--sh);
}
.cmp-head__bars { display: flex; height: 54px; }
.cmp-head__bars span { flex: 1; box-shadow: inset 0 0 0 1px rgba(20,23,28,.10); }
.cmp-head__b { padding: 1rem 1.1rem; border-top: 3px solid var(--line); }
.cmp-head--pass .cmp-head__b { border-top-color: var(--pass); }
.cmp-head--warn .cmp-head__b { border-top-color: var(--warn); }
.cmp-head--fail .cmp-head__b { border-top-color: var(--fail); }

.cmp-head__top { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .6rem; }
.cmp-head__t { font-size: clamp(1.15rem, 2.6vw, 1.45rem); margin: 0; }
.cmp-head__l { font-size: .92rem; color: var(--ink-2); max-width: 72ch; margin-bottom: .85rem; }

/* Both metrics are published, not just the verdict they produced — a reader
   who disagrees with the call can see which axis drove it. */
.cmp-head__metrics { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-bottom: .75rem; }
.cmp-head__metrics dt {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3);
}
.cmp-head__metrics dd { font-size: 1.05rem; font-weight: 600; }

/* ------------------------------------------------------------
   GREYSCALE PROOF
   The claim the verdict makes about monochrome is demonstrated
   rather than asserted: the filter does the desaturation, so
   these two chips cannot disagree with the figures above them.
   ------------------------------------------------------------ */
.cmp-head__g { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; }
.cmp-head__gsw {
  width: 34px; height: 20px; border-radius: 3px; flex-shrink: 0;
  filter: grayscale(100%);
  box-shadow: inset 0 0 0 1px rgba(20,23,28,.20);
}
/* Butt the pair together so any shared edge is visible */
.cmp-head__gsw + .cmp-head__gsw { margin-left: -.5rem; }

/* --- shared two-up grid: palettes, and the best/worst cards --- */
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.75rem; }
@media (max-width: 700px) { .cmp-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   PALETTE COLUMNS
   The hex sits on its own colour, so the label doubles as a
   legibility demonstration — the text colour is picked by
   measurement in compare.js, not by a lightness guess.
   ------------------------------------------------------------ */
.cmp-pal {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--sh);
}
.cmp-pal__h { padding: .8rem 1rem; border-bottom: 1px solid var(--line); background: var(--sunk); }
.cmp-pal__n { display: block; font-weight: 700; font-size: 1rem; }
.cmp-pal__m { display: block; font-size: .78rem; color: var(--ink-3); }

.cmp-sw {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .85rem 1rem; box-shadow: inset 0 0 0 1px rgba(20,23,28,.08);
}
.cmp-sw__r { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }

/* Transparent copy button — it has to read against an arbitrary
   team colour, so it borrows the swatch's computed text colour. */
.cmp-sw__h {
  background: none; border: 1px solid currentColor; border-radius: var(--r-sm);
  color: inherit; font-family: var(--fm); font-size: .82rem; font-weight: 600;
  padding: .22rem .5rem; cursor: pointer; min-height: 32px; opacity: .9;
}
.cmp-sw__h:hover { opacity: 1; background: rgba(255,255,255,.14); }
.cmp-sw__h[data-done] { background: rgba(255,255,255,.22); }

.cmp-pal__f { padding: .7rem 1rem; margin: 0; font-size: .85rem; border-top: 1px solid var(--line-2); }

/* ------------------------------------------------------------
   CROSS MATRIX
   Each cell renders one team's colour as text on the other's as
   background, so the measured figure and the visible result sit
   together and the reader can check the number against its own
   demonstration.
   ------------------------------------------------------------ */
.cmp-mx { width: 100%; border-collapse: collapse; font-size: .88rem; }
.cmp-mx th, .cmp-mx td {
  padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2); vertical-align: top;
}
.cmp-mx th:last-child, .cmp-mx td:last-child { border-right: none; }
.cmp-mx tbody tr:last-child th, .cmp-mx tbody tr:last-child td { border-bottom: none; }
.cmp-mx thead th { background: var(--sunk); white-space: nowrap; }
.cmp-mx tbody th { background: var(--sunk); white-space: nowrap; font-weight: 600; }

.cmp-mx__sw {
  display: inline-block; width: 15px; height: 15px; border-radius: 3px;
  vertical-align: -3px; margin-right: .4rem;
  box-shadow: inset 0 0 0 1px rgba(20,23,28,.20);
}
.cmp-mx__hx { font-size: .76rem; color: var(--ink-2); }

.cmp-mx__d {
  display: inline-block; min-width: 30px; text-align: center;
  padding: .18rem .34rem; border-radius: 3px; font-weight: 700; font-size: .9rem;
  margin-right: .4rem; box-shadow: inset 0 0 0 1px rgba(20,23,28,.14);
}
.cmp-mx__r { font-size: .8rem; font-weight: 600; margin-right: .35rem; }

@media (max-width: 560px) {
  .cmp-mx th, .cmp-mx td { padding: .45rem .5rem; }
  .cmp-mx__d { display: block; margin: 0 0 .25rem; }
}

/* ------------------------------------------------------------
   BEST / WORST CARDS
   The matrix carries everything; these pull out the two
   extremes, which is what a designer acts on.
   ------------------------------------------------------------ */
.cmp-pick-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--sh);
}
.cmp-pick-card__demo {
  padding: 1.6rem 1rem; text-align: center; font-weight: 700; font-size: 1.05rem;
  box-shadow: inset 0 0 0 1px rgba(20,23,28,.07);
}
.cmp-pick-card__b { padding: .9rem 1rem; }
.cmp-pick-card__t { font-weight: 700; font-size: .98rem; margin-bottom: .3rem; }
.cmp-pick-card__p { font-size: .88rem; color: var(--ink-2); margin-bottom: .6rem; }
.cmp-pick-card__m { display: flex; flex-wrap: wrap; gap: .45rem .7rem; align-items: center; font-size: .8rem; color: var(--ink-3); }

/* ============================================================
   STUDIO
   ------------------------------------------------------------
   A tool, not a document: scanned and operated rather than read.
   The canvas holds the eye, the controls sit in a quiet rail, and
   the preflight panel runs full width beneath both — because the
   verdict is the point of the page, not a footnote to it.
   ============================================================ */
.studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}
/* Both tracks must be allowed to shrink. A bare `1fr` takes its
   minimum from the content, so the canvas column pushed the grid
   wider than the viewport on a phone and the whole page scrolled
   sideways. minmax(0,1fr) is what actually lets it compress. */
@media (max-width: 900px) { .studio { grid-template-columns: minmax(0, 1fr); } }

.studio__stage-col { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }

.studio__sides { display: flex; gap: .3rem; flex-wrap: wrap; }
.studio__sides button {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .45rem .9rem; font-size: .88rem; font-weight: 600; color: var(--ink-2);
  cursor: pointer; min-height: 40px;
}
.studio__sides button:hover { border-color: var(--act); color: var(--act); }
.studio__sides button[aria-pressed="true"] { background: var(--act); border-color: var(--act); color: #fff; }
/* The print-area toggle is a different kind of control from the
   side switch, so it is pushed away rather than sitting in the set */
.studio__areabtn { margin-left: auto; }

/* Neutral chequerboard stage: any tint here would shift the
   garment colour the user is judging. */
.studio__stage {
  background: repeating-conic-gradient(var(--sunk) 0% 25%, #fff 0% 50%) 50%/18px 18px;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: .75rem; box-shadow: var(--sh);
}
.studio__stage canvas { display: block; width: 100%; height: auto; touch-action: none; }

.studio__hint { font-size: .82rem; color: var(--ink-3); margin: 0; }
.studio__note { font-size: .83rem; color: var(--ink-3); margin: 0; }
.studio__note.is-bad { color: var(--fail); font-weight: 600; }

/* --- control rail --- */
.studio__side { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.studio__block {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: .9rem; box-shadow: var(--sh);
}
.studio__h {
  font-family: var(--f); font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 .7rem;
}
.studio__btns { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: .5rem; }
.studio__btns:last-child { margin-bottom: 0; }
.studio__btns > * { flex: 1 1 auto; }

.studio__upload { text-align: center; cursor: pointer; }
.studio__ghost {
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .4rem .7rem; font-size: .82rem; font-weight: 600; color: var(--ink-2);
  cursor: pointer; min-height: 38px;
}
.studio__ghost:hover { border-color: var(--act); color: var(--act); }
.studio__small { font-size: .78rem; color: var(--ink-3); margin-top: .55rem; }
.studio__empty { font-size: .84rem; color: var(--ink-3); }

/* --- field rows --- */
.studio__f {
  display: grid; grid-template-columns: 4.2rem 1fr auto; gap: .5rem;
  align-items: center; margin-bottom: .5rem; font-size: .84rem;
}
.studio__f:last-child { margin-bottom: 0; }
.studio__f > span { font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-3); }
.studio__f em { font-style: normal; font-size: .76rem; color: var(--ink-2);
  text-align: right; font-variant-numeric: tabular-nums; min-width: 5.5ch; }
.studio__f input[type="text"], .studio__f select {
  width: 100%; font: inherit; font-size: .86rem; padding: .35rem .5rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink); min-height: 36px;
}
.studio__f input[type="range"] { width: 100%; accent-color: var(--act); min-height: 30px; }
/* Colour wells sit in the middle column and must not stretch across it,
   or the hex readout beside them is pushed off the row. */
.studio__f input[type="color"] {
  -webkit-appearance: none; appearance: none;
  width: 54px; height: 30px; justify-self: start;
  padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: none; cursor: pointer;
}
.studio__f input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.studio__f input[type="color"]::-webkit-color-swatch { border: none; border-radius: 2px; }
.studio__f--check { grid-template-columns: auto 1fr auto; }
/* The team picker needs the full row: a 41-entry select cannot share
   its line with a label column and still show team names. */
.studio__f--wide { grid-template-columns: 4.2rem 1fr; }
.studio__f--wide select { grid-column: 2; }

.studio__tints { display: flex; gap: .25rem; }
.studio__tints button {
  flex: 1; background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .3rem .4rem; font-size: .75rem; font-weight: 600; color: var(--ink-2);
  cursor: pointer; min-height: 34px; text-transform: capitalize;
}
.studio__tints button[aria-pressed="true"] { background: var(--act); border-color: var(--act); color: #fff; }

/* --- layer list --- */
.studio__layers { display: flex; flex-direction: column; gap: .3rem; }
.studio__layer {
  display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .42rem .55rem; font-size: .84rem; color: var(--ink);
  cursor: pointer; min-height: 38px;
}
.studio__layer:hover { border-color: var(--act); }
.studio__layer.is-on { border-color: var(--act); background: var(--act-wash); color: var(--act); }
.studio__layer i { width: 15px; height: 15px; border-radius: 3px; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(20,23,28,.22); }
.studio__layer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.studio__del {
  width: 100%; margin-top: .7rem; background: none;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .42rem; font-size: .8rem; font-weight: 600; color: var(--ink-3);
  cursor: pointer; min-height: 36px;
}
.studio__del:hover { border-color: var(--fail); color: var(--fail); }

/* ------------------------------------------------------------
   PREFLIGHT PANEL
   Full width under both columns: the verdict is the product.
   ------------------------------------------------------------ */
.studio__pf { grid-column: 1 / -1; }
.pf {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1rem; box-shadow: var(--sh);
}
.pf__idle { font-size: .88rem; color: var(--ink-3); }

.pf__top {
  display: flex; gap: .75rem; align-items: center;
  padding: .75rem .85rem; border-radius: var(--r-sm); margin-bottom: .9rem;
  border: 1px solid var(--line);
}
.pf__badge {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .95rem; color: #fff; background: var(--ink-3);
}
.pf__v { display: block; font-size: .96rem; }
.pf__sum { font-size: .8rem; color: var(--ink-3); }

.pf--pass { background: var(--pass-wash); border-color: #bfe0cd; }
.pf--pass .pf__badge { background: var(--pass); }
.pf--info { background: var(--act-wash); border-color: var(--act-edge); }
.pf--info .pf__badge { background: var(--act); }
.pf--warn { background: var(--warn-wash); border-color: var(--warn-edge); }
.pf--warn .pf__badge { background: var(--warn); }
.pf--fail { background: var(--fail-wash); border-color: #efc9c8; }
.pf--fail .pf__badge { background: var(--fail); }

/* Ink count gets its own band: it is the number that moves the quote */
.pf__inks {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .6rem .75rem; margin-bottom: .9rem;
  background: var(--sunk); border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
.pf__inks-l { font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3); }
.pf__chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.pf__chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; }
.pf__chip i { width: 14px; height: 14px; border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(20,23,28,.22); }

.pf__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pf__item {
  display: flex; gap: .6rem; align-items: start;
  padding: .6rem .7rem; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--card); font-size: .87rem;
}
.pf__item strong { display: block; font-size: .89rem; margin-bottom: .1rem; }
.pf__item p { color: var(--ink-2); font-size: .85rem; }
.pf__i {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: .1rem;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: #fff; background: var(--ink-3);
}
.pf__item.pf--pass { background: var(--card); border-color: var(--line-2); }
.pf__item.pf--pass .pf__i { background: var(--pass); }
.pf__item.pf--info .pf__i { background: var(--act); }
.pf__item.pf--warn .pf__i { background: var(--warn); }
.pf__item.pf--fail .pf__i { background: var(--fail); }

@media (max-width: 560px) {
  .studio__f { grid-template-columns: 3.6rem 1fr auto; }
  .pf__item { font-size: .85rem; }
}

/* ============================================================
   COMPARISON GROUPS
   ------------------------------------------------------------
   Five hundred matchup pages need somewhere to be linked from,
   or they exist only in the sitemap and are effectively
   invisible. Grouping by team keeps every one of them one click
   from the index without printing a wall of five hundred links.
   ============================================================ */
.cmp-group {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); margin-bottom: .5rem; box-shadow: var(--sh);
}
.cmp-group summary {
  padding: .7rem .9rem; cursor: pointer; font-size: .92rem;
  display: flex; align-items: center; gap: .55rem; min-height: 46px;
  list-style: none;
}
.cmp-group summary::-webkit-details-marker { display: none; }
/* A disclosure triangle drawn in CSS, so the row reads as expandable
   without depending on the browser's own marker, which varies. */
.cmp-group summary::after {
  content: ''; margin-left: auto; width: 8px; height: 8px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .15s;
}
.cmp-group[open] summary::after { transform: rotate(-135deg); }
.cmp-group summary:hover { color: var(--act); }
.cmp-group__sw {
  width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(20,23,28,.22);
}

.cmp-group__links {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .3rem; padding: .3rem .9rem .9rem;
}
.cmp-group__links a {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .55rem; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-size: .85rem; color: var(--ink); min-height: 40px;
}
.cmp-group__links a:hover { border-color: var(--act); color: var(--act); text-decoration: none; }
.cmp-group__links .tag { margin-left: auto; }

/* Standalone use on a comparison page, outside a <details> */
.rel .cmp-group__links { padding: 0; }

/* ============================================================
   CALL TO ACTION — reference page into the studio
   ------------------------------------------------------------
   Carries a strip of the actual palette being handed over, so
   the button is visibly about this team rather than a generic
   promo. Sits on the ink ground: it is the one place on a
   reference page allowed to be loud, and it is below every
   swatch so it cannot shift how a value is perceived.
   ============================================================ */
.cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem 1.5rem;
  background: var(--pitch);
  color: var(--chalk);
  border-radius: var(--r);
  padding: 1.25rem 1.35rem;
  margin: 2rem 0;
  overflow: hidden;
}
.cta__t {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--chalk);
  margin: 0 0 .3rem;
}
.cta__p { font-size: .9rem; color: var(--chalk-2); max-width: 62ch; }

/* The palette being handed to the studio */
.cta__s { display: flex; gap: .3rem; }
.cta__s span {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}

.cta__btn {
  grid-column: 1 / -1;
  display: inline-flex; align-items: center; gap: .5rem;
  justify-self: start;
  background: var(--chalk); color: var(--pitch);
  padding: .7rem 1.15rem; border-radius: var(--r-sm);
  font-size: .92rem; font-weight: 600; min-height: 46px;
}
.cta__btn:hover { background: #fff; text-decoration: none; color: var(--pitch); }

/* Two buttons side by side on a comparison page */
.cta__two { grid-column: 1 / -1; display: flex; gap: .5rem; flex-wrap: wrap; }
.cta__two .cta__btn { grid-column: auto; }
.cta__dot {
  width: 16px; height: 16px; border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(20,23,28,.25);
}

@media (max-width: 560px) {
  .cta { grid-template-columns: 1fr; }
  .cta__s { order: -1; }
}

/* ============================================================
   AD SLOT — between editorial blocks only
   ============================================================ */
.ad {
  background: var(--card); border: 1px dashed var(--line); border-radius: var(--r);
  padding: 2.2rem 1rem; text-align: center; color: var(--ink-3);
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin: 2rem 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr { background: var(--ink); color: #9aa2ae; margin-top: 3.5rem; padding: 2.75rem 1.25rem 1.5rem; font-size: .9rem; }
.ftr-g { max-width: var(--max); margin: 0 auto 2rem; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.ftr-brand {
  color: #fff; font-family: var(--fd); font-weight: 800; font-stretch: 125%;
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: -.01em; margin-bottom: .55rem;
}
.ftr p { font-size: .875rem; }
.ftr h4 { color: #fff; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .7rem; }
.ftr ul { list-style: none; }
.ftr li { margin-bottom: .4rem; }
.ftr a { color: #9aa2ae; font-size: .875rem; }
.ftr a:hover { color: #fff; }
.ftr-legal { max-width: var(--max); margin: 0 auto; padding-top: 1.3rem; border-top: 1px solid #2a2e37; font-size: .8rem; color: #757c88; }
.ftr-end { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }

@media (max-width: 860px) {
  .ftr-g { grid-template-columns: 1fr 1fr; }
  .ftr-g > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .ftr-g { grid-template-columns: 1fr; } }

/* ============================================================
   UTILITIES
   ============================================================ */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mute { color: var(--ink-3); }
.sm { font-size: .875rem; }
.mb0 { margin-bottom: 0; }
.mt-2 { margin-top: 2rem; }
.lead-narrow { max-width: 66ch; }

@media print {
  .hdr, .ad, .ftr, .skip, .export__foot, .copy { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .sw, .panel, .call, .pair { box-shadow: none; border-color: #999; break-inside: avoid; }
  a { color: #000; }
  .sw__chip { height: 54px; }
  /* The pickers are useless on paper; the comparison itself is the point */
  .cmp-pick { display: none !important; }
  .cmp-head, .cmp-pal, .cmp-pick-card { box-shadow: none; border-color: #999; break-inside: avoid; }
  .cmp-mx { break-inside: avoid; }
}