/* Scale Model — css/sim.css
   The simulator diagram (SM.diagram): boxes, wires, request shapes, strips, inspector.
   Styled only through the design tokens of css/app.css, so a theme switch needs no redraw.
   Every class is prefixed .smd- and nothing here styles anything outside .smd.
   Fallbacks after the comma keep the standalone demo page (tools/sim-demo.html) working. */

.smd {
  --smd-line: var(--line-strong, var(--ink-2));
  --smd-mono: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  --smd-display: var(--font-display, "Archivo", "Helvetica Neue", Arial, sans-serif);
  --smd-body: var(--font-body, "IBM Plex Sans", system-ui, sans-serif);
  --smd-ok-soft: var(--ok-soft, color-mix(in oklab, var(--ok) 12%, var(--surface)));
  --smd-slow-soft: var(--slow-soft, color-mix(in oklab, var(--slow) 12%, var(--surface)));
  --smd-fail-soft: var(--fail-soft, color-mix(in oklab, var(--fail) 12%, var(--surface)));
  --smd-accent-soft: var(--accent-soft, color-mix(in oklab, var(--accent) 10%, var(--surface)));
  display: block;
  position: relative;
  min-width: 0;
  max-width: 100%;
  color: var(--ink);
  font-family: var(--smd-body);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius, 2px);
}
.smd *, .smd *::before, .smd *::after { box-sizing: border-box; }
.smd--bare { border: 0; background: transparent; }

/* ---- the drawing ------------------------------------------------------- */

.smd-stage {
  position: relative;
  min-width: 0;
  overflow: hidden;
  /* faint drafting grid behind the schematic */
  background-image:
    linear-gradient(var(--grid, color-mix(in oklab, var(--line) 38%, transparent)) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid, color-mix(in oklab, var(--line) 38%, transparent)) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}
.smd--sketch .smd-stage, .smd--bare .smd-stage { background-image: none; }
.smd-svg { display: block; margin: 0 auto; max-width: 100%; height: auto; overflow: visible; }

.smd-wire { fill: none; stroke: var(--smd-line); stroke-width: 1; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.smd-wire--replication, .smd-wire--consume { stroke-dasharray: 4 3; }
.smd-wire.is-failing { stroke: var(--fail); }
.smd-wire.is-idle { stroke: var(--line); }
.smd-arrow { fill: none; stroke: var(--smd-line); stroke-width: 1.2; stroke-linecap: square; }
.smd-arrow.is-failing { stroke: var(--fail); }
.smd-wire-label { font: 500 10px/1 var(--smd-mono); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.smd-wire-label-bg { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.smd-wire-label.is-failing { fill: var(--fail); }

.smd-node { cursor: default; }
.smd--interactive .smd-node { cursor: pointer; }
.smd-node:focus { outline: none; }
.smd-node__box { fill: var(--surface); stroke: var(--ink); stroke-width: 1.25; }
.smd-node__focus { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; }
.smd-node:focus-visible .smd-node__focus, .smd-node.is-selected .smd-node__focus, .smd-node.is-active .smd-node__focus { opacity: 1; }
.smd--interactive .smd-node:hover .smd-node__box { fill: var(--surface-2); }
.smd-node__hatch { fill: url(#smd-hatch); stroke: none; opacity: 0; pointer-events: none; }
.smd-hatch-line { stroke: var(--fail); stroke-width: 1.2; opacity: 0.55; }
.smd-node__label { font: 600 12.5px/1 var(--smd-display); fill: var(--ink); }
.smd-node__sub { font: 500 9.5px/1 var(--smd-mono); fill: var(--ink-2); letter-spacing: 0.05em; text-transform: uppercase; }
.smd-node__pct { font: 500 9.5px/1 var(--smd-mono); fill: var(--ink-2); text-anchor: end; }
.smd-node__chip { fill: none; stroke: none; }
.smd-node__stats {
  font: 500 10.5px/1 var(--smd-mono); fill: var(--ink); text-anchor: middle;
  /* a halo so the numbers stay readable where a wire passes behind them */
  paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round;
}
.smd-node__note { font: 500 10px/1.2 var(--smd-mono); fill: var(--accent); text-anchor: middle; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.smd-node__badge-bg { fill: var(--accent); }
.smd-node__badge { font: 600 9px/1 var(--smd-mono); fill: var(--on-accent); letter-spacing: 0.06em; text-anchor: middle; }
.smd-glyph { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: square; stroke-linejoin: miter; }
.smd-glyph .f { fill: var(--ink); stroke: none; }
.smd-node__bar-track { fill: var(--surface-2); stroke: none; }
.smd-node__bar { fill: var(--ink-2); }
.smd-node__qcell { fill: var(--surface-2); stroke: none; }
.smd-node__qcell.is-on { fill: var(--ink-2); }

/* states: always a label as well as a colour */
.smd-node.is-busy .smd-node__bar { fill: var(--slow); }
.smd-node.is-busy .smd-node__sub { fill: var(--slow); }
.smd-node.is-overloaded .smd-node__box { stroke: var(--fail); stroke-width: 2; fill: var(--smd-fail-soft); }
.smd-node.is-overloaded .smd-node__bar, .smd-node.is-overloaded .smd-node__qcell.is-on { fill: var(--fail); }
.smd-node.is-overloaded .smd-node__chip, .smd-node.is-down .smd-node__chip { fill: var(--fail); }
.smd-node.is-overloaded .smd-node__sub, .smd-node.is-down .smd-node__sub { fill: var(--surface); font-weight: 600; }
.smd-node.is-limiting .smd-node__sub { fill: var(--slow); }
.smd-node.is-limiting .smd-node__box { stroke: var(--slow); stroke-width: 2; }
.smd-node.is-down .smd-node__box { stroke: var(--fail); stroke-width: 1.5; stroke-dasharray: 5 3; fill: var(--surface); }
.smd-node.is-down .smd-node__hatch { opacity: 1; }
.smd-node.is-down .smd-glyph, .smd-node.is-down .smd-node__label { opacity: 0.45; }
.smd-node.is-down .smd-node__bar, .smd-node.is-down .smd-node__qcell.is-on { fill: var(--line); }
.smd-node.is-down .smd-node__stats { fill: var(--fail); }
.smd-node.is-dim { opacity: 0.38; }
.smd-node.is-highlight .smd-node__box { stroke: var(--accent); stroke-width: 2.25; fill: var(--smd-accent-soft); }
.smd-node.is-active .smd-node__box { fill: var(--smd-accent-soft); }

/* request shapes: ok = round dot, slow = diamond, failed = cross, from cache = ring */
.smd-dot { pointer-events: none; }
.smd-dot--ok { fill: var(--ok); stroke: none; }
.smd-dot--slow { fill: var(--slow); stroke: none; }
.smd-dot--failed { fill: none; stroke: var(--fail); stroke-width: 2.2; stroke-linecap: square; }
.smd-dot--cached { fill: var(--surface); stroke: var(--cached); stroke-width: 1.9; }
.smd-probe { fill: var(--accent); stroke: var(--surface); stroke-width: 2; pointer-events: none; }
.smd-probe.is-failed { fill: var(--fail); }
.smd-probe-label { font: 600 11px/1 var(--smd-mono); fill: var(--ink); text-anchor: middle; pointer-events: none; }
.smd-probe-label-bg { fill: var(--surface); stroke: var(--accent); stroke-width: 1; pointer-events: none; }

/* ---- strips: controls, stats, legend ------------------------------------- */

.smd-controls, .smd-statsbar, .smd-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 8px 12px; min-width: 0;
}
.smd-controls { border-bottom: 1px solid var(--line); }
.smd-statsbar { border-top: 1px solid var(--line); gap: 0; padding: 0; }
.smd-legend { border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2); gap: 6px 16px; }

.smd-btn {
  appearance: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 12px;
  font: 600 13px/1 var(--smd-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--smd-line); border-radius: var(--radius, 2px);
  cursor: pointer;
}
.smd-btn:hover { background: var(--surface-2); }
.smd-btn:focus-visible, .smd-seg__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.smd-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.smd-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.smd-btn--primary:hover { background: var(--accent-hover, var(--accent)); }
.smd-btn--danger { border-color: var(--fail); color: var(--fail); }
.smd-btn svg { width: 12px; height: 12px; fill: currentColor; stroke: none; flex: none; }
.smd-seg { display: inline-flex; border: 1px solid var(--smd-line); border-radius: var(--radius, 2px); }
.smd-seg__btn {
  appearance: none; min-height: 32px; min-width: 36px; padding: 0 8px;
  font: 500 12px/1 var(--smd-mono); color: var(--ink-2);
  background: var(--surface); border: 0; border-left: 1px solid var(--smd-line); cursor: pointer;
}
.smd-seg__btn:first-child { border-left: 0; }
.smd-seg__btn[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.smd-clock { margin-left: auto; font: 500 12px/1 var(--smd-mono); color: var(--ink-2); white-space: nowrap; }
.smd-seg-label { font-size: 12px; color: var(--ink-2); }

.smd-stat { flex: 1 1 88px; min-width: 0; padding: 8px 12px; border-left: 1px solid var(--line); margin: 0; }
.smd-stat:first-child { border-left: 0; }
.smd-stat dt { font: 500 10.5px/1.2 var(--smd-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.smd-stat dd { margin: 4px 0 0; font: 500 16px/1.1 var(--smd-mono); color: var(--ink); white-space: nowrap; }
.smd-stat dd small { font-size: 11px; color: var(--ink-2); font-weight: 400; margin-left: 2px; }
.smd-stat.is-bad dd { color: var(--fail); }
.smd-stat.is-bad dt::after { content: " !"; color: var(--fail); font-weight: 700; }

.smd-legend__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.smd-legend__item svg { width: 14px; height: 14px; overflow: visible; flex: none; }
.smd-legend__note { margin-left: auto; font: 500 11px/1.2 var(--smd-mono); }

/* ---- inspector popover ----------------------------------------------------- */

.smd-inspector {
  position: absolute; z-index: 5; width: 232px; max-width: calc(100% - 16px);
  padding: 12px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--radius, 2px);
  box-shadow: var(--shadow-float, 0 10px 28px rgb(0 0 0 / 0.18));
  font-size: 13px;
}
.smd-inspector__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.smd-inspector__title { margin: 0; font: 600 14px/1.2 var(--smd-display); }
.smd-inspector__type { font: 500 10.5px/1 var(--smd-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }
.smd-inspector__state { margin: 6px 0 0; font: 500 12px/1.3 var(--smd-mono); color: var(--ink-2); }
.smd-inspector__state.is-down, .smd-inspector__state.is-overloaded { color: var(--fail); font-weight: 600; }
.smd-inspector__state.is-busy, .smd-inspector__state.is-limiting { color: var(--slow); font-weight: 600; }
.smd-inspector dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 10px 0 0; }
.smd-inspector dt { color: var(--ink-2); }
.smd-inspector dd { margin: 0; font: 500 12.5px/1.3 var(--smd-mono); text-align: right; white-space: nowrap; }
.smd-inspector__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.smd-inspector__close {
  appearance: none; position: absolute; top: 4px; right: 4px; width: 28px; height: 28px;
  background: transparent; border: 0; color: var(--ink-2); cursor: pointer; font: 400 18px/1 var(--smd-body);
}
.smd-inspector__close:hover { color: var(--ink); }
.smd-inspector__close:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.smd-inspector__head { padding-right: 24px; }

.smd-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.smd-empty { padding: 24px 16px; text-align: center; color: var(--ink-2); font-size: 14px; }

@media (max-width: 560px) {
  .smd-controls { padding: 8px; gap: 8px; }
  .smd-stat { flex-basis: 30%; padding: 6px 8px; border-top: 1px solid var(--line); margin-top: -1px; }
  .smd-stat dd { font-size: 14px; }
  .smd-legend { padding: 8px; gap: 6px 12px; }
  .smd-legend__note { margin-left: 0; flex-basis: 100%; }
  .smd-clock { margin-left: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .smd-node__focus { transition: opacity 0.12s; }
}
@media (forced-colors: active) {
  .smd-node__box { stroke: CanvasText; }
  .smd-wire, .smd-arrow { stroke: CanvasText; }
  .smd-dot--ok, .smd-dot--slow { fill: CanvasText; }
}