/* ============================================================================
   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");

/* ----------------------------------------------------------------- SHELL -- */
.shell__view { display: flex; flex-direction: column; min-width: 0; }
.shell__status { display: flex; align-items: center; gap: var(--space-4); }
.shell__league-switcher { max-width: 270px; }
.slate-top .shell__league-switcher .slate-select__trigger {
  height: 52px;
  padding: 2px var(--space-2);
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  box-shadow: none;
}
.slate-top .shell__league-switcher .slate-select__trigger:hover,
.slate-top .shell__league-switcher.is-open .slate-select__trigger {
  border: 0;
  background: rgba(255,255,255,.08);
  box-shadow: none;
}
[data-theme="light"] .slate-top .shell__league-switcher .slate-select__trigger:hover,
[data-theme="light"] .slate-top .shell__league-switcher.is-open .slate-select__trigger {
  background: rgba(20,18,16,.06);
}
.slate-top .shell__league-switcher .slate-select__value { gap: var(--space-3); }
.slate-top .shell__league-switcher .slate-select__caret { color: #fff; }
[data-theme="light"] .slate-top .shell__league-switcher .slate-select__caret { color: #000; }
.shell__league-copy { display: flex; flex-direction: column; min-width: 0; text-align: start; }
.shell__league-product {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--weight-black);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #fff;
}
.shell__league-name {
  max-width: 190px;
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: .01em;
  color: #fff;
}
[data-theme="light"] .shell__league-product,
[data-theme="light"] .shell__league-name { color: #000; }
/* Sits with the league switcher, styled like the search glyph opposite it so
   the two ends of the bar read as one control set. */
.shell__refresh { display: flex; align-items: center; flex: none; }
.shell__refresh-btn {
  width: 36px; height: 36px; border-radius: 50%; color: #fff;
  transition: background-color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out);
}
[data-theme="light"] .shell__refresh-btn { color: #000; }

.shell__search { position: relative; z-index: 3; width: 36px; height: 36px; flex: none; }
.shell__search-btn {
  position: absolute; z-index: 2; top: 0; right: 0;
  width: 36px; height: 36px; border-radius: 50%; color: #fff;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
[data-theme="light"] .shell__search-btn,
[data-theme="light"] .shell__search.is-open .shell__search-btn { color: #000; }
.slate-top .shell__search-field {
  position: absolute; z-index: 1; top: 0; right: 0;
  width: 36px; height: 36px;
  padding-inline: 16px 44px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transform-origin: right center;
  transition: width 500ms cubic-bezier(.16, 1, .3, 1),
              opacity 160ms var(--ease-out),
              visibility 0s linear 500ms;
}
[data-theme="light"] .slate-top .shell__search-field {
  background: rgba(255,255,255,.72);
  border-color: rgba(20,18,16,.14);
}
.slate-top .shell__search-field .slate-input__control,
.slate-top .shell__search-field .slate-input__control::placeholder {
  color: #fff;
  opacity: 1;
}
[data-theme="light"] .slate-top .shell__search-field .slate-input__control,
[data-theme="light"] .slate-top .shell__search-field .slate-input__control::placeholder {
  color: #000;
}
.slate-top .shell__search.is-open .shell__search-field {
  width: var(--shell-search-open-width, 220px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.shell__search.is-open .shell__search-btn {
  background: transparent;
  border-color: transparent;
}
.slate-top .shell__search-field:hover:not(.is-disabled) { border-color: rgba(255,255,255,.34); box-shadow: none; }
html[data-focus-mode="keyboard"] .slate-top .shell__search-field:focus-within { border-color: rgba(255,255,255,.34); box-shadow: none; }
[data-theme="light"] .slate-top .shell__search-field:hover:not(.is-disabled) { border-color: rgba(20,18,16,.28); }
html[data-focus-mode="keyboard"][data-theme="light"] .slate-top .shell__search-field:focus-within { border-color: rgba(20,18,16,.28); }
.slate-top .shell__search-field .slate-input__control:focus-visible { outline: none; }
.shell__identity { display: flex; min-width: 0; }
.shell__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.shell__toolbar[hidden] { display: none; }
.boot-error { display: grid; place-items: center; min-height: 100vh; }

@container (max-width: 1240px) {
  .shell__league-name { display: none; }
  .shell__league-switcher { max-width: 150px; }
}
@container (max-width: 1040px) {
  .shell__league-copy { display: none; }
  .shell__league-switcher { max-width: 68px; }
}

/* --------------------------------------------------------- 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__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); }
.desk__bar { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.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: 1fr 1fr; gap: var(--space-6); }
@media (max-width: 960px) { .desk__sides { grid-template-columns: 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__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); }

.prop__head {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.prop__partner { flex: 1; font-size: var(--text-md); font-weight: var(--weight-semi); color: var(--text-strong); }
.prop__body {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
  padding: var(--space-6);
}
.prop__col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.prop__col > .slate-chip { max-width: 100%; }
.prop__foot {
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-sunken);
  font-size: var(--text-xs); color: var(--text-muted);
}

.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: 1fr 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 b { margin-inline-start: auto; color: var(--accent-text); }
.tledger__got { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tledger__none { font-size: var(--text-xs); color: var(--text-faint); }
.tledger__got .slate-chip { height: 24px; font-size: var(--text-xs); }

/* ------------------------------------------------------ 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(2, minmax(0, 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); }

@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, .prop__body { grid-template-columns: 1fr; }
}