/* Naqsha styles. One stylesheet themes the diagram and the surrounding page, in
   dark (default) and light. The diagram rules are scoped to .nq-svg so the same
   look appears in a generated standalone file and in the playground. */

:root {
  --nq-bg: #0f1420;
  --nq-panel: #151d2e;
  --nq-line: #26314a;
  --nq-text: #e8edf6;
  --nq-dim: #93a1ba;
  --nq-node-fill: #182234;
  --nq-node-stroke: #3a5580;
  --nq-node-text: #eaf0f9;
  --nq-edge: #5c6f95;
  --nq-edge-text: #9aa8c4;
  --nq-edge-bg: #131b2b;
  --nq-group-fill: rgba(96,132,220,0.06);
  --nq-group-stroke: rgba(120,150,220,0.28);
  --nq-group-text: #8ea0c4;
  --nq-hot: #5a86ff;
  --nq-hot-2: #3fd6c8;
  --nq-accent: #3fd6c8;
  --nq-added: #46c07a;
  --nq-removed: #e5647d;
  --nq-changed: #e0b13a;
  --nq-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.nq-light {
  --nq-bg: #f6f8fc;
  --nq-panel: #ffffff;
  --nq-line: #dbe3ef;
  --nq-text: #1a2333;
  --nq-dim: #5a6b86;
  --nq-node-fill: #ffffff;
  --nq-node-stroke: #b7c4dc;
  --nq-node-text: #1a2333;
  --nq-edge: #9fb0cc;
  --nq-edge-text: #5a6b86;
  --nq-edge-bg: #ffffff;
  --nq-group-fill: rgba(90,134,255,0.05);
  --nq-group-stroke: rgba(90,134,255,0.26);
  --nq-group-text: #566a8e;
  --nq-hot: #2f6bff;
  --nq-hot-2: #12a594;
  --nq-accent: #12a594;
  --nq-added: #1a9e5f;
  --nq-removed: #d6455f;
  --nq-changed: #b1841a;
  --nq-shadow: 0 1px 2px rgba(20,40,80,0.10);
}

/* ---- the diagram ---- */
.nq-svg { display: block; width: 100%; height: 100%; background: var(--nq-bg); }
.nq-group-box { fill: var(--nq-group-fill); stroke: var(--nq-group-stroke); stroke-dasharray: 5 4; }
.nq-group-label { fill: var(--nq-group-text); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

.nq-edge-path { stroke: var(--nq-edge); stroke-width: 1.6; }
.nq-arrowhead { fill: var(--nq-edge); }
.nq-arrowhead-hot { fill: var(--nq-hot); }
.nq-edge-label text { fill: var(--nq-edge-text); font-size: 11px; }
.nq-edge-label-bg { fill: var(--nq-edge-bg); opacity: .82; }

.nq-shape { fill: var(--nq-node-fill); stroke: var(--nq-node-stroke); stroke-width: 1.5; filter: drop-shadow(var(--nq-shadow)); }
.nq-shape-line { stroke: var(--nq-node-stroke); stroke-width: 1.3; }
.nq-node-label { fill: var(--nq-node-text); font-size: 13px; font-weight: 500; }
.nq-node[data-shape="store"] .nq-shape { stroke: #a78bff; }
.nq-node[data-shape="queue"] .nq-shape { stroke: #3fd6c8; }
.nq-node[data-shape="actor"] .nq-shape { stroke: #5a86ff; }
.nq-node[data-shape="diamond"] .nq-shape { stroke: #ffcb61; }
.nq-node { cursor: pointer; }

/* focus and search states, toggled by the viewer on the svg root */
.nq-svg.nq-focusing .nq-node:not(.nq-hot) { opacity: .22; }
.nq-svg.nq-focusing .nq-edge:not(.nq-hot) { opacity: .12; }
.nq-svg.nq-focusing .nq-group { opacity: .5; }
.nq-node.nq-hot .nq-shape { stroke: var(--nq-hot); stroke-width: 2.2; }
.nq-node.nq-seed .nq-shape { stroke: var(--nq-hot); stroke-width: 2.6; fill: color-mix(in srgb, var(--nq-hot) 14%, var(--nq-node-fill)); }
.nq-edge.nq-hot .nq-edge-path { stroke: var(--nq-hot); stroke-width: 2.4; }

.nq-svg.nq-searching .nq-node:not(.nq-match) { opacity: .18; }
.nq-svg.nq-searching .nq-edge { opacity: .12; }
.nq-node.nq-match .nq-shape { stroke: var(--nq-hot-2); stroke-width: 2.2; }

/* ---- toolbar shared by the standalone file and the playground ---- */
.nq-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; background: var(--nq-panel); border: 1px solid var(--nq-line); border-radius: 10px; }
.nq-toolbar .nq-title { font-weight: 650; color: var(--nq-text); margin-right: 6px; }
.nq-btn { background: transparent; color: var(--nq-text); border: 1px solid var(--nq-line); border-radius: 7px; padding: 5px 10px; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.nq-btn:hover { border-color: var(--nq-accent); }
.nq-search { background: var(--nq-bg); color: var(--nq-text); border: 1px solid var(--nq-line); border-radius: 7px; padding: 5px 10px; font-size: 12.5px; min-width: 150px; font-family: inherit; }
.nq-spacer { flex: 1; }
.nq-hint { color: var(--nq-dim); font-size: 11.5px; }

/* ---- app shell shared by the standalone file and the playground stage ---- */
.nq-app { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.nq-stage { flex: 1; min-height: 0; border: 1px solid var(--nq-line); border-radius: 12px; overflow: hidden; background: var(--nq-bg); }
.nq-stage .nq-svg { height: 100%; }

/* ---- sequence diagrams ---- */
.nq-lifeline { stroke: var(--nq-line); stroke-width: 1.4; stroke-dasharray: 4 5; cursor: pointer; }
.nq-participant { cursor: pointer; }
.nq-pbox { fill: var(--nq-node-fill); stroke: var(--nq-node-stroke); stroke-width: 1.5; filter: drop-shadow(var(--nq-shadow)); }
.nq-plabel { fill: var(--nq-node-text); font-size: 13px; font-weight: 500; }
.nq-msg-path { stroke: var(--nq-edge); stroke-width: 1.7; }
.nq-msg-path.nq-async { stroke-dasharray: 6 4; }
.nq-msg text { fill: var(--nq-edge-text); font-size: 11px; }
.nq-self-label { fill: var(--nq-edge-text); font-size: 11px; }
.nq-msg-bg { fill: var(--nq-edge-bg); opacity: .82; }
.nq-note-box { fill: rgba(90,134,255,0.10); stroke: var(--nq-group-stroke); }
.nq-note text { fill: var(--nq-node-text); font-size: 11px; }

.nq-svg.nq-focusing .nq-participant:not(.nq-hot) { opacity: .24; }
.nq-svg.nq-focusing .nq-lifeline:not(.nq-hot) { opacity: .14; }
.nq-svg.nq-focusing .nq-msg:not(.nq-hot) { opacity: .12; }
.nq-svg.nq-focusing .nq-note { opacity: .3; }
.nq-participant.nq-hot .nq-pbox { stroke: var(--nq-hot); stroke-width: 2.2; }
.nq-participant.nq-seed .nq-pbox { stroke: var(--nq-hot); stroke-width: 2.6; }
.nq-lifeline.nq-hot { stroke: var(--nq-hot); opacity: 1; }
.nq-msg.nq-hot .nq-msg-path { stroke: var(--nq-hot); stroke-width: 2.4; }
.nq-svg.nq-searching .nq-participant:not(.nq-match) { opacity: .18; }
.nq-svg.nq-searching .nq-lifeline { opacity: .14; }
.nq-svg.nq-searching .nq-msg { opacity: .14; }
.nq-participant.nq-match .nq-pbox { stroke: var(--nq-hot-2); stroke-width: 2.2; }

/* ---- state machines ---- */
.nq-initial-dot { fill: var(--nq-edge); }
.nq-final-ring { stroke: var(--nq-node-stroke); fill: none; }
.nq-svg.nq-focusing .nq-initial { opacity: .2; }
.nq-svg.nq-searching .nq-initial { opacity: .2; }

/* ---- before and after diff ---- */
.nq-node[data-status="added"] .nq-shape { stroke: var(--nq-added); }
.nq-node[data-status="changed"] .nq-shape { stroke: var(--nq-changed); }
.nq-node[data-status="removed"] .nq-shape { stroke: var(--nq-removed); stroke-dasharray: 5 4; }
.nq-node[data-status="removed"] { opacity: .6; }
.nq-edge[data-status="added"] .nq-edge-path { stroke: var(--nq-added); }
.nq-edge[data-status="changed"] .nq-edge-path { stroke: var(--nq-changed); }
.nq-edge[data-status="removed"] .nq-edge-path { stroke: var(--nq-removed); }
.nq-edge[data-status="removed"] { opacity: .6; }
.nq-svg.nq-mode-before [data-status="added"] { display: none; }
.nq-svg.nq-mode-after [data-status="removed"] { display: none; }

.nq-legend { display: flex; gap: 12px; align-items: center; }
.nq-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--nq-dim); }
.nq-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; border: 1.5px solid; }
.nq-legend .nq-lg-add { border-color: var(--nq-added); }
.nq-legend .nq-lg-rem { border-color: var(--nq-removed); border-style: dashed; }
.nq-legend .nq-lg-chg { border-color: var(--nq-changed); }
.nq-mode-btn.nq-on { border-color: var(--nq-accent); color: var(--nq-text); }

/* ---- finite motion: a flow toggle animates connections toward their arrowhead ---- */
@keyframes nq-flow-dash { to { stroke-dashoffset: -12; } }
.nq-svg.nq-flow .nq-edge-path,
.nq-svg.nq-flow .nq-msg-path {
  stroke-dasharray: 7 5;
  animation: nq-flow-dash 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .nq-svg.nq-flow .nq-edge-path,
  .nq-svg.nq-flow .nq-msg-path { animation: none; }
}