/* FROST 5 — «Кто делает» и «Так будет выглядеть ваше приложение» (владелец 17.10: «зона ужасна, давай 4 экрана рядом и внутри приложения, тема их
   соответствует теме страницы»). Экран живёт в теме страницы: переменные --a-* ниже — только ссылки на токены family.css, поэтому светлая тема
   (html.light) подхватывается сама. Вбитый цвет здесь один — корпус телефона: он тёмный в обеих темах, как у настоящего устройства. */
/* ── Кто делает ── */
.whog{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:start}
.whot p{margin:0 0 12px;max-width:62ch;line-height:1.55}
.whot h2 em{font-style:italic;color:var(--ice)}
.whop{list-style:none;margin:0;padding:0;border-top:1px solid var(--edge)}
.whop li{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--edge)}
.whop .mono{color:var(--fa);font-size:13px;padding-top:2px}
.whop b{display:block}
.whop li > span:last-child > span{color:var(--mu);font-size:13.5px}
.dmore5{margin:12px 0 0;font-size:13.5px}
.dmore5 a{color:var(--mu);text-decoration:underline;text-underline-offset:3px}
@media (max-width:820px){.whog{grid-template-columns:minmax(0,1fr)}}


/* ── Пробы: четыре приложения рядом ── */
.t5{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.t5brand{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:var(--p1);border:1px solid var(--edge);border-radius:16px;padding:12px}
.t5brand label{font-weight:700;color:var(--mu)}
.t5brand input{flex:1;min-width:200px;height:44px;border-radius:12px;border:1px solid var(--edge2);background:var(--p2);color:var(--fg);font:600 15px var(--f);padding:0 12px}
.t5hook{display:flex;gap:12px;flex-wrap:wrap;align-items:center;background:var(--p1);border:1px solid var(--edge);border-radius:16px;padding:14px}
.t5note{color:var(--mu);font-size:13.5px;flex:1;min-width:220px}

/* ≥1180 — четыре в ряд; уже — тот же ряд, но с прокруткой и прилипанием, следующий телефон выглядывает.
   Прокрутка живёт внутри .t5g, поэтому страница шире экрана не становится. */
.t5g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start;min-width:0}
@media (max-width:1179px){
  .t5g{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(78vw,280px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;padding:2px 0 12px}
}
.t5d{display:grid;gap:10px;align-content:start;min-width:0;scroll-snap-align:center}
/* Шапка колонки фиксированной высоты: телефоны стоят на одной линии, сколько бы строк ни заняло пояснение */
.t5d .hd{height:88px;display:grid;gap:4px;align-content:start;overflow:hidden}
.t5d h3{margin:0;font-size:16.5px;line-height:1.25}
.t5d .why{font-size:13px;line-height:1.4;color:var(--mu)}

/* Корпус — графит в обеих темах (как у настоящего телефона). Экран внутри берёт токены страницы; у каждого приложения свой акцент --ac и второе свечение --ac2.
   Подпись на заливке акцента: в тёмной теме тёмная, в светлой белая — акценты светлой темы (малиновый, зелёный, оранжевый) тёмные. */
.t5ph{--ink-on:#06080C;position:relative;width:100%;max-width:290px;margin-inline:auto;aspect-ratio:9/19;border-radius:34px;padding:9px;background:#0B0E14;border:1px solid var(--edge2);box-shadow:0 26px 50px -30px rgba(0,0,0,.7)}
html.light .t5ph{--ink-on:#fff}
/* Акцент как цвет ТЕКСТА: в тёмной теме подсвечен к белому (малиновый на стекле иначе даёт ~3.9:1), в светлой — сам токен */
.t5s{--act:color-mix(in srgb,var(--ac) 70%,#fff);--pkt:color-mix(in srgb,var(--pk) 75%,#fff)}
html.light .t5s{--act:var(--ac);--pkt:var(--pk)}
/* «Остров» — над экраном, в зоне, где у .xtop оставлен отступ, поэтому верх экрана ничем не закрыт */
.t5ph::before{content:"";position:absolute;z-index:3;top:15px;left:50%;width:58px;height:16px;margin-left:-29px;border-radius:9px;background:#000;pointer-events:none}
.t5s[data-k=hold]{--ac:var(--ice);--ac2:var(--gr);--ink-ac:var(--ice-ink)}
.t5s[data-k=master]{--ac:var(--pk);--ac2:var(--ice);--ink-ac:var(--ink-on)}
.t5s[data-k=shop]{--ac:var(--gr);--ac2:var(--ice);--ink-ac:var(--ink-on)}
.t5s[data-k=made]{--ac:var(--or);--ac2:var(--pk);--ink-ac:var(--ink-on)}
/* Фон как у лендинга: мягкий градиент p1→p2 и два размытых свечения в углах; всё читаемое лежит на стеклянных карточках поверх свечений */
.t5s{position:relative;height:100%;border-radius:26px;overflow:hidden;isolation:isolate;background:linear-gradient(165deg,var(--p1),var(--p2) 70%);color:var(--fg);font:500 12.5px/1.35 var(--f);display:flex;flex-direction:column}
.t5s::before,.t5s::after{content:"";position:absolute;z-index:-1;width:170px;height:170px;border-radius:50%;filter:blur(46px);pointer-events:none}
.t5s::before{top:-56px;right:-48px;background:var(--ac);opacity:.26}
.t5s::after{bottom:30px;left:-70px;background:var(--ac2);opacity:.20}
html.light .t5s::before{opacity:.22}
html.light .t5s::after{opacity:.16}
.t5s button{font-family:inherit}
.t5s button:focus-visible{outline:2px solid var(--ac);outline-offset:1px}

/* Шапка — стекло, прилипает; под островом оставлен отступ */
.t5s .xtop{flex:none;position:relative;z-index:2;padding:30px 12px 6px;display:flex;align-items:center;gap:6px;min-height:58px;background:color-mix(in srgb,var(--p1) 66%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--edge)}
.t5s .xtop b{flex:1;min-width:0;font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t5s .xtop small{color:var(--mu);font-size:11px;white-space:nowrap}
.t5s .bk{position:relative;flex:none;width:32px;height:32px;margin:-4px 0 -4px -8px;border:0;border-radius:10px;background:transparent;color:var(--act);font-size:24px;line-height:1;cursor:pointer}
.t5s .xrs{position:relative;flex:none;width:32px;height:32px;margin:-4px -6px -4px 0;border:0;border-radius:10px;background:transparent;color:var(--mu);font-size:17px;line-height:1;cursor:pointer}
/* Цель нажатия ≥44×44 даёт невидимая подложка: видимая кнопка в шапке меньше, чтобы не раздувать её */
.t5s .bk::after,.t5s .xrs::after{content:"";position:absolute;inset:-6px}

/* Та же мера, что у нити разговора на главной: прокручиваемое содержимое растворяется к нижней кромке, а не
   обрывается ровной линией. Обход швов 30.10 нашёл здесь ровно это: в окне 453 px лежит 576 px содержимого, и
   строка на границе была срублена пополам — владелец читает такой обрыв как поломку, а не как «прокрути дальше». */
.t5s .body{flex:1;min-height:0;overflow-y:auto;padding:8px 10px;display:grid;gap:6px;align-content:start;scrollbar-width:thin;-webkit-mask-image:linear-gradient(180deg,black calc(100% - 18px),transparent);mask-image:linear-gradient(180deg,black calc(100% - 18px),transparent)}
.t5s .body.xin{animation:t5in .16s ease-out}
@keyframes t5in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.t5s .body.xin{animation-duration:.09s}.t5s div.st.hl{animation-duration:.5s}}

/* Нижняя панель вкладок: значок + подпись, цель ≥44 px */
.t5s .tabs{flex:none;position:relative;z-index:2;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:2px 4px 8px;background:color-mix(in srgb,var(--p1) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--edge)}
.t5s .tb{display:grid;justify-items:center;align-content:center;gap:2px;min-height:46px;border:0;border-radius:10px;background:transparent;color:var(--mu);font:700 10.5px/1.1 var(--f);cursor:pointer;padding:3px 0}
.t5s .tb span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t5s .tb[aria-pressed="true"]{color:var(--act);background:color-mix(in srgb,var(--ac) 10%,var(--p1))}

/* Стеклянные карточки и общие блоки */
.t5s .gl{display:grid;gap:2px;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--p1) 64%,transparent);border:1px solid var(--edge);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 18px -14px rgba(0,0,0,.55)}
.t5s .lbl{font-size:11px;font-weight:700;color:color-mix(in srgb,var(--fg) 80%,var(--p1));padding:2px 2px 0}
.t5s .big{font:800 26px/1.1 var(--mono);letter-spacing:-.02em}
.t5s .mn{color:var(--volt-t)}
.t5s .num{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums}
.t5s .k3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:4px;padding-top:6px;border-top:1px solid var(--edge)}
.t5s .k3 small{display:block;color:var(--mu);font-size:10.5px}
.t5s .k3 b{font-size:10.5px;white-space:nowrap}
.t5s .sm{font-size:12px;line-height:1.35}

/* Основная кнопка в потоке; жёлтая — только когда это деньги и одно главное действие */
.t5s .ab{min-height:44px;border:0;border-radius:12px;padding:6px 10px;font:800 12.5px/1.15 var(--f);background:var(--ac);color:var(--ink-ac);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;width:100%}
.t5s .ab.m{background:var(--volt);color:var(--volt-ink)}
.t5s .ab.gh{background:color-mix(in srgb,var(--p2) 80%,transparent);color:var(--fg);border:1px solid var(--edge2)}
.t5s .ab:disabled{opacity:.5;cursor:default}
.t5s .two{display:grid;grid-template-columns:1fr 1fr;gap:6px}

/* Боль — тихая строка с малиновой меткой; решение ИИ-помощника — плотнее, с акцентной кромкой: оно сильнее боли */
.t5s .pain{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-items:start;padding:7px 10px;border-radius:10px;background:linear-gradient(var(--pk-soft),var(--pk-soft)),color-mix(in srgb,var(--p1) 90%,transparent);font-size:11.5px;color:var(--mu)}
.t5s .pain b{padding:1px 5px;border-radius:5px;background:var(--pk);color:var(--bg);font-size:10px;font-weight:800;text-transform:uppercase}
html.light .t5s .pain b{color:#fff}
/* site.css держит у голого .ai position:absolute (подсказка в сцене) — здесь карточка в потоке */
.t5s .ai{position:static;line-height:1.35;transition:none;display:grid;gap:4px;padding:9px 11px;border-radius:12px;background:color-mix(in srgb,var(--ac) 14%,var(--p1));border:1px solid var(--ac);border-left-width:4px;font-size:12.5px}
.t5s .ai b{color:var(--act);font-size:11px;font-weight:800}
.t5s .ai span{color:var(--fg);font-weight:600}
.t5s .okc{display:flex;gap:8px;align-items:center;padding:9px 11px;border-radius:12px;background:linear-gradient(var(--gr-soft),var(--gr-soft)),color-mix(in srgb,var(--p1) 90%,transparent);border:1px solid color-mix(in srgb,var(--gr) 40%,transparent);color:var(--gr);font-weight:800;font-size:12px}
.t5s .kv{display:flex;justify-content:space-between;gap:8px;align-items:center;min-height:24px;font-size:12px}
.t5s .kv span:first-child{color:var(--mu)}
.t5s .kv .v{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.t5s .kv.tot{border-top:1px solid var(--edge);padding-top:4px;font-weight:800}
.t5s .kv.tot span:first-child{color:var(--fg)}
.t5s .cpx{display:inline-block;padding:2px 7px;border-radius:7px;background:var(--volt);color:var(--volt-ink);font-size:12px}
.t5s .gl small{color:var(--mu);font-size:11px}

/* Строки списков ≤34 px: значок/метка слева, имя и подпись, справа сумма или статус */
.t5s .lr{display:flex;align-items:center;gap:8px;min-height:34px;padding:2px 8px;border-radius:10px;border:1px solid var(--edge);background:color-mix(in srgb,var(--p1) 80%,transparent);color:var(--fg);text-align:left;width:100%;font:600 12px/1.2 var(--f)}
button.lr{cursor:pointer}
.t5s .lr.hit{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,var(--p1))}
.t5s .lr.fr{border-style:dashed;color:var(--mu)}
.t5s .lr.okr .de{color:var(--gr)}
.t5s .le{flex:none;min-width:14px;color:var(--act);font-size:11px;font-weight:800;font-family:var(--mono);display:grid;place-items:center}
.t5s .lr .ln1{flex:1;min-width:0;display:grid}
.t5s .lr b{font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t5s .lr small{font-size:10.5px;color:var(--mu);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t5s .rt{flex:none;font-size:11.5px;margin-left:auto}
.t5s .tgl{flex:none;padding:1px 6px;border-radius:6px;background:var(--ice-soft);color:var(--ice-t);font-size:10px;font-weight:800;white-space:nowrap}
.t5s .tgl.or{background:color-mix(in srgb,var(--or) 10%,var(--p1));color:var(--or)}
.t5s .de{font-style:normal;font-size:10.5px;color:var(--mu);white-space:nowrap}
.t5s .dtt{flex:none;width:8px;height:8px;border-radius:50%;background:var(--gr)}
.t5s .dtt.wn{background:var(--or);box-shadow:0 0 0 3px color-mix(in srgb,var(--or) 25%,transparent)}
.t5s .sp{flex:none;color:var(--gr)}
.t5s .sp.wn{color:var(--or)}
.t5s span.st{flex:none;font-size:13px;min-width:20px;text-align:center}

/* Холдинг: воронка, доли */
.t5s .fnl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.t5s .fnb{display:grid;justify-items:center;gap:1px;min-height:44px;border:1px solid var(--edge);border-radius:10px;background:transparent;color:var(--fg);cursor:pointer;padding:3px 0}
.t5s .fnb b{font-size:15px}
.t5s .fnb small{font-size:9.5px;color:var(--mu);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t5s .fnb[aria-pressed="true"]{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,var(--p1))}
.t5s .fnb[aria-pressed="true"] small{color:var(--fg)}
.t5s .stk{display:flex;gap:2px;height:7px;border-radius:4px;overflow:hidden;margin:3px 0}
.t5s .stk i{display:block;background:var(--ac);min-width:3px}
.t5s .shr{display:grid;gap:1px;padding:3px 0;border-bottom:1px solid var(--edge)}
.t5s .shr:last-child{border-bottom:0}
.t5s .shr b{font-size:12px}
.t5s .lk{flex:none;min-height:24px;padding:0 7px;border:1px solid var(--edge2);border-radius:7px;background:transparent;color:var(--act);font:700 10.5px var(--f);cursor:pointer}

/* Переключатели и сегменты */
.t5s .swg{display:grid;gap:2px}
.t5s .sw{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:34px;padding:0 2px;border:0;background:transparent;color:var(--fg);font:600 12px var(--f);text-align:left;cursor:pointer}
.t5s .sw i{flex:none;position:relative;width:34px;height:20px;border-radius:10px;background:var(--p3);transition:background-color .15s}
.t5s .sw i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--fg);transition:transform .15s}
.t5s .sw[aria-checked="true"] i{background:var(--ac)}
.t5s .sw[aria-checked="true"] i::after{transform:translateX(14px);background:var(--ink-ac)}
.t5s .sg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;padding:3px;border-radius:11px;background:color-mix(in srgb,var(--p2) 80%,transparent);border:1px solid var(--edge)}
.t5s .sg.four{grid-auto-flow:row;grid-template-columns:1fr 1fr}
.t5s .sg button{min-height:34px;border:0;border-radius:8px;background:transparent;color:var(--mu);font:700 11.5px var(--f);white-space:nowrap;padding:0 4px;cursor:pointer;overflow:hidden;text-overflow:ellipsis}
.t5s .sg button[aria-pressed="true"]{background:var(--ac);color:var(--ink-ac)}
.t5s .rd{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:8px;align-items:center;min-height:34px;padding:2px 10px;border:1px solid var(--edge);border-radius:10px;background:color-mix(in srgb,var(--p1) 80%,transparent);color:var(--fg);text-align:left;font:600 12px/1.25 var(--f);cursor:pointer}
.t5s .rd i{width:14px;height:14px;border-radius:50%;border:2px solid var(--p3);box-sizing:border-box}
.t5s .rd[aria-pressed="true"]{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,var(--p1))}
.t5s .rd[aria-pressed="true"] i{border-color:var(--ac);background:radial-gradient(var(--ac) 0 38%,transparent 42%)}
.t5s .rd em{font-style:normal;color:var(--mu);font-size:11px;white-space:nowrap}
.t5s .chk{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;align-items:center;min-height:34px;padding:2px 10px;border:1px solid var(--edge);border-radius:10px;background:color-mix(in srgb,var(--p1) 80%,transparent);color:var(--fg);text-align:left;font:600 12px/1.25 var(--f);cursor:pointer}
.t5s .chk i{width:18px;height:18px;border-radius:5px;border:2px solid var(--p3);box-sizing:border-box;display:grid;place-items:center;font-style:normal;font-size:12px;line-height:1}
.t5s .chk[aria-pressed="true"] i{background:var(--ac);border-color:var(--ac);color:var(--ink-ac)}

/* Мастер: SMS-пузырь, склад */
.t5s .bub{padding:7px 10px;border-radius:12px 12px 12px 4px;background:color-mix(in srgb,var(--p2) 85%,transparent);border:1px solid var(--edge);justify-self:start;max-width:94%;font-size:12px}
.t5s div.st{display:grid;grid-template-columns:minmax(0,1fr) 44px auto;gap:6px;align-items:center;min-height:30px;padding:0 4px;border-radius:8px;text-align:left;font-size:12px}
.t5s .bx{height:6px;border-radius:3px;background:var(--p3);overflow:hidden}
.t5s .bx i{display:block;height:100%;background:var(--ac)}
.t5s .bx.lw i{background:var(--pk)}
.t5s div.st .num{font-size:11px;text-align:right;white-space:nowrap}
.t5s div.st em{display:block;font-style:normal;font-family:var(--f);font-size:9.5px;color:var(--pkt)}
.t5s div.st.hl{animation:t5hl 1.1s ease-out}
@keyframes t5hl{from{background:color-mix(in srgb,var(--ac) 12%,transparent)}to{background:transparent}}

/* Магазин: баннер, плитки, категории, карточка товара, корзина */
.t5s .ban{display:grid;gap:2px;justify-items:start;min-height:70px;padding:10px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--gr) 50%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--gr) 16%,var(--p1)),color-mix(in srgb,var(--ice) 8%,var(--p2)));color:var(--fg);text-align:left;cursor:pointer}
.t5s .ban b{font-size:15px;line-height:1.2;font-weight:800}
.t5s .ban small{font-size:10.5px;font-weight:700;color:var(--mu);text-transform:uppercase}
.t5s .ban span{font-size:12px;font-weight:800;color:var(--fg)}
.t5s .xg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.t5s .gd{display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-rows:auto auto;gap:2px 6px;align-items:center;padding:6px 8px;border:1px solid var(--edge);border-radius:10px;background:color-mix(in srgb,var(--p1) 80%,transparent);color:var(--fg);text-align:left;cursor:pointer}
.t5s .ge{font-size:19px;line-height:1}
.t5s .gd .gn{font-size:11.5px;font-weight:700;line-height:1.2}
.t5s .gd .gp{grid-column:1 / 3;display:flex;justify-content:space-between;align-items:center;font-size:11.5px}
.t5s .gd .gp i,.t5s .pl{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--p2);font-style:normal;font-weight:800;font-size:14px;line-height:1;flex:none}
.t5s .gd[aria-pressed="true"]{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,var(--p1))}
.t5s .gd[aria-pressed="true"] .gp i{background:var(--ac);color:var(--ink-ac)}
.t5s .cats{min-height:36px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.t5s .cat{flex:none;min-height:34px;padding:0 10px;border:1px solid var(--edge);border-radius:17px;background:color-mix(in srgb,var(--p1) 85%,transparent);color:var(--fg);font:700 11.5px var(--f);white-space:nowrap;cursor:pointer}
.t5s .cat[aria-pressed="true"]{background:var(--ac);color:var(--ink-ac);border-color:transparent}
.t5s .pic{display:grid;place-items:center;height:92px;border-radius:12px;font-size:52px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--ac) 22%,transparent),transparent 70%)}
.t5s .pri{display:flex;justify-content:space-between;gap:8px;align-items:baseline;font-size:13px}
.t5s .qty{display:flex;align-items:center;gap:6px}
.t5s .qty b{min-width:20px;text-align:center}
.t5s .qb{width:30px;height:30px;border:1px solid var(--edge2);border-radius:9px;background:transparent;color:var(--fg);font:800 16px var(--f);cursor:pointer;line-height:1}
.t5s .cr{display:flex;align-items:center;gap:8px;min-height:34px}
.t5s .cr .ln1{flex:1;min-width:0;display:grid}
.t5s .cr b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t5s .emp{display:grid;justify-items:center;gap:6px;padding:20px 8px;font-size:34px}
.t5s .emp b{font-size:13px}
.t5s .act{display:grid;gap:4px;padding:10px 12px;border-radius:12px;border:1px solid var(--ac);background:color-mix(in srgb,var(--ac) 12%,var(--p1));color:var(--fg);text-align:left;cursor:pointer}
.t5s .act small{color:var(--mu);font-size:11px}
.t5s .pg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px}
.t5s .pg i{height:4px;border-radius:2px;background:var(--p3)}
.t5s .pg i.on{background:var(--ac)}

/* Производство и общие: этапы, документы, чек */
.t5s .tl{display:grid;gap:0;padding:2px 4px}
.t5s .tl div{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:center;min-height:28px;color:var(--mu)}
.t5s .tl i{width:14px;height:14px;border-radius:50%;border:2px solid var(--p3);box-sizing:border-box;display:grid;place-items:center;font-style:normal;font-size:9px;line-height:1}
.t5s .tl .dn{color:var(--fg)}
.t5s .tl .dn i{background:var(--gr);border-color:var(--gr);color:var(--bg)}
html.light .t5s .tl .dn i{color:#fff}
.t5s .tl .nw{color:var(--fg);font-weight:800}
.t5s .tl .nw i{border-color:var(--ac);background:var(--ac)}
.t5s .xph{display:grid;justify-items:center;gap:4px;padding:22px 8px;border:1.5px dashed var(--p3);border-radius:12px;color:var(--mu);font-size:11.5px;text-align:center}
.t5s .xph svg{color:var(--fg)}
.t5s .xqr{display:grid;grid-template-columns:repeat(21,3px);gap:0;flex:none}
.t5s .xqr i{width:3px;height:3px;background:transparent}
.t5s .xqr i.on{background:var(--fg)}
.t5s .rcp{display:flex;gap:10px;align-items:flex-start;text-align:left;padding-top:6px;margin-top:2px;border-top:1px dashed var(--p3)}
.t5s .rcp b{font-size:11.5px;line-height:1.3;display:block}
.t5s .rh{display:flex;justify-content:space-between;gap:8px;align-items:baseline;padding-bottom:4px;border-bottom:1px dashed var(--p3)}
.t5s .rh span{font-size:11px;color:var(--mu)}
.t5s .xln{display:flex;justify-content:space-between;gap:8px;min-height:22px;align-items:center;font-size:12px;border-bottom:1px solid var(--edge)}
.t5s .dc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;min-height:34px;padding:0 10px;border-radius:10px;background:color-mix(in srgb,var(--p2) 70%,transparent);border:1px solid var(--edge);font-weight:600;font-size:12px}
.t5s .dc em{font-style:normal;font-size:10.5px;color:var(--mu)}
.t5s .bars{display:flex;align-items:flex-end;gap:5px;height:40px}
.t5s .bars i{flex:1;background:var(--ac);border-radius:3px 3px 0 0;opacity:.85}

/* ===== Зоны нажатия ≥44 px на телефоне при плотном виде (владелец: «строка ≤34 px, цель нажатия ≥44») =====
   Видимая высота строк и переключателей не меняется: палец ловит невидимая подложка ::after,
   вылезающая за кромку по вертикали. Больше padding или min-height дали бы раздутый список, а это ровно то, что
   владелец запретил; подложка раскладку не двигает, потому что вынута из потока (absolute) и без заливки.
   inset у ::after отсчитывается от внутренней кромки (padding-box), а у строк и переключателя есть рамка в 1 px, поэтому
   у них вылет на 1 px больше: строка 34 + 2·5 (считая от рамки) = 44. Вылет от рамки (5 px) меньше промежутка
   между соседями (6 px у списка в .body): подложка не заходит на чужую строку и не перехватывает её нажатие,
   соседние подложки делят только пустую щель.
   position:relative обязателен: без него подложка привяжется к ближайшему предку и уедет.
   Кнопку «Хочу такое» (#t5want) не трогаем: на касании её уже поднимает до 44 общее правило .btn в family.css
   (pointer:coarse); мышиные 36 px оставлены намеренно, подложка поверх дала бы 52 px и лишний перехват. */
.t5s .lr,.t5s .chk{position:relative}
.t5s .lr::after,.t5s .chk::after{content:"";position:absolute;inset:-6px 0}    /* рамка 1 px: 34 + 2·5 = 44 */
.t5s .sg button::after{content:"";position:absolute;inset:-5px 0}               /* без рамки: 34 + 2·5 = 44 */
/* Кнопки сегмента режут подпись многоточием через overflow:hidden, а он срезал бы и подложку. overflow:clip с
   overflow-clip-margin отпускает содержимое за кромку ровно на запас подложки. У overflow:clip нет прокрутки, а
   потому нет и «нулевого минимума» грид-элемента, который давал hidden; min-width:0 возвращает его вручную,
   иначе длинная подпись растянула бы колонку вместо того, чтобы обрезаться. */
.t5s .sg button{position:relative;overflow:clip;overflow-clip-margin:6px;min-width:0}
/* Ссылка «Ещё: …» переносится на две строки. Подложка ::after у такой встроенной ссылки привязывается к одному
   обрывку строки и почти ничего не даёт (замер: 18 px), поэтому здесь вертикальный padding: у встроенного
   элемента он не меняет высоту строки и межстрочный интервал, но входит в зону нажатия каждой строки.
   Две строки по 19 px + по 3 px сверху и снизу = 44 по рамке ссылки. */
.dmore5 a{padding:3px 0}