/* Оболочка: шапка-строка, полоса пути, блоки, паспорт, провода. Токены — atlas.css. */
html,body{height:100%}
body{overflow:hidden}
.app{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}

/* шапка в одну строку: 44 px вместо ≈150 px */
.hb{display:flex;align-items:center;gap:14px;height:44px;padding:0 max(12px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);background:var(--bg);min-width:0}
.hb-brand{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.hb-brand i{width:9px;height:9px;background:var(--red);display:inline-block;align-self:center}
.hb-brand b{font-size:15px;font-weight:800;letter-spacing:-.01em}
.hb-brand span{font-family:var(--f-mono);font-size:10.5px;color:var(--faint);letter-spacing:.04em}
.hb-search{display:flex;align-items:center;gap:6px;margin-left:auto;border:1px solid var(--line);border-radius:999px;padding:3px 11px;background:var(--surface);width:220px;min-width:0}
.hb-search input{border:0;background:none;color:var(--fg);font:inherit;font-size:12.5px;outline:none;width:100%;min-width:0}
.hb-search svg{flex:none;opacity:.6}
.hb-ed{font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 9px;white-space:nowrap}
.hb-user{width:26px;height:26px;border-radius:50%;background:var(--slate-fill);display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.hb-var{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:6px;padding:2px}
.hb-var button{border:0;background:none;color:var(--muted);border-radius:4px;padding:2px 7px;cursor:pointer;font-family:var(--f-mono);font-size:12px;display:flex;gap:5px;align-items:baseline}
.hb-var button small{font-family:var(--f-body);font-size:11px;white-space:nowrap}
.hb-var button[aria-pressed="true"]{background:var(--fg);color:var(--bg);font-weight:700}

.main{position:relative;min-height:0;overflow:hidden;
  background-image:radial-gradient(circle at 1px 1px,rgba(157,171,182,.07) 1px,transparent 0);background-size:18px 18px}

/* нижняя полоса пути — всегда на экране */
.trail{border-top:1px solid var(--red);background:linear-gradient(180deg,var(--surface),var(--bg));padding:7px max(12px,env(safe-area-inset-left,0px)) calc(8px + env(safe-area-inset-bottom,0px));min-width:0}
.tr-h{display:flex;align-items:baseline;gap:10px;min-width:0}
.tr-h b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-h small{color:var(--faint);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-cnt{display:flex;gap:6px;margin-left:auto}
.tr-cnt em,.tr-sum span{font-style:normal;font-family:var(--f-mono);font-size:10.5px;border-radius:3px;padding:1px 6px;white-space:nowrap}
.tr-x{border:1px solid var(--line);background:none;border-radius:999px;padding:2px 10px;font-size:11.5px;color:var(--muted);cursor:pointer}
.tr-sum{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tr-steps{list-style:none;margin:6px 0 0;padding:0;display:flex;gap:18px;overflow-x:auto;scrollbar-width:thin}
.ts{position:relative;flex:0 0 auto;max-width:230px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:5px;padding:4px 9px;cursor:default}
.ts+.ts::before{content:"";position:absolute;left:-17px;top:50%;width:14px;height:1.5px;background:var(--red)}
.ts i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.ts b{display:block;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts.hl{border-color:var(--red-ink)}

/* состояния: цвет всегда вместе с текстом */
.st-gap.ts,.nd.st-gap{border:1px dashed var(--red-ink);background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(240,113,123,.09) 7px 10px)}
.st-warn.ts,.nd.st-warn{border-color:var(--amber)}
.ts.st-gap b,.nd.st-gap b{color:var(--red-ink)}
.tr-cnt .st-gap,.tr-sum .st-gap{color:var(--red-ink);border:1px solid var(--red-ink)}
.tr-cnt .st-warn,.tr-sum .st-warn{color:var(--amber);border:1px solid var(--amber)}
.tr-cnt .st-ok{color:var(--ok);border:1px solid var(--ok)}
.ts.st-zone,.nd.st-zone{opacity:.6}

/* блок-узел */
.nd{position:relative;background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:5px 9px 6px;min-width:0;transition:border-color .15s,opacity .2s,transform .2s}
.nd i{display:block;font-style:normal;font-family:var(--f-mono);font-size:9.5px;color:var(--faint);letter-spacing:.03em;text-transform:uppercase}
.nd b{display:block;font-size:12px;font-weight:600;line-height:1.25;padding-right:22px}
.nd span{display:block;font-size:11px;color:var(--muted);line-height:1.35;margin-top:1px}
.nd.k-site{border-left:3px solid var(--slate)}
.nd.k-sup{border-left:3px solid var(--ok)}
.nd.hl,.nd:hover{border-color:var(--red-ink)}
.rks{position:absolute;top:5px;right:6px;display:flex;gap:3px;font-style:normal}
.rks u{text-decoration:none;font-family:var(--f-mono);font-size:9px;font-weight:600;color:var(--red-ink);border:1px solid var(--red-ink);border-radius:3px;padding:0 3px;line-height:1.4}

/* строка паспорта с разъёмом */
.pr{position:relative;display:grid;grid-template-columns:86px minmax(0,1fr);gap:8px;align-items:baseline;padding:5px 14px 5px 10px;border-top:1px solid var(--line-soft);font-size:12px}
.pr-l{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.pr-v{font-weight:600;line-height:1.3}
.pr-v small{display:block;font-weight:400;color:var(--muted);font-size:11px}
.pr.st-gap .pr-v{color:var(--red-ink)}
.pr.st-warn .pr-v small{color:var(--amber)}
.pr.st-zone .pr-v{color:var(--muted);font-weight:400}
.port{position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--bg);border:2px solid var(--red)}
.port-r .port{right:-5px}.port-l .port{left:-5px}
.pr.st-gap .port{border-style:dashed;border-color:var(--red-ink)}
.pr.st-warn .port{border-color:var(--amber)}
.pr.st-zone .port,.pr.noport .port{display:none}
.pr.hl{background:var(--red-wash)}

/* провода */
svg.wires{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:2}
.w{fill:none;stroke:var(--red);stroke-width:1.6;opacity:.9;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset .55s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 22ms),opacity .2s,stroke-width .2s}
.drawn .w{stroke-dashoffset:0}
.w.gap{stroke:var(--red-ink);stroke-dasharray:4 4;stroke-dashoffset:0;opacity:0;transition:opacity .4s calc(var(--i) * 22ms)}
.drawn .w.gap{opacity:.95}
.w.warn{stroke:var(--amber)}
.wd{fill:var(--red)}.wd.gap{fill:var(--red-ink)}.wd.warn{fill:var(--amber)}
.hl-on .w{opacity:.22}.hl-on .w.hl{opacity:1;stroke-width:2.4}
@media (prefers-reduced-motion:reduce){.w,.w.gap{transition:none}}


@media (max-width:1100px){.hb-ed{display:none}.hb-var button small{display:none}}
@media (max-width:760px){
  .hb{gap:8px}.hb-brand span{display:none}.hb-search{width:auto;flex:1 1 auto}
  .hb-var button small{display:none}.hb-var button{padding:2px 6px}
  .tr-h small{display:none}.ts{max-width:170px}
}