.operation-flow-page {
  --flow-customer: #765a28;
  --flow-bank: #285d86;
  --flow-certarail: #173f6b;
  --flow-provider: #8a5a0a;
  --flow-backoffice: #655a76;
  --flow-label: 10px;
  --flow-label-strong: 11px;
  --flow-action: 12px;
  --flow-body: 13px;
  max-width: 1680px;
  margin-inline: auto;
  background: var(--bg);
  container-name: operation-flow-page;
  container-type: inline-size;
}
:root[data-theme="dark"] .operation-flow-page {
  --flow-customer: #e2b75f;
  --flow-bank: #78bfff;
  --flow-certarail: #7fb0e6;
  --flow-provider: #f4c86a;
  --flow-backoffice: #c1a7e2;
}

.operation-flow-heading h2 { max-width: 820px; text-wrap: balance; }
.operation-flow-heading > p { max-width: 600px; }

.flow-truth-boundary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--blue) 36%, var(--line));
}
.flow-truth-mark {
  display: grid;
  min-width: 54px;
  min-height: 34px;
  place-items: center;
  color: var(--blue);
  border: 1px solid currentColor;
  font: 750 var(--flow-label) var(--mono);
  letter-spacing: .13em;
}
.flow-truth-boundary p { display: grid; gap: 2px; margin: 0; }
.flow-truth-boundary strong { font-size: var(--flow-body); }
.flow-truth-boundary small { color: var(--muted); font-size: var(--flow-action); }
.flow-truth-boundary > a { min-height: 36px; padding: 9px 11px; color: var(--blue); border: 1px solid var(--line); font: 700 var(--flow-action) var(--mono); }
.flow-truth-boundary > a:hover { border-color: var(--blue); }

.crypto-operation-chain {
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--accent);
}
.crypto-operation-chain > header { padding: 17px 20px; border-bottom: 1px solid var(--line); }
.crypto-operation-chain h3 { margin: 5px 0 0; font-size: clamp(20px, 2.1vw, 30px); letter-spacing: -.04em; }
.crypto-operation-chain ol { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; background: var(--line); list-style: none; }
.crypto-operation-chain li { position: relative; display: grid; min-width: 0; min-height: 146px; align-content: start; gap: 8px; padding: 17px 15px; background: var(--surface); }
.crypto-operation-chain li::after { content: "→"; position: absolute; z-index: 2; top: 20px; right: -7px; color: var(--muted); font: 12px var(--mono); }
.crypto-operation-chain li:last-child::after { display: none; }
.crypto-operation-chain span { color: var(--faint); font: 750 var(--flow-label)/1.4 var(--mono); letter-spacing: .05em; }
.crypto-operation-chain strong { margin-top: 8px; font-size: var(--flow-body); line-height: 1.4; }
.crypto-operation-chain small { color: var(--muted); font-size: var(--flow-label-strong); line-height: 1.5; }
.crypto-operation-chain [data-chain-stage="client"] span { color: var(--flow-customer); }
.crypto-operation-chain [data-chain-stage="bank"] span,
.crypto-operation-chain [data-chain-stage="approval"] span { color: var(--flow-bank); }
.crypto-operation-chain [data-chain-stage="certarail"] span,
.crypto-operation-chain [data-chain-stage="evidence"] span { color: var(--flow-certarail); }
.crypto-operation-chain [data-chain-stage="providers"] { background: color-mix(in srgb, var(--amber) 4%, var(--surface)); }
.crypto-operation-chain [data-chain-stage="providers"] span { color: var(--amber); }

.flow-control-deck {
  display: grid;
  grid-template-columns: minmax(280px, .7fr) minmax(0, 1.7fr);
  gap: 1px;
  margin-bottom: 18px;
  background: var(--line);
  border: 1px solid var(--line);
}
.flow-control-deck fieldset { display: block; min-width: 0; margin: 0; padding: 16px; background: var(--surface); border: 0; }
.flow-control-deck legend { float: left; width: 100%; margin-bottom: 10px; color: var(--faint); font: 700 var(--flow-label) var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.flow-mode-picker { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.flow-mode-picker legend { grid-column: 1 / -1; }
.flow-mode-picker label,
.flow-scenario-options label { position: relative; display: block; cursor: pointer; }
.flow-mode-picker input,
.flow-scenario-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.flow-mode-picker label > span {
  display: grid;
  min-height: 66px;
  align-content: center;
  gap: 3px;
  padding: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.flow-mode-picker b { font-size: var(--flow-action); }
.flow-mode-picker small { color: var(--muted); font-size: var(--flow-label-strong); }
.flow-mode-picker input:checked + span { color: var(--accent); border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.flow-mode-picker input:focus-visible + span,
.flow-scenario-options input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.flow-scenario-options { display: flex; flex-wrap: wrap; gap: 6px; clear: both; }
.flow-scenario-options label > span {
  display: flex;
  min-height: 36px;
  align-items: center;
  padding: 8px 10px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font: 700 var(--flow-label-strong) var(--mono);
}
.flow-scenario-options input:checked + span { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

.flow-case-intro {
  display: grid;
  grid-template-columns: minmax(300px, .8fr) minmax(360px, 1.25fr) auto;
  gap: 22px;
  align-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
}
.flow-case-intro h3 { max-width: 560px; margin: 5px 0 0; font-size: clamp(20px, 2vw, 30px); line-height: 1.05; letter-spacing: -.04em; }
.flow-case-intro > p { margin: 0; color: var(--muted); font-size: var(--flow-body); }
.flow-stop-chip { justify-self: end; padding: 8px 9px; color: var(--amber); border: 1px solid currentColor; font: 750 var(--flow-label) var(--mono); letter-spacing: .07em; white-space: nowrap; }
.flow-stop-chip[data-mode="target"] { color: var(--blue); }

@container operation-flow-page (max-width: 1050px) {
  .flow-case-intro { grid-template-columns: minmax(0, 1fr); }
  .flow-stop-chip {
    min-width: 0;
    max-width: 100%;
    justify-self: start;
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

.flow-human-summary {
  margin: 18px 0 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-strong);
}
.flow-human-summary > header { padding: 18px 20px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.flow-human-summary h3 { margin: 5px 0 0; font-size: clamp(20px, 2.1vw, 30px); letter-spacing: -.04em; }
.flow-human-summary > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.flow-human-summary article { display: grid; min-width: 0; align-content: start; gap: 9px; padding: 19px 20px 21px; background: var(--surface); }
.flow-human-summary article > span { color: var(--accent-text); font: 750 var(--flow-label) var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.flow-human-summary article > strong { font-size: var(--flow-body); line-height: 1.4; }
.flow-human-summary article > p { margin: 0; color: var(--muted); font-size: var(--flow-action); line-height: 1.6; }
.flow-human-summary code { overflow-wrap: anywhere; font: inherit; color: var(--text); }

.flow-api-details { margin-top: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.flow-api-details > summary {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 20px;
  color: var(--text);
  background: var(--surface-2);
  cursor: pointer;
  list-style: none;
}
.flow-api-details > summary::-webkit-details-marker { display: none; }
.flow-api-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.flow-api-details > summary > span { display: grid; gap: 4px; min-width: 0; }
.flow-api-details > summary strong { font-size: var(--flow-body); }
.flow-api-details > summary small { color: var(--muted); font-size: var(--flow-action); line-height: 1.5; }
.flow-api-details > summary > b { flex: 0 0 auto; color: var(--accent-text); font: 750 var(--flow-label) var(--mono); letter-spacing: .06em; }
.flow-api-details .when-open { display: none; }
.flow-api-details[open] .when-closed { display: none; }
.flow-api-details[open] .when-open { display: inline; }
.flow-api-details[open] > summary { border-bottom: 1px solid var(--line); }
.flow-api-details .flow-field-register { margin: 0; border: 0; }

.flow-field-register,
.operation-journey,
.flow-step-inspector,
.provider-loop,
.operation-comparison,
.flow-value-register { margin: 18px 0 0; background: var(--surface); border: 1px solid var(--line); }
.flow-field-register > header,
.provider-loop > header,
.operation-comparison > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.flow-field-register h3,
.operation-journey h3,
.provider-loop h3,
.operation-comparison h3,
.flow-value-register h3 { margin: 5px 0 0; font-size: clamp(20px, 2.1vw, 30px); letter-spacing: -.04em; }
.flow-field-register > header > p,
.provider-loop > header > p,
.operation-comparison > header > p { max-width: 540px; margin: 0; color: var(--muted); font-size: var(--flow-action); }
.flow-field-columns { display: grid; grid-template-columns: .85fr 1.05fr 1.25fr; }
.flow-field-column { min-width: 0; padding: 18px 20px 20px; border-right: 1px solid var(--line); }
.flow-field-column:last-child { border-right: 0; }
.flow-field-column > span { color: var(--faint); font: 750 var(--flow-label) var(--mono); letter-spacing: .1em; }
.flow-field-column.customer > span { color: var(--flow-customer); }
.flow-field-column.bank > span { color: var(--flow-bank); }
.flow-field-column.payload > span { color: var(--flow-certarail); }
.flow-field-column h4 { margin: 7px 0 13px; font-size: 16px; }
.flow-field-column dl { display: grid; margin: 0; }
.flow-field-column dl > div { display: grid; grid-template-columns: minmax(105px, .7fr) minmax(0, 1fr); gap: 14px; padding: 8px 0; border-top: 1px solid var(--line); }
.flow-field-column dt { color: var(--muted); font-size: var(--flow-label-strong); }
.flow-field-column dd { min-width: 0; margin: 0; overflow-wrap: anywhere; text-align: right; font: var(--flow-action) var(--mono); }
.flow-field-column pre { min-height: 252px; margin: 0; padding: 14px; overflow: auto; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); font: var(--flow-label-strong)/1.7 var(--mono); white-space: pre-wrap; }
.flow-private-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px 20px; background: color-mix(in srgb, var(--red) 3%, var(--surface-2)); border-top: 1px solid var(--line); }
.flow-private-strip strong { margin-right: 8px; color: var(--red); font: 750 var(--flow-label) var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.flow-private-strip span { padding: 4px 6px; color: var(--muted); border: 1px solid var(--line); font: var(--flow-label-strong) var(--mono); }

.operation-journey { overflow: hidden; }
.operation-journey-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.operation-journey-actions { display: flex; gap: 6px; align-items: center; }
.flow-step-control { min-height: 40px; padding: 0 11px; color: var(--muted); background: transparent; border: 1px solid var(--line); cursor: pointer; font: 700 var(--flow-action) var(--mono); }
.flow-step-control:hover:not(:disabled) { color: var(--text); border-color: var(--line-strong); }
.flow-step-control:disabled { cursor: not-allowed; opacity: .35; }
.flow-play { min-height: 40px; }
.flow-owner-legend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.flow-owner-legend span { display: flex; min-width: 0; gap: 7px; align-items: center; padding: 10px 12px; background: var(--surface-2); color: var(--muted); font: var(--flow-label) var(--mono); }
.flow-owner-legend i { width: 7px; height: 7px; flex: 0 0 auto; background: currentColor; }
.flow-owner-legend [data-owner="customer"] { color: var(--flow-customer); }
.flow-owner-legend [data-owner="bank"] { color: var(--flow-bank); }
.flow-owner-legend [data-owner="certarail"] { color: var(--flow-certarail); }
.flow-owner-legend [data-owner="provider"] { color: var(--flow-provider); }
.flow-owner-legend [data-owner="backoffice"] { color: var(--flow-backoffice); }
.operation-journey-scroll { overflow: auto; padding: 20px; outline-offset: -3px; scrollbar-color: var(--line-strong) transparent; }
.operation-steps { display: grid; min-width: max-content; grid-auto-columns: 212px; grid-auto-flow: column; gap: 30px; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.operation-step-item { position: relative; min-width: 0; }
.operation-step-item::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: calc(100% + 1px);
  width: 28px;
  border-top: 1px solid var(--line-strong);
}
.operation-step-item::before {
  content: "›";
  position: absolute;
  z-index: 1;
  top: calc(50% - 11px);
  right: -31px;
  color: var(--muted);
  font: 16px var(--mono);
}
.operation-step-item:last-child::after,
.operation-step-item:last-child::before { display: none; }
.operation-step {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  min-height: 156px;
  align-content: space-between;
  gap: 12px;
  padding: 13px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  transition: border-color 180ms, box-shadow 180ms, opacity 180ms;
}
.operation-step:hover { border-color: var(--line-strong); }
.operation-step.is-selected { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.operation-step.is-complete { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.operation-step-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.operation-step-meta small { overflow: hidden; color: var(--muted); font: var(--flow-label) var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.operation-step-index { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid var(--line-strong); font: 750 var(--flow-label) var(--mono); }
.operation-step-copy { display: grid; gap: 4px; }
.operation-step-copy strong { font-size: var(--flow-body); line-height: 1.35; }
.operation-step-copy small { color: var(--faint); font: var(--flow-label) var(--mono); letter-spacing: .06em; }
.operation-step-item[data-owner="customer"] .operation-step { box-shadow: inset 0 3px 0 var(--flow-customer); }
.operation-step-item[data-owner="bank"] .operation-step { box-shadow: inset 0 3px 0 var(--flow-bank); }
.operation-step-item[data-owner="certarail"] .operation-step { box-shadow: inset 0 3px 0 var(--flow-certarail); }
.operation-step-item[data-owner="provider"] .operation-step { box-shadow: inset 0 3px 0 var(--flow-provider); }
.operation-step-item[data-owner="backoffice"] .operation-step { box-shadow: inset 0 3px 0 var(--flow-backoffice); }
[data-flow-mode="sandbox"] .operation-step-item.is-after-stop .operation-step { opacity: .48; border-style: dashed; }
[data-flow-mode="sandbox"] .operation-step-item.is-after-stop::after { border-top-style: dashed; }
.operation-step-item.is-stop-gate::after { border-color: var(--amber); border-top-style: dashed; }
.operation-step-item.is-stop-gate::before { color: var(--amber); content: "×"; }
.operation-step.is-arriving { animation: operation-step-arrive .28s ease-out both; }
@keyframes operation-step-arrive { from { opacity: .5; transform: translateY(5px); } to { opacity: 1; } }
.operation-journey figcaption { display: flex; justify-content: space-between; gap: 18px; padding: 11px 20px; color: var(--muted); background: var(--surface-2); border-top: 1px solid var(--line); font: var(--flow-action) var(--mono); }
.operation-journey figcaption button { display: inline-flex; min-width: 24px; min-height: 24px; align-items: center; color: var(--accent); background: transparent; cursor: pointer; font: inherit; }

.flow-state { display: inline-flex; width: fit-content; min-height: 24px; align-items: center; padding: 3px 6px; border: 1px solid currentColor; font: 750 var(--flow-label) var(--mono); letter-spacing: .05em; }
.flow-state.bank { color: var(--flow-bank); }
.flow-state.live { color: var(--accent); }
.flow-state.lab { color: var(--blue); }
.flow-state.target { color: var(--blue); }
.flow-state.blocked { color: var(--amber); }
.flow-state.disabled { color: var(--red); }
.flow-state.unavailable { color: var(--faint); }
.flow-state.future { color: var(--faint); }
.flow-state.observed { color: var(--accent); }
.flow-state.stop { color: var(--amber); border-style: dashed; }

.flow-step-inspector { scroll-margin-top: 90px; }
.flow-step-inspector:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.flow-step-inspector > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.flow-step-number { display: grid; width: 42px; height: 42px; place-items: center; color: var(--accent); border: 1px solid var(--accent); font: 800 11px var(--mono); }
.flow-step-inspector h3 { margin: 4px 0 0; font-size: 22px; letter-spacing: -.035em; }
.flow-detail-states { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.flow-detail-body { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.45fr); }
.flow-detail-explanation { padding: 20px; border-right: 1px solid var(--line); }
.flow-detail-explanation > strong { font-size: var(--flow-body); }
.flow-detail-explanation > p { margin: 8px 0 18px; color: var(--muted); font-size: var(--flow-body); }
.flow-failure-note { padding: 12px; background: color-mix(in srgb, var(--amber) 5%, var(--surface-2)); border-left: 3px solid var(--amber); }
.flow-failure-note span { color: var(--amber); font: 750 var(--flow-label) var(--mono); text-transform: uppercase; }
.flow-failure-note p { margin: 5px 0 0; color: var(--muted); font-size: var(--flow-action); }
.flow-detail-register { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.flow-detail-register > div { min-width: 0; padding: 15px 17px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.flow-detail-register > div:nth-child(2n) { border-right: 0; }
.flow-detail-register dt { color: var(--faint); font: 750 var(--flow-label) var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.flow-detail-register dd { margin: 6px 0 0; overflow-wrap: anywhere; font-size: var(--flow-action); }
.flow-step-inspector > footer { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 11px 20px; background: var(--surface-2); }
.flow-step-inspector > footer code { color: var(--muted); font: var(--flow-label-strong) var(--mono); }

.provider-loop > ol { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.provider-loop > ol li { position: relative; display: grid; min-width: 0; min-height: 124px; align-content: start; gap: 5px; padding: 17px 14px; border-right: 1px solid var(--line); }
.provider-loop > ol li:last-child { border-right: 0; }
.provider-loop > ol li::after { content: "→"; position: absolute; z-index: 2; top: 20px; right: -8px; color: var(--muted); font: 12px var(--mono); }
.provider-loop > ol li:last-child::after { display: none; }
.provider-loop > ol span { width: fit-content; padding-bottom: 4px; color: var(--faint); border-bottom: 2px solid currentColor; font: 750 var(--flow-label) var(--mono); }
.provider-loop > ol strong { margin-top: 8px; font-size: var(--flow-action); }
.provider-loop > ol small { color: var(--muted); font: var(--flow-label-strong)/1.55 var(--mono); }
.provider-loop > ol .verified span { color: var(--accent); }
.provider-loop > ol .target span { color: var(--blue); }
.provider-loop > ol .blocked span { color: var(--amber); }
.provider-loop-notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--line); border-top: 1px solid var(--line); gap: 1px; }
.provider-loop-notes p { display: grid; gap: 4px; margin: 0; padding: 14px; background: var(--surface-2); }
.provider-loop-notes strong { font-size: var(--flow-action); }
.provider-loop-notes span { color: var(--muted); font-size: var(--flow-label-strong); }

.operation-comparison-table { overflow: auto; }
.operation-comparison table { min-width: 980px; }
.operation-comparison th,
.operation-comparison td { height: auto; max-width: 250px; overflow: visible; padding: 13px 15px; text-overflow: clip; white-space: normal; }
.operation-comparison tbody th { color: var(--text); background: var(--surface-2); font: 800 var(--flow-label-strong) var(--mono); }
.operation-comparison td { color: var(--muted); font: var(--flow-action)/1.5 var(--sans); }
.operation-comparison td b { display: block; width: fit-content; font: 750 var(--flow-label) var(--mono); }
.operation-comparison td small { color: var(--faint); font: var(--flow-label) var(--mono); }
.operation-comparison .state-live { color: var(--accent); }
.operation-comparison .state-design { color: var(--blue); }
.operation-comparison .state-blocked { color: var(--amber); }
.operation-comparison .state-disabled { color: var(--red); }

.flow-value-register { overflow: hidden; }
.flow-value-register > header { padding: 19px 20px; border-bottom: 1px solid var(--line); }
.flow-value-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--line); gap: 1px; }
.flow-value-head span { padding: 10px 18px; background: var(--surface-2); color: var(--faint); font: 750 var(--flow-label) var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.flow-value-head span:last-child { color: var(--accent); }
.flow-value-register dl { margin: 0; }
.flow-value-register dl > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--line); border-top: 1px solid var(--line); gap: 1px; }
.flow-value-register dt,
.flow-value-register dd { margin: 0; padding: 15px 18px; background: var(--surface); font-size: var(--flow-action); }
.flow-value-register dt { color: var(--muted); }
.flow-value-register dd { position: relative; padding-left: 42px; font-weight: 650; }
.flow-value-register dd::before { content: "→"; position: absolute; left: 18px; color: var(--accent); font: 12px var(--mono); }
.flow-value-register > footer { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(300px, 1fr) auto; gap: 22px; align-items: center; padding: 20px; background: color-mix(in srgb, var(--accent) 5%, var(--surface-2)); border-top: 1px solid var(--line); }
.flow-value-register > footer strong { font-size: 13px; }
.flow-value-register > footer > span { color: var(--muted); font-size: var(--flow-action); }
.flow-value-register > footer > div { display: flex; gap: 14px; align-items: center; }

@media (max-width: 1260px) {
  .flow-control-deck,
  .flow-case-intro { grid-template-columns: 1fr; }
  .flow-stop-chip { justify-self: start; }
  .flow-field-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-field-column.payload { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .flow-field-column.bank { border-right: 0; }
  .flow-field-column pre { min-height: 0; }
  .provider-loop > ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .provider-loop > ol li:nth-child(4) { border-right: 0; }
  .provider-loop > ol li:nth-child(n+5) { border-top: 1px solid var(--line); }
  .flow-value-register > footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-value-register > footer > div { grid-column: 1 / -1; }
  .crypto-operation-chain ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crypto-operation-chain li:nth-child(3n)::after { display: none; }
}

@media (max-width: 800px) {
  .operation-flow-heading h2 br { display: none; }
  .flow-truth-boundary { grid-template-columns: auto 1fr; }
  .flow-truth-boundary > a { grid-column: 1 / -1; }
  .flow-mode-picker { grid-template-columns: 1fr; }
  .flow-field-register > header,
  .provider-loop > header,
  .operation-comparison > header,
  .operation-journey-head { display: grid; align-items: start; }
  .flow-field-columns { grid-template-columns: 1fr; }
  .flow-field-column { border-right: 0; border-bottom: 1px solid var(--line); }
  .flow-field-column.payload { grid-column: auto; border-top: 0; }
  .flow-owner-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-owner-legend span:last-child { grid-column: 1 / -1; }
  .operation-journey-actions { display: grid; grid-template-columns: repeat(2, 1fr); }
  .flow-play { grid-column: 1 / -1; }
  .operation-steps { min-width: 0; grid-auto-columns: auto; grid-auto-flow: row; gap: 20px; }
  .operation-step-item::after { top: calc(100% + 1px); left: 21px; width: 1px; height: 18px; border-top: 0; border-left: 1px solid var(--line-strong); }
  .operation-step-item::before { top: auto; right: auto; bottom: -20px; left: 17px; transform: rotate(90deg); }
  .operation-step { min-height: 132px; }
  .flow-detail-body { grid-template-columns: 1fr; }
  .flow-detail-explanation { border-right: 0; border-bottom: 1px solid var(--line); }
  .flow-step-inspector > header { grid-template-columns: auto 1fr; }
  .flow-detail-states { grid-column: 1 / -1; justify-content: flex-start; }
  .provider-loop > ol { grid-template-columns: 1fr; }
  .provider-loop > ol li { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .provider-loop > ol li:nth-child(n+5) { border-top: 0; }
  .provider-loop > ol li::after { top: auto; right: auto; bottom: -9px; left: 18px; transform: rotate(90deg); }
  .provider-loop-notes { grid-template-columns: 1fr; }
  .flow-value-register > footer { grid-template-columns: 1fr; }
  .flow-value-register > footer > div { grid-column: auto; flex-wrap: wrap; }
  .crypto-operation-chain ol,
  .flow-human-summary > div { grid-template-columns: 1fr; }
  .crypto-operation-chain li { min-height: 0; }
  .crypto-operation-chain li::after,
  .crypto-operation-chain li:nth-child(3n)::after { display: block; top: auto; right: auto; bottom: -8px; left: 18px; transform: rotate(90deg); }
  .crypto-operation-chain li:last-child::after { display: none; }
}

@media (max-width: 560px) {
  .flow-case-intro,
  .flow-field-register > header,
  .flow-field-column,
  .operation-journey-head,
  .flow-step-inspector > header,
  .flow-detail-explanation,
  .provider-loop > header,
  .operation-comparison > header,
  .flow-value-register > header,
  .flow-value-register > footer { padding-right: 14px; padding-left: 14px; }
  .crypto-operation-chain > header,
  .flow-human-summary > header,
  .flow-human-summary article,
  .flow-api-details > summary { padding-right: 14px; padding-left: 14px; }
  .flow-scenario-options { display: grid; grid-template-columns: 1fr; }
  .flow-scenario-options label > span { min-height: 44px; }
  .flow-field-column dl > div { grid-template-columns: 1fr; gap: 2px; }
  .flow-field-column dd { text-align: left; }
  .flow-private-strip { padding-right: 14px; padding-left: 14px; }
  .operation-journey-actions { width: 100%; }
  .operation-journey-scroll { padding: 16px 14px; overflow: visible; }
  .operation-journey figcaption,
  .flow-step-inspector > footer { display: grid; padding-right: 14px; padding-left: 14px; }
  .flow-detail-register { grid-template-columns: 1fr; }
  .flow-detail-register > div { border-right: 0; }
  .flow-value-head { grid-template-columns: 1fr; }
  .flow-value-register dl > div { grid-template-columns: 1fr; }
  .flow-value-register dd { padding-left: 40px; border-top: 1px solid var(--line); }
  .flow-api-details > summary { align-items: flex-start; }
}

@media (pointer: coarse) {
  .flow-step-control,
  .flow-scenario-options label > span,
  .flow-mode-picker label > span,
  .flow-truth-boundary > a,
  .operation-journey figcaption button,
  .flow-step-inspector > footer a { min-height: 44px; }
  .flow-api-details > summary { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .operation-flow-page *,
  .operation-flow-page *::before,
  .operation-flow-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}