/* IAM — «Новая задача в подложке» (js/ui/44-tray-add.js; 10.11.2026, макет iam-trayadd/b3.html, вариант Б3.1). Светлая подложка, Nunito. */
#iam-tra { position: absolute; left: 0; right: 0; top: 28px; height: calc(var(--tr-up) + 8px); z-index: 6; background: var(--tr-bg, #e4e4df); color: #1d1d20;
  padding: 20px 28px 0; opacity: 0; pointer-events: none; transform: translateY(14px);
  transition: opacity .25s ease, transform .45s cubic-bezier(.2,.85,.2,1); font-family: 'Nunito', system-ui, sans-serif; user-select: text; cursor: default; }
#iam-tra.on { opacity: 1; pointer-events: auto; transform: none; transition-delay: .06s; }
html.tra-on #iam-tray .tr-strip { opacity: 0; pointer-events: none; transition: opacity .2s; }
html.tra-on #iam-tray .tr-panel { visibility: hidden; }
#iam-tray .tr-strip { transition: opacity .25s .1s; }

#iam-tra .tra-top { display: flex; align-items: center; gap: 12px; }
#iam-tra .tra-c { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #b5b5ba; flex: none; }
#iam-tra .tra-ed { position: relative; flex: 1; min-width: 0; font: 800 24px/1.3 'Nunito', system-ui; }
#iam-tra .tra-in { width: 100%; border: 0; outline: 0; background: none; padding: 0; margin: 0; font: inherit; color: transparent; caret-color: #1d1d20; position: relative; z-index: 2; }
#iam-tra .tra-in::selection { background: rgba(91,141,239,.25); color: transparent; }
#iam-tra .tra-hl, #iam-tra .tra-ph { position: absolute; inset: 0; white-space: pre; overflow: hidden; pointer-events: none; color: #1d1d20; }
#iam-tra .tra-ph { color: #a3a3a6; }
#iam-tra .tra-hl mark { background: none; color: #1d1d20; }
#iam-tra .tra-hl mark.m-d, #iam-tra .tra-hl mark.m-t, #iam-tra .tra-hl mark.m-r { color: #4a7fe0; }
#iam-tra .tra-hl mark.m-p { color: var(--mc, #8B83FF); }
#iam-tra .tra-hl mark.m-w { color: #ff7a59; }
#iam-tra .tra-hl mark.m-h { color: #e5484d; }
#iam-tra .tra-esc { font: 800 12px 'Nunito'; color: #9a9a9e; flex: none; }
#iam-tra .tra-go { height: 40px; padding: 0 16px; border: 0; border-radius: 13px; background: #1d1d20; color: #f4f4f2; display: inline-flex; align-items: center; gap: 8px; font: 800 14px 'Nunito'; flex: none; cursor: pointer; transition: transform .15s, background .15s; }
#iam-tra .tra-go:hover { background: #000; } #iam-tra .tra-go:active { transform: scale(.97); }
#iam-tra .tra-go svg { width: 15px; height: 15px; color: #9a9a9f; }
#iam-tra.busy .tra-go { opacity: .6; pointer-events: none; }
#iam-tra .tra-desc { display: block; width: calc(100% - 32px); margin: 0 0 0 32px; border: 0; outline: 0; resize: none; background: none; padding: 0; height: 0; min-height: 0; opacity: 0;
  font: 600 15px/1.45 'Nunito', system-ui; color: #45454a; transition: opacity .25s, margin .35s cubic-bezier(.2,.85,.2,1); overflow: hidden; }
#iam-tra .tra-desc::placeholder { color: #a3a3a6; }
#iam-tra.has-t .tra-desc { height: 22px; opacity: 1; margin-top: 8px; }

#iam-tra .tra-bar { display: flex; align-items: center; gap: 2px; margin: 14px 0 0 24px; }
#iam-tra .tra-ib { width: 40px; height: 40px; border: 0; border-radius: 13px; background: none; display: grid; place-items: center; color: #55555a; cursor: pointer; position: relative; transition: background .15s, color .15s; }
#iam-tra .tra-ib svg { width: 21px; height: 21px; }
#iam-tra .tra-ib b { font: 900 19px 'Nunito'; }
#iam-tra .tra-ib:hover { background: rgba(0,0,0,.06); color: #1d1d20; }
#iam-tra .tra-ib.set { color: #1d1d20; }
#iam-tra .tra-ib.set::after { content: ""; position: absolute; right: 7px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--dc, #1d1d20); box-shadow: 0 0 0 2px var(--tr-bg, #e4e4df); }
#iam-tra .tra-ib.act { background: #1d1d20; color: #fff; }
#iam-tra .tra-ib.act::after { box-shadow: 0 0 0 2px #1d1d20; }
#iam-tra .tra-ib.hi.set { color: #e5484d; }
#iam-tra .tra-sum { margin-left: 14px; font: 800 13.5px 'Nunito'; color: #6d6d72; display: flex; gap: 8px; align-items: center; white-space: nowrap; overflow: hidden; }
#iam-tra .tra-sum b { color: #1d1d20; font-weight: 800; } #iam-tra .tra-sum b.hi { color: #e5484d; } #iam-tra .tra-sum i { font-style: normal; color: #b5b5ba; }

#iam-tra .tra-panes { display: none; flex-direction: column; gap: 8px; margin: 12px 0 0 24px; }
#iam-tra .tra-panes.on { display: flex; animation: traIn .28s cubic-bezier(.2,.85,.2,1); }
@keyframes traIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#iam-tra .tra-r { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#iam-tra .tra-ch { height: 32px; padding: 0 11px; border: 0; border-radius: 11px; background: rgba(0,0,0,.05); display: inline-flex; align-items: center; gap: 6px; font: 800 13px 'Nunito'; color: #45454a; cursor: pointer; white-space: nowrap; transition: background .15s, box-shadow .15s; }
#iam-tra .tra-ch:hover { background: rgba(0,0,0,.09); }
#iam-tra .tra-ch.on { background: #fff; color: #1d1d20; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 14px -8px rgba(0,0,0,.35), inset 0 0 0 1.5px var(--pc, #1d1d20); }
#iam-tra .tra-pi { display: inline-grid; place-items: center; width: 16px; height: 16px; }
#iam-tra .tra-pi .iam-pi { width: 16px; height: 16px; display: inline-grid; place-items: center; color: var(--pc); }
#iam-tra .tra-pi .iam-pic { width: 16px; height: 16px; fill: currentColor; } #iam-tra .tra-pi .iam-pic.fl { display: none; }
#iam-tra .tra-pi.none svg { width: 16px; height: 16px; color: #8d8d92; }
#iam-tra .tra-ib .tra-pi, #iam-tra .tra-ib .tra-pi .iam-pi, #iam-tra .tra-ib .tra-pi .iam-pic { width: 21px; height: 21px; }
#iam-tra .tra-av { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; flex: none; font: 800 11px 'Nunito'; background: #cfcfca; }
#iam-tra .tra-av :is(img, span, div) { width: 100% !important; height: 100% !important; border-radius: 50%; object-fit: cover; }
#iam-tra .tra-ch .tra-av { width: 20px; height: 20px; }
#iam-tra .tra-sep { width: 1px; height: 26px; background: rgba(0,0,0,.1); margin: 0 6px; }
#iam-tra .tra-days { display: flex; gap: 4px; }
#iam-tra .tra-day { width: 44px; height: 46px; border: 0; border-radius: 12px; background: rgba(0,0,0,.04); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; }
#iam-tra .tra-day s { text-decoration: none; font: 800 9.5px 'Nunito'; letter-spacing: .08em; color: #9a9a9e; }
#iam-tra .tra-day b { font: 800 16px 'Nunito'; color: #2a2a2e; }
#iam-tra .tra-day.t b { color: #5a8f1a; }
#iam-tra .tra-day:hover { background: rgba(0,0,0,.08); }
#iam-tra .tra-day.on { background: #1d1d20; } #iam-tra .tra-day.on b { color: #fff; } #iam-tra .tra-day.on s { color: #9a9a9f; }
#iam-tra .tra-cust { height: 32px; width: 86px; border: 0; border-radius: 11px; background: rgba(0,0,0,.05); font: 800 13px 'Nunito'; color: #1d1d20; text-align: center; outline: 0; }
#iam-tra .tra-cust:focus, #iam-tra .tra-cust.on { background: #fff; box-shadow: inset 0 0 0 1.5px #1d1d20; }
#iam-tra.shake .tra-top { animation: traShake .35s; }
@keyframes traShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* новая строка в списке — короткая салатовая подсветка */

@media (prefers-reduced-motion: reduce) { #iam-tra, #iam-tra .tra-panes.on { transition: none; animation: none; } }
/* летящая копия новой задачи (как строка списка) */
.tra-ghost { position: fixed; z-index: 1400; height: 46px; display: flex; align-items: center; gap: 14px; padding: 0 10px; border-radius: 12px; pointer-events: none;
  background: #1f2a14; box-shadow: 0 18px 40px -14px rgba(0,0,0,.7), inset 0 0 0 1px rgba(185,243,108,.35); color: #f4f4f2; font: 700 16px 'Nunito', system-ui; transform-origin: 0 50%; will-change: transform, opacity; }
.tra-ghost i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #8d8d92; flex: none; }
.tra-ghost b { font-weight: 700; white-space: nowrap; }
.tra-ghost small { font: 700 13px 'Nunito', system-ui; color: #8d8d92; white-space: nowrap; }
#app-sheet .task-row.tra-new { position: relative; }
#app-sheet .task-row .tra-glow { position: absolute; inset: 0; border-radius: 12px; pointer-events: none; animation: traGlow 1.6s ease-out forwards; }
@keyframes traGlow { 0% { background: rgba(185,243,108,.16); box-shadow: inset 0 0 0 1px rgba(185,243,108,.4); } 100% { background: transparent; box-shadow: none; } }
/* по сетке списка задач над подложкой (10.11, владелец: «тут всё ровно?», проверено замером):
   кружок по центру кружков строк (центр 66), текст, значки, описание и варианты — с одной линии 88, как названия задач;
   справа «Создать» — на 58, как время в строках; сверху и снизу поровну по 26. */
#iam-tra { padding: 26px 58px 0 56px; }
#iam-tra .tra-bar { margin-left: 22.5px; }   /* кнопка 40, значок 21 — сам значок начинается на 88 */
#iam-tra .tra-panes { margin-left: 32px; }
/* «Создать» внизу справа — в одном ряду со значками (10.11, владелец) */
#iam-tra .tra-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
#iam-tra .tra-row .tra-bar { margin-top: 0; flex: 1; min-width: 0; }
#iam-tra .tra-row .tra-esc { margin-left: auto; }
#iam-tra .tra-top { min-height: 40px; }   /* без кнопки строка названия ниже — держим 40, чтобы отступы сверху и снизу остались по 26 */