/* Shared theme for standalone studios (bracket/oscars/hof) that bypass
   _layouts/default.html and ship their own <head>. Load this AFTER
   /assets/css/chart-tokens.css and before any studio-specific <style>
   override block.

   Verbatim from bracket/studio/index.html's inline <style>, plus two
   brand-constant additions (--orange; --amber was retired 2026-11-03) that were previously
   undefined here even though a few components already referenced
   var(--orange) -- see the comment below. Existing bracket component code
   still uses hardcoded #FF7704/#FF7704 hex; that stays as-is (a mass
   find-replace would be a thousand-line diff for zero visible change). New
   kit and studio code should use the tokens.
*/

:root {
  /* --bg/--card/--text/--muted/--border realigned to assets/css/main.css's
     site palette (2026-08-14) -- was --bg-page/--bg-card/--text-primary/
     --text-secondary with different values, plus --border under the same
     name but a different value. Studio-only tiers with no main.css
     counterpart (--bg-sidebar, --bg-ghost, --border-strong, --text-muted,
     --text-faint, --text-ghost, --accent-*) are untouched. */
  --bg:#01172B; --bg-sidebar:#0A1E35; --card:#0A2444; --bg-ghost:#1A3050;
  --border:#0F2E55; --border-strong:#2A4A7A;
  --text:#F0F4F8; --muted:#7C99B7; --text-muted:#7C8AA6;
  --text-faint:#7A8CA3; --text-disabled:#1A3050; --text-ghost:var(--text-disabled); /* ghost = deprecated alias; for DISABLED controls only, never copy (1.2:1) */
  --accent-green:var(--ok); --accent-red:var(--danger);
  /* Brand constants -- same values as assets/css/main.css. Previously
     undefined in the studio, so cards.jsx's drag-insert indicator and
     StudioApp.jsx's seed-line accents (both var(--orange)) rendered as
     zero-width invisible bars. Defining it here makes them appear -- that
     is the fix, not a regression, if you're diffing before/after. */
  --orange: #FF7704;
  /* Surface treatment (2026-08-29). Cards used to be flat --card on a near-black
     --bg, which is most of why the studio read as a terminal rather than a
     composed surface: no depth cue anywhere, and every divider the same hard
     hairline. --card-top/--card-bottom give cards a low-contrast top-lit
     gradient; --border-soft is for INTERNAL dividers (card sections, table
     rows), leaving --border for outlines. */
  --card-top:#0C2A4F; --card-bottom:#08203D;
  --border-soft:#0B2445;
  /* Flattened 2026-09-09. These stay as tokens so the ~40 JSX call sites that
     read var(--surface-card)/var(--card-shadow) need no edit -- the values
     changed, not the contract. The depth cue the gradient was added for is now
     carried by --shadow-1, the same shadow the rest of the site uses, instead of
     a top-lit gradient plus an inset white highlight that nothing else has. */
  --card-shadow: var(--shadow-1);
  --surface-card: var(--card);
}
:root.light {
  --orange-text: var(--orange-text-on-light); /* 4.9 to 6.9:1 on the light surfaces (the logo orange is 2.1 to 2.7) */
  --bg:#F5F7FA; --bg-sidebar:#E2E6EC; --card:#FFFFFF; --bg-ghost:#CBD1DB;
  --border:#C5CDD8; --border-strong:#8FA4BC;
  --text:#0D2240; --muted:#1E3A60; --text-muted:#4A6285;
  --text-faint:#556075; --text-disabled:#A8B5C2; --text-ghost:var(--text-disabled);
  --accent-green:#16A34A; --accent-red:#DC2626;
  --orange: #FF7704;
  --caution:var(--caution-on-light);
  --card-top:#FFFFFF; --card-bottom:#F2F5F9;
  --border-soft:#DCE2EA;
  --card-shadow: 0 2px 8px rgba(13,34,64,0.10);
  --surface-card: var(--card);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* The base face, so a dialog or sheet that sets no font of its own (Bracket's "Which season?") never
   falls back to the browser's serif. */
body { background: var(--bg); overflow: hidden; font-family: 'Space Grotesk', sans-serif; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-sm); }
input:focus { border-color: var(--orange) !important; }

@media (max-width: 980px) {
  /* Bracket Studio's first-visit notice must clear its persistent app bar. */
  #bs-cookie-notice { bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }
}

/* Bracket Studio pool rows: flat, hairline-separated, tinted on hover (cards.jsx TeamCard). */
.bs-row:hover { background: var(--surface-card) !important; }

/* Shortcut tooltips */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--card); border: 1px solid rgba(255,119,4,0.4);
  color: var(--muted); font-size: 11px; font-family: 'IBM Plex Mono', monospace;
  white-space: nowrap; padding: 3px 7px; border-radius: var(--r-sm);
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
  z-index: 200;
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; }

/* A standalone icon or text control in a studio overlay (Close, Skip): a 44px target around a compact glyph,
   per CHART_STYLE.md. The negative margin hands the extra back to the row so the glyph stays where it was;
   a caller whose row needs a different give-back, or that positions the control absolutely, sets its own margin.
   position: relative keeps the part that overlaps the next block clickable. */
.trr-hit {
  display: inline-grid; place-items: center; flex-shrink: 0;
  position: relative; min-width: 44px; min-height: 44px; margin: -14px; padding: 0; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--text-muted); font-family: inherit; line-height: 1; cursor: pointer;
}
.trr-hit:focus-visible { outline: 2px solid var(--orange); outline-offset: -4px; }

/* ── Studio Home ──────────────────────────────────────── */
#studio-home {
  /* height, not min-height -- body is `overflow: hidden` (this screen's own
     overflow-y is meant to be the page's only scroller), so a min-height box
     just grows past the viewport with its excess clipped and unreachable
     instead of scrolling internally. Bites on mobile once saved-slot cards
     push the "+ New" button below the fold: no scroll, no click. */
  height: 100vh; height: 100dvh; background: var(--bg); color: var(--text);
  font-family: 'Space Grotesk',sans-serif;
  display: flex; flex-direction: column; overflow-y: auto;
}
.sh-header {
  /* Full-bleed bar, --max-wide contents: same trick as the site nav, but keyed to
     this screen's own 24px gutter rather than --pad, so nothing moves below
     1252px. tokens.css's --bleed-pad comment explains the arithmetic. */
  padding: 12px max(24px, calc((100% - var(--max)) / 2)); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0;
}
.sh-logo-area { display: flex; align-items: center; gap: 14px; }
.sh-wordmark {
  margin: 0;
  font-family: var(--fb);
  font-size: 18px; font-weight: 600; color: var(--text);
}
.sh-sport-tabs {
  display: flex; gap: 2px; padding: 16px 24px 0;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.sh-sport-tab {
  padding: 8px 16px 10px; border: none; background: none; color: var(--text-muted);
  font-size: 13px; font-weight: 600; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-family: var(--fb); }
.sh-sport-tab:hover:not(:disabled) { color: var(--text); }
.sh-sport-tab--active { color: var(--text); border-bottom-color: #FF7704; }
.sh-sport-tab--soon { opacity: 0.4; cursor: default; }
.sh-soon-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--text-faint); background: var(--bg-ghost); border-radius: var(--r-sm);
  padding: 1px 4px; margin-left: 5px; vertical-align: middle; font-family: monospace;
}
.sh-stale-note {
  margin: 10px max(24px, calc((100% - var(--max)) / 2)) 0; padding: 8px 12px; border-radius: var(--r-sm);
  background: rgba(255,119,4,0.08); border: 1px solid rgba(255,119,4,0.22);
  color: var(--text-muted); font-size: 12px; line-height: 1.5;
}
.sh-note-link {
  background: none; border: 0; padding: 0; font: inherit; color: var(--orange-text); text-decoration: underline; cursor: pointer;
}
.sh-main {
  /* Was a hard 1200px, which stopped growing where the rest of the site now keeps
     going. Riding --max keeps the studio home's saved-slot grid on the same spine
     as the marketing pages it is reached from. */
  flex: 1; padding: 28px 24px; max-width: var(--max); width: 100%; margin: 0 auto;
}

/* A bracket's seed lines as a 16-column thumbnail: one cell per seat, filled when a team sits there (Bracket Home's "Your field"). */
.sh-fp { display: flex; align-items: flex-end; gap: calc(var(--s-1) / 2); height: 38px; }
.sh-fp-col { display: flex; flex-direction: column; justify-content: flex-end; gap: calc(var(--s-1) / 4); }
.sh-fp-col i { display: block; width: 7px; height: 3.5px; border-radius: calc(var(--r-sm) / 4); background: var(--muted); }
.sh-fp-col i.is-empty { background: var(--border); }

/* Team logos on the dark theme: a one-pixel light halo so navy-on-navy marks (Notre Dame,
   West Virginia, Penn State...) keep an edge. Every team logo is served from /logos/, so the
   attribute selector reaches each one without a class on every <img>; the site logo isn't
   there. Off in the light theme, where dark marks already read. */
:root { --logo-halo: drop-shadow(0 0 0.6px rgba(240, 244, 248, 0.9)) drop-shadow(0 0 1.4px rgba(240, 244, 248, 0.35)); }
:root.light { --logo-halo: none; }
img[src*="/logos/"] { filter: var(--logo-halo); }
:root { --sh-diff: var(--projection); }
:root.light { --sh-diff: #2F6DB0; }
.sh-hero-continue { margin-bottom: 0; padding: 12px 22px; }

/* Team colour (STUDIO_STYLE rule 1a). tcVars() in ui.jsx sets --tc-d/--tc-l, the team's accent already
   cleared to 3:1 on each theme's card (scripts/build_team_colors.py); .tc picks the one for this theme.
   Only ever a stripe or a band: never text, an outline or a button. (A tinted disc behind each logo was
   tried 2026-10-31 and read as muddy grey on the navy card.) */
.tc { --tc: var(--tc-d, transparent); }
:root.light .tc { --tc: var(--tc-l, transparent); }

/* Matches .btn-primary in main.css: flat amber, no gradient, no coloured glow.
   Was a 135deg gradient fill under an 18px amber shadow -- the one treatment the
   site's "Soft Amber system" was explicitly built to avoid. */
.sh-btn-primary {
  background: var(--orange); border: none; border-radius: var(--r-md);
  color: #01172B; font-size: var(--t-ui); font-weight: 600; padding: 14px var(--s-5); cursor: pointer;
  font-family: var(--fb); transition: filter 0.15s; margin-bottom: 16px;
}
.sh-btn-primary:hover { filter: var(--hover-lift); }
.sh-sign-btn {
  background: var(--bg-sidebar); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); color: var(--muted); font-size: 12px; font-weight: 600;
  padding: 6px 14px; min-height: 32px; cursor: pointer; transition: border-color 0.15s, color 0.15s;
  font-family: 'Space Grotesk', sans-serif; white-space: nowrap;
}
.sh-sign-btn:hover { border-color: #FF7704; color: #FF7704; }
/* Text for screen readers only (the editor's h1 and board heading). */
.sh-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Home button inside the editor header */
.sh-home-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--bg-sidebar); border: 1px solid var(--border);
  border-radius: var(--r-md); cursor: pointer; color: var(--text-muted);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.sh-home-btn:hover { border-color: var(--border-strong); color: var(--muted); background: var(--card); }
/* Dataset/Version pill in the editor header */
.sh-ds-pill {
  display: flex; align-items: stretch; background: var(--bg-sidebar);
  border: 1px solid var(--border-strong); border-radius: var(--r-md); min-width: 0;
}
/* Each segment may shrink, so a long value ellipsises inside the pill instead of the pill's
   chevron sliding under the next header button (Bracket at 390px, 2026-10-11). */
.sh-ds-pill > div { display: flex; min-width: 0; }
.sh-ds-seg {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 6px 12px; min-width: 0; border: none; background: transparent;
  font: inherit; text-align: left; cursor: pointer; transition: background 0.15s;
}
.sh-ds-pill > div:first-child .sh-ds-seg { border-top-left-radius: 7px; border-bottom-left-radius: 7px; }
.sh-ds-pill > div:last-child .sh-ds-seg { border-top-right-radius: 7px; border-bottom-right-radius: 7px; }
.sh-ds-pill > div:not(:last-child) { border-right: 1px solid var(--border-strong); }
.sh-ds-seg:hover { background: rgba(255,255,255,0.05); }
:root.light .sh-ds-seg:hover { background: rgba(0,0,0,0.04); }
.sh-ds-seg-static:hover { background: transparent; }
.sh-ds-label {
  font-family: var(--fb); font-size: 11px; font-weight: 600;
  color: var(--text-faint); }
.sh-ds-value {
  display: flex; align-items: center; gap: 5px;
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0; color: var(--text); min-width: 0;
}
.sh-ds-value-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-ds-chevron { flex-shrink: 0; opacity: 0.65; transition: transform 0.15s; }
/* Bracket Studio's name-only chips (2026-10-20, Grant's pick from the history mock): no DATASET / BRACKET
   labels, one rounded chip per control. Oscars and HoF keep the labelled pill above. */
.sh-ds-pill--chips { background: none; border: none; gap: 6px; }
.sh-ds-pill--chips > div:not(:last-child) { border-right: none; }
.sh-ds-pill--chips .sh-ds-seg {
  flex-direction: row; align-items: center; height: 32px; padding: 0 12px;
  background: var(--bg-sidebar); border: 1px solid var(--border-strong); border-radius: 16px !important;
}
.sh-ds-pill--chips .sh-ds-seg[aria-expanded="true"] { background: var(--bg-ghost); }
@media (max-width: 600px) {
  .sh-header { padding: 10px 14px; }
  .sh-sport-tabs { padding: 12px 14px 0; }
  .sh-sport-tab { padding: 6px 10px 8px; font-size: 12px; }
  .sh-main { padding: 20px 14px; }
  
  
  
  
  
  
  
  
}

/* None of the three Studios load main.css (own <head>, see root CLAUDE.md), so its
   sitewide reduced-motion override never reaches them without a copy here too. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* __CACHEBUST_20260820b -- see SESSION_LOG.md; a second jekyll-serve deploy race today poisoned this file's immutable hash again, this content-only edit forces a fresh URL */

/* Bracket case card trigger (cards.jsx TeamCard): the "i" button that pins a team's resume. A mouse gets it on
   hover or focus, a touch screen always (there is no hover); every card reserves its room so the record is never covered. */
.bs-info { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; padding: 0;
  display: none; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--surface-card); color: var(--muted); font: italic 700 11px/1 Georgia, serif; cursor: pointer; }
.bs-info:hover, .bs-info:focus-visible { color: var(--text); border-color: var(--muted); }
.bs-case-wrap > [data-card] { padding-right: 28px !important; }
@media (hover: hover) {
  .bs-case-wrap:hover > .bs-info, .bs-case-wrap:focus-within > .bs-info { display: flex; }
}
@media (hover: none) { .bs-info { display: flex; } }

/* Bracket narrowing strip (narrowing.jsx): the field's three bands above the seed lines. Flat rows on a hairline
   (STUDIO_STYLE rule 4), neutral bars; the muted fill and the filled ticks are the placed progress. */
.bs-narrow { list-style: none; margin: 0 0 10px; padding: 0; }
.bs-narrow-band { display: flex; align-items: center; gap: 10px; padding: 5px 2px; border-bottom: 1px solid var(--border-soft); min-width: 0; }
.bs-narrow-track { flex: 0 0 38%; max-width: 260px; min-width: 70px; display: block; }
.bs-narrow-track > span { display: block; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.bs-narrow-track > span > span { display: block; height: 100%; background: var(--muted); }
.bs-narrow-ticks { display: grid !important; grid-template-columns: repeat(16, 1fr); gap: 2px; background: none !important; }
.bs-narrow-ticks > span { height: 6px; border-radius: 1px; background: var(--border); }
.bs-narrow-ticks > span[data-full="1"] { background: var(--muted); }
.bs-narrow-text { font-size: 11.5px; color: var(--text-muted); min-width: 0; line-height: 1.35; }
.bs-narrow-text b { color: var(--text); font-weight: 600; margin-right: 6px; }
@media (max-width: 600px) { .bs-narrow-band { flex-wrap: wrap; gap: 4px 10px; } .bs-narrow-track { flex-basis: calc(100% - 50px); max-width: none; } .bs-narrow-text { flex: 1 0 100%; } }

/* Opening shell (assets/js/studio-opening.js): same look as the studios' LoadingScreen
   (centered Antonio title, faint Space Grotesk line) so the hand-off to React is invisible.
   Flat per STUDIO_STYLE.md rule 4: hairline rows, no fills, orange only on the one reload button. */
.studio-opening[hidden] { display: none; }
.studio-opening {
  min-height: 100vh; box-sizing: border-box; padding: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg); color: var(--text); text-align: center;
  font-family: 'Space Grotesk', sans-serif;
}
.studio-opening h1 { margin: 0; font: 700 var(--t-h2)/1.2 Antonio, sans-serif; letter-spacing: -0.03em; }
.studio-opening p { margin: 8px 0 0; font-size: var(--t-meta); color: var(--text-faint); }
.studio-opening button {
  margin-top: 16px; padding: 8px 20px; border: 0; border-radius: var(--r-md); cursor: pointer;
  background: var(--orange); color: var(--on-accent); font: inherit; font-size: var(--t-meta);
}
.studio-opening button[hidden], .studio-opening p[hidden] { display: none; }

/* ── Home and evidence grammar (.sk-*), 2026-11-11 ─────────────────────────────────────────────
   The shared pieces of the redesigned Studio Homes and editors: season rule, identity block, lineup of seats,
   ruled rows, the you-and-the-model chart, version rows, the evidence panel. Components: studio-kit/src/
   homeParts.jsx and inspector.jsx. Prototype and rationale: design-research/fable-studios/README.md.

   ADDITIVE: nothing renders these classes until a Studio opts in (Phases 2 to 4 of the implementation map); the
   .sh-* rules above stay until the last Studio has moved over, then go.
   Tokens only, so the light theme follows. Orange is never used here (STUDIO_STYLE.md rule 1): the one filled
   orange action is the Studio's own .sh-btn-primary. Blue (--sh-diff) always means the model; text colour means you.
   Display numerals are calc() on --t-display, so no new font-size literal enters the ratchet. */

:root { --sk-on-pic: rgb(240 244 248); --sk-pic-shade: rgb(1 23 43 / 0.92); }

.sk-label { font-size: var(--t-meta); font-weight: 500; color: var(--text-faint); }
.sk-num { font-family: var(--fm); font-variant-numeric: tabular-nums; }
.sk-mark { font-family: var(--fm); font-size: var(--t-micro); color: var(--sh-diff); white-space: nowrap; }
.sk-seat .sk-mark { display: block; margin-top: var(--s-1); white-space: normal; overflow-wrap: anywhere; }
.sk-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: var(--t-ui); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
.sk-link:hover { color: var(--text); }
.sk-quiet { background: none; border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: var(--s-2) var(--s-4); font: inherit; font-size: var(--t-ui); font-weight: 500; color: var(--text); cursor: pointer; white-space: nowrap; }
.sk-quiet:hover { border-color: var(--muted); }
.sk-quiet[disabled] { color: var(--text-faint); cursor: default; border-color: var(--border); }
.sk-h { font-size: var(--t-ui); font-weight: 600; margin: 0; color: var(--text); }

/* Season rule: the phases or announcement windows as one ruled timeline, the current one marked, and a count. */
.sk-rule { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding-top: var(--s-5); }
.sk-rule-list { display: contents; list-style: none; margin: 0; padding: 0; }
.sk-rule-step { list-style: none; border-top: 1px solid var(--border-strong); padding: calc(var(--s-2) + 2px) var(--s-4) 0 0; position: relative; min-width: 0; }
.sk-rule-step::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: var(--r-circle); background: var(--bg); border: 1px solid var(--text-faint); }
.sk-rule-step.is-done::before { background: var(--text-faint); }
.sk-rule-step.is-next { border-top-color: var(--orange); }
.sk-rule-step.is-next::before { background: var(--orange); border-color: var(--orange); }
.sk-arrow { font-family: var(--fm); margin-left: var(--s-2); display: inline-block; transition: transform 0.18s ease; }
.sh-btn-primary:hover .sk-arrow { transform: translateX(3px); }
.sk-rule-step b { display: block; font-size: var(--t-ui); font-weight: 600; color: var(--text); }
.sk-rule-step span { font-size: var(--t-meta); color: var(--text-faint); }
.sk-rule-count { text-align: right; padding: var(--s-1) 0 0 var(--s-5); border-top: 1px solid var(--border-strong); white-space: nowrap; }
.sk-rule-count .sk-rule-n { font-family: var(--fd); font-weight: 700; font-size: calc(var(--t-display) * 1.3); line-height: 1; color: var(--text); }
.sk-rule-count span { display: block; font-size: var(--t-meta); color: var(--text-faint); }
.sk-rule-note { font-size: var(--t-meta); color: var(--text-faint); margin: calc(var(--s-2) + 2px) 0 0; max-width: 80ch; }

/* Hero: identity and the one action on the left, the lineup (your current work) on the right. */
.sk-hero { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: var(--s-6) calc(var(--s-6) + var(--s-3)); padding-top: var(--s-7); align-items: start; }
.sk-id { min-width: 0; }
.sk-title { margin: 0; font-family: var(--fd); font-weight: 700; font-size: calc(var(--t-display) * 1.9); line-height: 0.95; color: var(--text); white-space: nowrap; }
.sk-vname { font-size: var(--t-lede); font-weight: 500; margin-top: var(--s-3); color: var(--text); overflow-wrap: anywhere; }
.sk-meta { font-size: var(--t-ui); color: var(--muted); margin-top: var(--s-1); }
.sk-lede { font-size: var(--t-read); color: var(--muted); margin: var(--s-3) 0 0; max-width: 30ch; }
.sk-actions { display: flex; align-items: center; gap: var(--s-4) var(--s-4); margin-top: var(--s-5); flex-wrap: wrap; }
.sk-fine { font-size: var(--t-meta); color: var(--text-faint); margin-top: calc(var(--s-2) + 2px); }
.sk-side { margin-top: var(--s-6); padding-top: calc(var(--s-4) + 2px); border-top: 1px solid var(--border); }
.sk-sent { font-size: var(--t-ui); color: var(--muted); margin: var(--s-1) 0 var(--s-3); }
.sk-sent b { color: var(--sh-diff); font-family: var(--fm); font-weight: 500; }
.sk-lineup-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: calc(var(--s-2) + 2px); gap: var(--s-3); }
.sk-lineup-h span { font-size: var(--t-meta); color: var(--text-faint); }

/* A picture with a designed fallback: monogram or a generated poster beneath, the image over it. is-duo puts
   photographs from different sources on one navy duotone; is-shade darkens the foot for a numeral laid on it. */
.sk-pic { display: block; position: relative; overflow: hidden; border-radius: var(--r-sm); background: linear-gradient(160deg, color-mix(in srgb, var(--navy) 80%, var(--sh-diff)), var(--card) 70%); }
.sk-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; z-index: 1; }
.sk-pic > img[data-failed] { display: none; }
.sk-pic.is-duo > img { filter: grayscale(1) contrast(1.08); mix-blend-mode: luminosity; opacity: 0.92; }
.sk-pic.is-shade::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, var(--sk-pic-shade) 0%, color-mix(in srgb, var(--sk-pic-shade) 27%, transparent) 38%, transparent 60%); }
.sk-pic-mono { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; font-family: var(--fd); font-weight: 700; font-size: calc(var(--t-display) * 2); color: transparent; -webkit-text-stroke: 1px var(--border-strong); }
.sk-pic-title { position: absolute; left: var(--s-2); right: var(--s-2); bottom: var(--s-2); z-index: 0; font-weight: 600; font-size: var(--t-ui); line-height: 1.15; color: var(--sk-on-pic); }
/* A team mark is a transparent PNG on a flat tile: no fallback shows through it until the image fails. */
.sk-pic.is-mark { background: var(--bg-sidebar); display: grid; place-items: center; }
.sk-pic.is-mark > img { position: static; width: 56%; height: auto; max-height: 60%; object-fit: contain; }
.sk-pic.is-mark > img:not([data-failed]) ~ .sk-pic-mono { display: none; }
.sk-pic.is-mark > img:not([data-failed]) ~ .sk-pic-title { display: none; }
.sk-stripe { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 3; }

/* Lineup and seats. A seat is one pick: a picture, a rank, an optional numeral, then name and facts beneath. */
.sk-lineup { --sk-tpl: repeat(5, minmax(0, 1fr)); --sk-cols: 5; display: grid; gap: calc(var(--s-2) + 2px); min-width: 0; align-items: start; grid-template-columns: var(--sk-tpl); }
.sk-lineup.is-grid { grid-template-columns: repeat(var(--sk-cols), minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
.sk-seat { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: stretch; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.sk-seat-pic { display: block; position: relative; }
.sk-seat-nm, .sk-seat-sub, .sk-seat-sig { display: block; }
.sk-seat-pic .sk-pic { height: 300px; }
.sk-lineup.is-grid .sk-seat-pic .sk-pic { height: auto; aspect-ratio: 2 / 3; }
.sk-lineup.is-team .sk-seat-pic .sk-pic { height: 220px; }
.sk-seat-no { position: absolute; right: var(--s-2); top: calc(var(--s-2) + 2px); z-index: 3; font-family: var(--fm); font-size: var(--t-micro); color: var(--sk-on-pic); }
.sk-seat-big { position: absolute; left: var(--s-3); bottom: calc(var(--s-2) + 2px); z-index: 3; font-family: var(--fd); font-weight: 700; font-size: calc(var(--t-display) * 1.2); line-height: 1; color: var(--sk-on-pic); }
.sk-seat-big small { font-family: var(--fb); font-size: var(--t-micro); font-weight: 500; margin-left: var(--s-1); opacity: 0.8; }
.sk-seat-nm { font-weight: 600; font-size: var(--t-strong); line-height: 1.2; margin-top: calc(var(--s-2) + 2px); color: var(--text); overflow-wrap: anywhere; }
.sk-seat-sub { font-size: var(--t-meta); color: var(--text-faint); margin-top: 2px; }
.sk-seat-sig { font-size: var(--t-meta); color: var(--muted); margin-top: var(--s-1); font-family: var(--fm); }
.sk-seat:hover .sk-seat-nm { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
.sk-seat.is-open { cursor: default; }
.sk-seat.is-open .sk-seat-pic { height: 300px; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); display: grid; place-items: center; text-align: center; font-size: var(--t-meta); color: var(--text-faint); padding: 0 var(--s-1); }
.sk-lineup.is-grid .sk-seat.is-open .sk-seat-pic { height: auto; aspect-ratio: 2 / 3; }
.sk-lineup.is-team .sk-seat.is-open .sk-seat-pic { height: 220px; }
.sk-lineup .sk-seat.is-open.is-slim .sk-seat-pic { height: 44px; aspect-ratio: auto; }

/* Ruled rows: everything that is not in the lineup, flat, one rule between rows. */
.sk-rest-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); margin: calc(var(--s-6) + var(--s-1)) 0 calc(var(--s-2) + 2px); }
.sk-rest-h h3 { flex: none; white-space: nowrap; }
.sk-rest-h span { font-size: var(--t-meta); color: var(--text-faint); text-align: right; }
.sk-stops.is-two { column-count: 2; column-gap: var(--s-6); }
.sk-stop { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--border); align-items: baseline; break-inside: avoid; }
.sk-stop.is-narrow { grid-template-columns: 56px minmax(0, 1fr); padding: calc(var(--s-2) + 1px) 0; }
.sk-stop.is-narrow .sk-stop-cut b { font-family: var(--fm); font-variant-numeric: tabular-nums; }
.sk-stops.is-widen .sk-stop:nth-child(1) { margin-right: 30%; }
.sk-stops.is-widen .sk-stop:nth-child(2) { margin-right: 20%; }
.sk-stops.is-widen .sk-stop:nth-child(3) { margin-right: 10%; }
.sk-stop-cut b { display: block; font-weight: 600; font-size: var(--t-ui); color: var(--text); }
.sk-stop-cut span { font-size: var(--t-micro); color: var(--text-faint); }
.sk-names { display: flex; flex-wrap: wrap; gap: var(--s-1) calc(var(--s-5) - 2px); }
.sk-name { font-size: var(--t-ui); color: var(--text); }
.sk-name em { font-style: normal; color: var(--text-faint); font-size: var(--t-micro); margin: 0 5px 0 var(--s-1); }
.sk-name.is-none { color: var(--text-faint); }
.sk-name img { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; margin-right: 6px; }

/* You and the model: one track per pick. Your cut is the filled dot, the model's the ringed one. */
.sk-chart-head, .sk-chart-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: calc(var(--s-2) + 2px); align-items: center; }
.sk-chart-head { font-size: var(--t-micro); color: var(--text-faint); padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.sk-chart-cols { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; text-align: center; }
.sk-chart-row { padding: 7px 0; border-bottom: 1px solid var(--border); font-size: var(--t-meta); color: var(--text); }
.sk-chart-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-track { position: relative; height: 12px; }
.sk-track::before { content: ""; position: absolute; left: 0; right: 0; top: 5.5px; height: 1px; background: var(--border); }
.sk-track .sk-bar { position: absolute; top: 5px; height: 2px; background: var(--border-strong); }
.sk-track .sk-dot { position: absolute; top: 2px; width: 8px; height: 8px; margin-left: -4px; border-radius: var(--r-circle); }
.sk-track .sk-dot.is-you { background: var(--text); }
.sk-track .sk-dot.is-model { background: var(--bg); border: 2px solid var(--sh-diff); }
.sk-track .sk-line { position: absolute; top: -2px; bottom: -2px; border-left: 1px dashed var(--muted); }
.sk-chart-key { display: flex; gap: var(--s-4); font-size: var(--t-micro); color: var(--text-faint); margin-top: calc(var(--s-2) + 2px); align-items: center; flex-wrap: wrap; }
.sk-chart-key i { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-circle); margin-right: 5px; vertical-align: -1px; }
.sk-chart-key .is-you { background: var(--text); }
.sk-chart-key .is-model { border: 2px solid var(--sh-diff); }

/* Saved versions as rows that carry the work's own faces. */
.sk-vers { margin-top: calc(var(--s-7) - var(--s-1)); }
.sk-vers-h { display: flex; align-items: center; justify-content: space-between; padding-bottom: calc(var(--s-2) + 2px); }
.sk-vgroup { font-size: var(--t-meta); font-weight: 600; color: var(--text-faint); padding: var(--s-4) 0 var(--s-1); }
.sk-vrow { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto auto 20px; gap: var(--s-5) var(--s-5); align-items: center; padding: var(--s-3) 0; border: 0; border-top: 1px solid var(--border); width: 100%; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.sk-vrow:hover { background: color-mix(in srgb, var(--muted) 8%, transparent); }
.sk-faces { display: flex; gap: calc(var(--s-1) * 0.75); }
.sk-faces .sk-pic { width: 30px; height: 40px; border-radius: var(--r-sm); flex: none; }
.sk-faces .sk-pic .sk-pic-mono { font-size: var(--t-meta); -webkit-text-stroke: 0; color: var(--text-faint); }
.sk-faces .sk-pic.is-mark > img { width: 100%; padding: var(--s-1); }
.sk-vname-cell { font-weight: 600; font-size: var(--t-body); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.sk-vname-cell small { font-weight: 500; font-size: var(--t-micro); color: var(--orange-text); margin-left: var(--s-2); }
.sk-vmeta { font-size: var(--t-meta); color: var(--muted); white-space: nowrap; }
.sk-vtime { font-size: var(--t-meta); color: var(--text-faint); width: 64px; text-align: right; }
.sk-chev { color: var(--text-faint); }

/* Bracket's field thumbnail in the hero side: one column per seed line, one cell per seat, bigger than a card's. */
.sk-side .sh-fp { height: 64px; gap: var(--s-1); margin-top: var(--s-2); }
.sk-side .sh-fp-col { flex: 1 1 0; max-width: 28px; gap: calc(var(--s-1) / 2); }
.sk-side .sh-fp-col i { width: 100%; height: 5px; }

/* The credit and scope line at the foot of a Home: photographers and licences, data sources, the disclaimer. */
.sk-credit { font-size: var(--t-micro); color: var(--text-faint); line-height: 1.5; margin: calc(var(--s-6) + var(--s-1)) 0 0; padding: var(--s-5) 0 var(--s-6); border-top: 1px solid var(--border); }
.sk-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Rank moves since your last visit (Bracket): the size of the move, who moved, and where you have them. */
.sk-moves { margin-top: var(--s-2); }
.sk-move { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-3); align-items: baseline; padding: calc(var(--s-2) + 1px) 0; border-top: 1px solid var(--border); }
.sk-move-big { font-family: var(--fm); font-size: var(--t-strong); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.sk-move-t { font-size: var(--t-ui); color: var(--text); } .sk-move-t small { display: block; font-size: var(--t-meta); color: var(--text-faint); margin-top: 2px; }

/* Process in numbers (first use): what the field narrows through. */
.sk-proc { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: calc(var(--s-6) + var(--s-1)); border-top: 1px solid var(--border); }
.sk-proc div { padding: var(--s-4) var(--s-4) 0 0; }
.sk-proc .sk-proc-n { font-family: var(--fd); font-weight: 700; font-size: calc(var(--t-display)); line-height: 1; color: var(--text); }
.sk-proc span { display: block; font-size: var(--t-meta); color: var(--text-faint); margin-top: var(--s-1); }

/* Evidence panel: one persistent pane beside the work on wide screens, a bottom sheet (a modal) below 1000px. */
.sk-insp { border-left: 1px solid var(--border); padding: var(--s-4); overflow-y: auto; overscroll-behavior: contain; min-height: 0; min-width: 0; color: var(--text); }
.sk-insp-empty { font-size: var(--t-ui); color: var(--text-faint); }
.sk-insp-empty p { margin: 0 0 var(--s-2); }
.sk-insp-head { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: calc(var(--s-3) + 2px); align-items: end; }
.sk-insp-head .sk-pic { height: 112px; }
.sk-insp-head .sk-pic .sk-pic-mono { font-size: calc(var(--t-display) * 0.95); }
.sk-insp h3 { margin: 0; font-family: var(--fd); font-weight: 700; font-size: calc(var(--t-h2) + 4px); line-height: 1.02; color: var(--text); overflow-wrap: anywhere; }
.sk-insp-sub { font-size: var(--t-meta); color: var(--muted); margin-top: var(--s-1); }
.sk-insp-acts { display: flex; gap: var(--s-2); margin: calc(var(--s-3) + 2px) 0 2px; flex-wrap: wrap; }
.sk-insp-sec { border-top: 1px solid var(--border); padding: var(--s-3) 0; margin-top: var(--s-3); }
.sk-insp-sec h4 { font-size: var(--t-meta); font-weight: 600; color: var(--text-faint); margin: 0 0 var(--s-2); }
.sk-insp-sec p { font-size: var(--t-meta); color: var(--muted); margin: 0 0 var(--s-2); }
.sk-measure { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-3); align-items: baseline; padding: 6px 0; }
.sk-measure b { font-size: var(--t-ui); font-weight: 600; color: var(--text); }
.sk-measure-v { font-family: var(--fm); font-size: var(--t-strong); color: var(--text); }
.sk-measure-v.is-big { font-family: var(--fd); font-weight: 700; font-size: calc(var(--t-display) * 0.9); line-height: 1; }
.sk-measure small { grid-column: 1 / -1; font-size: var(--t-micro); color: var(--text-faint); }
.sk-measure-bar { grid-column: 1 / -1; height: 3px; background: var(--border); margin-top: var(--s-1); }
.sk-measure-bar i { display: block; height: 100%; background: var(--muted); }
.sk-measure.is-model .sk-measure-v { color: var(--sh-diff); }
.sk-measure.is-model .sk-measure-bar i { background: var(--sh-diff); }
.sk-facts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--s-2) + 2px) var(--s-4); }
.sk-facts div span { display: block; font-size: var(--t-micro); color: var(--text-faint); }
.sk-facts div b { font-size: var(--t-ui); font-weight: 600; color: var(--text); }
/* The sheet: a layer that is the scrim and the dialog's ancestor (useModalDialog makes everything OUTSIDE the dialog
   inert, so a sibling scrim could never take the click that dismisses it). The component picks sheet or pane by
   viewport (default below 1000px), not this stylesheet. */
.sk-insp-layer { position: fixed; inset: 0; z-index: var(--z-modal); background: rgb(0 0 0 / 0.5); }
.sk-insp.is-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 72dvh; background: var(--bg-sidebar); border: 0; border-top: 1px solid var(--border-strong); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-2); padding-bottom: max(var(--s-4), env(safe-area-inset-bottom)); }
.sk-insp-x { display: none; }
.sk-insp.is-sheet .sk-insp-x { display: block; position: absolute; right: var(--s-3); top: var(--s-3); min-width: 44px; min-height: 44px; margin: calc(var(--s-3) * -1); border: 0; background: none; color: var(--muted); font-size: var(--t-lede); cursor: pointer; }
.sk-insp.is-sheet .sk-insp-head { padding-right: var(--s-6); }

/* Keyboard focus on every interactive piece: the Studio's orange ring (orange is "active", and focus is where you are). */
.sk-seat:focus-visible, .sk-vrow:focus-visible, .sk-quiet:focus-visible, .sk-link:focus-visible, .sk-insp-x:focus-visible, .sk-insp:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.sk-vrow:focus-visible { outline-offset: -2px; }

@media (max-width: 1200px) {
  .sk-hero { grid-template-columns: minmax(0, 1fr); }
  .sk-hero .sk-id-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .sk-side { margin-top: 0; padding-top: 0; border-top: 0; }
}
@media (max-width: 700px) {
  .sk-title { font-size: calc(var(--t-display) * 1.3); }
  .sk-rule { grid-auto-flow: row; grid-template-columns: 1fr auto; padding-top: var(--s-4); }
  .sk-rule-step:not(.is-next) { display: none; }
  .sk-hero { padding-top: var(--s-5); }
  /* Phones: identity and the action, then the work itself, then the comparison. The chart used to sit above the
     lineup and pushed the class about 900px down (review, 2026-11-11). */
  .sk-hero .sk-id, .sk-hero .sk-id-body { display: contents; }
  .sk-hero-main { order: 2; }
  .sk-hero .sk-side { order: 3; margin-top: 0; padding-top: var(--s-4); border-top: 1px solid var(--border); }
  .sk-actions { margin-top: var(--s-4); }
  .sk-actions .sh-btn-primary { flex: 1; }
  .sk-lineup:not(.is-grid) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 150px; overflow-x: auto; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 6px; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); }
  .sk-lineup:not(.is-grid) .sk-seat, .sk-lineup.is-grid .sk-seat { scroll-snap-align: start; }
  .sk-lineup:not(.is-grid) .sk-seat.is-open { width: 84px; }
  .sk-seat-pic .sk-pic, .sk-seat.is-open .sk-seat-pic { height: 210px; }
  .sk-seat-big { font-size: calc(var(--t-display) * 0.9); }
  .sk-lineup.is-grid { grid-auto-columns: 132px; grid-template-columns: repeat(var(--sk-cols), 132px); overflow-x: auto; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 6px; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); }
  .sk-stops.is-two { column-count: 1; }
  .sk-stop { grid-template-columns: 1fr; gap: calc(var(--s-1) * 1.5); margin-right: 0 !important; }
  .sk-rest-h { flex-direction: column; gap: var(--s-1); }
  .sk-rest-h span { text-align: left; }
  .sk-vrow { grid-template-columns: minmax(0, 1fr) auto 16px; gap: var(--s-3); }
  .sk-vrow .sk-faces, .sk-vrow .sk-vmeta { display: none; }
  .sk-proc { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sk-seat, .sk-seat * , .sk-vrow, .sk-insp { transition: none !important; animation: none !important; } }

/* ── Hall of Fame editor (.hf-*), 2026-11-11 ───────────────────────────────────────────────────
   pro-football-hof/studio/src: board.jsx (panes, bands, class dock), playercard.jsx (row, tile, seat, evidence).
   Three panes from 1280px: candidates, the ballot as one ruled sheet, evidence. From 1000 to 1279 the side pane
   swaps between Candidates and Evidence so the funnel keeps its width and nothing covers it (Grant, 2026-11-11).
   Below 1000 it is one column and evidence is the kit's modal sheet. Tokens only; orange is the selected card,
   the drop target and focus, nothing else. The stripe on every card is its position group (--pc), never the team. */
.hf-ed { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr) 340px; }
.hf-ed[data-layout="swap"] { grid-template-columns: 320px minmax(0, 1fr); }
.hf-ed[data-layout="compact"] { display: block; overflow-y: auto; }
.hf-side { min-height: 0; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); }
.hf-ed[data-layout="compact"] .hf-side { border-right: 0; border-bottom: 1px solid var(--border); height: min(48vh, 520px); }
.hf-tabs { display: flex; gap: var(--s-5); padding: 0 var(--s-4); border-bottom: 1px solid var(--border); flex: none; }
.hf-tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: var(--s-3) 0 var(--s-2); font: inherit; font-size: var(--t-ui); font-weight: 500; color: var(--text-faint); cursor: pointer; }
.hf-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--orange); }
.hf-tab:focus-visible, .hf-chip:focus-visible, .hf-icon:focus-visible, .hf-name:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: var(--r-sm); }

/* candidates */
.hf-pool { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: var(--s-3); }
.hf-pool.is-drop { background: color-mix(in srgb, var(--orange) 6%, transparent); outline: 2px dashed color-mix(in srgb, var(--orange) 50%, transparent); outline-offset: -4px; }
.hf-pool-top { padding: 0 var(--s-4); flex: none; }
.hf-pane-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); }
.hf-pane-h h2 { margin: 0; font-size: var(--t-ui); font-weight: 600; color: var(--text); }
.hf-pane-h span { font-size: var(--t-meta); color: var(--text-faint); display: inline-flex; align-items: center; gap: var(--s-1); }
.hf-search { width: 100%; background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); font: inherit; font-size: var(--t-ui); padding: var(--s-2) calc(var(--s-2) + 2px); }
.hf-chips { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: var(--s-2); }
.hf-chip { background: none; border: 0; border-bottom: 1px solid transparent; padding: 3px 0; font: inherit; font-size: var(--t-meta); color: var(--text-faint); cursor: pointer; }
.hf-chip[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--orange); }
.hf-chip span { margin-left: var(--s-1); font-family: var(--fm); opacity: 0.8; }
.hf-sort { margin-top: var(--s-2); display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-meta); color: var(--text-faint); }
.hf-sort select { background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); font: inherit; font-size: var(--t-meta); padding: var(--s-1) calc(var(--s-1) + 2px); cursor: pointer; }
.hf-note { font-size: var(--t-meta); color: var(--text-faint); margin: var(--s-2) 0 0; }
.hf-note.is-bad { color: var(--danger); }
.hf-list { flex: 1; min-height: 0; overflow-y: auto; margin-top: var(--s-2); }

/* a candidate in the pool: a flat row */
.hf-row { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto auto; align-items: stretch; border-top: 1px solid var(--border-soft); background: none; }
.hf-row:hover, .hf-row.is-inspected { background: color-mix(in srgb, var(--muted) 8%, transparent); }
.hf-row.is-selected { box-shadow: inset 0 0 0 1px var(--orange); }
.hf-row.is-dragging, .hf-tile.is-dragging, .hf-seat.is-dragging { opacity: 0.35; }
.hf-stripe { background: var(--pc, var(--pos-staff)); }
.hf-row-main { min-width: 0; padding: var(--s-2) var(--s-2) var(--s-2) calc(var(--s-2) + 2px); cursor: grab; touch-action: manipulation; -webkit-touch-callout: none; }
.hf-line1 { display: flex; align-items: baseline; gap: calc(var(--s-1) + 2px); min-width: 0; }
.hf-name { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: var(--t-ui); font-weight: 600; color: var(--text); cursor: pointer; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-pos { font-size: var(--t-micro); color: var(--text-faint); flex: none; }
.hf-sub { font-family: var(--fm); font-size: var(--t-micro); color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-sub.is-faint { color: var(--text-faint); }
.hf-sub b { color: var(--text); font-weight: 600; }
.hf-score { align-self: center; text-align: right; font-family: var(--fm); font-size: var(--t-body); font-weight: 600; color: var(--text); padding-right: var(--s-2); }
.hf-score small { display: block; font-family: var(--fb); font-size: var(--t-micro); font-weight: 400; color: var(--text-faint); }
.hf-add { align-self: center; position: relative; margin-right: var(--s-3); min-width: 30px; height: 30px; padding: 0 var(--s-2); background: none; border: 1px solid var(--border-strong); border-radius: var(--r-md); color: var(--muted); font: inherit; font-size: var(--t-meta); font-weight: 600; cursor: pointer; white-space: nowrap; }
.hf-add:hover { color: var(--text); border-color: var(--muted); }
.hf-add:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* the ballot: one ruled sheet, a band per cut, the class docked at the foot */
.hf-sheet { min-height: 0; min-width: 0; overflow-y: auto; display: flex; flex-direction: column; padding: var(--s-3) var(--s-5) 0; background: var(--bg); }
.hf-ed[data-layout="compact"] .hf-sheet { overflow: visible; padding: var(--s-3) var(--s-4) 0; }
.hf-legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: center; font-size: var(--t-micro); color: var(--text-faint); padding-bottom: var(--s-2); }
.hf-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.hf-legend .hf-legend-note { margin-left: auto; }
.hf-band { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--s-4); padding: calc(var(--s-2) + 2px) 0; border-top: 1px solid var(--border); }
.hf-band.is-drop { background: color-mix(in srgb, var(--orange) 9%, transparent); box-shadow: inset 0 0 0 1px var(--orange); }
.hf-gutter b { display: block; font-size: var(--t-ui); font-weight: 600; color: var(--text); }
.hf-gutter .sk-num { font-size: var(--t-meta); color: var(--muted); }
.hf-gutter small { display: block; font-size: var(--t-micro); color: var(--text-faint); margin-top: 2px; line-height: 1.35; }
.hf-gauge { height: 4px; background: var(--border); border-radius: 2px; margin: 6px 0 var(--s-1); max-width: 100%; }
.hf-gauge i { display: block; height: 100%; background: var(--text-faint); border-radius: 2px; transition: width 0.2s ease; }
.hf-gauge.is-done i { background: var(--text); }
.hf-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--hf-min, 168px)), 1fr)); gap: 6px 6px; align-content: start; min-height: 30px; }
.hf-hint { grid-column: 1 / -1; align-self: center; font-size: var(--t-meta); color: var(--text-faint); }

/* a candidate at a cut: a tile that carries one more line per cut */
.hf-tile { position: relative; display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; min-width: 0; background: var(--card); border-radius: var(--r-sm); overflow: hidden; }
.hf-tile:hover { background: color-mix(in srgb, var(--card) 86%, var(--muted)); }
.hf-tile.is-selected, .hf-seat.is-selected .sk-pic { box-shadow: inset 0 0 0 1px var(--orange); }
.hf-tile.is-inspected { background: color-mix(in srgb, var(--card) 86%, var(--muted)); }
.hf-tile-main { min-width: 0; padding: 6px var(--s-1) 6px var(--s-2); cursor: grab; touch-action: manipulation; -webkit-touch-callout: none; }
.hf-tile .hf-score { font-size: var(--t-ui); padding: 0 var(--s-1) 0 0; align-self: baseline; margin-left: auto; flex: none; }
.hf-tile .sk-mark { display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-dots { display: flex; align-items: center; gap: 3px; margin-top: 3px; font-family: var(--fm); font-size: var(--t-micro); color: var(--text-faint); min-width: 0; }
.hf-dots i { width: 7px; height: 7px; border-radius: var(--r-circle); border: 1.5px solid var(--text-faint); flex: none; }
.hf-dots i.is-finalist { background: var(--sh-diff); border-color: var(--sh-diff); }
.hf-dots span { margin-left: var(--s-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-acts { display: flex; flex-direction: column; border-left: 1px solid var(--border-soft); }
.hf-icon { flex: 1; min-height: 22px; width: 28px; display: grid; place-items: center; background: none; border: 0; color: var(--text-faint); cursor: pointer; padding: 0; }
.hf-icon + .hf-icon { border-top: 1px solid var(--border-soft); }
.hf-icon:hover { color: var(--text); background: color-mix(in srgb, var(--muted) 12%, transparent); }

/* the class: seven seats, docked */
.hf-dock { margin-top: auto; position: sticky; bottom: 0; background: var(--bg); border-top: 1px solid var(--border-strong); z-index: 2; }
.hf-ed[data-layout="compact"] .hf-dock { position: static; }
.hf-dock .hf-band { border-top: 0; }
.hf-seats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-2); min-height: 96px; }
.hf-seat { position: relative; min-width: 0; }
.hf-seat-pic { position: relative; cursor: grab; touch-action: manipulation; -webkit-touch-callout: none; }
.hf-seat .sk-pic { height: 92px; }
.hf-seat .sk-pic .sk-pic-mono { font-size: calc(var(--t-display) * 0.85); }
.hf-seat-big { position: absolute; left: 6px; bottom: var(--s-1); z-index: 3; font-family: var(--fd); font-weight: 700; font-size: var(--t-h2); line-height: 1; color: var(--sk-on-pic); pointer-events: none; }
.hf-seat .hf-name { display: block; width: 100%; font-size: var(--t-meta); margin-top: var(--s-1); }
.hf-seat .hf-sub { margin-top: 0; }
.hf-seat .hf-sub em { font-style: normal; color: var(--sh-diff); }
.hf-seat-x { position: absolute; right: 3px; top: 6px; z-index: 4; width: 22px; height: 22px; border-radius: var(--r-circle); border: 0; background: var(--sk-pic-shade); color: var(--sk-on-pic); display: grid; place-items: center; cursor: pointer; padding: 0; opacity: 0; }
.hf-seat:hover .hf-seat-x, .hf-seat.is-selected .hf-seat-x, .hf-seat-x:focus-visible { opacity: 1; }
.hf-seat-x:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.hf-seat.is-open { border: 1px dashed var(--border-strong); border-radius: var(--r-sm); height: 92px; display: grid; place-items: center; font-family: var(--fm); font-size: var(--t-micro); color: var(--text-faint); }

/* evidence in the side pane (swap layout) scrolls with the pane and carries no left rule */
.hf-side .sk-insp { border-left: 0; flex: 1; }
.hf-evi-back { display: none; }

@media (max-width: 1279px) {
  .hf-band { grid-template-columns: 116px minmax(0, 1fr); gap: var(--s-3); }
}
@media (max-width: 700px) {
  .hf-band { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .hf-gutter { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); }
  .hf-gutter .hf-gauge { flex: 1; min-width: 60px; margin: 0; }
  .hf-gutter small { flex-basis: 100%; margin: 0; }
  .hf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-seats { grid-template-columns: repeat(7, 78px); overflow-x: auto; padding-bottom: var(--s-1); }
  .hf-legend .hf-legend-note { margin-left: 0; flex-basis: 100%; }
}
@media (hover: none) { .hf-seat-x { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hf-gauge i { transition: none; } }
.sk-insp-acts .sh-btn-primary { margin: 0; padding: var(--s-2) var(--s-3); font-size: var(--t-ui); }
/* Names never shorten on a tile or a seat (review, 2026-11-11): they wrap to a second line instead. */
.hf-tile .hf-name, .hf-seat .hf-name { white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
.hf-row .hf-sub.is-faint { white-space: normal; }