/* 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);}
.lang{display:flex; gap:var(--space-1); font-size:var(--fs-caption);}
.lang a{color:var(--muted);}
.lang a[aria-current]{color:var(--ink); font-weight:600;}

/* Секции — вертикальная стопка, ритм задаёт скролл (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; }
}