/* app.css — .division design system · бренд SSD (ssdbrand.json, 2026-09-02)
   Один акцент (signal); ok/warn/err — лише стан даних; глибина лінією, не тінню. */
:root{
  --f-disp:"Manrope","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --r:10px; --r-sm:8px; --r-lg:14px;
  --unit:4px; --gutter:20px; --sp:16px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --shadow:none; --shadow-sm:none;
  --accent2:var(--signal-bright);
  /* три «пілари»/зони процесу: розрізняються тоном, не відтінком */
  --commercial:var(--signal); --logistics:var(--muted); --shared:var(--text);
  --danger:var(--err);
  --lit:linear-gradient(180deg,var(--signal) 0%,transparent 100%);
}
/* Бренд v2 «SSD · екосистема» (design canvas, tokens.json v2): ground/tile/line/ink + шкала ескалації dot-1..3.
   Світиться ЛИШЕ signal (= dot-3): маркер активного, фокус, «жива» крапка. Заливка primary — ink, не червоний
   (білий текст на #FF5A44 ≈3:1 — нижче AA). */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#050607; --bg2:#0B0C0E; --bg3:#121418; --bg4:#181B20;
  --line:#23262B; --line2:#2C2F35;
  --text:#EDEDED; --muted:#B8B8B8; --faint:#8A8D94;
  --signal:#FF5A44; --signal-bright:#FF5A44; --accent:#EDEDED;
  --accent-hover:#FFFFFF; --accent-text:#FF6B57;
  --accent-wash:#1E0F0D;
  --dot-1:#8A2218; --dot-2:#D63A28; --dot-3:#FF5A44; --dot-dim:#2C2F35;
  --glow:0 0 16px rgba(255,90,68,.6);
  --ok:#24D68A; --warn:#FFB020; --err:#FF4FA3;
  --on-accent:#050607; --on-err:#14090A;
  --mark-cell:#2C2F35;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F4F4F2; --bg2:#FFFFFF; --bg3:#FFFFFF; --bg4:#EEEEEB;
  --line:#D9D9D4; --line2:#C9C9C3;
  --text:#0B0C0E; --muted:#55585F; --faint:#64676E;
  --signal:#EE3B24; --signal-bright:#EE3B24; --accent:#0B0C0E;
  --accent-hover:#26282C; --accent-text:#C42A15;
  --accent-wash:#FBE7E3;
  --dot-1:#EBB5AD; --dot-2:#E27565; --dot-3:#EE3B24; --dot-dim:#D4D4D0;
  --glow:0 0 14px rgba(238,59,36,.4);
  --ok:#096A42; --warn:#8A5200; --err:#A3195B;
  --on-accent:#F4F4F2; --on-err:#fff;
  --mark-cell:#D4D4D0;
}
:root{
  --ok-wash:color-mix(in srgb,var(--ok) 14%,transparent);
  --warn-wash:color-mix(in srgb,var(--warn) 14%,transparent);
  --err-wash:color-mix(in srgb,var(--err) 14%,transparent);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:14px;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
/* доступність: видимий фокус для всього керованого з клавіатури (specific-правила нижче лише уточнюють вигляд) */
:focus-visible{outline:2px solid var(--signal-bright);outline-offset:2px}
[tabindex="-1"]:focus{outline:none}
[role="button"][tabindex]:focus-visible{outline-offset:-2px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-64px;z-index:100;padding:9px 14px;background:var(--accent);color:var(--on-accent);border-radius:var(--r-sm);font-weight:700;font-size:13px;text-decoration:none;transition:top .12s}
.skip-link:focus{top:10px}
code{font-family:var(--f-mono)}
.icon{display:inline-flex;align-items:center;justify-content:center}
.icon svg{width:18px;height:18px}
.muted{color:var(--muted)} .sub{color:var(--muted);font-size:12.5px;line-height:1.45}
.empty{padding:40px;text-align:center;color:var(--faint)}

/* ---- оболонка: див. «ОБОЛОНКА v2» наприкінці файлу ---- */

/* ---- buttons / fields ---- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);background:var(--bg3);color:var(--text);padding:9px 15px;border-radius:var(--r-sm);font-weight:600;font-size:13px;transition:background 160ms var(--ease),border-color 160ms var(--ease),color 160ms var(--ease)}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn:focus-visible,.nav-item:focus-visible,.pillar:focus-visible,.icon-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--signal-bright)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 11px;font-size:12px}.btn.xs{padding:5px 9px;font-size:11.5px}.btn.full{width:100%;justify-content:center}
.btn .icon svg{width:15px;height:15px}
.chip-btn{border:1px solid var(--line2);background:var(--bg3);color:var(--muted);padding:6px 12px;border-radius:var(--r-sm);font-size:12px;font-weight:600}
.chip-btn.on{background:var(--accent-wash);border-color:var(--accent);color:var(--text)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field-label{font-size:12px;font-weight:600;color:var(--muted)} .field-label em{color:var(--danger)}
.field-hint{font-size:11px;color:var(--faint)}
.control{background:var(--bg);border:1px solid var(--line2);color:var(--text);border-radius:var(--r-sm);padding:9px 11px;font-size:13.5px;font-family:inherit;width:100%}
.control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--signal-bright)}
textarea.control{resize:vertical}
.field-group{display:flex;flex-direction:column;gap:2px;margin-top:18px}
.switch{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);font-weight:600}
.switch input{width:16px;height:16px;accent-color:var(--accent)}

/* ---- view head + toolbar ---- */
.view-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.view-head h2{font-family:var(--f-disp);font-size:clamp(1.25rem,2.6vw,1.6rem);font-weight:700;letter-spacing:-.02em}
.view-head .sub{margin-top:4px;max-width:80ch}
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.search{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r-sm);padding:8px 14px;flex:1;min-width:240px}
.search .icon{color:var(--faint)} .search-input{border:0;background:transparent;color:var(--text);font-size:13.5px;width:100%;outline:none}
.chips{display:flex;gap:7px;flex-wrap:wrap}

/* ---- offer cards (supply/sales) ---- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.offer{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:9px;transition:border-color 160ms var(--ease)}
.offer:hover{border-color:var(--line2);}
.offer-top{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:3px 8px;border-radius:var(--r-sm);background:var(--bg3);color:var(--muted)}
.chip.cat{color:var(--accent-text);background:var(--accent-wash)}
.chip.hs{font-family:var(--f-mono)}
.chip.drop{color:var(--ok);background:var(--ok-wash)}
.offer-name{font-size:15px;font-weight:700;line-height:1.25}
.offer-sup{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)} .offer-sup .icon svg{width:15px;height:15px}
.offer-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.badge{font-size:11px;padding:3px 8px;border-radius:var(--r-sm);background:var(--bg3);color:var(--muted);border:1px solid var(--line)}
.badge.inco{color:var(--accent-text);border-color:transparent;background:var(--accent-wash)}
.offer-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px;border-top:1px solid var(--line)}
.price{font-family:var(--f-mono);font-weight:500;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- deals ---- */
.deal-list{display:flex;flex-direction:column;gap:13px}
.deal{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.deal-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.deal-id{font-family:var(--f-mono);font-size:11px;color:var(--faint)}
.deal-name{font-size:15.5px;font-weight:700;margin-top:2px}
.deal-sub{font-size:12.5px;color:var(--muted);margin:6px 0 12px}
.state-pill{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;white-space:nowrap}
.state-pill.commercial{background:var(--accent-wash);color:var(--commercial)}
.state-pill.logistics{background:var(--bg4);color:var(--logistics)}
.state-pill.shared{background:var(--bg4);color:var(--shared)}
.state-pill.exc{outline:1.5px dashed var(--warn);outline-offset:-1.5px}
.rail{display:flex;gap:6px;align-items:center}
.rail.exc{opacity:.45}
.rail-dot{width:100%;height:6px;border-radius:var(--r-sm);background:var(--bg3)}
.rail-dot.done{background:var(--accent2)}
.rail-dot.cur{height:8px}
.rail-dot.cur.commercial{background:var(--commercial)}.rail-dot.cur.logistics{background:var(--logistics)}.rail-dot.cur.shared{background:var(--shared)}
.deal-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.row-gap{display:flex;gap:8px}
.transition{display:flex;align-items:center;gap:10px;margin:14px 0}
.pill{padding:6px 12px;border-radius:var(--r-sm);background:var(--bg3);font-weight:600;font-size:12.5px}
.pill.on{background:var(--accent);color:var(--on-accent)}
.dev-banner{display:flex;align-items:center;gap:12px;padding:6px 22px;background:var(--warn-wash);color:var(--warn);font-size:12.5px;border-bottom:1px solid var(--line)}
.dev-banner span{flex:1;min-width:0}
.warn-box{margin-top:12px;padding:10px 12px;border-radius:var(--r-sm);background:var(--warn-wash);color:var(--warn);font-size:12.5px;font-weight:600}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:16px}
.admin-grid .card-panel{margin-top:0}
.admin-h{margin:0 0 12px;font-size:14px}
.admin-kv{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:13px}
.admin-kv .k{color:var(--muted)}
.admin-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;margin-bottom:6px}
.admin-badge.on{background:var(--ok-wash);color:var(--ok)}
.admin-badge.off{background:var(--err-wash);color:var(--err)}
.info-box{margin-top:12px;padding:10px 12px;border-radius:var(--r-sm);background:var(--accent-wash);color:var(--text);font-size:12.5px;font-weight:600}
.events{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow:auto}
.event{display:flex;gap:12px;align-items:center;padding:9px 12px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm)}
.event-seq{font-family:var(--f-mono);color:var(--accent-text);font-weight:700}
.event-main{font-weight:600;font-size:13px}.event-meta{font-size:11px;color:var(--faint)}

/* ---- tracker board ---- */
.track-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;align-items:start}
.track-col{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.track-col-hd{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border-bottom:1px solid var(--line)}
.track-stage{font-size:12.5px;font-weight:700;color:var(--logistics)}
.count{font-size:11px;background:var(--bg3);color:var(--muted);border-radius:var(--r-sm);padding:1px 8px;font-weight:700}
.track-col-body{padding:10px;display:flex;flex-direction:column;gap:9px;min-height:60px}
.track-card{background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-sm);padding:11px;display:flex;flex-direction:column;gap:5px}
.track-card-id{font-family:var(--f-mono);font-size:10.5px;color:var(--faint)}
.track-card-name{font-weight:700;font-size:13px}.track-card-sub{font-size:11px;color:var(--muted);line-height:1.35}
.track-card .btn{margin-top:4px}
.track-empty{color:var(--faint);text-align:center;padding:8px;font-size:12px}

/* ---- teams ---- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:13px}
.member{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.member-top{position:relative}
.avatar{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--text);font-size:18px}
.dot{position:absolute;right:-1px;bottom:-1px;width:13px;height:13px;border-radius:50%;border:2px solid var(--bg2)}
.dot.online{background:var(--ok)}.dot.away{background:var(--warn)}.dot.offline{background:var(--faint)}
.member-name{font-weight:700;font-size:14px}.member-handle{font-size:12px;color:var(--accent-text)}
.role-select{background:var(--bg);border:1px solid var(--line2);color:var(--text);border-radius:var(--r-sm);padding:6px 8px;font-size:12px;width:100%}
.member-scopes{font-size:10px;color:var(--faint);line-height:1.4;font-family:var(--f-mono)}

/* ---- account ---- */
.account-card{max-width:620px}
.account-hero{display:flex;align-items:center;gap:18px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.avatar-wrap{position:relative;cursor:pointer}
.avatar-xl{width:84px;height:84px;border-radius:24px;object-fit:cover;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:30px;color:var(--text)}
.avatar-edit{position:absolute;right:-6px;bottom:-6px;background:var(--accent);color:var(--on-accent);border-radius:50%;padding:6px}
.avatar-edit svg{width:14px;height:14px}
.account-sub{display:flex;align-items:center;gap:10px;margin:6px 0}
.role-badge{font-size:11px;font-weight:700;text-transform:lowercase;letter-spacing:.02em;padding:3px 9px;border-radius:var(--r-sm);background:var(--accent-wash);color:var(--accent-text)}
.role-badge.owner{background:var(--warn-wash);color:var(--warn)}
.handle{color:var(--accent-text);font-weight:600;font-size:13px}
.account-foot{margin-top:18px}
.mini-label{font-size:11px;letter-spacing:.02em;text-transform:lowercase;color:var(--faint);font-weight:700;margin-bottom:8px}
.scope-chips{display:flex;flex-wrap:wrap;gap:6px}
.scope-chip{font-family:var(--f-mono);font-size:11px;padding:3px 9px;border-radius:var(--r-sm);background:var(--bg3);border:1px solid var(--line);color:var(--muted)}

/* ---- in-view segmented sub-tabs (AI hub, Skills filters) ---- */
.subtabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:18px;border-bottom:1px solid var(--line)}
.subtab{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--muted);padding:9px 14px;font-weight:600;font-size:13px;border-bottom:2px solid transparent;margin-bottom:-1px}
.subtab:hover{color:var(--text)}
.subtab.on{color:var(--accent-text);border-bottom-color:var(--accent)}
.subtab .icon svg{width:16px;height:16px}
.ai-panel{min-height:220px}
.ai-panel .card-panel:first-child,.ai-panel .ai-context:first-child{margin-top:0}

/* ---- AI ---- */
.card-panel{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-top:16px}
.ai-context{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.ai-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.ai-stat{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 16px;min-width:96px}
.ai-stat-n{font-family:var(--f-disp);font-weight:800;letter-spacing:-.03em;font-size:28px;line-height:1;color:var(--accent-text)}
.ai-stat-l{font-size:11px;color:var(--muted);margin-top:3px}
.lock-row{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.lock-row .icon{color:var(--warn)}
.fineprint{font-size:11px;color:var(--faint);margin-top:10px;line-height:1.5}
.ai-active{display:flex;align-items:center;gap:10px;font-weight:600;font-size:13px;color:var(--ok);margin-bottom:12px}
.ai-active .icon{color:var(--ok)} .ai-active .icon-btn{margin-left:auto}
.ai-log{display:flex;flex-direction:column;gap:10px;max-height:38vh;overflow:auto;padding:4px}
.ai-bubble{max-width:84%;padding:11px 14px;border-radius:var(--r);background:var(--bg);border:1px solid var(--line);font-size:13.5px;line-height:1.5;white-space:pre-wrap}
.ai-bubble.me{align-self:flex-end;background:var(--accent-wash);border-color:transparent}
.ai-bubble.err{border-color:var(--danger);color:var(--danger)}
.ai-who{font-size:10.5px;text-transform:lowercase;letter-spacing:.02em;color:var(--faint);font-weight:700;margin-bottom:4px}
.ai-quick{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}
.ai-composer{display:flex;gap:9px;align-items:flex-end}.ai-q{flex:1}
.cap-panel{margin-top:16px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:8px 16px}
.cap-panel summary{cursor:pointer;font-weight:600;font-size:13px;padding:8px 0;color:var(--muted)}
.cap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:8px 0 12px}
.cap-mod-hd{display:flex;align-items:center;gap:8px;margin-bottom:7px}.cap-mod-hd .icon{color:var(--accent-text)}
.cap-tools{display:flex;flex-direction:column;gap:4px}
.cap-tool{font-size:11px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:3px 7px}

/* ---- Skills library ---- */
.skills-note{margin-bottom:16px}
.skills-note .card-panel{margin-top:0;display:flex;align-items:center;gap:12px}
.skills-note .ai-active{margin-bottom:0}
.skill{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px;transition:border-color 160ms var(--ease)}
.skill:hover{border-color:var(--line2);}
.skill-hd{display:flex;align-items:flex-start;gap:11px}
.skill-hd>.icon{color:var(--accent-text);background:var(--accent-wash);border-radius:var(--r-sm);padding:8px;flex-shrink:0}
.skill-hd>.icon svg{width:20px;height:20px}
.skill-meta{display:flex;flex-direction:column;gap:5px;min-width:0}
.skill-title{font-size:15px;font-weight:700;line-height:1.25}
.skill-meta .chip.cat{align-self:flex-start}
.skill-sum{font-size:12.5px;color:var(--muted);line-height:1.5;flex:1}
.skill-uses{display:flex;flex-wrap:wrap;gap:5px}
.skill-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.skill-prompt{font-size:13px;line-height:1.55;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;margin-bottom:14px;white-space:pre-wrap}

/* ---- RX-TX messenger ---- */
.rx{display:grid;grid-template-columns:300px 1fr;height:calc(100vh - 130px);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg2)}
.rx-list{border-right:1px solid var(--line);overflow-y:auto;background:var(--bg2)}
.rx-list-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700}
.rx-badge{font-size:9.5px;background:var(--accent-wash);color:var(--accent-text);padding:2px 7px;border-radius:999px;letter-spacing:.02em;text-transform:lowercase}
.rx-chatitem{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
.rx-chatitem:hover{background:var(--bg3)} .rx-chatitem.on{background:var(--accent-wash)}
.rx-ava{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text);font-weight:700;flex-shrink:0}
.rx-ava.sm{width:36px;height:36px;font-size:13px}.rx-ava.xs{width:28px;height:28px;font-size:11px}
.rx-chatmeta{flex:1;min-width:0}
.rx-chattitle{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rx-chatlast{font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rx-chattime{font-size:10.5px;color:var(--faint)}
.rx-chat{display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
.rx-empty{margin:auto;color:var(--faint)}
.rx-chat-hd{display:flex;align-items:center;gap:11px;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--bg2)}
.rx-stream{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.rx-msg{display:flex;gap:8px;align-items:flex-end;max-width:74%}
.rx-msg.mine{align-self:flex-end;flex-direction:row-reverse}
.rx-bubble{background:var(--bg2);border:1px solid var(--line);padding:9px 12px;border-radius:14px;border-bottom-left-radius:4px}
.rx-msg.mine .rx-bubble{background:var(--accent);color:var(--on-accent);border-color:transparent;border-bottom-left-radius:14px;border-bottom-right-radius:4px}
.rx-from{font-size:11px;font-weight:700;color:var(--accent-text);margin-bottom:3px}
.rx-text{font-size:13.5px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.rx-time{font-size:10px;opacity:.6;margin-top:4px;text-align:right}
.rx-att-img{max-width:260px;max-height:260px;border-radius:10px;display:block;margin-bottom:5px}
.rx-att-video{max-width:280px;border-radius:10px;display:block;margin-bottom:5px}
.rx-att-audio{display:flex;align-items:center;gap:8px;margin-bottom:5px}.rx-att-audio audio{height:34px}
.rx-att-file{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;background:rgba(0,0,0,.12);padding:9px 11px;border-radius:8px;margin-bottom:5px}
.rx-att-name{font-size:13px;font-weight:600}.rx-att-size{font-size:11px;opacity:.7}
.rx-composer-wrap{border-top:1px solid var(--line);background:var(--bg2)}
.rx-tray{display:flex;gap:7px;flex-wrap:wrap;padding:10px 14px 0}
.rx-chip{display:flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--line2);border-radius:var(--r-sm);padding:4px 6px 4px 10px;font-size:11.5px}
.rx-chip .icon svg{width:14px;height:14px}
.rx-chip-x{border:0;background:transparent;color:var(--faint);font-size:15px;line-height:1;padding:0 4px}
.rx-composer{display:flex;align-items:flex-end;gap:8px;padding:12px 14px}
.rx-iconbtn{display:inline-flex;border:0;background:var(--bg3);color:var(--muted);border-radius:50%;padding:9px}
.rx-iconbtn:hover{color:var(--accent-text)} .rx-iconbtn.rec{background:var(--danger);color:var(--on-err);animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.rx-input{flex:1;resize:none;max-height:120px;background:var(--bg);border:1px solid var(--line2);color:var(--text);border-radius:18px;padding:10px 14px;font-family:inherit;font-size:13.5px;outline:none}
.rx-input:focus{border-color:var(--accent)}
.rx-send{border:0;background:var(--accent);color:var(--on-accent);border-radius:50%;padding:10px;display:inline-flex}
.rx-send:hover{filter:brightness(1.1)}

/* ---- modal ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:.2s;z-index:50}
.modal-overlay.show{opacity:1}
.modal{background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r-lg);width:min(460px,92vw);max-height:88vh;overflow:hidden;display:flex;flex-direction:column;transform:translateY(8px);transition:.2s}
.modal-overlay.show .modal{transform:none}
.modal-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.modal-hd h3{font-family:var(--f-disp);font-size:1.02rem;font-weight:600;letter-spacing:-.01em}
.modal-body{padding:18px;overflow-y:auto}
.modal-ft{display:flex;justify-content:flex-end;gap:10px;padding:14px 18px;border-top:1px solid var(--line)}

/* ---- toast ---- */
.toast-host{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:60;align-items:center}
.toast{display:flex;align-items:center;gap:9px;background:var(--bg3);border:1px solid var(--line2);color:var(--text);padding:10px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:500;opacity:0;transform:translateY(10px);transition:.25s}
.toast.show{opacity:1;transform:none}
.toast .icon svg{width:16px;height:16px}
.toast-act{margin-left:8px;background:none;border:0;color:var(--accent-text);font-weight:700;font-size:13px;padding:4px 6px;border-radius:var(--r-sm)}
.toast-act:hover{background:var(--accent-wash)}
.toast.ok .icon{color:var(--ok)} .toast.error{border-color:var(--danger)} .toast.error .icon{color:var(--danger)}

/* ---- node-graph (global platform class: platform/graph.js) ---- */
.ng-wrap{position:relative;overflow:hidden;background:
  radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0/22px 22px,
  var(--bg2);border:1px solid var(--line);border-radius:var(--r);cursor:grab;touch-action:none;user-select:none}
.ng-wrap:active{cursor:grabbing}
.ng-world{position:absolute;top:0;left:0;transform-origin:0 0}
.ng-edges{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
.ng-arrow{fill:var(--faint)}
.ng-edge{fill:none;stroke:var(--faint);stroke-width:2}
.ng-edge-rule{stroke:var(--shared);stroke-dasharray:5 4}
.ng-edge-split{stroke:var(--logistics)}
.ng-edge-live{stroke:var(--accent);stroke-width:2;stroke-dasharray:4 4}
.ng-node{position:absolute;display:flex;align-items:center;gap:8px;background:var(--bg3);border:2px solid var(--line2);
  border-radius:var(--r);padding:10px 12px;cursor:grab}
.ng-node:active{cursor:grabbing}
.ng-node-body{min-width:0;flex:1}
.ng-node-title{font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ng-node-sub{font-size:10.5px;color:var(--muted);text-transform:lowercase;letter-spacing:.02em}
.ng-badge{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-sm);
  background:var(--accent);color:var(--on-accent);font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.ng-port{position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--bg);border:2px solid var(--line2)}
.ng-port-in{left:-8px}
.ng-port-out{right:-8px;cursor:crosshair;border-color:var(--accent)}
.ng-port-hot{border-color:var(--ok);background:var(--ok-wash)}
.ng-tools{position:absolute;right:10px;top:10px;display:flex;gap:4px;z-index:3}
.ng-tool{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line2);background:var(--bg2);color:var(--text);border-radius:var(--r-sm);font-size:15px;font-weight:700;padding:0}
.ng-tool:hover{border-color:var(--accent)}
.ng-node:focus-visible{outline:2px solid var(--signal-bright);outline-offset:2px}
.ng-link-src{box-shadow:0 0 0 3px var(--accent-wash),0 0 0 4px var(--accent)}
.ng-wrap.ng-linking .ng-node{cursor:crosshair}
.ng-hint{position:absolute;left:10px;bottom:8px;font-size:10.5px;color:var(--faint);background:var(--bg2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:3px 10px;pointer-events:none}

/* адаптив (≥981 повний сайдбар · 761–980 рейка-іконки · ≤760 шухляда модулів) — правила в КІНЦІ файлу, після всіх компонентів */
.nav-scrim{display:none}
@media (min-width:761px){.top-menu{display:none!important}}

/* ---- Universal Tracker ---- */
.tr-pack{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.tr-pack-info{min-width:0}
.tr-sync{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:6px 10px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;color:var(--muted)}
.tr-sync[hidden]{display:none}
.tr-sync.ok{background:transparent;padding-left:0}
.tr-sync.syncing{color:var(--text)}
.tr-sync.offline,.tr-sync.conflict{background:var(--warn-wash);color:var(--warn)}
.tr-sync.error,.tr-sync.failed{background:var(--err-wash);color:var(--err)}
.tr-sync-txt{flex:1 1 auto;min-width:0}
.tr-subnav{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--line);padding-bottom:10px}
.tr-navbtn{display:flex;align-items:center;gap:7px;border:1px solid transparent;background:transparent;color:var(--muted);padding:6px 9px;border-radius:var(--r-sm);font-weight:600;font-size:13px}
.tr-navsep{align-self:stretch;width:9px;flex:none;background:linear-gradient(var(--line2),var(--line2)) center/1px 16px no-repeat}
.tr-navbtn:hover{background:var(--bg3);color:var(--text)}
.tr-navbtn.on{background:var(--accent-wash);color:var(--text);border-color:var(--accent)}
.tr-navbtn .icon svg{width:15px;height:15px}
kbd{font-family:var(--f-mono);font-size:11px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;padding:1px 6px;background:var(--bg3);color:var(--muted);font-weight:600}
.tr-palbtn{gap:8px}
.tr-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:10px;margin-top:14px;text-align:left}
.tr-pick{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:12px 14px;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r);color:var(--text);font:inherit}
.tr-pick:hover{border-color:var(--accent);background:var(--accent-wash)}
.tr-pick-d{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tr-pick-meta{font-size:11px;color:var(--faint);margin-top:2px}
/* редактор процесу: полотно, список кроків, інспектор, перевірка */
.tr-canvas-hd{justify-content:space-between}
.tr-canvas{margin-bottom:10px}
.tr-steplist{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.tr-steprow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg)}
/* Ф13.1 флоу процесу (Zapier/Make-подібний ланцюг): Старт → картки кроків із «+» між ними → Готово */
.tr-flow{display:flex;flex-direction:column;align-items:stretch;margin:8px 0;max-width:760px}
.tr-flowcard{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line2);border-left:3px solid var(--line2);border-radius:var(--r);background:var(--bg2)}
.tr-flowcard[data-kind="skill"]{border-left-color:var(--signal)}
.tr-flowcard[data-kind="action"]{border-left-color:var(--ok)}
.tr-flowcard[data-kind="human"]{border-left-color:var(--accent)}
.tr-flow-start,.tr-flow-end{background:transparent;border-style:dashed;border-left-width:1px}
.tr-flow-ico{font-size:18px;line-height:1;width:24px;text-align:center}
.tr-flow-main{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:1;min-width:180px;text-align:left}
button.tr-flow-main{background:none;border:0;padding:0;color:var(--text);font:inherit;cursor:pointer}
button.tr-flow-main:hover b{text-decoration:underline}
.tr-flow-gap{display:flex;justify-content:center;position:relative;height:30px}
.tr-flow-gap::before{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:2px solid var(--line2)}
.tr-flow-plus{position:relative;z-index:1;align-self:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line2);background:var(--bg);color:var(--muted);display:flex;align-items:center;justify-content:center;padding:0;opacity:.75;transition:opacity .15s,border-color .15s}
.tr-flow-plus:hover,.tr-flow-plus:focus-visible{opacity:1;border-color:var(--accent);color:var(--text)}
.tr-flow-plus .icon svg{width:13px;height:13px}
.tr-flow-empty{text-align:center}
.tr-viewsw{display:flex;gap:4px;margin-left:auto;margin-right:8px}
.tr-kindsw{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.tr-kindopt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r);background:var(--bg2);color:var(--text);font:inherit}
.tr-kindopt:hover{border-color:var(--accent)}
.tr-kindopt.on{border-color:var(--accent);background:var(--accent-wash);box-shadow:inset 0 0 0 1px var(--accent)}
.tr-kindopt .sub{font-size:11.5px}
/* телефон: вісім карток з описами відсували «Основне» на три екрани — опис лишається лише в вибраної */
@media (max-width:760px){.tr-kindsw{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));align-items:start}.tr-kindopt{padding:8px 10px}.tr-kindopt:not(.on) .sub{display:none}}
/* Вузли потоку (Ф14.7a): ряд видів, форма налаштувань, сторінка «Запуски» */
.tr-kindhead{margin:14px 0 6px;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.tr-nodeform{margin-top:10px;padding:12px;border:1px dashed var(--line2);border-radius:var(--r);background:var(--bg2)}
.tr-nodeform .row-gap{flex-wrap:wrap}
.tr-nodeform .control{min-width:0;flex:1 1 160px}
.tr-run{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg2);margin:8px 0;overflow:hidden}
.tr-runrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;width:100%;padding:11px 13px;background:transparent;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.tr-runrow:hover,.tr-runrow:focus-visible{background:var(--accent-wash)}
.tr-runico{width:1.4em}
.tr-rundetail{padding:4px 13px 12px 38px;border-top:1px solid var(--line)}
.tr-runsteps{list-style:none;margin:8px 0;padding:0;border-left:2px solid var(--line2)}
.tr-runstep{padding:4px 0 6px 12px;position:relative}
.tr-runstep::before{content:'';position:absolute;left:-5px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--line2)}
.tr-runstep.NODE_FAILED::before,.tr-runstep.AUTO_STEP_HELD::before,.tr-runstep.BINDING_FAILED::before{background:var(--bad,#e5484d)}
.tr-runstep.NODE_DONE::before,.tr-runstep.STATE_VALIDATED::before{background:var(--ok,#30a46c)}
.tr-runstep.NODE_FILTERED::before{background:var(--warn,#f5a623)}

.tr-kindico{font-size:18px}
.tr-stepn{font-family:var(--f-mono);font-size:11px;color:var(--faint);min-width:18px;text-align:right}
.tr-stepmarks{font-size:11.5px;color:var(--muted);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-lint{margin:10px 0;padding:10px 12px;border-radius:var(--r-sm);font-size:12.5px;border:1px solid var(--line)}
.tr-lint.ok{color:var(--ok);background:var(--ok-wash);border-color:transparent}
.tr-lint.warn{background:var(--warn-wash);border-color:transparent}
.tr-lint.bad{background:var(--err-wash);border-color:transparent}
.tr-lint ul{margin:6px 0 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.tr-lint li.bad{color:var(--err)}.tr-lint li.warn{color:var(--warn)}
.modal.modal-wide{width:min(760px,94vw)}
.tr-inspector{display:flex;flex-direction:column;gap:16px}
.tr-isec h4{font-family:var(--f-disp);font-size:.95rem;margin-bottom:4px}
.tr-isec .sub{margin-bottom:8px}
.tr-iflags{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.tr-cond{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:start;margin:6px 0}
.tr-expr{min-width:0}.tr-expr .control{width:100%}
.tr-expr-err{color:var(--err);font-size:11.5px;min-height:0}
.control.invalid{border-color:var(--err)}
.tr-bind{border:1px solid var(--line2);border-radius:var(--r-sm);padding:10px;margin-bottom:8px;background:var(--bg)}
.tr-rulerow{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px;margin-bottom:8px}
.rx-chip.warn{border-color:var(--warn);color:var(--warn)}
.tr-linkbtn{background:none;border:0;color:inherit;font:inherit;padding:0 4px;cursor:pointer;text-align:left}
.tr-linkbtn:hover{text-decoration:underline}

.tr-onboard{padding:28px 24px;border:1px dashed var(--line2);border-radius:var(--r);text-align:center}
.tr-onboard h3{font-family:var(--f-disp);font-size:1.15rem;margin-bottom:6px}
.tr-onboard .sub{margin:0 auto;max-width:60ch}
.tr-onboard-tip{margin-top:16px!important}
/* Трекер міряє СВОЮ ширину, а не вікно: поруч із доком розмови (--dock-w) на 1440 px йому лишається ~700 px, на 1024 — ~540,
   тож макети на @media (ширина ВІКНА) розʼїжджались (редактор процесу виліз на 290–450 px). Контейнер — саме .tr-content, а не
   #view: containment робить контейнер блоком-опорою для position:fixed нащадків, а все fixed (палітра ⌘K, modal(), toast) іде
   в <body>. Шапка трекера (.tr-subnav) лежить поза контейнером — її правила лишаються на @media (привʼязані до падінгу .view). */
.tr-content{display:block;container:tracker/inline-size}
.tr-toprow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.tr-seg-wrap{display:flex;align-items:center;gap:8px}
.tr-seg{display:flex;gap:2px;background:var(--bg3);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px}
.tr-seg-btn{border:0;background:transparent;color:var(--muted);padding:6px 11px;border-radius:5px;font-size:12.5px;font-weight:600}
.tr-seg-btn.on{background:var(--accent);color:var(--on-accent)}
.control.sm{padding:6px 9px;font-size:12.5px;width:auto}
.tr-focusbar{display:flex;gap:7px;overflow-x:auto;padding-bottom:10px;margin-bottom:12px}
.tr-fchip{flex:none;display:flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid var(--line2);background:var(--bg2);color:var(--muted);padding:6px 12px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600}
.tr-fchip.on{background:var(--accent-wash);border-color:var(--accent);color:var(--text)}
.tr-fchip .count,.tr-col-hd .count{font-size:10.5px;background:var(--bg3);color:var(--muted);border-radius:var(--r-sm);padding:1px 7px;font-weight:700}
.tr-fchip .icon svg{width:13px;height:13px;color:var(--ok)}
.tr-datef{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px}
.tr-filters{display:contents}
.tr-filtertoggle{display:none}
.tr-filtern{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:var(--on-accent,#fff);font-size:11px;line-height:18px;text-align:center}
.tr-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.tr-meta{font-size:11.5px;color:var(--faint);margin-bottom:10px;font-weight:600;display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.tr-filter-note{color:var(--warn)}
/* pills / badges */
.tr-pbw{display:flex;align-items:center;gap:8px;width:100%;min-width:110px}
.tr-pb{position:relative;flex:1 1 auto;height:8px;min-height:8px;max-height:8px;background:var(--line);border-radius:var(--r-sm);overflow:hidden;min-width:60px}
.tr-pb.mini{height:5px;min-height:5px;max-height:5px;width:70px;flex:none}
.tr-pb-fill{height:100%;background:var(--accent);border-radius:var(--r-sm);transition:width .2s}
.tr-pb-fill.done{background:var(--ok)}.tr-pb-fill.blocked{background:var(--danger)}
.tr-pb-n{flex:none;min-width:34px;text-align:right;font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1}
.tr-status{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.tr-status.in_progress{background:var(--accent-wash);color:var(--accent-text)}
.tr-status.blocked{background:var(--err-wash);color:var(--danger)}
.tr-status.done{background:var(--ok-wash);color:var(--ok)}
.tr-sstatus{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px}
.tr-sstatus.pending{background:var(--bg3);color:var(--faint)}.tr-sstatus.ready{background:var(--warn-wash);color:var(--warn)}
.tr-sstatus.validated{background:var(--ok-wash);color:var(--ok)}.tr-sstatus.rejected{background:var(--err-wash);color:var(--danger)}
.tr-kind{font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--r-sm);text-transform:lowercase;letter-spacing:.02em;border:1px solid var(--line2);color:var(--muted)}
.tr-kind.split{color:var(--accent-text);border-color:transparent;background:var(--accent-wash)}
.tr-kind.finished{color:var(--ok);border-color:transparent;background:var(--ok-wash)}
.tr-kind.tr-quarantine{color:var(--err);border-color:transparent;background:var(--err-wash);margin-left:6px}
.tr-quarantine-why{color:var(--err)}
.tr-kdot{width:8px;height:8px;border-radius:50%;background:var(--faint);display:inline-block}
.tr-kdot.split{background:var(--accent)}.tr-kdot.finished{background:var(--ok)}
.tr-dl{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--muted);background:var(--bg3);padding:3px 9px;border-radius:var(--r-sm)}
.tr-dl .icon svg{width:13px;height:13px}
.tr-dl.over{color:var(--danger);background:var(--err-wash)}.tr-dl.soon{color:var(--warn);background:var(--warn-wash)}
.tr-ava{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:700;flex-shrink:0}
.tr-seq{font-family:var(--f-mono);font-size:11px;color:var(--faint)}
.tr-name{font-weight:700;font-size:14.5px}.tr-name.sm{font-size:13px}
/* list view */
.tr-list{display:flex;flex-direction:column;gap:10px}
.tr-row{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:13px 16px;cursor:pointer;transition:background 160ms var(--ease),border-color 160ms var(--ease),color 160ms var(--ease)}
.tr-row:hover{border-color:var(--line2)}
.tr-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.tr-row-hd{display:flex;align-items:center;gap:8px}
.tr-row-side{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
/* board */
.tr-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px;align-items:start}
.tr-col{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tr-col-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;border-bottom:1px solid var(--line);font-weight:700;font-size:13px}
.tr-col-body{padding:10px;display:flex;flex-direction:column;gap:9px;min-height:50px}
.tr-cardmini{background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-sm);padding:11px;display:flex;flex-direction:column;gap:7px;cursor:pointer}
.tr-cardmini:hover{border-color:var(--accent)}
.tr-cardmini-hd{display:flex;align-items:center;justify-content:space-between}
/* table */
.tr-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.tr-table{width:100%;border-collapse:collapse;font-size:13px}
.tr-table th{text-align:left;padding:10px 12px;background:var(--bg2);color:var(--muted);font-weight:600;cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--line)}
.tr-table td{padding:9px 12px;border-bottom:1px solid var(--line)}
.tr-table tr{cursor:pointer}.tr-table tbody tr:hover{background:var(--bg2)}
.tr-table td.over{color:var(--danger);font-weight:600}.tr-table td.soon{color:var(--warn);font-weight:600}
.tr-thbtn{all:unset;box-sizing:border-box;cursor:pointer;font:inherit;color:inherit;white-space:nowrap;padding:2px 4px;margin:-2px -4px;border-radius:var(--r-sm)}
.tr-thbtn:focus-visible{outline:2px solid var(--signal-bright);outline-offset:1px}
.tr-table a.tr-name{color:var(--text);text-decoration:none}.tr-table a.tr-name:hover{text-decoration:underline}
.tr-impersonate{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.tr-impersonate>span{flex:1 1 220px}
.tr-impersonate .btn{margin-left:0!important}
.tr-usercard .tr-kind{margin-left:8px}
.tr-detail-title{display:flex;align-items:center;gap:8px;margin:6px 0}
.tr-detail-title .tr-detail-name{margin:0;flex:1;min-width:0;overflow-wrap:anywhere}
.tr-detail-title .icon-btn{flex:none}
.tr-detail-hd>.row-gap{align-items:center}
.tr-rename{min-width:min(360px,100%);font-size:1.05rem;font-weight:600}
.tr-inst:focus{outline:none;box-shadow:0 0 0 2px var(--signal-bright)}
.tr-inst-toggle{background:none;border:0;color:var(--muted);font-size:14px;width:28px;height:28px;border-radius:var(--r-sm);padding:0}
.tr-inst-toggle:hover{color:var(--text);background:var(--bg3)}
.tr-inst.collapsed{opacity:.9}
/* calendar / cards */
.tr-cal{display:flex;flex-direction:column;gap:12px}
.tr-cal-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer}
.tr-cal-row:hover{border-color:var(--line2)}
.tr-cal-row.unread{background:var(--accent-wash)}
/* month grid: тиждень лишається тижнем, день — клітинкою, дедлайн — фішкою */
.tr-cal-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tr-cal-month{font-size:15px;text-transform:capitalize;min-width:140px}
.tr-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tr-cal-wd{background:var(--bg2);color:var(--muted);font-size:11.5px;font-weight:600;text-align:center;padding:6px 4px}
.tr-cal-cell{background:var(--bg);min-height:92px;padding:5px 5px 7px;display:flex;flex-direction:column;gap:3px}
.tr-cal-cell.out{background:var(--bg2);opacity:.55}
.tr-cal-cell.today{box-shadow:inset 0 0 0 2px var(--accent)}
.tr-cal-cell.drop{background:var(--accent-wash);box-shadow:inset 0 0 0 2px var(--accent)}
.tr-cal-dnum{font-size:11.5px;color:var(--muted);text-align:right}
.tr-chip-dl{font-size:11px;line-height:1.25;padding:3px 6px;border-radius:var(--r-sm);background:var(--bg3);border:1px solid var(--line2);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-chip-n{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-chip-s{display:block;font-size:10px;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-chip-dl:hover{border-color:var(--accent)}
.tr-chip-dl.soon{border-color:var(--warn);color:var(--warn)}
.tr-chip-dl.over{border-color:var(--danger);color:var(--danger)}
.tr-chip-dl.dragging{opacity:.4}
/* клітинки місяця ≤ ~80 px (телефон, 1024 + док): лише #номер — назва й крок не влазять (aria-label/title їх несуть) */
@container tracker (max-width:640px){.tr-cal-cell{min-height:64px}.tr-chip-dl{font-size:10px}.tr-chip-t,.tr-chip-s{display:none}}
/* dashboard */
.tr-stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.tr-stat{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;min-width:110px}
.tr-stat-n{font-family:var(--f-disp);font-weight:800;letter-spacing:-.03em;font-size:30px;line-height:1;color:var(--accent-text)}
.tr-stat-l{font-size:11.5px;color:var(--muted);margin-top:3px}
.tr-barrow{display:flex;align-items:center;gap:10px;margin:8px 0}.tr-barrow-l{width:90px;font-size:12px;color:var(--muted)}
.tr-legend{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:13px}
/* cards / detail */
.tr-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px}
.tr-card-t{font-weight:700;font-size:14px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.tr-card-t .count{font-size:11px;background:var(--bg3);border-radius:var(--r-sm);padding:1px 8px;color:var(--muted)}
.tr-empty{padding:26px;text-align:center;color:var(--faint);border:1px dashed var(--line2);border-radius:var(--r)}
.tr-empty.sm{padding:8px;font-size:12px;border:0}
.tr-detail-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.tr-detail-name{font-family:var(--f-disp);font-size:1.25rem;font-weight:700;letter-spacing:-.02em;margin:6px 0}
.tr-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.tr-summary{display:flex;flex-direction:column;gap:12px}
.tr-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tr-inst{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;margin-bottom:10px;background:var(--bg)}
.tr-inst-hd{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.tr-inst-name{font-weight:700;font-size:13.5px;flex:1}
/* процес кількох сторін (import-track-utec-sa): чия сторона веде крок, чий хід */
.tr-party{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--r-sm);border:1px solid var(--line2);color:var(--muted)}
.tr-inst.locked{background:var(--bg2);opacity:.86}
.tr-inst.mine{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-wash)}
.tr-lock-why{margin:-4px 0 8px}
.tr-turn{display:flex;align-items:center;gap:6px;margin:2px 0 4px}
.tr-turn.mine{color:var(--text)}
.tr-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tr-total td{border-top:2px solid var(--line2)}
.tr-reportgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:12px;margin-top:12px}
.tr-report .tr-key{white-space:nowrap}
.tr-tl-dot.IMPORTED{background:var(--warn)}.tr-tl-dot.ASSIGNMENT_CHANGED{background:var(--accent)}
.tr-form{display:flex;flex-direction:column;gap:2px}
.tr-computed{padding:9px 11px;background:var(--bg3);border-radius:var(--r-sm);font-family:var(--f-mono);font-size:13px;color:var(--accent-text)}
.tr-files{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.tr-file{display:flex;align-items:center;gap:8px;font-size:12.5px;background:var(--bg3);padding:6px 10px;border-radius:var(--r-sm)}
.tr-file a{color:var(--accent-text);text-decoration:none;min-width:0;overflow-wrap:anywhere}
.tr-file .sub{white-space:nowrap;flex:none}
.tr-file .tr-file-x{margin-left:auto}
.tr-file-blocked{color:var(--warn,#b45309);text-decoration:line-through dotted}
.tr-file-x{margin-left:auto;border:0;background:transparent;color:var(--faint);font-size:16px;line-height:1;cursor:pointer}
.tr-assign{padding:10px 0;border-bottom:1px solid var(--line)}
.tr-assign-hd{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.tr-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.tr-chips{display:flex;gap:7px;flex-wrap:wrap;margin:6px 0}
.tr-treerow{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:13px}
.tr-tl{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:12.5px}
.tr-tl-dot{width:9px;height:9px;border-radius:50%;background:var(--faint);flex-shrink:0}
.tr-tl-dot.STATE_VALIDATED{background:var(--ok)}.tr-tl-dot.SKILL_FAILED{background:var(--danger)}
.tr-tl-dot.SKILL_DISPATCHED,.tr-tl-dot.SKILL_DONE{background:var(--accent)}
.tr-tl .sub{margin-left:auto}
.tr-note-preview{margin-top:8px;padding:8px 10px;background:var(--bg3);border-radius:var(--r-sm);font-size:13px;min-height:20px}
.tr-mentions{white-space:pre-wrap;word-break:break-word}
.tr-ment{color:var(--accent-text);font-weight:600;cursor:pointer;text-decoration:none}
.tr-miss{color:var(--danger)}
.tr-twocol{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:16px;align-items:start}
.tr-listitem{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:8px}
.tr-listitem.arch{opacity:.55}
.tr-fields,.tr-fieldrow{display:flex;flex-direction:column;gap:6px}
.tr-fieldrow{flex-direction:row;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.tr-fieldrow .control{flex:1;min-width:90px}
.tr-usergrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px}
.tr-usercard{display:flex;align-items:center;gap:11px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:13px}
.tr-usercard.col{flex-direction:column;align-items:stretch}
.tr-riskgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.tr-card.risk.over{border-left:3px solid var(--danger)}.tr-card.risk.soon{border-left:3px solid var(--warn)}
.tr-card.risk.stall{border-left:3px solid var(--faint)}.tr-card.risk.await{border-left:3px solid var(--accent)}.tr-card.risk.fail{border-left:3px solid var(--danger)}
.tr-skip{color:var(--warn);margin-top:4px}
.tr-faq{padding:10px 0;border-bottom:1px solid var(--line)}
.tr-faq summary{cursor:pointer;font-weight:600;font-size:13.5px}
/* blueprint editor */
.tr-swatch{width:16px;height:16px;border-radius:50%;border:2px solid transparent;cursor:pointer}
.tr-swatch.on{border-color:var(--text)}
.tr-stateedit{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;margin-bottom:8px;background:var(--bg)}
.tr-binding{border-left:2px solid var(--accent);padding:6px 0 6px 10px;margin:6px 0}
.tr-imap{margin:4px 0 4px 6px}.tr-imap code{color:var(--accent-text)}
/* command palette */
.tr-pal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:80;display:flex;align-items:flex-start;justify-content:center;padding-top:12vh}
.tr-pal{width:min(560px,92vw);background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r-lg);overflow:hidden}
.tr-pal-input{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);padding:15px 18px;font-size:15px;outline:none}
.tr-pal-list{max-height:48vh;overflow:auto;padding:6px}
.tr-pal-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);cursor:pointer;font-size:13.5px}
.tr-pal-item.on,.tr-pal-item:hover{background:var(--accent-wash)}
.tr-pal-g{font-size:10px;font-weight:700;text-transform:lowercase;letter-spacing:.02em;color:var(--accent-text);min-width:54px}

/* ---- Assistant / Autofill ---- */
.as-log{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow:auto;padding:4px;margin-bottom:12px}
.as-bubble{max-width:88%;padding:11px 14px;border-radius:var(--r);background:var(--bg);border:1px solid var(--line);font-size:13.5px;line-height:1.5}
.as-bubble.me{align-self:flex-end;background:var(--accent-wash);border-color:transparent}
.as-ans{white-space:pre-wrap;word-break:break-word}
.as-tool{align-self:flex-start;max-width:88%;border:1px solid var(--line2);border-radius:var(--r-sm);padding:8px 11px;background:var(--bg3);font-size:12px}
.as-tool.err{border-color:var(--danger)}
.as-tool-hd{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.as-tool-hd code{color:var(--accent-text);font-weight:700}
.as-tool-in{color:var(--faint);font-family:var(--f-mono);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
.as-tool-res{margin-top:6px;white-space:pre-wrap;max-height:120px;overflow:auto;font-family:var(--f-mono);font-size:11.5px}
.as-tool-res.ok{color:var(--ok)}.as-tool-res.err{color:var(--danger)}.as-tool-res.pending{color:var(--faint)}
.as-confirm{align-self:flex-start;max-width:88%;border:1px solid var(--warn);border-radius:var(--r);padding:10px 12px;background:var(--warn-wash);font-size:12.5px}
.as-confirm.danger{border-color:var(--danger);background:var(--err-wash)}
.as-confirm.done{border-color:var(--line2);background:var(--bg3)}
.as-confirm.done.approved{border-color:var(--ok)}
.as-confirm-hd{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.as-confirm-what code{color:var(--accent-text);font-weight:700}
.as-confirm-why{margin-top:3px;color:var(--muted)}
.as-confirm-args{margin:7px 0 0;max-height:140px;overflow:auto;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);font-family:var(--f-mono);font-size:11px;white-space:pre-wrap;word-break:break-word}
.as-confirm-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:9px}
.as-drop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px;border:2px dashed var(--line2);border-radius:var(--r);cursor:pointer;color:var(--muted);text-align:center;margin-bottom:12px}
.as-drop:hover,.as-drop.over{border-color:var(--accent);background:var(--accent-wash)}
.as-drop .icon svg{width:24px;height:24px}
.btn.danger{background:var(--danger);border-color:var(--danger);color:var(--on-err)}
/* дві колонки — лише коли другій лишається ≥ ~520 px (редактор процесу: полотно + інспектор); вужче — одна колонка */
@container tracker (max-width:880px){.tr-detail-grid,.tr-twocol{grid-template-columns:minmax(0,1fr)}}
.tr-hit{margin:2px 0 4px;color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-cal-row.unassigned{border-left:3px solid var(--warn,#f59e0b)}

/* ---- brand: tabular numerics, reduced motion ---- */
.count,.tr-stat-n,.ai-stat-n,.rx-time,.rx-chattime,.event-seq{font-variant-numeric:tabular-nums}
.tr-table td,.tr-table th{font-variant-numeric:tabular-nums}
/* ---- адаптив: рейка-іконки, шухляда, тач-цілі (ПІСЛЯ всіх компонентів: той самий специфікатор, виграє пізніший) ---- */
@media (max-width:980px){.rx{grid-template-columns:1fr}}
@media (max-width:760px){
  .nav-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:65;opacity:0;pointer-events:none;transition:opacity .22s}
  body.nav-open .nav-scrim{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}
  .view{padding:14px 14px 28px}
  .view-head{margin-bottom:12px;gap:10px}
  .dev-banner{padding:6px 12px;gap:8px}
  .dev-banner-t{display:none}
  .dev-banner b{flex:1}
  /* Universal Tracker: лише те, що поза контейнером .tr-content (шапка-вкладки, палітра в <body>); решта — @container нижче */
  .tr-subnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -14px 14px;padding:0 14px 10px;scroll-snap-type:x proximity}
  .tr-subnav::-webkit-scrollbar{display:none}
  .tr-navbtn{flex:none;scroll-snap-align:center}
  .tr-subnav{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 28px),transparent)}
  .tr-navsep{display:none}
  .tr-pal-overlay{padding-top:6vh}
}
/* вузький трекер — телефон АБО десктоп, де поруч відкритий док (1024 px + док ≈ 540 px): рядки стовпчиком, дошка свайпом.
   Відʼємні поля −14 px «влазять» у падінг .view (14 px на телефоні, 26 — на десктопі), тож горизонтального скролу не дають. */
@container tracker (max-width:640px){
  .tr-seg::-webkit-scrollbar,.tr-focusbar::-webkit-scrollbar{display:none}
  .tr-toprow{align-items:stretch}
  .tr-seg-wrap{width:100%;min-width:0;flex-wrap:wrap}
  .tr-seg{overflow-x:auto;scrollbar-width:none;max-width:100%}
  .tr-seg-btn{flex:none}
  .tr-focusbar{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px;scrollbar-width:none}
  .tr-toolbar{gap:8px}
  .tr-inst-hd .row-gap{flex:1 1 100%;flex-wrap:wrap}
  .tr-filtertoggle{display:inline-flex;align-items:center;gap:7px}
  .tr-filters{display:none;flex:1 1 100%;flex-wrap:wrap;align-items:center;gap:8px}
  .tr-filters.open{display:flex}
  .tr-toolbar .search{flex:1 1 100%;order:-1;min-width:0}
  .tr-toolbar:has(.tr-filtertoggle) .search{flex:1 1 0}
  .tr-row{flex-direction:column;align-items:stretch;gap:8px;padding:12px}
  .tr-row-side{justify-content:flex-start}
  .tr-board{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:min(82cqi,300px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;margin:0 -14px;padding-left:14px;padding-right:14px}
  .tr-board{scroll-padding-left:14px}
  .tr-col{scroll-snap-align:start}
  .tr-detail-hd{flex-direction:column;align-items:stretch}
  .tr-detail-hd>.row-gap{flex-wrap:wrap}
  .tr-card{padding:14px 12px}
  .tr-reportgrid{grid-template-columns:minmax(0,1fr)}
  .tr-pack{flex-direction:column;align-items:flex-start}
  .tr-rename{min-width:0;width:100%}
  .tr-cond{grid-template-columns:minmax(0,1fr)}
  .tr-steprow{gap:6px}
  .tr-grid3{grid-template-columns:minmax(0,1fr)}
}
/* пальцеві цілі ≥ 40 px: телефон і будь-який «грубий» вказівник (планшет) */
@media (pointer:coarse),(max-width:760px){
  .btn,.btn.sm,.btn.xs,.icon-btn,.chip-btn,.tr-navbtn,.tr-seg-btn,.tr-fchip,.rail-item,.rail-home,.tr-thbtn,.tr-file-x,.tr-inst-toggle,.rx-chip-x,.ng-tool,.toast-act,.tr-swatch{min-height:40px;min-width:40px}
  .tr-thbtn{margin:0;padding:8px 6px}
  .control,.control.sm,.search-input{min-height:40px}
  .switch{min-height:40px;display:inline-flex;align-items:center;gap:8px}
  .switch input,.control-check{width:24px;height:24px}
  .tr-chip-dl{min-height:28px;display:flex;align-items:center}
  .tr-table a.tr-name,.tr-table a.tr-seq{display:inline-flex;align-items:center;min-height:40px}
  summary{padding:12px 0;cursor:pointer}
}


@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===================================================================================================
   ОБОЛОНКА v2 · бренд «SSD · екосистема» · AI-first (спека docs/specs/redesign-ai-first.md)
   Рейка · Док розмови (асистент живе між навігаціями) · Сцена модуля. Сцени тіла: is-gate | is-home | is-stage.
   Рух — лише transform/opacity/stroke-dashoffset і колонки сітки; prefers-reduced-motion вимикає все (правило вище).
   =================================================================================================== */
:root{
  --rail-w:244px; --rail-mini:72px; --dock-w:clamp(360px,31vw,460px);
  --ease-out:cubic-bezier(.16,1,.3,1); --dur-1:160ms; --dur-2:320ms; --dur-3:700ms;
  --glass:color-mix(in srgb,var(--bg2) 62%,transparent);
  --r-xl:20px;
}
body{overflow:hidden}
.shell{display:grid;height:100vh;height:100dvh;
  grid-template-columns:var(--rail-w) var(--dock-w) minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr);
  grid-template-areas:"banner banner banner" "rail dock top" "rail dock main";
  transition:grid-template-columns var(--dur-3) var(--ease-out)}
.shell>.dev-banner{grid-area:banner}
.shell-rail{grid-area:rail}.dock{grid-area:dock}.top{grid-area:top}.view{grid-area:main}
body.is-home .shell{grid-template-columns:var(--rail-w) minmax(0,1fr) 0px}
body.is-home .top,body.is-home .view{visibility:hidden}
body.is-stage.dock-off .shell,body.is-stage.no-dock .shell{grid-template-columns:var(--rail-w) 0px minmax(0,1fr)}
body.is-stage.dock-off .dock,body.no-dock .dock{visibility:hidden}
body.is-gate .shell{grid-template-columns:0px 0px minmax(0,1fr);grid-template-areas:"banner banner banner" "rail dock main" "rail dock main"}
body.is-gate .shell-rail,body.is-gate .dock,body.is-gate .top{display:none!important}
body.is-gate .view{padding:0;overflow:hidden auto;position:relative}

/* ---- рейка ---- */
.shell-rail{display:flex;flex-direction:column;gap:6px;min-width:0;padding:14px 12px;background:var(--bg);border-right:1px solid var(--line);overflow:hidden auto;scrollbar-width:thin}
.rail-brand{display:flex;align-items:center;gap:12px;padding:6px 6px 12px;border:0;background:transparent;color:var(--text);border-radius:var(--r-sm);text-align:left}
.rail-word{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.brand-mark{font-family:var(--f-disp);font-size:20px;font-weight:800;letter-spacing:-.04em}
.brand-sub{font-family:var(--f-mono);font-size:13px;font-weight:700;letter-spacing:-.04em;color:var(--muted)}
.brand-tile{width:32px;height:32px;border-radius:8px;background:var(--bg2);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;gap:3px;flex:none}
.bdot{display:inline-block;width:7px;height:7px;border-radius:999px;flex:none;background:var(--dot-dim)}
.brand-tile .bdot{width:5px;height:5px}
.bdot.d1{background:var(--dot-1)}.bdot.d2{background:var(--dot-2)}.bdot.d3{background:var(--dot-3)}
.bdot.glow{box-shadow:var(--glow)}
.rail-home{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:8px 10px 8px 8px;border:1px solid var(--line);background:var(--bg2);color:var(--text);border-radius:var(--r);font-weight:600;font-size:14px;text-align:left;transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.rail-home-ic{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--bg);display:inline-flex;align-items:center;justify-content:center;flex:none}
.rail-home:hover{border-color:var(--line2)}
.rail-home.on{border-color:color-mix(in srgb,var(--signal) 45%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--signal) 18%,transparent),0 8px 28px -14px var(--signal)}
.rail-k{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--faint);border:1px solid var(--line);border-radius:6px;padding:1px 6px;background:var(--bg)}
.rail-body{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.rail-sec{display:flex;flex-direction:column;gap:2px}
.rail-sec-t{display:flex;align-items:center;gap:6px;padding:4px 10px 6px;font-family:var(--f-mono);font-size:12px;font-weight:700;letter-spacing:-.02em;color:var(--muted)}
.rail-sec-t .bdot{width:6px;height:6px}
.rail-sec:not(.on) .rail-sec-t .bdot{opacity:.85}
.rail-item{position:relative;display:flex;align-items:center;gap:11px;width:100%;min-height:38px;padding:8px 10px;border:1px solid transparent;background:transparent;color:var(--muted);border-radius:var(--r-sm);font-size:13.5px;font-weight:500;text-align:left;white-space:nowrap;transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.rail-item:hover{background:var(--bg3);color:var(--text)}
.rail-item.on{background:var(--bg2);border-color:var(--line);color:var(--text)}
.rail-item.on::before{content:'';position:absolute;left:-7px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:999px;background:var(--signal);box-shadow:var(--glow);animation:dot-in var(--dur-2) var(--ease-out)}
.rail-item.on .icon{color:var(--text)}
.rail-item .icon svg{width:18px;height:18px}
.rail-t{overflow:hidden;text-overflow:ellipsis;min-width:0}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:12px;border-top:1px solid var(--line)}
.rail-demo.on{color:var(--warn);background:var(--warn-wash)}
.rail-ai.active .icon{color:var(--ok)}
.rail-acc{min-height:48px;padding:6px 8px}
.rail-acc .rail-t{display:flex;flex-direction:column;line-height:1.25}
.rail-acc .rail-t b{font-size:13px;color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.rail-acc .rail-t small{font-size:11.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis}
.top-ava{width:32px;height:32px;border-radius:50%;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#fff;flex:none}
.rail-mcp{font-size:12px;color:var(--faint)}
.mcp-dot{width:8px;height:8px;margin:0 5px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-wash);flex:none}
@keyframes dot-in{from{transform:scale(0);opacity:0}}
/* рейка-іконки: поки відкрита сцена на середніх екранах — місце розмові й модулю */
@media (min-width:761px) and (max-width:1360px){
  body.is-stage .shell{--rail-w:var(--rail-mini)}
  body.is-stage .shell-rail .rail-t,body.is-stage .shell-rail .rail-word,body.is-stage .shell-rail .rail-k,body.is-stage .rail-sec-t .rail-t{display:none}
  body.is-stage .rail-item,body.is-stage .rail-home{justify-content:center;padding-left:0;padding-right:0}
  body.is-stage .rail-home{border-color:transparent;background:transparent}
  body.is-stage .rail-sec-t{justify-content:center;padding:4px 0}
  body.is-stage .rail-brand{justify-content:center;padding-left:0;padding-right:0}
}

/* ---- док розмови ---- */
.dock{position:relative;min-width:0;overflow:hidden;background:var(--bg);border-right:1px solid var(--line);display:flex;flex-direction:column}
body.is-home .dock{border-right:0}
.dock-kv{position:absolute;inset:0;z-index:0;transition:opacity var(--dur-3) var(--ease-out)}
body.is-stage .dock-kv{opacity:.22}
.dock-hd{position:relative;z-index:1;display:none;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 12px 18px;border-bottom:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.dock-hd-t{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-weight:700;font-size:14px;letter-spacing:-.03em}
body.is-stage .dock-hd{display:flex}
.dock-x{padding:6px}
.dock-body{position:relative;z-index:1;flex:1;min-height:0;display:flex;flex-direction:column;padding:18px 18px 16px}
body.is-home .dock-body{padding:28px clamp(18px,4vw,64px) 24px}

/* ---- ключовий візуал ---- */
.kv{pointer-events:none;overflow:hidden;background:var(--bg)}
.kv-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.kv-glass{fill:var(--text);opacity:.025}
.kv-point{fill:var(--signal)}
.kv-halo{opacity:.6}
.kv-spark{opacity:0;fill:none;stroke-dasharray:.045 1.1}
.kv-spark.kv-d1{stroke:var(--dot-1)}.kv-spark.kv-d2{stroke:var(--dot-2)}.kv-spark.kv-d3{stroke:var(--signal)}
.kv-glow,.kv-point-halo{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .kv-core{stroke-dasharray:1;stroke-dashoffset:1;animation:kv-draw 1.8s var(--ease-out) calc(.15s + var(--i) * .22s) forwards}
  .kv-halo{opacity:0;animation:kv-halo 1.4s ease .9s forwards}
  .kv-hz{transform-box:fill-box;transform-origin:83% 50%;transform:scaleX(0);animation:kv-hz 1.6s var(--ease-out) .7s forwards}
  .kv-point{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:kv-pop .7s var(--ease-out) 1.2s forwards}
  .kv-point-halo{animation:kv-breathe 3.4s ease-in-out 1.6s infinite}
  .kv-glow{animation:kv-breathe-soft 6s ease-in-out 1.8s infinite}
  .kv-spark{animation:kv-spark calc(3.6s + var(--i) * .7s) cubic-bezier(.5,0,.75,.4) calc(2s + var(--i) * .9s) infinite}
  .dock:has(.as-busy) .kv-spark{animation-duration:1.15s;animation-delay:0s}
  .dock:has(.as-busy) .kv-point-halo{animation-duration:1.2s}
}
@keyframes kv-draw{to{stroke-dashoffset:0}}
@keyframes kv-halo{to{opacity:.6}}
@keyframes kv-hz{to{transform:scaleX(1)}}
@keyframes kv-pop{70%{transform:scale(1.5)}to{transform:scale(1)}}
@keyframes kv-breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.9);opacity:.35}}
@keyframes kv-breathe-soft{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.75}}
@keyframes kv-spark{0%{stroke-dashoffset:.045;opacity:0}12%{opacity:1}88%{opacity:1}100%{stroke-dashoffset:-1;opacity:0}}

/* ---- шапка сцени (скляна капсула) ---- */
.top{position:relative;z-index:5;display:flex;align-items:center;gap:12px;margin:12px 16px 0;min-height:56px;padding:8px 10px 8px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass);backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3)}
.top-crumb{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:13px;font-weight:700;letter-spacing:-.03em;color:var(--muted);white-space:nowrap}
.top-crumb:not(:empty)::after{content:'/';margin-left:6px;color:var(--faint);font-weight:400}
.top-title{flex:1;min-width:0;font-family:var(--f-disp);font-weight:800;font-size:17px;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-right{display:flex;align-items:center;gap:8px;flex:none}
.top-dock{gap:8px}
.top-dock[aria-pressed="true"]{border-color:var(--line2);background:var(--bg3)}
body.no-dock .top-dock{display:none}
.view{min-width:0;overflow-y:auto;padding:22px 26px 32px;position:relative}
.view.enter>*{animation:rise var(--dur-3) var(--ease-out) both}
.view.enter>*:nth-child(2){animation-delay:60ms}.view.enter>*:nth-child(3){animation-delay:120ms}.view.enter>*:nth-child(n+4){animation-delay:180ms}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.fab-chat{display:none}

/* ---- розмова: головна і док ---- */
.as-home{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;width:100%;max-width:860px;margin:0 auto}
body.is-stage .as-home{max-width:none}
.as-hero{margin:auto 0 22px}
.as-hero-k{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:13px;color:var(--muted);margin-bottom:18px}
.as-hero h2{font-family:var(--f-mono);font-weight:700;letter-spacing:-.05em;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.04;color:var(--text)}
.as-hero h2 .bdot{width:.22em;height:.22em;margin-right:.06em;vertical-align:.08em}
.as-hero .sub{margin-top:14px;font-size:15px;line-height:1.6;max-width:56ch;color:var(--muted)}
body.is-stage .as-hero{margin-top:auto}
body.is-stage .as-hero h2{font-size:26px}
body.is-stage .as-hero .sub{font-size:13px}
body.is-stage .as-hero-k{display:none}
.as-home:has(.as-log:not(:empty)) .as-hero{display:none}
.as-log{display:flex;flex-direction:column;gap:12px;overflow:auto;padding:4px 2px 12px;margin-bottom:12px;scrollbar-width:thin}
.as-home .as-log{flex:1;min-height:0;max-height:none}
.as-home .as-log:empty{display:none}
.as-bubble{max-width:88%;padding:12px 15px;border-radius:var(--r-lg);background:var(--bg2);border:1px solid var(--line);font-size:14px;line-height:1.6}
.as-bubble.me{align-self:flex-end;background:var(--bg3);border-color:var(--line2);border-bottom-right-radius:6px}
.as-bubble:not(.me){border-bottom-left-radius:6px}
.as-bubble.live .as-ans::after{content:'';display:inline-block;width:7px;height:7px;margin-left:6px;border-radius:999px;background:var(--signal);box-shadow:var(--glow);vertical-align:middle;animation:live 1s ease-in-out infinite}
@keyframes live{50%{opacity:.25;transform:scale(.7)}}
.enter{animation:rise .45s var(--ease-out) both}
.ai-composer{display:flex;gap:8px;align-items:flex-end}
.as-home .ai-composer{position:relative;background:var(--glass);border:1px solid var(--line2);border-radius:var(--r-xl);padding:10px 10px 10px 16px;backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3);transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.as-home .ai-composer:focus-within{border-color:color-mix(in srgb,var(--signal) 55%,var(--line2));box-shadow:0 0 0 4px color-mix(in srgb,var(--signal) 12%,transparent),0 18px 50px -24px var(--signal)}
.as-home .ai-composer .control{flex:1;border:0;background:transparent;resize:none;font-size:15.5px;line-height:1.5;padding:8px 0;min-height:44px;max-height:30vh}
.as-home .ai-composer .control:focus-visible{outline:none;box-shadow:none}
.as-home .ai-composer .btn{border-radius:12px;min-height:42px}
.as-home .ai-quick{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.as-home .ai-quick .chip-btn{border-radius:999px;padding:7px 14px;background:transparent;font-weight:500;color:var(--muted);transition:color var(--dur-1),border-color var(--dur-1),background var(--dur-1)}
.as-home .ai-quick .chip-btn:hover{color:var(--text);border-color:var(--muted);background:var(--bg2)}
body.is-stage .as-home .ai-quick{display:none}
.as-home:has(.as-log:not(:empty)) .ai-quick{display:none}
.as-foot{display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:space-between;align-items:center;margin-top:12px;font-size:12px;color:var(--faint)}
.as-foot .tr-subnav{margin:0;border:0;padding:0}
@media (prefers-reduced-motion:no-preference){
  body.is-home .as-hero-k{animation:rise .7s var(--ease-out) .25s both}
  body.is-home .as-hero h2{animation:rise .9s var(--ease-out) .35s both}
  body.is-home .as-hero .sub{animation:rise .9s var(--ease-out) .5s both}
  body.is-home .as-home .ai-composer{animation:rise .9s var(--ease-out) .62s both}
  body.is-home .as-home .ai-quick{animation:rise .9s var(--ease-out) .75s both}
}

/* ---- шлюз входу: щільний блок 0b.10 на ключовому візуалі ---- */
.gate{position:relative;min-height:100%;display:flex;flex-direction:column;overflow:hidden}
.gate>.kv{position:absolute;inset:0}
.gate-hd{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;margin:28px clamp(16px,6.6vw,96px) 0;height:60px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.gate-brand{display:flex;align-items:center;gap:12px}
.gate-site{font-family:var(--f-mono);font-size:13px;color:var(--muted);text-decoration:none}
.gate-site:hover{color:var(--text)}
.gate-main{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,440px);gap:40px;align-items:center;padding:40px clamp(16px,6.6vw,96px) 48px}
.gate-words{font-family:var(--f-mono);font-weight:700;letter-spacing:-.055em;line-height:1;font-size:clamp(56px,7.8vw,112px);color:var(--text)}
.gate-words>div{display:flex;align-items:center;white-space:nowrap;height:1em}
.gate-words .bdot{width:.22em;height:.22em;margin-right:.06em}
.gate-words .bdot.glow{box-shadow:0 0 22px color-mix(in srgb,var(--signal) 70%,transparent)}
.gate-tag{margin-top:28px;display:flex;gap:14px;align-items:flex-start;font-size:13px;line-height:1.7;color:var(--muted)}
.gate-tag .dots{display:flex;gap:4px;padding-top:7px}
.gate-tag .bdot{width:7px;height:7px}
.gate-card{position:relative;border:1px solid var(--line2);border-radius:var(--r-xl);padding:28px;background:var(--glass);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 30px 80px -40px rgba(0,0,0,.6)}
.gate-card h2{font-family:var(--f-disp);font-weight:800;letter-spacing:-.03em;font-size:26px;margin-bottom:8px;word-spacing:-.04em}
/* Telegram Login Widget малює iframe зі своїм білим фоном (і сторінкою-помилкою без стилів): тримаємо його в акуратній рамці, по центру, без стрибка розмітки */
#gate-telegram{min-height:0;align-items:center;justify-content:center;margin:0}
#gate-telegram[data-on]{margin-top:12px;min-height:40px}
.gate-tg .tg-btn{--tg:#2AABEE}
.gate-tg .tg-btn .icon,.gate-tg .tg-btn svg{color:var(--tg)}
.gate-tg .tg-btn[aria-busy=true]{opacity:.75;cursor:progress}
.gate-faq{border-bottom:0;padding:2px 0 0;margin-top:6px}
.gate-faq .sub{margin-top:6px}
#gate-telegram iframe{max-width:100%;border-radius:var(--r-md,10px);overflow:hidden;color-scheme:light}
.gate-card .account-card{max-width:none;margin:0!important;padding:0;border:0;background:transparent}
.gate-foot{position:relative;z-index:2;display:flex;justify-content:space-between;padding:0 clamp(16px,6.6vw,96px) 24px;font-size:13px;color:var(--faint)}
@media (prefers-reduced-motion:no-preference){
  .gate-words>div{animation:rise 1s var(--ease-out) both}
  .gate-words>div:nth-child(1){animation-delay:.15s}.gate-words>div:nth-child(2){animation-delay:.3s}.gate-words>div:nth-child(3){animation-delay:.45s}
  .gate-tag{animation:rise 1s var(--ease-out) .7s both}
  .gate-card{animation:rise 1s var(--ease-out) .55s both}
}
@media (max-width:980px){.gate-main{grid-template-columns:1fr;gap:28px;align-content:start}.gate-words{font-size:clamp(48px,14vw,84px)}}

/* ---- телефон: розмова — повний екран; модуль — сцена з кнопкою «до розмови» ---- */
@media (max-width:760px){
  .shell{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"banner" "top" "main"!important}
  .dock{grid-area:main;border-right:0}
  .shell-rail{position:fixed;top:0;bottom:0;left:0;width:min(304px,88vw);z-index:70;transform:translateX(-102%);visibility:hidden;transition:transform .26s var(--ease-out),visibility 0s linear .26s}
  body.nav-open .shell-rail{transform:none;visibility:visible;transition:transform .26s var(--ease-out),visibility 0s}
  body.is-home .top{visibility:visible}
  body.is-home .view{display:none}
  body.is-stage .dock{display:none}
  body.is-gate .top{display:none}
  .top{margin:8px 10px 0;min-height:52px;padding:6px 8px;gap:8px}
  .top-menu{display:inline-flex}
  .top-crumb,.top-dock{display:none}
  .top-title{font-size:16px}
  .view{padding:14px 14px 96px}
  .dock-body,body.is-home .dock-body{padding:18px 14px 14px}
  .as-hero h2{font-size:clamp(1.9rem,9vw,2.6rem)}
  body.is-stage:not(.no-dock) .fab-chat{display:inline-flex;position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:60;align-items:center;gap:9px;min-height:48px;padding:0 18px 0 16px;border:1px solid var(--line2);border-radius:999px;background:var(--glass);color:var(--text);font-weight:600;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 12px 34px -12px var(--signal)}
  /* повідомлення над плаваючою кнопкою «Асистент», а не під нею (раніше «Створено частину треку» ховалось за FAB) */
  body.is-stage:not(.no-dock) .toast-host{bottom:calc(76px + env(safe-area-inset-bottom))}
  .toast{max-width:calc(100vw - 28px)}
  .gate-hd{margin:14px 14px 0}
  .gate-main{padding:28px 16px 32px}
  .gate-foot{padding:0 16px 20px}
}

/* ---- спільні компоненти в новій мові ---- */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line2);background:var(--bg2);color:var(--muted);border-radius:10px;padding:7px;transition:color var(--dur-1),border-color var(--dur-1),background var(--dur-1)}
.icon-btn:hover{color:var(--text);border-color:var(--muted)}
.view:focus{outline:none}
.rail-demo.on::before{display:none}
.btn{border-radius:10px;min-height:38px;transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.btn:active{transform:translateY(1px)}
.btn.primary{box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.btn.sm{min-height:32px}.btn.xs{min-height:28px}
/* пальцеві цілі ≥ 40 px ПІСЛЯ правил вище: той самий специфікатор пізніше виграє, тож `.btn/.btn.sm/.btn.xs` тут і `.rail-item`
   (38 px, рейка вище) перебивали блок «пальцеві цілі» (pointer:coarse / ≤760 px) — на телефоні кнопки трекера мали 32/28 px,
   пункти шухляди модулів — 38 px (ARC-7) */
@media (pointer:coarse),(max-width:760px){.btn,.btn.sm,.btn.xs,.rail-item{min-height:40px;min-width:40px}}
.btn:hover{border-color:var(--muted)}
.card-panel{border-radius:var(--r-lg)}
.chip-btn{border-radius:999px}
.chip-btn.on{background:var(--bg3);border-color:var(--text)}
.control:focus-visible,.control:focus{outline:none;border-color:color-mix(in srgb,var(--signal) 55%,var(--line2));box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 14%,transparent)}
.view-head h2{font-family:var(--f-disp);font-weight:800;letter-spacing:-.035em}
.modal-overlay{background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal{border-radius:var(--r-xl);box-shadow:0 40px 100px -40px rgba(0,0,0,.7);transform:translateY(14px) scale(.98);transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out)}
.toast{border-radius:999px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:10px 18px}
:focus-visible{outline-color:var(--signal)}
/* низ рейки: службові дії — рядком іконок, акаунт — повним рядком (не тікає за край на 900 px) */
.rail-foot{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px}
.rail-foot .rail-item:not(.rail-acc){width:auto;flex:none;min-width:40px;justify-content:center;padding:8px 10px}
.rail-foot .rail-item:not(.rail-acc) .rail-t{display:none}
.rail-foot .rail-mcp{gap:0}
.rail-foot .rail-acc{flex:1 1 100%}
@media (min-width:761px) and (max-width:1360px){body.is-stage .rail-foot{flex-direction:column;flex-wrap:nowrap}body.is-stage .rail-foot .rail-item{width:100%}}
.dock-x{background:transparent;border-color:transparent}
.dock-x:hover{border-color:var(--line2)}
/* @tracker-builder:start — стилі сторінки «Конструктор» (ui-builder.js) */
.trb{display:flex;flex-direction:column;gap:14px;max-width:1240px}
.trb .btn:disabled{opacity:.45;cursor:not-allowed}
.trb .btn:disabled:hover{border-color:var(--line2)}
.trb .btn.primary:disabled:hover{background:var(--accent);border-color:var(--accent)}
.trb-h{font-family:var(--f-disp);font-weight:800;letter-spacing:-.03em;font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.2}
.trb-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;border:1px solid var(--line2);color:var(--muted);white-space:nowrap}
.trb-badge.ai{color:var(--accent-text);background:var(--accent-wash);border-color:transparent}
.trb-warn-t{color:var(--warn)}
.trb-x,.trb-ib{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:30px;height:30px;padding:0 6px;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--muted);font:inherit;font-size:16px;line-height:1;cursor:pointer;transition:color var(--dur-1),background var(--dur-1),border-color var(--dur-1)}
.trb-x:hover,.trb-ib:hover:not(:disabled){color:var(--text);background:var(--bg3);border-color:var(--line2)}
.trb-ib:disabled{opacity:.3;cursor:default}
/* вступ: опис словами */
.trb-intro{position:relative;padding:22px 22px 18px;border:1px solid var(--line);border-radius:var(--r-xl);background:radial-gradient(520px 180px at 100% 0%,color-mix(in srgb,var(--signal) 9%,transparent),transparent 70%),var(--bg2)}
.trb-intro.change{padding:16px 18px;border-radius:var(--r-lg);background:var(--bg2)}
.trb-intro .sub{margin-top:4px;max-width:72ch}
.trb-kicker{display:flex;align-items:center;gap:6px;margin-bottom:10px;font-family:var(--f-mono);font-size:12px;font-weight:700;letter-spacing:-.02em;color:var(--muted)}
.trb-kicker .bdot{width:6px;height:6px}
.trb-kicker span:last-child{margin-left:4px}
.trb-compose{margin-top:14px;border:1px solid var(--line2);border-radius:var(--r-lg);background:var(--bg);transition:border-color var(--dur-1),box-shadow var(--dur-1)}
.trb-intro.change .trb-compose{margin-top:10px}
.trb-compose:focus-within{border-color:color-mix(in srgb,var(--signal) 55%,var(--line2));box-shadow:0 0 0 4px color-mix(in srgb,var(--signal) 12%,transparent)}
.trb-ta.control{display:block;border:0;background:transparent;font-size:15px;line-height:1.55;padding:12px 14px;min-height:96px;resize:vertical}
.trb-intro.change .trb-ta.control{min-height:64px}
.trb-ta.control:focus,.trb-ta.control:focus-visible{box-shadow:none;outline:none}
.trb-examples{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:10px}
.trb-ex-l{font-size:12px;font-weight:600;color:var(--faint)}
.trb-ex.chip-btn{max-width:100%;padding:6px 12px;background:transparent;font-weight:500;line-height:1.35;text-align:left;white-space:normal}
.trb-ex.chip-btn:hover:not(:disabled){color:var(--text);border-color:var(--muted);background:var(--bg3)}
.trb-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.trb-from.control{width:auto;flex:0 1 300px;min-width:0;padding:8px 10px;font-size:13px}
.trb-ai{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;color:var(--muted)}
.trb-ai.compact{margin-top:8px;font-size:12px}
.trb-ai-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--faint)}
.trb-ai-dot.ok{background:var(--ok);box-shadow:0 0 0 3px var(--ok-wash)}
.trb-ai-dot.warn{background:var(--warn);box-shadow:0 0 0 3px var(--warn-wash)}
.trb-busy{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:12px;font-size:13px;font-weight:600}
.trb-busy-s{font-family:var(--f-mono);font-weight:500;color:var(--faint)}
.trb-spin{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--signal);animation:trb-spin .8s linear infinite}
@keyframes trb-spin{to{transform:rotate(360deg)}}
/* шапка чернетки й повідомлення */
.trb-head{display:flex;flex-direction:column;gap:4px;scroll-margin-top:12px}
.trb-head-t{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.trb-head-act{margin-left:auto}
.trb-intro.change .trb-h{font-size:1.05rem}
.trb-head .warn-box,.trb-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.trb-notes{display:flex;flex-direction:column;gap:8px}
.trb-notice.warn-box{margin-top:0;display:flex;align-items:flex-start;gap:10px}
.trb-notice-t{flex:1;min-width:0;line-height:1.45}
.trb-notice .trb-x{height:22px;min-width:22px;margin:-2px -4px 0 0;color:inherit}
.trb-fixed{font-size:12.5px;color:var(--muted)}
.trb-fixed summary{cursor:pointer;font-weight:600}
.trb-fixed ul{margin:6px 0 0 18px;display:flex;flex-direction:column;gap:3px}
/* сітка: редактор + перевірка */
.trb-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.trb-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.trb-main>.tr-card,.trb-side>.tr-card{margin-bottom:0}
.trb-side{position:sticky;top:8px;min-width:0;max-height:calc(100dvh - 150px);overflow:auto;scrollbar-width:thin}
.trb-card-sub{margin:-6px 0 12px}
.trb-proc .field:last-child{margin-bottom:0}
.trb-pname.control{font-size:15px;font-weight:700}
/* рядок кроків */
.trb-flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:12px 14px;border:1px dashed var(--line2);border-radius:var(--r)}
.trb-fchip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 11px 4px 4px;border:1px solid var(--line2);border-radius:999px;background:var(--bg2);color:var(--text);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:border-color var(--dur-1),background var(--dur-1)}
.trb-fchip:hover{border-color:var(--muted);background:var(--bg3)}
.trb-fchip.opt{border-style:dashed;color:var(--muted)}
.trb-fchip.bad{border-color:var(--err)}
.trb-fchip .tr-dot{width:8px;height:8px;flex:none}
.trb-fchip-n{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--bg3);font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.trb-fchip-t{min-width:0;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trb-arrow{color:var(--faint);font-size:13px}
/* кроки */
.trb-steps{display:flex;flex-direction:column;gap:10px}
.trb-sec-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-top:2px}
.trb-sec-hd h4{font-family:var(--f-disp);font-size:1rem;font-weight:800;letter-spacing:-.02em}
.trb-sec-hd .count{font-size:11px;font-weight:700;background:var(--bg3);border-radius:var(--r-sm);padding:1px 8px;color:var(--muted)}
.trb-step{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);scroll-margin-top:12px;transition:border-color var(--dur-1)}
.trb-step:focus-within{border-color:var(--line2)}
.trb-step.bad{border-color:color-mix(in srgb,var(--err) 55%,var(--line))}
.trb-step-hd{display:flex;align-items:center;gap:8px}
.trb-step-n{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line2);background:var(--bg3);font-family:var(--f-mono);font-size:12px;font-weight:700}
.trb-step.bad .trb-step-n{border-color:var(--err);color:var(--err)}
.trb-sname.control{flex:1;min-width:0;font-size:14.5px;font-weight:700}
.trb-step-tools{display:flex;align-items:center;gap:2px;flex:none}
.trb-after .icon svg{width:13px;height:13px}
.trb-sdesc.control{min-height:36px;resize:vertical;line-height:1.45}
.trb-meta{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr) minmax(0,1.6fr);gap:10px;align-items:start}
.trb-meta .field{margin-bottom:0}
.trb-meta .control.sm,.trb-role-grid .control.sm{width:100%}
.trb-flags{display:flex;flex-direction:column;gap:6px;padding-top:20px}
.trb-switch{line-height:1.3;cursor:pointer}
.trb-fields{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg)}
.trb-fields-hd{display:flex;align-items:baseline;gap:8px}
.trb-fields-hd .sub{font-size:11.5px}
.trb-ftable{display:flex;flex-direction:column;gap:6px}
.trb-frow{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto auto;gap:6px;align-items:center}
.trb-frow .control.sm{width:100%;min-width:0}
.trb-fopts{grid-column:1/-1}
.trb-freq{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);white-space:nowrap;cursor:pointer}
.trb-freq input{width:15px;height:15px;accent-color:var(--accent)}
.trb-addf,.trb-addr{align-self:flex-start}
.trb-fields.reuse{border-style:dashed}
.trb-reuse-note{margin:0}
.trb-ro{display:flex;flex-wrap:wrap;gap:6px}
.trb-ro-f{display:inline-flex;align-items:baseline;gap:6px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--bg3);font-size:12.5px}
.trb-ro-f small{font-size:11px;color:var(--faint)}
.trb-ro-f em{font-style:normal;color:var(--err)}
.trb-checkrow{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px dashed var(--line2);border-radius:var(--r-sm)}
.trb-checkrow.off{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px}
.trb-checkrow.off .trb-check-g{flex:0 1 280px;grid-template-columns:minmax(0,1fr)}
.trb-check-l{font-size:12px;font-weight:600;color:var(--muted)}
.trb-check-g{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:6px}
.trb-checkrow .control.sm{width:100%;min-width:0}
.trb-step-issues{display:flex;flex-direction:column;gap:3px}
.trb-step-issues:empty{display:none}
.trb-si{position:relative;padding-left:14px;font-size:12px;line-height:1.4}
.trb-si::before{content:'';position:absolute;left:2px;top:.45em;width:6px;height:6px;border-radius:50%}
.trb-si.bad{color:var(--err)}.trb-si.bad::before{background:var(--err)}
.trb-si.warn{color:var(--warn)}.trb-si.warn::before{background:var(--warn)}
.trb-si.more{color:var(--faint)}
.trb .control.trb-warned{border-color:color-mix(in srgb,var(--warn) 70%,var(--line2))}
.trb-add{align-self:flex-start}
.trb-locked{opacity:.55;transition:opacity var(--dur-2)}
/* сторони й доступ */
.trb-role{padding:12px 0;border-top:1px solid var(--line)}
.trb-card-sub+.trb-role{border-top:0;padding-top:2px}
.trb-role-hd{display:flex;align-items:center;gap:8px}
.trb-role-hd .tr-dot{flex:none}
.trb-rname.control{flex:1;min-width:0;font-weight:600}
.trb-role-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:10px;margin-top:10px}
.trb-role-grid .field{margin-bottom:0}
.trb-role-use{margin-top:6px;font-size:12px}
.trb-none{margin:0 0 10px}
.trb-access .trb-switch{margin-bottom:14px}
.trb-access .field{margin-bottom:0}
/* уточнення словами */
.trb-refine{padding:14px;border:1px solid var(--line);border-radius:var(--r-lg);background:radial-gradient(420px 120px at 0% 0%,color-mix(in srgb,var(--signal) 7%,transparent),transparent 70%),var(--bg2)}
.trb-refine-row{display:flex;gap:8px}
.trb-refine-row .control{flex:1;min-width:0}
.trb-refine-row .btn{flex:none}
/* перевірка */
.trb-check .tr-card-t{margin-bottom:8px}
.trb-pill{margin-left:auto;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700}
.trb-pill.ok{color:var(--ok);background:var(--ok-wash)}
.trb-pill.warn{color:var(--warn);background:var(--warn-wash)}
.trb-pill.bad{color:var(--err);background:var(--err-wash)}
.trb-check-live{margin-bottom:8px;font-size:13px;font-weight:600}
.trb-check-live.ok{color:var(--ok)}.trb-check-live.bad{color:var(--err)}
.trb-sum{margin-bottom:8px;font-size:12.5px;color:var(--muted)}
.trb-issues{list-style:none;display:flex;flex-direction:column;gap:2px;margin:0 0 8px;padding:0}
.trb-issues li{font-size:12.5px;line-height:1.4}
.trb-issues li.bad{color:var(--err)}.trb-issues li.warn{color:var(--warn)}
.trb-issues li:not(:has(button)){padding:4px 6px}
.trb-issue{display:flex;align-items:flex-start;gap:6px;width:100%;padding:4px 6px;border:0;border-radius:var(--r-sm);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.trb-issue:hover{background:var(--bg3)}
.trb-go-t{margin-left:auto;opacity:.6}
.trb-more{margin:-4px 0 6px}
.trb-chg-h{margin:12px 0 6px;font-size:12px;font-weight:700;color:var(--muted)}
.trb-chg{list-style:none;display:flex;flex-direction:column;gap:5px;margin:0;padding:0;font-size:12.5px;line-height:1.4}
.trb-chg li{display:flex;gap:8px}
.trb-chg-g{flex:none;width:14px;text-align:center;font-family:var(--f-mono);font-weight:700}
.trb-chg li.add .trb-chg-g{color:var(--ok)}.trb-chg li.remove .trb-chg-g{color:var(--err)}.trb-chg li.change .trb-chg-g{color:var(--warn)}
/* дії внизу: липкі, поки редагуєте; фокус/перехід до поля не ховає його під ними */
.view:has(.trb-foot){scroll-padding-bottom:120px}
.trb-foot{position:sticky;bottom:10px;z-index:4;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 12px 10px 16px;border:1px solid var(--line2);border-radius:var(--r-lg);background:var(--glass);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3)}
.trb-foot-msg{flex:1 1 220px;min-width:0;font-size:12.5px;line-height:1.4;color:var(--muted)}
.trb-foot-msg.bad{color:var(--err);font-weight:600}
.trb-foot-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
.trb-pub{margin-right:4px}
/* успіх */
.trb-done{display:flex;align-items:flex-start;gap:16px;padding:22px;border:1px solid color-mix(in srgb,var(--ok) 40%,var(--line));border-radius:var(--r-xl);background:radial-gradient(480px 160px at 0% 0%,var(--ok-wash),transparent 70%),var(--bg2)}
.trb-done-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--ok-wash);color:var(--ok)}
.trb-done-ic .icon svg{width:22px;height:22px}
.trb-done-b{flex:1;min-width:0}
.trb-done-b>.sub{margin-top:4px}
.trb-done .trb-sum{margin:8px 0 0}
.trb-tip{margin-top:12px;color:var(--faint)}
@container tracker (max-width:880px){
  .trb-grid{grid-template-columns:minmax(0,1fr)}
  .trb-side{position:static;max-height:none;overflow:visible}
  .trb-meta{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .trb-flags{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:6px 18px;padding-top:0}
}
@container tracker (max-width:640px){
  .trb-intro{padding:16px 14px 14px;border-radius:var(--r-lg)}
  .trb-ta.control{font-size:16px}
  .trb-actions>.btn.primary{flex:1 1 100%;justify-content:center}
  .trb-from.control{flex:1 1 100%}
  .trb-flow{flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px}
  .trb-arrow{transform:rotate(90deg);margin-left:8px;line-height:1}
  .trb-fchip-t{max-width:calc(100cqi - 120px)}
  .trb-step{padding:12px}
  .trb-step-hd{flex-wrap:wrap}
  .trb-sname.control{flex:1 1 calc(100% - 40px)}
  .trb-step-tools{width:100%;justify-content:flex-end}
  .trb-meta{grid-template-columns:minmax(0,1fr) 112px}
  .trb-flags{flex-direction:column}
  .trb-fields,.trb-checkrow{padding:10px}
  .trb-frow{grid-template-columns:minmax(0,1fr) auto auto;padding-bottom:6px;border-bottom:1px solid var(--line)}
  .trb-frow:last-child{border-bottom:0;padding-bottom:0}
  .trb-flabel{grid-column:1/-1}
  .trb-check-g{grid-template-columns:minmax(0,1fr)}
  .trb-role-grid{grid-template-columns:minmax(0,1fr)}
  .trb-refine-row{flex-direction:column}
  .trb-foot-btns{width:100%;margin-left:0}
  .trb-foot-btns .btn{flex:1 1 auto;justify-content:center}
  .trb-foot-btns .btn.primary{flex-basis:100%;order:-1}
  .trb-done{flex-direction:column;padding:18px}
  .trb-done .trb-actions .btn{flex:1 1 auto;justify-content:center}
}
/* телефон: липкий низ ховався б під кнопкою «до розмови» — тут дії стоять у кінці сторінки */
@media (max-width:760px){.trb-foot{position:static}}
@media (pointer:coarse),(max-width:760px){
  .trb-x,.trb-ib,.trb-fchip,.trb-issue{min-height:40px;min-width:40px}
  .trb-freq{min-height:40px}
  .trb-freq input{width:22px;height:22px}
}
/* @tracker-builder:end */
/* @tracker-ux:start — UX-пакет трекера Ф13 (ui.js, ui-editor.js, ui-process.js) */
/* ui-kit pickChips: вибране — чипами, решта — за пошуком */
.tr-pick-chips{display:flex;flex-direction:column;gap:6px;min-width:0}
.tr-pchip{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 10px;border:1px solid var(--line2);background:var(--bg3);border-radius:var(--r-sm);font-size:12px;max-width:100%}
.tr-pchip>span:not(.tr-dot){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-pchip.warn{border-color:var(--warn)}
.tr-pchip-w{color:var(--warn);font-size:12px}
.tr-pchip-x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:2px 6px;border-radius:var(--r-sm)}
.tr-pchip-x:hover,.tr-pchip-x:focus-visible{color:var(--text);background:var(--bg2)}
.tr-pick-in{position:relative;max-width:340px}
.tr-pick-in .control{width:100%}
.tr-pick-list{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.tr-pick-list:empty{display:none}
.tr-pick-opt{display:flex;align-items:center;gap:8px;text-align:left;border:1px solid transparent;background:var(--bg3);color:var(--text);padding:6px 10px;border-radius:var(--r-sm);font-size:13px;cursor:pointer}
.tr-pick-opt .sub{margin-left:auto;font-size:11px}
.tr-pick-opt:hover,.tr-pick-opt:focus-visible{border-color:var(--accent)}
.tr-pick-none{padding:4px 2px}
@media (pointer:coarse){.tr-pchip-x,.tr-pick-opt{min-height:40px;min-width:40px}}
/* D1: ui.js — шапка, чіпи процесів і пошук, «Створити трек», «Процеси» (публікація, ✨), редактор типу стану, групи, сторони треку */
.tr-picker-empty{display:flex;flex-direction:column;gap:10px;align-items:flex-start;text-align:left}
.tr-onboard .tr-picker-empty{align-items:center;text-align:center;margin-top:14px}
.tr-picker-cta{flex-wrap:wrap}
.tr-onboard-more{margin-top:6px!important;font-size:12.5px}
.tr-onboard-own{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.tr-fchip.draft{border-style:dashed}
.tr-fchip-more{color:var(--muted);border-style:dashed}
.tr-pick-chips .tr-chips:empty{display:none}
.tr-create-why{display:block;margin:-4px 0 10px;text-align:right;font-size:11.5px}
.tr-hit mark{background:var(--warn-wash);color:var(--text);border-radius:3px;padding:0 2px}
.tr-assign-l{margin:8px 0 4px;font-weight:600}
.tr-bp-cta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tr-bp-cta .btn{flex:1 1 auto;justify-content:center}
.tr-bp-item{flex-direction:column;align-items:stretch;gap:8px}
.tr-bp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.tr-bp-info{flex:1 1 auto;min-width:0}
.tr-bp-top>.btn{flex:none}
.tr-bp-acts{flex-wrap:wrap;align-items:center}
.tr-listitem.draft{border-style:dashed}
.tr-kind.tr-draft{margin-left:6px;color:var(--warn);border-color:transparent;background:var(--warn-wash)}
.tr-editor-slot{scroll-margin-top:12px;min-width:0}
.tr-fe{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px;background:var(--bg3);display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.tr-fe-main{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tr-fe-label{flex:2 1 160px;min-width:0}
.tr-fe-type{flex:1 1 130px;min-width:0}
.tr-fe-tools{display:flex;align-items:center;gap:2px;margin-left:auto}
.tr-fe-tools .tr-file-x{margin-left:4px}
.tr-fe-move{width:28px;height:28px;font-size:14px}
.tr-fe-move:disabled{opacity:.35;cursor:default}
.tr-fe-more summary{cursor:pointer;font-size:12px;color:var(--muted);font-weight:600;width:max-content}
.tr-fe-more-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:8px;margin-top:8px}
.tr-fe-more-grid .field{margin-bottom:0}
.tr-fe-more input[readonly]{color:var(--muted);background:var(--bg2)}
.tr-fe-usage{margin:-4px 0 10px}
.tr-fe-empty{padding:6px 0}
.tr-grp-name{display:flex;align-items:center;gap:6px;min-width:0}
.tr-grp-name b{overflow-wrap:anywhere}
.tr-grp-hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tr-grp-meta{margin-top:-6px}
.tr-grp-new{flex-wrap:wrap}
.tr-grp-new .control{flex:1 1 180px;min-width:0}
.tr-grp-via{display:flex;flex-direction:column;gap:6px}
.tr-pchip.derived{padding-right:6px;border-style:dashed}
.tr-badge{font-size:10px;font-weight:700;color:var(--accent-text);background:var(--accent-wash);border-radius:var(--r-sm);padding:1px 6px}
/* вкладка «Конструктор» — 13-та: на 1440 px без дока вкладки й далі в один рядок (щільніше на 3 px з боку, без зміни цілей на телефоні) */
@media (min-width:761px){.tr-navbtn{padding:6px;gap:5px;font-size:12.5px}.tr-navbtn .icon svg{width:14px;height:14px}}
@container tracker (max-width:640px){
  .tr-fe-label{flex-basis:100%}
  .tr-fe-tools{margin-left:0}
  .tr-create-why{text-align:left}
}
/* D2: ui-editor.js — редактор процесу (шапка, «Доступ і сторони», «Хто що може», вибір кроку, новий тип кроку) · ui-process.js — журнал і таблиця процесу карточками, типовий звіт */
.tr-ed-hd{flex-wrap:wrap}
.tr-ed-hd .tr-ed-ai{margin-left:auto}
.tr-kind.tr-ed-live{color:var(--ok);border-color:transparent;background:var(--ok-wash)}
.tr-ed-actions{margin-top:14px;flex-wrap:wrap}
.tr-acc{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-bottom:14px}
.tr-acc>.sub{margin:0}
.tr-acc>.btn{align-self:flex-start}
.tr-role{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;background:var(--bg)}
.tr-role-hd{margin-bottom:4px}
.tr-role-hd .tr-dot{flex:none}
.tr-role-hd>.control{flex:1 1 180px;min-width:0}
.tr-role-hd>.tr-chips{gap:4px}
.tr-steprow>select.control{flex:2 1 200px;min-width:0;max-width:100%}
.tr-steprow>.tr-stepmarks:empty{display:none}
.tr-ed>.tr-card-t:not(.tr-ed-hd){margin-top:18px}
.tr-role-who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px}
.tr-role-who .field{margin-bottom:0}
.tr-acc-flags{display:flex;flex-wrap:wrap;gap:8px}
.tr-acc-sum{margin:0;padding:8px 10px;border-radius:var(--r-sm);background:var(--bg3);color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.tr-ed-box{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:4px 0 16px;background:var(--bg)}
.tr-ed-box>.tr-card-t{margin-bottom:8px}
.tr-amx-line{margin:0 0 6px;font-size:12.5px;color:var(--muted)}
.tr-amx-line b{color:var(--text);font-weight:600}
.tr-amx-wrap{overflow-x:auto;margin-top:8px}
.tr-amx-t{width:100%;border-collapse:collapse;font-size:12.5px}
.tr-amx-t th{text-align:left;padding:6px 8px;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);white-space:nowrap}
.tr-amx-t td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.tr-amx-t tbody tr:last-child td{border-bottom:0}
.tr-amx-t .tr-stepn{margin-right:2px}
.tr-amx-open{color:var(--muted)}
.tr-amx-vacant{color:var(--warn)}
.tr-amx-more{margin-top:6px}
.tr-amx-warn ul{margin:6px 0 0;padding-left:18px;font-weight:400}
.tr-step-pick{display:flex;flex-direction:column;gap:10px}
.tr-step-pick>.control{width:100%}
.tr-step-picker{margin-top:0}
.tr-step-picker:empty{display:none}
.tr-step-picker>.sub{grid-column:1/-1;margin:0}
.tr-pick[disabled]{opacity:.55;cursor:default;background:var(--bg3)}
.tr-pick[disabled]:hover{border-color:var(--line2);background:var(--bg3)}
.tr-step-pick-ft{flex-wrap:wrap}
.tr-nt{display:flex;flex-direction:column;gap:8px}
.tr-nt>.tr-card-t{margin:6px 0 0}
.tr-nt>.btn{align-self:flex-start}
.tr-nt-fields{display:flex;flex-direction:column;gap:6px}
.tr-nt-row{display:flex;flex-direction:column;gap:4px}
.tr-nt-row .tr-fieldrow{margin-bottom:0}
.tr-nt-row .tr-nt-label{flex:2 1 160px}
.tr-nt-row .tr-nt-type{flex:1 1 130px}
.tr-actor-auto{color:var(--muted);font-style:italic;white-space:nowrap}
.tr-kind.tr-rep-auto{color:var(--accent-text);border-color:transparent;background:var(--accent-wash)}
@container tracker (max-width:640px){
  .tr-role-who{grid-template-columns:minmax(0,1fr)}
  /* роль: назва й «×» в одному рядку, палітра — окремим рядком нижче (8 пальцевих цілей по 40 px у рядок назви не влазять) */
  .tr-role-hd>.control{flex:1 1 0}
  .tr-role-hd>.tr-chips{order:3;flex:1 1 100%}
  .tr-ed-hd .tr-ed-ai{margin-left:0}
  .tr-ed-box{padding:10px}
  /* журнал, таблиця процесу й «Хто що може» — карточками: рядок = картка, підпис колонки з data-label; сортування таблиці
     процесу лишається рядом кнопок над картками (шапка без кнопок — схована) */
  .tr-stack,.tr-stack tbody,.tr-stack tr,.tr-stack td{display:block;width:100%}
  .tr-stack-nohead thead{display:none}
  .tr-stack thead tr{display:flex;flex-wrap:wrap;gap:4px;padding:6px;background:var(--bg2);border-bottom:1px solid var(--line)}
  .tr-stack thead th{display:block;padding:0;border:0;background:none}
  .tr-stack tbody tr{border-bottom:1px solid var(--line);padding:8px 10px}
  .tr-stack tbody tr:last-child{border-bottom:0}
  .tr-stack td{display:flex;gap:10px;align-items:baseline;border:0;padding:3px 0;min-width:0;overflow-wrap:anywhere}
  .tr-stack td[data-label]::before{content:attr(data-label);flex:0 0 32%;max-width:130px;color:var(--muted);font-size:11.5px;font-weight:600}
  .tr-actor-auto{white-space:normal}
  .tr-actor-auto::before{font-style:normal}
  /* «Хто що може» на вузькому — компактно: назва кроку рядком, під нею «роль · хто веде» (без підписів колонок) */
  .tr-amx-t td{display:inline;padding:0}
  .tr-amx-t td:first-child{display:block;font-weight:600;margin-bottom:2px}
  .tr-amx-t td:nth-child(2):not(:empty)::after{content:' · ';color:var(--muted)}
  .tr-amx-t td[data-label]::before{content:none}
  .tr-amx-t tbody tr{padding:6px 0}
}
/* редактор процесу поруч із доком (~700 px): «Назва» — на всю ширину, «Режим» і «Зміни процесу» — парою (у три колонки їхні
   варіанти обрізались: «Треки в роботі лишаються н»); позначки кроку (⏱ ⛔ ⚙) — окремим рядком під кроком, а не «⛔ …» */
@container tracker (max-width:880px){
  .tr-ed .tr-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tr-ed .tr-grid3>:first-child{grid-column:1/-1}
  .tr-ed .tr-steprow>.tr-stepmarks{order:10;flex:1 1 100%;padding-left:24px;white-space:normal;overflow:visible}
}
@container tracker (max-width:640px){.tr-ed .tr-grid3{grid-template-columns:minmax(0,1fr)}}
/* @tracker-ux:end */

/* дотик без клавіатури: підказки про гарячі клавіші — шум, що з'їдає ширину й висоту */
@media (hover:none){.tr-palbtn kbd,.tr-kbdhint{display:none}}

/* заблокований контрол має ВИГЛЯДАТИ заблокованим (партнер бачив «живі» селекти, які мовчки не відповідають) */
.control:disabled{opacity:.55;cursor:not-allowed}
.tr-lockhint{margin:2px 0 4px}
.field.tr-missing .field-label{color:var(--danger)}
.field.tr-missing .control,.field.tr-missing input,.field.tr-missing select{border-color:var(--danger)}
/* крок іншої сторони: поля лише для читання мають так і виглядати (раніше — звичайні порожні інпути без пояснення, чому не пишуться) */
.tr-form input[readonly],.tr-form textarea[readonly]{opacity:.6;cursor:not-allowed;background:transparent;border-style:dashed}