/* Diagrams take every colour from the theme tokens (assets/v3/tokens.css): --flow-call,
   --flow-data, --flow-return and --flow-resource for moving tokens and routes, --flow-on for
   text on a filled token. */
.diagram-figure {
  min-width: 0;
  max-width: 100%;
  margin: 30px 0;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-case);
  background: var(--card);
  overflow: hidden;
}
.diagram-heading { display: grid; gap: 8px; padding: 18px 20px 15px; border-bottom: 1px solid var(--rule); }
.diagram-title { color: var(--ink); font: 650 25px/1.15 var(--display); font-stretch: var(--display-stretch); text-wrap: balance; }
.diagram-description { color: var(--ink-2); font: 400 15px/1.55 var(--sans); }
.diagram-viewport {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: auto;
  max-height: min(65vh, 700px);
  overscroll-behavior-inline: contain;
  background: var(--paper);
  scrollbar-color: var(--rule-strong) var(--paper-2);
}
.diagram-viewport:focus-visible { outline-offset: -3px; }
/* The whole-diagram view shows every row; the height cap applies while a step follows its token. */
.diagram-figure:not([data-diagram-focused]) .diagram-viewport { max-height: none; }
/* Width (set by diagrams.mjs): a scaled figure fits its box; a wide one breaks out of the column
   over the side rails, which step aside while it is on screen. */
.diagram-figure[data-diagram-fit="scaled"] .diagram-svg { width: 100%; height: auto; }
.diagram-figure[data-diagram-wide] { position: relative; z-index: 3; max-width: none; box-shadow: var(--shadow-pop); }
.lesson-toc, .lesson-rail { transition: opacity .2s, visibility .2s; }
.lesson-layout[data-wide-figure] .lesson-toc, .lesson-layout[data-wide-figure-left] .lesson-rail { opacity: 0; visibility: hidden; }
.diagram-action.diagram-size { font-weight: 500; }
.diagram-action.diagram-size[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.diagram-svg { display: block; max-width: none; margin: 0 auto; }
.diagram-node-card { fill: var(--card); stroke: var(--rule-strong); stroke-width: 1.5; }
.diagram-node-kind { fill: var(--muted); font: 500 12px var(--mono); }
.diagram-node-label { fill: var(--ink); font: 600 17px var(--sans); }
.diagram-node-detail { fill: var(--ink-2); font: 400 14px var(--sans); }
.diagram-node[data-kind="queue"] .diagram-node-card, .diagram-node[data-kind="fifo"] .diagram-node-card { stroke-dasharray: 5 3; }
.diagram-edge-line { fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.diagram-arrow { fill: var(--muted); }
.diagram-edge-label-bg { fill: var(--paper); }
.diagram-edge-text { fill: var(--ink-2); font: 500 13px var(--sans); }
.diagram-figure[data-diagram-focused] .diagram-node:not([data-diagram-active]) .diagram-node-card { fill: var(--paper-2); }
.diagram-node[data-diagram-active] .diagram-node-card { fill: var(--card); stroke: var(--flow-call); stroke-width: 1.8; }
.diagram-edge[data-diagram-active] .diagram-edge-line { stroke: var(--rule-strong); stroke-width: 2.2; }
.diagram-edge[data-diagram-active] .diagram-arrow { fill: var(--rule-strong); }
.diagram-edge-label[data-diagram-active] .diagram-edge-text { fill: var(--ink); font-weight: 600; }
.diagram-controls { padding: 14px 18px 10px; border-bottom: 1px solid var(--rule); }
.diagram-controls[hidden], .diagram-status[hidden], .diagram-step-explanation[hidden] { display: none; }
.diagram-step-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 5px;
  background: var(--card);
  color: var(--ink);
  font: 500 14px/1.35 var(--sans);
  text-align: left;
  cursor: pointer;
}
.diagram-step-button:hover { background: var(--paper-2); }
.diagram-step-button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); font-weight: 700; }
.diagram-step-number { display: inline-grid; place-items: center; min-width: 21px; height: 21px; border: 1px solid currentColor; border-radius: 50%; font: 500 12px/1 var(--mono); flex-shrink: 0; }
.diagram-status { margin: 9px 0 0; color: var(--muted); font: 400 13px/1.5 var(--sans); }
.diagram-step-list { margin: 0; padding: 16px 22px 10px 42px; color: var(--ink); font: 400 15px/1.55 var(--sans); }
.diagram-step-explanation { padding: 0 0 12px 3px; }
.diagram-step-explanation::marker { color: var(--accent); font: 600 12px var(--mono); }
.diagram-step-explanation p { margin: 4px 0 0; }
.diagram-figure[data-diagram-focused] .diagram-step-list { list-style: none; padding-left: 0; }
.diagram-text { border-top: 1px solid var(--rule); padding: 12px 20px; color: var(--ink-2); font: 400 14px/1.55 var(--sans); }
.diagram-text summary { cursor: pointer; font-weight: 600; min-height: 24px; }
.diagram-text ul { margin: 12px 0 8px; padding-left: 20px; }
.diagram-text li + li { margin-top: 6px; }
.diagram-caption { border-top: 1px solid var(--rule); margin: 0; padding: 12px 20px; color: var(--muted); font: 400 14px/1.55 var(--sans); }
@media (max-width: 520px) {
  .diagram-heading { padding: 15px; }
  .diagram-controls { padding: 12px 12px 8px; }
  .diagram-step-button { flex: 1 1 150px; justify-content: flex-start; }
  .diagram-text, .diagram-caption { padding-left: 15px; padding-right: 15px; }
}
@media (forced-colors: active) {
  .diagram-node-card, .diagram-edge-label-bg { fill: Canvas; }
  .diagram-node-card, .diagram-edge-line { stroke: CanvasText; }
  .diagram-node[data-diagram-active] .diagram-node-card, .diagram-edge[data-diagram-active] .diagram-edge-line { stroke: Highlight; }
  .diagram-arrow { fill: CanvasText; }
  .diagram-edge[data-diagram-active] .diagram-arrow { fill: Highlight; }
}
.lesson-detail {
  margin: 20px 0;
  border-block: 1px solid var(--rule);
}
.lesson-detail > summary {
  padding: 16px 6px;
  color: var(--ink-2);
  font-weight: 600;
  cursor: pointer;
}
.lesson-detail > summary:hover { color: var(--accent); }
.lesson-detail-body { padding: 0 6px 10px; }
.lesson-detail-body > :first-child { margin-top: 0; }
.lesson-detail[data-supporting-file] pre.code { max-height: 26rem; overflow: auto; }

/* A breakpoint is a transaction journey, with its explanation outside the routes. */
.diagram-stage { position: relative; }
.diagram-transport, .diagram-breakpoints { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.diagram-breakpoints { margin-top: 12px; align-items: stretch; }
.diagram-action { min-height: 42px; padding: 8px 13px; border: 1px solid var(--rule-strong); border-radius: 5px; background: var(--card); color: var(--ink); font: 600 14px var(--sans); cursor: pointer; }
.diagram-action[data-diagram-action="play"] { background: var(--ink); color: var(--card); }
.diagram-action:hover { border-color: var(--accent); }
.diagram-action:disabled { opacity: .4; cursor: default; }
.diagram-action:focus-visible, .diagram-step-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.diagram-time { flex: 1 1 150px; text-align: right; color: var(--ink-2); font: 400 13px var(--sans); }
.diagram-breakpoints .diagram-step-button { font-size: 13px; min-height: 38px; }
.diagram-note { position: relative; z-index: 2; padding: 0 20px; background: var(--card); border-top: 1px solid var(--rule); }
.diagram-figure[data-diagram-focused] .diagram-note { margin: 24px 16px 16px; padding: 14px 16px 4px; border: 1px solid var(--rule-strong); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; }
.diagram-note-anchor { display: block; margin-bottom: 7px; color: var(--accent); font: 600 13px var(--sans); }
.diagram-note .diagram-step-list { padding-top: 6px; }
.diagram-note-connector { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.diagram-note-connector path { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 3 4; opacity: .65; }
.diagram-label-leader { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 2 3; opacity: .8; }
.diagram-label-junction { fill: var(--muted); }
.diagram-wait-dot { display: none; fill: var(--card); stroke: var(--accent); stroke-width: 3; }
.diagram-node[data-diagram-waiting] .diagram-wait-dot { display: block; }
.diagram-waits { margin: 3px 0 12px; padding: 10px 12px 10px 28px; border-top: 1px solid var(--rule); color: var(--ink-2); font: 400 13px/1.55 var(--sans); }
.diagram-move-list { margin-top: 10px; font: 400 13px/1.5 var(--sans); color: var(--ink-2); }
.diagram-move-list summary { cursor: pointer; min-height: 26px; }
.diagram-move-list ol { padding-left: 20px; margin: 6px 0 0; }
.diagram-move-list li + li { margin-top: 5px; }
.diagram-move-key { display: inline-block; min-width: 42px; font-weight: 600; }
.diagram-move-call { text-decoration: underline dashed; text-underline-offset: 3px; }
.diagram-move-return { font-style: italic; }
/* Call outline, payload fill and return capsule remain distinct without color. */
.diagram-token { --token-ink: var(--flow-data); pointer-events: none; }
.diagram-token-call { --token-ink: var(--flow-call); }
.diagram-token-return { --token-ink: var(--flow-return); }
.diagram-token[data-tone="resource"] { --token-ink: var(--flow-resource); }
.diagram-token rect { fill: var(--token-ink); stroke: var(--card); stroke-width: 2; }
.diagram-token text { fill: var(--flow-on); font: 600 12px var(--sans); }
.diagram-token-call rect { fill: var(--card); stroke: var(--token-ink); stroke-width: 2; stroke-dasharray: 5 3; }
.diagram-token-return rect { fill: var(--card); stroke: var(--token-ink); stroke-width: 2; }
.diagram-token-call text, .diagram-token-return text { fill: var(--token-ink); }
.diagram-token-landing { fill: var(--token-ink); stroke: var(--card); stroke-width: 1; }
.diagram-token-link { fill: none; stroke: var(--token-ink); stroke-width: 1.5; }
.diagram-token[data-completed-call] { opacity: .45; }
.diagram-edge[data-diagram-running] .diagram-edge-line { stroke: var(--flow-data); stroke-width: 3; }
.diagram-edge[data-diagram-running="call"] .diagram-edge-line { stroke: var(--flow-call); stroke-dasharray: 7 4; }
.diagram-edge[data-diagram-running="return"] .diagram-edge-line { stroke: var(--flow-return); stroke-dasharray: 3 3; }
.diagram-edge[data-diagram-running] .diagram-arrow { opacity: 0; }
.diagram-node[data-diagram-arriving="call"] .diagram-node-card { stroke: var(--flow-call); stroke-width: 2.5; }
.diagram-node[data-diagram-arriving="data"] .diagram-node-card { stroke: var(--flow-data); stroke-width: 2.5; }
.diagram-node[data-diagram-arriving="return"] .diagram-node-card { stroke: var(--flow-return); stroke-width: 2.5; }
.diagram-figure [hidden] { display: none; }
@media (max-width: 520px) {
  .diagram-transport { gap: 5px; }
  .diagram-action { padding-inline: 10px; }
  .diagram-time { flex-basis: 100%; text-align: left; margin-top: 3px; }
  .diagram-breakpoints .diagram-step-button { flex: 1 1 140px; }
  .diagram-figure[data-diagram-focused] .diagram-note { margin-inline: 10px; padding-inline: 12px; }
}
@media (forced-colors: active) {
  .diagram-figure .diagram-token[data-tone] { --token-ink: Highlight; }
  .diagram-token text, .diagram-token .diagram-token-label { fill: CanvasText; stroke: Canvas; }
  .diagram-note-connector path { stroke: Highlight; }
}
@media (prefers-reduced-motion: reduce) { .diagram-token, .diagram-node { animation: none; transition: none; } }
.diagram-breakpoints { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 7px; scrollbar-width: thin; }
.diagram-breakpoints .diagram-step-button { flex: 0 0 auto; max-width: 230px; }
.diagram-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; color: var(--ink-2); font: 400 12px var(--sans); }
.diagram-legend span { display: inline-flex; gap: 6px; align-items: center; }
.diagram-legend i { display: inline-block; box-sizing: border-box; width: 14px; height: 12px; }
.diagram-key-call { border: 2px dashed currentColor; border-radius: 50%; }
.diagram-key-data { background: currentColor; border-radius: 2px; }
.diagram-key-return { border: 2px solid currentColor; border-radius: 6px; }
.diagram-legend .diagram-key-wait { border: 2px solid var(--accent); border-radius: 50%; width: 11px; height: 11px; }

.diagram-step-time { display: block; margin-top: 3px; color: var(--muted); font: 400 13px var(--sans); }
.diagram-edge[data-diagram-running] { --running-ink: var(--flow-data); }
.diagram-edge[data-diagram-running="call"] { --running-ink: var(--flow-call); }
.diagram-edge[data-diagram-running="return"] { --running-ink: var(--flow-return); }
.diagram-edge[data-diagram-running-tone="resource"] { --running-ink: var(--flow-resource); }
.diagram-edge[data-diagram-running] .diagram-edge-line { stroke: var(--running-ink); }
.diagram-node[data-diagram-arriving-tone="resource"] .diagram-node-card { stroke: var(--flow-resource); }
.diagram-legend .diagram-key-call { color: var(--flow-call); }
.diagram-legend .diagram-key-data { color: var(--flow-data); }
.diagram-legend .diagram-key-return { color: var(--flow-return); }
.diagram-token-data[data-tone="response"] { --token-ink: var(--flow-return); }
.diagram-edge[data-diagram-running-tone="response"] { --running-ink: var(--flow-return); }
.diagram-node[data-diagram-arriving-tone="response"] .diagram-node-card { stroke: var(--flow-return); }
.diagram-figure[data-diagram-focused] .diagram-edge:not([data-diagram-active]),
.diagram-figure[data-diagram-focused] .diagram-edge-label:not([data-diagram-active]) { visibility: hidden; }

/* TLM notation (UVM User's Guide symbols) and arrow meanings. */
.tlm-glyph { stroke: var(--ink); stroke-width: 1.6; fill: var(--card); }
.tlm-imp { fill: var(--ink); }
.tlm-analysis { fill: var(--flow-data); stroke: var(--flow-data); }
.tlm-fifo { fill: var(--paper-2); }
.tlm-fifo-bar { stroke: var(--ink); stroke-width: 1.2; }
.diagram-edge-connect .diagram-edge-line { stroke-dasharray: 2 4; stroke-linecap: round; }
.diagram-edge-call .diagram-edge-line { stroke: var(--flow-call); }
.diagram-edge-call .diagram-arrow { fill: var(--flow-call); }
.diagram-edge-data .diagram-edge-line { stroke: var(--flow-data); stroke-dasharray: 9 5; }
.diagram-edge-data .diagram-arrow { fill: var(--flow-data); }
.tlm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 20px; border-bottom: 1px solid var(--rule); color: var(--ink-2); font: 400 13px/1.4 var(--sans); }
.tlm-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.tlm-key-icon { overflow: visible; }
.tlm-key-line { display: inline-block; width: 26px; height: 0; border-top: 2px solid var(--ink-2); }
.tlm-key-connect { border-top-style: dotted; }
.tlm-key-call { border-top-color: var(--flow-call); }
.tlm-key-data { border-top: 2px dashed var(--flow-data); }
.tlm-layers { display: inline-flex; gap: 6px; margin-left: auto; }
.tlm-layer { font: 500 13px/1 var(--sans); padding: 6px 10px; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--card); color: var(--ink); cursor: pointer; }
.tlm-layer[aria-pressed="true"] { background: var(--ink); color: var(--card); border-color: var(--ink); }
.diagram-figure[data-tlm-show="call"] [data-edge-kind="data"],
.diagram-figure[data-tlm-show="data"] [data-edge-kind="call"] { opacity: .12; }
@media (max-width: 520px) { .tlm-layers { margin-left: 0; } }