/* Compact draft-position browser for the live homepage slate. */
.home-desk__matchup-browser-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}
.home-desk__matchup-browser-head .desk__section-title { margin: 0; }
.home-desk__matchup-browser-summary {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex: none;
  color: var(--color-slate-500);
  font: 600 .68rem var(--font-mono);
  text-transform: uppercase;
}
.home-desk__matchup-browser-summary strong { color: var(--color-slate-800); }
.home-desk__matchup-browser-summary > span:first-child {
  padding: .25rem .45rem;
  border-radius: 999px;
  background: var(--color-slate-100);
  color: var(--color-slate-700);
}
.home-desk__matchup-board { overflow: hidden; padding: 0; }
.home-desk__matchup-board-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(190px, 250px);
  align-items: center;
  gap: .75rem 1rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--color-slate-200);
}
.home-desk__matchup-board-title { display: flex; align-items: center; gap: .6rem; min-width: 150px; }
.home-desk__matchup-board-mark {
  display: grid;
  flex: none;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: .35rem;
  background: var(--color-slate-900);
  color: #fff;
  font: 1.1rem var(--font-heading);
}
.home-desk__matchup-board-title h3 { margin: 0; color: var(--color-slate-900); font: 1rem var(--font-heading); }
.home-desk__matchup-board-title p { margin: .1rem 0 0; color: var(--color-slate-500); font-size: .68rem; }
.home-desk__matchup-board-tabs { display: flex; align-items: center; gap: .25rem; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.home-desk__matchup-board-tab {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex: none;
  white-space: nowrap;
}
.home-desk__matchup-board-tab span { color: var(--color-slate-500); font: 600 .62rem var(--font-mono); }
.home-desk__matchup-board-tab.is-active span { color: rgba(255,255,255,.72); }
.home-desk__matchup-board-search { display: block; }
.home-desk__matchup-board-search input {
  width: 100%;
  min-height: 2.15rem;
  padding: .4rem .65rem;
  border: 1px solid var(--color-slate-300);
  border-radius: .35rem;
  background: #fff;
  color: var(--color-slate-900);
  font: .75rem var(--font-body);
}
.home-desk__matchup-board-search input:focus { outline: 2px solid rgba(6,182,212,.35); border-color: var(--color-accent-cyan); }
.home-desk__matchup-board-main { display: grid; grid-template-columns: minmax(285px, 330px) minmax(0, 1fr); min-height: 390px; }
.home-desk__matchup-board-index { min-width: 0; border-right: 1px solid var(--color-slate-200); background: var(--color-slate-50); }
.home-desk__matchup-board-index-head {
  display: flex;
  justify-content: space-between;
  padding: .6rem .8rem .45rem;
  color: var(--color-slate-500);
  font: 700 .6rem var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.home-desk__matchup-board-player-list { max-height: 420px; overflow: auto; padding: 0 .4rem .55rem; }
.home-desk__matchup-board-player {
  display: grid;
  grid-template-columns: 42px 38px minmax(0, 1fr);
  align-items: center;
  gap: .55rem;
  width: 100%;
  margin: 1px 0;
  padding: .45rem .5rem;
  border: 1px solid transparent;
  border-radius: .35rem;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.home-desk__matchup-board-player[hidden],
.home-desk__matchup-board-player-list[hidden] { display: none; }
.home-desk__matchup-board-player:hover { background: #fff; }
.home-desk__matchup-board-player[aria-current="true"] { border-color: #cbddec; background: #fff; box-shadow: inset 3px 0 var(--color-accent-cyan); }
.home-desk__matchup-board-pick { padding: .27rem .15rem; border-radius: .25rem; background: var(--color-slate-200); color: var(--color-slate-700); font: 700 .72rem var(--font-mono); text-align: center; }
.home-desk__matchup-board-index-avatar { width: 38px; height: 38px; border: 1px solid #fff; box-shadow: 0 0 0 1px var(--color-slate-300); font-size: .85rem; }
.home-desk__matchup-board-identity { display: block; min-width: 0; }
.home-desk__matchup-board-identity strong { display: block; overflow: hidden; color: var(--color-slate-900); font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.home-desk__matchup-board-identity small { display: block; margin-top: .12rem; color: var(--color-slate-500); font: 500 .68rem var(--font-mono); }
.home-desk__matchup-board-empty { margin: 1rem .75rem; color: var(--color-slate-500); font-size: .75rem; line-height: 1.5; text-align: center; }
.home-desk__matchup-board-detail { min-width: 0; padding: .9rem 1.05rem .75rem; }
.home-desk__matchup-board-panel[hidden] { display: none; }
.home-desk__matchup-board-game-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--color-slate-500); font: 600 .65rem var(--font-mono); text-transform: uppercase; }
.home-desk__matchup-board-scoreline { margin: .45rem 0 .7rem; text-align: center; }
.home-desk__matchup-board-scoreline h3 { display: flex; justify-content: center; align-items: center; gap: .35rem; margin: 0; color: var(--color-slate-900); font: 700 .92rem var(--font-heading); }
.home-desk__matchup-board-scoreline h3 img { object-fit: contain; }
.home-desk__matchup-board-scoreline h3 span { padding: 0 .2rem; color: var(--color-slate-400); font: 600 .65rem var(--font-mono); }
.home-desk__matchup-board-scoreline p { margin: .2rem 0 0; color: var(--color-slate-700); font: 1.45rem var(--font-heading); font-variant-numeric: tabular-nums; }
.home-desk__matchup-board-pair { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); align-items: stretch; gap: .45rem; }
.home-desk__matchup-board-side { min-width: 0; padding: .65rem .55rem .55rem; border: 1px solid var(--color-slate-200); border-radius: .45rem; background: #fff; text-align: center; }
.home-desk__matchup-board-side + .home-desk__matchup-board-side { background: var(--color-slate-50); }
.home-desk__matchup-board-side.is-selected { border-color: var(--color-accent-cyan); box-shadow: 0 0 0 2px rgba(6,182,212,.16); }
.home-desk__matchup-board-team { display: flex; justify-content: center; align-items: center; gap: .45rem; color: var(--color-slate-600); font: 700 .7rem var(--font-mono); }
.home-desk__matchup-board-team img { width: 44px; height: 44px; padding: 3px; border: 1px solid var(--color-slate-200); border-radius: 50%; background: #fff; object-fit: contain; }
.home-desk__matchup-board-avatar { display: grid; width: 74px; height: 74px; place-items: center; overflow: hidden; margin: .45rem auto .4rem; border: 2px solid #fff; border-radius: 50%; background: #eef2f7; color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-slate-300); font: 1.6rem var(--font-heading); }
.home-desk__matchup-board-avatar img { width: 100%; height: 100%; object-fit: cover; }
.home-desk__matchup-board-name { margin: 0; overflow-wrap: anywhere; color: var(--color-slate-900); font: 1rem var(--font-heading); line-height: 1.2; }
.home-desk__matchup-board-name a { color: inherit; text-decoration: none; }
.home-desk__matchup-board-name a:hover { text-decoration: underline; }
.home-desk__matchup-board-draft { margin: .2rem 0 0; color: var(--color-slate-500); font: 500 .6rem var(--font-mono); }
.home-desk__matchup-board-line { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; margin: .6rem 0 0; padding-top: .5rem; border-top: 1px solid var(--color-slate-200); text-align: center; }
.home-desk__matchup-board-line > div { min-width: 0; padding: .25rem .1rem; border-radius: .25rem; background: var(--color-slate-50); }
.home-desk__matchup-board-line dt { color: var(--color-slate-500); font: 600 .53rem var(--font-mono); }
.home-desk__matchup-board-line dd { margin: .1rem 0 0; color: var(--color-slate-900); font: 700 .75rem var(--font-mono); font-variant-numeric: tabular-nums; }
.home-desk__matchup-board-appearance { margin: .35rem 0 0; color: var(--color-slate-500); font: 500 .57rem var(--font-mono); }
.home-desk__matchup-board-vs { display: grid; place-items: center; color: var(--color-slate-400); font: .75rem var(--font-heading); }
.home-desk__matchup-board-side--empty { display: flex; min-height: 205px; flex-direction: column; justify-content: center; align-items: center; gap: .8rem; color: var(--color-slate-400); }
.home-desk__matchup-board-side--empty p { margin: 0; font-size: .7rem; }
.home-desk__matchup-board-context { margin: .55rem 0 0; color: var(--color-slate-500); font-size: .62rem; text-align: center; }
.home-desk__matchup-board-footer { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: .7rem; padding-top: .55rem; border-top: 1px solid var(--color-slate-200); }
.home-desk__matchup-board-footer p { margin: 0; color: var(--color-slate-500); font-size: .67rem; }
.home-desk__matchup-board-footer p strong { color: var(--color-slate-700); }
.home-desk__matchup-board-footer > div { display: flex; gap: .35rem; }
.home-desk__matchup-board-footer .btn { padding: .35rem .55rem; font-size: .65rem; }
.home-desk__matchup-board-footer .btn:disabled { opacity: .45; cursor: not-allowed; }
.home-desk__matchup-board-no-selection { padding: 3rem 1rem; color: var(--color-slate-500); font-size: .8rem; text-align: center; }
.home-desk__matchup-browser .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }

@media (max-width: 900px) {
  .home-desk__matchup-board-toolbar { grid-template-columns: 1fr minmax(190px, 260px); }
  .home-desk__matchup-board-title { grid-column: 1 / -1; }
  .home-desk__matchup-board-tabs { order: 2; grid-column: 1 / -1; }
  .home-desk__matchup-board-search { grid-column: 1 / -1; }
  .home-desk__matchup-board-main { grid-template-columns: minmax(265px, 300px) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .home-desk__matchup-browser-head { align-items: flex-start; flex-direction: column; }
  .home-desk__matchup-browser-summary { align-self: flex-end; }
  .home-desk__matchup-board-toolbar { grid-template-columns: 1fr; gap: .6rem; padding: .7rem; }
  .home-desk__matchup-board-title,
  .home-desk__matchup-board-tabs,
  .home-desk__matchup-board-search { grid-column: 1; }
  .home-desk__matchup-board-main { display: flex; flex-direction: column; min-height: 0; }
  .home-desk__matchup-board-index { border-right: 0; border-bottom: 1px solid var(--color-slate-200); }
  .home-desk__matchup-board-player-list { display: flex; gap: .35rem; max-height: none; overflow-x: auto; padding: 0 .5rem .6rem; }
  .home-desk__matchup-board-player { grid-template-columns: 30px 34px minmax(0, 1fr); gap: .35rem; width: 205px; min-width: 205px; margin: 0; padding: .4rem; border-color: var(--color-slate-200); background: #fff; }
  .home-desk__matchup-board-index-avatar { width: 34px; height: 34px; }
  .home-desk__matchup-board-identity strong { font-size: .8rem; }
  .home-desk__matchup-board-identity small { font-size: .61rem; }
  .home-desk__matchup-board-detail { padding: .7rem .55rem .6rem; }
  .home-desk__matchup-board-pair { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: .2rem; }
  .home-desk__matchup-board-side { padding: .55rem .3rem .45rem; }
  .home-desk__matchup-board-team img { width: 38px; height: 38px; }
  .home-desk__matchup-board-avatar { width: 62px; height: 62px; margin: .4rem auto; }
  .home-desk__matchup-board-name { font-size: .78rem; }
  .home-desk__matchup-board-draft { min-height: 1.5em; font-size: .54rem; }
  .home-desk__matchup-board-line { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .2rem; }
  .home-desk__matchup-board-line dt { font-size: .48rem; }
  .home-desk__matchup-board-line dd { font-size: .65rem; }
  .home-desk__matchup-board-appearance { font-size: .5rem; }
  .home-desk__matchup-board-side--empty { min-height: 175px; }
  .home-desk__matchup-board-footer { align-items: flex-start; flex-direction: column; }
  .home-desk__matchup-board-footer > div { align-self: flex-end; }
}