/* Blueprints: the simulator (dark console) and the technical index. Reads tokens.css; terminal look from terminal.css. */
.bp-hero { padding-bottom: var(--sp-3); }
.bp-sim-sec { padding-top: var(--sp-2); }
.sim {
  --s-bg: #0B0F14; --s-panel: #101820; --s-line: #243140; --s-red: #FF8A8A;
  background: var(--s-bg); color: var(--t-text); border: 1px solid var(--s-line); border-radius: var(--r-3); box-shadow: var(--e-3);
  overflow: hidden; font-family: var(--font-body); min-width: 0;
}
.sim-head { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center; justify-content: space-between; padding: 12px var(--sp-3); background: var(--t-bar); border-bottom: 1px solid var(--s-line); }
.sim-title { display: inline-flex; align-items: center; gap: 10px; font: 600 0.8rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-green); }
.sim-title-s { color: var(--t-dim); text-transform: none; letter-spacing: 0; }
.sim-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--t-green); box-shadow: 0 0 10px var(--t-green); }
.sim-tools { display: none; gap: 6px; flex-wrap: wrap; }
.sim.is-ready .sim-tools { display: flex; }
.sim-tools button, .sim-seg button {
  min-height: 36px; padding: 0 12px; border-radius: 6px; border: 1px solid #2b3a4a; background: transparent; color: var(--t-text);
  font: 600 0.78rem var(--font-mono); cursor: pointer;
}
.sim-tools button:hover, .sim-seg button:hover { background: #1c2735; border-color: var(--t-dim); }
.sim button:focus-visible, .sim input:focus-visible, .sim .term-out:focus-visible { outline: 2px solid var(--t-cyan); outline-offset: 2px; }
@media (pointer: coarse) { .sim-tools button, .sim-seg button { min-height: 44px; } }
.sim-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.sim-side { padding: var(--sp-3); border-right: 1px solid var(--s-line); display: grid; align-content: start; gap: var(--sp-1); min-width: 0; }
.sim-k { margin: var(--sp-1) 0 0; color: var(--t-dim); font: 600 0.72rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.sim-k:first-child { margin-top: 0; }
.sim-events { display: grid; gap: 8px; }
.sim-ev {
  display: flex; align-items: center; gap: 10px; text-align: left; min-height: 52px; padding: 8px 12px; border-radius: 10px; border: 1px solid #2b3a4a;
  background: var(--s-panel); color: var(--t-text); cursor: pointer; font: inherit; transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.sim-ev:hover { border-color: var(--t-dim); }
.sim-ev[aria-pressed="true"] { border-color: var(--t-green); background: #0f2a20; box-shadow: inset 3px 0 0 var(--t-green); }
.sim-key { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1px solid #2b3a4a; color: var(--t-dim); font: 600 0.72rem var(--font-mono); }
.sim-ev[aria-pressed="true"] .sim-key { background: var(--t-green); color: #04130b; border-color: var(--t-green); }
.sim-ev-t { display: grid; min-width: 0; }
.sim-ev-t strong { font: 600 0.92rem var(--font-body); }
.sim-ev-s { color: #9fb0c2; font-size: 0.8rem; }
.sim-ctls { display: grid; gap: var(--sp-2); }
.sim-ctl { display: grid; gap: 8px; }
.sim-ctl-l { font: 600 0.88rem var(--font-body); color: var(--t-text); }
.sim-ctl-h { color: #9fb0c2; font-size: 0.78rem; line-height: 1.4; }
.sim-sw { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid #2b3a4a; background: var(--s-panel); color: var(--t-text); font: 600 0.82rem var(--font-mono); cursor: pointer; justify-self: start; }
.sim-sw-knob { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #2b3a4a; transition: background var(--d-base) var(--ease); }
.sim-sw-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform var(--d-base) var(--ease); }
.sim-sw[aria-checked="true"] .sim-sw-knob { background: var(--t-green); }
.sim-sw[aria-checked="true"] .sim-sw-knob::after { transform: translateX(16px); background: #04130b; }
.sim-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.sim-seg button[aria-pressed="true"] { background: var(--t-green); color: #04130b; border-color: var(--t-green); }
.sim-range { width: 100%; height: 44px; accent-color: var(--t-green); background: transparent; }
.sim-range-v { font: 600 0.82rem var(--font-mono); color: var(--t-green); }
.sim-main { display: grid; min-width: 0; }
.sim-stage { position: relative; padding: var(--sp-2) var(--sp-3) var(--sp-3); background:
  radial-gradient(circle at 1px 1px, #1a2634 1px, transparent 0) 0 0 / 22px 22px, var(--s-bg); border-bottom: 1px solid var(--s-line); min-width: 0; }
.sim-result { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 14px; margin-bottom: var(--sp-1); border-radius: 10px; border: 1px solid #2b3a4a; background: var(--s-panel); font: 600 0.9rem var(--font-body); }
.sim-result-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #5b6b80; }
.sim-result[data-tone="ok"] { border-color: #1d6a49; } .sim-result[data-tone="ok"] .sim-result-dot { background: var(--t-green); box-shadow: 0 0 8px var(--t-green); }
.sim-result[data-tone="warn"] { border-color: #7a5a1f; color: var(--t-amber); } .sim-result[data-tone="warn"] .sim-result-dot { background: var(--t-amber); }
.sim-result[data-tone="block"] { border-color: #7a3030; color: var(--s-red); } .sim-result[data-tone="block"] .sim-result-dot { background: var(--s-red); }
.sim-result[data-tone="run"] .sim-result-dot { background: var(--t-cyan); animation: sim-pulse 1s infinite; }
@keyframes sim-pulse { 50% { opacity: 0.25; } }
.sim-svg { display: none; width: 100%; height: auto; max-height: 460px; }
.sim.is-ready .sim-svg { display: block; }
.sim.is-ready .sim-fallback { display: none; }
.sim-fallback { color: #c4d0dc; }
.sim-fb-k { margin: 0 0 8px; font: 600 0.8rem var(--font-mono); color: var(--t-dim); }
.sim-fb-nodes { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.sim-fb-nodes li { padding: 6px 12px; border: 1px solid #2b3a4a; border-radius: 8px; font-size: 0.85rem; }
.sim-fb-nodes span { color: #9fb0c2; }
.sim-fb-events { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-3); display: grid; gap: 6px; border-top: 1px solid var(--s-line); }
.sim-fb-events span { color: #9fb0c2; }
.sim-edge { fill: none; stroke: #38495c; stroke-width: 2; stroke-dasharray: 5 5; transition: stroke var(--d-base) var(--ease); }
.sim-edge.is-hot { stroke: var(--t-green); stroke-dasharray: none; filter: drop-shadow(0 0 3px rgba(57, 255, 155, 0.6)); }
.sim-elabel { font: 600 10.5px var(--font-mono); fill: #8da3b8; }
.sim-box { fill: var(--s-panel); stroke: #34465a; stroke-width: 1.5; transition: fill var(--d-base) var(--ease), stroke var(--d-base) var(--ease); }
.sim-ic { color: var(--t-dim); }
.sim-label { font: 700 13.5px var(--font-head); fill: var(--t-text); }
.sim-sub { font: 400 10.5px var(--font-mono); fill: #9fb0c2; }
.sim-badge-c { fill: transparent; }
.sim-node.is-done .sim-box { stroke: var(--t-dim); }
.sim-node.is-done .sim-ic { color: var(--t-green); }
.sim-node.is-active .sim-box { fill: #0f2a20; stroke: var(--t-green); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(57, 255, 155, 0.45)); }
.sim-node.t-ok .sim-badge-c { fill: var(--t-green); }
.sim-node.t-warn .sim-box { stroke: var(--t-amber); } .sim-node.t-warn .sim-badge-c { fill: var(--t-amber); } .sim-node.t-warn .sim-ic { color: var(--t-amber); }
.sim-node.t-warn .sim-sub { fill: var(--t-amber); }
.sim-node.t-block .sim-box { stroke: var(--s-red); fill: #2a1416; } .sim-node.t-block .sim-badge-c { fill: var(--s-red); } .sim-node.t-block .sim-ic { color: var(--s-red); }
.sim-node.t-block .sim-sub { fill: var(--s-red); }
.sim-packet { fill: var(--t-green); stroke: #fff; stroke-width: 1.5; opacity: 0; filter: drop-shadow(0 0 5px var(--t-green)); }
.sim-packet.is-on { opacity: 1; }
.sim-packet.is-idle { opacity: 0.55; }
.sim-lower { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-width: 0; }
.sim .term { border: 0; border-radius: 0; box-shadow: none; background: var(--s-bg); }
.sim .term-out, .sim .term-static { height: 19em; }
.sim .term-ctl { display: none; }
.sim .term-bar { background: var(--s-bg); border-bottom: 1px solid var(--s-line); }
.sim-evidence { padding: var(--sp-2) var(--sp-3); border-left: 1px solid var(--s-line); background: var(--s-panel); min-width: 0; }
.sim-ev-head { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 var(--sp-1); align-items: center; }
.sim-ev-kind { font: 600 0.72rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-cyan); }
.sim-ev-sim { font: 600 0.68rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--t-dim); border: 1px solid #2b3a4a; border-radius: 6px; padding: 2px 8px; }
.sim-ev-title { margin: 0 0 var(--sp-1); font: 600 0.95rem var(--font-mono); color: var(--t-text); overflow-wrap: anywhere; }
.sim-ev-empty { margin: 0; color: #9fb0c2; font-size: 0.9rem; }
.sim-kv { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; font: 0.82rem/1.45 var(--font-mono); }
.sim-kv dt { color: var(--t-dim); } .sim-kv dd { margin: 0; color: var(--t-text); overflow-wrap: anywhere; }
.sim-evidence[data-tone="warn"] { box-shadow: inset 3px 0 0 var(--t-amber); } .sim-evidence[data-tone="warn"] .sim-ev-title { color: var(--t-amber); }
.sim-evidence[data-tone="block"] { box-shadow: inset 3px 0 0 var(--s-red); } .sim-evidence[data-tone="block"] .sim-ev-title { color: var(--s-red); }
.sim-evidence[data-tone="ok"] { box-shadow: inset 3px 0 0 var(--t-green); }
.sim-foot { margin: 0; padding: 10px var(--sp-3); border-top: 1px solid var(--s-line); color: #9fb0c2; font: 0.78rem var(--font-mono); background: var(--t-bar); }
@media (max-width: 1100px) {
  .sim-grid { grid-template-columns: minmax(0, 1fr); }
  .sim-side { border-right: 0; border-bottom: 1px solid var(--s-line); padding: var(--sp-2); }
  .sim-events { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .sim-ev { flex: none; min-width: 200px; scroll-snap-align: start; }
  .sim-ctls { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 760px) {
  .sim-lower { grid-template-columns: minmax(0, 1fr); }
  .sim-evidence { border-left: 0; border-top: 1px solid var(--s-line); }
  .sim-stage { padding: var(--sp-1) var(--sp-1) var(--sp-2); }
  .sim .term-out, .sim .term-static { height: 15em; }
  .sim-head { padding: 10px var(--sp-2); }
  .sim-ev { min-width: 176px; }
}
@media (prefers-reduced-motion: reduce) { .sim-packet, .sim-result-dot { animation: none !important; } .sim-edge { transition: none; } }

/* Detail page lower section */
.bp-two2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); align-items: start; }
@media (max-width: 900px) { .bp-two2 { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); } }
.bp-note { margin: var(--sp-2) 0 0; color: var(--ink-2); font-size: 0.92rem; }
.bp-rels { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bp-rel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 56px; padding: 10px var(--sp-2); border: var(--bd-strong); border-radius: var(--r-2); background: var(--surface); color: var(--ink); text-decoration: none; }
.bp-rel:hover { border-color: var(--accent-ink); }
.bp-rel-k { font: var(--w-strong) 0.72rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-ink); }
.bp-rel-t { font-weight: var(--w-strong); }

/* Index console */
.bx-console { background: var(--t-bg); border: 1px solid #243140; border-radius: var(--r-3); box-shadow: var(--e-3); overflow: hidden; color: var(--t-text); font-family: var(--font-mono); }
.bx-console .term-bar { background: var(--t-bar); }
.bx-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.bx-left { padding: var(--sp-3); min-width: 0; }
.bx-prompt { display: flex; align-items: center; gap: 10px; color: var(--t-dim); font: 600 0.95rem var(--font-mono); }
.bx-ps { white-space: nowrap; }
.bx-q { flex: 1; min-width: 0; min-height: 44px; background: transparent; border: 0; border-bottom: 1px solid #2b3a4a; color: var(--t-green); font: 0.95rem var(--font-mono); caret-color: var(--t-green); }
.bx-q::placeholder { color: #6f8aa0; }
.bx-q:focus-visible { outline: 2px solid var(--t-cyan); outline-offset: 2px; }
.bx-chips { display: none; flex-wrap: wrap; gap: 8px; margin: var(--sp-2) 0; }
html.am-js .bx-chips, html.am-js .bx-prompt { display: flex; }
html:not(.am-js) .bx-prompt { display: none; }
.bx-chip { min-height: 36px; padding: 0 12px; border: 1px solid #2b3a4a; border-radius: 999px; background: transparent; color: var(--t-text); font: 600 0.78rem var(--font-mono); cursor: pointer; }
.bx-chip:hover { border-color: var(--t-dim); }
.bx-chip[aria-pressed="true"] { background: var(--t-green); color: #04130b; border-color: var(--t-green); }
.bx-chip:focus-visible { outline: 2px solid var(--t-cyan); outline-offset: 2px; }
@media (pointer: coarse) { .bx-chip { min-height: 44px; } }
.bx-status { margin: 0 0 var(--sp-1); color: var(--t-dim); font-size: 0.8rem; min-height: 1.2em; }
.bx-group { margin-bottom: var(--sp-3); }
.bx-h { margin: 0 0 var(--sp-1); font: 600 0.95rem var(--font-mono); color: var(--t-cyan); letter-spacing: 0; }
.bx-h-p { color: var(--t-dim); } .bx-count { color: var(--t-dim); font-weight: 400; }
.bx-list { list-style: none; margin: 0; padding: 0; display: grid; }
.bx-row { display: grid; grid-template-columns: 4.2ch minmax(0, 15rem) minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 48px; padding: 8px 10px; border-radius: 8px; color: var(--t-text); text-decoration: none; border-left: 2px solid transparent; }
.bx-row:hover, .bx-row:focus-visible, .bx-li.is-cur .bx-row { background: #0f2a20; border-left-color: var(--t-green); }
.bx-row:focus-visible { outline: 2px solid var(--t-cyan); outline-offset: -2px; }
.bx-mode { color: var(--t-dim); font-size: 0.8rem; }
.bx-name { color: var(--t-green); font-weight: 600; }
.bx-d { color: #b4c3d1; font: 0.88rem/1.4 var(--font-body); }
.bx-go { color: var(--t-dim); display: inline-flex; }
.bx-row:hover .bx-go, .bx-row:focus-visible .bx-go { color: var(--t-green); }
.bx-empty { color: var(--t-amber); font-size: 0.9rem; }
.bx-preview { padding: var(--sp-3); border-left: 1px solid #243140; background: var(--s-panel, #101820); align-self: stretch; display: none; }
html.am-js .bx-preview { display: block; }
.bx-pv-k { margin: 0; color: var(--t-dim); font: 600 0.72rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.bx-pv-t { margin: 6px 0 var(--sp-1); color: var(--t-green); font: 600 1.05rem var(--font-mono); }
.bx-pv-svg { width: 100%; height: auto; display: block; background: radial-gradient(circle at 1px 1px, #1a2634 1px, transparent 0) 0 0 / 18px 18px; border: 1px solid #243140; border-radius: 10px; }
.bx-pv-d { margin: var(--sp-1) 0; color: #c4d0dc; font: 0.9rem/1.45 var(--font-body); }
.bx-pv-h { margin: 0; color: var(--t-dim); font-size: 0.75rem; }
.bx-body .sim-edge { stroke-width: 3; } .bx-body .sim-box { fill: #101820; stroke: #34465a; } .bx-body .sim-node.is-done .sim-box { stroke: var(--t-green); }
.bx-body .sim-label { font-size: 13px; fill: var(--t-text); }
@media (max-width: 1000px) {
  .bx-body { grid-template-columns: minmax(0, 1fr); }
  .bx-preview { display: none !important; }
}
@media (max-width: 720px) {
  .bx-left { padding: var(--sp-2); }
  .bx-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .bx-mode { display: none; }
  .bx-d { grid-column: 1 / -1; grid-row: 2; }
  .bx-go { grid-row: 1; grid-column: 2; }
  .bx-ps { font-size: 0.8rem; }
}
.sim-mini .sim-label, .sim-mini .sim-sub, .sim-mini .sim-elabel { display: none; }
.sim-mini .sim-ic { opacity: 0.9; }
.bx-preview { align-self: start; position: sticky; top: 84px; margin: var(--sp-3); border: 1px solid #243140; border-radius: var(--r-2); }