/* ============================================================
   Sculpted MD OS — design system
   21 clinics · 6 states · medical weight loss, hormone, aesthetics
   Brand tokens lifted from sculptedmd.com's live theme.
   ============================================================ */

:root {
  /* brand — aqua is the action colour, never a surface */
  --aqua:      #3fa9b5;
  --aqua-hi:   #50b5c1;
  --aqua-dp:   #33788b;
  --aqua-dk:   #2a6272;
  --aqua-1:    #EDF8FA;
  --aqua-2:    #D3ECF0;
  --aqua-3:    #A9DBE2;
  --cyan:      #6decff;

  /* slate — the clinical foundation */
  --slate:     #1f2d35;
  --slate-2:   #2a3b45;
  --slate-3:   #354a55;
  --slate-t:   #93A9B3;
  --slate-t2:  #627984;

  /* status */
  --ok:        #0F8A63;  --ok-1:   #E6F5EF;
  --warn:      #A9760B;  --warn-1: #FCF3E1;
  --bad:       #C0402A;  --bad-1:  #FAEAE7;
  --info:      #3B62B8;  --info-1: #EAEFFA;
  --plum:      #7A4FB5;  --plum-1: #F1EBFA;

  /* neutrals */
  --canvas:    #F3F6F7;
  --surface:   #FFFFFF;
  --surface-2: #FAFCFC;
  --border:    #E1E8EA;
  --border-2:  #EDF1F3;
  --border-3:  #F2F5F6;
  --text:      #16232A;
  --text-2:    #55686F;
  --text-3:    #85979E;

  /* system */
  --r-xs: 4px; --r-sm: 6px; --r: 9px; --r-lg: 13px; --r-xl: 18px;
  --sh-1: 0 1px 2px rgba(31,45,53,.06), 0 1px 1px rgba(31,45,53,.04);
  --sh-2: 0 2px 6px rgba(31,45,53,.07), 0 1px 2px rgba(31,45,53,.05);
  --sh-3: 0 12px 32px rgba(31,45,53,.13), 0 2px 8px rgba(31,45,53,.06);
  --sh-4: 0 24px 64px rgba(31,45,53,.22);
  --rail-w: 15.5rem;
  --rail-w-c: 4.25rem;
  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --head: "Raleway", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--head); font-weight: 700; letter-spacing: -.014em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--aqua-2); }

/* base icon size — component rules are more specific and win */
.ic { width: 15px; height: 15px; flex: 0 0 auto; vertical-align: -2px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C6D3D7; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #AABBC1; background-clip: content-box; border: 3px solid transparent; }

/* ============================================================ demo banner */
.demo-flag {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 16px; background: var(--slate); color: #C9DBE1;
  font-size: 11.5px; letter-spacing: .005em;
}
.demo-flag svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--aqua-hi); }
.demo-flag b { color: #fff; font-weight: 600; }

/* ============================================================ shell */
.app { display: flex; height: calc(100vh - 30px); overflow: hidden; }

.rail {
  width: var(--rail-w); flex: 0 0 var(--rail-w);
  background: var(--slate); display: flex; flex-direction: column;
  transition: width .18s ease, flex-basis .18s ease;
  position: relative; z-index: 40;
}
.app.rail-collapsed .rail { width: var(--rail-w-c); flex-basis: var(--rail-w-c); }

.rail-brand { display: flex; flex-direction: column; align-items: flex-start; padding: 16px 14px 13px; }
/* The client's ACTUAL logo, not an approximation of it. Their wordmark is light grey and their
   helix mark is aqua, both drawn for a light page - on the slate rail the grey reads as white,
   which is why the rail can carry the full lockup without a recoloured variant.
   Collapsed rail swaps the lockup for the helix mark alone. */
.brand-lockup { width: 168px; height: auto; display: block; }
.brand-mark { width: 26px; height: auto; display: none; }
.brand-os {
  display: block; color: var(--slate-t2); font-size: 8.5px; letter-spacing: .17em;
  text-transform: uppercase; font-weight: 700; margin-top: 5px; padding-left: 2px;
}
.app.rail-collapsed .brand-lockup, .app.rail-collapsed .brand-os { display: none; }
.app.rail-collapsed .brand-mark { display: block; }
.brand-text { min-width: 0; }
.brand-text .bt-1 { font-family: var(--head); color: #fff; font-weight: 700; font-size: 13.5px; letter-spacing: .04em; line-height: 1.15; white-space: nowrap; }
.brand-text .bt-2 { color: var(--slate-t2); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; margin-top: 1px; white-space: nowrap; }
.app.rail-collapsed .brand-text { display: none; }
.app.rail-collapsed .rail-brand { align-items: center; padding-left: 0; padding-right: 0; }

.rail-nav { flex: 1; overflow-y: auto; padding: 2px 8px 12px; }
.rail-nav::-webkit-scrollbar-thumb { background: #3A4E58; background-clip: content-box; border: 3px solid transparent; }
/* The divider between "what every CRM has" and "what only this business gets". The rule sits
   on the label row itself so the label reads as sitting ON the line, not floating under it. */
.nav-split {
  display: flex; align-items: center; gap: 9px; margin: 15px 10px 7px;
  color: var(--slate-t2); font-size: 9.5px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; white-space: nowrap;
}
.nav-split::after { content: ""; flex: 1; height: 1px; background: var(--slate-3); }
.app.rail-collapsed .nav-split { margin: 12px 8px; }
.app.rail-collapsed .nav-split span { display: none; }
.app.rail-collapsed .nav-split::after { flex: 1; }

/* Nested capability rows: a tick rail replaces the icon so children read as belonging to the
   parent object rather than competing with it for scan weight. */
.nav-kids { position: relative; margin: 1px 0 3px; }
.nav-kids::before {
  content: ""; position: absolute; left: 18px; top: 2px; bottom: 6px;
  width: 1px; background: var(--slate-3);
}
.nav-item.is-child { padding-left: 10px; font-size: 12.5px; font-weight: 500; color: var(--slate-t2); }
.nav-item.is-child .nav-tick {
  width: 16px; height: 16px; flex: 0 0 16px; position: relative;
}
.nav-item.is-child .nav-tick::after {
  content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 1px;
  background: var(--slate-3); transform: translateY(-50%);
}
.nav-item.is-child:hover { color: #E4EEF1; }
.nav-item.is-child.on { color: #fff; font-weight: 600; }
.nav-item.is-child.on .nav-tick::after { background: var(--aqua-hi); width: 9px; }
/* collapsed rail has no room for hierarchy - children flatten to plain icon rows */
.app.rail-collapsed .nav-kids::before { display: none; }
.app.rail-collapsed .nav-item.is-child { display: none; }
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 7.5px 10px; border-radius: var(--r-sm); color: var(--slate-t);
  font-size: 13px; font-weight: 500; position: relative; margin-bottom: 1px;
  transition: background .12s ease, color .12s ease;
}
.nav-item .ic { width: 16px; height: 16px; opacity: .85; }
.nav-item:hover { background: var(--slate-2); color: #E4EEF1; }
.nav-item.on { background: var(--slate-3); color: #fff; font-weight: 600; }
.nav-item.on .ic { opacity: 1; color: var(--aqua-hi); }
.nav-item.on::before {
  content: ""; position: absolute; left: -8px; top: 7px; bottom: 7px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--aqua-hi);
}
.nav-item .nav-label { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; }
.nav-count {
  font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 9px;
  background: var(--bad); color: #fff; letter-spacing: .01em;
}
.nav-count.q { background: var(--slate-3); color: var(--slate-t); }
.app.rail-collapsed .nav-label, .app.rail-collapsed .nav-count { display: none; }
.app.rail-collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }

.rail-foot { padding: 10px 10px 12px; border-top: 1px solid var(--slate-2); }
.rail-user { display: flex; align-items: center; gap: 9px; padding: 6px 6px; border-radius: var(--r-sm); width: 100%; }
.rail-user:hover { background: var(--slate-2); }
.rail-user .ru-t { min-width: 0; text-align: left; }
.rail-user .ru-1 { color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.rail-user .ru-2 { color: var(--slate-t2); font-size: 10.5px; white-space: nowrap; }
.app.rail-collapsed .ru-t { display: none; }
.app.rail-collapsed .rail-user { justify-content: center; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ============================================================ topbar */
.topbar {
  height: 54px; flex: 0 0 54px; background: var(--surface);
  border-bottom: 1px solid var(--border); display: flex; align-items: center;
  gap: 8px; padding: 0 14px 0 10px; position: relative; z-index: 30;
}
.icon-btn {
  width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center;
  color: var(--text-2); position: relative; flex: 0 0 32px;
}
.icon-btn:hover { background: var(--border-3); color: var(--text); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn .dot { position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--bad); border: 1.5px solid #fff; }
.rail-toggle { display: none; }

.omnibox {
  display: flex; align-items: center; gap: 8px; height: 33px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2);
  color: var(--text-3); font-size: 12.5px; min-width: 180px; max-width: 320px; flex: 1 1 260px;
}
.omnibox:hover { border-color: var(--aqua-3); background: #fff; }
.omnibox svg { width: 14px; height: 14px; flex: 0 0 14px; }
.omnibox span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.omnibox kbd {
  font-family: var(--font); font-size: 10px; font-weight: 600; color: var(--text-3);
  border: 1px solid var(--border); border-radius: var(--r-xs); padding: 1px 4px; background: #fff;
}
.topbar-spacer { flex: 1 1 auto; }

/* ---- location scope switcher: the control that makes this multi-site */
.scope {
  display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 10px 0 9px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
  flex: 0 0 auto; max-width: 250px;
}
.scope:hover { border-color: var(--aqua-3); }
.scope.open { border-color: var(--aqua); box-shadow: 0 0 0 3px var(--aqua-1); }
.scope-pin { width: 22px; height: 22px; border-radius: var(--r-xs); background: var(--aqua-1); display: grid; place-items: center; flex: 0 0 22px; }
.scope-pin svg { width: 13px; height: 13px; color: var(--aqua-dp); }
.scope-t { min-width: 0; text-align: left; }
.scope-t .s1 { font-size: 12.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope-t .s2 { font-size: 10px; color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; line-height: 1.2; }
.scope > svg.chev { width: 13px; height: 13px; color: var(--text-3); flex: 0 0 13px; }

.scope-menu {
  position: absolute; top: 48px; right: 14px; width: 292px; max-height: 74vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); padding: 6px; z-index: 60; display: none;
}
.scope-menu.open { display: block; }
.scope-menu .sm-head {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); padding: 9px 10px 5px;
}
.scope-opt {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px;
  border-radius: var(--r-sm); font-size: 12.5px; text-align: left;
}
.scope-opt:hover { background: var(--aqua-1); }
.scope-opt.on { background: var(--aqua-1); font-weight: 600; }
.scope-opt .so-n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope-opt .so-m { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.scope-opt .so-tick { width: 14px; height: 14px; color: var(--aqua-dp); opacity: 0; flex: 0 0 14px; }
.scope-opt.on .so-tick { opacity: 1; }
.scope-opt .so-st { font-size: 9.5px; font-weight: 700; color: var(--text-3); width: 20px; flex: 0 0 20px; letter-spacing: .04em; }

.avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff; flex: 0 0 30px; letter-spacing: .02em;
}
.avatar.sm { width: 24px; height: 24px; flex: 0 0 24px; font-size: 9.5px; }
.avatar.lg { width: 40px; height: 40px; flex: 0 0 40px; font-size: 14px; }
.a1 { background: linear-gradient(140deg, #3fa9b5, #2a6272); }
.a2 { background: linear-gradient(140deg, #7A4FB5, #4A2E75); }
.a3 { background: linear-gradient(140deg, #0F8A63, #0A5C42); }
.a4 { background: linear-gradient(140deg, #A9760B, #7A5408); }
.a5 { background: linear-gradient(140deg, #3B62B8, #26417C); }
.a6 { background: linear-gradient(140deg, #C0402A, #8A2D1E); }

/* ============================================================ page */
.page { flex: 1; overflow-y: auto; overflow-x: hidden; }
.page-in { padding: 20px 24px 40px; max-width: 1560px; }
.page-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head .ph-t { flex: 1; min-width: 220px; }
.page-head h1 { font-size: 20px; letter-spacing: -.02em; }
.page-head .ph-sub { color: var(--text-2); font-size: 12.5px; margin-top: 3px; }
.page-head .ph-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px;
  border-radius: var(--r-sm); font-size: 12.5px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover { background: var(--surface-2); border-color: #CFD9DC; }
.btn svg { width: 14px; height: 14px; }
.btn-pri { background: var(--aqua-dp); border-color: var(--aqua-dp); color: #fff; }
.btn-pri:hover { background: var(--aqua-dk); border-color: var(--aqua-dk); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 11.5px; border-radius: var(--r-xs); }
.btn-sm svg { width: 13px; height: 13px; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--border-3); color: var(--text); }
.btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-danger:hover { background: #A5361F; border-color: #A5361F; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---- the one KPI band. never a row of four cards. */
.band {
  display: flex; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: 18px;
}
.band-cell { flex: 1; padding: 13px 18px; border-right: 1px solid var(--border-2); min-width: 0; }
.band-cell:last-child { border-right: 0; }
.band-k { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.band-v { font-family: var(--head); font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin-top: 3px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.band-v small { font-size: 12px; font-weight: 600; color: var(--text-3); letter-spacing: 0; }
.band-n { font-size: 11px; color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.band-v.is-bad { color: var(--bad); }
.band-v.is-ok  { color: var(--ok); }
.band-v.is-warn{ color: var(--warn); }
.band-cell.accent { background: linear-gradient(180deg, var(--aqua-1), #fff 70%); }

/* ============================================================ surfaces */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.panel-h { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border-2); }
.panel-h h3 { font-size: 13.5px; font-weight: 700; letter-spacing: -.008em; }
.panel-h .ph-n { font-size: 11.5px; color: var(--text-3); }
.panel-h .sp { flex: 1; }
.panel-b { padding: 16px; }
.panel-b.tight { padding: 0; }
.panel-f { padding: 11px 16px; border-top: 1px solid var(--border-2); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }

.grid { display: grid; gap: 16px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-12 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

.sect-label {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px;
}

/* ============================================================ chips */
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px;
  border-radius: var(--r-xs); font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  background: var(--border-3); color: var(--text-2); white-space: nowrap;
}
.chip svg { width: 11px; height: 11px; }
.chip.ok   { background: var(--ok-1);   color: var(--ok); }
.chip.warn { background: var(--warn-1); color: var(--warn); }
.chip.bad  { background: var(--bad-1);  color: var(--bad); }
.chip.info { background: var(--info-1); color: var(--info); }
.chip.plum { background: var(--plum-1); color: var(--plum); }
.chip.aqua { background: var(--aqua-1); color: var(--aqua-dp); }
.chip.solid-bad { background: var(--bad); color: #fff; }

.tline { display: flex; align-items: center; gap: 7px; min-width: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num  { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); }
.muted-3 { color: var(--text-3); }
.tiny { font-size: 11px; }
.strong { font-weight: 600; }

/* ============================================================ tables */
.tbl { font-size: 12.5px; }
.tbl th {
  text-align: left; font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-3); padding: 9px 14px;
  border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface-2);
}
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--border-3); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr.clickable:hover { background: var(--aqua-1); cursor: pointer; }
.tbl td.r, .tbl th.r { text-align: right; }
.tbl-wrap { overflow-x: auto; }

/* ============================================================ master / detail
   Every queue in this product is a triage list plus one detail pane.
   Never a vertical stack of near-identical record cards.
*/
.md {
  display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; min-height: 560px;
}
.md-list { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; }
.md-list-h {
  padding: 11px 14px; border-bottom: 1px solid var(--border-2); background: var(--surface-2);
  display: flex; align-items: center; gap: 8px;
}
.md-list-h .mlh-t { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.md-list-h .sp { flex: 1; }
.md-scroll { flex: 1; overflow-y: auto; }

.md-row {
  display: block; width: 100%; text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--border-3); border-left: 3px solid transparent;
  transition: background .1s ease;
}
.md-row:hover { background: var(--surface-2); }
.md-row.on { background: var(--aqua-1); border-left-color: var(--aqua); }
.md-row-top { display: flex; align-items: baseline; gap: 8px; }
.md-row-top .mr-n { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-row-top .mr-v { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.md-row-sub { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11px; color: var(--text-2); }
.md-row-sub .dotsep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); flex: 0 0 3px; }

.md-pane { display: flex; flex-direction: column; min-width: 0; overflow-y: auto; }
.md-pane-h { padding: 16px 20px 14px; border-bottom: 1px solid var(--border-2); }
.md-pane-b { padding: 18px 20px; flex: 1; }
.md-pane-f {
  padding: 13px 20px; border-top: 1px solid var(--border-2); background: var(--surface-2);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.md-empty { display: grid; place-items: center; padding: 60px 20px; color: var(--text-3); font-size: 12.5px; text-align: center; }

/* ============================================================ RUNWAY BAR
   The signature component. One axis: last dispense → supply out →
   next appointment. The uncovered stretch is drawn in red.
*/
.runway { display: block; width: 100%; }
.runway-track {
  position: relative; height: 26px; border-radius: var(--r-xs);
  background: var(--border-3); overflow: hidden;
}
.runway-supply {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, var(--aqua-3), var(--aqua-2));
  border-right: 2px solid var(--aqua-dp);
}
.runway-gap {
  position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(135deg, #F6D9D3 0 5px, #FAEAE7 5px 10px);
  border-right: 2px solid var(--bad);
}
.runway-today {
  position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--slate);
  z-index: 3;
}
.runway-today::after {
  content: ""; position: absolute; top: -3px; left: -3px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--slate);
}
.runway-appt {
  position: absolute; top: 3px; bottom: 3px; width: 3px; border-radius: 2px;
  background: var(--slate-3); z-index: 2;
}
.runway-lbl {
  display: flex; justify-content: space-between; margin-top: 5px;
  font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.runway-lbl b { color: var(--text-2); font-weight: 600; }
.runway-gapnote {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--bad);
}
.runway-gapnote svg { width: 13px; height: 13px; }
.runway-gapnote.covered { color: var(--ok); }

/* compact runway used inside list rows */
.runway.mini .runway-track { height: 8px; border-radius: 4px; }
.runway.mini .runway-lbl { display: none; }
.runway.mini .runway-today::after { display: none; }

/* ============================================================ TITRATION LADDER
   GLP-1 and TRT dosing is a staircase. Draw the staircase.
*/
.ladder { display: flex; align-items: flex-end; gap: 3px; height: 46px; }
.ladder-step {
  flex: 1; min-width: 0; border-radius: 3px 3px 0 0;
  background: var(--border-2); position: relative;
  display: flex; align-items: flex-start; justify-content: center;
  transition: background .15s ease;
}
.ladder-step.done { background: var(--aqua-2); }
.ladder-step.here { background: var(--aqua-dp); box-shadow: 0 0 0 2px var(--aqua-1); }
.ladder-step.next { background: repeating-linear-gradient(135deg, #E8EFF1 0 4px, #F4F8F9 4px 8px); }
.ladder-dose {
  position: absolute; bottom: -17px; left: 50%; transform: translateX(-50%);
  font-size: 9.5px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ladder-step.here .ladder-dose { color: var(--aqua-dp); font-weight: 700; }
.ladder-wrap { padding-bottom: 20px; }
.ladder-cap { display: flex; align-items: baseline; gap: 7px; margin-bottom: 9px; }
.ladder-cap .lc-v { font-family: var(--head); font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.ladder-cap .lc-u { font-size: 11.5px; color: var(--text-2); }

/* ============================================================ LAB MARKER STRIP
   Reference band shaded, patient value plotted on it.
   Replaces a table of numbers a provider has to interpret.
*/
.marker { display: grid; grid-template-columns: 130px minmax(0,1fr) 78px; gap: 12px; align-items: center; padding: 7px 0; }
.marker-n { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marker-track { position: relative; height: 20px; }
.marker-rail { position: absolute; top: 8px; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--border-2); }
.marker-band { position: absolute; top: 6px; height: 8px; border-radius: 3px; background: var(--ok-1); border: 1px solid #BEE3D4; }
.marker-pt {
  position: absolute; top: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--ok); border: 2.5px solid #fff; box-shadow: 0 1px 3px rgba(31,45,53,.3);
  transform: translateX(-7px); z-index: 2;
}
.marker-pt.out { background: var(--bad); }
.marker-pt.edge { background: var(--warn); }
.marker-v { font-size: 12px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.marker-v.out { color: var(--bad); }
.marker-v.edge { color: var(--warn); }
.marker-v small { font-weight: 500; color: var(--text-3); font-size: 10px; }
.marker-rng { font-size: 9.5px; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================ CAPACITY COLUMNS
   One column per clinic. The site's own bookable ceiling is drawn
   across; demand it could not take is stacked above the line.
*/
/* The horizontal scroll lives on the WRAPPER, never on .capstrip itself: overflow-x on the
   strip computes overflow-y to auto as well, which clips the rotated clinic labels that sit
   below the baseline at bottom:-30px. Every column would still pass a count assertion. */
.capstrip { display: flex; align-items: flex-end; gap: 5px; height: 190px; padding-top: 34px; position: relative; overflow: visible; min-width: 646px; }
.capcol { flex: 1 1 0; min-width: 26px; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; }
.capcol-over {
  height: var(--over, 0px); background: repeating-linear-gradient(135deg, #E8A092 0 4px, #F3C4B9 4px 8px);
  border-radius: 3px 3px 0 0; border: 1px solid #D9705B; border-bottom: 0;
}
.capcol-ceil { height: 0; border-top: 2px dashed var(--slate-3); margin: 0; }
.capcol-stack { height: var(--stack, 60px); display: flex; flex-direction: column; justify-content: flex-end; border-radius: 0 0 3px 3px; overflow: hidden; background: var(--border-3); }
.capcol-blocked { height: var(--blocked, 0px); background: #D8E1E4; }
.capcol-booked  { height: var(--booked, 0px); background: linear-gradient(180deg, var(--aqua-hi), var(--aqua-dp)); }
.capcol.lo .capcol-booked { background: linear-gradient(180deg, #B9CBD1, #8CA5AD); }
.capcol-lbl {
  position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%) rotate(-45deg);
  transform-origin: top left; font-size: 9.5px; color: var(--text-3); white-space: nowrap;
}
.capcol:hover .capcol-lbl { color: var(--text); font-weight: 600; }
.capcol.sel .capcol-booked { box-shadow: inset 0 0 0 2px var(--slate); }
.capstrip-wrap { padding-bottom: 46px; overflow-x: auto; }
.capcol-pct {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-size: 9.5px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.capcol.hot .capcol-pct { color: var(--bad); }
.capcol.lo .capcol-pct { color: var(--warn); }

/* ============================================================ FLOW RAIL
   Automation flows drawn as a flow, not a settings list.
*/
.flow { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 4px 0 10px; }
/* set by markScrollRails() only while content remains past the right edge */
.rail-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
             mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.flow-node {
  flex: 0 0 auto; width: 156px; padding: 10px 11px; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface); position: relative;
}
.flow-node + .flow-node { margin-left: 26px; }
.flow-node + .flow-node::before {
  content: ""; position: absolute; left: -26px; top: 50%; width: 26px; height: 1.5px;
  background: var(--border);
}
.flow-node + .flow-node::after {
  content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  border-left: 5px solid var(--border); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.flow-k {
  display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px;
}
.flow-k svg { width: 11px; height: 11px; }
.flow-l { font-size: 12px; font-weight: 600; line-height: 1.3; }
.flow-d { font-size: 10.5px; color: var(--text-2); margin-top: 4px; line-height: 1.4; }
.flow-node.is-gate { border-color: #E6C98A; background: var(--warn-1); }
.flow-node.is-gate .flow-k { color: var(--warn); }
.flow-node.is-trigger { border-color: var(--aqua-3); background: var(--aqua-1); }
.flow-node.is-trigger .flow-k { color: var(--aqua-dp); }
.flow-node.is-wait { background: var(--surface-2); width: 106px; }
.flow-node.is-end { border-style: dashed; }

/* ============================================================ program cycle dots */
.cycle { display: flex; align-items: center; gap: 3px; }
.cycle-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-2); }
.cycle-dot.done { background: var(--aqua-3); }
.cycle-dot.here { background: var(--aqua-dp); box-shadow: 0 0 0 2px var(--aqua-1); }

/* ============================================================ reminder ladder (3 dots) */
.rungs { display: inline-flex; align-items: center; gap: 3px; }
.rung { width: 5px; height: 5px; border-radius: 50%; background: var(--border-2); }
.rung.on { background: var(--aqua-dp); }

/* ============================================================ pipeline */
.pipe { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.pipe-col { flex: 0 0 234px; display: flex; flex-direction: column; }
.pipe-h {
  display: flex; align-items: center; gap: 7px; padding: 9px 11px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r) var(--r) 0 0;
}
.pipe-h .pn { font-size: 12px; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipe-h .pc { font-size: 10.5px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.bolt {
  width: 22px; height: 22px; border-radius: var(--r-xs); display: grid; place-items: center;
  background: var(--warn-1); color: var(--warn); flex: 0 0 22px;
}
.bolt:hover { background: #F7E4BC; }
.bolt svg { width: 13px; height: 13px; }
.pipe-b {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-top: 0;
  border-radius: 0 0 var(--r) var(--r); padding: 8px; display: flex; flex-direction: column; gap: 7px;
  min-height: 180px;
}
.lead {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 9px 10px; text-align: left; width: 100%;
}
.lead:hover { border-color: var(--aqua-3); box-shadow: var(--sh-1); }
.lead-n { font-size: 12.5px; font-weight: 600; }
.lead-m { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 10.5px; color: var(--text-2); }
.lead-v { font-size: 11.5px; font-weight: 700; color: var(--aqua-dp); font-variant-numeric: tabular-nums; }

/* ============================================================ inbox */
.thread-row { display: flex; gap: 11px; padding: 11px 14px; border-bottom: 1px solid var(--border-3); width: 100%; text-align: left; align-items: flex-start; border-left: 3px solid transparent; }
.thread-row:hover { background: var(--surface-2); }
.thread-row.on { background: var(--aqua-1); border-left-color: var(--aqua); }
.thread-row.unread .tr-n { font-weight: 700; }
.tr-body { flex: 1; min-width: 0; }
.tr-top { display: flex; align-items: baseline; gap: 8px; }
.tr-n { font-size: 12.5px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-t { font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.tr-p { font-size: 11.5px; color: var(--text-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-c { display: flex; align-items: center; gap: 5px; margin-top: 4px; }

.bubble { max-width: 76%; padding: 9px 12px; border-radius: 13px; font-size: 12.5px; line-height: 1.45; }
.bubble.them { background: var(--border-3); border-bottom-left-radius: 4px; align-self: flex-start; }
.bubble.us { background: var(--aqua-dp); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.bubble.draft { background: var(--warn-1); border: 1px dashed #E6C98A; color: var(--text); align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble-when { font-size: 10px; color: var(--text-3); margin-top: 4px; }
.msgs { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; }

/* ============================================================ portal preview */
.portal-frame {
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(180deg, #F7FBFC, #fff 200px);
}
.portal-top { background: var(--slate); padding: 14px 20px; display: flex; align-items: center; gap: 11px; }
.portal-lockup { width: 150px; height: auto; display: block; }
.portal-body { padding: 22px 24px 26px; }
.portal-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.portal-stat { }
.portal-stat .psv { font-family: var(--head); font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.portal-stat .psk { font-size: 10.5px; color: var(--text-2); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }

/* ============================================================ progress */
.bar { height: 6px; border-radius: 3px; background: var(--border-2); overflow: hidden; }
.bar-f { height: 100%; border-radius: 3px; background: var(--aqua-dp); }
.bar-f.ok { background: var(--ok); }
.bar-f.warn { background: var(--warn); }
.bar-f.bad { background: var(--bad); }

/* ============================================================ evidence list */
.evid { display: flex; flex-direction: column; gap: 7px; }
.evid-i { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; color: var(--text-2); line-height: 1.45; }
.evid-i .ei-b { width: 5px; height: 5px; border-radius: 50%; background: var(--aqua-3); margin-top: 7px; flex: 0 0 5px; }

.boundary {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px;
  border: 1px solid #E6C98A; background: var(--warn-1); border-radius: var(--r); font-size: 12px; line-height: 1.45;
}
.boundary svg { width: 15px; height: 15px; color: var(--warn); flex: 0 0 15px; margin-top: 1px; }
.boundary b { font-weight: 700; }

.protocol {
  padding: 12px 14px; border-radius: var(--r); background: var(--aqua-1);
  border: 1px solid var(--aqua-2); font-size: 12.5px; line-height: 1.5;
}
.protocol .pr-k { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--aqua-dp); margin-bottom: 5px; }

.quote {
  padding: 12px 14px; border-radius: var(--r); background: var(--surface-2);
  border: 1px solid var(--border-2); border-left: 3px solid var(--aqua-3);
  font-size: 12.5px; line-height: 1.55; color: var(--text-2);
}

/* ============================================================ drawer / modal / toast */
.scrim {
  position: fixed; inset: 0; background: rgba(22,35,42,.42); opacity: 0; pointer-events: none;
  transition: opacity .18s ease; z-index: 90;
}
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 94vw);
  background: var(--surface); box-shadow: var(--sh-4); z-index: 100;
  transform: translateX(100%); transition: transform .22s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.drawer.on { transform: none; }
.drawer-h { padding: 16px 20px 14px; border-bottom: 1px solid var(--border-2); display: flex; align-items: flex-start; gap: 12px; }
.drawer-h h3 { font-size: 15px; }
.drawer-h .dh-s { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.drawer-b { flex: 1; overflow-y: auto; padding: 18px 20px; }
.drawer-f { padding: 13px 20px; border-top: 1px solid var(--border-2); background: var(--surface-2); display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }

.modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -48%) scale(.97);
  width: min(560px, 94vw); max-height: 86vh; background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--sh-4); z-index: 100; opacity: 0; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease; display: flex; flex-direction: column;
}
.modal.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.modal-h { padding: 18px 22px 14px; border-bottom: 1px solid var(--border-2); }
.modal-h h3 { font-size: 15px; }
.modal-b { padding: 18px 22px; overflow-y: auto; }
.modal-f { padding: 14px 22px; border-top: 1px solid var(--border-2); background: var(--surface-2); border-radius: 0 0 var(--r-xl) var(--r-xl); display: flex; gap: 9px; justify-content: flex-end; }

.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: var(--r);
  background: var(--slate); color: #fff; font-size: 12.5px; box-shadow: var(--sh-3);
  animation: tin .22s cubic-bezier(.4,0,.2,1); max-width: 90vw;
}
.toast svg { width: 15px; height: 15px; color: #6FD8B4; flex: 0 0 15px; }
@keyframes tin { from { opacity: 0; transform: translateY(10px); } }

/* ============================================================ tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; }
.tab {
  padding: 8px 13px; font-size: 12.5px; font-weight: 600; color: var(--text-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.on { color: var(--aqua-dp); border-bottom-color: var(--aqua-dp); }

.segs { display: inline-flex; padding: 2px; background: var(--border-3); border-radius: var(--r-sm); gap: 2px; }
.seg { padding: 5px 11px; font-size: 11.5px; font-weight: 600; border-radius: var(--r-xs); color: var(--text-2); white-space: nowrap; }
.seg.on { background: #fff; color: var(--text); box-shadow: var(--sh-1); }

/* ============================================================ empty / misc */
.empty { display: grid; place-items: center; gap: 8px; padding: 44px 20px; text-align: center; }
.empty svg { width: 26px; height: 26px; color: var(--text-3); }
.empty .e-t { font-size: 13px; font-weight: 600; }
.empty .e-s { font-size: 12px; color: var(--text-2); max-width: 380px; }

.split { display: flex; align-items: center; gap: 10px; }
.split .sp { flex: 1; }
.stack { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-10 { gap: 10px; } .gap-14 { gap: 14px; } .gap-18 { gap: 18px; }
.mt-6 { margin-top: 6px; } .mt-10 { margin-top: 10px; } .mt-14 { margin-top: 14px; }
.mt-18 { margin-top: 18px; } .mb-10 { margin-bottom: 10px; } .mb-14 { margin-bottom: 14px; }
.wrap { flex-wrap: wrap; }

/* ============================================================ responsive */
@media (max-width: 1180px) {
  .g-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-21, .g-12 { grid-template-columns: minmax(0,1fr); }
  .band { flex-wrap: wrap; }
  .band-cell { flex: 1 1 33%; border-bottom: 1px solid var(--border-2); }
}
@media (max-width: 900px) {
  .md { grid-template-columns: minmax(0,1fr); min-height: 0; }
  .md-list { border-right: 0; border-bottom: 1px solid var(--border); max-height: 340px; }
  .md.showing-detail .md-list { display: none; }
  .md-back { display: inline-flex !important; }
}
@media (max-width: 860px) {
  .rail {
    position: fixed; top: 30px; bottom: 0; left: 0; z-index: 95;
    transform: translateX(-100%); transition: transform .2s cubic-bezier(.4,0,.2,1);
    width: var(--rail-w); flex-basis: var(--rail-w);
  }
  .app.nav-open .rail { transform: none; }
  .app.rail-collapsed .rail { width: var(--rail-w); flex-basis: var(--rail-w); }
  .app.rail-collapsed .brand-text, .app.rail-collapsed .nav-label,
  .app.rail-collapsed .nav-count, .app.rail-collapsed .ru-t { display: block; }
  .app.rail-collapsed .nav-item { justify-content: flex-start; padding-left: 10px; padding-right: 10px; }
  .app.rail-collapsed .nav-group-label { opacity: 1; height: auto; padding: 13px 10px 5px; }
  .rail-toggle { display: grid; }
  #collapse-btn { display: none !important; }
  .mobile-scrim {
    position: fixed; inset: 30px 0 0 0; background: rgba(22,35,42,.42); z-index: 94;
    opacity: 0; pointer-events: none; transition: opacity .18s;
  }
  .app.nav-open .mobile-scrim { opacity: 1; pointer-events: auto; }
  .page-in { padding: 16px 14px 40px; }
  .g-2 { grid-template-columns: minmax(0,1fr); }
  .band-cell { flex: 1 1 50%; }
  .omnibox { display: none; }
  .scope { max-width: 190px; }
  .scope-menu { right: 8px; left: 8px; width: auto; }
  .page-head h1 { font-size: 18px; }
}
@media (max-width: 560px) {
  .band-cell { flex: 1 1 100%; }
  .marker { grid-template-columns: 100px minmax(0,1fr) 66px; gap: 8px; }
  .demo-flag { font-size: 10.5px; padding: 6px 12px; }
  .demo-flag span b { display: block; }
}
.md-back { display: none; }

@media print { .rail, .topbar, .demo-flag { display: none; } }

/* =====================================================================
   AGENT BENCH  (AI desk → Agents)
   An agent is not a document, so it should not be drawn as a card. Each row is the path
   the work physically travels — what it may read, what it does, what it produces — running
   left to right into a hatched barrier it cannot cross without a person. The boundary is a
   wall in the diagram rather than a sentence in a yellow box.
   All classes are namespaced agx- : .stop/.bar/.tag/.no would collide with existing utilities
   and silently inherit their display and padding.
   ===================================================================== */
.agx-lede { font-size: 12.5px; color: var(--text-2); max-width: 68ch; margin: 2px 0 14px; line-height: 1.55; }
.agx-bench { display: flex; flex-direction: column; gap: 10px; }
.agx {
  display: grid; grid-template-columns: 232px minmax(0, 1fr) 250px;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-md);
  overflow: hidden;
}
.agx + .agx { }

/* --- who and when */
.agx-id {
  padding: 15px 16px; border-right: 1px solid var(--border-2); background: var(--surface-2);
  display: flex; flex-direction: column; gap: 9px;
}
.agx-id .avatar { flex: 0 0 auto; }
.agx-id-t { display: flex; flex-direction: column; gap: 3px; }
.agx-name { font-size: 13px; font-weight: 650; line-height: 1.3; }
.agx-when { font-size: 10.5px; color: var(--text-3); line-height: 1.45; display: flex; gap: 5px; align-items: flex-start; }
.agx-when .ic { width: 11px; height: 11px; flex: 0 0 11px; margin-top: 2px; }
.agx-run { margin-top: auto; font-size: 10.5px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.agx-live {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent);
}

/* --- the signal path */
.agx-path {
  display: grid; grid-template-columns: minmax(0,1fr) 18px minmax(0,1.25fr) 18px minmax(0,1fr);
  align-items: stretch; padding: 15px 14px; gap: 0;
}
.agx-st { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.agx-st.is-work {
  padding: 0 13px; border-left: 1px dashed var(--border);
  border-right: 1px dashed var(--border); margin: 0 2px;
}
.agx-k {
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 1px;
}
.agx-k.is-stop { color: var(--bad); }
.agx-job { font-size: 11.5px; line-height: 1.5; color: var(--text-2); margin: 0; }
.agx-tag {
  font-size: 10.5px; line-height: 1.35; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 4px; padding: 2.5px 7px; max-width: 100%;
}
.agx-tag.is-out { background: var(--aqua-1); border-color: var(--aqua-3); color: var(--aqua-dp); }
/* the connector between stations */
.agx-flow { position: relative; align-self: center; height: 1px; }
.agx-flow::before {
  content: ""; position: absolute; left: 1px; right: 6px; top: 0; height: 1px; background: var(--border);
}
.agx-flow::after {
  content: ""; position: absolute; right: 2px; top: -3px;
  border-left: 5px solid var(--border); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
}

/* --- the wall */
.agx-stop { display: flex; align-items: stretch; background: var(--bad-1); }
.agx-bar {
  flex: 0 0 9px;
  background: repeating-linear-gradient(135deg, #D9705B 0 4px, #F3C4B9 4px 8px);
  border-left: 1px solid #D9705B; border-right: 1px solid #D9705B;
}
.agx-stop-b { padding: 15px 15px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.agx-no {
  font-size: 10.5px; line-height: 1.4; color: var(--bad); font-weight: 500;
  position: relative; padding-left: 13px;
}
.agx-no::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 1.5px;
  background: var(--bad); border-radius: 1px;
}
.agx-hand {
  margin-top: auto; padding-top: 8px; font-size: 10.5px; color: var(--text-2);
}
.agx-hand b { color: var(--text); font-size: 12px; }

@media (max-width: 1180px) {
  .agx { grid-template-columns: 210px minmax(0,1fr); }
  .agx-stop { grid-column: 1 / -1; border-top: 1px solid var(--border-2); }
  .agx-bar { flex-basis: 6px; }
}
@media (max-width: 780px) {
  .agx { grid-template-columns: minmax(0,1fr); }
  .agx-id { border-right: 0; border-bottom: 1px solid var(--border-2); }
  .agx-path { grid-template-columns: minmax(0,1fr); gap: 13px; }
  /* the left-to-right arrows become downward steps once the path stacks */
  .agx-flow { height: 13px; justify-self: start; margin-left: 4px; }
  .agx-flow::before { left: 0; right: auto; top: 0; bottom: 4px; width: 1px; height: auto; }
  .agx-flow::after {
    right: auto; left: -3px; top: auto; bottom: -1px;
    border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
    border-top: 5px solid var(--border); border-bottom: 0;
  }
  .agx-st.is-work { border-left: 0; border-right: 0; padding: 0; margin: 0; }
}