/* =====================================================================
 * public/unify.css  (Sept 21)
 * ONE CARD LANGUAGE FOR THE WHOLE SITE.
 *
 * Loaded last on every page. Connor's read: too many cards that do not
 * match, and a thin, wide-spaced label type that reads robotic. So every
 * card on the site now speaks the same three voices:
 *   - Label: body face, heavy, uppercase, tight tracking, in the page accent.
 *   - Value: the display face, heaviest weight, tight line height.
 *   - Note: body face, semibold, full ink. Never thin, never gray small print.
 * Anything a page styles with a more specific rule still wins.
 * ===================================================================== */

/* ---- 1. labels ---- */
:where(#section, main, .page, body) :is(
  [class$="__label"], [class*="__label "], [class$="__kicker"], [class*="__kicker "],
  [class$="__factLabel"], [class$="__eyebrow"], [class$="__cap"], [class$="__role"],
  [class$="__day"], [class$="__unit"], [class$="__tag"], [class$="-label"], [class*="-label "]
):not(svg *):not(label):not(option):not(.walltile__label):not(.areacard__name){
  font-family: var(--body) !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  font-style: normal !important;
  line-height: 1.25;
}


/* ---- 2. values ---- */
:where(#section, main, .page, body) :is(
  [class$="__value"], [class*="__value "], [class$="__record"], [class$="__factValue"], [class$="__big"],
  [class$="__num"], [class$="__figure"], [class$="__stat"] > b, [class$="__score"]
):not(svg *):not(input):not(select){
  font-family: var(--display-big, var(--display)) !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  line-height: 1.02;
  font-variant-numeric: tabular-nums;
}

/* ---- 3. notes inside cards ---- */
:where(#section, main, .page, body) :is([class$="__note"], [class*="__note "], [class$="__pct"], [class$="__line"]):not(svg *):not([class*="headline"]){
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: 0 !important;
}

/* ---- 4. glossary terms: no dotted underline under every stat, only on hover ---- */
.term{ border-bottom-color: transparent !important; }
.term:hover, .term:focus-visible{ border-bottom-color: var(--accent) !important; }

/* ---- 5. section heads: the aside is a chip, not a sentence (see tidy in nav.js) ---- */
.panel-block__head .panel-block__aside.is-chip{
  display: inline-flex; align-items: center; margin: 0; padding: 5px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  font-family: var(--body) !important; font-weight: 800 !important; font-size: .8rem !important; letter-spacing: .05em !important;
  text-transform: uppercase; color: var(--ink) !important; max-width: none;
}

/* ---- 6. the shared stat card: top-aligned, even spacing, no dead space ---- */
.split, .tile, .tv-card, .gp-club__fact, .armchip, .upnext__card, .chip, .standcard, .rot__card, .rotation__card{
  align-content: start !important;
}
.splits{ display: grid !important; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; gap: 12px !important; align-items: start; }
.splits .split{ display: grid !important; gap: 6px !important; padding: 14px 16px !important; min-height: 0 !important; border-radius: 16px !important;
  background: var(--surface-2) !important; border: 1px solid var(--line) !important; border-top: 4px solid var(--accent) !important; }
.splits .split .split__label{ font-size: .8rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.splits .split .split__record{ font-size: 2.3rem !important; color: var(--ink) !important; }
.splits .split .split__pct{ font-size: .9rem !important; color: var(--ink-soft) !important; font-weight: 800 !important; }

/* A label that is really a sentence reads as a note (tidy.js marks it). */
:where(#section, main, .page, body) .is-longlabel.is-longlabel:not(svg *){
  text-transform: none !important; letter-spacing: 0 !important; font-weight: 700 !important;
  color: var(--ink) !important; font-size: max(.95rem, 1em);
}

/* Paragraphs turned into points by tidy.js */
ul.tidy-points{ list-style: none !important; margin: 10px 0 !important; padding: 0 !important; display: grid; gap: 10px; max-width: 72ch !important; }
ul.tidy-points > li{ position: relative; padding: 0 0 0 20px; background: none;
  font-family: var(--body); font-weight: 600; font-size: 1.05rem; line-height: 1.45; color: var(--ink); text-transform: none; letter-spacing: 0; font-style: normal; }
ul.tidy-points > li::before{ content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 3px; border-radius: 2px; background: var(--accent); }
/* ---- 7. bigger type everywhere (Sept 21) ----
   Connor: the text is too small. Every rem on the site scales from this, so
   the whole page steps up together on a laptop or desktop screen. */
@media (min-width: 1000px){ html{ font-size: 17px; } }
@media (min-width: 1500px){ html{ font-size: 18px; } }
.body--iq .section-page:not(.is-map){ max-width: 1120px; }
/* small print floor for the shared bits most pages use */
:where(#section, main, .page) :is(.tile__label, .chip__small, .hub__source, .panel-block__foot, .empty-note){ font-size: max(.92rem, 15px) !important; }

/* Read the Play role counts: two rows of three, so every label fits at the bigger size */
.rtpx .rtpx-roles{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
.rtpx .rtpx-role .rtpx-role__label{ white-space: nowrap; letter-spacing: .03em !important; }

/* ---- 8. no thin headings (Sept 21) ----
   Names, titles and card heads in the Barlow face defaulted to its regular
   weight, which is the "robotic" look on a dark card. Heavy by default. */
:where(#section, main, .page) :is(h1, h2, h3, h4, [class$="__name"], [class$="__title"], [class$="__type"], [class$="__head"] > span):not(svg *){ font-weight: 800; }
.cs2-call__type{ font-family: var(--body) !important; font-weight: 900 !important; letter-spacing: .06em !important; }

/* ---- 9. use the width (Sept 21) ----
   The body is a flex column, and a page column with auto side margins in a
   flex column shrinks to its content: the game page sat at 1000 pixels on a
   1280 screen. Every page column takes the full width up to its cap. */
body > main, .game-page, .section-page, .scores-page{ width: 100%; box-sizing: border-box; }
.game-page .gp__h, .game-page .gp__title{ font-family: var(--display-big, var(--display)) !important; font-weight: 900 !important; text-transform: uppercase; font-size: clamp(1.6rem, 2.4vw, 2.1rem) !important; letter-spacing: .01em; line-height: 1; margin: 0 0 14px; }
/* never break a word in the middle ("VELOCIT / Y") */
:where(#section, main, .page) :is([class$="__label"], [class*="__label "], [class$="__unit"], [class$="__kicker"], [class$="__cap"], [class$="-label"]):not(svg *){ overflow-wrap: normal !important; word-break: normal !important; hyphens: none; }
/* the catcher's view fills its card */
.game-page .cview canvas.zone{ width: 100% !important; max-width: 420px; height: auto; display: block; margin: 0 auto; }

/* ---- 10. hero scoreboards: figures under the title, not a sentence ---- */
.sechero__facts{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sechero__fact{ display: grid; gap: 4px; min-width: 112px; padding: 12px 16px; border-radius: 14px; background: rgba(0,0,0,.28); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-top: 3px solid var(--accent); }
.sechero__factBig{ font-family: var(--display-big, var(--display)) !important; font-weight: 900 !important; font-size: 2rem !important; line-height: .95; color: var(--ink); letter-spacing: .01em; }
.sechero__factSmall.sechero__factSmall{ font-family: var(--body) !important; font-weight: 800 !important; font-size: .82rem !important; text-transform: uppercase; letter-spacing: .06em !important; color: color-mix(in srgb, var(--accent) 70%, var(--ink)) !important; }
.tidy-lead{ font-weight: 600; }

/* The header bar: section colours under their own tabs (Sept 21) */
.sitehead::after{ background: var(--bar, linear-gradient(90deg, #ff8f4a 0 20%, #f2c14e 20% 40%, #5ad8f2 40% 60%, #46e58a 60% 80%, #b494ff 80% 100%)) !important; height: 3px !important; opacity: 1 !important; }

/* ===== Pre-launch audit, Sept 21 ===== */
/* No label under 13px anywhere. The Show card tiles scale with the card, so
   they get a floor instead of a fixed size. */
.sc-tile__label{ font-size: max(13px, .84rem) !important; }
.hsclub__title, .pcm__mark .pcm__markWord, .askpanel__tip b{ font-size: 13px !important; }
.omteam__fact small, .sd-cond__k, .omreg__hostK, .rotcard__last small{ font-size: 13px !important; }
/* Phone widths: nothing wider than the screen. */
@media (max-width: 560px){
  .omgrid, .omgrid--2, .omgrid--3, .omgrid--4{ grid-template-columns: minmax(0, 1fr) !important; }
  .ombracket, .ombracket__field, .ombracket__games, .omteam, .omg{ min-width: 0 !important; max-width: 100%; }
  .ombracket__field{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cs2-call__head, .cs2-chips, .cs2-pickhead{ flex-wrap: wrap; min-width: 0; }
  .cs2-match{ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; }
  a.cs2-match{ margin: 0 !important; }
  .cs2-team{ min-width: 0; }
  .cs2-call{ grid-template-columns: minmax(0, 1fr) !important; }
  .cs2-call > *, .cs2-opts, .cs2-opt{ min-width: 0 !important; max-width: 100%; }
  .cs2-opt, .cs2-pickhead__hint{ white-space: normal !important; overflow-wrap: anywhere; }
  .cs2-numbers > *, .cs2-label, .cs2-cmp{ min-width: 0 !important; max-width: 100%; }
  .cs2-numbers{ grid-template-columns: minmax(0, 1fr) !important; }
  /* A club name never breaks mid-word; it gets smaller instead. */
  .cs2-team__name{ overflow-wrap: normal !important; word-break: keep-all; font-size: clamp(1rem, 5.2vw, 1.25rem) !important; }
  .cs2-cmp__row{ min-width: 0 !important; max-width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr) !important; }
  .sd-stage{ overflow: hidden; }
  .sd-pin{ max-width: calc(50vw - 24px); }
}


/* ===== Answer cards fill their space (Sept 21) =====
   A sitewide rule pads anything with "card" in its class, which gave every
   line inside an answer card its own 18px of padding and left big gaps
   between the name, the line under it and the note. Inside the answer's
   lead card those lines sit tight, and the facts become chips. */
.answer__subject .stat-card .card-body,
.answer__subject .stat-card .card-name,
.answer__subject .stat-card .card-meta,
.answer__subject .stat-card .card-note,
.answer__subject .stat-card .card-stats,
.answer__subject .stat-card .card-chips,
.answer .stat-card .card-body, .answer .stat-card .card-name, .answer .stat-card .card-meta,
.answer .stat-card .card-note, .answer .stat-card .card-stats, .answer .stat-card .card-chips{ padding: 0 !important; }
.answer .stat-card .card-body{ display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 100%; }
.answer .stat-card .card-meta{ margin-top: 0; font-size: 1.15rem; color: var(--ink); }
.answer .stat-card .card-stats{ margin-top: 4px; }
.card-chips{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.card-chip{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px !important; border-radius: 999px;
  font-size: 1.1rem; font-weight: 700; color: var(--ink); background: var(--surface-2, rgba(255,255,255,.06)); border: 1px solid var(--line); }
.card-chip b{ font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-hot); font-weight: 900; }
.card-chip--record{ font-family: var(--display-big); font-size: 1.7rem; line-height: 1; padding: 6px 16px !important; color: var(--accent-hot); border-color: var(--accent-line); background: var(--accent-soft); }
.card-chip--result{ border-color: var(--accent-line); }
@media (max-width: 620px){ .card-chip{ font-size: 1rem; } .card-chip--record{ font-size: 1.45rem; } }
/* The points under an answer sit two or three across on a wide screen, so a
   short sentence is not alone in a card the width of the page, and each
   sentence runs the full width of its own card. */
.answer .answer__prose{ display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; align-items: stretch; }
.answer .answer__prose > *{ margin: 0 !important; min-width: 0; }
.answer .answer__prose p, .answer .answer__pointText p, .answer .answer__pointText{ max-width: none !important; }
.answer .answer__point{ display: flex; align-items: center; }
.answer .answer__pointText{ font-size: 1.12rem; line-height: 1.45; }
/* Stat tiles: squat scoreboard tiles, not tall slots. */
.answer .stat-card .card-stats{ grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important; gap: 8px; }
.answer .stat-card .card-stat{ padding: 12px 6px !important; min-width: 0; }
.answer .stat-card .card-stat-value{ font-size: clamp(1.2rem, 2vw, 1.55rem); white-space: nowrap; }
.answer .card-stat-value, .answer .card-stat-label, .answer .card-photo, .answer .card-chip b{ padding: 0 !important; }
.answer .card-photo--logo{ padding: 0 !important; }
/* Two across on a wide screen; an odd last point takes the whole row. */
@media (min-width: 820px){
  .answer .answer__prose{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .answer .answer__prose > :last-child:nth-child(odd){ grid-column: 1 / -1; }
}