/* The demonstration uses the site's shared interactive-lab foundations. */
.flow-lab { color: #173448; }
.flow-lab [hidden] { display: none !important; }
.flow-lab .lab-grid { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.55fr); gap: 28px; align-items: start; }
.flow-lab .lab-heading { margin-bottom: 26px; }
.flow-lab .lab-heading h2 { font-size: clamp(25px, 2.8vw, 34px); line-height: 1.2; margin: 8px 0 12px; }
.flow-lab .lab-heading > p:last-child { color: #516775; max-width: 680px; margin: 0; font-size: 15px; line-height: 1.65; }
.flow-lab .lab-kicker { color: #0a3d62; font-size: 12px; font-weight: 650; margin: 0; }
.flow-lab .lab-field { display: block; color: #173448; font-size: 14px; font-weight: 600; margin: 0 0 14px; }
.flow-lab select { width: 100%; min-height: 46px; font: inherit; font-size: 14px; color: #173448; border: 1px solid #91a7b5; border-radius: 5px; background: #fff; padding: 10px; margin-top: 8px; }
.flow-lab .flow-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.flow-lab button { min-height: 44px; padding: 10px 14px; border: 1px solid #0a3d62; border-radius: 5px; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.4; cursor: pointer; overflow-wrap: anywhere; }
.flow-lab .flow-next { background: #0a3d62; color: #fff; flex: 1 1 100%; }
.flow-lab .flow-next:hover:not(:disabled) { background: #082c46; }
.flow-lab .flow-restart { background: #fff; color: #0a3d62; }
.flow-lab button:disabled { cursor: default; background: #e7eef2; border-color: #c5d2da; color: #405d70; }
.flow-lab :is(button, select):focus-visible { outline: 3px solid #0a3d62; outline-offset: 3px; }
.flow-lab .flow-facts { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 18px 0 0; }
.flow-lab .flow-facts div { min-width: 0; }
.flow-lab .flow-facts dt { font-size: 12px; line-height: 1.5; color: #516775; }
.flow-lab .flow-facts dd { margin: 3px 0 0; font-size: 14px; font-weight: 600; }
.flow-lab .flow-facts code { font: inherit; }
.flow-lab .flow-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 0 0 20px; list-style: none; }
.flow-lab .flow-steps li { display: flex; align-items: flex-start; gap: 9px; min-width: 0; border: 1px solid #d8e1e6; border-radius: 5px; padding: 12px; background: #fff; }
.flow-lab .flow-step-number { flex: 0 0 23px; height: 23px; display: grid; place-items: center; border: 1px solid #bccdd6; border-radius: 50%; font-size: 11px; font-weight: 650; color: #516775; }
.flow-lab .flow-steps strong { display: block; font-size: 13px; line-height: 1.45; font-weight: 650; color: #0a3d62; overflow-wrap: anywhere; }
.flow-lab [data-flow-step-state] { display: block; font-size: 12px; line-height: 1.5; margin-top: 4px; color: #516775; overflow-wrap: anywhere; }
.flow-lab .flow-steps [data-state="complete"] { background: #f3f7f9; }
.flow-lab [data-state="complete"] .flow-step-number { background: #0a3d62; border-color: #0a3d62; color: #fff; }
.flow-lab .flow-steps [data-state="current"], .flow-lab .flow-steps [data-state="blocked"] { border-color: #0a3d62; border-left: 3px solid #f39c12; padding-left: 10px; }
.flow-lab .lab-status { color: #0a3d62; font-size: 15px; line-height: 1.55; font-weight: 650; margin: 0 0 8px; }
.flow-lab .flow-detail { color: #516775; font-size: 13px; line-height: 1.7; margin: 0; }
.flow-lab .lab-note { color: #516775; font-size: 12px; line-height: 1.65; }
.flow-lab .flow-disclaimer { border-top: 1px solid #d8e1e6; padding-top: 16px; margin: 24px 0 0; }
.flow-lab .flow-fallback p { max-width: 800px; font-size: 14px; line-height: 1.7; }
@media (max-width: 760px) {
  .flow-lab .lab-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .flow-lab select { font-size: 16px; }
  .flow-lab .flow-actions { align-items: stretch; }
  .flow-lab .flow-next { flex: 1 1 180px; }
  .flow-lab .flow-facts { margin-top: 16px; }
}
@media (max-width: 380px) {
  .flow-lab .flow-steps { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .flow-lab .flow-steps li { padding-block: 10px; }
}