/* Instance diagram of a use case: one row per actuality, read from the sensor to the state. */
.instance-diagram {
  --idg-sensor: #ef6fe0; --idg-asset: #5b9bdf; --idg-potential: #f6e73f; --idg-risk: #f6a13a; --idg-actuality: #ee3b3b; --idg-person: #7fbf6a;
  --idg-ink: #1b1f24; --idg-edge: #aab5c0; --idg-generates: #b896f0; --idg-susceptible: #6fce7a; --idg-creates: #ff7b7b; --idg-write: #f5a94c;
  --idg-write-hl: #5b3d14; --idg-read-hl: #203a5c;
  margin: 0 auto; padding: 1.5rem clamp(1rem, 3vw, 2.5rem); max-width: 1500px;
}
.instance-diagram h2 { margin: 0 0 .4rem; }
.instance-diagram > p { margin: 0 0 .9rem; max-width: 75ch; color: var(--muted); }
.idg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-bottom: .6rem; }
.idg-bar button { padding: .3rem .7rem; border: 1px solid var(--line); background: var(--surface2); border-radius: 4px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.idg-views { display: inline-flex; gap: .3rem; }
.idg-bar button[aria-pressed="true"] { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.idg-bar button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.idg-level { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.idg-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; font-size: .78rem; color: var(--muted); }
.idg-legend i { display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; border: 1px solid #0006; }
.idg-legend svg { vertical-align: middle; margin-right: 4px; }
.idg-legend .idg-sensor { background: var(--idg-sensor); } .idg-legend .idg-asset { background: var(--idg-asset); } .idg-legend .idg-potential { background: var(--idg-potential); }
.idg-legend .idg-risk { background: var(--idg-risk); } .idg-legend .idg-actuality { background: var(--idg-actuality); } .idg-legend .idg-person { background: var(--idg-person); }
.idg-viewport { overflow: auto; height: min(82vh, 1000px); border: 1px solid var(--line); background: var(--bg); }
.idg-sizer { position: relative; }
.idg-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; width: 3010px; padding: 18px; display: grid; align-items: start; column-gap: 40px;
  grid-template-columns: 215px 250px 330px 170px 500px 225px 500px 195px 300px; font: 12.5px/1.35 Inter, "Segoe UI", Arial, sans-serif; }
.idg-canvas > * { position: relative; z-index: 1; }
.idg-canvas svg.idg-wires { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; overflow: visible; }
.idg-wlabel { font: 600 12px Inter, "Segoe UI", Arial, sans-serif; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
.idg-head { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-bottom: 8px; }
.idg-chain { font-size: 17px; font-weight: 700; border-top: 2px solid var(--line); padding-top: 8px; margin-top: 16px; }
.idg-chain small { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.idg-canvas > .idg-panel { align-self: stretch; margin: 0 -14px; background: #24382a; border: 2px solid var(--idg-person); z-index: 0; }
.idg-stack { display: grid; gap: 10px; margin-top: 38px; }
.idg-node { color: var(--idg-ink); border: 1px solid #0006; padding: 9px 11px; margin-top: 38px; box-shadow: 2px 2px 0 #0003; }
.idg-stack .idg-node { margin-top: 0; }
.idg-node b { display: block; font-size: 14.5px; line-height: 1.2; }
.idg-tag { display: block; margin-bottom: 4px; font: 11.5px Consolas, Menlo, monospace; opacity: .85; }
.idg-line { display: block; margin-top: 3px; }
.idg-node.idg-sensor { background: var(--idg-sensor); } .idg-node.idg-asset { background: var(--idg-asset); } .idg-node.idg-potential { background: var(--idg-potential); }
.idg-node.idg-risk { background: var(--idg-risk); } .idg-node.idg-actuality { background: var(--idg-actuality); color: #fff; }
.idg-node.idg-person { background: var(--idg-person); margin: 0 -14px 0 0; }
.idg-person .idg-line { display: inline-block; margin-right: 24px; }
.idg-states { display: grid; gap: 3px; margin-top: 6px; padding-top: 5px; border-top: 1px solid #0005; }
.idg-states b { display: inline; font-size: 12.5px; }
.idg-states code { display: block; font: 11px Consolas, Menlo, monospace; overflow-wrap: anywhere; }
.idg-canvas.idg-short { width: 2561px; grid-template-columns: 215px 250px 250px 170px 300px 225px 300px 195px 300px; }
.idg-cond { min-width: 0; margin-top: 38px; border: 1px solid var(--line); background: var(--surface); }
.idg-cond h4 { margin: 0; padding: 5px 8px; font-size: 12.5px; font-weight: 600; color: #14181d; }
.idg-gen h4 { background: var(--idg-generates); } .idg-sus h4 { background: var(--idg-susceptible); } .idg-cre h4 { background: var(--idg-creates); } .idg-cep h4 { background: var(--idg-edge); }
.idg-cond pre { margin: 0; padding: 7px 8px; font: 11.5px/1.42 Consolas, Menlo, monospace; color: var(--text); background: none; border: 0; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.idg-cond table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.idg-cond td, .idg-cond th { padding: 3px 8px; border-top: 1px solid var(--line); text-align: left; }
mark.idg-w { background: var(--idg-write-hl); color: inherit; } mark.idg-r { background: var(--idg-read-hl); color: inherit; }
.idg-kw { color: var(--idg-generates); font-weight: 600; }
.idg-state { margin-top: 38px; padding: 8px 10px; border: 2px solid var(--idg-person); background: var(--surface); font-size: 12px; }
.idg-state b { display: block; font-size: 15px; }
.idg-state code { display: block; margin-top: 3px; font: 11px Consolas, Menlo, monospace; overflow-wrap: anywhere; }
.idg-prio { float: right; font: 600 11px Consolas, Menlo, monospace; color: var(--muted); }
.idg-muted { color: var(--muted); }