/* Страница системы. Своя вёрстка только у витрины: таблицы, образцы и рамки
   вариантов. Сами компоненты приходят из components.css без правок. */

.sys {
  background: var(--bg-canvas);
}
.sys-root {
  min-height: 100vh;
  padding: var(--space-10) var(--space-6) var(--space-12);
  background: var(--bg-canvas);
  color: var(--text-primary);
}
.sys-root > * {
  max-width: 1120px;
  margin-inline: auto;
}
.sys-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
}
.sys-kicker {
  margin: 0;
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.sys a.chip {
  color: var(--text-primary);
  text-decoration: none;
}
.sys-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  margin-top: var(--space-6);
  padding-block: var(--space-3);
  background: var(--bg-canvas);
}
.sys-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-top: var(--space-10);
}
.sys-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 64ch;
}
.sys-section-head p {
  margin: 0;
}

/* Коллекция */
.sys-coll {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.sys-coll-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.sys-count {
  font-size: var(--font-size-13);
  color: var(--text-secondary);
}
.sys-table {
  overflow-x: auto;
  border-radius: var(--radius-l);
  background: var(--bg-surface);
}
.sys-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-15);
}
.sys-table th,
.sys-table td {
  padding: var(--space-2) var(--space-4);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
.sys-table th {
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}
.sys-table tr + tr td {
  box-shadow: inset 0 var(--border-hair) 0 var(--line-hair);
}
.sys-name {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-13);
}
.sys-alias {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--size-24);
  padding-inline: var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--bg-sunken);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-11);
  color: var(--text-secondary);
}
.sys-val {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-13);
  color: var(--text-secondary);
}
.sys-mode-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
}
.sys-sw {
  display: inline-block;
  flex: none;
  width: var(--size-28);
  height: var(--size-28);
  border-radius: var(--radius-xs);
  box-shadow: inset 0 0 0 var(--border-thin) var(--line-hair);
  vertical-align: middle;
}
.sys-bar {
  display: inline-block;
  height: var(--size-10);
  border-radius: var(--radius-full);
  background: var(--accent-brand);
  vertical-align: middle;
}

/* Палитра */
.sys-ramps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.sys-ramp {
  display: grid;
  grid-template-columns: 96px repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--space-2);
  align-items: stretch;
}
.sys-ramp-name {
  align-self: center;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-13);
}
.sys-chip {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--size-64);
  padding: var(--space-2);
  border-radius: var(--radius-s);
  box-shadow: inset 0 0 0 var(--border-thin) var(--color-alpha-ink-06);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-11);
}

/* Текст */
.sys-type {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-l);
  background: var(--bg-surface);
}
.sys-type-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
}
.sys-type-row + .sys-type-row {
  box-shadow: inset 0 var(--border-hair) 0 var(--line-hair);
}

/* Компонент */
.sys-comps {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.sys-comp {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
}
.sys-comp-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.sys-comp-info p {
  margin: 0;
  font-size: var(--font-size-15);
  color: var(--text-secondary);
}
.sys-props {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-13);
}
.sys-layout {
  padding: var(--space-3);
  border-radius: var(--radius-m);
  background: var(--bg-sunken);
  font-size: var(--font-size-13);
}
.sys-demo {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5);
  border-radius: var(--radius-l);
  background: var(--bg-canvas);
}
.sys-demo[data-on='surface'] {
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 var(--border-thin) var(--line-hair);
}
.sys-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.sys-cap {
  font-size: var(--font-size-11);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.sys-narrow {
  width: min(100%, 370px);
}

/* Показ auto-layout: пунктир по каждой рамке с раскладкой, как выделение
   в Figma. Тень и заливку не трогаем: у тарифа выбор нарисован тенью. */
.show-al :is(.al-h, .al-v, .btn, .icon-btn, .field, .chip, .cell, .cell-body, .card, .tariff, .tariffs, .banner, .car, .tile, .tiles, .sheet, .sheet-head, .stars, .checks, .check, .explain, .toast, .list) {
  outline: 1px dashed #e24fd0;
  outline-offset: -1px;
}

@media (max-width: 820px) {
  .sys-root {
    padding-inline: var(--space-4);
  }
  .sys-comp {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-4);
  }
  .sys-type-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
}