/* ═══ Задачник — вариант Б «Командный центр» ═══ */

:root{
  --bg:#080B14; --panel:#0D1220; --card:#111827; --raise:#161E30;
  --fg:#F3F7FB; --muted:#A7B4C6; --faint:#7C8CA6;
  --line:#1E2739; --line2:#293349; --hair:#131A29;
  --acc:#22C55E; --acc-on:#05140B; --acc-dim:#14361F;
  --star:#F5C242; --danger:#F87171; --danger-dim:#3B1A1A;
  --info:#60A5FA; --info-dim:#152A45;
  --f-body:'Fira Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-num:'Fira Code','SF Mono',ui-monospace,monospace;
  --side-w:228px; --right-w:268px; --tabs-h:calc(74px + env(safe-area-inset-bottom));
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);
  font-size:14px;-webkit-font-smoothing:antialiased;overscroll-behavior:none;
}
button,input,textarea{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
svg{display:block;flex:none}
.mono{font-family:var(--f-num);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
[hidden]{display:none!important}

/* ═══ Экран входа ═══ */
.gate{min-height:100dvh;display:grid;place-items:center;padding:24px}
.gate-box{width:100%;max-width:360px}
.gate-mark{width:44px;height:44px;border-radius:13px;background:var(--acc);color:var(--acc-on);
  display:grid;place-items:center;font-size:20px;font-weight:700;margin-bottom:22px}
.gate h1{margin:0 0 6px;font-size:22px;font-weight:600;letter-spacing:-.3px}
.gate p{margin:0 0 24px;font-size:13.5px;color:var(--muted);line-height:1.55}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-bottom:6px}
.field input{width:100%;background:var(--card);border:1px solid var(--line2);border-radius:9px;
  padding:11px 13px;font-size:16px;transition:.15s}
.field input:focus{border-color:var(--acc);outline:none}
.gate button[type=submit]{width:100%;background:var(--acc);color:var(--acc-on);font-weight:600;
  padding:12px;border-radius:9px;font-size:15px;margin-top:6px;transition:.15s}
.gate button[type=submit]:disabled{opacity:.5;cursor:default}
.hint{font-size:12.5px;color:var(--faint);line-height:1.5;margin-top:14px}
.err{background:var(--danger-dim);color:var(--danger);border-radius:8px;padding:9px 12px;
  font-size:13px;margin-bottom:14px;line-height:1.45}

/* ═══ Каркас приложения ═══ */
.app{display:flex;height:100dvh;overflow:hidden}

/* — левая колонка — */
.side{width:var(--side-w);flex:none;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:12px 8px 8px}
.brand{display:flex;align-items:center;gap:8px;padding:4px 8px 12px}
.brand .m{width:22px;height:22px;border-radius:6px;background:var(--acc);color:var(--acc-on);
  display:grid;place-items:center;font-size:11px;font-weight:700}
.brand b{font-size:14.5px;font-weight:600}
.brand .out{margin-left:auto;color:var(--faint);padding:4px;border-radius:6px}
.brand .out:hover{color:var(--fg);background:var(--card)}

.nav{display:flex;flex-direction:column;gap:1px}
.nav button{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;
  font-size:14px;color:var(--muted);width:100%;text-align:left;transition:.14s}
.nav button:hover{background:var(--card);color:var(--fg)}
.nav button.on{background:var(--raise);color:var(--fg);font-weight:600;box-shadow:inset 2px 0 0 var(--acc)}
.nav .n{margin-left:auto;font-size:12px;color:var(--faint);font-family:var(--f-num)}
.nav button.on .n{color:var(--acc)}
.nav .n.pill{background:var(--acc-dim);color:var(--acc);padding:0 6px;border-radius:20px;font-weight:600}

.grp{padding:18px 10px 6px;font-size:11px;font-weight:600;letter-spacing:.8px;
  text-transform:uppercase;color:var(--faint);display:flex;align-items:center}
.grp-acts{margin-left:auto;display:flex;gap:2px}
.grp-acts button{padding:4px;border-radius:5px;color:var(--faint);transition:.14s}
.grp-acts button:hover{color:var(--acc);background:var(--card)}
.tree{overflow:auto;flex:1;padding:0 1px}
.soon{padding:6px 10px;font-size:12.5px;color:var(--faint);line-height:1.55}

/* — центр — */
.main{flex:1;display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line)}
.top{display:flex;align-items:center;gap:11px;padding:13px 20px;border-bottom:1px solid var(--line);
  background:var(--panel);flex:none}
.top h2{margin:0;font-size:17.5px;font-weight:600}
.top .dt{font-size:13.5px;color:var(--faint);font-family:var(--f-num);white-space:nowrap}
.d-short{display:none}
.vr{width:1px;height:16px;background:var(--line2)}
.stat{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.trk{width:64px;height:4px;border-radius:20px;background:var(--line2);overflow:hidden}
.trk i{display:block;height:100%;background:var(--acc);transition:width .3s}
.top .acts{margin-left:auto;display:flex;gap:7px}
.btn{display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:7px;font-size:12.5px;
  font-weight:500;background:var(--card);border:1px solid var(--line2);color:var(--muted);transition:.14s}
.btn:hover{color:var(--fg);border-color:#3A465F}
.btn.pri{background:var(--acc);color:var(--acc-on);border-color:var(--acc);font-weight:600}
.btn.pri:hover{background:#2BD968}

/* — быстрый ввод — */
.quick{display:flex;align-items:center;gap:10px;padding:10px 20px;border-bottom:1px solid var(--line);
  background:var(--bg);flex:none}
.quick input{flex:1;background:transparent;border:0;font-size:15.5px;padding:5px 0}
.quick input::placeholder{color:var(--faint)}
.quick input:focus{outline:none}
.quick .plus{color:var(--faint)}
.quick.on .plus{color:var(--acc)}
.quick .go{font-size:12px;color:var(--faint);font-family:var(--f-num);border:1px solid var(--line2);
  border-radius:5px;padding:2px 7px}

/* — список — */
.list{flex:1;overflow:auto;padding-bottom:40px}
.sec h3{margin:0;padding:14px 20px 7px;font-size:11.5px;font-weight:600;letter-spacing:.8px;
  text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:7px;
  background:var(--bg);position:sticky;top:0;z-index:2}
.sec.late h3{color:var(--danger)}
.sec h3 .c{font-weight:400;opacity:.7}

.item{border-bottom:1px solid var(--hair);position:relative;overflow:hidden}
.item.open{background:var(--card);box-shadow:inset 2px 0 0 var(--acc)}
.row{display:flex;align-items:flex-start;gap:11px;padding:11px 20px;transition:background .13s;
  cursor:pointer;position:relative;background:var(--bg);touch-action:pan-y;
  -webkit-user-select:none;user-select:none}
.item.open .row{background:var(--card)}
.row:hover{background:var(--card)}
.item.late{box-shadow:inset 2px 0 0 var(--danger)}
.item.open.late{box-shadow:inset 2px 0 0 var(--danger)}
.cb{width:19px;height:19px;flex:none;margin-top:2px;border:1.6px solid #46536D;border-radius:6px;
  display:grid;place-items:center;transition:.15s}
.cb:hover{border-color:var(--acc)}
.cb.ok{background:var(--acc);border-color:var(--acc)}
.cb svg{opacity:0}
.cb.ok svg{opacity:1}
.rc{flex:1;min-width:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap;row-gap:6px}
.rc .tags{display:contents}
.rt{font-size:15.5px;line-height:1.4;word-break:break-word}
.row.done .rt{color:var(--faint);text-decoration:line-through}
.tag{font-size:11.5px;padding:2px 8px;border-radius:5px;font-family:var(--f-num);
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  background:var(--card);border:1px solid var(--line2);color:var(--faint)}
.tag.c{background:var(--acc-dim);color:var(--acc);border-color:transparent}
.tag.d{background:var(--danger-dim);color:var(--danger);border-color:transparent}
.tag.r{background:#3A2E0E;color:var(--star);border-color:transparent}

.path{font-size:12.5px;color:var(--faint);margin-left:auto;white-space:nowrap}
.tm{font-size:13.5px;color:var(--muted);font-family:var(--f-num);flex:none;margin-top:3px;
  white-space:nowrap}
.tm.late{color:var(--danger)}
.st{flex:none;color:#2E3A50;padding:3px;border-radius:5px;transition:.14s;margin-top:-1px}
.st:hover{color:var(--star);background:var(--raise)}
.st.on{color:var(--star)}
.kill{flex:none;color:#2E3A50;padding:3px;border-radius:5px;opacity:0;transition:.14s;margin-top:-1px}
.row:hover .kill{opacity:1}
.kill:hover{color:var(--danger);background:var(--raise)}

.empty{padding:48px 20px;text-align:center;color:var(--faint)}
.empty svg{margin:0 auto 12px;opacity:.4}
.empty b{display:block;font-size:15.5px;font-weight:500;color:var(--muted);margin-bottom:6px}
.empty span{font-size:13.5px;line-height:1.6}

/* — правая колонка — */
.right{width:var(--right-w);flex:none;background:var(--panel);display:flex;flex-direction:column}
.rh{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.rh b{font-size:13.5px;font-weight:600;text-transform:capitalize}
.rh .arr{margin-left:auto;display:flex;gap:2px}
.rh .arr button{color:var(--faint);padding:3px;border-radius:5px}
.rh .arr button:hover{color:var(--fg);background:var(--card)}
.mini{padding:11px 14px;border-bottom:1px solid var(--line)}
.mgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.mgrid i{font-style:normal;font-size:10.5px;color:var(--faint);padding-bottom:6px;font-weight:600}
.mgrid button{font-size:12px;padding:6px 0;border-radius:5px;color:var(--muted);
  font-family:var(--f-num);position:relative;transition:.13s}
.mgrid button:hover{background:var(--card);color:var(--fg)}
.mgrid button.o{color:#2E3A50}
.mgrid button.now{box-shadow:inset 0 0 0 1px var(--line2)}
.mgrid button.sel{background:var(--acc);color:var(--acc-on);font-weight:600}
.mgrid button.has::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  width:3px;height:3px;border-radius:50%;background:var(--info)}
.mgrid button.sel.has::after{background:var(--acc-on)}

.tl{flex:1;overflow:auto;padding:10px 14px 24px}
.tl-empty{font-size:12.5px;color:var(--faint);line-height:1.6;padding:6px 2px}
.hr{display:flex;gap:9px;align-items:flex-start;min-height:32px}
.hr .h{font-size:11.5px;color:var(--faint);font-family:var(--f-num);width:36px;flex:none;padding-top:2px}
.hr .ln{flex:1;border-top:1px solid var(--line);padding-top:2px;min-width:0}
.ev{background:var(--info-dim);border-left:2px solid var(--info);border-radius:0 6px 6px 0;
  padding:5px 8px;margin:0 0 6px}
.ev b{display:block;font-weight:500;font-size:13px;line-height:1.35}
.ev span{color:var(--muted);font-size:11.5px;font-family:var(--f-num)}
.ev.done{opacity:.5}

/* — низ экрана на телефоне — */
.fab,.tabs{display:none}

/* ═══ Телефон ═══ */
@media (max-width:860px){
  .app{flex-direction:column}
  .side,.right{display:none}
  .main{border-right:0;flex:1;min-height:0}
  .top{padding:calc(11px + env(safe-area-inset-top)) 14px 11px;gap:8px;flex-wrap:nowrap}
  .top h2{font-size:20px;white-space:nowrap}
  .d-long{display:none}
  .d-short{display:inline}
  .top .dt{font-size:13.5px;overflow:hidden;text-overflow:ellipsis}
  .top .vr,.top .trk{display:none}
  .stat{gap:0}
  .top .acts .btn span{display:none}
  .top .acts .btn{padding:7px 9px}
  .quick{padding:12px 16px}
  .quick .go{display:none}
  /* на узком экране метки переносятся — ставим их под названием,
     а не в одну строку с ним, иначе чекбокс уезжает на середину */
  .row{padding:15px 16px;gap:13px;align-items:flex-start}
  .rc{flex-direction:column;align-items:flex-start;gap:7px}
  .rt{font-size:18px;line-height:1.4}
  .rc .tags{display:flex;flex-wrap:wrap;gap:6px}
  .tm{margin-top:4px}
  .st{margin-top:-9px}
  .cb{width:23px;height:23px;border-radius:7px}
  .tag{font-size:13px;padding:3px 10px}
  .path{font-size:13.5px}
  .tm{font-size:15px}
  .st svg{width:20px;height:20px}
  .path{width:100%;margin-left:0;flex-basis:100%}
  .sec h3{padding:17px 16px 8px;font-size:12.5px}
  .kill{opacity:1}
  .list{padding-bottom:calc(var(--tabs-h) + 70px)}

  .fab{display:grid;place-items:center;position:fixed;right:16px;
    bottom:calc(var(--tabs-h) + 14px);width:52px;height:52px;border-radius:16px;
    background:var(--acc);color:var(--acc-on);box-shadow:0 8px 22px rgba(0,0,0,.5);z-index:20}
  .tabs{display:flex;position:fixed;left:0;right:0;bottom:0;height:var(--tabs-h);
    padding:10px 4px env(safe-area-inset-bottom);background:rgba(13,18,32,.97);
    backdrop-filter:blur(14px);border-top:1px solid var(--line);z-index:20}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12.5px;
    font-weight:600;color:var(--muted);position:relative;padding-top:2px}
  .tab svg{width:24px;height:24px}
  .tab:disabled{color:var(--muted)}   /* раздел ещё не готов, но подпись должна читаться */
  .tab.on{color:var(--acc)}
  .tab .bd{position:absolute;top:-3px;margin-left:24px;background:var(--acc);color:var(--acc-on);
    font-size:10px;padding:1px 6px;border-radius:20px;font-weight:700;font-family:var(--f-num)}
}

/* ═══ Всплывающее сообщение ═══ */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:60;
  background:var(--raise);border:1px solid var(--line2);border-radius:10px;padding:10px 16px;
  font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.5);display:flex;align-items:center;gap:10px}
.toast.bad{border-color:#4B2020;background:#20131A}
.toast button{color:var(--acc);font-weight:600;font-size:12.5px}
@media (max-width:860px){.toast{bottom:calc(var(--tabs-h) + 76px)}}

/* ═══ Карточка задачи ═══ */
.sheet-back{position:fixed;inset:0;z-index:70;background:rgba(2,5,12,.72);
  backdrop-filter:blur(3px);display:grid;place-items:center;padding:24px;
  animation:fade .16s ease-out}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(12px) scale(.99)}}

.sheet{width:100%;max-width:560px;max-height:min(86dvh,760px);background:var(--panel);
  border:1px solid var(--line2);border-radius:16px;display:flex;flex-direction:column;
  overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.65);animation:rise .18s ease-out}

.sheet-top{display:flex;align-items:center;gap:8px;padding:12px 14px;
  border-bottom:1px solid var(--line);flex:none}
.sheet-top h3{margin:0;font-size:14px;font-weight:600;color:var(--muted);flex:1}
.sheet-top button{padding:6px;border-radius:7px;color:var(--faint);transition:.14s}
.sheet-top button:hover{background:var(--card);color:var(--fg)}
.sheet-top .st.on{color:var(--star)}
.sheet-top .st:hover{color:var(--star)}
.sheet-top .rm:hover{color:var(--danger)}

.sheet-body{flex:1;overflow:auto;padding:16px 18px 20px;display:flex;flex-direction:column;gap:18px}
/* иначе при длинном содержимом колонка сжимает верхние блоки и режет заголовок */
.sheet-body > *{flex:0 0 auto;min-height:auto}

.ta{width:100%;background:transparent;border:0;resize:none;padding:0;line-height:1.4;
  font-family:inherit;overflow:hidden;display:block}
.ta:focus{outline:none}
#tTitle{font-size:21px;font-weight:600}
#tTitle::placeholder{color:var(--faint);font-weight:500}
#tNotes{font-size:15px;color:#CFD8E6;line-height:1.65;min-height:56px;
  border-left:2px solid var(--line2);padding-left:11px}
#tNotes::placeholder{color:var(--faint)}

.block > h4{margin:0 0 10px;font-size:11.5px;font-weight:600;letter-spacing:.8px;
  text-transform:uppercase;color:var(--faint)}

.sub{display:flex;align-items:center;gap:10px;padding:5px 0}
.sub .b{width:18px;height:18px;flex:none;border:1.6px solid #46536D;border-radius:5px;
  display:grid;place-items:center;transition:.14s}
.sub .b:hover{border-color:var(--acc)}
.sub .b.ok{background:var(--acc);border-color:var(--acc)}
.sub .b svg{opacity:0}
.sub .b.ok svg{opacity:1}
.sub .t{flex:1;font-size:14.5px;background:transparent;border:0;padding:3px 0}
.sub .t:focus{outline:none}
.sub.done .t{color:var(--faint);text-decoration:line-through}
.sub .x{color:#2E3A50;padding:3px;border-radius:5px;opacity:0;transition:.14s}
.sub:hover .x{opacity:1}
.sub .x:hover{color:var(--danger);background:var(--card)}
.sub-add{display:flex;align-items:center;gap:10px;padding:5px 0;color:var(--faint)}
.sub-add input{flex:1;background:transparent;border:0;font-size:14.5px;padding:3px 0}
.sub-add input:focus{outline:none}
.sub-add input::placeholder{color:var(--faint)}

.props{display:grid;grid-template-columns:auto 1fr;gap:11px 14px;align-items:center}
.props label{font-size:13.5px;color:var(--muted)}
.inp{background:var(--card);border:1px solid var(--line2);border-radius:8px;
  padding:9px 11px;font-size:14.5px;width:100%;transition:.14s}
.inp:focus{outline:none;border-color:var(--acc)}
select.inp{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6880' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:15px;padding-right:30px}
.when{display:flex;gap:8px}
.when .inp{flex:1;min-width:0}
input[type=date].inp,input[type=time].inp{font-family:var(--f-num);color-scheme:dark}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12.5px;padding:5px 11px;border-radius:6px;background:var(--card);
  border:1px solid var(--line2);color:var(--muted);font-family:var(--f-num);transition:.14s}
.chip:hover{border-color:#3A465F;color:var(--fg)}
.chip.on{background:var(--acc-dim);border-color:#1E5233;color:var(--acc)}
.chip.new{border-style:dashed;color:var(--faint)}
.chip-input{font-size:11.5px;padding:4px 10px;border-radius:6px;background:var(--card);
  border:1px solid var(--acc);color:var(--fg);font-family:var(--f-num);width:130px}
.chip-input:focus{outline:none}

.sheet-foot{display:flex;align-items:center;gap:9px;padding:12px 16px;
  border-top:1px solid var(--line);background:var(--panel);flex:none}
.sheet-foot .plan-note{margin-right:auto}
.sheet-foot .cancel{padding:9px 15px;border-radius:8px;font-size:14px;color:var(--muted)}
.sheet-foot .cancel:hover{background:var(--card);color:var(--fg)}
.sheet-foot .save{padding:9px 20px;border-radius:8px;font-size:14.5px;font-weight:600;
  background:var(--acc);color:var(--acc-on)}
.sheet-foot .save:hover{background:#2BD968}
.sheet-foot .save:disabled{opacity:.5;cursor:default}
.sheet-err{margin:0 16px 10px;background:var(--danger-dim);color:var(--danger);
  border-radius:8px;padding:8px 11px;font-size:12.5px}

/* — карточка на телефоне: во весь экран — */
@media (max-width:860px){
  .sheet-back{padding:0;place-items:stretch}
  .sheet{max-width:none;max-height:none;height:100dvh;border-radius:0;border:0;
    animation:slide .2s ease-out}
  @keyframes slide{from{transform:translateY(100%)}}
  .sheet-top{padding:calc(10px + env(safe-area-inset-top)) 12px 10px}
  .sheet-body{padding:16px 16px 24px}
  .sheet-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .props{grid-template-columns:1fr;gap:6px}
  .props label{margin-top:6px}
  .sub .x{opacity:1}

  /* Safari приближает страницу, если шрифт в поле меньше 16px */
  input,textarea,select,.inp,.ta,#tNotes,.sub .t,.sub-add input{font-size:16.5px}
  .quick input{font-size:17px}
  .chip-input{font-size:16px;width:150px}
  #tTitle{font-size:22px}
  .sheet-top h3{font-size:15px}
  .props label{font-size:14px}
}

/* ═══ Задача, раскрытая прямо в списке ═══ */
.detail{padding:2px 20px 14px 47px;display:flex;flex-direction:column;gap:13px;
  animation:unfold .16s ease-out}
.detail > *{flex:0 0 auto}
@keyframes unfold{from{opacity:0}}

.detail .dnotes{width:100%;background:transparent;border:0;border-left:2px solid var(--line2);
  padding:1px 0 1px 12px;font-family:inherit;font-size:14px;line-height:1.65;color:#CFD8E6;
  resize:none;overflow:hidden;display:block}
.detail .dnotes:focus{outline:none;border-left-color:var(--acc)}
.detail .dnotes::placeholder{color:var(--faint)}

.detail .dsubs{display:flex;flex-direction:column;gap:1px}
.detail .dhead{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;
  color:var(--faint);margin-bottom:5px}
.detail .dchips{display:flex;flex-wrap:wrap;gap:5px;align-items:center}

.detail .dfoot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;
  color:var(--faint);font-family:var(--f-num)}
.detail .dfoot .grow{margin-left:auto}
.detail .open-full{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:7px;
  background:var(--raise);border:1px solid var(--line2);color:var(--muted);font-size:13px;
  font-family:var(--f-body);transition:.14s}
.detail .open-full:hover{color:var(--fg);border-color:var(--acc)}
.detail .loading{font-size:12.5px;color:var(--faint);padding:4px 0}

@media (max-width:860px){
  .detail{padding:4px 16px 18px 52px;gap:16px}
  .detail .dnotes,.detail .sub .t,.detail .sub-add input{font-size:17px;line-height:1.6}
  .detail .dhead{font-size:12.5px}
  .detail .dfoot{font-size:13.5px}
  .detail .sub .b{width:20px;height:20px}
  .detail .open-full{font-size:14px;padding:7px 12px}
  .detail .sub{padding:7px 0}
}

/* ═══ Смахивание влево — удалить (телефон) ═══ */
.swipe-bg{position:absolute;inset:0;background:var(--danger-dim);display:flex;
  align-items:center;justify-content:flex-end;gap:8px;padding-right:22px;
  color:var(--danger);font-size:12.5px;font-weight:500;opacity:0;pointer-events:none}
.swipe-bg.armed{background:#4A1414}

@media (max-width:860px){
  /* корзину убрали: слишком близко к звёздочке, задевается пальцем */
  .kill{display:none}
  /* зона нажатия звёздочки — во весь палец, значок прежнего размера */
  .st{padding:13px;margin:-13px -9px -13px 0}
}

/* ═══ Удержание пальцем и протягивание окна вниз ═══ */
.row.pressing{background:var(--raise)}

.grabber{display:none}

@media (max-width:860px){
  .grabber{display:flex;justify-content:center;padding:9px 0 3px;
    padding-top:calc(9px + env(safe-area-inset-top));flex:none;touch-action:none}
  .grabber span{width:38px;height:4px;border-radius:20px;background:var(--line2)}
  /* шапку тоже можно тянуть */
  .sheet-top{padding-top:6px;touch-action:none}
}

/* ═══ Свернуть «Сделано» ═══ */
.sec h3 .fold{display:flex;align-items:center;gap:7px;color:inherit;font:inherit;
  letter-spacing:inherit;text-transform:inherit;padding:2px 6px 2px 0;border-radius:6px;
  transition:color .14s}
.sec h3 .fold:hover{color:var(--muted)}
.sec h3 .fold svg{transition:transform .18s ease-out;opacity:.75}
.sec h3 .fold.shut svg{transform:rotate(-90deg)}

@media (max-width:860px){
  /* на телефоне задачи заводим кнопками — строка ввода только мешает */
  .quick{display:none}
  .sec h3 .fold{padding:4px 8px 4px 0}
}

/* ═══ Дерево папок и проектов ═══ */
.tree{padding-bottom:14px}
.tree .empty-tree{padding:8px 11px;font-size:12.5px;color:var(--faint);line-height:1.55}

.node{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;
  font-size:13.5px;color:var(--muted);width:100%;text-align:left;transition:.14s;
  cursor:pointer;position:relative}
.node:hover{background:var(--card);color:var(--fg)}
.node.on{background:var(--raise);color:var(--fg);font-weight:600;box-shadow:inset 2px 0 0 var(--acc)}
.node .n{margin-left:auto;font-size:12px;color:var(--faint);font-family:var(--f-num)}
.node.on .n{color:var(--acc)}
.node .more{opacity:0;padding:3px;margin:-3px -3px -3px 2px;border-radius:5px;color:var(--faint)}
.node:hover .more{opacity:1}
.node .more:hover{color:var(--fg);background:var(--raise)}
.node:hover .n.hide-on-hover{display:none}

.node.folder{font-weight:600;color:#C8D3E2}
.node.folder .caret{transition:transform .16s;opacity:.7}
.node.folder.shut .caret{transform:rotate(-90deg)}
.node.project{padding-left:30px;font-size:13px}
.node.project .dot{width:7px;height:7px;border-radius:2px;flex:none;background:var(--faint)}

/* маленькое меню действий */
.menu{position:fixed;z-index:80;background:var(--raise);border:1px solid var(--line2);
  border-radius:10px;padding:5px;min-width:186px;box-shadow:0 14px 40px rgba(0,0,0,.6)}
.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;
  border-radius:7px;font-size:13.5px;color:var(--muted);text-align:left;transition:.13s}
.menu button:hover{background:var(--card);color:var(--fg)}
.menu button.danger:hover{background:var(--danger-dim);color:var(--danger)}
.menu .sep{height:1px;background:var(--line);margin:5px 4px}

/* переименование прямо в дереве */
.node input.rename{flex:1;min-width:0;background:var(--bg);border:1px solid var(--acc);
  border-radius:6px;padding:4px 7px;font-size:13px;color:var(--fg)}
.node input.rename:focus{outline:none}

/* заголовок проекта в шапке */
.top .kind{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;
  color:var(--faint);margin-right:-4px}

.scrim{display:none}

@media (max-width:860px){
  /* дерево выезжает панелью поверх списка */
  .side{display:flex;position:fixed;top:0;bottom:0;left:0;width:290px;z-index:40;
    transform:translateX(-102%);transition:transform .22s ease-out;
    padding-top:calc(14px + env(safe-area-inset-top));
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
    box-shadow:14px 0 40px rgba(0,0,0,.5)}
  .side.open{transform:none}
  .scrim{display:block;position:fixed;inset:0;z-index:35;background:rgba(2,5,12,.6);
    backdrop-filter:blur(2px)}
  .node{padding:11px 11px;font-size:15px;gap:10px}
  .node.project{padding-left:32px;font-size:14.5px}
  .node .more{opacity:1;padding:8px;margin:-8px -4px -8px 2px}
  .node:hover .n.hide-on-hover{display:inline}
  .grp{padding:18px 11px 7px;font-size:12px}
  .grp-acts button{padding:7px}
  .nav button{padding:11px 11px;font-size:15px}
  .brand{padding:2px 10px 14px}
  .menu button{padding:12px 13px;font-size:15px}
  .menu{min-width:212px}
}