/* Solid points, external labels and thin edges, following Plain Strategy. */
.risk-visual {
  margin: 30px 0 26px;
  padding: 26px 24px 24px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand);
  background: #fff;
  color: var(--ink);
  line-height: 1.5;
}
.risk-visual figcaption {
  margin-bottom: 24px;
  font-size: 1.375rem;
  line-height: 1.4;
}
.risk-visual svg { display: block; width: 100%; height: auto; }
.diagram-wide { max-width: 800px; margin-inline: auto; }
.diagram-mobile { display: none; max-width: 400px; margin-inline: auto; }
.risk-visual .visual-note, .risk-visual .visual-state-note {
  margin: 18px 0 0;
  font-size: 1rem;
  line-height: 1.6;
}
.risk-visual .visual-state-note { color: var(--brand-strong); }
.risk-visual .visual-note {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.visual-switch { border: 0; margin: 0 0 24px; padding: 0; min-width: 0; }
.visual-switch legend { padding: 0; margin-bottom: 10px; font-size: 1rem; }
.visual-switch-options { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.visual-switch label { position: relative; cursor: pointer; }
.visual-switch input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; margin: 0;
}
.visual-switch label span {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; height: 100%; padding: 10px 3px;
  border-bottom: 3px solid transparent;
  font-size: 1.0625rem; line-height: 1.4; text-align: center;
}
.visual-switch input:checked + span { color: var(--brand-strong); border-bottom-color: var(--brand); }
.visual-switch label:hover span { color: var(--brand-strong); }
.visual-switch input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.visual-interaction:has(input[value="0"]:checked) .state-1,
.visual-interaction:has(input[value="1"]:checked) .state-0 { display: none; }
@media (max-width: 800px) {
  .risk-visual { padding: 22px 16px 20px; }
  .risk-visual figcaption { font-size: 1.25rem; }
  .diagram-wide { display: none; }
  .diagram-mobile { display: block; }
}
@media (max-width: 380px) {
  .risk-visual { margin-inline: -8px; padding-inline: 12px; }
  .visual-switch label { max-width: none; }
}
@media print {
  .risk-visual { break-inside: avoid; margin: 14pt 0; padding: 12pt; border-top-width: 2pt; }
  .risk-visual figcaption { font-size: 12pt; margin-bottom: 12pt; }
  .risk-visual .visual-note, .risk-visual .visual-state-note { font-size: 10pt; margin-top: 8pt; }
  .risk-visual .visual-note { padding-top: 8pt; }
  .visual-switch { display: none; }
  .diagram-mobile { display: none; }
  .diagram-wide { display: block; }
}

/* Keep sequences left to right at every viewport size. */
.semantic-diagram { overflow-x:auto; max-width:800px; margin-inline:auto; }
.semantic-diagram svg { min-width:760px; }
.risk-visual:has(.visual-interaction) .diagram-wide { display:block; overflow-x:auto; }
.risk-visual:has(.visual-interaction) .diagram-wide svg { min-width:760px; }
.risk-visual:has(.visual-interaction) .diagram-mobile { display:none; }
.example-visual-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;margin:24px 0 0;font-size:17px;min-height:44px}
.example-visual-toggle input{width:20px;height:20px;accent-color:var(--brand)}
.example-visual:not(:has(.example-visual-toggle input:checked)) .visual-example-detail,
.example-visual:not(:has(.example-visual-toggle input:checked)) .visual-example-prose,
.example-visual:not(:has(.example-visual-toggle input:checked)) .visual-note,
.example-visual:not(:has(.example-visual-toggle input:checked)) .visual-state-note{visibility:hidden}
.visual-example-prose{margin:8px 0 0}
.example-visual .risk-visual{margin-top:12px}