/* Home: purchase order / customer order flows with a toggle (spice_order_flows() in functions.php).
   Classes are .oflow*, because Neel's prototype CSS (neel.css) already styles .flow. */
.oflows-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 26px;padding:6px;border-radius:16px;background:#f2f4f8;border:1px solid #e3e7ef}
.oflows-tabs button{display:grid;gap:2px;justify-items:start;padding:12px 16px;border:0;border-radius:11px;background:none;font:inherit;text-align:left;cursor:pointer;color:var(--muted);transition:background .2s,color .2s,box-shadow .2s}
.oflows-tabs button b{font-size:1.05rem;color:var(--ink)}
.oflows-tabs button small{font-size:.8125rem}
.oflows-tabs button:hover{background:#fff}
.oflows-tabs button[aria-selected=true]{background:#fff;box-shadow:0 1px 2px rgba(17,24,47,.06),0 6px 16px -8px rgba(17,24,47,.25)}
.oflows-tabs #flows-t-po[aria-selected=true]{box-shadow:inset 0 -3px 0 #ff9a1a,0 6px 16px -8px rgba(17,24,47,.25)}
.oflows-tabs #flows-t-co[aria-selected=true]{box-shadow:inset 0 -3px 0 #ff1f8f,0 6px 16px -8px rgba(17,24,47,.25)}
.oflows-tabs button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.oflow[hidden]{display:none}
.oflow>p:first-child{margin-top:0}
.oflow a{font-weight:600}

/* A step the hero pointed at, e.g. Follow a shipment → Ship */
.oflow .step-flow li{transition:background .4s}
.oflow .step-flow li.is-focus{background:linear-gradient(90deg,rgba(255,154,26,.14),transparent 80%);border-radius:12px}
.oflow .step-flow li.is-focus::before{background:var(--orange);color:var(--deep);box-shadow:0 0 0 6px rgba(255,140,30,.25)}
@media(max-width:560px){.oflows-tabs{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.oflow .step-flow li{transition:none}}