/* Операционка Smartly.
   Палитра и шрифт взяты один в один с smartlygroup.com — не «похожие», а те же
   переменные: белый фон, чернильный #0C0D10, волосяная линия #E9EAEE, синий
   #215FAC. Красный, зелёный и оранжевый светофора — это цвета самого логотипа,
   поэтому статусы выглядят родными, а не наклеенными сверху.

   Интерфейс плотный: его сканируют, а не читают. Цифры моноширинные,
   состояние читается формой, украшений нет. */

:root{
  --ground:#FBFBFC;
  --surface:#FFFFFF;
  --surface-2:#F2F4F8;
  --ink:#0C0D10;
  --muted:#77797F;
  --faint:#9A9CA2;
  --line:#E9EAEE;
  --line-strong:#0C0D10;
  --accent:#215FAC;              /* фирменный синий */
  --accent-soft:#EEF3FB;
  --on-accent:#FFFFFF;

  /* Те же цвета, что в логотипе: красный, зелёный, оранжевый. */
  --red:#E8432E;      --red-soft:#FCEBE8;
  --amber:#B36200;    --amber-soft:#FDF1E3;
  --yellow:#8A6A00;   --yellow-soft:#FBF5E0;
  --green:#227E3B;    --green-soft:#E7F2EA;
  --teal:#1E8CA6;

  --ui:'Jost',-apple-system,'SF Pro Display','Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono','Cascadia Mono',Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0C0D10; --surface:#14161B; --surface-2:#1B1E25;
    --ink:#F2F3F6; --muted:#9A9CA2; --faint:#77797F;
    --line:#252932; --line-strong:#F2F3F6;
    --accent:#5C9BE8; --accent-soft:#16233A; --on-accent:#0C0D10;
    --red:#F0857C;   --red-soft:#2C1614;
    --amber:#E0A45C; --amber-soft:#2A1F12;
    --yellow:#D9C86E;--yellow-soft:#262110;
    --green:#5FB57A; --green-soft:#132318;
    --teal:#4FB3CC;
  }
}
:root[data-theme="dark"]{
  --ground:#0C0D10; --surface:#14161B; --surface-2:#1B1E25;
  --ink:#F2F3F6; --muted:#9A9CA2; --faint:#77797F;
  --line:#252932; --line-strong:#F2F3F6;
  --accent:#5C9BE8; --accent-soft:#16233A; --on-accent:#0C0D10;
  --red:#F0857C;   --red-soft:#2C1614;
  --amber:#E0A45C; --amber-soft:#2A1F12;
  --yellow:#D9C86E;--yellow-soft:#262110;
  --green:#5FB57A; --green-soft:#132318;
  --teal:#4FB3CC;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--ui);font-size:14.5px;line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
a:hover{border-bottom-color:var(--accent);color:var(--accent)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none !important}

/* ── логотип. Он многоцветный, поэтому на тёмной теме кладём его на белую
   плашку, а не перекрашиваем фильтром: фирменные цвета важнее единообразия. */
.brand{border:0;display:inline-flex;align-items:center}
.brand img{display:block;height:22px;width:auto}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand{background:#fff;padding:5px 9px;border-radius:999px}
}
:root[data-theme="dark"] .brand{background:#fff;padding:5px 9px;border-radius:999px}

/* ── вход */
.login{min-height:100%;display:grid;place-items:center;padding:24px}
.login-card{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:2.4rem;width:min(380px,100%);display:flex;flex-direction:column;gap:.5rem;
}
.login-card .brand{align-self:flex-start;margin-bottom:1.2rem}
.login-card h1{font-size:1.35rem;margin:0;font-weight:500;letter-spacing:-.02em}
.login-card label{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:.9rem;
}
.login-card input{
  font:inherit;padding:.65rem .8rem;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);
}
.login-card input:focus{border-color:var(--accent);outline:none}
/* Автозаполнение браузера подменяет фон своим — возвращаем свой,
   иначе на тёмной теме поле становится белым с невидимым текстом. */
.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  box-shadow:0 0 0 1000px var(--surface) inset;
  caret-color:var(--ink);
}

/* Цвет текста берём из токена, а не «белый»: на тёмной теме кнопка светлая,
   и белым по белому её не видно — так и было до этой правки.
   Стиль только для главной кнопки, иначе он накрывал и вторую. */
.login-card button[type="submit"]{
  margin-top:1.6rem;padding:.75rem;border:0;border-radius:999px;
  background:var(--ink);color:var(--on-accent);font-weight:500;letter-spacing:.02em;
}
.login-card button[type="submit"]:hover{background:var(--accent);color:var(--on-accent)}
.login-card .ghost{margin-top:.6rem;padding:.55rem;background:none;color:var(--muted)}

/* ── шапка */
.topbar{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  padding:.65rem 20px;background:var(--surface);border-bottom:1px solid var(--line);
}
.topbar nav{display:flex;gap:.1rem;flex:1;flex-wrap:wrap}
.topbar nav a{
  padding:.3rem .75rem;color:var(--muted);font-size:.9rem;border:0;border-radius:999px;
}
.topbar nav a:hover{color:var(--ink);border:0;background:var(--surface-2)}
.topbar nav a.on{background:var(--accent);color:var(--on-accent)}
.topbar-right{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
#search{
  font:inherit;padding:.35rem .85rem;border:1px solid var(--line);border-radius:999px;
  background:var(--ground);color:var(--ink);min-width:min(15rem,60vw);
}
#search:focus{border-color:var(--accent);outline:none}
.ghost{
  background:none;border:1px solid var(--line);border-radius:999px;
  color:var(--muted);padding:.28rem .85rem;
}
.ghost:hover{border-color:var(--accent);color:var(--accent)}
a.ghost{border-bottom:1px solid var(--line)}

.search-results{
  position:absolute;right:20px;top:3.5rem;z-index:30;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;min-width:min(22rem,90vw);
  max-height:60vh;overflow:auto;box-shadow:0 10px 30px rgba(12,13,16,.10);
}
.search-results a{display:block;padding:.5rem .85rem;border:0;border-bottom:1px solid var(--line);color:var(--ink)}
.search-results a:hover{background:var(--surface-2);color:var(--ink)}
.search-results .cat{
  font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);padding:.45rem .85rem;border-bottom:1px solid var(--line);
}

/* ── каркас */
main{padding:1.6rem 20px 5rem;max-width:92rem;margin:0 auto}
h2{font-size:1.2rem;margin:0;font-weight:500;letter-spacing:-.01em}
.muted{color:var(--muted)}
.error{color:var(--red);font-size:.85rem}
.stack{display:flex;flex-direction:column;gap:2rem}
.sec-title{
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin-bottom:.6rem;
}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.card{background:var(--surface);padding:1rem 1.1rem}
.card .n{font-family:var(--mono);font-size:1.9rem;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.1}
.card .cap{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}
.card.bad .n{color:var(--red)}
.card.warn .n{color:var(--amber)}

.tablebox{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{text-align:left;padding:.5rem .75rem;border-bottom:1px solid var(--line);vertical-align:top}
th{
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  font-weight:400;white-space:nowrap;position:sticky;top:0;background:var(--surface);
}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.84rem}
td.done{color:var(--muted);text-decoration:line-through}
td a{border-bottom-color:transparent}
td a:hover{border-bottom-color:var(--accent)}

.group-head td{
  background:var(--surface-2);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}

.pill{
  display:inline-block;font-family:var(--mono);font-size:.68rem;
  padding:.08rem .5rem;border-radius:999px;white-space:nowrap;
}
.s-red{background:var(--red-soft);color:var(--red)}
.s-amber{background:var(--amber-soft);color:var(--amber)}
.s-yellow{background:var(--yellow-soft);color:var(--yellow)}
.s-green{background:var(--green-soft);color:var(--green)}
.s-grey{background:var(--surface-2);color:var(--muted)}
.s-blue{background:var(--accent-soft);color:var(--accent)}

.bar{display:inline-block;font-family:var(--mono);letter-spacing:-.08em;color:var(--accent)}

.head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem}
.head h2{font-size:1.5rem;letter-spacing:-.02em}
.facts{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}
.facts b{color:var(--ink);font-weight:500}

.filters{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem;align-items:center}
.filters select,.filters input{
  font:inherit;font-size:.85rem;padding:.3rem .7rem;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
}
.chip{
  padding:.25rem .85rem;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);font-size:.82rem;
}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

.tick{width:1.7rem;text-align:center}
.tick input{width:1rem;height:1rem;accent-color:var(--accent);cursor:pointer}

/* ── правка прямо в таблице */
.edit{
  font:inherit;font-size:.84rem;padding:.15rem .4rem;border-radius:6px;
  border:1px solid transparent;background:transparent;color:inherit;max-width:11rem;
}
.edit:hover{border-color:var(--line);background:var(--surface)}
.edit:focus{border-color:var(--accent);background:var(--surface);outline:none}
.saved{animation:flash .9s ease-out}
@keyframes flash{from{background:var(--green-soft)}to{background:transparent}}

.hist{font-size:.82rem;color:var(--muted)}
.hist b{color:var(--ink);font-weight:500}

.empty{padding:2.5rem;text-align:center;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:12px}

/* ── календарь месяца */
.cal-head{
  display:grid;grid-template-columns:repeat(7,1fr);gap:1px;
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}
.cal-head div{padding:.35rem .5rem}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cal-cell{background:var(--surface);min-height:7.5rem;padding:.4rem .45rem;display:flex;flex-direction:column;gap:.18rem}
.cal-out{background:var(--surface-2)}
.cal-today{box-shadow:inset 0 0 0 2px var(--accent)}
.cal-day{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.76rem;color:var(--muted)}
.cal-visit{
  font-size:.7rem;color:var(--accent);background:var(--accent-soft);
  padding:.02rem .45rem;border-radius:999px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;align-self:flex-start;max-width:100%;
}
.cal-task{font-size:.74rem;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-task.done{color:var(--muted);text-decoration:line-through}
.cal-role{font-family:var(--mono);font-size:.62rem;color:var(--faint)}
.cal-more{font-size:.7rem;color:var(--faint)}
@media (max-width:760px){
  .cal{grid-template-columns:repeat(2,1fr)}
  .cal-head{display:none}
  .cal-out{display:none}
  .cal-cell{min-height:5rem}
}

/* ── доска по фазам */
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.2rem;align-items:start}
.col{display:flex;flex-direction:column;gap:.5rem}
.col-head{
  font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);padding-bottom:.4rem;border-bottom:2px solid var(--accent);
}
.kcard{
  display:flex;flex-direction:column;gap:.35rem;padding:.75rem .85rem;border-radius:10px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
}
.kcard:hover{border-color:var(--accent);color:var(--ink)}
.kname{font-weight:500;font-size:.9rem;line-height:1.3}
.kmeta{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;color:var(--muted)}

@media (max-width:640px){
  .topbar{gap:.7rem}
  .topbar-right{width:100%}
  #search{flex:1}
  main{padding-inline:16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ── карточка с полями: две колонки на широком, одна на телефоне */
.fields{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.field{
  background:var(--surface);padding:.5rem .8rem;
  display:flex;align-items:center;gap:.8rem;justify-content:space-between;
}
.flabel{
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  white-space:nowrap;
}
.field .edit{flex:1;min-width:0;max-width:none;text-align:right}
.field input[type="checkbox"].edit{flex:0 0 auto}

/* ═══ Дизайн-проход: навигация, тема, загрузка, пустые состояния ═══ */

/* ── «Ещё»: восемь редких разделов с подписями, что там внутри */
.more{position:relative;display:inline-block}
.more-btn{
  padding:.3rem .75rem;border:0;border-radius:999px;background:none;
  color:var(--muted);font-size:.9rem;
}
.more-btn:hover,.more-btn[aria-expanded="true"]{background:var(--surface-2);color:var(--ink)}
.more-btn::after{content:' ▾';font-size:.7em;opacity:.6}
.more-menu{
  position:absolute;left:0;top:calc(100% + .45rem);z-index:40;min-width:19rem;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 34px rgba(12,13,16,.14);overflow:hidden;
}
.more-menu a, .more-menu .more-item{
  display:flex;flex-direction:column;gap:.1rem;padding:.55rem .9rem;border:0;
  border-bottom:1px solid var(--line);color:var(--ink);
}
.more-menu a:last-child, .more-menu .more-item:last-child{border-bottom:0}
.more-menu a:hover, .more-menu .more-item:hover{background:var(--surface-2);color:var(--ink)}
.more-menu .more-item{width:100%;border-left:0;border-right:0;border-top:0;background:none;font:inherit;text-align:left;cursor:pointer;color:inherit}
.more-menu a.on{background:var(--accent-soft)}
.more-menu b{font-weight:500;font-size:.9rem}
.more-menu span{font-size:.76rem;color:var(--muted)}

.icon-btn{
  width:2rem;height:2rem;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);line-height:1;font-size:.95rem;
}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.who{font-size:.85rem;color:var(--muted)}

/* ── счётчики на «Сегодня» кликабельны: цифра ведёт туда, где её разбирают */
a.card{border:0;display:block;color:inherit}
a.card:hover{background:var(--surface-2);color:inherit}

/* ── загрузка: каркас вместо слова «Загружаю» — глаз не дёргается при подмене */
.skeleton{display:flex;flex-direction:column;gap:.55rem}
.sk-row{
  height:2.1rem;border-radius:8px;
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--line) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:sk 1.3s ease-in-out infinite;
}
.sk-row:nth-child(1){height:3.6rem}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ── пустое состояние: объясняем, а не констатируем */
.empty{display:flex;flex-direction:column;gap:.35rem;align-items:center}
.empty b{font-weight:500;color:var(--ink);font-size:.95rem}
.empty span{font-size:.85rem;max-width:34rem}

/* ── заметная полоса прогресса в шапке кейса */
.progress{display:flex;align-items:center;gap:.7rem;margin:.2rem 0 .1rem}
.progress-track{
  flex:1;max-width:22rem;height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden;
}
.progress-fill{height:100%;background:var(--accent);border-radius:999px}
.progress-num{font-family:var(--mono);font-size:.8rem;color:var(--muted);white-space:nowrap}

/* ── таблицы дышат ровнее, первая колонка держится при горизонтальной прокрутке */
tbody tr{transition:background .12s ease}
.tablebox table{min-width:100%}

@media (max-width:820px){
  .topbar nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.15rem}
  .topbar nav a,.more-btn{white-space:nowrap}
  .more-menu{left:auto;right:0}
}

/* ═══ Уведомления, диалоги, палитра команд ═══ */

.toasts{
  position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));
  z-index:60;display:flex;flex-direction:column;gap:.5rem;pointer-events:none;
}
.toast{
  background:var(--ink);color:var(--on-accent);padding:.6rem 1rem;border-radius:10px;
  font-size:.88rem;max-width:min(26rem,86vw);box-shadow:0 8px 24px rgba(12,13,16,.22);
  animation:toast-in .22s ease-out;
}
.toast-error{background:var(--red);color:#fff}
.toast.out{opacity:0;transform:translateY(6px);transition:opacity .26s,transform .26s}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.overlay{
  position:fixed;inset:0;z-index:70;background:rgba(12,13,16,.42);
  display:flex;align-items:flex-start;justify-content:center;
  padding:min(14vh,7rem) 16px 16px;backdrop-filter:blur(2px);
}
.dialog{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:1.4rem 1.5rem;width:min(26rem,100%);display:flex;flex-direction:column;gap:.6rem;
  box-shadow:0 20px 50px rgba(12,13,16,.28);
}
.dialog h3{margin:0;font-size:1.05rem;font-weight:500}
.dlg-text{margin:0;font-size:.9rem;color:var(--muted)}
.dlg-input{
  font:inherit;padding:.55rem .75rem;border:1px solid var(--line);border-radius:10px;
  background:var(--ground);color:var(--ink);
}
.dlg-input:focus{border-color:var(--accent);outline:none}
.dlg-buttons{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.5rem}

.palette{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  width:min(34rem,100%);overflow:hidden;box-shadow:0 20px 50px rgba(12,13,16,.28);
}
#pal-input{
  width:100%;font:inherit;font-size:1rem;padding:.9rem 1.1rem;border:0;
  border-bottom:1px solid var(--line);background:var(--surface);color:var(--ink);
}
#pal-input:focus{outline:none}
.pal-list{max-height:min(22rem,50vh);overflow:auto}
.pal-item{
  display:flex;align-items:baseline;gap:.6rem;padding:.5rem 1.1rem;cursor:pointer;
}
.pal-item.sel{background:var(--accent-soft)}
.pal-kind{
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  min-width:4.2rem;
}
.pal-item b{font-weight:500}
.pal-hint{font-size:.8rem;color:var(--muted)}
.pal-empty{padding:1.2rem;text-align:center;color:var(--muted);font-size:.9rem}
.pal-foot{
  padding:.5rem 1.1rem;border-top:1px solid var(--line);font-size:.74rem;color:var(--faint);
}
kbd{
  font-family:var(--mono);font-size:.72em;border:1px solid var(--line);border-radius:4px;
  padding:0 .3em;margin-right:.15em;
}

/* ── календарь: день кликается, в ячейке роли с числами */
a.cal-cell{border:0;color:inherit;text-decoration:none}
a.cal-cell:hover{background:var(--surface-2);color:inherit}
.cal-picked{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft)}
.cal-num{font-size:.85rem;color:var(--ink)}
.cal-done{font-family:var(--mono);font-size:.68rem;color:var(--green)}
.cal-roles{display:flex;flex-direction:column;gap:.12rem;margin-top:.15rem}
.cal-role-chip{
  font-size:.7rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cal-role-chip b{color:var(--ink);font-weight:500}
.day-panel{
  margin-top:1.6rem;padding-top:1.4rem;border-top:2px solid var(--accent);
}

/* ── таймлайн кейса: три фазы регламента и где мы сейчас */
.timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.9rem;margin-bottom:1.1rem}
.tl-phase{display:flex;flex-direction:column;gap:.3rem}
.tl-bar{height:5px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.tl-fill{height:100%;border-radius:999px;background:var(--line-strong);opacity:.25}
.tl-name{font-size:.82rem;color:var(--muted)}
.tl-num{font-family:var(--mono);font-size:.7rem;color:var(--faint)}
.tl-done .tl-fill{background:var(--green);opacity:1}
.tl-done .tl-name{color:var(--muted)}
.tl-started .tl-fill{background:var(--accent);opacity:.55}
.tl-here .tl-fill{background:var(--accent);opacity:1}
.tl-here .tl-name{color:var(--ink);font-weight:500}
.tl-here .tl-num{color:var(--accent)}
.tl-next{
  display:flex;gap:.7rem;align-items:flex-start;padding:.85rem 1rem;
  background:var(--accent-soft);border-radius:10px;font-size:.92rem;
}
.tl-dot{
  width:.55rem;height:.55rem;border-radius:999px;background:var(--accent);
  margin-top:.5rem;flex:0 0 auto;
}
.tl-next-label{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Панель снизу только на телефоне. Правило объявлено ДО медиазапроса:
   если поставить после, оно перебьёт его — специфичность та же, побеждает
   последнее. На этом я уже один раз попался. */
.tabbar{display:none}

/* ═══════════════════════════════════════════════════════════════
   Телефон. Не «уменьшенный компьютер», а другой способ показать то же.

   Главное — таблицы. Семь колонок на экране 390px листать невозможно,
   поэтому строка разворачивается в карточку: подпись слева, значение справа.
   Подписи берутся из data-label, его проставляет labelCells() в app.js.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  html,body{overflow-x:hidden;max-width:100%}
  body{font-size:15.5px}                 /* 14.5 на телефоне мелковато */
  main{padding:1rem 14px calc(5.5rem + env(safe-area-inset-bottom, 0px))}

  /* ── таблица → карточки */
  .tablebox{border:0;background:none;border-radius:0;overflow:visible}
  .tablebox table,.tablebox tbody,.tablebox tr,.tablebox td{display:block;width:100%}
  .tablebox thead{display:none}
  .tablebox tr{
    background:var(--surface);border:1px solid var(--line);border-radius:12px;
    margin-bottom:.6rem;padding:.35rem .2rem;
  }
  .tablebox tr:hover{background:var(--surface)}
  /* Grid, а не flex: у безымянного текста внутри flex остаётся min-width:auto,
     и длинное название компании растягивает страницу за край экрана.
     minmax(0,1fr) снимает это ограничение — колонка честно сжимается. */
  .tablebox td{
    border:0;display:grid;grid-template-columns:7.5rem minmax(0,1fr);
    gap:.7rem;align-items:baseline;padding:.32rem .8rem;text-align:right;
    /* Элементы grid по умолчанию тянутся во всю ячейку — плашка статуса
       из-за этого растягивалась на полстроки. Прижимаем значение вправо. */
    justify-items:end;
    white-space:normal;overflow-wrap:anywhere;
  }
  .tablebox td.n{white-space:normal}
  .tablebox td::before{white-space:normal}
  .tablebox td::before{
    content:attr(data-label);justify-self:start;
    font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--faint);text-align:left;
  }
  /* Ячейка без подписи (галочка, кнопка) занимает всю ширину и не притворяется строкой. */
  .tablebox td:not([data-label]),
  .tablebox td[data-label=""]{grid-template-columns:1fr;text-align:left;justify-items:start}
  .tablebox td:not([data-label])::before,
  .tablebox td[data-label=""]::before{display:none}
  .tablebox td:empty{display:none}
  /* Первая колонка — заголовок карточки: крупнее и без подписи. */
  .tablebox tr td:first-child{
    display:block;font-size:1rem;font-weight:500;text-align:left;padding-top:.5rem;
  }
  .tablebox tr td:first-child::before{display:none}
  .tablebox td.tick{display:block;text-align:left}
  .tablebox td.tick input{width:1.4rem;height:1.4rem}     /* палец, а не мышь */
  .group-head td{background:var(--surface-2);border-radius:8px}

  /* ── шапка: логотип, поиск и меню внизу */
  .topbar{padding:.5rem 14px;gap:.6rem}
  .topbar nav{display:none}
  .brand img{height:20px}
  .topbar{flex-wrap:wrap}
  #search{min-width:0;flex:1 1 100%;order:3;width:100%}
  .brand{order:1}
  .topbar-right{order:2;flex:0 0 auto;margin-left:auto}
  .topbar-right{flex:1;gap:.5rem}
  .who{display:none}
  #logout{padding:.28rem .7rem}

  /* ── нижняя панель: большой палец достаёт до неё, а не до верха экрана */
  .tabbar{
    display:flex;
    position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;
    background:var(--surface);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .tabbar a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:.1rem;
    padding:.5rem .2rem .45rem;border:0;color:var(--muted);font-size:.66rem;
  }
  .tabbar a .ic{font-size:1.15rem;line-height:1}
  .tabbar a.on{color:var(--accent)}
  .tabbar a:hover{color:var(--accent)}

  /* ── карточки полей в одну колонку */
  .fields{grid-template-columns:1fr}
  .field{justify-content:space-between}
  .field .edit{max-width:60%}

  /* ── прочее */
  .cards{grid-template-columns:repeat(2,1fr)}
  .card .n{font-size:1.5rem}
  .head h2{font-size:1.25rem}
  .timeline{grid-template-columns:1fr;gap:.6rem}
  .board{grid-template-columns:1fr}
  .search-results{right:14px;left:14px;min-width:0}
  .toasts{left:14px;right:14px;bottom:calc(4.5rem + env(safe-area-inset-bottom, 0px))}
  .toast{max-width:none}
  .overlay{padding-top:8vh}
  .newcase{padding:.9rem}
  .nc-grid{grid-template-columns:1fr}
}


/* Страховка от горизонтальной прокрутки. Один длинный текст без пробелов
   (название компании, ссылка, номер) способен растянуть всю страницу —
   и тогда съезжает вообще всё, включая шапку и нижнюю панель. */
@media (max-width: 720px) {
  .tablebox,.tablebox table,.tablebox tr{max-width:100%}
  main > *,.stack > *{min-width:0}
  a,td,th,h1,h2,b,span{overflow-wrap:anywhere}
  .head{max-width:100%}
  .head h2{overflow-wrap:anywhere}
}

/* Полоса «нет связи»: снизу, над нижней панелью, чтобы не спорила с шапкой. */
.offbar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  background:var(--amber-soft);color:var(--amber);
  border-top:1px solid var(--amber);
  padding:.55rem 16px calc(.55rem + env(safe-area-inset-bottom, 0px));
  font-size:.84rem;text-align:center;
}
@media (max-width: 720px){
  .offbar{bottom:calc(3.6rem + env(safe-area-inset-bottom, 0px));padding-bottom:.55rem}
}

/* ── новая задача: поле с микрофоном */
.nt-row{display:flex;gap:.5rem;align-items:stretch}
.nt-row textarea{
  flex:1;font:inherit;font-size:.95rem;padding:.55rem .7rem;border-radius:10px;
  border:1px solid var(--line);background:var(--ground);color:var(--ink);resize:vertical;
}
.nt-row textarea:focus{border-color:var(--accent);outline:none}
/* Форма новой задачи и кейса. Раньше вёрстка была только для телефона,
   и на компьютере поля шли сплошной строкой с подписями вперемешку. */
.newcase{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:1.1rem 1.2rem;margin-bottom:1rem}
.nc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.2rem}
.nc-grid>label{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;color:var(--muted)}
.nc-grid>label:has(.who-pick){grid-column:1/-1}
.nc-grid input:not([type=checkbox]),.nc-grid select{
  font:inherit;font-size:.92rem;padding:.5rem .65rem;border-radius:9px;
  border:1px solid var(--line);background:var(--ground);color:var(--ink);min-width:0}
.nc-grid input:focus,.nc-grid select:focus{border-color:var(--accent);outline:none}
.newcase .chip input[type=checkbox]{margin:0}
@media (max-width:760px){.nc-grid{grid-template-columns:1fr}.newcase{padding:.9rem}}
/* Только что добавленная задача — чтобы было видно, куда она легла. */
tr.just-added>td{background:var(--accent-soft);transition:background .8s}

.mic{
  flex:0 0 auto;width:2.8rem;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);font-size:1.2rem;line-height:1;
}
.mic:hover{border-color:var(--accent)}
.mic.rec{background:var(--red);border-color:var(--red);animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.icon-btn.add{font-size:1.25rem;font-weight:500}

/* ── блоки списка задач
   Срочное, визиты, визы, госорганы, документы, прочее, залежалось.
   Блок складывается: «залежалось» обычно сворачивают и не смотрят каждый день,
   а без складывания 195 строк в одном экране не читаются вовсе. */
.block { border: 1px solid var(--line); border-radius: 12px; margin-bottom: .6rem; background: var(--surface); }
.block > summary {
  cursor: pointer; padding: .6rem .8rem; list-style: none;
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.block > summary::-webkit-details-marker { display: none; }
.block > summary::before { content: '▸'; color: var(--muted); font-size: .8em; }
.block[open] > summary::before { content: '▾'; }
.block > summary:hover { background: var(--accent-soft); border-radius: 12px 12px 0 0; }
.block .hint { font-size: .78rem; margin-left: auto; }
.block .tablebox { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; }

/* Галочка «сделано» и галочка «выбрать» стоят рядом: первая закрывает задачу,
   вторая набирает список для массового действия. Вторая бледнее — она
   служебная, и путать их нельзя. */
td.tick { white-space: nowrap; }
td.tick .pick { opacity: .35; margin-left: .35rem; }
td.tick .pick:checked, td.tick .pick:hover { opacity: 1; }

/* Ручка перетаскивания. Курсор меняется на всей строке: хватать за три точки
   на телефоне невозможно, а за строку — можно. */
tr[draggable] { cursor: grab; }
tr.dragging { opacity: .45; }
td.grip { color: var(--muted); text-align: center; user-select: none; }

/* Панель массовых действий липнет к низу: выбрав двадцать задач, человек уже
   прокрутил список, и кнопки наверху ему не видны. */
.bulkbar {
  position: sticky; bottom: .6rem; z-index: 5;
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  padding: .5rem .7rem; margin-bottom: .6rem;
  border: 1px solid var(--ink); border-radius: 999px;
  background: var(--ink); color: var(--on-accent);
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.bulkbar .count { font-weight: 600; }
.bulkbar button {
  background: var(--on-accent); color: var(--ink); border: 0;
  border-radius: 999px; padding: .28rem .7rem; font: inherit; cursor: pointer;
}
.bulkbar button.ghost { background: transparent; color: var(--on-accent); border: 1px solid currentColor; }

@media (max-width: 720px) {
  .block .hint { display: none; }
  .bulkbar { bottom: 4rem; }     /* не под таббаром */
}
.nowrap { white-space: nowrap; }

/* Выбор нескольких исполнителей. Раньше это был <select> на одного: Настя
   спросила «могу выбрать и Дане, и Вите?» — теперь можно, и заводятся две
   задачи, по одной каждому. */
.who-pick { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; }
.who-pick .chip { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.who-pick .chip:has(input:checked) { background: var(--ink); color: var(--on-accent); border-color: var(--ink); }

/* Правка регламента прямо в таблице: поле выглядит как текст, пока в него
   не встали. Рамка у каждой ячейки превратила бы таблицу в анкету. */
.cell {
  width: 100%; border: 1px solid transparent; background: transparent;
  font: inherit; color: inherit; border-radius: 6px; padding: .15rem .3rem;
}
.cell:hover { border-color: var(--line); }
.cell:focus { border-color: var(--accent); outline: none; background: var(--surface); }
.cell:disabled { opacity: .5; }
.linkish {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  font: inherit; padding: .1rem .3rem; border-radius: 6px;
}
.linkish:hover { color: var(--red); background: var(--red-soft); }

/* Название шага — самое длинное в строке: отдаём ему место, а не делим
   поровну. Обрезанное «Апостилирование, перев…» не читается. */
td.wide { min-width: 22rem; }
@media (max-width: 720px) { td.wide { min-width: 0; } }

/* Шаги кейса на телефоне: один шаг — две строки, а не карточка из шести.

   Общее правило «таблица → карточки» хорошо для списков в три-четыре
   колонки, но у шагов их восемь, и каждый шаг разворачивался в шесть строк:
   галочка, номер, название, роль, срок, статус. В рабочей визе двадцать
   шесть шагов — карточка кейса вырастала до десяти тысяч пикселей, и до
   нужного шага приходилось листать минуту. Даня работает только с телефона,
   и это главный экран его дня.

   Раскладка задана СЕТКОЙ с явными местами, а не переносом строк: при
   автоматическом переносе роль то поднималась к названию, то падала вниз —
   в зависимости от длины названия, то есть у каждого шага по-своему.

       [✓] [№] название шага          [напомнить]
            роль   срок   статус
            перенос …

   Подписи колонок убраны: дата видна датой, роль словом. Подпись осталась
   только у причины переноса — по ней иначе не догадаться. */
@media (max-width: 720px) {
  .steps-table .tablebox tr{
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr) auto auto;
    gap:.2rem .5rem;align-items:center;padding:.55rem .75rem;
  }
  .steps-table .tablebox td{
    display:block;width:auto;border:0;padding:0;
    text-align:left;white-space:normal;
  }
  .steps-table .tablebox td::before{display:none}

  .steps-table .tablebox tr td:first-child{
    grid-area:1/1;display:flex;align-items:center;padding:0;font-size:inherit;font-weight:400;
  }
  .steps-table .tablebox td:nth-child(2){grid-area:1/2;font-size:.78rem;color:var(--faint)}
  .steps-table .tablebox td:nth-child(3){grid-area:1/3/auto/span 2;font-size:.95rem;font-weight:500;min-width:0}
  .steps-table .tablebox td:nth-child(8){grid-area:1/5;justify-self:end}
  .steps-table .tablebox td:nth-child(8) .ghost{font-size:.75rem;padding:.2rem .5rem}

  .steps-table .tablebox td:nth-child(4){grid-area:2/2;font-size:.78rem;color:var(--muted)}
  .steps-table .tablebox td:nth-child(5){grid-area:2/3;font-size:.78rem}
  .steps-table .tablebox td:nth-child(5) .edit{
    font-size:.78rem;padding:.05rem .15rem;max-width:none;width:auto;text-align:left;
  }
  .steps-table .tablebox td:nth-child(6){
    grid-area:2/4/auto/span 2;justify-self:end;font-size:.78rem;color:var(--muted);white-space:nowrap;
  }
  .steps-table .tablebox td:nth-child(7){
    grid-area:3/2/auto/span 4;font-size:.78rem;color:var(--muted);
  }
  .steps-table .tablebox td:nth-child(7):empty{display:none}
  .steps-table .tablebox td:nth-child(7)::before{
    display:inline;content:'перенос ';font-size:.78rem;letter-spacing:0;
    text-transform:none;color:var(--faint);
  }
}


/* ── предложение поставить приложение
   Полоска снизу, а не всплывашка посередине: она не загораживает работу,
   и её легко закрыть одним движением большого пальца. */
.installbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(.8rem + env(safe-area-inset-bottom));
  z-index: 60; width: min(32rem, calc(100vw - 1.6rem));
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .8rem;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 10px 34px rgba(0,0,0,.16);
  animation: ib-in .22s ease-out;
}
@keyframes ib-in { from { opacity: 0; transform: translate(-50%, 8px); } }
.ib-text { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; }
.ib-text span { font-size: .82rem; color: var(--muted); }
.installbar button {
  border: 0; border-radius: 999px; padding: .4rem .9rem;
  font: inherit; cursor: pointer; white-space: nowrap;
  background: var(--ink); color: var(--on-accent);
}
.installbar button.ghost {
  background: transparent; color: var(--muted); padding: .4rem .5rem;
}
/* Над таббаром на телефоне, иначе полоска ложится прямо на кнопки разделов. */
@media (max-width: 720px) { .installbar { bottom: calc(4.2rem + env(safe-area-inset-bottom)); } }

/* ── карточка задачи на телефоне
   Список задач — единственный экран, который открывают на ходу, и у него своя
   беда: строка таблицы разворачивается в карточку на треть экрана, где больше
   половины места занимают прочерки и служебные значки. Помещалось три задачи.
   Правим именно эту таблицу, не трогая остальные. */
@media (max-width: 720px) {
  /* Заголовок карточки — название задачи. Привязываться к первой колонке
     нельзя: там галочки, и порядок колонок уже однажды менялся. */
  .tablebox tr td.title {
    display: block; font-size: 1rem; font-weight: 500;
    text-align: left; padding: .1rem .8rem .35rem;
  }
  .tablebox tr td.title::before { display: none; }
  /* А колонка с галочками перестаёт притворяться заголовком. */
  .tablebox tr td.tick:first-child { font-size: inherit; font-weight: 400; padding-bottom: 0; }

  /* Перетаскивание пальцем всё равно не работает — ручка только занимает строку. */
  .tablebox td.grip { display: none; }

  /* Пустое значение («—») строки не стоит: оно ничего не сообщает,
     а места занимает столько же, сколько настоящее. */
  .tablebox td[data-label]:has(> .muted:only-child) { display: none; }

  /* Клиент, кейс, срок и статус — в одну строку через точку, а не четырьмя
     подписанными рядами: подписи «КЛИЕНТ», «КЕЙС» на телефоне очевидны
     из самого значения. */
  .tablebox tr td[data-label]:not(.title) {
    grid-template-columns: minmax(0, 1fr); justify-items: start; text-align: left;
    padding: .1rem .8rem; font-size: .86rem; color: var(--muted);
  }
  .tablebox tr td[data-label]:not(.title)::before {
    display: none;
  }
  .tablebox tr { padding: .35rem .2rem .5rem; }
}

/* Ссылка внутри сообщения об ошибке входа: «почистить и перезагрузить».
   Красный текст со ссылкой того же цвета неразличим — подчёркиваем. */
.error a { color: inherit; text-decoration: underline; }

/* Подсказка под формой входа. Половина команды не знает, что пароль не нужен:
   у них привязан Telegram, и бот присылает код. Без этой строки они упираются
   в поле «Пароль» и дальше не идут. */
.hint-small { font-size: .78rem; line-height: 1.45; margin: .2rem 0 0; }

/* Опасное действие выглядит опасным, но не кричит: красная рамка и текст,
   без заливки. Залитая красным кнопка притягивает случайное нажатие. */
.ghost.danger { color: var(--red); border-color: var(--red); }
.ghost.danger:hover { background: var(--red-soft); }

/* ── «продлеваем / не продлеваем» и фильтры по дате

   Разметка идёт прямо из таблицы: компанию размечают тогда, когда она
   всплыла в работе, а не отдельным подходом к списку из 248 строк. Поэтому
   переключатель должен быть маленьким и не кричать — он не кнопка действия,
   а поле карточки. Цветом отмечаем только ответ, пустое остаётся серым:
   «не решено» это не тревога, это просто ещё не дошли руки. */
.renew-pick{
  font:inherit;font-size:.8rem;padding:.18rem .4rem;border-radius:8px;
  border:1px solid var(--line);background:var(--surface);color:var(--faint);max-width:11rem;
}
.renew-pick:focus{outline:none;border-color:var(--accent)}
.renew-pick.yes{color:var(--green);border-color:var(--green)}
.renew-pick.no{color:var(--muted)}

.until{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--muted)}
.until input[type=date]{
  font:inherit;font-size:.82rem;padding:.25rem .45rem;border-radius:8px;
  border:1px solid var(--line);background:var(--ground);color:var(--ink);
}
.until input[type=date]:focus{outline:none;border-color:var(--accent)}
@media (max-width: 720px){
  .until{flex:1 1 100%;justify-content:space-between}
  .renew-pick{max-width:none;width:100%}
}

/* Задача в списке: название открывает окно правки, заметка — под ним.
   Настя 09.10.2026: дописывать «что сделано и чего ждём» прямо к задаче. */
.task-edit{color:inherit;text-decoration:none;border-bottom:1px dashed var(--line-strong)}
.task-edit:hover{color:var(--accent);border-bottom-color:var(--accent)}
.task-note{margin-top:.25rem;font-size:.82rem;color:var(--muted);white-space:pre-wrap}
.task-editor textarea{font:inherit;font-size:.92rem;padding:.5rem .65rem;border-radius:9px;
  border:1px solid var(--line);background:var(--ground);color:var(--ink);resize:vertical}
.task-editor textarea:focus{border-color:var(--accent);outline:none}
#nt-case-msg{font-size:.78rem}