/* © 2026 Александр Грибин. Все права защищены. Ознакомление с кодом не даёт права
   использования. Использование, копирование, изменение и развёртывание — только по
   отдельному письменному соглашению с правообладателем. См. LICENSE в корне репозитория. */
/* ══════════════════════════════════════════════════════════════════════════
   Осмотр-оценщик ИФЛ — оболочка приложения.
   Фирменные цвета Ингосстраха (гайдбук): синий #0062D2, акцент-оранжевый #FF7C22.
   Всё оформление держится на токенах ниже: шкала текста (5 ролей), шкала радиусов,
   тональные поверхности + мягкая тень вместо жёсткой рамки, единая моторика.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* бренд */
  --ing:#0062D2; --ing2:#0050b0; --ing-soft:#e9f2fc; --ing-press:#004796;
  --accent:#FF7C22;
  /* CTA: тёмный текст на оранжевом — контраст 8:1 (белый на #FF7C22 даёт 2,6:1 и не проходит AA) */
  --cta:#FF7C22; --cta2:#f26a0c; --cta-fg:#2a1200;
  /* поверхности: три тона вместо одного белого + рамка */
  --bg:#eef1f7; --card:#fff; --card2:#f5f8fd; --card3:#e9eef7;
  --text:#12151c; --muted:#5b6577; --line:#e2e7f1; --line2:#cfd7e6;
  --ghost:#e8f0fb; --acc:#e9f2fc;
  /* семантика состояний */
  --ok:#0a7d38; --ok-bg:#e7f6ec; --ok-line:#bfe6cd; --ok-fg:#08652d;
  --warn:#b26a00; --warn-bg:#fff6e5; --warn-line:#ffdfa4; --warn-fg:#7a4d00;
  --err:#c62828; --err-bg:#fdecea; --err-line:#f3b8b0; --err-fg:#a91d1d;
  /* шкала текста: 5 ролей */
  --t-display:22px; --t-title:17px; --t-body:15px; --t-label:13px; --t-cap:11.5px;
  /* радиусы: 8 / 12 / 16 / круг */
  --r1:8px; --r2:12px; --r3:16px; --rf:999px;
  /* глубина */
  --e1:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.05);
  --e2:0 2px 6px -1px rgba(16,24,40,.08), 0 6px 16px -6px rgba(16,24,40,.10);
  --e3:0 10px 34px -8px rgba(16,24,40,.22);
  --e-up:0 -2px 10px -2px rgba(16,24,40,.10);
  /* моторика */
  --ez:cubic-bezier(.2,0,0,1); --ez-out:cubic-bezier(0,0,0,1); --ez-in:cubic-bezier(.3,0,.8,.15);
  --d1:90ms; --d2:160ms; --d3:220ms;
  --maxw:640px; --tabh:66px;
}
@media(min-width:768px){:root{--maxw:900px}}
body.dark{
  /* нативные флажки и скроллбары рисует браузер — без этого они остаются белыми на тёмном фоне */
  color-scheme:dark;
  --ing:#4d95ff; --ing2:#8ab8ff; --ing-soft:#13294a; --ing-press:#2f78e0;
  --accent:#ff8c3f; --cta:#ff8c3f; --cta2:#ff7a22; --cta-fg:#25120a;
  --bg:#0d1220; --card:#161e30; --card2:#1b2438; --card3:#212c44;
  --text:#e6ebf5; --muted:#96a4c0; --line:#28324b; --line2:#36435f;
  --ghost:#1b2740; --acc:#142442;
  --ok:#4ade80; --ok-bg:#13301f; --ok-line:#1e4a2f; --ok-fg:#6fe4a2;
  --warn:#e3b341; --warn-bg:#2b2413; --warn-line:#4a3d18; --warn-fg:#e8c46b;
  --err:#ff6b60; --err-bg:#331917; --err-line:#5a2724; --err-fg:#ff9d94;
  --e1:0 1px 2px rgba(0,0,0,.4); --e2:0 4px 14px -4px rgba(0,0,0,.55);
  --e3:0 12px 36px -10px rgba(0,0,0,.7); --e-up:0 -2px 12px -2px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{overflow-x:hidden;max-width:100%;touch-action:pan-y}
body{margin:0;font:var(--t-body)/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;
  font-feature-settings:"cv05" 1;color-scheme:light;}

/* ── Иконки: единый инлайновый спрайт, 24-я сетка, толщина линии одна на всё приложение ── */
.ic{width:20px;height:20px;flex:none;display:inline-block;vertical-align:-4px;
  fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic-16{width:16px;height:16px;vertical-align:-3px}
.ic-18{width:18px;height:18px}
.ic-22{width:22px;height:22px}
.ic-28{width:28px;height:28px;stroke-width:1.5}
.ic-40{width:40px;height:40px;stroke-width:1.25}

/* ── Шапка ── */
header{background:linear-gradient(135deg,#0a6fe0 0%,var(--ing2) 100%);color:#fff;padding:11px 14px;
  position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:11px;box-shadow:var(--e2)}
body.dark header{background:linear-gradient(135deg,#16233c 0%,#101a2e 100%);border-bottom:1px solid var(--line)}
header .logo{height:30px;width:30px;border-radius:var(--r1);flex:none}
header .ttl{min-width:0;font-size:var(--t-title);font-weight:700;line-height:1.15;letter-spacing:-.01em}
header .ttl small{display:block;font-size:var(--t-cap);font-weight:500;opacity:.82;letter-spacing:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
header .net{margin-left:auto;font-size:var(--t-cap);font-weight:600;padding:4px 10px;border-radius:var(--rf);
  white-space:nowrap;background:rgba(255,255,255,.16)}
header .net.on{background:rgba(31,168,86,.55);color:#eafff2}
header .net.off{background:rgba(198,40,40,.55);color:#ffecec}

/* ── Каркас ── */
main{max-width:var(--maxw);margin:0 auto;padding:12px 14px calc(var(--tabh) + 28px);
  touch-action:pan-y;transform-origin:0 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);padding:15px;margin:11px 0;
  box-shadow:var(--e1);scroll-margin-top:60px}
.card h2{margin:0 0 11px;font-size:var(--t-title);font-weight:650;color:var(--text);
  letter-spacing:-.01em;line-height:1.25;display:flex;align-items:center;gap:9px}
.card h2 .ic{color:var(--ing)}
.card h2 .ic.ic-err{color:var(--err)}
/* пилюля-счётчик у заголовка карточки (сколько осмотров просрочено) */
.card h2 .cnt{margin-left:auto;background:var(--err-bg);color:var(--err);font-size:12.5px;
  font-weight:800;line-height:1;padding:4px 9px;border-radius:999px}
/* информационный вариант пилюли (не про просрочку/ошибку — сколько осмотров сегодня/дальше) */
.card h2 .cnt.cnt-ing{background:var(--ing-soft);color:var(--ing)}
label{display:block;font-size:var(--t-label);color:var(--muted);margin:9px 0 4px;font-weight:500}
label .req{color:var(--accent);font-weight:700}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--line2);border-radius:var(--r2);
  font-size:16px;background:var(--card);color:var(--text);font-family:inherit;
  transition:border-color var(--d2) var(--ez),box-shadow var(--d2) var(--ez)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ing);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ing) 18%,transparent)}
button.rec{background:var(--err)}
.row{display:flex;gap:10px;align-items:flex-end}
.row>div{flex:1;min-width:0;overflow:hidden}
.row.top{align-items:flex-start}
.floor{border:1px dashed var(--line2);border-radius:var(--r2);padding:9px;margin:9px 0}
.floor b{font-size:var(--t-cap);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.seg{display:flex;gap:0;border:1px solid var(--line2);border-radius:var(--r2);overflow:hidden;background:var(--card)}
.seg button{flex:1;padding:11px;border:0;background:transparent;color:var(--ing);font-weight:600;font-size:var(--t-label);border-radius:0}
.seg button.on{background:var(--ing);color:#fff}
.modehint{font-size:var(--t-cap);color:var(--muted);margin:5px 0 2px}
select#ooMode,select#kvOoMode{border:1.5px solid var(--ing);background:var(--ing-soft);font-weight:600;color:var(--ing2)}
select#ooVariant{border:1.5px solid var(--accent)}
.af{border:1.5px solid var(--accent)!important;background:color-mix(in srgb,var(--accent) 8%,var(--card))}
.chk .qty{width:76px!important;min-height:40px;padding:9px 8px!important;font-size:16px!important;text-align:center}
body.exprbld #wg .qty{display:none!important}
input[type="date"],input[type="datetime-local"]{-webkit-appearance:none;appearance:none;display:block;width:100%;
  min-width:0;max-width:100%;min-height:46px;background:var(--card);color:var(--text)}
.card input+input,.card .row+input,.card .grid2+input,.card input+.row,.card input+.grid2{margin-top:10px}
/* полоса рисуется внутри скругления: border-left давал клин на углах карточки */
.riskcard{position:relative;overflow:hidden}
.riskcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
/* карточка «Просрочены» на «Сегодня» — та же полоса, но в цвете ошибки, не акцента */
.od-card::before{background:var(--err)}

/* автоподбор */
.ta{position:relative}
.ta input{padding-right:34px}
.ta-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);
  pointer-events:none;display:flex}
.ta-list{position:absolute;left:0;right:0;top:100%;z-index:8;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r2);box-shadow:var(--e3);max-height:260px;overflow:auto;-webkit-overflow-scrolling:touch;
  display:none;margin-top:4px}
.ta-item{padding:0 13px;font-size:var(--t-body);cursor:pointer;border-bottom:1px solid var(--line);
  min-height:46px;display:flex;align-items:center}
.ta-item:last-child{border-bottom:0}
.ta-item:active,.ta-item:hover{background:var(--acc)}

#ooDetailed,#kvOoDetailed{background:var(--card2);border:1px solid var(--line);border-left:3px solid var(--ing);
  border-radius:var(--r2);padding:11px 12px;margin-top:10px}
/* Подзаголовок группы: раньше был капс мелко + волосяная линия («не кричит») — на большом блоке
   с несколькими группами подряд (например «Инженерное оборудование»: Санитарно-техническое /
   Отопительное / Иное) границы между ними терялись при беглом скролле. Теперь акцентный цвет +
   метка-маркер слева + линия контрастнее — группа читается сразу, не только при внимательном чтении. */
.dehdr,.subhdr{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ing);
  font-size:var(--t-label);text-transform:uppercase;letter-spacing:.04em;margin:18px 0 8px}
.dehdr::before,.subhdr::before{content:"";flex:none;width:5px;height:5px;border-radius:2px;background:var(--ing)}
.dehdr::after,.subhdr::after{content:"";flex:1;height:1px;background:var(--line2)}
.derow{display:flex;align-items:center;gap:7px;margin:6px 0;padding:7px;background:var(--card2);
  border:1px solid var(--line);border-radius:var(--r2)}
.derow select{flex:1;min-width:0}
.derow input{max-width:96px;text-align:center}
.derow button{flex:none;width:auto;padding:8px 11px;background:var(--ghost);color:var(--muted);min-height:44px}
.deadd{flex:none;width:auto;background:transparent;color:var(--ing);font-size:var(--t-label);font-weight:600;
  padding:4px 2px;margin-top:0;box-shadow:none}
/* Списки отметок: плотно по вертикали, тап-зона держится паддингом, а не отступами */
.checks label{display:flex;align-items:center;gap:10px;color:var(--text);font-size:var(--t-label);
  margin:0;padding:4px 0;min-height:38px;line-height:1.3}
/* флажок не текстовое поле: общий input{padding:11px;border:1px} раздувал его до 24px */
input[type=checkbox],input[type=radio]{flex:none;width:20px;height:20px;min-height:0;padding:0;
  border:0;border-radius:0;accent-color:var(--ing)}
.checks input{width:20px}

/* ── Кнопки ── */
button{flex:1;padding:12px;border:0;border-radius:var(--r2);font-size:var(--t-body);font-weight:650;color:#fff;
  background:var(--ing);min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform var(--d1) var(--ez),background var(--d2) var(--ez),box-shadow var(--d2) var(--ez)}
button:active{transform:scale(.975)}
button.ghost{background:var(--ghost);color:var(--ing)}
/* мягкий акцент: та же визуальная тяжесть, что у .ghost, но с оттенком бренд-цвета —
   для пары «Отмена/Добавить», где обе кнопки равнозначны и сплошная заливка перетягивает внимание */
button.soft{background:var(--ing-soft);color:var(--ing)}
button[disabled],button[aria-disabled="true"]{background:var(--card3);color:var(--muted);box-shadow:none;pointer-events:none}
/* Фирменный оранжевый — главная CTA. Текст тёмный: белый на оранжевом не проходит WCAG AA */
#btnSend,#btnQueue,#reviewSend{background:linear-gradient(180deg,var(--cta) 0%,var(--cta2) 100%);
  color:var(--cta-fg);box-shadow:0 2px 10px -2px color-mix(in srgb,var(--cta) 55%,transparent)}
:focus-visible{outline:2px solid var(--ing);outline-offset:2px;border-radius:var(--r1)}
button:focus-visible,.wtile:focus-visible,.wopt:focus-visible{outline:2px solid var(--ing);outline-offset:2px}

/* ── Плашки-сообщения ── */
.flag{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--r2);padding:10px 11px;
  font-size:var(--t-label);color:var(--warn-fg);margin-top:9px;line-height:1.45}
.flag.block{background:var(--err-bg);border-color:var(--err-line);color:var(--err-fg);font-weight:600}
.note{font-size:var(--t-label);color:var(--muted);margin:5px 0;line-height:1.45}
.saved{font-size:var(--t-label);color:var(--muted);margin-top:7px}

/* ── Фото ── */
.thumb{position:relative;width:78px;height:78px;border-radius:var(--r2);overflow:hidden;border:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb b{position:absolute;top:0;right:0;background:var(--err);color:#fff;width:22px;height:22px;line-height:22px;
  text-align:center;font-size:14px;cursor:pointer;border-bottom-left-radius:var(--r1)}
.thumb i{position:absolute;bottom:0;left:0;background:rgba(0,0,0,.62);color:#fff;font-size:10px;font-style:normal;
  padding:2px 5px;border-top-right-radius:var(--r1)}
.thumb em{position:absolute;top:0;left:0;font-size:11px;font-style:normal;padding:2px 5px;border-bottom-right-radius:var(--r1)}
.thumb em.g{background:var(--ok);color:#fff} .thumb em.ng{background:var(--err);color:#fff}
.shot{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line);font-size:var(--t-body)}
.shot:last-child{border-bottom:0}
.shot .nm{flex:1;min-width:0}
.shot .st{font-size:var(--t-cap);color:var(--ok);font-weight:700}
.shot .ic{color:var(--muted)}
.shot.done{background:var(--ok-bg);border-radius:var(--r2);padding:9px 10px;margin:3px 0;border-bottom:0}
.shot.done .nm{color:var(--ok-fg)} .shot.done .ic{color:var(--ok)}
.shot button{flex:none;width:auto;padding:7px 11px;font-size:var(--t-label);min-height:40px}

/* ── Оверлеи и модалки ── */
.overlay{position:fixed;inset:0;background:var(--bg);z-index:20;overflow-y:auto;display:none}
.overlay.on{display:block;animation:ovin var(--d3) var(--ez-out) both}
@keyframes ovin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ohead{position:sticky;top:0;z-index:2;background:linear-gradient(135deg,#0a6fe0 0%,var(--ing2) 100%);color:#fff;
  padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:var(--e2)}
body.dark .ohead{background:linear-gradient(135deg,#16233c 0%,#101a2e 100%)}
.ohead b{font-size:var(--t-title);flex:1;letter-spacing:-.01em}
.ohead button{width:auto;flex:none;background:rgba(255,255,255,.16);color:#fff}
.modal{position:fixed;inset:0;background:rgba(8,12,20,.55);z-index:30;display:none;align-items:flex-end;
  backdrop-filter:blur(2px)}
.modal.on{display:flex;animation:fade var(--d2) var(--ez-out) both}
.modal.on .box{animation:sheet var(--d3) var(--ez-out) both}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes sheet{from{transform:translateY(24px)}to{transform:none}}
.modal .box{background:var(--card);width:100%;max-width:var(--maxw);margin:0 auto;
  border-radius:var(--r3) var(--r3) 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0));
  max-height:85vh;overflow-y:auto;box-shadow:var(--e3)}
.modal h2,.modal h3{margin:0 0 10px;font-size:var(--t-title);font-weight:650;color:var(--text);letter-spacing:-.01em}
.modal .sum{font-size:var(--t-label);line-height:1.65;margin:6px 0}

/* ── Экран блокировки (Face ID) ── z-index выше модалок (30) и tabbar (12) — замок должен
   перекрывать буквально всё в приложении, пока личность не подтверждена. */
#appLockScreen{display:none;position:fixed;inset:0;z-index:50;background:var(--bg);
  align-items:center;justify-content:center;padding:24px}
html.al-lock #appLockScreen{display:flex}
html.al-lock body>*:not(#appLockScreen){display:none}
.alk-box{max-width:340px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.alk-box h2{margin:0;font-size:var(--t-title);font-weight:650;color:var(--text);letter-spacing:-.01em}
.alk-ic{width:56px;height:56px;color:var(--ing)}
.alk-box button{width:100%}
.alk-box .flag.block{margin:0}

/* ── Карточка записи в списке ── */
.rec{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);padding:13px;margin:10px 0;
  box-shadow:var(--e1)}
.rec .big2{font-size:19px;font-weight:750;color:var(--ing);margin:3px 0;font-variant-numeric:tabular-nums}
.rec .acts{display:flex;gap:8px;margin-top:10px}
.rec .acts button{padding:9px;font-size:var(--t-label);min-height:44px}
/* удаление — не красная плашка в ряду равных, а тихая кнопка, краснеющая при касании */
.rec .acts button.dngr{flex:none;width:44px;padding:0;color:var(--muted)}
.rec .acts button.dngr:active{background:var(--err-bg);color:var(--err)}
/* «Ещё строение к заявке» — вход во второй объект той же заявки. Пунктирная рамка вместо
   заливки: это не действие над листом в одном ряду с «Отправить», а приглашение завести новый. */
.addbld{width:100%;margin-top:8px;background:transparent;color:var(--ing);
  border:1px dashed var(--line2);padding:9px;font-size:var(--t-label);min-height:44px;box-shadow:none}
.addbld:active{background:var(--ghost)}
.formfoot .addbld{margin-top:0}
.det{margin-top:10px;font-size:var(--t-label);display:none}
.det.on{display:block}

/* ── Заявка с несколькими строениями ──
   Методика описывает одним бланком ровно одно строение, поэтому дом+баня+гараж — это
   три карточки. Чтобы список не рассыпался, объекты одной заявки лежат в общей рамке:
   подложка на тон глубже белых карточек, шапка с номерами и адресом сверху.
   Карточка объекта внутри не меняется — только теряет внешние отступы.
   Чистый --card3 почти не отличим от --bg страницы (разница в пару пунктов светлоты) —
   рамка тонет в фоне. Добавлены синий оттенок подложки, тень и акцентная полоса слева
   (тот же приём, что у .riskcard/.od-card), чтобы группа читалась как отдельный контейнер,
   а не как ещё один серый прямоугольник. */
.grp{position:relative;overflow:hidden;background:color-mix(in srgb,var(--ing-soft) 55%,var(--card3));
  border:1px solid var(--line2);border-radius:var(--r3);padding:12px;margin:10px 0;box-shadow:var(--e2)}
.grp::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ing)}
.grp .grpttl{font-size:15px;font-weight:700;line-height:1.3}
.grp .grptot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:10px;
  padding-top:9px;border-top:1px solid var(--line2);font-size:var(--t-label);color:var(--muted)}
.grp .grptot b{font-size:18px;font-weight:750;color:var(--ing);font-variant-numeric:tabular-nums}
.grp .grphint{font-size:var(--t-cap);color:var(--muted);margin-top:3px}
.grp .grpacts{display:flex;gap:8px;margin-top:11px}
.grp .grpacts button{flex:1;padding:9px;font-size:var(--t-label);min-height:44px}
.grp .grpbody{margin-top:4px}
.grp .grpbody .rec{margin:8px 0 0}
.grp .grpbody .rec:first-child{margin-top:8px}
/* Итог по заявке в липкой сводке формы: справочная строка на той же синей плашке,
   отделена пунктиром и приглушена — основной остаётся сумма по текущему объекту */
.sumbar .srow.sgrp{border-top:1px dashed rgba(255,255,255,.28);margin-top:7px;padding-top:6px;opacity:.9}
.sumbar .srow.sgrp .sk b{font-weight:600}

/* ── Полный бланк ── */
.card h2 .n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;
  background:var(--ing);color:#fff;border-radius:var(--r1);font-size:var(--t-cap);font-weight:700;
  font-variant-numeric:tabular-nums}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:520px){.grid2{grid-template-columns:1fr}}
.chk{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:center;font-size:var(--t-label);
  line-height:1.3;color:var(--text);margin:0;padding:4px 0;min-height:38px;cursor:pointer}
.chk input{width:20px;height:20px;flex:none;margin:0}
.kv{font-size:var(--t-label);line-height:1.75;color:var(--text)}
.kv b{color:var(--text);font-weight:650}
.kv .none{color:var(--muted);font-style:normal}
.sw{display:flex;align-items:center;gap:12px;font-size:var(--t-body);color:var(--text);margin:14px 0;cursor:pointer}
.sw span{flex:1}
.sw input{appearance:none;-webkit-appearance:none;flex:none;width:48px;height:28px;margin:0;border-radius:var(--rf);
  background:var(--line2);position:relative;transition:background var(--d2) var(--ez);cursor:pointer}
.sw input:checked{background:var(--ing)}
.sw input::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;transition:transform var(--d3) var(--ez);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sw input:checked::after{transform:translateX(20px)}
.zrow{display:flex;gap:7px;align-items:center;margin:5px 0}
.zrow .zlbl{flex:1;font-size:var(--t-label);color:var(--text)}
.zrow input,.zrow select{flex:1;min-width:0}
.wip{opacity:.6}
.wip::after{content:" — в разработке";font-size:var(--t-cap);color:var(--muted);font-weight:400;text-transform:none}

/* ══════════════════════════════════════════════════════════════════════════
   Многоэкранная оболочка: «Сегодня» / «Осмотры» / лист / «Уведомления» / «Профиль».
   Разделы живут в одном документе и переключаются видимостью — офлайн-модель
   и кэш service worker остаются нетронутыми.
   ══════════════════════════════════════════════════════════════════════════ */
.view{display:none;max-width:var(--maxw);margin:0 auto;padding:14px 14px calc(var(--tabh) + 28px)}
.view.on,main.on{display:block;animation:viewin var(--d3) var(--ez-out) both}
@keyframes viewin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
main{display:none}
/* Итоговая панель с суммой и «Отправить» — только на листе и только когда лист заполнен */
.result{position:fixed;bottom:var(--tabh);left:0;right:0;max-width:var(--maxw);margin:0 auto;
  background:var(--card);border-top:1px solid var(--line);padding:11px 14px 13px;z-index:6;
  box-shadow:var(--e-up);display:none}
.result.on{display:block;animation:resin var(--d3) var(--ez-out) both}
@keyframes resin{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
.result .rw{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:8px}
.result .big{font-size:19px;font-weight:750;color:var(--ing);font-variant-numeric:tabular-nums}
.result small{color:var(--muted);font-size:var(--t-cap)}
body.hasres main{padding-bottom:calc(var(--tabh) + 150px)}
.btns{display:flex;gap:10px}
.btns button{padding:12px;font-size:var(--t-body)}

/* ── Нижняя навигация ── */
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:12;display:flex;align-items:stretch;
  background:var(--card);border-top:1px solid var(--line);height:var(--tabh);box-shadow:var(--e-up);
  padding:0 16px env(safe-area-inset-bottom,0)}
.tabbar button{flex:1;min-width:0;background:none;border:0;padding:5px 2px 6px;color:var(--muted);
  font-size:11px;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border-radius:0;line-height:1.1;min-height:auto;box-shadow:none;position:relative}
.tabbar button:active{transform:none}
/* активная вкладка: пилюля-индикатор под иконкой (M3 navigation bar) */
.tabbar button .ti{display:flex;align-items:center;justify-content:center;width:50px;height:32px;border-radius:var(--rf);
  transition:background var(--d2) var(--ez),color var(--d2) var(--ez)}
.tabbar button .ti .ic{width:27px;height:27px;transition:color 300ms var(--ez)}
.tabbar button.on{color:var(--ing)}
.tabbar button.on .ti{background:var(--ing-soft)}
/* Переключение вкладки: иконка «сплющивается» до ребра и разворачивается обратно с лёгким
   перелётом — тот же приём, что в нижнем меню Т-Банка (флип, а не просто смена цвета).
   Играет один раз при появлении класса .on (запускается заново каждый раз — React тут нет,
   класс реально снимается/ставится), цвет тем временем плавно едет в var(--ing) отдельным
   transition выше, так что смена оттенка приходится примерно на самый «тонкий» момент флипа. */
@keyframes tabIconFlip{
  0%{transform:scaleX(1)}
  40%{transform:scaleX(.12)}
  56%{transform:scaleX(.12)}
  80%{transform:scaleX(1.14)}
  100%{transform:scaleX(1)}
}
.tabbar button.on .ti .ic{animation:tabIconFlip 360ms cubic-bezier(.34,1.56,.64,1)}
@media (prefers-reduced-motion:reduce){
  .tabbar button.on .ti .ic{animation:none}
}
.tabbar button.fab{color:var(--ing)}
.tabbar button.fab .ti{background:linear-gradient(145deg,#1a7bea,var(--ing));color:#fff;width:52px;height:52px;
  border-radius:var(--r3);margin-top:-17px;box-shadow:0 6px 18px -4px color-mix(in srgb,var(--ing) 60%,transparent)}
.tabbar button.fab .ti .ic{width:30px;height:30px;stroke-width:2}
.tabbar button.fab:active .ti{transform:scale(.94);transition:transform var(--d1) var(--ez)}
.tabbar .badge{position:absolute;top:4px;left:calc(50% + 6px);background:var(--accent);color:#2a1200;
  font-size:10px;font-weight:800;min-width:18px;height:18px;line-height:18px;border-radius:var(--rf);padding:0 5px;
  text-align:center;box-shadow:0 0 0 2px var(--card)}

/* ── Заголовок раздела и пустые экраны ── */
.vhead{display:flex;align-items:baseline;gap:9px;margin:2px 0 12px}
.vhead h1{margin:0;font-size:var(--t-display);font-weight:750;letter-spacing:-.02em}
.vhead .sub{font-size:var(--t-label);color:var(--muted)}
.vempty{text-align:center;color:var(--muted);font-size:var(--t-label);padding:34px 18px 30px;line-height:1.6}
.vempty .em{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin:0 auto 14px;
  border-radius:var(--rf);background:var(--card3);color:var(--ing)}
.vempty .em .ic{width:30px;height:30px;stroke-width:1.4}
.vempty b{display:block;color:var(--text);font-size:var(--t-body);font-weight:650;margin-bottom:5px}
/* block-level flex: inline-flex вклинивался в строку описания и рвал её пополам */
.vempty button{display:flex;width:fit-content;flex:none;margin:14px auto 0;padding:10px 18px;font-size:var(--t-label)}

/* ── Скелет загрузки: форма ответа видна раньше данных ── */
.skel{padding:4px 0}
.skel i{display:block;height:64px;border-radius:var(--r3);margin:10px 0;
  background:linear-gradient(90deg,var(--card) 0%,var(--card2) 40%,var(--card) 80%);
  background-size:280% 100%;animation:shim 1.15s linear infinite}
.skel i:nth-child(2){animation-delay:.12s} .skel i:nth-child(3){animation-delay:.24s;opacity:.7}
@keyframes shim{from{background-position:120% 0}to{background-position:-120% 0}}

/* ── Аккордеон листа осмотра: открыт один блок, закрытые несут свой итог ── */
.card.acc{padding:0;overflow:hidden}
.card.acc>h2{margin:0;padding:0 14px;display:flex;align-items:center;gap:10px;cursor:pointer;
  min-height:56px;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background var(--d2) var(--ez)}
/* Название и итог в столбик: в строку длинные названия разделов резались многоточием */
.card.acc>h2 .ahd{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;padding:10px 0}
/* иконка заголовка переезжает внутрь .atxt — отступ задаём явно, gap сюда не достаёт */
.card.acc>h2 .atxt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card.acc>h2 .atxt .ic{margin-right:8px}
.card.acc>h2 .asum{font-size:var(--t-cap);font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card.acc>h2 .asum:empty{display:none}
.card.acc.open>h2{background:var(--card2)}
.card.acc.open>h2 .asum{display:none}
/* Свёрнутая строка: номер + название + итог + одна метка состояния (шеврон убран как дубль) */
.card.acc>h2 .ast{flex:none;width:22px;height:22px;border-radius:50%;background:var(--card3);color:var(--muted);
  display:flex;align-items:center;justify-content:center;text-transform:none;
  transition:background var(--d2) var(--ez),color var(--d2) var(--ez),transform var(--d3) var(--ez)}
.card.acc>h2 .ast .ic{width:14px;height:14px;stroke-width:2.4}
.card.acc.open>h2 .ast{background:var(--ing);color:#fff}
/* шеврон крутится только там, где метка не занята состоянием «готово / не заполнено» */
.card.acc.open:not(.done):not(.todo)>h2 .ast{transform:rotate(180deg)}
.card.acc.done>h2 .ast{background:var(--ok);color:#fff}
.card.acc.todo>h2 .ast{background:var(--err-bg);color:var(--err)}
/* .ic наследует цвет иконки от общего правила «.card h2 .ic{color:var(--ing)}» (строка 85) —
   без явного переопределения галочка/шеврон остаются синими поверх цветной плашки .ast */
.card.acc.open>h2 .ast .ic,
.card.acc.done>h2 .ast .ic{color:#fff}
.card.acc.todo>h2 .ast .ic{color:var(--err)}
/* Раскрытие: 0fr → 1fr, содержимое не дёргается и не требует замера высоты */
.accb{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d3) var(--ez-out)}
.card.acc.open>.accb{grid-template-rows:1fr}
/* Схлопывание без анимации — см. openAcc: пока предыдущий блок сжимается плавно, он утягивает
   вверх заголовок следующего прямо во время перехода к нему, и попасть в заголовок невозможно. */
.card.acc.noanim>.accb{transition:none}
/* Раскрывающееся содержимое исключаем из «якорения скролла». Иначе браузер цепляется за элемент
   внутри блока и, пока блок растёт, сам подкручивает страницу вниз, чтобы этот элемент остался
   на месте, — заголовок улетает выше экрана и возвращается только в конце. */
.accb{overflow-anchor:none}
.accw{overflow:hidden;min-height:0}
.accin{padding:4px 14px 15px;border-top:1px solid var(--line)}
/* «Далее» — заполненная кнопка с именем следующего блока, а не бледная полоса */
.accnext{width:100%;margin-top:16px;background:var(--ing);color:#fff;font-size:var(--t-label);min-height:48px}
.accnext .ic{width:18px;height:18px}

/* ── Итоговая сводка стоимости ── */
.sumbar{background:linear-gradient(135deg,#0a6fe0,var(--ing2));color:#fff;border-radius:var(--r2);
  padding:10px 13px 11px;margin-bottom:10px;box-shadow:var(--e1)}
body.dark .sumbar{background:linear-gradient(135deg,#172c4e,#12213a);border:1px solid var(--line)}
.sumbar .srow{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sumbar .srow.pair{justify-content:flex-start;gap:18px;flex-wrap:wrap}
.sumbar .sk{font-size:var(--t-cap);opacity:.85;font-weight:600;white-space:nowrap}
.sumbar .sv{font-size:var(--t-label);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:1}
.sumbar .stot{font-size:var(--t-display);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.sumbar .sdiv{border-top:1px solid rgba(255,255,255,.24);margin-top:7px;padding-top:7px}

/* ── Подвал листа: прогресс, что осталось, черновик (в потоке, экран не закрывает) ── */
.formfoot{margin:16px 0 4px;padding:14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r3);box-shadow:var(--e1)}
.formfoot .ffbar{height:6px;background:var(--card3);border-radius:var(--rf);overflow:hidden}
.formfoot .ffbar i{display:block;height:100%;width:100%;border-radius:var(--rf);transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--ing),#2f8bff);transition:transform var(--d3) var(--ez)}
.formfoot.ready .ffbar i{background:linear-gradient(90deg,var(--ok),#2fbe6b)}
.formfoot .ffrest{font-size:var(--t-label);color:var(--muted);margin:10px 0 0;line-height:1.45;
  display:flex;align-items:flex-start;gap:8px}
.formfoot .ffrest .ic{color:var(--muted);margin-top:1px}
.formfoot.ready .ffrest{color:var(--ok-fg);font-weight:600}
.formfoot.ready .ffrest .ic{color:var(--ok)}
.formfoot .ffrow{display:flex;gap:10px;margin-top:13px}
.formfoot .ffauto{font-size:var(--t-cap);color:var(--muted);margin-top:9px;text-align:center;min-height:14px}

/* ── Экран «Сегодня» и список осмотров ── */
.job{display:flex;gap:11px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background var(--d2) var(--ez);
  border-radius:var(--r1)}
.job:first-child{border-top:0}
.job:active{background:var(--card2)}
.job .jt{font-size:var(--t-label);font-weight:700;color:var(--ing);flex:none;width:44px;padding-top:2px;
  font-variant-numeric:tabular-nums;line-height:1.25}
.job .jm{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.job .ja{font-size:var(--t-body);font-weight:650;line-height:1.3}
.job .js{font-size:var(--t-label);color:var(--muted);line-height:1.35}
.job .jgo{flex:none;color:var(--muted);padding-top:3px;display:flex}
/* Строка статуса: пилюля слева, кнопка «Маршрут» справа на том же уровне — под строкой типа/номера.
   margin-top:-2px подтягивает её ближе к строке типа/номера, не задевая её (там своя line-height). */
.job .jmeta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:-2px}
/* Кнопка «Маршрут» — подписанная плашка, а не круглая пилюля: прямоугольная форма (--r2) и текст
   рядом с иконкой явно читаются как действие, а не как ещё один статус-ярлык вроде «черновик» рядом.
   Компактнее статус-пилюли и прибита к правому краю колонки — правый край не двигаем, влево уменьшаем. */
.job .jnav{flex:none;display:inline-flex;align-items:center;gap:5px;min-height:28px;
  padding:5px 10px 5px 7px;border-radius:var(--r2);background:var(--ghost);color:var(--ing);
  font-size:var(--t-cap);font-weight:700;text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:transform var(--d1) var(--ez),background var(--d2) var(--ez)}
.job .jnav .ic{width:15px;height:15px}
.job .jnav:active{transform:scale(.96);background:var(--acc)}
.st{display:inline-block;font-size:var(--t-cap);font-weight:700;padding:3px 9px;border-radius:var(--rf);letter-spacing:.01em}
.st.draft{background:var(--warn-bg);color:var(--warn-fg)}
.st.sent{background:var(--ok-bg);color:var(--ok-fg)}
.st.queue{background:var(--acc);color:var(--ing2)}
.st.fail{background:var(--err-bg);color:var(--err-fg)}
.rowbtn{display:flex;gap:8px;margin-top:12px}
.rowbtn button{padding:10px;font-size:var(--t-label);min-height:44px}
/* Кнопка вне карточки (напр. «+ Новый осмотр» на «Сегодня») — те же отступы, что у .card,
   чтобы читаться отдельным блоком, а не продолжением списка над ней. */
.rowbtn.tdnewbtn{margin:12px 0 11px}
.filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 11px;padding-bottom:2px}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:none;width:auto;padding:0 10px;font-size:12.5px;background:var(--card);
  color:var(--muted);border:1px solid var(--line2);border-radius:var(--rf);min-height:32px;box-shadow:none}
.filters button.on{background:var(--ing);color:#fff;border-color:var(--ing)}
/* Поиск с иконкой внутри поля */
.srchbox{position:relative;margin-bottom:11px}
.srchbox .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.srch{margin:0;padding-left:40px;min-height:46px}
/* появление строк списка «лесенкой» */
.stag{animation:stagin var(--d3) var(--ez-out) both;animation-delay:calc(var(--i,0)*35ms)}
@keyframes stagin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ── Мастер «Новый осмотр» ── */
.wsteps{display:flex;gap:7px;margin-bottom:16px}
.wsteps i{flex:1;height:4px;border-radius:var(--rf);background:var(--line2);transition:background var(--d3) var(--ez)}
.wsteps i.on{background:var(--ing)}
.wq{font-size:var(--t-display);font-weight:750;margin:0 0 5px;letter-spacing:-.02em}
.wsub{font-size:var(--t-label);color:var(--muted);margin:0 0 16px;line-height:1.5}
.wtiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wtile{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);padding:15px 12px;
  display:flex;flex-direction:column;align-items:center;gap:9px;cursor:pointer;min-height:96px;
  justify-content:center;text-align:center;-webkit-tap-highlight-color:transparent;box-shadow:var(--e1);
  transition:transform var(--d1) var(--ez),border-color var(--d2) var(--ez),background var(--d2) var(--ez)}
.wtile:active{transform:scale(.975)}
.wtile .we{color:var(--ing);display:flex}
.wtile .we .ic{width:28px;height:28px;stroke-width:1.4}
.wtile .wn{font-size:var(--t-label);font-weight:650;line-height:1.25}
.wtile.on{border-color:var(--ing);box-shadow:0 0 0 1px var(--ing),var(--e1);background:var(--acc)}
.wopt{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);padding:14px;margin-bottom:10px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:var(--e1);
  transition:transform var(--d1) var(--ez),border-color var(--d2) var(--ez),background var(--d2) var(--ez)}
.wopt:active{transform:scale(.99)}
.wopt.on{border-color:var(--ing);box-shadow:0 0 0 1px var(--ing),var(--e1);background:var(--acc)}
.wopt b{display:block;font-size:var(--t-body);font-weight:650;margin-bottom:4px}
.wopt span{font-size:var(--t-label);color:var(--muted);line-height:1.45}

/* ── Профиль ── */
.setrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.setrow:first-of-type{border-top:0}
.setrow .sm{flex:1;min-width:0}
.setrow .sl{font-size:var(--t-body);font-weight:650}
.setrow .sd{font-size:var(--t-label);color:var(--muted);line-height:1.45;margin-top:3px}
.setrow .sw{margin:0;flex:none}
.seg3{display:flex;border:1px solid var(--line2);border-radius:var(--r2);overflow:hidden;margin-top:10px;background:var(--card)}
.seg3 button{flex:1;padding:11px 4px;font-size:var(--t-label);font-weight:600;background:transparent;color:var(--ing);
  border-radius:0;min-height:46px;box-shadow:none}
.seg3 button.on{background:var(--ing);color:#fff}

/* ── Журнал уведомлений ── */
.nrow{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--line);cursor:pointer}
.nrow:first-child{border-top:0}
.nrow .ne{flex:none;width:34px;height:34px;border-radius:var(--rf);background:var(--card3);color:var(--muted);
  display:flex;align-items:center;justify-content:center}
.nrow.unread .ne{background:var(--ing-soft);color:var(--ing)}
.nrow .nm{flex:1;min-width:0}
.nrow .nt{font-size:var(--t-body);font-weight:650;line-height:1.3}
.nrow .nb{font-size:var(--t-label);color:var(--muted);line-height:1.45;margin-top:3px}
.nrow .nd{font-size:var(--t-cap);color:var(--muted);margin-top:4px}
.nrow .jgo{flex:none;color:var(--muted);display:flex;align-self:center}
.nrow.unread{background:var(--acc);border-radius:var(--r2);padding:13px 11px;margin:3px -11px;border-top-color:transparent}

/* ── Режим «на улице»: крупный шрифт и повышенный контраст ── */
body.big{--t-display:25px;--t-title:19px;--t-body:17px;--t-label:15px;--t-cap:13px}
body.big .chk{font-size:15px;line-height:1.4;min-height:46px}
body.big .chk input{width:24px;height:24px}
body.big .checks label{min-height:46px}
body.big input,body.big select,body.big textarea{font-size:17px;padding:13px}
body.big .card.acc>h2{min-height:60px}
body.big{--line:#c3cddd;--line2:#a8b6cd;--muted:#404b60}
body.big.dark{--line:#43526f;--line2:#5a6a8a;--muted:#bcc7db}

/* ── Уважение к системной настройке «меньше движения» ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .accb{transition:none}
}