/* Панель задачи (TASKS 5.2): справа на ПК, лист снизу на iPhone. Разметка и значения — из утверждённого макета
   (docs/design/mockup: .panel / .sheet). Токены — design.css. Сбросы через :where() (нулевая специфичность);
   дети flex с прокруткой — flex-shrink:0, заголовок в колонке flex — flex:none. Без инлайн-стилей (CSP). */

.tpanel{position:fixed;inset:0;z-index:60}
.tpanel-scrim{position:absolute;inset:0;background:transparent}
.tpanel-box{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);overflow-y:auto;overscroll-behavior:contain;background:var(--surface);color:var(--fg);
  border-left:1px solid var(--line);box-shadow:-12px 0 40px rgba(0,0,0,.16);padding:18px 22px 40px;outline:none;scrollbar-width:thin}
.tpanel-body{display:flex;flex-direction:column;min-height:100%}
.tp-grab{display:none}
html.tp-lock{overflow:hidden}

/* Содержимое: панель, лист, страница задачи и прямой адрес ?task= */
.tp{display:flex;flex-direction:column;gap:16px;min-width:0;font-size:14px;line-height:1.4}
.tp>*{flex-shrink:0}
.tp :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.tp :where(ul,ol){list-style:none;margin:0;padding:0}
.tp :where(summary){list-style:none}
.tp summary::-webkit-details-marker{display:none}
.tp :where(h2,p){margin:0}
.tp .multiline{white-space:pre-wrap;overflow-wrap:anywhere}
.tp .ic-xs{width:14px;height:14px;stroke-width:3}
.tp-top{display:flex;align-items:center;gap:8px;min-height:44px;flex:none}
.tp .ph{font-size:20px;font-weight:800;line-height:1.25;min-width:0;overflow-wrap:anywhere}
.tp .ib{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--muted);flex:none}
.tp .ib:hover{background:var(--surface2);color:var(--fg)}
.tp .ib.ok:hover{color:var(--ok)}
.tp .ib.danger:hover{color:var(--danger)}
.tp .ib:disabled{opacity:.4}
.tp .push{margin-left:auto}
.iconbar{display:flex;gap:2px;padding:3px;border-radius:14px;background:var(--surface2);min-width:0}
.tp-eyebrow{color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.06em}
.tp-title{font-size:22px;font-weight:800;line-height:1.25;letter-spacing:-.01em;margin-top:-4px}
.tp-sub{margin-top:-8px;color:var(--muted);font-size:14px}
.tp .hint{color:var(--muted);font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px 4px 8px;border-radius:999px;background:var(--surface2);font-weight:600;font-size:13px;max-width:100%;min-width:0}
.chip .chip-t{min-width:0;overflow-wrap:anywhere}
.chip-acc{color:var(--accent-text)}
.chip-ok{color:var(--ok)}
.chip-over{color:var(--danger)}
.chip-today{color:var(--warn)}

/* Свёрнутые блоки */
.secs{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.sec{position:relative;border-bottom:1px solid var(--line)}
.sec-d{display:block}
.sec-h{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;text-align:left;cursor:pointer;border-radius:8px}
.sec-h>.ic:first-child{color:var(--muted)}
.sec-h>.ic-s{color:var(--muted);transition:transform .15s}
.sec-d[open]>.sec-h>.ic-s{transform:rotate(180deg)}
.sec-l{font-weight:600;flex:none}
.sec-v{margin-left:auto;min-width:0;color:var(--muted);font-size:13px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-b{padding:0 0 14px 32px;display:flex;flex-direction:column;gap:6px;min-width:0}
[data-checks-sec] .sec-h{padding-right:48px}
.sec-add{position:absolute;top:4px;right:0;color:var(--accent-text)!important}
.tp .tag-list{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.tp .tag-list span{background:var(--surface2);color:var(--accent-text);border-radius:9px;padding:4px 9px;font-size:12px;max-width:100%;overflow-wrap:anywhere}
.tp-link{display:inline-flex;align-items:center;gap:6px;color:var(--accent-text);font-weight:700;min-height:44px;overflow-wrap:anywhere}
.hist-list{display:flex;flex-direction:column;gap:6px}
.hist{display:flex;flex-direction:column;gap:1px;padding:4px 0;min-width:0}
.hist-w{color:var(--muted);font-size:12px;font-family:'IBM Plex Sans',sans-serif;overflow-wrap:anywhere}

/* Чек-лист в панели: те же отметки, что на карточке (task-card.js), с полем новой подзадачи */
.tp .inline-checks{display:flex;flex-direction:column;gap:6px;min-width:0}
.tp .card-checklist{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.tp .card-checklist label{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;overflow-wrap:anywhere}
.tp .card-checklist label::before{content:none}
.tp .card-checklist input{width:20px;height:20px;flex:none;margin:0;accent-color:var(--accent)}
.tp .card-checklist .is-done span{color:var(--muted);text-decoration:line-through}
.tp .inline-checks p[data-check-status]:empty{display:none}
.tp .inline-checks p[data-check-status]{margin:0;font-size:13px;color:var(--muted)}
.add-chk{display:flex;align-items:center;gap:8px;padding-top:2px}
.add-chk[hidden]{display:none}
.tp .inp,.tp-form .write-input:not([type=checkbox]),.tp-form select,.tp-form textarea{width:100%;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);color:var(--fg);font:inherit;font-size:var(--field-fs,14px)}
.add-chk .inp{flex:1}
.add-chk .ib{background:var(--accent);color:var(--on-accent)}
.add-chk .ib:hover{background:var(--accent);color:var(--on-accent);filter:brightness(1.06)}
.tp .inp:focus,.tp-form .write-input:focus,.tp-form select:focus,.tp-form textarea:focus{border-color:var(--accent);outline:none}
.tp-ready{display:none}

/* Кнопки панели: пилюли, как в макете */
.tp :is(.primary-button,.secondary-button){min-height:48px;padding:0 22px;border-radius:999px;font-size:14px;font-weight:700;border:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center}
.tp .primary-button{background:var(--accent);color:var(--on-accent)}
.tp .primary-button:hover{filter:brightness(1.06)}
.tp .primary-button:disabled{opacity:.45}
.tp .secondary-button{background:var(--surface2);color:var(--fg)}
.tp .secondary-button:hover{border:0;filter:brightness(.97)}

/* Форма: создание, правка, перенос срока */
.tp-form{display:flex;flex-direction:column;gap:16px;max-width:none;padding:0;min-width:0}
.tp-form>*{flex-shrink:0}
.tp-form .field-grid{display:flex;flex-direction:column;gap:16px}
.tp-form .form-field{min-width:0;display:flex;flex-direction:column;gap:8px}
.tp-form .form-field label,.tp-form .deadline-editor legend{display:block;margin:0;font-size:13px;font-weight:700;color:var(--muted)}
.tp-form .form-field[data-field=client],.tp-form .form-field[data-field=name]{grid-column:auto}
.tp-form textarea{padding:10px 12px;min-height:84px;line-height:1.4;resize:vertical}
.tp-form select.write-input{padding-right:34px}
.tp-form .field-hint{margin:0;font-size:12px;color:var(--muted)}
.tp-form .field-error{margin:0;font-size:12px;color:var(--danger);overflow-wrap:anywhere}
.tp-form .field-error:empty{display:none}
.tp-form .write-status:empty{display:none}
.tp-form .write-status:not(:empty){margin:0;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.5}
.tp-form .reminder-toggle{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:600;color:var(--fg);font-size:14px}
.tp-form .reminder-toggle input{width:22px;height:22px;min-height:22px;accent-color:var(--accent);padding:0}
.tp-form .deadline-editor{display:flex;flex-direction:column;gap:8px}
.tp-form .deadline-parts{display:flex;gap:10px;flex-wrap:wrap}
.tp-form .deadline-parts label{flex:1 1 130px;font-size:12px;font-weight:600;color:var(--muted)}
.tp-form .deadline-control{margin-top:6px;padding:0 12px;min-height:44px;display:flex;align-items:center;border-radius:12px;background:var(--surface2);border:1px solid var(--line)}
.tp-form .deadline-control input{min-height:42px;height:42px;font-family:'IBM Plex Sans',sans-serif;font-size:var(--field-fs,14px);border:0;background:transparent}
.tp-form .deadline-control input.write-input{width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.tp-form .deadline-control:focus-within{border-color:var(--accent);outline:none}
.tp-form .choice-picker{display:flex;flex-direction:column;gap:8px}
.tp-form .choice-picker small{font-size:12px;color:var(--muted)}
.tp-form .tp-more{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tp-form .tp-more .sec-b{padding:4px 0 16px 0;gap:16px}
.tp-form .tp-more .field-grid{gap:16px}
.tp-form .checklist-editor-row{display:flex;gap:8px;align-items:center;margin:6px 0}
.tp-form .checklist-editor-row [data-item-text]{flex:1;min-width:0}
.tp-form .checklist-editor-row .secondary-button{min-height:44px;padding:0 14px}
.tp-form .conflict-panel{margin:0;padding:14px;border-radius:16px;background:var(--surface2);border:0}
.tp-form .form-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0;padding:0}
.tp-form [data-login] a{color:var(--accent-text);text-decoration:underline}
.tp-confirm{position:sticky;bottom:0;margin-top:auto;z-index:2;display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:16px;background:var(--surface2);box-shadow:0 -6px 24px rgba(0,0,0,.18);border:1px solid var(--line)}
.tp-confirm-t{font-weight:800}
.tp-confirm-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.tp-confirm .hint{margin:0;color:var(--muted);font-size:13px}
.tp-confirm :is(.primary-button,.secondary-button){min-height:48px;padding:0 20px;border-radius:999px;font-weight:700;border:0}
.tp-confirm .primary-button{background:var(--danger);color:var(--on-danger)}
.tp-confirm .secondary-button{background:var(--surface);color:var(--fg)}

/* Страница задачи без JavaScript: та же вёрстка, на всю колонку */
.tpage{max-width:560px;background:var(--surface);border-radius:24px;box-shadow:var(--shadow);padding:18px 22px 28px}
.tk .task-panel{padding:18px 22px}

/* iPhone: лист снизу, вырезы экрана, клавиатура Safari */
@media (max-width:899.98px){
  .tpanel-scrim{background:var(--scrim,rgba(10,10,14,.5))}
  .tpanel-box{top:auto;left:0;right:0;bottom:var(--tp-kb,0px);width:auto;max-height:min(92dvh,calc(var(--tp-vvh,100dvh) - 12px));
    border-left:0;border-radius:28px 28px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.25);
    padding:8px calc(20px + env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) calc(20px + env(safe-area-inset-left,0px));
    transform:translateY(var(--tp-drag,0px))}
  .tp-grab{display:block;width:100%;height:28px;position:relative;cursor:grab;touch-action:none;margin-bottom:-4px;flex:none}
  .tp-grab::after{content:'';position:absolute;left:50%;top:10px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--line)}
  .tpanel-body{min-height:0}
  /* Заголовок листа не уезжает под его верхний край при прокрутке формы: прокручивается только содержимое под ним. */
  .tp-top{position:sticky;top:0;z-index:3;background:var(--surface)}
  .tp-ready{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;background:var(--surface2);font-weight:700;width:100%}
  .tp .ib{width:44px;height:44px}
  .iconbar{padding:2px;gap:0}
  .tp-form .form-actions>*{flex:1 1 140px}
  .tpage{border-radius:24px;padding:16px 16px 24px}
  .tpanel-box :is(input,textarea,select){scroll-margin-block:96px}
}
@media (prefers-reduced-motion:reduce){.tp .ic,.tpanel-box{transition:none}}

/* Выбор коллеги (TASKS 5.4): кружки-аватары с именем; нажатие выбирает. Настоящие радиокнопки лежат поверх плитки. */
.pick{border:0;padding:0;margin:0;min-width:0}
.pick>legend{padding:0;margin:0 0 8px;font-size:13px;font-weight:700;color:var(--muted)}
.pick-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.pick-item{position:relative;display:block;min-width:0;margin:0}
.pick .pick-item input.write-input[type=radio]{position:absolute;inset:0;z-index:1;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:0;cursor:pointer;border:0}
.pick-in{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 12px 6px 8px;border-radius:16px;background:var(--surface2);border:2px solid transparent}
.pick-n{min-width:0;overflow-wrap:anywhere;color:var(--fg);font-size:14px;font-weight:600;line-height:1.25}
.pick .av{width:36px;height:36px;font-size:13px}
.pick-item:hover .pick-in{border-color:var(--line)}
.pick-item:has(input:checked) .pick-in{border-color:var(--accent);background:var(--accent-soft)}
.pick-item:has(input:focus-visible) .pick-in{outline:2px solid var(--accent);outline-offset:2px}

/* Уведомление о передаче (TASKS 5.4): внизу справа на ПК — не закрывает поиск и «Создать задачу»; над нижней панелью на iPhone. */
/* Ниже панели (z-index 60): открытая панель или лист не закрывается уведомлением о прошлом действии. */
.toast-host{position:fixed;z-index:50;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  padding:0 calc(24px + env(safe-area-inset-right,0px)) 0 calc(24px + env(safe-area-inset-left,0px));pointer-events:none}
.toast-host:empty{display:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;min-width:0;max-width:min(560px,100%);padding:8px 6px 8px 16px;border-radius:20px;
  background:var(--surface);color:var(--fg);border:1px solid var(--line);box-shadow:0 10px 36px rgba(0,0,0,.28);font-size:14px;line-height:1.35}
.toast>*{flex-shrink:0}
.toast :where(p,form){margin:0}
.toast :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.toast-ic{display:grid;place-items:center;color:var(--accent-text)}
.toast-body{flex:1 1 auto;min-width:0}
.toast-m{overflow-wrap:anywhere}
.toast-s{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.toast-s.is-error{color:var(--danger)}
.toast-s:empty{display:none}
.toast-b{min-height:44px;padding:0 18px;border-radius:999px;background:var(--accent)!important;color:var(--on-accent)!important;font-weight:700}
.toast-b:hover{filter:brightness(1.06)}
.toast-b:disabled{opacity:.5;cursor:default}
.toast-x{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--muted)!important}
.toast-x:hover{background:var(--surface2)!important;color:var(--fg)!important}
.toast :is(button,a):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.toast-page{max-width:560px;margin-top:12px}
.transferred-n{margin:16px 0 0}
@media (max-width:899.98px){
  .toast-host{bottom:calc(88px + env(safe-area-inset-bottom,0px));align-items:center;padding:0 calc(14px + env(safe-area-inset-right,0px)) 0 calc(14px + env(safe-area-inset-left,0px))}
  .toast{width:100%;padding-left:14px}
}

/* Фото проекта в «Изменить проект» (TASKS 5.3б): выбор файла — кнопкой-подписью, сам input лежит поверх и принимает касание. */
.photo-field{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.photo-field>legend{padding:0;margin:0 0 8px;font-size:13px;font-weight:700;color:var(--muted)}
.photo-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.photo-prev,.photo-none{display:grid;place-items:center;flex:none;width:120px;height:80px;border-radius:12px;background:var(--surface2);object-fit:cover}
.photo-none{color:var(--muted);font-size:12px;font-weight:700;text-align:center;padding:0 8px}
.photo-ctl{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.form-field label.photo-pick,.photo-field label.photo-pick{position:relative;overflow:hidden;cursor:pointer;display:inline-flex;min-height:48px;padding:0 22px;color:var(--fg);font-size:14px}
.photo-field .photo-pick input.photo-input.write-input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:0;cursor:pointer;border:0;z-index:1}
.photo-field .photo-pick:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.photo-field label.photo-remove{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--fg);font-size:14px;font-weight:600;cursor:pointer}
.photo-field .photo-remove input.write-input{flex:none;width:22px;height:22px;min-height:22px;margin:0;padding:0;accent-color:var(--accent)}
.photo-name{margin:0;font-size:13px;color:var(--fg);overflow-wrap:anywhere}
.photo-name:empty{display:none}
.photo-field .field-hint{margin:0;font-size:12px;color:var(--muted)}
.photo-field .field-error{margin:0;font-size:12px;color:var(--danger);overflow-wrap:anywhere}
.photo-field .field-error:empty{display:none}