/* NHL Stacks — ranked board. */

.st-types { display: flex; flex-wrap: wrap; gap: 6px; }
.st-teams { margin-top: -4px; }
.st-sort { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.st-sel {
  background: var(--bg-card); border: 1px solid var(--border-card); color: var(--text-1);
  font-family: var(--ih-mono); font-size: 12px; border-radius: 999px; padding: 5px 12px;
  text-transform: none; letter-spacing: 0;
}
.st-sel:focus-visible { outline: 2px solid var(--ice); outline-offset: 1px; }

.st-board { overflow: hidden; }
.st-row {
  display: grid;
  grid-template-columns: 34px minmax(170px, 1.1fr) minmax(0, 2.6fr) 72px 60px 60px 64px 140px;
  gap: 12px; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid var(--ih-rule);
  font-size: 13px;
  transition: background var(--ih-fast);
}
.st-row:last-child { border-bottom: 0; }
.st-row:hover { background: var(--ih-cell); }
.st-row .r { text-align: right; }
.st-headrow {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
  background: var(--ih-cell); padding-top: 9px; padding-bottom: 9px;
}
.st-headrow:hover { background: var(--ih-cell); }
.st-row.partial { opacity: .72; }

.st-rank { font-size: 15px; font-weight: 700; color: var(--text-3); text-align: center; }
.st-row:nth-child(-n+3) .st-rank { color: var(--ice); }
.st-stack { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-stack > span { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.st-stack b { font-size: 14px; font-weight: 800; }
.st-stack small { flex-basis: 100%; font-size: 11px; }
.st-type {
  font-family: var(--ih-mono); font-size: 10.5px; font-weight: 800; padding: 2px 6px; border-radius: 4px;
  background: var(--ice-dim); color: var(--ice);
}
.st-type.pp   { background: var(--goal-dim); color: var(--goal); }
.st-type.d    { background: rgba(37,99,235,.13); color: var(--crease); }
.st-type.mini { background: var(--ih-cell); color: var(--text-2); }

.st-players { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.st-pl {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 4px; border-radius: 999px;
  background: var(--bg-surface); border: 1px solid var(--border-card); font-size: 12px; white-space: nowrap;
}
.st-pl b { font-weight: 600; }
.st-pl i { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.st-pl.unpriced { opacity: .45; padding-left: 8px; }
.st-proj { color: var(--ice); font-weight: 700; }

@media (max-width: 1100px) {
  .st-headrow { display: none; }
  .st-row {
    grid-template-columns: 30px minmax(0, 1fr) repeat(4, auto);
    grid-template-areas: 'rank stack stack stack stack score' 'rank pl pl pl pl pl' 'rank sal proj ceil own .';
    row-gap: 8px; column-gap: 14px;
  }
  .st-rank { grid-area: rank; align-self: start; padding-top: 4px; }
  .st-stack { grid-area: stack; }
  .st-players { grid-area: pl; }
  .st-row > [data-l="Salary"] { grid-area: sal; }
  .st-row > [data-l="Proj"]   { grid-area: proj; }
  .st-row > [data-l="Ceil"]   { grid-area: ceil; }
  .st-row > [data-l="Own"]    { grid-area: own; }
  .st-row > .ih-score { grid-area: score; min-width: 110px; }
  .st-row > .r { text-align: left; font-size: 12px; }
  .st-row > .r::before { content: attr(data-l) ' '; color: var(--text-3); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
}
@media (max-width: 560px) {
  .st-row { grid-template-columns: 26px repeat(4, minmax(0, 1fr)); grid-template-areas: 'rank stack stack stack stack' 'rank score score score score' 'rank pl pl pl pl' 'rank sal proj ceil own'; padding: 10px 12px; }
  .st-sort { width: 100%; }
}