/* Планер — стили. Перенесено из макета (макет.html), правки — здесь. */
:root{
  --page:#ECEEF2; --bg:#F6F7F9; --card:#FFFFFF; --chrome:#F1F2F5;
  --ink:#1A1C21; --ink2:#5B606B; --ink3:#989EA9; --line:#E4E7EC;
  --hover:#F3F5F8; --sel:#EDF3FF; --seg:#ECEEF2; --chip:#EDF3FF;
  --accent:#2F6FEB; --accent-bg:#EAF1FF; --ok:#2E9E62;
  --red:#DC3B41; --red-bg:#FDECEC;
  --p1:#E5484D; --p2:#9DB0D3; --p3:#DDE1E8;
  --shadow:0 1px 2px rgba(16,24,40,.05);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#0C0D10; --bg:#141619; --card:#1C1F24; --chrome:#191B1F;
    --ink:#ECEEF2; --ink2:#A6ACB7; --ink3:#6C727D; --line:#2A2E35;
    --hover:#22262C; --sel:#1E2A40; --seg:#25292F; --chip:#1E2A40;
    --accent:#5B8DEF; --accent-bg:#1E2A40; --ok:#3DBA78;
    --red:#FF6B70; --red-bg:#3A1E21;
    --p1:#FF6369; --p2:#5C6B88; --p3:#3A3F48;
    --shadow:none;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --page:#0C0D10; --bg:#141619; --card:#1C1F24; --chrome:#191B1F;
  --ink:#ECEEF2; --ink2:#A6ACB7; --ink3:#6C727D; --line:#2A2E35;
  --hover:#22262C; --sel:#1E2A40; --seg:#25292F; --chip:#1E2A40;
  --accent:#5B8DEF; --accent-bg:#1E2A40; --ok:#3DBA78;
  --red:#FF6B70; --red-bg:#3A1E21;
  --p1:#FF6369; --p2:#5C6B88; --p3:#3A3F48;
  --shadow:none;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.4;-webkit-text-size-adjust:100%;overscroll-behavior:none}
/* ---------- приложение ---------- */
.app{container:app / inline-size;position:relative;background:var(--bg);color:var(--ink);font-size:15px;overflow:hidden;
  display:flex;flex-direction:column;height:100vh;height:100dvh;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)}
.app[hidden]{display:none}
.app svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
:where(.app,.login) button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.shell{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}

.top{display:flex;align-items:center;gap:16px;padding:12px 24px;border-bottom:1px solid var(--line);background:var(--card)}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;letter-spacing:-.01em}
.logo{color:var(--accent);font-size:21px;display:flex}
.tabs{display:flex;gap:2px;background:var(--seg);padding:3px;border-radius:10px;margin-left:12px}
.tabs button{border:0;background:none;padding:6px 14px;border-radius:8px;font-size:14px;color:var(--ink2);cursor:pointer}
.tabs button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08);font-weight:600}
.me{margin-left:auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink2);
  display:grid;place-items:center;cursor:pointer;font-size:16px}

.body{flex:1;display:flex;min-height:0}
.list-col{flex:1;overflow:auto;min-width:0}
.col-in{max-width:720px;margin:0 auto;padding:22px 24px 90px}
.tab-done .add{display:none}

/* быстрое добавление */
.add{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:26px;box-shadow:var(--shadow)}
.add-row{display:flex;align-items:center;gap:10px;padding:9px 10px 9px 14px}
.add-plus{color:var(--accent);display:flex;font-size:18px}
.add-title{flex:1;border:0;outline:0;background:none;font:inherit;font-size:15px;color:var(--ink);min-width:0;padding:4px 0}
.add-title::placeholder{color:var(--ink3)}
.add-go{border:0;background:var(--accent);color:#fff !important;font-size:14px;font-weight:600;padding:7px 14px;border-radius:8px;cursor:pointer;opacity:.35;pointer-events:none;transition:opacity .15s}
.add.has-text .add-go{opacity:1;pointer-events:auto}
.add-opts{display:none;border-top:1px solid var(--line);padding:10px 14px 12px}
.add.open .add-opts{display:block}
.opt-line{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--card);color:var(--ink2) !important;font-size:13px !important;padding:4px 10px;border-radius:999px;
  cursor:pointer;display:inline-flex;align-items:center;gap:5px;position:relative;white-space:nowrap;line-height:1.35}
.chip.on{background:var(--accent-bg);border-color:var(--accent);color:var(--accent) !important;font-weight:600}
/* Поле даты лежит прозрачным поверх кнопки «Дата»: iPhone открывает календарь только по касанию самого поля. */
.pick input{position:absolute;inset:0;width:100%;height:100%;min-width:0;opacity:0;margin:0;border:0;padding:0;font-size:16px;cursor:pointer;z-index:1}
.seg{display:inline-flex;background:var(--seg);border-radius:9px;padding:2px}
.seg button{border:0;background:none;font-size:13px;padding:4px 10px;border-radius:7px;color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.1);font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;background:var(--pc);display:inline-block}
.p1{--pc:var(--p1)}.p2{--pc:var(--p2)}.p3{--pc:var(--p3)}
.tog{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink2);cursor:pointer;user-select:none}
.tog input{accent-color:var(--accent);width:16px;height:16px;margin:0}
.linkbtn{border:0;background:none;color:var(--accent) !important;font-size:13.5px !important;cursor:pointer;padding:0}
.add-desc{width:100%;margin-top:10px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;font-size:14px;
  background:var(--bg);color:var(--ink);resize:vertical;min-height:58px;outline:0}
.add-desc:focus{border-color:var(--accent)}
.rep{margin-top:10px;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;gap:9px}
.days{display:flex;gap:4px;flex-wrap:wrap}
.day{width:31px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--card);font-size:13px !important;color:var(--ink2) !important;cursor:pointer}
.day.on{background:var(--accent);border-color:var(--accent);color:#fff !important;font-weight:600}
.rep-n{font-size:13.5px;color:var(--ink2);display:flex;align-items:center;gap:8px}
.rep-n input{width:60px;padding:4px 8px;border:1px solid var(--line);border-radius:7px;font:inherit;font-size:14px;background:var(--card);color:var(--ink)}
.rep-hint{font-size:12.5px;color:var(--ink3)}

/* списки */
.sec{margin-bottom:24px}
.sec-h{display:flex;align-items:baseline;gap:8px;padding:0 4px 8px}
.sec-h h3{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em}
.sec-d{color:var(--ink3);font-size:13px}
.sp{flex:1}
.sec-over{color:var(--red);font-size:12.5px;font-weight:600}
.sec-n{color:var(--ink3);font-size:13px;font-variant-numeric:tabular-nums;min-width:12px;text-align:right}
.sec-list{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.empty{padding:13px 16px;color:var(--ink3);font-size:14px}
.empty-big{padding:40px 16px;text-align:center;color:var(--ink3)}
.task{position:relative;display:flex;gap:12px;align-items:flex-start;padding:11px 12px 11px 16px;cursor:pointer;transition:background .12s,opacity .25s}
.task+.task{border-top:1px solid var(--line)}
.task::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--pc)}
.task.open{background:var(--sel)}
.task.fresh{animation:fresh 1.6s ease-out}
@keyframes fresh{0%{background:var(--accent-bg)}100%{background:transparent}}
.check{flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;border:1.6px solid var(--ink3);background:none;
  display:grid;place-items:center;color:transparent !important;cursor:pointer;padding:0;transition:.15s}
.check svg{width:12px;height:12px;stroke-width:3}
.check.on,.task.completing .check{background:var(--ok);border-color:var(--ok);color:#fff !important}
.task.completing{opacity:.35}
.t-main{flex:1;min-width:0}
.t-title{line-height:1.38;overflow-wrap:anywhere}
.t-meta{display:flex;flex-wrap:wrap;gap:5px 10px;margin-top:4px;font-size:12.5px;color:var(--ink3);align-items:center}
.t-meta .m{display:inline-flex;align-items:center;gap:4px}
.badge-over{color:var(--red);background:var(--red-bg);padding:1px 7px;border-radius:6px;font-weight:600}
.lchip{display:inline-flex;align-items:center;gap:4px;padding:0 7px;border-radius:6px;background:var(--chip);color:var(--accent);
  text-decoration:none;font-size:13px;line-height:1.65;vertical-align:1px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lchip svg{width:12px;height:12px}
.t-acts{display:none;gap:4px;flex:none;align-self:center}
.mini{border:1px solid var(--line);background:var(--card);color:var(--ink2) !important;font-size:12.5px !important;padding:3px 9px;border-radius:7px;cursor:pointer;white-space:nowrap;flex:none;align-self:center}
.done-row{cursor:default}
.done-row::before{display:none}
.done-row .t-title{color:var(--ink2)}
.search{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin-bottom:22px;color:var(--ink3);box-shadow:var(--shadow)}
.search input{flex:1;border:0;outline:0;background:none;font:inherit;color:var(--ink);min-width:0}

/* карточка задачи */
.detail{width:410px;flex:none;border-left:1px solid var(--line);background:var(--card);display:none;flex-direction:column;min-height:0}
.has-open .detail{display:flex}
.d-head{display:flex;align-items:center;gap:10px;padding:12px 14px 12px 20px;border-bottom:1px solid var(--line);min-height:52px}
.d-back{display:none;align-items:center;gap:2px;border:0;background:none;color:var(--accent) !important;font-size:16px !important;cursor:pointer;padding:4px 4px 4px 0}
.d-back svg{font-size:22px}
.d-status{font-size:13px;color:var(--ink3)}
.d-status .red{color:var(--red);font-weight:600}
.d-x{margin-left:auto;border:0;background:none;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--ink3) !important;cursor:pointer;font-size:17px}
.d-scroll{flex:1;overflow:auto;padding:18px 20px 24px}
.d-title-row{display:flex;gap:12px;align-items:flex-start}
.d-title-row .check{width:23px;height:23px;margin-top:3px}
.d-title{font-size:19px;font-weight:650;line-height:1.38;flex:1;min-width:0;overflow-wrap:anywhere;cursor:text;border-radius:7px;padding:1px 6px;margin:0 -6px;letter-spacing:-.01em}
.d-desc{margin:10px -8px 0 27px;font-size:14.5px;line-height:1.55;color:var(--ink2);cursor:text;padding:6px 8px;border-radius:8px;overflow-wrap:anywhere}
.d-desc.empty{color:var(--ink3)}
.d-desc a{color:var(--accent)}
textarea.edit{display:block;width:100%;font:inherit;border:1px solid var(--accent);border-radius:8px;padding:6px 8px;resize:none;outline:0;background:var(--card);color:var(--ink);overflow:hidden}
textarea.edit-title{font-size:18px;font-weight:600;flex:1}
textarea.edit-desc{margin:10px 0 0 35px;width:calc(100% - 35px);font-size:14.5px;line-height:1.55}
.d-fields{margin-top:20px;border-top:1px solid var(--line)}
.f{display:grid;grid-template-columns:88px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);align-items:start}
.f-l{font-size:13px;color:var(--ink3);padding-top:5px}
.f .rep{margin-top:10px}
.subs{margin-top:22px}
.subs-h{font-size:13px;color:var(--ink3);font-weight:650;margin-bottom:4px;display:flex;gap:6px;padding-left:2px}
.subs-h span{font-weight:500}
.sub{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line)}
.sub .check{width:18px;height:18px;margin:0}
.sub .check svg{width:10px;height:10px}
.sub-t{flex:1;font-size:14.5px;min-width:0;overflow-wrap:anywhere}
.sub.on .sub-t{color:var(--ink3);text-decoration:line-through}
.sub-x{border:0;background:none;color:var(--ink3) !important;cursor:pointer;opacity:0;width:24px;height:24px;display:grid;place-items:center;border-radius:6px;font-size:13px}
.sub-add-row{display:flex;align-items:center;gap:10px;padding:6px 2px;color:var(--ink3)}
.sub-add-row svg{font-size:18px}
.sub-add{flex:1;border:0;outline:0;background:none;font:inherit;font-size:14.5px;color:var(--ink);padding:4px 0;min-width:0}
.sub-add::placeholder{color:var(--ink3)}
.d-foot{display:flex;align-items:center;justify-content:space-between;padding:11px 14px 11px 20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink3)}
.danger{border:0;background:none;color:var(--red) !important;font-size:13px !important;cursor:pointer;padding:5px 9px;border-radius:7px}

/* кнопка «+», шторка, подсказка */
.fab{display:none;position:absolute;right:20px;bottom:calc(var(--safe-b) + 18px);width:58px;height:58px;border-radius:50%;border:0;
  background:var(--accent);color:#fff !important;font-size:28px !important;box-shadow:0 8px 22px rgba(47,111,235,.38);place-items:center;z-index:10;cursor:pointer}
.menu{position:absolute;top:58px;right:16px;z-index:45;width:300px;background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.18);padding:6px;display:none}
.menu-open .menu{display:block}
.menu-h{display:flex;gap:11px;align-items:center;padding:10px 10px 12px;border-bottom:1px solid var(--line)}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--accent-bg);color:var(--accent);display:grid;place-items:center;font-size:19px;flex:none}
.menu-name{font-weight:650;font-size:15px}
.menu-sub{font-size:12.5px;color:var(--ink3)}
.menu-sec{padding:12px 10px 14px;border-bottom:1px solid var(--line)}
.menu-l{font-size:12.5px;color:var(--ink3);margin-bottom:8px}
.menu .seg{display:flex}
.menu .seg button{flex:1;justify-content:center;padding:6px 4px}
.menu-item{display:block;width:100%;text-align:left;border:0;background:none;padding:11px 10px;margin-top:4px;border-radius:8px;font-size:14.5px;cursor:pointer;color:var(--red) !important}
.backdrop{display:none;position:absolute;inset:0;background:rgba(10,12,16,.2);z-index:25;opacity:0;pointer-events:none;transition:opacity .2s}
.toast{position:absolute;left:16px;right:16px;margin:0 auto;width:fit-content;max-width:520px;bottom:calc(var(--safe-b) + 22px);
  transform:translateY(16px);background:#1F2329;color:#fff;border-radius:14px;padding:10px 10px 10px 18px;display:flex;align-items:center;
  gap:16px;font-size:14.5px;box-shadow:0 10px 28px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:.2s;z-index:40}
.toast .msg{flex:1;min-width:0}
.toast.show{opacity:1;transform:none;pointer-events:auto}
.toast button{border:0;background:rgba(255,255,255,.14);color:#fff !important;font-weight:600;padding:6px 11px;border-radius:8px;cursor:pointer;white-space:nowrap}

/* ---------- телефон ---------- */
@container app (max-width: 700px){
  .top{padding:calc(var(--safe-t) + 4px) 16px 10px;gap:10px;flex-wrap:wrap}
  .brand{font-size:22px}
  .tabs{margin-left:0;order:3;width:100%}
  .tabs button{flex:1;padding:7px 10px}
  .col-in{padding:16px 14px 120px}
  .sec-list{border-radius:14px}
  .task{padding:12px 12px 12px 16px}
  .list-col,.d-scroll{scrollbar-width:none}
  /* Окно новой задачи появляется сразу на своём месте над клавиатурой, без выезда из-за края: иначе iPhone при фокусе
     сдвигает всю страницу, чтобы показать поле, а потом она прыгает обратно. --kb — высота клавиатуры (app.js). */
  .add{position:absolute;left:0;right:0;bottom:var(--kb,0px);margin:0;z-index:30;border-radius:18px 18px 0 0;border:0;
    padding:10px 4px calc(var(--safe-b) + 10px);box-shadow:0 -8px 28px rgba(0,0,0,.12);
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility 0s linear .15s}
  .shell.sheet .add{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .15s ease}
  .shell.kb .add{padding-bottom:10px}
  .add .add-opts{display:block;border-top:0;padding-top:4px}
  .add-go{opacity:1;pointer-events:auto}
  .add-title,.sub-add,textarea.edit,.search input,.add-desc,.rep-n input{font-size:16px}   /* меньше 16 — iPhone увеличивает страницу при вводе */
  .backdrop{display:block}
  .shell.sheet .backdrop{opacity:1;pointer-events:auto}
  .fab{display:grid}
  .menu{top:calc(var(--safe-t) + 50px);left:12px;right:12px;width:auto}
  .detail{position:absolute;inset:0;width:auto;border:0;z-index:20;display:flex;transform:translateX(102%);transition:transform .25s ease}
  .has-open .detail{transform:none}
  .d-head{padding:calc(var(--safe-t) + 2px) 14px 8px 10px;min-height:0}
  .d-back{display:flex}
  .d-x{display:none}
  .d-status{margin-left:auto}
  .d-scroll{padding:16px 18px 24px}
  .d-foot{padding-bottom:calc(var(--safe-b) + 10px)}
  .sub-x{opacity:1}
  .toast{left:12px;right:12px;width:auto;max-width:none;bottom:calc(var(--safe-b) + 90px);padding:12px 12px 12px 18px;font-size:15px}
  .f{grid-template-columns:1fr;gap:6px}
  .f-l{padding-top:0}
}

/* ---------- вход ---------- */
.login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;grid-template-columns:minmax(0,380px);justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 24px) 20px 24px;background:var(--bg)}
.login[hidden]{display:none}
.login-card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:32px 26px 26px;
  box-shadow:0 10px 40px rgba(15,20,30,.08);text-align:center}
.login-logo{width:56px;height:56px;margin:0 auto 14px;border-radius:15px;background:var(--accent);color:#fff;display:grid;place-items:center}
.login-logo svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.login h1{font-size:24px;margin:0 0 6px;letter-spacing:-.01em}
.login p{color:var(--ink2);margin:0 0 20px;font-size:15px;line-height:1.5}
.login-steps{text-align:left;margin:0 0 18px;padding:0 0 0 20px;color:var(--ink2);font-size:14.5px;line-height:1.6}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:12px;padding:13px 16px;font-size:16px;
  font-weight:600;cursor:pointer;text-decoration:none}
.btn-tg{background:var(--accent);color:#fff}
.btn-tg svg{width:20px;height:20px;fill:currentColor}
.login-form{display:flex;gap:8px;margin-top:12px}
.login-code{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;font-size:20px;
  letter-spacing:.3em;text-align:center;background:var(--bg);color:var(--ink);outline:0;font-variant-numeric:tabular-nums}
.login-code:focus{border-color:var(--accent)}
.login-code:placeholder-shown{letter-spacing:normal;font-size:17px}
.btn-go{width:auto;background:var(--ink);color:var(--card);padding:12px 18px}
.btn-go:disabled{opacity:.4;cursor:default}
.login-err{min-height:20px;margin-top:10px;color:var(--red);font-size:14px}
.login-note{margin-top:14px;color:var(--ink3);font-size:13px}

/* ---------- загрузка и связь ---------- */
.loading{padding:40px 0;text-align:center;color:var(--ink3)}
.offline{display:none;background:var(--red-bg);color:var(--red);font-size:13.5px;text-align:center;padding:7px 12px}
.offline.show{display:block}

/* Наведение — только там, где есть мышь. На iPhone «наведение» залипает на месте касания и после перерисовки
   достаётся соседней задаче (зелёная галочка у следующей задачи после отметки). */
@media (hover: hover) {
  .chip:not(.on):hover{border-color:var(--ink3)}
  .task:hover{background:var(--hover)}
  .task.open:hover{background:var(--sel)}
  .task:not(.completing) .check:not(.on):hover{border-color:var(--ok);color:var(--ok) !important}
  .lchip:hover{text-decoration:underline}
  .task:hover .t-acts{display:flex}
  .mini:hover{border-color:var(--ink3);color:var(--ink) !important}
  .d-x:hover{background:var(--hover);color:var(--ink) !important}
  .d-title:hover,.d-desc:hover{background:var(--hover)}
  .sub:hover .sub-x{opacity:1}
  .danger:hover{background:var(--red-bg)}
  .menu-item:hover{background:var(--hover)}
}