/* ============================================================
   ВОЛНА 4 — Визуал и дизайн-система (задачи 901–1200 / 1–300).
   Аддитивный слой: только ДОБАВЛЯЕТ токены/классы и ПЕРЕОПРЕДЕЛЯЕТ
   поверхности для светлой/контрастной тем. Замороженный контракт
   tokens.css (T199) не меняется — имена/значения тёмной темы те же.
   Подключается ПОСЛЕ tokens.css, поэтому :root-добавления выигрывают
   по порядку каскада, а html[data-theme=...] — по специфичности.
   ============================================================ */

/* ---------- §1 Токены: бренд-шкала (задачи 1, 4) ---------- */
:root {
  /* Семантическая бренд-шкала из 10 ступеней (база = синий акцент). */
  --color-brand-50:  #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-200: #bfdbfe;
  --color-brand-300: #93c5fd;
  --color-brand-400: #60a5fa;
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
  --color-brand-700: #1d4ed8;
  --color-brand-800: #1e40af;
  --color-brand-900: #1e3a8a;

  /* Нейтральная шкала серых с ровным шагом светлоты (задача 4). */
  --gray-0:    #ffffff;
  --gray-50:   #f6f8fb;
  --gray-100:  #eaeef4;
  --gray-200:  #d6dde8;
  --gray-300:  #b8c2d1;
  --gray-400:  #93a1b3;
  --gray-500:  #6b788c;
  --gray-600:  #4c596b;
  --gray-700:  #353f4e;
  --gray-800:  #222a36;
  --gray-900:  #141a23;
  --gray-1000: #0b0e13;

  /* ---------- §2 Недостающие алиасы (задачи 13,16,26,27,31,32,33,
     36,40,53) — имена из спецификации поверх существующих примитивов. */
  --color-bg: var(--bg);
  --color-surface: var(--card);
  --color-text: var(--txt);
  --color-muted: var(--muted);
  --color-border: var(--line);

  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --measure: 65ch;
  --gutter: var(--sp-4);
  --col-count: 12;

  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 48px;

  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;

  --overlay-weak: rgba(3, 7, 18, .45);
  --overlay-strong: rgba(3, 7, 18, .82);

  --skeleton-base: var(--skeleton-a);
  --skeleton-shine: var(--skeleton-b);

  --row-stripe: var(--row-alt);
  --row-hover-c: var(--row-hover);

  --code-bg: #11151c;
  --code-text: #d7e0ec;

  --link: var(--accent-400);
  --link-hover: var(--accent-300);
  --link-visited: var(--accent-200);

  --input-bg: var(--field-bg);
  --input-border: var(--line);
  --input-border-focus: var(--accent-500);
  --input-border-error: var(--danger);

  --focus-ring-color: var(--accent-500);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* печать (задача 37) */
  --print-fg: #000;
  --print-bg: #fff;
  --print-line: #888;
}

/* ---------- §3 Светлая тема: переопределение поверхностей всего портала
   (задачи 18,19,20). Специфичность html[data-theme] > :root, поэтому
   перебивает замороженные значения без правки tokens.css. ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f8fb;
  --card: #ffffff;
  --card-2: #f1f4f9;
  --line: #dbe2ec;
  --txt: #16202b;
  --muted: #5b6b7d;
  --row-alt: #f4f7fb;
  --row-hover: #eef3f9;
  --field-bg: #ffffff;

  --surface-0: #eef2f7;
  --surface-1: #f4f7fb;
  --surface-2: #ffffff;
  --surface-3: #ffffff;
  --surface-4: #f1f4f9;
  --surface-raised: #ffffff;
  --surface-sunken: #e9eef5;
  --surface-hover: #eef3f9;
  --border: #dbe2ec;
  --border-strong: #c4cedb;
  --text: #16202b;
  --text-muted: #5b6b7d;
  --text-subtle: #7c8a9c;
  --text-inverse: #ffffff;

  --accent: #2563eb;
  --accent-500: #2563eb;
  --accent-soft: rgba(37, 99, 235, .12);

  /* §3.1 Тени мягче и менее контрастны на свету (задача 19). */
  --shadow-1: 0 1px 2px rgba(16, 32, 48, .10);
  --shadow-2: 0 8px 24px rgba(16, 32, 48, .12);
  --shadow-3: 0 16px 40px rgba(16, 32, 48, .14);
  --shadow-4: 0 24px 60px rgba(16, 32, 48, .16);

  /* §3.2 Состояния с приглушённой насыщенностью, читаемые на белом (задача 20). */
  --success-soft: rgba(22, 163, 74, .12);
  --warning-soft: rgba(180, 120, 9, .14);
  --danger-soft: rgba(220, 38, 38, .12);
  --info-soft: rgba(2, 132, 199, .12);

  --skeleton-a: #e6ebf2;
  --skeleton-b: #f1f4f9;
  --scrollbar-track: rgba(16, 32, 48, .04);
  --scrollbar-thumb: rgba(16, 32, 48, .22);
  --code-bg: #f1f4f9;
  --code-text: #1c2733;
  --overlay: rgba(16, 32, 48, .42);

  --link: var(--accent-600, #2563eb);
  --link-hover: #1d4ed8;
}

/* Без вспышки: пока тема не выбрана, prefers-color-scheme=light даёт светлый старт
   (задача 21), но только если пользователь явно не выбрал тёмную. */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) { color-scheme: light; }
}

/* ---------- §4 Высококонтрастная тема для слабовидящих (задача 23) ----------
   Контраст текста к фону >= 7:1 (AAA). */
html[data-theme="hc"] {
  color-scheme: dark;
  --bg: #000000;
  --card: #0a0d12;
  --card-2: #0d1117;
  --line: #ffffff;
  --border: #ffffff;
  --border-strong: #ffffff;
  --txt: #ffffff;
  --text: #ffffff;
  --muted: #e8edf5;
  --text-muted: #e8edf5;
  --accent: #7cb1ff;
  --accent-500: #7cb1ff;
  --success: #59ff9e;
  --warning: #ffd23f;
  --danger: #ff7b7b;
  --info: #6fd6ff;
  --focus-ring: 0 0 0 4px #ffd23f;
}
html[data-theme="hc"] :is(a, button, .badge, .chip, .card, .input, input, select, textarea) {
  border-color: var(--border) !important;
}

/* ---------- §5 Ссылки по состояниям (задача 31) ---------- */
a { color: var(--link); }
a:hover { color: var(--link-hover); }
a:visited { color: var(--link-visited); }
html[data-theme="light"] a:visited { color: #6d28d9; }

/* ---------- §6 Резиновая типографика и мера строки (задачи 39, 40) ---------- */
h1, .vz4-h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); line-height: var(--lh-tight); }
h2, .vz4-h2 { font-size: clamp(1.25rem, 1rem + 1.1vw, 1.6rem); line-height: var(--lh-title); }
h3, .vz4-h3 { font-size: clamp(1.1rem, .95rem + .7vw, 1.3rem); line-height: var(--lh-title); }
.vz4-measure, .prose { max-width: var(--measure); }

/* ---------- §7 Скелетоны (задачи 32, 80, 204) ---------- */
.vz4-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--skeleton-base);
  border-radius: var(--r-md);
}
.vz4-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
  animation: vz4-shimmer 1.3s infinite;
}
@keyframes vz4-shimmer { 100% { transform: translateX(100%); } }

/* ---------- §8 Зебра/ховер таблиц по именованным токенам (задача 33) ---------- */
.vz4-zebra tbody tr:nth-child(even) > * { background: var(--row-stripe); }
.vz4-zebra tbody tr:hover > * { background: var(--row-hover-c); }

/* ---------- §9 Контролы единой высоты (задача 27) ---------- */
.vz4-control-sm { height: var(--control-h-sm); }
.vz4-control-md { height: var(--control-h-md); }
.vz4-control-lg { height: var(--control-h-lg); }

/* ---------- §10 Кодовые блоки глоссария (задача 36) ---------- */
.vz4-code, code.vz4 {
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: var(--r-sm);
  padding: .12em .4em;
  font-family: var(--font-mono);
  font-size: .92em;
}

/* ---------- §11 Скелетон-палитра демо-свотчей бренда (задача 1) ---------- */
.vz4-brand-scale { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.vz4-brand-step {
  width: 64px; min-height: 56px; border-radius: var(--r-md);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 4px 6px; font-size: var(--fs-2xs); border: 1px solid var(--border);
}
.vz4-brand-step span { background: rgba(0,0,0,.45); color: #fff; border-radius: 4px; padding: 0 3px; }

/* ---------- §12 Do/Don't карточки стайлгайда (задача 271) ---------- */
.vz4-dodont { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.vz4-do, .vz4-dont { border-radius: var(--r-lg); padding: var(--sp-4); border: 1px solid var(--border); }
.vz4-do  { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.vz4-dont { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.vz4-do::before  { content: "✓ Хорошо"; display: block; font-weight: var(--fw-bold); color: var(--success); margin-bottom: 6px; }
.vz4-dont::before { content: "✕ Плохо"; display: block; font-weight: var(--fw-bold); color: var(--danger); margin-bottom: 6px; }

/* ---------- §13 Адаптив: контейнер по токенам, аспект-рейшио, видимость
   (задачи 137,152,158,170) ---------- */
.vz4-container { width: 100%; max-width: var(--container-xl); margin-inline: auto; padding-inline: clamp(12px, 3vw, 28px); }
.vz4-container--md { max-width: var(--container-md); }
.vz4-container--lg { max-width: var(--container-lg); }
.vz4-ratio-16x9 { aspect-ratio: 16 / 9; }
.vz4-ratio-1x1  { aspect-ratio: 1 / 1; }
.vz4-ratio-4x3  { aspect-ratio: 4 / 3; }
.vz4-ratio-16x9 > *, .vz4-ratio-1x1 > *, .vz4-ratio-4x3 > * { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 640px) {
  .vz4-hide-sm { display: none !important; }
  .vz4-stack-sm { display: block !important; }
}
@media (min-width: 641px) {
  .vz4-show-sm { display: none !important; }
}
@media (min-width: 768px) {
  .vz4-show-md { display: revert; }
}

/* safe-area для устройств с вырезом (задача 154) */
.vz4-safe { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.vz4-safe-bottom { padding-bottom: max(env(safe-area-inset-bottom), 0px); }

/* sticky action-bar внизу на мобильных (задача 155) */
@media (max-width: 640px) {
  .vz4-sticky-actions {
    position: sticky; bottom: 0; z-index: var(--z-sticky);
    background: var(--card); border-top: var(--border-1) solid var(--border);
    padding: var(--sp-3); padding-bottom: max(env(safe-area-inset-bottom), var(--sp-3));
  }
}

/* контейнер-квери карточек (задача 159) */
@supports (container-type: inline-size) {
  .vz4-cq { container-type: inline-size; }
  @container (max-width: 360px) { .vz4-cq .vz4-cq-row { flex-direction: column; } }
}

/* ---------- §14 Микрополировка (задачи 281–299) ---------- */
/* стабильный скроллбар: контент не прыгает (задача 284) */
html { scrollbar-gutter: stable; }
/* кастомный скроллбар (задача 285) */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--scrollbar-track); }
*::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
/* выделение текста (задача 286) */
::selection { background: color-mix(in srgb, var(--accent-500) 38%, transparent); color: var(--text); }
/* сглаживание шрифтов (задача 288) */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* курсоры (задача 287) */
button:not(:disabled), [role="button"]:not([aria-disabled="true"]), a[href], summary, label[for] { cursor: pointer; }
:disabled, [aria-disabled="true"] { cursor: not-allowed; }
/* единый disabled (задача 296) */
.vz4-control-sm:disabled, .vz4-control-md:disabled, .vz4-control-lg:disabled,
button:disabled, input:disabled, select:disabled, textarea:disabled, [aria-disabled="true"] { opacity: .55; }
/* плейсхолдеры (задача 293) */
::placeholder { color: var(--text-subtle); opacity: 1; }
/* числа по разрядам (задача 297) */
.vz4-num, td.vz4-num, .num { font-variant-numeric: tabular-nums; text-align: right; }
/* :focus-within подсветка групп (задача 292) */
.vz4-field:focus-within { box-shadow: 0 0 0 var(--border-2) var(--accent-soft); border-radius: var(--r-md); }
/* truncate / line-clamp (задачи 294, 295) */
.vz4-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vz4-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vz4-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- §15 Доступность фокуса только для клавиатуры (задача 299) ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus:not(:focus-visible) { outline: none; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--r-sm);
}

/* ---------- §16 Анимации с уважением к prefers-reduced-motion (задачи 196,207,209,214) ---------- */
.vz4-press:active { transform: scale(.97); }
.vz4-lift { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.vz4-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
@keyframes vz4-shake { 10%,90%{transform:translateX(-1px)} 30%,70%{transform:translateX(-3px)} 50%{transform:translateX(3px)} }
.vz4-shake { animation: vz4-shake .4s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .vz4-skeleton::after { animation: none; }
  .vz4-lift:hover { transform: none; }
}

/* ---------- §17 forced-colors / WHCM (задача a11y) ---------- */
@media (forced-colors: active) {
  .card, .badge, .chip, .input, .vz4-do, .vz4-dont { border: 1px solid CanvasText; }
  :focus-visible { outline: 2px solid Highlight; }
}

/* ---------- §18 Печать/Экспорт (задачи 171–195) ---------- */
@media print {
  :root { color-scheme: light; }
  body { background: var(--print-bg) !important; color: var(--print-fg) !important; }
  .ds-skip-link, .sidebar, .topbar, .ux-to-top, .ux-palette, nav, .vz4-noprint, .no-print { display: none !important; }
  .card, table, .vz4-do, .vz4-dont { box-shadow: none !important; background: var(--print-bg) !important; color: var(--print-fg) !important; border: 1px solid var(--print-line) !important; }
  a { color: var(--print-fg) !important; text-decoration: underline; }
  /* показать URL ссылок после текста (задача 176) */
  .vz4-print-urls a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #444; }
  thead { display: table-header-group; }       /* повтор шапки (задача 173) */
  tr, .card, .vz4-do, .vz4-dont { break-inside: avoid; }  /* не рвать (задача 174) */
  .vz4-break-before { break-before: page; }
  .vz4-measure-print { max-width: 60ch; }       /* читаемая мера (задача 186) */
  @page { margin: 16mm; }
}
/* статусы различимы символом, а не только цветом (задача 188) */
.vz4-status::before { content: attr(data-symbol); margin-right: 4px; font-weight: var(--fw-bold); }

/* ---------- §19 Утилиты сетки колонок (задача 139) ---------- */
.vz4-grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(var(--col-count), minmax(0, 1fr)); }
.vz4-grid-auto { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.vz4-col-2 { grid-column: span 2; } .vz4-col-3 { grid-column: span 3; }
.vz4-col-4 { grid-column: span 4; } .vz4-col-6 { grid-column: span 6; }
.vz4-col-8 { grid-column: span 8; } .vz4-col-12 { grid-column: span 12; }
@media (max-width: 640px) { [class*="vz4-col-"] { grid-column: span 12; } }