/* Real font files from assets/fonts, served locally by web/server.py under
 * /fonts/. No CDN. Each family below is a distinct on-disk file, matched to
 * SPEC.md section 8's roles plus PJ's two additions: plain Univers Black
 * (not Extra Black) for the class tabs, and Univers Light for every numeric
 * value in a board row. */
@font-face { font-family: 'GeorgiaBlock';   src: url('/fonts/GeorgiaBlock.otf');                          font-display: swap; }
@font-face { font-family: 'Univers XBlack'; src: url('/fonts/univers/UniversLTStd-XBlack.otf');     font-weight: 900; font-display: swap; }
@font-face { font-family: 'Univers XBlack'; src: url('/fonts/univers/UniversLTStd-XBlackObl.otf');  font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Univers Black';  src: url('/fonts/univers/UniversLTStd-Black.otf');      font-weight: 900; font-display: swap; }
@font-face { font-family: 'Univers Black';  src: url('/fonts/univers/UniversLTStd-BlackObl.otf');   font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Univers Cond';   src: url('/fonts/univers/UniversLTStd-Cn.otf');         font-weight: 400; font-display: swap; }
@font-face { font-family: 'Univers Cond';   src: url('/fonts/univers/UniversLTStd-CnObl.otf');      font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Univers Light';  src: url('/fonts/univers/UniversLTStd-Light.otf');      font-weight: 300; font-display: swap; }
@font-face { font-family: 'Univers Light';  src: url('/fonts/univers/UniversLTStd-LightObl.otf');   font-weight: 300; font-style: italic; font-display: swap; }

:root {
  /* GeorgiaBlock: largest page headers only. */
  --f-display: 'GeorgiaBlock', system-ui, sans-serif;
  /* Univers Extra Black: sub-heads, tags, large numerals. The rank tag,
   * action tag, column headers, brand mark, toggles. */
  --f-xblack: 'Univers XBlack', system-ui, sans-serif;
  /* Univers Black (not Extra Black): the class tabs along the board
   * footer, at the heaviest non-extra weight. */
  --f-black: 'Univers Black', system-ui, sans-serif;
  /* Univers Condensed 57: body and most of the interface. */
  --f-cond: 'Univers Cond', system-ui, sans-serif;
  /* Univers Light: supplementary, and every numeric value in a board
   * row (measurements, percentiles, offer counts, drive time) — dense
   * and small, where the lighter weight reads more cleanly than XBlack. */
  --f-light: 'Univers Light', system-ui, sans-serif;
  --red: #BA0C2F;
  --red-2: #E4002B;
  --black: #2c2a29;
  --silver: #a2aaad;
  --line: #e6e4df;
  /* handle # rank _ shot jersey PLAYER SCHOOL ST ACTION COMMIT p4 tot,
     then each measurement with its flag gutter, then DIST. The name and
     school columns give up width so the measurements can breathe and so ST
     sits against the school rather than across a stretched gap. */
  /* The OFFICIAL column has no width until a personal board asks for it. */
  --w-official: 0px;
  /* CREATE, SELECT, #, official, rank, shot, jersey, PLAYER, SCHOOL, ST,
     ACTION, COMMIT, p4, tot, then each measurement with its flag gutter.

     The two buttons lead the row: they act on the player rather than
     describing him, and reaching them meant crossing the whole row. The
     number column is 20px because it holds two digits, and the rank tag
     takes the width that used to sit empty between it and the photo. */
  --grid: 14px 32px 34px 20px var(--w-official) 82px 54px 28px minmax(172px,0.86fr) minmax(112px,0.6fr) 28px 62px minmax(108px,0.6fr) 28px 32px 46px 12px 32px 12px 40px 12px 40px 12px 36px 12px 46px 12px 42px 12px 44px 12px;
  --grid-compact: 14px 32px 34px 20px var(--w-official) 82px 0px 28px minmax(172px,0.86fr) minmax(112px,0.6fr) 28px 62px minmax(108px,0.6fr) 28px 32px 46px 0px 32px 0px 40px 0px 40px 0px 36px 0px 46px 0px 42px 0px 44px 0px;
  /* Dense draws an 80px photo and a rank tag carrying 30px type, so both
     take more width here. */
  --grid-dense: 16px 36px 38px 26px var(--w-official) 96px 78px 30px minmax(196px,0.9fr) minmax(104px,0.5fr) 26px 62px minmax(100px,0.5fr) 26px 29px 41px 11px 29px 11px 37px 11px 37px 11px 33px 11px 41px 11px 39px 11px 41px 11px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; color: var(--black); font-family: var(--f-cond); }
body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
button { font: inherit; cursor: pointer; }
a { cursor: pointer; }

/* Board and Watchlist are siblings under body, each taking the full
   remaining height below the topbar; only one is un-hidden at a time
   (see .topnav-btn[data-nav] wiring in board.js). */
#board-screen, #watchlist-screen, #leaderboard-screen { flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden; }
/* An #id selector outranks the UA stylesheet's [hidden]{display:none}, so
   without this, hiding a screen via the hidden attribute alone does
   nothing — they would render stacked on top of each other. #map-screen
   lays itself out as a row (filters beside the map) in map.css. */
#board-screen[hidden], #watchlist-screen[hidden], #map-screen[hidden],
#leaderboard-screen[hidden] { display: none; }

/* ---------------------------------------------------------- top header */
/* Above the map. Leaflet's own panes climb to 800 and a pin card sits at
   1100, so without a stacking context of its own the search results drop
   behind the map instead of over it. */
.topbar { position: relative; z-index: 1200;
  flex: 0 0 auto; height: 50px; display: flex; align-items: stretch;
  background: var(--black); color: #fff; border-bottom: 3px solid var(--red); }
/* UGA red, so the white G reads. On the black bar the mark disappeared
   into its own background. */
.brand { display: flex; align-items: center; gap: 10px; padding: 0 16px 0 14px;
  background: var(--red); border-right: 1px solid #47443f; }
/* The Georgia G, white, in place of the red square that stood in for it.
   Its artwork is 180 by 108 with the trademark in the corner, so it is
   sized by height and the width follows. */
.brand-mark { height: 30px; width: auto; display: block; }
/* The wordmark and BETA stack, so BETA reads as a note on POA rather than
   on the G it used to sit beside. */
.brand-title { display: flex; flex-direction: column; align-items: center; }
/* BETA under the word: the room should know this is still moving. */
.brand-beta { margin-top: -1px; font-family: var(--f-black);
  font-weight: 700; font-size: 7px; letter-spacing: 0.16em; color: #f6c9d2; }
.brand-name { font-family: var(--f-display); font-weight: 900; font-size: 25px;
  line-height: 1; letter-spacing: 0.02em; padding-top: 2px; white-space: nowrap;
  color: #fff; }
.topnav { display: flex; align-items: stretch; }
/* The tabs carry the title's face and size, so a glance finds them. Grey
   until active, as before. */
.topnav-btn { height: 100%; padding: 0 14px; border: none; background: transparent;
  color: #8d8880; font-family: var(--f-display); font-weight: 900; font-size: 25px;
  letter-spacing: 0.02em; line-height: 1; padding-top: 2px; }
.topnav-btn.active { background: #3a3733; color: #fff; box-shadow: inset 0 -3px 0 var(--red); }
.topnav-btn:disabled { cursor: default; opacity: 0.55; }
.topnav-count { font-family: var(--f-black); font-weight: 600; font-size: 10px;
  margin-left: 7px; color: #8d8880; vertical-align: 3px; letter-spacing: 0; }
.topright { margin-left: auto; display: flex; align-items: center; gap: 14px; padding: 0 14px; }
.searchwrap { position: relative; }
#search { width: 270px; height: 28px; font-size: 14px; font-weight: 500; padding: 0 9px 0 26px;
  border: 1px solid #57534d; background: #3a3733; color: #fff; font-family: var(--f-cond); }
#search::placeholder { color: #a2aaad; }
.search-icon { position: absolute; left: 8px; top: 6px; font-family: var(--f-black); font-weight: 700;
  font-size: 12px; color: #8d8880; pointer-events: none; }
/* Anchored to the right edge of the box it drops from. Anchored left, a
   420px list under an input near the window's right edge ran off the
   screen and lost the school name off the end of every row. */
.search-results { position: absolute; top: 34px; right: 0; width: 420px; background: #fff;
  border: 1px solid #cdc8bf; box-shadow: 0 12px 28px rgba(0,0,0,0.22); z-index: 60; max-height: 420px;
  overflow: auto; color: var(--black); }
/* Name on the left, then the facts that separate one Jamir from another. */
.search-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px;
  border-bottom: 1px solid #ecebe7; font-size: 13px; }
.search-row:hover { background: #f6f5f2; }
.search-name { font-family: var(--f-black); font-weight: 700; font-size: 13px;
  white-space: nowrap; }
.search-meta { font-family: var(--f-light); font-weight: 300; font-size: 11px;
  color: #8d8880; white-space: nowrap; }
.search-school { flex: 1 1 auto; min-width: 0; font-size: 12px; color: #57534d;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.search-where { flex: 0 0 auto; font-family: var(--f-black); font-weight: 700;
  font-size: 8px; letter-spacing: 0.09em; text-transform: uppercase;
  color: #8d8880; background: #f1efeb; padding: 2px 5px; }
.user-badge { width: 26px; height: 26px; background: var(--red); color: #fff; font-family: var(--f-black);
  font-weight: 700; font-size: 10.5px; display: flex; align-items: center; justify-content: center; }

/* ---------------------------------------------------------- sub header */
.subbar { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; padding: 7px 14px;
  background: #f6f5f2; border-bottom: 1px solid #d5d1c9; }
.subbar-left { display: flex; align-items: baseline; gap: 9px; flex: 0 0 auto; }

/* Class years read first and carry their own colour; position groups sit on
   the bottom bar, so adding CB or TE-F later extends that row instead of
   multiplying a single combined strip. */
.class-tabs { display: flex; align-items: stretch; gap: 3px; flex: 0 0 auto; }
.class-tab { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px;
  border: none; background: #ece9e4; color: #8d8880; font-family: var(--f-black);
  font-weight: 900; font-size: 16px; letter-spacing: 0.01em; line-height: 1; }
.class-tab .n { font-family: var(--f-light); font-weight: 300; font-size: 10px; opacity: 0.8; }
.class-tab.active { box-shadow: inset 0 -3px 0 rgba(0,0,0,0.28); }
.class-chip { display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 9px;
  font-family: var(--f-xblack); font-weight: 900; font-size: 18px; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
.counts-line { font-family: var(--f-black); font-weight: 600; font-size: 10px; letter-spacing: 0.1em; color: #8d8880; white-space: nowrap; }
.toggle-group { display: flex; height: 24px; border: 1px solid #c9c5bd; background: #fff; }
.toggle-group button { height: 22px; padding: 0 11px; border: none; background: #fff; color: #8d8880;
  font-family: var(--f-black); font-weight: 700; font-size: 9.5px; letter-spacing: 0.1em; line-height: 1; }
/* The two toggles do different jobs, so they do not share a colour: whose
   board you are looking at is red, how tightly it is packed is black. */
.toggle-group.view button.active { background: var(--red); color: #fff; }
/* Whose board is on screen is the switch people reach for most, so it is
   the largest thing on the bar: two wide halves, easy to hit, the owner's
   initials on the personal half. */
.toggle-group.view { height: 30px; flex: 0 0 auto; }
.toggle-group.view button { height: 28px; min-width: 124px; padding: 0 16px;
  font-size: 11px; letter-spacing: 0.12em; white-space: nowrap; }
@media (min-width: 1400px) {
  .toggle-group.view button { min-width: 150px; padding: 0 22px; }
}
@media (max-width: 1399px) {
  .subbar { gap: 10px; }
  .subbar-right { gap: 8px; }
  .toggle-group.density button { padding: 0 8px; }
}
/* On a laptop screen the bar is full, so the two lines of small print give
   way before either toggle does. */
.counts-line, .as-of { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.subbar-right { min-width: 0; }
.toggle-group.density { flex: 0 0 auto; }
.toggle-group button { white-space: nowrap; }
.toggle-group.density button.active { background: var(--black); color: #fff; }
.toggle-group button.active { background: var(--black); color: #fff; }
.subbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.vrule { width: 1px; height: 20px; background: #d5d1c9; }
.as-of { font-family: var(--f-black); font-weight: 600; font-size: 9px; letter-spacing: 0.1em; color: #8d8880; white-space: nowrap; }

/* ---------------------------------------------------------- grid rows */
.row-grid { display: grid; grid-template-columns: var(--grid); align-items: center; }
body.compact .row-grid { grid-template-columns: var(--grid-compact); }
body.dense .row-grid { grid-template-columns: var(--grid-dense); }

.col-header { flex: 0 0 auto; padding: 0 14px 0 0; height: 30px; background: #e6e4df;
  border-bottom: 1px solid #b9b4aa; font-family: var(--f-black); font-weight: 700; font-size: 8.5px;
  letter-spacing: 0.11em; color: #8d8880; }
.col-header .ch { display: flex; align-items: center; }
.col-header .ch.center { justify-content: center; }
.col-header .ch-rank { width: 74px; text-align: center; flex: 0 0 auto; color: var(--black); }
.col-header .ch-offers { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 3px 0; }
.col-header .ch-offers-top { text-align: center; font-size: 8.5px; letter-spacing: 0.11em; color: #8d8880; line-height: 1; }
.col-header .ch-offers-sub { display: grid; grid-template-columns: 30px 34px; line-height: 1; }
.col-header .ch-offers-sub span { text-align: right; font-size: 7.5px; letter-spacing: 0.06em; color: #a8a39b; }
.col-header .ch-offers-sub span:first-child { padding-right: 7px; }
.col-header .ch-offers-sub span:last-child { padding-right: 9px; }
.col-header .ch-dist { justify-content: flex-end; padding-right: 3px; }

/* One continuous scroll region: graded rows, EVAL rows, the boneyard
   toggle, and boneyard rows when open, all in the same flow. Only the
   header/subheader/column-header above and the tab bar below are fixed
   chrome, matching the reference (SPEC section 6: "graded -> EVAL ->
   Boneyard" is one vertical order, not a separately-docked panel). */
/* No scroll-behavior: smooth here. Where smooth scrolling is disabled, and
   it is in some browsers outright, it does not degrade to an instant jump:
   the scroll simply never happens, which broke the boneyard from opening
   into view at all. An unanimated jump on an explicit click is the safe
   trade. */
/* The gutter is always reserved, whether or not the rows are long enough
   to scroll, so the column header can use the same padding as a row and
   the two actually line up. It was 25px against the row's 14px, which put
   every header label seven pixels left of its column. */
.scroll-region { flex: 1 1 auto; min-height: 0; overflow-y: auto;
  scrollbar-gutter: stable; }
.row-list { }

/* A 2px white gutter under every row, so rows read as separate objects
   rather than one block ruled into strips. The border is what draws it. */
.prow { height: 58px; padding: 0 14px 0 0; background: #fff;
  border-bottom: 2px solid #fff; cursor: pointer; }
.prow:hover { background: #f4f2ee; }
/* DENSE is the roomiest of the three, not the tightest: it trades rows for
   a rank tag big enough to read across a desk, about 8 rows to a screen
   against STANDARD's 12. COMPACT is the one that packs rows in. */
body.dense .prow { height: 86px; }
body.compact .prow { height: 34px; }
/* A UGA commit carries a light red tint, and darkens under the pointer the
   way every other row does. Without the hover rule the tint sat on top of
   it and the row was the only one on the board that did not react. */
.prow.commit-uga { background: rgba(186,12,47,0.045); }
.prow.commit-uga:hover { background: rgba(186,12,47,0.14); }
/* A ticked row, in a blue light enough to read every number through. It
   wins over the commit tint on purpose: selection is a state the reader
   just set, and it should look the same on every row. Written after the
   commit rules and naming both classes so it cannot lose on specificity. */
.prow.selected, .prow.commit-uga.selected { background: #e6f0fa; }
.prow.selected:hover, .prow.commit-uga.selected:hover { background: #dcebf8; }
/* A light red wash rather than a skull. It cannot be confused with the UGA
   commit tint in practice: a committed player is never in the boneyard. */
.prow.boneyard { opacity: 0.72; background: rgba(186,12,47,0.07); }
.prow.dragging { opacity: 0.4; }
.prow.drop-target { box-shadow: inset 0 2px 0 0 var(--red); }

/* A black bar down the left edge of every row, with the drag grip in it.
   It used to be a red edge on the rows carrying a UGA offer, which the
   red dot under the name says now. */
.c-handle { display: flex; align-items: center; justify-content: center;
  align-self: stretch; height: 100%; background: var(--black); cursor: grab; }
.c-handle-grip { font-size: 11px; user-select: none; line-height: 1;
  letter-spacing: -2px; color: rgba(255,255,255,0.5); }
.prow:hover .c-handle-grip { color: rgba(255,255,255,0.85); }
.prow.boneyard .c-handle { background: #6f6a63; cursor: default; }
/* A board this reader cannot rearrange: the bar goes grey and holds no
   grip, so it reads as fixed before anyone tries to drag it. */
.c-handle.locked { background: #8d8880; cursor: default; }
.c-num-text.locked { cursor: default; }
.c-num { position: relative; display: flex; align-items: center; justify-content: center; }
/* The board position, which is the number people call a player by. Red
   and heavier than the grey it used to be, since it is a heading for the
   row rather than a footnote on it. */
.c-num-text { font-family: var(--f-black); font-weight: 700; font-size: 13px;
  color: var(--red); cursor: text; }
body.dense .c-num-text { font-size: 16px; }
.c-num.editing .c-num-text { display: none; }
.c-num-input { width: 100%; min-width: 0; font-family: var(--f-black); font-size: 11.5px;
  border: 1px solid var(--red); padding: 1px 2px; background: #fff; color: var(--black); }
.c-num-input::-webkit-outer-spin-button,
.c-num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Declared on the same element as --grid. A var() inside a custom property
   resolves where that property is declared, not where it is used, so
   overriding this on body would leave the track at 0px. */
:root.personal { --w-official: 52px; }

/* The official pair on a personal board: the tag the room agreed on and
   where it sits in that stack. Muted, so the owner's own rank still leads. */
/* The cell is always a grid item, empty and clipped to a 0px track off a
   personal board. Dropping it out of the flow would shift every column
   after it one track to the left. */
.c-official { display: flex; overflow: hidden; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; padding-right: 6px; }
.col-header .ch-official { overflow: hidden; }
.c-official-tag { display: flex; align-items: center; justify-content: center;
  width: 40px; height: 22px; font-family: var(--f-black); font-weight: 900;
  font-size: 11px; line-height: 1; opacity: 0.85; white-space: nowrap; overflow: hidden; }
.c-official-tag.empty { background: #f2f0ec; color: #c9c5bd; font-weight: 400; }
.c-official-num { font-family: var(--f-light); font-weight: 300; font-size: 10px;
  color: #a09a91; line-height: 1; }
body.dense .c-official-tag { width: 44px; height: 30px; font-size: 15px; }
body.dense .c-official-num { font-size: 12px; }
body.compact .c-official-tag { height: 16px; font-size: 9px; }
body.compact .c-official-num { display: none; }

/* The tag fills its column. It was a fixed 74px inside a wider cell, so
   the leftover sat between the tag and the photo and read as a gap
   between two columns. The gap is now a deliberate 6px, and the column's
   width is the tag's width. */
.c-rank { position: relative; display: flex; height: 100%; align-items: stretch;
  padding-right: 6px; }
.rank-tag { display: flex; align-items: center; justify-content: center;
  height: 100%; width: 100%; min-width: 0;
  font-family: var(--f-xblack); font-weight: 900; line-height: 1;
  letter-spacing: 0.01em; font-size: 18px; white-space: nowrap; overflow: hidden; }
.rank-tag.empty { font-weight: 600; font-size: 13px; }
/* The point of DENSE: the board tag reads first and reads from a distance. */
body.dense .rank-tag { font-size: 30px; }
body.dense .rank-tag.empty { font-size: 20px; }
body.dense .c-name-text { font-size: 21px; }
body.dense .action-chip { width: 62px; height: 34px; font-size: 13px; }

body.dense .c-metric { font-size: 14px; }
body.dense .c-metric .chip { height: 13px; line-height: 13px; font-size: 8.5px; }

/* The photo runs the full height of the row. A photo floating inside a
   row with a band of white above and below it reads as misaligned beside
   the rank tag, which does fill its cell. */
.c-headshot { width: 54px; height: 100%; flex: 0 0 auto; align-self: stretch;
  background-size: cover; background-position: center top; }
body.dense .c-headshot { width: 80px; }
body.compact .c-headshot { width: 0; overflow: hidden; visibility: hidden; }
/* A blank profile silhouette, not a striped block. No photo is a normal
   state (DECISIONS section 11), so it should look like an empty seat
   rather than a broken image. */
.c-headshot.placeholder { background-image: url('/img/headshot-placeholder.svg'); background-size: cover; }

.c-jersey { display: flex; align-items: center; justify-content: center; }
.c-jersey a, .c-jersey span { font-family: var(--f-light); font-weight: 300; font-size: 12.5px;
  color: #8d8880; text-decoration: none; white-space: nowrap; }
body.compact .c-jersey a, body.compact .c-jersey span { font-size: 10.5px; color: #a09a91; }

.c-name { display: flex; flex-direction: column; justify-content: center; gap: 1px;
  min-width: 0; padding-right: 6px; }
.c-name-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
/* The dot row under the name. Red is a UGA offer and green is stat
   tracking, both against the left edge under the name; the yellow campus
   visit dots are right-aligned against the far side of the column, so the
   two readings never run into each other. */
.c-name-dots { display: flex; align-items: center; gap: 4px; }
.c-name-dots .left { display: flex; align-items: center; gap: 4px; }
/* margin-left:auto rather than space-between, so the visit dots sit right
   however few dots are on the left, including none at all. */
.c-name-dots .right { display: flex; align-items: center; gap: 3px; margin-left: auto;
  margin-right: -6px; }
.c-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.c-dot.uga { background: var(--red); }
.c-dot.stat { background: #186231; }
/* Gametracker checked. A light violet rather than the deep purple the W
   rank tag fills with, so the dot is never read as a rank. */
.c-dot.gt { background: #8B5CF6; }
/* Ringed, because a light yellow disc on white is nearly nothing at 6px. */
.c-dot.visit { background: #F1B82D; box-shadow: 0 0 0 0.5px rgba(44,42,41,0.35); }
body.dense .c-dot { width: 8px; height: 8px; }
body.dense .c-name-dots .right { gap: 4px; }
body.compact .c-name-dots { display: none; }
.c-name-text { font-family: var(--f-black); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.c-name-new { font-family: var(--f-black); font-weight: 700; font-size: 8px; letter-spacing: 0.08em;
  color: var(--red); background: #fdf6e8; padding: 2px 4px; }

/* A little room on the left, so the visit dots at the end of the name
   column read as the player's and not as the start of the school name. */
.c-school { min-width: 0; overflow: hidden; padding-right: 8px; padding-left: 8px; }
.col-header .ch-school { padding-left: 8px; }
.c-school a, .c-school span { font-size: 14.5px; font-weight: 500; color: #54504a; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; display: block; text-decoration: none; }

.c-st { display: flex; align-items: center; justify-content: center;
  font-family: var(--f-black); font-weight: 900; font-size: 9.5px;
  letter-spacing: 0.06em; text-align: center; }
/* Red is Georgia, and only Georgia. The row's red edge says UGA offer. */
.c-st.home { color: var(--red); }
.c-st.plain { color: var(--black); }

.c-action { position: relative; display: flex; align-items: center; justify-content: center;
  min-width: 0; align-self: stretch; }
/* Filling roughly 90% of the row, the way the headshot does, so the tag
   reads as a block rather than a caption. */
/* Wider than it is tall. At 90% of a 58px row it was a square block and
   read as heavy as the rank tag, which is the more important decision. */
.action-chip { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 26px;
  font-family: var(--f-black); line-height: 1; white-space: nowrap; flex: 0 0 auto; background: #e6e4df;
  font-weight: 900; font-size: 9px; letter-spacing: 0.04em; }
.action-chip.empty { background: #fff; color: #c9c5bd; font-weight: 400; font-size: 11px; }
/* The boneyard tag now reads OB, so it sizes like every other action tag
   rather than like the emoji it replaced. */

.c-commit { min-width: 0; overflow: hidden; display: flex; justify-content: center; }
.commit-chip { font-family: var(--f-black); font-weight: 700; font-size: 10px;
  letter-spacing: 0.02em; line-height: 1.15; white-space: nowrap; text-decoration: none; }
.commit-plain { font-size: 13.5px; font-weight: 400; color: #b3ada3; letter-spacing: 0.01em; }
.prow.boneyard .commit-chip { opacity: 0.7; }

.c-p4 { display: flex; align-self: stretch; align-items: center; justify-content: flex-end;
  font-family: var(--f-light); font-weight: 300; font-size: 11px; color: #0033a0; padding-right: 7px; }
.c-tot { display: flex; align-self: stretch; align-items: center; justify-content: flex-end;
  font-family: var(--f-light); font-weight: 300; font-size: 11px; color: #54504a; padding-right: 9px; }

.c-metric { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 0; overflow: hidden; font-family: var(--f-light); font-size: 12.5px; letter-spacing: -0.15px; }
/* A seven character value like 5'10.75 comes down a size so it reads in
   full. The alternative is widening every metric column for the one in
   twenty that needs it. */
.c-metric .v.long { font-size: 11px; letter-spacing: -0.3px; }
body.dense .c-metric .v.long { font-size: 12px; letter-spacing: -0.3px; }
.c-metric .v { line-height: 14px; white-space: nowrap; font-weight: 300; color: var(--black); }
.c-metric .v.dash { font-weight: 300; font-size: 12px; color: #d5d1c9; }
.c-metric .chip { display: inline-block; min-width: 17px; padding: 0 3px; height: 11px; line-height: 11px;
  text-align: center; font-family: var(--f-light); font-weight: 300; font-size: 7.5px; letter-spacing: 0.02em;
  color: #57534d; flex: 0 0 auto; }
.c-flag { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  overflow: hidden; line-height: 1; }
.c-flag .f { line-height: 14px; font-family: var(--f-black); font-weight: 900; font-size: 9.5px; padding-top: 1px; }
.c-flag .sp { height: 11px; flex: 0 0 auto; }
/* Hidden, not removed. display:none takes a cell out of the grid, and the
   compact grid still declares a 0px track for it, so every column after
   the first flag shifted one track left: WT landed in the flag's 0px
   track and vanished, 40 landed in WT's, and so on down the row. */
body.compact .c-flag { visibility: hidden; }
body.compact .c-metric .chip { display: none; }

.c-dist { font-family: var(--f-light); font-size: 13px; font-weight: 300; color: #8d8880; letter-spacing: 0.01em; text-align: right; padding-right: 3px; }

/* ---------------------------------------------------------- boneyard */
/* A divider between the board and what came off it, so it is found by
   scanning rather than by reading. It used to be the same size as a
   column header. */
.boneyard-toggle { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 0 14px;
  height: 40px; background: #efece7; border-top: 2px solid #c9c5bd;
  border-bottom: 1px solid #d5d1c9; color: var(--black); }
.boneyard-caret { font-size: 13px; color: #8d8880; display: inline-block; line-height: 1; transition: transform .1s; }
.boneyard-toggle.open .boneyard-caret { transform: rotate(90deg); }
.boneyard-label { font-family: var(--f-black); font-weight: 900; font-size: 15px; letter-spacing: 0.12em; }
.boneyard-count { font-family: var(--f-black); font-weight: 700; font-size: 11px; color: #fff;
  background: var(--black); padding: 3px 7px; line-height: 1; }

.empty-board { padding: 24px 14px; }
.empty-board p { margin: 0 0 10px; font-family: var(--f-cond); font-size: 14px; color: var(--black); }
.empty-board button { background: var(--red); color: #fff; border: none; font-family: var(--f-black);
  font-weight: 700; font-size: 10px; letter-spacing: 0.08em; padding: 8px 12px; }

/* ---------------------------------------------------------- position tabs */
.tabbar { flex: 0 0 auto; display: flex; align-items: stretch; height: 31px; background: #e6e4df;
  border-top: 1px solid #b9b4aa; }
/* The board's own bar rides above the rows, under the class and view
   toggles: changing position is the move a reader makes most, and the key
   belongs where the columns it explains are. The rule flips with it. */
.tabbar.top { border-top: none; border-bottom: 1px solid #b9b4aa; }
.tabbar.top .tab-btn.active { box-shadow: inset 0 -3px 0 var(--red); }
.tabbar-label { display: flex; align-items: center; padding: 0 11px; font-family: var(--f-black);
  font-weight: 600; font-size: 8.5px; letter-spacing: 0.13em; color: #a09a91; }
.tabs { display: flex; align-items: stretch; }
.tab-btn { display: flex; align-items: center; gap: 7px; height: 100%; padding: 0 12px;
  border: none; border-right: 1px solid #cdc8bf; background: transparent; color: #6f6a63;
  font-family: var(--f-black); font-weight: 900; font-size: 10.5px; letter-spacing: 0.07em; }
.tab-btn.active { background: #fff; color: var(--black); font-weight: 900; box-shadow: inset 0 3px 0 var(--red); }
.tab-btn .n { font-family: var(--f-black); font-weight: 600; font-size: 9px; color: #a09a91; }
.tab-btn.active .n { color: var(--red); }
.archive-btn { display: flex; align-items: center; height: 100%; padding: 0 11px; border: none;
  background: transparent; color: #8d8880; font-family: var(--f-black); font-weight: 600; font-size: 10px;
  letter-spacing: 0.09em; }
.legend { margin-left: auto; display: flex; align-items: center; gap: 12px; padding-right: 13px;
  font-family: var(--f-light); font-weight: 300; font-size: 9px; letter-spacing: 0.11em; color: #a09a91; }
.legend-item { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
/* Seven keys and a total do not fit beside the position tabs on a laptop.
   Tighter first, then the total goes: it is the one entry that is not a key. */
@media (max-width: 1500px) {
  .legend { gap: 9px; letter-spacing: 0.06em; }
}
@media (max-width: 1360px) {
  .legend-dot, #legend-total { display: none; }
}
.legend-gradient { width: 44px; height: 9px; display: block; background: linear-gradient(90deg, #fff, #c7e9cd);
  border: 1px solid #d5d1c9; }
.legend-flag { font-family: var(--f-light); font-weight: 300; font-size: 9px; font-style: normal; }
.legend-dot { color: #cdc8bf; }

/* Committed school: the mark above the name, the name in the school's own
   primary colour. No filled chip behind it, because a mark is drawn to sit
   on its own colour. */
.commit-chip { display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; min-width: 0; max-width: 100%; }
.commit-logo { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.commit-name { max-width: 100%; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-size: 11px; }
body.dense .commit-logo { width: 30px; height: 30px; }
body.dense .commit-name { font-size: 13px; }
/* Compact has no room for a name and does not need one: the mark is the
   fastest read on the row. */
body.compact .commit-logo { width: 20px; height: 20px; }
body.compact .commit-name { display: none; }

/* Links in the row keep the cell's own treatment. They are targets, not
   decorated links: the underline only appears on hover. */
.c-st a, .commit-chip { color: inherit; text-decoration: none; }
.c-st a:hover, .c-school a:hover { text-decoration: underline; }
.commit-chip:hover { outline: 1px solid rgba(0,0,0,0.35); outline-offset: 1px; }

.search-row { cursor: pointer; }
.search-row.empty { cursor: default; color: #a09a91; }

/* ------------------------------------------------------ row create */
.c-create { position: relative; display: flex; align-items: center; justify-content: center; }
.c-createbtn { display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 1px solid transparent;
  background: none; color: var(--black); cursor: pointer; }
.c-createbtn svg { width: 19px; height: 20px; }
body.dense .c-createbtn svg { width: 22px; height: 23px; }
.prow:hover .c-createbtn { border-color: #ded9d0; background: #fff; }
.c-createbtn:hover { color: var(--red); border-color: var(--red); }
/* Hangs to the right of the button, which is now at the left edge. */
.c-createmenu { position: absolute; top: 26px; left: 0; z-index: 40; width: 168px;
  background: #fff; border: 1px solid #cdc8bf; box-shadow: 0 12px 28px rgba(0,0,0,0.22); }
.c-createmenu-item { padding: 8px 11px; border-bottom: 1px solid #f2f1ee; cursor: pointer;
  font-family: var(--f-black); font-weight: 700; font-size: 10px; letter-spacing: 0.09em;
  color: var(--black); white-space: nowrap; }
.c-createmenu-item:last-child { border-bottom: none; }
.c-createmenu-item:hover { background: #f4f2ee; }

/* ------------------------------------------------------ row select */
.c-select { display: flex; align-items: center; justify-content: center; }
/* Two words in narrow columns: they get their own smaller size rather
   than running into each other. */
.col-header .ch.tight { font-size: 7px; letter-spacing: 0.02em; }
/* The header keeps the black bar's column, in the same colour, so the bar
   runs the full height of the board rather than starting under the head. */
.ch-handle { align-self: stretch; background: var(--black); }
/* SELECT and its box, stacked in one narrow column. */
.ch-selectall { flex-direction: column; gap: 2px; }
.ch-selectall .c-selectbox { width: 12px; height: 12px; }
.c-selectbox { width: 18px; height: 18px; accent-color: var(--red); cursor: pointer; margin: 0; }
body.dense .c-selectbox { width: 20px; height: 20px; }
/* The header box is a 12px tick under a label in every density. DENSE grows
   the row boxes, and without this it grew the header one too, which put a
   20px box under an 8px word. */
body.dense .ch-selectall .c-selectbox { width: 12px; height: 12px; }

/* Taken off the bar; kept in the page for now. */
.counts-line[hidden], .as-of[hidden] { display: none; }


/* ---------------------------------------------------------- leaderboard */
/* The title and this week or season on the left, the stat family in the
   middle where it is read first, position and class on a line under it. */
.lb-subbar { flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "left fam charted" "filt filt filt";
  align-items: center; column-gap: 16px; row-gap: 8px; padding: 10px 14px;
  background: #f6f5f2; border-bottom: 1px solid #d5d1c9; }
.lb-subbar-left { grid-area: left; display: flex; align-items: center; gap: 12px;
  min-width: 0; flex-wrap: wrap; }
.lb-title { font-family: var(--f-xblack); font-weight: 900; font-size: 18px;
  letter-spacing: 0.01em; white-space: nowrap; }
.lb-families { grid-area: fam; }
.lb-filters:empty { display: none; }
/* The room's own work: every charted player, and the numbers a box score
   cannot give. Green, because it is the one button that leaves the leaders. */
/* The one button that leaves the leaders, so it is the one button here
   built to be found: full height of the bar, a light green glow around it
   and light green letters on the dark green ground. */
.lb-charted { grid-area: charted; justify-self: end; min-width: 280px; height: 62px;
  padding: 0 26px;
  border: 2px solid #186231; background: #186231; color: #b8ecc4;
  font-family: var(--f-xblack); font-weight: 900; font-size: 19px; letter-spacing: 0.10em;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 0 0 3px rgba(122, 214, 148, 0.34), 0 0 14px 2px rgba(122, 214, 148, 0.5); }
.lb-charted:hover { background: #12512a; border-color: #12512a; color: #d6f7de;
  box-shadow: 0 0 0 3px rgba(122, 214, 148, 0.48), 0 0 20px 4px rgba(122, 214, 148, 0.66); }
/* On the charted screen it is the way back, so it inverts and says so. */
.lb-charted.on { background: #fff; color: #186231; }

/* The charted screen reads green end to end: the room's own numbers, not a
   box score somebody else typed. */
.charted-mode .lb-subbar { background: #e4f3e7; border-bottom-color: #a9d4b5; }
.charted-mode #lb-scroll { background: #eef7f0; }
.charted-mode .tabbar { background: #dcefe1; border-top-color: #a9d4b5; }

/* The charted table. Many columns, so it scrolls inside itself and the
   player block stays put on the left. */
.ch-wrap { overflow-x: auto; }
.ch-table { min-width: max-content; }
.ch-row { display: grid; grid-template-columns: 34px 46px minmax(178px, 1fr) 50px 44px
  minmax(140px, 180px) 34px 60px 68px repeat(var(--ch-cols, 20), 68px);
  align-items: center; gap: 0 6px; height: 40px; padding: 0 12px;
  border-bottom: 1px solid #dfeee3; }
/* Two rows tall, so a two word header stacks inside its column instead of
   spilling into the next one. */
.ch-row.head { position: sticky; top: 0; z-index: 2; height: 42px; background: #cfe8d6;
  border-bottom: 2px solid #7ab894; font-family: var(--f-black); font-weight: 700;
  font-size: 6.8px; letter-spacing: 0.02em; color: #2f5c3f; }
.ch-row.head .n { display: flex; flex-direction: column; align-items: center;
  justify-content: center; line-height: 1.25; gap: 0; }
.ch-hword { display: block; white-space: nowrap; }
/* Zebra, barely: enough for an eye to hold a line across twenty numbers,
   not enough to read as a band. */
.ch-row:nth-child(even):not(.head) { background: rgba(24, 98, 49, 0.045); }
.ch-row:not(.head):hover { background: #d8eede; }
.ch-row .n { text-align: center; font-family: var(--f-light); font-weight: 300; font-size: 13.5px;
  color: var(--black); }
.ch-row .n.blank { color: #b7cfbe; }
.ch-row .ch-place { font-family: var(--f-light); font-weight: 300; font-size: 12px; color: #6f8a77;
  text-align: right; }
.ch-name { font-family: var(--f-black); font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-school { font-family: var(--f-cond); font-size: 12.5px; color: #5f7a68;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-pos, .ch-state { font-family: var(--f-black); font-weight: 700; font-size: 10px;
  letter-spacing: 0.06em; color: #4f6f5c; text-align: center; }
.ch-class { display: flex; align-items: center; justify-content: center; }
.ch-classchip { display: inline-flex; align-items: center; justify-content: center;
  height: 20px; width: 40px; font-family: var(--f-black); font-weight: 700;
  font-size: 11px; color: #54504a; }
.ch-charter { display: flex; gap: 3px; justify-content: center; }
/* No border. The fill is the identity; an outline made a nine pixel chip
   read as something to press. */
.ch-charter i { font-style: normal; font-family: var(--f-black); font-weight: 700; font-size: 8.5px;
  letter-spacing: 0.06em; color: #fff; background: #2c2a29; padding: 2px 5px; border: none; }
.ch-prod { display: flex; align-items: center; justify-content: center; height: 26px;
  font-family: var(--f-xblack); font-weight: 900; font-size: 14px; color: #fff; }
.ch-prod.empty { background: #e2eee6; color: #a9c4b2; }
.ch-row .sortable { cursor: pointer; }
.ch-row .sorted { color: #14401f; }
.ch-row .sorted .ch-hword { text-decoration: underline; text-underline-offset: 2px; }
.ch-row.head .ch-prodhead { color: #14401f; font-size: 9.5px; letter-spacing: 0.08em; }
.ch-charters { display: flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--f-black);
  font-weight: 700; font-size: 9px; letter-spacing: 0.1em; color: #4f6f5c; }
/* The families box draws a 2px frame round whatever sits in it. On this
   screen that put a border round PJ and MA, which is not a control. */
.lb-families.ch-headwrap { display: block; border: none; text-align: center; }
.ch-bigtitle { font-family: var(--f-display); font-weight: 900; font-size: 32px;
  line-height: 1; letter-spacing: 0.01em; color: #14401f; margin-bottom: 6px;
  white-space: nowrap; }
.ch-charters-one { display: flex; align-items: center; gap: 5px; }
.ch-charters-one i { font-style: normal; font-family: var(--f-black); font-weight: 700;
  font-size: 9px; letter-spacing: 0.06em; color: #fff; background: #2c2a29; padding: 3px 6px; }
.ch-charters b { font-family: var(--f-xblack); font-weight: 900; font-size: 13px; color: var(--black); }

/* State toggles, the map's behaviour in one line: press to add, press again
   to drop, ALL to clear. Georgia leads and wears red. */
.ch-states { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ch-states-label { font-family: var(--f-black); font-weight: 600; font-size: 8.5px;
  letter-spacing: 0.13em; color: #6f8a77; margin-right: 4px; }
.ch-state-btn { height: 22px; min-width: 30px; padding: 0 7px; border: 1px solid #a9d4b5;
  background: #fff; color: #4f6f5c; font-family: var(--f-black); font-weight: 700;
  font-size: 9.5px; letter-spacing: 0.06em; cursor: pointer; }
.ch-state-btn.on { background: #186231; border-color: #186231; color: #fff; }
.ch-state-btn.home { border-color: var(--red); color: var(--red); }
.ch-state-btn.home.on { background: var(--red); border-color: var(--red); color: #fff; }
.ch-state-all { height: 22px; padding: 0 9px; border: 1px solid transparent; background: transparent;
  color: #6f8a77; font-family: var(--f-black); font-weight: 600; font-size: 9px;
  letter-spacing: 0.1em; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.lb-families { display: flex; align-items: stretch; border: 2px solid var(--black); }
.lb-family { display: flex; align-items: baseline; gap: 8px; height: 40px;
  padding: 0 26px; border: none; background: #fff; color: var(--black);
  cursor: pointer; }
.lb-family + .lb-family { border-left: 2px solid var(--black); }
.lb-family .lb-family-label { align-self: center; font-family: var(--f-xblack);
  font-weight: 900; font-size: 17px; letter-spacing: 0.08em; }
.lb-family .lb-family-n { align-self: center; font-family: var(--f-light);
  font-weight: 300; font-size: 13px; color: #8d8880; }
.lb-family:hover { background: #f4f2ef; }
.lb-family.active { background: var(--black); color: #fff; }
.lb-family.active .lb-family-n { color: rgba(255,255,255,0.6); }

/* Position and class keep their places whatever is picked: both lists are
   the family's, not the current filter's. */
.lb-filters { grid-area: filt; display: flex; align-items: center; justify-content: center;
  gap: 26px; flex-wrap: wrap; }
.lb-filter { display: flex; align-items: center; gap: 7px; }
.lb-filter-label { font-family: var(--f-black); font-weight: 700; font-size: 8.5px;
  letter-spacing: 0.12em; color: #a09a91; }
.lb-seg { display: flex; align-items: stretch; height: 28px; border: 1px solid #c9c5bd;
  background: #fff; }
.lb-seg button { min-width: 44px; height: 26px; padding: 0 11px; border: none;
  border-right: 1px solid #e3e0da; background: #fff; color: #6f6a63; cursor: pointer;
  font-family: var(--f-black); font-weight: 700; font-size: 10px;
  letter-spacing: 0.08em; white-space: nowrap; }
.lb-seg button:last-child { border-right: none; }
.lb-seg button:hover { color: var(--black); }
.lb-seg button.active { background: var(--black); color: #fff; }
/* A class in its board colour, set inline; the year the same size as a tab. */
.lb-seg button.lb-class-btn { font-family: var(--f-black); font-weight: 900; font-size: 12px;
  letter-spacing: 0.01em; }

/* The podium: the top five as cards, first one wider. Colours ride on
   variables so a medal card can turn its ink dark in one place. */
.lb-podium { display: grid; gap: 12px; padding: 18px 14px 20px;
  grid-template-columns: 1.2fr repeat(4, 1fr); background: #efedea;
  border-bottom: 1px solid #d5d1c9; }
.lb-card { --ink: #fff; --ink-2: rgba(255,255,255,0.82); --ink-3: rgba(255,255,255,0.58);
  --rule: rgba(255,255,255,0.18); --plate: #3a3733;
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  min-width: 0; padding: 12px 12px 11px 16px; border: none; text-align: left; cursor: pointer;
  background: #2c2a29; color: var(--ink); overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.16); transition: transform 0.12s ease; }
.lb-card:hover { transform: translateY(-2px); }
/* Fourth and fifth wear black with a red stripe. */
.lb-card::before { content: ''; position: absolute; left: 0; top: 0;
  bottom: 0; width: 4px; background: var(--red); }
/* The first three are medals: gold, silver, bronze, with dark ink. Gold
   carries a soft glow so the eye lands there first. Not red for first:
   red is an AL rank tag's colour, and a tag on red disappears. */
.lb-card.place-1, .lb-card.place-2, .lb-card.place-3 {
  --ink: #1e1d1c; --ink-2: rgba(30,29,28,0.82); --ink-3: rgba(30,29,28,0.6);
  --rule: rgba(30,29,28,0.2); --plate: rgba(255,255,255,0.35); }
.lb-card.place-1::before, .lb-card.place-2::before, .lb-card.place-3::before { display: none; }
.lb-card.place-1 { background: linear-gradient(140deg, #f7e19a 0%, #e2b84a 45%, #c9981f 100%);
  box-shadow: 0 0 0 1px #d9a92a, 0 0 22px rgba(241,184,45,0.45), 0 6px 18px rgba(0,0,0,0.14); }
.lb-card.place-2 { background: linear-gradient(140deg, #f7f8f9 0%, #dfe2e5 45%, #c3c8cc 100%); }
.lb-card.place-3 { background: linear-gradient(140deg, #efc9a2 0%, #d29462 45%, #b0713f 100%); }

/* Place, photo, rank tag, left to right. */
.lb-card-top { display: grid; grid-template-columns: auto 88px minmax(0, 1fr); gap: 9px;
  height: 88px; margin-bottom: 10px; }
.lb-card.place-1 .lb-card-top { grid-template-columns: auto 100px minmax(0, 1fr); height: 100px; }
.lb-card-place { align-self: start; min-width: 16px; font-family: var(--f-display);
  font-weight: 900; font-size: 30px; line-height: 0.85; color: var(--ink); }
.lb-card-shot { position: relative; background-size: cover; background-position: center;
  background-color: var(--plate); }
.lb-card-shot.placeholder { background-image: url('/img/headshot-placeholder.svg'); }
/* A rank tag is a cell: square, no border, no radius, no shadow. */
.lb-card-rank { display: flex; align-items: center; justify-content: center; min-width: 0;
  font-family: var(--f-xblack); font-weight: 900; font-size: 30px; line-height: 1;
  letter-spacing: 0.01em; color: #fff; white-space: nowrap; overflow: hidden; }
.lb-card.place-1 .lb-card-rank { font-size: 34px; }
.lb-card-rank.empty { background: var(--plate); color: var(--ink-3); }

/* Who and where, and beside them the school he is committed to. The high
   school wraps rather than cuts: Rabun Gap-Nacoochee School is the test. */
.lb-card-mid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px;
  align-items: center; }
.lb-card-who { min-width: 0; }
.lb-card-commit { display: flex; align-items: center; justify-content: center; }
.lb-card-commit:empty { display: none; }
.lb-card-commit img { width: 44px; height: 40px; object-fit: contain; }
.lb-card-name { display: flex; flex-direction: column; min-width: 0; }
.lb-card-first, .lb-card-last { font-family: var(--f-display); font-weight: 900;
  font-size: 22px; line-height: 0.96; letter-spacing: 0.005em; overflow-wrap: anywhere; }
.lb-card.place-1 .lb-card-first, .lb-card.place-1 .lb-card-last { font-size: 25px; }
.lb-card-lastrow { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.lb-card-last { min-width: 0; }
.lb-card-jersey { flex: 0 0 auto; font-family: var(--f-light); font-weight: 300;
  font-size: 17px; line-height: 1; color: var(--ink-3); }
.lb-card-meta { display: block; margin-top: 6px; font-family: var(--f-black); font-weight: 700;
  font-size: 9px; letter-spacing: 0.1em; color: var(--ink-3); }
.lb-card-school { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 6px;
  row-gap: 2px; min-width: 0; margin-top: 3px;
  font-family: var(--f-cond); font-size: 13px; line-height: 1.15; color: var(--ink-2); }
.lb-card-school .lb-school-name { min-width: 0; }
.lb-card-school .lb-st { color: var(--ink-3); }
.lb-card-school .lb-st.home { color: var(--ink); }
.lb-card-school .lb-class-chip { border-color: var(--rule); }
.lb-card-school .lb-class-chip b { color: var(--ink); }
.lb-card-school .lb-class-chip i { color: var(--ink-3); }

.lb-card-lead { display: flex; align-items: baseline; gap: 6px; margin-top: auto;
  padding-top: 8px; border-top: 1px solid var(--rule); }
.lb-card-mid { margin-bottom: 10px; }
.lb-card-lead .v { font-family: var(--f-xblack); font-weight: 900; font-size: 36px;
  line-height: 1; }
.lb-card.place-1 .lb-card-lead .v { font-size: 44px; }
.lb-card-lead .k { font-family: var(--f-black); font-weight: 700; font-size: 10px;
  letter-spacing: 0.12em; color: var(--ink-3); }
.lb-card-line { display: grid; grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
  gap: 4px; margin-top: 7px; }
.lb-card-line span { display: flex; flex-direction: column; }
.lb-card-line i { font-family: var(--f-black); font-style: normal; font-weight: 700;
  font-size: 13px; }
.lb-card-line b { font-family: var(--f-black); font-weight: 700; font-size: 7.5px;
  letter-spacing: 0.1em; color: var(--ink-3); }

/* A laptop still gets all five in a row: smaller photo, smaller type,
   rather than two rows that push the list off the screen. */
@media (max-width: 1250px) {
  .lb-podium { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; padding: 14px 12px 16px; }
  .lb-card { padding: 10px 9px 9px 13px; }
  .lb-card.place-1, .lb-card.place-2, .lb-card.place-3 { padding-left: 10px; }
  .lb-card-top, .lb-card.place-1 .lb-card-top { grid-template-columns: auto 56px minmax(0, 1fr);
    height: 56px; gap: 6px; margin-bottom: 8px; }
  .lb-card-place { font-size: 22px; min-width: 11px; }
  .lb-card-rank, .lb-card.place-1 .lb-card-rank { font-size: 20px; }
  .lb-card-first, .lb-card-last,
  .lb-card.place-1 .lb-card-first, .lb-card.place-1 .lb-card-last { font-size: 16px; }
  .lb-card-jersey { font-size: 12px; }
  .lb-card-school { font-size: 11.5px; }
  .lb-card-commit img { width: 30px; height: 28px; }
  .lb-card-lead .v, .lb-card.place-1 .lb-card-lead .v { font-size: 28px; }
  .lb-card-line { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 5px; }
  .lb-card-line i { font-size: 12px; }
}

/* Classification, beside the state wherever a school is named here. */
.lb-class-chip { flex: 0 0 auto; display: inline-flex; align-items: baseline;
  padding: 1px 4px; border: 1px solid #ded9d0; line-height: 1; white-space: nowrap; }
.lb-class-chip b { font-family: var(--f-black); font-weight: 700; font-size: 9.5px;
  letter-spacing: 0.05em; color: #6f6a63; }
.lb-class-chip i { font-style: normal; font-family: var(--f-light); font-weight: 300;
  font-size: 8.5px; color: #a09a91; }

/* The list, below the podium: #, POS, RANK, photo, PLAYER, SCHOOL, COMMIT,
   CLASS, then the family's columns. */
.lb-row { display: grid; grid-template-columns: 34px 46px 52px 40px minmax(190px,1fr)
  minmax(200px,0.9fr) 52px 54px repeat(var(--lb-cols, 7), 64px);
  align-items: center; gap: 8px; padding: 0 14px; }
.lb-col-header { height: 30px; background: #e6e4df; border-bottom: 1px solid #b9b4aa;
  font-family: var(--f-black); font-weight: 700; font-size: 8.5px;
  letter-spacing: 0.1em; color: #8d8880; position: sticky; top: 0; z-index: 2; }
.lb-col-header .ch { display: flex; align-items: center; }
.lb-col-header .ch.center { justify-content: center; }
.lb-col-header .ch.sortable { cursor: pointer; user-select: none; }
.lb-col-header .ch.sortable:hover { color: #54504a; }
.lb-col-header .ch.sorted { color: var(--black); }
.lb-col-header .ch .arrow { margin-left: 3px; font-size: 8px; }
.lbrow { height: 50px; background: #fff; border-bottom: 1px solid #eeece8; cursor: pointer; }
.lbrow:hover { background: #faf9f7; }
.lb-place { font-family: var(--f-xblack); font-weight: 900; font-size: 15px;
  color: #c9c5bd; text-align: right; }
.lb-rank { display: flex; align-items: center; justify-content: center; height: 26px;
  font-family: var(--f-xblack); font-weight: 900; font-size: 13px; line-height: 1;
  color: #fff; white-space: nowrap; overflow: hidden; }
.lb-rank.empty { background: #f4f2ef; color: #c9c5bd; }
.lb-shot { width: 38px; height: 38px; background-size: cover; background-position: center;
  background-color: #f4f2ef; }
.lb-shot.placeholder { background-image: url('/img/headshot-placeholder.svg'); }
.lb-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.lb-name-text { min-width: 0; font-family: var(--f-black); font-weight: 600;
  font-size: 15px; letter-spacing: -0.01em; color: var(--black);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-jersey-small { flex: 0 0 auto; font-family: var(--f-light); font-weight: 300;
  font-size: 12px; color: #a09a91; }
.lb-school { display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 13px; font-weight: 500; color: #8d8880; }
.lb-school .lb-school-name { min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.lb-st { flex: 0 0 auto; font-family: var(--f-black); font-weight: 900;
  font-size: 8.5px; color: #a09a91; }
.lb-st.home { color: var(--red); }
.lb-commit { display: flex; align-items: center; justify-content: center; }
.lb-commit img { width: 30px; height: 28px; object-fit: contain; }
.lb-pos, .lb-class { text-align: center; font-family: var(--f-black);
  font-weight: 700; font-size: 10px; color: #8d8880; }
.lb-n { text-align: center; font-family: var(--f-light); font-weight: 300;
  font-size: 15px; color: var(--black); }
.lb-n.lead { font-family: var(--f-xblack); font-weight: 900; }
.lb-empty { display: flex; align-items: baseline; gap: 8px; padding: 40px 14px;
  justify-content: center; font-family: var(--f-black); font-weight: 700;
  letter-spacing: 0.12em; color: #a09a91; }
.lb-empty-label { font-size: 11px; }
.lb-empty-n { font-family: var(--f-light); font-weight: 300; font-size: 12px; }
/* The list on a laptop: every column narrower, none dropped. */
@media (max-width: 1250px) {
  .lb-row { grid-template-columns: 28px 38px 46px 36px minmax(130px,1fr)
    minmax(130px,0.9fr) 40px 42px repeat(var(--lb-cols, 7), 48px); gap: 5px; padding: 0 10px; }
  .lb-n { font-size: 14px; }
  .lb-commit img { width: 24px; height: 22px; }
}

/* ------------------------------------------------------------- compare
   Up to four position boards on screen; more than four and the region
   scrolls sideways, each column keeping the width four would have had.
   Each column scrolls on its own, so a 67-row board beside a 12-row one
   does not drag the short one down the page with it. */
.cmp-wrap { position: relative; flex: 0 0 auto; }
.cmp-btn { height: 28px; min-width: 118px; padding: 0 18px; border: 1px solid #c9c5bd;
  background: #fff; color: #54504a; font-family: var(--f-black); font-weight: 900;
  font-size: 11px; letter-spacing: 0.12em; cursor: pointer; }
.cmp-btn:hover { border-color: var(--black); color: var(--black); }
.cmp-btn.on { background: var(--black); border-color: var(--black); color: #fff; }
.cmp-back { flex: 0 0 auto; height: 28px; padding: 0 14px; border: 1px solid #c9c5bd;
  background: #fff; color: #6f6a63; font-family: var(--f-black); font-weight: 700;
  font-size: 10px; letter-spacing: 0.1em; cursor: pointer; }
.cmp-back:hover { border-color: var(--red); color: var(--red); }
.cmp-back[hidden] { display: none; }

.cmp-menu { position: absolute; top: 32px; left: 0; z-index: 40; width: 236px;
  max-height: 68vh; overflow-y: auto;
  background: #fff; border: 1px solid #cdc8bf; box-shadow: 0 12px 28px rgba(0,0,0,0.22);
  padding: 4px; }
/* Across positions or across classes, at the top of the VIEW BOARDS menu. */
.cmp-axis { display: flex; gap: 0; margin: 2px 3px 6px; border: 1px solid #c9c5bd; }
.cmp-axis button { flex: 1 1 0; height: 24px; border: none; background: #fff; color: #6f6a63;
  font-family: var(--f-black); font-weight: 700; font-size: 8.5px; letter-spacing: 0.08em;
  cursor: pointer; white-space: nowrap; }
.cmp-axis button + button { border-left: 1px solid #c9c5bd; }
.cmp-axis button.on { background: var(--black); color: #fff; }
.cmp-menu-top { padding: 2px 3px 5px; border-bottom: 1px solid #eeece8; margin-bottom: 3px; }
.cmp-menu-all { width: 100%; height: 24px; border: 1px solid #c9c5bd; background: #fff;
  color: #54504a; font-family: var(--f-black); font-weight: 700; font-size: 9px;
  letter-spacing: 0.1em; cursor: pointer; }
.cmp-menu-all:hover { border-color: var(--black); color: var(--black); }
.cmp-menu-side { display: block; padding: 6px 7px 3px; font-family: var(--f-black);
  font-weight: 700; font-size: 8px; letter-spacing: 0.13em; color: #a09a91; }
.cmp-menu-row { display: flex; align-items: center; gap: 8px; padding: 5px 7px;
  cursor: pointer; font-family: var(--f-black); font-weight: 700; font-size: 10px;
  letter-spacing: 0.06em; color: #54504a; }
.cmp-menu-row:hover { background: #f6f5f2; }
.cmp-menu-row.on { color: var(--black); }
.cmp-menu-pos { flex: 1 1 auto; }
.cmp-menu-n { font-family: var(--f-light); font-weight: 300; font-size: 10px; color: #a09a91; }

.cmp-region { flex: 1 1 auto; min-height: 0; display: grid;
  grid-template-columns: repeat(var(--cmp-cols, 2), minmax(0, 1fr));
  /* One row, the height of the region. Without this the row grew to the
     tallest board and the columns ran off the bottom of the screen
     instead of scrolling inside themselves. */
  grid-template-rows: minmax(0, 1fr);
  gap: 1px; background: #d5d1c9; }
/* Past four, each column takes a quarter of the screen and the region
   runs off the side. Four is the most that can carry a name, a school and
   a set of numbers without cutting one of them. */
.cmp-region.scrolls { overflow-x: auto;
  grid-template-columns: repeat(var(--cmp-cols),
    calc((100vw - (var(--cmp-visible) - 1) * 1px) / var(--cmp-visible))); }
.cmp-col { min-width: 0; min-height: 0; display: flex; flex-direction: column;
  background: #fff; container-type: inline-size; }
.cmp-colhead { flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 11px; background: #e6e4df; border-bottom: 1px solid #b9b4aa;
  position: sticky; top: 0; z-index: 2; }
.cmp-colpos { font-family: var(--f-black); font-weight: 900; font-size: 11px;
  letter-spacing: 0.1em; color: var(--black); }
.cmp-coln { font-family: var(--f-light); font-weight: 300; font-size: 10px;
  letter-spacing: 0.1em; color: #8d8880; }
.cmp-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.cmp-empty { padding: 14px 11px; font-family: var(--f-black); font-weight: 700;
  font-size: 9px; letter-spacing: 0.1em; color: #c9c5bd; }

/* #, rank, photo, the name block, then fixed columns: committed mark,
   height over weight, 40, offers, and the move on the COMPARE split.

   Every column but the name block has a fixed width. Each row is its own
   grid, so an `auto` column sized itself to that row's numbers and pushed
   the logo a few pixels left or right of the row above. */
.cmp-row { display: grid;
  grid-template-columns: 22px 52px 50px minmax(0,1fr) 36px 58px 50px 38px;
  align-items: center; gap: 9px; height: 64px; padding: 0 12px 0 10px;
  border-bottom: 1px solid #eeece8; cursor: pointer; }
.cmp-row.has-delta {
  grid-template-columns: 44px 22px 52px 50px minmax(0,1fr) 36px 58px 50px 38px; }
.cmp-row:hover { background: #faf9f7; }
.cmp-num { font-family: var(--f-light); font-weight: 300; font-size: 12px;
  color: #a09a91; text-align: right; }
/* The same cell a board rank tag is: square, no border, no radius. Sized
   as STANDARD rather than DENSE, which was far too large here. */
.cmp-tag { display: flex; align-items: center; justify-content: center; height: 28px;
  font-family: var(--f-xblack); font-weight: 900; font-size: 14px; line-height: 1;
  color: #fff; white-space: nowrap; overflow: hidden; }
.cmp-tag.empty { background: #f4f2ef; color: #c9c5bd; }
.cmp-shot { width: 50px; height: 50px; background-size: cover; background-position: center;
  background-color: #f4f2ef; }
.cmp-shot.placeholder { background-image: url('/img/headshot-placeholder.svg'); }

.cmp-mid { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.cmp-nameline { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.cmp-name { min-width: 0; font-family: var(--f-black); font-weight: 600; font-size: 15.5px;
  letter-spacing: -0.01em; color: var(--black);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Committed to us: the name says it. */
.cmp-row.commit-uga .cmp-name { color: var(--red); }
.cmp-jersey { flex: 0 0 auto; font-family: var(--f-light); font-weight: 300;
  font-size: 11px; color: #a09a91; }
.cmp-sub { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cmp-sub .c-dot { flex: 0 0 auto; }
.cmp-school { min-width: 0; font-size: 12px; font-weight: 500; color: #8d8880;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-st { flex: 0 0 auto; font-family: var(--f-black); font-weight: 900; font-size: 8.5px;
  letter-spacing: 0.05em; color: #a09a91; }
.cmp-st.home { color: var(--red); }
.cmp-drive { flex: 0 0 auto; font-family: var(--f-light); font-weight: 300;
  font-size: 11px; color: #b3ada3; white-space: nowrap; }

.cmp-commit { display: flex; align-items: center; justify-content: center; height: 100%; }
.cmp-commit img { width: 32px; height: 30px; object-fit: contain; }

/* Numbers: right-aligned in their own columns so the digits stack. */
.cmp-size, .cmp-forty, .cmp-offers { display: flex; flex-direction: column;
  align-items: flex-end; justify-content: center; gap: 3px; }
.cmp-m { display: flex; align-items: baseline; justify-content: flex-end; }
.cmp-m i { font-family: var(--f-light); font-style: normal; font-size: 13px;
  color: var(--black); white-space: nowrap; }
.cmp-m i.blank { color: #c9c5bd; }
.cmp-flag { width: 8px; font-family: var(--f-black); font-weight: 900; font-size: 8px;
  padding-left: 1px; color: var(--black); text-align: left; }
.cmp-flag.g { color: var(--red); }
/* A value without a flag still reserves the flag's width, so a G on one
   row does not shift the digits of the row below it. */
.cmp-m i:last-child { margin-right: 8px; }
.cmp-offers i { font-family: var(--f-light); font-style: normal; font-size: 12.5px;
  line-height: 1; }
.cmp-offers i.p4 { color: #08558A; }
.cmp-offers i.tot { color: #a09a91; }

/* VIEW BOARDS: three lines per row (board.js compareStackRow). The rank
   tag over the photo on the left; name, school, then mark and numbers on
   the right, each line the full width of the column. */
.cmp-row.stack { grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: 20px 17px 26px; grid-template-areas:
    "tag name" "shot sub" "shot line";
  column-gap: 10px; row-gap: 2px; align-items: center;
  height: auto; padding: 8px 10px 8px 9px; }
.cmp-row.stack .cmp-tag { grid-area: tag; height: 20px; font-size: 11px; }
.cmp-row.stack .cmp-shot { grid-area: shot; width: 46px; height: 45px; align-self: end; }
.cmp-row.stack .cmp-nameline { grid-area: name; align-items: baseline; gap: 5px; }
.cmp-row.stack .cmp-num { flex: 0 0 auto; min-width: 14px; font-size: 11px; text-align: left;
  visibility: visible; }
.cmp-row.stack .cmp-name { font-size: 15px; }
.cmp-row.stack .cmp-sub { grid-area: sub; }
.cmp-row.stack .cmp-school { font-size: 12px; }
.cmp-line { grid-area: line; min-width: 0; display: grid;
  grid-template-columns: 26px 50px 38px 44px minmax(0, 1fr);
  align-items: center; column-gap: 4px; }
.cmp-row.stack .cmp-commit { justify-content: flex-start; }
.cmp-row.stack .cmp-commit img { width: 24px; height: 22px; }
.cmp-row.stack .cmp-m i { font-size: 12.5px; }
.cmp-row.stack .cmp-offers { display: flex; flex-direction: row; align-items: baseline;
  justify-content: flex-end; gap: 5px; }
.cmp-tail { min-width: 0; display: flex; align-items: center; justify-content: flex-end;
  gap: 5px; overflow: hidden; }
.cmp-tail .cmp-drive { display: inline; font-size: 10.5px; }
.cmp-tail .c-dot { flex: 0 0 auto; }
.cmp-row.stack .cmp-jersey.alt { display: none; }
.cmp-dots { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; align-self: center; }

/* VIEW BOARDS past four positions: columns snap, and the ‹ › at the edges
   step one position across for anyone on a mouse. */
#board-screen { position: relative; }
.cmp-region.scrolls { scroll-snap-type: x mandatory; }
.cmp-region.scrolls .cmp-col { scroll-snap-align: start; }
.cmp-step { position: absolute; z-index: 30; width: 30px; height: 64px; margin-top: -32px;
  display: flex; align-items: center; justify-content: center; padding: 0 0 4px;
  border: none; background: rgba(44,42,41,0.82); color: #fff; cursor: pointer;
  font-family: var(--f-light); font-size: 34px; line-height: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
.cmp-step:hover { background: var(--red); }
.cmp-step.prev { left: 0; }
.cmp-step.next { right: 0; }
.cmp-step[hidden] { display: none; }
/* A quarter of a laptop screen. The jersey number moves down beside the
   school so a long name (Landen Williams-Callis) keeps the whole line. */
@container (max-width: 290px) {
  .cmp-row.stack .cmp-nameline .cmp-jersey { display: none; }
  .cmp-row.stack .cmp-jersey.alt { display: inline; margin-left: auto; padding-left: 4px; }
  .cmp-row.stack .cmp-name { font-size: 14px; letter-spacing: -0.02em; }
  .cmp-row.stack { grid-template-columns: 42px minmax(0, 1fr); column-gap: 8px;
    padding-right: 8px; }
  .cmp-row.stack .cmp-shot { width: 42px; height: 42px; }
}
/* Narrow enough that the drive would push into the numbers: it goes first,
   the dots stay. */
@container (max-width: 250px) {
  .cmp-tail .cmp-drive { display: none; }
}

/* The move against the official board. Outlined for a small move, filled
   for five places or more, so the big disagreements read down a column. */
.cmp-delta { display: flex; align-items: center; justify-content: center; height: 22px;
  font-family: var(--f-black); font-weight: 900; font-size: 11px; letter-spacing: 0.02em;
  border: 1px solid currentColor; }
.cmp-delta.up { color: #1f7a3d; }
.cmp-delta.down { color: var(--red); }
.cmp-delta.same { color: #c9c5bd; border-color: transparent; font-weight: 700; }
.cmp-delta.none { color: #a09a91; font-size: 8px; letter-spacing: 0.08em; }
.cmp-delta.big.up { background: #1f7a3d; border-color: #1f7a3d; color: #fff; }
.cmp-delta.big.down { background: var(--red); border-color: var(--red); color: #fff; }

.cmp-colnote { margin-left: auto; font-family: var(--f-black); font-weight: 700;
  font-size: 8.5px; letter-spacing: 0.1em; color: #8d8880; }
/* COMPARE is two boards, so it takes the whole width between them. */
.cmp-region.versus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cmp-btn.versus.on { background: var(--red); border-color: var(--red); color: #fff; }

/* A narrow column drops what it cannot carry, most expendable first:
   offers, then the 40, then the drive and the number. Height and weight
   stay longest, because they are what gets compared across positions. */
@container (max-width: 470px) {
  .cmp-offers { display: none; }
  .cmp-row { grid-template-columns: 22px 52px 50px minmax(0,1fr) 36px 58px 50px; }
  .cmp-row.has-delta { grid-template-columns: 44px 22px 52px 50px minmax(0,1fr) 36px 58px 50px; }
}
@container (max-width: 400px) {
  .cmp-forty { display: none; }
  .cmp-row { grid-template-columns: 22px 52px 50px minmax(0,1fr) 36px 58px; }
  .cmp-row.has-delta { grid-template-columns: 44px 22px 52px 50px minmax(0,1fr) 36px 58px; }
}
@container (max-width: 330px) {
  /* The number keeps its cell and only goes invisible: display:none would
     take it out of the grid and slide every cell after it one column left. */
  .cmp-num { visibility: hidden; }
  .cmp-drive { display: none; }
}

/* Author display beats the UA [hidden] rule, the same trap the screens
   themselves hit. Both of these are set by the compare toggle. */
#scroll-region[hidden], #column-header[hidden], .cmp-region[hidden] { display: none; }

/* Density belongs to a board row, and a compare row is not one. */
.toggle-group.disabled { opacity: 0.4; }
.toggle-group.disabled button { cursor: default; }

.legend-dot-i { display: block; width: 7px; height: 7px; border-radius: 50%; }

/* The dark mode switch, beside the user badge. */
.theme-toggle { display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 1px solid #57534d;
  background: transparent; color: #c9c5bd; cursor: pointer; }
.theme-toggle:hover { color: #fff; border-color: #8d8880; }

/* STAT LEADERS: a number the room charted reads G, like a measured height. */
.lb-n.verified:not(.lead) { font-family: var(--f-black); font-weight: 700; }
.lb-g { margin-left: 1px; font-family: var(--f-light); font-weight: 300; font-size: 0.6em;
  font-style: normal; color: var(--red); vertical-align: super; line-height: 0; }

/* ------------------------------------------------------------ home page
   Where a sign-in lands. The board used to open straight away, which chose
   for the reader; this puts the four screens in front of him and lets him
   pick. The G and the wordmark come back here from anywhere. */
#home-screen { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--black); }
#home-screen[hidden], #key-screen[hidden] { display: none; }
.home-inner { max-width: 1180px; margin: 0 auto; padding: 44px 24px 56px; }
.home-head { display: flex; align-items: center; justify-content: center; gap: 20px;
  margin-bottom: 30px; }
.home-head-mark { height: clamp(42px, 7.4vw, 82px); width: auto; display: block; }
/* GeorgiaBlock sets TT so tight the two letters in ATTACK touch. A little
   tracking parts them without loosening the word. */
.home-title { margin: 0; font-family: var(--f-display); font-weight: 900;
  font-size: clamp(38px, 7vw, 78px); line-height: 0.96; letter-spacing: 0.035em;
  color: #fff; text-align: center; }
.home-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.home-tile { position: relative; display: block; height: 214px; padding: 0;
  border: 2px solid #47443f; background: #16150f; cursor: pointer; overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
/* The screen itself behind the name, blurred back and darkened, so a tile
   looks like the place it opens without competing with its own label. */
.home-tile::before { content: ''; position: absolute; inset: -14px;
  background-image: var(--shot); background-size: cover; background-position: top center;
  filter: blur(3px) saturate(0.8) brightness(0.62); transition: filter .16s ease; }
/* Dark at the bottom where the name sits, a wash of red over the rest.
   Enough colour to read as one family of tiles, light enough that the
   screen behind it is still recognisable as the screen it opens. */
.home-tile::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(186,12,47,0.22) 0%, rgba(22,21,15,0.30) 55%,
              rgba(22,21,15,0.72) 100%); }
.home-tile:hover { transform: scale(1.022); border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red), 0 14px 34px rgba(0,0,0,0.5), 0 0 26px rgba(186,12,47,0.42); }
.home-tile:hover::before { filter: blur(2px) saturate(0.95) brightness(0.68); }
.home-tile-name { position: relative; z-index: 1; display: block; padding: 0 22px;
  font-family: var(--f-display); font-weight: 900; font-size: 42px; line-height: 1;
  letter-spacing: 0.02em; color: #fff; text-align: left;
  text-shadow: 0 2px 14px rgba(0,0,0,0.6); }
.home-tile { display: flex; align-items: flex-end; padding-bottom: 20px; }

.home-small { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 18px; }
.home-mini { display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  height: 84px; padding: 0 22px; justify-content: center; border: 2px solid #47443f;
  background: #201e18; cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.home-mini:hover { transform: scale(1.022); border-color: #a2aaad;
  box-shadow: 0 10px 26px rgba(0,0,0,0.45), 0 0 20px rgba(162,170,173,0.25); }
.home-mini.key:hover { border-color: var(--red);
  box-shadow: 0 10px 26px rgba(0,0,0,0.45), 0 0 20px rgba(186,12,47,0.35); }
.home-mini-name { font-family: var(--f-display); font-weight: 900; font-size: 24px;
  line-height: 1; color: #fff; }
.home-mini-who { font-family: var(--f-black); font-weight: 600; font-size: 9px;
  letter-spacing: 0.13em; color: #8d8880; }
@media (max-width: 760px) {
  .home-tiles, .home-small { grid-template-columns: 1fr; }
  .home-tile { height: 150px; }
  .home-tile-name { font-size: 30px; }
}

/* The brand is a button now: it goes home. */
.brand { border: none; font: inherit; cursor: pointer; text-align: left; }
.brand:hover { background: #9c0a28; }

/* -------------------------------------------------------------- the key
   One profile, marked up. Every callout names a control and says what
   pressing it does. */
#key-screen { flex: 1 1 auto; min-height: 0; overflow: auto; background: #f6f5f2; }
.key-inner { max-width: 1060px; margin: 0 auto; padding: 30px 24px 60px; }
.key-title { margin: 0 0 6px; font-family: var(--f-display); font-weight: 900;
  font-size: 44px; line-height: 1; color: var(--black); }
.key-sub { margin: 0 0 26px; font-family: var(--f-black); font-weight: 600; font-size: 10px;
  letter-spacing: 0.14em; color: #8d8880; }
.key-group { margin-bottom: 26px; border: 1px solid #d5d1c9; background: #fff; }
.key-group-head { display: flex; align-items: baseline; gap: 10px; padding: 9px 14px;
  background: var(--black); color: #fff; }
.key-group-name { font-family: var(--f-xblack); font-weight: 900; font-size: 15px;
  letter-spacing: 0.02em; }
.key-group-where { font-family: var(--f-black); font-weight: 600; font-size: 8.5px;
  letter-spacing: 0.13em; color: #a2aaad; }
.key-row { display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: 16px;
  padding: 9px 14px; border-top: 1px solid #f2f1ee; align-items: baseline; }
.key-what { font-family: var(--f-black); font-weight: 700; font-size: 11px;
  letter-spacing: 0.05em; color: var(--black); }
.key-does { font-family: var(--f-cond); font-size: 13.5px; color: #4a4640; }
.key-back { display: inline-flex; align-items: center; height: 30px; padding: 0 14px;
  margin-bottom: 20px; border: 2px solid var(--black); background: #fff; color: var(--black);
  font-family: var(--f-black); font-weight: 900; font-size: 10px; letter-spacing: 0.12em;
  cursor: pointer; }
.key-back:hover { background: var(--black); color: #fff; }

/* The charted screen's own header. The bar grows to hold it: the list
   below scrolls, so the header can afford the room. */
.charted-mode .lb-subbar { padding-top: 14px; padding-bottom: 14px; }
.charted-mode .lb-title { display: flex; flex-direction: column; line-height: 1.02; }
.lb-title-l1, .lb-title-l2 { display: block; font-family: var(--f-xblack); font-weight: 900;
  font-size: 19px; letter-spacing: 0.01em; }