/*
  ==================
  STANDINGS LAYOUT
  ==================
*/

.standings-scroll {
  overflow-x: auto;
  position: relative;
}

/* Standings header tooltips would otherwise be clipped by the card's
   top edge. Flip them to appear BELOW the header (overlapping the
   first body row briefly on hover) so they stay visible. */
.standings thead th[data-tooltip]:hover::after,
.standings thead th[data-tooltip]:focus-visible::after {
  bottom: auto;
  top: calc(100% + 4px);
}

.standings-scroll .standings {
  min-width: 1100px;
  border-collapse: separate;
  border-spacing: 0;
}

/*
  Canonical card-table look (see docs/style-guide.html#table):
  uppercase letter-spaced headers on tinted bg, hairline row borders,
  no margin (lives flush inside .card).
*/
.standings { margin: 0; }

/* Default cell alignment: standings are number-heavy, so cells center
   unless a more specific rule (e.g. dashboard's per-column rules,
   .standings-col--team below) opts them to left. Moved here from
   list.css where a stale companion rule was wiping single-row-header
   tables' padding. */
.standings th,
.standings td {
  text-align: center;
}

.standings thead th {
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  vertical-align: bottom;
}
/* The standings page has a two-row header: an outer group-span row
   (RANKINGS / MATCHES PLAYED IN / MATCH RESULTS) sitting above the
   per-column labels. The outer row gets extra top padding and no
   bottom border so it reads as part of the column-label row below.

   `tr:first-of-type:not(:last-of-type)` ensures we only zero out the
   first row when there is actually a second row beneath it. Single-row
   header tables that share .standings styling — e.g. the dashboard's
   compact standings — keep their normal header padding. */
.standings thead tr:first-of-type:not(:last-of-type) th {
  padding: 0 12px;
  padding-top: 14px;
  border-bottom: none;
}

/* Team column always reads left even though numerics center. */
.standings .standings-col--team { text-align: left; }

/* Public standings: left-align rank so numbers stay aligned with or without
   a movement arrow (the fixed-width sub-spans handle internal alignment). */
.public-standings .col-rank { text-align: left; }

/* Subtle grey chip beside team name when the team has withdrawn from
   the season but their match history still shows in past standings. */
/* Standings mode chip (page header): three states, color-coded.
   Auto-ranked = brand blue on soft blue; Manually ranked = amber;
   Auto-ranking paused = red — unlike soft states (Withdrawn/Archived),
   pause reasons are configuration ERRORS needing staff action; reasons
   in the title tooltip. */
.standings-mode-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.standings-mode-chip--auto   { background: var(--info-soft);    color: var(--accent); }
.standings-mode-chip--manual { background: var(--warning-soft); color: var(--amber-600, #D97706); }
.standings-mode-chip--paused { background: var(--danger-soft);  color: var(--danger); }

.standings-withdrawn-chip {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--bg-2);
  color: var(--ink-3);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Epic 0028 D9: shown while a standings recompute is pending. Styled like
   the warning flash banners (Kyle 2026-07-05) so it reads as "heads up",
   not decoration — but static (no animation, no fixed positioning): it
   belongs to the page under the header, not floating over it. */
.standings-updating-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--r-md, 8px);
  border: 1px solid var(--green, #10B981);
  color: var(--green, #10B981);
  background: var(--bg-2);
  font-size: 0.85rem;
  font-weight: 600;
  max-width: min(90vw, 600px);
}

/* Recompute pending unusually long (worker down / failing job): honest
   amber, matching the warning flash palette. */
.standings-updating-chip--delayed {
  border-color: var(--yellow, #EAB308);
  color: var(--yellow, #EAB308);
}

.standings tbody td {
  border-top: 1px solid var(--line-2);
  padding: 12px;
  vertical-align: middle;
}
.standings tbody tr:first-child td { border-top: 0; }
.standings tbody tr:hover {
  background: var(--bg-2);
}
/* Sticky team column gets the same hover tint so the row reads as a
   single hover band. (The two duplicate `tr:hover .standings-col--team`
   rules that previously set conflicting bg colours were consolidated
   into this single rule.) */
.standings tbody tr:hover .standings-col--team {
  background: var(--bg-2);
}

/*
  Team column — sized, truncated, and sticky-locked when scrolling horizontally.
  Sticky bg matches the surrounding card so the column blends as it locks.
*/
.standings .standings-col--team {
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 2;
  font-weight: 700;
}

.standings thead .standings-col--team {
  z-index: 3;
  background: var(--surface-2);
}

/*
  Toolbar above the table
*/
.standings-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-bottom: 0.5rem;
}

/*
  (Epic 0028 P3b: the aggregation toggle and ruleset pills are gone —
  both stat windows render side by side from persisted columns.)
*/

/*
  In-header variant of the aggregation toggle: sits beside the MATCH RESULTS
  group label inside its <th>. Sized down so the header row height is
  unchanged; PERIODIC/CUMULATIVE are uppercased and one notch smaller than
  the surrounding group label.
*/
.standings-group-header--match-results {
  white-space: nowrap;
}
.standings-group-header__label {
  vertical-align: middle;
  margin-right: 0.5rem;
}
/*
  Filter bar layout overrides for the standings page: top-align so labels
  line up regardless of which filter is taller, and let the right-side
  action group push to the right edge of the grey container.
*/
.standings-filters {
  align-items: flex-start;
}
/* Sit naturally in the flex flow rather than getting pinned with
   margin-left: auto. Pinning right kept the cluster anchored to the
   end of its line even after wrapping, which made it look misaligned
   with the left-side filters; without the auto margin it follows the
   row when there's room and left-aligns when it wraps.
   flex-end so the short Adjust Manually wrapper bottom-aligns with the
   Apply Ruleset button instead of riding up to the Ruleset label row. */
.standings-filters__right {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
.standings-filters__right .schedule-filter-actions {
  margin-left: 0;
}

/*
  Ensure the Cancel button stays hidden when the `hidden` attribute is set
  — without this the schedule-actions__rank-cancel `display: block` rule
  would override the UA `[hidden]` default.
*/
.schedule-actions__rank-cancel[hidden] {
  display: none;
}

/*
  Lock the slot widths so the buttons don't snap narrower when their text
  swaps in adjust mode (Adjust Manually → Save Ranks). Mins are sized to the
  longer label so the smaller text simply gets extra whitespace inside an
  unchanged box. Cancel adopts --adjust to match the Save Ranks slot width.
*/
.schedule-actions__rank--adjust,
.schedule-actions__rank-cancel--adjust {
  min-width: 11rem;
}

/*
  Apply Ruleset stays in the layout while the user is adjusting manually,
  but is visually muted and unclickable. Distinct from .schedule-actions__rank-cancel,
  which is grey-but-clickable: this variant has no border, no hover, and a
  not-allowed cursor so it reads as disabled rather than as an alternate action.
*/
.schedule-actions__rank--disabled,
.schedule-actions__rank--disabled:hover {
  background: var(--bg-2);
  color: var(--ink-3);
  cursor: not-allowed;
  opacity: 0.7;
}

/*
  Column visibility picker uses the schedule-filter dropdown look
*/
.standings-columns-picker {
  position: relative;
}

.standings-columns-picker__summary {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}

.standings-columns-picker__summary::-webkit-details-marker {
  display: none;
}

.standings-columns-picker__chevron {
  margin-left: 0.5rem;
  color: var(--ink-3);
  font-size: 0.75rem;
}

.standings-columns-picker[open] .standings-columns-picker__summary {
  border-color: var(--ink-3);
}

.standings-columns-picker__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 10;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.5rem;
  min-width: 200px;
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.standings-columns-picker__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem;
  font-size: 0.875rem;
  color: var(--ink);
  cursor: pointer;
  border-radius: 4px;
}

.standings-columns-picker__item:hover {
  background: var(--bg-2);
}

.standings-columns-picker__item--locked {
  color: var(--ink-3);
  cursor: not-allowed;
}

.standings-columns-picker__item--locked:hover {
  background: transparent;
}

/* Footer row inside the picker menu — currently hosts the
   "Apply league defaults" button which clears the user's saved
   view_preference for this picker so the season-level default takes over. */
.standings-columns-picker__footer {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
}

.standings-columns-picker__reset {
  background: transparent;
  border: 0;
  color: var(--ink-3);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.standings-columns-picker__reset:hover {
  background: var(--bg-2);
  color: var(--ink);
}

/*
  Column visibility — applied dynamically by Stimulus controller
*/
.standings .column-hidden {
  display: none;
}

.standings tbody tr.filter-hidden {
  display: none;
}

/*
  Sortable column headers — pointer cursor (click-to-sort), arrows + position
  superscript when stacked sort is active.
*/
.standings thead th[data-column-key]:not([data-no-sort]) {
  cursor: pointer;
  user-select: none;
}
.standings thead th[data-column-key]:not([data-no-sort]):hover {
  color: var(--ink);
}
.standings-sort-indicator {
  font-size: 0.75em;
  margin-left: 0.2em;
  color: var(--ink-3);
}
.standings-sort-position {
  font-size: 0.65em;
  color: var(--ink-3);
  vertical-align: super;
  margin-left: 0.1em;
}

/*
  Ruleset modal
*/
.ruleset-modal {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  width: min(640px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ruleset-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--bg-2);
}
.ruleset-modal__title {
  margin: 0;
  font-size: 1.25rem;
}
.ruleset-modal__close {
  font-size: 1.25rem;
  color: var(--ink-3);
  text-decoration: none;
}
.ruleset-modal__form {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
}
.ruleset-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--bg-2);
}

.ruleset-tiebreaker-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}
.ruleset-tiebreaker-table th,
.ruleset-tiebreaker-table td {
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--bg-2);
}
.ruleset-tiebreaker-summary {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--ink-3);
}

/* .form-help / .form-help--subtle now live in base/forms.css. */

/*
  Section: rulesets list with sport-tile-style "default" toggle per row
*/
.ranking-rulesets-section__actions {
  margin-bottom: 0.75rem;
}
.ranking-ruleset-default-toggle {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--bg-2);
  border-radius: 8px;
  color: var(--ink-3);
  cursor: pointer;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08rem;
}
.ranking-ruleset-default-toggle:hover {
  border-color: var(--line);
}
.ranking-ruleset-default-toggle.is-default {
  background-color: var(--accent-light);
  color: var(--ink);
  border-color: var(--accent);
}

/*
  Season Rank cell — three fixed-width slots so current rank, arrow, and
  prior rank line up vertically across rows regardless of which states are
  populated. Order: current → arrow → prior.
*/
.standings-rank-cell {
  white-space: nowrap;
}

.standings-rank-cell__current,
.standings-rank-cell__arrow,
.standings-rank-cell__prior {
  display: inline-block;
  vertical-align: baseline;
}

.standings-rank-cell__current {
  width: 1.8em;
  text-align: right;
}

.standings-rank-cell__arrow {
  width: 1.2em;
  text-align: center;
}

.standings-rank-cell__prior {
  width: 1.8em;
  text-align: left;
  font-size: 0.85em;
  color: var(--ink-3);
  text-decoration: line-through;
}

.rank-arrow {
  font-size: 0.9em;
}
.rank-arrow--up {
  color: var(--green);
}
.rank-arrow--down {
  color: var(--red);
}

/*
  Group color pill — used wherever a group identity needs to be visually
  carried (standings table, rank-mapping modal, configurations).
*/
.group-pill,
.tier-pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 10px;
  font-size: inherit;
  color: var(--ink);
  white-space: nowrap;
}
.group-pill--unassigned,
.tier-pill--unassigned {
  background: var(--bg-2);
  color: var(--ink-3);
}


/* Tooltip styles for [data-tooltip] now live in base/base.css.
   Standings table headers keep cursor: pointer for click-to-sort —
   that rule is set on the .table-sort element separately, not here. */

/* ── Epic 0028: Ranking card + Ranking Settings modal (D8) ─────────────── */
.ranking-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.75rem;
  background: var(--bg-1);
}
.ranking-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.ranking-card__division { font-weight: 700; }
.ranking-card__section { margin-bottom: 0.75rem; }
.ranking-card__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 0.35rem;
}
.ranking-card__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ranking-card__badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--accent-light, #EEF2FF);
  color: var(--accent, #4F46E5);
  font-size: 0.78rem;
  font-weight: 600;
}
.ranking-card__badge--implicit {
  background: var(--bg-2);
  color: var(--ink-3);
}
.ranking-card__value { font-size: 0.85rem; color: var(--ink-2); }
.ranking-card__empty { font-size: 0.85rem; color: var(--ink-3); }

.ranking-modal {
  border: none;
  border-radius: 12px;
  padding: 0;
  width: min(760px, 94vw);
  max-width: 760px;
  overflow: hidden; /* rounding stays intact; only __main/__preview scroll */
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.25);
  /* Explicit centering: some global resets zero <dialog> margins. */
  position: fixed;
  inset: 0;
  margin: auto;
}
.ranking-modal::backdrop { background: rgb(0 0 0 / 0.35); }
.ranking-modal__form { display: flex; flex-direction: column; max-height: 85vh; }

/* Fixed header/footer with hairline separators; middle scrolls. */
.ranking-modal__head {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--line);
}
.ranking-modal__head h2 { font-size: 1.05rem; margin: 0; }
.ranking-modal__close { border: none; background: none; font-size: 1.4rem; cursor: pointer; color: var(--ink-3); }

.ranking-modal__body { display: flex; flex: 1; min-height: 0; }
.ranking-modal__main { flex: 1; min-width: 0; overflow-y: auto; padding: 1.1rem 1.4rem; }
.ranking-modal__preview-panel {
  width: 280px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 1.1rem 1.2rem;
  border-left: 1px solid var(--line);
  background: var(--bg-1);
}

.ranking-modal__section { margin-bottom: 1.1rem; }

/* Save-failure messages (e.g. an empty criteria list submitted directly). */
.ranking-modal__errors {
  margin: 0.75rem 1.4rem 0;
  padding: 0.5rem 0.8rem;
  border-radius: var(--r-md, 8px);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.8rem;
  font-weight: 600;
}
.ranking-modal__errors p { margin: 0; }

/* 'All periods' reset warning — a danger badge, not body text: saving with
   the default retroactivity resets every locked period, so the warning must
   read at a glance. */
.ranking-modal__lock-warning {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-md, 8px);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
}
/* Hairline separators between the main pane's sections — bleeding through
   the pane's 1.4rem padding so the line runs edge to edge. */
.ranking-modal__main .ranking-modal__section + .ranking-modal__section {
  border-top: 1px solid var(--line-2);
  padding-top: 1rem;
  margin-left: -1.4rem;
  margin-right: -1.4rem;
  padding-left: 1.4rem;
  padding-right: 1.4rem;
}
.ranking-modal__section h3 { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); margin: 0 0 0.8rem; }
.ranking-modal__hint { font-weight: 400; text-transform: none; letter-spacing: 0; }
.ranking-modal__card { padding: 0; }

/* Slots: rows with a faint border; the position-derived counter number
   renders INSIDE the draggable row (Kyle iteration 5). */
.ranking-modal__active { list-style: none; margin: 0 0 0.75rem; padding: 0; counter-reset: rank-slot; min-height: 2.4rem; }
.ranking-modal__active .ranking-modal__slot { counter-increment: rank-slot; }
.ranking-modal__active .ranking-modal__metric-badge::before {
  content: counter(rank-slot);
  min-width: 1.1rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--ink-3);
}
.ranking-modal__slot { display: flex; align-items: center; margin-bottom: 0.35rem; }
.ranking-modal__slot--locked { opacity: 0.6; }
/* Row-style draggables: full-width, faint border, plain ink. */
.ranking-modal__metric-badge {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: var(--surface, #fff);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
}
.ranking-modal__metric-badge--implicit { background: var(--bg-2); color: var(--ink-3); border-color: transparent; }
.ranking-modal__drag { cursor: grab; color: var(--ink-3); user-select: none; }
.ranking-modal__lock { font-size: 0.75rem; color: var(--ink-3); }
/* Implicit tiebreakers continue the slot numbering (same CSS counter scope)
   — visibly part of the formula, just not draggable; full-width rows. */
.ranking-modal__implicit { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.ranking-modal__implicit .ranking-modal__slot { counter-increment: rank-slot; }
.ranking-modal__implicit .ranking-modal__metric-badge::before {
  content: counter(rank-slot);
  min-width: 1.1rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.8rem;
}
/* Available storage: no number gutter — handle sits flush left. */
.ranking-modal__available { list-style: none; margin: 0; padding: 0; min-height: 2.4rem; }
.ranking-modal__slot--locked .ranking-modal__metric-badge { background: var(--bg-2); color: var(--ink-3); border-color: transparent; }

/* Segmented badge toggles: equal-width options sized to the larger label,
   text centered (radio inputs hidden; checked span highlights). */
.ranking-modal__seg {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 2px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 99px;
}
.ranking-modal__seg label { margin: 0; }
.ranking-modal__seg input { position: absolute; opacity: 0; pointer-events: none; }
.ranking-modal__seg span {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0.3rem 0.85rem;
  border-radius: 99px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.ranking-modal__seg label:has(input:checked) span {
  background: var(--surface, #fff);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.ranking-modal__locked-list { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; }
.ranking-modal__locked-list li { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; }

.ranking-modal__preview { font-size: 0.85rem; }
.ranking-modal__preview h4 { margin: 0 0 0.5rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.ranking-modal__preview ol { margin: 0 0 0.6rem 1.3rem; padding: 0; }
.ranking-modal__preview li { margin-bottom: 0.25rem; }
.ranking-modal__preview-note { color: var(--ink-3); font-size: 0.75rem; }
.ranking-modal__preview-error, .ranking-modal__preview-empty { color: var(--ink-3); }

/* Footer: retroactivity choice inline with the actions. */
.ranking-modal__foot {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.4rem;
  border-top: 1px solid var(--line);
  background: var(--bg-1);
}
.ranking-modal__retro { display: flex; align-items: center; gap: 0.7rem; font-size: 0.84rem; flex-wrap: wrap; }
.ranking-modal__retro-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.ranking-modal__retro label { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; }
.ranking-modal__retro small { color: var(--ink-3); }
.ranking-modal__actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* Banner spacing under the page header. */
div.standings-updating-chip {
  margin: 0.5rem 0 0;
}

/* Preview table card: rank | icon | name | movement. */
.ranking-modal__preview-table {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface, #fff);
  overflow: hidden;
  margin-bottom: 0.6rem;
}
.ranking-modal__preview-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  font-size: 0.84rem;
}
.ranking-modal__preview-row + .ranking-modal__preview-row { border-top: 1px solid var(--line-2); }
.ranking-modal__preview-rank {
  min-width: 1.2rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--ink-3);
}
.ranking-modal__preview-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.ranking-modal__preview-delta { font-size: 0.72rem; font-weight: 700; }
.ranking-modal__preview-delta--up { color: var(--green, #10B981); }
.ranking-modal__preview-delta--down { color: var(--red, #EF4444); }

/* Epic 0028: denser standings rows (match schedule/games tables) + icons. */
.standings tbody td {
  font-size: 12px;
  padding: 6px 10px;
}
.standings-team-cell { display: inline-flex; align-items: center; gap: 0.45rem; vertical-align: middle; }

/* Preset pills row atop the columns picker. */
.standings-columns-picker__pills {
  display: flex;
  gap: 0.3rem;
  padding: 0.3rem 0.4rem 0.45rem;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 0.3rem;
  flex-wrap: wrap;
}

/* Epic 0028 standings toolbar/table polish (Kyle iteration). */
.standings-columns-picker__menu { min-width: 320px; }
.standings-filters__right { align-items: center; align-self: center; }
/* Adjust Manually keeps a fixed footprint; in edit mode Save + Cancel share
   the same total width so surrounding elements never shift. */
.schedule-actions__rank--adjust { width: 170px; justify-content: center; text-align: center; }
/* Height parity with .btn: same vertical padding AND same font size (the
   base rank button uses --text-sm, ~2px shorter than .btn's 1rem). */
.schedule-actions__rank--adjust,
.schedule-actions__rank-cancel--adjust {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  font-size: 1rem;
  line-height: 1; /* .btn's exact metrics: 2×0.55rem + 1rem line + 2px border */
}
/* Edit mode: Save + Cancel are twins; 81 + 8 gap + 81 = the idle button's
   170px, so nothing around them shifts. (min-width: 0 beats the 11rem
   base rule that was keeping them full-size.) */
.schedule-filter-actions:has(.schedule-actions__rank-cancel--adjust:not([hidden])) .schedule-actions__rank--adjust { min-width: 0; width: 81px; }
.schedule-actions__rank-cancel--adjust:not([hidden]) { min-width: 0; width: 81px; text-align: center; justify-content: center; }
/* 30px team icons in standings rows. */
.standings-team-cell .team-icon-xs { width: 30px; height: 30px; line-height: 30px; font-size: 0.8rem; }
/* Rank movement: preview-style triangles. */
.standings-rank-delta { font-size: 0.72rem; font-weight: 700; margin-left: 0.3rem; }
.standings-rank-delta--up { color: var(--green, #10B981); }
.standings-rank-delta--down { color: var(--red, #EF4444); }

/* Mode line under the Standings header: Auto/Manually ranked + Reset. */
.standings-mode-line { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.45rem; }
.standings-mode-line .standings-withdrawn-chip { margin-left: 0; }