/* ═══════════════════════════════════════════════════════════════
   MEMORYCHAIN TERMINAL — Bloomberg-style dark theme
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg:        #050607;
  --bg-panel:  #0b0d0f;
  --bg-raise:  #121518;
  --line:      #23282d;
  --line-soft: #1a1e22;
  --txt:       #e8e9ea;
  --txt-dim:   #8b929a;
  --txt-faint: #565d64;
  --amber:     #ff9d00;
  --amber-hi:  #ffc152;
  --up:        #3ddc84;
  --down:      #ff5252;

  /* flow colors */
  --c-mat:    #2dd4bf;
  --c-equip:  #4ade80;
  --c-dram:   #38bdf8;
  --c-nand:   #c084fc;
  --c-hbm:    #ffb000;
  --c-nor:    #f472b6;
  --c-emem:   #fb7185;
  --c-ctrl:   #a3e635;
  --c-osat:   #fb923c;
  --c-subs:   #d4a24e;
  --c-module: #facc15;
  --c-demand: #cbd5e1;
  --c-pkg:    #fb923c;
  --c-gen:    #64748b;

  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--mono);
  font-size: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Header ─────────────────────────────────────────────── */
#topbar {
  display:flex; justify-content:space-between; align-items:center;
  padding: 8px 14px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.brand { display:flex; align-items:baseline; gap:10px; }
.brand-mark { color: var(--amber); letter-spacing:-2px; font-weight:bold; }
.brand-name { font-size:15px; font-weight:700; letter-spacing:2px; color:var(--txt); }
.brand-sub  { font-size:10px; color:var(--txt-dim); letter-spacing:1px; }
.top-right { display:flex; gap:16px; align-items:center; }
#clock { color: var(--amber); font-size:11px; }
.src-tag { color: var(--txt-faint); font-size:9px; letter-spacing:.5px; }

#paper-link {
  color: var(--bg); background: var(--amber);
  font-size:10px; font-weight:600; letter-spacing:1px;
  text-decoration:none; border:1px solid var(--amber); border-radius:3px;
  padding:5px 10px; white-space:nowrap;
}
#paper-link:hover { background: var(--amber-hi); border-color: var(--amber-hi); }

/* ── Controls ───────────────────────────────────────────── */
#controls {
  flex:0 0 auto;
  display:flex; align-items:center; gap:12px;
  padding:7px 14px;
  background:var(--bg-panel);
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
#search-wrap { position:relative; }
#search {
  background:#000; color:var(--amber);
  border:1px solid var(--line);
  font-family:var(--mono); font-size:11px;
  padding:5px 10px; width:230px; outline:none;
}
#search:focus { border-color:var(--amber); }
#search::placeholder { color:var(--txt-faint); }
#search-results {
  position:absolute; top:100%; left:0; width:280px; max-height:320px; overflow-y:auto;
  background:var(--bg-raise); border:1px solid var(--line);
  z-index:50; display:none;
}
#search-results .sr {
  padding:6px 10px; cursor:pointer; font-size:11px;
  display:flex; justify-content:space-between; gap:8px;
}
#search-results .sr:hover { background:#1c2126; color:var(--amber-hi); }
#search-results .sr .sr-meta { color:var(--txt-faint); font-size:9px; }

#filters { display:flex; gap:5px; flex-wrap:wrap; }
.fbtn {
  background:transparent; color:var(--txt-dim);
  border:1px solid var(--line);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.5px;
  padding:4px 9px; cursor:pointer;
}
.fbtn:hover { color:var(--txt); border-color:var(--txt-dim); }
.fbtn.active { color:#000; background:var(--amber); border-color:var(--amber); font-weight:700; }

#zoom-ctl { margin-left:auto; display:flex; gap:4px; }
#zoom-ctl button {
  background:var(--bg-raise); color:var(--txt-dim);
  border:1px solid var(--line); font-family:var(--mono);
  font-size:11px; padding:4px 10px; cursor:pointer;
}
#zoom-ctl button:hover { color:var(--amber); border-color:var(--amber); }

/* ── Main layout ────────────────────────────────────────── */
#main { flex:1 1 auto; position:relative; overflow:hidden; }
#canvas-wrap { position:absolute; inset:0; cursor:grab; overflow:hidden; }
#canvas-wrap.dragging, #canvas-wrap.dragging #canvas { cursor:grabbing; }
#canvas { position:absolute; left:0; top:0; display:block; cursor:grab; touch-action:none;
          transform-origin:0 0; will-change:transform; }
#canvas.dragging { cursor:grabbing; }

#hint {
  position:absolute; bottom:10px; right:12px;
  color:var(--txt-faint); font-size:9px; letter-spacing:.5px;
  pointer-events:none;
}

/* ── Legend ─────────────────────────────────────────────── */
#legend {
  position:absolute; left:12px; bottom:10px; z-index:10;
  background:rgba(11,13,15,.92);
  border:1px solid var(--line);
  padding:8px 10px; font-size:9px;
  max-width:230px;
}
.legend-title { color:var(--amber); font-weight:700; letter-spacing:1px; margin-bottom:5px; }
#legend-flows { display:grid; grid-template-columns:1fr 1fr; gap:3px 12px; }
.leg-item { display:flex; align-items:center; gap:6px; color:var(--txt-dim); }
.leg-swatch { width:14px; height:3px; display:inline-block; }
.leg-sq { width:8px; height:8px; display:inline-block; }
.legend-sep { border-top:1px solid var(--line-soft); margin:6px 0; }
#legend-status .leg-item { margin-bottom:2px; }

/* ── Detail panel ───────────────────────────────────────── */
#panel {
  position:absolute; top:0; right:0; bottom:0; width:400px; z-index:20;
  background:rgba(9,11,13,.97);
  border-left:1px solid var(--amber);
  overflow-y:auto;
  transition: transform .18s ease;
}
#panel.hidden { transform:translateX(105%); }
#panel-inner { padding:16px 18px 30px; }

.p-close {
  float:right; background:none; border:1px solid var(--line);
  color:var(--txt-dim); font-family:var(--mono); font-size:11px;
  padding:2px 8px; cursor:pointer;
}
.p-close:hover { color:var(--amber); border-color:var(--amber); }

.p-badges { margin-bottom:8px; display:flex; gap:6px; flex-wrap:wrap; }
.p-badge {
  font-size:8.5px; letter-spacing:1px; padding:2px 7px; font-weight:700;
  border:1px solid;
}
.p-badge.leader  { color:#000; background:var(--amber); border-color:var(--amber); }
.p-badge.major   { color:var(--amber); border-color:var(--amber); }
.p-badge.niche   { color:var(--txt-dim); border-color:var(--txt-dim); }
.p-badge.emerging{ color:#000; background:var(--c-emem); border-color:var(--c-emem); }
.p-badge.stage   { color:var(--txt-dim); border-color:var(--line); }

.p-name { font-size:17px; font-weight:700; margin:2px 0 3px; line-height:1.25; }
.p-meta { color:var(--txt-dim); font-size:10px; margin-bottom:12px; }
.p-meta span { margin-right:12px; }
.p-desc { color:var(--txt); font-size:11.5px; line-height:1.55; margin-bottom:14px;
          border-left:2px solid var(--amber); padding-left:10px; }

.p-sec { margin-bottom:14px; }
.p-sec-title {
  color:var(--amber); font-size:9.5px; font-weight:700; letter-spacing:1.5px;
  border-bottom:1px solid var(--line); padding-bottom:3px; margin-bottom:7px;
}
.p-prod { list-style:none; }
.p-prod li {
  font-size:11px; padding:4px 0 4px 14px; position:relative;
  color:var(--txt); line-height:1.4; border-bottom:1px dashed var(--line-soft);
}
.p-prod li::before { content:'▸'; position:absolute; left:0; color:var(--amber); }
.p-facts { list-style:none; }
.p-facts li {
  font-size:10.5px; color:var(--txt-dim); line-height:1.5;
  padding:3px 0 3px 14px; position:relative;
}
.p-facts li::before { content:'·'; position:absolute; left:4px; color:var(--amber); font-weight:700; }

.p-flow-title { color:var(--txt-faint); font-size:9px; letter-spacing:1px; margin:4px 0 4px; }
.p-chips { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.p-chip {
  font-size:9.5px; padding:3px 8px; cursor:pointer;
  background:var(--bg-raise); border:1px solid var(--line); color:var(--txt);
}
.p-chip:hover { border-color:var(--amber); color:var(--amber-hi); }
.p-chip .arrow { color:var(--txt-faint); }

/* ── SVG nodes & edges ──────────────────────────────────── */
.col-title { fill:var(--txt-dim); font-size:10.5px; font-weight:700; letter-spacing:.8px; }
.col-sub   { fill:var(--txt-faint); font-size:8px; letter-spacing:.4px; }
.col-rule  { stroke:var(--line); stroke-width:1; }
.col-chev  { fill:var(--amber); opacity:.6; }

.node { cursor:pointer; }
.node rect.box {
  fill:var(--bg-raise);
  stroke:var(--line);
  stroke-width:1;
  transition: stroke .12s, fill .12s;
}
.node:hover rect.box { stroke:var(--amber); fill:#181d22; }
.node rect.bar { }
.node .n-name { fill:var(--txt); font-size:11.5px; font-weight:700; }
.node .n-meta { fill:var(--txt-faint); font-size:8.5px; }
.node .n-share { font-size:8.5px; font-weight:700; }
.node .n-badge { font-size:7.5px; font-weight:700; letter-spacing:1px; }

.node.selected rect.box { stroke:var(--amber); stroke-width:2; fill:#1c1503; }
.node.conn rect.box { stroke:var(--txt-dim); }

/* isolated nodes: no verified public supply links */
.node.lone rect.box { stroke:var(--down); stroke-dasharray:4 2; }
.node.lone rect.bar { fill:var(--down); }
.node.lone:hover rect.box { stroke:var(--down); fill:#1c0a0a; }
.lone-note { color:var(--down) !important; }
.node.dimmed { opacity:.13; }
.edge.dimmed, .node.dimmed-slow { transition: opacity .15s; }

.edge { fill:none; stroke-width:1.1; opacity:.16; transition: opacity .15s, stroke-width .15s; }
.edge.hl { opacity:.95; stroke-width:2; }
.edge.dimmed { opacity:.03; }

/* scrollbars */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--line); }
::-webkit-scrollbar-thumb:hover { background:var(--txt-faint); }

/* ── Footer ─────────────────────────────────────────────── */
#footer {
  flex:0 0 auto;
  display:flex; justify-content:space-between; gap:20px;
  padding:5px 14px;
  background:var(--bg-panel); border-top:1px solid var(--line);
  font-size:9px; color:var(--txt-faint); letter-spacing:.3px;
}
#stats { color:var(--amber); }

@media (max-width: 900px) {
  #panel { width: 86vw; }
  .brand-sub, .src-tag { display:none; }
  #minimap { display:none; }            /* thumbs cover it; pinch+fit carry navigation */
  #hint { display:none; }
  #region { max-width:110px; }
}

/* ── How-to-read popover ────────────────────────────────── */
#howto { position:relative; }
#howto summary {
  list-style:none; cursor:pointer; user-select:none;
  color:var(--txt-dim); font-size:9px; letter-spacing:1px;
  border:1px solid var(--line); padding:3px 8px;
}
#howto summary::-webkit-details-marker { display:none; }
#howto summary:hover { color:var(--amber); border-color:var(--amber); }
#howto[open] summary { color:var(--amber); border-color:var(--amber); }
.howto-note {
  position:absolute; right:0; top:calc(100% + 8px); z-index:60;
  width:320px; padding:12px 14px;
  background:var(--bg-panel); border:1px solid var(--line);
  box-shadow:0 8px 30px rgba(0,0,0,.6);
  font-size:10px; color:var(--txt-dim); line-height:1.55;
}
.howto-note b { color:var(--amber); }
.howto-note ul { margin:8px 0 0 16px; }
.howto-note li { margin-bottom:5px; }

/* ── Region select / index button / filter count ────────── */
#region {
  background:var(--bg-raise); color:var(--txt-dim);
  border:1px solid var(--line); font:inherit; font-size:9.5px; letter-spacing:.5px;
  padding:3px 6px; cursor:pointer; outline:none;
}
#region:hover, #region:focus { color:var(--amber); border-color:var(--amber); }
#index-btn {
  background:var(--bg-raise); color:var(--txt-dim);
  border:1px solid var(--line); font:inherit; font-size:9.5px; letter-spacing:1px;
  padding:3px 10px; cursor:pointer;
}
#index-btn:hover { color:var(--amber); border-color:var(--amber); }
#filter-count {
  align-self:center; color:var(--amber); font-size:9.5px; letter-spacing:1px;
  border:1px dashed var(--amber); padding:2px 8px;
}
#filter-count.hidden { display:none; }

/* zoom readout */
#zoom-level {
  align-self:center; min-width:42px; text-align:center;
  color:var(--txt-dim); font-size:9.5px;
  border:1px solid var(--line); padding:3px 4px; background:var(--bg-panel);
}

/* ── Minimap (docked inside legend) ─────────────────────── */
#minimap {
  margin-bottom:8px;
  background:rgba(5,6,7,.6); border:1px solid var(--line);
  padding:4px; user-select:none;
}
#minimap-svg { display:block; width:176px; cursor:crosshair; }
.mm-col { fill:rgba(255,255,255,.022); stroke:var(--line-soft); stroke-width:1; }
.mm-node { opacity:.5; }
#mm-view {
  fill:rgba(255,157,0,.07); stroke:var(--amber);
  vector-effect:non-scaling-stroke; stroke-width:1.5;
}

/* ── A–Z index overlay ──────────────────────────────────── */
#index-overlay {
  position:fixed; inset:0; z-index:70;
  background:rgba(3,4,5,.72);
  display:flex; align-items:center; justify-content:center;
}
#index-overlay.hidden { display:none; }
#index-box {
  width:min(760px, 92vw); max-height:80vh;
  background:var(--bg-panel); border:1px solid var(--line);
  box-shadow:0 12px 50px rgba(0,0,0,.7);
  display:flex; flex-direction:column;
}
#index-head {
  display:flex; align-items:center; gap:14px;
  padding:10px 14px; border-bottom:1px solid var(--line);
}
#index-count { color:var(--txt-faint); font-size:9px; letter-spacing:1px; flex:1; }
#index-close {
  background:none; border:1px solid var(--line); color:var(--txt-dim);
  font:inherit; font-size:10px; padding:2px 9px; cursor:pointer;
}
#index-close:hover { color:var(--amber); border-color:var(--amber); }
#index-list { overflow-y:auto; padding:10px 14px 18px; }
.ix-letter {
  color:var(--amber); font-size:11px; font-weight:700; letter-spacing:2px;
  margin:12px 0 4px; border-bottom:1px dashed var(--line-soft); padding-bottom:2px;
}
.ix-item {
  display:inline-flex; justify-content:space-between; gap:14px;
  width:calc(50% - 6px); margin:1px 3px 1px 0; padding:4px 8px;
  font-size:10.5px; cursor:pointer; color:var(--txt);
  border:1px solid transparent;
}
.ix-item:nth-child(odd) { margin-right:0; }
.ix-item:hover { background:var(--bg-raise); border-color:var(--line); color:var(--amber-hi); }
.ix-meta { color:var(--txt-faint); font-size:8.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:45%; }

/* ── Panel: top buttons, dev note, sources ──────────────── */
.p-topbtns { display:flex; justify-content:space-between; gap:8px; margin-bottom:10px; }
.p-dev { font-size:10.5px; color:var(--txt-dim); line-height:1.5; }
.p-dev b { color:var(--txt); }
.p-src { list-style:none; }
.p-src li { padding:2px 0; }
.p-src a {
  color:var(--c-dram); text-decoration:none; font-size:10px; line-height:1.4;
  border-bottom:1px dotted transparent;
}
.p-src a:hover { color:var(--amber-hi); border-bottom-color:var(--amber-hi); }