/* ═══════════════════════════════════════════════════════════════
   NTWX UNIFIED DESIGN SYSTEM
   Source of truth: hermes-polyglot.html visual language
   All dashboards import this via <link rel="stylesheet" href="NTWX-DESIGN.css">
   ═══════════════════════════════════════════════════════════════ */

/* ─── COLOR TOKENS ─── */
:root {
  --bg:#0d1117; --panel:#161b22; --edge:#30363d; --txt:#e6edf3; --dim:#8b949e;
  --green:#3fb950; --blue:#58a6ff; --purple:#bc8cff; --orange:#f0883e; --yellow:#d29922; --red:#f85149; --pink:#e94e77;
}

/* ─── BASE ─── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--txt);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  padding:24px;
}

/* ─── TYPOGRAPHY ─── */
h1{font-size:23px;margin-bottom:4px}
.sub{color:var(--dim);font-size:13px;margin-bottom:16px}
h2.sec{font-size:18px;margin:22px 0 12px;border-bottom:1px solid var(--edge);padding-bottom:7px}
h3{font-size:13.5px}

/* ─── NAV (section jump links) ─── */
nav{display:flex;gap:14px;margin-bottom:14px;font-size:13px}
nav a{color:var(--dim);text-decoration:none}
nav a:hover{color:var(--blue)}

/* ─── WRAP (for SVG diagrams) ─── */
.wrap{background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:10px;margin-bottom:14px;overflow-x:auto}
.wrap svg{min-width:1060px}
svg{width:100%;height:auto;display:block}

/* ─── LEGEND (dots + labels) ─── */
.legend{display:flex;gap:16px;flex-wrap:wrap;color:var(--dim);font-size:12px;padding:8px 6px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}

/* ─── FILTER BAR ─── */
.bar{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 16px;align-items:center}
select,input[type=search]{
  background:var(--panel);border:1px solid var(--edge);color:var(--txt);
  border-radius:8px;padding:8px 12px;font-size:13px;outline:none
}
select:focus,input:focus{border-color:var(--blue)}
.count{color:var(--dim);font-size:12px;margin-left:auto}

/* ─── GRID (node cards) ─── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.node{background:var(--panel);border:1px solid var(--edge);border-radius:10px;padding:13px 15px;transition:border-color .15s}
.node:hover{border-color:var(--purple)}
.node h3{font-size:13.5px;display:flex;align-items:center;gap:7px;margin-bottom:3px}
.tier{font-size:9.5px;font-weight:800;letter-spacing:.05em;padding:2px 7px;border-radius:8px;text-transform:uppercase;white-space:nowrap}
.node p{color:var(--dim);font-size:11.5px;margin:5px 0 8px;line-height:1.45}
.meta{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;color:var(--dim);border-top:1px solid #21262d;padding-top:7px}
.up{color:var(--green)}.down{color:var(--blue);text-align:right}

/* ─── TIER CHIPS (semantic colors) ─── */
/* Main brain / paid / primary */
.t-main{background:#12331c;color:var(--green)}
/* Subagent / delegation / secondary */
.t-sub{background:#2a1f42;color:var(--purple)}
/* MOA / aggregator */
.t-moa{background:#33270f;color:var(--yellow)}
/* Harness / orchestrator */
.t-harness{background:#12253f;color:var(--blue)}
/* MCP server / tool */
.t-mcp{background:#2d1517;color:var(--orange)}
/* Dead / parked / ghost */
.t-ghost{background:#25292e;color:var(--dim)}

/* Value-chain explorer specific tiers (back-compat) */
.t-chip{background:#12331c;color:var(--green)}
.t-foundry{background:#12253f;color:var(--blue)}
.t-cloud{background:#33270f;color:var(--yellow)}
.t-model{background:#2a1f42;color:var(--purple)}
.t-power{background:#2d1517;color:var(--orange)}
.t-net{background:#1c2d3f;color:#79c0ff}
.t-app{background:#25292e;color:var(--dim)}

/* ─── TABLE ─── */
table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--edge);border-radius:10px;overflow:hidden;margin-top:10px}
th{background:#1c2129;color:var(--dim);text-transform:uppercase;font-size:11px;letter-spacing:.05em;text-align:left;padding:9px 12px}
td{padding:7px 12px;border-top:1px solid #21262d;font-size:12.5px;vertical-align:top}
.num{text-align:center}
.ok{color:var(--green);font-weight:700}
.warn{color:var(--yellow);font-weight:700}
.bad{color:var(--red);font-weight:700}

/* ─── STAT CARDS (summary bar) ─── */
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px;margin-bottom:14px}
.stat{background:var(--panel);border:1px solid var(--edge);border-radius:8px;padding:10px;text-align:center}
.stat b{font-size:22px;display:block}
.stat small{color:var(--dim);font-size:9px;text-transform:uppercase}
.red-b b{color:var(--red)}.orange-b b{color:var(--orange)}.yellow-b b{color:var(--yellow)}
.green-b b{color:var(--green)}.pink-b b{color:var(--pink)}.blue-b b{color:var(--blue)}

/* ─── TAGS (finding IDs) ─── */
.tag{font-size:8.5px;font-weight:800;padding:1px 5px;border-radius:3px;white-space:nowrap;flex-shrink:0}
.red{background:#3d1418;color:var(--red)}.orange{background:#3a2408;color:var(--orange)}
.yellow{background:#33270f;color:var(--yellow)}.green{background:#12331c;color:var(--green)}
.pink{background:#e94e77;color:#fff}.blue{background:#12253f;color:var(--blue)}
.src{display:inline-block;width:20px;height:13px;border-radius:3px;font-size:7.5px;font-weight:800;text-align:center;line-height:13px;background:#2a1f42;color:var(--purple);margin-right:3px}

/* ─── PILL BADGES (pillar labels in tables) ─── */
.pill{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 9px;border-radius:10px;white-space:nowrap}
.pA{background:#12331c;color:var(--green)}.pB{background:#12253f;color:var(--blue)}
.pC{background:#33270f;color:var(--yellow)}.pD{background:#2a1f42;color:var(--purple)}.pI{background:#25292e;color:var(--dim)}

/* ─── SEVERITY SCORE CHIPS (crossref) ─── */
.pscore{font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:5px;white-space:nowrap}
.sc-hot{background:#3d1418;color:var(--red)}
.sc-warm{background:#3a2408;color:var(--orange)}
.sc-cool{background:#12253f;color:var(--blue)}
.sc-idle{background:#12331c;color:var(--green)}

/* ─── CARD LAYOUT (chief/project cards) ─── */
.card{background:var(--panel);border:1px solid var(--edge);border-radius:8px;padding:0;overflow:hidden;width:100%}
.chead{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;background:#1c2129;flex-wrap:wrap;gap:4px}
.cicon{font-size:18px;margin-right:4px}
.chead b{font-size:13px}
.cbody{padding:6px 0;width:100%}
.pstep{display:flex;gap:8px;align-items:center;padding:3px 14px;font-size:11.5px}
.txt{flex:1}
.cfoot{padding:7px 14px;border-top:1px solid #21262d;line-height:1.5}

/* ─── ARCHER GRID (tier 3) ─── */
.archers{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-bottom:14px}
.archer{background:var(--panel);border:1px solid var(--edge);border-radius:6px;padding:10px;text-align:center}
.archer b{display:block;font-size:12px;margin-bottom:2px}
.archer small{color:var(--dim);font-size:10px;display:block}

/* ─── TOOLKIT ─── */
.toolkit{background:var(--panel);border:1px solid var(--edge);border-radius:8px;padding:14px;margin-bottom:14px}
.tk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:8px}
.tk-item{background:#1c2129;border-radius:6px;padding:10px;text-align:center}
.tk-item b{display:block;font-size:11px;margin-bottom:3px}
.tk-item small{color:var(--dim);font-size:9.5px;line-height:1.35;display:block}

/* ─── LAUNCH PROMPTS ─── */
.launch{background:#12253f;border:1px solid var(--blue);border-radius:8px;padding:14px;margin-bottom:14px}
.launch h3{color:var(--blue);font-size:13px;margin-bottom:8px}
.launch pre{
  background:#0d1117;border:1px solid var(--edge);border-radius:6px;padding:10px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;overflow-x:auto;white-space:pre-wrap;color:var(--green)
}

/* ─── FOOTER ─── */
.footer{color:var(--dim);font-size:10px;margin-top:16px;border-top:1px solid var(--edge);padding-top:10px;line-height:1.6}
.site-footer{
  margin-top:34px;border-top:1px solid var(--edge);padding-top:18px
}
.site-footer > div{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;font-size:12.5px
}
.site-footer .col-title{
  color:var(--dim);text-transform:uppercase;font-size:10.5px;letter-spacing:.06em;margin-bottom:7px
}
.site-footer a{color:var(--blue);text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* ─── SOURCE NOTE ─── */
.srcnote{margin-top:16px;color:var(--dim);font-size:12px;border-top:1px solid var(--edge);padding-top:12px;line-height:1.6}

/* ─── EMPTY STATE ─── */
.empty{display:none;text-align:center;color:var(--dim);padding:36px}

/* ─── PULSE ROWS (heartbeats) ─── */
.pulse-row{display:flex;gap:10px;align-items:center;padding:4px 0;font-size:13px}
.beat{width:9px;height:9px;border-radius:50%;flex:none}
@keyframes beat{0%,100%{opacity:.35}50%{opacity:1}}
.b1{animation:beat 1s infinite}.b120{animation:beat 12s infinite}.b30{animation:beat 4s infinite}
.bd{animation:beat 40s infinite}.boff{opacity:.25}

/* ─── RESPONSIVE ─── */
@media (max-width:900px){
  body{padding:16px}
  .grid{grid-template-columns:1fr}
  .wrap{min-width:auto}
}