/* The Dashboard — layout straight from the Higgsfield concept: hero band with
   the ringed headshot and stat tiles, chart + history left, matchup right. */

.hb-note{
  font-size:12.5px; line-height:1.6; color:var(--faint);
  background:var(--panel2); border:1px dashed var(--line2); border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4);
}
.hb-note.hb-err b{ color:var(--red-ink) }
.hb-fine{ font-size:11px; line-height:1.6; color:var(--faint); margin-top:var(--sp-3) }
.hb-fine b{ color:var(--muted) }
.hb-sk{ height:120px; border-radius:var(--r-sm); background:var(--panel2);
  animation:hbPulse 1.2s ease-in-out infinite alternate }
@keyframes hbPulse{ from{opacity:.45} to{opacity:.9} }
@media(prefers-reduced-motion:reduce){ .hb-sk{ animation:none } }

/* ----------------------------------------------------------------- search */

.hb-search{ position:relative; margin-bottom:var(--sp-5); max-width:520px }
.hb-search input{
  width:100%; background:var(--panel2); border:1px solid var(--line2);
  border-radius:99px; padding:12px 20px; color:var(--chalk);
  font-family:var(--body); font-size:var(--fs-5); box-shadow:inset 0 1px 0 var(--lit);
}
.hb-search input::placeholder{ color:var(--faint) }
.hb-search input:focus-visible{ outline:2px solid var(--yellow); outline-offset:1px }

.hb-hits{
  list-style:none; position:absolute; z-index:30; top:calc(100% + 6px); left:0; right:0;
  background:var(--panel); border:1px solid var(--line2); border-radius:var(--r-sm);
  box-shadow:var(--sh-3); overflow:hidden; max-height:340px; overflow-y:auto;
}
.hb-hits button{
  display:flex; align-items:center; gap:var(--sp-3); width:100%;
  padding:10px 14px; text-align:left; font-size:var(--fs-4);
}
.hb-hits button:hover, .hb-hits button:focus-visible{ background:var(--panel2); outline:none }
.hb-hits i{
  font-style:normal; flex:none; min-width:34px; text-align:center;
  font-size:var(--fs-1); font-weight:800; color:var(--turf-ink);
}
.hb-hits b{ flex:1; font-weight:650; color:var(--chalk);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hb-hits span{ flex:none; font-size:var(--fs-2); color:var(--faint) }
.hb-none{ padding:var(--sp-4); text-align:center; color:var(--faint); font-size:var(--fs-3) }

/* ------------------------------------------------------------------- hero */

.hb-hero{
  display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap;
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line); border-radius:var(--r);
  padding:var(--sp-5); box-shadow:var(--sh-2); margin-bottom:var(--sp-5);
}
.hb-shotwrap{ position:relative; flex:none; width:120px; height:120px }
.hb-ring{
  position:absolute; inset:-5px; border-radius:50%;
  border:3px solid var(--yellow);
  border-bottom-color:transparent; transform:rotate(24deg);
}
.hb-shot{
  width:120px; height:120px; border-radius:50%; object-fit:cover;
  background:var(--raise); display:block;
}
span.hb-shot.ph{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--disp); font-size:34px; color:var(--muted);
}
.hb-id{ min-width:0; flex:1 1 220px }
.hb-name{
  font-family:var(--disp); font-size:clamp(28px,4.6vw,46px); line-height:var(--lh-disp);
  text-transform:uppercase; color:var(--yellow); word-break:break-word;
}
.hb-name span{ color:var(--chalk) }
.hb-sub{
  display:flex; align-items:center; gap:var(--sp-2); margin-top:6px;
  font-size:var(--fs-4); font-weight:650; color:var(--muted);
}
.hb-crest{ width:22px; height:22px; object-fit:contain }
span.hb-crest.ph{ display:none }
.hb-inj{
  font-style:normal; font-size:var(--fs-1); font-weight:800; letter-spacing:.06em;
  color:var(--red-ink); border:1px solid rgba(232,84,79,.4); border-radius:4px; padding:2px 7px;
}

.hb-tiles{
  display:grid; grid-template-columns:repeat(4,minmax(96px,1fr));
  gap:var(--sp-3); flex:2 1 380px;
}
.hb-tile{
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4); box-shadow:inset 0 1px 0 var(--lit); min-width:0;
}
.hb-tl{
  display:block; font-size:var(--fs-1); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint);
}
.hb-tv{
  display:block; font-family:var(--disp); font-size:var(--fs-9);
  line-height:var(--lh-disp); color:var(--chalk); margin-top:5px;
  font-variant-numeric:tabular-nums;
}
.hb-gold .hb-tv{ color:var(--yellow) }
.hb-ts{ display:block; font-size:var(--fs-1); color:var(--faint); margin-top:3px }

/* ------------------------------------------------------------------- grid */

.hb-grid{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:var(--sp-5); align-items:start;
}
.hb-col{ display:flex; flex-direction:column; gap:var(--sp-5); min-width:0 }
.hb-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--sp-5); box-shadow:var(--sh-2); min-width:0;
}
.hb-card h3{
  font-family:var(--disp); font-size:var(--fs-7); line-height:var(--lh-disp);
  text-transform:uppercase; margin-bottom:var(--sp-4);
}

/* ------------------------------------------------------------------ chart */

.hb-chart{
  display:flex; align-items:flex-end; gap:6px;
  height:190px; padding-top:22px; overflow-x:auto; overscroll-behavior-x:contain;
}
.hb-bar{
  flex:1 0 34px; max-width:64px; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; height:100%; position:relative; min-width:0;
}
.hb-bar i{
  display:block; width:100%; border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,var(--yellow),#caa416);
  min-height:3px;
}
.hb-bar b{
  position:absolute; top:0; font-size:var(--fs-1); font-weight:700; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.hb-bar span{
  font-size:9px; color:var(--faint); margin-top:5px; white-space:nowrap;
}

/* ------------------------------------------------------------------ table */

.hb-tblwrap{ overflow-x:auto }
.hb-tbl{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums }
.hb-tbl th{
  font-size:var(--fs-1); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); text-align:left; padding:6px 10px; border-bottom:1px solid var(--line2);
}
.hb-tbl th.num, .hb-tbl td.num{ text-align:right }
.hb-tbl td{
  font-size:var(--fs-4); padding:8px 10px; border-bottom:1px solid var(--line); color:var(--muted);
}
.hb-tbl td:first-child{ color:var(--chalk); font-weight:700 }
.hb-tbl tr:last-child td{ border-bottom:0 }

/* ---------------------------------------------------------------- matchup */

.hb-mu{ display:flex; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-4) }
.hb-mucrest{ flex:none; width:52px; height:52px; object-fit:contain }
span.hb-mucrest.ph{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--raise); border-radius:50%; font-weight:800; color:var(--muted);
}
.hb-mubody{ min-width:0; line-height:1.4 }
.hb-mubody b{ display:block; font-size:var(--fs-6); font-weight:700 }
.hb-mubody span{ font-size:var(--fs-3); color:var(--faint) }

.hb-meter{ margin:var(--sp-3) 0 }
.hb-meterbar{
  display:block; position:relative; height:8px; border-radius:5px;
  background:linear-gradient(90deg,#8a3d38,var(--raise) 50%,var(--turf2));
}
.hb-meterbar i{
  position:absolute; top:50%; width:16px; height:16px; border-radius:50%;
  background:var(--yellow); border:2px solid #12170f;
  transform:translate(-50%,-50%);
}
.hb-meterlbl{
  display:flex; justify-content:space-between; margin-top:5px;
  font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
}
.hb-meterlbl em{ font-style:normal }
.hb-muline{ font-size:var(--fs-4); line-height:1.6; color:var(--muted) }
.hb-muline b{ color:var(--chalk) }
.hb-good{ color:var(--turf-ink) !important }
.hb-bad{ color:var(--red-ink) !important }

/* ----------------------------------------------------------------- averages */

.hb-avgs{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3) }
.hb-avg{
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:var(--sp-3); box-shadow:inset 0 1px 0 var(--lit);
}
.hb-avg span{
  display:block; font-size:var(--fs-1); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint);
}
.hb-avg b{
  display:block; font-family:var(--disp); font-size:var(--fs-8);
  line-height:var(--lh-disp); color:var(--chalk); margin-top:4px;
  font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------------- weakest */

.hb-weak{ margin-bottom:var(--sp-4) }
.hb-weak:last-of-type{ margin-bottom:0 }
.hb-weaklbl{
  display:block; font-size:var(--fs-1); font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--turf-ink); margin-bottom:var(--sp-2);
}
.hb-weakrow{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:7px 10px; border-radius:var(--r-xs); background:var(--panel2);
  margin-bottom:4px; box-shadow:inset 0 1px 0 var(--lit);
}
.hb-weakcrest{ flex:none; width:26px; height:26px; object-fit:contain }
span.hb-weakcrest.ph{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--raise); border-radius:50%; font-size:9px; font-weight:800; color:var(--muted);
}
.hb-weakrow b{ flex:none; font-size:var(--fs-2); font-weight:800; color:var(--yellow); width:30px }
.hb-weakrow span{ flex:1; font-size:var(--fs-4); font-weight:650 }
.hb-weakrow em{
  font-style:normal; font-size:var(--fs-3); color:var(--muted); font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------------- news */

.hb-rw{
  background:var(--panel2); border:1px solid var(--line2); border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-3);
  box-shadow:inset 0 1px 0 var(--lit);
}
.hb-rwtag{
  display:inline-block; font-size:var(--fs-1); font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--yellow); margin-bottom:4px;
}
.hb-rw p{ font-size:13px; line-height:1.6; color:var(--chalk); font-weight:600 }
.hb-rwd{ display:block; font-size:11px; color:var(--faint); margin-top:4px }

.hb-news{ list-style:none }
.hb-news li{ border-top:1px solid var(--line) }
.hb-news li:first-child{ border-top:0 }
.hb-news a, .hb-news li > b{
  display:flex; flex-direction:column; gap:2px; padding:9px 0;
}
.hb-news b{ font-size:12.5px; line-height:1.5; color:var(--chalk); font-weight:600 }
.hb-news a:hover b{ color:var(--yellow) }
.hb-news a:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px; border-radius:var(--r-xs) }
.hb-news span{ font-size:11px; color:var(--faint) }

/* ------------------------------------------------------------- responsive */

@media (max-width:920px){
  .hb-grid{ grid-template-columns:minmax(0,1fr) }
  .hb-tiles{ flex-basis:100% }
}
@media (max-width:560px){
  .hb-hero{ padding:var(--sp-4); gap:var(--sp-4) }
  .hb-tiles{ grid-template-columns:1fr 1fr }
  .hb-card{ padding:var(--sp-4) }
  .hb-bar{ flex-basis:30px }
}

/* ── the slate ───────────────────────────────────────────────────────────── */

.hb-slate{ margin-bottom:var(--sp-4) }
.hb-slatehead{ display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap;
  margin-bottom:var(--sp-3) }
.hb-slatehead h3{
  font-family:var(--disp); font-size:var(--fs-8); line-height:var(--lh-disp);
  text-transform:uppercase;
}
.hb-slatehead .hb-fine{ margin:0 }

.hb-games{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(164px,1fr));
  gap:6px;
}
.hb-game{
  display:flex; flex-direction:column; gap:2px; text-align:left;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:8px 11px; min-width:0;
  transition:border-color var(--t-1) var(--ease), background var(--t-1) var(--ease);
}
.hb-game:hover{ border-color:var(--line2); background:var(--panel2) }
.hb-game.on{ border-color:rgba(255,210,30,.55); background:var(--yellow-dim) }
.hb-game:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px }
.hb-game b{ font-size:var(--fs-4); font-weight:750; color:var(--chalk);
  font-variant-numeric:tabular-nums }
.hb-game.on b{ color:var(--yellow) }
.hb-game span{ font-size:var(--fs-1); color:var(--faint); white-space:nowrap }
.hb-all b{ color:var(--turf-ink) }

/* ── the pool ────────────────────────────────────────────────────────────── */

.hb-poolwrap{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--sp-4) var(--sp-5) var(--sp-5); box-shadow:var(--sh-2);
  margin-bottom:var(--sp-5);
}
.hb-poolbar{
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  margin-bottom:var(--sp-3);
}
.hb-ptabs{ display:flex; gap:5px; flex-wrap:wrap }
.hb-ptab{
  font-size:var(--fs-2); font-weight:700; color:var(--muted);
  border:1px solid var(--line2); border-radius:99px; padding:5px 13px;
  background:var(--panel2);
  transition:color var(--t-1) var(--ease), background var(--t-1) var(--ease);
}
.hb-ptab:hover{ color:var(--chalk) }
.hb-ptab.on{ background:var(--yellow); color:#12170f; border-color:transparent }
.hb-ptab:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px }

.hb-poolq{ margin-left:auto; flex:0 1 240px; min-width:150px }
.hb-poolq input{
  width:100%; background:var(--panel2); border:1px solid var(--line2);
  border-radius:99px; padding:8px 16px; color:var(--chalk);
  font-family:var(--body); font-size:var(--fs-3);
}
.hb-poolq input::placeholder{ color:var(--faint) }
.hb-poolq input:focus-visible{ outline:2px solid var(--yellow); outline-offset:1px }

.hb-poolscroll{ max-height:min(56vh,560px); overflow:auto; overscroll-behavior:contain }

/* dense optimizer table: numeric columns shrink to their content and the
   player column takes every leftover pixel, so nothing floats in space */
.hb-pooltbl{ table-layout:auto }
.hb-pooltbl th.num, .hb-pooltbl td.num{ width:1%; white-space:nowrap }
.hb-pooltbl td{ padding:5px 9px; font-size:var(--fs-3) }
.hb-pooltbl th{ padding:5px 9px; white-space:nowrap }
.hb-stcell{ color:var(--muted); font-variant-numeric:tabular-nums }
.hb-muavg{
  display:block; font-size:var(--fs-1); color:var(--faint); margin-top:2px;
  font-variant-numeric:tabular-nums;
}

.hb-pooltbl thead th{
  position:sticky; top:0; z-index:2; background:var(--panel);
  box-shadow:inset 0 -1px 0 var(--line2);
}
.hb-sth{
  font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit;
  padding:0; transition:color var(--t-1) var(--ease);
}
.hb-sth:hover{ color:var(--chalk) }
.hb-sth:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px }

.hb-prow{
  display:flex; align-items:center; gap:var(--sp-3); width:100%; text-align:left;
  border-radius:var(--r-xs); padding:2px 4px 2px 0;
  transition:background var(--t-1) var(--ease);
}
.hb-prow:hover{ background:var(--panel2) }
.hb-prow:focus-visible{ outline:2px solid var(--yellow); outline-offset:1px }
.hb-prow img{
  flex:none; width:34px; height:26px; object-fit:cover; object-position:top;
  border-radius:5px; background:var(--raise);
}
.hb-prow .hb-pn{ display:flex; flex-direction:column; min-width:0; line-height:1.3 }
.hb-prow .hb-pn b{ font-size:var(--fs-4); font-weight:650; color:var(--chalk);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hb-prow .hb-pn span{ font-size:var(--fs-1); color:var(--faint) }

.hb-opp{ white-space:nowrap; color:var(--muted) }
.hb-pwcell{ font-weight:750; color:var(--yellow) }

.hb-mupill{
  display:inline-block; min-width:38px; text-align:center;
  font-size:var(--fs-1); font-weight:750; padding:2px 7px; border-radius:99px;
  background:var(--raise); color:var(--muted); font-variant-numeric:tabular-nums;
}
.hb-mupill.hb-soft{ background:rgba(49,173,109,.2); color:var(--turf-ink) }
.hb-mupill.hb-tough{ background:rgba(232,84,79,.16); color:var(--red-ink) }

@media (max-width:640px){
  .hb-poolq{ margin-left:0; flex:1 1 100% }
  .hb-pooltbl th.hb-adpcell, .hb-pooltbl td.hb-adpcell{ display:none }  /* ADP goes first */
}

/* ── the mast: stadium tunnel art behind the title ───────────────────────── */

.hb-mast{
  position:relative; overflow:clip; min-height:clamp(230px,30vw,340px);
  display:flex; align-items:flex-end;
  border-bottom:1px solid rgba(255,210,30,.16);
  margin-bottom:var(--sp-5);
}
.hb-mastbg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 55%;
}
.hb-mastgrade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,9,7,.55), rgba(6,9,7,.18) 34%, rgba(6,9,7,.86) 82%, var(--bg)),
    radial-gradient(70% 90% at 50% 110%, rgba(49,173,109,.14), transparent 60%);
}
.hb-mastbeams{
  position:absolute; inset:-20% 0 0;
  background:
    conic-gradient(from 190deg at 18% -8%, transparent 0 8deg, rgba(255,210,30,.055) 8deg 13deg, transparent 13deg),
    conic-gradient(from 160deg at 84% -8%, transparent 0 8deg, rgba(255,255,255,.05) 8deg 12deg, transparent 12deg);
  mix-blend-mode:screen; pointer-events:none;
}
.hb-mastin{ position:relative; padding-top:var(--sp-7); padding-bottom:var(--sp-6); width:100% }
.hb-mastk{
  font-size:var(--fs-2); font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--turf-ink); margin-bottom:var(--sp-2);
  text-shadow:0 1px 8px rgba(0,0,0,.8);
}
.hb-masttitle{
  font-family:var(--disp); font-size:clamp(40px,7vw,72px); line-height:.9;
  text-transform:uppercase; color:var(--chalk);
  text-shadow:0 4px 30px rgba(0,0,0,.7);
}
.hb-masttitle em{
  font-style:normal;
  background:linear-gradient(175deg,#ffe98a 8%,var(--yellow) 40%,#b8940f 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 16px rgba(255,210,30,.28));
}
.hb-mastsub{
  font-size:var(--fs-5); color:var(--muted); margin-top:var(--sp-3); max-width:52ch;
  text-shadow:0 1px 6px rgba(0,0,0,.85);
}

/* the search rides up onto the mast so the page opens on one composed image */
#hub .hb-search{ margin-top:calc(-1 * var(--sp-5)); position:relative; z-index:5 }
#hub .hb-search input{
  padding:15px 24px; font-size:var(--fs-6);
  background:rgba(21,30,25,.94); backdrop-filter:blur(8px);
  border-color:rgba(255,210,30,.28);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.85), inset 0 1px 0 var(--lit);
}
#hub .hb-search input:focus-visible{
  outline:2px solid var(--yellow); outline-offset:1px;
  box-shadow:0 18px 50px -16px rgba(255,210,30,.25), inset 0 1px 0 var(--lit);
}

/* ── slate chips, now with crests ────────────────────────────────────────── */

.hb-game{ flex-direction:row; align-items:center; gap:9px; padding:8px 11px 8px 8px;
  min-width:0; position:relative; overflow:hidden }
.hb-game::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 120% at 12% 50%, rgba(255,255,255,.05), transparent 60%);
}
.hb-game:hover{ transform:translateY(-2px) }
.hb-game{ transition:border-color var(--t-1) var(--ease), background var(--t-1) var(--ease),
  transform var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease) }
.hb-game.on{ box-shadow:0 10px 26px -12px rgba(255,210,30,.4) }
@media (prefers-reduced-motion:reduce){ .hb-game:hover{ transform:none } }

.hb-gcrests{ flex:none; display:flex; align-items:center }
.hb-gcrest{
  width:27px; height:27px; object-fit:contain;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.6));
}
.hb-gcrest + .hb-gcrest{ margin-left:4px }   /* a gap, not a pile: at tile size an underlap reads as overlap */
span.hb-gcrest.ph{
  display:inline-flex; align-items:center; justify-content:center;
  width:27px; height:27px; border-radius:50%; background:var(--raise);
  font-size:8px; font-weight:800; color:var(--muted);
}
.hb-gtxt{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.hb-gtxt{ overflow:hidden }
.hb-gtxt b{ font-size:var(--fs-3); font-weight:750; color:var(--chalk);
  font-variant-numeric:tabular-nums; white-space:nowrap }
.hb-game.on .hb-gtxt b{ color:var(--yellow) }
.hb-gtxt span{ font-size:var(--fs-1); color:var(--faint); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; display:block }
.hb-all{ flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; padding:8px 12px }
.hb-all b{ font-size:var(--fs-3) }
.hb-all span{ font-size:var(--fs-1) }

@media (max-width:640px){
  .hb-games{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:5px }
}

/* ── position dots in the pool ───────────────────────────────────────────── */

.hb-pdot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  margin-right:5px; vertical-align:1px; background:var(--faint);
}
.hb-pd-qb{ background:#f2908c }
.hb-pd-rb{ background:var(--turf-ink) }
.hb-pd-wr{ background:#8ccdf0 }
.hb-pd-te{ background:#eec277 }
.hb-pd-k{ background:#c7d2cc }

/* The champions engraving now lives IN the mast artwork itself
   (nano_banana_pro edit of the tunnel render) — not as overlay text. */

/* ── the draft desk: injury badges + draft mode ──────────────────────────── */

.hb-poolinj{ font-size:9px; padding:1px 5px; margin-left:6px; vertical-align:1px }

.hb-drtog{
  font-size:var(--fs-2); font-weight:700; color:var(--muted);
  border:1px solid var(--line2); border-radius:99px; padding:5px 13px;
  background:var(--panel2);
  transition:color var(--t-1) var(--ease), background var(--t-1) var(--ease),
    border-color var(--t-1) var(--ease);
}
.hb-drtog:hover{ color:var(--chalk) }
.hb-drtog:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px }
.hb-drtog.on{
  color:var(--turf-ink); background:rgba(49,173,109,.16);
  border-color:rgba(49,173,109,.55);
}

.hb-drbadge{
  display:inline-block; margin-left:6px; padding:1px 6px; border-radius:99px;
  font-size:9px; font-weight:800; letter-spacing:.08em;
  color:var(--turf-ink); background:rgba(49,173,109,.18);
}

/* who took them: a quiet tag after the name once the pick is recorded */
.hb-drafted{
  display:inline-block; margin-left:6px; padding:1px 6px; border-radius:99px;
  font-style:normal; font-size:9px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint); background:var(--raise);
  vertical-align:1px; max-width:64px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}

/* whose seat the badges are for — one line, sits between toolbar and table */
.hb-drnote{ margin:0 0 var(--sp-3) }
.hb-drnote b{ color:var(--turf-ink) }
.hb-drnote .hb-drbadge{ margin-left:0 }