/* Phones (up to 760px): the iPhone and Android layouts of the mobile wireframes, for browsers and the Capacitor shells.
   iOS is the default; html.android (theme.js) switches to the Material variant. Colours come from tokens.css only.
   Safe areas: --safe-top/--safe-bottom read env(safe-area-inset-*) (62px at the top of an iPhone 17 Pro in the shell). */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--tabbar:calc(56px + var(--safe-bottom));--signbar:69px}
:root.android{--tabbar:calc(64px + var(--safe-bottom))}
/* Phone-only chrome never shows in the desktop and wide web layouts. */
#phone-menu,#phone-add,#phone-more,.phone-heading,#phone-amend,.tab-short,.search-field>.search-icon,.search-clear,.genie-grabber,#export .icon,#phone-chips,#phone-recorder,#phone-pill,.ph-pull,.speaker-lines,.ph-template{display:none}
.search-field{display:contents}
/* Sheets, the Android drawer and menus (one reusable dialog, #phone-sheet).
   Nothing scrolls (owner, 16 Sept 2026): a sheet too tall for the phone is a pane of the shared pager (paging.js), so it clips
   rather than scrolls and its body turns pages between the pinned grabber, title and buttons. Both shells register it —
   android.js registerPanes() and ios-visit.js — and both give .pg-pane its flex order (android.css, ios-visit.css). */
dialog.ph-dialog{padding:0;background:var(--popover);color:var(--ink);border:1px solid var(--border);box-shadow:var(--shadow-dialog);overscroll-behavior:contain}
dialog.ph-sheet{margin:auto 0 0;width:100%;max-width:none;max-height:calc(100dvh - var(--safe-top) - 24px);border-radius:16px 16px 0 0;border-bottom:0;padding:8px 16px calc(16px + var(--safe-bottom));display:flex;flex-direction:column;gap:12px;overflow:hidden}
/* display:flex above beats the browser's display:none for a closed dialog, so a sheet that keeps its classes between openings
   would otherwise lay itself out below the fold. */
dialog.ph-sheet:not([open]){display:none}
dialog.ph-drawer{margin:0 auto 0 0;width:300px;max-width:85vw;height:100dvh;max-height:none;border-radius:0 16px 16px 0;border-left:0;padding:calc(var(--safe-top) + 16px) 12px calc(16px + var(--safe-bottom));display:flex;flex-direction:column;gap:6px}
dialog.ph-menu{margin:calc(var(--safe-top) + 52px) 8px auto auto;width:min(260px,calc(100vw - 16px));border-radius:8px;padding:8px 0}
.ph-dialog::backdrop{background:var(--backdrop)}
.ph-grabber{width:36px;height:5px;border-radius:3px;background:var(--input-border);margin:0 auto 4px;flex-shrink:0}
.ph-dialog h2{font-size:var(--text-card);font-weight:600;letter-spacing:0;margin:0}
.ph-dialog.ph-menu h2{padding:8px 16px;font-size:var(--text-ui)}
.ph-sheet-note{font-size:var(--text-secondary);color:var(--hint);margin:0;overflow-wrap:anywhere}
.ph-drawer .ph-sheet-note,.ph-menu .ph-sheet-note{padding:0 12px 8px}
.ph-drawer-brand{display:flex;align-items:center;gap:10px;padding:4px 12px 8px;font-size:var(--text-appbar);font-weight:var(--weight-brand);letter-spacing:-.03em}.ph-drawer-brand img{border-radius:8px}
.ph-items{display:flex;flex-direction:column}
.ph-items>button,.ph-items>a{display:flex;align-items:center;justify-content:flex-start;min-height:48px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--ink);font-size:var(--text-note);font-weight:500;text-align:left;text-decoration:none}
.ph-menu .ph-items>button,.ph-menu .ph-items>a{border-radius:0;padding:0 16px;font-weight:400}
.ph-items>.danger{color:var(--danger)}
.ph-items>button:hover,.ph-items>a:hover{background:var(--accent-tint)}
.ph-sheet label{gap:6px;font-size:var(--text-secondary);color:var(--muted)}
.ph-sheet input{width:100%;height:48px;border-radius:12px}
:root.android .ph-sheet input{border-radius:8px}
/* The choices are never a scroller of their own: they page with the rest of the sheet's body. */
.ph-choices{display:flex;flex-direction:column;gap:6px}
.ph-choice{justify-content:flex-start;min-height:44px;border-radius:12px;background:var(--card);color:var(--ink);font-weight:400;text-align:left}
.ph-choice.selected{border-color:var(--accent);background:var(--accent-tint);color:var(--accent-strong);font-weight:600}
.ph-done{min-height:48px;border-radius:12px}
.ph-discard{min-height:44px;border-radius:12px;background:transparent;color:var(--danger);border-color:var(--danger-border)}
/* iPhone note-template sheet: a grouped inset list on the grouped background (name, one-line summary, a checkmark on the current). */
dialog.ph-sheet.ph-grouped{background:var(--app-bg)}
.ph-options{display:flex;flex-direction:column;flex-shrink:0;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.ph-option{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;min-height:60px;padding:10px 14px 10px 16px;border:0;border-radius:0;background:transparent;color:var(--ink);font-weight:400;text-align:left}
.ph-option+.ph-option::before{content:'';position:absolute;top:0;left:16px;right:0;height:1px;background:var(--row-border)}
.ph-option:active{background:var(--row-highlight)}
@media(hover:hover){.ph-option:hover{background:var(--row-highlight)}} /* no hover left behind by a tap */
.ph-option-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ph-option-copy strong{font-size:var(--text-note);font-weight:500;line-height:1.35}
.ph-option-copy small{font-size:12.5px;line-height:1.4;color:var(--hint)}
.ph-option .ph-check{flex:0 0 22px;width:22px;height:22px;color:var(--accent-text);visibility:hidden}
.ph-option[aria-checked=true] .ph-check{visibility:visible}
.ph-option[aria-checked=true] .ph-option-copy strong{font-weight:600}
.ph-sheet-secondary{min-height:48px;border-radius:12px;background:var(--card)}

@media(max-width:760px){
/* ---- Shell ---- */
#shell{padding-bottom:var(--tabbar)}
.workspace{background:var(--app-bg)}
.workspace-header{height:auto;flex:0 0 auto;align-items:flex-start;gap:12px;padding:calc(var(--safe-top) + 8px) 20px 8px;background:var(--app-bg)}
.workspace-header .breadcrumb,#connection-status,#assistant-open{display:none}
.phone-heading{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
#phone-title{font-size:28px;line-height:1.2;font-weight:700;letter-spacing:-.01em;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#phone-subtitle{font-size:var(--text-secondary);line-height:1.4;color:var(--hint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#phone-subtitle:empty{display:none}
.workspace-header .toolbar{flex-wrap:nowrap;gap:8px;margin:4px 0 0 auto}
.phone-bar-button{width:40px;height:40px;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink)}
.phone-bar-button .icon{width:24px;height:24px}
#phone-add:not([hidden]){display:inline-flex;width:32px;height:32px;background:var(--accent-tint);color:var(--accent-text)}
#account-mobile{width:32px;height:32px;min-height:0;padding:0;border:0;border-radius:50%;background:var(--accent-surface);color:var(--accent-strong);font-size:var(--text-secondary);font-weight:600;letter-spacing:.02em}
#account-mobile:hover{background:var(--accent-surface)}
/* Android top app bar: navigation drawer, 17px title, avatar, overflow; the subtitle is the first line of the content. */
:root.android .workspace-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:56px auto;align-items:center;gap:0;padding:var(--safe-top) 0 0;background:var(--card);border-bottom:1px solid var(--border)}
:root.android #phone-menu{display:inline-flex;grid-column:1;grid-row:1;width:48px;height:48px;margin-left:4px}
:root.android .phone-heading{display:contents}
:root.android #phone-title{grid-column:2;grid-row:1;font-size:var(--text-card);font-weight:600;letter-spacing:0;padding-left:6px}
:root.android #phone-subtitle{grid-column:1/-1;grid-row:2;padding:10px 20px 4px;background:var(--app-bg);border-top:1px solid var(--border)}
:root.android .workspace-header:has(#phone-subtitle:not(:empty)){border-bottom:0}
:root.android .workspace-header .toolbar{grid-column:3;grid-row:1;margin:0 4px 0 0;gap:2px}
:root.android #account-mobile{width:28px;height:28px;font-size:var(--text-label);margin:0 6px}
:root.android #phone-add{display:none}
:root.android #phone-more:not([hidden]){display:inline-flex;width:48px;height:48px}
/* Every screen's own heading moves into the header; its buttons stay on the page. */
.screen>.page-heading>div:first-child{display:none}
.screen>.page-heading{justify-content:flex-end}
.screen>.page-heading:not(:has(>:not(div:first-child):not([hidden]))){display:none}
/* Patients: the heading keeps only the search field (the title is in the header; New patient is in the header and menus). */
#home-page>.page-heading{display:flex;flex-direction:column;align-items:stretch}#home-page>.page-heading>#new-patient{display:none}
#patient-page>.page-heading>.primary,#patient-page>.page-heading>.record-actions{flex:1}#patient-page .record-actions .primary{flex:1;--control-size:48px;border-radius:12px}#patient-page .record-actions .quiet{min-height:var(--tap)}
.screen{padding:12px 16px 20px;gap:12px}
.session-banner{padding-top:calc(var(--safe-top) + 10px)}
/* Settings carry their own back link and heading: the header keeps the safe area and the avatar, which floats beside "← Home". */
:root .workspace-header.ph-bare{position:relative;z-index:4;padding-bottom:0;border-bottom:0;min-height:0;grid-template-rows:0;background:var(--app-bg)}
.workspace-header.ph-bare>:not(.toolbar),.workspace-header.ph-bare .toolbar>:not(#account-mobile){display:none!important}
:root .workspace-header.ph-bare .toolbar{position:absolute;top:calc(var(--safe-top) + 14px);right:16px;margin:0;z-index:1}
.workspace-header.ph-bare::after{content:'';position:absolute;left:0;right:0;top:100%;height:58px;background:var(--app-bg);border-bottom:1px solid var(--border);opacity:0;pointer-events:none;transition:opacity var(--motion-fast,120ms) ease}.workspace-header.ph-bare.ph-scrolled::after{opacity:1}
#local-settings>.page-heading{display:flex;justify-content:space-between}#local-settings>.page-heading>div:first-child{display:block}
/* Messages sit above the tab bar, clear of the raised record button. */
:root:not(.android) .workspace-status{padding-bottom:26px}
.entry-form{padding-top:max(32px,calc(var(--safe-top) + 16px))}

/* ---- Tab bar: Home · Schedule · [Record] · Patients · Genie (iOS); four flat items on Android ---- */
#phone-tabs{position:fixed;left:0;right:0;bottom:0;height:var(--tabbar);padding:0 4px var(--safe-bottom);display:flex;align-items:flex-start;background:var(--card);border-top:1px solid var(--border);z-index:10}
#phone-tabs button{flex:1;height:56px;min-height:0;flex-direction:column;gap:2px;padding:6px 0 0;border:0;border-radius:0;background:transparent;color:var(--hint);font-size:10.5px;line-height:1.3;font-weight:500;justify-content:flex-start}
#phone-tabs button:hover{background:transparent}
#phone-tabs .icon{width:22px;height:22px}
#phone-tabs button.active{color:var(--accent-text);font-weight:600}
#phone-tabs #phone-record{flex:0 0 52px;width:52px;height:52px;padding:0;margin:-21px 6px 0;border-radius:50%;background:var(--accent);box-shadow:var(--shadow-primary);justify-content:center;color:var(--on-accent)}
#phone-record i{display:block;width:14px;height:14px;border-radius:50%;background:var(--on-accent);transition:border-radius var(--motion-fast) var(--ease)}
body.recording #phone-tabs #phone-record{background:var(--danger-fill);box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--danger-fill);animation:ph-ring 1.6s var(--ease) infinite}
body.recording #phone-record i{width:12px;height:12px;border-radius:3px}
body.recording.ph-paused #phone-tabs #phone-record{animation:none;box-shadow:0 0 0 2px var(--card),0 0 0 5px var(--review-dot)}
@keyframes ph-ring{0%{box-shadow:0 0 0 2px var(--card),0 0 0 4px color-mix(in srgb,var(--danger-fill) 70%,transparent)}100%{box-shadow:0 0 0 2px var(--card),0 0 0 12px color-mix(in srgb,var(--danger-fill) 0%,transparent)}}
:root.android #phone-tabs{align-items:center;padding:0 0 var(--safe-bottom)}
:root.android #phone-tabs #phone-record{display:none}
:root.android #phone-tabs button{height:64px;gap:4px;padding:6px 0 0;font-size:var(--text-label);justify-content:center}
:root.android #phone-tabs .icon{width:24px;height:24px;padding:3px 16px;box-sizing:content-box;border-radius:15px;transition:background var(--motion-fast) var(--ease)}
:root.android #phone-tabs button.active{color:var(--ink)}
:root.android #phone-tabs button.active .icon{background:var(--accent-tint);color:var(--accent-strong)}
/* The slim pill under the header while a visit records elsewhere. */
#phone-pill:not([hidden]){display:flex;align-self:center;flex-shrink:0;margin:0 16px 8px;min-height:32px;padding:4px 14px;border-radius:999px;background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger);font-size:var(--text-secondary);font-weight:600;font-variant-numeric:tabular-nums}
#phone-pill.paused{background:var(--review-bg);border-color:var(--review-dot);color:var(--review-text)}

/* ---- Cards and rows shared by Home and the lists ---- */
.ph-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px}
:root.android .ph-card{border-radius:12px}
.ph-eyebrow{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.13em;text-transform:uppercase;color:var(--hint);margin-bottom:6px}
.ph-next h2{font-size:var(--text-card);font-weight:600;letter-spacing:0;line-height:1.35;margin:0}
.ph-next p.muted{font-size:var(--text-secondary);margin-top:3px}
.ph-next .ph-wide{width:100%;--control-size:48px;margin-top:14px;border-radius:12px;font-size:var(--text-note)}
:root.android .ph-next{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
:root.android .ph-next-copy{flex:1 1 180px;min-width:0}
.ph-tonal{margin-left:auto;min-height:40px;padding:0 18px;border:0;border-radius:999px;background:var(--accent-tint);color:var(--accent-strong);font-weight:600}
.ph-tonal:hover{background:var(--accent-tint-hover)}
.ph-counters{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ph-counter{flex-direction:column;align-items:flex-start;gap:2px;padding:14px;min-height:0;border-radius:16px;background:var(--card);border:1px solid var(--border);text-align:left}
.ph-counter strong{font-family:var(--font-mono);font-size:25px;font-weight:500;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.ph-counter span{font-size:var(--text-secondary);font-weight:400;color:var(--muted)}
:root.android .ph-counters{display:none}
.ph-list{padding:0;overflow:hidden}
.ph-list-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:6px 8px 6px 16px;border-bottom:1px solid var(--row-border)}
.ph-list-head h2{font-size:var(--text-ui);font-weight:600;letter-spacing:0;margin:0}
.ph-list-head .quiet{min-height:36px;padding:0 8px;font-size:var(--text-secondary)}
.ph-count{display:none}
:root.android .ph-list-head h2{font-family:var(--font-mono);font-size:var(--text-label);font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--hint)}
:root.android .ph-count{display:inline}
.ph-rows{display:flex;flex-direction:column}
.ph-row{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;min-height:60px;padding:10px 12px 10px 16px;border:0;border-radius:0;background:var(--card);color:var(--ink);font-weight:400;text-align:left;touch-action:pan-y;transition:transform var(--motion-fast) var(--ease)}
.ph-row:hover{background:var(--row-highlight)}
.ph-rows>.ph-row+.ph-row::before,#home-records>.ph-swipe+.ph-swipe::before{content:'';position:absolute;top:0;left:56px;right:0;height:1px;background:var(--row-border);z-index:2}
.ph-avatar{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent-strong);font-size:var(--text-label);font-weight:600;letter-spacing:.02em}
:root.android .ph-avatar{border-radius:50%}
.ph-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ph-copy strong{font-size:var(--text-note);font-weight:500;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-copy small{font-size:12.5px;line-height:1.4;color:var(--hint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-trail{display:none;font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ph-chevron{font-size:20px;line-height:1;color:var(--hint)}
:root.android .ph-trail{display:inline}
:root.android .ph-chevron,:root.android .ph-ios{display:none}
.ph-end{margin:0;padding:12px;font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.04em;color:var(--hint);text-align:center}
.ph-end:empty{display:none}
.ph-sentinel{height:1px;flex-shrink:0}
.ph-empty{padding:28px 20px;margin:0}
.ph-empty h2{font-size:var(--text-card)}
.ph-empty p{font-size:var(--text-secondary)}
.ph-secondary{min-height:44px;border-radius:12px;padding:0 18px}
#dashboard-page{gap:12px}

/* ---- Patients: search first, chips, then a list (iOS grouped inset; Android separate cards) ---- */
.patient-filters{gap:10px}
.search-field{display:flex;position:relative;align-items:center}
.search-field>.search-icon{display:block;position:absolute;left:14px;width:20px;height:20px;color:var(--hint);pointer-events:none}
#home-page #patient-search{height:48px;border-radius:12px;padding:0 44px 0 42px;width:100%;margin:0}
:root.android #home-page #patient-search{border-radius:8px}
#patient-search::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.search-clear:not([hidden]){display:grid;place-items:center;position:absolute;right:4px;width:40px;height:40px;min-height:0;padding:0;border:0;background:transparent;color:var(--hint)}
.filter-chips{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;justify-content:flex-start;gap:8px;padding:0;background:transparent;border-radius:0}
.filter-chips::-webkit-scrollbar{display:none}
.filter-chips button{flex:0 0 auto;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--secondary);padding:0 14px}
.filter-chips button.active{background:var(--accent-tint);border-color:var(--accent-surface);color:var(--accent-strong);box-shadow:none}
#patients-table{flex:0 0 auto;min-height:0;border:0;border-radius:0;background:transparent;overflow:visible}
#patients-table .table-head{display:none}
#home-records{flex:none;min-height:0;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
#home-records:has(>.ph-empty){background:transparent;border:0}
.ph-swipe{position:relative;overflow:hidden;background:var(--accent);flex-shrink:0}
.ph-swipe .ph-avatar{width:34px;height:34px;flex-basis:34px;border-radius:50%}
.ph-swipe-action{position:absolute;top:0;right:0;bottom:0;width:96px;min-height:0;padding:0 8px;border:0;border-radius:0;background:var(--accent);color:var(--on-accent);font-size:var(--text-secondary);font-weight:600;white-space:normal;line-height:1.25}
.ph-swipe-action:hover{background:var(--accent-hover)}
.ph-swipe.dragging .ph-row{transition:none}
:root.android #home-records{background:transparent;border:0;border-radius:0;gap:8px;overflow:visible}
:root.android #home-records>.ph-swipe{border:1px solid var(--border);border-radius:12px;background:var(--card)}
:root.android #home-records>.ph-swipe::before{display:none}
.ph-pull{display:block;height:var(--pull,0px);overflow:hidden;flex-shrink:0;text-align:center;font-size:var(--text-secondary);color:var(--hint);line-height:40px;transition:height var(--motion-fast) var(--ease)}
.ph-pull.ready{color:var(--accent-text)}
:root:not(.android) .ph-pull{display:none}
/* Schedule and a patient's history keep their rows; the phone just drops the pager. */
.table-card .ph-end{border-top:1px solid var(--border)}
#patients-table .ph-end{border-top:0}

/* ---- A visit: chips on both screens; the title row, steps and back link give way to the phone header ---- */
#encounter-page{gap:12px;padding-bottom:calc(var(--signbar) + 20px)}
#visit-steps,#encounter-page .visit-fields,.size-step,.export-toast{display:none}
#encounter-page .visit-head{display:contents}
#generate{border-color:var(--accent);color:var(--accent-text)}
#encounter-page .title-row,#encounter-page .visit-identity{display:contents}
#encounter-page .title-row>:not(.visit-identity),#encounter-page .visit-identity>:not(#patient-matches){display:none}
#phone-chips{display:flex;gap:8px;flex-shrink:0}
.ph-chip{height:44px;min-height:44px;padding:0 14px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--ink);font-size:var(--text-ui);font-weight:400;justify-content:flex-start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;text-align:left;max-width:60%}
#phone-patient-chip{flex:1;min-width:0;max-width:none}
.ph-chip.placeholder{color:var(--hint)}
.ph-chip:disabled{opacity:1;cursor:default}
:root.android .ph-chip{border-radius:8px}
/* iPhone note template: its own row under the chips until the note is written (and while recording), then above the section cards.
   A pop-up button: the label, the current template and ⌃⌄; a signed note shows a lock instead. Android has its own (android-visit.js). */
#phone-chips{flex-wrap:wrap}
:root:not(.android) body.recording #phone-template-chip,:root:not(.android) #encounter-page:not(.ph-has-note,.ph-signed) #phone-template-chip,
:root:not(.android) #encounter-page:is(.ph-has-note,.ph-signed) #phone-note-template{display:flex}
.ph-template{flex:1 1 100%;align-items:center;justify-content:flex-start;gap:8px;width:100%;height:auto;min-height:44px;padding:0 12px 0 14px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--ink);font-size:var(--text-ui);font-weight:400;text-align:left}
.ph-template:hover{background:var(--card)}
.ph-template-label{flex:0 0 auto;color:var(--muted)}
.ph-template-value{flex:0 1 auto;min-width:0;margin-left:auto;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-template .icon{flex:0 0 16px;width:16px;height:16px;color:var(--hint)}
.ph-template:not(.locked) .ph-template-lock,.ph-template.locked .ph-template-open{display:none}
.ph-template:disabled{opacity:1;cursor:default;background:var(--app-bg);color:var(--secondary)}
#phone-note-template{margin:0 0 12px;flex:0 0 auto}
/* Idle capture card: Start recording, the status copy and any error; hidden once a note exists and nothing is pending. */
#encounter-page .capture-input{display:none}
#encounter-page .capture{border-radius:16px}
:root.android #encounter-page .capture{border-radius:12px}
#encounter-page.ph-has-note .capture[data-recording-state=idle]:not(:has(#record-error:not([hidden]),#recover:not(:disabled),#processing-progress:not([hidden]),#cancel-transcription:not([hidden]))),#encounter-page.ph-signed .capture{display:none}

/* ---- Recording screen ---- */
body.recording #encounter-page>:not(#phone-chips,#phone-recorder){display:none}
body.recording #encounter-page{padding-bottom:20px}
body.recording #phone-recorder{display:flex;flex-direction:column;gap:12px}
.ph-timer{padding:26px 16px;border:1px solid var(--border);border-radius:18px;background:var(--card);text-align:center}
:root.android .ph-timer{border-radius:12px}
.ph-clock{font-family:var(--font-mono);font-size:39px;font-weight:500;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--ink);white-space:pre}
.ph-bars{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:39px;margin-top:14px}
.ph-bars i{display:block;width:4px;height:15%;border-radius:2px;background:var(--accent);transition:height var(--motion-fast) linear}
.ph-rec-status{margin-top:14px;font-size:var(--text-secondary);color:var(--muted)}
body.ph-paused .ph-clock{color:var(--review-text)}
body.ph-paused .ph-bars i{height:15%!important;background:var(--disabled)}
.ph-rec-actions{display:flex;gap:10px}
#phone-stop{flex:1;height:50px;min-height:50px;border:0;border-radius:12px;background:var(--danger-fill);color:var(--on-accent);font-size:var(--text-note);font-weight:600}
#phone-stop:hover{background:var(--danger-fill)}
#phone-stop::before{content:'';width:10px;height:10px;border-radius:2px;background:currentColor}
#phone-pause{flex:0 0 auto;min-width:96px;height:50px;min-height:50px;padding:0 18px;border:1px solid var(--input-border);border-radius:12px;background:var(--card);color:var(--ink);font-size:var(--text-note);font-weight:500}
#phone-pause[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
:root.android .ph-rec-actions{position:fixed;left:0;right:0;bottom:var(--tabbar);z-index:9;padding:10px 16px;background:var(--card);border-top:1px solid var(--border)}
:root.android body.recording #encounter-page{padding-bottom:calc(71px + 20px)}
/* Stop and delete (journeys-17): a quiet line of text under the transport, never a third button in the Stop/Pause row. */
.ph-stop-delete{align-self:center;min-height:0;margin:2px auto 0;padding:8px 12px;border:0;border-radius:10px;background:transparent;color:var(--hint);font-size:var(--text-meta);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.ph-stop-delete:hover,.ph-stop-delete:focus-visible{background:var(--review-bg);color:var(--danger)}
:root.android .ph-stop-delete{position:relative;z-index:9}
.ph-live{padding:12px;border:1px dashed var(--input-border);border-radius:12px;font-size:var(--text-secondary);color:var(--muted);cursor:pointer}
.ph-live-label{display:none;font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.13em;text-transform:uppercase;color:var(--hint);margin-bottom:6px}
.ph-live.has-text{border-style:solid;border-color:var(--border);background:var(--card);color:var(--ink)}
.ph-live.has-text .ph-live-label{display:block}
.ph-live.has-text .ph-live-text{max-height:132px;overflow:auto;font-size:var(--text-ui);line-height:1.6;white-space:pre-wrap;overscroll-behavior:contain}
.ph-live.expanded .ph-live-text{max-height:none}
.ph-keep{font-size:var(--text-secondary);color:var(--review-text);background:var(--review-bg);border-radius:12px;padding:10px 12px}

/* ---- Note & sign: segmented control, section cards, persistent draft banner, sticky Sign bar ---- */
#encounter-page .document{flex:0 0 auto;min-height:0;border:0;border-radius:0;background:transparent;overflow:visible}
#encounter-page .editor-toolbar{padding:0;border:0;flex-wrap:wrap;gap:10px}
.tab-long{display:none}.tab-short{display:inline}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}
#tab-note{order:-1}
.tabs button{height:36px;min-height:0;padding:0 8px;border:1px solid var(--input-border);border-radius:999px;background:var(--card);color:var(--muted);font-size:var(--text-secondary);font-weight:500}
.tabs button[aria-selected=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
:root.android .tabs{gap:0;width:calc(100% + 32px);margin:0 -16px;border-bottom:1px solid var(--border)}
:root.android .tabs button{height:48px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;font-size:var(--text-secondary);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
:root.android .tabs button[aria-selected=true]{background:transparent;color:var(--accent-text);border-bottom-color:var(--accent)}
:root.android #encounter-page .document{touch-action:pan-y}
#encounter-page .editor-tools{margin-left:auto}
#encounter-page:not(:has(#tab-transcript[aria-selected=true])) .editor-tools{display:none}
#encounter-page .note-progress{border:1px solid var(--border);border-radius:12px;margin-top:10px}
#encounter-page .document-pane{padding:12px 0 0;min-height:0;overflow:visible}
#note-pane:not([hidden]){display:flex;flex-direction:column}
.note-actions{position:sticky;top:-12px;z-index:3;display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:10px 12px;border-radius:12px;background:var(--review-bg);color:var(--review-text);box-shadow:0 -12px 0 var(--app-bg)}
.note-actions .review-banner{flex:1;padding:0;border-radius:0;background:transparent;color:inherit;font-size:var(--text-secondary)}
#edit-note{min-height:0;padding:4px 6px;border:0;background:transparent;color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}
#amend-note{display:none}
.note-actions.is-signed{background:var(--signed-bg);color:var(--signed-text)}
/* Sticky offsets count from the scroller's padding box: -12px is flush with the top; -8px sits 12px above the Sign bar. */
:root.android .note-actions{order:9;top:auto;bottom:-8px;margin:0;box-shadow:0 12px 0 var(--app-bg)}
.note-prose section{margin:0 0 12px;padding:2px 16px 14px;border:1px solid var(--border);border-radius:16px;background:var(--card)}
:root.android .note-prose section{border-radius:12px}
.note-prose h3{margin:0}
.note-prose section.collapsed>p{display:none}
.review-sheet{padding:0;border:0;background:transparent}
#note-pane .note-section textarea{border-radius:12px}
#transcript-pane textarea#transcript{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;min-height:260px}
#transcript-pane .kept-audio:not([hidden]){margin:0 0 12px;padding:12px 14px;border-radius:16px}
:root.android #transcript-pane .kept-audio:not([hidden]){border-radius:12px}
#kept-audio-player{flex-basis:100%}
.speaker-lines:not([hidden]){display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:var(--card)}
.speaker-line{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:var(--text-note);line-height:1.55;margin:0}
.speaker{font-size:var(--text-meta);font-weight:600;letter-spacing:.02em}
.speaker.is-clinician{color:var(--accent-text)}.speaker.is-patient{color:var(--signed-text)}
.speaker-time{font-family:var(--font-mono);font-size:var(--text-label);color:var(--hint)}
.speaker-text{flex-basis:100%}
.speaker-lines .quiet{align-self:flex-start;padding:0;min-height:36px}
#encounter-page #documents-pane{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin-top:12px}
:root.android #encounter-page #documents-pane{border-radius:12px}
#encounter-page .document-footer{position:fixed;left:0;right:0;bottom:var(--tabbar);z-index:9;min-height:var(--signbar);padding:10px 16px;border:0;border-top:1px solid var(--border);border-radius:0;background:var(--card);flex-wrap:nowrap}
#encounter-page .document-footer>#save-status{display:none}
#encounter-page .document-footer .toolbar{flex:1;flex-wrap:nowrap;gap:10px;margin:0}
#export{flex:0 0 48px;width:48px;height:48px;min-height:48px;padding:0;border-radius:12px;color:var(--secondary)}
#export .icon{display:block;width:22px;height:22px}
#export span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
#review,#phone-amend{flex:1;height:48px;min-height:48px;border-radius:12px;font-size:var(--text-note)}
#phone-amend{display:inline-flex}
#encounter-page:not(.ph-signed) #phone-amend,#encounter-page.ph-signed #review{display:none}
/* Signing and exporting confirm in bottom sheets. */
#clinical-dialog,#export-dialog{margin:auto 0 0;width:100%;max-width:none;max-height:calc(100dvh - var(--safe-top) - 24px);border-radius:16px 16px 0 0;border-bottom:0;padding:24px 20px calc(20px + var(--safe-bottom))}

/* ---- Genie: a sheet over the current screen (iOS half sheet with a grabber; Android bottom sheet with a handle) ---- */
#assistant{top:auto;bottom:0;left:0;right:0;height:calc(var(--sheet,50) * 1dvh);max-height:calc(100dvh - var(--safe-top) - 8px);z-index:32;background:var(--popover);border:1px solid var(--border);border-bottom:0;border-radius:16px 16px 0 0;box-shadow:var(--shadow-dialog);padding-bottom:var(--safe-bottom);outline:none;transition:height var(--motion-base) var(--ease)}
#assistant.dragging{transition:none}
.genie-grabber{display:block;flex-shrink:0;width:36px;height:5px;margin:8px auto 0;border-radius:3px;background:var(--input-border);touch-action:none}
:root.android .genie-grabber{width:32px;height:4px;border-radius:2px;margin-top:12px}
#assistant .genie-header{touch-action:none;padding:8px 16px 10px}
#assistant-scrim:not([hidden]){display:block;position:fixed;inset:0;z-index:31;background:var(--backdrop)}
#assistant .genie-empty{margin:12px 16px 0}
#assistant-input{border-radius:12px}
:root.android #assistant-input{border-radius:8px}
#assistant-mic{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
:root.android #assistant-mic,:root.android #assistant-form .primary{border-radius:50%}
.genie-bars i:nth-child(-n+6){display:none}
/* Voice: the sheet becomes a strip pinned under the header; the page underneath stays live. */
#assistant.voice-strip{top:var(--strip-top,calc(var(--safe-top) + 8px));bottom:auto;left:12px;right:12px;width:auto;height:auto;max-height:none;padding:10px 12px;border:1px solid var(--ink);border-radius:16px;background:var(--card);box-shadow:var(--shadow-popover);transition:none}
:root.android #assistant.voice-strip{border-radius:10px}
#assistant.voice-strip>:not(.genie-footer){display:none}
#assistant.voice-strip .genie-footer{padding:0;border:0;gap:6px}
#assistant.voice-strip .genie-footer>:not(#assistant-form,#assistant-voice-hint,#assistant-voice-notice){display:none}
#assistant.voice-strip #assistant-form.is-listening{padding:0;border:0;background:transparent}
#assistant.voice-strip #assistant-form.is-listening #assistant-mic{width:28px;height:28px;flex-basis:28px;border-radius:50%}
#assistant.voice-strip .genie-stop{border-radius:999px}
:root.android #assistant.voice-strip .genie-stop{border-radius:6px}
#assistant.voice-strip #assistant-voice-hint{text-align:left;font-size:12.5px;color:var(--muted);margin:0}
}
@media(prefers-reduced-motion:reduce){
  #phone-record,#phone-record i,.ph-row,.ph-bars i,.ph-pull,#assistant,:root.android #phone-tabs .icon{transition:none}
  body.recording #phone-record{animation:none}
}
/* Phones show the recording pill under the header (#phone-pill) instead of the desktop header chip; the recording guard stacks its
   buttons with Keep on top. */
@media(max-width:760px){#recording-chip{display:none}#phone-pill{align-items:center;gap:6px}.ph-pill-icon{font-size:.72em;letter-spacing:1px}#phone-pill:not(.paused) .ph-pill-icon{color:var(--danger-fill)}
  .recording-guard .dialog-actions{flex-direction:column-reverse;align-items:stretch;gap:10px}.recording-guard .dialog-actions button:first-child{margin-right:0}}
/* ---- Tap targets: 44pt on iPhone, 48dp on Android (--tap; the Settings shadow root inherits it). Small visuals keep their size
   and grow a transparent hit area; lists, tabs and form controls meet the size itself. ---- */
@media(max-width:760px){
:root{--tap:44px}:root.android{--tap:48px;--control-height:48px;--control-compact:48px}
#account-mobile,#phone-add,#assistant-close,.suggestions button,.filter-chips button,.back-link,.settings-back{position:relative}
#account-mobile::after,#phone-add::after,#assistant-close::after,.suggestions button::after,.filter-chips button::after,.back-link::after{content:'';position:absolute}
#account-mobile::after,#phone-add::after{inset:calc((32px - var(--tap))/2 - 1px)}
:root.android #account-mobile::after{inset:calc((28px - var(--tap))/2 - 1px)}:root:not(.android) .workspace-header .toolbar{gap:14px}:root.android #account-mobile{margin:0 11px}
#assistant-close::after{inset:calc((33px - var(--tap))/2 - 1px) 0}
.settings-tabs{overflow-x:auto;scrollbar-width:none;justify-content:flex-start;flex-shrink:0}.settings-tabs::-webkit-scrollbar{display:none}.settings-tabs button{flex:0 0 auto;padding-inline:12px}
.suggestions{gap:calc(var(--tap) - 28px) 8px}.suggestions button::after{inset:calc((30px - var(--tap))/2 - 1px) -4px}
.filter-chips button::after{inset:calc((36px - var(--tap))/2 - 1px) -4px}.filter-chips{padding-block:calc((var(--tap) - 36px)/2 + 1px);margin-block:calc((36px - var(--tap))/2 - 1px)} /* the scroller would clip the hit area */:root.android .filter-chips button{min-height:36px}
.back-link::after{inset:calc((36px - var(--tap))/2 - 1px) -8px}
.ph-list-head .quiet,.ph-tonal,.settings-tabs button,#assistant-input,.week-controls>button{min-height:var(--tap)}
.week-controls>button:is(:first-child,:nth-child(3)){min-width:var(--tap)}
:root.android #assistant-mic,:root.android #assistant-form .primary{width:48px;height:48px;flex-basis:48px}
/* Call on a patient row (iOS swipe), left of Start visit. */
.ph-swipe.has-call{background:var(--ink)}
.ph-swipe-action.ph-call{right:96px;display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--card);text-decoration:none}
/* While Genie listens, its strip pins under the header and the page moves down beneath it instead of being covered. */
body.genie-strip .workspace>.screen:not([hidden]){padding-top:calc(var(--genie-strip,64px) + 12px)}
}
/* Schedule rows keep one line: the action column is as wide as its buttons (Start visit or Open, then ⋯), never wrapping. */
@media(max-width:760px){
.table-row.schedule-columns{grid-template-columns:55px minmax(0,1fr) auto}.schedule-columns .toolbar{flex-wrap:nowrap;gap:6px}
.schedule-columns .patient-name{justify-content:flex-start;text-align:left;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.schedule-columns .toolbar button[aria-label="Edit appointment"]{min-width:var(--tap);min-height:var(--tap);padding-inline:0}
}