/* Town Peek Team — мини-приложение в Телеграме.
   Токены, размеры и правила — из webapp/DESIGN.md. Теней нет нигде,
   радиусов ровно три (12 / 16 / 999), градиент встречается один раз. */

/* ── 1.1 Токены ─────────────────────────────────────────────────────────── */
:root{
  --bg:      var(--tg-theme-secondary-bg-color, #EFEFF4);
  --surface: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #FFFFFF));
  --text:    var(--tg-theme-text-color, #000000);
  --text-2:  var(--tg-theme-subtitle-text-color, var(--tg-theme-hint-color, #707579));
  --hint:    var(--tg-theme-hint-color, #707579);
  --label:   var(--tg-theme-section-header-text-color, var(--tg-theme-hint-color, #707579));
  --sep:     var(--tg-theme-section-separator-color, rgba(128,128,128,.24));
  --danger:  var(--tg-theme-destructive-text-color, #E5484D);

  --brand:      #7C5CFC;
  --brand-fill: #6344E8;
  --brand-soft: #F1EDFF;
  --brand-line: rgba(124,92,252,.35);
  --amber:      #B26A00;
  --brand-grad: linear-gradient(90deg,#7C5CFC 0%,#9D4FE8 50%,#E14FA7 100%);

  /* 1.3 Шкала текста — ровно шесть ступеней */
  --t-num:  700 28px/1.1 var(--font);
  --t-h1:   700 20px/1.25 var(--font);
  --t-title:600 17px/1.3 var(--font);
  --t-body: 400 17px/1.45 var(--font);
  --t-sub:  400 15px/1.35 var(--font);
  --t-meta: 500 13px/1.4 var(--font);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui,
          "Helvetica Neue", sans-serif;

  --pad: 16px;                       /* горизонтальные поля экрана */
  --gap: 12px;                       /* зазор в сетке */
  --safe-top: var(--tg-safe-area-inset-top, 0px);
  --safe-bottom: var(--tg-content-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
}
html[data-scheme="dark"]{
  --brand: #A78BFF;
  --brand-soft: rgba(124,92,252,.20);
  --brand-line: rgba(167,139,255,.40);
  --amber: #F0B429;
}
@media (prefers-color-scheme: dark){          /* запасной путь, если схемы нет */
  html:not([data-scheme]){
    --brand:#A78BFF; --brand-soft:rgba(124,92,252,.20);
    --brand-line:rgba(167,139,255,.40); --amber:#F0B429;
  }
}
/* 1.2 Карточка и фон почти одного тона — включаем hairline-рамку */
html[data-flat="1"] .card,
html[data-flat="1"] .tile,
html[data-flat="1"] .bubble.them,
html[data-flat="1"] .chip,
html[data-flat="1"] .num{ border:1px solid var(--sep); }

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none !important; }
html,body{
  margin:0; padding:0; height:100%;
  overscroll-behavior:none;             /* pull-to-refresh не делаем */
  background:var(--bg); color:var(--text);
  font:var(--t-body); font-family:var(--font);
  -webkit-text-size-adjust:100%;
}
body{ overflow:hidden; display:flex; flex-direction:column;
  height: var(--tg-viewport-stable-height, 100dvh); }
button,textarea{ font-family:inherit; color:inherit; }
button{ background:none; border:0; margin:0; padding:0; cursor:pointer; }
h1,h2,h3,p{ margin:0; }
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── 1.5 Каркас экрана ──────────────────────────────────────────────────── */
.app{
  flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden;
}
.main{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.preview-bar{
  padding:5px 12px; text-align:center; font:var(--t-meta);
  background:var(--brand-fill); color:#fff; letter-spacing:.01em;
}
.preview-bar{ flex:none; }

/* Шапка экрана */
.hdr{
  flex:none; position:relative; display:flex; align-items:center; gap:12px;
  min-height:56px; padding:calc(8px + var(--safe-top)) var(--pad) 8px;
  background:var(--surface); border-bottom:1px solid var(--sep);
}
.hdr-title{ font:var(--t-h1); flex:1; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.hdr-action{
  flex:none; min-height:44px; min-width:44px; padding:0 4px;
  font:var(--t-title); color:var(--brand);
  display:flex; align-items:center; justify-content:flex-end;
}
.hdr-action[disabled]{ opacity:.45; }

/* Шапка разговора: аватар + имя + полная роль */
.hdr.talk{ padding-top:calc(8px + var(--safe-top)); }
.hdr-who{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.hdr-who .av{ flex:none; }
.hdr-names{ min-width:0; }
.hdr-name{ font:var(--t-title); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hdr-role{ font:var(--t-meta); color:var(--text-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 5.3 Полоса «Нет связи» */
.offline{
  flex:none; display:flex; align-items:center; gap:8px;
  min-height:32px; padding:4px var(--pad);
  background:color-mix(in srgb, var(--danger) 12%, transparent);
  color:var(--danger); font:var(--t-meta);
}
@supports not (background: color-mix(in srgb, red 12%, transparent)){
  .offline{ background:rgba(229,72,77,.12); }
}
.offline span{ flex:1; min-width:0; }
.offline-retry{
  flex:none; min-height:44px; min-width:44px; padding:0 4px;
  color:var(--danger); font:var(--t-meta); font-weight:600;
  display:flex; align-items:center; justify-content:flex-end;
}

/* ── 2. Таб-бар ─────────────────────────────────────────────────────────── */
.tabs{
  flex:none; display:flex; background:var(--surface);
  border-top:1px solid var(--sep);
  padding-bottom:calc(8px + var(--safe-bottom));
}
.tab{
  flex:1 1 0; min-width:0; height:56px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--hint);
}
.tab[aria-selected="true"]{ color:var(--brand); }
.tab-cap{
  font:700 11px/1 var(--font); letter-spacing:.08em; text-transform:uppercase;
}
.tab-ico{ position:relative; display:block; width:24px; height:24px; }
.tab-badge{
  position:absolute; top:-4px; left:14px; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--brand-fill); color:#fff;
  font:700 11px/18px var(--font); text-align:center;
}
.tab-dot{
  position:absolute; top:-1px; left:16px; width:8px; height:8px; border-radius:999px;
}
.tab-dot.amber{ background:var(--amber); }
.tab-dot.brand{ background:var(--brand); }

/* ── Общие блоки экрана ─────────────────────────────────────────────────── */
.screen{ padding:16px var(--pad) 24px; }
.stamp{ font:var(--t-meta); color:var(--hint); margin:-4px 0 12px; }
.label{
  font:700 11px/1 var(--font); letter-spacing:.08em; text-transform:uppercase;
  color:var(--label); margin:0 0 8px;
}
.label + .label-note{ font:var(--t-meta); color:var(--hint); margin:-4px 0 8px; }
.group + .group{ margin-top:24px; }

.card{
  background:var(--surface); border-radius:16px; padding:16px;
}
.card + .card{ margin-top:12px; }

/* Появление — одно движение на всё приложение */
.enter{ animation:enter .16s ease-out both; }
@keyframes enter{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none; } }

/* Пустое состояние экрана */
.empty{ padding:32px 8px; text-align:center; }
.empty-ico{
  width:72px; height:72px; margin:0 auto 16px; border-radius:999px;
  background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
}
.empty-ico svg{ width:40px; height:40px; }
.empty-title{ font:var(--t-title); margin-bottom:8px; }
.empty-text{ font:var(--t-sub); color:var(--hint); margin:0 auto 16px; max-width:30em; }

/* Кнопки */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 16px; border-radius:12px;
  font:var(--t-sub); font-weight:600;
}
.btn-fill{ background:var(--brand-fill); color:#fff; }
.btn-soft{ background:var(--brand-soft); color:var(--brand); border-radius:999px; }
.btn-text{ color:var(--brand); padding:0 8px; }
.btn-danger{ color:var(--danger); padding:0 8px; }
.btn[disabled]{ opacity:.4; }
.btn svg{ width:20px; height:20px; flex:none; }

/* Аватар */
.av{
  border-radius:999px; background:var(--brand-soft);
  display:flex; align-items:center; justify-content:center;
  line-height:1; flex:none;
}
.av-36{ width:36px; height:36px; font-size:18px; }
.av-32{ width:32px; height:32px; font-size:16px; }
.av-28{ width:28px; height:28px; font-size:15px; }
.av-24{ width:24px; height:24px; font-size:13px; }
.av-56{ width:56px; height:56px; font-size:28px; }

/* Скелеты */
.sk{ background:var(--sep); border-radius:999px; display:block; }
.sk-line{ height:12px; }
.sk-pulse{ animation:sk 1.2s ease-in-out infinite; }
@keyframes sk{ 0%,100%{opacity:.5} 50%{opacity:.9} }

/* ── 4.1 Плитка человека ────────────────────────────────────────────────── */
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.tile{
  position:relative; min-height:116px; border-radius:12px; background:var(--surface);
  padding:12px; text-align:left; display:flex; flex-direction:column;
  transition:background .12s linear;
}
.tile.hit{ background:var(--brand-soft); }
.tile-name{ font:600 15px/1.35 var(--font); margin-top:4px; }
.tile-role{ font:var(--t-meta); color:var(--text-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tile.pick .tile-role{ display:none; }        /* компактная плитка брифинга */
.tile-meta{ font:var(--t-meta); color:var(--hint); margin-top:auto;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tile-meta.was{ color:var(--text-2); }
.tile-meta.new{ color:var(--brand); }
.tile-dot{
  position:absolute; top:10px; right:10px; width:8px; height:8px;
  border-radius:999px; background:var(--brand);
}
.tile .sk-line{ width:60px; margin-top:auto; }

/* Компактные плитки для брифинга */
.tile.pick{ min-height:84px; }
.tile.pick.on{ background:var(--brand-soft); border:1px solid var(--brand-line); }
.tile.pick.off{ opacity:.45; }
.tile-check{ position:absolute; top:8px; right:8px; width:20px; height:20px; color:var(--brand); }

/* ── 4.2 Пузыри ─────────────────────────────────────────────────────────── */
.talk-list{ padding:12px var(--pad) 16px; display:flex; flex-direction:column; }
.row{ display:flex; align-items:flex-end; gap:8px; margin-top:8px; }
.row.first{ margin-top:16px; }
.row:first-child{ margin-top:0; }
.row.me{ justify-content:flex-end; }
.row .av{ margin-bottom:2px; }
.row .av-hole{ width:28px; flex:none; }
.bubble{
  max-width:85%; border-radius:16px; padding:10px 12px; font:var(--t-body);
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.bubble.me{ background:var(--brand-fill); color:#fff; }
.bubble.them{ background:var(--surface); color:var(--text); }
.bubble p + p{ margin-top:8px; }
.bubble .line{ display:block; }
.bubble .li{ display:block; padding-left:24px; text-indent:-12px; }
.bubble.arm{ line-height:1.6; }
.msg-time{ font:400 11px/1.4 var(--font); color:var(--hint); margin:4px 0 0; }
.msg-time.me{ text-align:right; }
.msg-time.them{ padding-left:36px; }
.msg-fail{ color:var(--danger); }
.msg-fail button{ color:var(--danger); font-weight:600; min-height:44px; padding:0 4px; }
.day{ font:var(--t-meta); color:var(--hint); text-align:center; margin:16px 0 8px; }

/* Приписка «Задание записано» внутри пузыря */
.task-note{
  margin-top:10px; padding-top:10px; border-top:1px solid var(--sep);
  display:flex; align-items:center; gap:8px; min-height:44px;
  font:var(--t-meta); color:var(--brand); width:100%; text-align:left;
}
.task-note svg{ width:16px; height:16px; flex:none; }

/* Пузырь ожидания */
.dots{ display:flex; align-items:center; gap:4px; height:20px; }
.dots i{ width:6px; height:6px; border-radius:999px; background:var(--hint);
  animation:wave 1.2s ease-in-out infinite; }
.dots i:nth-child(2){ animation-delay:.2s }
.dots i:nth-child(3){ animation-delay:.4s }
@keyframes wave{ 0%,60%,100%{ opacity:.35; transform:none } 30%{ opacity:1; transform:translateY(-3px) } }
.wait-note{ font:var(--t-meta); color:var(--hint); margin-top:6px; }
.wait-note .btn-text{ min-height:44px; display:inline-flex; }
.typing-flat{ font:var(--t-meta); color:var(--hint); }

/* Приглашение в пустом разговоре */
.invite{ padding:32px var(--pad); text-align:center; }
.invite .av{ margin:0 auto 12px; }
.invite-name{ font:var(--t-title); }
.invite-role{ font:var(--t-sub); color:var(--hint); margin-top:4px; }
.chips{ display:flex; flex-direction:column; gap:8px; margin-top:24px; }
.chip{
  min-height:44px; padding:10px 16px; border-radius:12px;
  background:var(--surface); color:var(--text); font:var(--t-sub); text-align:left;
}

/* ── Строка ввода ───────────────────────────────────────────────────────── */
.composer{
  flex:none; background:var(--surface); border-top:1px solid var(--sep);
  padding:8px var(--pad) calc(8px + var(--safe-bottom));
}
.composer-row{ display:flex; align-items:flex-end; gap:8px; }
.composer-note{ font:var(--t-meta); color:var(--hint); padding:0 4px 8px; }
.input{
  flex:1; min-height:44px; max-height:120px; padding:11px 12px;
  border:1px solid var(--sep); border-radius:16px;
  background:var(--surface); font:var(--t-body); resize:none; overflow-y:auto;
}
.input::placeholder{ color:var(--hint); }
.send{
  flex:none; width:44px; height:44px; border-radius:999px;
  background:var(--brand-fill); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.send[disabled]{ opacity:.4; }
.jump{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(70px + var(--safe-bottom)); z-index:5;
  min-height:44px; padding:0 16px; border-radius:999px;
  background:var(--brand-fill); color:#fff; font:var(--t-meta); font-weight:600;
  display:flex; align-items:center; gap:6px;
}
.main.talk{ display:flex; flex-direction:column; }
.talk-wrap{ flex:1 0 auto; display:flex; flex-direction:column; justify-content:flex-end; }
.talk-wrap.center{ justify-content:flex-start; }

/* ── 4.3 Карточка задачи ────────────────────────────────────────────────── */
.task-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.task-author{ font:var(--t-meta); color:var(--brand); min-height:44px; min-width:44px;
  display:flex; align-items:center; }
.task-when{ font:var(--t-meta); color:var(--hint); }
.task-body{ font:var(--t-body); overflow-wrap:anywhere; }
.task-body.cut{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.task-more{ min-height:44px; display:flex; align-items:center; font:var(--t-meta);
  color:var(--brand); }
.task-acts{ display:flex; align-items:center; gap:8px;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--sep); }
.task-done{ display:flex; align-items:center; gap:8px; min-height:44px; font:var(--t-sub); }
.task-done .grow{ flex:1; min-width:0; color:var(--text-2); }
.done-row{
  display:flex; align-items:center; gap:8px; min-height:44px; padding:0 16px;
  background:var(--surface); font:var(--t-sub);
}
.done-row:first-of-type{ border-radius:12px 12px 0 0; }
.done-row:last-of-type{ border-radius:0 0 12px 12px; }
.done-row + .done-row{ border-top:1px solid var(--sep); }
.done-mark{ flex:none; font:var(--t-meta); }
.done-mark.no{ color:var(--danger); }
.done-mark.yes{ color:var(--brand); }
.done-text{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; text-decoration:line-through; color:var(--text-2); }
.done-date{ flex:none; font:var(--t-meta); color:var(--hint); }
.fold{
  width:100%; display:flex; align-items:center; gap:8px; min-height:44px;
  font:var(--t-sub); color:var(--text-2); padding:0 4px; margin-top:24px;
}
.fold svg{ width:20px; height:20px; transition:transform .16s ease-out; }
.fold[aria-expanded="true"] svg{ transform:rotate(90deg); }

/* ── 4.4 Плитка цифры ───────────────────────────────────────────────────── */
.num{
  min-height:92px; border-radius:12px; background:var(--surface); padding:12px;
  display:flex; flex-direction:column;
}
.num-cap{ font:var(--t-meta); color:var(--text-2); }
.num-val{ font:var(--t-num); font-variant-numeric:tabular-nums; }
.num-sub{ font:var(--t-meta); color:var(--hint); margin-top:auto; }
.site-state{ font:var(--t-title); }
.site-state.bad{ color:var(--danger); }
.site-sub{ font:var(--t-meta); color:var(--hint); margin-top:4px; }
.site-issue{ font:var(--t-sub); color:var(--danger); margin-top:8px; overflow-wrap:anywhere; }

/* ── 4.5 Карточка срока ─────────────────────────────────────────────────── */
.dl{ position:relative; padding-left:19px; overflow:hidden; }
.dl::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--brand); }
.dl.warn::before{ background:var(--amber); }
.dl.hot::before{ background:var(--danger); }
.dl-title{ font:var(--t-title); }
.dl-why{ font:var(--t-sub); color:var(--text-2); margin-top:4px; }
.dl-official{ font:var(--t-meta); color:var(--hint); margin-top:8px; }
.dl-when{ display:flex; align-items:baseline; gap:8px; margin-top:12px; flex-wrap:wrap; }
.dl-date{ font:var(--t-sub); color:var(--text-2); }
.dl-days{ font:700 20px/1.2 var(--font); font-variant-numeric:tabular-nums; }
.dl-days.warn{ color:var(--amber); }
.dl-days.hot{ color:var(--danger); }
.dl-note{ font:var(--t-sub); color:var(--text-2); }
.dl-act{ margin-top:12px; padding-top:12px; border-top:1px solid var(--sep); }

/* ── Брифинг ────────────────────────────────────────────────────────────── */
.topic{
  width:100%; min-height:64px; padding:12px; border-radius:12px;
  border:1px solid var(--sep); background:var(--surface); font:var(--t-body);
  resize:none;
}
.topic::placeholder{ color:var(--hint); }
.sum{ position:relative; padding-top:19px; overflow:hidden; }
.sum::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--brand-grad); }        /* единственный градиент в приложении */
.sum-title{ font:var(--t-title); margin-bottom:8px; }
.sum-body{ font:var(--t-body); white-space:pre-wrap; overflow-wrap:anywhere; }
.steps{ display:flex; align-items:flex-start; gap:16px; padding:16px 0 0; }
.step{ display:flex; flex-direction:column; align-items:center; gap:4px; width:44px; }
.steps-names{ font:var(--t-meta); color:var(--hint); margin-top:8px; }
.step .av{ opacity:.4; }
.step.on .av, .step.done .av{ opacity:1; }
.step-check{ width:14px; height:14px; color:var(--brand); }
.ans-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.ans-name{ font:var(--t-title); }
.ans-body{ font:var(--t-body); white-space:pre-wrap; overflow-wrap:anywhere; }
.brief-topic{ font:var(--t-title); }
.brief-when{ font:var(--t-meta); color:var(--hint); margin-top:4px; }
.brief-pad{ padding-bottom:80px; }
.mb-fallback{
  position:sticky; bottom:0; margin:24px calc(var(--pad) * -1) 0;
  padding:8px var(--pad) 8px; background:var(--bg);
}
.mb-fallback .btn{ width:100%; }

/* ── Экран-заглушка для чужих ───────────────────────────────────────────── */
.gate{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  padding:32px; background:var(--bg); text-align:center;
}
.gate-emoji{ font-size:32px; margin-bottom:16px; }
.gate-title{ font:var(--t-h1); margin-bottom:8px; }
.gate-text{ font:var(--t-sub); color:var(--hint); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

/* ── Кнопка «слушать» под ответом специалиста ─────────────────────────── */
.speak{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin:6px -10px -8px -10px;
  border:0; background:none; color:var(--hint);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.speak:active{ color:var(--brand); }
.speak[data-state="playing"]{ color:var(--brand); }
.speak.busy{ animation:speak-pulse 1.1s ease-in-out infinite; }
@keyframes speak-pulse{ 0%,100%{opacity:.45} 50%{opacity:1} }
@media (prefers-reduced-motion: reduce){ .speak.busy{ animation:none; opacity:.6 } }

/* ── Всплывающая подсказка ────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:calc(64px + env(safe-area-inset-bottom, 0px) + 16px);
  transform:translate(-50%, 8px);
  max-width:min(88vw, 420px);
  padding:10px 14px; border-radius:12px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--sep);
  font-size:14px; line-height:1.35; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
  z-index:60;
}
.toast.on{ opacity:1; transform:translate(-50%, 0); }
@media (prefers-reduced-motion: reduce){ .toast{ transition:none } }

/* ── Что делают прямо сейчас ──────────────────────────────────────────── */
.work{
  background:var(--surface); border-radius:16px;
  padding:4px 14px; margin:0 0 16px;
}
.work-row{ display:flex; gap:10px; align-items:flex-start; padding:10px 0; }
.work-row + .work-row{ border-top:1px solid var(--sep); }
.work-text{ min-width:0; }
.work-who{ font:var(--t-sub); color:var(--text); }
.work-when{ font:var(--t-meta); color:var(--hint); margin-top:2px; }
.work-dot{
  width:8px; height:8px; margin-top:6px; border-radius:999px;
  background:var(--brand); flex:none;
  animation:work-blink 1.6s ease-in-out infinite;
}
.work-ok{ color:var(--hint); margin-top:4px; flex:none; }
.work-row.done .work-who{ color:var(--text-2); }
@keyframes work-blink{ 0%,100%{opacity:.35} 50%{opacity:1} }
@media (prefers-reduced-motion: reduce){ .work-dot{ animation:none } }

.tile-meta.busy{ color:var(--brand); }

/* ── Пульт «Сейчас» ───────────────────────────────────────────────────── */
/* Новых поверхностей не заводим: карточка, плитка цифры и строки работы —
   те же, что на других экранах. Здесь только их стыки. */
.hero .work-row:first-child{ padding-top:0 }
.hero .work-row:last-child{ padding-bottom:0 }
.calm{ font:var(--t-sub); color:var(--text-2) }
button.num{ text-align:left; width:100% }
.num-sub.link{ color:var(--brand) }
/* Две плитки-счётчика рядом: подпись бывает в две строки, числа обязаны
   стоять на одной линии — поэтому подписи отведено две строки на обеих */
.num.stat .num-cap{ min-height:36px }

/* Карточка-список: отступы живут у строк, чтобы линии шли от края до края */
.card.list{ padding:0 }
.row-item{ padding:12px 16px }
.row-item + .row-item{ border-top:1px solid var(--sep) }

.wait-what{ font:var(--t-body); overflow-wrap:anywhere }
.due{ font:var(--t-meta); color:var(--hint); margin-top:4px }
.due.warn{ color:var(--amber) }
.due.hot{ color:var(--danger); font-weight:700 }

.q-head{ display:flex; align-items:baseline; gap:8px }
.q-who{ font:var(--t-sub); font-weight:600; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.q-state{ flex:none; font:var(--t-meta); color:var(--hint) }
.q-state.now{ color:var(--brand) }
.q-state.ok{ color:var(--text-2) }
.q-state.bad{ color:var(--danger) }
.q-what{ font:var(--t-sub); color:var(--text-2); margin-top:4px; overflow-wrap:anywhere }
.q-sum{ font:var(--t-meta); color:var(--hint); margin-top:4px; overflow-wrap:anywhere }
.q-sum.bad{ color:var(--danger) }
.q-open{ margin-top:8px }

/* Расход: и сумма, и остаток от предела видны одним взглядом */
.money-cap{ font:var(--t-meta); color:var(--text-2) }
.money-val{ font:var(--t-num); font-variant-numeric:tabular-nums; margin-top:2px }
.money-val.hot{ color:var(--danger) }
.bar{ height:6px; border-radius:999px; background:var(--sep); margin-top:12px; overflow:hidden }
.bar-fill{ height:100%; border-radius:999px; background:var(--brand-fill) }
.bar-fill.warn{ background:var(--amber) }
.bar-fill.hot{ background:var(--danger) }
.money-sub{ font:var(--t-meta); color:var(--hint); margin-top:8px }
.money-sub.hot{ color:var(--danger); font-weight:700 }

.run-row{ display:flex; gap:10px; align-items:flex-start; padding:10px 16px }
.run-row + .run-row{ border-top:1px solid var(--sep) }
.run-row .work-ok{ margin-top:4px }
.run-mark{ width:8px; height:8px; margin-top:7px; border-radius:999px;
  background:var(--danger); flex:none }
.run-text{ flex:1; min-width:0 }
.run-name{ font:var(--t-sub) }
.run-sum{ font:var(--t-meta); color:var(--hint); margin-top:2px; overflow-wrap:anywhere }

/* Шесть вкладок вместо пяти: на узком экране подпись жмётся по размеру и
   трекингу, но не ломается и не режется. «КОМАНДА» — самая длинная. */
@media (max-width:395px){
  .tab-cap{ font-size:10px; letter-spacing:0 }
}
@media (max-width:340px){
  .tab-cap{ font-size:9px; letter-spacing:0 }
}