/* ══════════════════════════════════════════════════════════
   About You UZ — секция «Что можно поручить нам» (акт на бумаге)
   Макет: HowFlow1/2/3.dc.html, десктоп 1440 (контент 1312).
   Все цвета — токены; производные (color-mix) только там, где нужна
   ступень, которой в tokens.css нет по смыслу (номер вкладки, тени).
   07.09: фон акта — второй тон бумаги --paper-2, полоса фаз 01–04
   снята, на телефоне схема листается вбок со snap по узлам.
   ══════════════════════════════════════════════════════════ */
.how{
  /* ── производные цвета (только из токенов) ── */
  --how-num-off:color-mix(in srgb, var(--signal) 55%, transparent);
  --how-node-shadow:0 6px 18px color-mix(in srgb, var(--ink) 6%, transparent);
  --how-pill-shadow:0 10px 26px color-mix(in srgb, var(--signal) 28%, transparent);
  --how-pill-sub:color-mix(in srgb, var(--white) 80%, transparent);

  /* ── размеры внутри схемы, которых нет в общем типоритме (из артбордов) ── */
  --how-fs-sub:8.5px;        /* сабподпись узла (капсом, с разрядкой) */
  --how-fs-sub-plain:10px;   /* та же строка обычным регистром — капс её держал крупнее */

  /* ── масштаб схемы: k = ширина контейнера / 1312 ── */
  --how-k:1;
  /* ниже этого масштаба подписи узлов перестают читаться (16px → 11px):
     схема не жмётся дальше, а листается вбок внутри рамки */
  --how-k-min:.7;

  padding:clamp(64px,12vh,110px) var(--pad) clamp(56px,10vh,100px);
  /* второй тон бумаги: четыре светлых акта подряд не должны быть одним
     листом (решение 07.09). Узлы схемы белые — на --paper-2 читаются лучше,
     чем на --paper; фон акта act-light перебиваем здесь, каскад ниже */
  background:var(--paper-2);
}
/* запасные значения до того, как скрипт измерит контейнер */
@media (max-width:1439px){ .how{--how-k:.88} }
@media (max-width:1200px){ .how{--how-k:.76} }
@media (max-width:1024px){ .how{--how-k:.7} }

/* ══ шапка акта ══
   07.09 (Никита): голова акта — кикер, заголовок, вкладки и лид — по центру,
   как «Опыт больших проектов» ниже; схема остаётся во всю ширину контента. */
.how__head{display:flex;align-items:flex-end;justify-content:center;gap:40px;flex-wrap:wrap;text-align:center}
.how__title{display:flex;flex-direction:column;align-items:center;gap:12px}
.how__h{
  font-family:var(--disp);font-weight:900;text-transform:uppercase;
  font-size:var(--fs-act);line-height:1;letter-spacing:-.015em;margin:0;color:var(--ink);
}

/* ══ вкладки ══
   Рамочная кнопка на бумаге в одном языке с призрачной на графите
   (v3-hero.css): обводка --ink-faint, под курсором — тонировка фоном и
   плотнее обводка, без инверсии. 14px по вертикали: 13 × 1.2 + 28 + 2
   обводки = 45.6px — тап-мишень ≥44 на любой ширине (аудит, п. 5). */
.how__tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:clamp(28px,5vh,48px)}
.how__tab{
  display:inline-flex;align-items:baseline;gap:8px;
  font-family:var(--body);font-size:var(--fs-small);font-weight:600;line-height:1.2;
  padding:14px 20px;cursor:pointer;
  color:var(--ink-dim);background:none;border:1px solid var(--ink-faint);
  transition:color var(--dur-s) var(--ease),background-color var(--dur-s) var(--ease),border-color var(--dur-s) var(--ease);
}
.how__tab-n{
  font-family:var(--disp);font-weight:700;font-size:var(--fs-kicker);
  color:var(--how-num-off);transition:color var(--dur-s) var(--ease);
}
.how__tab:hover{color:var(--ink);background:var(--ink-grid);border-color:var(--ink-soft)}
.how__tab[aria-selected="true"]{
  background:var(--graphite);color:var(--paper);border-color:var(--graphite);
}
.how__tab[aria-selected="true"] .how__tab-n{color:var(--signal-lift)}

/* ══ панель сценария ══ */
.how__panel[hidden]{display:none}
.how__panel:focus{outline:none}
.how__lead{
  margin:22px auto 0;font-size:var(--fs-body);font-weight:600;line-height:1.5;
  color:var(--ink);max-width:60ch;text-align:center;
}

/* ══ схема: рамка + сцена 1312×430, масштабируемая по ширине ══ */
.how__frame{
  position:relative;margin-top:34px;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
  /* когда схема шире рамки (телефон, планшет) — листается с прилипанием
     к узлам; на десктопе прокрутки нет и snap ничего не делает */
  scroll-snap-type:x mandatory;scroll-padding-left:calc(10px * var(--how-k));
  height:calc(430px * var(--how-k));
  border-top:1px solid var(--ink-hair);border-bottom:1px solid var(--ink-hair);
}
.how__stage{
  position:relative;
  /* шире 1440 сцена (1312) уже рамки — стоит по центру; при k<1 бокс
     сцены равен рамке и auto ничего не меняет */
  margin:0 auto;
  /* содержимое живёт в координатах макета 1312×430 и ужимается transform'ом,
     а бокс сцены сразу в масштабе — иначе рамка прокручивалась бы до 1312px
     пустоты (transform не меняет layout-размер) */
  width:calc(1312px * var(--how-k));height:calc(430px * var(--how-k));
  transform:scale(var(--how-k));transform-origin:0 0;
}
/* вертикальные hairlines каждые 187px (187…1122) */
.how__stage::before{
  content:"";position:absolute;top:0;height:430px;left:187px;width:936px;pointer-events:none;
  background-image:linear-gradient(to right,var(--ink-grid) 0 1px,transparent 1px);
  background-size:187px 100%;
}
/* пунктирная ось — на всю ширину макета, а не на ужатый бокс сцены */
.how__stage::after{
  content:"";position:absolute;left:0;width:1312px;top:215px;
  border-top:1px dashed var(--ink-hair);pointer-events:none;
}

/* ── техподписи ── */
.how__tech{
  position:absolute;left:var(--x,0);top:var(--y,0);margin:0;
  font-size:var(--fs-tech);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mid);white-space:nowrap;
}
/* правый и нижний края отсчитываются от макета 1312×430, а не от ужатого бокса */
.how__tech--right{left:auto;right:calc(100% - 1312px)}
.how__tech--bottom{top:auto;bottom:calc(100% - 416px)}
/* подпись под колонкой: --x — центр колонки узлов, а не левый край текста */
.how__tech--center{transform:translateX(-50%)}
.how__tech--soft{color:var(--ink-soft)}
.how__tech--hot{color:var(--signal)}

/* ── линии ── */
/* svg живёт в координатах макета 1312×430, как и узлы: без явных размеров
   его ужимает max-width:100% из main.css до бокса сцены (1312·k), а затем
   сцена масштабируется ещё раз — линии отрывались от узлов на всём, что
   уже 1440 (косяк 07.09) */
.how__lines{position:absolute;top:0;left:0;width:1312px;height:430px;max-width:none}
.how__lines path,.how__lines circle{fill:none;stroke:var(--signal);stroke-width:1.5}
.how__lines .how__arrow{stroke-width:2}
.how__lines .how__dash{stroke-dasharray:7 6}
.how__lines .how__mark{fill:var(--signal);stroke:none}
.how__lines .how__dot{fill:var(--signal);stroke:none}

/* ── узлы ── */
.how__nodes{position:absolute;inset:0}
.how__node{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  --fs:15px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 10px;box-sizing:border-box;
  background:var(--white);border:1px solid var(--ink-hair);border-radius:10px;
  box-shadow:var(--how-node-shadow);
  scroll-snap-align:start;
}
.how__node-t{font-size:var(--fs);font-weight:600;line-height:1.1;color:var(--ink)}
.how__node-s{
  margin-top:3px;font-size:var(--how-fs-sub);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--signal);
}
/* точка входа схемы 01: текст обычным регистром, не капсом */
.how__node--plain .how__node-s{
  font-size:var(--how-fs-sub-plain);text-transform:none;letter-spacing:.01em;
}
.how__node--pill{
  background:var(--signal);border:0;border-radius:calc(var(--h) / 2);
  box-shadow:var(--how-pill-shadow);
}
.how__node--pill .how__node-t{color:var(--white)}
.how__node--pill .how__node-s{color:var(--how-pill-sub)}


/* ══ анимация смены вкладок ══ */
@media (prefers-reduced-motion:no-preference){
  .how__panel.is-out{animation:howOut .2s var(--ease) both}
  .how__panel.is-in{animation:howIn .3s var(--ease) both}
  .how__panel.is-in .how__node{animation:howNodeIn .3s var(--ease) both}
  .how__panel.is-in .how__node:nth-child(1){animation-delay:0s}
  .how__panel.is-in .how__node:nth-child(2){animation-delay:.04s}
  .how__panel.is-in .how__node:nth-child(3){animation-delay:.08s}
  .how__panel.is-in .how__node:nth-child(4){animation-delay:.12s}
  .how__panel.is-in .how__node:nth-child(5){animation-delay:.16s}
  .how__panel.is-in .how__node:nth-child(6){animation-delay:.2s}
  .how__panel.is-in .how__node:nth-child(7){animation-delay:.24s}
  .how__panel.is-in .how__node:nth-child(8){animation-delay:.28s}
  .how__panel.is-in .how__node:nth-child(9){animation-delay:.32s}
  @keyframes howOut{to{opacity:0;transform:translateY(14px)}}
  @keyframes howIn{from{opacity:0;transform:translateY(18px)}}
  @keyframes howNodeIn{from{opacity:0;transform:translateY(10px)}}
}

/* ══ планшет ══ */
@media (max-width:1023px){
  .how__tabs{gap:8px}
  .how__tab{padding:14px 18px}
}
/* схему, которая не влезла по ширине, листают вбок — говорим об этом тихим
   кикером. Подсказку включает скрипт (.how--pan) только когда прокрутка
   реально есть. */
.how--pan .how__lead::after{
  content:"Листайте →";
  display:block;margin-top:14px;
  font-family:var(--body);font-size:var(--fs-kicker);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mid);
}

/* ══ ≤720px: схема остаётся схемой (решение Никиты 07.09) ══
   Столбика пилюль больше нет: сцена держит масштаб .85 (1312 × .85 ≈ 1115px
   — как на десктопе по ощущению), рамка листается вбок со snap по узлам,
   подписи узлов 16 × .85 ≈ 13.6px — читаются. */
@media (max-width:719px){
  .how{--how-k-min:.85}
  /* вкладки в столбец во всю ширину — иначе рваный правый край;
     текст по центру, как и вся голова акта */
  .how__tabs{flex-direction:column;align-items:stretch}
  .how__tab{justify-content:center}
  .how__frame{margin-top:26px}
}

@media (prefers-reduced-motion:reduce){
  .how__tab,.how__tab-n{transition:none}
  .how__panel,.how__node{animation:none !important}
}

/* ── 15.09: отклик на нажатие вкладки (отчёт по анимациям, № 4) ── */
.how__tab{transition:color var(--dur-s) var(--ease),background-color var(--dur-s) var(--ease),border-color var(--dur-s) var(--ease),transform .16s var(--ease)}
.how__tab:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){.how__tab:active{transform:none}}