/* components.css — cards, tables, filters, badges, quality markers.
   No hex values: everything through tokens.css variables. */

/* ---------- card ---------- */

.vs-card {
  background: var(--vs-white);
  border: 1px solid var(--vs-blue-12);
  border-radius: var(--vs-radius);
  padding: calc(var(--vs-space) * 3);
}
.vs-card + .vs-card { margin-top: calc(var(--vs-space) * 3); }

.vs-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--vs-space) * 2);
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(var(--vs-space) * 2);
}
.vs-card-head-left {
  display: flex;
  align-items: center;
  gap: calc(var(--vs-space) * 2);
  flex-wrap: wrap;
}
/* a filter sitting next to a heading, label and control on one line */
.vs-field--inline { flex-direction: row; align-items: center; gap: var(--vs-space); }
.vs-field--inline > label { white-space: nowrap; }

/* Heading + all of the block's filters on ONE row (Grigory, 17.09):
   «Сравнение лиг · Период: [ ] · Показатель: [ ]». The heading keeps its
   natural width, the two controls follow it left-aligned; on a narrow screen
   they wrap instead of squeezing the labels. */
.vs-card-head--inline {
  justify-content: flex-start;
  gap: calc(var(--vs-space) * 3);
}
/* Two classes on purpose: the generic `.vs-field` rule below sets
   `flex-direction: column` and, being later in the file at equal specificity,
   used to win — which is why «Период» sat ABOVE its box in v0.6 instead of
   beside it. */
.vs-card-head--inline .vs-field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--vs-space);
  min-width: 0;
}
.vs-card-head--inline .vs-field--inline > label { white-space: nowrap; margin: 0; }
.vs-card-head--inline .vs-field--period .vs-select { min-width: 168px; }
.vs-card-head--inline .vs-field--metric .vs-select { min-width: 232px; }
@media (max-width: 768px) {
  .vs-card-head--inline { gap: calc(var(--vs-space) * 2); }
  .vs-card-head--inline .vs-field { min-width: 100%; }
  .vs-card-head--inline .vs-field .vs-select { min-width: 0; }
}

/* ---------- KPI plates ---------- */

/* KPI plates sit on the LEFT, above the table (Grigory, 16.09).
   Brand gradient background, white figures — one rule for every plate. */
.vs-plates {
  display: flex;
  gap: calc(var(--vs-space) * 2);
  flex-wrap: wrap;
  margin-bottom: calc(var(--vs-space) * 3);
}
.vs-plate {
  background: var(--vs-grad);
  border: 0;
  border-radius: var(--vs-radius);
  padding: calc(var(--vs-space) * 2);
  min-width: 176px;
  color: var(--vs-white);
}
.vs-plate-label {
  font-size: var(--fs-caption);
  color: var(--vs-white-80);
  display: flex;
  align-items: center;
  gap: var(--vs-space);
  margin-bottom: var(--vs-space);
}
.vs-plate-value {
  font-size: var(--fs-kpi);
  font-weight: 700;
  line-height: 1;
  color: var(--vs-white);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: var(--vs-space);
  /* the «демо» tag must wrap under the figure on a narrow screen rather than
     stretch the widget past the viewport (checked at 390 px) */
  flex-wrap: wrap;
  row-gap: 6px;
}
.vs-plate-value.is-empty {
  color: var(--vs-white-80);
  font-size: var(--fs-h3);
}
.vs-plate-unit {
  font-size: var(--fs-caption);
  font-weight: 400;
  color: var(--vs-white-80);
}
/* markers and informers on a gradient plate are white */
.vs-plate .vs-marker--measured { background: var(--vs-white); border-color: var(--vs-white); }
.vs-plate .vs-marker--modeled { border-color: var(--vs-white); background: transparent; }
.vs-plate .vs-marker--demo {
  border-color: var(--vs-white);
  background: linear-gradient(135deg, var(--vs-white) 0%, var(--vs-white) 50%, transparent 50%, transparent 100%);
}
.vs-plate .vs-marker--placeholder { border-color: var(--vs-white); background: transparent; }
.vs-plate .vs-demo-tag { color: var(--vs-white); border-color: var(--vs-white-30); }
.vs-plate .vs-informer { color: var(--vs-white); }
.vs-plate .vs-informer::before { background: transparent; border-color: var(--vs-white-30); }
.vs-plate .vs-informer:hover::before { background: var(--vs-white); border-color: var(--vs-white); }
.vs-plate .vs-informer:hover > span { color: var(--vs-blue); }
.vs-plate:focus-within { outline: 2px solid var(--vs-white); outline-offset: 2px; }

/* summary plates: totals over the current selection */
.vs-summary { margin-bottom: calc(var(--vs-space) * 3); }
.vs-summary .vs-plate { min-width: 148px; }

/* ---------- marker legend ---------- */

.vs-marker-legend {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--vs-space) * 2);
  align-items: center;
  font-size: var(--fs-caption);
  color: var(--vs-blue-70);
  border: 1px solid var(--vs-blue-12);
  border-radius: var(--vs-radius);
  padding: var(--vs-space) calc(var(--vs-space) * 2);
}
.vs-marker-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- loading skeleton ---------- */

.vs-skeleton { padding: var(--vs-space) 0; }
.vs-skeleton-label {
  font-size: var(--fs-caption);
  color: var(--vs-blue-70);
  margin-bottom: calc(var(--vs-space) * 1.5);
}
.vs-skeleton-line {
  height: 14px;
  border-radius: var(--vs-radius);
  background: var(--vs-blue-06);
  border: 1px solid var(--vs-blue-12);
  margin-bottom: var(--vs-space);
}

/* ---------- quality markers (forge-method.md §4) ---------- */

.vs-marker {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: baseline;
  flex: 0 0 auto;
}
.vs-marker--measured { background: var(--vs-blue); border: 1px solid var(--vs-blue); }
.vs-marker--modeled { background: transparent; border: 2px solid var(--vs-blue); }
/* demo (generated) data: half-filled blue dot — clearly not «measured» and
   clearly not a computed value; the word «демо» beside the number carries the
   meaning, the dot only distinguishes it at a glance. */
.vs-marker--demo {
  background: linear-gradient(135deg, var(--vs-blue) 0%, var(--vs-blue) 50%, transparent 50%, transparent 100%);
  border: 2px solid var(--vs-blue);
}
.vs-marker--placeholder { background: transparent; border: 2px solid var(--vs-red); }
.on-dark .vs-marker--measured { background: var(--vs-white); border-color: var(--vs-white); }
.on-dark .vs-marker--modeled { border-color: var(--vs-white); }
.on-dark .vs-marker--demo {
  background: linear-gradient(135deg, var(--vs-white) 0%, var(--vs-white) 50%, transparent 50%, transparent 100%);
  border-color: var(--vs-white);
}

/* «демо» next to a generated number. Outline, not red: red is reserved for
   KPI figures and real defects, and the design system caps it at 10 % of a
   screen — with 6 244 generated rows a red tag on every one would flood it. */
.vs-demo-tag {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vs-blue-70);
  border: 1px solid var(--vs-blue-15);
  border-radius: var(--vs-radius);
  padding: 0 5px;
  line-height: 1.5;
}

/* «демо-данные» caption under a block's KPI widgets */
.vs-demo-note {
  display: flex;
  align-items: flex-start;
  gap: var(--vs-space);
  margin-top: calc(var(--vs-space) * 2);
  color: var(--vs-blue-70);
  line-height: 1.45;
}
.vs-demo-note .vs-demo-tag { margin-top: 1px; }

.vs-val {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
/* the marker is a dot, not text — keep it centred on the line, not on the
   text baseline, now that .vs-val aligns its children by baseline */
.vs-val > .vs-marker { align-self: center; }
/* unit that belongs to the number, drawn before the quality dot */
.vs-val-unit {
  font-size: var(--fs-caption);
  font-weight: 400;
  color: var(--vs-blue-70);
  margin-left: -2px;
}
.vs-nodata { color: var(--vs-blue-60); }

/* ---------- informer ---------- */

/* Tap area is 40x40 (D9); the visible circle is the 20 px ::before disc. */
.vs-informer {
  position: relative;
  border: 0;
  background: transparent;
  color: var(--vs-blue);
  width: 40px;
  height: 40px;
  margin: -10px -10px;
  border-radius: 50%;
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.vs-informer::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--vs-blue-15);
  background: var(--vs-white);
  transition: background-color var(--vs-transition), border-color var(--vs-transition);
}
.vs-informer > span {
  position: relative;
  z-index: 1;
  transition: color var(--vs-transition);
}
.vs-informer:hover::before { background: var(--vs-blue); border-color: var(--vs-blue); }
.vs-informer:hover > span { color: var(--vs-white); }
.vs-informer-text {
  font-size: var(--fs-caption);
  color: var(--vs-blue-70);
  border-left: 2px solid var(--vs-blue-15);
  padding-left: calc(var(--vs-space) * 1.5);
  margin: var(--vs-space) 0 calc(var(--vs-space) * 2);
  max-width: 720px;
}

/* ---------- filters ---------- */

.vs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--vs-space) * 2);
  align-items: flex-end;
}
.vs-field { display: flex; flex-direction: column; gap: 4px; min-width: 176px; }
.vs-field > label,
.vs-field > .vs-field-label {
  font-size: var(--fs-caption);
  color: var(--vs-blue-70);
}
.vs-select, .vs-input {
  appearance: none;
  background: var(--vs-white);
  border: 1px solid var(--vs-blue-15);
  border-radius: var(--vs-radius);
  color: var(--vs-blue);
  padding: 0 calc(var(--vs-space) * 1.5);
  min-height: 40px;
  width: 100%;
  transition: border-color var(--vs-transition);
}
.vs-select:hover, .vs-input:hover { border-color: var(--vs-blue); }
.vs-select:disabled, .vs-input:disabled { opacity: 0.4; }

/* ---------- multi-select filter ---------- */

.vs-multi { position: relative; }
.vs-multi-toggle {
  width: 100%;
  min-height: 40px;
  background: var(--vs-white);
  border: 1px solid var(--vs-blue-15);
  border-radius: var(--vs-radius);
  color: var(--vs-blue);
  padding: 0 calc(var(--vs-space) * 1.5);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vs-space);
  transition: border-color var(--vs-transition);
}
.vs-multi-toggle:hover { border-color: var(--vs-blue); }
.vs-multi-toggle[aria-expanded="true"] { border-color: var(--vs-blue); }
.vs-multi-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vs-multi-count {
  flex: 0 0 auto;
  font-size: var(--fs-caption);
  font-weight: 700;
  background: var(--vs-blue);
  color: var(--vs-white);
  border-radius: var(--vs-radius);
  padding: 2px 6px;
}
.vs-multi-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  min-width: 260px;
  max-width: 360px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--vs-white);
  border: 1px solid var(--vs-blue);
  border-radius: var(--vs-radius);
  padding: var(--vs-space);
}
.vs-multi-panel[hidden] { display: none; }
.vs-multi-actions {
  display: flex;
  gap: var(--vs-space);
  padding-bottom: var(--vs-space);
  margin-bottom: var(--vs-space);
  border-bottom: 1px solid var(--vs-blue-12);
}
.vs-multi-actions button {
  border: 1px solid var(--vs-blue-15);
  background: var(--vs-white);
  color: var(--vs-blue);
  border-radius: var(--vs-radius);
  font-size: var(--fs-caption);
  min-height: 40px;
  padding: 0 var(--vs-space);
  cursor: pointer;
  flex: 1 1 auto;
  white-space: nowrap;
  transition: background-color var(--vs-transition);
}
.vs-multi-actions button:hover { background: var(--vs-blue-06); }
.vs-multi-option {
  display: flex;
  align-items: center;
  gap: var(--vs-space);
  min-height: 40px;
  padding: 0 var(--vs-space);
  border-radius: var(--vs-radius);
  cursor: pointer;
  font-size: var(--fs-body);
  transition: background-color var(--vs-transition);
}
.vs-multi-option:hover { background: var(--vs-blue-06); }
/* 22px, not 18px: the design system allows only radius 8, and on a smaller
   box that radius reads as a circle — i.e. as a radio button, which would
   wrongly suggest a single choice. At 22px it reads as a rounded square. */
.vs-multi-option input {
  appearance: none;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 2px solid var(--vs-blue-40);
  border-radius: var(--vs-radius);
  background: var(--vs-white);
  cursor: pointer;
  position: relative;
  transition: background-color var(--vs-transition), border-color var(--vs-transition);
}
.vs-multi-option input:checked { background: var(--vs-blue); border-color: var(--vs-blue); }
.vs-multi-option input:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid var(--vs-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.vs-multi-option span { overflow: hidden; text-overflow: ellipsis; }

/* ---------- buttons ---------- */

.vs-btn {
  border: 1px solid var(--vs-blue);
  background: var(--vs-blue);
  color: var(--vs-white);
  border-radius: var(--vs-radius);
  min-height: 40px;
  padding: 0 calc(var(--vs-space) * 2);
  cursor: pointer;
  font-weight: 700;
  transition: background-color var(--vs-transition), color var(--vs-transition);
}
.vs-btn:hover { background: var(--vs-blue-light); border-color: var(--vs-blue-light); }
.vs-btn:disabled { opacity: 0.4; cursor: default; }
.vs-btn--ghost {
  background: var(--vs-white);
  color: var(--vs-blue);
  border-color: var(--vs-blue-15);
}
.vs-btn--ghost:hover { background: var(--vs-blue-06); color: var(--vs-blue); border-color: var(--vs-blue); }
.vs-btn--on-dark {
  background: transparent;
  color: var(--vs-white);
  border-color: var(--vs-white-30);
}
.vs-btn--on-dark:hover { background: var(--vs-white-15); border-color: var(--vs-white); color: var(--vs-white); }
.vs-btn--wide { width: 100%; }

/* ---------- segmented switch (Команда / Лига) ---------- */

.vs-seg {
  display: inline-flex;
  border: 1px solid var(--vs-blue-15);
  border-radius: var(--vs-radius);
  overflow: hidden;
}
.vs-seg button {
  border: 0;
  background: var(--vs-white);
  color: var(--vs-blue);
  min-height: 40px;
  padding: 0 calc(var(--vs-space) * 2);
  cursor: pointer;
  transition: background-color var(--vs-transition), color var(--vs-transition);
}
.vs-seg button:hover { background: var(--vs-blue-06); }
.vs-seg button[aria-pressed="true"] {
  background: var(--vs-blue);
  color: var(--vs-white);
  font-weight: 700;
}

/* ---------- tables ---------- */

.vs-table-scroll { overflow-x: auto; }
.vs-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.vs-table th, .vs-table td {
  text-align: left;
  /* wider gutter so adjacent numeric columns do not touch */
  padding: calc(var(--vs-space) * 1.5) calc(var(--vs-space) * 2);
  border-bottom: 1px solid var(--vs-blue-12);
  vertical-align: middle;
  white-space: nowrap;
}
.vs-table th:first-child, .vs-table td:first-child { padding-left: var(--vs-space); }
.vs-table th:last-child, .vs-table td:last-child { padding-right: var(--vs-space); }
.vs-table th {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--vs-blue-70);
  border-bottom: 1px solid var(--vs-blue-15);
}
.vs-table td.vs-right, .vs-table th.vs-right { text-align: right; }

/* sortable column headers */
.vs-table th.is-sortable { padding: 0; }
.vs-table th.is-sortable button {
  width: 100%;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: calc(var(--vs-space) * 1.5) calc(var(--vs-space) * 2);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color var(--vs-transition);
}
.vs-table th.is-sortable.vs-right button { justify-content: flex-end; }
.vs-table th.is-sortable button:hover { color: var(--vs-blue); }
.vs-table th.is-sorted button { color: var(--vs-blue); }
.vs-sort-arrow {
  font-size: 11px;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--vs-transition);
}
.vs-table th.is-sortable button:hover .vs-sort-arrow { opacity: 0.5; }
.vs-table th.is-sorted .vs-sort-arrow { opacity: 1; }
.vs-table tbody tr.is-clickable { cursor: pointer; transition: background-color var(--vs-transition); }
.vs-table tbody tr.is-clickable:hover { background: var(--vs-blue-06); }
/* ---------- compact table (клубы лиги: 10 columns on 1280) ----------
   The clubs table carries one name column and nine numeric ones. With the
   default 16 px gutters and the words «нет данных» in empty cells the last
   column («Просмотры видео») fell outside the card and had to be scrolled to
   (Grigory, 17.09). Three changes, together enough to fit it: a tighter
   gutter, a numeric column that is only as wide as its content needs
   («Трансляций» holds at most two digits — 12 is the maximum in the data),
   and a header label that wraps instead of setting the column's width. */
.vs-table--compact th,
.vs-table--compact td {
  padding: calc(var(--vs-space) * 1.25) var(--vs-space);
}
.vs-table--compact th.is-sortable { padding: 0; }
.vs-table--compact th.is-sortable button {
  padding: calc(var(--vs-space) * 1.25) var(--vs-space);
  white-space: normal;
  text-align: right;
  line-height: 1.25;
}
.vs-table--compact th.is-sortable:not(.vs-right) button { text-align: left; }
.vs-table--compact .vs-cell-main { min-width: 168px; }
/* a numeric column takes the width of its content, never more */
.vs-table--compact th.vs-right, .vs-table--compact td.vs-right { width: 1%; }
/* empty cell shown as the marker alone — no «нет данных» text to pad around */
.vs-val--tight { gap: 0; }

.vs-table .vs-cell-main { white-space: normal; min-width: 200px; font-weight: 700; }
/* long place names wrap instead of stretching the table past the grid */
.vs-table .vs-cell-wrap { white-space: normal; max-width: 220px; }
.vs-table-foot { margin-top: calc(var(--vs-space) * 2); }

/* ---------- sport icon ---------- */

.vs-sport-icon { flex: 0 0 auto; }

/* ---------- league tiles ---------- */

.vs-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--vs-space) * 3);
}
.vs-tile {
  --card-brand: var(--vs-blue);
  --card-brand-from: var(--vs-blue);
  --card-brand-to: var(--vs-blue-light);
  display: flex;
  flex-direction: column;
  background: var(--vs-blue);
  border: 1px solid var(--vs-blue);
  border-radius: var(--vs-radius);
  color: var(--vs-white);
  text-decoration: none;
  padding: calc(var(--vs-space) * 3);
  min-height: 180px;
  transition: opacity var(--vs-transition), background-color var(--vs-transition);
}
.vs-tile:hover { background: var(--vs-blue-light); color: var(--vs-white); }

/* league brand colour from data: soft 45° gradient of the league's own colour */
.vs-tile.has-brand {
  background: linear-gradient(45deg, var(--card-brand-from) 0%, var(--card-brand-to) 100%);
  border-color: var(--card-brand-from);
}
.vs-tile.has-brand:hover { opacity: 0.88; }

/* Light brand colour (Женская Суперлига #ffc7ff): the colour is kept as it is
   and the text turns brand blue, because darkening pink until white text fits
   would stop being the league's colour. Contrast checked in applyBrand(). */
.vs-tile.has-brand-light,
.vs-tile.has-brand-light:hover { color: var(--vs-blue); }
.vs-tile.has-brand-light .vs-tile-meta .vs-tile-fig span,
.vs-tile.has-brand-light .vs-tile-sport-line { color: var(--vs-blue-70); }
.vs-tile.has-brand-light .vs-logo-box { background: var(--vs-white); border-color: var(--vs-blue-15); }
.vs-tile.has-brand-light .vs-logo-box.is-text { background: var(--vs-white); }
.vs-tile.has-brand-light .vs-logo-box.is-text span { color: var(--vs-blue); }
.vs-tile.has-brand-light .vs-tile-note { color: var(--vs-blue-70); }
.vs-tile-name { font-size: var(--fs-h3); font-weight: 700; }

/* figures row of the tile: big number + small caption (mockup, 16.09) */
/* «Доступные данные:» — says the figures below are what the storefront has,
   not the league's full season (Grigory, 16.09) */
.vs-tile-avail {
  margin-top: calc(var(--vs-space) * 2);
  font-size: var(--fs-caption);
  color: var(--vs-white-80);
}
.vs-tile.has-brand-light .vs-tile-avail { color: var(--vs-blue-70); }

.vs-tile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(var(--vs-space) * 2.5);
  margin-top: var(--vs-space);
}
.vs-tile-fig {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 42px;
}
.vs-tile-fig b {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
/* «нет данных» keeps the caption on the same baseline as real figures */
.vs-tile-fig b.vs-tile-fig-empty {
  font-size: var(--fs-caption);
  font-weight: 400;
  opacity: 0.75;
  line-height: 1.45;
}
.vs-tile-fig span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  letter-spacing: 0.03em;
  color: var(--vs-white-80);
}

/* League description from leagues.tier_note — drawn only when the data has it.
   Was a one-line badge beside the logo, sized for the mockup's single word
   «Федеральная»; the base now stores whole sentences (up to 107 characters),
   which overflowed the tile. A wrapping block shows the full text inside the
   card: no ellipsis, because a truncated description is a hidden value. */
.vs-tile-note {
  margin-top: calc(var(--vs-space) * 1.5);
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--vs-white-80);
  /* wrap long words (a url or a long term) instead of pushing the card wider */
  overflow-wrap: break-word;
}

/* logo box: white plate so a full-colour mark stays readable on any tile */
.vs-logo-box {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--vs-radius);
  background: var(--vs-white);
  border: 1px solid var(--vs-white-30);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 4px;
}
.vs-logo-img { width: 100%; height: 100%; object-fit: contain; }
/* A white knockout logo (BETCITY Суперлига по футзалу) disappears on a white
   plate, so its plate takes the league's own colour — set inline from
   leagues.brand_color — and falls back to navy when that colour cannot carry
   a white mark. See VS_CONFIG.LOGO_ON_BRAND. */
.vs-logo-box.is-on-brand {
  background: var(--logo-plate, var(--vs-blue));
  border-color: var(--vs-white-30);
}
.vs-tile.has-brand-light .vs-logo-box.is-on-brand {
  background: var(--logo-plate, var(--vs-blue));
  border-color: var(--vs-blue-15);
}
/* no logo file → short name as the mark, in brand blue on the white plate */
.vs-logo-box.is-text {
  background: var(--vs-white-15);
  border-color: var(--vs-white-30);
}
.vs-logo-box.is-text span {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--vs-white);
  text-align: center;
  line-height: 1.1;
  padding: 2px;
}
.vs-logo-fallback-icon { width: 28px; height: 28px; opacity: 0.9; }

/* sport as icon + word under the league name */
.vs-tile-sport-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: var(--fs-caption);
  color: var(--vs-white-80);
}
.vs-tile-sport-icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* league page header card — brand colour as left border only */
.vs-league-head {
  --card-brand: var(--vs-blue);
  --card-brand-from: var(--vs-blue);
  --card-brand-to: var(--vs-blue-light);
  background: var(--vs-blue);
  border-radius: var(--vs-radius);
  color: var(--vs-white);
  padding: calc(var(--vs-space) * 3);
  margin-bottom: calc(var(--vs-space) * 3);
}
.vs-league-head.has-brand {
  background: linear-gradient(45deg, var(--card-brand-from) 0%, var(--card-brand-to) 100%);
}
.vs-league-head h1 { color: var(--vs-white); }
.vs-league-head .vs-plate { border-color: var(--vs-white-30); }
.vs-league-head .vs-plate-label { color: var(--vs-white-80); }
.vs-league-head .vs-plate-value { color: var(--vs-white); }
.vs-league-head .vs-plate-unit { color: var(--vs-white-80); }

/* light brand colour → blue text, same rule as the tiles */
.vs-league-head.has-brand-light,
.vs-league-head.has-brand-light h1 { color: var(--vs-blue); }
.vs-league-head.has-brand-light .vs-muted,
.vs-league-head.has-brand-light .vs-caption { color: var(--vs-blue-70); }

/* league logo in the header, right-aligned (Grigory, 16.09) */
.vs-league-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--vs-space) * 3);
}
.vs-league-head-logo {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  margin-left: auto;
  border-radius: var(--vs-radius);
  background: var(--vs-white);
  border: 1px solid var(--vs-white-30);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6px;
}
.vs-league-head-logo img { width: 100%; height: 100%; object-fit: contain; }
.vs-league-head.has-brand-light .vs-league-head-logo { border-color: var(--vs-blue-15); }
/* white knockout mark → the league's own colour as the plate (see tiles) */
.vs-league-head-logo.is-on-brand { background: var(--logo-plate, var(--vs-blue)); }

/* ---------- league tile extras ---------- */

.vs-tile-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--vs-space);
  margin-bottom: calc(var(--vs-space) * 2);
  min-height: 56px;
}
/* name block sits between the logo row and the figures (mockup order) */
.vs-tile-title { margin-top: auto; }

/* ---------- league KPI: three cards side by side (Grigory, 16.09) ---------- */

.vs-kpi-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--vs-space) * 3);
  align-items: start;
}
.vs-kpi-card {
  border: 1px solid var(--vs-blue-15);
  border-radius: var(--vs-radius);
  padding: calc(var(--vs-space) * 2.5);
}
.vs-kpi-card-title {
  font-size: var(--fs-h3);
  margin-bottom: calc(var(--vs-space) * 2);
  padding-bottom: var(--vs-space);
  border-bottom: 1px solid var(--vs-blue-12);
}
.vs-kpi-list { display: flex; flex-direction: column; }
.vs-kpi-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--vs-space) * 2);
  padding: var(--vs-space) 0;
}
.vs-kpi-line + .vs-kpi-line { border-top: 1px solid var(--vs-blue-06); }
.vs-kpi-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-caption);
  color: var(--vs-blue-70);
}
.vs-kpi-value {
  font-size: var(--fs-h3);
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}
/* unit inside the KPI line is drawn by VS.ui.value() as .vs-val-unit, so it
   sits before the quality dot (Grigory, 17.09) */

@media (max-width: 1024px) {
  .vs-kpi-cards { grid-template-columns: 1fr; }
}

/* ---------- league comparison bars ---------- */

.vs-bars { display: flex; flex-direction: column; gap: calc(var(--vs-space) * 1.5); }
.vs-bar-row {
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  gap: calc(var(--vs-space) * 2);
  align-items: center;
}
/* A truncated league name («Федерация Хоккея Мо…») hides which league the bar
   belongs to, so the label wraps to two lines instead of being cut. */
.vs-bar-name {
  font-weight: 700;
  color: var(--vs-blue);
  text-decoration: none;
  white-space: normal;
  line-height: 1.25;
  min-height: 40px;
  display: flex;
  align-items: center;
}
.vs-bar-name:hover { color: var(--vs-blue-light); text-decoration: underline; }
.vs-bar-track {
  background: var(--vs-blue-06);
  border-radius: var(--vs-radius);
  height: 32px;
  overflow: hidden;
}
.vs-bar-fill {
  --card-brand-from: var(--vs-blue);
  --card-brand-to: var(--vs-blue-light);
  height: 100%;
  border-radius: var(--vs-radius);
  background: var(--vs-grad);
  transition: width var(--vs-transition);
}
.vs-bar-fill.has-brand {
  background: linear-gradient(45deg, var(--card-brand-from) 0%, var(--card-brand-to) 100%);
}
.vs-bar-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .vs-bar-row { grid-template-columns: 1fr; gap: 4px; }
  .vs-bar-value { justify-content: flex-start; }
}

/* ---------- coverage list ---------- */

.vs-coverage { display: flex; flex-wrap: wrap; gap: calc(var(--vs-space) * 3); }
.vs-coverage div { font-size: var(--fs-caption); color: var(--vs-blue-70); }
.vs-coverage strong { display: block; font-size: var(--fs-h3); color: var(--vs-blue); }

/* ---------- chart settings ---------- */

.vs-chart-settings {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--vs-space) * 4);
  border: 1px solid var(--vs-blue-12);
  border-radius: var(--vs-radius);
  padding: calc(var(--vs-space) * 2);
  margin-bottom: calc(var(--vs-space) * 2);
}
.vs-chart-settings-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--vs-space) * 2);
}
.vs-chart-settings-label {
  font-size: var(--fs-caption);
  color: var(--vs-blue-70);
  font-weight: 700;
}
.vs-radio, .vs-check {
  display: inline-flex;
  align-items: center;
  gap: var(--vs-space);
  min-height: 40px;
  font-size: var(--fs-caption);
  cursor: pointer;
  padding: 0 4px;
  border-radius: var(--vs-radius);
  transition: background-color var(--vs-transition);
}
.vs-radio:hover, .vs-check:hover { background: var(--vs-blue-06); }
.vs-radio input, .vs-check input {
  appearance: none;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 2px solid var(--vs-blue-40);
  background: var(--vs-white);
  cursor: pointer;
  position: relative;
  transition: background-color var(--vs-transition), border-color var(--vs-transition);
}
.vs-radio input { border-radius: 50%; }
.vs-check input { border-radius: var(--vs-radius); }
.vs-radio input:checked, .vs-check input:checked {
  background: var(--vs-blue);
  border-color: var(--vs-blue);
}
.vs-radio input:checked::after {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--vs-white);
}
.vs-check input:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 0;
  width: 5px; height: 10px;
  border: solid var(--vs-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- chart ---------- */

.vs-chart { width: 100%; height: auto; }
.vs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--vs-space) * 2);
  font-size: var(--fs-caption);
  color: var(--vs-blue-70);
  margin-top: var(--vs-space);
}
.vs-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vs-legend i {
  display: inline-block;
  width: 20px;
  height: 0;
  border-top: 2px solid var(--vs-blue);
}
.vs-legend i.is-dashed { border-top-style: dashed; }
.vs-legend i.is-ama { border-top-color: var(--vs-blue-light); border-top-style: dotted; }
.vs-legend i.is-peak {
  width: 10px; height: 10px; border: 0;
  border-radius: 50%;
  background: var(--vs-red);
}

/* ---------- login ---------- */

.vs-login-page {
  min-height: 100vh;
  background: var(--vs-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--vs-space) * 3);
}
.vs-login-card {
  background: var(--vs-white);
  border-radius: var(--vs-radius);
  padding: calc(var(--vs-space) * 4);
  width: 100%;
  max-width: 400px;
}
.vs-login-card h1 { font-size: var(--fs-h2); margin-bottom: var(--vs-space); }
.vs-login-card .vs-field { min-width: 0; width: 100%; }
.vs-error {
  border: 1px solid var(--vs-red);
  border-radius: var(--vs-radius);
  color: var(--vs-red);
  font-size: var(--fs-caption);
  padding: var(--vs-space) calc(var(--vs-space) * 1.5);
}

/* ---------- state notes ---------- */

.vs-note {
  border: 1px solid var(--vs-blue-15);
  border-radius: var(--vs-radius);
  padding: calc(var(--vs-space) * 2);
  color: var(--vs-blue-70);
  font-size: var(--fs-caption);
}
.vs-note--warn { border-color: var(--vs-red); color: var(--vs-red); }

/* ---------- stale-cache alert ----------
   Shown only when js build stamps disagree with VS_CONFIG.ASSET_VERSION. */

.vs-stale {
  border: 1px solid var(--vs-red);
  border-radius: var(--vs-radius);
  padding: calc(var(--vs-space) * 2);
  margin-bottom: calc(var(--vs-space) * 3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vs-space);
}
.vs-stale strong { color: var(--vs-red); font-size: var(--fs-h3); }
.vs-stale p { margin: 0; color: var(--vs-blue); font-size: var(--fs-caption); max-width: 640px; }

@media (max-width: 1024px) {
  .vs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .vs-tiles { grid-template-columns: 1fr; }
  .vs-plate { min-width: 140px; flex: 1 1 140px; }
  .vs-field { min-width: 100%; }
  .vs-card { padding: calc(var(--vs-space) * 2); }
}
/* On a phone two widgets per row leave ~122 px for the figure, and a real
   value like «119 235 075» needs 176 px — it poked out of the viewport
   (measured at 390 px). The separator is non-breaking on purpose, so the
   widget takes the whole row instead of the number being broken up. */
@media (max-width: 520px) {
  .vs-plate { flex: 1 1 100%; min-width: 0; }
}