/* /stations — поверх компонентов (этап 5–6 группа 3A).
   Arcade legacy (CSS/arcade.css stations rules) остаётся до stage 7;
   этот файл перекрывает через .stations-page specificity. */

.stations-page .page-wrap,
.stations-page .container {
  min-width: 0;
}

/* ── hero → components/hero ── */
.stations-page .hero.stations-hero {
  grid-template-columns: 1fr;
  gap: var(--s-2);
  margin-block-start: var(--s-2);
  margin-block-end: var(--s-4);
  padding: 0;
  text-align: center;
  border: none;
  background: transparent;
}
.stations-page .stations-hero .hero__content {
  align-items: center;
  gap: var(--s-2);
}
.stations-page .stations-hero .hero__meta {
  justify-content: center;
  font-size: var(--t-caption);
  letter-spacing: var(--ls-tight, 0.04em);
  text-transform: uppercase;
  color: var(--fg-3);
}
.stations-page .stations-hero .hero__title {
  font-size: clamp(1.375rem, 6vw, 2.375rem);
  color: var(--accent);
  letter-spacing: 0.04em;
}
.stations-page .stations-hero .hero__sub {
  max-width: none;
  font-size: var(--t-caption);
  letter-spacing: var(--ls-tight, 0.04em);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ── KPI → components/stat ── */
.stations-page .stat-panel.stations-kpi {
  margin: 0 0 var(--s-5);
  grid-template-columns: repeat(3, 1fr);
}
.stations-page .stations-kpi .stat-cell {
  text-align: center;
  align-items: center;
  padding-block: var(--s-3);
  padding-inline: var(--s-2);
}
.stations-page .stations-kpi .stat-cell__n {
  font-size: clamp(0.6875rem, 2vw, 0.9375rem);
  color: var(--warn);
}
.stations-page .stations-kpi .stat-cell__l {
  order: -1;
  text-transform: uppercase;
  letter-spacing: var(--ls-tight, 0.04em);
}
.stations-page .stations-kpi #stat-cars {
  color: var(--ac);
}
@media (max-width: 599px) {
  .stations-page .stat-panel.stations-kpi {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── search / filters sticky ── */
.stations-page .search-wrap {
  margin-bottom: var(--s-2);
}

/* ── table → components/table (+ .reg bridge for arcade) ──
   Канон: без overflow-x на таблице. Ниже --bp-md — карточки;
   десктоп — table-layout:fixed, колонки сжимаются. */
.stations-page .tbl-card {
  margin-bottom: var(--s-6);
  overflow: hidden;
  box-shadow: none;
  min-width: 0;
  max-width: 100%;
}
.stations-page .tbl.stations-tbl.reg,
.stations-page table.reg {
  width: 100%;
  min-width: 0;
}
.stations-page .tbl.stations-tbl th,
.stations-page .tbl.stations-tbl td {
  padding-inline: var(--s-2);
}
.stations-page .tbl.stations-tbl td.addr {
  overflow: hidden;
}
.stations-page .tbl.stations-tbl td.addr .loc-name,
.stations-page .tbl.stations-tbl td.addr .loc-address {
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 899px) {
  .stations-page .tbl-card {
    display: none;
  }
  .stations-page .cards-wrap {
    display: flex;
    flex-direction: column;
  }
}
@media (min-width: 900px) {
  .stations-page .tbl-card {
    border: none;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
  }
  .stations-page .tbl.stations-tbl.reg,
  .stations-page table.reg {
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }
  .stations-page .tbl.stations-tbl thead th {
    background: var(--surface-2);
  }
  .stations-page .tbl.stations-tbl tbody tr.loc-group-row td,
  .stations-page .tbl.stations-tbl tbody tr.loc-sub-row td {
    background: var(--surface);
  }
  .stations-page .tbl-card > .tbl {
    display: table;
  }
  .stations-page .tbl.stations-tbl.reg {
    table-layout: fixed;
  }
  .stations-page .tbl.stations-tbl td:first-child {
    min-width: 0;
    overflow: hidden;
  }
  .stations-page .tbl.stations-tbl td:first-child .op-cell,
  .stations-page .tbl.stations-tbl td:first-child .op-badge,
  .stations-page .tbl.stations-tbl td:first-child .chip {
    max-width: 100%;
    min-width: 0;
  }
  .stations-page .tbl.stations-tbl td:first-child .op-badge,
  .stations-page .tbl.stations-tbl td:first-child .chip {
    overflow: hidden;
  }
  .stations-page .tbl.stations-tbl td:first-child .op-badge::before,
  .stations-page .tbl.stations-tbl td:first-child .chip::before {
    flex-shrink: 0;
  }
  .stations-page .tbl.stations-tbl td:first-child .op-badge-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .stations-page .tbl.stations-tbl tbody tr.loc-group-row + tr.loc-group-row td,
  .stations-page .tbl.stations-tbl tbody tr.loc-sub-row + tr.loc-group-row td {
    border-top: var(--s-3) solid var(--bg);
  }
  .stations-page .cards-wrap {
    display: none;
  }
}

/* ── load more → components/button ── */
.stations-page .stations-load-more.load-more-btn,
.stations-page .btn.stations-load-more {
  display: flex;
  width: 100%;
  margin: var(--s-4) 0 var(--s-6);
  box-shadow: none;
}
.stations-page .stations-load-more .lm-rem {
  color: var(--warn);
}

/* ── badges / chips bridges (JS: badge + chip|op-badge) ── */
.stations-page .op-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font);
  font-size: var(--t-caption);
  font-weight: 600;
  line-height: 1;
  padding-block: var(--s-1);
  padding-inline: var(--s-2);
  border-radius: var(--radius-chip);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--fg-2);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
}
.stations-page .op-badge.op-other {
  color: var(--fg-3);
}
.stations-page .chip {
  /* chip component; keep compact in registry cells */
  font-size: var(--t-caption);
}
.stations-page .badge.badge--dc,
.stations-page .badge.badge--ac,
.stations-page .badge.badge--acdc {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   E3 city/letter chips (ex CSS/stations-city-nav.css)
   ============================================================ */

.stations-page .scn-nav {
  margin: var(--s-2) 0 var(--s-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.stations-page .scn-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0 var(--s-1);
  min-width: 0;
  max-width: 100%;
}
.stations-page .scn-row::-webkit-scrollbar {
  display: none;
}
@media (min-width: 640px) {
  .stations-page .scn-row--letters {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.stations-page .srf-open-btn {
  font-family: var(--font);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--s-3) var(--s-4);
  min-height: 2.75rem;
  color: var(--accent);
  border-color: var(--accent);
  background: var(--surface);
  border-radius: var(--radius-control);
  opacity: 1;
}

.stations-page .tbl.stations-tbl th.tbl-guns {
  text-align: left;
}
.stations-page .tbl.stations-tbl td.tbl-guns {
  text-align: left;
  vertical-align: middle;
}
.stations-page .tbl-guns-pack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  justify-content: flex-start;
  align-items: center;
}

.stations-page .scn-chip {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--t-caption);
  padding: 5px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-chip);
  color: var(--fg-2);
  background: var(--surface);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  opacity: 0.85;
}
.stations-page .scn-chip:hover {
  opacity: 1;
  border-color: var(--accent);
  color: var(--accent);
}
.stations-page .scn-chip.is-on {
  opacity: 1;
  color: var(--warn);
  border-color: var(--warn);
  /* FLAG hex/rgba: glow under warn chip (no --shadow-glow role yet) */
  box-shadow: 0 0 8px color-mix(in srgb, var(--warn) 35%, transparent);
}
.stations-page .scn-chip--letter {
  min-width: 28px;
  padding-left: var(--s-2);
  padding-right: var(--s-2);
  text-align: center;
  opacity: 1;
}

.stations-page .scn-city-sep {
  font-family: var(--font);
  font-size: var(--t-body);
  letter-spacing: var(--ls-tight, 0.04em);
  color: var(--fg-3);
  margin: 14px 0 var(--s-2);
  padding: 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.stations-page .scn-city-sep::before {
  content: "── ";
}
.stations-page .scn-city-sep::after {
  content: " ────────────────────────";
}

.stations-page tr.scn-sep-row td {
  border: none;
  padding: 12px var(--s-2) 6px;
  background: transparent;
}

@media (min-width: 768px) {
  .stations-page .scn-chip {
    font-size: var(--t-caption);
    padding: 6px 11px;
  }
}

/* F2: SSR seed links (hidden after client init) */
.stations-page .stations-ssr-locs {
  margin: 0 0 var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.stations-page .stations-ssr-locs[hidden] {
  display: none;
}
.stations-page .stations-ssr-locs__note {
  margin: 0 0 var(--s-2);
  font-size: var(--t-caption);
  color: var(--fg-2);
}
.stations-page .stations-ssr-locs__list {
  margin: 0;
  padding-left: var(--s-4);
  font-size: var(--t-body);
}
.stations-page .stations-ssr-locs__list a {
  color: var(--accent);
}