/* Behind the scenes (docs/flow-panel-plan.md): laptop screens only. The page
   fits beside the panel: its layouts follow its own width (container queries
   on body), so nothing is covered. */
/* Narrower on smaller laptops, so the page keeps the 1100px its compact
   laptop layout needs (laptop.css) wherever the window allows. */
:root{--flow-panel-width:clamp(320px,calc(100vw - 1100px),380px)}
.flow-panel,.flow-tab{display:none}
@media (min-width:1280px){
  html.flow-open body{margin-right:var(--flow-panel-width)}
  /* The page's own fixed layers stay beside the panel too. */
  html.flow-open .modal-backdrop{right:var(--flow-panel-width)}
  html.flow-open #toast,html.flow-open .notice{left:calc(50% - var(--flow-panel-width) / 2)}
  html.flow-shown .flow-panel:not([hidden]){display:flex}
  html.flow-shown .flow-tab:not([hidden]){display:block}
}
.flow-panel{position:fixed;z-index:90;top:0;right:0;bottom:0;width:var(--flow-panel-width);flex-direction:column;background:#0f1b2d;color:#dfe7f3;font:13px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;border-left:1px solid #22324a;box-shadow:-8px 0 24px #0b14222e;-webkit-font-smoothing:antialiased}
.flow-panel *{box-sizing:border-box}
/* The page's own text styles don't reach the panel. */
.flow-panel :is(p,dl,dt,dd,ol,li,span,strong){margin:0;color:inherit;font-family:inherit;line-height:inherit;letter-spacing:normal}
/* The kicker shares its row with the buttons, so the title has the full width. */
.fp-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:14px 16px 10px}
.flow-panel .fp-title,.flow-panel .fp-ref{grid-column:1/-1}
.flow-panel .fp-kicker{margin:0;font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#8fa6c4}
.flow-panel .fp-title{margin:2px 0 0;font-size:16px;font-weight:650;color:#fff}
.flow-panel .fp-ref{margin:2px 0 0;font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#8fa6c4}
.flow-panel .fp-ref:empty{display:none}
.fp-actions{display:flex;flex:none;gap:6px}
.fp-hide,.fp-clear{flex:none;padding:5px 10px;border:1px solid #33496a;border-radius:6px;background:transparent;color:#dfe7f3;font:600 12px/1 system-ui,sans-serif;cursor:pointer}
.fp-hide:hover,.fp-hide:focus-visible,.fp-clear:hover:not(:disabled),.fp-clear:focus-visible{background:#1c2c45;border-color:#4d6a93}
.fp-clear:disabled{opacity:.4;cursor:default}
.fp-undo{display:block;margin-top:8px;padding:0;border:0;background:none;color:#8cb5fa;font:inherit;text-decoration:underline;cursor:pointer}
.fp-lanes{position:relative;height:34px;margin:0 16px;border-bottom:1px solid #22324a}
.flow-panel .fp-lane{position:absolute;top:8px;transform:translateX(-50%);white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:.2px}
.flow-panel .fp-lane.shopper{color:#aab6c6;font-weight:600}
.flow-panel .fp-lane.retailer{color:#f0a8bb}
.flow-panel .fp-lane.visa{color:#a9b6ff}
.flow-panel .fp-lane.bank{color:#8cb5fa}
.fp-body{position:relative;flex:1;min-height:0;margin:0 16px;display:flex}
.fp-lifeline{position:absolute;top:0;bottom:0;width:1px;background:#22324a}
.flow-panel .fp-steps{position:relative;flex:1;margin:0;padding:6px 0 18px;list-style:none;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#33496a transparent}
.flow-panel .fp-empty{margin:24px 4px;padding:14px;border:1px dashed #33496a;border-radius:8px;background:#0f1b2de6;color:#aab6c6}
.fp-step{position:relative}
.fp-arrow-row{position:relative;height:20px}
.fp-arrow{position:absolute;top:9px;height:2px;background:#8fa6c4}
.fp-arrow::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-right:0;border-left:7px solid #8fa6c4}
.fp-arrow.back::after{right:auto;left:-1px;border-left:0;border-right:7px solid #8fa6c4}
.fp-arrow.simulated{background:repeating-linear-gradient(90deg,#8fa6c4 0 5px,transparent 5px 9px)}
.flow-panel .fp-through{position:absolute;top:6px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#a9b6ff}
.fp-card{position:relative;border:1px solid #2a3d5c;border-radius:8px;background:#15243a}
.fp-step.failed .fp-card{border-color:#7a3b45}
.fp-card.open{border-color:#4d6a93;background:#182a44}
.fp-card-head{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:8px 10px;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:8px}
.fp-card-head:focus-visible{outline:2px solid #8cb5fa;outline-offset:1px}
.flow-panel .fp-route{font-size:10.5px;letter-spacing:.2px;color:#8fa6c4}
.flow-panel .fp-card-head strong{font-size:13px;font-weight:650;color:#fff}
.flow-panel .fp-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.flow-panel .fp-tag{display:inline-block;padding:1px 6px;border:1px solid #2f6f6a;border-radius:4px;background:#123a3a;color:#9be3d6;font-size:10.5px;font-weight:600;line-height:1.5}
.flow-panel .fp-tag.simulated{border:1px dashed #6b7891;background:transparent;color:#c2cbd8}
.flow-panel .fp-card-body{padding:0 10px 10px;color:#c9d4e3}
.flow-panel .fp-card-body>p{margin:0 0 8px}
.flow-panel .fp-via{font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#a9b6ff}
.flow-panel .fp-fields-title{margin:8px 0 3px!important;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#8fa6c4}
.flow-panel .fp-fields{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:2px 10px;margin:0;padding:6px 8px;border-radius:6px;background:#0f1b2d;font:11.5px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace}
.flow-panel .fp-fields dt{color:#8fa6c4}
.flow-panel .fp-fields dd{margin:0;color:#eef3fa;overflow-wrap:anywhere}
.flow-panel .fp-not-shared{margin:8px 0 0!important;padding:6px 8px;border-left:2px solid #9be3d6;background:#123a3a66;font-size:12px}
.flow-panel .fp-not-shared span{display:block;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#9be3d6}
/* The protocol messages behind a card, numbered. */
.flow-panel .fp-legs{margin:0;padding:0;list-style:none;counter-reset:leg}
.flow-panel .fp-legs>li{position:relative;margin:0 0 8px;padding:0 0 0 22px;counter-increment:leg}
.flow-panel .fp-legs>li::before{content:counter(leg);position:absolute;left:0;top:1px;width:16px;height:16px;border-radius:50%;background:#22304a;color:#c8d6ff;font-size:10px;font-weight:700;line-height:16px;text-align:center}
.flow-panel .fp-legs p{margin:0 0 3px}
.flow-panel .fp-leg-route{font-size:12px;font-weight:650;color:#eef3fa}
.flow-panel .fp-leg-channel{display:inline-block;margin-left:6px;padding:0 5px;border:1px dashed #5a5f7a;border-radius:4px;color:#c8cde6;font-size:10px;font-weight:600;vertical-align:1px}
.flow-panel .fp-leg-channel.server{border-style:solid;border-color:#2c4a78;color:#a9c4f5}
.flow-panel .fp-leg-what{font-size:12px;color:#c9d4e3}
.flow-panel .fp-legs .fp-fields{grid-template-columns:minmax(0,8.5em) minmax(0,1fr)}
.flow-panel .fp-legs .fp-fields dt{overflow-wrap:anywhere}
/* What Alderbank keeps after an exchange. */
.flow-panel .fp-stored{margin-top:8px;padding:6px 8px 8px;border:1px solid #2c4a78;border-left:3px solid #8cb5fa;border-radius:6px;background:#11223a}
.flow-panel .fp-stored .fp-fields-title{margin:0 0 2px!important;color:#8cb5fa}
.flow-panel .fp-store{margin:6px 0 3px!important;font-size:11.5px;font-weight:650;color:#eef3fa}
.flow-panel .fp-store .fp-tag{margin-left:4px;font-weight:600}
.flow-panel .fp-stored .fp-fields{background:#0c1828}
/* Hand-offs between sites: dashed, and moving while this page makes one. */
.flow-panel .fp-tag.hop{border-color:#5a5f7a;background:#22263a;color:#c8cde6}
.flow-panel .fp-tag.now{border-color:#8a6d2f;background:#3a2f12;color:#f3d48b}
.fp-hop .fp-card,.fp-hop .fp-card.open{border-style:dashed}
.fp-hop .fp-arrow{background:repeating-linear-gradient(90deg,#8fa6c4 0 6px,transparent 6px 10px);background-size:10px 2px}
.fp-live .fp-card,.fp-live .fp-card.open{border-color:#8a6d2f;background:#1b2434}
.fp-live .fp-arrow{background-image:repeating-linear-gradient(90deg,#f3d48b 0 6px,transparent 6px 10px)}
.fp-live .fp-arrow::after{border-left-color:#f3d48b}
.fp-live .fp-arrow.back::after{border-right-color:#f3d48b}
.fp-live div.fp-card-head{cursor:default}
@media (prefers-reduced-motion:no-preference){
  .fp-live .fp-arrow{animation:fp-moving .6s linear infinite}
  .fp-live .fp-arrow.back{animation-direction:reverse}
}
@keyframes fp-moving{to{background-position:10px 0}}
.fp-footer{padding:8px 16px 12px;border-top:1px solid #22324a;font-size:11px;color:#8fa6c4}
.flow-tab{position:fixed;z-index:90;right:0;top:50%;transform:translateY(-50%);padding:14px 7px;border:1px solid #22324a;border-right:0;border-radius:8px 0 0 8px;background:#0f1b2d;color:#dfe7f3;font:600 12px/1 system-ui,sans-serif;letter-spacing:.3px;writing-mode:vertical-rl;cursor:pointer;box-shadow:-4px 0 14px #0b14222e}
.flow-tab:hover,.flow-tab:focus-visible{background:#1c2c45}
@media (prefers-reduced-motion:no-preference){.fp-card{transition:border-color .15s}}
/* Lumen's panel: Visa's lane and steps carry its logo, on a white chip so it reads on the dark panel. */
.flow-panel .fp-lane-logo{display:block;padding:2px 5px;border-radius:3px;background:#fff;line-height:0}
.flow-panel .fp-lane-logo img{width:auto;height:9px}
.flow-panel .fp-visa{display:inline-flex;align-items:center;gap:6px;margin-bottom:3px;padding:2px 7px 2px 5px;border-radius:4px;background:#fff;color:#1a1f71;font-size:10.5px;font-weight:700;line-height:1.5}
.flow-panel .fp-visa img{display:block;width:auto;height:9px}
.flow-panel .fp-card.visa{border-color:#4a5bd4}
.flow-panel .fp-card.visa.open{border-color:#7f8cf0}
.flow-panel .fp-step.failed .fp-card.visa{border-color:#7a3b45}