/* 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-back,#phone-mic,#phone-hooks,#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 and menus (one reusable dialog, #phone-sheet; a menu is a bottom sheet too, O-8).
   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}
.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-sheet-note{font-size:var(--text-secondary);color:var(--hint);margin:0;overflow-wrap:anywhere}
.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-items>.danger{color:var(--danger)}
.ph-items>button:hover,.ph-items>a:hover{background:var(--accent-tint)}
.ph-sheet label{gap:var(--field-label-gap);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}
:root:not(.android) #phone-tabs [data-phone=settings]{display:none} /* Settings is a tab on Android only (Sept 2026 design) */
#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 :is(h2,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}
}

/* ==== The shared phone shell (Android and iOS; phone.js appBar): app bar, tab bar, sheets, the Genie dock, Today, Review ====
   DESIGN_GUIDELINES P-2 (title 22/700, back at the left naming its destination, one icon action at the right), N-8 (Today ·
   Schedule · Patients · Review, 22 icons, 11/600 labels, no mic), V-1/V-2 (the Genie mic, 44×44), O-8 (sheets: radius 14,
   36×4 handle, max 88dvh), §3.1 type. Platform deltas come from mobile.css (--m-bar-pad, --m-tab-pad, --m-field-r …). */
:is(#phone-mic,#phone-back,#phone-kicker)[hidden]{display:none!important}
@media(max-width:760px){
#phone-mic:not([hidden]){display:flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;min-height:0;padding:0;border:0;border-radius:var(--r-pill);background:transparent;color:var(--accent-text)}
#phone-mic .icon{width:22px;height:22px}
#phone-mic{position:relative}#phone-mic[aria-pressed=true]{background:var(--live);color:var(--on-fill);animation:docvoc-ring 1.6s var(--ease) infinite}#phone-mic::after{content:'';position:absolute;inset:calc((44px - var(--tap,44px))/2)} /* Android's 48dp hit area */
:root:is(.ios,.android){--tabbar:calc(var(--m-tab-h) + var(--safe-bottom))}
/* ---- App bar ---- */
:root:is(.ios,.android) .workspace-header.m-appbar{display:flex;align-items:center;gap:10px;height:auto;min-height:0;padding:var(--m-bar-pad);background:var(--panel);border-bottom:1px solid var(--line);grid-template:none}
:root.ios .workspace-header.m-appbar{padding-top:calc(var(--safe-top) + 6px)}
:root.android .workspace-header.m-appbar{padding-top:calc(var(--safe-top) + 10px)}
:root:is(.ios,.android) .workspace-header.m-appbar .toolbar{display:contents}
:root:is(.ios,.android) .workspace-header.m-appbar :is(#phone-menu:not(.av-back),#connection-status,.genie-wrap,#recording-chip,#phone-subtitle,.breadcrumb,#phone-add){display:none!important}
:root:is(.ios,.android) .workspace-header.m-appbar #account-mobile:not(.m-lead){display:none}
:root:is(.ios,.android) .workspace-header.m-appbar .phone-heading{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;order:0}
:root:is(.ios,.android) .workspace-header.m-appbar #phone-kicker{display:block;font-size:10px;font-weight:650;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink3);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root:is(.ios,.android) .workspace-header.m-appbar #phone-title{font-size:var(--m-title);font-weight:var(--m-title-w);letter-spacing:-.02em;line-height:1.2;color:var(--ink);padding:0;grid-area:auto}
:root:is(.ios,.android) .workspace-header.m-appbar #phone-back{order:-1;margin-left:-8px}
:root:is(.ios,.android) .workspace-header.m-appbar #phone-back:not([hidden]){display:flex} /* phone.css:7 hides it by id, above .m-back’s own display */
:root:is(.ios,.android) .workspace-header.m-appbar #phone-back .icon{width:20px;height:20px}
:root:is(.ios,.android) .workspace-header.m-appbar #account-mobile.m-lead{order:-2;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin:0 2px 0 -2px;border-radius:var(--r-control);background:var(--accent-soft);color:var(--accent-text);font-size:13.5px;font-weight:600;letter-spacing:0}
:root:is(.ios,.android) .workspace-header.m-appbar #account-mobile.m-lead::after{inset:calc((36px - var(--tap,44px))/2)}
:root:is(.ios,.android) .workspace-header.m-appbar #phone-mic{order:5;margin-right:-6px}
:root:is(.ios,.android) .workspace-header.m-appbar #phone-more:not([hidden]){order:4}
:root.android #phone-menu:not(.av-back){display:none}
/* ---- Tab bar: Today · Schedule · Patients · Review ---- */
:root:is(.ios,.android) #phone-tabs{box-sizing:border-box;height:var(--tabbar);min-height:0;align-items:center;gap:2px;padding:var(--m-tab-pad);background:var(--panel);border-top:1px solid var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}
:root.ios #phone-tabs{padding-bottom:calc(4px + var(--safe-bottom))}
:root.android #phone-tabs{padding-bottom:calc(6px + var(--safe-bottom))}
:root:is(.ios,.android) #phone-tabs .m-tab{height:auto;min-height:48px;justify-content:center;gap:3px;padding:2px 0;color:var(--ink3);font-size:var(--m-tab-fs);line-height:1.2;font-weight:600;letter-spacing:0}
:root:is(.ios,.android) #phone-tabs .m-tab .icon{width:var(--m-tab-icon);height:var(--m-tab-icon);padding:0;border-radius:0;background:none;color:inherit}
:root:is(.ios,.android) #phone-tabs .m-tab__icon{display:flex;align-items:center;justify-content:center}
:root:is(.ios,.android) #phone-tabs .m-tab[aria-current=page]{color:var(--accent-text);font-weight:650}
:root.android #phone-tabs .m-tab[aria-current=page] .m-tab__icon{padding:3px 15px;border-radius:var(--r-pill);background:var(--accent-soft)}
:root.android #phone-tabs .m-tab:active .m-tab__icon{background:var(--panel2)}
body.m-tabs-off #phone-tabs{display:none}
body.m-tabs-off #shell{padding-bottom:0}
/* ---- Bottom sheets and menus (O-8): one sheet on both platforms, no popover, no drawer ---- */
:root:is(.ios,.android) dialog.ph-sheet{max-height:88dvh;padding:0 var(--m-side) calc(16px + var(--safe-bottom));border:0;border-radius:var(--r-panel) var(--r-panel) 0 0;background:var(--panel);box-shadow:var(--shadow-card)}
:root:is(.ios,.android) dialog.ph-sheet[open]{animation:m-sheet-in 240ms cubic-bezier(.2,.7,.2,1)}
:root:is(.ios,.android) .ph-grabber{width:36px;height:4px;border-radius:var(--r-pill);background:var(--line);margin:8px auto 4px}
:root:is(.ios,.android) .ph-dialog h2{font-size:var(--m-section);font-weight:600;letter-spacing:-.01em}
:root:is(.ios,.android) .ph-sheet .ph-items>:is(button,a){gap:12px;min-height:48px;padding:0 12px;border-radius:var(--r-control);font-size:var(--m-body);font-weight:500;color:var(--ink)}
:root:is(.ios,.android) .ph-sheet .ph-items>:is(button,a).danger{color:var(--danger)}
:root:is(.ios,.android) .ph-sheet .ph-items .icon{width:18px;height:18px;flex:none;color:var(--ink3)}
:root:is(.ios,.android) .ph-sheet .ph-items>:is(button,a):hover{background:var(--panel2)}
.ph-divider{width:100%;height:0;margin:4px 0;border:0;border-top:1px solid var(--line2)}
.ph-account-head{display:flex;flex-direction:column;gap:2px;padding:6px 12px 8px;border-bottom:1px solid var(--line2)}
.ph-account-head strong{font-size:var(--m-body,15px);font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-account-head .ph-sheet-note:empty{display:none}
/* ---- The Genie dock chrome (its contents are the Genie screens'): no scrim, the page stays live above it ---- */
:root:is(.ios,.android) #assistant{height:auto;max-height:88dvh;background:var(--panel);border:0;border-top:1px solid var(--accent-line);border-radius:var(--r-panel) var(--r-panel) 0 0;box-shadow:var(--shadow-card);animation:m-sheet-in 240ms cubic-bezier(.2,.7,.2,1);transition:none}
:root:is(.ios,.android) #assistant.dragging{height:calc(var(--sheet,50) * 1dvh)}
/* The dock takes its content's height; dragged up it stands at the tall detent (O-8: at most 88dvh). */
:root:is(.ios,.android) #assistant[data-detent=tall]:not(.dragging){height:88dvh}
:root:is(.ios,.android) #assistant-scrim{display:none!important}
:root:is(.ios,.android) .genie-grabber{width:36px;height:4px;margin:8px auto 0;border-radius:var(--r-pill);background:var(--line)}
:root:is(.ios,.android) #assistant-close{min-height:var(--tap);height:var(--tap);padding:0 14px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--panel2);color:var(--ink2);font-size:var(--m-secondary);font-weight:550}
:root:is(.ios,.android) #assistant-close::after{display:none}
/* ---- Today (1a) ---- */
:root:is(.ios,.android) #dashboard-page.m-today{padding:12px var(--m-side) 16px;gap:12px;background:var(--bg);overflow-y:auto}
.m-today .m-card,.m-review .m-card{flex:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow)}
.m-kicker{display:block;font-size:10px;font-weight:650;letter-spacing:1.6px;line-height:1.3;text-transform:uppercase;color:var(--ink3)}
.m-today .m-next{display:flex;flex-direction:column;align-items:flex-start;gap:0;width:100%;min-height:0;height:auto;padding:14px;text-align:left;color:var(--ink);font-weight:400}
.m-today button.m-next:hover{background:var(--panel2)}
.m-next__title{margin-top:7px;font-size:var(--m-section);font-weight:600;letter-spacing:-.02em;line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-next__line{margin-top:4px;font-size:var(--m-secondary);line-height:1.5;color:var(--ink2)}
.m-stats{display:flex;gap:12px;flex:none}
.m-today .m-stat{flex:1;min-width:0;height:auto;min-height:0;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:12px 14px;text-align:left;color:var(--ink);font-weight:400}
.m-today .m-stat:hover{background:var(--panel2)}
.m-stat__value{margin-top:5px;font-family:var(--font-mono);font-size:30px;font-weight:600;letter-spacing:-.04em;line-height:1.15;font-variant-numeric:tabular-nums}
.m-today .m-waiting{overflow:hidden}
.m-card__head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 6px 0 14px;border-bottom:1px solid var(--line)}
.m-card__title{margin:0;font-size:var(--m-secondary);font-weight:600;letter-spacing:0;color:var(--ink)}
.m-link{min-height:var(--tap);height:var(--tap);padding:0 8px;border:0;background:transparent;color:var(--accent-text);font-size:var(--m-meta);font-weight:550}
.m-link:hover{background:transparent;text-decoration:underline}
/* A queue row: avatar 34, name, reason, (when, mono), badge, (chevron). */
.m-rows{display:flex;flex-direction:column}
:root:is(.ios,.android) .m-row--visit{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;min-height:56px;height:auto;padding:10px 14px;border:0;border-bottom:1px solid var(--line2);border-radius:0;background:transparent;color:var(--ink);font-weight:400;text-align:left}
:root:is(.ios,.android) .m-row--visit:last-child{border-bottom:0}
:root:is(.ios,.android) .m-row--visit:hover{background:var(--panel2)}
:root:is(.ios,.android) .m-row--visit::before{display:none}
.m-avatar{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:var(--r-control);background:var(--accent-soft);color:var(--accent-text);font-size:var(--m-meta);font-weight:600}
.m-row__copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.m-row__copy .m-row__name{font-size:var(--m-secondary);font-weight:600;line-height:1.35}
.m-row__line,.m-row__copy .m-row__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-row__line{font-size:var(--m-meta);line-height:1.4;color:var(--ink3)}
.m-row__line:empty{display:none}
.m-row__copy .m-row__meta{font-family:var(--font-mono);font-size:var(--m-meta);line-height:1.4;color:var(--ink3);margin:0}
.m-row--visit>.dv-badge{flex:none}
.m-row--visit>.icon{width:16px;height:16px;flex:none;color:var(--ink3)}
.m-empty{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px}
.m-empty__title{font-size:var(--m-secondary);font-weight:600;color:var(--ink)}
.m-empty__line{margin:0;font-size:var(--m-meta);line-height:1.5;color:var(--ink2)}
.m-empty__action{margin-top:8px;width:auto;height:44px;padding:0 16px;font-size:var(--m-secondary)}
/* ---- Review (1c): search and status chips fixed at the top, the list scrolls under them ---- */
/* app.css (max-width:767px) forces #review-page to a block scroller with !important; the phone Review needs the column. */
:root:is(.ios,.android) #review-page.m-review:not([hidden]){display:flex!important;flex-direction:column;padding:0;gap:0;background:var(--bg);overflow:hidden!important}
:root:is(.ios,.android) .m-review .review-queue{display:flex;flex-direction:column;flex:1;min-height:0;width:auto;gap:0;padding:0;border:0;background:transparent;overflow:hidden}
.m-filters{flex:none;display:flex;flex-direction:column;gap:10px;padding:10px var(--m-side);background:var(--panel);border-bottom:1px solid var(--line)}
.m-search{position:relative;display:flex;align-items:center;color:var(--ink3)}
.m-search .icon{position:absolute;left:12px;top:calc(50% - 9px);width:18px;height:18px;pointer-events:none}
.m-search input{width:100%;height:var(--tap);padding:0 12px 0 40px;border:1px solid var(--line);border-radius:var(--m-field-r);background:var(--panel2);box-shadow:none;font-size:16px;color:var(--ink)}
.m-search input::placeholder{color:var(--ink3)}
.m-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.m-search input:focus{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.m-chips{display:flex;flex-wrap:wrap;gap:8px}
.m-chip{height:var(--tap);min-height:var(--tap);min-width:var(--tap);padding:0 14px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--panel);color:var(--ink2);font-size:var(--m-secondary);font-weight:500;white-space:nowrap}
.m-chip[aria-pressed=true]{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-text);font-weight:600}
:root:is(.ios,.android) .m-review .m-review-list{flex:0 1 auto;min-height:0;margin:12px var(--m-side) 16px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column}
.m-review .m-review-list.is-empty{flex:0 0 auto}
.m-review .m-review-list>.m-row--visit{flex:none}
}
@media(prefers-reduced-motion:reduce){:root:is(.ios,.android) :is(dialog.ph-sheet[open],#assistant),#phone-mic[aria-pressed=true]{animation:none}}
/* ---- First run: Check your mic (#av-mic, #iv-mic) in the mobile auth stack (MOBILE_STYLE_GUIDE §6): padding 14, gap 14, logo 32 →
   title 26/700 → sub 14 --ink2 → the level card (kicker, meter, hint in --ink2) → fine print 12 --ink3 → full-width buttons, 48 tall,
   the platform radius; Skip for now is the full-width secondary, the way forward. ---- */
:root:is(.ios,.android) dialog.m-auth{padding:calc(var(--safe-top,0px) + 14px) var(--m-side) calc(var(--safe-bottom,0px) + 14px);gap:14px;background:var(--bg);color:var(--ink)}
:root:is(.ios,.android) dialog.m-auth .m-auth__title{margin:0;font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1.2;color:var(--ink)}
:root:is(.ios,.android) dialog.m-auth .m-auth__title::before{content:'';display:block;width:32px;height:32px;margin-bottom:14px;border-radius:var(--r-control);background:url(/app/brand.svg) center/32px 32px no-repeat}
:root:is(.ios,.android) dialog.m-auth p.m-auth__sub{margin:0;font-size:14px;line-height:1.5;color:var(--ink2)}
:root:is(.ios,.android) dialog.m-auth .m-auth__card{display:flex;flex-direction:column;gap:10px;flex:none;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow)}
:root:is(.ios,.android) dialog.m-auth .m-auth__card>.m-kicker{margin:0}
:root:is(.ios,.android) dialog.m-auth :is(.av-level,.iv-level){height:56px;gap:3px}
:root:is(.ios,.android) dialog.m-auth :is(.av-level,.iv-level) i{min-height:4px;border-radius:2px;background:var(--accent)}
:root:is(.ios,.android) dialog.m-auth p.m-auth__hint{margin:0;font-size:var(--m-secondary);line-height:1.45;color:var(--ink2)}
:root:is(.ios,.android) dialog.m-auth p.m-auth__fine{margin:0;font-size:12px;line-height:1.5;color:var(--ink3)}
:root:is(.ios,.android) dialog.m-auth :is(.av-mic-actions,.iv-mic-actions){margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:10px}
:root:is(.ios,.android) dialog.m-auth .m-btn{min-height:0;height:var(--h-large);width:100%;padding:0 16px;border-radius:var(--m-btn-r);font-size:var(--m-body)}
:root:is(.ios,.android) dialog.m-auth .m-btn:not(.m-btn--primary){border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-weight:550}
:root:is(.ios,.android) dialog.m-auth .m-btn[hidden]{display:none}
:root:is(.ios,.android) dialog.m-auth :is(.av-mic-chips,.iv-mic-chips) :is(.av-chip,.iv-chip){min-height:28px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--panel2);color:var(--ink2);font-size:var(--m-meta);font-weight:550}
/* ==== Schedule (DocVoc Mobile 1e) and the Genie dock's contents, Android and iOS (clinical.js renderPhoneSchedule, assistant.js) ====
   The week strip follows DT-1, the day list Source 631-648 under the rulebook's type (§3.1), the booking sheet the desktop
   composer (P-5) in a bottom sheet (O-8). The dock: status row, what was said, one result card, the strip of things to say. */
@media(max-width:760px){
:root:is(.ios,.android) #schedule-page.m-schedule:not([hidden]){display:flex!important;flex-direction:column;padding:0;gap:0;background:var(--bg);overflow:hidden!important}
.m-week{flex:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;padding:6px 4px 4px;background:var(--panel);touch-action:pan-y}
:root:is(.ios,.android) .m-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;height:auto;min-height:52px;padding:2px 0;border:0;border-radius:var(--r-small);background:transparent;color:var(--ink2);font-weight:400;box-shadow:none}
:root:is(.ios,.android) .m-day:hover{background:transparent}
.m-day__name{font-size:10px;font-weight:650;letter-spacing:.06em;line-height:1.2;text-transform:uppercase;color:var(--ink3)}
.m-day__num{display:flex;align-items:center;justify-content:center;width:100%;max-width:44px;height:32px;border-radius:var(--r-small);font-family:var(--font-mono);font-size:12.5px;color:var(--ink2)}
.m-day.is-busy .m-day__num{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.m-day.is-today .m-day__num{box-shadow:inset 0 0 0 1px var(--accent-line)}
.m-day.is-selected .m-day__num{background:var(--accent);color:var(--accent-ink);font-weight:600;box-shadow:none}
.m-dayhead{flex:none;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 var(--m-side);background:var(--panel);border-bottom:1px solid var(--line)}
.m-dayhead__date{flex:1;min-width:0;font-size:var(--m-body);font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-dayhead__count{flex:none;font-family:var(--font-mono);font-size:var(--m-meta);color:var(--ink3)}
.m-daylist{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;display:flex;flex-direction:column}
.m-daylist>*{scroll-snap-align:start}
:root:is(.ios,.android) .m-srow{flex:none;position:relative;display:flex;align-items:center;justify-content:flex-start;gap:11px;width:100%;min-height:60px;height:auto;padding:11px var(--m-side);border:0;border-bottom:1px solid var(--line2);border-radius:0;background:transparent;color:var(--ink);font-weight:400;text-align:left;box-shadow:none}
:root:is(.ios,.android) .m-srow::before{display:none}
:root:is(.ios,.android) .m-srow:hover{background:var(--panel2)}
.m-srow__time{flex:none;width:46px;font-family:var(--font-mono);font-size:var(--m-meta);color:var(--ink2);font-variant-numeric:tabular-nums}
.m-srow__copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.m-srow__name,.m-srow__reason{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-srow__name{font-size:var(--m-body);font-weight:600;line-height:1.3;color:var(--ink)}
.m-srow__reason{font-size:var(--m-secondary);line-height:1.35;color:var(--ink3)}
.m-srow--free .m-srow__name{font-weight:550;color:var(--ink2)}
.m-srow__book{flex:none;display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 11px;border:1px solid var(--line);border-radius:var(--m-btn-r);background:var(--panel);color:var(--accent-text);font-size:var(--m-secondary);font-weight:600}
.m-srow__book .icon{width:14px;height:14px}
:root:is(.ios,.android) .m-srow.m-added{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}
.m-srow.m-added .m-srow__name{font-weight:650}
.m-added__mark{flex:none;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:var(--r-badge);background:var(--accent);color:var(--accent-ink);font-size:10px;font-weight:650;letter-spacing:.06em;line-height:1.2;text-transform:uppercase;white-space:nowrap}
.m-added__mark .icon{width:11px;height:11px}
.m-empty--tile{align-items:center;gap:6px;padding:40px 24px;text-align:center}
.m-empty__tile{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:6px;border-radius:var(--r-card);background:var(--accent-soft);color:var(--accent-text)}
.m-empty__tile .icon{width:24px;height:24px}
.m-empty--tile .m-empty__title{font-size:var(--m-body)}
.m-empty--tile .m-empty__line{max-width:300px;font-size:13px}
.m-empty--tile .m-empty__action .icon{width:16px;height:16px}
/* The booking sheet */
.m-book{display:flex;flex-direction:column;gap:12px;padding-top:4px}
:root:is(.ios,.android) .m-book__patient{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;height:44px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--m-field-r);background:var(--panel2);color:var(--ink);font-size:16px;font-weight:500;text-align:left}
.m-book__patient>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-book__patient.is-empty{color:var(--ink3)}
.m-book__patient .icon{flex:none;width:15px;height:15px;color:var(--ink3)}
.m-book__results{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
:root:is(.ios,.android) :is(.m-book__option,.m-book__new){display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-height:52px;height:auto;padding:8px 12px;border:0;border-bottom:1px solid var(--line2);border-radius:0;background:var(--panel);color:var(--ink);font-weight:400;text-align:left}
:root:is(.ios,.android) .m-book__new{min-height:48px;border-bottom:0;color:var(--accent-text);font-size:var(--m-secondary);font-weight:600}
.m-book__new .icon{width:16px;height:16px}
.m-book__who{display:flex;flex-direction:column;min-width:0}
.m-book__who strong{font-size:var(--m-body);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-book__who small{font-family:var(--font-mono);font-size:var(--m-meta);color:var(--ink3)}
.m-book__field{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:var(--m-meta);color:var(--ink2)}
.m-book__label{font-size:var(--m-meta);font-weight:600;color:var(--ink2)}
.m-book__pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
:root:is(.ios,.android) .m-book .m-field{height:44px;min-height:44px;font-family:inherit;box-shadow:none}
.m-book__clash{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid var(--danger-line);border-radius:var(--r-control);background:var(--danger-bg);color:var(--danger)}
.m-book__clash-line{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--m-secondary);line-height:1.4}
.m-book__clash-line .icon{flex:none;width:16px;height:16px}
.m-book__slots{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.m-book__slot{font-family:var(--font-mono)}
.m-book__actions{display:flex;flex-direction:column;gap:8px;margin-top:4px}
:root:is(.ios,.android) .m-book__actions .m-btn{height:var(--h-large);min-height:var(--h-large)}
:root:is(.ios,.android) .m-book__actions .m-btn--primary:disabled{opacity:.5}
/* The Genie dock: status row (dot · status · Done) */
.genie-dot{display:none}
:root:is(.ios,.android) #assistant .genie-header{display:flex;align-items:center;gap:9px;padding:11px var(--m-side) 9px;border-bottom:1px solid var(--line2)}
:root:is(.ios,.android) #assistant .genie-dot{display:block;flex:none;width:8px;height:8px;border-radius:4px;background:var(--line)}
:root:is(.ios,.android) #assistant.is-listening .genie-dot{background:var(--live)}
:root:is(.ios,.android) #assistant .genie-mark{display:none}
:root:is(.ios,.android) #assistant .genie-title strong{font-size:var(--m-secondary);font-weight:600;color:var(--ink)}
:root:is(.ios,.android) #assistant-empty{display:none!important}
/* What was said, and the result card */
:root:is(.ios,.android) #assistant-messages{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;gap:8px;padding:11px var(--m-side)}
:root:is(.ios,.android) #assistant-messages:empty{display:none}
:root:is(.ios,.android) #assistant .chat-user{align-self:stretch;max-width:none;padding:0;border:0;border-radius:0;background:transparent;color:var(--ink);font-size:var(--m-body);font-weight:600;line-height:1.4}
:root:is(.ios,.android) #assistant .chat-user p::before{content:'“'}
:root:is(.ios,.android) #assistant .chat-user p::after{content:'”'}
:root:is(.ios,.android) #assistant .genie-card{display:flex;flex-wrap:wrap;align-items:center;gap:9px;align-self:stretch;max-width:none;padding:9px 11px;border:1px solid var(--accent-line);border-radius:var(--r-control);background:var(--accent-soft);color:var(--ink);font-size:var(--m-secondary);line-height:1.45}
:root:is(.ios,.android) #assistant .genie-card>p{flex:1 1 0;min-width:0;margin:0}
:root:is(.ios,.android) #assistant .genie-card>.icon{flex:none;width:16px;height:16px;color:var(--accent-text)}
:root:is(.ios,.android) #assistant .genie-card.is-error{border-color:var(--danger-line);background:var(--danger-bg)}
:root:is(.ios,.android) #assistant .genie-card>button:not(.genie-card-action){flex:1 0 100%;margin:0;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--panel);color:var(--accent-text);font-size:var(--m-meta);text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root:is(.ios,.android) #assistant .genie-card-action{flex:none;height:44px;min-height:44px;padding:0 15px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--panel);color:var(--ink2);font-size:var(--m-secondary);font-weight:600}
:root:is(.ios,.android) #assistant .chat-trail{display:none}
/* The strip of things to say, and the composer */
:root:is(.ios,.android) #assistant .genie-footer{gap:9px;padding:9px var(--m-side) 12px;border-top:1px solid var(--line2);background:var(--panel2)}
:root:is(.ios,.android) #assistant-suggestions{display:flex;flex-wrap:nowrap;gap:8px;min-width:0;margin-block:calc((32px - var(--tap,44px))/2)}
/* One line (at iOS's 13 the three no longer fit, so a long one shortens with an ellipsis). The chip is the full tap size (44pt / 48dp)
   and draws its 32-tall pill in ::before, so clipping the label never clips the hit area. */
:root:is(.ios,.android) #assistant-suggestions button{position:relative;isolation:isolate;flex:0 1 auto;min-width:0;height:var(--tap,44px);min-height:var(--tap,44px);padding:0 12px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink2);font-size:var(--m-meta);font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root:is(.ios,.android) #assistant-suggestions button::before{content:'';position:absolute;z-index:-1;left:0;right:0;top:calc((var(--tap,44px) - 32px)/2);bottom:calc((var(--tap,44px) - 32px)/2);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--panel)}
:root:is(.ios,.android) #assistant-suggestions button::after{display:none}
:root:is(.ios,.android) #assistant-suggestions button:hover{background:transparent;border:0}:root:is(.ios,.android) #assistant-suggestions button:hover::before{background:var(--panel2)}
:root:is(.ios,.android) #assistant-suggestions button .icon{display:none}
:root:is(.ios,.android) #assistant-input{height:44px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--m-field-r);background:var(--panel);color:var(--ink);font-size:16px}
:root.android #assistant-input{height:48px;min-height:48px} /* Android's 48dp target (H-2) */
:root:is(.ios,.android) #assistant-form.is-listening{padding:0;border:0;border-radius:0;background:transparent}
:root:is(.ios,.android) #assistant-form.is-listening #assistant-mic{background:var(--live);border-color:var(--live);color:var(--on-fill)}
:root:is(.ios,.android) #assistant-form.is-listening .genie-bars i{background:var(--live)}
:root:is(.ios,.android) #assistant-form.is-listening .genie-stop{height:44px;min-height:44px;padding:0 14px;border-radius:var(--r-control);background:var(--panel);border:1px solid var(--line);color:var(--ink2);font-size:var(--m-secondary)}
:root:is(.ios,.android) #assistant{box-shadow:0 -10px 30px color-mix(in srgb,var(--scrim) 38%,transparent)}
/* The DocVoc cloud agreement opens as a bottom sheet over the dock, never a centred modal (O-2, O-8) */
:root:is(.ios,.android) dialog#remote[open]{position:fixed;inset:auto 0 0 0;width:100%;max-width:none;max-height:88dvh;margin:0;padding:8px var(--m-side) calc(16px + var(--safe-bottom));border:0;border-radius:var(--r-panel) var(--r-panel) 0 0;background:var(--panel);box-shadow:var(--shadow-card);overflow-y:auto;animation:m-sheet-in 240ms cubic-bezier(.2,.7,.2,1)}
:root:is(.ios,.android) dialog#remote[open]::before{content:'';display:block;width:36px;height:4px;margin:0 auto 12px;border-radius:var(--r-pill);background:var(--line)}
:root:is(.ios,.android) dialog#remote h2{font-size:var(--m-section);font-weight:600;margin:0 0 8px}
:root:is(.ios,.android) dialog#remote p{font-size:var(--m-secondary);line-height:1.5;color:var(--ink2)}
:root:is(.ios,.android) dialog#remote p:empty{display:none}
:root:is(.ios,.android) dialog#remote .toolbar{display:flex;flex-direction:column-reverse;gap:8px;margin-top:14px}
:root:is(.ios,.android) dialog#remote .toolbar button{width:100%;height:var(--h-large);min-height:var(--h-large);border-radius:var(--m-btn-r);font-size:var(--m-body)}
}
@media(prefers-reduced-motion:reduce){:root:is(.ios,.android) dialog#remote[open]{animation:none}}

/* ==== Patients and the patient record, one build for Android and iOS (clinical.js renderPhonePatients / renderPhoneRecord /
   phonePatientSheet). The rulebook's app bar (P-2) and one scroll region between the fixed bars (DESIGN_GUIDE §13); rows,
   search, chips, cards and tiles from the Mobile prototype (Source 99-110, 200-222, 312-328, 587-627). ==== */
@media(max-width:760px){
:root:is(.ios,.android) #home-page.m-patients:not([hidden]){display:flex;flex-direction:column;padding:0;gap:0;background:var(--bg);overflow:hidden}
:root:is(.ios,.android) #home-page.m-patients>:is(.page-heading,.patient-filters,.ph-pull,.pager){display:none}
.m-pstrip{flex:none}
.m-pstrip__row{display:flex;align-items:center;gap:9px;min-width:0}
:root:is(.ios,.android) #home-page .m-pstrip .search-field{display:flex;position:relative;flex:1;min-width:0;height:auto;margin:0;padding:0;border:0;border-radius:0;background:none}
:root:is(.ios,.android) #home-page .m-pstrip .search-field>.search-icon{display:block;position:absolute;left:12px;top:calc(50% - 8.5px);width:17px;height:17px;color:var(--ink3);pointer-events:none}
:root:is(.ios,.android) #home-page.m-patients #patient-search{width:100%;height:var(--tap,44px);margin:0;padding:0 44px 0 38px;border:1px solid var(--line);border-radius:var(--m-field-r);background:var(--panel2);box-shadow:none;font-size:16px;color:var(--ink)}
:root:is(.ios,.android) #home-page.m-patients #patient-search::placeholder{color:var(--ink3)}
:root:is(.ios,.android) #home-page.m-patients #patient-search:focus{outline:none;border:1.5px solid var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}
:root:is(.ios,.android) #home-page.m-patients .search-clear:not([hidden]){right:0;width:var(--tap,44px);height:var(--tap,44px);color:var(--ink3)}
:root:is(.ios,.android) #home-page.m-patients #new-patient{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:0;width:var(--tap,44px);height:var(--tap,44px);min-height:0;padding:0;font-size:0;border:1px solid var(--accent-line);border-radius:var(--m-btn-r);background:var(--accent-soft);color:var(--accent-text);font-size:var(--m-secondary);font-weight:600;box-shadow:none;white-space:nowrap}
:root:is(.ios,.android) #home-page.m-patients #new-patient .icon{width:20px;height:20px;margin:0}
:root:is(.ios,.android) #home-page.m-patients #patient-search:placeholder-shown{padding-right:12px}
:root:is(.ios,.android) #home-page.m-patients #new-patient .action-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:root:is(.ios,.android) #home-page.m-patients #patient-search::placeholder{font-size:var(--m-secondary)}
:root:is(.ios,.android) #home-page.m-patients .m-chip{height:var(--tap,44px);padding:0 15px;font-size:13px}
:root:is(.ios,.android) #home-page.m-patients #patients-table{flex:0 1 auto;min-height:0;margin:12px var(--m-side) 16px;padding:0;border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);box-shadow:var(--shadow);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column}
:root:is(.ios,.android) #home-page.m-patients #patients-table>:is(.table-head,#patients-pagination,#patients-empty,#patients-tools){display:none}
:root:is(.ios,.android) #home-page.m-patients #home-records{flex:none;display:flex;flex-direction:column;gap:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;overflow:visible}
:root:is(.ios,.android) #home-records>:is(.m-prow,.m-swipe)::before{display:none}
/* A patient row: avatar 34 (radius 8, R-1), name, the facts in mono, the chevron (Source 207-222, 312). */
:root:is(.ios,.android) #home-records .m-prow{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:11px;width:100%;min-height:60px;height:auto;padding:11px 13px;border:0;border-bottom:1px solid var(--line2);border-radius:0;background:var(--panel);color:var(--ink);font-weight:400;text-align:left;box-shadow:none}
:root:is(.ios,.android) #home-records .m-prow:hover{background:var(--panel2)}
:root:is(.ios,.android) #home-records>:last-child .m-prow,:root:is(.ios,.android) #home-records>.m-prow:last-child{border-bottom:0}
:root:is(.ios,.android) #home-records .m-prow>.icon{flex:none;width:16px;height:16px;color:var(--ink3)}
.m-row__copy .m-row__meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root:is(.ios,.android) #home-records .m-swipe{position:relative;flex:none;overflow:hidden;border:0;border-radius:0;background:var(--accent)}
:root:is(.ios,.android) #home-records .m-swipe.has-call{background:var(--ink)}
:root:is(.ios,.android) #home-records .m-swipe .ph-swipe-action{display:flex;align-items:center;justify-content:center;gap:5px;width:96px;border:0;border-radius:0;font-size:var(--m-secondary);font-weight:600;text-decoration:none}
:root:is(.ios,.android) #home-records .m-swipe .m-swipe-start{background:var(--accent);color:var(--accent-ink)}
:root:is(.ios,.android) #home-records .m-swipe .m-swipe-start .icon{width:14px;height:14px}
.m-list-note{margin:0;padding:10px 13px;font-size:var(--m-meta);color:var(--ink3)}
/* No match: the picker's line, and the New patient row that keeps what was typed (Source 325-328). */
.m-nomatch{gap:10px}
.m-newrow{display:flex;align-items:center;justify-content:flex-start;gap:11px;width:100%;min-height:var(--tap,44px);height:auto;padding:4px 0;border:0;background:transparent;color:var(--accent-text);font-size:14px;font-weight:600;text-align:left;box-shadow:none}
.m-newrow:hover{background:transparent;text-decoration:underline}
.m-newrow__tile{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px dashed var(--accent-line);border-radius:var(--r-control);color:var(--accent-text)}
.m-newrow__tile .icon{width:16px;height:16px}
:root:is(.ios,.android) #home-records .m-empty .m-btn--primary{width:auto;height:var(--h-large);padding:0 18px;border-radius:var(--m-btn-r)}

/* ---- The patient record (1f) ---- */
:root:is(.ios,.android) #patient-page.m-record:not([hidden]){display:flex;flex-direction:column;padding:0;gap:0;background:var(--bg);overflow:hidden}
.m-ident{flex:none;display:flex;align-items:center;gap:12px;padding:13px var(--m-side);background:var(--panel);border-bottom:1px solid var(--line)}
.m-ident__avatar{flex:none;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:var(--r-card);background:var(--accent-soft);color:var(--accent-text);font-size:16px;font-weight:600}
.m-ident__copy{flex:1;min-width:0}
.m-ident__name{margin:0;font-size:var(--m-section);font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-ident__meta{margin:2px 0 0;font-family:var(--font-mono);font-size:var(--m-meta);color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-ident__lang{margin:2px 0 0;font-size:var(--m-meta);color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-record__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;padding:12px var(--m-side) 16px}
.m-record__body>*{flex:none}
.m-tiles{display:flex;gap:9px}
.m-tile{flex:1;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);box-shadow:var(--shadow)}
.m-tile__kicker{display:flex;align-items:center;gap:5px}
.m-tile__kicker .icon{width:14px;height:14px;color:var(--danger)}
.m-tile__value{margin:6px 0 0;font-size:var(--m-secondary);font-weight:600;line-height:1.4;color:var(--ink);overflow-wrap:anywhere;white-space:pre-line}
.m-tile--allergies .m-tile__value{color:var(--danger)}
.m-tile__value.none,.m-tile--allergies .m-tile__value.none{color:var(--ink3);font-weight:500}
.m-rcard .m-card__head{padding:0 13px}
.m-card__count{font-family:var(--font-mono);font-size:var(--m-meta);color:var(--ink3)}
.m-card__none{margin:0;padding:11px 13px;font-size:var(--m-secondary);color:var(--ink3)}
:root:is(.ios,.android) .m-rcard :is(.m-vrow,.m-docrow){position:relative;display:flex;align-items:center;justify-content:flex-start;gap:11px;width:100%;min-height:56px;height:auto;padding:11px 13px;border:0;border-bottom:1px solid var(--line2);border-radius:0;background:transparent;color:var(--ink);font-weight:400;text-align:left;box-shadow:none}
:root:is(.ios,.android) .m-rcard :is(.m-vrow,.m-docrow):last-child{border-bottom:0}
:root:is(.ios,.android) .m-rcard :is(.m-vrow,.m-docrow):hover{background:var(--panel2)}
:root:is(.ios,.android) .m-rcard :is(.m-vrow,.m-docrow)::before{display:none}
.m-rcard .m-row__copy .m-row__name{font-size:var(--m-secondary)}
.m-vrow__glyph{flex:none;width:17px;height:17px;color:var(--ink3)}
.m-vrow__glyph.is-review{color:var(--warn)}.m-vrow__glyph.is-signed{color:var(--ok)}.m-vrow__glyph:is(.is-live,.is-paused){color:var(--live)}
.m-vrow>.dv-badge{flex:none}
.m-docrow>.icon{flex:none;width:20px;height:20px;color:var(--ink3)}
.m-medrow{display:flex;align-items:center;gap:10px;min-height:var(--tap,44px);padding:8px 13px;border-bottom:1px solid var(--line2);font-size:var(--m-secondary);color:var(--ink)}
.m-medrow:last-child{border-bottom:0}
.m-medrow .icon{flex:none;width:17px;height:17px;color:var(--ink3)}
.m-rcard .m-empty{padding:12px 13px}
.m-startbar{flex:none;padding:10px var(--m-side) calc(10px + var(--safe-bottom));background:var(--panel);border-top:1px solid var(--line)}
:root:is(.ios,.android) .m-startbar .m-start{height:var(--h-large);min-height:0;font-size:var(--m-body)}
:root:is(.ios,.android) .m-startbar .m-start .icon{width:17px;height:17px}
/* The record's ⋮ on iPhone too: the app bar's one icon action there (no mic on the record, V-1). */
:root.ios .workspace-header.m-appbar #phone-more:not([hidden]){display:inline-flex;align-items:center;justify-content:center;width:var(--tap,44px);height:var(--tap,44px);margin-right:-6px;color:var(--accent-text)}
:root.android .workspace-header.m-appbar #phone-more:not([hidden]){width:var(--tap,44px);height:var(--tap,44px);margin-right:-6px;color:var(--accent-text)}

/* ---- New patient / Edit details: a bottom sheet (O-8: radius 14, 36×4 handle, max 88dvh) ---- */
dialog.m-psheet{margin:auto 0 0;width:100%;max-width:none;max-height:88dvh;padding:0 0 var(--safe-bottom);border:0;border-radius:var(--m-sheet-r,var(--r-panel)) var(--m-sheet-r,var(--r-panel)) 0 0;background:var(--panel);color:var(--ink);box-shadow:var(--shadow-card);display:flex;flex-direction:column;overflow:hidden}
dialog.m-psheet:not([open]){display:none}
dialog.m-psheet[open]{animation:m-sheet-in 240ms cubic-bezier(.2,.7,.2,1)}
dialog.m-psheet::backdrop{background:var(--backdrop)}
.m-psheet .m-sheet__handle{flex:none;align-self:center;width:36px;height:4px;border-radius:var(--r-pill);background:var(--line);margin:8px 0 4px}
.m-psheet__form{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;margin:0}
.m-psheet__head{flex:none;display:flex;align-items:center;gap:10px;padding:2px var(--m-side) 10px;border-bottom:1px solid var(--line)}
.m-psheet__title{flex:1;min-width:0;margin:0;font-size:var(--m-section);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.m-psheet .m-psheet__close{flex:none;display:flex;align-items:center;justify-content:center;width:var(--tap,44px);height:var(--tap,44px);min-height:0;padding:0;border:1px solid var(--line);border-radius:var(--r-control);background:var(--panel2);color:var(--ink2)}
.m-psheet__close .icon{width:18px;height:18px}
.m-psheet__body{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:14px;padding:14px var(--m-side)}
.m-pfield{display:flex;flex-direction:column;gap:6px;margin:0;font-size:13px;font-weight:550;color:var(--ink2)}
.m-pfield__label{font-size:13px;font-weight:550;color:var(--ink2)}
.m-pfield__hint{font-size:var(--m-meta);font-weight:400;color:var(--ink3)}
.m-pfield__hint.bad{color:var(--danger)}
:root:is(.ios,.android) .m-psheet .m-field{height:max(46px,var(--tap,44px));min-height:0;margin:0;box-shadow:none;font-weight:400}
:root:is(.ios,.android) .m-psheet .m-field:focus{outline:none;border:1.5px solid var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}
:root:is(.ios,.android) .m-psheet .m-area{height:auto;min-height:64px;padding:10px 14px;border-radius:var(--r-control);resize:none;line-height:1.45}
.m-mono{font-family:var(--font-mono)}
.m-seg{display:flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:var(--m-field-r);background:var(--panel2)}
:root:is(.ios,.android) .m-seg__item{flex:1;height:var(--tap,44px);min-height:0;padding:0;border:0;border-radius:var(--m-btn-r);background:transparent;color:var(--ink2);font-size:var(--m-secondary);font-weight:500;box-shadow:none}
:root:is(.ios,.android) .m-seg__item[aria-checked=true]{background:var(--panel);color:var(--accent-text);font-weight:600;box-shadow:var(--shadow-chip)}
.m-phone{display:flex;align-items:center;gap:8px}
.m-phone__prefix{flex:none;display:flex;align-items:center;height:max(46px,var(--tap,44px));padding:0 12px;border:1px solid var(--line);border-radius:var(--m-field-r);background:var(--panel2);font-family:var(--font-mono);font-size:15px;color:var(--ink2)}
.m-phone__prefix[hidden]{display:none}
.m-phone .m-field{flex:1;min-width:0}
.m-psheet__foot{margin:0;font-size:var(--m-meta);line-height:1.5;color:var(--ink3)}
.m-psheet__error{flex:none;margin:0;padding:0 var(--m-side);font-size:var(--m-secondary);color:var(--danger)}
.m-psheet__error:empty{display:none}
.m-psheet__actions{flex:none;display:flex;flex-direction:column;gap:8px;padding:10px var(--m-side) 12px;border-top:1px solid var(--line);background:var(--panel)}
:root:is(.ios,.android) .m-psheet__actions .m-btn{height:var(--h-large);min-height:0;border-radius:var(--m-btn-r)}
:root:is(.ios,.android) .m-psheet__actions .m-btn .icon{width:17px;height:17px}
/* The languages editor in the sheet: the same fields, captions above them. */
.lang-phone{display:flex;flex-direction:column;gap:14px}
.lang-phone>.lang-field{display:flex;flex-direction:column;gap:6px;margin:0}
.lang-phone>.lang-field[hidden]{display:none}
.lang-phone .lang-caption{font-size:13px;font-weight:550;color:var(--ink2)}
.lang-phone .lang-combo,.lang-phone .lang-others{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0}
:root:is(.ios,.android) .lang-phone input{width:100%;height:max(46px,var(--tap,44px));min-height:0;margin:0;padding:0 14px;border:1px solid var(--line);border-radius:var(--m-field-r);background:var(--panel2);box-shadow:none;font-size:16px;color:var(--ink)}
:root:is(.ios,.android) .lang-phone input:focus{outline:none;border:1.5px solid var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}
.lang-phone .lang-options{max-height:240px}
.lang-phone .lang-option{min-height:var(--tap,44px);align-items:center;font-size:15px}
.lang-phone .lang-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.lang-phone .lang-chips[hidden]{display:none}
:root:is(.ios,.android) .lang-phone .lang-chip-remove{width:var(--tap,44px);height:var(--tap,44px);min-height:0}
.lang-phone .lang-note{margin:0;font-size:var(--m-meta);color:var(--warn)}
.lang-phone .lang-note:empty{display:none}
}
@media(prefers-reduced-motion:reduce){dialog.m-psheet[open]{animation:none}}

/* ==== Settings on phones (1g; DESIGN_GUIDE §13): the shared app bar (‹ back, "Settings", the mic), no tab bar; a profile card and
   grouped cards of rows (TB-8: 13.5/550 label over a 12.5 --ink2 value line, 18px --ink3 icon, the sprite's 16px chevron), the
   destructive row in --danger. Account, Privacy and every drill-in (.m-drill) use the same cards and rows. ==== */
@media(max-width:760px){
html:root:is(.ios,.android) #local-settings:is(.m-settings,.m-drill){display:flex;flex-direction:column;gap:12px;padding:12px var(--m-side) 16px;background:var(--bg)}
/* The root is one screenful at iPhone size with the pager’s room reserved (ios-browse.js pagedBlocks measures with it): 10px rhythm. */
html:root:is(.ios,.android) #local-settings.m-settings{gap:10px;padding:10px var(--m-side) 12px}
html:root:is(.ios,.android) .workspace:has(>#local-settings:is(.m-settings,.m-drill):not([hidden])){background:var(--bg)}
.m-set-profile,.m-set-row{display:flex;align-items:center;justify-content:flex-start;gap:11px;width:100%;margin:0;border:0;color:var(--ink);font-weight:400;text-align:left;text-decoration:none}
.m-set-profile{flex:none;min-height:0;height:auto;padding:12px 13px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);box-shadow:var(--shadow)}
.m-set-avatar{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:var(--r-control);background:var(--accent);color:var(--accent-ink);font-size:16px;font-weight:600}
.m-set-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.m-set-copy strong{font-size:var(--m-secondary);font-weight:550;line-height:1.35;color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-set-profile .m-set-copy strong{font-weight:600}
.m-set-copy small{font-size:12.5px;line-height:1.4;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-set-copy small:empty{display:none}
.m-set-group,:root:is(.ios,.android) #local-settings:is(.m-settings,.m-drill) :is(.ad-group,.ios-group){display:flex;flex-direction:column;gap:7px;flex:none;margin:0;padding:0}
.m-set-head,:root:is(.ios,.android) #local-settings:is(.m-settings,.m-drill) :is(.ad-group-title,.ios-group-title){margin:0;padding:0;font-size:10px;font-weight:650;line-height:1.3;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink3)}
.m-set-card,:root:is(.ios,.android) #local-settings:is(.m-settings,.m-drill) :is(.ad-group-card,.ios-card){display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
.m-set-row{position:relative;min-height:52px;height:auto;padding:8px 13px;border-bottom:1px solid var(--line2);border-radius:0;background:transparent}
.m-set-row:last-child{border-bottom:0}
@media(hover:hover){:is(.m-set-row,.m-set-profile):hover{background:var(--panel2)}}
.m-set-icon{width:18px;height:18px;flex:none;color:var(--ink3)}
.m-set-chev,.ios-set-chev,:root:is(.ios,.android) #local-settings .ad-chevron{width:16px;height:16px;flex:none;color:var(--ink3);fill:none}
.m-set-row.m-set-danger,.m-set-row.m-set-danger .m-set-icon{color:var(--danger)}
/* Account, Privacy and the phone rows of Recording & notes: the platform rows take the same row spec. */
html:root:is(.ios,.android) #local-settings:is(.m-settings,.m-drill) :is(.ad-item,.ios-item){gap:11px;min-height:52px;height:auto;padding:9px 13px;border:0;border-bottom:1px solid var(--line2);border-radius:0;background:transparent;font-size:var(--m-secondary)}
html:root:is(.ios,.android) #local-settings:is(.m-settings,.m-drill) :is(.ad-item,.ios-item):last-child{border-bottom:0}
html:root:is(.ios,.android) #local-settings:is(.m-settings,.m-drill) .ios-card>:is(.ios-item,.ios-row)+:is(.ios-item,.ios-row)::before{display:none}
html:root:is(.ios,.android) #local-settings:is(.m-settings,.m-drill) :is(.ad-item-copy,.ios-item-copy) strong{font-size:var(--m-secondary);font-weight:550;line-height:1.35;color:var(--ink)}
html:root:is(.ios,.android) #local-settings:is(.m-settings,.m-drill) :is(.ad-item-copy,.ios-item-copy) small{font-size:12.5px;line-height:1.4;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html:root:is(.ios,.android) #local-settings:is(.m-settings,.m-drill) :is(.ad-item,.ios-item).danger :is(strong,.icon){color:var(--danger)}
html:root:is(.ios,.android) #local-settings:is(.m-settings,.m-drill) :is(.ad-item,.ios-item).tint strong{color:var(--accent-text)}
html:root:is(.ios,.android) #local-settings:is(.m-settings,.m-drill) .ios-value{font-size:12.5px;color:var(--ink2)}
html:root:is(.ios,.android) #local-settings:is(.m-settings,.m-drill) .ad-item-icon{width:18px;height:18px;flex:none;color:var(--ink3)}
html:root:is(.ios,.android) #local-settings.m-settings .ad-storage-total{font-size:var(--m-meta);font-family:var(--font-mono);color:var(--ink2)}
html:root:is(.ios,.android) #local-settings.m-settings :is(.ad-storage-head,.ios-storage-head) strong{font-size:var(--m-secondary);font-weight:550;color:var(--ink)}
html:root:is(.ios,.android) #local-settings.m-settings :is(.ad-storage,.ios-storage){padding:11px 13px}
html:root:is(.ios,.android) #local-settings.m-settings .ios-footnote{padding:0;font-size:var(--m-meta);color:var(--ink3)}
html:root:is(.ios,.android) #local-settings.m-settings :is(.ad-profile,.ios-profile){flex:none;gap:11px;min-height:0;margin:0;padding:12px 13px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);box-shadow:var(--shadow)}
html:root:is(.ios,.android) #local-settings.m-settings :is(.ad-profile,.ios-profile) :is(.ad-avatar,.ios-avatar){flex:0 0 40px;width:40px;min-width:40px;max-width:40px;height:40px;border-radius:var(--r-control);background:var(--accent);color:var(--accent-ink);font-size:16px;font-weight:600}
html:root:is(.ios,.android) #local-settings.m-settings :is(.ad-profile,.ios-profile) strong{font-size:var(--m-secondary);font-weight:600;color:var(--ink)}
html:root:is(.ios,.android) #local-settings.m-settings :is(.ad-profile span,.ios-profile small){font-size:12.5px;color:var(--ink2)}
html:root:is(.ios,.android) #local-settings.m-settings :is(.ios-stack){gap:10px}
html:root:is(.ios,.android) #local-settings.m-settings .ios-stack>.ios-group:last-of-type{margin-bottom:0}
/* Drill-ins (Recording & notes, Calendar, Help): the app bar names the page, so the web back link, heading, tab strip and section
   heading go; cards, fields and buttons follow the mobile layer. The default template is a row of "On this phone" (a sheet). */
html:root:is(.ios,.android) #local-settings.m-drill>:is(.back-link,.page-heading,.settings-tabs){display:none}
html:root:is(.ios,.android) #local-settings.m-drill .settings-section-heading{display:none}
html:root:is(.ios,.android) #local-settings.m-drill .settings-content{display:flex;flex-direction:column;gap:12px;padding:0}
html:root:is(.ios,.android) #local-settings.m-drill .settings-card{padding:14px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);box-shadow:var(--shadow)}
html:root:is(.ios,.android) #local-settings.m-drill .settings-card>h2{font-size:var(--m-section);font-weight:600;letter-spacing:-.01em}
html:root:is(.ios,.android) #local-settings.m-drill :is(select,input:not([type=checkbox]):not([type=radio]):not([type=file])){height:max(46px,var(--tap,44px));min-height:max(46px,var(--tap,44px));border:1px solid var(--line);border-radius:var(--m-field-r);background:var(--panel2);font-size:16px;color:var(--ink)}
html:root:is(.ios,.android) #local-settings.m-drill :is(.settings-card button,.toolbar button):not(.switch){min-height:var(--tap,44px);border-radius:var(--m-btn-r)}
html:root:is(.ios,.android) #local-settings.m-drill .retention-row:has(#default-template){display:none}
html:root:is(.ios,.android) #local-settings.m-drill .retention-label small{font-size:12.5px;color:var(--ink2)}
/* A sheet’s current choice (the default template, the transcript retention): tinted, with the choice in --accent-text. */
:root:is(.ios,.android) .ph-sheet .ph-items>[aria-current=true]{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
}
@media(max-width:760px){html:root:is(.ios,.android) #portal-settings.phone-app{padding:0;background:var(--bg);overflow:hidden}}
@media(max-width:760px){html:root.ios #local-settings.m-drill{overflow:hidden}html:root.ios #local-settings.m-drill>.settings-content{flex:1 1 auto;min-height:0}}
@media(max-width:760px){html:root.ios #local-settings.m-drill .pager{padding-top:8px;border-top:1px solid var(--line)}html:root.ios #local-settings.m-drill .pager button{min-height:44px;min-width:44px;padding:0 14px;border-radius:var(--m-btn-r)}}
@media(max-width:760px){:root:is(.ios,.android) .workspace-header.m-appbar #phone-back{position:relative}:root:is(.ios,.android) .workspace-header.m-appbar #phone-back::after{content:'';position:absolute;inset:calc((44px - var(--tap,44px))/2) 0}}
/* Check your mic before the microphone is live: no dead meter and no gap, one line saying what to do (phone fit, 24 Sept 2026). */
:root:is(.ios,.android) dialog.m-auth .m-auth__card.is-idle>:is(.m-kicker,.av-level,.iv-level){display:none}