/* The ATJ Trading Engine / ACP map (templates/_engine_map.html, js/engine_map.js).
   Everything is scoped to .engine-map; colours come from dark.css where they exist. */
.engine-map {
  --em-box: var(--panel-2);
  --em-line: var(--border);
  --em-core: #1d3a33;          /* the accent at ~12% over --bg, solid so nothing shows through */
  --em-core-line: #1f7a66;
  --em-chip: #1a302b;
  --em-chip-hot: #214a40;
  --em-wire: var(--accent-line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

.em-stage { overflow-x: auto; }
.em-svg { display: block; width: 100%; min-width: 700px; height: auto; font-family: var(--mono); }

.em-svg .group rect { fill: none; stroke: var(--em-line); stroke-dasharray: 4 4; }
.em-svg .group.engine > rect:first-child { stroke: var(--em-core-line); }
.em-svg .group text { fill: var(--muted); font-size: 10px; letter-spacing: .14em; }
.em-svg .group.engine text { fill: var(--accent); cursor: pointer; }
.em-svg .group.engine text:hover { text-decoration: underline; }
.em-svg .group .lbl-bg { fill: var(--em-label-bg, var(--bg)); stroke: none; }

.em-svg .node { cursor: pointer; outline: none; transition: opacity .3s; }
.em-svg .node rect.box { fill: var(--em-box); stroke: var(--em-line); stroke-width: 1; transition: stroke .3s, fill .3s; }
.em-svg .node.core rect.box { fill: var(--em-core); stroke: var(--em-core-line); filter: url(#em-glow); }
.em-svg .node.chip rect.box { fill: var(--em-chip); filter: none; }
.em-svg .node .t { fill: var(--text); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-anchor: middle; }
.em-svg .node.core .t { fill: var(--accent); }
.em-svg .node.code .t { font-weight: 500; letter-spacing: .02em; }
.em-svg .node .s { fill: var(--muted); font-size: 10px; text-anchor: middle; }
.em-svg .node:hover rect.box, .em-svg .node.hot rect.box { stroke: var(--accent); }
.em-svg .node.chip:hover rect.box, .em-svg .node.chip.hot rect.box { fill: var(--em-chip-hot); }
.em-svg .node.sel rect.box { stroke: var(--accent); stroke-width: 2; }
.em-svg .node.off { opacity: .4; }
.em-svg .node.off:hover { opacity: .75; }
.em-svg .node:focus-visible rect.box { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 3 3; }
.em-svg .inlabel { fill: var(--muted); font-size: 9.5px; letter-spacing: .14em; }
.em-svg .tag rect { fill: none; stroke: var(--accent); stroke-opacity: .6; }
.em-svg .tag text { fill: var(--accent); font-size: 8.5px; letter-spacing: .14em; text-anchor: middle; }

.em-svg .edge { fill: none; stroke: var(--em-wire); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.em-svg .edge.draw { stroke-dasharray: 1; animation: em-draw .6s ease-out both; }
@keyframes em-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* the details window */
.em-info {
  position: sticky; top: 16px;
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 18px; display: grid; gap: 12px;
}
.em-kind { font: 10px var(--mono); letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.em-info h3 { margin: 0; font: 700 17px var(--mono); color: var(--accent); letter-spacing: .02em; }
.em-info p { margin: 0; font-size: 14px; line-height: 1.6; }
.em-info ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.em-info li { font-size: 13px; line-height: 1.5; color: var(--muted); padding-left: 16px; position: relative; }
.em-info li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.em-links { display: grid; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; }
.em-links[hidden] { display: none; }
.em-links > span { font: 10px var(--mono); letter-spacing: .16em; color: var(--muted); }
.em-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.em-chips button {
  font: 12px var(--mono); color: var(--text); background: transparent;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 9px; cursor: pointer;
}
.em-chips button:hover { border-color: var(--accent); color: var(--accent); }
.em-chips button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.em-hint { font-size: 12px; color: var(--faint); }


/* inside a card (the ACP page): match the card's surface */
.card .engine-map { --em-label-bg: var(--panel); }
.card .em-info { background: var(--panel-2); }

@media (max-width: 1100px) {
  .engine-map { grid-template-columns: minmax(0, 1fr); }
  .em-info { position: static; }
}