/* 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. */
/* The files' own vertical metrics put the top of a capital on the ascent
   line with 28% of the em under the baseline (Univers; GeorgiaBlock is
   similar), so every box that centres its line drew capitals and figures
   high: 4px in a 30px score box. The overrides move the same room above
   the capitals as below the baseline, keeping each line the height it was,
   so a figure sits in the middle of whatever box it is in (PJ, 9/18). */
@font-face { font-family: 'GeorgiaBlock';   src: url('/fonts/GeorgiaBlock.otf');                          font-display: swap; ascent-override: 92%; descent-override: 11%; line-gap-override: 0%; }
@font-face { font-family: 'Univers XBlack'; src: url('/fonts/univers/UniversLTStd-XBlack.otf');     font-weight: 900; font-display: swap; ascent-override: 87%; descent-override: 13%; line-gap-override: 20%; }
@font-face { font-family: 'Univers XBlack'; src: url('/fonts/univers/UniversLTStd-XBlackObl.otf');  font-weight: 900; font-style: italic; font-display: swap; ascent-override: 87%; descent-override: 13%; line-gap-override: 20%; }
@font-face { font-family: 'Univers Black';  src: url('/fonts/univers/UniversLTStd-Black.otf');      font-weight: 900; font-display: swap; ascent-override: 86%; descent-override: 14%; line-gap-override: 20%; }
@font-face { font-family: 'Univers Black';  src: url('/fonts/univers/UniversLTStd-BlackObl.otf');   font-weight: 900; font-style: italic; font-display: swap; ascent-override: 86%; descent-override: 14%; line-gap-override: 20%; }
@font-face { font-family: 'Univers Cond';   src: url('/fonts/univers/UniversLTStd-Cn.otf');         font-weight: 400; font-display: swap; ascent-override: 86%; descent-override: 14%; line-gap-override: 20%; }
@font-face { font-family: 'Univers Cond';   src: url('/fonts/univers/UniversLTStd-CnObl.otf');      font-weight: 400; font-style: italic; font-display: swap; ascent-override: 86%; descent-override: 14%; line-gap-override: 20%; }
@font-face { font-family: 'Univers Light';  src: url('/fonts/univers/UniversLTStd-Light.otf');      font-weight: 300; font-display: swap; ascent-override: 86%; descent-override: 14%; line-gap-override: 20%; }
@font-face { font-family: 'Univers Light';  src: url('/fonts/univers/UniversLTStd-LightObl.otf');   font-weight: 300; font-style: italic; font-display: swap; ascent-override: 86%; descent-override: 14%; line-gap-override: 20%; }
/* Univers Bold, mixed case: player names on the team cards (PJ, 10/25: "one of the univers fonts"). */
@font-face { font-family: 'Univers Bold';   src: url('/fonts/univers/UniversLTStd-Bold.otf');       font-weight: 700; font-display: swap; ascent-override: 86%; descent-override: 14%; line-gap-override: 20%; }

: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;
  /* Univers Bold: a player's name in mixed case, never all caps. */
  --f-name: 'Univers Bold', system-ui, sans-serif;
  --red: #BA0C2F;
  --red-2: #E4002B;
  --black: #2c2a29;
  --silver: #a2aaad;
  --line: #e6e4df;

  /* ---- the shapes BOARDS set, so every other screen can wear them.

     BOARDS is the reference for the whole site (PJ, 9/23): it is the page
     that is right, and the others are measured against it. These are its
     own numbers, lifted out so a filter bar on the watchlist or the eval
     log is the same object rather than a near miss. Nothing here is new;
     changing one of them changes BOARDS too, which is the point. */
  --bar-bg: #f6f5f2;          /* a sub header */
  --bar-rule: #d5d1c9;
  --strip-bg: #e6e4df;        /* the position tab strip */
  --strip-rule: #b9b4aa;
  --strip-h: 31px;            /* its height */
  --tab-h: 28px;              /* a class tab */
  --ctl-h: 24px;              /* a filter box */
  --ctl-border: #d5d1c9;
  --ctl-ink: #8d8880;
  --pad-x: 14px;              /* every screen's left and right gutter */
  --pad-y: 7px;               /* a sub header's own padding */
  --lab: 7.5px;               /* a filter group's label */
  --lab-track: 0.12em;
  /* 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;
  /* The criteria score is the personal board's, so it has no width on
     the official one (PJ, 9/22). */
  --w-crit: 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 20px var(--w-official) 82px var(--w-crit) 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;
  --grid-compact: 14px 32px 20px var(--w-official) 82px var(--w-crit) 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;
  /* Dense draws an 80px photo and a rank tag carrying 30px type, so both
     take more width here. */
  --grid-dense: 16px 36px 26px var(--w-official) 96px var(--w-crit) 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;
}

* { 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, #gaps-screen,
#evals-screen, #visits-screen, #hotsheet-screen, #gametracker-screen, #org-screen, #cutups-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], #gaps-screen[hidden],
#evals-screen[hidden], #visits-screen[hidden], #hotsheet-screen[hidden], #gametracker-screen[hidden],
#org-screen[hidden], #cutups-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; min-width: 0; flex: 0 1 auto; }
/* The tabs carry the title's face and size, so a glance finds them. Grey
   until active, as before. */
/* The five big tabs, the two small ones, the search and the two buttons
   all share one bar, and a browser opened from the bookmarks bar is
   shorter than a full window: GAPS was being cut off for everybody
   (PJ, 9/23). Everything here gives up a little so the last tab fits. */
.topnav-btn { height: 100%; padding: 0 11px; border: none; background: transparent;
  color: #8d8880; font-family: var(--f-display); font-weight: 900; font-size: 22px;
  letter-spacing: 0.01em; line-height: 1; padding-top: 2px; white-space: nowrap; }
.topnav-btn.active { background: #3a3733; color: #fff; box-shadow: inset 0 -3px 0 var(--red); }
.topnav-btn:disabled { cursor: default; opacity: 0.55; }
/* A screen checked now and then rather than worked in. Small and set
   apart, so the four daily screens read as the four daily screens
   (PJ, 9/21). */
.topnav-btn.minor { display: flex; align-items: center; white-space: nowrap;
  font-family: var(--f-black); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.1em; color: #6f6a63; padding: 0 9px 0 13px; align-self: center;
  height: 26px; margin-left: 4px; border-left: 1px solid #3a3733; flex: 0 0 auto; }
/* Only the first of the pair carries the divider; two together read as
   one group set apart from the five. */
.topnav-btn.minor + .topnav-btn.minor { border-left: none; margin-left: 0;
  padding-left: 9px; }
.topnav-btn.minor:hover { color: #c9c5bd; }
.topnav-btn.minor.active { background: transparent; color: #fff;
  box-shadow: inset 0 -2px 0 var(--red); }
.topnav-count { font-family: var(--f-black); font-weight: 600; font-size: 10px;
  margin-left: 7px; color: #8d8880; vertical-align: 3px; letter-spacing: 0; }
/* ------------------------------------------------ the grouped menus
   CFB, HIGH SCHOOL and STAFF (PJ, 10/10), ESPN's way: the group in the
   bar, its pages in a white menu that drops on hover. topnav.js. */
.tn-nav { gap: 2px; }
.tn-group { position: relative; display: flex; align-items: stretch; }
.tn-top { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 0 16px; }
.tn-top:hover, .tn-group.open .tn-top { color: #fff; }
.tn-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: 0.6; margin-top: 1px; }
.tn-menu { position: absolute; top: calc(100% + 3px); left: 0; display: none; min-width: 220px;
  background: #fff; color: var(--black); border-top: 3px solid var(--red);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22); z-index: 1300; }
.tn-group.open .tn-menu { display: flex; }
.tn-list { display: flex; flex-direction: column; padding: 8px 0; min-width: 220px; }
.tn-head { padding: 10px 22px 4px; font-family: var(--f-black); font-weight: 700; font-size: 8.5px;
  letter-spacing: 0.14em; color: #a09a91; }
.tn-item { display: flex; align-items: center; height: 36px; padding: 0 22px; border: 0;
  background: none; text-align: left; cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: var(--f-xblack); font-weight: 900; font-size: 13px; letter-spacing: 0.06em;
  color: var(--black); box-shadow: inset 3px 0 0 transparent; }
.tn-item:hover, .tn-item:focus-visible { background: #f4f2ee; box-shadow: inset 3px 0 0 var(--red); outline: none; }
.tn-item.on { color: var(--red); }
.tn-item .topnav-count { color: #a09a91; vertical-align: 0; }
/* BOARDS >, MORE >, STATS >: their pages open to the side (PJ, 10/16). */
.tn-fly { position: relative; }
.tn-flyhead { width: 100%; justify-content: space-between; gap: 18px; }
.tn-flyarrow { font-family: var(--f-black); font-weight: 900; font-size: 16px; line-height: 1; color: #a09a91; }
.tn-flymenu { position: absolute; left: 100%; top: -11px; display: none; flex-direction: column; min-width: 220px;
  padding: 8px 0; background: #fff; border-top: 3px solid var(--red); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
  z-index: 1301; }
.tn-fly:hover .tn-flymenu, .tn-fly:focus-within .tn-flymenu, .tn-fly.open .tn-flymenu { display: flex; }
.tn-fly:hover > .tn-flyhead, .tn-fly.open > .tn-flyhead { background: #f4f2ee; box-shadow: inset 3px 0 0 var(--red); }
/* HIGH SCHOOL: the pages on the left, every board on the right. */
.tn-mega .tn-panel { display: flex; flex-direction: column; padding: 8px 22px 18px;
  background: #f6f5f2; border-left: 1px solid #e6e4df; }
.tn-mega .tn-panel .tn-head { padding-left: 0; }
.tn-boards { display: flex; gap: 22px; padding-top: 6px; }
.tn-col { display: flex; flex-direction: column; min-width: 92px; }
.tn-year { display: flex; align-items: center; justify-content: center; height: 26px; margin-bottom: 6px;
  font-family: var(--f-xblack); font-weight: 900; font-size: 14px; }
.tn-board { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  height: 28px; padding: 0 6px; border: 0; background: none; cursor: pointer; color: var(--black); }
.tn-board:hover { background: #fff; box-shadow: inset 3px 0 0 var(--red); }
.tn-board b { font-family: var(--f-xblack); font-weight: 900; font-size: 12.5px; letter-spacing: 0.04em; }
.tn-board span { font-family: var(--f-black); font-weight: 700; font-size: 10px; color: #a09a91; }
.tn-board.empty b, .tn-board.empty span { color: #cdc8bf; }
/* ESPN's second row (PJ, 10/10): the group, its pages, the one on show
   underlined in red, and the screen's own buttons at the right end. */
.subnav { flex: 0 0 auto; display: flex; align-items: stretch; height: 40px; padding: 0 var(--pad-x, 14px);
  background: #fff; border-bottom: 1px solid #e0ddd7; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  position: relative; z-index: 1100; }
.subnav[hidden] { display: none; }
.sn-group { display: flex; align-items: center; padding-right: 14px; margin-right: 4px;
  border-right: 1px solid #e0ddd7; font-family: var(--f-xblack); font-weight: 900; font-size: 15px;
  letter-spacing: 0.04em; color: var(--black); white-space: nowrap; }
.sn-pages { display: flex; align-items: stretch; flex: 0 0 auto; }
.sn-page { display: flex; align-items: center; padding: 0 9px; border: 0; background: none;
  cursor: pointer; text-decoration: none; white-space: nowrap; color: #8d8880;
  font-family: var(--f-black); font-weight: 700; font-size: 12px; letter-spacing: 0.07em;
  box-shadow: inset 0 -3px 0 transparent; }
.sn-page:hover { color: var(--black); }
.sn-page.on { color: var(--black); box-shadow: inset 0 -3px 0 var(--red); }
.sn-drop { position: relative; display: flex; align-items: stretch; }
.sn-droptop { gap: 7px; }
.sn-drop .sn-menu { position: absolute; top: 100%; left: 0; display: none; min-width: 200px; padding: 6px 0;
  background: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18); z-index: 1300; }
.sn-drop:hover .sn-menu, .sn-drop:focus-within .sn-menu { display: flex; flex-direction: column; }
.sn-item { height: 38px; padding: 0 20px; border: 0; background: none; text-align: left; cursor: pointer;
  font-family: var(--f-black); font-weight: 700; font-size: 12.5px; letter-spacing: 0.06em; color: var(--black);
  box-shadow: inset 3px 0 0 transparent; }
.sn-item:hover { background: #f4f2ee; box-shadow: inset 3px 0 0 var(--red); }
.sn-item.on { color: var(--red); }
.sn-rule { align-self: center; width: 1px; height: 16px; margin: 0 6px; background: #e0ddd7; }
.sn-right { margin-left: auto; display: flex; align-items: center; padding-left: 10px; }
.sn-slot { display: flex; align-items: center; gap: 6px; }
.sn-slot[hidden] { display: none; }
.sn-slot > * { margin-left: 0 !important; }
.sn-slot .counts-line { min-width: 0 !important; margin-right: 6px; }
.sn-slot button { height: 26px; }
.sn-slot .cf-importbtn { padding: 0 10px; }
/* IMPORT beside the search up in the second row (PJ, 10/18): the search
   gives up width first, so a narrow window never cuts IMPORT off. */
.sn-right:has(.sn-slot[data-screen="cfb"]:not([hidden])) { min-width: 0; flex: 0 1 auto; }
.sn-slot[data-screen="cfb"] { min-width: 0; }
.sn-slot .cf-searchbox { flex: 0 1 190px; min-width: 110px; }
.sn-slot .cf-searchbox input { width: 100%; box-sizing: border-box; }
.sn-slot .cf-importmenu { flex: 0 0 auto; }
.sn-hidden { display: none !important; }
/* A drop-down at the right end opens leftward, so it stays on screen. */
.sn-slot .pf-dropmenu { left: auto; right: 0; }
.sn-slot .ev-stats { padding: 0; margin-right: 0; gap: 8px; flex-wrap: nowrap; font-size: 8.5px;
  letter-spacing: 0.06em; }
.sn-slot .ev-topbtns { gap: 6px; }
.topright { margin-left: auto; display: flex; align-items: center; gap: 8px;
  padding: 0 10px; flex: 0 0 auto; }
.searchwrap { position: relative; }
/* Half again as wide as it was, its word in the home search's capitals
   (PJ, 10/23). */
#search { width: clamp(180px, 19.5vw, 315px); height: 26px; font-size: 13px; font-weight: 500; padding: 0 8px 0 23px;
  border: 1px solid #57534d; background: #3a3733; color: #fff; font-family: var(--f-cond); }
#search::placeholder { color: #a2aaad; font-family: var(--f-black); font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; }
.search-icon { position: absolute; left: 7px; top: 5px; 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: center; 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; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.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-bar { font-style: normal; color: #e6e3dd; margin: 0 7px; }
.search-fill { flex: 1 1 auto; min-width: 8px; }
.search-mark { flex: 0 0 28px; width: 28px; height: 20px; display: flex; align-items: center; justify-content: center; }
.search-mark img { max-width: 28px; max-height: 20px; object-fit: contain; }
.search-mark.text { flex-basis: auto; width: auto; font-size: 11px; color: #57534d; white-space: nowrap; }
.search-count { flex: 0 0 auto; font-family: var(--f-black); font-weight: 700; font-size: 10px; letter-spacing: 0.06em;
  color: #57534d; white-space: nowrap; }
.search-act { flex: 0 0 26px; width: 26px; height: 22px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #e3e0da; background: #fff; color: var(--red); cursor: pointer; padding: 0; }
.search-act:hover { background: var(--red); color: #fff; border-color: var(--red); }
.search-group { padding: 6px 10px 3px; font-family: var(--f-black); font-weight: 700; font-size: 8px;
  letter-spacing: 0.12em; color: #8d8880; background: #faf9f7; border-bottom: 1px solid #ecebe7; }
/* Players, colleges and high schools each under a rule of their own (PJ, 10/19). */
.search-row + .search-group { border-top: 2px solid #d5d1c9; }
.search-collegemark { flex: 0 0 22px; width: 22px; height: 22px; display: flex; align-items: center;
  justify-content: center; align-self: center; }
.search-collegemark img { max-width: 22px; max-height: 22px; object-fit: contain; }
.search-swatch { flex: 0 0 8px; width: 8px; height: 8px; align-self: center; background: #d5d1c9; }
/* Mixed answers: a school's swatch sits in the college logo's slot, and a
   player's name starts where theirs do (PJ, 10/29: "aligned perfectly"). */
.search-mixed .search-swatch { flex: 0 0 8px; margin: 0 7px; }
.search-mixed .search-row:not(.search-schoolrow) .search-name { margin-left: 30px; }
/* While a row is measured for fit, its facts show whole. */
.search-row.search-fitting .search-meta { flex-shrink: 0; overflow: visible; }
.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 { position: relative; flex: 0 0 26px; 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; }
/* An answer waiting on him, counted the way a phone counts one. */
.user-badge.has-replies::after { content: attr(data-replies); position: absolute;
  top: -5px; right: -6px; min-width: 15px; height: 15px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center; border-radius: 8px;
  background: #e8342f; color: #fff; border: 1.5px solid var(--black);
  font-family: var(--f-black); font-weight: 700; font-size: 9px; letter-spacing: 0; }

/* ---------------------------------------------------------- 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; }
/* The active tab's fill says it is on. It also carried a dark band along
   its bottom, which with rounded corners read as the tab being cut off
   (PJ, 10/22). */
.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; --w-crit: 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.
   Top and bottom, the tag and the photo stop short of the row by
   --row-inset, so eight rows read as eight players and not as one slab of
   black and red (Will and PJ, 10/22). Row heights are unchanged, and the
   drag bar stays flush. */
body { --row-inset: 4px; }
body.dense { --row-inset: 5px; }
body.compact { --row-inset: 3px; }
.c-rank { position: relative; display: flex; height: 100%; align-items: stretch;
  padding: var(--row-inset) 6px var(--row-inset) 0; box-sizing: border-box; }
.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 arrow up on a grade: the grader thinks he takes the next step (PJ,
   10/6). A block arrow raised past the top of the letters, after the grade,
   in the chip's own text colour. It never moves him on a board. It takes
   no width (the right margin gives back its own), so the grade is centred
   the same with or without it (PJ, 10/6). */
.grade-up::after { content: ''; flex: none; align-self: center; position: relative;
  top: -0.47em; left: 4px; width: 0.74em; height: 0.74em; margin: 0 -0.86em 0 0.12em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0 12 6.2H8.3V12H3.7V6.2H0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0 12 6.2H8.3V12H3.7V6.2H0Z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* 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 matches the rank tag beside it: both stop --row-inset short
   of the row's top and bottom, so they line up. */
.c-headshot { width: 54px; height: calc(100% - 2 * var(--row-inset)); flex: 0 0 auto; align-self: center;
  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: #003f2d; }
/* 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; min-width: 0;
  overflow-x: auto; scrollbar-width: none; }
.tabbar.top::-webkit-scrollbar { display: none; }
.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); }
/* A position's name stays on one line: TE-F broke at its hyphen (PJ, 10/16). */
.tab-btn { white-space: nowrap; flex-shrink: 0; }
.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; }
/* The key gives way to the position tabs: it shrinks and clips inside the
   bar rather than pushing the board wider, which let the whole board slide
   sideways (PJ, 10/22). Each reader can turn it off on his account. */
.legend { margin-left: auto; display: flex; align-items: center; gap: 12px; padding-right: 13px;
  flex: 0 1 auto; min-width: 0; overflow: hidden;
  font-family: var(--f-light); font-weight: 300; font-size: 9px; letter-spacing: 0.11em; color: #a09a91; }
.no-legend .legend { display: none; }
.legend-item { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.legend > [hidden] { display: none; }
/* A header that follows its list sideways (board.js followSideways) is as
   wide as its columns, so its band of color runs under every one. */
.follows-x { width: max-content; min-width: 100%; box-sizing: border-box; }
/* 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: 7px; letter-spacing: 0.03em; }
  /* The tabs no longer wrap (TE-F), so they give a little padding back. */
  .tabbar.top .tab-btn { padding: 0 9px; }
}
@media (max-width: 1500px) {
  #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; }
/* The total stands apart from the keys by space alone. */
#legend-total { margin-left: 10px; }

/* 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. */
/* One row: title and week on the left, the family in the middle, the
   filters on the right (PJ, 9/18), so the list starts higher. */
/* The title bar carries the title, the scope and the family switcher.
   The filters moved out from under it onto their own bar and the
   position strip below that, which is how BOARDS is laid out and what
   took the whitespace out from above the results (PJ, 9/23). */
.lb-subbar { flex: 0 0 auto; display: grid; grid-template-columns: auto 1fr;
  grid-template-areas: "left fam";
  align-items: center; column-gap: 16px; row-gap: 6px;
  padding: var(--pad-y, 7px) var(--pad-x, 14px);
  background: var(--bar-bg, #f6f5f2); border-bottom: 1px solid var(--bar-rule, #d5d1c9); }
/* A bar a view does not use is gone, not a blank band: its own display
   outranked [hidden] (PJ, 10/23: CFB BOARDS). */
.lb-subbar[hidden] { display: none; }
.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; justify-self: start; }
/* ADVANCED puts its own name here, and it belongs in the middle of the
   page rather than wherever the title bar's left block ends. A third,
   empty column balances the left one so the middle really is the middle
   (PJ, 9/23). */
.charted-mode .lb-subbar { grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "left fam ."; }
.charted-mode .lb-families { justify-self: center; }
.charted-mode .ch-headwrap { display: flex; flex-direction: column; align-items: center; }
.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); }
/* The charted play count in the footer: quiet, and explicit about
   whether it is every record or only what the filters left. */
.ch-plays { display: inline-flex; align-items: baseline; gap: 5px; }
.ch-plays b { font-family: var(--f-xblack); font-weight: 900; font-size: 11px;
  color: #14401f; }
.ch-plays span { font-family: var(--f-black); font-weight: 700; font-size: 8px;
  letter-spacing: 0.1em; color: #8d8880; }

/* 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; }
/* Georgia red, the five states around it black, everywhere else silver:
   the list reads in the order the room recruits (PJ, 9/23). */
.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-btn.near { border-color: #9a958d; color: var(--black); }
.ch-state-btn.near.on { background: var(--black); border-color: var(--black); color: #fff; }
.ch-state-btn.far { border-color: #d9d5ce; color: var(--silver); }
.ch-state-btn.far.on { background: var(--silver); border-color: var(--silver); 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; }
/* Which numbers are on screen, said rather than asked: the position
   filter chooses them (PJ, 9/23). */
.lb-family-now { display: flex; align-items: baseline; gap: 8px; padding: 0 12px;
  height: 26px; align-items: center; background: var(--black); color: #fff; }
.lb-family-now .lb-family-label { font-family: var(--f-xblack); font-weight: 900;
  font-size: 13px; letter-spacing: 0.04em; }
.lb-family-now .lb-family-n { font-family: var(--f-light); font-weight: 300;
  font-size: 10px; color: rgba(255,255,255,0.7); }
.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. */
/* The filter bar is .pf-screenbar now; it keeps only what is its own. */
.lb-filters { border-bottom: none; padding-bottom: var(--pad-y, 7px); }
/* A count that grows and shrinks must not move what sits beside it. */
.lb-subbar-left .counts-line {
  display: inline-block; min-width: 130px; white-space: nowrap; }
.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; }
/* BEST COMP beside the scope (PJ, 10/22), SEASON only. */
.lb-best { margin-left: 8px; }
.lb-best[hidden] { display: none; }
/* The week picker, dressed as one more cell on the segment beside it. */
.lb-week { height: var(--ctl-h, 24px); padding: 0 17px 0 7px;
  border: 1px solid var(--ctl-border, #c9c5bd);
  background: #fff; color: var(--black); cursor: pointer; appearance: none;
  font-family: var(--f-black); font-weight: 700; font-size: 9px;
  letter-spacing: 0.05em; white-space: nowrap;
  background-image: linear-gradient(45deg, transparent 50%, #6f6a63 50%),
    linear-gradient(135deg, #6f6a63 50%, transparent 50%);
  background-position: calc(100% - 10px) 10px, calc(100% - 6px) 10px;
  background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
.lb-week:hover { border-color: var(--black); }
/* Never hidden: a control that vanishes moves everything beside it. */
.lb-week:disabled { color: #c9c5bd; border-color: #ebe8e3; cursor: default; }
.lb-filters { align-items: flex-start; }
/* 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-podium { padding: 11px var(--pad-x, 14px) 12px; gap: 10px; }
.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; }
/* Scoped to the board's own comparison. The profile's compare overlay
   has a .cmp-m of its own with a different shape, and the two used to
   overwrite each other: the board's height and weight were being laid out
   as the overlay's three column measurement row, which is what pushed
   them across the name and the drive time (PJ, 9/20). */
.cmp-region .cmp-m { display: flex; align-items: baseline; justify-content: flex-end; }
.cmp-region .cmp-m i { font-family: var(--f-light); font-style: normal; font-size: 13px;
  color: var(--black); white-space: nowrap; }
.cmp-region .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-region .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-region .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: 22px; height: 22px; padding: 0; border: 1px solid #57534d;
  background: transparent; color: #c9c5bd; cursor: pointer; font-size: 11px; }
.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 (redesigned 10/21). Sanford at night, the log-in
   page's photo, sits behind the whole page: brightest at the top where the
   fireworks are. The wash over it is light (PJ, 10/21: "I still want to
   see the crowd and stadium"); the panels are smoked glass, square
   cornered, and carry their own contrast. */
#home-screen { flex: 1 1 auto; min-height: 0; overflow: auto; color: #fff;
  --home-page: #141312; --home-panel: rgba(20,19,18,0.74); --home-line: rgba(255,255,255,0.13);
  --home-soft: #a8a39b; --home-dim: #7d786f;
  /* Tokens, not colors, so the generated dark theme leaves this page be:
     it is dark in both themes already. */
  --home-paper: #fff; --home-ink: #2c2a29; --home-hint: #8d8880;
  background:
    radial-gradient(ellipse 60% 34% at 50% 15%, rgba(20,19,18,0.42) 0%, rgba(20,19,18,0) 100%),
    linear-gradient(180deg, rgba(20,19,18,0.06) 0%, rgba(20,19,18,0.24) 34%, rgba(20,19,18,0.46) 64%, rgba(20,19,18,0.70) 100%),
    url('/photos/login-background-photo.webp') center 38% / cover no-repeat,
    var(--home-page); }
#home-screen[hidden], #key-screen[hidden] { display: none; }
.home-inner { max-width: 1320px; margin: 0 auto; padding: 46px 28px 60px; }

/* The hero, centered: the G and the wordmark, then the reader's initials
   and one big search. */
.home-hero { padding: 14px 0 38px; }
.home-brand { display: flex; align-items: center; justify-content: center; gap: 22px; }
.home-head-mark { height: clamp(46px, 7vw, 92px); width: auto; display: block;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.55)); }
/* 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, 7.2vw, 94px); line-height: 0.94; letter-spacing: 0.035em;
  color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,0.6); }
.home-hero-row { display: flex; gap: 12px; margin: 30px auto 0; max-width: 780px; }
/* It borrows the header's results list while it is in use (board.js). */
.home-find { position: relative; flex: 1 1 auto; display: flex; align-items: center;
  height: 54px; background: rgba(255,255,255,0.95); box-shadow: 0 14px 40px rgba(0,0,0,0.45); }
.home-find:focus-within { box-shadow: 0 0 0 3px var(--red), 0 14px 40px rgba(0,0,0,0.45); }
.home-find-icon { position: absolute; left: 17px; top: 50%; transform: translateY(-52%);
  font-family: var(--f-black); font-weight: 700; font-size: 20px; color: var(--red);
  pointer-events: none; }
#home-search { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: none;
  background: transparent; padding: 0 8px 0 48px; color: var(--home-ink);
  font-family: var(--f-black); font-weight: 600; font-size: 17px; letter-spacing: 0.02em; }
/* All caps, tracked, in the menus' face (PJ, 10/21). GeorgiaBlock is the
   wordmark's above it; twice in a row it shouts. */
#home-search::placeholder { color: var(--home-hint); font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.14em; text-transform: uppercase; }
.home-find-clear { flex: 0 0 auto; width: 44px; height: 100%; border: 0; background: none; cursor: pointer;
  color: var(--home-hint); font-size: 15px; line-height: 1; transition: color .12s ease; }
.home-find-clear:hover { color: var(--red); }
.home-find-clear[hidden] { display: none; }
.home-find .search-results { top: 58px; left: 0; right: 0; width: auto; max-height: 460px; }
/* The reader's initials beside it: his profile, and a count when somebody
   has answered his feedback. */
.home-me { position: relative; flex: 0 0 54px; height: 54px; border: 0; cursor: pointer;
  background: var(--red); color: #fff; font-family: var(--f-display); font-weight: 900;
  font-size: 22px; letter-spacing: 0.02em; box-shadow: 0 14px 40px rgba(0,0,0,0.45);
  transition: background .14s ease; }
.home-me:hover { background: #9c0a28; }
.home-me-badge { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
  background: var(--home-paper); color: var(--red); font-family: var(--f-black); font-weight: 700; font-size: 11px; }
.home-me-badge[hidden] { display: none; }

/* A section: its label on a red rule. */
.home-sec { margin-top: 30px; }
.home-label { display: flex; align-items: baseline; gap: 14px; padding-bottom: 9px;
  margin-bottom: 12px; border-bottom: 2px solid var(--red);
  font-family: var(--f-black); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; color: #fff; }
.home-date { color: var(--home-soft); font-weight: 600; letter-spacing: 0.14em; }

/* A site that blocked POA: red, above the numbers, until it is cleared. */
.home-blocks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; padding: 9px 14px;
  background: var(--red); color: #fff; font-family: var(--f-black); font-weight: 600; font-size: 11px;
  letter-spacing: 0.12em; }
.home-blocks b { font-weight: 800; margin-right: 6px; }
.home-blocks[hidden] { display: none; }

/* TODAY: the reader's day in numbers, each one a door to its screen. The
   queue leads in red; it is the job of the day. */
.home-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.home-stat { position: relative; display: flex; flex-direction: column; align-items: flex-start;
  min-height: 132px; padding: 15px 16px 13px; text-align: left; cursor: pointer; color: #fff;
  background: var(--home-panel); border: 1px solid var(--home-line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .14s ease, background .14s ease, border-color .14s ease; }
.home-stat::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
.home-stat:hover { transform: translateY(-2px); background: rgba(34,32,30,0.86);
  border-color: rgba(255,255,255,0.26); }
.home-stat:hover::before { transform: scaleX(1); }
.home-stat.lead { background: rgba(186,12,47,0.88); border-color: rgba(255,255,255,0.18); }
.home-stat.lead:hover { background: rgba(206,20,56,0.94); }
.home-stat.lead::before { background: var(--home-paper); }
.home-stat-label { font-family: var(--f-black); font-weight: 700; font-size: 10px;
  letter-spacing: 0.17em; color: var(--home-soft); }
.home-stat.lead .home-stat-label, .home-stat.lead .home-stat-sub { color: rgba(255,255,255,0.78); }
.home-stat-num { margin-top: auto; padding-top: 12px; font-family: var(--f-display); font-weight: 900;
  font-size: 50px; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; }
.home-stat-of { font-size: 22px; color: var(--home-dim); letter-spacing: 0.02em; }
.home-stat.lead .home-stat-of { color: rgba(255,255,255,0.62); }
.home-stat-bar { align-self: stretch; height: 4px; margin-top: 9px; background: rgba(255,255,255,0.22); }
.home-stat-bar > i { display: block; height: 100%; background: var(--home-paper); transition: width .4s ease; }
.home-stat-sub { margin-top: 7px; max-width: 100%; font-family: var(--f-black); font-weight: 600;
  font-size: 10px; letter-spacing: 0.12em; color: var(--home-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 12px; }
/* The week's goal under MY REPORTS (PJ, 10/21: 40 a week), kept quiet. */
.home-stat-goal { align-self: stretch; height: 2px; margin-top: 7px; background: rgba(255,255,255,0.09); }
.home-stat-goal > i { display: block; height: 100%; background: rgba(255,255,255,0.42); transition: width .4s ease; }
.home-stat-goal.met > i { background: var(--red); }
/* NEXT GAME: the opponent's logo is the tile, his room's visitors under it. */
.home-stat.game { align-items: center; text-align: center; }
.home-stat.game .home-stat-label { align-self: flex-start; }
.home-stat-logo { display: block; height: 52px; max-width: 76%; margin: 10px auto 6px; object-fit: contain;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.5)); transition: transform .16s ease; }
.home-stat.game:hover .home-stat-logo { transform: scale(1.06); }
.home-stat-opp { margin: auto 0 4px; font-family: var(--f-display); font-weight: 900; font-size: 26px; line-height: 1; }
.home-stat-visit { font-family: var(--f-black); font-weight: 600; font-size: 10px; letter-spacing: 0.12em;
  color: var(--home-soft); white-space: nowrap; }
.home-stat-visit b { font-family: var(--f-display); font-weight: 900; font-size: 19px; letter-spacing: 0.01em;
  color: #fff; margin-right: 2px; }
.home-stat-visit .lc { text-transform: none; }

/* Four big doors: the screens the room lives in, each its own picture. */
.home-doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 30px; }
.home-door { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: flex-start; gap: 6px; height: 232px; padding: 0 20px 20px; overflow: hidden;
  text-align: left; cursor: pointer; border: 1px solid var(--home-line); background: #16150f;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
/* The screen itself behind the name, blurred back and darkened, so a door
   looks like the place it opens without competing with its own label. */
.home-door::before { content: ''; position: absolute; inset: -14px;
  background-image: var(--shot); background-size: cover; background-position: top left;
  filter: blur(2.5px) saturate(0.75) brightness(0.6); transition: filter .2s ease, transform .3s ease; }
.home-door::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(186,12,47,0.16) 0%, rgba(20,19,18,0.25) 45%,
              rgba(20,19,18,0.88) 100%); }
.home-door:hover { transform: translateY(-3px); border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red), 0 18px 40px rgba(0,0,0,0.55), 0 0 30px rgba(186,12,47,0.38); }
.home-door:hover::before { filter: blur(1.5px) saturate(0.95) brightness(0.72); transform: scale(1.04); }
.home-door-group, .home-door-name { position: relative; z-index: 1; }
.home-door-group { font-family: var(--f-black); font-weight: 700; font-size: 10px;
  letter-spacing: 0.2em; color: rgba(255,255,255,0.7); padding-left: 1px; }
.home-door-name { font-family: var(--f-display); font-weight: 900; font-size: 36px; line-height: 1;
  letter-spacing: 0.02em; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,0.6); }

/* ALL PAGES: the top menus, laid flat. Built from the menus themselves,
   so a page added up there shows up here too. */
/* Each menu a column sized to its longest name, HIGH SCHOOL two across.
   minmax(0, ...), so a column never widens to fit a name on hover. */
/* HIGH SCHOOL, CFB, MAPS, UGA, STAFF, the top menu's order; HIGH SCHOOL
   and CFB the same width, each in two columns (PJ, 10/22). */
.home-dir { display: grid; gap: 10px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 140px) minmax(0, 140px) minmax(0, 198px); }
.home-dir-col { padding: 14px 16px 10px; background: var(--home-panel); border: 1px solid var(--home-line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.home-dir-col.wide .home-dir-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.home-dir-col.wide .home-dir-head { text-align: center; }
.home-dir-head { font-family: var(--f-display); font-weight: 900; font-size: 22px; line-height: 1;
  letter-spacing: 0.02em; color: #fff; padding-bottom: 10px; }
.home-dir-sub { display: block; padding: 4px 0 4px; font-family: var(--f-black); font-weight: 700;
  font-size: 9px; letter-spacing: 0.2em; color: var(--red); }
.home-dir-item { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 0;
  border: 0; border-top: 1px solid rgba(255,255,255,0.07); background: none; cursor: pointer;
  text-align: left; text-decoration: none; color: #d9d4cc;
  font-family: var(--f-black); font-weight: 600; font-size: 11.5px; letter-spacing: 0.07em;
  transition: color .12s ease; }
/* The red tick and the nudge are drawn, not laid out: nothing moves. */
.home-dir-item::before { content: ''; position: absolute; left: 0; top: 50%; width: 8px; height: 2px;
  margin-top: -1px; background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .12s ease; }
.home-dir-item:hover { color: #fff; }
.home-dir-item:hover::before { transform: scaleX(1); }
.home-dir-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: transform .12s ease; }
.home-dir-item:hover .home-dir-name { transform: translateX(13px); }
/* A printout opens in a tab of its own; the arrow says so. */
.home-dir-item.ext::after { content: '\2197'; font-size: 11px; color: var(--home-dim); }
/* A heading the menus open to the side (STATS, MORE, BOARDS): a label
   here, its pages indented under it. */
.home-dir-foldhead { display: block; padding: 7px 0; border-top: 1px solid rgba(255,255,255,0.07);
  font-family: var(--f-black); font-weight: 600; font-size: 11.5px; letter-spacing: 0.07em;
  color: var(--home-dim); }
.home-dir-fold .home-dir-item { padding-left: 14px; border-top-color: rgba(255,255,255,0.04); }
.home-dir-fold .home-dir-item::before { left: 14px; }

.home-foot { display: flex; justify-content: flex-end; margin-top: 18px; }
.home-foot-btn { border: 1px solid var(--home-line); background: var(--home-panel); color: var(--home-soft);
  padding: 8px 16px; cursor: pointer; font-family: var(--f-black); font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; transition: color .12s ease, border-color .12s ease; }
.home-foot-btn:hover { color: #fff; border-color: var(--red); }

@media (max-width: 1100px) {
  .home-stats { grid-template-columns: repeat(3, 1fr); }
  .home-doors { grid-template-columns: repeat(2, 1fr); }
  .home-dir { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-dir-col.wide { grid-column: span 2; }
}
@media (max-width: 700px) {
  .home-inner { padding: 28px 16px 40px; }
  .home-brand { gap: 14px; }
  .home-stats { grid-template-columns: repeat(2, 1fr); }
  .home-stat-num { font-size: 40px; }
  .home-doors { grid-template-columns: 1fr; }
  .home-door { height: 140px; }
  .home-door-name { font-size: 28px; }
  .home-dir { grid-template-columns: 1fr; }
  .home-dir-col.wide { grid-column: auto; }
}

/* 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; }

/* The UGA offer stands apart from the tracking dots after it. */
.c-name-dots .left .c-dot.uga + .c-dot { margin-left: 7px; }
/* Stat tracking opens his stats, and glows when it is current. */
.c-dot.stat { cursor: pointer; }
.c-dot.stat.current { box-shadow: 0 0 0 1.5px rgba(34, 165, 83, 0.35), 0 0 6px 2px rgba(34, 165, 83, 0.55); }
.c-dot.stat:hover { transform: scale(1.35); }

/* ---------------------------------------------------------------- podium
   The leader wide on the left; second to fifth short and horizontal, two
   by two, beside him. About half the height the five tall cards took. */
.lb-podium { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto; gap: 10px; padding: 12px 14px 14px; }
/* The left padding carries the place number, which is set over the card
   rather than in the flow. Before, it was drawn on top of the photograph
   (PJ, 9/20). */
.lb-card.leader { grid-row: 1 / span 2; display: grid;
  grid-template-columns: 124px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto;
  column-gap: 14px; padding: 12px 14px 11px 34px; }
.lb-card.leader .lb-card-top { grid-column: 1; grid-row: 1 / span 4; display: flex;
  flex-direction: column; height: auto; gap: 6px; margin: 0; }
.lb-card.leader .lb-card-top .lb-card-place { position: absolute; left: 11px; top: 12px;
  z-index: 1; min-width: 0; font-size: 26px; line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4); }
.lb-card.leader .lb-card-shot { flex: 0 0 124px; height: 124px; }
.lb-card.leader .lb-card-rank { flex: 1 1 auto; min-height: 26px; font-size: 18px; }
.lb-card.leader .lb-card-mid { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.lb-card.leader .lb-card-first, .lb-card.leader .lb-card-last { font-size: 24px; }
.lb-card.leader .lb-card-lead { grid-column: 2; grid-row: 3; align-self: end; }
.lb-card.leader .lb-card-lead .v { font-size: 38px; }
.lb-card.leader .lb-card-line { grid-column: 2; grid-row: 4;
  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); }

.lb-card.mini { flex-direction: row; align-items: center; gap: 10px; min-height: 72px;
  padding: 8px 12px 8px 14px; }
.lb-card.mini.place-2, .lb-card.mini.place-3 { padding-left: 10px; }
.lb-card.mini .lb-card-top { display: flex; align-items: center; gap: 8px; height: 56px;
  margin: 0; flex: 0 0 auto; }
.lb-card.mini .lb-card-place { align-self: center; font-size: 22px; min-width: 12px; }
.lb-card.mini .lb-card-shot { flex: 0 0 56px; width: 56px; height: 56px; }
/* Sized to sit beside the photo, not to outweigh it (PJ, 9/18). */
.lb-card.mini .lb-card-rank { order: 5; align-self: center; height: 24px; min-width: 34px;
  padding: 0 6px; font-size: 14px; }
.lb-card.mini .lb-card-mid { flex: 1 1 auto; min-width: 0; margin: 0; gap: 6px; }
.lb-card.mini .lb-card-first, .lb-card.mini .lb-card-last { font-size: 16px; }
.lb-card.mini .lb-card-jersey { font-size: 12px; }
.lb-card.mini .lb-card-meta { margin-top: 3px; font-size: 7.5px; }
.lb-card.mini .lb-card-school { font-size: 11.5px; }
.lb-card.mini .lb-card-commit img { width: 30px; height: 28px; }
.lb-card.mini .lb-card-lead { flex: 0 0 auto; flex-direction: column; align-items: flex-end;
  gap: 1px; margin: 0; padding: 0 0 0 10px; border-top: none; border-left: 1px solid var(--rule); }
.lb-card.mini .lb-card-lead .v { font-size: 26px; }
.lb-card.mini .lb-card-lead .k { font-size: 7.5px; }
.lb-card.mini .lb-card-line { display: none; }
.lb-card.mini:hover, .lb-card.leader:hover { transform: translateY(-1px); }

@media (max-width: 1250px) {
  .lb-podium { grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); }
  .lb-card.leader { grid-template-columns: 96px minmax(0, 1fr); }
  .lb-card.leader .lb-card-shot { flex-basis: 96px; height: 96px; }
  .lb-card.leader .lb-card-top { height: auto; }
  .lb-card.mini .lb-card-top { grid-template-columns: none; }
  .lb-card.mini .lb-card-shot { flex-basis: 44px; width: 44px; height: 44px; }
  .lb-card.mini .lb-card-commit { display: none; }
  .lb-card.mini .lb-card-rank { font-size: 12px; height: 20px; min-width: 28px; }
}

/* The charted table in one screen: the player in one two-line column and
   the numbers sharing whatever width is left, so nothing scrolls sideways
   on a laptop. A window too narrow for even that still scrolls. */
.ch-table { min-width: 0; }
.ch-row { grid-template-columns: 24px 42px minmax(170px, 1.6fr) 44px
    repeat(var(--ch-n, 22), minmax(38px, 1fr));
  gap: 0 4px; height: 46px; padding: 0 10px; }
.ch-row.head { height: 44px; }
.ch-row .n { font-size: 12.5px; }
.ch-who { display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 3px; }
.ch-name { font-size: 14px; }
.ch-sub { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ch-sub .ch-classchip { height: 15px; width: 32px; font-size: 9.5px; flex: 0 0 auto; }
.ch-sub .ch-pos, .ch-sub .ch-state { font-size: 8.5px; text-align: left; flex: 0 0 auto; }
.ch-sub .ch-state.home { color: var(--red); }
.ch-sub .ch-school { font-size: 11.5px; min-width: 0; }
.ch-prod { height: 24px; font-size: 13px; }
@media (min-width: 1300px) { .ch-wrap { overflow-x: visible; } }
/* Headers keep their own small stacked type, not the numbers' size. */
.ch-row.head .n { font-family: var(--f-black); font-weight: 700; font-size: 7.4px;
  letter-spacing: 0.03em; color: #2f5c3f; }
.ch-row.head .n.ch-prodhead { font-size: 9px; color: #14401f; }

/* The opening quote in a GeorgiaBlock name: a closing quote turned about
   the middle of its ink, which sits 0.225em under the top of a line set
   solid in that face. */
.q-open { display: inline-block; line-height: 1; transform: rotate(180deg);
  transform-origin: 50% 0.225em; }

/* The board looked at by one column: the header marks it, a thin bar says
   so and puts the board back. Numbers stay the board's own. */
.col-header .sortable, .ch-offers.sortable-offers { cursor: pointer; }
.col-header .sortable:hover, .ch-offers.sortable-offers:hover { color: var(--black); }
.col-header .sortable.sorted, .ch-offers.sorted { color: var(--red); }
.col-header .sortable.sorted::after { content: ' \25B2'; font-size: 7px; }
.col-header .sortable.sorted[data-dir="worst"]::after { content: ' \25BC'; }
.board-sortnote { display: flex; align-items: center; justify-content: center; gap: 12px; height: 26px;
  background: #fbe9ec; border-bottom: 1px solid #efc3cc; font-family: var(--f-black); font-weight: 700;
  font-size: 9px; letter-spacing: 0.12em; color: var(--red); }
.board-sortnote[hidden] { display: none; }
.board-sortnote button { height: 18px; padding: 0 8px; border: 1px solid var(--red); background: #fff;
  color: var(--red); cursor: pointer; font-family: var(--f-black); font-weight: 700; font-size: 8px;
  letter-spacing: 0.1em; }

/* Four grade chips beside a name: the reader, his position coach, the
   DPP and the DOS. Small and quiet on purpose, so the row says who has
   written him up without competing with the name (PJ, 9/21). */
/* Each chip under its own seat, and the set lifted clear of the dot row
   beneath the name (PJ, 9/21). */
.c-grades { display: inline-flex; align-items: flex-start; gap: 3px; margin-left: auto;
  padding: 0 6px 0 12px; flex: 0 0 auto; position: relative; top: -4px; }
.c-gradecol { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.c-gradeseat { font-style: normal; font-family: var(--f-black); font-weight: 700;
  font-size: 5px; letter-spacing: 0.06em; color: #b9b3aa; line-height: 1; }
/* The same four initials over them, in the column heading. */
.ch-player { display: flex; align-items: baseline; }
.ch-graders { display: inline-flex; align-items: center; gap: 2px;
  margin-left: auto; padding: 0 6px 0 12px; }
.ch-graders i { min-width: 17px; padding: 0 3px; font-style: normal; text-align: center;
  font-family: var(--f-black); font-weight: 700; font-size: 6.5px;
  letter-spacing: 0.02em; color: #a09a91; }
body.compact .ch-graders { display: none; }
.c-grade { min-width: 17px; height: 13px; padding: 0 3px; display: flex;
  align-items: center; justify-content: center; background: #c9c5bd; color: #fff;
  font-family: var(--f-black); font-weight: 700; font-size: 7.5px;
  letter-spacing: 0.02em; }
.c-grade.empty { background: none; color: #d8d4cd; box-shadow: inset 0 0 0 1px #ece9e3; }
body.compact .c-grades { display: none; }

/* His criteria score, beside the rank it produced. The band's own colour
   on a finished card; a part filled card shows its number plainly,
   because a band belongs to a card with every trait on it. An empty cell
   is a player nobody has written up (PJ, 9/22). */
.c-crit { display: flex; align-items: center; justify-content: center;
  overflow: hidden; }
/* The same block the official rank tag beside it fills, so the two read
   as a pair rather than a tag and a label (PJ, 9/22). */
.c-crit i { display: flex; align-items: center; justify-content: center;
  width: 40px; height: 22px; font-style: normal;
  font-family: var(--f-black); font-weight: 900; font-size: 11px; line-height: 1;
  letter-spacing: 0.01em; background: var(--plate, #e9e6e0); color: #2c2a29; }
.c-crit i.part { background: #f4f2ee; color: #a09a91; }
.c-crit.empty::after { content: ''; width: 12px; height: 1px; background: #e0dcd5; }
body.dense .c-crit i { width: 44px; height: 30px; font-size: 15px; }
body.compact .c-crit i { height: 16px; font-size: 9px; }
.col-header .ch-crit { overflow: hidden; }

/* Something on him wants a person: a combine date filed twice, or a rank
   with no report behind it. Yellow with a glow, top left of the
   photograph, and gone the moment it is sorted out (PJ, 9/22). */
.c-headshot { position: relative; }
.c-needs { position: absolute; left: 3px; top: 3px; width: 9px; height: 9px;
  border-radius: 50%; background: #F1B82D;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.9), 0 0 7px 2px rgba(241,184,45,0.85); }
body.dense .c-needs { width: 11px; height: 11px; left: 4px; top: 4px; }

/* The board's hover label (boardTip in board.js): whose grade a chip is
   and what they wrote, or which visit a dot is. On the document, above
   everything, never catching the mouse itself. */
.board-tip { display: none; position: fixed; z-index: 2100; max-width: 340px;
  padding: 5px 9px; background: #4a4744; color: #fff;
  font-family: var(--f-cond); font-size: 13px; line-height: 1.25;
  box-shadow: 0 3px 10px rgba(0,0,0,0.22); pointer-events: none; white-space: nowrap; }

/* Anything on a row that opens its own place on the profile. */
.c-gradecol.go, .c-dot.go { cursor: pointer; }

/* Printing the ORG CHART or the CUT UP LEADERBOARD: the page alone, in
   colour, the site's bars left off. */
@media print {
  .topbar, #subnav, .search-results, [data-noprint] { display: none !important; }
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; }
  #org-screen, #cutups-screen, .scroll-region { overflow: visible !important; height: auto !important; }
  #org-scroll { background: #fff !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ADVANCED: charted games the import held (PJ, 10/13). Red, above the
   table, only while there are any. */
.ch-held { margin: 10px 14px 4px; border: 1px solid var(--red); background: rgba(186, 12, 47, 0.06); }
.ch-held-head { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; background: var(--red); color: #fff; }
.ch-held-head b { font-family: var(--f-xblack); font-weight: 900; font-size: 11px; letter-spacing: 0.12em; }
.ch-held-n { font-family: var(--f-black); font-weight: 700; font-size: 10px; }
.ch-held-row { display: grid; grid-template-columns: minmax(150px, 1fr) 44px minmax(150px, 1fr) minmax(260px, 2.2fr) 70px;
  gap: 10px; align-items: center; padding: 6px 10px; border-top: 1px solid rgba(186, 12, 47, 0.2);
  font-family: var(--f-cond); font-size: 13px; color: inherit; }
.ch-held-name { padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--f-black); font-weight: 700; font-size: 12px; color: var(--black); }
.ch-held-name:hover { color: var(--red); }
.ch-held-date, .ch-held-plays { font-family: var(--f-black); font-weight: 700; font-size: 10px; letter-spacing: 0.06em; }
.ch-held-why { color: var(--red); }

/* The school page as a modal: between the study profile (about 1080px) and
   the full-screen player profile, under the profile so a player opened from
   it lands on top (PJ, 10/14). */
.school-overlay { position: fixed; inset: 0; z-index: 1150; background: rgba(18,17,16,0.74); display: flex;
  align-items: stretch; justify-content: center; padding: 74px 24px 28px; }
/* Over a profile when opened from one (PJ, 10/26). */
.school-overlay.over { z-index: 1250; }
/* The top bar (z 1200, 50px) stays over the dim, so the modal starts below
   it, room left for its corner buttons (PJ, 10/18). */
.school-overlay[hidden] { display: none; }
/* BACK and the close button sit in a strip along the modal's top, inside
   its rounded corners, rather than hanging off them (PJ, 10/23). */
.school-modal { position: relative; flex: 0 1 1320px; background: #f4f2ef; box-shadow: 0 24px 70px rgba(0,0,0,0.45);
  display: flex; padding-top: 44px; box-sizing: border-box; }
.school-modal-frame { flex: 1; border: none; width: 100%; height: 100%; background: #f4f2ef; }
.school-modal-x { position: absolute; top: 6px; right: 8px; z-index: 2; width: 32px; height: 32px; border: none;
  background: #2c2a29; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.school-modal-x:hover { background: var(--red); }
.school-modal-x[hidden] { display: none; }
/* Back to the screen it opened over (the hot sheet), on the top left. */
.school-modal-back { position: absolute; top: 6px; left: 8px; z-index: 2; display: flex; align-items: center;
  gap: 7px; height: 32px; padding: 0 12px 0 10px; border: none; background: #2c2a29; color: #fff; cursor: pointer;
  font-family: var(--f-black); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; }
.school-modal-back:hover { background: var(--red); }
.school-modal-back[hidden] { display: none; }

/* ------------------------------------------------------- home widgets
   The day's numbers and the doors are widgets (PJ, 10/22). Drag to move;
   right-click for edit mode. Shadows only on what floats: the tile being
   dragged, the menu, the sheet. */
.sort-active, .sort-active * { user-select: none; -webkit-user-select: none; }
.wdg.wdg-off { display: none; }
#home-stats .wdg-wide, .home-doors .wdg-wide { grid-column: span 2; }
.wdg img { -webkit-user-drag: none; }
.wdg-minus { display: none; position: absolute; top: 8px; left: 8px; z-index: 4; width: 22px; height: 22px;
  border-radius: 50%; background: rgba(236,233,228,0.96); color: rgb(44,42,41); font: 900 17px/21px var(--f-xblack);
  text-align: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.home-editing .wdg-minus { display: block; }
.home-editing .wdg { cursor: grab; }
.home-editing .home-stat-label, .home-editing .home-door-group { padding-left: 26px; }
@media (prefers-reduced-motion: no-preference) {
  .home-editing .wdg { animation: wdg-jiggle .3s ease-in-out infinite alternate; }
  .home-editing .wdg:nth-child(2n) { animation-delay: -.15s; animation-direction: alternate-reverse; }
}
@media (prefers-reduced-motion: reduce) {
  .home-editing .wdg { outline: 2px dashed rgba(255,255,255,0.5); outline-offset: 3px; }
}
@keyframes wdg-jiggle { from { transform: rotate(-.45deg); } to { transform: rotate(.45deg); } }
.sort-dragging { animation: none !important; transition: none !important; z-index: 30; cursor: grabbing; }
.wdg.sort-dragging { box-shadow: 0 22px 48px rgba(0,0,0,0.5); }

.wdg-bar { margin-left: auto; display: flex; gap: 8px; align-self: center; }
.wdg-btn { font-family: var(--f-black); font-weight: 800; font-size: 10px; letter-spacing: .14em; line-height: 1;
  padding: 7px 11px; border: 1px solid rgba(255,255,255,0.32); background: rgba(20,19,18,0.5);
  color: rgba(255,255,255,0.96); cursor: pointer; }
.wdg-btn:hover { border-color: rgba(255,255,255,0.96); }
/* Home is dark in both themes, so its controls are written in rgb(),
   which tools/build_dark_css leaves as it is. */
.wdg-btn.on { background: rgba(255,255,255,0.96); color: rgb(44,42,41); border-color: rgba(255,255,255,0.96); }
.wdg-add, .wdg-done { display: none; }
.home-editing .wdg-add, .home-editing .wdg-done { display: inline-block; }
.home-editing .wdg-edit { display: none; }

.wdg-menu { position: absolute; z-index: 60; min-width: 210px; padding: 14px; border-radius: var(--r-m);
  background: #fff; color: #2c2a29; box-shadow: 0 14px 36px rgba(0,0,0,0.4);
  display: flex; flex-direction: column; gap: 8px; }
.wdg-menu-name { font-family: var(--f-xblack); font-weight: 900; font-size: 13px; letter-spacing: .06em; }
.wdg-menu-lab { margin-top: 2px; font-family: var(--f-black); font-weight: 700; font-size: 8px;
  letter-spacing: .16em; color: #8d8880; }
.wdg-seg { display: flex; border: 1px solid #d5d1c9; border-radius: var(--r-s); overflow: clip; }
.wdg-seg button { flex: 1; padding: 8px 0; border: 0; border-radius: 0; background: #fff; color: #8d8880;
  font-family: var(--f-black); font-weight: 800; font-size: 10px; letter-spacing: .14em; cursor: pointer; }
.wdg-seg button + button { border-left: 1px solid #d5d1c9; }
.wdg-seg button.on { background: #2c2a29; color: #fff; }
.wdg-menu-remove { margin-top: 4px; padding: 8px 0; border: 0; background: #fbeaec; color: var(--red);
  font-family: var(--f-black); font-weight: 800; font-size: 10px; letter-spacing: .14em; cursor: pointer; }

.wdg-sheet-back { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: rgba(18,17,16,0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wdg-sheet { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow: auto;
  padding: 20px 22px 24px; border-radius: var(--r-l); background: #fff; color: #2c2a29;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45); }
@media (prefers-reduced-motion: no-preference) {
  .wdg-sheet { animation: poa-rise .24s cubic-bezier(.2,.8,.2,1); }
}
.wdg-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.wdg-sheet-head .wdg-btn.on { background: #2c2a29; color: #fff; border-color: #2c2a29; }
.wdg-sheet-title { font-family: var(--f-display); font-size: 26px; line-height: 1; }
.wdg-sheet-lab { margin: 14px 0 8px; font-family: var(--f-black); font-weight: 700; font-size: 9px;
  letter-spacing: .16em; color: #8d8880; }
.wdg-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wdg-gal { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-height: 76px; padding: 12px 14px; border: 0; border-radius: var(--r-m); background: #f4f2ef;
  color: #2c2a29; text-align: left; cursor: pointer; }
.wdg-gal:hover { background: #efedea; }
.wdg-gal-name { font-family: var(--f-xblack); font-weight: 900; font-size: 12px; letter-spacing: .08em; }
.wdg-gal-sub { font-family: var(--f-black); font-weight: 600; font-size: 9px; letter-spacing: .1em; color: #8d8880; }
.wdg-gal-add { position: absolute; right: 10px; top: 8px; width: 22px; height: 22px; border-radius: 50%;
  background: #2c2a29; color: #fff; font: 900 16px/22px var(--f-xblack); text-align: center; }
.wdg-gal.idea { cursor: default; background: #fff; border: 1px dashed #d5d1c9; }
.wdg-gal-tag { margin-top: auto; padding: 3px 6px; border-radius: var(--r-xs); background: #e6e4df; color: #57534d;
  font-family: var(--f-black); font-weight: 800; font-size: 8px; letter-spacing: .14em; }

/* ------------------------------------------------------- rank strip */
.rank-strip { display: flex; align-items: center; gap: 14px; padding: 8px 14px 8px 16px; background: #fff;
  border-bottom: 1px solid #e3e0da; }
.rank-strip[hidden] { display: none; }
.rank-strip-total { flex: 0 0 auto; font-family: var(--f-black); font-weight: 700; font-size: 9px;
  letter-spacing: .16em; color: #8d8880; }
.rank-strip-total b { margin-right: 2px; font-family: var(--f-xblack); font-size: 15px; letter-spacing: 0; color: #2c2a29; }
.rank-strip-bar { flex: 1 1 auto; display: flex; gap: 3px; min-width: 0; }
.rank-strip-seg { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 34px; height: 24px;
  padding: 0 6px; border: 0; border-radius: var(--r-s); overflow: hidden; white-space: nowrap; cursor: pointer;
  font-family: var(--f-xblack); font-weight: 900; font-size: 11px; }
.rank-strip-seg span { font-family: var(--f-black); font-weight: 700; font-size: 10px; opacity: .8; }
.rank-strip-seg:hover { filter: brightness(1.08); }
@keyframes rank-strip-flash { from { background-color: #fff3c4; } }
.prow.rank-strip-flash { animation: rank-strip-flash 1.2s ease-out; }