/* ============================================================
   ranker.css — The Ranker
   House system: parchment ground, navy furniture, brand blue.
   Gold is only ever the ◷ receipt glyph. Mint is up, coral is
   down, and nothing else uses either. No italics anywhere.

   LAYOUT LAW OF THIS PAGE
   The board comes first. Above it sit a compact hero and one
   56px toolbar; everything that used to stand between the two
   now lives in that toolbar, in a popover hung off it, or in
   the settings sheet. The reader lands on rows.
   ============================================================ */

.hr-statbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:12px 0; border-bottom:1px solid var(--hi-line); margin-bottom:12px; }
.hr-statbar .hr-note { flex:1; min-width:240px; margin:0; font-size:11px; }
.hr-stat-sort { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; }
.hr-stat-sort[hidden] { display:none; }
.hr-stat-sort select { max-width:220px; padding:6px 8px; border:1px solid var(--hi-line); border-radius:5px; background:var(--hi-surface-1); color:var(--hi-ink); font:inherit; }
html, body { overflow-anchor:none; }
@media(max-width:760px) { .hr-statbar { gap:10px; } .hr-statbar .hr-seg { width:100%; } .hr-statbar .hr-tg { padding:8px 9px; font-size:11px; flex:1; } .hr-statbar .hr-note { flex-basis:100%; } .hr-stat-sort { width:100%; } }
.hr-scope {
  --border: var(--hi-line);
  --hair: var(--hi-hair);
  --row-h: 44px;
  --bar-h: 56px;
  --nav-h: 58px;
  --prose: 76ch;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--pad) 96px;
  color: var(--hi-ink);
  font-family: var(--hi-sans);
  font-size: var(--t-body);
}

.hr-scope *,
.hr-drawer *,
.hr-sheet *,
.hr-print * { box-sizing: border-box; }

/* the hidden attribute has to beat every display we set below */
.hr-scope [hidden], .hr-drawer[hidden], .hr-drawer [hidden], .hr-print[hidden],
.hr-mobbar[hidden], .hr-sheet[hidden], .hr-sheet [hidden], .hr-pop[hidden] { display: none !important; }

.hr-scope h1, .hr-scope h2, .hr-scope h3, .hr-sheet h2, .hr-sheet h3 {
  font-family: var(--hi-serif);
  font-style: normal;
  font-weight: 700;
  margin: 0;
  letter-spacing: -.01em;
}

/* A repaint of the board changes the page height. Chrome's scroll anchoring
   then hunts for its anchor inside rows that no longer exist and snaps the
   window back to the top, so anchoring is off on this page. */
html, body { overflow-anchor: none; }

/* ---------------- research desk rail ---------------- */
.hr-scope .rdesk { margin: 10px 0 10px; }
.hr-scope .rdesk .in {
  display: flex; gap: 14px; align-items: center;
  overflow-x: auto; padding-bottom: 6px;
  border-bottom: 1px solid var(--hair);
  scrollbar-width: thin;
}
.hr-scope .rdesk .rlbl {
  font-size: var(--t-micro); font-weight: var(--hi-lbl-w);
  letter-spacing: var(--hi-lbl-track); text-transform: uppercase;
  color: var(--hi-muted); white-space: nowrap;
}
.hr-scope .rdesk a {
  font-size: var(--t-small); color: var(--hi-ink-2);
  text-decoration: none; white-space: nowrap; padding: 4px 0;
}
.hr-scope .rdesk a:hover { color: var(--hi-blue); }

/* the fantasy hub rail is a site fixture, styled once in fantasy/hubrail.css */

/* ---------------- hero: about 180px, and it says what the page is ----------
   Two plain sentences, the live mono line, and three chips that set the
   state so a first-time reader never has to guess at the toolbar. No navy
   panel and no big figures: the board is the hero, this is the label on it. */
.hr-hero { margin: 0 0 12px; }
.hr-hero-row {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  margin-bottom: 4px;
}
.hr-issue, .hr-stamp {
  font-family: var(--hi-mono); font-size: var(--t-mono);
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase;
  font-weight: 700; color: var(--hi-muted);
}
.hr-stamp::before { content: "\25F7 "; color: var(--hi-receipt); }
.hr-title {
  font-size: 1.9rem; line-height: 1.02; color: var(--hi-ink);
  margin: 0 0 3px;
}
.hr-dek {
  font-size: var(--t-body); line-height: 1.45; margin: 0 0 6px;
  color: var(--hi-ink-2); max-width: 118ch;
}
.hr-dek-2 { margin-bottom: 8px; color: var(--hi-muted); }
.hr-sum {
  margin: 0; font-family: var(--hi-mono); font-size: var(--t-mono);
  font-weight: 700; letter-spacing: var(--hi-lbl-track-mono);
  text-transform: uppercase; color: var(--hi-ink-2);
  font-variant-numeric: tabular-nums;
}

.hr-start {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 9px 0 0;
}
.hr-start-lbl {
  font-family: var(--hi-mono); font-size: var(--t-mono); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase;
  color: var(--hi-muted);
}
.hr-start-chip {
  font: inherit; font-size: var(--t-small, 0.82rem); font-weight: 600;
  color: var(--hi-ink); background: var(--hi-surface-1);
  border: 1px solid var(--hi-line); border-radius: 999px;
  padding: 5px 12px; cursor: pointer;
  transition: background var(--mo-fast) var(--mo-ease), border-color var(--mo-fast) var(--mo-ease);
}
.hr-start-chip:hover { background: var(--hi-surface-2); border-color: var(--hi-blue); }
.hr-start-chip:focus-visible { outline: 2px solid var(--hi-blue); outline-offset: 2px; }
.hr-start-chip[aria-pressed="true"] { border-color: var(--hi-blue); color: var(--hi-blue); }

/* ---------------- the toolbar ---------------- */
.hr-bar {
  position: sticky; top: var(--nav-h); z-index: 40;
  background: var(--hi-surface-1);
  border: 1px solid var(--border); border-radius: var(--rad-sm);
  margin: 0 0 12px;
}
.hr-bar.is-stuck {
  border-radius: 0 0 var(--rad-sm) var(--rad-sm);
  box-shadow: var(--hi-shadow);
}
.hr-bar-in {
  display: flex; align-items: center; gap: 8px;
  height: var(--bar-h); padding: 0 10px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
.hr-blbl {
  font-size: var(--t-micro); font-weight: var(--hi-lbl-w);
  letter-spacing: var(--hi-lbl-track); text-transform: uppercase;
  color: var(--hi-muted); white-space: nowrap;
}
.hr-bfield, .hr-bgroup {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
}
.hr-bar-in > * { flex: 0 0 auto; }
.hr-bar select, .hr-bar input[type="date"], .hr-bar input[type="search"] {
  height: 34px; border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--hi-surface-0); color: var(--hi-ink);
  font-family: var(--hi-mono); font-size: .74rem; font-weight: 700;
  padding: 0 8px;
}
.hr-bar select { font-family: var(--hi-sans); font-size: var(--t-small); min-width: 118px; }
.hr-bar input[type="date"] { width: 112px; }
.hr-bar input[type="search"] { font-family: var(--hi-sans); font-weight: 400; width: 128px; }
.hr-bar .hr-blbl { display: none; }
.hr-bar .hr-bbtn { padding: 0 9px; }
.hr-bto { font-family: var(--hi-mono); font-size: var(--t-mono); color: var(--hi-muted); }
.hr-bbtn {
  appearance: none; cursor: pointer; height: 34px; padding: 0 11px;
  border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--hi-surface-0); color: var(--hi-ink);
  font-family: var(--hi-mono); font-size: var(--t-mono); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.hr-bbtn:hover { border-color: var(--hi-blue); color: var(--hi-blue); }
.hr-bbtn.is-key { background: var(--hi-blue); border-color: var(--hi-blue); color: #fff; }
.hr-bbtn.is-key:hover { background: var(--hi-blue-2); border-color: var(--hi-blue-2); color: #fff; }
.hr-bbtn[aria-expanded="true"] { border-color: var(--hi-blue); color: var(--hi-blue); background: var(--hi-blue-soft); }
.hr-bcount {
  font-size: .55rem; border-radius: var(--rad-pill); padding: 1px 5px;
  background: var(--hi-blue); color: #fff;
}
/* the bar is one row and it is full, so the status sits under it and only
   while the page is actually working */
.hr-barfoot { display: none; padding: 0 12px 8px; }
.hr-bar.is-busy .hr-barfoot { display: block; }
.hr-bstatus {
  font-family: var(--hi-mono); font-size: var(--t-mono);
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase;
  color: var(--hi-muted);
}
.hr-seg {
  display: inline-flex; border: 1px solid var(--border);
  border-radius: var(--rad-sm); overflow: hidden;
}
.hr-seg .hr-tg {
  border: 0; border-right: 1px solid var(--border); border-radius: 0;
  min-height: 34px; height: 34px;
}
.hr-seg .hr-tg:last-child { border-right: 0; }
.hr-bar .hr-poschips { gap: 4px; }
.hr-bar .hr-pos { min-height: 34px; height: 34px; padding: 0 9px; }

/* popovers hang off the bar; the bar is positioned, so they anchor to it */
.hr-pop {
  position: absolute; top: calc(100% + 6px); left: 10px; z-index: 50;
  width: min(520px, calc(100vw - 40px));
  background: var(--hi-surface-1); border: 1px solid var(--hi-blue-line);
  border-radius: var(--rad-sm); box-shadow: var(--hi-lift); padding: 12px 14px;
}
.hr-pop-filter { left: auto; right: 10px; }
.hr-colswrap { position: relative; }
.hr-colswrap .hr-bbtn { height: 28px; }
.hr-pop-cols { left: auto; right: 0; top: calc(100% + 6px); width: min(400px, calc(100vw - 40px)); }
.hr-pop-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--hair);
}
.hr-pop-head b {
  font-family: var(--hi-mono); font-size: var(--t-mono); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--hi-muted);
}
.hr-popx {
  appearance: none; border: 1px solid var(--border); background: var(--hi-surface-0);
  color: var(--hi-ink); width: 28px; height: 28px; border-radius: 6px;
  cursor: pointer; font-size: 1rem; line-height: 1;
}
.hr-colsbox { display: grid; gap: 8px; }
/* styles.css sets every bare label to a tracked uppercase micro-label; a
   checkbox row is a sentence, so it opts out by hand */
.hr-ck {
  display: flex; align-items: flex-start; gap: 8px; min-height: 32px;
  font-family: var(--hi-sans); font-size: var(--t-small); font-weight: 400;
  letter-spacing: normal; text-transform: none; line-height: 1.4;
  color: var(--hi-ink); cursor: pointer;
}
.hr-ck input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--hi-blue); }

/* ---------------- sections ---------------- */
.hr-sec { margin-bottom: var(--sec); scroll-margin-top: 130px; }
.hr-sec-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap;
  border-bottom: 3px solid var(--hi-blue); padding-bottom: 10px; margin-bottom: 14px;
}
/* the board's own head: one line, because the board is the page and does not
   need to introduce itself at length */
.hr-sec-head.is-tight { padding-bottom: 6px; margin-bottom: 8px; border-bottom-width: 2px; align-items: baseline; }
.hr-h2.is-tight { font-size: var(--t-h3); }
.hr-headline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hr-shelfname {
  font-family: var(--hi-mono); font-size: var(--t-mono); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--hi-blue);
}
.hr-kicker {
  display: block; font-size: var(--t-micro); font-weight: var(--hi-lbl-w);
  letter-spacing: var(--hi-lbl-track); text-transform: uppercase;
  color: var(--hi-blue); margin-bottom: 6px;
}
.hr-h2 { font-size: var(--t-h2); line-height: 1.1; }
.hr-h3 { font-size: var(--t-h3); line-height: 1.15; }
.hr-count {
  font-family: var(--hi-mono); font-size: var(--t-mono); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase;
  color: var(--hi-muted);
}
.hr-lede { font-size: var(--t-body); line-height: 1.6; max-width: var(--prose); margin: 0 0 10px; color: var(--hi-ink-2); }
.hr-note, .hr-say {
  font-family: var(--hi-mono); font-size: var(--t-mono); line-height: 1.7;
  color: var(--hi-muted); margin: 8px 0 0; max-width: 92ch;
}
.hr-say::before { content: "\25F7 "; color: var(--hi-receipt); }

/* ---------------- presets ---------------- */
.hr-presets { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.hr-preset {
  appearance: none; border: 1px solid var(--border); background: var(--hi-surface-1);
  color: var(--hi-ink-2); border-radius: var(--rad-sm);
  padding: 8px 12px; min-height: 44px; cursor: pointer;
  font-family: var(--hi-sans); font-size: var(--t-small); font-weight: 700;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  transition: border-color var(--mo-fast) var(--mo-ease), background var(--mo-fast) var(--mo-ease);
}
.hr-preset span {
  font-family: var(--hi-mono); font-size: var(--t-mono); font-weight: 600;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--hi-muted);
}
.hr-preset:hover { border-color: var(--hi-blue-line); }
.hr-preset[aria-selected="true"] {
  border-color: var(--hi-blue); background: var(--hi-blue-soft); color: var(--hi-blue);
  box-shadow: inset 0 -3px 0 var(--hi-blue);
}
.hr-preset[aria-selected="true"] span { color: var(--hi-blue); }

/* ---------------- scoring console ---------------- */
.hr-console { display: grid; gap: 10px; }
.hr-group {
  border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--hi-surface-1); overflow: hidden;
}
.hr-group > summary {
  cursor: pointer; padding: 12px 14px; min-height: 44px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-weight: 700; font-size: var(--t-small);
  background: var(--hi-surface-2); border-bottom: 1px solid var(--hair);
}
.hr-group > summary .hint {
  font-family: var(--hi-mono); font-size: var(--t-mono); font-weight: 600;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--hi-muted);
}
.hr-wts, .hr-roster, .hr-leaguebox {
  display: grid; gap: 10px; padding: 12px 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.hr-wt { display: flex; flex-direction: column; gap: 4px; }
.hr-wt-lbl {
  font-size: var(--t-micro); font-weight: var(--hi-lbl-w);
  letter-spacing: var(--hi-lbl-track); text-transform: uppercase; color: var(--hi-muted);
}
.hr-wt-lbl b { color: var(--hi-ink); font-weight: var(--hi-lbl-w); }
.hr-wt input, .hr-roster input, .hr-leaguebox input {
  height: 44px; border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--hi-surface-0); color: var(--hi-ink);
  font-family: var(--hi-mono); font-size: .84rem; font-weight: 700;
  padding: 0 10px; width: 100%;
}
.hr-scope input:focus-visible, .hr-scope select:focus-visible,
.hr-scope button:focus-visible, .hr-scope [tabindex]:focus-visible,
.hr-sheet input:focus-visible, .hr-sheet select:focus-visible,
.hr-sheet button:focus-visible, .hr-sheet summary:focus-visible,
.hr-drawer button:focus-visible, .hr-drawer input:focus-visible {
  outline: 3px solid var(--hi-blue); outline-offset: 2px;
}
.hr-wt.is-off input { opacity: .55; }
.hr-wt.is-off .hr-wt-lbl b { color: var(--hi-muted); }
.hr-wt-wait { font-family: var(--hi-mono); font-size: var(--t-mono); color: var(--hi-muted); }
.hr-roster { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

/* ---------------- actions ---------------- */
.hr-acts, .hr-myacts {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px;
}
.hr-act {
  appearance: none; cursor: pointer; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--hi-surface-1); color: var(--hi-ink);
  font-family: var(--hi-sans); font-size: var(--t-small); font-weight: 700;
  transition: border-color var(--mo-fast) var(--mo-ease);
}
.hr-act:hover { border-color: var(--hi-blue); color: var(--hi-blue); }
.hr-act.is-key { background: var(--hi-blue); border-color: var(--hi-blue); color: #fff; }
.hr-act.is-key:hover { background: var(--hi-blue-2); border-color: var(--hi-blue-2); color: #fff; }
.hr-said {
  font-family: var(--hi-mono); font-size: var(--t-mono);
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--hi-muted);
}

/* ---------------- window presets ---------------- */
.hr-winpresets { display: flex; gap: 6px; flex-wrap: wrap; }
.hr-win {
  appearance: none; cursor: pointer; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--rad-pill);
  background: var(--hi-surface-0); color: var(--hi-ink-2);
  font-family: var(--hi-mono); font-size: var(--t-mono); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase;
}
.hr-win:hover { border-color: var(--hi-blue); color: var(--hi-blue); }
.hr-win.is-on { background: var(--hi-blue-soft); border-color: var(--hi-blue); color: var(--hi-blue); }
.hr-win[disabled] { opacity: .45; cursor: not-allowed; }

.hr-progress { display: flex; align-items: center; gap: 12px; padding: 0 12px 8px; }
.hr-progress-bar {
  flex: 1 1 220px; max-width: 320px; height: 6px; border-radius: var(--rad-pill);
  background: var(--hi-data-track); overflow: hidden;
}
.hr-progress-bar i { display: block; height: 100%; width: 0; background: var(--hi-data-fill); transition: width var(--mo-base) var(--mo-ease); }
.hr-progress span {
  font-family: var(--hi-mono); font-size: var(--t-mono);
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--hi-muted);
}

/* ---------------- filters ---------------- */
.hr-filters { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.hr-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; align-self: start; }
.hr-f-lbl {
  font-size: var(--t-micro); font-weight: var(--hi-lbl-w);
  letter-spacing: var(--hi-lbl-track); text-transform: uppercase; color: var(--hi-muted);
}
.hr-f-lbl b { color: var(--hi-ink); font-family: var(--hi-mono); }
.hr-f input[type="search"], .hr-f select {
  height: 44px; border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--hi-surface-0); color: var(--hi-ink);
  font-family: var(--hi-sans); font-size: var(--t-small); padding: 0 10px; width: 100%;
}
.hr-f input[type="range"] { height: 34px; width: 100%; accent-color: var(--hi-blue); }
.hr-f-toggles, .hr-f-logs { grid-column: 1 / -1; }
.hr-poschips, .hr-toggles { display: flex; gap: 6px; flex-wrap: wrap; }
.hr-pos, .hr-tg {
  appearance: none; cursor: pointer; min-height: 40px; padding: 0 11px;
  border: 1px solid var(--border); border-radius: var(--rad-pill);
  background: var(--hi-surface-0); color: var(--hi-ink-2);
  font-family: var(--hi-mono); font-size: var(--t-mono); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase;
}
.hr-pos:hover, .hr-tg:hover { border-color: var(--hi-blue); color: var(--hi-blue); }
.hr-pos[aria-pressed="true"], .hr-tg[aria-pressed="true"], .hr-tg.is-on {
  background: var(--hi-blue-soft); border-color: var(--hi-blue); color: var(--hi-blue);
}

.hr-myacts {
  border: 1px solid var(--hi-blue-line); border-radius: var(--rad-sm);
  background: var(--hi-blue-soft); padding: 10px 12px; margin-bottom: 12px;
}

/* ---------------- the board frame ---------------- */
.hr-sec-wide { max-width: none; }
.hr-shelf { margin-top: 10px; }
.hr-shelf.is-first { margin-top: 0; }
.hr-shelf + .hr-shelf { margin-top: 22px; }
.hr-shelf-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; margin-bottom: 4px;
}
.hr-shelf-head .hr-h3 { font-size: 1rem; }
.hr-shelf-say {
  font-family: var(--hi-mono); font-size: var(--t-mono);
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--hi-muted);
}
/* The frame is one scroller on both axes. That is what lets the header stick to
   the top and the rank and player cells stick to the left at the same time: a
   sticky box resolves against the nearest scrolling ancestor, and with two
   nested scrollers the left edge would drift. */
.hr-tablewrap {
  border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--hi-surface-1); overflow: hidden;
}
.hr-scroll {
  max-height: 640px; overflow: auto; overflow-anchor: none;
  --tblw: 100%;
}
.hr-thead, .hr-row {
  display: grid; align-items: center;
  grid-template-columns: var(--cols);
  width: var(--tblw);
}
.hr-thead {
  position: sticky; top: 0; z-index: 3;
  background: var(--hi-surface-2); border-bottom: 1px solid var(--border);
}
.hr-th {
  padding: 6px 8px; text-align: right;
  font-size: var(--t-micro); font-weight: var(--hi-lbl-w);
  letter-spacing: var(--hi-lbl-track); text-transform: uppercase; color: var(--hi-muted);
  white-space: nowrap; overflow: hidden;
}
.hr-th.is-l { text-align: left; }
.hr-th button {
  appearance: none; background: none; border: 0; cursor: pointer; padding: 4px 2px;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.hr-th button:hover { color: var(--hi-blue); }
.hr-th.is-sorted button { color: var(--hi-blue); }
.hr-th .arw { margin-left: 3px; }
.hr-th.is-fz { position: sticky; z-index: 4; background: var(--hi-surface-2); }

.hr-spacer { position: relative; width: var(--tblw); }
.hr-rows { position: absolute; left: 0; right: 0; top: 0; }
.hr-row {
  height: var(--row-h); border-bottom: 1px solid var(--hair);
  cursor: pointer; background: var(--hi-surface-1);
}
.hr-row.is-alt { background: var(--hi-surface-2); }
.hr-row:hover { background: var(--hi-blue-soft); }
.hr-row.is-open { background: var(--hi-blue-soft); }
.hr-row.is-drag { opacity: .5; }
.hr-row.is-drop { box-shadow: inset 0 3px 0 var(--hi-blue); }
.hr-row:focus-visible { outline: 3px solid var(--hi-blue); outline-offset: -3px; }
.hr-c {
  padding: 0 8px; text-align: right; white-space: nowrap; overflow: hidden;
  font-family: var(--hi-mono); font-size: .8125rem; font-weight: 600;
  color: var(--hi-ink); font-variant-numeric: tabular-nums;
}
.hr-c.is-l { text-align: left; }
/* background: inherit copies the row's own colour, so a pinned cell keeps the
   zebra, the hover and the open state instead of punching a hole in them */
.hr-c.is-fz { position: sticky; z-index: 2; background: inherit; }
.hr-scroll.is-xscroll .hr-c.is-edge,
.hr-scroll.is-xscroll .hr-th.is-edge { box-shadow: 8px 0 10px -8px rgba(6, 15, 30, .45); }
.hr-c-rank { font-weight: 700; color: var(--hi-ink); }
.hr-c-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.hr-nm {
  font-family: var(--hi-sans); font-size: .875rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hr-crest {
  width: 16px; height: 16px; flex: 0 0 16px;
  background-image: var(--crest-l); background-size: contain;
  background-position: center; background-repeat: no-repeat;
}
:root[data-theme="dark"] .hr-crest { background-image: var(--crest-d); }
.hr-mug {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%;
  background: var(--tint, var(--hi-surface-3));
  box-shadow: inset 0 0 0 1.5px var(--tint-ring, var(--hi-line));
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--hi-mono); font-size: .56rem; font-weight: 700;
  color: var(--hi-ink-2); overflow: hidden; position: relative;
}
.hr-mug img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hr-mug.is-lg { width: 58px; height: 58px; flex-basis: 58px; font-size: 1rem; }

.hr-tag {
  font-family: var(--hi-mono); font-size: .54rem; font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase;
  border: 1px solid var(--border); border-radius: var(--rad-pill); padding: 1px 6px;
  color: var(--hi-muted); flex: 0 0 auto;
}
.hr-tag.is-out { border-color: var(--hi-coral); color: var(--hi-coral); background: var(--hi-coral-soft); }
.hr-tag.is-pp1 { border-color: var(--hi-blue-line); color: var(--hi-blue); background: var(--hi-blue-soft); }
.hr-tag.is-tandem { border-color: var(--hi-line); color: var(--hi-ink-2); }
.hr-tag.is-wk1 { border-color: var(--hi-blue-line); color: var(--hi-blue); background: var(--hi-blue-soft); }

.hr-delta { font-family: var(--hi-mono); font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hr-delta.is-up { color: var(--hi-mint); }
.hr-delta.is-dn { color: var(--hi-coral); }
.hr-delta.is-none { color: var(--hi-muted); }

/* trend strip */
.hr-trend { display: flex; align-items: flex-end; justify-content: flex-end; gap: 3px; height: 24px; }
.hr-trend i {
  display: block; width: 8px; background: var(--hi-data-fill);
  border-radius: 2px 2px 0 0; min-height: 2px;
}
.hr-trend i.is-up { background: var(--hi-mint); }
.hr-trend i.is-dn { background: var(--hi-coral); }
.hr-trend i.is-none { background: var(--hi-data-track); }

/* FLOOR AND CEILING. Five cells of one size, tinted by the share of his games
   in that band, so the eye reads the shape and not five different heights.
   An unloaded cell paints nothing at all — the column head does the asking. */
.hr-bins { display: flex; align-items: center; justify-content: flex-end; gap: 2px; height: 24px; }
.hr-bins i {
  display: block; width: 16px; height: 16px; border-radius: 3px;
  background: var(--hi-data-fill);
}
.hr-bins i.b0 { background: var(--hi-coral); }
.hr-bins i.b1 { background: var(--hi-data-track); }
.hr-bins i.b4 { background: var(--hi-mint); }

/* the loader that lives in the Floor/ceil column head */
.hr-th-load {
  display: block; margin-top: 3px; padding: 2px 7px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--hi-surface-0); color: var(--hi-muted); cursor: pointer;
  font-family: var(--hi-mono); font-size: .56rem; font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; white-space: nowrap;
}
.hr-th-load:hover { color: var(--hi-ink); border-color: var(--hi-ink); }
.hr-th-prog {
  display: block; margin-top: 3px; color: var(--hi-muted);
  font-family: var(--hi-mono); font-size: .56rem; font-weight: 600; text-transform: none;
}
.hr-logsline {
  font-family: var(--hi-mono); font-size: .6rem; font-weight: 600;
  color: var(--hi-muted); letter-spacing: .02em;
}

/* my-board cells */
.hr-rankin {
  width: 46px; height: 30px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--hi-surface-0); color: var(--hi-ink);
  font-family: var(--hi-mono); font-size: .72rem; font-weight: 700; text-align: center; padding: 0 2px;
}
.hr-grip {
  cursor: grab; color: var(--hi-muted); font-family: var(--hi-mono);
  font-size: .8rem; padding: 0 4px; user-select: none;
}
.hr-griprow { display: flex; align-items: center; gap: 2px; }
.hr-nudge {
  appearance: none; border: 1px solid var(--border); border-radius: 6px;
  background: var(--hi-surface-0); color: var(--hi-muted); cursor: pointer;
  width: 20px; height: 28px; line-height: 1; font-size: .58rem; padding: 0;
}
.hr-nudge:hover { border-color: var(--hi-blue); color: var(--hi-blue); }

/* tiers on the board: a labelled hairline, never a band */
.hr-tierrule {
  display: flex; align-items: center; gap: 10px;
  height: var(--row-h); padding: 0 10px; width: var(--tblw);
  background: var(--hi-surface-1);
}
.hr-tierrule .tl {
  font-family: var(--hi-mono); font-size: var(--t-mono); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase;
  color: var(--hi-blue); white-space: nowrap;
}
.hr-tierrule .tn {
  font-family: var(--hi-mono); font-size: var(--t-mono);
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase;
  color: var(--hi-muted); white-space: nowrap;
}
.hr-tierrule .rl { flex: 1; height: 1px; background: var(--hi-blue-line); }
.hr-row.is-tierend { border-bottom: 1px solid var(--hi-blue-line); }
.hr-row.is-taken .hr-nm { text-decoration: line-through; color: var(--hi-muted); }
.hr-row.is-taken { opacity: .62; }
.hr-row.is-mine { box-shadow: inset 3px 0 0 var(--hi-blue); opacity: 1; }
.hr-row.is-lift { box-shadow: inset 0 0 0 2px var(--hi-blue); }

/* ---------------- replacement level ---------------- */
.hr-par {
  display: grid; gap: 1px; background: var(--hair);
  border: 1px solid var(--border); border-radius: var(--rad-sm); overflow: hidden;
}
.hr-par-row {
  display: grid; grid-template-columns: 80px 1fr 110px 110px 1fr;
  gap: 10px; align-items: center; padding: 10px 14px; background: var(--hi-surface-1);
}
.hr-par-row.is-head {
  background: var(--hi-surface-2);
  font-size: var(--t-micro); font-weight: var(--hi-lbl-w);
  letter-spacing: var(--hi-lbl-track); text-transform: uppercase; color: var(--hi-muted);
}
.hr-par-row b { font-family: var(--hi-mono); font-size: .82rem; font-variant-numeric: tabular-nums; }
.hr-par-row .why { font-family: var(--hi-mono); font-size: var(--t-mono); color: var(--hi-muted); }

/* ---------------- glossary, receipts, faq ---------------- */
.hr-gloss { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.hr-gl {
  border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--hi-surface-1); padding: 12px 14px;
}
.hr-gl b {
  display: block; font-family: var(--hi-mono); font-size: var(--t-mono);
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase;
  color: var(--hi-blue); margin-bottom: 5px;
}
.hr-gl b::after { content: " ?"; color: var(--hi-muted); }
.hr-gl p { margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--hi-ink-2); }
.hr-rcpts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.hr-chip {
  font-family: var(--hi-mono); font-size: var(--t-mono); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase;
  border: 1px solid var(--border); border-radius: var(--rad-pill);
  padding: 6px 12px; color: var(--hi-muted); background: var(--hi-surface-1);
}
.hr-chip::before { content: "\25F7 "; color: var(--hi-receipt); }

/* ---------------- drawer ---------------- */
.hr-drawer { position: fixed; inset: 0; z-index: 80; }
.hr-drawer-scrim { position: absolute; inset: 0; background: rgba(6,15,30,.5); }
.hr-drawer-panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(660px, 100%);
  background: var(--hi-surface-1); border-left: 1px solid var(--border);
  box-shadow: var(--hi-lift); display: flex; flex-direction: column;
  font-family: var(--hi-sans); color: var(--hi-ink); font-size: var(--t-body);
}
.hr-drawer-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--border); background: var(--hi-surface-2);
}
.hr-drawer-id { display: flex; gap: 12px; align-items: center; min-width: 0; }
.hr-drawer-id h3 { font-family: var(--hi-serif); font-size: 1.35rem; margin: 0 0 3px; }
.hr-drawer-id p {
  margin: 0; font-family: var(--hi-mono); font-size: var(--t-mono);
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--hi-muted);
}
.hr-x {
  appearance: none; border: 1px solid var(--border); background: var(--hi-surface-1);
  color: var(--hi-ink); width: 44px; height: 44px; border-radius: var(--rad-sm);
  cursor: pointer; font-size: 1.2rem; line-height: 1; flex: 0 0 44px;
}
/* A grid column sizes to its widest item unless it is told not to, and one wide
   block in here would push every paragraph past the panel edge. */
.hr-drawer-body { overflow: auto; padding: 20px; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.hr-drawer-body p, .hr-drawer-body h4, .hr-dblock { min-width: 0; overflow-wrap: break-word; }
.hr-dblock h4 {
  font-family: var(--hi-sans); font-size: var(--t-micro); font-weight: var(--hi-lbl-w);
  letter-spacing: var(--hi-lbl-track); text-transform: uppercase; color: var(--hi-muted);
  margin: 0 0 8px;
}
.hr-dblock p { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--hi-ink-2); }
.hr-smalls { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
.hr-small {
  border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--hi-surface-2); padding: 8px 10px;
}
.hr-small b {
  display: block; font-family: var(--hi-mono); font-size: var(--t-mono);
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--hi-muted); margin-bottom: 6px;
}
.hr-small svg { display: block; width: 100%; height: 42px; }
.hr-small .v { font-family: var(--hi-mono); font-size: .68rem; color: var(--hi-ink); margin-top: 4px; display: block; }
.hr-kv { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--border); border-radius: var(--rad-sm); overflow: hidden; }
.hr-kv > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 12px; background: var(--hi-surface-1);
  font-family: var(--hi-mono); font-size: .72rem;
}
.hr-kv span { color: var(--hi-muted); }
.hr-kv b { color: var(--hi-ink); font-variant-numeric: tabular-nums; }
.hr-note-inline { margin-top: 8px; }

/* ---------------- drawer compare ---------------- */
.hr-cmp {
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  background: var(--hi-surface-2); display: grid; gap: 8px;
}
.hr-cmp input[type="search"] {
  height: 44px; border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--hi-surface-0); color: var(--hi-ink);
  font-family: var(--hi-sans); font-size: var(--t-small); padding: 0 10px; width: 100%;
}
.hr-cmp-list { display: grid; gap: 4px; }
.hr-cmp-hit {
  appearance: none; text-align: left; cursor: pointer; min-height: 44px;
  border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--hi-surface-1); color: var(--hi-ink); padding: 6px 10px;
}
.hr-cmp-hit:hover { border-color: var(--hi-blue); }
.hr-cmp-hit b { display: block; font-size: var(--t-small); }
.hr-cmp-hit span { font-family: var(--hi-mono); font-size: var(--t-mono); color: var(--hi-muted); }
.hr-cmp-grid {
  display: grid; gap: 1px; background: var(--hair);
  border: 1px solid var(--border); border-radius: var(--rad-sm); overflow: hidden;
}
.hr-cmp-row {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px;
  padding: 7px 12px; background: var(--hi-surface-1);
  font-family: var(--hi-mono); font-size: .7rem;
}
.hr-cmp-row span { color: var(--hi-muted); }
.hr-cmp-row b { color: var(--hi-ink); text-align: right; font-variant-numeric: tabular-nums; }
.hr-cmp-row.is-head { background: var(--hi-surface-2); }
.hr-cmp-row.is-head b { color: var(--hi-ink); font-size: .74rem; }
.hr-cmp-row b.is-ahead { color: var(--hi-mint); }
.hr-cmp-row b.is-behind { color: var(--hi-coral); }

/* ---------------- drawer game chart and months ---------------- */
.hr-gamechart {
  position: relative; height: 132px; display: flex; align-items: flex-end; gap: 1px;
  border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--hi-surface-2); padding: 6px 8px; overflow-x: auto;
}
.hr-gamechart i {
  position: relative; display: block; flex: 0 0 5px; min-width: 5px; border-radius: 1px;
  background: var(--hi-data-fill);
}
.hr-gamechart i.is-dn { background: var(--hi-coral); }
.hr-months {
  display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--hi-surface-2); padding: 10px 12px;
}
.hr-month { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 40px; }
.hr-month i { display: block; width: 18px; background: var(--hi-data-fill); border-radius: 2px 2px 0 0; }
.hr-month b, .hr-month span {
  font-family: var(--hi-mono); font-size: .58rem; font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); color: var(--hi-muted);
}
.hr-month span { color: var(--hi-ink); }

/* ---------------- print sheet ---------------- */
.hr-print {
  position: fixed; inset: 0; z-index: 90; overflow: auto;
  background: var(--hi-surface-0); color: var(--hi-ink); font-family: var(--hi-sans);
}
.hr-print-bar {
  position: sticky; top: 0; display: flex; gap: 10px; align-items: center;
  padding: 12px 20px; background: var(--hi-surface-2); border-bottom: 1px solid var(--border);
}
.hr-print-bar span {
  flex: 1; font-family: var(--hi-mono); font-size: var(--t-mono);
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--hi-muted);
}
.hr-print-page { max-width: 1000px; margin: 0 auto; padding: 24px 20px 60px; }
.hr-print-page h2 { font-family: var(--hi-serif); font-size: 1.6rem; margin: 0 0 4px; }
.hr-print-page .sub {
  font-family: var(--hi-mono); font-size: var(--t-mono); color: var(--hi-muted);
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; margin: 0 0 18px;
}
.hr-tier { break-inside: avoid; margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--rad-sm); overflow: hidden; }
.hr-tier-h {
  background: var(--hi-surface-2); padding: 6px 12px; border-bottom: 1px solid var(--hair);
  font-family: var(--hi-mono); font-size: var(--t-mono); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--hi-ink);
  display: flex; justify-content: space-between; gap: 12px;
}
.hr-tier-h em { font-style: normal; color: var(--hi-muted); }
.hr-tier ol { margin: 0; padding: 6px 12px 8px 34px; columns: 2; }
.hr-tier li { font-size: var(--t-small); line-height: 1.6; break-inside: avoid; }
.hr-tier li .m { font-family: var(--hi-mono); font-size: var(--t-mono); color: var(--hi-muted); }

@media print {
  .hr-print-bar, .site-nav, .hr-bar { display: none; }
  .hr-print { position: static; }
  .hr-tier ol { columns: 3; }
}

/* ---------------- skeletons ---------------- */
.hr-skel {
  border: 1px dashed var(--border); border-radius: var(--rad-sm);
  background: var(--hi-surface-2); padding: 18px;
  font-family: var(--hi-mono); font-size: var(--t-mono); line-height: 1.8;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--hi-muted);
}

/* ---------------- read-only banner ---------------- */
.hr-ro {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--hi-blue-line); border-radius: var(--rad-sm);
  background: var(--hi-blue-soft); padding: 12px 14px; margin-bottom: 14px;
}
.hr-ro p { margin: 0; flex: 1 1 320px; font-size: var(--t-small); color: var(--hi-ink); }

/* ---------------- named boards ---------------- */
.hr-boardsbar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end;
  border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--hi-surface-1); padding: 12px 14px;
}
.hr-f-board { min-width: 200px; flex: 1 1 200px; }
.hr-f-board select {
  height: 44px; border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--hi-surface-0); color: var(--hi-ink);
  font-family: var(--hi-sans); font-size: var(--t-small); padding: 0 10px; width: 100%;
}
.hr-storage {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--rad-sm); background: var(--hi-surface-2);
}
.hr-storage[data-state="saved"] { border-color: var(--hi-blue-line); background: var(--hi-blue-soft); }
.hr-storage[data-state="unsaved"], .hr-storage[data-state="invalid"] { border-style: dashed; border-color: var(--hi-blue); }
.hr-storage > p {
  flex: 1 1 280px; margin: 0; font-family: var(--hi-mono);
  font-size: var(--t-mono); line-height: 1.6; color: var(--hi-ink-2);
}
.hr-storage-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.hr-storage .hr-act { min-height: 38px; }

/* ---------------- figures: curves and scatter ---------------- */
.hr-figbox {
  border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--hi-surface-1); padding: 14px 16px;
}
.hr-svgwrap { display: grid; gap: 16px; }
.hr-fig-panel { margin: 0; }
.hr-fig-panel figcaption {
  font-size: var(--t-micro); font-weight: var(--hi-lbl-w);
  letter-spacing: var(--hi-lbl-track); text-transform: uppercase;
  color: var(--hi-muted); margin-bottom: 6px;
}
.hr-curve, .hr-scatter { display: block; width: 100%; height: auto; }
.hr-curve .ax, .hr-scatter .ax { stroke: var(--hi-line); stroke-width: 1; }
.hr-curve .grid { stroke: var(--hi-hair); stroke-width: 1; }
.hr-curve .tick, .hr-scatter .tick {
  font-family: var(--hi-mono); font-size: 10px; fill: var(--hi-muted);
}
.hr-curve .rep { stroke: var(--hi-blue); stroke-width: 1.5; stroke-dasharray: 4 3; }
.hr-curve .cliff { fill: var(--hi-coral); }
.hr-curve .mark, .hr-curve .key {
  font-family: var(--hi-mono); font-size: 10px; font-weight: 700; fill: var(--hi-ink-2);
}
.hr-scatter .diag { stroke: var(--hi-line); stroke-width: 1.5; stroke-dasharray: 5 4; }
.hr-scatter .dot { fill: var(--hi-data-fill); opacity: .75; }
.hr-scatter .dot.is-up { fill: var(--hi-mint); }
.hr-scatter .dot.is-dn { fill: var(--hi-coral); }
.hr-readout {
  margin: 10px 0 0; min-height: 1.4em;
  font-family: var(--hi-mono); font-size: var(--t-mono); color: var(--hi-ink-2);
}
.hr-scarcity-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.hr-gaps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 18px; }
.hr-gaplist { margin: 8px 0 0; padding-left: 22px; }
.hr-gaplist li { font-size: var(--t-small); line-height: 1.6; }
.hr-gaplist span { font-family: var(--hi-mono); font-size: var(--t-mono); color: var(--hi-muted); }
.hr-headbits { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---------------- draft day ---------------- */
.hr-draft {
  border: 1px solid var(--hi-blue-line); border-radius: var(--rad-sm);
  background: var(--hi-blue-soft); padding: 14px 16px; margin-bottom: 16px;
  display: grid; gap: 16px;
}
.hr-draftbar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: var(--hi-surface-1); border: 1px solid var(--border);
  border-radius: var(--rad-sm); padding: 10px 14px;
}
.hr-dcount { display: flex; align-items: baseline; gap: 8px; flex: 1 1 260px; }
.hr-dcount b { font-family: var(--hi-mono); font-size: 1.3rem; font-weight: 700; color: var(--hi-ink); }
.hr-take { display: inline-flex; align-items: center; gap: 6px; }
.hr-take input { width: 18px; height: 18px; accent-color: var(--hi-blue); }
.hr-minebtn, .hr-pin, .hr-tagbtn {
  appearance: none; border: 1px solid var(--border); border-radius: var(--rad-pill);
  background: var(--hi-surface-0); color: var(--hi-muted); cursor: pointer;
  font-family: var(--hi-mono); font-size: .54rem; font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase;
  padding: 3px 7px; min-height: 24px;
}
.hr-minebtn.is-on, .hr-pin.is-on { border-color: var(--hi-blue); color: var(--hi-blue); background: var(--hi-blue-soft); }
.hr-tagbtn.is-target { border-color: var(--hi-mint); color: var(--hi-mint); background: var(--hi-mint-soft); }
.hr-tagbtn.is-avoid { border-color: var(--hi-coral); color: var(--hi-coral); background: var(--hi-coral-soft); }
.hr-shelfrail h3, .hr-myteam h3 { margin-bottom: 8px; }
.hr-avail { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.hr-availcol {
  border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--hi-surface-1); padding: 10px 12px;
}
.hr-availcol h4 {
  margin: 0 0 6px; font-family: var(--hi-mono); font-size: var(--t-mono);
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--hi-blue);
}
.hr-availrow {
  appearance: none; display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-top: 1px solid var(--hair); background: none; padding: 7px 0; min-height: 44px;
}
.hr-availrow:first-of-type { border-top: 0; }
.hr-availrow b { display: block; font-size: var(--t-small); font-weight: 700; color: var(--hi-ink); }
.hr-availrow span { font-family: var(--hi-mono); font-size: var(--t-mono); color: var(--hi-muted); }
.hr-availrow:hover b { color: var(--hi-blue); }
.hr-tray { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.hr-slot {
  border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--hi-surface-1); padding: 8px 10px; min-height: 62px;
}
.hr-slot.is-filled { border-color: var(--hi-blue-line); }
.hr-slot-p {
  display: block; font-family: var(--hi-mono); font-size: var(--t-mono); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--hi-blue); margin-bottom: 3px;
}
.hr-slot b { display: block; font-size: var(--t-small); font-weight: 700; }
.hr-slot-empty { color: var(--hi-muted); font-weight: 600; }
.hr-slot-v { font-family: var(--hi-mono); font-size: var(--t-mono); color: var(--hi-muted); }

/* ---------------- page footer ---------------- */
.hr-foot { border-top: 1px solid var(--hair); padding-top: 16px; margin-top: var(--sec); max-width: 92ch; }
.hr-foot p { margin: 0 0 8px; font-size: var(--t-small); line-height: 1.6; color: var(--hi-ink-2); }
.hr-foot .is-mono { font-family: var(--hi-mono); font-size: var(--t-mono); color: var(--hi-muted); }

/* ---------------- the phone bar and the sheets ---------------- */
/* The site sets overflow-x: hidden below 760, which makes body a scroll
   container and quietly breaks position: sticky for anything inside it. So the
   phone bar is FIXED and docked by script once the header has scrolled away,
   rather than sticky and silently useless. */
.hr-mobbar {
  visibility: hidden;
  position: fixed; top: 0; left: 0; right: 0; z-index: 45;
  display: flex; gap: 8px; align-items: center;
  padding: 5px 10px; min-height: 48px; background: var(--hi-surface-1);
  border-bottom: 1px solid var(--border);
  transform: translateY(-102%);
  transition: transform var(--mo-base, .2s) var(--mo-ease, ease);
  box-shadow: var(--hi-shadow);
}
.hr-mobbar.is-docked { transform: none; visibility: visible; }
.hr-mobbar-txt { flex: 1; min-width: 0; }
.hr-mobbar-txt b {
  display: block; font-size: var(--t-small); font-weight: 700; color: var(--hi-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hr-mobbar-txt span {
  display: block; font-family: var(--hi-mono); font-size: var(--t-mono); color: var(--hi-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hr-mobbtn {
  appearance: none; cursor: pointer; min-height: 38px; min-width: 44px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--hi-surface-0); color: var(--hi-ink);
  font-family: var(--hi-mono); font-size: var(--t-mono); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase;
}

.hr-sheet { position: fixed; inset: 0; z-index: 85; }
.hr-sheet-scrim { position: absolute; inset: 0; background: rgba(6,15,30,.5); }
.hr-sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0; top: 8%;
  background: var(--hi-surface-0); border-top-left-radius: var(--rad);
  border-top-right-radius: var(--rad); display: flex; flex-direction: column;
  box-shadow: var(--hi-lift);
}
/* on a desk the settings panel is a right-hand side sheet, the same shape the
   player drawer takes, so the page never has two idioms for one gesture */
.hr-sheet-side .hr-sheet-panel {
  left: auto; top: 0; width: min(720px, 100%);
  border-radius: 0; border-left: 1px solid var(--border);
}
.hr-sheet-head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--hi-surface-2);
}
.hr-sheet-head b {
  flex: 1; font-family: var(--hi-mono); font-size: var(--t-mono); font-weight: 700;
  letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase; color: var(--hi-muted);
}
.hr-sheet-body { flex: 1; overflow: auto; padding: 16px; }
.hr-sheet-body .hr-sec { margin-bottom: 26px; }
.hr-sheet-body .hr-sec:last-child { margin-bottom: 0; }
.hr-back {
  appearance: none; cursor: pointer; min-height: 40px; min-width: 66px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--hi-surface-1); color: var(--hi-ink);
  font-family: var(--hi-sans); font-size: var(--t-small); font-weight: 700;
  display: none;
}
body.hr-locked { overflow: hidden; }

/* ---------------- narrow desks ---------------- */
@media (max-width: 1100px) {
  .hr-bar select { min-width: 108px; }
  .hr-bar input[type="date"] { width: 118px; }
  .hr-bar input[type="search"] { width: 118px; }
}

/* ---------------- phones ---------------- */
@media (max-width: 760px) {
  .hr-scope { --pad: 14px; padding-bottom: 64px; overflow-x: hidden; }
  .hr-main { overflow-x: hidden; }
  .hr-bar, .hr-colswrap { display: none; }
  .hr-sheet .hr-back { display: block; }
  .hr-drawer .hr-back { display: block; order: -1; }
  .hr-sheet-side .hr-sheet-panel { left: 0; top: 8%; width: auto; border-left: 0; border-top-left-radius: var(--rad); border-top-right-radius: var(--rad); }
  .hr-sheet-head .hr-x { display: none; }

  /* the hub rail is 19 pills; wrapped it costs 400px of the first screen, so on
     this page it becomes one scrolling line and the board stays in view */

  .hr-scope .rdesk { margin: 8px 0 8px; }

  .hr-title { font-size: 1.6rem; }
  /* the first sentence stays: on a phone it is the only thing that says what
     this page is. The how-to sentence goes, the chips do that job. */
  .hr-dek-2 { display: none; }
  .hr-start { margin-top: 7px; gap: 6px; }
  .hr-start-lbl { display: none; }
  .hr-start-chip { padding: 4px 10px; }
  .hr-hero { margin-bottom: 10px; }
  .hr-hero-row { margin-bottom: 4px; }

  .hr-par-row { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .hr-par-row.is-head { display: none; }
  .hr-tier ol { columns: 1; }
  .hr-gaps { grid-template-columns: 1fr; }
  .hr-boardsbar { padding: 12px; }
  .hr-boardsbar .hr-act { flex: 1 1 46%; }
  .hr-storage { align-items: stretch; flex-direction: column; }
  .hr-storage > p { flex-basis: auto; }
  .hr-storage-actions { justify-content: flex-start; }
  .hr-storage .hr-act { flex: 1 1 46%; min-height: 44px; }
  .hr-figbox { padding: 10px; }
  .hr-sec-head { align-items: flex-start; }
  .hr-sheet-body .hr-filters { border: 0; padding: 0; background: none; }
  .hr-sheet-body .hr-bgroup, .hr-sheet-body .hr-seg { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  .hr-sheet-body .hr-seg { border: 0; }
  .hr-sheet-body .hr-seg .hr-tg { border: 1px solid var(--border); border-radius: var(--rad-pill); }
  .hr-sheet-body input[type="date"] {
    height: 44px; border: 1px solid var(--border); border-radius: var(--rad-sm);
    background: var(--hi-surface-0); color: var(--hi-ink);
    font-family: var(--hi-mono); font-size: .8rem; font-weight: 700; padding: 0 10px;
  }
  .hr-sheet-body .hr-bbtn { height: 44px; }
  .hr-sheet-body .hr-bsearch {
    height: 44px; width: 100%; border: 1px solid var(--border); border-radius: var(--rad-sm);
    background: var(--hi-surface-0); color: var(--hi-ink);
    font-family: var(--hi-sans); font-size: var(--t-small); padding: 0 10px;
  }
  .hr-sheet-body .hr-poschips { width: 100%; }

  /* the board becomes cards */
  .hr-thead { display: none; }
  .hr-scroll { max-height: none; overflow: visible; }
  .hr-tablewrap { overflow: visible; }
  .hr-spacer { height: auto !important; width: auto; }
  .hr-rows { position: static; }
  .hr-row {
    display: flex; flex-wrap: wrap; align-items: center; height: auto; width: auto;
    gap: 5px 10px; padding: 11px 12px;
    border-bottom: 1px solid var(--hair); min-width: 0;
  }
  .hr-c { padding: 0; text-align: left; overflow: visible; min-width: 0; position: static; }
  .hr-c[data-m="hide"] { display: none; }
  .hr-c[data-m="keep"] { order: 0; }
  .hr-c[data-m="wrap"] { order: 1; }
  .hr-row .hr-c-name { flex: 1; }
  .hr-c.is-l { flex: 1 1 100%; }
  .hr-c[data-m="wrap"]::before {
    content: attr(data-lbl) " "; color: var(--hi-muted);
    font-size: .58rem; letter-spacing: var(--hi-lbl-track-mono); text-transform: uppercase;
  }
  .hr-c[data-m="wrap"] { display: inline-flex; align-items: baseline; gap: 4px; }
  .hr-trend, .hr-bins { justify-content: flex-start; }
  /* the head is gone on a phone, so a cell with nothing in it says nothing:
     the reader asks for game rows from the Game rows control instead */
  .hr-c[data-m="wrap"]:empty { display: none; }
  .hr-f-logs .hr-tg { min-height: 44px; }
  .hr-tierrule { width: auto; height: auto; padding: 10px 12px; }

  /* the drawer becomes a full-screen sheet with a back button */
  .hr-drawer-panel { width: 100%; border-left: 0; }
  .hr-drawer-scrim { display: none; }
  .hr-drawer-head { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .hr-drawer-id { flex: 1 1 100%; }
  .hr-drawer .hr-x { display: none; }
  .hr-drawer-body { padding: 14px; }
  .hr-cmp { padding: 10px 14px; }
  .hr-cmp-row { grid-template-columns: 1.2fr 1fr 1fr; font-size: .66rem; }

  /* best available becomes a rail */
  .hr-avail {
    display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .hr-availcol { flex: 0 0 78%; scroll-snap-align: start; }
  .hr-tray { grid-template-columns: repeat(auto-fill, minmax(46%, 1fr)); }
  .hr-smalls { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .hr-scope *, .hr-drawer *, .hr-sheet * { transition: none !important; animation: none !important; }
}