/* ============================================================
   Season Stats — page-local components
   Tokens come from config/variables.css.
   This file ONLY defines what doesn't already exist elsewhere.
   Reused canonical primitives:
     .card / .card__header / .card__body / .card__footer       → base/base.css
     .schedule-filters / .schedule-filter / __label / __select  → components/schedule.css
     .segmented / .segmented__btn                               → components/buttons.css
     .group-pill                                                → components/standings.css
     .btn / .btn--link / .btn--secondary / etc.                 → components/buttons.css
     .page-header / .page-title / .page-crumb                   → base/base.css
     .section-head / .section-label / .section-desc             → base/base.css
     .empty-state / .empty-state--card                          → base/base.css

   Promote anything in here to its own component file once a
   second page needs it. Conventions docs/style-guide.html.
   ============================================================ */

/* ---------- Section spacing ----------
   Each major block on this page is wrapped in .season-stats-section.
   Content sections (Leaderboards, Standings, Schedule, Team Spotlight)
   are <section> elements; the page-level filter form shares the
   .season-stats-section class but renders as <form>, so the divider
   rule below scopes to <section> to avoid drawing a line under the
   filter pill itself. */
.season-stats-section { margin-bottom: 1.5rem; }
.season-stats-section:last-child { margin-bottom: 0; }

section.season-stats-section {
  border-top: 1px solid var(--line-2);
  padding-top: 2.25rem;
  margin-top: 1.5rem;
  margin-bottom: 2.25rem;
}
section.season-stats-section:last-child { margin-bottom: 0; }

/* Schedule-filter cells without their own label still need to align
   their control to the bottom of the row alongside labeled siblings. */
.schedule-filter--unlabeled { justify-content: flex-end; }

/* ---------- Sticky filter bar ----------
   Pins only the filter pill itself to the top of .main-container so
   page content scrolls visibly behind/around it. The pill's own
   surface-2 background obscures whatever passes directly under it. */
.season-stats-filters--sticky {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* ---------- Page-level filter pill ----------
   The dashboard's only page-scope filter. Centered, fit-content width,
   semi-transparent darker tint with a backdrop blur so the pill reads
   as glass — page content scrolls visibly through it as the user moves
   down. Inner segmented buttons keep a solid surface so the
   inactive options aren't camouflaged. The active toggle uses a quiet
   neutral grey so the filter feels passive while still indicating
   selection. */
.season-stats-filters--page {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  background: rgba(236, 235, 229, 0.55); /* var(--bg-2) at ~55% */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-pill);
  padding: 0.6rem 2.5rem;
  align-items: center;
  column-gap: 1.5rem;
  box-shadow:
    0 0 0 1px rgba(45, 35, 20, 0.05),
    0 6px 18px rgba(45, 35, 20, 0.06);
}
.season-stats-filters--page .schedule-filter__label {
  text-align: center;
}
.season-stats-filters--page .segmented {
  background: var(--surface);
  border-color: var(--line);
}
.season-stats-filters--page .segmented__btn.is-active {
  background: var(--bg-2);
  color: var(--ink);
}

/* ---------- Tag (group / tier badge — used outside .group-pill contexts) ---------- */
.tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 4px;
  color: white;
  background: var(--ink-3);
}
.tag--neutral { background: var(--bg-2); color: var(--ink-2); }

/* ---------- Generic table (canonical in-card table) ----------
   Promote to base/base.css when a second page needs it.

   Inside .card the table sits flush with the card edges. The thead
   background fills the full top of the card (clipped by the card's
   rounded corners via overflow:hidden). The last row has no bottom
   border — the card's own border handles the visual close-out. */
.table { width: 100%; border-collapse: collapse; margin: 0; }
.table thead th {
  padding: 10px 12px;
  text-align: left;
  font-size: 0.77rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-weight: 700;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.table tbody td {
  padding: 10px 14px;
  border-top: 1px solid var(--line-2);
  vertical-align: middle;
  font-size: 0.92rem;
}
.table tbody tr:first-child td { border-top: 0; }
.table tbody tr:last-child td  { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table th.num { text-align: right; }
.table--in-card thead th:first-child { padding-left: 1.5rem; }
.table--in-card thead th:last-child  { padding-right: 1.5rem; }
.table--in-card tbody td:first-child { padding-left: 1.5rem; }
.table--in-card tbody td:last-child  { padding-right: 1.5rem; }

/* ---------- Hero tile ----------
   Single-stat card used by the Leaderboards row. Promote to base.css
   when the dashboard or other pages reuse it. */
.hero-tile {
  position: relative;
  overflow: hidden;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.hero-tile__label {
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 800;
}
.hero-tile__desc  { font-size: 0.77rem; color: var(--ink-3); margin-top: 2px; }
.hero-tile__team  { font-size: 1rem; font-weight: 800; margin-top: 0.75rem; }
.hero-tile__row   { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.hero-tile__value { font-size: 1.7rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.hero-tile__unit  { font-size: 0.77rem; color: var(--ink-3); }

/* ---------- Stat-tile grid ----------
   4-col grid of small key/value tiles. The feature panel uses the
   --feature variant — 3 columns so its 6 tiles read as a clean 2x3
   block (Rank / Rank Movement / Match Record across the top, then
   Game Record / Points W·L·Diff / Opponents Faced underneath). */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
.stat-grid--feature { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .stat-grid,
  .stat-grid--feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.stat-tile {
  padding: 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  min-width: 0;
}
.stat-tile__k {
  font-size: 0.7rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.stat-tile__v {
  font-size: 1.25rem;
  font-weight: 800;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-tile__v small {
  font-weight: 500;
  color: var(--ink-3);
  font-size: 0.8rem;
  margin-left: 4px;
}

/* ---------- Rank cell ---------- */
.rank-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}
.rank-cell__current { font-weight: 800; }
.rank-cell__arrow   { font-size: 0.85rem; }
.rank-cell__prior   { color: var(--ink-3); text-decoration: line-through; font-size: 0.85rem; }
.rank-arrow--up   { color: var(--success); }
.rank-arrow--down { color: var(--danger); }
.rank-arrow--flat { color: var(--ink-3); }

/* ---------- Results strip (W/L/T pips, "form") ---------- */
.results-strip { display: inline-flex; gap: 3px; vertical-align: middle; }
.results-strip b {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 0.7rem/1 ui-monospace, monospace;
  color: white;
  border-radius: 3px;
}
.results-strip b.w { background: var(--success); }
.results-strip b.l { background: var(--danger); }
.results-strip b.t { background: var(--ink-3); }
.results-strip--lg b { width: 18px; height: 18px; font-size: 0.75rem; }

/* ---------- Leaderboards row (4 leader tiles) ---------- */
.leaderboards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 1100px) { .leaderboards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .leaderboards { grid-template-columns: 1fr; } }

.leader-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Bump the leader's team name above the inherited .hero-tile__team size so the
   featured team reads as the focal point of each tile. */
.leader-tile .hero-tile__team { font-size: 1.2rem; }
.leader-tile__rest-row .name { font-size: 0.88rem; }
.leader-tile__rest {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.leader-tile__rest-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.77rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.leader-tile__rest-row .pos  { color: var(--ink-4); width: 14px; flex: none; font-weight: 700; }
.leader-tile__rest-row .name { color: var(--ink-2); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-tile__rest-row .v    { color: var(--ink-2); font-weight: 700; }

/* ---------- Dashboard preview banner ----------
   Shown when the user has applied a ruleset on the dashboard's standings
   section but not yet confirmed. Stretches the banner so the message and
   the Apply/Cancel buttons sit on a single row at wide viewports. */
.standings-preview-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
}
.standings-preview-banner__msg     { flex: 1 1 320px; min-width: 0; }
.standings-preview-banner__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex: 0 0 auto;
}

/* ---------- Compact standings cell highlights ---------- */
.season-stats-standings .diff-pos { color: var(--success); font-weight: 700; }
.season-stats-standings .diff-neg { color: var(--danger);  font-weight: 700; }

/* ---------- Dashboard standings: per-column alignment ----------
   .standings (in standings.css) already gives us 10px 12px header
   padding, 12px body padding, text-align:center as the default for
   all cells, and left-align for the .standings-col--team column. The
   only per-column overrides the dashboard needs are the columns the
   user wants left-aligned (Rank, Last 10), the extra left padding on
   the leftmost (Rank) column so it doesn't crowd the card edge, and
   tabular numerals on the numeric columns. */
.season-stats-standings .standings-col--division_rank,
.season-stats-standings .standings-col--recent_form {
  text-align: left;
}
.season-stats-standings thead th.standings-col--division_rank,
.season-stats-standings tbody td.standings-col--division_rank {
  padding-left: 1.5rem;
}
.season-stats-standings .standings-col--matches_wlt,
.season-stats-standings .standings-col--matches_rate,
.season-stats-standings .standings-col--games_wlt,
.season-stats-standings .standings-col--games_rate,
.season-stats-standings .standings-col--points_for,
.season-stats-standings .standings-col--points_against,
.season-stats-standings .standings-col--points_diff {
  font-variant-numeric: tabular-nums;
}

/* ---------- Schedule filters ---------- */
.schedule-filters--inline { margin-bottom: 0.75rem; }
.schedule-filter--reset { justify-content: flex-end; }
/* Push the Bulk Schedule launcher to the far end of the filter row. */
.schedule-filters__bulk-launcher { margin-left: auto; align-self: flex-end; }

.loc-picker { position: relative; }
.loc-picker__summary {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  list-style: none;
  min-width: 180px;
}
.loc-picker__summary::-webkit-details-marker { display: none; }
.loc-picker__chevron { color: var(--ink-3); font-size: 0.75rem; }
.loc-picker[open] .loc-picker__summary { border-color: var(--ink-3); }
.loc-picker__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 15;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.5rem;
  min-width: 240px;
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.loc-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;
}
.loc-picker__item:hover { background: var(--bg-2); }
.loc-picker__empty { font-size: 0.85rem; color: var(--ink-3); padding: 0.4rem; }

/* ---------- Schedule (match cards) ----------
   The card grid lives inside a .card__body. Cards wrap to a new
   row at the auto-fill breakpoint. */
.schedule-cards-body {
  padding: 1rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.schedule-day { display: flex; flex-direction: column; gap: 0.75rem; }
.schedule-day__head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.schedule-day__head h3 { font-size: 0.92rem; margin: 0; }
.schedule-day__meta    { color: var(--ink-3); font-size: 0.85rem; }

.match-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
}
.match-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}

/* Meta block: time-range + date row, then location + group chip row. */
.match-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.match-card__when {
  font-size: 0.77rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.match-card__when .dot { color: var(--ink-4); }
.match-card__sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.match-card__loc {
  font-size: 0.85rem;
  color: var(--ink-2);
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Score board: team-name header row, then a row per game, then a
   final-tally row. Teams sit on the left and right; the centered
   game-number column separates them. */
.match-card__board {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  overflow: hidden;
}
/* Shared three-column grid for the team header, each game row, and the
   final tally. Outer columns are equal-width so the centered separator
   (VS / Game N / Match) sits on the visual midline and the per-team
   values land directly under their team name. */
.match-card__teamhead,
.match-card__game-row,
.match-card__final {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: 8px;
  padding: 6px 10px;
}
.match-card__teamhead {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
}
.match-card__name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  text-align: center;
  /* Wrap long names across multiple lines instead of truncating. */
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.match-card__name.is-winner { color: var(--success); }
.match-card__vs {
  font-size: 0.7rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.match-card__games { display: flex; flex-direction: column; }
.match-card__game-row {
  padding: 4px 10px;
  font-variant-numeric: tabular-nums;
}
.match-card__game-row + .match-card__game-row { border-top: 1px solid var(--line-2); }
.match-card__game-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.match-card__pts {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 2px 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-2);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
}
.match-card__pts.is-game-winner,
.match-card__pts.is-winner {
  color: var(--success);
  font-weight: 800;
  border-color: color-mix(in srgb, var(--success) 35%, var(--line));
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
}

/* Editable score inputs inside a match card. The form wrapper exists
   only to scope the per-input autosave; visually we want the input
   itself to be the "chip" so winning/losing scores share the same
   rounded box as static .match-card__pts. */
.match-card__pts-form { display: contents; }
.match-card__pts-input {
  width: 44px;
  min-width: 44px;
  padding: 2px 6px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.match-card__pts-input::-webkit-outer-spin-button,
.match-card__pts-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.match-card__pts-input:hover { border-color: var(--ink-3); }
.match-card__pts-input:focus {
  outline: none;
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(229, 183, 1, 0.18);
}
/* Winner highlight is applied to the FORM (not the input) so it survives
   data-turbo-permanent on the input — the form gets replaced by the
   turbo_stream save response and carries the new winner state, while the
   input itself is preserved (focus + caret position). */
.match-card__pts-form.is-game-winner .match-card__pts-input {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 45%, var(--line));
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
}
.match-card__pts-form.is-game-winner .match-card__pts-input:focus {
  border-color: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent);
}

.match-card__final {
  background: var(--surface-2);
  border-top: 1px solid var(--line-2);
}
.match-card__pts--final { font-size: 1rem; min-width: 36px; }
.match-card__final-label {
  font-size: 0.7rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.match-card__foot {
  font-size: 0.77rem;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px dashed var(--line-2);
}

/* ---------- Team carousel ----------
   Outer wrapper is a canonical .card. The carousel header reuses
   .card__header. Stacked .card siblings inside the same section
   need a gap between them. */
.season-stats-section > .card + .card { margin-top: 0.75rem; }
.team-carousel__track-wrap { overflow: hidden; padding: 0.75rem 0 1rem; }
/* Marquee auto-scroll. The track holds (teams + teams) so translating
   from 0 to -50% shows the duplicate set sliding into the original
   position — seamless loop. Duration is tuned to a perceptible but
   non-distracting speed; hovering anywhere in the carousel pauses it
   so the user can focus on a specific card. */
.team-carousel__track {
  display: flex;
  gap: 0.75rem;
  padding: 0 1.5rem;
  animation: tc-scroll 50s linear infinite;
  width: max-content;
}
.team-carousel:hover .team-carousel__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .team-carousel__track     { animation: none; }
  .team-carousel__track-wrap { overflow-x: auto; }
}
@keyframes tc-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.tc-card {
  flex: 0 0 auto;
  width: 200px;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  text-decoration: none;
  color: inherit;
}
.tc-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--ink-3);
}
.tc-card.is-active {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--gold);
}
.tc-card__name {
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.77rem;
  color: var(--ink-3);
}
.tc-card__row .rank {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- Featured team panel ----------
   Lives inside a .card. Body splits into stat/chart left + form/h2h right. */
.feature__name { font-size: 1.4rem; font-weight: 800; }
.feature__meta { font-size: 0.85rem; color: var(--ink-3); }

.feature__body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}
@media (max-width: 900px) { .feature__body { grid-template-columns: minmax(0, 1fr); } }
.feature__left {
  padding: 1.5rem;
  border-right: 1px solid var(--line-2);
}
@media (max-width: 900px) {
  .feature__left { border-right: 0; border-bottom: 1px solid var(--line-2); }
}
.feature__right { padding: 1.5rem; }
.feature .stat-grid { margin-bottom: 1.5rem; }
.feature__chart-title {
  font-size: 0.77rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.feature__chart {
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 1rem;
}
/* Trajectory SVG: viewBox-driven aspect ratio (10:3.33), responsive width.
   `height: auto` lets the SVG scale uniformly with `preserveAspectRatio`
   defaulting to xMidYMid meet — keeping circles round at every container
   width. */
.rank-traj {
  display: block;
  width: 100%;
  height: auto;
}
.feature__form { margin-bottom: 1rem; }

.h2h-list { display: flex; flex-direction: column; gap: 6px; }
.h2h-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: 0.92rem;
}
.h2h-row .team-name { font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.h2h-row .vs        { color: var(--ink-3); font-size: 0.85rem; flex-shrink: 0; }
.h2h-row .rec       { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; flex-shrink: 0; }
.rec--pos { color: var(--success); }
.rec--neg { color: var(--danger); }