.flow-link { display:inline-flex; align-items:center; justify-content:center; border:1px solid #168943; border-radius:8px; padding:5px 12px; background:#42e77b; color:#07371c; font-size:14px; font-weight:800; cursor:pointer; text-transform:uppercase; }
.flow-link:hover,.flow-link:focus-visible { background:#73f39f; outline:2px solid #0d753a; outline-offset:2px; }
.flow-session-dialog { width:min(1120px,96vw); max-height:92dvh; padding:0; border:0; border-radius:20px; color:#16354c; background:#f3f7fa; box-shadow:0 24px 80px #00172a66; }
.flow-session-dialog::backdrop { background:#00172ab8; }
.flow-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:24px; background:linear-gradient(120deg,#071e34,#125977); color:#fff; }
.flow-head span { color:#56d7e5; font-size:13px; letter-spacing:.1em; font-weight:800; }
.flow-head h2 { color:#fff; margin:5px 0; font-size:34px; }
.flow-head p { margin:0; font-size:16px; }
.flow-close { background:#ffffff18; border:1px solid #ffffff44; border-radius:12px; min-width:44px; min-height:44px; font-size:30px; color:#fff; cursor:pointer; }
.flow-body { padding:24px; font-size:16px; }
.flow-session-picker { display:grid; gap:6px; font-weight:700; }
.flow-session-picker select,.flow-controls input { padding:10px; min-height:44px; border:1px solid #c4d6e0; border-radius:8px; background:#fff; color:#16354c; font:inherit; width:100%; box-sizing:border-box; }
.flow-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:18px 0; }
.flow-summary>div { display:grid; gap:8px; padding:16px; border:1px solid #d6e4ec; background:#fff; border-radius:12px; }
.flow-summary span,.flow-chart small,.flow-meta { font-size:14px; color:#536e80; }
.flow-summary strong { font-size:23px; }
.flow-notice { padding:14px; background:#fff6e2; border:1px solid #ebd39a; border-radius:10px; line-height:1.5; }
.flow-controls { display:flex; align-items:end; flex-wrap:wrap; gap:10px; }
.flow-controls label { display:grid; gap:5px; width:140px; font-size:14px; }
.flow-controls button,.flow-reload,#flowRetry,#flowSuggested { border:1px solid #aacad6; background:#fff; padding:10px 16px; min-height:44px; border-radius:8px; color:#125977; font:inherit; cursor:pointer; }
.flow-time-control { padding:16px 0; position:sticky; top:0; z-index:2; background:#f3f7fa; }
.flow-time-control label { display:flex; justify-content:space-between; }
.flow-time-control input { width:100%; min-height:32px; accent-color:#147792; }
.flow-chart { padding:18px; background:#fff; border:1px solid #d6e4ec; border-radius:14px; margin-bottom:16px; overflow:hidden; }
.flow-chart header { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.flow-chart h3 { margin:0 0 8px; font-size:20px; }
.flow-chart svg { display:block; width:100%; height:auto; min-height:130px; }
.flow-chart svg text { font:16px system-ui,sans-serif; fill:#536e80; }
.flow-chart header strong { font-size:18px; text-align:right; }
.flow-chart header strong small { display:block; font-size:14px; }
.flow-notice p { margin:8px 0; }
.flow-notice a { color:#125977; text-decoration:underline; }
#flowZoomError:empty { display:none; }
@media(max-width:600px) { .flow-body,.flow-head { padding:15px; } .flow-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .flow-summary strong { font-size:20px; } .flow-chart { padding:10px; } .flow-chart h3 { font-size:17px; } .flow-chart svg { min-height:110px; } }

.flow-date-picker { margin-bottom:16px; }
.flow-empty { padding:16px; margin-bottom:16px; background:#fff; border:1px solid #d6e4ec; border-radius:12px; line-height:1.5; }
.flow-empty strong { font-size:18px; }
.flow-body p { max-width:100%; overflow-wrap:anywhere; }

.flow-zone-legend { display:flex; flex-wrap:wrap; gap:8px 16px; margin:8px 0 12px; font-size:14px; }
.flow-zone-legend span { display:inline-flex; align-items:center; gap:5px; }
.flow-zone-legend i { width:12px; height:12px; border-radius:3px; }
.flow-chart > small { display:block; margin-top:6px; }
.flow-secondary { margin:16px 0; }
.flow-secondary>summary { cursor:pointer; padding:12px; color:#14536c; font-weight:700; }
.flow-link.hidden { display:none; }
/* FLOW is a staff inspection tool, never part of a printed/shared report. */
@media print {
  .flow-link, [data-flow-date], .report-polar-details, .flow-session-dialog, .flow-session-dialog::backdrop { display:none !important; }
}