/* Channel flow visual (see partials/_channel-flow.html). Pair with home.css or any page that defines .livedot. */
/* ===== CHANNEL FLOW (hero visual) =====
   Patient -> channel -> Heron -> PMS (inbound) and PMS -> Heron -> channel -> patient (outbound).
   No card of its own: it sits on the hero wash, and the PMS panel is the only card. Lines are drawn by site.js. */
.flow-wrap{container-type:inline-size}
.flow{position:relative;display:grid;grid-template-columns:auto auto auto minmax(0,1fr);column-gap:24px;row-gap:22px;align-items:center;padding:8px 0}
.flow::before{content:"";position:absolute;inset:-24px -12px;background-image:radial-gradient(rgba(20,20,20,.08) 1px,transparent 1px);background-size:18px 18px;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent);pointer-events:none}
.flow-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.flow-lines path{fill:none;stroke:var(--grey-50);stroke-width:1.5;stroke-dasharray:2 5;stroke-linecap:round;transition:stroke var(--duration-slow) var(--ease-standard)}
.flow-lines path.on-in{stroke:var(--blue-100);stroke-dasharray:none}
.flow-lines path.on-pms{stroke:var(--green-100);stroke-dasharray:none}
.flow-lines path.on-outb{stroke:var(--pink-200);stroke-dasharray:none}
.flow-dot.in{fill:var(--brand-primary);filter:drop-shadow(0 0 4px rgba(0,0,255,.35))}
.flow-dot.pms{fill:var(--green-200);filter:drop-shadow(0 0 4px rgba(0,166,81,.4))}
.flow-dot.outb{fill:var(--pink-300);filter:drop-shadow(0 0 4px rgba(255,0,176,.35))}
.flow-label,.pms-head{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-300)}
/* patient */
.flow-patient{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px}
.flow-patient .av{width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;transition:box-shadow var(--duration-slow) var(--ease-standard),border-color var(--duration-slow) var(--ease-standard)}
.flow-patient .av svg{width:20px;height:20px;fill:none;stroke:var(--grey-500);stroke-width:1.7}
.flow-patient.on-in .av{border-color:var(--blue-100);box-shadow:0 0 0 5px rgba(0,0,255,.07)}
.flow-patient.on-outb .av{border-color:var(--pink-200);box-shadow:0 0 0 5px rgba(255,0,176,.08)}
/* channels */
.flow-in{position:relative;z-index:1;display:flex;flex-direction:column;gap:11px}
.chan{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-pill);padding:6px 12px 6px 6px;font-size:13px;font-weight:500;white-space:nowrap;box-shadow:var(--shadow-xs);transition:border-color var(--duration-slow) var(--ease-standard),box-shadow var(--duration-slow) var(--ease-standard)}
.chan.on-in{border-color:var(--blue-100);box-shadow:0 0 0 4px rgba(0,0,255,.07)}
.chan.on-outb{border-color:var(--pink-200);box-shadow:0 0 0 4px rgba(255,0,176,.08)}
.flow .ico{width:26px;height:26px;border-radius:50%;background:var(--blue-50);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.flow .ico svg{width:14px;height:14px;fill:none;stroke:var(--brand-primary);stroke-width:1.9}
/* Heron hub */
.flow-hub{position:relative;z-index:1;width:68px;height:68px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;justify-self:center}
.flow-hub img{width:46px;height:46px}
.flow-hub .spin{position:absolute;inset:-7px;border-radius:50%;border:2px solid transparent;border-top-color:var(--brand-primary);border-right-color:var(--blue-100);opacity:0;transition:opacity var(--duration-base) var(--ease-standard)}
.flow-hub.busy .spin{opacity:1;animation:hubspin .7s linear infinite}
@keyframes hubspin{to{transform:rotate(360deg)}}
.flow-hub .ring{position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--brand-primary);opacity:0}
.flow-hub.sent .ring{animation:hubring .9s var(--ease-out)}
@keyframes hubring{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
.hub-label{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:12px;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-primary)}
/* PMS: the one card */
.flow-pms{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:10px;display:flex;flex-direction:column;gap:6px}
.pms-head{display:flex;justify-content:space-between;align-items:center;padding:3px 4px 5px}
.pms-head .sync{display:inline-flex;align-items:center;gap:6px;color:var(--green-300);letter-spacing:.06em}
.pms-head .sync i{width:6px;height:6px;border-radius:50%;background:var(--green-200)}
.out{display:flex;align-items:center;gap:9px;background:var(--surface-sunken);border:1px solid transparent;border-radius:var(--radius-md);padding:5px 10px 5px 5px;font-size:12.5px;font-weight:500;transition:border-color var(--duration-slow) var(--ease-standard),box-shadow var(--duration-slow) var(--ease-standard),background var(--duration-slow) var(--ease-standard)}
.out .ico{border-radius:7px;background:var(--status-success-bg)}
.out .ico svg{stroke:var(--green-300)}
.out .t{flex:1;min-width:0;line-height:1.25}
.out .n{font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--grey-300);min-width:2ch;text-align:right;font-variant-numeric:tabular-nums;transition:color var(--duration-slow) var(--ease-standard)}
.out.on-pms{background:#fff;border-color:var(--green-100);box-shadow:0 0 0 4px rgba(0,166,81,.08)}
.out.on-pms .n{color:var(--green-300)}
.out.on-outb{background:#fff;border-color:var(--pink-200);box-shadow:0 0 0 4px rgba(255,0,176,.08)}
/* supervising team: sits with Heron; handoffs pulse Heron -> team -> Heron -> PMS */
.flow-core{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:34px;justify-self:center}
.flow-team{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-pill);padding:5px 12px 5px 5px;box-shadow:var(--shadow-sm);white-space:nowrap;transition:border-color var(--duration-slow) var(--ease-standard),box-shadow var(--duration-slow) var(--ease-standard)}
.team-av{display:flex}
.team-av .ini{width:24px;height:24px;border-radius:50%;border:2px solid #fff;font-size:8.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.team-av .ini + .ini{margin-left:-7px}
.team-av .hs{background:#FFF1DE;color:#B45A00}.team-av .pn{background:#E7F5EC;color:#1C7A45}.team-av .km{background:#FDE8F0;color:#B8175A}
.team-txt{display:flex;flex-direction:column;line-height:1.2}
.team-txt b{font-size:12px;font-weight:600;color:var(--ink)}
.team-txt span{font-size:10.5px;color:var(--grey-300)}
.flow-team.on-team{border-color:#F5C48A;box-shadow:0 0 0 5px rgba(224,138,0,.12)}
.flow-lines path.team-link{stroke:#F2D3AC}
.flow-lines path.on-team{stroke:#F0A94E;stroke-dasharray:none}
.flow-dot.team{fill:#E08A00;filter:drop-shadow(0 0 4px rgba(224,138,0,.4))}
.flow-legend i.team{background:#E08A00}
/* legend */
.flow-legend{grid-column:1/-1;position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--muted-2);padding-top:4px}
.flow-legend span{display:inline-flex;align-items:center;gap:7px}
.flow-legend i{width:7px;height:7px;border-radius:50%}
.flow-legend i.in{background:var(--brand-primary)}
.flow-legend i.outb{background:var(--pink-300)}
/* narrow: stack patient / channels / Heron / PMS vertically */
@container (max-width: 500px){
  .flow{grid-template-columns:1fr;row-gap:40px}
  .flow-patient{flex-direction:row;justify-self:center}
  .flow-in{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .flow-in .flow-label{grid-column:1/-1}
  .chan{padding-right:10px}
  .hub-label{top:50%;left:100%;transform:translateY(-50%);margin:0 0 0 16px}
  .flow-core{flex-direction:row;gap:40px}
  .flow-legend{flex-direction:column;row-gap:6px}
}
@media(prefers-reduced-motion:reduce){.chan,.out,.flow-patient .av{transition:none}}