/* ============================================================
   ADDCR — Demo workspace styles (extends styles.css)
   ============================================================ */

.demo-body{min-height:100vh}
.demo{max-width:1480px;margin:0 auto;padding:26px clamp(16px,3vw,40px) 60px}

/* ---------- header strip ---------- */
.demo-top{margin-bottom:22px}
.demo-head h1{font-size:clamp(26px,3.4vw,42px);margin:10px 0 12px}
.demo-lede{color:var(--fg-dim);max-width:74ch;font-size:14.5px}
.demo-lede strong{color:var(--fg);font-weight:600}

.docbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:22px 0 16px;padding:14px 16px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
}
.doc{display:flex;flex-direction:column;gap:3px}
.doc-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;padding:3px 8px;border-radius:5px;width:fit-content}
.doc-tag.spec{background:rgba(78,167,214,.14);color:var(--blue)}
.doc-tag.bid{background:rgba(242,180,65,.14);color:var(--amber)}
.doc-name{font-family:var(--mono);font-size:12.5px;color:var(--fg)}
.doc-x{font-family:var(--mono);color:var(--fg-mute);font-size:18px}
.btn-run{margin-left:auto}
.run-ico{font-size:10px}
.btn-run.running{opacity:.6;pointer-events:none}
.btn-run.done{background:var(--blue);border-color:var(--blue);color:#04141d}

.disc-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.disc{
  font-family:var(--mono);font-size:12.5px;color:var(--fg-dim);
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:9px 14px;cursor:pointer;transition:all .2s var(--ease);
}
.disc:hover:not(.disabled){border-color:var(--blue-soft);color:var(--fg)}
.disc.active{background:rgba(70,209,138,.1);border-color:var(--green-deep);color:var(--green)}
.disc.disabled{opacity:.4;cursor:not-allowed}
.disc-note{font-family:var(--mono);font-size:11px;color:var(--fg-mute);margin-left:4px}

/* ---------- workspace grid ---------- */
.workspace{
  display:grid;grid-template-columns:300px 1fr 360px;gap:14px;
  height:min(72vh,720px);
}
.pane{
  display:flex;flex-direction:column;min-height:0;
  background:linear-gradient(180deg,var(--panel),var(--ink-2));
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.pane-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 16px;border-bottom:1px solid var(--line-soft);
  background:rgba(255,255,255,.015);flex:none;
}
.pane-title{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:-.01em}
.pane-meta{font-family:var(--mono);font-size:11px;color:var(--fg-mute)}
.pane-scroll{flex:1;overflow-y:auto;padding:8px;min-height:0}
.pane-scroll::-webkit-scrollbar{width:8px}
.pane-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}

/* ---------- spec list ---------- */
.spec-item{
  display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;
  padding:12px 12px;border-radius:9px;border:1px solid transparent;
  transition:background .2s,border-color .2s;cursor:default;
}
.spec-item .si-ic{width:18px;height:18px;border-radius:5px;border:1px solid var(--line);position:relative;margin-top:1px}
.spec-item[data-state="ok"] .si-ic{background:rgba(70,209,138,.16);border-color:var(--green-deep)}
.spec-item[data-state="ok"] .si-ic::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid var(--green);border-width:0 2px 2px 0;transform:rotate(45deg)}
.spec-item[data-state="issue"] .si-ic{background:rgba(240,101,79,.16);border-color:#7a2e22}
.spec-item[data-state="issue"] .si-ic::before,.spec-item[data-state="issue"] .si-ic::after{content:"";position:absolute;left:8px;top:3px;width:2px;height:12px;background:var(--red);border-radius:2px}
.spec-item[data-state="issue"] .si-ic::before{transform:rotate(45deg)}
.spec-item[data-state="issue"] .si-ic::after{transform:rotate(-45deg)}
.spec-item[data-state="warn"] .si-ic{background:rgba(242,180,65,.16);border-color:#7a5d1c}
.spec-item[data-state="warn"] .si-ic::after{content:"!";position:absolute;inset:0;display:grid;place-items:center;color:var(--amber);font-weight:700;font-size:11px;font-family:var(--mono)}
.si-id{font-family:var(--mono);font-size:11px;color:var(--blue);display:block;margin-bottom:2px}
.si-txt{font-size:13px;color:var(--fg-dim);line-height:1.45}
.spec-item[data-state] .si-txt{color:var(--fg)}
.spec-item.hl{background:rgba(78,167,214,.1);border-color:var(--blue)}

/* ---------- drawing pane ---------- */
.draw-tools{display:flex;align-items:center;gap:6px}
.zbtn{width:28px;height:28px;border-radius:7px;border:1px solid var(--line);background:var(--ink-2);color:var(--fg-dim);font-size:15px;cursor:pointer;transition:.2s;display:grid;place-items:center}
.zbtn:hover{border-color:var(--blue);color:var(--fg)}
.zlevel{font-family:var(--mono);font-size:11px;color:var(--fg-mute);min-width:38px;text-align:center}
.draw-stage{
  flex:1;min-height:0;overflow:hidden;position:relative;cursor:grab;
  background:
    radial-gradient(60% 60% at 50% 40%,rgba(78,167,214,.05),transparent 70%),
    var(--ink);
}
.draw-stage.grabbing{cursor:grabbing}
.draw-pan{position:absolute;inset:0;display:grid;place-items:center;transform-origin:center;transition:transform .12s ease-out}
.dwg{width:96%;height:96%;max-height:100%;overflow:visible}
.dwg.hidden{display:none}

/* svg drawing primitives */
.wire{fill:none;stroke:var(--blue);stroke-width:1.6;opacity:.55}
.wire.bus{stroke-width:3;opacity:.7}
.wire.dash{stroke-dasharray:4 4;opacity:.45}
.pipe-c{stroke:var(--blue)}
.pipe-h{stroke:var(--red);opacity:.4}
.el-node rect{fill:var(--panel-2);stroke:var(--line);stroke-width:1.4;transition:stroke .25s,fill .25s,filter .25s}
.el-node .nlabel{fill:var(--fg);font-family:var(--mono);font-size:13px;font-weight:600;text-anchor:middle;letter-spacing:.02em}
.el-node .nlabel.sm{font-size:11px}
.el-node .nsub{fill:var(--fg-mute);font-family:var(--mono);font-size:9.5px;text-anchor:middle;letter-spacing:.03em}
.el-node .gen{fill:none;stroke:var(--blue);stroke-width:1.4}
.el-node .gtxt{fill:var(--fg-dim);font-family:var(--mono);font-size:10px;text-anchor:middle;dominant-baseline:middle}
.el-node .nstat{r:0;fill:var(--fg-mute);transition:r .3s var(--ease)}
.el-node.sym .nstat,.el-node.crah .nstat{}
.el-node[data-state="ok"] .nstat{r:5;fill:var(--green)}
.el-node[data-state="issue"] .nstat{r:5;fill:var(--red)}
.el-node[data-state="warn"] .nstat{r:5;fill:var(--amber)}
.el-node[data-state="ok"] rect{stroke:var(--green-deep)}
.el-node[data-state="issue"] rect{stroke:#7a2e22}
.el-node[data-state="warn"] rect{stroke:#7a5d1c}
.el-node{cursor:pointer}
.el-node:hover rect{stroke:var(--blue)}

/* highlight pulse when a finding is selected */
.el-node.hit rect{stroke-width:2.4;filter:drop-shadow(0 0 6px currentColor)}
.el-node.hit.s-ok rect{stroke:var(--green);color:var(--green)}
.el-node.hit.s-issue rect{stroke:var(--red);color:var(--red)}
.el-node.hit.s-warn rect{stroke:var(--amber);color:var(--amber)}
.el-node.hit{animation:nodepulse 1.1s var(--ease) 2}
@keyframes nodepulse{0%,100%{opacity:1}50%{opacity:.55}}
/* path-only symbols (e.g. ground) */
.el-node.hit .wire{stroke-width:2.6}
.el-node.hit.s-ok .wire{stroke:var(--green)}
.el-node.hit.s-issue .wire{stroke:var(--red)}
.el-node.hit.s-warn .wire{stroke:var(--amber)}

/* title block */
.titleblock rect{fill:rgba(0,0,0,.35);stroke:var(--line);stroke-width:1}
.titleblock line{stroke:var(--line);stroke-width:1}
.titleblock .tb-k{fill:var(--fg-mute);font-family:var(--mono);font-size:8px;letter-spacing:.1em}
.titleblock .tb-v{fill:var(--fg-dim);font-family:var(--mono);font-size:10px;font-weight:600}

.draw-legend{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:11px 16px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:11px;color:var(--fg-dim);flex:none;
}
.draw-legend .lg{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:middle}
.lg.ok{background:var(--green)}.lg.issue{background:var(--red)}.lg.warn{background:var(--amber)}
.lg-hint{margin-left:auto;color:var(--fg-mute)}

/* node tooltip */
.dwg-tip{
  position:fixed;z-index:80;pointer-events:none;opacity:0;transform:translateY(4px);
  background:var(--ink);border:1px solid var(--line);border-radius:7px;
  padding:6px 10px;font-family:var(--mono);font-size:11px;color:var(--fg);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.8);transition:opacity .15s,transform .15s;white-space:nowrap;
}
.dwg-tip.on{opacity:1;transform:none}

/* ---------- findings pane ---------- */
.find-counts{display:flex;gap:12px;font-family:var(--mono);font-size:10.5px;color:var(--fg-mute)}
.fc b{font-size:13px}
.fc.ok b{color:var(--green)}.fc.issue b{color:var(--red)}.fc.warn b{color:var(--amber)}
.run-status{padding:12px 16px;border-bottom:1px solid var(--line-soft);flex:none}
.rs-prog{height:4px;border-radius:4px;background:var(--line);overflow:hidden;margin-bottom:9px}
.rs-prog span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--green));transition:width .4s var(--ease)}
.rs-text{font-family:var(--mono);font-size:11.5px;color:var(--fg-dim)}
.rs-text.scanning{color:var(--blue)}
.rs-text.done{color:var(--green)}

.find-empty{text-align:center;color:var(--fg-mute);padding:46px 20px}
.fe-ic{font-size:30px;margin-bottom:12px;opacity:.5}
.find-empty p{font-size:13px}
.fe-sub{font-size:11.5px;margin-top:6px;max-width:30ch;margin-inline:auto}

.finding{
  border:1px solid var(--line);border-left-width:3px;border-radius:11px;
  padding:14px 14px;margin:8px 4px;background:var(--ink-2);cursor:pointer;
  opacity:0;transform:translateX(10px);transition:opacity .4s var(--ease),transform .4s var(--ease),border-color .2s,background .2s;
}
.finding.in{opacity:1;transform:none}
.finding.ok{border-left-color:var(--green)}
.finding.issue{border-left-color:var(--red)}
.finding.warn{border-left-color:var(--amber)}
.finding:hover{background:#10171f}
.finding.sel{border-color:var(--blue);background:rgba(78,167,214,.07)}
.f-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.f-badge{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;padding:3px 8px;border-radius:5px;font-weight:600}
.f-badge.ok{background:rgba(70,209,138,.14);color:var(--green)}
.f-badge.issue{background:rgba(240,101,79,.14);color:var(--red)}
.f-badge.warn{background:rgba(242,180,65,.14);color:var(--amber)}
.f-id{font-family:var(--mono);font-size:11px;color:var(--fg-mute)}
.f-loc{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--blue);opacity:.8}
.f-title{font-size:13.5px;color:var(--fg);font-weight:500;margin-bottom:6px;line-height:1.4}
.f-cite{font-family:var(--mono);font-size:11px;color:var(--fg-mute);line-height:1.5}

.demo-foot{text-align:center;color:var(--fg-mute);font-size:12px;max-width:80ch;margin:26px auto 0;line-height:1.6}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .workspace{grid-template-columns:1fr;height:auto;gap:14px}
  .pane-spec .pane-scroll{max-height:260px}
  .pane-draw{height:480px}
  .pane-find .pane-scroll{max-height:420px}
  .nav-links{display:none}
}
@media (max-width:620px){
  .docbar{flex-direction:column;align-items:stretch}
  .btn-run{margin-left:0}
  .lg-hint{display:none}
  .pane-draw{height:380px}
}