/* ============================================================================
   SLATE — VIEW LAYOUTS
   Composition only. Every colour, radius and space below is a token from the
   library; nothing here introduces new design decisions, it only arranges
   library components into the six views. The home page has its own sheet
   (home.css); the hero bands come from the library (hero.css).
   ========================================================================= */
@import url("./home.css");
@import url("./draft.css");
@import url("./draft-mock.css");
@import url("./report.css");

/* ---- Sidebar controls ---- */
.shell__view{display:flex;flex-direction:column;min-width:0;transition:opacity var(--dur-2) var(--ease-out)}
/* an in-place render still loading its data: the page stays where the reader
   is, dimmed after a beat (quick renders never flicker) and not clickable */
.shell__view[aria-busy="true"]{opacity:.6;pointer-events:none;transition-delay:150ms}
.shell__status{font-size:10px}.shell__status:empty{display:none}
.shell__league-switcher{min-width:0;flex:1}.shell__league-switcher .slate-select__trigger{width:100%;height:auto;min-height:44px;padding:4px;border:0;background:transparent}
.shell__league-switcher .slate-select__value{gap:8px;min-width:0}
.shell__league-copy{display:flex;flex-direction:column;min-width:0;gap:3px;text-align:left}
.shell__league-product{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}
.shell__league-name{font-size:11px;max-width:108px;color:var(--text-strong)}
.shell__refresh{flex:none}.shell__refresh-btn{color:var(--text-muted)}
.shell__search{position:relative;display:flex;flex-direction:column-reverse;gap:7px}
.shell__search-btn{width:100%;justify-content:flex-start;color:var(--text-muted)}
.shell__search-field{display:none;width:100%}.shell__search.is-open .shell__search-field{display:flex}
@media(max-width:860px){.shell__league-copy,.shell__league-switcher .slate-select__caret,.shell__refresh{display:none}.shell__league-switcher .slate-select__trigger{padding:4px;justify-content:center}.shell__search-btn{padding:0;justify-content:center}.shell__search-btn .slate-btn__label{display:none}.shell__search.is-open .shell__search-field{position:absolute;left:56px;bottom:0;width:240px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:10px;box-shadow:var(--shadow-lg)}.shell__status{display:none}}
.shell__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.shell__toolbar[hidden] { display: none; }
/* the toolbar always stands clear of the page content under it */
.shell__toolbar:not([hidden]) { margin-bottom: var(--space-6); }
/* the draft's panes: one even bar across the page; phones scroll it */
.shell__panes { width: 100%; }
.shell__panes .slate-seg__opt { flex: 1 1 0; justify-content: center; }
@media (max-width: 640px) {
  .shell__panes .slate-seg__opt { flex: 0 0 auto; }
}
.boot-error { display: grid; place-items: center; min-height: 100vh; }




/* --------------------------------------------------------- LEAGUE IMPORT -- */
.league-import { display: flex; flex-direction: column; gap: var(--space-5); }
.league-import__status,
.league-import__empty { color: var(--text-muted); font-size: var(--text-sm); }
.league-import__results { display: grid; gap: var(--space-3); }
.league-import__league {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  text-align: start;
  transition: transform var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out);
}
.league-import__league:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  background: var(--bg-hover);
}
.league-import__league:disabled { opacity: .62; }
.league-import__copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.league-import__copy strong { color: var(--text-strong); font-size: var(--text-md); }
.league-import__copy small { color: var(--text-faint); font-size: var(--text-xs); }
.league-import__action { color: var(--accent-text); font-size: var(--text-xs); font-weight: var(--weight-bold); }

/* ----------------------------------------------------------------- BOARD -- */
.board { display: flex; flex-direction: column; gap: var(--space-6); }
.board__more { display: flex; justify-content: center; }
.board__owner {
  display: inline-flex; align-items: center; gap: var(--space-3);
  max-width: 150px;
  font-size: var(--text-sm); color: var(--text-muted);
}
.board__owner.is-mine { color: var(--accent-text); font-weight: var(--weight-semi); }
.board__detail {
  display: flex; flex-direction: column; gap: var(--space-6);
  padding-top: var(--space-2);
}
.board__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.board__ranges { display: flex; flex-direction: column; gap: var(--space-3); max-width: 420px; }

/* ------------------------------------------------------------ TEAM SHEET -- */
.sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-7); flex-wrap: wrap;
  padding: var(--space-7);
}
.sheet__facts { flex: 1; max-width: 460px; min-width: 260px; }
.sheet .slate-formation { margin: 0 var(--space-7); }
.sheet__bench { padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); }
.sheet__tiles { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.sheet__badges { display: inline-flex; align-items: center; gap: var(--space-2); }
.sheet__horizon { display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-2); }
.sheet__horizon-head { display: flex; align-items: center; gap: var(--space-3); }
.piece-age { font-size: var(--text-2xs); color: var(--text-faint); white-space: nowrap; }

/* ------------------------------------------------------- DYNASTY TEAM LAB -- */
.dteam { display: flex; flex-direction: column; gap: var(--space-8); }
.dteam__top-grid,
.dteam__insight-grid,
.dteam__bottom-grid { display: grid; gap: var(--space-6); align-items: stretch; }
.dteam__top-grid { grid-template-columns: minmax(0, 1.75fr) minmax(300px, .85fr); }
.dteam__insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dteam__bottom-grid { grid-template-columns: minmax(300px, .72fr) minmax(0, 1.5fr); }

.dteam__overview .slate-card__body { display: flex; flex-direction: column; gap: var(--space-7); }
.dteam__identity {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-7); flex-wrap: wrap;
}
.dteam__compare-control { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.dteam__scores {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--bg-sunken);
  overflow: hidden;
}
.dteam__score { min-width: 0; padding: var(--space-6); border-inline-end: 1px solid var(--border-subtle); }
.dteam__score:last-child { border-inline-end: 0; }
.dteam__score .slate-stat__value { font-size: var(--text-2xl); }
.dteam__score .slate-stat__label { margin-top: var(--space-2); white-space: normal; line-height: var(--leading-snug); }
.dteam__score .slate-stat__sub { align-items: flex-start; min-height: 34px; }
.dteam__compare-note { display: inline-flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.dteam__compare-note b { color: var(--text-muted); }
.dteam__compare-note b.is-good { color: var(--positive); }
.dteam__compare-note b.is-bad { color: var(--negative); }
.dteam__compare-note span { color: var(--text-faint); }
.dteam__overview-foot { font-size: var(--text-xs); color: var(--text-faint); }

.dteam__outlook .slate-card__body,
.dteam__league .slate-card__body,
.dteam__sources .slate-card__body,
.dteam__composition .slate-card__body,
.dteam__picks .slate-card__body,
.dteam__horizon .slate-card__body { display: flex; flex-direction: column; gap: var(--space-6); }
.dteam__outlook-chart { min-height: 250px; }
.dteam__years { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
.dteam__year {
  display: flex; flex-direction: column; gap: var(--space-1);
  min-width: 0; padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
}
.dteam__year:first-child { border-color: var(--accent-border); background: var(--accent-surface); }
.dteam__year-label { font-size: var(--text-2xs); font-weight: var(--weight-bold); color: var(--text-faint); }
.dteam__year-score { font-family: var(--font-display); font-size: var(--text-xl); color: var(--text-strong); letter-spacing: var(--tracking-tight); }
.dteam__year-unit,
.dteam__year-rank { font-size: var(--text-2xs); color: var(--text-faint); }
.dteam__year-rank { margin-top: var(--space-2); color: var(--text-muted); font-weight: var(--weight-semi); }
.dteam__year .dteam__compare-note { margin-top: var(--space-2); font-size: var(--text-2xs); }

.dteam__league .slate-card__body { justify-content: space-between; }
.dteam__standing { display: flex; flex-direction: column; gap: var(--space-1); }
.dteam__standing-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.dteam__standing-head span { font-size: var(--text-sm); color: var(--text-muted); }
.dteam__standing-head b { font-size: var(--text-sm); color: var(--text-strong); }

.dteam__opponent-key { display: inline-flex; align-items: center; gap: var(--space-3); max-width: 300px; font-size: var(--text-2xs); }
.dteam__opponent-key b,
.dteam__opponent-key span { overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }
.dteam__opponent-key b { color: var(--accent-text); }
.dteam__opponent-key i { width: 12px; height: 1px; flex: none; background: var(--border-strong); }
.dteam__position {
  display: flex; flex-direction: column; gap: var(--space-5);
  min-width: 0; padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-sunken);
}
.dteam__position-head { display: flex; align-items: center; gap: var(--space-3); }
.dteam__position-head > div { display: flex; flex-direction: column; min-width: 0; }
.dteam__position-head b { font-size: var(--text-sm); color: var(--text-strong); }
.dteam__position-head span { font-size: var(--text-2xs); color: var(--text-faint); }
.dteam__facts { display: flex; flex-direction: column; }
.dteam__fact {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-3); border-bottom: 1px solid var(--border-subtle);
}
.dteam__fact:last-child { border-bottom: 0; }
.dteam__fact-label { font-size: var(--text-xs); color: var(--text-muted); }
.dteam__fact-values { display: grid; grid-template-columns: auto auto auto; align-items: baseline; gap: var(--space-3); }
.dteam__fact-values b { color: var(--accent-text); }
.dteam__fact-values small { font-size: var(--text-2xs); color: var(--text-faint); }
.dteam__fact-values i { padding-inline-start: var(--space-3); border-inline-start: 1px solid var(--border-subtle); color: var(--text-muted); font-style: normal; }
.dteam__position-players { display: flex; flex-direction: column; gap: var(--space-1); margin-top: auto; }
.dteam__mini-player {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-2); border-radius: var(--radius-sm); text-align: start;
}
.dteam__mini-player:hover { background: var(--bg-hover); }
.dteam__mini-player span { font-size: var(--text-xs); color: var(--text-default); }
.dteam__mini-player small { font-size: var(--text-2xs); color: var(--text-faint); }
.dteam__mini-player b { font-size: var(--text-xs); color: var(--text-strong); }
.dteam__position-empty { padding: var(--space-2); font-size: var(--text-xs); color: var(--text-faint); }

.dteam__legend { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.dteam__legend span { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.dteam__legend i { width: 8px; height: 8px; border-radius: var(--radius-xs); }
.dteam__mix-rows { display: flex; flex-direction: column; gap: var(--space-5); }
.dteam__mix { display: grid; grid-template-columns: 112px minmax(0, 1fr) 138px; align-items: center; gap: var(--space-5); }
.dteam__mix-head { display: flex; flex-direction: column; }
.dteam__mix-head b { color: var(--text-strong); }
.dteam__mix-head span { font-size: var(--text-2xs); color: var(--text-faint); }
.dteam__mix-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); text-align: end; }
.dteam__stack-block { display: flex; flex-direction: column; gap: var(--space-4); }
.dteam__composition-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.dteam__players .slate-table__row.is-highlighted { box-shadow: inset 3px 0 0 var(--accent); }
.dteam__players .slate-card__actions { margin-inline-start: auto; }

.dteam__pick-years { display: flex; flex-direction: column; gap: var(--space-4); }
.dteam__pick-year {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-5); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); background: var(--bg-sunken);
}
.dteam__pick-year-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); }
.dteam__pick-year-head > div:first-child { display: flex; flex-direction: column; }
.dteam__pick-year-head > div:first-child b { font-family: var(--font-display); color: var(--text-strong); }
.dteam__pick-year-head > div:first-child span { font-size: var(--text-2xs); color: var(--text-faint); }
.dteam__pick-year-value { display: flex; flex-direction: column; align-items: flex-end; }
.dteam__pick-year-value > b { font-size: var(--text-lg); color: var(--accent-text); }
.dteam__pick-year-value .dteam__compare-note { justify-content: flex-end; font-size: var(--text-2xs); }
.dteam__pick-tiles { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.dteam__pick-tiles .slate-pick { width: 92px; }
.dteam__pick-empty { font-size: var(--text-xs); color: var(--text-faint); }
.dteam__horizon { min-width: 0; }
.dteam__horizon .slate-heat { overflow-x: auto; }
.dteam__empty { display: grid; place-items: center; gap: var(--space-3); min-height: 280px; text-align: center; }
.dteam__empty p { color: var(--text-muted); }

@media (max-width: 1120px) {
  .dteam__top-grid,
  .dteam__bottom-grid { grid-template-columns: 1fr; }
  .dteam__scores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dteam__score:nth-child(3) { border-inline-end: 0; }
  .dteam__score:nth-child(-n+3) { border-bottom: 1px solid var(--border-subtle); }
  .dteam__years { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .dteam__insight-grid { grid-template-columns: 1fr; }
  .dteam__mix { grid-template-columns: 88px minmax(0, 1fr); }
  .dteam__mix-values { grid-column: 2; }
}
@media (max-width: 560px) {
  .dteam__identity { align-items: flex-start; }
  .dteam__compare-control { align-items: flex-start; flex-direction: column; width: 100%; }
  .dteam__compare-control .slate-select { width: 100%; }
  .dteam__scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dteam__score:nth-child(3) { border-inline-end: 1px solid var(--border-subtle); }
  .dteam__score:nth-child(2n) { border-inline-end: 0; }
  .dteam__score:nth-child(-n+4) { border-bottom: 1px solid var(--border-subtle); }
  .dteam__years { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dteam__composition-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dteam__opponent-key { display: none; }
}

/* --------------------------------------------------------------- LEDGER -- */
.ledger__wrap { display: flex; flex-direction: column; gap: var(--space-7); }
.pickorder__model { display: flex; flex-direction: column; gap: var(--space-4); }
.pickorder__model p { margin: 0; max-width: 84ch; color: var(--text-muted); line-height: 1.55; }
.pickorder__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pickorder__meta > span:last-child { font-size: var(--text-xs); color: var(--text-faint); }
.pickorder__table { overflow-x: auto; }
.pickorder__row {
  display: grid;
  grid-template-columns: minmax(230px, 2fr) repeat(5, minmax(76px, 0.7fr));
  align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-7);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-muted);
  min-width: 720px;
}
.pickorder__row[type="button"] { width: 100%; background: transparent; text-align: start; cursor: pointer; }
.pickorder__row[type="button"]:hover,
.pickorder__row[type="button"].is-open { background: var(--bg-hover); }
.pickorder__row:last-child { border-bottom: 0; }
.pickorder__row.is-mine { background: var(--accent-surface); box-shadow: inset 3px 0 0 var(--accent); }
.pickorder__row--head {
  padding-block: var(--space-4);
  font-size: var(--text-2xs); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-faint);
}
.pickorder__team { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.pickorder__team > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pickorder__team b { font-size: var(--text-sm); color: var(--text-strong); }
.pickorder__team small { font-size: var(--text-2xs); color: var(--text-faint); }
.pickorder__row > .slate-num { text-align: end; }
.pickorder__distribution {
  display: flex; flex-direction: column; gap: var(--space-4);
  min-width: 720px; padding: var(--space-5) var(--space-7);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-sunken);
}
.pickorder__distribution > b { font-size: var(--text-xs); color: var(--text-strong); }
.pickorder__slots { display: grid; grid-template-columns: repeat(var(--pick-slots), minmax(42px, 1fr)); gap: var(--space-2); }
.pickorder__slots > span {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: var(--bg-surface);
}
.pickorder__slots small { font-size: var(--text-2xs); color: var(--text-faint); }
.pickorder__slots b { font-size: var(--text-xs); color: var(--text-strong); }
.ledger { display: flex; flex-direction: column; min-width: 0; overflow-x: auto; }
.ledger__row {
  display: grid;
  grid-template-columns: minmax(200px, 1.3fr) repeat(3, minmax(190px, 1.6fr)) minmax(120px, auto);
  align-items: center; gap: var(--space-5);
  padding: var(--space-4) var(--space-7);
  border-bottom: 1px solid var(--border-subtle);
}
.ledger__row:last-child { border-bottom: 0; }
.ledger__row.is-mine { background: var(--accent-surface); box-shadow: inset 3px 0 0 var(--accent); }
.ledger__row--head {
  padding-block: var(--space-4);
  font-size: var(--text-2xs); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-faint);
}
.ledger__row--head .ledger__sum { text-align: end; }
.ledger__team { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.ledger__n { width: 18px; font-size: var(--text-2xs); color: var(--text-faint); }
.ledger__names { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ledger__names > .slate-truncate { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semi); color: var(--text-strong); }
.ledger__user { font-size: var(--text-2xs); color: var(--text-faint); }
.ledger__year { text-align: start; }
.ledger__cell { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ledger__none { color: var(--text-faint); font-size: var(--text-sm); }
.ledger__pick {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 24px; padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  font-size: var(--text-xs); color: var(--text-muted);
}
.ledger__pick b { font-weight: var(--weight-bold); color: var(--text-strong); }
.ledger__pick .slate-num { font-size: var(--text-2xs); }
.ledger__pick--r1 { border-color: var(--accent-border); background: var(--accent-surface); }
.ledger__pick--r1 b { color: var(--accent-text); }
.ledger__pick.is-acquired { border-style: dashed; }
.ledger__sum { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.ledger__sum b { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-strong); }
.ledger__sum small { font-size: var(--text-2xs); color: var(--text-faint); white-space: nowrap; }

/* -------------------------------------------------------------- COMPARE -- */
.compare .slate-modal__body { display: flex; flex-direction: column; gap: var(--space-6); }
.compare .slate-modal__body > *,
.dossier .slate-modal__body > * { flex: none; }
.compare__grid { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: var(--space-5); }
.compare__col {
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--tone, var(--accent));
  border-radius: var(--radius-lg);
  background: var(--bg-sunken);
}
.compare__who { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.compare__name { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-strong); letter-spacing: -0.015em; }
.compare__tags { display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; }
.compare__facts { display: flex; flex-direction: column; }
.compare__fact {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.compare__fact:last-child { border-bottom: 0; }
.compare__fact dt { font-size: var(--text-xs); color: var(--text-muted); }
.compare__fact dd { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semi); color: var(--text-strong); }
.compare__fact.is-best dd { color: var(--accent-text); }
@media (max-width: 720px) { .compare__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* -------------------------------------------------------------- MATCHUPS -- */
.mu.is-mine { border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-border), var(--shadow-md); }
.mu.is-mine .mu__id { color: var(--accent-text); }
.mu__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-7) 0;
}
.mu__id {
  font-size: var(--text-2xs); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-faint);
}
.mu__heads {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-7);
}
.mu__teamhead .slate-teamhead__name { align-items: flex-start; line-height: 1.15; }
.mu__teamhead .slate-teamhead__name .slate-truncate {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.mu__odds { padding: 0 var(--space-7) var(--space-5); }
.mu__median { padding: 0 var(--space-7) var(--space-6); margin-top: calc(var(--space-2) * -1); }
.mu__lines { padding: 0 var(--space-7) var(--space-5); }
.mu__benches {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-7);
}
.mu__bench { display: flex; flex-direction: column; gap: 1px; }
.mu__bench.is-end { text-align: end; }
.mu__bench-row {
  display: flex; justify-content: space-between; gap: var(--space-4);
  font-size: var(--text-sm); color: var(--text-muted);
  padding-block: 1px;
}
.mu__bench.is-end .mu__bench-row { flex-direction: row-reverse; }
.mu__bench-row .slate-num { color: var(--text-default); }

/* --------------------------------------------------------------- POWER -- */
.power { display: flex; flex-direction: column; gap: var(--space-7); }
.power__controls { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.power__list { display: flex; flex-direction: column; }

.power__row { border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
.power__row:last-child { border-bottom: 0; }
.power__row:hover .power__main { background: var(--bg-hover); }
.power__row.is-open .power__main { background: var(--bg-sunken); }
.power__row.is-mine .power__main { box-shadow: inset 3px 0 0 var(--accent); }

.power__main {
  display: grid;
  grid-template-columns: 26px 32px minmax(120px, 1.1fr) minmax(180px, 2fr) auto auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-7);
  transition: background-color var(--dur-1) linear;
}
.power__team { min-width: 0; }
.power__name { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-strong); }
.power__user { font-size: var(--text-2xs); color: var(--text-faint); }
.power__mid { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

.power__chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.power__chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 2px var(--space-3) 2px 2px;
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  font-size: var(--text-2xs); color: var(--text-muted);
}
.power__chip:hover { background: var(--bg-active); }
.power__chip b { font-weight: var(--weight-bold); }
.power__chip b.is-first { color: var(--accent-text); }

.power__top3 { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.power__pill {
  display: inline-flex; align-items: center; gap: var(--space-3);
  max-width: 190px;
  padding: 2px var(--space-4) 2px 2px;
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  font-size: var(--text-xs); color: var(--text-default);
}
.power__pill:hover { background: var(--bg-active); }
.power__pill b { font-size: var(--text-2xs); color: var(--text-faint); font-weight: var(--weight-bold); }
.power__pill i { font-style: normal; font-weight: var(--weight-bold); color: var(--text-strong); }

.power__trend { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.power__score { display: flex; flex-direction: column; align-items: flex-end; min-width: 78px; }
.power__score b {
  font-family: var(--font-display);
  font-size: var(--text-xl); font-weight: var(--weight-bold);
  color: var(--text-strong); font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.power__score small { font-size: var(--text-2xs); color: var(--text-faint); }

.power__panel {
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-2) var(--space-7) var(--space-8);
  background: var(--bg-sunken);
  animation: slate-rise var(--dur-3) var(--ease-out);
}
.power__outlook { display: flex; flex-direction: column; gap: var(--space-6); }
.power__charthead { display: flex; align-items: center; gap: var(--space-3); margin-bottom: calc(var(--space-6) * -1 + var(--space-2)); }
.power__rooms {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.power__room {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.power__room-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-2);
}
.power__room-rank { font-size: var(--text-2xs); color: var(--text-faint); flex: 1; }
.power__room-val { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-strong); }
.power__line {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--text-default);
  text-align: start;
}
.power__line:hover { background: var(--bg-hover); }
.power__line-name { flex: 1; min-width: 0; }
.power__line-rank { font-size: var(--text-2xs); color: var(--text-faint); }
.power__line-val { font-weight: var(--weight-bold); color: var(--text-strong); }
.power__line-empty { font-size: var(--text-sm); color: var(--text-faint); padding: var(--space-2); }

.ladder { display: flex; flex-direction: column; gap: var(--space-4); }
.ladder__head {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-md); font-weight: var(--weight-semi);
  color: var(--text-strong);
  text-align: start;
}
.ladder__head:hover { color: var(--accent-text); }
.ladder__list { display: flex; flex-direction: column; gap: 1px; }
.ladder__list li {
  display: grid; grid-template-columns: 18px 1fr auto;
  align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs);
  font-size: var(--text-sm); color: var(--text-muted);
}
.ladder__list li.is-lead { background: var(--bg-sunken); color: var(--text-strong); font-weight: var(--weight-semi); }
.ladder__list li.is-mine { box-shadow: inset 2px 0 0 var(--accent); color: var(--accent-text); }
.ladder__n { font-family: var(--font-num); font-size: var(--text-2xs); color: var(--text-faint); }
.ladder__v { font-family: var(--font-num); color: var(--text-default); }

/* ----------------------------------------------------------- TRADE DESK -- */
.desk { display: flex; flex-direction: column; gap: var(--space-8); container: desk / inline-size; }
.desk__bar { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
/* adding a team is the desk's own business, so it sits at the bar's far end */
.desk__add { margin-inline-start: auto; }
.desk__add .slate-select__trigger { font-weight: var(--weight-semi); }
.desk__barfield { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.desk__who {
  display: inline-flex; align-items: center; gap: var(--space-3);
  max-width: 280px;
  font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-bold);
  letter-spacing: -0.015em; color: var(--text-strong);
}
.desk__side.is-mine { border-color: var(--accent-border); }
.desk__evalbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.desk__balance { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.desk__props { display: flex; flex-direction: column; gap: var(--space-5); }
.desk__propshead { font-size: var(--text-lg); font-weight: var(--weight-semi); }
.desk__sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
/* three teams share a row while three tiles still fit across each roster
   (92px tiles, 8px gaps, 16px padding), else the third takes the full width
   under the first two; four sit two by two */
.desk__sides[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container desk (max-width: 1010px) {
  .desk__sides[data-n="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desk__sides[data-n="3"] > :last-child { grid-column: 1 / -1; }
}
@container desk (max-width: 820px) {
  .desk__sides, .desk__sides[data-n="3"] { grid-template-columns: minmax(0, 1fr); }
}

.desk__head {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-6) var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.desk__ident { min-width: 0; flex: 1; }
.desk__remove { align-self: flex-start; flex: none; }
/* what a team gets in a three- or four-team deal, by sender */
.desk__incoming {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-sunken);
}
.desk__incoming-label {
  flex: none;
  padding-top: 5px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-faint);
}
.desk__inrows { display: grid; gap: var(--space-3); min-width: 0; }
.desk__inrow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.desk__from { display: inline-flex; flex: none; margin-inline-end: var(--space-1); }
.desk__inrow .slate-chip { height: 24px; max-width: 100%; min-width: 0; font-size: var(--text-xs); }
.desk__ident .slate-select { width: 100%; }
.desk__ident .slate-select__trigger {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  padding-inline: var(--space-3);
  height: 30px;
}
.desk__tags {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding-inline: var(--space-3);
  font-size: var(--text-2xs); color: var(--text-faint);
}
.desk__tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6);
}
.desk__picks { border-top: 1px solid var(--border-subtle); }
.desk__picks .slate-divider--labelled { padding: var(--space-5) var(--space-6) 0; }
.desk__picks .desk__tiles { padding-top: var(--space-5); }
.desk__eval { display: flex; flex-direction: column; gap: var(--space-6); }

/* scouted deals tile at one standard width, whatever the screen; only a
   screen narrower than a card shrinks it */
.prop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, min(100%, 350px));
  justify-content: start;
  gap: var(--space-5);
}
/* a deal around a loop has a section per team, so its cards are wider */
.prop-grid--multi { grid-template-columns: repeat(auto-fill, min(100%, 540px)); }
.prop-grid--multi[data-n="4"] { grid-template-columns: repeat(auto-fill, min(100%, 720px)); }
/* a scouted deal: one section per sending team */
.prop { container: prop / inline-size; }
.prop__sides { display: grid; grid-template-columns: repeat(var(--prop-n, 2), minmax(0, 1fr)); }
.prop__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-6) var(--space-5);
}
.prop__side + .prop__side { border-inline-start: 1px solid var(--border-subtle); }
.prop__team { display: flex; align-items: flex-start; gap: var(--space-4); min-width: 0; }
/* the full name, wrapped: never an ellipsis */
.prop__name {
  flex: 1;
  min-width: 0;
  padding-top: 3px;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}
.prop__verb {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-faint);
}
.prop__pieces { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; flex: 1; }
.prop__piece {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
/* names break between words, never inside one */
.prop__piece-name { min-width: 0; font-weight: var(--weight-semi); color: var(--text-strong); overflow-wrap: normal; word-break: normal; line-height: 1.2; }
.prop__piece b { font-size: var(--text-sm); color: var(--text-muted); text-align: end; }
.prop__pick-round {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-active);
  font-size: 9px;
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}
.prop__gains {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.prop__gain { display: grid; gap: 2px; }
.prop__gain b { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-black); letter-spacing: -0.03em; }
.prop__gain b.is-up { color: var(--positive); }
.prop__gain b.is-down { color: var(--negative); }
.prop__gain b.is-flat { color: var(--text-muted); }
.prop__gain small {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}
.prop.is-mutual { border-color: var(--positive-border); }
/* "Sends to" over the destination: its picture and full name as one unit */
.prop__route { display: grid; gap: var(--space-2); min-width: 0; }
.prop__dest { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.prop__dest .slate-avatar { flex: none; }
.prop__to {
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  line-height: 1.3;
  color: var(--text-default);
  overflow-wrap: anywhere;
}
/* too narrow for a section per team: the loop reads top to bottom */
@container prop (max-width: 480px) {
  .prop--multi .prop__sides { grid-template-columns: minmax(0, 1fr); }
  .prop--multi .prop__side + .prop__side { border-inline-start: 0; border-top: 1px solid var(--border-subtle); }
}
@container prop (max-width: 680px) {
  .prop--multi[data-n="4"] .prop__sides { grid-template-columns: minmax(0, 1fr); }
  .prop--multi[data-n="4"] .prop__side + .prop__side { border-inline-start: 0; border-top: 1px solid var(--border-subtle); }
}

.grade__inner { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-6); }
.grade__text { flex: 1; min-width: 0; }
.grade__team { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-strong); }

/* --------------------------------------------------------- TRADE LEDGER -- */
.tledger { display: flex; flex-direction: column; }
.tledger__row {
  display: grid; grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-5) var(--space-7);
  border-bottom: 1px solid var(--border-subtle);
}
.tledger__row.is-interactive {
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.tledger__row.is-interactive:hover { background: var(--bg-hover); }
html[data-focus-mode="keyboard"] .tledger__row.is-interactive:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-md); }
.tledger__row:last-child { border-bottom: 0; }
.tledger__meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.tledger__date { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--text-strong); }
.tledger__open { font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent-text); }
.tledger__sides { display: grid; grid-template-columns: repeat(var(--tl-n, 2), minmax(0, 1fr)); gap: var(--space-5); }
.tledger__side { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); background: var(--bg-sunken); transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.tledger__row.is-interactive:hover .tledger__side { border-color: var(--border-default); transform: translateY(-1px); }
.tledger__side.is-mine { box-shadow: inset 0 0 0 1px var(--accent-border); }
.tledger__team { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--text-strong); }
.tledger__team { min-width: 0; }
.tledger__score { display: inline-flex; align-items: baseline; gap: var(--space-2); flex: none; margin-inline-start: auto; }
.tledger__score b { color: var(--text-strong); }
.tledger__score small { font-size: var(--text-2xs); font-weight: var(--weight-semi); color: var(--text-muted); white-space: nowrap; }
/* the winner's number carries the verdict; the other side's goes quiet */
.tledger__side.is-winner .tledger__score b { color: var(--accent-text); }
.tledger__side.is-loser .tledger__score b { color: var(--text-muted); }
.tledger__got { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.tledger__none { font-size: var(--text-xs); color: var(--text-faint); }
/* chips never outgrow their side: a long "via <team>" truncates inside it */
.tledger__got .slate-chip { height: 24px; max-width: 100%; min-width: 0; font-size: var(--text-xs); }
.tledger__got .slate-chip__sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------ TRADE DETAILS -- */
.tdetail__note { margin: 0 0 var(--space-6); font-size: var(--text-sm); color: var(--text-muted); }
.tdetail__sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-6); }
.tdetail__side { min-width: 0; padding: var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--bg-sunken); }
.tdetail__team { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.tdetail__identity { min-width: 0; flex: 1; }
.tdetail__identity h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-strong); }
.tdetail__identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); color: var(--text-faint); }
.tdetail__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--space-4); background: var(--bg-surface); }
.tdetail__packages { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-6); }
.tdetail__asset-group { min-width: 0; }
.tdetail__asset-group h4 { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-faint); }
.tdetail__assets { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); }
.tdetail__assets .slate-tile { width: 126px; }
.tdetail__assets .slate-pick { width: 104px; }
.tdetail__none { font-size: var(--text-sm); color: var(--text-faint); }
.tdetail__chart { margin-top: var(--space-6); }
@media (max-width: 720px) {
  .tledger__row { grid-template-columns: 1fr; }
  .tledger__sides { grid-template-columns: 1fr; }
  .tdetail__sides, .tdetail__packages { grid-template-columns: 1fr; }
  .tdetail__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.grade__delta { font-size: var(--text-sm); color: var(--text-muted); }
.grade__letter {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  letter-spacing: -0.04em;
  color: var(--text-faint);
}
.grade__letter.is-good { color: var(--positive); }
.grade__letter.is-bad { color: var(--negative); }

/* -------------------------------------------------------------- DOSSIER -- */
.dossier__head { display: flex; align-items: center; gap: var(--space-6); min-width: 0; flex: 1; }
.dossier__ident { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.dossier__name {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.035em;
}
.dossier__tags { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.dossier__actions { display: flex; align-items: center; margin-inline-start: auto; padding-inline-end: var(--space-2); }
.dossier .slate-modal__body { display: flex; flex-direction: column; gap: var(--space-7); }
.dossier__facts { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.dossier__ranges { display: flex; flex-direction: column; gap: var(--space-3); }
/* the game log: season switch, a points bar per game, then the lines */
.gamelog { display: grid; gap: var(--space-5); min-width: 0; }
.gamelog > .slate-seg { justify-self: start; }
.gamelog__opp { display: inline-flex; align-items: baseline; gap: var(--space-3); white-space: nowrap; }
.gamelog__team {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  color: var(--text-faint);
}
.gamelog__missed { font-size: var(--text-xs); color: var(--text-faint); white-space: nowrap; }

@media (max-width: 640px) {
  .dossier__head { gap: var(--space-4); }
  .dossier__name { font-size: var(--text-xl); }
  .power__main { grid-template-columns: 26px 32px 1fr auto; row-gap: var(--space-4); }
  .power__mid { grid-column: 1 / -1; }
  .power__trend { display: none; }
  .mu__heads, .mu__benches { grid-template-columns: 1fr; }
}

.slate-sidebar__settings .shell__search{flex:1;min-width:0}.slate-sidebar__settings .shell__search-btn{font-size:11px;padding:6px 0;gap:8px}.shell__search.is-open .shell__search-field{position:absolute;bottom:44px;left:0;width:260px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:10px;box-shadow:var(--shadow-lg)}
@media(max-width:860px){.slate-sidebar__settings:has(.shell__search){flex-direction:column;gap:10px}.shell__search.is-open .shell__search-field{left:56px;bottom:0;width:240px}}

.shell__league-product .provider-badge img{max-height:16px;max-width:66px}

.shell__provider-note{font-size:12px;color:var(--text-muted);margin:0 0 18px}

/* ---- Matchups: the breakdown above the grid ---- */
.mu-page { display: grid; gap: var(--space-8); }
.mb { container: mb / inline-size; }
.mb .slate-card__actions { display: flex; align-items: center; gap: var(--space-4); }
.mb__body { display: grid; gap: var(--space-7); }
.mb__outlook {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}
.mb__outlook .slate-metric-strip { --strip-cols: 2; }
.mb__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
/* cards inside the breakdown sit a step down, not a second raised layer */
.mb__grid > .slate-card { background: var(--bg-sunken); box-shadow: none; }
.mb__count { font: 800 16px var(--font-display); color: var(--text-strong); }
.mb__note { margin: 0 0 var(--space-4); font-size: var(--text-xs); color: var(--text-muted); }
.mb__muted { font-size: var(--text-sm); color: var(--text-muted); }
.mb__sides {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.mb__sides span:last-child { text-align: right; }
.mb__sides span:first-child::before { content: "← "; color: var(--accent-text); }
.mb__sides span:last-child::after { content: " →"; color: var(--text-faint); }

.mb__player { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.mb__player-text { display: grid; min-width: 0; text-align: left; }
.mb__player-text b { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--text-strong); }
.mb__player-text small { font-size: var(--text-2xs); color: var(--text-muted); }

.mb__swings { display: grid; gap: var(--space-3); }
.mb__swing {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.mb__swing.is-a { box-shadow: inset 3px 0 0 var(--accent); }
.mb__swing.is-b { box-shadow: inset 3px 0 0 var(--series-2); }
.mb__swing:hover,
.mb__swing:focus-visible { border-color: var(--border-strong); background: var(--bg-hover); }
.mb__swing .slate-range__label { display: none; }
.mb__swing-odds { display: flex; gap: var(--space-5); }
.mb__swing-odds span { display: grid; justify-items: end; }
.mb__swing-odds small {
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.mb__swing-odds b { font-size: var(--text-sm); color: var(--text-strong); }

.mb__swaps { display: grid; gap: var(--space-4); }
.mb__swap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.mb__swap-pts { font-size: var(--text-xs); color: var(--text-muted); }
.mb__swap-gain { font-size: var(--text-sm); color: var(--positive); }
.mb__odds-move { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.mb__odds-move b { color: var(--text-strong); }
.mb__odds-move b.is-up { color: var(--positive); }

.mb__avail { display: grid; gap: var(--space-4); }
.mb__avail-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
}
.mb__slot {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

/* the breakdown lays out by its own width: the page column, not the window */
@container mb (max-width: 980px) {
  .mb__outlook { grid-template-columns: minmax(0, 1fr); }
  .mb__outlook .slate-metric-strip { --strip-cols: 4; }
  .mb__outlook .slate-metric-strip.is-five { --strip-cols: 5; }
}
@container mb (max-width: 760px) {
  .mb__grid { grid-template-columns: minmax(0, 1fr); }
}
@container mb (max-width: 520px) {
  .mb__outlook .slate-metric-strip,
  .mb__outlook .slate-metric-strip.is-five { --strip-cols: 2; }
  .mb__swing { grid-template-columns: minmax(0, 1fr) auto; }
  .mb__swing .slate-range { grid-column: 1 / -1; grid-row: 2; }
  .mb__swap-pts { display: none; }
  .mb__sides { margin-left: 0; margin-right: 0; }
}
/* team names make long metric labels: let them wrap, not clip */
.mb .slate-metric__label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }

/* ---- Trade desk: what the deal does ---- */
.ti { display: grid; gap: var(--space-6); container: ti / inline-size; }
.ti__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
/* three or four teams: the odds and room tables take a row each, and the
   pieces tables fill the row as they fit */
.ti--multi .ti__grid:first-child { grid-template-columns: minmax(0, 1fr); }
.ti__grid--pieces { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.ti__via { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 150px; min-width: 0; }
.ti__season > .slate-card { height: 100%; }
.ti__move { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.ti__move > span:first-child { color: var(--text-muted); }
.ti__move b { font-weight: var(--weight-bold); color: var(--text-strong); }
.ti__move b.is-up { color: var(--positive); }
.ti__move b.is-down { color: var(--negative); }
.ti__arrow { color: var(--text-faint); font-size: var(--text-xs); }
.ti__muted { color: var(--text-faint); }
@container ti (max-width: 760px) {
  .ti__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- projections · the week's briefing (projection-briefing.js) ---------- */
.pb { container: pb / inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); min-width: 0; }
.pb__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.pb__title { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); letter-spacing: -0.01em; color: var(--text-strong); }
.pb__nav { display: inline-flex; gap: var(--space-2); }
/* the strip pads for the tickets' hover lift; rings sit inside each border box */
.pb__strip {
  position: relative;
  display: flex; gap: var(--space-4);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: 2px;
  padding: 4px 2px 12px; scrollbar-width: thin;
}
.pb__cell { flex: 0 0 auto; display: flex; scroll-snap-align: start; }

/* a game ticket: head (teams + total), split, a perforation with notches, the
   player carrying each side. Rows have fixed heights so the notches land on
   the perforation (--perf). */
.pb-ticket {
  --notch: 8px;
  --perf: 84px;
  position: relative;
  display: grid; grid-template-rows: 32px 14px auto; row-gap: var(--space-4);
  width: 236px; padding: var(--space-5) var(--space-5) var(--space-4);
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
  font: inherit; text-align: left; color: var(--text-default);
  -webkit-mask:
    radial-gradient(circle var(--notch) at 0 var(--perf), transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--notch) at 100% var(--perf), transparent 98%, #000) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle var(--notch) at 0 var(--perf), transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--notch) at 100% var(--perf), transparent 98%, #000) right / 51% 100% no-repeat;
}
button.pb-ticket { cursor: pointer; transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.pb-ticket__head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.pb-ticket__team { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 0; }
.pb-ticket__team.is-end { flex-direction: row-reverse; justify-self: end; }
.pb-ticket__team b { font-family: var(--font-display); font-weight: 800; font-size: var(--text-md); letter-spacing: .02em; color: var(--text-strong); }
.pb-ticket__total { display: grid; justify-items: center; line-height: 1; }
.pb-ticket__total b { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: -0.03em; color: var(--text-strong); }
.pb-ticket__total small { margin-top: 2px; font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.pb-ticket__split { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); font-size: var(--text-2xs); color: var(--text-muted); }
.pb-ticket__bar { position: relative; height: 6px; border-radius: var(--radius-pill); background: var(--series-2); overflow: hidden; }
.pb-ticket__bar i { position: absolute; inset-block: 0; left: 0; width: var(--a); background: var(--accent); box-shadow: 2px 0 0 var(--bg-surface); }
.pb-ticket__stars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding-top: var(--space-4); border-top: 1px dashed var(--border-default); }
.pb-ticket__star { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.pb-ticket__star.is-end { flex-direction: row-reverse; text-align: right; }
.pb-ticket__star-text { display: grid; min-width: 0; line-height: 1.25; }
.pb-ticket__star-text span { font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-ticket__star-text small { font-size: var(--text-2xs); color: var(--text-muted); }
.pb-ticket.is-on { border-color: var(--accent); background: var(--accent-surface); }
.pb-ticket.is-on .pb-ticket__bar i { box-shadow: 2px 0 0 var(--accent-surface); }
button.pb-ticket:hover:not(.is-on),
button.pb-ticket:focus-visible:not(.is-on) { border-color: var(--border-strong); background: var(--bg-surface-raised); }
button.pb-ticket:focus-visible { outline: none; border-color: var(--accent); }
button.pb-ticket:active { transform: scale(.985); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  button.pb-ticket:hover { transform: translateY(-2px); }
  button.pb-ticket:active { transform: translateY(0) scale(.985); }
}
.pb-ticket.is-bye { grid-template-rows: auto 1fr; align-content: start; row-gap: var(--space-3); background: transparent; border-style: dashed; -webkit-mask: none; mask: none; }
.pb-ticket__bye-label { font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.pb-ticket__byes { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-content: start; }
.pb-ticket__bye { display: inline-flex; align-items: center; gap: var(--space-2); }
.pb-ticket__bye b { font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--text-muted); }

/* the cards under the strip: swings full width in the middle size, where its
   two lists sit side by side; three across when there is room */
.pb__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
@container pb (min-width: 700px) {
  .pb__cards[data-n="2"], .pb__cards[data-n="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb__cards[data-n="3"] > .pb-card--swings { grid-column: 1 / -1; }
  .pb__cards[data-n="3"] .pb-swing { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
}
@container pb (min-width: 1100px) {
  .pb__cards[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pb__cards[data-n="3"] > .pb-card--swings { grid-column: auto; }
  .pb__cards[data-n="3"] .pb-swing { grid-template-columns: minmax(0, 1fr); }
}
.pb-card { height: 100%; }
.pb-list { display: grid; gap: var(--space-1); }
.pb-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4);
  width: calc(100% + 2 * var(--space-3)); margin-inline: calc(-1 * var(--space-3));
  padding: var(--space-3); border: 0; border-radius: var(--radius-md);
  background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.pb-row:hover, .pb-row:focus-visible { outline: none; background: var(--bg-hover); box-shadow: inset 3px 0 0 var(--accent); }
.pb-row:active { background: var(--bg-active); }
.pb-row__text { display: grid; min-width: 0; line-height: 1.3; }
.pb-row__text b { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--text-strong); overflow-wrap: normal; word-break: normal; }
.pb-row__text small { font-size: var(--text-2xs); color: var(--text-muted); }
.pb-row__swing { display: inline-flex; align-items: center; gap: var(--space-3); }
.pb-row__bar { width: 52px; height: 6px; border-radius: var(--radius-pill); background: var(--chart-track); overflow: hidden; }
.pb-row__bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; }
.pb-row.is-up .pb-row__bar i { background: var(--positive); }
.pb-row.is-down .pb-row__bar i { background: var(--negative); }
.pb-row__swing b { min-width: 40px; text-align: right; font-family: var(--font-num); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.pb-row.is-up .pb-row__swing b { color: var(--positive); }
.pb-row.is-down .pb-row__swing b { color: var(--negative); }
.pb-row__odds, .pb-row__gain { display: grid; justify-items: end; line-height: 1.1; }
.pb-row__odds b, .pb-row__gain b { font-family: var(--font-num); font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-strong); }
.pb-row__gain b { color: var(--positive); }
.pb-row__odds small, .pb-row__gain small { font-size: var(--text-2xs); color: var(--text-faint); }
.pb-row--swap { grid-template-columns: minmax(0, 1fr) auto; }
.pb-row--swap .slate-swapcell { min-width: 0; }
.pb-swing { display: grid; gap: var(--space-5); }
.pb-swing__label { display: block; margin-bottom: var(--space-2); font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.pb-empty { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.pb-row__gain b.is-short { color: var(--text-muted); }
/* touch screens scroll the strip by hand; narrow cards keep the number, drop the bar */
@media (hover: none) { .pb__nav { display: none; } }
@container pb (max-width: 520px) {
  .pb__nav { display: none; }
  .pb-row__bar { display: none; }
}
@media (max-width: 640px) {
  .board .slate-table thead th, .board .slate-table tbody td { padding-inline: var(--space-3); }
  .board .slate-table thead th { letter-spacing: .04em; }
  .board .slate-playercell { gap: var(--space-4); }
  .board .slate-playercell__meta { flex-wrap: wrap; row-gap: 2px; }
  .board .slate-table thead th:first-child, .board .slate-table tbody td:first-child { padding-inline-start: var(--space-5); }
  .board .slate-table thead th:last-child, .board .slate-table tbody td:last-child { padding-inline-end: var(--space-5); }
}

/* ---- a page above the plan: a locked card for each component (locked-pages.js) */
.locked-page { container: lockedpage / inline-size; }
.locked-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@container lockedpage (min-width: 680px) {
  .locked-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .locked-grid > .is-wide { grid-column: 1 / -1; }
}
.dossier__locked { display: grid; gap: var(--space-3); margin-top: var(--space-4); }