/* Provider Portal styles. Lines below the first marker are copied VERBATIM
   from the approved mockup "Provider Layer Shell" (claude.ai/artifact/
   A316QGCXsAHAgj3ir1NAGg, lines 14-349, 2026-10-01). Do not restyle them:
   Steven's rule is that the real app matches the mockup. Real-app-only
   additions (login screens, not-wired states) are at the bottom. */
/* ===== mockup CSS, verbatim ===== */
:root{
  --bg:#F6F1E9; --cream:#FBF8F2; --panel:#FFFFFF; --wash:#EFE8DB;
  --ink:#23211C; --muted:#5F5A4D; --line:#E4DCCE;
  --accent:#4F73B8; --accent-soft:#C6D6EF; --accent-ink:#3E5F9E; --apricot:#F2A862;
  --shadow-sm:0 14px 34px -22px rgba(60,50,30,.5);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Section marks, one dot per area of the chart -- same convention and the
     same hex values as the portal's own nav rail. */
  --d-rx:#B9703C; --d-labs:#3C7E8C; --d-visits:#5A8455; --d-docs:#A8574F; --d-msg:#B15A7A;
  /* Semantic (Navigator candidate reasoning) -- not part of the portal's own
     language, since it has no equivalent feature, kept close in warmth and
     saturation to sit naturally beside the borrowed palette. */
  --red:#B24338; --red-soft:#F6E7E2;
  --amber:#8A5E10; --amber-soft:#FBEBD9;
  --green:#34693F; --green-soft:#E4EFE7;
  color-scheme: light;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; font-size:13.5px; line-height:1.45;
  overflow:hidden;
}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.01em}
button{font-family:inherit; cursor:pointer;}
.app{ height:100%; display:flex; }

/* ---------------- rail (home base) ----------------
   Same shape and hex values as Patient-Portal's own .rail/.nav-item/.dot:
   cream surface, a wash tint for hover/active, one colored dot per section. */
.rail{
  background:var(--cream); color:var(--ink); flex:0 0 auto; width:212px;
  display:flex; flex-direction:column; transition:width .15s var(--ease);
  border-right:1px solid var(--line);
}
.rail.collapsed{ width:56px; }
.rail-top{ display:flex; align-items:center; gap:8px; padding:14px 12px; border-bottom:1px solid var(--line); }
.wm{ font-family:'Fraunces',serif; font-weight:600; font-size:16px; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; }
.wm span{ color:var(--accent-ink); }
.rail.collapsed .wm, .rail.collapsed .nav-label, .rail.collapsed .profile-text{ display:none; }
.rail-toggle{ margin-left:auto; background:none; border:none; color:var(--muted); padding:4px; border-radius:6px; }
.rail-toggle:hover{ background:var(--wash); color:var(--ink); }
.rail.collapsed .rail-toggle{ margin-left:0; }
.rail-nav{ padding:8px; display:flex; flex-direction:column; gap:2px; }
.nav-item{
  display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px;
  background:none; border:none; color:var(--ink); text-align:left; font-size:13.5px; font-weight:500;
  white-space:nowrap; overflow:hidden; transition:background .16s var(--ease);
}
.nav-item:hover{ background:var(--wash); }
.nav-item.active{ background:var(--wash); font-weight:600; }
.dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--dot,var(--accent)); transition:transform .2s var(--ease); }
.nav-item.active .dot{ transform:scale(1.35); }
.rail-spacer{ flex:1; }
.rail-home{ margin:8px 8px 0; padding-top:10px; border-top:1px solid var(--line); }
.profile{ display:flex; align-items:center; gap:9px; padding:12px; border-top:1px solid var(--line); }
.avatar{ width:28px; height:28px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; font-size:12px; flex:0 0 auto; }
.profile-text{ overflow:hidden; white-space:nowrap; }
.profile-name{ font-size:12.5px; font-weight:600; }
.profile-role{ font-size:12px; color:var(--muted); }

/* ---------------- main split ---------------- */
.main{ flex:1; display:flex; min-width:0; }
.center-wrap{ flex:1 1 auto; min-width:280px; display:flex; flex-direction:column; background:var(--bg); }
/* 11px hit area, 1px visible line, centered -- a thin divider is easy to see
   and hard to grab; this keeps the look thin while giving a mouse plenty of
   margin either side. */
.divider{ flex:0 0 auto; width:11px; cursor:col-resize; background:transparent; position:relative; z-index:5; }
.divider:hover::after, .divider.active::after{ background:var(--accent); width:2px; }
.divider::after{ content:""; position:absolute; top:0; bottom:0; left:5px; width:1px; background:var(--line); }
/* Stacked top-to-bottom, like Claude Code's background tasks over terminal --
   not side by side. Each open panel gets the full width; when two are open,
   height splits between them via a horizontal divider. */
.right-wrap{ flex:0 0 auto; display:flex; flex-direction:column; min-width:0; background:var(--panel); border-left:1px solid var(--line); }
.right-wrap.empty{ display:none; }
.right-panel{ flex:1 1 0; min-height:120px; display:flex; flex-direction:column; overflow:hidden; }
.right-panel + .right-panel{ border-top:1px solid var(--line); }
.divider-h{ flex:0 0 auto; height:11px; cursor:row-resize; background:transparent; position:relative; z-index:5; }
.divider-h:hover::after, .divider-h.active::after{ background:var(--accent); height:2px; }
.divider-h::after{ content:""; position:absolute; left:0; right:0; top:5px; height:1px; background:var(--line); }

/* ---------------- top bar ---------------- */
.topbar{ flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:10px 18px; border-bottom:1px solid var(--line); background:var(--panel); }
.crumb{ font-size:12.5px; color:var(--muted); }
.crumb b{ color:var(--ink); font-weight:600; }
.topbar-spacer{ flex:1; }
.chip{ font-size:12px; font-weight:600; padding:3px 9px; border-radius:100px; letter-spacing:.02em; }
.chip.mode-shadow{ background:var(--wash); color:#7A5A1F; }
.pane-scroll{ flex:1; overflow:auto; padding:20px 22px; }
h2.pane-title{ font-size:var(--t-h1,20px); font-weight:600; margin:0 0 4px; }
p.pane-sub{ color:var(--muted); font-size:13px; margin:0 0 16px; max-width:56ch; }

/* ---------------- dashboard: queue table ---------------- */
.qrow{ display:grid; grid-template-columns:34px 1.4fr 1.6fr 100px 90px; gap:10px; align-items:center;
  padding:10px 12px; border-radius:14px; border:1px solid var(--line); background:var(--panel); margin-bottom:8px; cursor:pointer; }
.qrow:hover{ border-color:var(--accent); }
.qrow-head{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); padding:0 12px; margin-bottom:6px; display:grid; grid-template-columns:34px 1.4fr 1.6fr 100px 90px; gap:10px;}
.lane-dot{ width:10px; height:10px; border-radius:50%; }
.lane-trt .lane-dot{ background:var(--d-rx);} .lane-hrt .lane-dot{ background:var(--d-visits);} .lane-weight .lane-dot{ background:var(--d-labs);}
.pname{ font-weight:600; }
.psub{ color:var(--muted); font-size:12.5px; }
.due-badge{ font-size:12px; font-weight:600; padding:2px 8px; border-radius:100px; background:var(--wash); color:var(--muted); width:fit-content; }
.due-badge.today{ background:var(--red-soft); color:var(--red); }
.rx-link{ font-size:12px; color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; font-weight:600; }

/* ---------------- patient list ---------------- */
.plist-row{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; cursor:pointer; }
.plist-row:hover{ background:var(--wash); }
.plist-avatar{ width:32px; height:32px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; font-size:12px; }

/* ---------------- chart left column ----------------
   Replaces the rail entirely when in chart view (Steven's own framing:
   "the leftmost panel" becomes the patient info, not a second column beside
   it) -- same cream surface as the rail, same collapse mechanic, now also
   drag-resizable like the right column. */
.chart-left{ flex:0 0 auto; background:var(--cream); color:var(--ink); display:flex; flex-direction:column; border-right:1px solid var(--line); overflow:hidden; }
.chart-left.collapsed{ width:56px !important; }
.chart-left-top{ display:flex; align-items:center; gap:6px; padding:12px; border-bottom:1px solid var(--line); flex:0 0 auto; }
.chart-left-top .home-btn{ display:flex; align-items:center; gap:8px; background:none; border:none; color:var(--ink); padding:4px; border-radius:8px; font-size:12.5px; font-weight:600; flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-align:left; }
.chart-left-top .home-btn:hover{ background:var(--wash); }
.chart-left.collapsed .home-btn span.label{ display:none; }
.chart-left-top .rail-toggle{ flex:0 0 auto; }
.id-card{ padding:16px; border-bottom:1px solid var(--line); overflow:hidden; }
.chart-left.collapsed .id-card{ padding:12px 0; display:flex; justify-content:center; }
.id-name{ font-family:'Fraunces',serif; font-size:17px; font-weight:600; white-space:nowrap; }
.id-meta{ color:var(--muted); font-size:12px; margin-top:2px; white-space:nowrap; }
.id-facts{ margin-top:12px; display:flex; flex-direction:column; gap:7px; }
.id-fact{ display:flex; justify-content:space-between; font-size:12px; gap:8px; }
.id-fact span:first-child{ color:var(--muted); }
.id-fact span:last-child{ font-weight:600; text-align:right; }
.chart-nav{ padding:10px; display:flex; flex-direction:column; gap:2px; overflow:hidden; }
.chart-nav-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; background:none; border:none; color:var(--ink); font-size:13.5px; font-weight:500; text-align:left; width:100%; white-space:nowrap; }
.chart-nav-item:hover{ background:var(--wash); }
.chart-nav-item.active{ background:var(--wash); font-weight:600; }
.navigator-box{ margin-top:auto; padding:14px; border-top:1px solid var(--line); overflow:hidden; flex:0 0 auto; }
.chart-left.collapsed .navigator-box{ padding:12px 0; display:flex; flex-direction:column; align-items:center; }
.navigator-head{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); font-weight:600; margin-bottom:10px; white-space:nowrap; }
.candidate{ display:flex; align-items:flex-start; gap:8px; padding:7px 8px; border-radius:10px; margin-bottom:4px; }
.candidate:hover{ background:var(--wash); }
.chart-left.collapsed .candidate{ padding:4px 0; margin-bottom:6px; }
.candidate .dot{ margin-top:4px; }
.dot.red{ background:var(--red);} .dot.amber{ background:var(--amber);} .dot.green{ background:var(--green);}
.candidate-name{ font-weight:600; font-size:12.5px; white-space:nowrap; }
.candidate-why{ font-size:12px; color:var(--muted); margin-top:1px; white-space:normal; }
.candidate-source{ font-size:12px; color:var(--accent-ink); margin-top:3px; font-style:italic; }
.navigator-open-btn{ margin-top:10px; width:100%; display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 10px; border-radius:100px; border:1px solid var(--accent); background:var(--accent-soft); color:#1F3A6B; font-size:12px; font-weight:600; }
.chart-left.collapsed .navigator-open-btn{ width:32px; height:32px; padding:0; border-radius:50%; }
.chart-left.collapsed .navigator-open-btn span.label{ display:none; }

/* ---------------- cards, eyebrows, pills, lists -- straight off the portal ---------------- */
.card{ background:var(--cream); border:1px solid var(--line); border-radius:22px; padding:20px; margin-bottom:14px; }
.card:last-child{ margin-bottom:0; }
.eyebrow{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); font-weight:600; }
.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.pill{ font-size:12px; font-weight:600; padding:3px 10px; border-radius:100px; background:var(--accent-soft); color:#1F3A6B; }
.subtabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.subtab{ font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:100px; color:var(--ink); border:1px solid var(--line); background:none; }
.subtab:hover{ border-color:var(--muted); }
.subtab.is-on{ background:var(--wash); color:var(--ink); border-color:transparent; }
.qa-row{ display:flex; gap:10px; padding:8px 0; border-top:1px solid var(--line); font-size:12.5px; }
.qa-row:first-child{ border-top:none; padding-top:0; }
.qa-q{ color:var(--muted); flex:0 0 46%; }
.qa-a{ font-weight:600; flex:1; }

/* Intake + its paired encounter, one time point, collapsed to a single line
   until clicked -- see chartCenter()'s own comment for why these two are
   one card rather than two lists. */
.tp-card{ padding:0; overflow:hidden; }
.tp-head{ width:100%; display:flex; align-items:center; gap:12px; padding:16px 20px; background:none; border:none; text-align:left; }
.tp-head:hover{ background:var(--wash); }
.tp-chevron{ flex:0 0 auto; color:var(--accent-ink); font-size:12px; transition:transform .18s var(--ease); }
.tp-chevron.open{ transform:rotate(90deg); }
.tp-dates{ flex:0 0 auto; font-size:12px; font-weight:600; color:var(--accent-ink); font-variant-numeric:tabular-nums; }
.tp-summary{ flex:1; font-size:13.5px; color:var(--ink); }
.tp-body{ display:flex; gap:20px; padding:0 20px 20px; border-top:1px solid var(--line); margin-top:0; }
.tp-half{ flex:1; min-width:0; padding-top:16px; }
.tp-half .eyebrow{ display:block; margin-bottom:10px; }
@media (max-width:640px){ .tp-body{ flex-direction:column; gap:16px; } }

/* labs / documents / encounter-history lists, same divided-list shape as the
   portal's ul.labs / ul.docs -- padding + top border, no boxed rows. */
ul.rowlist{ list-style:none; margin:0; padding:0; }
ul.rowlist li{ padding:14px 0; border-top:1px solid var(--line); }
ul.rowlist li:first-child{ border-top:none; padding-top:0; }
.row-when{ font-weight:600; font-size:14.5px; }
.row-where{ font-size:12.5px; color:var(--muted); margin-top:1px; }
.row-flag{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; margin-top:6px; }
.row-flag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green); flex:none; }
.row-flag.high::before,.row-flag.low::before{ background:var(--amber); }
.row-flag.pending::before{ background:var(--apricot); }
.lab-values{ margin-top:8px; display:flex; flex-direction:column; gap:4px; }
.lab-value-row{ display:flex; justify-content:space-between; font-size:13px; gap:10px; }
.lab-value-row b{ font-variant-numeric:tabular-nums; }
ul.rowlist.docs li{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:12px 0; }
.doc-name{ font-size:14px; }
.doc-cat{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); background:var(--wash); padding:2px 7px; border-radius:100px; margin-right:8px; }
.doc-open{ font-size:12.5px; color:var(--accent-ink); font-weight:600; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }
.enc-when{ font-weight:600; font-size:14.5px; }
.enc-who{ font-size:12.5px; color:var(--muted); margin-top:1px; }
.enc-text{ font-size:13px; line-height:1.55; margin-top:8px; white-space:pre-wrap; }

/* ---------------- right panels ---------------- */
.rp-head{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); flex:0 0 auto; }
.rp-title{ font-family:'Fraunces',serif; font-weight:600; font-size:14px; flex:1; }
.rp-close{ background:none; border:none; color:var(--muted); padding:2px 6px; border-radius:6px; font-size:16px; line-height:1; }
.rp-close:hover{ background:var(--wash); color:var(--ink); }
.rp-body{ flex:1; overflow:auto; padding:16px; background:var(--bg); }
.provenance{ font-size:12px; color:#1F3A6B; background:var(--accent-soft); padding:7px 10px; border-radius:10px; margin-bottom:12px; }
textarea.note-body{ width:100%; min-height:220px; border:1px solid var(--line); border-radius:14px; padding:12px; font-family:inherit; font-size:13px; color:var(--ink); background:var(--panel); resize:vertical; }
.rp-actions{ display:flex; gap:8px; margin-top:12px; }
.btn{ font-family:inherit; font-size:13px; font-weight:600; padding:9px 16px; border-radius:100px; border:1px solid var(--line); background:none; color:var(--ink); transition:transform .12s var(--ease); }
.btn.primary{ background:var(--apricot); color:var(--ink); border-color:var(--apricot); }
.btn.primary:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.btn.ghost:hover{ border-color:var(--ink); }

.channel-toggle{ display:flex; background:var(--wash); border-radius:100px; padding:3px; gap:2px; margin-bottom:12px; }
.channel-btn{ flex:1; text-align:center; padding:7px 10px; border-radius:100px; border:none; background:none; font-size:12px; font-weight:600; color:var(--muted); }
.channel-btn.active{ background:var(--panel); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08); }
.consent-note{ font-size:12px; color:var(--green); background:var(--green-soft); padding:6px 10px; border-radius:10px; margin-bottom:10px; display:flex; align-items:center; gap:5px; }
.thread{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.msg{ max-width:82%; padding:9px 12px; border-radius:16px; font-size:12.5px; }
.msg.out{ align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px; }
.msg.in{ align-self:flex-start; background:var(--wash); border-bottom-left-radius:4px; }
.msg-meta{ font-size:12px; opacity:.75; margin-top:3px; }
.compose{ display:flex; gap:8px; margin-top:auto; }
.compose textarea{ flex:1; border:1px solid var(--line); border-radius:14px; padding:9px 12px; font-family:inherit; font-size:12.5px; resize:none; height:52px; background:var(--panel); }
.compose textarea.tall{ height:150px; }

.open-buttons{ display:flex; gap:8px; }
.open-btn{ display:flex; align-items:center; gap:6px; padding:7px 13px; border-radius:100px; border:1px solid var(--line); background:none; font-size:12px; font-weight:600; color:var(--ink); }
.open-btn.on{ background:var(--accent-soft); border-color:var(--accent); color:#1F3A6B; }

.note-mockup-flag{ position:fixed; bottom:12px; right:12px; font-size:12px; color:var(--muted); background:var(--panel); border:1px solid var(--line); padding:4px 9px; border-radius:100px; }

/* ---------------- Navigator panel (added 2026-09-28) ----------------
   Steven's ask: the old standalone navigator-app's hand-holding, click-
   through decision flow gets a real home in this shell -- not just the
   passive read-only candidate strip at the bottom of the left rail, which
   only ever had room to SHOW a suggestion, never to work through one. This
   is a THIRD right panel, same family as Note and Message, so it stacks,
   resizes and closes the same way. It ends exactly where the old app's
   "Copy" button used to fall short: one button that drops the finished
   note into the chart as a draft. Signing still happens inside Akute
   itself, same reasoning as the DoseSpot decision -- never rebuild what
   Akute already does safely, reuse the deep link instead. */
.nv-step{ display:flex; align-items:flex-start; gap:10px; padding:12px 0; border-top:1px solid var(--line); }
.nv-step:first-child{ border-top:none; padding-top:0; }
.nv-check{ flex:0 0 auto; width:20px; height:20px; border-radius:50%; border:2px solid var(--line); margin-top:1px; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; background:var(--panel); }
.nv-check.done{ background:var(--green); border-color:var(--green); }
.nv-step-body{ flex:1; min-width:0; }
.nv-step-q{ font-weight:600; font-size:13px; }
.nv-step-a{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.nv-gate{ font-size:12px; border-radius:12px; padding:10px 12px; margin-top:10px; }
.nv-gate.go{ background:var(--green-soft); color:#265234; }
.nv-gate.hold{ background:var(--amber-soft); color:#7A5416; }
.nv-progress{ font-size:12px; color:var(--muted); margin-bottom:10px; }
/* Added 2026-09-28, third round: Steven's optics concern applies with more
   force here than on past-encounter text -- a banner that reads like a
   finished clinical decision, with no owner and no review step visible, is
   the thing that actually risks confusion about whether a machine decided
   care. Every live suggestion (not yet acted on) gets one of these tags
   right above it; an already-signed note gets the "Reviewed & signed"
   byline instead (chartCenter). Never the same visual language for both. */
.nv-tag{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:4px; }
.nv-tag.fact{ color:var(--muted); }

/* Step wizard, added after Steven's second round of feedback 2026-09-28: the
   compact panel now walks Decisions -> Message patient -> Prescribe ->
   Note & sign in order, matching the real sequence the old standalone app
   had (decide, tell the patient what it costs, get the med moving once they
   say yes, finish and sign the note) instead of jumping straight to a note. */
.nv-steps-rail{ display:flex; gap:4px; margin-bottom:16px; }
.nv-steps-rail button{ flex:1; text-align:center; padding:7px 4px; border-radius:10px; border:1px solid var(--line); background:var(--panel); font-size:12px; font-weight:600; color:var(--muted); }
.nv-steps-rail button.on{ background:var(--accent-soft); color:#1F3A6B; border-color:var(--accent); }
.nv-steps-rail button.done{ color:var(--green); }
.nv-steps-rail button.done::before{ content:"✓ "; }
.nv-panel-step{ display:flex; flex-direction:column; gap:10px; }
.nv-summary-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 14px; font-size:12.5px; }
.nv-summary-card .k{ color:var(--muted); font-size:12px; }
.nv-summary-card .v{ font-weight:600; margin-top:1px; }
.nv-sent-chip{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--green); background:var(--green-soft); padding:5px 10px; border-radius:100px; }
.nv-step-actions{ display:flex; justify-content:space-between; gap:8px; margin-top:4px; }

/* Expanded view: same content, moved to the center pane and opened up for a
   provider who wants to read the full reasoning, not just act on it --
   Steven's second ask. Read/explore only; the actual send/prescribe/sign
   actions stay in the compact panel so there is exactly one place a real
   send button can ever live. */
.nv-expand-head{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.nv-detail-toggle{ font-size:12px; color:var(--accent-ink); font-weight:600; background:none; border:none; padding:4px 0; }
.nv-detail{ font-size:12.5px; color:var(--ink); line-height:1.6; margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); }
.nv-cand-row{ padding:12px 0; border-top:1px solid var(--line); }
.nv-cand-row:first-child{ border-top:none; padding-top:0; }

/* ---------------- HRT Navigator (2026-09-28, second pass) ----------------
   Ported from the real navigator-app's Menopause lane, which is a
   different SHAPE from GLP-1/TRT: not a linear eligibility-then-dose form,
   but a running checklist that gates the note. This is the one Steven
   picked to rebuild first, at full depth, in the center pane. */
.plan-card{ background:var(--accent-soft); border-radius:18px; padding:16px 18px; margin-bottom:16px; }
.plan-head{ font-family:'Fraunces',serif; font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#1F3A6B; margin-bottom:2px; }
.plan-sub{ font-size:12px; color:#1F3A6B; opacity:.85; margin-bottom:12px; }
.plan-row{ display:flex; justify-content:space-between; align-items:baseline; padding:7px 0; border-top:1px solid rgba(31,58,107,.15); font-size:13px; }
.plan-row:first-of-type{ border-top:none; }
.plan-row .k{ color:#1F3A6B; opacity:.75; }
.plan-row .v{ font-weight:600; color:#1F3A6B; }
.plan-actions{ display:flex; gap:8px; margin-top:12px; }
.chk-group{ margin-bottom:4px; }
.chk-group-head{ display:flex; justify-content:space-between; align-items:baseline; padding:10px 0; cursor:pointer; }
.chk-group-title{ font-weight:600; font-size:13.5px; }
.chk-group-count{ font-size:12px; font-weight:600; padding:2px 9px; border-radius:100px; }
.chk-group-count.zero{ background:var(--green-soft); color:var(--green); }
.chk-group-count.some{ background:var(--amber-soft); color:var(--amber); }
.chk-item{ display:flex; align-items:flex-start; gap:10px; padding:10px 0 10px 4px; border-top:1px dashed var(--line); }
.chk-tick{ flex:0 0 auto; width:20px; height:20px; border-radius:6px; border:2px solid var(--amber); margin-top:1px; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; cursor:pointer; }
.chk-tick.on{ background:var(--green); border-color:var(--green); }
.chk-item-body{ flex:1; min-width:0; }
.chk-item-text{ font-size:13px; font-weight:600; }
.chk-item-note{ font-size:12px; color:var(--muted); margin-top:1px; }
.data-section{ margin-bottom:14px; }
.data-section-title{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); font-weight:600; margin-bottom:8px; }
.data-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; }
.data-cell{ font-size:12.5px; padding:6px 0; border-top:1px solid var(--line); }
.data-cell .k{ color:var(--muted); display:block; font-size:12px; }
.data-cell .v{ font-weight:600; margin-top:1px; }
.canon-box{ font-size:12px; line-height:1.6; color:var(--muted); background:var(--wash); border-radius:12px; padding:12px 14px; margin-top:10px; }
.deliv-tabs{ display:flex; gap:6px; flex-wrap:wrap; padding:10px 12px; border-bottom:1px solid var(--line); flex:0 0 auto; }
.deliv-tab{ font-size:12px; font-weight:600; padding:6px 11px; border-radius:100px; border:1px solid var(--line); background:none; color:var(--ink); }
.deliv-tab.on{ background:var(--wash); border-color:transparent; }
.shelf-bar{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:4px; }
.shelf-opt{ font-size:12px; font-weight:600; padding:6px 11px; border-radius:100px; border:1px solid var(--line); background:var(--panel); color:var(--ink); }
.shelf-opt.on{ background:var(--accent-soft); border-color:var(--accent); color:#1F3A6B; }
.followup-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.followup-row .subtabs{ margin-bottom:0; }
/* ---- auth screens (not in the mockup -- the real app's own login) ---- */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card{ width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:32px 28px; box-shadow:var(--shadow-sm); }
.auth-wm{ font-family:'Fraunces',serif; font-weight:600; font-size:20px; margin-bottom:4px; }
.auth-wm span{ color:var(--accent-ink); }
.auth-sub{ color:var(--muted); font-size:13px; margin-bottom:22px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:5px; }
.field input, .field select{ width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--cream); color:var(--ink); }
.field input:focus, .field select:focus{ outline:2px solid var(--accent-soft); border-color:var(--accent); }
.err{ background:var(--red-soft); color:var(--red); font-size:12.5px; padding:8px 12px; border-radius:10px; margin-bottom:14px; }
.hint{ font-size:12px; color:var(--muted); margin-top:10px; line-height:1.5; }
.pw-checklist{ margin:-4px 0 14px; font-size:12px; color:var(--muted); }
.pw-rule{ padding:2px 0; }
.pw-rule.met{ color:var(--green); }
.totp-secret{ font-family:monospace; font-size:13px; background:var(--wash); padding:10px 12px; border-radius:10px; word-break:break-all; margin:10px 0; }
.result-ok{ background:var(--green-soft); color:var(--green); font-size:12.5px; padding:10px 12px; border-radius:10px; margin-top:12px; }
.result-err{ background:var(--red-soft); color:var(--red); font-size:12.5px; padding:10px 12px; border-radius:10px; margin-top:12px; }
.loading{ text-align:center; padding:40px 0; color:var(--muted); font-size:13.5px; }

/* ===== real-app additions (not in the mockup) ===== */
#app.app > .auth-wrap{ flex:1; overflow:auto; }
.auth-wm{ letter-spacing:-.02em; }
.pw-checklist{ font-size:12px; color:var(--muted); margin:-4px 0 14px; }
/* "Not wired yet": the mockup's own shapes, with no invented content. Same
   wash tone the mockup uses for its canon box, so it reads as a placeholder
   and never as a clinical suggestion. */
.unwired{ font-size:12px; line-height:1.55; color:var(--muted); background:var(--wash); border-radius:12px; padding:10px 12px; }
.unwired b{ color:var(--ink); font-weight:600; }
.dot.grey{ background:var(--line); }
.profile-signout{ background:none; border:none; padding:0; font-size:12px; color:var(--accent-ink); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.rail.collapsed .profile-signout{ display:none; }
a.open-btn, a.btn{ text-decoration:none; display:inline-flex; align-items:center; }
.btn:disabled, .open-btn:disabled{ opacity:.55; cursor:default; transform:none; box-shadow:none; }
.qrow .rx-link{ margin-left:8px; }
textarea.note-body:disabled{ opacity:.8; }

/* ---- Automations screen (admin, read only). Same tokens and card shape as the
   rest of the portal; nothing new in the palette. ---- */
.auto-card{ max-width:860px; }
.auto-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
h3.auto-name{ font-size:17px; margin:0; }
.chip.auto-chip{ margin-left:auto; }
.chip.auto-chip.live{ background:var(--green-soft); color:var(--green); }
.chip.auto-chip.off{ background:var(--wash); color:var(--muted); }
.chip.auto-chip.rec{ background:var(--amber-soft); color:var(--amber); }
.chip.auto-chip.unknown{ background:var(--red-soft); color:var(--red); }
.auto-card.is-off{ background:var(--panel); }
.auto-explain{ margin:6px 0 12px; }
.auto-big{ font-size:14px; font-weight:600; margin:10px 0 12px; line-height:1.45; }
.auto-facts{ display:grid; gap:6px; margin-bottom:12px; }
.auto-facts > div, .auto-line{ display:grid; grid-template-columns:104px 1fr; gap:10px; align-items:baseline; }
.auto-k{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:600; }
.auto-step{ border-top:1px solid var(--line); padding:10px 0 6px; display:grid; gap:4px; }
.auto-step-head{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.auto-step-head:empty{ display:none; }
.auto-code{ font-family:ui-monospace,Menlo,monospace; font-size:12px; background:var(--wash); padding:2px 8px; border-radius:100px; }
.auto-flow{ font-size:12px; color:var(--muted); }
.auto-sample{ margin-top:10px; }
.auto-sample-k{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:600; margin-bottom:5px; }
blockquote.auto-quote{ margin:0; padding:10px 14px; background:var(--panel); border-left:3px solid var(--accent-soft); border-radius:0 12px 12px 0; font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
.auto-none{ margin-top:10px; font-size:12.5px; color:var(--muted); background:var(--wash); border-radius:12px; padding:10px 12px; }
.auto-nums{ display:flex; gap:22px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.auto-nums > div{ display:flex; flex-direction:column; }
.auto-n{ font-family:'Fraunces',serif; font-size:22px; font-weight:600; line-height:1.1; }
.auto-nk{ font-size:12px; color:var(--muted); }
.auto-switchnote{ margin:4px 0 12px; }
.auto-foot{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.auto-week{ max-width:860px; margin:4px 0 24px; font-size:13px; }
.cu-strip{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; }
.cu-day{ display:flex; flex-direction:column; gap:2px; padding:8px 10px; border:1px solid var(--line); border-radius:14px; background:var(--panel); min-height:74px; }
.cu-day.has{ border-color:var(--accent); background:var(--accent-soft); }
.cu-date{ font-size:12px; color:var(--muted); font-weight:600; }
.cu-n{ font-family:'Fraunces',serif; font-size:20px; font-weight:600; line-height:1.1; }
.cu-what{ font-size:12px; color:var(--ink); line-height:1.3; overflow-wrap:anywhere; }

/* ---- phones: the nav rail becomes a strip across the top, so a 375px screen
   keeps its width for the content. Desktop is untouched. ---- */
@media (max-width:719px){
  .app:has(> .rail){ flex-direction:column; }
  .rail, .rail.collapsed{ width:100%; flex:0 0 auto; flex-direction:row; flex-wrap:wrap; align-items:center; border-right:0; border-bottom:1px solid var(--line); }
  .rail-top{ order:1; flex:1; border-bottom:0; padding:8px 6px 4px 12px; }
  .rail-toggle{ display:none; }
  .profile{ order:2; }
  .rail-nav{ order:3; flex:1 0 100%; flex-direction:row; padding:0 6px 6px; overflow-x:auto; }
  .nav-item{ flex:0 0 auto; }
  .rail.collapsed .nav-label{ display:inline; }
  .nav-item{ padding:8px 10px; }
  .rail-spacer{ display:none; }
  .profile{ border-top:0; padding:6px 10px; }
  .profile .profile-name{ display:none; }
  .rail.collapsed .profile-text, .profile-text{ display:block; }
  .profile-role{ font-size:0; }
  .profile-role .profile-signout, .rail.collapsed .profile-signout{ display:inline; font-size:12px; }
  .pane-scroll{ padding:16px 14px; }
  .topbar{ padding:8px 12px; }
  .auto-facts > div, .auto-line{ grid-template-columns:1fr; gap:2px; }
  .chip.auto-chip{ margin-left:0; }
}

/* Automations controls (2026-10-07): watchtower, switches, live groups, change log */
.lamp{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; vertical-align:baseline; background:var(--muted); flex:none; }
.lamp.green{ background:var(--green); }
.lamp.red{ background:var(--red); }
.lamp.grey{ background:var(--muted); }
.wt-bar{ margin-bottom:14px; }
.wt-top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:space-between; }
.wt-line{ display:inline-flex; align-items:center; font-size:14px; }
.wt-list{ display:grid; gap:2px; margin:12px 0; }
.wt-row{ display:grid; grid-template-columns:12px minmax(0,2.4fr) 120px minmax(0,1.3fr) minmax(0,1.6fr); gap:10px; align-items:baseline; padding:6px 0; border-top:1px solid var(--line); font-size:13px; }
.wt-row .lamp{ margin-right:0; }
.wt-name{ font-weight:600; overflow-wrap:anywhere; }
.wt-state.red{ color:var(--red); font-weight:600; }
.wt-state.green{ color:var(--green); }
.wt-state.unknown{ color:var(--muted); }
.wt-meta{ font-size:12px; color:var(--muted); }
.wt-activity{ margin-top:8px; }
.wt-note{ margin:6px 0 0; }
.auto-switchrow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 10px; }
.auto-switchrow .auto-k{ min-width:104px; }
.auto-err{ color:var(--red); font-size:13px; margin:6px 0; line-height:1.45; }
.auto-ok{ color:var(--green); font-size:13px; margin:6px 0; }
.confirm-panel{ border:1px solid var(--accent); background:var(--accent-soft); border-radius:14px; padding:14px 16px; margin:10px 0 14px; }
.confirm-lines{ margin:8px 0 10px; padding-left:18px; font-size:13px; line-height:1.55; }
.confirm-who{ margin:8px 0; }
.auto-grp{ border-top:1px solid var(--line); padding:10px 0 4px; margin-bottom:10px; }
.auto-grp-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.auto-grp-head .auto-k{ min-width:104px; }
.grp-editor{ margin-top:10px; }
.pk-list{ list-style:none; margin:6px 0; padding:0; display:grid; gap:4px; }
.pk-list li{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:13px; padding:5px 0; border-bottom:1px solid var(--line); }
.pk-list li.is-removed b{ text-decoration:line-through; color:var(--muted); }
.pk-list .btn{ margin-left:auto; padding:3px 12px; }
.pk-when{ flex-basis:100%; font-size:12px; color:var(--muted); }
.tag-new{ font-size:12px; font-weight:600; background:var(--green-soft); color:var(--green); border-radius:100px; padding:2px 8px; }
.pk-input{ width:100%; max-width:380px; box-sizing:border-box; padding:9px 12px; border:1px solid var(--line); border-radius:12px; font:inherit; background:#fff; }
.audit-list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.audit-list li{ display:grid; grid-template-columns:130px minmax(0,200px) 1fr; gap:10px; font-size:13px; padding:6px 0; border-top:1px solid var(--line); }
.audit-when{ color:var(--muted); font-size:12px; }
.audit-who{ overflow-wrap:anywhere; }
@media (max-width: 720px){
  .wt-row{ grid-template-columns:12px 1fr; }
  .wt-row .wt-state, .wt-row .wt-meta{ grid-column:2; }
  .audit-list li{ grid-template-columns:1fr; gap:2px; }
}

/* Providers screen (2026-10-07): one card per clinician, out-of-office dates */
.prov-card.is-away{ border-color:var(--amber); }
.prov-set{ margin:4px 0 8px; }
.prov-states{ display:grid; grid-template-columns:104px 1fr; gap:10px; align-items:baseline; margin:8px 0; }
.prov-statelist{ overflow-wrap:anywhere; font-size:13px; }
.prov-states .btn{ margin-left:6px; padding:3px 12px; }
.prov-detail{ margin:0 0 8px; }
.prov-dates{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin:10px 0 4px; }
.prov-date{ display:grid; gap:4px; }
.prov-date .pk-input{ max-width:180px; }
.prov-buttons{ display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width: 720px){
  .prov-states{ grid-template-columns:1fr; gap:2px; }
  .prov-date, .prov-date .pk-input{ width:100%; max-width:none; }
  .prov-buttons .btn{ flex:1 1 140px; }
}


/* ===== New patients: the welcome threads and the Ops list (2026-10-08). Built from the app's own tokens. ===== */
.ot-h{ margin:18px 0 8px; }
.ot-card{ border:1px solid var(--line); background:var(--panel); border-radius:18px; margin-bottom:8px; overflow:hidden; }
.ot-card.needs{ border-color:var(--apricot); }
.ot-card.open{ box-shadow:var(--shadow-sm); }
.ot-head{ display:grid; grid-template-columns:14px 1fr; gap:10px; align-items:start; padding:12px 16px; cursor:pointer; }
.ot-head:hover{ background:var(--cream); }
.ot-status{ font-size:12.5px; color:var(--ink); margin-top:2px; }
.chip.ot-chip{ white-space:nowrap; }
.chip.ot-chip.needs{ background:var(--amber-soft); color:var(--amber); }
.chip.ot-chip.needs.urgent{ background:var(--red); color:#fff; }
.chip.ot-chip.wait{ background:var(--wash); color:var(--muted); }
.chip.ot-chip.held{ background:var(--accent-soft); color:#1F3A6B; }
.chip.ot-chip.done{ background:var(--green-soft); color:var(--green); }
.ot-body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:22px; padding:6px 16px 18px; border-top:1px solid var(--line); background:var(--cream); }
.ot-col{ min-width:0; padding-top:12px; }
.ot-eyebrow{ display:block; margin-bottom:10px; }
.ot-thread{ margin-bottom:14px; }
.msg.ot-b{ max-width:88%; white-space:pre-wrap; overflow-wrap:anywhere; }
.msg.out.ot-auto{ background:var(--accent-soft); color:#1F3A6B; }
.msg.out.ot-clin{ background:var(--accent); color:#fff; }
.ot-tag{ display:inline-block; font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:12px; border:1px solid currentColor; border-radius:6px; padding:0 4px; margin-right:2px; }
.ot-typing{ align-self:flex-end; font-size:12px; font-style:italic; color:var(--muted); }
.ot-holdmsg{ max-width:100%; }
.ot-block{ margin-bottom:14px; }
.ot-label{ font-size:12px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.ot-fact{ display:grid; grid-template-columns:minmax(0,11em) minmax(0,1fr); gap:10px; font-size:12.5px; padding:4px 0; border-bottom:1px dashed var(--line); }
.ot-fact .k{ color:var(--muted); } .ot-fact .v{ font-weight:600; overflow-wrap:anywhere; }
.ot-quote{ white-space:pre-wrap; font-size:12.5px; line-height:1.5; background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; padding:10px 12px; overflow-wrap:anywhere; }
.ot-box{ width:100%; }
.ot-actions{ align-items:center; flex-wrap:wrap; gap:14px; }
.ot-link{ font-size:12px; }
.ot-hint{ margin-top:6px; }
.ot-why{ font-size:13px; font-weight:600; }
.ot-why.urgent{ color:var(--red); }
.ot-stand{ font-size:14px; font-weight:600; }
.ot-willsend{ background:var(--accent-soft); color:#1F3A6B; font-size:13px; font-weight:600; padding:10px 12px; border-radius:10px; margin:0 0 12px; }
.ot-badge{ display:inline-block; font-size:12px; font-weight:700; padding:2px 9px; border-radius:100px; margin-top:3px; width:fit-content; }
.ot-badge.ok{ background:var(--green-soft); color:var(--green); }
.ot-badge.none{ background:var(--amber-soft); color:var(--amber); }
@media (max-width:900px){ .ot-body{ grid-template-columns:minmax(0,1fr); gap:6px; } }

.ot-dot{ width:9px; height:9px; border-radius:50%; background:var(--line); margin-top:6px; }
.ot-dot.on{ background:var(--apricot); }
.ot-headbody{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ot-top{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ot-card.urgent{ border-color:var(--red); }
.ot-card.ops .ot-head{ cursor:pointer; }
.ot-opsbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:0 16px 12px 40px; }
.ot-urgent{ background:var(--red); color:#fff; font-weight:700; font-size:13px; padding:10px 12px; border-radius:10px; margin:0 0 12px; }
.ot-rec{ background:var(--wash); border:1px dashed var(--line); font-size:12.5px; line-height:1.5; padding:10px 12px; border-radius:10px; margin:0 0 12px; }
.ot-gate{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; background:var(--wash); border-radius:14px; padding:10px 14px; margin-bottom:14px; font-size:13px; }
.ot-gate.live{ background:var(--amber-soft); }
.chip.ot-chip.rec{ background:var(--wash); color:var(--muted); border:1px dashed var(--line); }
.msg.out.ot-notsent{ background:var(--wash); color:var(--muted); border:1px dashed var(--line); font-style:italic; }
.ot-dose{ width:9em; border:1px solid var(--line); border-radius:10px; padding:8px 10px; font:inherit; background:var(--panel); }
.qrow.urgent{ outline:2px solid var(--red); outline-offset:-2px; }
.q-urgent{ color:var(--red); letter-spacing:.04em; }

/* Tag team: who has the conversation, and the two send buttons. */
.ot-owner .ot-list { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.ot-twobtn { display: flex; flex-wrap: wrap; gap: 8px; }
/* ---- Coverage screen (admin): the clinician by state grid ---- */
.cv-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.cv-lbl{ font-size:12px; color:var(--muted); }
.cv-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.cv-chip{ font-family:inherit; font-size:12px; font-weight:600; padding:5px 12px; border-radius:100px; border:1px solid var(--line); background:var(--cream); color:var(--ink); cursor:pointer; }
.cv-chip.on{ background:var(--accent-soft); border-color:var(--accent); }
.cv-hint{ margin:6px 0 12px; }
.cv-scroll{ overflow-x:auto; padding-bottom:6px; }
.cv-grid{ min-width:760px; }
.cv-row{ display:flex; align-items:center; margin-bottom:3px; }
.cv-name{ width:150px; flex:none; font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:8px; }
.cv-sub{ font-weight:400; color:var(--muted); }
.cv-cells{ flex:1; display:grid; grid-template-columns:repeat(51, minmax(11px, 1fr)); gap:2px; }
.cv-tools{ width:92px; flex:none; display:flex; gap:8px; justify-content:flex-end; }
.cv-lab{ writing-mode:vertical-rl; transform:rotate(180deg); font-size:9px; color:var(--muted); height:20px; text-align:left; justify-self:center; }
.cv-cell{ height:24px; border-radius:3px; background:var(--wash); border:1px solid var(--line); cursor:pointer; padding:0; }
.cv-cell:hover{ outline:2px solid var(--accent); outline-offset:0; }
.cv-cell.full, .cv-sw.full, .cv-state.full{ background:var(--green); border-color:var(--green); color:#fff; }
.cv-cell.some, .cv-sw.some, .cv-state.some{ background:#9BC3A5; border-color:#9BC3A5; }
.cv-cnt{ height:20px; border-radius:3px; font-size:9px; line-height:20px; text-align:center; color:#fff; }
.cv-cnt.n0, .cv-sw.n0{ background:var(--red); } .cv-cnt.n1, .cv-sw.n1{ background:#D98A3D; }
.cv-cnt.n2{ background:#6F93C9; } .cv-cnt.n3{ background:var(--accent); }
.cv-legend{ display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-top:10px; }
.cv-sw{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px; vertical-align:-1px; background:var(--wash); border:1px solid var(--line); }
.cv-gap{ font-size:13px; margin:10px 0 0; line-height:1.5; }
.cv-red{ color:var(--red); } .cv-orange{ color:#B5651D; }
.cv-link{ font-family:inherit; font-size:12px; background:none; border:0; color:var(--accent-ink); cursor:pointer; padding:0; text-decoration:underline; }
.cv-h{ font-size:14px; font-weight:600; margin-bottom:6px; }
.cv-pending{ border-color:var(--apricot); background:var(--amber-soft); }
.cv-q{ font-weight:700; margin-bottom:4px; }
.cv-say{ font-size:14px; line-height:1.5; margin:6px 0 10px; }
.cv-btns{ display:flex; gap:8px; }
.cv-notice{ background:var(--green-soft); border:1px solid var(--green); border-radius:14px; padding:10px 14px; font-size:13px; margin-bottom:14px; }
.cv-todo{ list-style:none; margin:10px 0 0; padding:0; }
.cv-todo li{ padding:10px 0; border-top:1px solid var(--line); font-size:13px; line-height:1.5; }
.cv-todo li.not_in_grid{ border-left:3px solid var(--apricot); padding-left:10px; }
.cv-todo li.add_in_akute{ border-left:3px solid var(--accent); padding-left:10px; }
.cv-todo-states code{ font-size:12px; background:var(--wash); padding:1px 5px; border-radius:4px; }
.cv-sel{ display:block; margin:10px 0; font-size:13px; }
.cv-sel select{ font-family:inherit; font-size:13px; padding:6px 10px; border-radius:10px; border:1px solid var(--line); background:var(--cream); margin-left:6px; }
.cv-log{ list-style:none; margin:0; padding:0; font-size:13px; }
.cv-log li{ padding:6px 0; border-top:1px solid var(--line); }
.cv-when{ color:var(--muted); margin-right:8px; font-size:12px; }
.cv-phone{ display:none; }
.cv-states{ display:grid; grid-template-columns:repeat(auto-fill, minmax(44px, 1fr)); gap:6px; margin:12px 0; }
.cv-state{ font-family:inherit; font-size:12px; font-weight:600; padding:10px 0; border-radius:10px; border:1px solid var(--line); background:var(--wash); color:var(--ink); cursor:pointer; }
.cv-links{ display:flex; gap:16px; }
@media (max-width: 760px){ .cv-wide{ display:none; } .cv-phone{ display:block; } }

/* ---- task tracking: level chips on queue rows, the Team board ---- */
.tk-extras{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin-top:4px; font-size:12px; color:var(--muted); }
.tk-chip{ font-size:12px; font-weight:700; padding:2px 9px; border-radius:100px; letter-spacing:.02em; }
.tk-chip.amber{ background:var(--amber-soft); color:var(--amber); }
.tk-chip.overdue{ background:var(--red-soft); color:var(--red); }
.tk-chip.escalated{ background:var(--red); color:#fff; }
.tk-cover{ color:var(--accent-ink); font-weight:600; }
.tk-owner{ font-weight:600; color:var(--ink); } .tk-owner.none{ color:var(--red); }
.tk-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin-bottom:18px; }
.tk-card{ background:var(--cream); border:1px solid var(--line); border-radius:16px; padding:12px 14px; text-align:left; font:inherit; color:inherit; cursor:pointer; transition:border-color .16s, box-shadow .16s; }
.tk-card:hover{ box-shadow:0 2px 10px rgba(0,0,0,.08); } .tk-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.tk-card.selected{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset; }
.tk-clear{ margin-left:10px; font-size:12px; vertical-align:middle; }
.tk-card.overdue{ border-color:var(--apricot); } .tk-card.escalated{ border-color:var(--red); }
.tk-card-name{ font-weight:600; font-size:13px; margin-bottom:2px; }
.tk-card-n{ font-family:'Fraunces',Georgia,serif; font-size:26px; line-height:1.1; } .tk-card-n span{ font-family:'Inter',sans-serif; font-size:12px; color:var(--muted); }
.tk-card-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.tk-red{ color:var(--red); } .tk-amber{ color:var(--amber); }
.tk-h{ font-size:15px; margin:22px 0 8px; } .tk-count{ font-family:'Inter',sans-serif; font-size:12px; background:var(--wash); border-radius:100px; padding:1px 9px; margin-left:6px; }
.tk-item{ background:var(--cream); border:1px solid var(--line); border-left:4px solid var(--line); border-radius:16px; padding:12px 14px; margin-bottom:10px; }
.tk-item.overdue{ border-left-color:var(--apricot); } .tk-item.escalated{ border-left-color:var(--red); }
.tk-item-top{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }
.tk-item-name{ font-weight:700; } .tk-item-kind{ color:var(--muted); font-size:12.5px; } .tk-age{ color:var(--muted); font-size:12px; }
.tk-item-owner{ font-size:13px; margin:6px 0 8px; }
.tk-btns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.tk-btns .btn{ padding:6px 12px; font-size:12px; }
.tk-pending{ border:1px solid var(--apricot); background:var(--amber-soft); border-radius:14px; padding:10px 14px; margin-top:10px; }
.tk-q{ font-weight:700; margin-bottom:4px; } .tk-say{ font-size:13.5px; line-height:1.5; margin:4px 0 8px; }
.tk-field{ display:block; font-size:13px; margin:8px 0; } .tk-field select, .tk-field input{ font-family:inherit; font-size:13px; padding:6px 10px; border-radius:10px; border:1px solid var(--line); background:var(--cream); margin-left:6px; }
.tk-quiet{ margin:6px 0 0; }
.tk-outbox{ list-style:none; margin:10px 0 0; padding:0; }
.tk-outbox li{ border-top:1px solid var(--line); padding:10px 0; }
.tk-ob-top{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; font-size:13px; }
.tk-ob-out{ font-size:12px; font-weight:600; padding:2px 9px; border-radius:100px; background:var(--wash); color:var(--muted); }
.tk-ob-out.sent{ background:var(--green-soft); color:var(--green); } .tk-ob-out.failed{ background:var(--red-soft); color:var(--red); }
.tk-ob-text{ margin-top:4px; padding:8px 12px; background:var(--cream); border:1px solid var(--line); border-radius:12px; font-size:13px; line-height:1.5; }
.tk-notice{ background:var(--green-soft); border:1px solid var(--green); border-radius:14px; padding:10px 14px; font-size:13px; margin:10px 0 4px; }
.tk-log{ list-style:none; margin:0; padding:0; font-size:13px; }
.tk-log li{ padding:6px 0; border-top:1px solid var(--line); }
.tk-when{ color:var(--muted); margin-right:8px; font-size:12px; }

/* ---- Queue and Visits: one compact line per item (2026-10-07 redesign) ---- */
.qline{ display:grid; grid-template-columns:18px 1fr auto; gap:10px; align-items:center; padding:9px 12px; border-radius:12px; border:1px solid var(--line); background:var(--panel); margin-bottom:6px; cursor:pointer; }
.qline:hover{ border-color:var(--accent); }
.q-main{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; min-width:0; }
.q-what{ color:var(--muted); font-size:13px; }
.q-side{ display:flex; align-items:center; gap:8px; justify-content:flex-end; text-align:right; }
.q-wait{ color:var(--muted); font-size:12.5px; white-space:nowrap; }
.q-n{ font-weight:700; margin-left:3px; color:var(--muted); }
.subtab.is-on .q-n{ color:var(--ink); }
.v-time{ color:var(--ink); font-weight:600; }
.v-day{ margin:18px 0 6px; }
.v-day:first-child{ margin-top:0; }

/* ---- Team board: compact exception rows ---- */
.tk-row{ padding:8px 12px; margin-bottom:6px; border-radius:12px; }
.tk-kind{ white-space:nowrap; }
.tk-line{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(190px,1.7fr) minmax(0,1fr) minmax(0,.9fr) auto; gap:4px 12px; align-items:center; }
.tk-name{ font-weight:700; overflow-wrap:anywhere; }
.tk-what{ font-size:13px; display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; }
.tk-who, .tk-wait{ font-size:12.5px; color:var(--muted); overflow-wrap:anywhere; }
.tk-manage{ padding:5px 12px; font-size:12px; }
.tk-more-body{ margin-top:6px; padding-top:6px; border-top:1px solid var(--line); }
.tk-row .tk-notice{ margin:8px 0 2px; }
.tk-showall{ margin:4px 0 8px; }
.tk-moreblock{ margin-top:14px; }
.tk-more{ font-size:12.5px; }
@media (max-width:719px){
  .tk-line{ grid-template-columns:1fr auto; }
  .tk-what, .tk-who, .tk-wait{ grid-column:1; }
  .tk-manage{ grid-column:2; grid-row:1 / span 2; align-self:start; }
  .qline{ padding:9px 10px; }
  .q-side{ flex-direction:column; align-items:flex-end; gap:2px; }
}

/* Tag team: who has the conversation, and the two send buttons. */
.ot-owner .ot-list { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.ot-twobtn { display: flex; flex-wrap: wrap; gap: 8px; }


/* ---- Intake review on the first New patients task (2026-10-08). Kept in one block at the END so it merges cleanly. ---- */
.ot-flag{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:10px; margin:0 0 6px; font-size:13px; line-height:1.45; }
.ot-flag.red{ background:var(--red-soft, #fdecea); border:1px solid var(--red); }
.ot-flag.amber{ background:var(--amber-soft); }
.ot-flag-text{ flex:1; }
.ot-rv-head{ font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:12px 0 4px; }
.ot-qa{ display:block; padding:3px 0; }
.ot-qa .k{ display:block; font-size:12px; color:var(--muted); }
.ot-qa .v{ display:block; font-size:14px; }
.ot-rv-full{ margin-top:12px; }
.ot-rv-full summary{ cursor:pointer; font-weight:600; font-size:13px; }
.shelf-opt[disabled]{ opacity:.45; cursor:not-allowed; }
/* ---- phone scrolling fix: in the stacked phone layout the main area grew to fit its content and
   the page could not scroll (body is overflow:hidden). Let it shrink so the pane scrolls inside. ---- */
@media (max-width:719px){
  .app:has(> .rail) > .main{ min-height:0; }
  .app:has(> .rail) .center-wrap{ min-height:0; }
}

/* ---- Queue and Team board rows read like unread messages (Round 2) ---- */
.qmsg{ display:grid; grid-template-columns:14px 1fr; gap:10px; align-items:start; padding:10px 14px; border-radius:14px; border:1px solid var(--line); background:var(--panel); margin-bottom:6px; cursor:pointer; }
.qmsg:hover{ border-color:var(--accent); }
.q-dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:5px; }
.q-body{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.q-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.q-top .pname{ font-size:14.5px; overflow-wrap:anywhere; }
.q-due{ font-size:12.5px; color:var(--muted); white-space:nowrap; }
.q-due.late{ color:var(--red); font-weight:600; } .q-due.hard{ font-weight:700; } .q-due.snz{ font-style:italic; }
.q-kind{ font-size:12.5px; color:var(--muted); }
.q-sep{ margin:0 3px; }
.q-need{ display:block; font-size:12.5px; color:var(--muted); }
.qbrow{ border:1px solid var(--line); background:var(--panel); border-radius:14px; margin-bottom:6px; }
.qbrow-main{ display:flex; align-items:flex-start; gap:6px; padding-right:10px; }
.qbrow-main .qmsg{ flex:1; min-width:0; border:0; margin:0; background:none; }
.qbrow-main .tk-manage{ margin-top:8px; flex:0 0 auto; }
.qbrow .tk-more-body{ margin:0 14px 10px; }
.qbrow .tk-notice{ margin:0 14px 10px; }
.tk-ownline{ font-size:12px; color:var(--muted); } .tk-ownline.none{ color:var(--red); }
/* The task state machine (SH-2). The chips are the existing .subtab; the state tag is the existing .chip.ot-chip; only the placement and the row accent are new. */
.q-views{ margin-bottom:10px; }
.q-state{ align-self:flex-start; margin-top:3px; }
.qmsg.q-hot{ border-color:var(--apricot); box-shadow:inset 3px 0 0 var(--apricot); }
.qmsg.q-hot .q-dot{ background:var(--apricot); }
.qmsg.q-waiting .q-dot{ background:none; border:2px solid var(--muted); }
/* The encounter's two halves (SH-3): the existing green and grey chips on one quiet line, the door underneath. */
.cf-enc{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:0 0 12px; padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:var(--cream); }
.cf-panel .cf-enc{ margin:0; }
.cf-enc-h{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); font-weight:600; margin-right:2px; }
.cf-enc-say{ flex:1 1 100%; }
.cf-enc .tk-pending, .cf-enc .result-err{ flex:1 1 100%; margin-top:2px; }
.cf-enc.done{ border-color:var(--green); background:var(--green-soft); }
.cf-concl{ align-items:center; flex-wrap:wrap; margin-top:8px; } .cf-concl .btn{ white-space:nowrap; }
/* First-visit mode (SY-10): the card is the existing blue prompt bar; the panel dropdown takes the form field look. */
.fv-card{ margin:0 0 12px; }
.cf-suggest .ot-quote{ border-left-color:var(--apricot); }
.fv-select{ width:100%; font-family:inherit; font-size:13.5px; padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--ink); }
.tk-picker{ margin-bottom:8px; }

/* =====================================================================
   2026-10-08 review pass: accessibility, incomplete-list banner,
   urgent follow-up banner, phone chart. Real-app additions only.
   ===================================================================== */

/* Text for screen readers only. */
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* A clear keyboard focus ring on everything that can be tabbed to. */
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent-ink); outline-offset:2px; border-radius:8px; }
.qmsg:focus-visible, .qline:focus-visible, .plist-row:focus-visible, .tp-head:focus-visible{ outline-offset:-2px; border-radius:14px; }
.pane-title:focus{ outline:none; }

/* Rows that are now real buttons keep the look of the old clickable rows. */
button.qmsg, button.qline, button.plist-row{ font:inherit; color:inherit; text-align:left; width:100%; appearance:none; -webkit-appearance:none; }
button.qmsg{ display:grid; }
button.plist-row{ background:none; border:0; display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; }
button.plist-row:hover{ background:var(--wash); }
.plist-text{ display:flex; flex-direction:column; }
.plist-text .psub{ display:block; }
.qbrow-main .qmsg{ width:auto; }
.rx-go{ text-decoration:none; }

/* Words beside the colour on lab flags, and a labelled text box. */
.flag-word{ font-size:12px; font-weight:700; letter-spacing:.02em; }
.row-flag.high .flag-word, .row-flag.low .flag-word{ color:var(--amber); }
.fld-label{ display:block; font-size:12px; font-weight:600; color:var(--muted); margin:0 0 5px; }
.compose .btn{ flex:0 0 auto; }

/* The list may be incomplete: loud, above everything else in the list. */
.inc-banner{ display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; background:var(--red-soft); color:var(--red); border:1px solid var(--red); border-radius:14px; padding:10px 14px; margin:0 0 14px; font-size:13.5px; line-height:1.4; }
.inc-banner .inc-text{ flex:1 1 260px; }
.inc-banner .btn{ border-color:var(--red); color:var(--red); background:var(--panel); padding:6px 14px; }
.q-updated{ font-size:12px; color:var(--muted); margin:-6px 0 10px; }

/* Urgent follow-up: stays at the top of the chart until the filed check-in is opened. */
.urgent-banner{ flex:0 0 auto; display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; background:var(--red); color:#fff; padding:10px 18px; border-bottom:1px solid var(--red); }
.urgent-banner .ub-text{ flex:1 1 240px; display:flex; flex-direction:column; gap:2px; font-size:14px; line-height:1.35; }
.urgent-banner .ub-title{ font-weight:700; }
.urgent-banner .ub-reason{ font-weight:500; }
.urgent-banner .btn{ background:#fff; color:var(--red); border-color:#fff; padding:6px 14px; }
.urgent-note{ font-size:12px; font-weight:600; color:var(--red); background:var(--red-soft); border-radius:10px; padding:6px 10px; margin-bottom:8px; }
.candidate.subdued .candidate-name, .candidate.subdued .candidate-why{ color:var(--muted); }
.candidate.subdued .dot{ background:var(--line); }

/* An edge cue on rows that scroll sideways: a soft shade shows on a side only while there is more to see there. */
.scroll-cue{ background:
    linear-gradient(to right, var(--cream) 30%, rgba(251,248,242,0)) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--cream) 30%, rgba(251,248,242,0)) right center / 28px 100% no-repeat local,
    linear-gradient(to right, rgba(60,50,30,.22), rgba(60,50,30,0)) left center / 12px 100% no-repeat scroll,
    linear-gradient(to left, rgba(60,50,30,.22), rgba(60,50,30,0)) right center / 12px 100% no-repeat scroll; }
.cv-scroll{ background:
    linear-gradient(to right, var(--bg) 30%, rgba(246,241,233,0)) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--bg) 30%, rgba(246,241,233,0)) right center / 28px 100% no-repeat local,
    linear-gradient(to right, rgba(60,50,30,.22), rgba(60,50,30,0)) left center / 12px 100% no-repeat scroll,
    linear-gradient(to left, rgba(60,50,30,.22), rgba(60,50,30,0)) right center / 12px 100% no-repeat scroll; }

/* Phone-only pieces are hidden on a desktop. */
.m-summary-toggle, .m-sticky, .rp-close-label, .hb-mob{ display:none; }

/* ---- Phone chart (under 720 px): one pane at a time ---- */
@media (max-width:719px){
  .divider, .divider-h{ display:none; }
  .main.chart-mode{ flex-direction:column; min-height:0; min-width:0; }
  .app{ min-width:0; }
  .chart-left, .chart-left.collapsed{ width:100% !important; flex:0 0 auto; border-right:0; border-bottom:1px solid var(--line); max-height:70vh; overflow-y:auto; }
  .chart-left-top{ padding:6px 8px; }
  .chart-left-top .home-btn{ padding:8px 6px; font-size:14px; }
  .hb-desk{ display:none; }
  .hb-mob{ display:inline; }
  .chart-left.collapsed .home-btn span.label{ display:inline; }
  .chart-left .rail-toggle{ display:none; }
  .m-summary-toggle{ display:inline-flex; flex:0 0 auto; align-items:center; font:inherit; font-size:13px; font-weight:600; color:var(--accent-ink); background:none; border:1px solid var(--line); border-radius:100px; padding:6px 12px; }
  .id-card{ padding:8px 14px 10px; border-bottom:0; }
  .id-name{ font-size:18px; white-space:normal; }
  .id-meta{ white-space:normal; }
  .chart-left:not(.m-open) .id-facts, .chart-left:not(.m-open) .navigator-box{ display:none; }
  .chart-nav{ flex-direction:row; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; padding:6px 10px; gap:6px; border-top:1px solid var(--line); scrollbar-width:none; }
  .chart-nav::-webkit-scrollbar{ display:none; }
  .chart-nav-item{ width:auto; flex:0 0 auto; padding:8px 12px; border:1px solid var(--line); border-radius:100px; font-size:13px; }
  .chart-nav-item.active{ border-color:transparent; }
  .center-wrap{ min-width:0; min-height:0; flex:1 1 0; }
  .main.chart-mode .crumb{ display:none; }
  .topbar{ flex-wrap:wrap; gap:6px 8px; }
  .open-buttons{ flex:1 1 100%; }
  .open-btn{ flex:1 1 0; justify-content:center; padding:9px 8px; }
  .urgent-banner{ padding:10px 14px; }
  .pane-scroll{ padding:14px 14px; }
  .qa-row{ flex-direction:column; gap:2px; }
  .qa-q{ flex:none; }
  .lab-value-row{ flex-wrap:wrap; }
  .m-sticky{ display:block; flex:0 0 auto; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:var(--panel); border-top:1px solid var(--line); }
  .m-sticky .btn{ display:flex; justify-content:center; width:100%; padding:13px 16px; font-size:15px; text-decoration:none; }
  /* The message and note panels open as full-screen sheets with a Close. */
  .right-wrap{ position:fixed; inset:0; width:100% !important; z-index:60; border-left:0; background:var(--panel); }
  .right-wrap.empty{ display:none; }
  .right-wrap .right-panel:not(:last-child){ display:none; }
  .right-panel{ min-height:0; }
  .rp-head{ padding:12px 14px; }
  .rp-close{ font-size:14px; font-weight:600; padding:8px 12px; border:1px solid var(--line); border-radius:100px; color:var(--ink); }
  .rp-close-label{ display:inline; }
  .rp-close.rp-expand{ display:none; }
  .rp-body{ padding:14px; }
  .compose{ flex-direction:column; }
  .compose textarea{ height:96px; }
  .compose .btn{ align-self:stretch !important; }
  .deliv-tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .deliv-tab{ flex:0 0 auto; }
}

.nv-tag.fact{ text-transform:none; letter-spacing:0; font-weight:500; line-height:1.4; }

/* Phone: the urgent banner is the first thing on the screen, above even the patient header; spare chrome is trimmed. */
@media (max-width:719px){
  .main.chart-mode > .center-wrap{ display:contents; }
  .main.chart-mode .urgent-banner{ order:-1; }
  .main.chart-mode .pane-scroll{ flex:1 1 0; min-height:0; }
  .main.chart-mode .topbar{ flex:0 0 auto; border-top:0; padding:6px 10px; }
  .main.chart-mode .topbar .chip{ display:none; }
  .main.chart-mode .topbar-spacer{ display:none; }
  .main.chart-mode .m-sticky{ flex:0 0 auto; }
  .urgent-banner .btn{ padding:8px 14px; }
  .urgent-banner .ub-text{ font-size:15px; }
}

.compose-wrap{ margin-top:auto; }
.compose-wrap .compose{ margin-top:0; }

/* ===== Next step panel on the chart (welcome thread worked from the chart view, 2026-10-08). One marked block at the END. ===== */
.cf-panel{ min-width:0; display:flex; flex-direction:column; gap:12px; overflow-wrap:anywhere; }
.cf-panel .ot-block{ margin-bottom:0; }
.cf-sum{ border:1px solid var(--line); background:var(--cream); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.cf-l1{ font-size:14.5px; font-weight:600; line-height:1.4; }
.cf-l2{ font-size:13px; }
.cf-flags{ display:flex; flex-direction:column; gap:6px; }
.cf-flags .ot-flag{ margin:0; flex-wrap:wrap; }
.cf-noflags{ color:var(--green); }
.cf-jumps{ display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:4px; }
.cf-jump{ background:none; border:0; padding:0; font:inherit; font-size:12.5px; color:var(--accent-ink); text-decoration:underline; cursor:pointer; text-align:left; }
.cf-l3{ font-size:14px; font-weight:700; padding-top:8px; border-top:1px dashed var(--line); }
.cf-l3.hold{ color:var(--red); }
.cf-l3.none{ color:var(--muted); }
.cf-l3.continue, .cf-l3.start{ color:var(--accent-ink); }
.cf-steps{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 6px; }
.cf-step{ flex:1 1 auto; min-width:0; }
.cf-stepbtn{ width:100%; display:flex; align-items:center; gap:6px; font:inherit; font-size:12px; color:var(--muted); background:var(--panel); border:1px solid var(--line); border-radius:100px; padding:4px 10px; cursor:pointer; text-align:left; }
.cf-step.past .cf-stepbtn{ color:var(--green); }
.cf-step.now .cf-stepbtn{ background:var(--accent-soft); color:#1F3A6B; border-color:var(--accent); font-weight:700; }
.cf-n{ font-weight:700; }
.cf-peek{ margin-top:-4px; }
.cf-plan{ border:1px solid var(--line); border-radius:14px; padding:10px 14px; background:var(--panel); }
.cf-plan.one{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.cf-planline{ font-size:13.5px; line-height:1.4; }
.cf-small{ padding:3px 12px; font-size:12.5px; }
.cf-small.on{ background:var(--accent-soft); border-color:var(--accent); }
.cf-else{ display:flex; flex-direction:column; gap:6px; }
.cf-elsebtns{ display:flex; flex-wrap:wrap; gap:6px; }
.cf-sub{ display:flex; flex-direction:column; gap:8px; }
.cf-thread{ max-height:220px; overflow-y:auto; }
.cf-more summary{ cursor:pointer; font-size:12.5px; font-weight:600; }
.cf-top{ display:flex; flex-direction:column; gap:4px; }
.cf-h{ font-family:'Fraunces',serif; font-size:19px; font-weight:600; }
.cf-primary{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.cf-primary .btn.primary{ min-width:200px; }
.qa-row.qa-hit{ background:var(--amber-soft); outline:2px solid var(--apricot); border-radius:8px; }
.cf-panel .ot-dose, .cf-panel .ot-box{ width:100%; max-width:100%; box-sizing:border-box; }
@media (max-width:719px){
  /* On a phone the panel is the full-screen sheet; its one primary button stays at the bottom of the sheet. */
  .cf-primary{ position:sticky; bottom:0; z-index:3; background:var(--panel); padding:10px 0 calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); align-items:stretch; }
  .cf-primary .btn.primary{ width:100%; }
  .cf-thread{ max-height:160px; }
}
.cf-title{ font-family:'Fraunces',serif; font-size:17px; font-weight:600; }
.cf-nav{ font-size:13.5px; line-height:1.45; }
.cf-start{ border-top:1px dashed var(--line); padding-top:8px; }
.cf-tabs{ display:flex; gap:6px; }
.cf-tab{ font:inherit; font-size:12.5px; font-weight:600; color:var(--muted); background:var(--panel); border:1px solid var(--line); border-radius:100px; padding:4px 14px; cursor:pointer; }
.cf-tab.on{ background:var(--accent-soft); border-color:var(--accent); color:#1F3A6B; }
.cf-stage{ border:1px solid var(--accent); background:var(--accent-soft); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.cf-note{ min-width:0; }
.cf-status{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; font-size:12px; color:var(--muted); }
.cf-st.now{ font-weight:700; color:#1F3A6B; }
.cf-st.past{ color:var(--green); }
.cf-sep{ opacity:.5; }
.cf-tabbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cf-prompt{ border:1px solid var(--accent); background:var(--accent-soft); border-radius:12px; padding:8px 12px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; font-size:13.5px; }
.cf-prompt.cf-rx{ flex-direction:column; align-items:flex-start; }
.cf-compose{ margin-top:0; }
.cf-compose .compose textarea{ flex:1; min-width:0; }
.cf-manual .thread{ max-height:220px; overflow-y:auto; }
.cf-expanded .cf-thread, .cf-expanded .cf-manual .thread{ max-height:480px; }
.cf-expanded .compose textarea, .cf-expanded .note-body{ min-height:300px !important; }
.cf-regimen { margin: 4px 0 0 18px; padding: 0; } .cf-regimen li { margin: 2px 0; }
/* === check-in conversations (existing patients), 2026-10-09: begin === */
.cf-exhead{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:2px 0 6px; font-size:15px; }
.cf-exstatus{ margin-bottom:8px; }
.ot-exh{ margin-top:22px; }
.ot-ex .ot-status{ display:block; }
/* === check-in conversations (existing patients), 2026-10-09: end === */
/* ---- chart: expandable intake questions, Recommended care, Refill (2026-10-08) ---- */
.tp-body.tp-single{ display:block; padding:0 20px 20px; }
.q-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.q-tools{ display:flex; justify-content:flex-end; margin:0 0 2px; }
.q-all{ font-family:inherit; font-size:12px; background:none; border:0; color:var(--accent); cursor:pointer; padding:4px 0; text-decoration:underline; }
.q-list{ border-top:1px solid var(--line); }
.q-item{ border-bottom:1px solid var(--line); }
.q-row{ width:100%; display:grid; grid-template-columns:14px minmax(150px, 38%) 1fr; gap:10px; align-items:baseline; text-align:left; background:none; border:0; padding:11px 2px; font-family:inherit; font-size:14px; color:var(--ink); cursor:pointer; }
.q-row:hover{ background:var(--wash); }
.q-chev{ color:var(--muted); font-size:11px; transition:transform .12s var(--ease); }
.q-item.open .q-chev{ transform:rotate(90deg); }
.q-short{ color:var(--muted); }
.q-ans{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.q-item.open .q-ans{ white-space:normal; }
.q-detail{ margin:0 0 12px 26px; padding:10px 14px; background:var(--cream); border:1px solid var(--line); border-radius:12px; }
.q-d-label{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:6px 0 2px; }
.q-d-label:first-child{ margin-top:0; }
.q-d-text{ font-size:14px; line-height:1.5; white-space:pre-wrap; }
.q-d-answer{ font-weight:600; }
.q-d-none{ color:var(--muted); font-weight:400; }
@media (max-width: 760px){ .q-row{ grid-template-columns:14px 1fr; } .q-ans{ grid-column:2; white-space:normal; } }

.care-body{ display:flex; flex-direction:column; gap:10px; }
.care-draft{ font-size:11.5px; font-weight:600; color:var(--muted); background:var(--wash); border-radius:100px; padding:3px 10px; width:fit-content; }
.care-main{ border-radius:16px; padding:12px 14px; background:var(--cream); border:1px solid var(--line); border-left:5px solid var(--line); }
.care-main.tone-green{ border-left-color:var(--green); } .care-main.tone-amber{ border-left-color:var(--apricot); } .care-main.tone-red{ border-left-color:var(--red); }
.care-lane{ font-family:'Fraunces',Georgia,serif; font-size:20px; font-weight:600; }
.care-verdict{ font-size:13.5px; font-weight:600; margin-top:2px; }
.care-main.tone-green .care-verdict{ color:var(--green); } .care-main.tone-amber .care-verdict{ color:var(--amber); } .care-main.tone-red .care-verdict{ color:var(--red); }
.care-why{ margin:0; padding-left:18px; font-size:13.5px; line-height:1.5; }
.care-more{ font-family:inherit; font-size:12.5px; background:none; border:0; color:var(--accent); cursor:pointer; padding:0; text-align:left; text-decoration:underline; }
.care-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.care-others{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.care-other{ text-align:left; font-family:inherit; background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:9px 12px; cursor:pointer; display:grid; gap:2px; }
.care-other:hover{ border-color:var(--accent); }
.care-other-name{ font-weight:600; font-size:13.5px; } .care-other-label{ font-size:12px; color:var(--muted); } .care-other-why{ font-size:12.5px; }

.rf-what{ font-size:16px; font-weight:600; margin:8px 0 10px; }
.rf-facts, .rf-now{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.rf-facts > div, .rf-now > div{ display:grid; gap:2px; }
.rf-facts span, .rf-now span{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.rf-facts b, .rf-now b{ font-size:14.5px; } .rf-facts em{ font-style:normal; font-size:12.5px; color:var(--muted); }
.rf-more{ margin-top:10px; font-size:12.5px; color:var(--muted); }
.rf-actions .btn{ text-decoration:none; }
.rf-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.rf-sub{ font-size:13px; color:var(--muted); line-height:1.5; margin:-4px 0 12px; }
.rf-late{ font-family:'Inter',sans-serif; font-size:11.5px; font-weight:700; background:var(--red-soft); color:var(--red); border-radius:100px; padding:2px 9px; margin-left:8px; vertical-align:2px; }
.q-chev{ font-size:14px !important; line-height:1; }
.q-chev{ font-size:0 !important; width:0; height:0; align-self:center; border-left:7px solid var(--muted); border-top:5px solid transparent; border-bottom:5px solid transparent; margin-left:2px; }
.q-item.open .q-chev{ transform:rotate(90deg); }

/* ---- cleaner panels, option chips (2026-10-08, round 2) ---- */
.q-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 6px; }
.q-chip{ font-size:12.5px; line-height:1.3; padding:3px 10px; border-radius:100px; background:var(--wash); color:var(--ink); border:1px solid var(--line); }
.q-chip.on{ background:var(--green-soft); border-color:var(--green); color:var(--green); font-weight:600; }
.q-den{ font-weight:400; color:var(--muted); }
/* Recommended care is only as tall as it needs to be; the panel beside it takes the rest. Dragging the divider still wins. */
.right-panel.care-panel{ flex:0 1 auto; max-height:62%; }
.right-panel.care-panel:only-child{ flex:1 1 0; max-height:none; }
.care-panel .rp-body{ padding:12px 16px 14px; }
.care-body{ gap:8px; }
.tp-body.tp-single{ padding:0 18px 14px; }
.q-detail{ margin:0 0 8px 26px; padding:8px 14px 10px; }
.q-item{ border-bottom:1px solid var(--line); }
.care-note{ font-size:12.5px; color:var(--muted); background:var(--wash); border-radius:12px; padding:7px 12px; line-height:1.45; }

/* ---- Navigator mini player (top right of the chart). Same palette as the care card; one small block, quiet until it needs you ---- */
.mp{ display:flex; flex-direction:column; gap:8px; }
.mp-head{ display:flex; align-items:center; gap:8px; }
.mp-dot{ width:10px; height:10px; border-radius:50%; background:var(--line); flex:none; }
.mp-green .mp-dot{ background:var(--green); } .mp-amber .mp-dot{ background:var(--apricot); } .mp-red .mp-dot{ background:var(--red); }
.mp-tag{ font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.mp-pill{ font-size:12px; font-weight:600; border-radius:100px; padding:2px 10px; }
.mp-pill.green{ background:var(--green-soft); color:var(--green); } .mp-pill.amber{ background:var(--amber-soft); color:var(--amber); } .mp-pill.red{ background:var(--red-soft); color:var(--red); }
.mp-expand{ margin-left:auto; padding:3px 12px; font-size:12.5px; }
.mp-headline{ font-family:'Fraunces',Georgia,serif; font-size:19px; font-weight:600; line-height:1.25; }
.mp-headline.dim{ color:var(--muted); }
.mp-treat{ background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:8px 11px; font-size:13.5px; line-height:1.5; }
.mp-treat.draft{ border-style:dashed; color:var(--muted); }
.mp-rows{ list-style:none; margin:2px 0 0; padding:6px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:1px; }
.mp-row{ display:flex; align-items:baseline; gap:8px; font-size:13.5px; padding:3px 0; }
.mp-ic{ width:16px; text-align:center; flex:none; font-weight:700; }
.mp-row.green .mp-ic{ color:var(--green); } .mp-row.amber .mp-ic{ color:var(--amber); } .mp-row.red .mp-ic{ color:var(--red); }
.mp-lab{ flex:1; } .mp-st{ color:var(--muted); font-size:12.5px; }
.mp-row.amber .mp-st{ color:var(--amber); font-weight:600; } .mp-row.red .mp-st{ color:var(--red); font-weight:600; }
.mp-watch{ background:var(--amber-soft); color:var(--amber); border-radius:12px; padding:8px 11px; font-size:13px; line-height:1.45; }
.mp-watch.soft{ background:var(--wash); color:var(--ink); }
.mp-watch-h{ font-weight:600; margin-bottom:2px; } .mp-watch ul{ margin:0; padding-left:18px; }
.mp-why,.mp-queued{ margin:0; font-size:12.5px; color:var(--muted); }
.mp .care-actions .btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* ---- mini player items: ask the patient, record what she said ---- */
.mp-items{ display:flex; flex-direction:column; gap:8px; }
.mp-item{ border-top:1px solid rgba(0,0,0,.08); padding-top:8px; display:flex; flex-direction:column; gap:6px; }
.mp-item:first-of-type{ border-top:0; padding-top:0; }
.mp-item-t{ font-weight:600; }
.mp-item-b{ display:flex; flex-wrap:wrap; gap:6px; }
.mp-b{ padding:3px 10px; font-size:12.5px; }
.mp-chip{ font-size:12px; border-radius:100px; padding:2px 10px; width:fit-content; background:var(--panel); color:var(--ink); border:1px solid var(--line); }
.mp-chip.asked{ background:var(--accent-soft); color:var(--accent-ink); border-color:transparent; }
.mp-chip.resolved{ background:var(--green-soft); color:var(--green); border-color:transparent; }
.mp-pick{ display:flex; flex-direction:column; gap:4px; }
.mp-ans{ text-align:left; font-family:inherit; font-size:13px; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:6px 10px; cursor:pointer; display:flex; flex-direction:column; gap:1px; }
.mp-ans small{ color:var(--muted); font-size:11.5px; } .mp-ans:hover{ border-color:var(--accent); } .mp-ans.on{ border-color:var(--accent); background:var(--accent-soft); }
.mp-fill{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.mp-in{ font-family:inherit; font-size:13px; padding:5px 8px; border:1px solid var(--line); border-radius:8px; min-width:0; flex:1 1 110px; background:var(--panel); }

/* ---- the provider flow on the Navigator card (2026-10-12): which form, the facts, own reason, one question at a time ---- */
.mp-reading{ display:inline-block; font-size:12px; color:var(--accent-ink); background:var(--accent-soft); border-radius:100px; padding:2px 10px; margin-top:6px; }
.mp-eyebrow{ font-size:12px; color:var(--muted); margin-top:6px; }
.mp-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.mp-facts{ margin-top:8px; }
.mp-fact{ padding:8px 0; border-top:1px solid var(--line); font-size:13px; line-height:1.45; }
.mp-fact-t{ display:flex; gap:8px; }
.mp-fact .mp-ic{ flex:0 0 16px; font-weight:700; }
.mp-fact.ok .mp-ic{ color:var(--green); } .mp-fact.info .mp-ic{ color:var(--muted); } .mp-fact.miss .mp-ic{ color:var(--amber); }
.mp-fact.miss{ background:var(--amber-soft); border-top:0; border-radius:10px; padding:8px 10px; margin:2px -4px; }
.mp-fact-more{ margin-left:24px; }
.mp-ev{ margin:6px 0 2px 24px; background:var(--paper, #fff); border:1px solid var(--line); border-radius:10px; padding:2px 10px; font-size:12.5px; }
.mp-ev > div{ padding:6px 0; border-top:1px solid var(--line); } .mp-ev > div:first-child{ border-top:0; }
.mp-ev span{ display:block; color:var(--muted); } .mp-ev b{ display:block; font-weight:600; }
.mp-askwhy{ background:var(--accent-soft); color:var(--accent-ink); border-radius:12px; padding:8px 11px; font-size:13px; line-height:1.45; margin-top:8px; }
.mp-askwhy ul{ margin:2px 0 4px; padding-left:18px; }
.mp-stuck{ margin-top:8px; } .mp-own{ margin-top:8px; }
.mp-ta{ width:100%; resize:vertical; font:inherit; }
.mp-step-hint{ font-size:12px; color:var(--muted); margin:4px 0; }
.mp-veil{ position:fixed; inset:0; z-index:60; background:rgba(30,28,24,.45); display:flex; align-items:center; justify-content:center; padding:16px; }
.mp-modal{ background:var(--bg, #faf7f0); color:var(--ink, #1f1d1a); border-radius:16px; padding:20px; width:560px; max-width:100%; max-height:90vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.mp-modal-h{ font-family:'Fraunces',Georgia,serif; font-size:19px; font-weight:600; }
.mp-step{ margin-top:14px; } .mp-step-q{ font-weight:600; margin-bottom:8px; font-size:14px; }
.mp-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.mp-chipb{ border:1px solid var(--line); background:var(--paper, #fff); color:inherit; border-radius:100px; padding:7px 13px; font:inherit; font-size:13px; cursor:pointer; }
.mp-chipb.on{ background:var(--green); color:#fff; border-color:var(--green); }
.mp-modal-b{ display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.tp-other{ opacity:.75; } .tp-other .tp-summary{ font-style:italic; }
.mp-by{ display:block; color:var(--muted); font-size:12px; }
.ho-select{ width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; font:inherit; }
.q-deferred{ display:flex; gap:10px; align-items:center; font-size:12px; color:var(--muted); padding:0 12px 8px 30px; }
.ca-list{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.ca-item{ display:flex; flex-direction:column; gap:2px; text-align:left; border:1px solid var(--line); background:#fff; color:inherit; border-radius:12px; padding:10px 13px; font:inherit; cursor:pointer; }
.ca-item:hover{ border-color:var(--accent-ink); }
.ca-label{ font-weight:600; font-size:14px; }
.ca-say{ font-size:12px; color:var(--muted); }