/* How it fits together: one sample order moving through the layers (tools/r26/components.mjs stack()).
   site/r26/stack.js sets data-state 0..6 on .fl and moves the dot; everything else is CSS. */
.fl{--out:cubic-bezier(.23,1,.32,1);--io:cubic-bezier(.77,0,.175,1);position:relative;margin:0;background:#fff;border:1px solid #dfe3ec;border-radius:16px;overflow:hidden;isolation:isolate}

/* Letra, on top of everything */
.fl-letra{display:flex;align-items:center;gap:20px;padding:18px 28px;background:#1d3fd9;color:#fff}
.fl-mark{position:relative;flex:none;font-size:24px;font-style:italic;font-weight:800;letter-spacing:-0.06em;line-height:1;padding-right:8px}
.fl-mark i{position:absolute;right:0;bottom:3px;width:5px;height:5px;border-radius:50%;background:#fff252}
.fl-say{flex:1;min-width:0;margin:0;font-size:18px;line-height:1.35;font-weight:600;letter-spacing:-0.012em;transition:opacity 180ms ease,filter 180ms ease}
.fl-say.swap{opacity:0;filter:blur(3px)}
.fl-tag{flex:none;font-size:12.5px;font-weight:650;color:rgba(255,255,255,.72)}
.fl-play{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;transition:background-color 160ms ease,transform 160ms var(--out)}
.fl-play:active{transform:scale(.94)}

/* Rows */
.fl-row{position:relative;z-index:1;display:grid;grid-template-columns:184px 1fr;gap:24px;align-items:center;padding:22px 28px}
.fl-row+.fl-row{border-top:1px solid #eef0f5}
.fl-lbl b{display:block;font-size:15px;font-weight:700;letter-spacing:-0.015em}
.fl-lbl span{display:block;margin-top:3px;font-size:12.5px;line-height:1.35;color:#6b717b}

/* Your apps: one BearScope row that changes with the order */
.fl-app{display:flex;align-items:center;gap:18px;min-height:52px;padding:0 16px;border-radius:10px;background:#f4f5f8}
.fl-appname{font-size:12.5px;font-weight:750;color:#6b717b}
.fl-order{display:flex;align-items:baseline;gap:10px;min-width:0}
.fl-order b{font-size:15px}
.fl-order span{font-size:13px;color:#6b717b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-status{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:650;white-space:nowrap;color:#9a5b00;transition:color 220ms ease}
.fl-status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.fl[data-state="4"] .fl-status{color:#131417}
.fl[data-state="4"] .fl-status::before{background:#fff252;box-shadow:0 0 0 1.5px #131417}
.fl[data-state="5"] .fl-status,.fl[data-state="6"] .fl-status{color:#1e7a46}
.fl-undo{display:none;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.fl[data-state="6"] .fl-undo{display:inline}

/* Fibric: five steps on one track */
.fl-core{padding-top:112px;padding-bottom:26px}
.fl-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr)}
.fl-step{position:relative;display:flex;justify-content:center}
.fl-node{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.fl-node i{position:relative;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #c9cfdb;transition:background-color 240ms ease,box-shadow 240ms ease}
.fl-node b{position:relative;z-index:1;padding:2px 8px;background:#fff;font-size:14px;line-height:1.25;font-weight:650;color:#6b717b;max-width:16ch;text-wrap:balance;transition:color 240ms ease}
.fl-step.done .fl-node i{background:#2450e8;box-shadow:inset 0 0 0 2px #2450e8}
.fl-step.on .fl-node i{background:#fff;box-shadow:inset 0 0 0 2px #2450e8,0 0 0 6px rgba(36,80,232,.14)}
.fl-step[data-i="4"].on .fl-node i{background:#fff252;box-shadow:inset 0 0 0 2px #131417,0 0 0 6px rgba(255,242,82,.45)}
.fl-step.done .fl-node b,.fl-step.on .fl-node b{color:#131417}

.fl-card{position:absolute;bottom:calc(100% + 18px);left:50%;display:flex;flex-direction:column;gap:5px;width:max-content;max-width:230px;padding:11px 14px;border:1px solid #dfe3ec;border-radius:10px;background:#fff;font-size:13.5px;line-height:1.3;box-shadow:0 10px 28px -14px rgba(19,20,23,.28);opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:opacity 200ms ease,transform 320ms var(--out)}
.fl-step.on .fl-card,.fl[data-state="6"] .fl-step[data-i="5"] .fl-card{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.fl-step[data-i="1"] .fl-card{left:0;transform:translate(0,8px)}
.fl-step[data-i="1"].on .fl-card{transform:none}
.fl-step[data-i="5"] .fl-card{left:auto;right:0;transform:translate(0,8px)}
.fl-step[data-i="5"].on .fl-card,.fl[data-state="6"] .fl-step[data-i="5"] .fl-card{transform:none}
.fl-k{font-size:12.5px;color:#6b717b}
.fl-big{font-size:15px;letter-spacing:-0.01em}
.fl-kv{display:flex;gap:8px;color:#4a4f58}
.fl-kv b{min-width:52px;color:#131417}
.fl-ok{display:flex;align-items:center;gap:8px}
.fl-ok::before{content:"";width:12px;height:7px;margin-top:-3px;border-left:2px solid #1e7a46;border-bottom:2px solid #1e7a46;transform:rotate(-45deg);flex:none}
.fl-approve{height:34px;padding:0 16px;border-radius:999px;background:#fff252;font-size:14px;font-weight:700;transition:transform 160ms var(--out),background-color 160ms ease}
.fl-approve:active{transform:scale(.96)}

/* Your systems */
.fl-chips{display:grid;grid-template-columns:repeat(5,1fr)}
.fl-chip{justify-self:center;display:inline-flex;align-items:center;height:36px;padding:0 16px;border:1px solid #dfe3ec;border-radius:999px;background:#fff;font-size:14px;font-weight:650;transition:border-color 240ms ease,color 240ms ease,background-color 240ms ease}
.fl-chip[data-sys="ups"]{grid-column:1}
.fl-chip[data-sys="kustomer"]{grid-column:3}
.fl-chip[data-sys="shopify"]{grid-column:5}
.fl[data-state="0"] .fl-chip[data-sys="ups"],.fl[data-state="1"] .fl-chip{border-color:#2450e8;color:#2450e8}
.fl[data-state="5"] .fl-chip[data-sys="shopify"],.fl[data-state="6"] .fl-chip[data-sys="shopify"]{background:#131417;border-color:#131417;color:#fff}

/* The path the order takes, and the dot on it */
.fl-path{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.fl-track{fill:none;stroke:#dfe3ec;stroke-width:2;stroke-dasharray:2 6;stroke-linecap:round}
.fl-done{fill:none;stroke:#2450e8;stroke-width:2;stroke-linecap:round}
.fl-dot{position:absolute;left:0;top:0;z-index:2;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#2450e8;box-shadow:0 0 0 5px rgba(36,80,232,.16);pointer-events:none;opacity:0;transition:opacity 200ms ease}
.fl.js .fl-dot{opacity:1}

@media (hover:hover) and (pointer:fine){
  .fl-play:hover{background:rgba(255,255,255,.24)}
  .fl-approve:hover{background:#fff576}
  .fl-node:hover b{color:#131417}
}

@media (max-width:820px){
  .fl-letra{flex-wrap:wrap;gap:10px 14px;padding:16px 18px}
  .fl-say{order:3;flex-basis:100%;font-size:16.5px}
  .fl-tag{margin-left:auto}
  .fl-row{grid-template-columns:1fr;gap:12px;padding:18px}
  .fl-lbl{display:flex;align-items:baseline;gap:8px}
  .fl-lbl span{margin:0}
  .fl-app{flex-wrap:wrap;gap:6px 12px;padding:12px 14px}
  .fl-status{margin-left:0}
  .fl-core{padding-top:18px}
  .fl-steps{grid-template-columns:1fr}
  .fl-step{flex-direction:column;align-items:stretch;padding:7px 0}
  .fl-node{flex-direction:row;gap:12px;text-align:left}
  .fl-node b{max-width:none}
  .fl .fl-step .fl-card{order:2;position:static;display:none;max-width:none;width:auto;margin:10px 0 4px 28px;opacity:1;transform:none}
  .fl .fl-step.on .fl-card{display:flex}
  .fl[data-state="6"] .fl-step[data-i="5"] .fl-card{display:none}
  .fl-node b{padding:0}
  .fl-chips{display:flex;flex-wrap:wrap;gap:8px}
  .fl-chip{justify-self:auto}
  .fl-path,.fl-dot{display:none}
}