/* Scoped operating visuals. The generator chooses placement and loads this asset.
   White, black and amber only. These tokens are defined here so the figures do not depend on the page. */
.operating-visual {
  --ov-ink: #15181E;
  --ov-muted: #5B6068;
  --ov-paper: #FFFFFF;
  --ov-white: #FFFFFF;
  --ov-amber: #EAA544;
  --ov-moss: #9C590A;
  --ov-line: #DDE0E3;
  --ov-label-col: 19%;
  box-sizing: border-box;
  margin: 2.5rem 0;
  color: var(--ov-ink);
  background: var(--ov-paper);
  border: 1px solid #DDE0E3;
  font-size: 16px;
  line-height: 1.55;
  overflow: hidden;
}

.operating-visual *, .operating-visual *::before, .operating-visual *::after { box-sizing: border-box; }
.operating-visual summary { min-height: 44px; padding: 10px 0; cursor: pointer; }
.operating-visual .ov-header { padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 4vw, 3rem) 1rem; border-block-end: 1px solid color-mix(in srgb, var(--ov-ink) 16%, transparent); }
.operating-visual .ov-eyebrow, .operating-visual .ov-label { margin: 0 0 .45rem; color: var(--ov-moss); font-size: 13px; font-weight: 700; letter-spacing: .075em; line-height: 1.25; text-transform: uppercase; }
.operating-visual .ov-title { max-width: 32ch; margin: 0; color: var(--ov-ink); font-size: clamp(1.35rem, 2.3vw, 2rem); font-weight: 650; letter-spacing: -.025em; line-height: 1.15; }
.operating-visual .ov-body { padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 4vw, 3rem); }
.operating-visual .ov-caption { padding: .85rem clamp(1.25rem, 4vw, 3rem); color: var(--ov-muted); border-block-start: 1px solid color-mix(in srgb, var(--ov-ink) 16%, transparent); font-size: 14px; line-height: 1.45; }
.operating-visual h4 { margin: 0 0 .45rem; color: var(--ov-ink); font-size: 1rem; line-height: 1.3; }
.operating-visual p { max-width: 68ch; margin: 0; overflow-wrap: anywhere; }

.operating-visual .ov-table { width: 100%; border-top: 2px solid var(--ov-amber); border-collapse: collapse; border-spacing: 0; table-layout: fixed; }
.operating-visual .ov-table th { padding: .75rem 1rem .75rem 0; color: var(--ov-muted); font-size: 13px; font-weight: 700; letter-spacing: .035em; line-height: 1.3; text-align: left; vertical-align: bottom; }
.operating-visual .ov-table td { padding: 1rem 1rem 1rem 0; border-top: 1px solid var(--ov-line); overflow-wrap: anywhere; vertical-align: top; }
.operating-visual .ov-table strong { display: block; margin-bottom: .35rem; font-size: 1rem; line-height: 1.3; }
.operating-visual .ov-table span { color: var(--ov-muted); }
.operating-visual .ov-example { display: grid; grid-template-columns: var(--ov-label-col) minmax(0, 1fr); gap: 1rem 0; margin-top: 1.5rem; padding: 1.2rem 0 0; border-top: 1px solid var(--ov-line); }
.operating-visual .ov-example .ov-label { margin: .15rem 0 0; }
.operating-visual .ov-proof-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.operating-visual .ov-proof-rail li { padding: .75rem 0 .1rem; border-top: 1px solid var(--ov-amber); color: var(--ov-muted); font-size: 13px; font-weight: 700; }

.operating-visual .ov-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.operating-visual .ov-pane { padding-inline-start: 1rem; border-inline-start: 3px solid var(--ov-amber); }
.operating-visual .ov-plain-list { margin: 1rem 0 0; padding: 0; list-style: none; }
.operating-visual .ov-plain-list li { padding: .55rem 0; border-top: 1px solid color-mix(in srgb, var(--ov-ink) 14%, transparent); overflow-wrap: anywhere; }
.operating-visual .ov-table-reconcile { margin-top: 2rem; }
.operating-visual .ov-table-reconcile th:last-child, .operating-visual .ov-table-reconcile td:last-child { padding-right: 0; }

.operating-visual .ov-sequence { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.operating-visual .ov-sequence li { min-width: 0; padding-top: .75rem; border-top: 2px solid var(--ov-amber); }
.operating-visual .ov-step-number { display: block; margin-bottom: .85rem; color: var(--ov-muted); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.operating-visual .ov-sequence p { color: var(--ov-muted); }
.operating-visual .ov-details { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--ov-ink) 20%, transparent); }
.operating-visual .ov-details summary { width: fit-content; color: var(--ov-ink); cursor: pointer; font-weight: 700; }
.operating-visual .ov-details summary:focus-visible { outline: 2px solid var(--ov-amber); outline-offset: 3px; }
.operating-visual .ov-details p { margin-top: .7rem; color: var(--ov-muted); }

.operating-visual .ov-pilot-stages { display: grid; grid-template-columns: 1fr minmax(13rem, .8fr) 1fr; gap: 1rem; align-items: stretch; }
.operating-visual .ov-stage { padding: 1.1rem 1.1rem 1.3rem; border-top: 3px solid var(--ov-amber); background: color-mix(in srgb, var(--ov-white) 82%, transparent); }
.operating-visual .ov-stage--acceptance { border-top-color: var(--ov-ink); background: var(--ov-white); }
.operating-visual .ov-stage p:last-child { color: var(--ov-muted); }

.operating-visual .ov-table-ledger th:last-child, .operating-visual .ov-table-ledger td:last-child { padding-right: 0; }
.operating-visual .ov-note { margin-top: 1.25rem; padding-inline-start: 1rem; border-inline-start: 3px solid var(--ov-amber); color: var(--ov-muted); }

@media (max-width: 767px) {
  .operating-visual { margin: 2rem 0; }
  .operating-visual .ov-split, .operating-visual .ov-pilot-stages, .operating-visual .ov-sequence, .operating-visual .ov-proof-rail, .operating-visual .ov-example { display: grid; grid-template-columns: 1fr; }
  .operating-visual .ov-sequence { gap: .9rem; }
  .operating-visual .ov-sequence li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: .75rem; }
  .operating-visual .ov-step-number { margin: .1rem 0 0; }
  .operating-visual .ov-proof-rail { gap: 0; }
  .operating-visual .ov-proof-rail li { padding: .6rem 0; }
  .operating-visual .ov-table, .operating-visual .ov-table tbody, .operating-visual .ov-table tr, .operating-visual .ov-table td { display: block; width: 100%; }
  .operating-visual .ov-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .operating-visual .ov-table td { min-width: 0; padding: .45rem 0; border-top: 0; }
  .operating-visual .ov-table td:first-child { padding-top: .95rem; border-top: 1px solid var(--ov-line); }
  .operating-visual .ov-table tbody tr:first-child td:first-child { border-top: 0; }
  .operating-visual .ov-table td:last-child { padding-bottom: .95rem; }
  .operating-visual .ov-table td::before { display: block; margin-bottom: .35rem; color: var(--ov-moss); content: attr(data-label); font-size: 13px; font-weight: 700; letter-spacing: .04em; line-height: 1.3; }
  .operating-visual .ov-table-reconcile, .operating-visual .ov-table-ledger { margin-top: 1.5rem; }
  .operating-visual .ov-example { gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) { .operating-visual * { scroll-behavior: auto; transition-duration: 0.01ms !important; } }
.operating-visual .ov-case-input { display: grid; grid-template-columns: var(--ov-label-col) minmax(0, 1fr); column-gap: 0; row-gap: .45rem; padding: 0; background: var(--ov-white); }
.operating-visual .ov-case-input .ov-label { grid-row: span 2; margin: .15rem 0 0; }
.operating-visual .ov-case-input p + p { grid-column: 2; color: var(--ov-muted); }
.operating-visual .ov-case-input span { color: var(--ov-muted); font-size: 14px; }
.operating-visual .ov-table-lanes { margin-top: 1.5rem; }
.operating-visual .ov-table-lanes th:first-child { width: var(--ov-label-col); }
.operating-visual .ov-table-lanes th:nth-child(2) { width: 40%; }
.operating-visual .ov-receipt { display: grid; grid-template-columns: var(--ov-label-col) minmax(0, 1fr); gap: 1rem 0; margin-top: 0; padding: 1rem 0 0; border-top: 1px solid var(--ov-line); }
.operating-visual .ov-receipt .ov-label { margin: .15rem 0 0; }

@media (max-width: 767px) {
  .operating-visual .ov-case-input, .operating-visual .ov-receipt { display: block; }
  .operating-visual .ov-case-input .ov-label, .operating-visual .ov-receipt .ov-label { margin-bottom: .65rem; }
  .operating-visual .ov-case-input p + p { margin-top: .45rem; }
}