/* IAM — открытая задача и подложка (js/ui/45-tray-open.js; 10.11.2026, макет iam-trayopen/c.html, вариант В).
   Светлая полоса открытой задачи (.sh-ul) встаёт внизу вместо подложки; подложка поднимается на её высоту.
   html.tro-full — вся задача в подложке на весь экран. @layer: важное из слоя сильнее прежних !important без слоя. */
@layer iam-tro {
  html.tro-on #iam-tray .tr-strip { opacity: 0 !important; pointer-events: none !important; transition: opacity .2s; }
  html.tro-on #iam-tray .tr-panel { visibility: hidden !important; }
  /* окно с задачей — над подложкой, чтобы её полоса (внутри окна) легла поверх подложки */
  html.tro-on #app-sheet { z-index: 1250 !important; }
  /* 10.11 (sh103): в приложении (WKWebView) fixed-полоса внутри прокрутки обрезалась по низу экрана — видна была только кромка.
     Пока задача открыта, экран доходит до низа окна (полоса лежит поверх него), а место под полосу — запасом в конце списка. */
  html.tro-on body :is(#app-sheet, .main-area) { bottom: 0 !important; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) { margin-bottom: calc(var(--tro-H, 100px) + 24px) !important; }
  /* скругления тёмного экрана над полосой — как у подложки в покое (полоса режет своё содержимое, поэтому уголки рисует экран) */
  html.tro-on body #app-sheet::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--tro-H, 76px); height: 22px; z-index: 1299; pointer-events: none;
    background: radial-gradient(circle at 100% 0, transparent 21.5px, var(--tr-bg, #e4e4df) 22px) left bottom / 22px 22px no-repeat,
                radial-gradient(circle at 0 0, transparent 21.5px, var(--tr-bg, #e4e4df) 22px) right bottom / 22px 22px no-repeat; }   /* без перехода: высота меняется покадрово (sh110) */
  html.tro-full body #app-sheet::after { display: none; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open { filter: none !important; box-shadow: none !important; }
  /* 10.11 sh107 (владелец, макет iam-trayopen2 «A»): открытая задача без серой рамки — просто раскрытие; выбрана — салатовая полоска слева от кружка */
  html.tro-on:not(.tro-full) :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open :is(.task-row, .task-accordion, .sh-x, .sh-in):not(.sh-ul *),
  html.tro-on:not(.tro-full) :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .task-row:hover { background: transparent !important; box-shadow: none !important; }
  html.tro-on:not(.tro-full) :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .task-row { clip-path: none !important; }   /* обрезал полоску */
  html.tro-on:not(.tro-full) :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .task-row .task-check { position: relative !important; overflow: visible !important; }
  html.tro-on:not(.tro-full) :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .task-row .task-check::before { content: "" !important; display: block !important; position: absolute !important; left: -17px !important; top: 50% !important;
    width: 3.5px !important; height: 22px !important; margin-top: -11px !important; border-radius: 2px !important; background: #b9f36c !important; border: 0 !important; transform: none !important; opacity: 1 !important; pointer-events: none; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: auto !important; max-width: none !important;
    margin: 0 !important; border-radius: 0 !important; z-index: 1300 !important; background: var(--tr-bg, #e4e4df) !important; box-shadow: none !important;
    padding: 26px 58px 26px 56px !important; animation: troIn .4s cubic-bezier(.2,.85,.2,1); }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul::before { content: ""; position: absolute; left: 50%; top: 8px; width: 56px; height: 4px; margin-left: -28px; border-radius: 2px; background: #b5b5ba; opacity: .9; cursor: grab; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul:hover::before { background: #8d8d92; }
  /* место под полосу в карточке больше не нужно; пустой верх полосы (под варианты) — только когда вариант открыт */
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open { padding-bottom: 0 !important; min-height: 0 !important; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open:not(.up) > .sh-ul .shk-o { display: none !important; }
  /* раньше варианты наезжали на карточку и описание пряталось — теперь они в подложке, описание остаётся */
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open.up > .sh-x { grid-template-rows: 1fr !important; opacity: 1 !important; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open.up .task-accordion { opacity: 1 !important; visibility: visible !important; }   /* при «Ещё» карточка была пустой */
  /* по сетке списка: плашки значков и вариантов — от 58 слева до 58 справа (10.11, замер) */
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul :is(.shk-ics, .shk-o) { padding-left: 0 !important; padding-right: 0 !important; }

  /* значки полосы — как в окне новой задачи (#iam-tra .tra-bar, 10.11 sh104): 40 px, рисунок 21 px, без плашки у даты,
     дата и проект текстом справа (.tro-sum, 45-tray-open.js), значок проекта — цветом проекта */
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-ics { gap: 2px !important; margin-left: 23px !important; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-ics > button:not(.shk-go) {
    flex: none !important; width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; padding: 0 !important;
    border-radius: 13px !important; background: none !important; color: #55555a !important; display: grid !important; place-items: center !important; opacity: 1 !important; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-ics > button:not(.shk-go) svg { width: 21px !important; height: 21px !important; stroke-width: 1.8; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-ics > button:not(.shk-go) svg :is(path, circle, rect, line, polyline) { stroke-width: 1.8; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-ics > button:not(.shk-go):hover { background: rgba(0,0,0,.06) !important; color: #1d1d20 !important; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-ics > button.set:not(.shk-go) { color: #1d1d20 !important; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-ics > button.set:not(.shk-go)::after { content: "" !important; display: block !important; position: absolute !important; right: 7px !important; top: 7px !important; width: 7px !important; height: 7px !important; border-radius: 50% !important;
    background: var(--dc, #1d1d20) !important; box-shadow: 0 0 0 2px var(--tr-bg, #e4e4df); }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-ics > button.on:not(.shk-go) { background: #1d1d20 !important; color: #fff !important; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-ics > button.on:not(.shk-go)::after { box-shadow: 0 0 0 2px #1d1d20; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-ics > button.shk-when > :is(span, .shk-bell) { display: none !important; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-ics > button[data-shdk="proj"] .iam-pi { width: 21px; height: 21px; display: inline-grid; place-items: center; color: var(--dc, #8d8d92); }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-ics > button[data-shdk="proj"] .iam-pi .iam-pic { width: 21px !important; height: 21px !important; fill: currentColor; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-ics > button[data-shdk="proj"] .iam-pi .iam-pic.fl { display: none !important; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .tro-sum { margin-left: 14px; font: 800 13.5px 'Nunito', system-ui; color: #6d6d72; display: flex; gap: 8px; align-items: center; white-space: nowrap; overflow: hidden; min-width: 0; pointer-events: none; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .tro-sum b { color: #1d1d20; font-weight: 800; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .tro-sum i { font-style: normal; color: #b5b5ba; }
  html:not(.tro-on) .tro-sum { display: none !important; }

  /* тоньше (10.11 sh105, владелец: «слишком толстая»): ряд значков 40 px + 7 px сверху и снизу = 54, как подложка в покое */
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-ics { height: 40px !important; min-height: 0 !important; margin-top: 14px !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  /* заголовок «Настройки задачи» — как «Что сделать?» (#iam-tra .tra-top): 40 px, значок 20 px, 800 24 px серым */
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul > .tro-head { display: flex; align-items: center; gap: 12px; min-height: 40px; pointer-events: none; }
  html.tro-on .tro-head .tro-hc { width: 20px; height: 20px; flex: none; color: #b5b5ba; display: grid; place-items: center; }
  html.tro-on .tro-head .tro-hc svg { width: 20px; height: 20px; }
  html.tro-on .tro-head .tro-ht { font: 800 24px/1.3 'Nunito', system-ui; color: #a3a3a6; white-space: nowrap; }
  /* варианты как в окне новой задачи: разметка и стили из 44-tray-add.js / tray-add.css (.tro-panes) */
  html.tro-on .tro-panes { display: flex !important; flex-direction: column; gap: 8px; padding: 0 !important; margin: 12px 0 0 24px !important; animation: traIn .28s cubic-bezier(.2,.85,.2,1); }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-ics > button.tro-act:not(.shk-go) { background: #1d1d20 !important; color: #fff !important; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-ics > button.tro-act:not(.shk-go)::after { box-shadow: 0 0 0 2px #1d1d20; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-ics > button.tro-act [data-shdk] .iam-pi, html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-ics > button.tro-act .iam-pi { color: #fff !important; }
  /* в списке задач кнопки сбрасываются общими правилами — размеры плашек закрепляем (как в tray-add.css) */
  html.tro-on .tro-panes .tra-r { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; align-items: center !important; }
  html.tro-on .tro-panes .tra-ch { height: 30px !important; padding: 0 10px !important; border: 0 !important; border-radius: 9px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important;
    font: 600 13px 'Nunito', system-ui !important; color: #161618 !important; white-space: nowrap !important; width: auto !important; min-width: 0 !important; }
  html.tro-on .tro-panes :is(.tra-ch.on, .tra-day.on) { color: #f4f4f2 !important; } html.tro-on .tro-panes .tra-day.on b { color: #f4f4f2 !important; }
  html.tro-on .tro-panes .tra-days { display: flex !important; gap: 4px !important; }
  html.tro-on .tro-panes .tra-day { width: 44px !important; height: 46px !important; padding: 0 !important; border: 0 !important; border-radius: 12px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 1px !important; }
  html.tro-on .tro-panes .tra-sep { display: block !important; width: 1px !important; height: 26px !important; margin: 0 6px !important; }
  html.tro-on .tro-panes .tra-cust { height: 30px !important; }
  /* остальные варианты (ещё, фокус…) — тем же видом: без заголовка, плашки как в создании */
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open.up > .sh-ul .shk-o { padding: 0 !important; margin: 12px 0 0 24px !important; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-o .shk-dt { display: none !important; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-o .shk-gap { display: none !important; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-o .shk-chips { gap: 6px !important; padding: 0 !important; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-o .shk-op { height: 30px !important; padding: 0 10px !important; border-radius: 9px !important; font: 600 13px 'Nunito', system-ui !important; color: #161618 !important;
    background: rgba(255,255,255,.6) !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-o .shk-op:hover { background: rgba(255,255,255,.9) !important; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-o .shk-op.on { background: #161618 !important; color: #f4f4f2 !important; box-shadow: none !important; }
  html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul .shk-o .shk-op.red { color: #d93a3f !important; }
  @keyframes troIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

  /* вся задача в подложке */
  html.tro-full :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: var(--tro-ul, 100px) !important; top: auto !important; width: auto !important; max-width: none !important;
    /* sh110: карточка всегда полной высоты и выезжает из-за полосы (сдвиг = полная − текущая высота): без скачка от отступов, уголки всегда скруглены; на шве 1 px внахлёст — без чёрной линии */
    height: calc(var(--tro-FH, 600px) - var(--tro-ul, 100px) + 1px) !important; bottom: calc(var(--tro-ul, 100px) - 1px - var(--tro-FH, 600px) + var(--tro-H, 600px)) !important; transform: none !important;
    margin: 0 !important; z-index: 1295 !important; overflow: auto !important; overscroll-behavior: contain;   /* не transform: внутри лежит fixed-полоса значков */
    background: var(--tr-bg, #e4e4df) !important; box-shadow: 0 -16px 40px -24px rgba(0,0,0,.55) !important; padding: 34px 48px 0 48px !important; animation: none !important; border-radius: 22px 22px 0 0 !important; }
  /* sh110: переходы высоты/отступов у задачи в списке (0,4 с) делали переезд в подложку и обратно «плывущим» — на время переезда их нет */
  :is(html.tro-full, html.tro-snap) :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk, :is(html.tro-full, html.tro-snap) :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk * { transition: none !important; }
  html.tro-full :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open::before { content: ""; position: absolute; left: 50%; top: 10px; width: calc(56px + var(--pull-p, 0) * 44px); height: 4px; margin-left: calc(-28px - var(--pull-p, 0) * 22px); border-radius: 2px; background: #b5b5ba; }
  html.tro-full.pull-armed :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open::before { background: #7fb43a; }
  /* отпечаток задачи в списке, пока она в подложке: то же место, та же строка, приглушённо */
  .tro-ghost { pointer-events: none; opacity: .5; overflow: hidden; }
  .tro-ghost > .task-row { background: transparent !important; box-shadow: none !important; }
  html.tro-full :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul::before { display: none; }
  html.tro-full :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open :is(.task-row, .sh-x, .sh-in, .task-accordion) { background: transparent !important; box-shadow: none !important; }
  html.tro-full :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .task-row { cursor: default !important; }
  html.tro-full :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .task-row .t-name { font-size: 30px !important; font-weight: 800 !important; color: #1d1d20 !important; }
  html.tro-full :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .task-row :is(.t-meta, .t-meta *, .t-timepill) { color: #6d6d72 !important; }
  html.tro-full :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .task-row .task-check { width: 20px !important; height: 20px !important; min-width: 20px !important; border-color: #9a9a9e !important; }
  html.tro-full :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open .task-acc-desc { font-size: 16px !important; color: #45454a !important; }
  html.tro-full :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open .task-acc-desc:empty::before { color: #a3a3a6 !important; }
  html.tro-full :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open [id^="acc-subtasks"] * { color: #1d1d20 !important; }
  html.tro-full :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open [id^="acc-subtasks"] :is(input::placeholder, .ksa, .sub-add) { color: #9a9a9e !important; }
  html.tro-full :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .task-row:hover { background: transparent !important; }
}
@media (prefers-reduced-motion: reduce) { html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul, html.tro-full :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open { animation: none; } }
html.tro-drag, html.tro-drag * { user-select: none !important; -webkit-user-select: none !important; cursor: grabbing !important; }

/* вытягивание подложки (10.11 sh108): экран за ней уходит вглубь — темнеет и размывается; подсказка над краем; за порогом — салатовая */
#iam-pull { position: fixed; left: 0; right: 0; top: 0; bottom: var(--bb, 146px); border-radius: 0 0 22px 22px; z-index: 1235; pointer-events: none; opacity: 0; transition: opacity .22s ease;
  background: rgba(8,8,10, calc(var(--p, 0) * .55)); -webkit-backdrop-filter: blur(calc(var(--p, 0) * 7px)) saturate(calc(1 - var(--p, 0) * .35)); backdrop-filter: blur(calc(var(--p, 0) * 7px)) saturate(calc(1 - var(--p, 0) * .35)); }
#iam-pull.in-sheet { z-index: 1290; }
#iam-pull.on { opacity: 1; }
#iam-pull .pl-h { display: none; }
#iam-pull .pl-t { position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, calc((1 - var(--p, 0)) * 10px)) scale(calc(.92 + var(--p, 0) * .08));
  padding: 7px 14px; border-radius: 12px; font: 800 13px 'Nunito', system-ui; color: #f4f4f2; background: rgba(255,255,255,.1); white-space: nowrap;
  opacity: 0; transition: background .2s, color .2s, opacity .18s; }
#iam-pull.lab .pl-t { opacity: 1; }
#iam-pull.armed .pl-t { background: #b9f36c; color: #161618; box-shadow: 0 10px 30px -10px rgba(185,243,108,.6); }
/* ручка полосы растягивается и за порогом становится салатовой */
html.tro-on :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul::before { width: calc(56px + var(--pull-p, 0) * 44px) !important; margin-left: calc(-28px - var(--pull-p, 0) * 22px) !important; transition: background .2s; }
html.tro-on.pull-armed :is(#tasks-list,#proj-tasks-list) .task-wrap.sh-tk.open > .sh-ul::before { background: #7fb43a !important; }
@media (prefers-reduced-motion: reduce) { #iam-pull { -webkit-backdrop-filter: none; backdrop-filter: none; } }