/* ═══════════════════════════════════════════════════════
   Design System showcase — Page Styles
   Только layout витрины и ds-* обвязка. Всё, что демонстрируется,
   берётся из shared/components.css как есть; токены — shared/theme.css.
   ═══════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--body-font, system-ui, -apple-system, sans-serif);
  font-size: var(--fs-600);
  background: var(--bg-base);
  color: var(--text);
  min-height: 100vh;
}

/* ── Main layout ──────────────────────────────────────── */

main {
  max-width: 820px;
  margin: 0 auto;
  padding: 68px var(--sp-600) 120px;
}
/* Десктоп: колонка по центру, пока хватает места, иначе сдвигается влево,
   чтобы плавающее оглавление (220px + отступы) не накрывало демо. */
@media (min-width: 901px) {
  main {
    margin-left: max(232px, calc((100vw - 820px) / 2));
    margin-right: max(252px, calc((100vw - 820px) / 2));
  }
}

/* ── Section switcher (left) ──────────────────────────── */
/* Как список наград в awards: строки .ds-group-btn внутри .side-panel.
   Десктоп — фиксированная колонка слева; ≤ 900px — строка чипов в потоке. */
#ds-groups { position: fixed; top: 60px; left: 16px; width: 200px; z-index: 100; }
#ds-groups .side-panel-body { display: flex; flex-direction: column; gap: 2px; }
.ds-group-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-300);
  width: 100%;
  padding: var(--sp-200) var(--sp-300);
  font-size: var(--fs-300);
  font-family: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-200);
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.ds-group-btn:hover { background: var(--hover-bg); color: var(--hover-fg); }
.ds-group-btn.active {
  background: var(--btn-active-bg);
  color: var(--btn-active-fg);
  border-color: var(--btn-active-fg);
}
.ds-group-btn.active:hover { filter: brightness(1.12); }
.ds-group-btn [data-lucide] { flex-shrink: 0; }

.ds-hero-emoji {
  font-size: var(--emoji-md);
  margin-bottom: var(--sp-300);
  display: block;
  opacity: 0.85;
}
.ds-hero-sub {
  font-size: var(--fs-500);
  color: var(--on-base-muted);
  text-shadow: var(--on-base-shadow);
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 auto;
}

/* ── Contents sidebar ─────────────────────────────────── */

#ds-sidebar { top: 60px; width: 220px; }
#ds-nav { max-height: calc(100vh - 140px); overflow-y: auto; }
.ds-nav-group { margin-top: var(--sp-300); }
.ds-nav-group:first-child { margin-top: 0; }
.ds-nav-item {
  display: block;
  font-size: var(--fs-300);
  padding: var(--sp-100) var(--sp-200);
  border-radius: var(--radius-100);
  color: var(--text-muted);
  text-decoration: none;
  line-height: 1.4;
  transition: color var(--t-fast), background var(--t-fast);
}
.ds-nav-item:hover { color: var(--hover-fg); background: var(--hover-bg); }
.ds-nav-item.active {
  color: var(--text-link);
  font-weight: 600;
  background: color-mix(in srgb, var(--nav-active) 12%, transparent);
}

/* ── Sections ─────────────────────────────────────────── */

.ds-section { margin-top: var(--sp-800); scroll-margin-top: 64px; }
.ds-section-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-200) var(--sp-300);
  margin-bottom: var(--sp-300);
}
.ds-h2 {
  font-size: var(--fs-900);
  font-weight: 700;
  color: var(--on-base);
  text-shadow: var(--on-base-shadow);
  line-height: 1.2;
}
html[data-style="liquid"] .ds-h2, html[data-style="disco"] .ds-h2 { font-weight: 800; letter-spacing: var(--track-tight); }
html[data-style="got"] .ds-h2 { letter-spacing: var(--track-1); }
.ds-h3 {
  font-size: var(--fs-700);
  font-weight: 600;
  color: var(--on-base);
  text-shadow: var(--on-base-shadow);
  margin: var(--sp-600) 0 var(--sp-300);
}
.ds-desc {
  font-size: var(--fs-500);
  line-height: 1.7;
  color: var(--on-base-muted);
  text-shadow: var(--on-base-shadow);
  max-width: 68ch;
  margin-bottom: var(--sp-400);
}
.ds-desc code, .ds-inline-code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: var(--fs-400);
  padding: 0 var(--sp-100);
  border-radius: var(--radius-100);
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}

/* Файлы-исходники компонента: чипы, по клику показывают CSS */
.ds-files { display: flex; flex-wrap: wrap; gap: var(--sp-100); margin-bottom: var(--sp-400); }
.ds-file { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; text-transform: none; letter-spacing: 0; }
.ds-src-wrap { margin-bottom: var(--sp-400); }
.ds-src {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: var(--fs-300);
  line-height: 1.55;
  color: var(--text);
  background: var(--win-bg);
  border: 1px solid var(--panel-sep);
  border-radius: var(--radius-200);
  padding: var(--sp-400);
  max-height: 420px;
  overflow: auto;
  white-space: pre;
  tab-size: 2;
}

/* ── Demo blocks ──────────────────────────────────────── */

.ds-demo {
  background: var(--win-bg);
  border: 1px solid var(--panel-sep);
  border-radius: var(--radius-200);
  padding: var(--sp-400) var(--sp-500);
  margin-bottom: var(--sp-400);
}
/* Обычное демо — поверхность: как .surface, сбрасывает --on-base* на --text */
.ds-demo:not(.ds-demo--base) {
  --on-base: var(--text);
  --on-base-muted: var(--text-muted);
  --on-base-shadow: none;
}
/* Демо элементов, лежащих прямо на нижнем слое (--on-base*): фон страницы, пунктир */
.ds-demo--base {
  background: transparent;
  border-style: dashed;
}
html[data-style="win95"] .ds-demo {
  border: 2px solid;
  border-color: var(--bevel-sunken);
  border-radius: 0;
}
html[data-style="win95"] .ds-demo--base { border: 1px dashed var(--panel-sep); background: transparent; }

.ds-demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-300);
  margin-bottom: var(--sp-300);
}
.ds-demo-tools { display: flex; gap: var(--sp-100); flex-shrink: 0; }
.ds-demo-stage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-300);
}
.ds-demo-stage--block { display: block; }
.ds-demo-stage--column { flex-direction: column; align-items: flex-start; }
.ds-demo-note {
  font-size: var(--fs-300);
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: var(--sp-300);
}

.ds-code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: var(--fs-300);
  line-height: 1.55;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: var(--radius-100);
  padding: var(--sp-300) var(--sp-400);
  margin-top: var(--sp-300);
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}
.ds-code--static { margin-top: 0; }

/* «Скопировано» — цвет успеха, один на все темы */
.btn-header.is-copied { color: var(--success); border-color: var(--success); }

/* ── Theme matrix ─────────────────────────────────────── */

.ds-matrix-wrap {
  overflow-x: auto;
  border: 1px solid var(--panel-sep);
  border-radius: var(--radius-200);
  background: var(--win-bg);
  margin-bottom: var(--sp-400);
}
.ds-matrix { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.ds-matrix th, .ds-matrix td { padding: var(--sp-100) var(--sp-200); text-align: left; vertical-align: middle; white-space: nowrap; }
.ds-matrix thead th { position: sticky; top: 0; background: var(--win-bg); z-index: 2; border-bottom: 1px solid var(--panel-sep); }
.ds-matrix th:first-child, .ds-matrix td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--win-bg);
  border-right: 1px solid var(--panel-sep);
}
.ds-matrix thead th:first-child { z-index: 3; }
.ds-matrix tbody tr:hover td { background: var(--hover-bg); }
.ds-matrix tbody tr:hover td:first-child { background: var(--hover-bg); }
.ds-token {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: var(--fs-200);
  color: var(--text);
}
.ds-col-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 52px;
  padding: var(--sp-100) var(--sp-100);
  border: 1px solid transparent;
  border-radius: var(--radius-100);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--fs-150);
  font-weight: 600;
  letter-spacing: var(--track-1);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.ds-col-btn:hover { color: var(--text); border-color: var(--nav-active); }
.ds-col-btn.active { color: var(--btn-active-fg); background: var(--btn-active-bg); border-color: transparent; }
.ds-col-btn [data-lucide] { color: inherit; }
.ds-cell {
  width: 52px;
  height: 26px;
  border-radius: var(--radius-100);
  border: 1px solid var(--panel-sep);
  display: block;
}
.ds-cell[title] { cursor: help; }

/* ── Palette (primitives) & gradients ─────────────────── */

.ds-warn {
  display: flex; align-items: flex-start; gap: var(--sp-200);
  font-size: var(--fs-300);
  line-height: 1.6;
  color: var(--text);
  background: color-mix(in srgb, var(--nav-active) 10%, var(--win-bg));
  border: 1px solid color-mix(in srgb, var(--nav-active) 40%, transparent);
  border-left: 3px solid var(--nav-active);
  border-radius: var(--radius-100);
  padding: var(--sp-300) var(--sp-400);
  margin-bottom: var(--sp-400);
  max-width: 68ch;
}
.ds-warn [data-lucide] { flex-shrink: 0; margin-top: 2px; color: var(--nav-active); }
.ds-warn code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: var(--fs-200); }
.ds-list--zero { counter-reset: ds-level -1; list-style: none; padding-left: 0; }
.ds-list--zero li { counter-increment: ds-level; }
.ds-list--zero li::before { content: counter(ds-level) '. '; color: var(--text-muted); }
.ds-palette { margin-bottom: var(--sp-400); }
.ds-family { margin-top: var(--sp-400); }
.ds-family-name { margin-bottom: var(--sp-200); }
.ds-family-row { display: flex; flex-wrap: wrap; gap: var(--sp-200); }
.ds-prim {
  width: 68px;
  display: flex; flex-direction: column; align-items: stretch;
  border: 1px solid var(--panel-sep);
  border-radius: var(--radius-100);
  background: var(--win-bg);
  overflow: hidden;
}
.ds-prim-color { display: block; height: 40px; }
.ds-prim-step { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: var(--fs-200); font-weight: 600; color: var(--text); padding: var(--sp-100) var(--sp-100) 0; }
.ds-prim-hex { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: var(--fs-100); color: var(--text-faint); padding: 0 var(--sp-100) var(--sp-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-gradients { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-300); margin-bottom: var(--sp-400); }
.ds-grad { display: flex; flex-direction: column; gap: var(--sp-100); border: 1px solid var(--panel-sep); border-radius: var(--radius-200); background: var(--win-bg); padding: var(--sp-200); overflow: hidden; }
.ds-grad-bar { display: block; height: 48px; border-radius: var(--radius-100); border: 1px solid var(--panel-sep); }

/* ── Theme preview cards ──────────────────────────────── */
/* Токены темы подставлены inline на .ds-tp (см. fillThemeCards), поэтому
   внутри работают обычные семантические var(): карточка честно показывает
   шрифт, радиусы, поверхности, акцент и тени темы. */
/* Две колонки: light и dark одного стиля рядом, стили — рядами */
.ds-theme-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-300);
  margin-bottom: var(--sp-500);
}
.ds-tp {
  display: block;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-200);
  background: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  overflow: hidden;
  transition: border-color var(--t-fast), transform var(--t-base);
}
.ds-tp:hover { transform: translateY(-2px); }
.ds-tp.active { border-color: var(--nav-active); }
.ds-tp:focus-visible { outline: 2px solid var(--nav-active); outline-offset: 2px; }
.ds-tp-bg {
  display: block;
  padding: var(--sp-300);
  background: var(--bg-base);
  font-family: var(--body-font);
  color: var(--text);
}
.ds-tp-name {
  display: block;
  font-size: var(--fs-150);
  font-weight: 700;
  letter-spacing: var(--track-2);
  text-transform: uppercase;
  color: var(--on-base);
  text-shadow: var(--on-base-shadow);
  margin-bottom: var(--sp-200);
}
.ds-tp-card {
  display: block;
  padding: var(--sp-300);
  background: var(--win-bg);
  border: 1px solid var(--panel-sep);
  border-radius: var(--radius-200);
  box-shadow: var(--win-shadow);
  --on-base: var(--text); --on-base-muted: var(--text-muted); --on-base-shadow: none;
}
.ds-tp-accent { display: block; height: 3px; border-radius: var(--radius-900); background: var(--accent-grad); margin-bottom: var(--sp-200); }
.ds-tp-text { display: block; font-size: var(--fs-500); font-weight: 600; color: var(--text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-tp-muted { display: block; font-size: var(--fs-100); color: var(--text-muted); margin: 2px 0 var(--sp-200); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-tp-row { display: flex; gap: var(--sp-100); align-items: center; }
.ds-tp-btn, .ds-tp-chip {
  display: inline-block;
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--track-1);
  padding: 3px var(--sp-200);
  border-radius: var(--radius-900);
  line-height: 1.4;
}
.ds-tp-btn { background: var(--btn-active-bg); color: var(--btn-active-fg); box-shadow: 0 4px 12px var(--accent-glow); }
.ds-tp-chip { background: var(--header-btn-bg); color: var(--header-btn-text); border: 1px solid var(--header-btn-border); }

.ds-matrix--text td { white-space: normal; vertical-align: top; }
.ds-cell-text { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: var(--fs-100); color: var(--text-muted); white-space: nowrap; }
.ds-cell-dash { color: var(--text-faint); }
.ds-cell-wrap { display: flex; flex-wrap: wrap; gap: var(--sp-100); padding: var(--sp-200) var(--sp-300); }

/* ── Swatches (live tokens) ───────────────────────────── */

.ds-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-300);
  margin-bottom: var(--sp-500);
}
.ds-swatch {
  border: 1px solid var(--panel-sep);
  border-radius: var(--radius-200);
  background: var(--win-bg);
  overflow: hidden;
}
.ds-swatch-color {
  height: 56px;
  border-bottom: 1px solid var(--panel-sep);
}
.ds-swatch-color--text {
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-800); font-weight: 700;
  background: var(--win-bg);
}
.ds-swatch-meta { padding: var(--sp-200) var(--sp-300); }
.ds-swatch-name {
  display: block;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: var(--fs-200);
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-swatch-value {
  display: block;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: var(--fs-150);
  color: var(--text-faint);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-swatch-desc { display: block; font-size: var(--fs-150); color: var(--text-muted); margin-top: var(--sp-100); line-height: 1.4; }

/* ── Type / spacing / radius / elevation rows ─────────── */

.ds-rows { display: flex; flex-direction: column; gap: var(--sp-200); }
.ds-row {
  display: grid;
  grid-template-columns: 130px minmax(70px, max-content) 1fr;
  align-items: center;
  gap: var(--sp-300);
  padding: var(--sp-200) 0;
  border-bottom: 1px solid var(--div-top);
}
.ds-row:last-child { border-bottom: none; }
.ds-row-val {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: var(--fs-150);
  color: var(--text-faint);
  white-space: nowrap;
  line-height: 1.5;
}
/* исходное выражение токена (clamp…) — второй строкой под пикселями */
.ds-row-raw { display: block; color: var(--text-faint); white-space: normal; max-width: 160px; }
.ds-row-sample { color: var(--text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-bar { display: block; height: 12px; background: var(--nav-active); border-radius: var(--radius-100); }
.ds-shapes { display: flex; flex-wrap: wrap; gap: var(--sp-500); }
.ds-shape { display: flex; flex-direction: column; align-items: center; gap: var(--sp-200); }
.ds-shape-box {
  width: 72px; height: 72px;
  background: var(--win-bg);
  border: 1px solid var(--panel-sep);
}
.ds-shape-box--fill { background: var(--btn-active-bg); border-color: transparent; }
.ds-shape-label { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: var(--fs-150); color: var(--text-muted); }
.ds-motion-box {
  width: 48px; height: 48px;
  border-radius: var(--radius-100);
  background: var(--btn-active-bg);
  transition: transform var(--t-base) var(--ease-out);
}
.ds-shape:hover .ds-motion-box { transform: translateX(32px); }
.ds-motion-box--fast { transition-duration: var(--t-fast); }
.ds-motion-box--slow { transition-duration: var(--t-slow); }

/* ── Icons grid ───────────────────────────────────────── */

.ds-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--sp-200); }
.ds-icon {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-200);
  padding: var(--sp-300) var(--sp-200);
  border: 1px solid var(--div-top);
  border-radius: var(--radius-100);
  color: var(--text);
}
.ds-icon-name { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: var(--fs-100); color: var(--text-muted); text-align: center; word-break: break-all; }

/* ── Demo helpers ─────────────────────────────────────── */

/* Демо side-nav: не fixed, но с фоном и рамкой панели навигации */
.ds-nav-demo {
  width: 220px;
  background: var(--nav-bg);
  border: 1px solid var(--nav-border);
  border-radius: var(--radius-200);
  overflow: hidden;
  padding: var(--sp-200) 0;
}
/* Демо переключателя: та же обвязка, что у #theme-switcher, но в потоке */
.ds-ts-demo {
  display: flex; align-items: center; gap: var(--sp-100); flex-wrap: wrap;
  background: var(--header-btn-bg);
  border: 1px solid var(--header-btn-border);
  border-radius: var(--radius-200);
  padding: var(--sp-200) var(--sp-200);
}
.ds-scroll-demo {
  height: 140px;
  width: 100%;
  max-width: 360px;
  overflow: auto;
  padding: var(--sp-300);
  border: 1px solid var(--panel-sep);
  border-radius: var(--radius-100);
  font-size: var(--fs-300);
  line-height: 1.7;
  color: var(--text-muted);
}
.ds-plain-btn, .ds-input {
  font-family: inherit;
  font-size: var(--fs-400);
  padding: var(--sp-200) var(--sp-300);
  border: 1px solid var(--panel-sep);
  border-radius: var(--radius-100);
  background: transparent;
  color: var(--text);
}
.ds-plain-btn { cursor: pointer; }
.ds-input::placeholder { color: var(--text-faint); }
.ds-surface-demo {
  padding: var(--sp-400);
  border-radius: var(--radius-200);
  border: 1px solid var(--panel-sep);
  background: var(--win-bg);
}
.ds-kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-100) var(--sp-400); font-size: var(--fs-300); line-height: 1.6; color: var(--text-muted); }
.ds-kv dt { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--text); }
.ds-kv dd { margin: 0; }

/* ── Tables (conventions) ─────────────────────────────── */

.ds-table { width: 100%; border-collapse: collapse; font-size: var(--fs-300); margin-bottom: var(--sp-400); }
.ds-table th, .ds-table td { padding: var(--sp-200) var(--sp-300); text-align: left; border-bottom: 1px solid var(--div-top); vertical-align: top; line-height: 1.5; }
.ds-table th { color: var(--text-muted); }
.ds-table td { color: var(--text); }
.ds-list { padding-left: var(--sp-500); font-size: var(--fs-500); line-height: 1.7; color: var(--on-base-muted); text-shadow: var(--on-base-shadow); margin-bottom: var(--sp-400); }
.ds-list li { margin-bottom: var(--sp-100); }

/* ── Responsive (см. конвенцию брейкпоинтов в shared/components.css) ── */

@media (max-width: 900px) {
  #ds-sidebar { top: 56px; width: 240px; }
  #ds-groups { position: static; width: auto; margin-bottom: var(--sp-400); }
  #ds-groups .side-panel { padding: var(--sp-200); }
  #ds-groups .side-panel-toggle { display: none; }
  #ds-groups .side-panel-body { flex-direction: row; flex-wrap: wrap; gap: var(--sp-100); }
  .ds-group-btn { width: auto; padding: var(--sp-100) var(--sp-300); }
}

@media (max-width: 600px) {
  main { padding: 60px var(--sp-400) 120px; }
  .ds-row { grid-template-columns: 110px minmax(56px, max-content) 1fr; gap: var(--sp-200); }
  .ds-row-raw { max-width: 96px; }
  .ds-swatches { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
  .ds-demo { padding: var(--sp-300) var(--sp-400); }
  .ds-h2 { font-size: var(--fs-800); }
  .ds-theme-cards { gap: var(--sp-200); }
}