/* DocVoc phones — the shared mobile layer (the handoff's docvoc-mobile.css, mapped onto :root.ios / :root.android).
   Values follow DESIGN_GUIDELINES.md where it disagrees with the Mobile prototype (design/DESIGN_GUIDE.md §13):
   four-item tab bar without a mic, the Genie mic as the app bar's one icon action, 22/700 titles, body 15, sheets r14.
   Colours only through tokens.css. Everything here is scoped to the phone tiers. */

:root.ios{
  --m-status:env(safe-area-inset-top,44px); --m-home:env(safe-area-inset-bottom,30px);
  --m-bar-pad:6px 14px 12px; --m-tab-pad:7px 8px 4px;
  --m-btn-r:var(--r-control); --m-field-r:var(--r-control); --m-rec-r:var(--r-control);
}
:root.android{
  --m-status:env(safe-area-inset-top,0px); --m-home:env(safe-area-inset-bottom,0px);
  --m-bar-pad:10px 12px 14px; --m-tab-pad:9px 6px 6px;
  --m-btn-r:var(--r-pill); --m-field-r:var(--r-pill); --m-rec-r:var(--r-pill);
}
:root.ios,:root.android{
  --m-title:22px; --m-title-w:700; --m-section:17px; --m-body:15px; --m-secondary:13.5px; --m-meta:12px;
  --m-tab-icon:22px; --m-tab-fs:11px; --m-tab-h:64px; --m-sheet-r:var(--r-panel); --m-side:14px;
}

:is(.ios,.android) .m-screen{position:relative;display:flex;flex-direction:column;height:100dvh;background:var(--bg);padding-top:var(--m-status);padding-bottom:var(--m-home)}
:is(.ios,.android) .m-appbar{flex:none;display:flex;align-items:center;gap:10px;padding:var(--m-bar-pad);background:var(--panel);border-bottom:1px solid var(--line)}
:is(.ios,.android) .m-appbar__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
:is(.ios,.android) .m-appbar__title{font-size:var(--m-title);font-weight:var(--m-title-w);letter-spacing:-.02em;line-height:1.2;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(.ios,.android) .m-appbar__kicker{font-size:10px;font-weight:650;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink3)}
:is(.ios,.android) .m-back{flex:none;min-width:44px;height:44px;margin-left:-10px;padding:0 6px;border:none;background:none;color:var(--accent-text);display:flex;align-items:center;gap:4px;font-size:var(--m-secondary);font-weight:550}
/* The Genie mic: the app bar's one right-hand icon action (P-2, V-2). */
:is(.ios,.android) .m-mic{flex:none;width:44px;height:44px;border-radius:var(--r-pill);border:none;background:transparent;color:var(--accent-text);display:flex;align-items:center;justify-content:center}
:is(.ios,.android) .m-mic svg{width:22px;height:22px}
:is(.ios,.android) .m-mic[aria-pressed="true"]{background:var(--live);color:var(--on-fill);animation:docvoc-ring 1.6s var(--ease) infinite}
:is(.ios,.android) .m-content{flex:1;min-height:0;overflow-y:auto;padding:12px var(--m-side) 16px;display:flex;flex-direction:column;gap:12px;font-size:var(--m-body)}

/* Bottom tab bar: exactly Today · Schedule · Patients · Review, no mic (N-8). */
:is(.ios,.android) .m-tabbar{flex:none;display:flex;align-items:center;min-height:var(--m-tab-h);padding:var(--m-tab-pad);background:var(--panel);border-top:1px solid var(--line)}
:is(.ios,.android) .m-tab{flex:1;min-width:0;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:transparent;padding:4px 0;color:var(--ink3);font-size:var(--m-tab-fs);font-weight:600}
:is(.ios,.android) .m-tab svg{width:var(--m-tab-icon);height:var(--m-tab-icon)}
:is(.ios,.android) .m-tab[aria-current="page"]{color:var(--accent-text);font-weight:650}
.android .m-tab[aria-current="page"] .m-tab__icon{padding:3px 15px;border-radius:var(--r-pill);background:var(--accent-soft)}

:is(.ios,.android) .m-btn{height:var(--h-large);width:100%;border-radius:var(--m-btn-r);border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-size:var(--m-body);font-weight:550;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
:is(.ios,.android) .m-btn--primary{border:none;background:var(--accent);color:var(--accent-ink);font-weight:600;box-shadow:var(--shadow-primary)}
:is(.ios,.android) .m-btn--danger{color:var(--danger);border-color:var(--danger-line)}
:is(.ios,.android) .m-field{width:100%;height:46px;border-radius:var(--m-field-r);border:1px solid var(--line);background:var(--panel2);padding:0 14px;font-size:16px;color:var(--ink)}
:is(.ios,.android) .m-otp{display:flex;gap:8px}
:is(.ios,.android) .m-otp input{flex:1;min-width:0;height:52px;border-radius:var(--m-field-r);border:1px solid var(--line);background:var(--panel2);text-align:center;font-family:var(--font-mono);font-size:20px}

:is(.ios,.android) .m-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden}
:is(.ios,.android) .m-row{display:flex;align-items:center;gap:10px;padding:12px var(--m-side);border-bottom:1px solid var(--line2);min-height:56px}
:is(.ios,.android) .m-row:last-child{border-bottom:none}
:is(.ios,.android) .m-row__name{font-size:var(--m-body);font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(.ios,.android) .m-row__meta{font-size:var(--m-meta);color:var(--ink3);font-family:var(--font-mono);margin-top:2px}
:is(.ios,.android) .m-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:550;padding:4px 8px;border-radius:var(--r-badge);white-space:nowrap}
:is(.ios,.android) .m-badge svg{width:13px;height:13px}

:is(.ios,.android) .m-timer{font-family:var(--font-mono);font-size:44px;font-weight:500;letter-spacing:-.03em}
:is(.ios,.android) .m-transport{flex:none;display:flex;gap:10px;padding:12px var(--m-side);background:var(--panel);border-top:1px solid var(--line)}
:is(.ios,.android) .m-transport button{flex:1;height:52px;border-radius:var(--m-rec-r)}

/* Bottom sheet (O-8) and the Genie dock: top radius 14, grab handle, no scrim for the dock. */
:is(.ios,.android) .m-sheet{position:fixed;left:0;right:0;bottom:0;max-height:88dvh;display:flex;flex-direction:column;background:var(--panel);border-top-left-radius:var(--m-sheet-r);border-top-right-radius:var(--m-sheet-r);box-shadow:var(--shadow-card);padding-bottom:var(--m-home);z-index:70;animation:m-sheet-in 240ms cubic-bezier(.2,.7,.2,1)}
:is(.ios,.android) .m-sheet__handle{flex:none;align-self:center;width:36px;height:4px;border-radius:var(--r-pill);background:var(--line);margin:8px 0 4px}
:is(.ios,.android) .m-dock{position:fixed;left:0;right:0;bottom:0;padding-bottom:var(--m-home);background:var(--panel);border-top:1px solid var(--accent-line);border-top-left-radius:var(--m-sheet-r);border-top-right-radius:var(--m-sheet-r);box-shadow:var(--shadow-card);display:flex;flex-direction:column;z-index:60;animation:m-sheet-in 240ms cubic-bezier(.2,.7,.2,1)}
:is(.ios,.android) .m-dock__status{display:flex;align-items:center;gap:9px;padding:11px var(--m-side) 9px;border-bottom:1px solid var(--line2);font-size:var(--m-secondary);font-weight:600}
:is(.ios,.android) .m-dock__said{padding:11px var(--m-side) 0;font-size:var(--m-body);font-weight:600;line-height:1.4}
:is(.ios,.android) .m-dock__result{margin:8px var(--m-side) 11px;display:flex;align-items:center;gap:9px;border:1px solid var(--accent-line);border-radius:10px;background:var(--accent-soft);padding:9px 11px;font-size:var(--m-secondary)}
:is(.ios,.android) .m-added{background:var(--accent-soft)}
@keyframes m-sheet-in{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){:is(.ios,.android) :is(.m-sheet,.m-dock,.m-mic){animation:none!important}}

/* ---- The visit capture screens (visit-shared.js createCaptureUI; DocVoc Mobile 3a–3e, 3j): Ready, Assign patient, Recording,
   Paused, Transcribing / Writing the note, Nothing heard and Discard. Rulebook values where it overrides the prototype
   (DESIGN_GUIDE §13): 22/700 titles, body 15, secondary 13.5, meta 12, sheet radius 14, radii from R-1. ---- */
:is(.ios,.android) .vc-screen{position:fixed;inset:0;z-index:30;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;padding:var(--m-status) 0 var(--m-home);box-shadow:none;color:var(--ink);overflow:hidden}
:is(.ios,.android) .vc-screen[hidden],:is(.ios,.android) dialog.vc-screen:not([open]),:is(.ios,.android) dialog.vc-sheet:not([open]){display:none}
:is(.ios,.android) dialog.vc-screen::backdrop{background:var(--bg)}
:is(.ios,.android) .vc-bar .m-back svg{width:20px;height:20px}
:is(.ios,.android) .vc-strip{flex:none;display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--panel);border-bottom:1px solid var(--line)}
:is(.ios,.android) .vc-tile{width:32px;height:32px;flex:none;border-radius:var(--r-control);background:var(--accent-soft);color:var(--accent-text);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
:is(.ios,.android) .vc-tile.empty{background:transparent;border:1.5px dashed var(--line);color:var(--ink3)}
:is(.ios,.android) .vc-tile svg{width:16px;height:16px}
:is(.ios,.android) .vc-who{flex:1;min-width:0;display:flex;flex-direction:column}
:is(.ios,.android) .vc-name{font-size:var(--m-secondary);font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(.ios,.android) .vc-meta{margin-top:2px;font-family:var(--font-mono);font-size:var(--m-meta);color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(.ios,.android) .vc-who-button{flex:1;min-width:0;min-height:44px;display:flex;align-items:center;justify-content:flex-start;padding:0;border:0;background:transparent;color:var(--ink);text-align:left}
:is(.ios,.android) .vc-template{position:relative;padding:0;border:0;background:transparent;color:var(--accent-text);font:inherit}
:is(.ios,.android) .vc-template::after{content:'';position:absolute;inset:-14px -6px}
:is(.ios,.android) .vc-assign{flex:none;height:44px;padding:0 13px;border-radius:var(--m-btn-r);border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent-text);font-size:var(--m-secondary);font-weight:600;white-space:nowrap}
:is(.ios,.android) .vc-badge{flex:none}
:is(.ios,.android) .vc-badge[hidden],:is(.ios,.android) .vc-discard[hidden],:is(.ios,.android) .vc-alert[hidden],:is(.ios,.android) .vc-consent[hidden],:is(.ios,.android) .vc-note[hidden],:is(.ios,.android) .vc-must[hidden]{display:none}
:is(.ios,.android) .vc-badge.live{color:var(--live);background:var(--live-bg)}
:is(.ios,.android) .vc-badge.warn{color:var(--warn);background:var(--warn-bg)}
:is(.ios,.android) .vc-badge.accent{color:var(--accent-text);background:var(--accent-soft)}
:is(.ios,.android) .vc-badge.danger{color:var(--danger);background:var(--danger-bg)}
:is(.ios,.android) .vc-badge svg{width:12px;height:12px}
:is(.ios,.android) .vc-badge.live svg{animation:m-live 1.2s var(--ease) infinite alternate}
:is(.ios,.android) .vc-discard{flex:none;width:44px;height:44px;padding:0;border-radius:10px;border:1px solid var(--danger-line);background:var(--danger-bg);color:var(--danger);display:flex;align-items:center;justify-content:center}
:is(.ios,.android) .vc-discard svg{width:18px;height:18px}
:is(.ios,.android) .vc-timer{flex:none;display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px 13px 18px;background:var(--panel)}
:is(.ios,.android) .vc-clock{color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
:is(.ios,.android) .vc-rec.paused .vc-clock{color:var(--warn)}
:is(.ios,.android) .vc-meter{display:flex;align-items:flex-end;gap:2.5px;height:30px;transform-origin:bottom;transform:scaleY(var(--level,1));transition:transform 120ms linear}
:is(.ios,.android) .vc-meter i{display:block;width:3px;height:30px;border-radius:2px;background:var(--live);transform-origin:bottom;animation:m-lvl var(--d,.8s) ease-in-out var(--dl,0s) infinite}
:is(.ios,.android) .vc-rec.paused .vc-meter{transform:none}
:is(.ios,.android) .vc-rec.paused .vc-meter i{height:6px;background:var(--warn-line);animation:none}
:is(.ios,.android) .vc-helper{margin:0;max-width:30ch;text-align:center;font-size:var(--m-secondary);line-height:1.55;color:var(--ink2)}
:is(.ios,.android) .vc-alert{margin:0;padding:8px 12px;border-radius:10px;background:var(--danger-bg);color:var(--danger);font-size:var(--m-secondary);text-align:center}
:is(.ios,.android) .vc-live{flex:1;min-height:0;overflow:hidden;text-align:left;display:flex;flex-direction:column;gap:8px;padding:12px 13px;background:var(--bg)}
:is(.ios,.android) .vc-kicker{margin:0;font-size:10px;font-weight:650;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink3)}
:is(.ios,.android) .vc-lines{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:8px}
:is(.ios,.android) .vc-line{display:flex;gap:9px}
:is(.ios,.android) .vc-line-time{flex:none;width:38px;font-family:var(--font-mono);font-size:var(--m-meta);color:var(--ink3);line-height:1.7}
:is(.ios,.android) .vc-line-text{margin:0;min-width:0;font-size:var(--m-secondary);line-height:1.55;color:var(--ink2)}
:is(.ios,.android) .vc-line-text strong{font-weight:550;color:var(--ink)}
:is(.ios,.android) .vc-empty{margin:0;font-size:var(--m-secondary);color:var(--ink3)}
:is(.ios,.android) .vc-foot{flex:none;display:flex;gap:9px;padding:11px 13px;background:var(--panel);border-top:1px solid var(--line)}
:is(.ios,.android) .vc-foot .m-btn{height:46px;flex:1}
:is(.ios,.android) .vc-foot.vc-stack{flex-direction:column}
:is(.ios,.android) .vc-transport .m-btn{height:50px}
:is(.ios,.android) .vc-transport .vc-finish{flex:1.3}
:is(.ios,.android) .m-btn svg{width:17px;height:17px;flex:none}
:is(.ios,.android) .m-btn:disabled{opacity:.5}
/* 3a Ready */
:is(.ios,.android) .vc-ready-body{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:18px 20px;background:var(--bg)}
:is(.ios,.android) .vc-idle{color:var(--ink3)}
:is(.ios,.android) .vc-start{height:var(--h-hero);padding:0 26px 0 20px;border:0;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);font-size:var(--m-body);font-weight:600;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-primary)}
:is(.ios,.android) .vc-start svg{width:22px;height:22px}
:is(.ios,.android) .vc-start:disabled{opacity:.5;box-shadow:none}
:is(.ios,.android) .vc-note{margin:0;max-width:34ch;text-align:center;font-size:var(--m-secondary);color:var(--warn)}
:is(.ios,.android) .vc-input{margin:0;font-family:var(--font-mono);font-size:var(--m-meta);color:var(--ink3)}
:is(.ios,.android) .vc-consent{display:flex;align-items:center;gap:12px;font-size:var(--m-body);color:var(--ink)}
:is(.ios,.android) .vc-switch{position:relative;flex:none;width:48px;height:28px;padding:0;border:0;border-radius:var(--r-pill);background:var(--line);transition:background var(--motion-fast,120ms) var(--ease)}
:is(.ios,.android) .vc-switch::after{content:'';position:absolute;inset:-8px -2px}
:is(.ios,.android) .vc-switch i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:var(--r-pill);background:var(--panel);box-shadow:var(--shadow);transition:transform var(--motion-fast,120ms) var(--ease)}
:is(.ios,.android) .vc-switch[aria-checked="true"]{background:var(--accent)}
:is(.ios,.android) .vc-switch[aria-checked="true"] i{transform:translateX(20px)}
/* 3b / 3j Sheets over the visit (O-8: radius 14, 36×4 handle, max 88dvh, the #1c2c47 scrim) */
:is(.ios,.android) dialog.vc-sheet{top:auto;width:100%;max-width:none;max-height:88dvh;margin:0;border:0;padding:0 0 var(--m-home);color:var(--ink);overflow:hidden}
:is(.ios,.android) dialog.vc-sheet::backdrop{background:var(--scrim)}
:is(.ios,.android) .vc-sheet-head{flex:none;display:flex;align-items:center;gap:10px;padding:6px 14px 10px}
:is(.ios,.android) .vc-sheet h2{flex:1;margin:0;font-size:var(--m-section);font-weight:600;letter-spacing:-.02em}
:is(.ios,.android) .vc-close{flex:none;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:var(--panel2);color:var(--ink2);display:flex;align-items:center;justify-content:center}
:is(.ios,.android) .vc-close svg{width:18px;height:18px}
:is(.ios,.android) .vc-must{margin:0 14px 10px;font-size:var(--m-secondary);color:var(--ink2)}
:is(.ios,.android) .vc-search{flex:none;display:flex;flex-direction:row;align-items:center;gap:9px;height:46px;margin:0 14px 10px;padding:0 13px;border-radius:var(--m-field-r);border:1.5px solid var(--accent);background:var(--panel);box-shadow:0 0 0 3px var(--focus-ring);color:var(--ink3)}
:is(.ios,.android) .vc-search svg{width:17px;height:17px;flex:none}
:is(.ios,.android) .vc-search input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;box-shadow:none;outline:none;font-size:16px;color:var(--ink)}
/* flex-basis auto, never 0: the sheet is as tall as its content, and the iPhone’s WebKit (iOS 26) resolves a 0% basis in that
   indefinite height to nothing, so the patients vanished after Finish recording and no one could be picked or added (24 Sept 2026) */
:is(.ios,.android) .vc-matches{flex:0 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column}
:is(.ios,.android) .vc-matches>.vc-kicker{padding:4px 14px 6px}
:is(.ios,.android) .vc-matches>.vc-empty{padding:4px 14px 10px}
:is(.ios,.android) .vc-pick{flex:none;width:100%;min-height:56px;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:9px 14px;border:0;border-radius:0;background:transparent;color:var(--ink);text-align:left;font-weight:400}
:is(.ios,.android) .vc-pick.selected{background:var(--accent-soft)}
:is(.ios,.android) .vc-pick-copy{flex:1;min-width:0;display:flex;flex-direction:column}
:is(.ios,.android) .vc-pick-name{font-size:var(--m-body);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(.ios,.android) .vc-pick-name b{font-weight:700}
:is(.ios,.android) .vc-pick-facts{margin-top:2px;font-family:var(--font-mono);font-size:var(--m-meta);color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(.ios,.android) .vc-current{flex:none;padding:3px 7px;border-radius:var(--r-badge);border:1px solid var(--accent-line);background:var(--panel);color:var(--accent-text);font-size:11px;font-weight:600}
:is(.ios,.android) .vc-new{border-top:1px solid var(--line2);color:var(--accent-text)}
:is(.ios,.android) .vc-new .vc-pick-name{font-weight:600}
:is(.ios,.android) .vc-tile-new{background:transparent;border:1.5px dashed var(--accent-line)}
:is(.ios,.android) .vc-sheet-foot{flex:none;display:flex;flex-direction:column;gap:8px;padding:11px 14px;border-top:1px solid var(--line)}
:is(.ios,.android) .vc-hint{margin:0;font-size:var(--m-meta);line-height:1.45;color:var(--ink3)}
:is(.ios,.android) .vc-go{height:46px}
:is(.ios,.android) .vc-text-danger{height:44px;border:0;background:transparent;color:var(--danger);font-size:var(--m-body);font-weight:600}
:is(.ios,.android) .vc-discard-top{display:flex;gap:12px;padding:8px 16px 4px}
:is(.ios,.android) .vc-danger-tile{flex:none;width:40px;height:40px;border-radius:10px;background:var(--danger-bg);color:var(--danger);display:flex;align-items:center;justify-content:center}
:is(.ios,.android) .vc-danger-tile svg{width:20px;height:20px}
:is(.ios,.android) .vc-danger-tile.big{width:52px;height:52px}
:is(.ios,.android) .vc-danger-tile.big svg{width:26px;height:26px}
:is(.ios,.android) .vc-discard-body{margin:4px 0 0;font-size:var(--m-secondary);line-height:1.55;color:var(--ink2)}
:is(.ios,.android) .vc-lost{margin:12px 16px 0;padding:0;list-style:none;border:1px solid var(--line);border-radius:10px;background:var(--panel2);overflow:hidden}
:is(.ios,.android) .vc-lost li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line2);font-size:var(--m-secondary)}
:is(.ios,.android) .vc-lost li:last-child{border-bottom:0}
:is(.ios,.android) .vc-lost svg{width:16px;height:16px;flex:none;color:var(--ink3)}
:is(.ios,.android) .vc-foot-note{margin:10px 16px 0;font-size:var(--m-meta);line-height:1.5;color:var(--ink3)}
:is(.ios,.android) .vc-discard-actions{display:flex;flex-direction:column;gap:8px;padding:14px 16px}
:is(.ios,.android) .vc-discard-actions .m-btn{height:var(--h-large)}
:is(.ios,.android) .vc-btn-danger{border:0;background:var(--danger);color:var(--on-fill);font-weight:600}
/* 3e Transcribing / Writing the note / Nothing heard */
:is(.ios,.android) .vc-progress-body{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:22px 18px;background:var(--bg)}
:is(.ios,.android) .vc-trail{margin:0;padding:0;list-style:none}
:is(.ios,.android) .vc-step{display:flex;gap:12px}
:is(.ios,.android) .vc-rail{flex:none;width:24px;display:flex;flex-direction:column;align-items:center}
:is(.ios,.android) .vc-dot{width:24px;height:24px;flex:none;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;background:var(--panel);border:1.5px solid var(--line);color:var(--accent-ink)}
:is(.ios,.android) .vc-dot svg{width:14px;height:14px}
:is(.ios,.android) .vc-step.done .vc-dot{background:var(--accent);border:0}
:is(.ios,.android) .vc-step.active .vc-dot{background:var(--accent-soft);border:2px solid var(--accent)}
:is(.ios,.android) .vc-step.error .vc-dot{background:var(--danger);border:0;color:var(--on-fill)}
:is(.ios,.android) .vc-step.waiting .vc-dot{background:var(--warn-bg);border:1.5px solid var(--warn)}
:is(.ios,.android) .vc-link{width:2px;flex:1;min-height:26px;background:var(--line)}
:is(.ios,.android) .vc-step.done .vc-link{background:var(--accent)}
:is(.ios,.android) .vc-step-copy{min-width:0;padding-bottom:18px}
:is(.ios,.android) .vc-step-copy strong{display:block;font-size:var(--m-body);font-weight:550;color:var(--ink)}
:is(.ios,.android) .vc-step.active .vc-step-copy strong{font-weight:650}
:is(.ios,.android) .vc-step.todo .vc-step-copy strong{color:var(--ink3)}
:is(.ios,.android) .vc-step-copy small{display:block;margin-top:2px;font-size:var(--m-meta);color:var(--ink3)}
:is(.ios,.android) .vc-pct{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
:is(.ios,.android) .vc-info{margin:6px 0 0;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:var(--m-secondary);line-height:1.55;color:var(--ink2)}
:is(.ios,.android) .vc-silent{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);text-align:center}
:is(.ios,.android) .vc-silent h2{margin:0;font-size:var(--m-section);font-weight:600}
:is(.ios,.android) .vc-silent-text{margin:0;font-size:var(--m-secondary);line-height:1.55;color:var(--ink2)}
:is(.ios,.android) .vc-mic-field{width:100%;display:flex;flex-direction:column;gap:6px;text-align:left}
:is(.ios,.android) .vc-mic-test{width:100%;display:flex;align-items:center;gap:10px}
:is(.ios,.android) .vc-test{width:auto;flex:none;height:44px;padding:0 14px}
:is(.ios,.android) .vc-test-bars{flex:1;min-width:0;height:22px;display:flex;align-items:flex-end;gap:2px}
:is(.ios,.android) .vc-test-bars i{flex:1;max-width:3px;height:4px;border-radius:2px;background:var(--line)}
:is(.ios,.android) .vc-test-state{flex:none;font-size:var(--m-meta);color:var(--ink3)}
:is(.ios,.android) .vc-test-state.ok{color:var(--ok)}
:is(.ios,.android) .vc-progress.peek{inset:auto 12px calc(var(--m-home) + 12px);width:auto;height:auto;padding:0;background:transparent}
/* Nothing mic-related in the app bar once the microphone has stopped: the phones' visit bars carry no mic at all (V-1). */
:is(.ios,.android) .genie-mic-busy{display:none!important}
@keyframes m-lvl{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes m-live{from{opacity:1}to{opacity:.45}}
@media (prefers-reduced-motion:reduce){:is(.ios,.android) :is(.vc-meter i,.vc-badge.live svg){animation:none!important}:is(.ios,.android) .vc-meter i{height:18px}:is(.ios,.android) .vc-meter{transform:none}}
:is(.ios,.android) .vc-line-time:empty{display:none}

/* ---- A visit’s note stage (visit-shared.js createPhoneNote, DocVoc Mobile.dc.html 3c–3h): the shared app bar, a status strip,
   the tab strip Note · Transcript · Documents · Addenda, one content region, the details to confirm and the foot bar. The
   rulebook's sizes (§3.1) replace the prototype's 10.5–12.5 px. Nothing here shows outside body.pn-note. ---- */
.pn-status,.pn-confirm,.pn-player,.pn-lines,.pn-docs,.pn-foot-line,.pn-count{display:none}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page{display:flex;flex-direction:column;gap:0;padding:0!important;overflow:hidden;background:var(--panel)}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page>:not(#pn-status,#document){display:none!important}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page .pn-status{flex:none;display:flex;align-items:center;gap:8px;min-height:0;padding:9px 13px;background:var(--panel);border-bottom:1px solid var(--line)}
.pn-badge{display:inline-flex;align-items:center;gap:4px;flex:none;padding:4px 8px;border-radius:var(--r-badge);font-size:11px;font-weight:550;white-space:nowrap}
.pn-badge .icon{width:12px;height:12px}
.pn-badge.is-review{color:var(--warn);background:var(--warn-bg)}
.pn-badge.is-signed{color:var(--ok);background:var(--ok-bg)}
.pn-badge.is-draft{color:var(--ink2);background:var(--panel2)}
.pn-when{flex:1;min-width:0;font-family:var(--font-mono);font-size:var(--m-meta);color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-more{flex:none;width:44px;height:44px;min-height:0;margin:-9px -8px -9px 0;padding:0;border:0;border-radius:var(--r-control);background:transparent;color:var(--ink3);display:inline-flex;align-items:center;justify-content:center}
.pn-more[hidden]{display:none}
.pn-more .icon{width:20px;height:20px}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page #document{flex:1;min-height:0;display:flex;flex-direction:column;margin:0;padding:0;border:0;border-radius:0;background:var(--panel);overflow:hidden}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page .editor-toolbar{position:static;flex:none;display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0;border:0;background:var(--panel)}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page .editor-tools{display:none}
:root:is(.ios,.android) body.pn-note.pn-note[data-pn-tab=transcript] #encounter-page:not(.ph-has-note) .editor-tools{display:flex;justify-content:flex-end;padding:8px 13px 0;margin:0}
/* The tab strip: left-aligned, sized to content, the active tab underlined (Source 1045-1047). */
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page .pn-strip{display:flex;justify-content:flex-start;grid-template-columns:none;gap:2px;width:auto;margin:0;padding:0 8px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--panel);box-shadow:none;overflow:hidden}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page .pn-strip .pn-tab{position:static;flex:none;display:inline-flex;align-items:center;gap:5px;width:auto;height:auto;min-height:44px;margin:0 0 -1px;padding:10px 9px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;box-shadow:none;color:var(--ink2);font-size:var(--m-secondary);font-weight:500;letter-spacing:0;text-transform:none;white-space:nowrap;order:0}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page .pn-strip .pn-tab[hidden]{display:none}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page .pn-strip .pn-tab[aria-selected=true]{color:var(--accent-text);font-weight:650;border-bottom-color:var(--accent);background:transparent}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page .pn-strip .pn-tab::after,:root:is(.ios,.android) body.pn-note.pn-note #encounter-page .pn-strip :is(.icon,.tab-count,.tab-long){display:none}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page .pn-strip .tab-short{display:inline}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page .pn-strip #iv-tab-audio{display:none}
:root:is(.ios,.android) body.pn-note.pn-note .pn-count:not(:empty){display:inline;font-family:var(--font-mono);font-size:var(--m-meta);font-weight:400;color:var(--ink3)}
/* One content region between the tabs and the foot bar; its panes page or scroll inside it, never the page. */
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page .document-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:var(--panel)}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page #document .document-pane:not([hidden]){flex:1;min-height:0;display:flex;flex-direction:column;margin:0;padding:0;border:0;border-radius:0;background:var(--panel);overflow-y:auto;overscroll-behavior:contain}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page #note-pane .note-actions{display:none}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page.pn-editing #note-pane .note-actions{display:flex;position:static;margin:10px 13px 0;box-shadow:none}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page :is(#phone-note-template,#av-addendum,.iv-note-rows,#note-addenda,.av-read,.iv-read,.av-audio,.av-docs,.iv-docs){display:none!important}
/* 3d The note: one section at a time with its source count; the details stay highlighted in place. */
:root:is(.ios,.android) body.pn-note.pn-note #note-preview{padding:13px 15px;display:flex;flex-direction:column;gap:14px;border:0;border-radius:0;background:transparent}
:root:is(.ios,.android) body.pn-note.pn-note #note-preview.note-prose section{margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;display:flex;flex-direction:column;gap:9px}
:root:is(.ios,.android) body.pn-note.pn-note #note-preview .section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
:root:is(.ios,.android) body.pn-note.pn-note #note-preview .section-head h2{margin:0;font-family:var(--font-sans);font-size:10px;font-weight:650;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink3)}
:root:is(.ios,.android) body.pn-note.pn-note #note-preview .section-count{font-family:var(--font-mono);font-size:var(--m-meta);font-weight:600;color:var(--accent-text);white-space:nowrap}
:root:is(.ios,.android) body.pn-note.pn-note #note-preview section>p{margin:0;font-size:var(--m-body);line-height:1.6;color:var(--body);text-wrap:pretty}
:root:is(.ios,.android) body.pn-note.pn-note #note-preview .note-greeting{margin:0;font-size:var(--m-body);color:var(--body)}
:root:is(.ios,.android) body.pn-note.pn-note #note-pane :is(#note-stale,.stale-bar,#signed-history,#note-moves){margin-left:13px;margin-right:13px}
/* 3e Details to confirm, pinned above the foot bar. */
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page .pn-confirm:not([hidden]){flex:none;display:flex;flex-direction:column;gap:4px;margin:0 13px 10px;padding:10px 12px 4px;border:1px solid var(--warn-line);border-radius:10px;background:var(--warn-bg)}
.pn-confirm-top{display:flex;align-items:center;gap:9px}
.pn-confirm-top>.icon{flex:none;width:17px;height:17px;color:var(--warn)}
.pn-confirm-text{flex:1;min-width:0}
.pn-confirm-word{margin:0;font-size:var(--m-secondary);line-height:1.45;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-confirm-word strong{font-weight:600}
.pn-confirm-word span{color:var(--ink2)}
.pn-confirm-why{margin:1px 0 0;font-size:var(--m-meta);line-height:1.4;color:var(--ink2)}
.pn-accept{flex:none;display:inline-flex;align-items:center;gap:6px;height:44px;min-height:44px;padding:0 15px;border:0;border-radius:var(--m-btn-r);background:var(--accent);color:var(--accent-ink);font-size:var(--m-secondary);font-weight:600}
.pn-accept .icon{width:16px;height:16px}
.pn-confirm-nav{display:flex;align-items:center;flex-wrap:wrap;gap:0 2px;margin:0 -6px}
.pn-step{flex:none;width:44px;height:44px;min-height:0;padding:0;border:0;background:transparent;color:var(--ink2);display:inline-flex;align-items:center;justify-content:center}
.pn-step .icon{width:18px;height:18px}
.pn-pos{flex:none;font-family:var(--font-mono);font-size:var(--m-meta);color:var(--ink2);white-space:nowrap}
.pn-link{flex:none;height:44px;min-height:0;padding:0 6px;border:0;background:transparent;color:var(--accent-text);font-size:var(--m-secondary);font-weight:600;white-space:nowrap}
.pn-all{margin-left:auto}
/* The foot bar: what is left on the left; Sign (or Export once signed) sized to content on the right (Source 252-258, 522-525). */
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page .document-footer{position:static;display:flex!important;flex:none;align-items:center;gap:9px;min-height:0;margin:0;padding:10px 13px calc(10px + var(--m-home));border:0;border-top:1px solid var(--line);border-radius:0;background:var(--panel);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page .document-footer>:not(.pn-foot-line,.toolbar){display:none}
:root:is(.ios,.android) body.pn-note.pn-note .pn-foot-line{display:block;flex:1;min-width:0;margin:0;font-size:var(--m-meta);line-height:1.4;color:var(--ink3)}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page .document-footer .toolbar{flex:none;display:flex;gap:9px;margin:0}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page .document-footer :is(#amend-note,#phone-amend){display:none}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page #review:not([hidden]){display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;width:auto;height:46px;min-height:46px;padding:0 18px;border:0;border-radius:var(--m-btn-r);background:var(--accent);color:var(--accent-ink);font-size:var(--m-body);font-weight:600}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page #export{display:none}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page.ph-signed #export{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;width:auto;height:46px;min-height:46px;padding:0 16px;border:1px solid var(--line);border-radius:var(--m-btn-r);background:var(--panel2);color:var(--ink);font-size:var(--m-body);font-weight:550}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page :is(#review,#export) .icon{display:block;width:17px;height:17px;flex:none}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page #export span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
/* 3f Transcript: the player pinned under the tabs, then the rows; the current row is tinted. */
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page .pn-player:not([hidden]){display:flex;align-items:center;gap:10px;padding:9px 13px;background:var(--panel2);border-bottom:1px solid var(--line)}
.pn-play{flex:none;width:44px;height:44px;min-height:0;padding:0;border:0;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center}
.pn-play .icon{width:16px;height:16px}
.pn-player-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.pn-scrub{-webkit-appearance:none;appearance:none;width:100%;height:18px;margin:0;padding:0;border:0;background:transparent;accent-color:var(--accent)}
.pn-scrub::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:linear-gradient(to right,var(--accent) var(--at,0%),var(--line) var(--at,0%))}
.pn-scrub::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-3.5px;border-radius:50%;background:var(--accent);border:0}
.pn-times{display:flex;justify-content:space-between;gap:6px;font-family:var(--font-mono);font-size:var(--m-meta);color:var(--ink3);white-space:nowrap}
.pn-now{color:var(--ink2)}
.pn-where{overflow:hidden;text-overflow:ellipsis}
.pn-drop{flex:none;width:44px;height:44px;min-height:0;margin-right:-8px;padding:0;border:0;border-radius:var(--r-control);background:transparent;color:var(--ink3);display:inline-flex;align-items:center;justify-content:center}
.pn-drop .icon{width:18px;height:18px}
:root:is(.ios,.android) body.pn-note.pn-note #transcript-pane.pn-reading>:not(.pn-lines,.pg-viewport,.pager),:root:is(.ios,.android) body.pn-note.pn-note #transcript-pane.pn-reading .pg-flow>:not(.pn-lines){display:none!important}
:root:is(.ios,.android) body.pn-note.pn-note .pn-lines:not([hidden]){display:flex;flex-direction:column;background:var(--panel)}
.pn-line{display:flex;gap:9px;padding:9px 13px;border-bottom:1px solid var(--line2)}
.pn-line.is-current{background:var(--accent-soft)}
.pn-time{position:relative;flex:none;width:44px;min-height:26px;padding:0;border:0;background:transparent;font-family:var(--font-mono);font-size:var(--m-meta);font-weight:400;color:var(--ink3);text-align:left;align-self:flex-start;line-height:1.6}
button.pn-time::after{content:'';position:absolute;inset:-9px -6px}
.pn-line.is-current .pn-time{color:var(--accent-text);font-weight:600}
.pn-lines.untimed .pn-time{display:none}
.pn-said{flex:1;min-width:0;margin:0;font-size:var(--m-secondary);line-height:1.55;color:var(--ink2)}
.pn-said strong{color:var(--ink);font-weight:550}
.pn-line.is-marker .pn-said{display:flex;align-items:center;gap:6px;color:var(--accent-text);font-weight:550}
.pn-line.is-marker .icon{width:14px;height:14px}
.pn-edit-transcript{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;height:44px;min-height:0;margin:4px 7px;padding:0 6px;border:0;background:transparent;color:var(--accent-text);font-size:var(--m-secondary);font-weight:600}
.pn-edit-transcript .icon{width:16px;height:16px}
/* 3h Documents: rows with a 44 trash; Attach a file and Take a photo (D-2) dashed below. */
:root:is(.ios,.android) body.pn-note.pn-note #documents-pane.pn-docs-on>:not(.pn-docs,#drafted-document,.pg-viewport,.pager),:root:is(.ios,.android) body.pn-note.pn-note #documents-pane.pn-docs-on .pg-flow>:not(.pn-docs,#drafted-document){display:none!important}
:root:is(.ios,.android) body.pn-note.pn-note .pn-docs:not([hidden]){display:flex;flex-direction:column}
:root:is(.ios,.android) body.pn-note.pn-note #documents-pane.pn-docs-on #drafted-document:not([hidden]){display:flex;flex-direction:column;gap:10px;padding:12px 13px}
.pn-doc{display:flex;align-items:center;gap:6px;padding:0 5px 0 0;border-bottom:1px solid var(--line2)}
.pn-doc-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 0 10px 13px;border:0;border-radius:0;background:transparent;color:var(--ink);text-align:left;font-weight:400}
.pn-doc-main>.icon{flex:none;width:20px;height:20px;color:var(--ink3)}
.pn-doc-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pn-doc-name{font-size:var(--m-secondary);font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-doc-facts{font-family:var(--font-mono);font-size:var(--m-meta);color:var(--ink3)}
.pn-doc-drop{flex:none;width:44px;height:44px;min-height:0;padding:0;border:0;border-radius:10px;background:transparent;color:var(--ink3);display:inline-flex;align-items:center;justify-content:center}
.pn-doc-drop .icon{width:18px;height:18px}
.pn-docs-empty{padding:16px 13px 4px}
.pn-docs-empty strong{display:block;font-size:var(--m-body);font-weight:600;color:var(--ink)}
.pn-docs-empty p{margin:4px 0 0;font-size:var(--m-secondary);color:var(--ink2)}
.pn-doc-actions{display:flex;flex-direction:column;gap:8px;padding:12px 13px}
.pn-dashed{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;height:46px;min-height:46px;border:1.5px dashed var(--accent-line);border-radius:var(--m-btn-r);background:transparent;color:var(--accent-text);font-size:var(--m-secondary);font-weight:600}
.pn-dashed .icon{width:17px;height:17px}
/* Addenda (Source 540-550): the line, the composer, Sign addendum, then "Addenda · n" and the entries. */
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page #document #addendum-pane:not([hidden]){gap:10px;padding:12px 13px}
:root:is(.ios,.android) body.pn-note.pn-note #addendum-pane .addendum-compose{order:-1;display:flex;flex-direction:column;gap:10px}
:root:is(.ios,.android) body.pn-note.pn-note #addendum-pane .addendum-hint{margin:0;font-size:var(--m-meta);line-height:1.5;color:var(--ink2)}
:root:is(.ios,.android) body.pn-note.pn-note #addendum-pane #addendum-text{min-height:88px;padding:11px 12px;border:1.5px solid var(--accent);border-radius:var(--r-card);background:var(--panel);color:var(--ink);font-size:16px;line-height:1.5;resize:none}
:root:is(.ios,.android) body.pn-note.pn-note #addendum-pane #addendum-text:focus{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
:root:is(.ios,.android) body.pn-note.pn-note #addendum-pane .addendum-actions{display:flex}
:root:is(.ios,.android) body.pn-note.pn-note #addendum-pane .addendum-actions>button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:46px;min-height:46px;border:0;border-radius:var(--m-btn-r);background:var(--accent);color:var(--accent-ink);font-size:var(--m-body);font-weight:600}
:root:is(.ios,.android) body.pn-note.pn-note #addendum-pane .addendum-actions>button .icon{width:17px;height:17px}
.pn-kicker{margin:0;font-size:10px;font-weight:650;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink3)}
:root:is(.ios,.android) body.pn-note.pn-note #addendum-pane .pn-addenda-kicker{padding-top:10px;border-top:1px solid var(--line2)}
:root:is(.ios,.android) body.pn-note.pn-note #addendum-pane .addendum-entry{margin:0;padding:2px 0 2px 12px;border:0;border-left:3px solid var(--accent-line);border-radius:0;background:transparent}
:root:is(.ios,.android) body.pn-note.pn-note #addendum-pane .addendum-head{display:flex;flex-wrap:wrap;gap:0 5px;font-family:var(--font-mono);font-size:var(--m-meta);font-weight:400;color:var(--ink3)}
:root:is(.ios,.android) body.pn-note.pn-note #addendum-pane .addendum-head :is(.addendum-label,.addendum-label+.addendum-dot){display:none}
:root:is(.ios,.android) body.pn-note.pn-note #addendum-pane .addendum-head>*{font:inherit;color:inherit}
:root:is(.ios,.android) body.pn-note.pn-note #addendum-pane .addendum-entry>p{margin:4px 0 0;font-size:var(--m-body);line-height:1.55;color:var(--body)}
:root:is(.ios,.android) body.pn-note.pn-note #addendum-pane .addendum-tools{display:flex;gap:4px;margin:2px 0 0 -8px}
:root:is(.ios,.android) body.pn-note.pn-note #addendum-pane .addendum-tools button{height:44px;min-height:0;padding:0 8px;border:0;background:transparent;color:var(--accent-text);font-size:var(--m-secondary);font-weight:600}
:root:is(.ios,.android) body.pn-note.pn-note #addendum-pane .addendum-tools button.danger-outline{color:var(--danger)}
/* Signed → Undo: one toast on both platforms, on the shared surfaces, above the foot bar (sentence case, §10). */
:root:is(.ios,.android) :is(#sign-snackbar,#unsign-snackbar){left:12px;right:12px;bottom:calc(var(--m-home) + 78px);transform:none;min-width:0;max-width:none;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);box-shadow:var(--shadow-card);font-size:var(--m-secondary);font-weight:600;overflow:hidden;-webkit-backdrop-filter:none;backdrop-filter:none}
:root:is(.ios,.android) :is(#sign-snackbar,#unsign-snackbar) .snackbar-text{flex:1}
:root:is(.ios,.android) :is(#sign-snackbar,#unsign-snackbar) .snackbar-text::before{content:none}
:root:is(.ios,.android) :is(#sign-snackbar,#unsign-snackbar) .snackbar-action{height:44px;min-height:44px;padding:0 14px;border:0;border-radius:var(--m-btn-r);background:var(--accent-soft);color:var(--accent-text);font-size:var(--m-secondary);font-weight:600;text-transform:none;letter-spacing:0}
/* The note stage’s sheets: Sign with n not confirmed?, Assign a patient, Take a photo. */
.pn-sheet .pn-sheet-foot{display:flex;gap:9px;padding-top:4px}
.pn-sheet .pn-sheet-foot>button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:46px;min-height:46px;border-radius:var(--m-btn-r);font-size:var(--m-body);font-weight:600}
.pn-sheet .pn-sheet-foot>button .icon{width:17px;height:17px}
.pn-sheet .pn-sheet-foot>.ph-sheet-secondary{border:1px solid var(--line);background:var(--panel2);color:var(--ink)}
.pn-ask-chips{display:flex;flex-wrap:wrap;gap:6px}
.pn-ask-chip{padding:4px 8px;border-radius:var(--r-badge);background:var(--warn-bg);color:var(--warn);font-size:var(--m-meta);font-weight:600}
.pn-search{display:flex;align-items:center;gap:9px;height:46px;padding:0 13px;border:1.5px solid var(--accent);border-radius:var(--m-field-r);background:var(--panel);box-shadow:0 0 0 3px var(--focus-ring)}
.pn-search .icon{flex:none;width:17px;height:17px;color:var(--ink3)}
.pn-search input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;font-size:16px;color:var(--ink);outline:none;box-shadow:none}
.pn-picks{display:flex;flex-direction:column;margin:0 calc(-1 * var(--m-side))}
.pn-pick{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:56px;padding:9px var(--m-side);border:0;border-radius:0;background:transparent;color:var(--ink);text-align:left;font-weight:400}
.pn-pick[aria-selected=true]{background:var(--accent-soft)}
.pn-pick-new{border-top:1px solid var(--line2);color:var(--accent-text)}
.pn-pick-new:disabled{color:var(--ink3);opacity:1}
.pn-avatar{flex:none;width:32px;height:32px;border-radius:9px;background:var(--accent-soft);color:var(--accent-text);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
.pn-avatar-new{background:transparent;border:1.5px dashed var(--accent-line)}
.pn-avatar-new .icon{width:16px;height:16px}
.pn-pick-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pn-pick-name{font-size:var(--m-body);font-weight:500}
.pn-pick-name b{font-weight:700}
.pn-pick-new .pn-pick-name{font-weight:600}
.pn-pick-facts{font-family:var(--font-mono);font-size:var(--m-meta);color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-photos{display:flex;flex-wrap:wrap;gap:8px}
.pn-photos canvas{flex:none;width:72px;height:96px;object-fit:cover;border:1px solid var(--line);border-radius:var(--r-control)}
.pn-photo-foot>button{padding:0 10px}.ph-sheet-note.pn-photo-error{color:var(--danger)}
.pn-excerpt{white-space:pre-wrap}
.pn-sheet label.pn-search{flex-direction:row;margin:0}
.pn-sheet .pn-search input{width:auto;height:100%;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page.pn-editing #edit-note{display:inline-flex;align-items:center;min-height:44px}

/* ==== iPhone platform feel (owner, 24 Sept 2026: "Make iPhone iPhone-like") ====
   Above DESIGN_GUIDELINES P-4 / C-23 for the phones' visuals only: the same tokens, words, icons, screens and order, drawn the way
   iOS draws them (Apple HIG) — large titles on the tab roots, an inline centred title with a text back on detail screens, bar
   material with a hairline once content runs under it, a plain tab bar, inset grouped lists, segmented view switches, the iOS
   search field, 50-tall radius-12 buttons, sheets with a 36×5 grabber, switches on in the accent, push/pop motion. Every rule is
   scoped to :root.ios; Android, desktop and the wide web never see it. The :root.ios:root doubling outranks the older phone sheets. */
:root.ios:root{
  --m-btn-r:12px; --m-field-r:10px; --m-rec-r:12px; --m-sheet-r:13px; --m-side:16px;
  --m-title:17px; --m-title-w:600; --m-body:17px; --m-secondary:15px; --m-meta:13px;
  --m-tab-h:49px; --m-tab-icon:25px; --m-tab-fs:10px;
  --ios-ease:cubic-bezier(.32,.72,0,1); --ios-hair:.5px; --ios-radius:10px;
  --ios-material:color-mix(in srgb,var(--panel) 80%,transparent);
  --ios-switch-on:var(--accent);
}
@media(max-width:760px){
/* ---- Navigation bar: tab roots carry a large title under a slim bar; detail screens an inline centred title ---- */
:root.ios:root .workspace-header.m-appbar{position:relative;flex-wrap:wrap;align-items:center;column-gap:0;row-gap:0;min-height:0;padding:var(--safe-top) 8px 6px 16px;background:var(--ios-bg,var(--bg));border-bottom:var(--ios-hair) solid transparent;transition:border-color var(--motion-fast,150ms) var(--ease),background-color var(--motion-fast,150ms) var(--ease)}
/* At rest the bar is the page (iOS's scroll-edge appearance); content under it turns it to material with the hairline. */
:root.ios:root.ios-under .workspace-header.m-appbar,:root.ios:root .workspace-header.m-appbar:has(#phone-back:not([hidden])){background:var(--ios-material);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
:root.ios:root.ios-under .workspace-header.m-appbar{border-bottom-color:var(--line)}
:root.ios:root .workspace-header.m-appbar::before{content:'';order:3;flex:1 1 0;min-width:0;height:44px}
:root.ios:root .workspace-header.m-appbar .phone-heading{order:10;flex:0 0 100%;gap:0;padding:0 8px 0 0}
:root.ios:root .workspace-header.m-appbar #phone-kicker{display:none}
:root.ios:root .workspace-header.m-appbar #phone-title{font-size:34px;font-weight:700;letter-spacing:-.4px;line-height:41px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root.ios:root .workspace-header.m-appbar :is(#phone-mic,#phone-more,#ios-bar,.ios-bar-top,.ios-bar-bottom){order:4}
:root.ios:root .workspace-header.m-appbar #phone-mic{order:5;margin-right:0;border-radius:0}
:root.ios:root .workspace-header.m-appbar #phone-mic .icon{width:24px;height:24px}
:root.ios:root .workspace-header.m-appbar #phone-mic[aria-pressed=true]{border-radius:50%}
/* The account: a round initials avatar at the bar's leading edge (the way to Settings). */
:root.ios:root .workspace-header.m-appbar #account-mobile.m-lead{width:32px;height:32px;margin:6px 0;border-radius:50%;background:color-mix(in srgb,var(--accent) 16%,var(--panel));font-size:13px}
:root.ios:root .workspace-header.m-appbar #account-mobile.m-lead::after{inset:-6px}
/* Detail screens (a back, or content scrolled under a large title): the title rides the bar, centred, 17/600. */
:root.ios:root .workspace-header.m-appbar:is(:has(#phone-back:not([hidden])),.ios-inline){flex-wrap:nowrap;padding-bottom:0}
:root.ios:root .workspace-header.m-appbar:is(:has(#phone-back:not([hidden])),.ios-inline) .phone-heading{position:absolute;left:112px;right:112px;top:var(--safe-top);height:44px;flex:none;justify-content:center;align-items:center;padding:0;pointer-events:none}
:root.ios:root .workspace-header.m-appbar:is(:has(#phone-back:not([hidden])),.ios-inline) #phone-title{font-size:17px;font-weight:600;letter-spacing:-.4px;line-height:22px;max-width:100%;text-align:center}
:root.ios:root .workspace-header.m-appbar #phone-back{margin-left:-12px;gap:2px;padding:0 4px;font-size:17px;font-weight:400;color:var(--accent-text);max-width:120px}
:root.ios:root .workspace-header.m-appbar #phone-back .icon{width:22px;height:22px;stroke-width:2.2}
:root.ios:root .workspace-header.m-appbar #phone-back-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Plain accent text and glyph actions in the bar (no boxes). */
:root.ios:root .workspace-header.m-appbar :is(#ios-add,#ios-select,#ios-today,.ios-nav-text,.ios-text){background:transparent;font-size:17px}

/* ---- Tab bar: 49 + the home indicator, 25 icons over 10/500 labels, accent when current, no pill, bar material ---- */
:root.ios:root #phone-tabs{padding:0 4px var(--safe-bottom);align-items:flex-start;background:var(--ios-material);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:var(--ios-hair) solid var(--line)}
:root.ios:root #phone-tabs .m-tab{height:49px;min-height:44px;gap:2px;padding:4px 0 0;justify-content:flex-start;font-size:10px;font-weight:500;letter-spacing:.1px}
:root.ios:root #phone-tabs .m-tab[aria-current=page]{font-weight:500;color:var(--accent-text)}
:root.ios:root #phone-tabs .m-tab .icon{width:25px;height:25px}
:root.ios:root #phone-tabs .m-tab:active{background:transparent;opacity:.6}

/* ---- Inset grouped lists and cards: panel sections on the grouped background, radius 10, no border, no shadow ---- */
:root.ios:root :is(.m-card,.m-today .m-card,.m-review .m-card){border:0;border-radius:10px;box-shadow:none;background:var(--panel)}
/* Patients' list card is an inset grouped section too (clinical.js renderPhonePatients draws it in #patients-table) */
:root.ios:root #home-page.m-patients #patients-table{border:0;border-radius:10px;box-shadow:none;background:var(--panel)}
/* Settings (clinical.js shared phone Settings): the profile and the grouped cards are inset grouped sections; section headers 13/400 uppercase */
:root.ios:root :is(.m-set-card,.m-set-profile){border:0;border-radius:10px;box-shadow:none;background:var(--panel)}
:root.ios:root .m-set-head{font-size:13px;font-weight:400;letter-spacing:0;color:var(--ink3)}
:root.ios:root #dashboard-page.m-today{padding:8px var(--m-side) 16px;gap:20px;background:var(--ios-bg,var(--bg))}
:root.ios:root #review-page.m-review:not([hidden]),:root.ios:root .m-review .review-queue{background:var(--ios-bg,var(--bg))}
:root.ios:root .m-kicker{font-size:13px;font-weight:400;letter-spacing:0;text-transform:uppercase;color:var(--ink3)}
:root.ios:root .m-today .m-next{padding:12px 16px;gap:2px}
:root.ios:root .m-next__title{margin-top:4px;font-size:20px;font-weight:600;letter-spacing:-.2px}
:root.ios:root .m-next__line{margin-top:2px;font-size:15px;color:var(--ink2)}
:root.ios:root .m-today .m-stat{padding:12px 16px}
:root.ios:root :is(.m-today button.m-next,.m-today .m-stat):hover{background:var(--panel)}
:root.ios:root :is(.m-today button.m-next,.m-today .m-stat):active{background:var(--panel2)}
:root.ios:root .m-card__head{min-height:44px;padding:0 8px 0 16px;border-bottom:var(--ios-hair) solid var(--line)}
:root.ios:root .m-card__title{font-size:17px;font-weight:600;letter-spacing:-.4px}
:root.ios:root .m-link{font-size:15px;font-weight:400}
:root.ios:root .m-link:hover{text-decoration:none}
:root.ios:root .m-row{padding:10px 16px;min-height:44px;border-bottom:var(--ios-hair) solid var(--line)}
:root.ios:root .m-row__name{font-size:17px;font-weight:400}
/* A list row: 17 primary, 15 secondary, a hairline inset to the text, a chevron.right disclosure; round avatars. */
:root.ios:root .m-row--visit{min-height:60px;padding:8px 12px 8px 16px;border-bottom:0;background:transparent}
:root.ios:root .m-row--visit+.m-row--visit::before{content:'';display:block;position:absolute;top:0;left:62px;right:0;height:var(--ios-hair);background:var(--line)}
:root.ios:root .m-row--visit:hover{background:transparent}
:root.ios:root .m-row--visit:active{background:var(--panel2)}
:root.ios:root .m-avatar{width:34px;height:34px;border-radius:50%;font-size:13px}
:root.ios:root .m-row__copy .m-row__name{font-size:17px;font-weight:400;line-height:1.3;letter-spacing:-.4px}
:root.ios:root .m-row__line{font-size:15px;line-height:1.3;color:var(--ink2)}
:root.ios:root .m-row__copy .m-row__meta{font-size:13px}
:root.ios:root .m-row--visit>.icon{width:13px;height:13px;stroke-width:2.6;color:var(--ink3)}
:root.ios:root .m-badge{font-size:12px}
/* Empty states: iOS's content-unavailable view, centred. */
:root.ios:root .m-empty{align-items:center;text-align:center;gap:6px;padding:28px 20px}
:root.ios:root .m-empty__title{font-size:20px;font-weight:600}
:root.ios:root .m-empty__line{font-size:15px;color:var(--ink2)}
:root.ios:root .m-empty__action{border:0;border-radius:12px;background:var(--accent-soft);color:var(--accent-text);font-size:17px;font-weight:600}

/* ---- Search: filled grey, height 36, radius 10, no border, the magnifier and placeholder in --ink3 ---- */
:root.ios:root .m-filters{gap:10px;padding:2px var(--m-side) 10px;background:var(--ios-bg,var(--bg));border-bottom:0}
:root.ios:root .m-search .icon{left:8px;top:calc(50% - 8px);width:16px;height:16px;z-index:2}
:root.ios:root .m-search input{height:44px;min-height:44px;margin:-4px 0;padding:0 10px 0 30px;border:4px solid transparent;border-radius:14px;background:var(--ios-fill,var(--panel2));background-clip:padding-box;font-size:17px}
:root.ios:root .m-search input:focus{border-color:transparent;box-shadow:none}
:root.ios:root .m-search input{position:relative;z-index:1}
/* ---- Filters and view switches: the segmented control (track 32 tall, radius 9, the selected segment raised) ---- */
:root.ios:root .m-chips{display:flex;flex-wrap:nowrap;gap:0;padding:2px;border-radius:9px;background:var(--ios-fill,var(--panel2))}
:root.ios:root .m-chip{position:relative;flex:1 1 auto;min-width:0;height:28px;min-height:28px;padding:0 6px;border:0;border-radius:7px;background:transparent;color:var(--ink);font-size:13px;font-weight:500;letter-spacing:-.1px;min-width:44px}
:root.ios:root .m-chip::after{content:'';position:absolute;inset:-8px 0}
:root.ios:root .m-chip[aria-pressed=true]{border:0;background:var(--panel);color:var(--ink);font-weight:600;box-shadow:0 3px 8px color-mix(in srgb,var(--ink) 12%,transparent),0 0 0 .5px color-mix(in srgb,var(--ink) 4%,transparent)}
:root.ios:root[data-theme=dark] .m-chip[aria-pressed=true]{background:color-mix(in srgb,var(--ink) 22%,var(--panel))}
:root.ios:root .m-chip+.m-chip:not([aria-pressed=true])::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:1px;background:var(--line)}
:root.ios:root .m-chip[aria-pressed=true]+.m-chip::before{display:none}
:root.ios:root .m-review .m-review-list{margin:16px var(--m-side)}

/* ---- Buttons: filled 50 / radius 12 / 17-600; secondary tinted; tertiary plain text; destructive red text ---- */
:root.ios:root .m-btn{height:50px;border:0;border-radius:12px;background:var(--accent-soft);color:var(--accent-text);font-size:17px;font-weight:600}
:root.ios:root .m-btn--primary{background:var(--accent);color:var(--accent-ink);box-shadow:none}
:root.ios:root .m-btn--danger{background:transparent;color:var(--danger)}
:root.ios:root dialog.m-auth .m-btn{height:50px;font-size:17px}
:root.ios:root dialog.m-auth .m-btn:not(.m-btn--primary){border:0;background:var(--accent-soft);color:var(--accent-text);font-weight:600}
/* Fields: filled, no border, radius 10. */
:root.ios:root :is(.m-field,.m-otp input){border:0;border-radius:10px;background:var(--panel2);font-size:17px}

/* Sign-in and the other signed-out screens: filled fields without a border, Sign in filled 50, the other way in tinted; the
   app bar's title inline and centred with a text back. */
:root.ios:root .entry2 .e-fields :is(input[type="text"],input[type="email"],input[type="password"],input[type="tel"]){border-color:transparent;border-radius:10px;background:var(--ios-fill,var(--panel2));font-size:17px}
:root.ios:root .entry2 .e-fields input:focus{border-color:var(--accent)}
:root.ios:root .entry2 .e-fields input.invalid{border-color:var(--danger)}
:root.ios:root .entry2 #unlock{height:50px;min-height:50px;border-radius:12px;font-size:17px;font-weight:600}
:root.ios:root .entry2 :is(#signin-otp,.e-secondary,#desktop-unlock){height:50px;min-height:50px;border:0;border-radius:12px;background:var(--accent-soft);color:var(--accent-text);font-size:17px;font-weight:600}
:root.ios:root .entry2 .e-otp-boxes>*{border-radius:10px}
:root.ios:root .entry2 .e-appbar{position:relative;justify-content:center;min-height:44px;border-bottom:var(--ios-hair) solid var(--line)}
:root.ios:root .entry2 .e-appbar .m-back{position:absolute;left:8px;margin:0;font-size:17px;font-weight:400}
:root.ios:root .entry2 .e-appbar .m-back svg{width:22px;height:22px}
:root.ios:root .entry2 .e-appbar .m-appbar__text{flex:none;max-width:56%;align-items:center}
:root.ios:root .entry2 .e-appbar .m-appbar__title{font-size:17px;font-weight:600;letter-spacing:-.4px;text-align:center}
@media (hover:none){:root.ios:root .entry2 .e-secondary:hover{background:var(--accent-soft)}}

/* ---- Sheets: radius 13 over a dimmed page, a 36×5 grabber, a centred 17/600 title, grouped rows inside ---- */
:root.ios:root dialog.ph-sheet{padding:0 var(--m-side) calc(12px + var(--safe-bottom));border-radius:13px 13px 0 0;background:var(--bg);box-shadow:none;gap:10px}
:root.ios:root dialog.ph-sheet[open]{animation:ios-sheet-up 300ms var(--ios-ease)}
:root.ios:root dialog.ph-dialog::backdrop{background:var(--scrim)}
:root.ios:root .ph-grabber,:root.ios:root .m-sheet__handle,:root.ios:root .genie-grabber{width:36px;height:5px;border-radius:3px;background:color-mix(in srgb,var(--ink3) 45%,transparent);margin:5px auto 2px}
:root.ios:root .ph-dialog h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.4px;text-align:center}
:root.ios:root .ph-sheet .ph-items{display:flex;flex-direction:column;gap:0;border-radius:10px;background:var(--panel);overflow:hidden}
:root.ios:root .ph-sheet .ph-items>:is(button,a){position:relative;justify-content:flex-start;min-height:44px;padding:0 16px;border-radius:0;font-size:17px;font-weight:400;color:var(--ink);background:transparent}
:root.ios:root .ph-sheet .ph-items>:is(button,a)+:is(button,a)::before{content:'';position:absolute;top:0;left:46px;right:0;height:var(--ios-hair);background:var(--line)}
:root.ios:root .ph-sheet .ph-items>:is(button,a):not(:has(.icon))+:is(button,a)::before{left:16px}
:root.ios:root .ph-sheet .ph-items>:is(button,a):hover{background:transparent}
:root.ios:root .ph-sheet .ph-items>:is(button,a):active{background:var(--panel2)}
:root.ios:root .ph-sheet .ph-items .icon{width:20px;height:20px;color:var(--accent-text)}
:root.ios:root .ph-sheet .ph-items>.danger .icon{color:var(--danger)}
:root.ios:root .ph-sheet .ph-divider{height:20px;margin:0;border:0;background:var(--bg)}
:root.ios:root .ph-account-head{padding:4px 0 2px;border:0;text-align:center}
:root.ios:root .ph-account-head strong{font-size:17px}
:root.ios:root .pn-sheet .pn-sheet-foot>button{height:50px;min-height:50px;border-radius:12px;font-size:17px}
:root.ios:root .pn-sheet .pn-sheet-foot>.ph-sheet-secondary{border:0;background:var(--accent-soft);color:var(--accent-text)}
:root.ios:root .m-sheet{border-radius:13px 13px 0 0;animation:ios-sheet-up 300ms var(--ios-ease)}
/* ---- Menus and confirmations: action sheets (actions stacked in one group, Cancel on its own) ---- */
:root.ios:root .ios-action-group{border-radius:14px}
:root.ios:root dialog.ios-action[open]{animation:ios-sheet-up 300ms var(--ios-ease)}
:root.ios:root dialog.ios-action::backdrop,:root.ios:root dialog.ios-form::backdrop{background:var(--scrim)}

/* ---- The Genie dock: an iOS sheet with its grabber; Done is a plain 17/600 text action ---- */
:root.ios:root #assistant{border-top:0;border-radius:13px 13px 0 0;background:var(--ios-material);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 -1px 0 var(--line),0 -10px 30px color-mix(in srgb,var(--ink) 10%,transparent);animation:ios-sheet-up 300ms var(--ios-ease)}
:root.ios:root #assistant-close{height:44px;min-height:44px;padding:0 4px;border:0;background:transparent;color:var(--accent-text);font-size:17px;font-weight:600}
:root.ios:root .m-dock{border-top:0;border-radius:13px 13px 0 0}

/* ---- The visit capture screens (visit-shared.js createCaptureUI, the vc- block above) drawn the iOS way: an inline centred
   17/600 title with the text back (‹ Today) over the grouped background; the identity strip an inset grouped card (round tile,
   name 17/600, footnote 13 meta, a capsule badge); the big mono timer and meter; the live transcript an inset grouped card under
   a 13 uppercase header; on the thumb line Pause (tinted) and Finish recording (filled), 50 tall, radius 12 (Voice Memos). The
   Ready screen’s Start recording is filled 50 / r12, the consent an inset row with the 51×31 switch, Import audio plain text.
   Sheets: radius 13, the 36×5 grabber, Cancel · centred title · Assign (17/600) in the header, the search field filled grey
   36 / r10, the patients as inset grouped rows (radius 10, hairlines inset to the text, a checkmark on the chosen one). Discard is
   an action sheet: one group (the question and what is lost in footnote grey, Discard in red) and Keep it apart. ---- */
:root.ios:root .vc-screen:not(.peek),:root.ios:root dialog.vc-screen::backdrop{background:var(--ios-bg,var(--bg))}
:root.ios:root .vc-bar{position:relative;flex:none;height:44px;min-height:44px;padding:0 8px;gap:0;background:transparent;border-bottom:0}
:root.ios:root .vc-bar .m-appbar__text{position:absolute;top:0;bottom:0;left:104px;right:104px;align-items:center;justify-content:center;pointer-events:none}
:root.ios:root .vc-bar .m-appbar__kicker{display:none}
:root.ios:root .vc-bar .m-appbar__title{max-width:100%;font-size:17px;font-weight:600;letter-spacing:-.4px;line-height:22px;text-align:center}
:root.ios:root .vc-back{max-width:112px;margin:0;padding:0 4px 0 0;gap:0;font-size:17px;font-weight:400;letter-spacing:-.4px;color:var(--accent-text)}
:root.ios:root .vc-back>svg{display:none}
:root.ios:root .vc-back::before{content:'';flex:none;width:12px;height:12px;margin:0 3px 0 6px;border-left:2.6px solid currentColor;border-bottom:2.6px solid currentColor;border-radius:1px;transform:rotate(45deg)}
:root.ios:root .vc-back::after{content:attr(data-label);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root.ios:root .vc-strip{margin:6px var(--m-side) 0;min-height:60px;padding:8px 12px;gap:12px;border:0;border-radius:10px;background:var(--panel)}
:root.ios:root .vc-tile{width:40px;height:40px;border-radius:50%;font-size:15px}
:root.ios:root .vc-tile svg{width:18px;height:18px}
:root.ios:root .vc-name{font-size:17px;font-weight:600;letter-spacing:-.4px;line-height:22px}
:root.ios:root .vc-meta{margin-top:1px;font-family:inherit;font-size:13px;line-height:18px;color:var(--ink2)}
:root.ios:root .vc-template{font-size:13px}
:root.ios:root .vc-assign{height:44px;padding:0 14px;border:0;border-radius:12px;background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent-text);font-size:15px;font-weight:600}
:root.ios:root .vc-badge{gap:5px;height:26px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:600}
:root.ios:root .vc-badge svg{width:13px;height:13px}
:root.ios:root .vc-discard{width:44px;height:44px;margin-right:-8px;border:0;border-radius:0;background:transparent;color:var(--danger)}
:root.ios:root .vc-discard svg{width:22px;height:22px}
:root.ios:root .vc-timer{gap:12px;padding:22px var(--m-side) 16px;background:transparent}
:root.ios:root .vc-helper{font-size:15px;line-height:1.35}
:root.ios:root .vc-alert{font-size:15px}
:root.ios:root .vc-kicker{font-size:13px;font-weight:400;letter-spacing:0;line-height:18px;text-transform:uppercase;color:var(--ink3)}
:root.ios:root .vc-live{gap:6px;padding:0 var(--m-side) 12px;background:transparent}
:root.ios:root .vc-live>.vc-kicker{padding:0 16px}
:root.ios:root .vc-lines{gap:10px;padding:11px 16px;border-radius:10px;background:var(--panel)}
:root.ios:root .vc-line{gap:10px}
:root.ios:root .vc-line-time{width:40px;font-size:13px;line-height:22px}
:root.ios:root .vc-line-text{font-size:17px;line-height:22px;letter-spacing:-.4px;color:var(--ink)}
:root.ios:root .vc-line-text strong{font-weight:600}
:root.ios:root .vc-empty{font-size:15px}
:root.ios:root .vc-foot{gap:12px;padding:8px var(--m-side);background:transparent;border-top:0}
:root.ios:root .vc-foot .m-btn{height:50px;min-height:50px;gap:7px;border:0;border-radius:12px;font-size:17px;font-weight:600;letter-spacing:-.4px}
:root.ios:root .vc-foot .m-btn:not(.m-btn--primary){background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent-text)}
:root.ios:root .vc-foot .m-btn--primary{background:var(--accent);color:var(--accent-ink);box-shadow:none}
:root.ios:root .vc-foot .m-btn svg{width:18px;height:18px}
:root.ios:root .vc-transport .vc-finish{flex:1.5}
/* Ready */
:root.ios:root .vc-ready-body{gap:16px;padding:16px var(--m-side);background:transparent}
:root.ios:root .vc-idle{color:var(--ink3)}
:root.ios:root .vc-start{align-self:stretch;justify-content:center;height:50px;padding:0 16px;gap:8px;border-radius:12px;font-size:17px;font-weight:600;letter-spacing:-.4px;box-shadow:none}
:root.ios:root .vc-start svg{width:20px;height:20px}
:root.ios:root .vc-consent{align-self:stretch;justify-content:space-between;min-height:44px;padding:6px 16px;border-radius:10px;background:var(--panel);font-size:17px;letter-spacing:-.4px}
:root.ios:root .vc-switch{width:51px;height:31px;background:var(--ios-fill-strong,var(--line))}
:root.ios:root .vc-switch i{top:2px;left:2px;width:27px;height:27px;background:var(--on-fill);box-shadow:0 3px 8px color-mix(in srgb,var(--ink) 15%,transparent),0 3px 1px color-mix(in srgb,var(--ink) 6%,transparent)}
:root.ios:root .vc-switch[aria-checked="true"]{background:var(--ios-switch-on,var(--accent))}
:root.ios:root .vc-note{font-size:15px}
:root.ios:root .vc-input{font-family:inherit;font-size:13px}
:root.ios:root .vc-foot .m-btn.vc-import{background:transparent;color:var(--accent-text);font-weight:400}
/* Sheets: Assign patient (and the Discard action sheet below) */
:root.ios:root dialog.vc-sheet{background:var(--ios-bg,var(--bg));box-shadow:none}
:root.ios:root .vc-sheet-head{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;min-height:44px;padding:0 16px 6px}
:root.ios:root .vc-sheet-head h2{grid-area:1/2;min-width:0;font-size:17px;font-weight:600;letter-spacing:-.4px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root.ios:root .vc-close{grid-area:1/1;justify-self:start;width:auto;height:44px;padding:0;border:0;background:transparent;color:var(--accent-text);font-size:17px;font-weight:400;letter-spacing:-.4px}
:root.ios:root .vc-go-text{grid-area:1/3;justify-self:end;display:block;max-width:100%;height:44px;padding:0;border:0;background:transparent;color:var(--accent-text);font-size:17px;font-weight:600;letter-spacing:-.4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root.ios:root .vc-go-text:disabled{color:var(--ink3);opacity:1}
:root.ios:root .vc-must{margin:0 var(--m-side) 10px;font-size:15px;line-height:1.35}
:root.ios:root .vc-search{height:36px;margin:0 var(--m-side) 14px;padding:0 8px;gap:6px;border:0;border-radius:10px;background:var(--ios-fill,var(--panel2));box-shadow:none;color:var(--ink3)}
:root.ios:root .vc-search svg{width:16px;height:16px}
:root.ios:root .vc-search input{font-size:17px;letter-spacing:-.4px}
:root.ios:root .vc-matches{margin:0 var(--m-side)}
:root.ios:root .vc-matches>.vc-kicker{padding:0 16px 6px}
:root.ios:root .vc-matches>.vc-empty{padding:4px 16px 10px}
:root.ios:root .vc-pick{position:relative;min-height:60px;padding:8px 16px;gap:12px;background:var(--panel)}
:root.ios:root .vc-matches>.vc-kicker+.vc-pick{border-top-left-radius:10px;border-top-right-radius:10px}
:root.ios:root .vc-pick:not(:has(+.vc-pick)){border-bottom-left-radius:10px;border-bottom-right-radius:10px}
:root.ios:root .vc-pick+.vc-pick::before{content:'';position:absolute;top:0;left:64px;right:0;height:var(--ios-hair);background:var(--line)}
:root.ios:root .vc-pick.selected{background:var(--panel)}
:root.ios:root .vc-pick:active{background:var(--panel2)}
:root.ios:root .vc-pick.selected::after{content:'';flex:none;width:6px;height:12px;margin:0 4px 4px 2px;border-right:2.4px solid var(--accent-text);border-bottom:2.4px solid var(--accent-text);transform:rotate(45deg)}
:root.ios:root .vc-pick .vc-tile{width:36px;height:36px;font-size:13px}
:root.ios:root .vc-pick-name{font-size:17px;font-weight:400;letter-spacing:-.4px;line-height:22px}
:root.ios:root .vc-pick-name b{font-weight:600}
:root.ios:root .vc-pick-facts{font-family:inherit;font-size:15px;line-height:20px;color:var(--ink2)}
:root.ios:root .vc-current{padding:0;border:0;background:transparent;color:var(--ink3);font-size:15px;font-weight:400}
:root.ios:root .vc-new{border-top:0;color:var(--accent-text)}
:root.ios:root .vc-new .vc-pick-name{font-weight:400}
:root.ios:root .vc-sheet-foot{gap:4px;padding:8px calc(var(--m-side) + 16px) 8px;border-top:0}
:root.ios:root .vc-hint{font-size:13px;line-height:18px}
:root.ios:root .vc-text-danger{font-size:17px;font-weight:400;letter-spacing:-.4px}
:root.ios:root dialog.vc-discard-sheet{left:8px;right:8px;width:auto;padding:0 0 max(8px,var(--m-home));border-radius:0;background:transparent;overflow:visible}
:root.ios:root .vc-discard-sheet>.m-sheet__handle,:root.ios:root .vc-discard-sheet .vc-danger-tile{display:none}
:root.ios:root .vc-discard-top{display:block;padding:14px 16px 8px;border-radius:14px 14px 0 0;background:var(--panel);text-align:center}
:root.ios:root .vc-discard-sheet h2{margin:0;font-size:13px;font-weight:600;letter-spacing:0;color:var(--ink3)}
:root.ios:root .vc-discard-body{margin-top:4px;font-size:13px;line-height:1.35;color:var(--ink3)}
:root.ios:root .vc-lost{margin:0;padding:0 16px 4px;border:0;border-radius:0;background:var(--panel)}
:root.ios:root .vc-lost li{justify-content:center;gap:6px;padding:3px 0;border:0;font-size:13px;line-height:1.35;color:var(--ink3)}
:root.ios:root .vc-lost svg{width:14px;height:14px}
:root.ios:root .vc-discard-sheet .vc-foot-note{margin:0;padding:0 16px 14px;background:var(--panel);text-align:center}
:root.ios:root .vc-discard-actions{gap:8px;padding:0}
:root.ios:root .vc-discard-actions .m-btn{height:57px;min-height:57px;border:0;border-radius:14px;background:var(--panel);color:var(--accent-text);font-size:20px;font-weight:600;letter-spacing:-.4px}
:root.ios:root .vc-discard-actions .vc-btn-danger{border-top:var(--ios-hair) solid var(--line);border-radius:0 0 14px 14px;color:var(--danger);font-weight:400}
:root.ios:root[data-theme=dark] :is(.vc-discard-top,.vc-lost,.vc-discard-sheet .vc-foot-note,.vc-discard-actions .m-btn){background:color-mix(in srgb,var(--ink) 9%,var(--panel))}
/* After Finish: the trail an inset grouped card, the note under it a footer; Nothing heard a grouped card */
:root.ios:root .vc-progress-body{padding:16px var(--m-side);background:transparent}
:root.ios:root .vc-trail{padding:16px 16px 0;border-radius:10px;background:var(--panel)}
:root.ios:root .vc-step-copy{padding-bottom:16px}
:root.ios:root .vc-step-copy strong{font-size:17px;font-weight:400;letter-spacing:-.4px;line-height:22px}
:root.ios:root .vc-step.active .vc-step-copy strong{font-weight:600}
:root.ios:root .vc-step-copy small{font-size:15px;line-height:20px;color:var(--ink2)}
:root.ios:root .vc-info{margin:8px 16px 0;padding:0;border:0;background:transparent;font-size:13px;line-height:18px;color:var(--ink3)}
:root.ios:root .vc-silent{gap:12px;padding:20px 16px;border:0;border-radius:10px}
:root.ios:root .vc-silent h2{font-size:20px;font-weight:600;letter-spacing:-.2px}
:root.ios:root .vc-silent-text{font-size:15px;line-height:1.35}
:root.ios:root .vc-danger-tile.big{width:56px;height:56px;border-radius:50%}
:root.ios:root .vc-foot-note{margin:8px 16px 0;font-size:13px;line-height:18px}
:root.ios:root .vc-test{height:44px;min-height:44px;font-size:15px}
:root.ios:root .vc-test-state{font-size:13px}

/* ---- Switches: 51×31, on in the accent ---- */
:root.ios:root [aria-checked=true]>.ios-switch{background:var(--accent)}

/* ---- A visit's note: the view switch is a segmented control; section headers 13 uppercase; body 17; the foot bar is material ---- */
:root.ios:root body.pn-note.pn-note #encounter-page .pn-strip{gap:0;margin:8px 16px;padding:2px;border:0;border-radius:9px;background:var(--ios-fill,var(--panel2));overflow:visible;position:relative;z-index:1}
:root.ios:root body.pn-note.pn-note #encounter-page .pn-strip .pn-tab{position:relative;flex:1 1 0;justify-content:center;min-height:28px;height:28px;margin:0;padding:0 6px;border:0;border-radius:7px;color:var(--ink);font-size:13px;font-weight:500}
:root.ios:root body.pn-note.pn-note #encounter-page .pn-strip .pn-tab::before{content:'';position:absolute;inset:-8px 0}
:root.ios:root body.pn-note.pn-note #encounter-page .pn-strip .pn-tab[aria-selected=true]{border:0;background:var(--panel);color:var(--ink);font-weight:600;box-shadow:0 3px 8px color-mix(in srgb,var(--ink) 12%,transparent),0 0 0 .5px color-mix(in srgb,var(--ink) 4%,transparent)}
:root.ios:root[data-theme=dark] body.pn-note.pn-note #encounter-page .pn-strip .pn-tab[aria-selected=true]{background:color-mix(in srgb,var(--ink) 22%,var(--panel))}
:root.ios:root body.pn-note.pn-note #encounter-page .pn-status{padding:6px 16px;border-bottom:0}
:root.ios:root body.pn-note.pn-note #note-preview{padding:8px 16px 16px}
:root.ios:root body.pn-note.pn-note #note-preview .section-head h2{font-size:13px;font-weight:400;letter-spacing:0;color:var(--ink3)}
:root.ios:root body.pn-note.pn-note #note-preview section>p{line-height:1.4}
:root.ios:root body.pn-note.pn-note #encounter-page .document-footer{padding:8px 16px calc(8px + var(--m-home));background:var(--ios-material);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:var(--ios-hair) solid var(--line)}
:root.ios:root body.pn-note.pn-note #encounter-page #review:not([hidden]){height:50px;min-height:50px;padding:0 22px;border-radius:12px;font-size:17px}
:root.ios:root body.pn-note.pn-note #encounter-page.ph-signed #export{height:50px;min-height:50px;border:0;border-radius:12px;background:var(--accent-soft);color:var(--accent-text);font-size:17px;font-weight:600}
:root.ios:root body.pn-note.pn-note #addendum-pane .addendum-actions>button{height:50px;min-height:50px;border-radius:12px;font-size:17px}
:root.ios:root .pn-accept{border-radius:12px}
:root.ios:root .pn-dashed{height:50px;min-height:50px;border:0;border-radius:12px;background:var(--accent-soft);font-size:17px}
:root.ios:root .pn-line{padding:10px 16px;border-bottom:var(--ios-hair) solid var(--line)}
:root.ios:root .pn-doc{border-bottom:var(--ios-hair) solid var(--line)}
:root.ios:root .pn-search{height:36px;padding:0 10px;border:0;border-radius:10px;background:var(--panel2);box-shadow:none}
:root.ios:root :is(#sign-snackbar,#unsign-snackbar){border:0;border-radius:14px;background:var(--ios-material);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
:root.ios:root :is(#sign-snackbar,#unsign-snackbar) .snackbar-action{background:transparent;font-size:17px}

/* ---- Motion: detail screens push in from the right (350ms, the iOS curve); tab roots switch in place ---- */
:root.ios.ios-motion:root :is(#patient-page,#local-settings):not([hidden]){animation:ios-push 350ms var(--ios-ease)}
}
@keyframes ios-push{from{transform:translateX(30%);opacity:.4}to{transform:none;opacity:1}}
@keyframes ios-sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes ios-fade{from{opacity:0}to{opacity:1}}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  :root.ios:root :is(#patient-page,#local-settings):not([hidden]),:root.ios:root :is(dialog.ph-sheet[open],dialog.ios-action[open],#assistant,.m-sheet){animation:ios-fade 200ms linear}
  :root.ios:root .workspace-header.m-appbar{transition:none}
}
/* iOS's back: chevron.left drawn at 22 beside the previous screen's name (the sprite's arrow stays for Android and the web). */
@media(max-width:760px){
:root.ios:root :is(.workspace-header.m-appbar #phone-back,.entry2 .e-appbar .m-back)>.icon{display:none}
:root.ios:root :is(.workspace-header.m-appbar #phone-back,.entry2 .e-appbar .m-back)::before{content:'';flex:none;width:12px;height:12px;margin:0 3px 0 8px;border-left:2.6px solid currentColor;border-bottom:2.6px solid currentColor;border-radius:1px;transform:rotate(45deg)}
}
/* ---- Phone fit (owner, 24 Sept 2026: the 363-wide phone) ---- */
/* A drafted document is edited in one region, never paged: the letter fills what the tabs leave and scrolls inside itself (L-1). */
:root:is(.ios,.android) #documents-pane.pn-drafting:not([hidden]){display:flex;flex-direction:column;min-height:0}
:root:is(.ios,.android) #documents-pane.pn-drafting>.pg-viewport{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
:root:is(.ios,.android) #documents-pane.pn-drafting .pg-flow{flex:1 1 auto;min-height:0;display:flex!important;flex-direction:column;transform:none!important;clip-path:none!important}
:root:is(.ios,.android) body.pn-note.pn-note #documents-pane.pn-drafting #drafted-document:not([hidden]){flex:1 1 auto;min-height:0}
:root:is(.ios,.android) #documents-pane.pn-drafting #document-draft{flex:1 1 auto;min-height:96px;height:auto!important;overflow-y:auto;resize:none}
/* Only the document’s own actions while it is drafted: the note’s Sign bar steps aside on the Documents tab (Sign is on Note). */
:root:is(.ios,.android) #encounter-page:has(#documents-pane.pn-drafting:not([hidden])) .document-footer{display:none!important}
/* The soft keyboard: the shell ends at its top edge (iOS keeps the layout viewport) and the foot bar steps aside while typing. */
:root.kb-open:is(.ios,.android) #shell{height:calc(100dvh - var(--kb,0px))}
:root.kb-open:is(.ios,.android) #encounter-page .document-footer{display:none!important}
/* 3e After Finish, compact: one line per step at the top (a detail that does not fit wraps under its step as a whole), and the
   transcript so far takes the room under them. */
:is(.ios,.android) .vc-progress-body{gap:8px;padding:10px var(--m-side,16px)}
:is(.ios,.android) .vc-progress-body .vc-trail{flex:none}
:is(.ios,.android) .vc-progress-body .vc-step{align-items:flex-start;gap:10px}
:is(.ios,.android) .vc-progress-body .vc-rail{width:20px}
:is(.ios,.android) .vc-progress-body .vc-dot{width:20px;height:20px}
:is(.ios,.android) .vc-progress-body .vc-dot svg{width:12px;height:12px}
:is(.ios,.android) .vc-progress-body .vc-link{display:none}
:is(.ios,.android) .vc-progress-body .vc-step-copy{flex:1;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;padding-bottom:6px}
:is(.ios,.android) .vc-progress-body .vc-step-copy strong{display:inline;white-space:nowrap;line-height:20px}
:is(.ios,.android) .vc-progress-body .vc-step-copy small{display:inline;margin:0;white-space:nowrap}
:is(.ios,.android) .vc-progress-body .vc-step-copy small:empty{display:none}
:is(.ios,.android) .vc-progress-transcript{flex:1 1 auto;min-height:96px;border-radius:10px;border:1px solid var(--line)}
:is(.ios,.android) .vc-progress-body .vc-info{flex:none;margin:0}
:root.ios:root .vc-progress-body{padding:10px var(--m-side)}
:root.ios:root .vc-progress-body .vc-trail{padding:10px 16px 2px}
:root.ios:root .vc-progress-body .vc-step-copy{padding-bottom:8px}
:root.ios:root .vc-progress-transcript{padding:0;border:0}
:root.ios:root .vc-progress-body .vc-info{margin:0 16px}
/* A row’s name may ellipsize (user data); its detail line — a date, a time, record facts, a setting’s value — never is cut: it
   wraps under itself instead. */
:root:is(.ios,.android) :is(.m-row__line,.m-row__copy .m-row__meta,.m-set-copy small,.ad-item-copy small,.ios-item-copy small,.ad-copy small,.ios-row-copy small,.ph-copy small,.vc-pick-facts,.pn-pick-facts){white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere;text-wrap:pretty}
/* Filters that do not fit one row wrap as whole chips (the iPhone’s segmented control becomes two rows of segments). */
:root.ios:root .m-chips{flex-wrap:wrap;row-gap:16px}
:root.ios:root .m-chips>.m-chip{flex:1 0 auto;min-width:max-content;padding:0 10px}
:root:is(.ios,.android) #assistant-suggestions{flex-wrap:wrap;row-gap:0;height:var(--tap,44px);overflow:hidden;align-content:flex-start} /* one line of whole chips: one that does not fit waits for a wider screen, never cut */
:root:is(.ios,.android) #assistant-suggestions button{flex:0 0 auto;min-width:max-content}
/* The visit’s tabs share the strip: all four fit from 320 up, no word cut or pushed off the edge. */
:root.android:root body.pn-note.pn-note #encounter-page .pn-strip .pn-tab{flex:1 1 auto;justify-content:center;min-width:0;min-height:48px;padding-inline:4px}
:root.ios:root body.pn-note.pn-note #encounter-page .pn-strip .pn-tab{flex:1 1 auto;min-width:0;padding-inline:4px}
/* The audio scrubber answers taps across 44 while its track stays thin. */
:root:is(.ios,.android) .pn-scrub{position:relative;z-index:1;height:44px;margin:-9px 0 -13px}
:root:is(.ios,.android) .pn-times>*{min-width:0}
:root:is(.ios,.android) .pn-sheet .pn-sheet-foot>*{min-height:44px}
:root.android:root .m-link{height:44px;min-height:44px}
:root.android:root .workspace-header.m-appbar #phone-more:not([hidden]){margin-right:0}
:root.android:root .vc-strip .vc-who-button{min-height:48px}
/* Genie listening: the mic keeps its 44 target beside Stop, both on one line. */
html:root:is(.ios,.android) #assistant #assistant-form.is-listening #assistant-mic{width:44px;height:44px;flex:0 0 44px}
html:root:is(.ios,.android) #assistant #assistant-form.is-listening .genie-stop{height:44px;min-height:44px;align-self:center}
/* The drafted document’s own actions in two short rows: its title with Save document, then Choose another and Copy text. While
   the keyboard is up only the title and Save stay, so the letter keeps the room to type in. */
html:root:is(.ios,.android) #drafted-document .toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
html:root:is(.ios,.android) #drafted-document .toolbar h2{flex:1 0 auto;max-width:100%;order:0;margin:0}
html:root:is(.ios,.android) #drafted-document .toolbar #save-document{order:1;margin-left:auto}
html:root:is(.ios,.android) #drafted-document .toolbar :is(#choose-document,#copy-document){order:2}
html:root.kb-open:is(.ios,.android) #drafted-document :is(#choose-document,#copy-document,label){display:none}
html:root.kb-open:is(.ios,.android) #encounter-page ~ * #message,html:root.kb-open:is(.ios,.android) body.pn-note #message{display:none}
/* The player row never grows past the screen: its middle takes what the play and delete buttons leave. */
:root:is(.ios,.android) body.pn-note.pn-note #encounter-page .pn-player:not([hidden]){min-width:0;max-width:100%}
:root:is(.ios,.android) .pn-player-mid{width:0}
:root:is(.ios,.android) .pn-where{flex:1 1 0;width:0}
/* After Finish: the reassurance is a plain line under the transcript, not a card, so the transcript keeps the room. */
:root.android:root .vc-progress-body .vc-info{padding:0 2px;border:0;background:transparent;font-size:13px;line-height:1.45;color:var(--ink3)}
:root.android:root #local-settings.pg-pane>.pager{margin-inline:-16px}
:root.android:root .pager{gap:6px}
:root.android:root .pager button{padding:0 12px}
:root:is(.ios,.android) .pn-search{flex:none;min-height:44px}
/* One M3 filter chip everywhere on Android: 32 tall with a 48 hit area (Patients’ sort chips were 48, Review’s 32). */
:root.android:root #home-page.m-patients .m-chip{position:relative;height:32px;min-height:32px;padding:0 16px;font-size:14px}
:root.android:root #home-page.m-patients .m-chip::after{content:'';position:absolute;inset:-8px -4px}
/* Today’s Next up title reads like every other card title on Android: Title Medium 16/500. */
:root.android:root .m-next__title{font-size:16px;font-weight:500;letter-spacing:.15px}
/* Review’s status is one choice of five: a dropdown (M3 exposed dropdown menu / an iOS pull-down button), the phone’s own menu. */
:is(.ios,.android) label.m-select{flex-direction:row!important;display:inline-flex!important}
:is(.ios,.android) .m-select{position:relative;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;height:44px;min-width:0;padding:0 36px 0 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink2);font-size:14px;font-weight:500}
:is(.ios,.android) .m-select__label{flex:none;color:var(--ink3)}
:is(.ios,.android) .m-select__label::after{content:':'}
:is(.ios,.android) .m-select select{position:static;-webkit-appearance:none;appearance:none;min-width:0;height:100%;margin:0;padding:0;border:0;background:transparent;color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
:is(.ios,.android) .m-select select::before{content:''}
:is(.ios,.android) .m-select>select{outline-offset:4px}
:is(.ios,.android) .m-select::after{content:'';position:absolute;inset:0;pointer-events:none}
:is(.ios,.android) .m-select>.icon{position:absolute;right:12px;top:50%;width:16px;height:16px;margin-top:-8px;pointer-events:none;color:var(--ink2)}
:root.ios:root .m-select{padding:0 26px 0 0;border:0;background:transparent;font-size:15px;color:var(--accent-text)}
:root.ios:root .m-select__label{color:var(--accent-text)}
:root.ios:root .m-select select{color:var(--accent-text)}
:root.ios:root .m-select>.icon{right:2px;color:var(--accent-text)}
/* The select fills its button so a tap anywhere on it opens the menu. */
:is(.ios,.android) .m-select select{position:absolute!important;inset:0;width:100%;height:100%!important;min-height:0!important;margin:0!important;opacity:0;font-size:16px}
:is(.ios,.android) .m-select__value{color:var(--ink);font-weight:600;white-space:nowrap}
:root.ios:root .m-select__value{color:var(--accent-text)}
:root.android:root .m-select{height:48px;border:0;box-shadow:inset 0 0 0 1px var(--md-outline,var(--line))}
/* Patients’ sort: one of three is a segmented control (M3 segmented buttons / the iOS segmented control). */
:is(.ios,.android) .m-seg{display:flex;align-items:stretch;min-width:0}
:is(.ios,.android) .m-seg__item{position:relative;flex:1 1 0;min-width:max-content;display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:0;padding:0 12px;white-space:nowrap}
:root.android:root .m-seg{height:40px;border:1px solid var(--md-outline,var(--line));border-radius:999px;overflow:visible}
:root.android:root .m-seg__item{height:38px;min-height:38px;border:0;border-radius:0;background:transparent;color:var(--ink);font-size:14px;font-weight:500}
:root.android:root .m-seg__item+.m-seg__item{border-left:1px solid var(--md-outline,var(--line))}
:root.android:root .m-seg__item:first-child{border-radius:999px 0 0 999px}
:root.android:root .m-seg__item:last-child{border-radius:0 999px 999px 0}
:root.android:root .m-seg__item[aria-checked=true]{background:var(--accent-soft);color:var(--accent-text)}
:root.android:root .m-seg__item[aria-checked=true]::before{content:'';flex:none;width:10px;height:5px;margin-top:-3px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
:root.android:root .m-seg__item::after{content:'';position:absolute;inset:-5px 0}
:root.ios:root .m-seg{padding:2px;border-radius:9px;background:var(--ios-fill,var(--panel2))}
:root.ios:root .m-seg__item{height:28px;min-height:28px;border:0;border-radius:7px;background:transparent;color:var(--ink);font-size:13px;font-weight:500}
:root.ios:root .m-seg__item[aria-checked=true]{background:var(--panel);font-weight:600;box-shadow:0 3px 8px color-mix(in srgb,var(--ink) 12%,transparent),0 0 0 .5px color-mix(in srgb,var(--ink) 4%,transparent)}
:root.ios:root[data-theme=dark] .m-seg__item[aria-checked=true]{background:color-mix(in srgb,var(--ink) 22%,var(--panel))}
:root.ios:root .m-seg__item::after{content:'';position:absolute;inset:-10px 0}
/* One microphone: while the Genie dock is open its own mic is the one; the app bar’s steps aside. */
:root:is(.ios,.android) body:has(#assistant:not([hidden])) .workspace-header #phone-mic{visibility:hidden}
/* A setting’s description wraps to two lines at most. */
:root:is(.ios,.android) :is(.m-set-copy small,.ad-item-copy small,.ios-item-copy small,.ad-copy small,.ios-row-copy small){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden!important}
/* Settings scroll inside their own region, like the phone’s own settings; the section bar stays put above the rows. */
:root.android:root #local-settings:not([hidden]){overflow-y:auto;overscroll-behavior:contain}
:root.android:root #local-settings>.ad-bar{position:sticky;top:0;z-index:2;background:var(--app-bg)}
:root.ios:root #local-settings .ios-stack.ios-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
:root.ios:root #local-settings.m-drill>.settings-content{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
/* Wherever a pager remains on a phone it is compact: 40 tall tonal buttons (44 to the touch), 14/500 words, “1 / 3” centred. */
:root:is(.ios,.android):root .pager button{position:relative;height:40px!important;min-height:40px!important;min-width:0!important;padding:0 14px!important;border:0!important;border-radius:999px!important;background:var(--accent-soft)!important;color:var(--accent-text)!important;font-size:14px!important;font-weight:500!important}
:root:is(.ios,.android):root .pager button::after{content:'';position:absolute;inset:-2px 0}
:root:is(.ios,.android):root .pager button:disabled{background:transparent!important;color:var(--disabled,var(--ink3))!important;opacity:1}
:root:is(.ios,.android):root .pager .pager-count{font-size:0;letter-spacing:0}
:root:is(.ios,.android):root .pager .pager-count::after{content:attr(data-short);font-family:var(--font-mono);font-size:12px;color:var(--ink3)}
:root:is(.ios,.android):root .pager{padding-inline:16px!important;gap:8px}
/* The booking sheet’s date and time read in the app’s own format; the phone’s picker lies over them. The reason a Book is off. */
:is(.ios,.android) .m-book__picker{position:relative}
:is(.ios,.android) .m-book__picker .m-book__shown{display:flex;align-items:center;min-height:44px;font-variant-numeric:tabular-nums}
:is(.ios,.android) .m-book__picker input{position:absolute;left:0;right:0;bottom:0;height:100%;max-height:48px;opacity:0;margin:0}
:is(.ios,.android) .m-book__why{margin:0;font-size:13px;line-height:1.4;color:var(--ink3)}
/* The iPhone’s drafted-document actions: Save document filled, the others tinted, radius 12, 44 tall. */
:root.ios:root #drafted-document .toolbar button{height:44px;min-height:44px;padding:0 14px;border:0;border-radius:12px;background:var(--accent-soft);color:var(--accent-text);font-size:15px;font-weight:600}
:root.ios:root #drafted-document .toolbar #save-document{background:var(--accent);color:var(--on-accent)}
/* The strip under a visit’s app bar wraps its action under the name rather than cutting the name or the words (phone fit). */
@media (max-width:380px){
  :is(.ios,.android) .vc-strip:has(>.vc-assign){flex-wrap:wrap;row-gap:8px}
  :is(.ios,.android) .vc-strip>.vc-assign{flex:1 0 100%}
}
:is(.ios,.android) .vc-ready .vc-strip .vc-meta{overflow:visible;white-space:normal;text-overflow:clip}
/* A strip crowded by a badge and Discard (Paused) gives the name the avatar’s room on a narrow phone. */
@media (max-width:380px){:is(.ios,.android) .vc-strip:has(>.vc-discard:not([hidden])) .vc-tile{display:none}}
:is(.ios,.android) .addendum-actions{flex-wrap:wrap}
:is(.ios,.android) .addendum-actions>.addendum-why{flex:1 0 100%}
:is(.ios,.android) .vc-progress-body .vc-step.todo small{display:none}
html:root:is(.ios,.android) #drafted-document .toolbar :is(#choose-document,#copy-document){flex:0 0 auto;width:auto}
:root.ios:root body.pn-note.pn-note #encounter-page .pn-strip .pn-tab{min-width:44px}
:root.android:root :is(#pn-assign-cancel,#pn-assign){min-height:48px;height:48px}
:root.ios:root .ios-item{min-width:0}
:root.ios:root :is(#iv-assign-search,#pn-assign-search){height:44px;min-height:44px;border-top:4px solid transparent!important;border-bottom:4px solid transparent!important;background-clip:padding-box}
:root.ios:root .vc-progress-body .vc-step-copy strong{font-size:15px;line-height:20px;letter-spacing:-.2px}
:root.ios:root .vc-progress-body .vc-step-copy small{font-size:13px;line-height:18px}
:is(.ios,.android) :is(.pn-assign-why,.addendum-why){margin:0;font-size:13px;line-height:1.4;color:var(--ink3)}
:is(.ios,.android) .pn-assign-why[hidden],:is(.ios,.android) .addendum-why[hidden]{display:none}
@media (max-height:640px){:root:is(.ios,.android) #documents-pane.pn-drafting #drafted-document>label{display:none}}
/* Lists that scroll inside their region come to rest on a whole row, and the Start visit bar keeps its own band (never over a card). */
:root:is(.ios,.android) :is(#patients-table,.m-record__body,#review-note-list){scroll-snap-type:y proximity}
:root:is(.ios,.android) :is(#home-records .m-prow,.m-record__body>*,#review-note-list>.ph-row){scroll-snap-align:start}
:root:is(.ios,.android) .m-startbar{position:relative;z-index:1;background:var(--panel);border-top:1px solid var(--line)}
:root:is(.ios,.android) .m-book__results{max-height:40dvh;overflow-y:auto;overscroll-behavior:contain}
/* The keyboard is up: the tab bar steps aside instead of riding above it. */
:root.kb-open:is(.ios,.android) #phone-tabs{display:none!important}
/* A tap leaves no highlight behind: the press shows only while pressed (no sticky :hover or focus on touch). */
@media (hover:none){
  :root:is(.ios,.android) :is(.m-row--visit,.ph-row,.m-prow,.m-vrow,.m-set-row,.ad-item,.ios-item,.pn-doc-main,.m-srow,.vc-pick,.pn-pick):is(:hover,:focus:not(:focus-visible)):not(:active){background-color:transparent}
  :root:is(.ios,.android) :is(.m-card,.m-next,.m-stat):is(:hover,:focus:not(:focus-visible)):not(:active){background-color:var(--panel)}
}
/* On its side: compact bars, and the content scrolls inside its region instead of paging (paging.js reads :root.pg-off). */
:root.pg-off:is(.ios,.android) .pg-pane>.pg-viewport{overflow-y:auto!important}
:root.pg-off:is(.ios,.android) .pg-pane>.pg-viewport>.pg-flow{transform:none!important;clip-path:none!important}
:root.pg-off:is(.ios,.android) #shell .screen:not([hidden]){overflow-y:auto}
@media (orientation:landscape) and (max-height:500px){
  :root:is(.ios,.android) .workspace-header.m-appbar{min-height:0!important;padding-top:calc(var(--safe-top,0px) + 2px)!important;padding-bottom:2px!important}
  :root:is(.ios,.android):root .workspace-header.m-appbar #phone-title{font-size:18px!important;line-height:24px!important}
  :root:is(.ios,.android) .workspace-header.m-appbar #phone-kicker{display:none!important}
  :root:is(.ios,.android) #phone-tabs{min-height:0!important;height:auto!important;padding-block:2px!important}
  :root:is(.ios,.android) #phone-tabs .m-tab__label,:root:is(.ios,.android) #phone-tabs :is(small,.m-tab span:not(.m-tab__icon)){font-size:11px}
  :is(.ios,.android) .vc-screen{overflow-y:auto}
  :is(.ios,.android) .vc-ready-body{flex:none}
  :is(.ios,.android) .m-timer.vc-idle{font-size:32px}
  :root:is(.ios,.android) dialog:is(.ph-sheet,.m-psheet,.vc-sheet){max-height:96dvh}
  :root.kb-open:is(.ios,.android) #encounter-page :is(#pn-status,.pn-strip){display:none!important}
}
/* On its side a sheet, the progress steps and the pickers scroll inside themselves (nothing paged, nothing cut off). */
:root.pg-off:is(.ios,.android) :is(dialog.ph-sheet,dialog.vc-sheet,dialog.m-psheet,dialog.iv-sheet,dialog.av-sheet,.vc-progress-body,.vc-matches,.iv-action-group){overflow-y:auto!important}
@media (max-height:640px){:root:is(.ios,.android) body:has(#documents-pane.pn-drafting:not([hidden])) #message{display:none}}
/* On its side with the keyboard up, a sheet gives its room to the field: the grabber and the spare header space step aside. */
@media (orientation:landscape) and (max-height:500px){
  :root.kb-open:is(.ios,.android) dialog:is(.m-psheet,.ph-sheet,.vc-sheet) :is(.m-sheet__handle,.ph-grabber,.m-psheet__grab){display:none}
  :root.kb-open:is(.ios,.android) dialog.m-psheet .m-psheet__head{padding-block:4px}
}
:is(.ios,.android) .vc-progress-body{overflow-y:auto;overscroll-behavior:contain}   /* Nothing heard: the card scrolls above its ways on, never cut */
/* Typing an addendum or a letter: the status strip steps aside too, so the field keeps its room above the keyboard. */
:root.kb-open:is(.ios,.android) body.pn-note #encounter-page #pn-status{display:none!important}
/* Nothing heard, compact: the card and its ways on fit a small phone; what is left scrolls inside the body (L-1), never cut. */
:is(.ios,.android) .vc-progress .vc-silent{gap:6px;padding:12px 14px}
:is(.ios,.android) .vc-progress .vc-silent .vc-danger-tile.big{width:40px;height:40px}
:is(.ios,.android) .vc-progress .vc-foot-note{margin-top:6px;font-size:12px}
:is(.ios,.android) .vc-progress .vc-foot.vc-stack{gap:8px}
:is(.ios,.android) .vc-progress .vc-foot.vc-stack .m-btn{height:44px;min-height:44px}
html:root.kb-open:is(.ios,.android) body.pn-note.pn-note #addendum-pane #addendum-text{min-height:120px}
html:root.kb-open:is(.ios,.android) body.pn-note.pn-note #encounter-page .document-footer{display:none!important}
html:root:is(.ios,.android) body.pn-note.pn-note #encounter-page:has(#documents-pane.pn-drafting:not([hidden])) .document-footer{display:none!important}