/* testsite/public/assets/css/app.css — визуальный контракт 02. Свои токены, без Bootstrap-CDN (05 §3).
   Сдержанное ателье: радикальный воздух, тишина типографики, navy/поле + редкая оранжевая вспышка. */

:root{
  /* Цвет — БРЕНДОВЫЕ ЗНАЧЕНИЯ ЗАКРЫТЫ (02 §3). Не подменять. */
  --paper:#F8F9FB;   /* холодное спокойное поле */
  --navy:#1B2E5A;    /* текст + линия + тёмные поля = обновлённый логотип */
  --ink:#1B2E5A;     /* алиас navy для текста (НЕ #000) */
  --muted:#8A90A6;   /* вторичный текст, волосяные линии */
  --flash:#E67B19;   /* оранжевая вспышка — РЕДКО, только акцент, НИКОГДА не фон */

  /* Типографика — тишина (02 §2). Один нейтральный гротеск (Inter). */
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-display:clamp(2.4rem,7vw,4.6rem);
  --fs-h2:clamp(1.6rem,3.6vw,2.4rem);
  --fs-h3:1.25rem;
  --fs-body:1.0625rem;
  --fs-caption:0.875rem;
  --lh-tight:1.1; --lh-body:1.6;

  /* Пространство — 8px-сетка, радикальный воздух (02 §4). */
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem;
  --space-4:2.5rem; --space-5:4rem; --space-6:6rem; --space-7:8rem;
  --section-pad:clamp(4rem,10vw,8rem);
  --measure:62ch;

  --draw-dur:1100ms; --ease-calm:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-sans); font-size:var(--fs-body); line-height:var(--lh-body);
  font-weight:400;
}
a{color:var(--ink); text-decoration:none;}
a:hover{text-decoration:underline; text-underline-offset:3px;}

.skip{position:absolute; left:-9999px;}
.skip:focus{left:var(--space-2); top:var(--space-2); background:var(--navy); color:var(--paper); padding:var(--space-1) var(--space-2);}

/* Шапка / навигация — воздушная, тихая */
.site-head{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2);
  padding:var(--space-2) clamp(var(--space-2),5vw,var(--space-5));
  border-bottom:1px solid color-mix(in srgb, var(--muted) 35%, transparent);
}
.brand{display:inline-flex; align-items:center;}
.nav{display:flex; flex-wrap:wrap; gap:var(--space-3); margin-inline:auto; font-size:var(--fs-caption); letter-spacing:.01em;}
.nav a[aria-current]{color:var(--muted);}

/* Секции — вертикальная стопка, ритм задаёт скролл (02 §4). Mobile-first: одна колонка. */
.section{
  padding:var(--section-pad) clamp(var(--space-2),5vw,var(--space-5));
  max-width:calc(var(--measure) + 2 * clamp(var(--space-2),5vw,var(--space-5)));
  margin-inline:auto;
}
.page>*+*{margin-top:var(--space-3);}

/* Типографика страницы */
.display{font-size:var(--fs-display); line-height:var(--lh-tight); font-weight:650; letter-spacing:-.01em; margin:0;}
.h2{font-size:var(--fs-h2); font-weight:600; line-height:1.2; margin:var(--space-5) 0 var(--space-2);}
.h3{font-size:var(--fs-h3); font-weight:600; margin:var(--space-4) 0 var(--space-1);}
.prose{max-width:var(--measure); margin:var(--space-3) 0;}
.q{max-width:var(--measure);}
.muted{color:var(--muted); font-size:var(--fs-caption);}
.subtitle{font-size:var(--fs-h3); color:var(--muted); margin-top:var(--space-1);}

/* CTA — ЕДИНСТВЕННАЯ оранжевая вспышка на экран (02 §3). flash только как акцент, не фон. */
.cta-row{margin-top:var(--space-4);}
.cta{
  display:inline-block; padding:var(--space-1) var(--space-3);
  border:1.5px solid var(--flash); color:var(--flash); border-radius:2px;
  font-weight:600; font-size:var(--fs-body);
}
.cta:hover{background:transparent; text-decoration:none; color:var(--flash); border-color:var(--flash);}

/* Линия-мотив — статичная волосяная по умолчанию; дорисовка по триггеру (02 §5/§6) */
.line-motif{display:block; width:100%; height:8px; margin-bottom:var(--space-4); overflow:visible;}
.line-motif path{stroke:var(--muted);}
/* СТАТИЧНАЯ линия видна ВСЕГДА (02 §6): по умолчанию dashoffset:0.
   Без JS / при сбое rAF / при reduced-motion — линия просто присутствует, без анимации. */
.line-motif path{ stroke-dasharray:1; stroke-dashoffset:0; }
/* JS помечает .will-draw ПЕРЕД анимацией (прячет), затем .drawn — дорисовка один раз. */
.line-motif.will-draw path{ stroke-dashoffset:1; }
.line-motif.drawn path{
  transition:stroke-dashoffset var(--draw-dur) var(--ease-calm);
  stroke-dashoffset:0;
}

/* Карточки — единый компонент (05 §3) */
.cards{display:grid; gap:var(--space-2); grid-template-columns:1fr;}
.card{
  display:block; padding:var(--space-3); border:1px solid color-mix(in srgb, var(--muted) 30%, transparent);
  border-radius:3px;
}
.card:hover{border-color:var(--navy); text-decoration:none;}
.card-title{display:block; font-weight:600; font-size:var(--fs-h3);}
.card-sub{display:block; margin-top:var(--space-1);}
.rail-b2c{border-top:1px solid color-mix(in srgb, var(--muted) 35%, transparent); padding-top:var(--space-4);}

/* Формы */
.form{display:flex; flex-direction:column; gap:var(--space-2); max-width:var(--measure);}
.form label{display:flex; flex-direction:column; gap:var(--space-1); font-size:var(--fs-caption); color:var(--muted);}
.form input, .form textarea{
  font:inherit; color:var(--ink); padding:var(--space-1); background:#fff;
  border:1px solid color-mix(in srgb, var(--muted) 45%, transparent); border-radius:2px;
}
.feedback-form fieldset{border:1px solid color-mix(in srgb, var(--muted) 30%, transparent); border-radius:3px; margin:0; padding:var(--space-2);}
.feedback-form legend{font-weight:600; padding-inline:var(--space-1);}
.q-row{margin:var(--space-2) 0;}
.scale{display:inline-flex; gap:var(--space-2);}
.scale label{flex-direction:row; align-items:center; gap:4px; color:var(--ink);}

/* Маркеры мастера видны в тест-сборке (на проде их закрывает гейт/админка) */
.master-writes{color:var(--muted); font-style:italic;}
.note{margin-top:var(--space-2);}
.closed{color:var(--flash); font-weight:600;}
.event-head .display{margin-top:var(--space-2);}
.blocks{padding-left:var(--space-2);}
.session{display:inline-block; margin-right:var(--space-2);}

.site-foot{
  padding:var(--space-4) clamp(var(--space-2),5vw,var(--space-5));
  border-top:1px solid color-mix(in srgb, var(--muted) 35%, transparent);
}

/* Десктоп — воздушные поля, мера не растягивается; карточки в 2–3 колонки */
@media (min-width:720px){
  .cards{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1040px){
  .rail .cards{grid-template-columns:repeat(3,1fr);}
}

/* Покой по умолчанию; уважение к reduced-motion — конечный кадр мгновенно (02 §6) */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important;}
  .line-motif path{stroke-dasharray:none!important; stroke-dashoffset:0!important;}
}

/* ── Диагностика (Шаг 3) ── */
.diag-fields{display:flex; flex-direction:column; gap:var(--space-3); max-width:var(--measure); margin:var(--space-4) 0;}
.diag-field{display:flex; flex-direction:column; gap:var(--space-1);}
.diag-stem{font-size:var(--fs-body); color:var(--ink);}
.diag-field textarea{font:inherit; color:var(--ink); padding:var(--space-1); background:#fff;
  border:1px solid color-mix(in srgb, var(--muted) 45%, transparent); border-radius:2px;}
.diag-mirror{max-width:var(--measure); margin-top:var(--space-5);
  border-top:1px solid color-mix(in srgb, var(--muted) 35%, transparent); padding-top:var(--space-4);}
.diag-mirror p{margin:var(--space-2) 0;}
.diag-turn{font-size:var(--fs-h3); color:var(--ink); margin-top:var(--space-3);}
.diag-signup{margin-top:var(--space-5);}
.diag-form{margin-top:var(--space-3);}
.diag-consent{flex-direction:row; align-items:flex-start; gap:var(--space-1); color:var(--ink);}
.diag-consent-text{margin-top:var(--space-1);}
.diag-hint{margin:0;}
.diag-errors{color:var(--flash); font-weight:600;}
.accent{ color: var(--flash, #E67B19); }

/* ════════════════════════════════════════════════════════════════════════════
   ЛИНИИ-МОТИВЫ — размер + SELF-DRAW (02 §5/§6).
   Заменил прежний хвостовой блок ".line-motif--art" (ревизия C6, где стоял clip-path:none).
   Техника §3: stroke-dasharray / stroke-dashoffset поверх pathLength="1" (обводкой, не маской).
   ПОКОЙ = мотив полностью дорисован и статичен; единственное движение — однократная
   дорисовка по триггеру (data-draw, эмитит line_motif.php; классы .will-draw/.drawn — line.js).
   Длительность/кривая — только var(--draw-dur)/var(--ease-calm) (определены в :root выше).
   Дорисовываются только STROKE-мотивы с pathLength="1" (knot/tree/mirror/person).
   cubes.svg/flag.svg — ЗАЛИТЫЕ силуэты (fill, без stroke): self-draw к ним неприменим,
   остаются статичны (покой по умолчанию). Решение мастера — оставить статичными.
   ════════════════════════════════════════════════════════════════════════════ */
/* размер: единый видимый рост всех мотивов, центр, воздух снизу */
.line-motif--art{
  display:block;
  margin:0 auto clamp(4rem, 14vw, 12rem);
  text-align:center;
  height:auto;
  width:auto;
}
.line-motif--art svg{
  display:inline-block;
  height:clamp(96px, 15vw, 150px);   /* единый видимый рост */
  width:auto;
  max-width:100%;
}
/* SELF-DRAW обводки. ПОКОЙ (нет .will-draw/.drawn) = полностью дорисован (§4).
   Залитые силуэты без stroke (cubes/flag) этим не затрагиваются — остаются видимы и статичны. */
.line-motif--art svg path{
  stroke-dasharray: 1;            /* нормализовано pathLength="1" */
  stroke-dashoffset: 0;           /* по умолчанию — дорисован и виден */
}
.line-motif--art.will-draw svg path{ stroke-dashoffset: 1; }   /* спрятан перед стартом */
.line-motif--art.drawn svg path{
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--draw-dur) var(--ease-calm);   /* однократная дорисовка */
}
/* доступность (§5 — ворота приёмки): конечный кадр мгновенно, без анимации */
@media (prefers-reduced-motion: reduce){
  .line-motif--art.will-draw svg path,
  .line-motif--art.drawn svg path{ stroke-dashoffset:0 !important; transition:none !important; }
}
/* Языки — дропдаун: текущая локаль видна, остальные по клику (details, ноль JS) */
.lang{position:relative; font-size:var(--fs-caption);}
.lang summary{list-style:none; cursor:pointer; color:var(--ink); font-weight:600; padding:var(--space-1);}
.lang summary::-webkit-details-marker{display:none;}
.lang summary::after{content:"\25BE"; margin-left:.35em; color:var(--muted); font-weight:400;}
.lang[open] summary::after{content:"\25B4";}
.lang-menu{
  position:absolute; right:0; top:100%; display:flex; flex-direction:column; gap:var(--space-1);
  background:var(--paper); border:1px solid color-mix(in srgb, var(--muted) 35%, transparent);
  padding:var(--space-1) var(--space-2); min-width:3.5em; z-index:100;}
.lang-menu a{color:var(--muted);}
.lang-menu a:hover, .lang-menu a:focus{color:var(--ink);}

/* Футер — СММ-значки CAC, монохром, тихо */
.site-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2);}
.foot-social{display:flex; gap:var(--space-2);}
.foot-social a{color:var(--muted); display:inline-flex;}
.foot-social a:hover, .foot-social a:focus{color:var(--navy);}
.foot-social svg{width:18px; height:18px;}

/* ── Продукты (наряд 2026-08-03, спека style-агента): широкая секция + грамматика плиток ── */
.section--wide{
  max-width:calc(64rem + 2 * clamp(var(--space-2),5vw,var(--space-5)));
}
/* Статичная карточка-референс: не ссылка — нет hover-аффорданса */
.card--static{display:flex; flex-direction:column; cursor:default;}
.card--static:hover{border-color:color-mix(in srgb, var(--muted) 30%, transparent);}
.card--static .card-sub{margin-bottom:var(--space-2);}
/* Пометка приватности — отделённый низ карточки */
.card-foot{
  display:block; margin-top:auto; padding-top:var(--space-2);
  border-top:1px solid color-mix(in srgb, var(--muted) 25%, transparent);
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
}
/* Кликабельная карточка на «Продуктах»: тихая типографская стрелка */
.gamifications a.card .card-title::after{content:"\00A0\2192"; color:var(--muted); font-weight:400;}
.gamifications a.card:hover .card-title::after{color:var(--navy);}
/* Трио-сетка: равные колонки, компактная плиточная типографика */
.cards.cards--trio{grid-template-columns:1fr;}
.cards--trio .card{display:flex; flex-direction:column;}
.cards--trio .card-title{font-size:var(--fs-body); line-height:1.35; text-wrap:balance;}
.cards--trio .card-sub{font-size:var(--fs-caption);}
@media (min-width:720px){ .cards.cards--trio{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1040px){ .cards.cards--trio{grid-template-columns:repeat(3,1fr);} }
/* Одиночная карточка-фича (DepoSync): полоса на меру, рамка navy-полутоном */
.cards.cards--single{grid-template-columns:1fr;}
.card--feature{
  max-width:var(--measure);
  border-color:color-mix(in srgb, var(--navy) 40%, transparent);
}
.card--feature:hover{border-color:var(--navy);}

/* ── Видео-фон плиток «Продуктов» (наряд мастера 2026-08-03) ─────────────────
   Применяется ТОЛЬКО к .card--video: класс ставит вью, если ролик реально загружен.
   Карточки без ассета (в т.ч. «Репозиторий») остаются прежними — бумажными.
   Скрим лежит НАД видео и ПОД текстом; текст белый только внутри видео-плитки.
   Радиус — канонические 3px сайта (не 16px из наряда): одна грамматика с соседями. */
.card--video{position:relative; overflow:hidden; background:var(--navy); border-color:var(--navy);}
.card--video .tile-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:brightness(.76) saturate(.92);}
.card--video .tile-scrim{position:absolute; inset:0; z-index:1; display:block;
  background:linear-gradient(to bottom,
    rgba(27,46,90,.94) 0%, rgba(27,46,90,.84) 45%,
    rgba(27,46,90,.60) 75%, rgba(27,46,90,.46) 100%);}
.card--video .tile-body{position:relative; z-index:2; display:block; color:#fff;
  text-shadow:0 1px 2px rgba(11,20,40,.55);}
.card--video .card-title, .card--video .card-sub{color:#fff;}
.card--video .card-sub.muted{color:rgba(255,255,255,.74);}
.card--video .card-foot{color:rgba(255,255,255,.74); border-top-color:rgba(255,255,255,.28);}
.card--video:hover{border-color:var(--navy);}
.gamifications a.card--video .card-title::after{color:rgba(255,255,255,.74);}
.gamifications a.card--video:hover .card-title::after{color:#fff;}
@media (prefers-reduced-motion:reduce){ .card--video .tile-bg{display:none;} }

/* ── tile-video-geometry: текст ЛЕЖИТ НА видео и не занимает места под ним
   (правка мастера 2026-08-03). Видео — абсолютный фон на всю плитку; высота плитки
   остаётся ПРЕЖНЕЙ (по тексту) — видео её не увеличивает. Мобильный приоритет:
   ничего не растёт, подписи компактнее на узких экранах. */
.card--video .tile-body{position:relative; z-index:2;}
@media (max-width:719px){
  .card--video .card-sub{font-size:var(--fs-caption);}
}