/* MeruEd — фирменный стиль поверх прежней раскладки.
   Меняется только оформление: блоки, экраны и механика остались как были.
   Подключается ПОСЛЕ brand/tokens.css и brand/motion.css.

   Правила стиля, которые здесь соблюдаются:
   — цвета нет вовсе: уровни различаются тоном, акценты — заливкой против обводки;
   — контейнеры сквирклы, цилиндр только у главного действия;
   — теней нет: слои разделяет тон;
   — Nata Sans в заголовках, Onest в тексте, JetBrains Mono в технических подписях. */

html{scrollbar-gutter:stable}
/* ⚠ Атрибут hidden — это всего лишь display:none из браузерного набора правил,
   и любой наш display его перебивает. Из-за этого выпадающий список кейсов
   и панель предупреждений шкалы стояли раскрытыми всегда. */
[hidden]{display:none !important}
body{font-size:16px}
a{color:var(--ink)}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

/* ---------- шапка ---------- */
.hdr{position:sticky; top:0; z-index:30; background:var(--bg); border-bottom:1px solid var(--line)}
.hdr-in{position:relative; display:flex; align-items:center; gap:12px;
  max-width:1720px; margin:0 auto; padding:12px 20px; min-height:64px}
.who{display:flex; align-items:center; gap:10px; background:transparent;
  border:1px solid var(--line); padding:5px 16px 5px 5px; cursor:pointer;
  border-radius:var(--rx); corner-shape:squircle; color:var(--ink)}
.who:hover{border-color:var(--ink)}
.ava{width:32px; height:32px; background:var(--cta); color:var(--ctafg); display:grid; place-items:center;
  font:500 12px var(--body); flex:0 0 auto; border-radius:var(--rc); corner-shape:squircle}
.who b{font-weight:500; font-size:14px; white-space:nowrap; max-width:170px; overflow:hidden; text-overflow:ellipsis}
.hicons{margin-left:auto; display:flex; align-items:center; gap:10px}
.brand{border:0; background:transparent; padding:0; cursor:pointer; color:var(--ink); display:flex}
.brand svg{display:block; width:104px; height:23px; fill:currentColor}
.iconbtn{width:38px; height:38px; border:1px solid var(--line); background:transparent; cursor:pointer;
  display:grid; place-items:center; color:var(--mut); flex:0 0 auto;
  border-radius:var(--rc); corner-shape:squircle}
.iconbtn:hover{color:var(--ink); border-color:var(--ink)}
.toscale{white-space:nowrap}

/* ---------- каркас страниц ---------- */
.layout{display:grid; grid-template-columns:1fr; gap:18px; max-width:1720px; margin:0 auto; padding:22px 20px}
@media(min-width:1080px){.layout{grid-template-columns:300px minmax(0,1fr); gap:22px}}
.col{display:flex; flex-direction:column; gap:18px; min-width:0}
.center{max-width:1100px; margin:0 auto; padding:26px 20px 80px}
.center > * + *{margin-top:22px}
.center > h2.page + p.page{margin-top:8px}
.center > .row + *{margin-top:16px}
.stack{display:flex; flex-direction:column; gap:18px}
.stack > *{margin-top:0 !important}
h2.page{font-family:var(--display); font-weight:500; font-size:clamp(28px,3.2vw,40px);
  line-height:1.06; letter-spacing:-.03em; margin:0}
p.page{color:var(--mut); font-size:16px; margin:0; max-width:72ch}

/* ---------- карточка ---------- */
.card{background:var(--card); border:0; padding:24px 26px;
  border-radius:var(--r); corner-shape:squircle}
.card h3{font-family:var(--display); font-weight:500; font-size:20px; letter-spacing:-.02em; margin:0 0 6px}
.card .hint{color:var(--mut); font-size:14px; margin:0 0 14px; max-width:72ch}
.lbl{font:500 11px/1 var(--body); letter-spacing:.16em; text-transform:uppercase;
  color:var(--mut); display:block; margin:0 0 12px}

/* ---------- кнопки: пилюля только у главного действия ---------- */
.btn{border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer;
  padding:10px 18px; font:400 15px var(--body); border-radius:var(--rx); corner-shape:squircle}
.btn:hover{border-color:var(--ink)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.sm{padding:7px 13px; font-size:13.5px; border-radius:var(--rc)}
.btn.accent{background:var(--fill); border-color:transparent}
.btn.accent:hover{border-color:var(--ink)}
.btn.primary{background:var(--cta); color:var(--ctafg); border-color:var(--cta);
  border-radius:999px; corner-shape:round; padding:11px 26px; font-weight:500}
.btn.primary:hover{opacity:.92}
.btn.wide{width:100%}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* ---------- поля ---------- */
/* Поле — колонка из подписи и ввода. Подпись занимает фиксированную высоту
   в две строки и прижата к низу: иначе поля с длинными подписями съезжают,
   и ряд выглядит рваным. */
label.f{display:flex; flex-direction:column; margin:0 0 18px; min-width:0}
label.f > span{display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap;
  font:500 11px/1.35 var(--body); letter-spacing:.09em; text-transform:uppercase;
  color:var(--mut); margin:0 0 8px; min-height:2.7em}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink);
  padding:8px 0 9px; font:400 16px/1.5 var(--body); border-radius:0}
input[type=text],input[type=email],input[type=password],input[type=number],select{height:41px}
select{appearance:none; cursor:pointer; padding-right:16px}
textarea{min-height:82px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:none; border-bottom-color:var(--ink)}
::placeholder{color:var(--mut); opacity:.65}
/* Колонок не больше четырёх: на широкой карточке пять полей по 230px
   читаются как таблица, а не как форма. */
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:0 28px}
@media(min-width:1400px){.grid2{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- метки: тон и обводка вместо цвета ---------- */
.pill{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font:500 10.5px/1 var(--body); letter-spacing:.1em; text-transform:uppercase;
  color:var(--mut); border:1px solid var(--line); background:transparent; padding:5px 9px;
  border-radius:var(--rc); corner-shape:squircle}
.pill.ok{background:var(--cta); color:var(--ctafg); border-color:var(--cta)}
.pill.gate{border:1.5px solid var(--ink); color:var(--ink)}
.pill.on{background:var(--cta); color:var(--ctafg); border-color:var(--cta)}

/* ---------- сообщения ---------- */
.msg{font-size:15px; line-height:1.5; padding:13px 17px; margin:0 0 14px; color:var(--ink);
  background:var(--fill); border-radius:var(--rs); corner-shape:squircle}
.msg.info{background:transparent; border:1px solid var(--line); color:var(--mut)}
.msg.warn{background:transparent; border:1.5px solid var(--ink)}
.msg.ok{background:var(--cta); color:var(--ctafg)}
.msg.err{background:var(--cta); color:var(--ctafg)}
.msg b{font-weight:600}

/* ---------- чипы ---------- */
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer;
  padding:8px 15px; font-size:14px; border-radius:var(--rc); corner-shape:squircle}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--cta); color:var(--ctafg); border-color:var(--cta)}

/* ---------- сегментный переключатель ---------- */
.navpill{display:flex; gap:4px; border:1px solid var(--line); padding:4px; overflow-x:auto;
  border-radius:var(--rx); corner-shape:squircle; max-width:100%}
.navpill button{border:0; background:transparent; color:var(--mut); cursor:pointer;
  padding:7px 14px; font-size:14px; white-space:nowrap; border-radius:var(--rc); corner-shape:squircle}
.navpill button:hover{color:var(--ink)}
.navpill button.on{background:var(--cta); color:var(--ctafg)}

/* ---------- таблицы ---------- */
.tw{overflow-x:auto; background:var(--card); padding:4px 20px 6px;
  border-radius:var(--r); corner-shape:squircle}
.card .tw{background:transparent; padding:0}
table{border-collapse:collapse; width:100%; font-size:15px; min-width:520px}
th{text-align:left; font:500 10.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase;
  color:var(--mut); padding:16px 16px 12px 0; border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:14px 16px 14px 0; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink)}
tr:last-child td{border-bottom:0}
td.n{font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; font-size:14px}
.kv2{width:100%; font-size:14px; min-width:0}
.kv2 td{padding:6px 0; border:0; vertical-align:top}
.kv2 td:first-child{color:var(--mut); padding-right:16px; white-space:nowrap; width:1%}

/* ---------- шкала ---------- */
.scalebox{background:var(--card); padding:18px 20px 16px; border-radius:var(--r); corner-shape:squircle}
.scaletop{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:0 0 14px; margin:0 0 14px;
  border-bottom:1px solid var(--line)}
.scaletop select{width:auto; max-width:360px; font-size:15px}
.passed{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; flex:1}
.passed .pl{font:500 10.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--mut)}
.pchip{border:0; background:var(--fill); color:var(--ink); cursor:pointer; font-size:13px; padding:6px 12px;
  max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  border-radius:var(--rc); corner-shape:squircle}
.pchip:hover{background:var(--cta); color:var(--ctafg)}
.scalehead{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0 0 8px}
.scalehead .sp{margin-left:auto}

.track{position:relative; overflow-x:auto; overflow-y:hidden; padding:0 2px}
.trackin{position:relative}
.axis{position:absolute; left:0; right:0; top:224px; height:42px; display:flex; align-items:center}
.tick{flex:1; height:12px; border-left:1px solid var(--line)}
.tick.m{height:20px; border-left-color:var(--mut)}
.node{position:absolute; top:224px; width:10px; height:42px; transform:translateX(-50%); cursor:pointer;
  background:var(--fill); border-radius:var(--rc); corner-shape:squircle; z-index:2}
.node.on{background:var(--ink)}
.node.gate{background:transparent; border:1.5px solid var(--ink)}
.node.off{opacity:.35}
.stem{position:absolute; width:1px; background:var(--line)}

.tag{position:absolute; transform:translateX(-50%); width:172px; height:62px; overflow:hidden;
  background:var(--fill); border:1px solid transparent; padding:9px 13px; cursor:pointer; text-align:left;
  z-index:1; color:var(--ink); border-radius:var(--rs); corner-shape:squircle; transition:height .12s ease}
.tag .c{font:400 10px/1.2 var(--mono); letter-spacing:.06em; color:var(--mut); display:block; margin-bottom:3px}
.tag .t{font-size:13.5px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.tag .d{font-size:12px; line-height:1.4; color:var(--mut); display:none; margin-top:6px}
.tag.off{background:transparent; border-color:var(--line)}
.tag.off .t{color:var(--mut)}
.tag.sel{outline:1.5px solid var(--ink); outline-offset:-1.5px}
.tag.gatetag{border:1.5px solid var(--ink); background:transparent}
.tag:hover,.tag:focus-visible{height:auto; overflow:visible; z-index:30; background:var(--bg)}
.tag:hover .t,.tag:focus-visible .t{-webkit-line-clamp:unset; overflow:visible}
.tag:hover .d,.tag:focus-visible .d{display:block}
.here{position:absolute; top:184px; transform:translateX(-50%); text-align:center; color:var(--mut);
  font:500 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; z-index:3}
.here i{display:block; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:7px solid var(--mut); margin:6px auto 0}
.finish{position:absolute; top:220px; right:0; text-align:right; z-index:3}
.finish .b{background:var(--cta); color:var(--ctafg); padding:9px 18px; display:inline-block;
  font:500 12px/1 var(--body); letter-spacing:.12em; text-transform:uppercase;
  border-radius:var(--rc); corner-shape:squircle}
.finish .d{font:400 12px/1.5 var(--mono); color:var(--mut); margin-top:8px}

.scalenote{border-top:1px solid var(--line); margin-top:12px; padding-top:10px}
.notetog{border:0; background:transparent; color:var(--mut); cursor:pointer; padding:2px 0;
  font:400 12px var(--mono); letter-spacing:.02em}
.notetog:hover,.notetog.on{color:var(--ink)}
.notebody{display:grid; gap:8px; margin-top:10px}
.nrow{font-size:13px; line-height:1.5; color:var(--mut); border-left:1px solid var(--line); padding:2px 0 2px 12px}
.nrow.w{color:var(--ink); border-left:1.5px solid var(--ink)}
.scalebox.flash{outline:1.5px solid var(--ink); outline-offset:4px}

/* ---------- нижние блоки ---------- */
.bottom{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:900px){.bottom{grid-template-columns:minmax(0,4fr) minmax(0,6fr)}}
/* На широком экране ряд под шкалой становится трёхколоночным: место есть,
   и сводка по материалам садится рядом, а не жмётся в левой рейке. */
@media(min-width:1400px){.bottom{grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr)}}
.msum{display:flex; flex-direction:column}
.mrow2{display:flex; align-items:center; gap:10px; padding:9px 0; font-size:14px;
  border-top:1px solid var(--line)}
.mrow2:first-child{border-top:0}
.mrow2 b{margin-left:auto; font:500 15px var(--mono)}
.stagebody p{margin:0 0 10px; color:var(--ink)}
.soon{border:1px solid var(--line); padding:13px 17px; color:var(--mut); font-size:14px;
  border-radius:var(--rs); corner-shape:squircle}
.checklist{list-style:none; margin:0; padding:0; display:grid; gap:0}
.checklist li{display:flex; gap:14px; align-items:flex-start; border-top:1px solid var(--line);
  padding:13px 0; font-size:15px}
.checklist li:first-child{border-top:0}
.checklist li .n{font:400 12px var(--mono); color:var(--mut); padding-top:3px}

/* ---------- действия этапа ---------- */
.act{border-top:1px solid var(--line); overflow:hidden}
.act:first-of-type{border-top:0}
.acthead{width:100%; display:flex; align-items:center; gap:14px; background:transparent; border:0;
  padding:15px 0; cursor:pointer; text-align:left; color:inherit}
.actico{width:42px; height:42px; display:grid; place-items:center; color:var(--ink); flex:0 0 auto;
  border:1px solid var(--line); border-radius:var(--rx); corner-shape:squircle}
.act.on .actico{background:var(--cta); color:var(--ctafg); border-color:var(--cta)}
.acttx{display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0}
.acttx b{font-weight:500; font-size:16px}
.actchev{margin-left:auto; color:var(--mut); font-size:20px; line-height:1; transition:transform .15s ease}
.act.on .actchev{transform:rotate(90deg)}
.actbody{padding:0 0 18px 56px}
.actbody p{margin:0 0 14px; font-size:15px; color:var(--mut); max-width:72ch}

/* ---------- материал ---------- */
.artgrid{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:1100px){.artgrid{grid-template-columns:minmax(0,4fr) minmax(0,6fr)}}

/* ---------- чек-лист кликами ---------- */
.cl{display:grid; gap:0}
.clitem{display:flex; gap:14px; align-items:flex-start; text-align:left; width:100%; cursor:pointer;
  background:transparent; border:0; border-top:1px solid var(--line); padding:13px 0;
  font:400 15px/1.5 var(--body); color:var(--ink)}
.clitem:first-child{border-top:0}
.clitem:hover .clbox{border-color:var(--ink)}
.clitem:disabled{cursor:default; opacity:.6}
.clbox{width:20px; height:20px; border:1px solid var(--line); display:grid; place-items:center;
  font-size:12px; flex:0 0 auto; margin-top:1px; color:transparent;
  border-radius:var(--rc); corner-shape:squircle}
.clitem.on .clbox{background:var(--cta); border-color:var(--cta); color:var(--ctafg)}
.clitem.on{color:var(--mut)}

/* ---------- мелочи ---------- */
.exbtn{border:1px solid var(--line); background:transparent; color:var(--mut); cursor:pointer;
  padding:3px 10px; font:400 10.5px var(--mono); letter-spacing:.04em; text-transform:none;
  border-radius:var(--rc); corner-shape:squircle}
.exbtn:hover{border-color:var(--ink); color:var(--ink)}
.fromtag{font:400 10px var(--mono); letter-spacing:.04em; text-transform:none; color:var(--mut);
  border:1px solid var(--line); padding:2px 8px; border-radius:var(--rc); corner-shape:squircle}
.stepdot{width:30px; height:3px; background:var(--line)}
.stepdot.on{background:var(--ink)}
.stepdot.done{background:var(--mut)}
details summary{cursor:pointer; color:var(--mut); font-size:14px; list-style:none}
details summary::-webkit-details-marker{display:none}
details[open] summary{color:var(--ink)}

/* ---------- вход и заявка ---------- */
.auth{max-width:480px; margin:9vh auto; padding:0 20px}
.auth .card{padding:30px 32px}
.auth h1{font-family:var(--display); font-weight:500; font-size:34px; letter-spacing:-.03em; margin:0 0 8px}
.auth .sub{color:var(--mut); font-size:15.5px; margin:0 0 24px}

/* ---------- узкий экран ---------- */

/* ---------- состояние материала: единственное место, где есть цвет ----------
   Стиль системы монохромный, но состояние должно читаться с одного взгляда,
   не вчитываясь в подпись. Поэтому три оттенка и только на метках состояния. */
:root{
  --s-ok:#1f5233;    /* принято куратором */
  --s-wait:#7a4708;  /* на проверке */
  --s-redo:#5f4a06;  /* вернули на доработку */
  --s-fill:#33496a;  /* заполнено, ещё не сдавали */
  --scroll:rgba(26,26,26,.26);
}
:root[data-theme="dark"]{
  --s-ok:#6fbf8e; --s-wait:#e0a94a; --s-redo:#d8c05a; --s-fill:#8aa8d6;
  --scroll:rgba(228,228,228,.24);
}

.dot{display:inline-block; width:9px; height:9px; border-radius:50%; flex:0 0 auto;
  background:var(--mut)}
.dot.accepted{background:var(--s-ok)}
.dot.review{background:var(--s-wait)}
.dot.rework{background:var(--s-redo)}
.dot.stale{background:var(--s-redo)}
.dot.filled{background:var(--s-fill)}
.dot.empty{background:transparent; border:1.5px solid var(--line)}

/* точка состояния на самой шкале */
.node.stt{position:absolute}
.stbadge{position:absolute; top:206px; transform:translateX(-50%); width:14px; height:14px;
  border-radius:50%; border:2px solid var(--bg); z-index:6; pointer-events:none}
.stbadge.accepted{background:var(--s-ok)}
.stbadge.review{background:var(--s-wait)}
.stbadge.rework,.stbadge.stale{background:var(--s-redo)}
.stbadge.filled{background:var(--s-fill)}

.tag.accepted{border-color:var(--s-ok)}
.tag.review{border-color:var(--s-wait)}
.tag.rework,.tag.stale{border-color:var(--s-redo)}
.tag.filled{border-color:var(--s-fill)}
.tag .st{display:inline-flex; align-items:center; gap:5px; margin-left:6px;
  font:400 10px/1 var(--mono); letter-spacing:.04em}
.tag.accepted .st{color:var(--s-ok)}
.tag.review .st{color:var(--s-wait)}
.tag.rework .st,.tag.stale .st{color:var(--s-redo)}
.tag.filled .st{color:var(--s-fill)}

.legend{display:flex; flex-wrap:wrap; gap:14px; align-items:center; padding:8px 16px 2px;
  font-size:12.5px; color:var(--mut)}
.legend span{display:inline-flex; align-items:center; gap:6px}

/* ---------- что система уже знает ---------- */
.ctx{display:flex; flex-direction:column; gap:0}
.ctxrow{display:grid; grid-template-columns:132px minmax(0,1fr); gap:12px; padding:9px 0;
  border-top:1px solid var(--line); font-size:14px}
.ctxrow:first-child{border-top:0}
.ctxrow .k{color:var(--mut); font-size:12.5px; line-height:1.5}
.ctxrow .v{white-space:pre-wrap; overflow-wrap:anywhere}
.ctxrow .src{font:400 10.5px/1 var(--mono); color:var(--mut); letter-spacing:.04em;
  display:block; margin-top:4px}

/* ---------- оценки поля ---------- */
.scw{display:inline-flex; align-items:center; gap:4px; margin-left:auto; flex:0 0 auto}
.sc{display:inline-flex; align-items:center; gap:4px; padding:2px 8px; cursor:default;
  border:1px solid var(--line); background:transparent; color:var(--mut);
  font:400 10.5px/1.6 var(--mono); letter-spacing:.02em;
  border-radius:var(--rc); corner-shape:squircle}
.sc b{font-weight:500; font-family:var(--mono)}
.sc.s0{opacity:.6}
.sc.s1,.sc.s2{border-color:var(--s-redo); color:var(--s-redo)}
.sc.s3{border-color:var(--s-wait); color:var(--s-wait)}
.sc.s4,.sc.s5{border-color:var(--s-ok); color:var(--s-ok)}
.sc.set{cursor:pointer}
.sc.set:hover{border-color:var(--ink); color:var(--ink)}
label.f > span{display:flex; align-items:flex-end; gap:8px}

/* ---------- портрет сегмента ---------- */
.pt{display:flex; flex-direction:column; gap:16px}
.ptsec{border-top:1px solid var(--line); padding-top:13px}
.ptsec:first-child{border-top:0; padding-top:0}
.ptsec > .h{font:500 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase;
  color:var(--mut); display:block; margin-bottom:9px}
.bar{display:grid; grid-template-columns:88px minmax(0,1fr) 42px; gap:10px; align-items:center;
  margin-bottom:6px; font-size:13.5px}
.bar .tr{height:8px; background:var(--fill); border-radius:99px; overflow:hidden}
.bar .tr i{display:block; height:100%; background:var(--ink)}
.bar .p{font:400 12px var(--mono); color:var(--mut); text-align:right}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip2{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; font-size:13px;
  border:1px solid var(--line); border-radius:99px; color:var(--ink)}
.chip2.tg{border-color:var(--ink); font-family:var(--mono); font-size:12px}
.chip2 button{border:0; background:transparent; cursor:pointer; color:var(--mut); padding:0; font-size:14px; line-height:1}
.chip2 button:hover{color:var(--ink)}
.ptlist{margin:0; padding-left:18px; font-size:14px}
.ptlist li{margin-bottom:4px}
/* кнопка демо: видно, что это не часть рабочего пути */
.btn.demo{display:inline-flex; align-items:center; gap:7px; border-style:dashed; color:var(--mut)}
.btn.demo:hover{border-color:var(--ink); color:var(--ink)}
.btn.demo svg{display:block}

.pthead{display:flex; align-items:center; gap:8px}
.pthead .btn{margin-left:auto}
.ptadd{display:flex; gap:8px; margin-top:9px}
.ptadd input{flex:1; min-width:0}


/* ---------- прокрутки ----------
   Системная полоса приходит с квадратными краями и стрелками по бокам —
   на нашем фоне это чужой элемент. Своя: тонкая, скруглённая, без стрелок. */
*{scrollbar-width:thin; scrollbar-color:var(--scroll) transparent}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:transparent; border-radius:99px}
::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px;
  border:2px solid transparent; background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--mut); background-clip:padding-box}
::-webkit-scrollbar-button{display:none; width:0; height:0}
::-webkit-scrollbar-corner{background:transparent}

/* ---------- свой выпадающий список ----------
   Системный select нельзя привести к нашему виду: синяя подсветка строки
   и прямые углы приходят от браузера и не переопределяются. */
.dd{position:relative; min-width:0}
.ddbtn{display:flex; align-items:center; gap:10px; max-width:340px; cursor:pointer;
  border:1px solid var(--line); background:var(--bg); color:var(--ink);
  padding:8px 14px; font:400 14px var(--body); text-align:left;
  border-radius:var(--rx); corner-shape:squircle}
.ddbtn:hover,.ddbtn.on{border-color:var(--ink)}
.ddt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ddt i{color:var(--mut); font-style:normal}
.ddc{margin-left:auto; color:var(--mut); font-size:11px}
.ddlist{position:absolute; z-index:60; top:calc(100% + 6px); left:0; min-width:260px; max-width:380px;
  max-height:320px; overflow:auto; padding:6px; display:flex; flex-direction:column; gap:2px;
  background:var(--bg); border:1px solid var(--ink);
  border-radius:var(--rs); corner-shape:squircle}
.ddi{display:flex; flex-direction:column; gap:2px; text-align:left; cursor:pointer;
  border:0; background:transparent; color:var(--ink); padding:9px 12px; font:400 14px var(--body);
  border-radius:var(--rx); corner-shape:squircle}
.ddi i{color:var(--mut); font-style:normal; font-size:12.5px}
.ddi:hover{background:var(--card)}
.ddi.on{background:var(--cta); color:var(--ctafg)}
.ddi.on i{color:var(--ctafg); opacity:.7}

/* ---------- экран сборки воронки ----------
   Отдельный мир: не карточки в две колонки, а двери и цепочка шагов. */
.build .page{max-width:820px}
.build .sub{font-size:17px; color:var(--mut); margin-bottom:26px}
.doors{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.door{display:flex; flex-direction:column; align-items:flex-start; gap:9px; text-align:left;
  padding:22px 22px 20px; cursor:pointer; color:var(--ink);
  background:var(--card); border:1px solid transparent; font:400 15px/1.5 var(--body);
  border-radius:var(--rb); corner-shape:squircle}
.door:hover{border-color:var(--ink); background:var(--fill)}
.door .dico{display:grid; place-items:center; width:52px; height:52px; margin-bottom:4px;
  border:1px solid var(--line); border-radius:var(--rs); corner-shape:squircle}
.door:hover .dico{border-color:var(--ink)}
.dttl{font:600 21px/1.2 var(--display); letter-spacing:-.02em; display:flex; align-items:center; gap:9px}
.dttl i{font:400 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--mut);
  border:1px solid var(--line); padding:4px 8px; border-radius:99px; font-style:normal}
.dlead{color:var(--mut); font-size:14.5px}
.dfit{font-size:13.5px; color:var(--mut); padding-top:9px; border-top:1px solid var(--line); width:100%}
.dfit b{color:var(--ink); font-weight:500}
.dgo{margin-top:auto; padding-top:10px; font:400 13px var(--mono); letter-spacing:.02em}
.door.soonD{cursor:default; background:transparent; border-color:var(--line); opacity:.72}
.door.soonD:hover{border-color:var(--line); background:transparent}
.door.soonD .dttl{color:var(--mut)}

/* цепочка шагов */
.flowwrap{overflow-x:auto; padding-bottom:10px; margin-bottom:20px}
.flow{display:flex; align-items:flex-end; gap:12px; min-width:min-content}
.fgroup{display:flex; flex-direction:column; gap:7px}
.fglabel{font:500 10px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--mut)}
.fitems{display:flex; gap:8px}
.farrow{color:var(--mut); padding-bottom:12px; font-size:14px}
.fstep{display:flex; align-items:center; gap:9px; cursor:pointer; white-space:nowrap;
  border:1px solid var(--line); background:transparent; color:var(--ink);
  padding:10px 15px; font:400 14px var(--body);
  border-radius:var(--rs); corner-shape:squircle}
.fstep:hover{border-color:var(--ink)}
.fstep.on{background:var(--cta); color:var(--ctafg); border-color:var(--cta)}
.fn{font:400 11px var(--mono); color:var(--mut)}
.fstep.on .fn{color:var(--ctafg); opacity:.7}

.stepcard{background:var(--card); padding:26px 26px 22px; border-radius:var(--rb); corner-shape:squircle}
.schead{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.schead h3{font-size:26px}
.scn{font:400 11px var(--mono); letter-spacing:.06em; color:var(--mut); flex:0 0 100%}
.scgrid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); margin-bottom:18px}
.scblk{background:var(--bg); padding:16px 18px; border-radius:var(--rs); corner-shape:squircle}
.scblk .h{font:500 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase;
  color:var(--mut); display:block; margin-bottom:8px}
.scblk p{margin:0; font-size:15px}
.edstep{border-top:1px solid var(--line); padding-top:14px; margin-top:14px}


/* ---------- значок у заголовка блока ----------
   Подпись блока перестала быть просто строкой: слева тонкий контурный знак,
   по нему блок узнаётся быстрее, чем по прописному тексту. */
.lbl.lblico{display:flex; align-items:center; gap:9px}
.lbi{display:grid; place-items:center; width:26px; height:26px; flex:0 0 auto; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--rc); corner-shape:squircle}
.lbi svg{display:block}
.lbi.sm{width:auto; height:auto; border:0; border-radius:0; color:var(--mut)}
.scblk > .h.lblico,.ptsec > .h.lblico{display:flex; align-items:center; gap:7px}

/* ---------- третья колонка ----------
   На широком экране портрет сегмента стоит своей колонкой: места хватает,
   а внутри материала он спорил бы за ширину с самим текстом. */
@media(min-width:1440px){
  .artgrid.three{grid-template-columns:minmax(0,4fr) minmax(0,7fr) minmax(0,4fr)}
  .center.wide{max-width:1640px}
}
@media(min-width:1100px) and (max-width:1439px){
  /* Пока третьей колонке места нет, она встаёт под текстом, а не под всей страницей:
     это те же блоки-помощники, они должны держаться рядом с материалом. */
  .artgrid.three > .col:nth-child(3){grid-column:2}
}

/* шапка портрета: подпись слева, действия справа, тело не липнет к ним */
.pthead{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap}
.pthead .lbl{margin:0; margin-right:auto}
.ptacts{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.ptacts .btn{display:inline-flex; align-items:center; gap:7px; padding:8px 14px; font-size:14px}
.ptacts .btn svg{display:block}
.ptacts .btn.busy{color:var(--mut); border-style:dashed}
#ptbody > div > #ptm:empty{display:none}
#ptbody .msg{margin-top:0}


/* ---------- промпты школы ---------- */
.pstep{border-top:1px solid var(--line)}
.pstep:first-child{border-top:0}
.phead{display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  border:0; background:transparent; color:var(--ink); padding:13px 0; font:400 15px var(--body)}
.pn{display:grid; place-items:center; width:24px; height:24px; flex:0 0 auto;
  background:var(--cta); color:var(--ctafg); font:500 12px var(--mono);
  border-radius:var(--rc); corner-shape:squircle}
.ptt{flex:1; min-width:0}
.pchev{color:var(--mut); font:400 16px var(--mono)}
.pstep.on .ptt{font-weight:500}
.pbody{padding:0 0 14px}
.pwhy{margin:0 0 14px; color:var(--mut); font-size:14px}
.pitem{background:var(--bg); padding:14px 16px; margin-bottom:10px;
  border-radius:var(--rs); corner-shape:squircle}
.pitop{display:flex; align-items:center; gap:8px; margin-bottom:9px; flex-wrap:wrap}
.pitop b{font-weight:500; font-size:14.5px; margin-right:auto}
.pitop .btn{padding:5px 11px; font-size:12.5px}
.pnote{display:block; color:var(--mut); font:400 12px var(--mono); margin-bottom:8px}
.ptext{margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font:400 13.5px/1.55 var(--body);
  color:var(--ink); max-height:260px; overflow:auto}

/* ---------- выбор вариантов прямо в ответе ---------- */
.picks{margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.pickh{display:block; font:400 12px var(--mono); letter-spacing:.03em; color:var(--mut); margin-bottom:9px}
.pickb{text-align:left; cursor:pointer; border:1px solid var(--line); background:transparent;
  color:var(--ink); padding:7px 12px; font:400 13.5px var(--body); max-width:100%;
  border-radius:var(--rx); corner-shape:squircle}
.pickb:hover{border-color:var(--ink)}
.pickb.on{background:var(--cta); color:var(--ctafg); border-color:var(--cta)}
.picks .row{margin-top:10px}

/* ---------- карта механики воронки ---------- */
/* Колонки выровнены по центру: стрелки остаются на одной высоте, даже если
   в одной колонке четыре узла, а в соседней два. */
.fmapwrap{overflow-x:auto; padding-bottom:12px; margin-bottom:16px}
.fmap{display:flex; align-items:stretch; gap:10px; min-width:min-content}
.fcol{display:flex; flex-direction:column; gap:8px; min-width:180px}
.fcol.arr{min-width:0; flex:0 0 auto}
.fclabel{font:500 10px/1.4 var(--body); letter-spacing:.16em; text-transform:uppercase;
  color:var(--mut); min-height:1.4em}
.fnodes{display:flex; flex-direction:column; gap:8px; flex:1; justify-content:center}
.fcol.arr .fnodes{justify-content:center}
.ar{color:var(--mut); font-size:15px}
.fnode{display:block; width:100%; text-align:left; cursor:pointer; color:var(--ink);
  background:var(--card); border:1px solid transparent; padding:12px 14px; font:400 13.5px var(--body);
  border-radius:var(--rs); corner-shape:squircle}
.fnode:hover{border-color:var(--ink)}
.fnode.on{background:var(--cta); color:var(--ctafg); border-color:var(--cta)}
.fnode b{display:flex; align-items:center; gap:8px; font-weight:500; font-size:14px; line-height:1.3}
.fnode span{display:block; color:var(--mut); font-size:12.5px; margin-top:4px; line-height:1.4}
.fnode.on span{color:var(--ctafg); opacity:.75}
.fnode.wide{min-width:230px}
/* Значок пути стоит В СТРОКЕ заголовка: наложенный поверх, он резал текст. */
.fmark{flex:0 0 auto; order:2; margin-left:auto; font:500 10px var(--mono); font-style:normal;
  color:var(--mut); border:1px solid var(--line); padding:2px 7px; border-radius:99px}
.fnode.on .fmark{color:var(--ctafg); border-color:currentColor}
.fmnote{background:var(--card); padding:14px 18px; margin-bottom:20px; font-size:14.5px;
  border-left:2px solid var(--ink); border-radius:var(--rs); corner-shape:squircle}

/* раскрытый узел карты */
.fdetail{background:var(--card); padding:22px 24px 18px; margin-bottom:16px;
  border-radius:var(--rb); corner-shape:squircle}
.fdhead{margin-bottom:16px}
.fdcol{display:block; font:400 11px var(--mono); letter-spacing:.06em; color:var(--mut); margin-bottom:5px}
.fdhead h3{font-size:23px}
.fdgrid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); margin-bottom:16px}
@media (max-width:900px){
  .hdr-in{flex-wrap:wrap; padding:10px 14px; gap:8px}
  .who b{max-width:96px}
  .hicons{margin-left:0}
  .nav-main{flex:1 1 100%; order:5}
  .navpill button{padding:6px 12px}
}
@media (max-width:640px){
  .card{padding:20px 18px}
  .center{padding:20px 14px 70px}
  .layout{padding:16px 14px}
  .scaletop select{max-width:100%}
}

/* ---------- способы прохождения этапа ---------- */
.modes{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:10px}
.mode{border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer;
  text-align:left; padding:14px 16px; display:grid; gap:5px;
  border-radius:var(--rs); corner-shape:squircle}
.mode:hover{border-color:var(--ink)}
.mode.on{background:var(--cta); color:var(--ctafg); border-color:var(--cta)}
.mode b{font-weight:500; font-size:15px}
.mode span{font-size:13px; opacity:.75; line-height:1.4}

/* ---------- разговор по промптам ---------- */
.chat{display:grid; gap:12px; max-height:420px; overflow-y:auto; margin:0 0 16px; padding-right:4px}
.cmsg{display:grid; gap:4px; font-size:15px; line-height:1.55; white-space:pre-wrap}
.cmsg .who{font:500 10.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--mut)}
.cmsg.user > div{background:var(--fill); padding:12px 15px; border-radius:var(--rs); corner-shape:squircle}
.cmsg.assistant > div{border-left:1.5px solid var(--ink); padding:2px 0 2px 14px}

/* ---------- голос наставника ----------
   Блок нарочно не карточка: обводка вместо заливки, крупнее текст, шаги с номерами.
   Он должен читаться как реплика человека рядом, а не как ещё один контейнер. */
.mentor{border:2px solid var(--ink); padding:22px 24px; margin:0;
  border-radius:var(--rs); corner-shape:squircle}
.mlabel{display:block; font:500 10.5px/1 var(--body); letter-spacing:.16em; text-transform:uppercase;
  color:var(--mut); margin:0 0 12px}
.mwhy{font-family:var(--display); font-weight:500; font-size:19px; line-height:1.35;
  letter-spacing:-.01em; margin:0 0 18px; color:var(--ink)}
.msteps{display:grid; gap:12px}
.mstep{display:flex; gap:14px; align-items:flex-start; font-size:15px; line-height:1.55; color:var(--ink)}
.mnum{width:26px; height:26px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--cta); color:var(--ctafg); font:500 12px var(--mono);
  border-radius:var(--rc); corner-shape:squircle}
.mafter{margin:18px 0 0; padding-top:14px; border-top:1px solid var(--line);
  font-size:14px; line-height:1.55; color:var(--mut)}

/* ---------- кнопка и замок в карточке этапа ---------- */
.tagbtn{display:inline-block; margin-top:10px; border:0; cursor:pointer;
  background:var(--cta); color:var(--ctafg); padding:7px 16px;
  font:500 13px var(--body); border-radius:var(--rc); corner-shape:squircle}
.tagbtn:hover{opacity:.9}
.taglock{display:block; margin-top:10px; padding-top:9px; border-top:1px solid var(--line);
  font-size:12px; line-height:1.45; color:var(--mut)}
.tag:focus-visible{height:auto; overflow:visible; z-index:30; background:var(--bg)}
.tag:focus-visible .d{display:block}