/* Компоненты Mini App (design-spec §9.4–§9.6, §10; вид — по docs/mockups/screens.html).
   Цвета — только через токены из tokens.css. Теней нет, кроме листа и тоста.
   Стекла, backdrop-filter и градиентов нет: это полевой инструмент на солнце. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
/* body не прокручивается: на iOS свайп у верхнего края иначе сворачивает Mini App (§9.7) */
body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font-family:var(--font);touch-action:manipulation}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--action);outline-offset:2px}

/* корень приложения: высота — стабильная высота окна Telegram, чтобы низ не прыгал с клавиатурой */
#app{position:relative;height:var(--tg-viewport-stable-height,100vh);display:flex;flex-direction:column;
  max-width:var(--max-w);margin:0 auto;background:var(--bg);overflow:hidden}
@supports (height:100dvh){ #app{height:var(--tg-viewport-stable-height,100dvh)} }
.screen{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.scr{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  padding-top:var(--tg-content-safe-area-inset-top,0px)}
.dock{flex:none;padding:12px 16px calc(16px + max(env(safe-area-inset-bottom,0px),
  calc(var(--tg-safe-area-inset-bottom,0px) + var(--tg-content-safe-area-inset-bottom,0px))));
  background:var(--bg);border-top:1px solid var(--line)}
.dock>*+*{margin-top:12px}
.dock .gap24{height:12px}

/* учебный Telegram в браузере (только локально, в Telegram его нет) */
.fake-tg{flex:none;display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 4px;
  background:var(--surface);border-bottom:1px solid var(--line);font-size:16px;line-height:22px}
.fake-tg button{min-height:48px;min-width:48px;padding:0 12px;border:0;background:none;color:var(--action);font-size:16px;font-weight:600;cursor:pointer}
.fake-tg .ft-title{font-weight:600;text-align:center;flex:1}
.fake-tg .ft-dev{color:var(--text-2);font-weight:400}

/* текст */
.h1{font-size:22px;line-height:28px;font-weight:700}
.title{font-size:var(--fs-title);line-height:var(--lh-title);font-weight:600}
.meta{display:block;font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:var(--fw-meta);color:var(--text-2)}
.meta.i{display:inline}
.key{font-size:var(--fs-key);line-height:var(--lh-key);font-weight:700}
.num{font-variant-numeric:tabular-nums}
.lead18{font-size:18px;line-height:24px;margin-top:6px;font-weight:600}
.p18{font-size:18px;line-height:24px;margin:12px 0 0}
.note16{padding:12px 16px 0;font-size:16px;line-height:22px;color:var(--text-2)}
.b6{font-weight:600}
.ink-done{color:var(--done-ink)} .ink-alarm{color:var(--alarm-ink)} .ink-reason{color:var(--reason-ink)} .ink-2{color:var(--text-2)}

/* раскладка экрана */
.apphead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 16px 6px;min-height:56px}
.apphead .grow{min-width:0}
.deadline{padding:4px 16px 0;font-size:16px;line-height:22px;font-weight:600}
.deadline.late{color:var(--text-2)}
.sh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:28px 16px 10px}
.sh .meta{white-space:nowrap}
.pad{padding:16px}
.pad-x{padding:0 16px}
.top32{padding-top:32px}
.pb0{padding-bottom:0}
.pt0{padding-top:0}
.mt12{margin-top:12px}
.stack>*+*{margin-top:12px}
.spacer24{height:24px}

/* список = одна поверхность с разделителями (без радиусов, §9.4) */
.lst{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lst.mt28{margin-top:28px}
.lst.mt8{margin-top:8px}
.lst.mt16{margin-top:16px}
.rw{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;border:0;border-bottom:1px solid var(--line);
  background:var(--surface);color:var(--text);width:100%;text-align:left;font:inherit;line-height:inherit}
.rw:last-child{border-bottom:0}
button.rw{cursor:pointer;transition:background-color var(--dur-press)}
button.rw:active{background:var(--surface-2)}
.rw .grow{flex:1;min-width:0}
.rw b{font-weight:600;display:block}
.rw.h48{min-height:48px} .rw.h64{min-height:64px} .rw.h72{min-height:72px} .rw.h88{min-height:88px}
.rw.dim{color:var(--text-2)}
.rw .end{flex:none;text-align:right}
.ch{flex:none;color:var(--text-2);font-size:28px;line-height:1;margin-left:2px}
.gl{width:28px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--closed-mark)}
.gl svg{width:20px;height:20px}
.gl.done{color:var(--done-mark)} .gl.reason{color:var(--reason-mark)} .gl.alarm{color:var(--alarm-mark)} .gl.closed{color:var(--closed-mark)}
.info{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;color:var(--text-2);font-size:16px;line-height:22px;
  background:var(--surface);border-bottom:1px solid var(--line)}
.info:last-child{border-bottom:0}
.mrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px}

/* кнопки (§9.6.1–2): минимальная, а не фиксированная высота — текст растёт при 130% */
.b{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:var(--hit);border-radius:12px;
  font-family:var(--font);font-weight:600;cursor:pointer;padding:8px 16px;text-align:center;line-height:22px;
  transition:transform var(--dur-press),background-color var(--dur-state)}
.b:active{transform:scale(.98)}
.b svg{width:24px;height:24px;flex:none}
.b-main{background:var(--action);color:var(--action-ink);border:0;min-height:64px;font-size:20px;line-height:24px;flex-direction:column;gap:2px}
.b-main small{font-size:16px;font-weight:400;line-height:20px}
.b-main:active{background:var(--action-press)}
.b-ton{background:var(--action-soft);color:var(--action-soft-ink);border:0;font-size:18px}
.b-out{background:transparent;color:var(--text);border:2px solid var(--text-2);min-height:56px;font-size:18px}
.b-txt{background:transparent;border:0;color:var(--action);font-size:18px;min-height:56px}
html[data-role='hq'] .b-ton,html[data-role='hq'] .b-out,html[data-role='hq'] .b-txt{font-size:16px;min-height:48px}
.b.h56{min-height:56px}
/* неактивная кнопка (SM-13 «Исправить», пока сервер не принимает): видна, но не нажимается и не зовёт */
.b:disabled{cursor:default;color:var(--text-2);border-color:var(--line-strong);transform:none}
.b.waiting,.b-main.waiting{flex-direction:row;gap:10px;cursor:default}
.b-main.acc{background:var(--done-ink);color:var(--surface)}
.b-main.next{gap:2px}
.b.auto{width:auto;padding:0 28px}

/* чип статуса (§9.5): подложка + глиф + слово, высота 32 */
.st{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border-radius:8px;font-size:var(--fs-chip);
  line-height:20px;font-weight:600;white-space:nowrap;background:var(--closed-fill);color:var(--closed-ink)}
.st svg{width:16px;height:16px;flex:none}
.st.done{background:var(--done-fill);color:var(--done-ink)}
.st.reason{background:var(--reason-fill);color:var(--reason-ink)}
.st.alarm{background:var(--alarm-fill);color:var(--alarm-ink)}
.st.adjust{background:var(--adjust-fill);color:var(--adjust-ink)}
.st.line{background:transparent;border:1.5px solid var(--line-strong);color:var(--text)}
.tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}

/* плашки и полосы */
.plate{display:flex;gap:12px;align-items:flex-start;min-height:56px;padding:14px 16px;border-radius:12px;
  background:var(--closed-fill);color:var(--closed-ink);font-weight:600;font-size:16px;line-height:22px}
.plate .g{flex:none;width:20px;display:flex;justify-content:center;padding-top:1px}
.plate .g svg{width:20px;height:20px}
.plate.reason{background:var(--reason-fill);color:var(--reason-ink)}
.plate.alarm{background:var(--alarm-fill);color:var(--alarm-ink)}
.plate.done{background:var(--done-fill);color:var(--done-ink)}
.plate.big{min-height:64px;align-items:center}
.netbar{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 16px;background:var(--closed-fill);color:var(--closed-ink);
  font-size:16px;line-height:20px;font-weight:600}
.netbar svg{width:20px;height:20px;flex:none}
/* плашка «Не отправлено» (§9.6.9): липкая, вся — переход в SM-12, справа — «Отправить» */
.unsent{position:sticky;top:8px;z-index:6;display:flex;align-items:stretch;margin:12px 16px 0;min-height:56px;border-radius:12px;
  background:var(--alarm-fill);color:var(--alarm-ink);font-size:16px;line-height:22px;font-weight:600;overflow:hidden}
.unsent.ok{background:var(--done-fill);color:var(--done-ink)}
.unsent button{border:0;background:none;color:inherit;font:inherit;cursor:pointer;display:flex;align-items:center;gap:10px}
.unsent .u-main{flex:1;padding:0 8px 0 16px;text-align:left;min-height:56px}
.unsent .u-send{flex:none;min-width:48px;padding:0 16px;text-decoration:underline;text-underline-offset:3px}
.unsent svg{width:20px;height:20px;flex:none}
.unsent span.u-main{display:flex;align-items:center;gap:10px}

/* скелет: статичный (§9.6.16); пульс — только без reduced motion */
.skel{display:block;height:16px;border-radius:4px;background:var(--surface-2)}
.skel.s12{height:12px;margin-top:8px}
.skel.s24{height:24px;margin-top:10px}
.skel-pulse .skel,.skel-pulse .ph.skelph{animation:pulse 1.2s ease-in-out infinite alternate}
@keyframes pulse{to{opacity:.55}}
.spin{display:inline-block;width:20px;height:20px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;
  animation:spin 800ms linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.bar4{height:4px;background:var(--surface-2);border-radius:2px;margin-top:8px;overflow:hidden}
.bar4 i{display:block;height:100%;background:var(--done-mark);transition:width var(--dur-state)}
.bar4.run i{width:40%;animation:run 1.2s var(--ease) infinite}
@keyframes run{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;padding:32px 16px;text-align:center;gap:16px}
.center .bar4{width:220px}

/* выбор (переключатель «Мой · Замещаю») */
.opts{display:grid;gap:12px}
.opts.c2{grid-template-columns:1fr 1fr}
.opts.c3{grid-template-columns:1fr 1fr 1fr;gap:8px}
.opts.c3 .opt{padding:8px 6px}

/* SM-11 «Соседи»: таблица блока — объект · на чел-день · всего · дней с данными. Строки 64 px, порядок сервера;
   своя строка — только весом 600 (цвета и рамки нет), числа — по правому краю, табличные цифры */
.nb-t{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nb-r{display:grid;grid-template-columns:minmax(0,1fr) 72px 72px 68px;gap:8px;align-items:center;min-height:64px;padding:10px 16px;
  border-bottom:1px solid var(--line);font-size:18px;line-height:22px}
.nb-r:last-child{border-bottom:0}
.nb-r .nb-s{min-width:0;overflow-wrap:anywhere}
.nb-r .n{text-align:right;font-variant-numeric:tabular-nums}
.nb-r.hd{min-height:48px;font-size:16px;line-height:20px;font-weight:600;color:var(--text-2)}
.nb-r.me{font-weight:600}
.nb-r.wait{color:var(--text-2)}
.nb-r .nb-s .meta{margin-top:2px;font-weight:400}
.opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:100%;min-height:56px;padding:8px 12px;border-radius:12px;
  border:2px solid var(--line-strong);background:var(--surface);color:var(--text);font:600 18px/22px var(--font);cursor:pointer;text-align:center}
.opt[aria-pressed='true']{border-color:var(--action);background:var(--action-soft);color:var(--action-soft-ink)}
.opt .meta{color:inherit}

/* фото «как пропуск» */
.ph{display:flex;align-items:center;justify-content:center;flex:none;width:64px;height:64px;border-radius:12px;overflow:hidden;
  background:var(--face-bg);color:var(--face-ink);border:0;padding:0}
.ph img,.ph svg{display:block;width:100%;height:100%;object-fit:cover}
.ph.ini{background:var(--surface-2);color:var(--text);font-weight:600;font-size:20px}
.ph.skelph{background:var(--surface-2)}
.ph.s120{width:120px;height:120px}
.ph.s48{width:48px;height:48px;font-size:18px}
button.ph{cursor:pointer}
.photo-full{display:block;margin-top:16px;width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--face-bg);color:var(--face-ink)}
.photo-full img,.photo-full svg{display:block;width:100%;height:100%;object-fit:cover}

/* перекличка (SM-02) */
.cnt{position:sticky;top:0;z-index:5;background:var(--bg);padding:12px 16px;border-bottom:1px solid var(--line)}
.person{position:relative;flex-wrap:wrap;min-height:88px}
.person.m-yes::before,.person.m-no::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px}
.person.m-yes::before{background:var(--done-mark)}
.person.m-no::before{background:var(--closed-mark)}
.who{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.wn{display:block;min-width:0;flex:1;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left}
button.wn{cursor:pointer;min-height:64px}
.wn b{display:block;font-weight:600;overflow-wrap:anywhere}
.wn .meta{overflow-wrap:anywhere}
.pks{display:flex;gap:12px;flex:none}
.pk{width:76px;min-height:64px;flex:none;border-radius:12px;border:2px solid var(--text-2);background:var(--surface);color:var(--text);
  font:600 18px/20px var(--font);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;gap:2px;
  transition:background-color var(--dur-state)}
.pk span{display:flex;align-items:center;gap:4px;font-size:16px;line-height:20px}
.pk span svg{width:16px;height:16px}
.pk small{font-size:16px;font-weight:600;line-height:20px;font-variant-numeric:tabular-nums}
.pk[aria-pressed='true'].yes{background:var(--done-ink);color:var(--surface);border-color:var(--done-ink)}
.pk[aria-pressed='true'].no{background:var(--closed-ink);color:var(--surface);border-color:var(--closed-ink)}
.pk .wait{color:var(--alarm-fill)}
.pk.ghost{opacity:.4;cursor:default}
.person .exc{flex-basis:100%;padding-left:76px;margin-top:-4px;font-size:16px;line-height:22px;font-weight:600}
.person.off .who{opacity:.62}
.person.off .exc{padding-left:76px;font-weight:400;color:var(--text-2)}
.hl{animation:hl 1.2s var(--ease)}
@keyframes hl{0%,45%{background-color:var(--reason-fill)}}
/* 360 px: фото 48, кнопки 68 — имя не сжимается в ноль (как в макете при ширине 360) */
@media (max-width:374px){
  .person .ph{width:48px;height:48px}
  .person .who{gap:8px}
  .pk{width:68px}
  .person .exc{padding-left:56px}
}

/* поля ввода (SM-03): 64 px, крупный шрифт — в перчатке и на солнце; ошибка — под полем словами */
.fld{padding:16px 16px 0}
.flabel{display:block;margin-bottom:8px;font-size:16px;line-height:22px;font-weight:600;color:var(--text-2)}
.inp{display:block;width:100%;min-height:64px;padding:0 16px;border-radius:12px;border:2px solid var(--line-strong);
  background:var(--surface);color:var(--text);font:600 20px/26px var(--font)}
.inp:focus{outline:none;border-color:var(--action)}
.inp.err{border-color:var(--alarm-mark)}
.ferr{display:none;margin-top:8px;font-size:16px;line-height:22px;font-weight:600;color:var(--alarm-ink)}
.ferr.on{display:block}
.fld .opts{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.fld .plate{margin-top:0}
.fld .b-txt{justify-content:flex-start;padding-left:0;width:auto}
.p3-photo{display:flex;gap:16px;align-items:flex-start}
.p3-photo .grow{flex:1;min-width:0}

/* карточка человека (SM-04): фото 120, имя 20/600, статусы — серые строки 16/600 */
.p4-head{display:flex;gap:16px;align-items:center}
.p4-head .grow{flex:1;min-width:0}
.h20{font-size:20px;line-height:26px;font-weight:600;overflow-wrap:anywhere}
.st16{font-size:16px;line-height:22px;font-weight:600;color:var(--text-2)}
.st16 .wait svg{width:16px;height:16px;vertical-align:-2px;color:var(--alarm-mark)}
.stack8>*+*{margin-top:8px}
.mt8{margin-top:8px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(40px,1fr));gap:6px;margin-top:8px}
.cal-d{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;padding:2px 0;border-radius:8px;
  border:1.5px solid transparent;background:var(--surface);color:var(--text);font:600 16px/18px var(--font)}
.cal-n{font-size:16px;line-height:18px;font-weight:400;color:inherit}
.cal-d.c-here{background:var(--done-fill);color:var(--done-ink)}
.cal-d.c-absent{background:var(--closed-fill);color:var(--closed-ink)}
.cal-d.c-none{border-style:dashed;border-color:var(--line-strong);color:var(--text-2)}
.cal-d.c-off{background:var(--surface-2);color:var(--text-2)}
.person .exc .exc-btn{display:inline-flex;width:auto;min-height:48px;padding:0 0 0 12px;vertical-align:middle}

/* камера SM-14: лист на весь экран, кадр на чёрном, затвор 72 px с кольцом */
.layer.cam-layer .bd{background:var(--cam-bg)}
.sheet.cam{top:0;max-height:none;display:flex;flex-direction:column;padding:0;border:0;border-radius:0;box-shadow:none;
  background:var(--cam-bg);color:var(--cam-ink);overflow:hidden;animation:none}
.cam-hint{flex:none;display:flex;align-items:center;min-height:56px;padding:8px 16px;
  padding-top:calc(8px + var(--tg-content-safe-area-inset-top,0px));background:var(--cam-bar);font-size:18px;line-height:24px;font-weight:600}
.cam-view{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--cam-bg)}
.cam-view video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cam-frame{position:absolute;pointer-events:none;border:3px solid var(--cam-frame)}
.cam-frame.f-oval{left:50%;top:50%;width:62%;max-width:300px;aspect-ratio:3/4;transform:translate(-50%,-50%);border-radius:50%}
.cam-frame.f-rect{left:10%;right:10%;top:50%;height:24%;transform:translateY(-50%);border-radius:12px}
.cam-frame.f-sheet{left:12%;right:12%;top:8%;bottom:8%;border-radius:8px}
.cam-frame.f-crew{left:6%;right:6%;top:10%;bottom:10%;border-radius:12px;border-style:dashed}
.cam-frame.f-front{left:0;right:0;top:56%;height:0;border-width:3px 0 0;border-style:dashed}
.cam-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;pointer-events:none}
.cam-msg:empty{display:none}
.cam-text{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;font-size:18px;line-height:24px;font-weight:600}
.cam-bar{flex:none;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));background:var(--cam-bar)}
.cam-row{display:grid;grid-template-columns:1fr 72px 1fr;align-items:center;gap:12px}
.cam-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cam-col>*+*{margin-top:12px}
.cam-shutter{width:72px;height:72px;padding:4px;border-radius:50%;border:4px solid var(--cam-ink);background:var(--cam-ink);
  background-clip:content-box;cursor:pointer}
.cam-shutter:active{transform:scale(.94)}
.sheet.cam .b-out{color:var(--cam-ink);border-color:var(--cam-ink)}
.sheet.cam .b-txt{color:var(--cam-ink)}
.sheet.cam .cam-later{justify-self:start;width:auto;padding:0 8px}

/* нижний лист (§9.6.6): один механизм, без свайпа; закрытие — «Отмена», BackButton, подложка */
.layer{position:absolute;inset:0;z-index:40}
.layer .bd{position:absolute;inset:0;background:var(--backdrop)}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:85%;overflow:auto;background:var(--surface);border-radius:20px 20px 0 0;
  box-shadow:var(--shadow-sheet);border-top:1px solid var(--line);
  padding:22px 16px calc(28px + env(safe-area-inset-bottom,0px));animation:up var(--dur-sheet) var(--ease)}
@keyframes up{from{transform:translateY(32px);opacity:.5}}
.sheet .h{font-size:20px;line-height:26px;font-weight:600}
.sheet .sub{margin-top:6px;font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--text-2)}
.sheet .foot{display:flex;gap:12px;margin-top:18px}
.sheet .foot .b{flex:1;width:auto}
.sheet.guard{pointer-events:none}
.sheet .lst{margin-top:16px}

/* тост «Отменить» (§9.6.8): один за раз, полоса 2 px убывает 5 с */
.toast{position:absolute;left:16px;right:16px;bottom:120px;min-height:56px;border-radius:12px;background:var(--toast-bg);color:var(--toast-ink);
  display:flex;align-items:center;padding:4px 0 4px 16px;box-shadow:var(--shadow-toast);z-index:50;opacity:0;transform:translateY(8px);
  pointer-events:none;transition:opacity var(--dur-toast) var(--ease),transform var(--dur-toast) var(--ease);overflow:hidden}
.toast.on{opacity:1;transform:none;pointer-events:auto}
.toast.top{top:16px;bottom:auto}
.toast .tx{flex:1;font-size:16px;line-height:20px;padding:6px 0}
.toast button{flex:none;min-width:48px;min-height:56px;padding:0 16px;background:none;border:0;color:var(--toast-action);font:600 16px var(--font);cursor:pointer}
.toast .bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--toast-action);transform-origin:left}
.toast.on .bar{animation:shrink 5s linear forwards}
.toast .sec5{display:none;font-size:16px;color:var(--toast-action);padding-right:8px}
@keyframes shrink{to{transform:scaleX(0)}}

/* ───────── Штаб (шеф): CH-01 «Решить», CH-14 «Доступы», нижняя панель (design-spec §3.2, §9.6 п.12, §10) ───────── */
/* нижняя панель 56 px из 5 вкладок; активная — цвет действия и полоса сверху */
.dock.tabs-dock{padding:0 0 max(env(safe-area-inset-bottom,0px),calc(var(--tg-safe-area-inset-bottom,0px) + var(--tg-content-safe-area-inset-bottom,0px)));
  background:var(--surface)}
.tabs{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));min-height:56px}
.tab-w{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tab-n{flex:none;font-variant-numeric:tabular-nums}
.tab{display:flex;align-items:center;justify-content:center;min-height:56px;padding:0 2px;border:0;border-top:3px solid transparent;
  background:none;color:var(--text-2);font:600 var(--fs-meta)/18px var(--font);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab.on{color:var(--action);border-top-color:var(--action)}
/* лента — одна колонка; на широком окне не растягивается во всю ширину */
.col{max-width:640px}
.col.refreshing{opacity:.6}
/* карточка решения: отступ 16, r12, рамка 1 px, без тени; кнопки 48, контурные, до трёх в ряд */
.dc{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;margin:0 16px 12px}
.dc .s1{font-weight:600}
.dc .s2{margin-top:2px}
.dc .s3{margin-top:6px;font-size:var(--fs-title);line-height:var(--lh-title);font-weight:600;font-variant-numeric:tabular-nums}
.dc .wit,.dc-err .wit{margin-top:8px;font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:var(--fw-meta);color:var(--text-2);font-variant-numeric:tabular-nums}
.dc .manual{margin-top:10px;font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:600;color:var(--text-2)}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.acts .b{flex:1 1 calc(33% - 8px);width:auto;min-width:0;padding:4px 12px}
.acts .b.waiting{flex-direction:row}
.dc-err{margin-top:12px}
.dc-err .plate{font-size:var(--fs-body);line-height:var(--lh-body)}
.grp-lines{margin:8px 0 0;padding-left:20px}
.grp-lines li+li{margin-top:2px}
.grp{margin:0 0 4px}
.grp-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px 8px}
.grp-h .b{flex:none;padding:0 12px}
.grp-h .s1{flex:1 1 auto;min-width:0;font-weight:600}
.blk{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:24px 16px 10px}
.blk.blk2{flex-direction:column;align-items:flex-start;gap:2px}
.pill-sum{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.blk + .note16{padding-top:0;padding-bottom:12px}
.skel-card{height:160px;margin:0 16px 12px;border-radius:12px;background:var(--surface-2)}
.skel-row{height:96px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.skel-pulse .skel-card,.skel-pulse .skel-row{animation:pulse 1.2s ease-in-out infinite alternate}
@media (prefers-reduced-motion: reduce){ .skel-pulse .skel-card,.skel-pulse .skel-row{animation:none} }
/* необратимое (отзыв доступа): контурная кнопка цветом «не принято», не залитая */
.b-out.danger{color:var(--alarm-ink);border-color:var(--alarm-mark)}
/* CH-14: строка человека — имя, роль и участки, устройства, «Отозвать доступ» */
.urow{padding:14px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.urow:last-child{border-bottom:0}
.urow .meta{margin-top:2px;overflow-wrap:anywhere}
.urow.dim .u-name{color:var(--text-2)}
.u-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.u-name{font-weight:600;min-width:0;overflow-wrap:anywhere}
.urow .acts .b{flex:0 1 auto}
/* широкое окно (Telegram Desktop, планшет ≥ 720 px): панель вкладок — левая колонка-меню 200 px (§10) */
@media (min-width:720px){
  html[data-role='hq'] .screen{flex-direction:row}
  html[data-role='hq'] .dock.tabs-dock{order:-1;width:200px;flex:none;padding:12px 0;border-top:0;border-right:1px solid var(--line)}
  html[data-role='hq'] .tabs{display:flex;flex-direction:column;min-height:0}
  html[data-role='hq'] .tab{justify-content:flex-start;min-height:48px;padding:0 16px;border-top:0;border-left:3px solid transparent;font-size:var(--fs-body)}
  html[data-role='hq'] .tab.on{border-left-color:var(--action);background:var(--action-soft);color:var(--action-soft-ink)}
  html[data-role='hq'] .toast:not(.top){bottom:24px!important;left:216px}
}

/* заглушка экрана «в работе» */
.stub{padding:32px 16px;display:flex;flex-direction:column;gap:12px}

@media (prefers-reduced-motion: reduce){
  .toast.on .bar{animation:none;opacity:0}
  .toast .sec5{display:inline}
  .sheet{animation:none}
  .spin{animation:none;border-right-color:currentColor;opacity:.5}
  .bar4.run i{animation:none;width:60%}
  .skel-pulse .skel,.skel-pulse .ph.skelph{animation:none}
  .hl{animation:none;outline:3px solid var(--action);outline-offset:-3px}
  .b:active{transform:none}
  .cam-shutter:active{transform:none}
}

/* ───────── Техника: SM-05 аренда, SM-06 своя, SM-07 лист причины (design-spec SM-05…07, макет) ───────── */
.mt16{margin-top:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.mcard{margin:12px 16px 0}
.mtop{display:flex;justify-content:space-between;align-items:flex-start;gap:8px 12px;flex-wrap:wrap}
.mtop .grow{min-width:140px;flex:1 1 140px}
.timer{font-size:var(--fs-timer);line-height:var(--lh-timer);font-weight:700;font-variant-numeric:tabular-nums;margin-top:14px;letter-spacing:-.01em}
.timer.small{font-size:22px;line-height:28px}
.stripwrap{margin-top:16px}
.stripwrap svg{display:block;width:100%;height:auto}
.ticks{display:flex;justify-content:space-between;margin-top:4px;font-size:16px;line-height:20px;font-weight:500;color:var(--text-2);font-variant-numeric:tabular-nums}
svg .c-now{fill:var(--chart-now)}
svg .c-band{fill:var(--chart-band)}
svg .hatch-ln{stroke:var(--chart-ghost);stroke-width:1.5}
svg .lunch{fill:var(--surface-2)}
svg .told{fill:none;stroke:var(--chart-now);stroke-width:1.5}
svg .strip-bg{fill:none;stroke:var(--line);stroke-width:1}
svg .tx-on{fill:var(--text);font-family:var(--font);font-size:16px;font-weight:500}
svg .nowln{stroke:var(--text);stroke-width:2}
.sumline{padding:12px 16px 0;font-size:16px;line-height:22px;color:var(--text-2)}
.evt{width:56px;flex:none}
.rw .rowact{flex:none;width:auto;min-height:56px;padding:0 4px}
.dock .sep24{height:12px}
.b.locked{cursor:default}
.b-ton.locked{background:var(--done-fill);color:var(--done-ink)}
.b-txt.left{justify-content:flex-start;padding-left:0;width:auto}
.b .bcol{display:flex;flex-direction:column;align-items:center}
.b .bsm{display:block;font-size:16px;line-height:20px;font-weight:400;color:var(--text-2)}
/* лист причины: сетка 2 колонки, кнопки 64 px со значком и словом; первые 0,5 с — приглушён */
.rsn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.rb{display:flex;align-items:center;gap:10px;min-height:64px;padding:8px 14px;border-radius:12px;border:2px solid var(--line-strong);
  background:var(--surface);color:var(--text);font:600 18px/22px var(--font);cursor:pointer;text-align:left;overflow-wrap:anywhere;min-width:0}
.rb svg{width:24px;height:24px;flex:none}
.rb.first{border-color:var(--action)}
.rb:active{background:var(--surface-2)}
.sheet .rsn,.sheet .opts{transition:opacity 150ms}
.sheet.guard .rsn,.sheet.guard .opts{opacity:.55}
.opt.h64{min-height:64px}
.opt.left{align-items:flex-start;text-align:left}
.opt:disabled{cursor:default;color:var(--text-2);border-color:var(--line)}
/* «Забыли нажать»: точное время 40/700 между кнопками 64×64 */
.exact{display:grid;grid-template-columns:64px 1fr 64px;align-items:center;gap:12px}
.n40{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.b.sq64{width:64px;min-height:64px;padding:0;font-size:16px}
/* SM-06: фото счётчика на всю ширину 120 px, поле показания 40/700 */
.mphoto{margin-top:4px;height:120px;border-radius:12px;overflow:hidden;background:var(--surface-2)}
.mphoto img{display:block;width:100%;height:100%;object-fit:cover}
.inp.big{min-height:76px;font-size:var(--fs-display);line-height:var(--lh-display);font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.hint{margin-top:8px;font-size:16px;line-height:22px;color:var(--text-2)}
.hint.err{color:var(--alarm-ink);font-weight:600}
@media (max-width:374px){ .evt{width:52px} .rb{padding:8px 10px;gap:8px} }
@media (prefers-reduced-motion: reduce){ .sheet .rsn,.sheet .opts{transition:none} }
/* режим тестировщика (только учебный сервер): «ТЕСТ Смотрю как … | Замечание» */
.tb-tag{flex:none;padding:2px 6px;border-radius:6px;background:var(--action);color:var(--action-ink);font-size:16px;line-height:20px;letter-spacing:.04em}
.tbar{flex:none;display:flex;gap:8px;align-items:stretch;padding:6px 8px;background:var(--action-soft);color:var(--action-soft-ink);border-bottom:1px solid var(--line)}
.tbar button{border:0;background:transparent;color:inherit;font:600 16px/20px var(--font);min-height:44px;border-radius:10px;cursor:pointer}
.tb-who{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:0 8px;text-align:left}
.tb-who .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbar .tb-note{flex:none;padding:0 12px;background:var(--surface);color:var(--text)}
.tb-sub{display:block;font-weight:400;font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--text-2)}
.tb-warn{color:var(--alarm-ink)}
textarea.tb-text{min-height:132px;padding:12px 16px;font-weight:400;font-size:18px;line-height:24px;resize:vertical}

/* CH-03 «Цифры» (design-spec §7.2, §7.8): липкие период и навигатор, одна крупная цифра, KPI строками 56 px */
.num-sticky{position:sticky;top:0;z-index:2;background:var(--bg);padding:8px 16px 4px}
.num-seg{display:flex;gap:4px;padding:2px;border-radius:12px;background:var(--surface-2)}
.num-seg button{flex:1 1 0;min-width:0;min-height:44px;padding:0 4px;border:0;border-radius:9px;background:transparent;color:var(--text);
  font:inherit;font-size:16px;line-height:20px;font-weight:500}
.num-seg button.on{background:var(--surface);font-weight:700}
.num-nav{display:flex;align-items:center;gap:8px;min-height:44px;margin-top:6px}
.num-arrow{flex:none;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--action);font:inherit;font-size:28px;line-height:1}
.num-arrow:disabled{color:var(--closed-mark);opacity:.45}
.num-range{flex:1;min-width:0;text-align:center;font-size:18px;line-height:24px;font-variant-numeric:tabular-nums}
.num-head{padding:0 16px 10px}
.num-row{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px;margin-bottom:4px}
.num-site{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;min-height:44px;padding:0 14px;border:1px solid var(--line-strong);
  border-radius:22px;background:var(--surface);color:var(--text);font:inherit;font-size:16px;line-height:20px}
.num-site-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.num-main{padding:16px;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.num-k{display:block;font-size:16px;line-height:22px;font-weight:500}
.num-v{display:block;margin:2px 0 4px;font-size:40px;line-height:44px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.num-ink{color:var(--text)}
.num-kpis{margin-top:8px;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.num-kpi{min-height:56px;padding:10px 16px;border-top:1px solid var(--line)}
.num-kpis > .num-kpi:first-child,.num-kpis > .num-grp:first-child > .num-kpi:first-child{border-top:0}
.num-kpi.in{min-height:48px;padding-left:28px;border-top-style:dashed}
.num-k1{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.num-kt{flex:1;min-width:0;font-size:16px;line-height:22px;font-weight:500}
.num-kv{flex:none;font-size:18px;line-height:24px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.num-k2{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:0 12px}
.num-kd{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums}
.num-few{padding-top:12px;padding-bottom:4px}
.num-fewh{margin:0 0 4px;font-size:16px;line-height:22px;font-weight:500}
.num-sec{margin-top:8px;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.num-sec-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;width:100%;min-height:48px;padding:12px 16px;border:0;background:transparent;
  color:var(--text);font:inherit;font-size:18px;line-height:24px;text-align:left}
.num-chev{display:inline-block;width:12px;color:var(--text-2);transition:transform var(--dur-state) var(--ease)}
.num-chev.on{transform:rotate(90deg)}
.num-fold{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;min-height:48px;padding:12px 16px 12px 36px;
  background:var(--surface);border-bottom:1px solid var(--line);font-size:18px;line-height:24px}
.num-sec + .num-fold{margin-top:8px;border-top:1px solid var(--line)}
.num-fold .meta{font-variant-numeric:tabular-nums}
.num-bars{padding:0 16px 12px}
.num-bar{padding:8px 0}
.num-bar-t{display:flex;align-items:baseline;gap:8px}
.num-bar-t > span:first-child{flex:1;min-width:0}
.num-bar-t b{white-space:nowrap;font-variant-numeric:tabular-nums}
.num-track{margin-top:6px}
.num-track i{display:block;border-radius:2px}
.num-track .now{height:12px;background:var(--chart-now)}
.num-track .was{height:4px;margin-top:2px;background:var(--chart-ghost)}
.num-rent{padding:0 16px 8px}
.num-m{padding:10px 0;border-top:1px solid var(--line)}
.num-m:first-child{border-top:0;padding-top:0}
.num-m-t{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.num-m-t .meta{font-variant-numeric:tabular-nums}
.num-more{display:block;width:100%;min-height:44px;padding:0;border:0;background:transparent;color:var(--action);font:inherit;font-size:16px;text-align:left}
.num-tblw{overflow-x:auto;padding:0 16px 12px}
.num-tbl{width:100%;border-collapse:collapse;font-size:16px;line-height:22px;font-variant-numeric:tabular-nums}
.num-tbl th,.num-tbl td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.num-tbl th:first-child{padding-left:0;text-align:left}
.num-tbl thead th{vertical-align:bottom;white-space:normal;font-weight:500;color:var(--text-2)}
.num-tbl thead th .meta{display:block}
.num-tbl tbody th{font-weight:400}
.num-tbl tfoot th,.num-tbl tfoot td{border-bottom:0;font-weight:700}
.num-tbl .c-missing{color:var(--text-2);background:var(--bg)}
.num-tbl .c-off{color:var(--reason-ink);background:var(--reason-fill)}
.num-tbl .c-weekend,.num-tbl .c-none{color:var(--text-2)}
.num-tbl .c-pending{color:var(--reason-ink)}
.num-cmp tbody th{max-width:160px;white-space:normal}
/* §10: ≤ 430 px — «Участок · Потрачено» и один столбец на выбор; шире переключатель не нужен */
.num-pick{margin:0 16px 8px}
@media (min-width:431px){ .num-pick{display:none} }
@media (max-width:430px){
  .num-cmp[data-col="done"] .c-idle,.num-cmp[data-col="done"] .c-price,
  .num-cmp[data-col="price"] .c-idle,.num-cmp[data-col="price"] .c-done,
  .num-cmp[data-col="idle"] .c-done,.num-cmp[data-col="idle"] .c-price{display:none}
}
.num-sort{display:inline-flex;align-items:flex-end;min-height:44px;padding:0;border:0;background:transparent;color:var(--action);
  font:inherit;font-weight:500;text-align:right}
.num-rest th,.num-rest td{color:var(--text-2)}
.num-opt{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;width:100%;min-height:56px;padding:12px 16px;border:0;
  border-bottom:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;font-size:18px;line-height:24px;text-align:left}
.num-opt:last-child{border-bottom:0}
.num-opt.on{font-weight:700}
.num-dates{display:flex;gap:12px;margin-top:12px}
.num-dates label{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.num-dates .inp{min-height:56px;font-size:18px}
.num-cerr:not(:empty){margin-top:12px}
.skel-row.num-skel{height:56px}