/* Android browse screens (android.js): the Android wireframes' Home, Patients, Schedule, patient record, New patient, Settings, Account and Privacy & storage. Material 3 structure in DocVoc colours (tokens.css only, so dark mode follows), phones only (≤760px) with html.android. iOS and the wide layouts never see any of it. Owner, 16 Sept 2026: nothing scrolls. Each screen is a paged pane (paging.js) whose Android chrome is pinned — the filter chips, the Next up card, the search pill, the date strip, a patient's bar, header and tabs, the bottom actions — while the rows turn under a Material pager bar, with "21–40 of 63 · page 2 of 4" under it. The sheets and the New patient dialog page their own bodies the same way. */ #ad-fab,#ad-select-bar,#ad-today,.ad-search-avatar{display:none} .ad-icon{width:24px;height:24px;fill:currentColor;flex-shrink:0} @media(max-width:760px){ :root.android{--ad-tonal:var(--accent-surface);--ad-on-tonal:var(--accent-strong);--ad-surface:color-mix(in srgb,var(--accent) 5%,var(--app-bg));--ad-field:color-mix(in srgb,var(--accent) 7%,var(--app-bg));--ad-outline:color-mix(in srgb,var(--ink) 22%,transparent)} :root.android[data-theme=dark]{--ad-surface:color-mix(in srgb,var(--accent) 9%,var(--app-bg));--ad-field:color-mix(in srgb,var(--accent) 12%,var(--app-bg));--ad-outline:color-mix(in srgb,var(--ink) 28%,transparent)} /* ---- Shared parts: icon buttons, filled and outlined buttons, chips, 64px rows, the Material switch ---- */ :root.android .ad-icon-button{display:inline-grid;place-items:center;width:48px;height:48px;min-height:48px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;flex-shrink:0;text-decoration:none} :root.android .ad-icon-button:hover{background:color-mix(in srgb,currentColor 8%,transparent)} :root.android .ad-filled{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:0;border-radius:24px;background:var(--accent);color:var(--on-accent);font-size:15px;font-weight:600;text-decoration:none} :root.android .ad-filled:hover{background:var(--accent-hover)} :root.android .ad-outlined{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border:1px solid var(--ad-outline);border-radius:24px;background:transparent;color:var(--ink);font-size:15px;font-weight:500;text-decoration:none} :root.android .ad-outlined:hover{background:var(--accent-tint)} :root.android .ad-outlined.danger{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)} :root.android .ad-outlined:disabled{opacity:.5} :root.android .ad-chips,:root.android #home-page .filter-chips{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex-shrink:0;padding-block:8px;margin-block:-8px} :root.android .ad-chip{position:relative;flex:0 0 auto;height:32px;min-height:32px;padding:0 16px;border:1px solid var(--ad-outline);border-radius:8px;background:transparent;color:var(--secondary);font-size:14px;font-weight:500;box-shadow:none} :root.android .ad-chip::after{content:'';position:absolute;inset:-9px -4px} :root.android .ad-chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600} :root.android #home-page .filter-chips .ad-chip{min-height:32px} :root.android #home-page .ad-chip.on{background:var(--ad-tonal);border-color:var(--ad-tonal);color:var(--ad-on-tonal)} :root.android .ad-list{display:flex;flex-direction:column;margin:0 -16px;flex-shrink:0} :root.android .ad-row{min-height:64px;padding:8px 16px;gap:16px;background:transparent;border-radius:0;transition:background var(--motion-fast) var(--ease)} :root.android .ad-row:hover{background:var(--row-highlight)} :root.android .ad-row::before{display:none} :root.android .ad-avatar{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent-strong);font-size:14px;font-weight:600;letter-spacing:.02em} :root.android .ad-avatar.ad-large{width:56px;height:56px;flex-basis:56px;background:var(--accent);color:var(--on-accent);font-size:20px} :root.android .ad-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} :root.android .ad-copy strong{font-size:16px;font-weight:500;line-height:1.4;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :root.android .ad-copy small{font-size:14px;line-height:1.4;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :root.android .ad-trail{flex-shrink:0;font-size:12px;color:var(--hint);font-variant-numeric:tabular-nums} :root.android .ad-list .empty-state,:root.android .ad-panel .empty-state{margin:40px auto 0;padding:24px;gap:10px} :root.android .ad-list .empty-state h2,:root.android .ad-panel .empty-state h2{font-size:20px;font-weight:600} :root.android .ad-list .empty-state p,:root.android .ad-panel .empty-state p{font-size:15px;line-height:1.5;max-width:300px} :root.android .ad-list .empty-state button{min-height:48px;margin-top:10px;padding:0 24px;border:0;border-radius:24px;background:var(--ad-tonal);color:var(--ad-on-tonal);font-size:14px;font-weight:600} /* The count line used to be dropped on these screens (the wireframes have none). It is the paging readout now — "21–40 of 63 patients · page 2 of 4" under the pager bar (owner, 16 Sept 2026) — so it stays, and only an empty one is hidden. */ :root.android .ph-end:empty{display:none} /* The Material switch: an outlined track with a small thumb when off, a filled track with a large thumb when on. */ :root.android .ad-switch{position:relative;flex:0 0 52px;width:52px;height:32px;border-radius:16px;border:2px solid var(--hint);background:var(--ad-field);box-sizing:border-box;transition:background var(--motion-fast) var(--ease),border-color var(--motion-fast) var(--ease)} :root.android .ad-switch::after{content:'';position:absolute;top:50%;left:6px;width:16px;height:16px;border-radius:50%;background:var(--hint);transform:translateY(-50%);transition:left var(--motion-fast) var(--ease),width var(--motion-fast) var(--ease),height var(--motion-fast) var(--ease)} :root.android [aria-checked=true]>.ad-switch{background:var(--accent);border-color:var(--accent)} :root.android [aria-checked=true]>.ad-switch::after{left:22px;width:24px;height:24px;background:var(--on-accent)} /* ---- Top app bars: the tab screens take the shared app bar (phone.css .m-appbar); the other screens draw their own ---- */ :root.android .workspace-header.ad-hidden{display:none} :root.android .workspace-header[data-ad-view=schedule] #ad-today{display:inline-grid;place-items:center;width:48px;height:48px;color:var(--ink)} :root.android .ad-bar{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:0;min-height:calc(64px + var(--safe-top));padding:var(--safe-top) 4px 0;margin:0;background:var(--ad-tonal);color:var(--ink);flex-shrink:0} :root.android .ad-bar h1{flex:1;min-width:0;margin:0 0 0 4px;font-size:22px;font-weight:600;line-height:1.3;letter-spacing:0;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :root.android .ad-bar.ad-plain{background:var(--app-bg)} :root.android .ad-bar .ad-bar-text{min-height:48px;padding:0 20px;margin-right:4px} /* Sub-screens (a patient, Settings, Account, Privacy & storage) leave the bottom navigation out, as the wireframes do. */ :root.android.ad-subscreen{--tabbar:var(--safe-bottom)} :root.android.ad-subscreen #phone-tabs{display:none} /* ---- The extended FAB above the bottom nav on Patients: New patient (no Record button competes with the Genie mic) ---- */ :root.android #ad-fab:not([hidden]){display:inline-flex;position:fixed;right:16px;bottom:calc(var(--tabbar) + 16px);z-index:11;align-items:center;gap:12px;height:56px;min-height:56px;padding:0 20px 0 16px;border:0;border-radius:16px;background:var(--accent);color:var(--on-accent);font-size:16px;font-weight:600;box-shadow:0 4px 10px color-mix(in srgb,#000 22%,transparent),0 1px 3px color-mix(in srgb,#000 16%,transparent);transition:padding var(--motion-fast) var(--ease),transform var(--motion-fast) var(--ease)} :root.android #ad-fab:hover{background:var(--accent-hover)} :root.android #ad-fab:active{transform:scale(.97)} :root.android #ad-fab.small{padding:0 16px;gap:0} :root.android #ad-fab.small .ad-fab-label{display:none} :root.android body.recording #ad-fab,:root.android.ad-selecting #ad-fab{display:none} /* ---- 05 Patients: the search pill with the avatar inside, sort chips, the list, the contextual app bar ---- */ :root.android #home-page{padding:0 16px calc(96px + 16px);gap:12px} :root.android #home-page .page-heading{position:sticky;top:0;z-index:5;margin:0 -16px;padding:calc(var(--safe-top) + 12px) 16px 4px;background:var(--app-bg)} :root.android.ad-selecting #home-page .page-heading{padding-top:calc(var(--safe-top) + 64px + 12px)} :root.android #home-page .search-field{height:56px;border-radius:28px;background:var(--ad-field)} :root.android #home-page #patient-search{height:56px;border:0;border-radius:28px;padding:0 100px 0 56px;background:transparent;font-size:16px;color:var(--ink);box-shadow:none} :root.android #home-page .search-field>.search-icon{left:18px;width:24px;height:24px;color:var(--muted)} :root.android #home-page .search-clear:not([hidden]){right:52px} :root.android .ad-search-avatar{display:grid;place-items:center;position:absolute;right:8px;width:40px;height:40px;min-height:0;padding:0;border:0;border-radius:50%;background:var(--accent-surface);color:var(--accent-strong);font-size:14px;font-weight:600} :root.android .ad-search-avatar::after{content:'';position:absolute;inset:-4px} :root.android #home-page .patient-filters{gap:0} :root.android #home-page .date-filter,:root.android #home-page #clear-filters{display:none!important} :root.android #home-records{background:transparent;border:0;border-radius:0;gap:0;margin:0 -16px;overflow:visible} :root.android #home-records .ad-row{border:0} :root.android .ad-row.selected{background:var(--ad-tonal)} :root.android .ad-row.selected .ad-avatar{background:var(--accent);color:var(--on-accent)} :root.android .ad-row.selected .ad-avatar .ad-icon{width:22px;height:22px} :root.android #ad-select-bar:not([hidden]){display:flex;position:fixed;top:0;left:0;right:0;z-index:12;align-items:center;gap:0;height:calc(64px + var(--safe-top));padding:var(--safe-top) 4px 0;background:var(--accent);color:var(--on-accent);animation:ad-in var(--motion-fast) var(--ease)} :root.android #ad-select-bar h2{flex:1;min-width:0;margin:0 0 0 8px;font-size:22px;font-weight:600;color:inherit;letter-spacing:0} @keyframes ad-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} /* ---- 09 Schedule: the date strip and the time gutter ---- */ :root.android #schedule-page{padding:0 16px calc(96px + 16px);gap:4px} :root.android .ad-strip{display:grid;grid-template-columns:repeat(7,1fr);margin:0 -8px;padding:0 0 8px;touch-action:pan-y;flex-shrink:0} :root.android .ad-day{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:72px;padding:4px 0;border:0;border-radius:12px;background:transparent;color:var(--muted);font-size:13px;font-weight:500} :root.android .ad-day:hover{background:transparent} :root.android .ad-day strong{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-size:17px;font-weight:600;color:var(--ink);transition:background var(--motion-fast) var(--ease)} :root.android .ad-day.busy strong{text-decoration:underline 2px color-mix(in srgb,var(--accent) 45%,transparent);text-underline-offset:6px} :root.android .ad-day.today:not(.on) strong{color:var(--accent-text);box-shadow:inset 0 0 0 1px var(--accent)} :root.android .ad-day.on strong{background:var(--accent);color:var(--on-accent);text-decoration:none} :root.android .ad-slot{align-items:flex-start;gap:0;padding:12px 16px} /* The time gutter keeps a time on one line: "09:45" or "09:45 AM" (the locale's clock), all rows the same width in the mono face. */ :root.android .ad-time{flex:0 0 auto;min-width:60px;padding:2px 12px 0 0;font-family:var(--font-mono);font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap} :root.android .ad-dot{flex:0 0 10px;width:10px;height:10px;margin:8px 18px 0 0;border-radius:50%;background:var(--disabled)} :root.android .ad-dot.signed{background:var(--hint)} :root.android .ad-dot.review{background:var(--review-dot)} :root.android .ad-dot.recording{background:var(--recording-dot)} :root.android .ad-dot.now{background:var(--accent)} :root.android .ad-dot.past{background:var(--input-border)} :root.android .ad-slot.now{background:var(--ad-tonal)} :root.android .ad-slot.now strong{font-weight:700} /* ---- 10 and 22 The patient record: the tonal header, the bar, the tabs, About (the panel under them pages) ---- */ :root.android #patient-page.ad-record{padding:0 0 32px;gap:0} /* Nothing scrolls (owner, 16 Sept 2026), so there is no scroll for the title to fade in on: the patient's name is in the bar from the first page, over the tonal header it repeats. */ :root.android .ad-record .ad-bar h1{opacity:1} :root.android .ad-record.ad-about .ad-bar{background:var(--app-bg)} :root.android .ad-record.ad-about .ad-head{display:none} :root.android .ad-head{display:flex;flex-direction:column;gap:20px;padding:4px 16px 22px;background:var(--ad-tonal);flex-shrink:0} :root.android .ad-who{display:flex;align-items:center;gap:20px;min-width:0} :root.android .ad-who>div{min-width:0} :root.android .ad-head h2{margin:0;font-size:28px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere} :root.android .ad-head p{margin:4px 0 0;font-size:15px;line-height:1.4;color:var(--secondary)} :root.android .ad-actions{display:flex;flex-wrap:wrap;gap:10px} :root.android .ad-head .ad-outlined{border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--ad-on-tonal)} :root.android .ad-tabs{position:sticky;top:calc(64px + var(--safe-top));z-index:5;display:grid;grid-template-columns:repeat(3,1fr);background:var(--app-bg);border-bottom:1px solid var(--border);flex-shrink:0} :root.android .ad-tab{height:48px;min-height:48px;padding:0 8px;border:0;border-radius:0;background:transparent;color:var(--muted);font-size:16px;font-weight:500;position:relative} :root.android .ad-tab:hover{background:var(--row-highlight)} :root.android .ad-tab[aria-selected=true]{color:var(--accent-text);font-weight:600} :root.android .ad-tab[aria-selected=true]::after{content:'';position:absolute;left:8px;right:8px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--accent)} :root.android .ad-panel{display:flex;flex-direction:column;padding:0 16px} :root.android .ad-panel .ad-list{margin:0 -16px} :root.android .ad-visit{min-height:72px;padding:12px 16px} :root.android .ad-status{flex-shrink:0;padding:5px 12px;border-radius:8px;font-size:13px;font-weight:600;background:var(--recording-bg);color:var(--recording-text)} :root.android .ad-status.review{background:var(--review-bg);color:var(--review-text)} :root.android .ad-status.signed{background:var(--signed-bg);color:var(--signed-text)} :root.android .ad-panel .ad-doc{margin:0 -16px} :root.android .ad-allergy{display:flex;align-items:center;gap:12px;margin:20px 0 0;padding:14px 18px;border:1px solid var(--danger-border);border-radius:20px;background:var(--danger-bg);color:var(--danger);font-size:16px;line-height:1.4} :root.android .ad-allergy::before{content:'';flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:var(--danger-fill)} :root.android .ad-about-list{display:flex;flex-direction:column;gap:22px;margin:0;padding:22px 0 96px} :root.android .ad-fact dt{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--hint)} :root.android .ad-fact dd{margin:6px 0 0;font-size:17px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere} :root.android .ad-fact dd.none{color:var(--hint)} :root.android .ad-bottom{position:fixed;left:0;right:0;bottom:0;z-index:9;display:flex;gap:12px;padding:12px 16px calc(12px + var(--safe-bottom));background:var(--app-bg)} :root.android .ad-bottom .ad-filled{flex:1;height:56px;border-radius:28px;font-size:17px} :root.android .ad-bottom .ad-round{flex:0 0 auto;min-width:72px;height:56px;border-radius:28px} /* ---- 14 New patient: a full-screen dialog with X / SAVE, a step indicator and filled fields ---- */ :root.android dialog.ad-full{margin:0;width:100%;max-width:none;height:100dvh;max-height:none;padding:0;border:0;border-radius:0;background:var(--app-bg);color:var(--ink);box-shadow:none} :root.android dialog.ad-full[open]{display:flex;animation:ad-rise var(--motion-base) var(--ease)} :root.android dialog.ad-full::backdrop{background:transparent} :root.android .ad-full form{display:flex;flex-direction:column;width:100%;height:100%;padding:var(--safe-top) 0 calc(16px + var(--safe-bottom))} :root.android .ad-dialog-bar{display:flex;align-items:center;gap:4px;min-height:64px;padding:0 4px} :root.android .ad-dialog-bar h2{flex:1;margin:0 0 0 8px;font-size:22px;font-weight:600;letter-spacing:0} :root.android .ad-text-button{min-height:48px;padding:0 16px;border:0;border-radius:24px;background:transparent;color:var(--accent-text);font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} :root.android .ad-progress{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 16px 0} :root.android .ad-progress i{height:4px;border-radius:2px;background:var(--input-border);transition:background var(--motion-base) var(--ease)} :root.android .ad-progress i.on{background:var(--accent)} :root.android .ad-step-label{margin:14px 16px 0;font-size:14px;color:var(--muted)} :root.android .ad-full .ad-fields{flex:1;min-height:0;display:flex;flex-direction:column;gap:18px;padding:16px 16px 8px} :root.android .ad-full .ad-fields[hidden]{display:none} :root.android .ad-field{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:14px;color:var(--muted)} :root.android .ad-field:focus-within{color:var(--accent-text)} :root.android .ad-field input,:root.android .ad-field select{width:100%;height:56px;padding:0 16px;border:0;border-bottom:1px solid var(--hint);border-radius:4px 4px 0 0;background:var(--ad-field);color:var(--ink);font-size:16px;box-shadow:none} :root.android .ad-field input:focus,:root.android .ad-field select:focus{outline:0;border-bottom:2px solid var(--accent);padding-bottom:0} :root.android .ad-pair{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:12px} :root.android .ad-help{margin:0;font-size:14px;line-height:1.5;color:var(--muted)} :root.android .ad-error{margin:0 16px;font-size:14px;color:var(--danger)} :root.android .ad-error:empty{display:none} :root.android .ad-full footer{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 16px 0} :root.android .ad-full footer button{height:56px;border-radius:28px;font-size:16px} @keyframes ad-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} /* ---- 08, 17, 18 Settings lists ---- */ :root.android #local-settings.ad-settings{padding:0 0 20px;gap:0} :root.android .ad-large-title{margin:0 20px 6px;font-size:32px;font-weight:600;letter-spacing:-.02em;color:var(--ink)} :root.android .ad-group{display:flex;flex-direction:column;padding:0 0 4px} :root.android .ad-group-title{margin:12px 20px 2px;font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--accent-text)} :root.android .ad-item{display:flex;align-items:center;gap:16px;width:100%;min-height:64px;padding:10px 20px;border:0;border-radius:0;background:transparent;color:var(--ink);text-align:left;font-weight:400;text-decoration:none;justify-content:flex-start} :root.android button.ad-item:hover,:root.android a.ad-item:hover{background:var(--row-highlight)} :root.android .ad-item-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} :root.android .ad-item-copy strong{font-size:17px;font-weight:400;line-height:1.35;color:var(--ink)} :root.android .ad-item-copy small{font-size:14px;line-height:1.4;color:var(--muted)} :root.android .ad-item.danger strong{color:var(--danger)} :root.android button.ad-item:disabled{opacity:.45} :root.android button.ad-item:disabled:hover{background:transparent} /* The app version and the one footnote that is not worth a row of its own. */ :root.android .ad-foot{display:flex;flex-direction:column;gap:2px;padding:14px 20px 0;color:var(--muted)} :root.android .ad-foot strong{font-size:14px;font-weight:600;color:var(--muted)} :root.android .ad-foot small{font-size:14px} :root.android .ad-foot span{margin-top:6px;font-size:13px;line-height:1.5;color:var(--hint)} :root.android .ad-chevron{color:var(--hint)} :root.android .ad-profile{display:flex;align-items:center;gap:20px;padding:12px 20px 8px} :root.android .ad-profile .ad-avatar{background:var(--accent-surface);color:var(--accent-strong)} :root.android .ad-profile>div{display:flex;flex-direction:column;gap:2px;min-width:0} :root.android .ad-profile strong{font-size:20px;font-weight:600;color:var(--ink)} :root.android .ad-profile span{font-size:15px;color:var(--muted);overflow-wrap:anywhere} :root.android .ad-seats{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:8px 20px;padding:16px 20px;min-height:0;border:0;border-radius:16px;background:var(--ad-tonal);color:var(--ad-on-tonal);text-align:left;font-weight:400} :root.android .ad-seats strong{font-size:17px;font-weight:600;color:var(--ink)} :root.android .ad-seats span{font-size:15px} /* 17 The cloud-hours meter: the number a clinician opens Account for, above the drill-down rows. */ :root.android .ad-hours{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:8px 20px;padding:16px 20px;min-height:0;border:0;border-radius:16px;background:var(--ad-tonal);color:var(--ink);text-align:left;font-weight:400} :root.android .ad-hours .ad-storage-head strong{font-weight:600} :root.android .ad-hours .ad-meter{height:8px;border-radius:4px;background:color-mix(in srgb,var(--ink) 12%,transparent)} :root.android .ad-hours .ad-meter .used{width:0;background:var(--accent)} :root.android .ad-hours.full .ad-meter .used{background:var(--review-dot)} :root.android .ad-hours.unknown .ad-meter{display:none} :root.android .ad-hours-foot{margin:0;font-size:14px;line-height:1.4;color:var(--secondary)} :root.android .ad-storage{display:flex;flex-direction:column;gap:10px;padding:8px 20px 4px} :root.android .ad-storage-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px} :root.android .ad-storage-head strong{font-size:17px;font-weight:400;color:var(--ink)} :root.android .ad-storage-total{font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums} :root.android .ad-meter{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--ad-field)} :root.android .ad-meter i{display:block;height:100%;min-width:0;transition:width var(--motion-slow) var(--ease)} :root.android .ad-meter .kept{background:var(--accent)} :root.android .ad-meter .pending{background:color-mix(in srgb,var(--accent) 45%,var(--ad-field))} :root.android .ad-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--muted)} :root.android .ad-legend span{display:inline-flex;align-items:center;gap:8px} :root.android .ad-legend span::before{content:'';width:10px;height:10px;border-radius:2px;background:var(--accent)} :root.android .ad-legend .pending::before{background:color-mix(in srgb,var(--accent) 45%,var(--ad-field))} :root.android .ad-queue{display:flex;align-items:center;gap:12px;margin:12px 20px 4px;padding:10px 8px 10px 18px;border-radius:16px;background:var(--review-bg);color:var(--review-text)} :root.android .ad-queue::before{content:'';flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:var(--review-dot)} :root.android .ad-queue-copy{flex:1;font-size:15px;line-height:1.4} :root.android .ad-queue-send{min-height:48px;padding:0 14px;border:0;border-radius:24px;background:transparent;color:var(--review-text);font-size:15px;font-weight:700} :root.android .ad-note{margin:10px 20px 0;font-size:14px;line-height:1.5;color:var(--muted)} /* Genie voice pins its strip over the top (android-visit.css): these screens move down beneath it instead of being covered. */ :root.android body.genie-strip :is(#dashboard-page,#schedule-page){padding-top:max(12px,calc(var(--genie-strip,64px) - 64px - var(--safe-top) + 12px))} :root.android body.genie-strip :is(#patient-page,#local-settings){padding-top:calc(var(--genie-strip,64px) + 12px)} :root.android body.genie-strip #home-page .page-heading{padding-top:calc(var(--genie-strip,64px) + 12px)} /* Sheets opened by these screens (plan details, battery guidance). */ :root.android .ad-sheet .ad-sheet-copy{margin:0;font-size:15px;line-height:1.5;color:var(--secondary)} :root.android .ad-sheet-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:8px} /* ---- Paging (owner, 16 Sept 2026): nothing scrolls; what cannot fit is paged (paging.js) ---- The screen is the paged pane and its Android chrome is pinned, so the chips, the search pill, the date strip, a patient's bar, header and tabs and the count line stay put while the rows turn. The pager bar sits between them, the count line ("Showing 21–40 of 63") under it. Flex order puts them back in that order whatever order pinning left them in. */ :root.android .screen.pg-pane>.pg-viewport{order:1} :root.android .screen.pg-pane>.pager{order:2} :root.android .screen.pg-pane>.ph-end{order:3} :root.android #home-page #patients-table{min-height:0} :root.android .ph-end{flex:0 0 auto;margin:0;padding:6px 0 2px;font-size:12.5px;line-height:1.3;color:var(--hint);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :root.android .ph-end:empty{display:none} /* Material pager bar: Previous · the page count · Next, 48dp targets inside the 16dp gutter. The count sits between them so the bar fits every width from 320 up (the owner’s phone is 363 wide) without clipping a word (phone fit, 24 Sept 2026). */ :root.android .pager{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin:0;padding:6px 16px 4px;border-top:1px solid var(--border);background:var(--app-bg)} :root.android :is(#dashboard-page,#home-page,#schedule-page)>.pager{margin-inline:-16px} :root.android .pager button{order:1;flex:0 0 auto;min-height:48px;min-width:48px;padding:0 16px;white-space:nowrap;border:1px solid var(--ad-outline);border-radius:24px;background:transparent;color:var(--accent-text);font-size:14px;font-weight:600} :root.android .pager button:disabled{opacity:.4} :root.android .pager-count{order:2;flex:1 1 auto;min-width:0;margin:0;text-align:center;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--secondary);white-space:nowrap} :root.android .pager .pager-next{order:3} /* On a list the count line under the bar already says "Showing 21–40 of 63 · page 2 of 4": the bar's own copy would repeat it. */ :root.android .screen.pg-pane:has(>.ph-end.ad-range)>.pager>.pager-count{display:none} /* A paged screen no longer needs the old run-off under the floating action button: the bar and the count line end the screen. */ :root.android :is(#dashboard-page,#home-page,#schedule-page).pg-paged{padding-bottom:6px} /* The extended FAB floats over the bottom right: on a paged screen it rises above the pager bar and the count line, so both stay readable and the FAB keeps its label (New patient, Record 10:30). */ :root.android.ad-paged #ad-fab:not([hidden]){bottom:calc(var(--tabbar) + 84px)} :root.android #patient-page.ad-record{padding-inline:0} :root.android #patient-page.pg-paged>.pager{margin-inline:0;padding-inline:16px} /* 22 About pages inside the panel, above the fixed Start visit bar. */ :root.android #patient-page.ad-about{padding-bottom:calc(80px + var(--safe-bottom))} :root.android .ad-about-list{padding-bottom:0} /* Sign-in and the other signed-out screens: one screenful; the entry column scrolls itself when a state is taller (entry.css). */ :root.android .entry{height:100dvh;overflow:hidden} /* Sheets (menus are sheets too, O-8) page as well: nothing in them scrolls either. Flex order keeps the grabber and title above the paged body and the buttons that finish the job below it. */ :root.android dialog.ph-sheet{overflow:hidden} /* #ad-sheet keeps its classes between openings (phone.js's own sheet clears them), and dialog.ph-sheet's display:flex beats the browser's display:none for a closed dialog: without this the closed sheet still lays itself out below the fold. */ :root.android dialog.ph-sheet:not([open]){display:none} :root.android .ph-choices{max-height:none;overflow:visible} :root.android dialog.pg-pane>.ph-grabber{order:0} :root.android dialog.pg-pane>:is(h2,.ph-account-head){order:1} :root.android dialog.pg-pane>.pg-viewport{order:2} :root.android dialog.pg-pane>.pager{order:3} :root.android dialog.pg-pane>:is(.ad-sheet-actions,.ph-sheet-secondary,#phone-template-rewrite,.ph-done,.ph-discard){order:4} :root.android dialog.pg-pane>.pager{margin:0;padding:4px 0 0;border-top:1px solid var(--border);background:transparent} } @media(prefers-reduced-motion:reduce){ :root.android #ad-fab,:root.android .ad-switch,:root.android .ad-switch::after,:root.android .ad-meter i,:root.android .ad-record .ad-bar h1{transition:none} :root.android #ad-select-bar,:root.android dialog.ad-full[open]{animation:none} } /* ---- 14 Languages in New patient / Edit details (clinical.js languageEditor): filled fields, an in-flow menu, M3 input chips ---- */ :root.android .lang-android{display:flex;flex-direction:column;gap:18px} :root.android .lang-android>.lang-field{margin-top:16px}:root.android .lang-android .ad-field>span{margin:0;font-size:14px;font-weight:400;color:inherit} :root.android .lang-android .lang-combo,:root.android .lang-android .lang-others{display:flex;flex-direction:column;gap:8px;min-width:0} :root.android .lang-android .lang-options{list-style:none;margin:0;padding:8px 0;max-height:280px;overflow:hidden;border-radius:4px;background:var(--ad-surface);box-shadow:0 2px 6px color-mix(in srgb,#000 18%,transparent),0 1px 2px color-mix(in srgb,#000 12%,transparent)} :root.android .lang-android .lang-options[hidden]{display:none} :root.android .lang-android .lang-option{display:flex;align-items:center;flex-wrap:wrap;gap:2px 10px;min-height:48px;padding:6px 16px;color:var(--ink);font-size:16px;cursor:pointer} :root.android .lang-android .lang-option.active,:root.android .lang-android .lang-option:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)} :root.android .lang-android .lang-option[aria-selected=true]{color:var(--accent-text);font-weight:600} :root.android .lang-android .lang-native{color:var(--muted)}:root.android .lang-android .lang-flag{margin-left:auto;font-size:12px;color:var(--review-text)} :root.android .lang-android .lang-chips{display:flex;flex-wrap:wrap;gap:16px 8px;list-style:none;margin:0;padding:0}:root.android .lang-android .lang-chips[hidden]{display:none} :root.android .lang-android .lang-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;max-width:100%;padding:0 0 0 12px;border:1px solid var(--ad-outline);border-radius:8px;color:var(--ink);font-size:14px;font-weight:500} :root.android .lang-android .lang-chip .lang-native{font-weight:400} :root.android .lang-android .lang-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;min-height:0;margin:-8px -4px -8px -10px;padding:0;border:0;border-radius:24px;background:transparent;color:var(--muted);font-size:18px;line-height:1} :root.android .lang-android .lang-note{margin:-6px 0 0;font-size:14px;line-height:1.5;color:var(--review-text)}:root.android .lang-android .lang-note:empty{display:none} :root.android .lang-android .lang-field[hidden]{display:none} :root.android .av-pick .av-patient-copy strong{font-size:16px;font-weight:inherit} /* ==== Material 3 platform feel (owner, 24 Sept 2026: “Android and iPhone are a little different visually”) ==== scratchpad/tools/platform-feel-spec.md, Android section: this sits above DESIGN_GUIDELINES P-4 / C-23 for how the phone draws things, never for what it shows. DocVoc’s tokens (colours, dark mode), words, icon meanings, screens, their content and order, the one microphone and the owner rules stay; the M3 shapes, type scale, surfaces, state layers and motion come in here. The shared layer first (.m-appbar .m-tabbar/.m-tab .m-btn .m-field .m-card .m-row .m-chip .m-search .m-sheet .m-dock, the ph-/av-/pn- pieces) so every Android screen inherits it; html.android phones only — iOS, desktop and the wide web never match. */ @media(max-width:760px){ :root.android{ --md-ease:cubic-bezier(.2,0,0,1);--md-dur:300ms; --md-outline:color-mix(in srgb,var(--ink) 30%,transparent); --md-state:color-mix(in srgb,var(--ink) 10%,transparent); --md-elev1:0 1px 2px color-mix(in srgb,var(--ink) 16%,transparent),0 1px 3px 1px color-mix(in srgb,var(--ink) 7%,transparent); --md-inverse:var(--ink);--md-on-inverse:var(--panel);--md-inverse-primary:color-mix(in srgb,var(--accent) 45%,var(--panel)); --font-sans:Roboto,"Google Sans Text","Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --m-title:22px;--m-title-w:400;--m-tab-h:80px;--m-tab-fs:12px;--m-tab-icon:24px;--m-sheet-r:28px;--m-side:16px; } :root.android body{font-family:var(--font-sans)} /* ---- Top app bar: small, 64dp, flat --panel, title 22/400 left-aligned; tints (--accent-soft mix) once content scrolls under it ---- */ :root.android .workspace-header.m-appbar,:root.android .m-appbar{min-height:calc(64px + var(--safe-top));padding:calc(var(--safe-top) + 8px) 4px 8px 16px;gap:8px;border-bottom:0;background:var(--panel);transition:background-color var(--md-dur) var(--md-ease)} :root.android .workspace-header.m-appbar.m-scrolled{background:color-mix(in srgb,var(--accent-soft) 60%,var(--panel))} :root.android .workspace-header.m-appbar #phone-title,:root.android .m-appbar__title{font-size:22px;font-weight:400;letter-spacing:0;line-height:1.27} :root.android .workspace-header.m-appbar #phone-kicker,:root.android .m-appbar__kicker{font-size:12px;font-weight:500;letter-spacing:.5px;line-height:1.33;color:var(--ink2)} /* The account avatar: an M3 circular avatar. The Genie mic and the other bar actions: 48dp icon buttons with 24 glyphs. */ :root.android .workspace-header.m-appbar #account-mobile.m-lead{width:40px;height:40px;margin:0 4px 0 -4px;border-radius:50%;font-size:14px;font-weight:500} :root.android .workspace-header.m-appbar #phone-mic:not([hidden]),:root.android .m-mic{width:48px;height:48px;margin-right:0} :root.android .workspace-header.m-appbar #phone-mic .icon,:root.android .m-mic svg{width:24px;height:24px} :root.android .workspace-header.m-appbar #phone-more:not([hidden]){width:48px;height:48px;border-radius:50%} /* Back on a detail screen: the arrow_back navigation icon at the left (the destination’s name stays beside it, P-2). */ :root.android .workspace-header.m-appbar #phone-back,:root.android .m-back{min-height:48px;height:48px;margin-left:-12px;padding:0 12px;border-radius:var(--r-pill);font-size:14px;font-weight:500;gap:8px} :root.android .workspace-header.m-appbar #phone-back .icon,:root.android .m-back svg{width:24px;height:24px} :root.android .ad-bar h1,:root.android #ad-select-bar h2,:root.android .ad-dialog-bar h2{font-weight:400} /* ---- Navigation bar: 80dp, a 64×32 active indicator pill behind the 24 icon, a 12/500 label under every icon ---- */ :root.android #phone-tabs{padding:12px 0 calc(16px + var(--safe-bottom));gap:8px;border-top:0;background:color-mix(in srgb,var(--accent-soft) 35%,var(--panel))} :root.android #phone-tabs .m-tab{min-height:52px;gap:4px;padding:0;color:var(--ink2);font-size:12px;font-weight:500;line-height:1.33;letter-spacing:.5px} :root.android #phone-tabs .m-tab .m-tab__icon{width:64px;height:32px;padding:0;border-radius:16px;background:transparent;transition:background-color var(--md-dur) var(--md-ease)} :root.android #phone-tabs .m-tab .icon{width:24px;height:24px} :root.android #phone-tabs .m-tab[aria-current=page]{color:var(--ink);font-weight:600} :root.android #phone-tabs .m-tab[aria-current=page] .m-tab__icon{padding:0;background:var(--accent-soft);color:var(--accent-text)} :root.android #phone-tabs .m-tab:active .m-tab__icon{background-image:linear-gradient(var(--md-state),var(--md-state))} /* ---- Cards (where the prototype has cards): M3 elevated cards, radius 12, no outline ---- */ :root.android :is(.m-today,.m-review) .m-card,:root.android .m-card,:root.android .ph-card{border:0;border-radius:12px;background:var(--panel);box-shadow:var(--md-elev1)} :root.android .m-card__head{min-height:56px;padding:0 8px 0 16px;border-bottom:0} :root.android .m-card__title{font-size:16px;font-weight:500;letter-spacing:.15px} :root.android .m-kicker{font-size:12px;font-weight:500;letter-spacing:.5px;color:var(--ink2)} :root.android .m-today .m-next,:root.android .m-today .m-stat{padding:16px} :root.android .m-next__title{font-size:22px;font-weight:400;letter-spacing:0} :root.android .m-next__line{font-size:14px;color:var(--ink2)} :root.android .m-link{height:40px;min-height:40px;padding:0 12px;border-radius:var(--r-pill);font-size:14px;font-weight:500;letter-spacing:.1px;position:relative} :root.android .m-link::after{content:'';position:absolute;inset:-4px 0} :root.android .m-link:hover{text-decoration:none} /* ---- Lists: full-bleed M3 list items — 56 one-line / 72 two- and three-line, 16 padding, a 40 circular avatar, no row dividers ---- */ :root.android .m-row--visit,:root.android .m-row{min-height:72px;gap:16px;padding:8px 16px 8px 16px;border-bottom:0} :root.android .m-avatar,:root.android .pn-avatar,:root.android .ph-avatar{width:40px;height:40px;flex:0 0 40px;border-radius:50%;font-size:14px;font-weight:500} :root.android .m-row__copy .m-row__name{font-size:16px;font-weight:500;letter-spacing:.15px;line-height:1.5} :root.android .m-row__line{font-size:14px;line-height:1.43;color:var(--ink2)} :root.android .m-row--visit>.icon{width:24px;height:24px} :root.android .m-today .m-waiting .m-row--visit{min-height:72px} /* Review’s queue is a list, not a card: rows run edge to edge on the surface. */ :root.android #review-page.m-review:not([hidden]),:root.android .m-filters{background:var(--panel)} :root.android .m-review .m-review-list.m-card{margin:0;border-radius:0;box-shadow:none;background:transparent;padding:4px 0 8px} :root.android .m-review .m-review-list .m-row--visit+.m-row--visit{border-top:0} /* ---- Filters: M3 filter chips — 32 tall, radius 8, an outline; selected = --accent-soft with a leading check ---- */ :root.android .m-chips{gap:16px 8px} :root.android .m-chip,:root.android .ad-chip{position:relative;display:inline-flex;align-items:center;gap:8px;height:32px;min-height:32px;min-width:0;padding:0 16px;border:1px solid var(--md-outline);border-radius:8px;background:transparent;color:var(--ink2);font-size:14px;font-weight:500;letter-spacing:.1px} :root.android .m-chip::after{content:'';position:absolute;inset:-9px -5px} :root.android :is(.m-chip[aria-pressed=true],.ad-chip.on,#home-page .ad-chip.on){padding-left:8px;border-color:transparent;background:var(--accent-soft);color:var(--accent-text);font-weight:500} :root.android :is(.m-chip[aria-pressed=true],.ad-chip.on)::before{content:'';flex:none;width:10px;height:5px;margin:-3px 3px 0 3px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)} :root.android .m-filters{gap:12px;padding:8px 16px 12px;border-bottom:0} /* ---- Search: the M3 search bar — 56 tall, a full pill, --panel2 fill, the search icon leading ---- */ :root.android .m-search .icon{left:16px;top:calc(50% - 12px);width:24px;height:24px;color:var(--ink2)} :root.android .m-search input{height:56px;padding:0 20px 0 56px;border:0;border-radius:var(--r-pill);background:var(--panel2)} :root.android .m-search input:focus{border:0;box-shadow:inset 0 0 0 2px var(--accent)} :root.android #home-page .search-field,:root.android #home-page #patient-search{background:var(--panel2)} /* ---- Buttons: filled pill (Label Large 14/500), tonal (--accent-soft), outlined, text ---- */ :root.android .m-btn{height:48px;border:0;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-text);font-size:14px;font-weight:500;letter-spacing:.1px} :root.android .m-btn--primary{background:var(--accent);color:var(--accent-ink);box-shadow:none} :root.android .m-btn--danger{background:transparent;border:1px solid var(--md-outline);color:var(--danger)} :root.android :is(.ad-filled,.ad-outlined,.ad-text-button){font-size:14px;font-weight:500;letter-spacing:.1px;text-transform:none} :root.android .ad-outlined{border-color:var(--md-outline)} :root.android .m-empty__action{border-radius:var(--r-pill);height:40px} /* The state layer (M3’s ripple stand-in): a 10% --ink wash over whatever surface is pressed. */ :root.android :is(.m-row--visit,.m-chip,.m-link,.m-btn,.m-next,.m-stat,.ad-item,.ad-row,.ad-chip,.ad-filled,.ad-outlined,.ad-icon-button,.pn-tab,.pn-doc-main,.pn-pick,.ph-sheet .ph-items>*,#phone-mic,#phone-back,#account-mobile):active{background-image:linear-gradient(var(--md-state),var(--md-state))} /* ---- Text fields: M3 outlined fields — 56 tall, radius 4, an outline that thickens to 2 --accent on focus ---- */ :root.android .m-field,:root.android .entry2 .e-fields :is(input[type="text"],input[type="email"],input[type="password"],input[type="tel"]){height:56px;min-height:56px;border:1px solid var(--md-outline);border-radius:4px;background:transparent;padding:0 16px} :root.android .entry2 .e-fields .e-inputwrap input{padding-right:52px} :root.android .m-field:focus,:root.android .entry2 .e-fields input:focus{outline:0;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} :root.android .entry2 .e-fields input.invalid{border-color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)} :root.android .entry2 .e-show{height:56px} :root.android .entry2 .e-otp-boxes span{height:56px;border-width:1px;border-color:var(--md-outline);border-radius:4px;background:transparent} :root.android .entry2 .e-otp-boxes span.is-current{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:transparent} :root.android .entry2 .e-fields #otp-code{height:56px;min-height:56px} :root.android .m-otp input{height:56px;border-radius:4px;border-color:var(--md-outline);background:transparent} /* Sign in and the other auth states: Headline Small 24/400 title, filled pill Sign in, outlined pill for the other way in. */ :root.android .entry2 #entry-title{font-size:24px;font-weight:400;letter-spacing:0;line-height:1.33} :root.android .entry2 #entry-description{font-size:14px;line-height:1.43} :root.android .entry2 #unlock{height:48px;min-height:48px;border-radius:var(--r-pill);font-size:14px;font-weight:500;letter-spacing:.1px;box-shadow:none} :root.android .entry2 :is(#signin-otp,.e-secondary,#desktop-unlock){border:1px solid var(--md-outline);border-radius:var(--r-pill);background:transparent;color:var(--accent-text);font-size:14px;font-weight:500;letter-spacing:.1px} :root.android .entry2 .e-ways button{border:1px solid var(--md-outline);border-radius:var(--r-pill);background:transparent;color:var(--accent-text);font-size:14px;font-weight:500} :root.android .entry2 :is(#signup-switch,#forgot-password,#otp-resend){border-radius:var(--r-pill);font-size:14px;font-weight:500} :root.android .entry2 .e-stay input{width:18px;height:18px;margin:3px;border-radius:2px;accent-color:var(--accent)} :root.android .entry2 .e-panelnote{border:0;border-radius:12px} @media (hover:none){:root.android .entry2 .e-secondary:hover,:root.android .entry2 #signin-otp:hover{background:transparent}} /* ---- Bottom sheets and dialogs: sheets radius 28 with a 32×4 drag handle on a scrim; dialogs radius 28, text buttons right ---- */ :root.android dialog.ph-sheet,:root.android .m-sheet{border-radius:28px 28px 0 0;box-shadow:var(--md-elev1);padding-left:16px;padding-right:16px} :root.android dialog.ph-sheet[open],:root.android .m-sheet{animation:m-sheet-in var(--md-dur) var(--md-ease)} :root.android :is(.ph-grabber,.genie-grabber,.m-sheet__handle){width:32px;height:4px;border-radius:2px;margin:16px auto 8px;background:color-mix(in srgb,var(--ink2) 40%,transparent)} :root.android .ph-dialog h2{font-size:22px;font-weight:400;letter-spacing:0} :root.android .ph-sheet .ph-items>:is(button,a){min-height:56px;padding:0 16px;border-radius:0;margin:0 -16px;font-size:16px;font-weight:400;letter-spacing:.5px} :root.android .ph-sheet .ph-items .icon{width:24px;height:24px;color:var(--ink2)} :root.android .ph-sheet .ph-items>:is(button,a):hover{background:transparent} :root.android dialog.ph-dialog:not(.ph-sheet){border:0;border-radius:28px;padding:24px;box-shadow:var(--md-elev1)} :root.android dialog.ph-dialog:not(.ph-sheet) :is(.dialog-actions,.ph-sheet-foot){justify-content:flex-end} :root.android .pn-sheet .pn-sheet-foot>button{height:40px;min-height:40px;border-radius:var(--r-pill);font-size:14px;font-weight:500} :root.android .pn-sheet .pn-sheet-foot>.ph-sheet-secondary{border:1px solid var(--md-outline);background:transparent;color:var(--accent-text)} :root.android .pn-search{height:56px;border:0;border-radius:var(--r-pill);background:var(--panel2);box-shadow:none} :root.android .pn-search:focus-within{box-shadow:inset 0 0 0 2px var(--accent)} /* ---- Snackbar for a result with an action (Note signed · Undo): inverse surface, radius 4, the action as a text button ---- */ :root.android :is(#sign-snackbar,#unsign-snackbar){min-height:48px;padding:4px 8px 4px 16px;border:0;border-radius:4px;background:var(--md-inverse);color:var(--md-on-inverse);box-shadow:var(--md-elev1)} :root.android :is(#sign-snackbar,#unsign-snackbar) .snackbar-text{font-size:14px;font-weight:400;color:var(--md-on-inverse)} :root.android :is(#sign-snackbar,#unsign-snackbar) .snackbar-action{border-radius:var(--r-pill);background:transparent;color:var(--md-inverse-primary);font-size:14px;font-weight:500} /* ---- Switches: the M3 switch, 52×32, a check in the on thumb ---- */ :root.android [aria-checked=true]>.ad-switch::before{content:'';position:absolute;z-index:1;left:29px;top:50%;width:9px;height:4px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateY(-70%) rotate(-45deg)} /* ---- Genie dock: an M3 bottom sheet; Done is a text button, the ask field a pill ---- */ :root.android #assistant{border-top:0;border-radius:28px 28px 0 0;box-shadow:var(--md-elev1);animation:m-sheet-in var(--md-dur) var(--md-ease)} :root.android #assistant-close{border:0;border-radius:var(--r-pill);background:transparent;color:var(--accent-text);font-size:14px;font-weight:500} :root.android #assistant-input{border-radius:var(--r-pill)} /* ---- The note: M3 primary tabs (14/500, a 3dp indicator), a filled pill Sign and an outlined Export ---- */ :root.android body.pn-note.pn-note #encounter-page .pn-strip .pn-tab{padding:10px 12px;font-size:14px;font-weight:500;letter-spacing:.1px;border-bottom-width:3px} :root.android body.pn-note.pn-note #encounter-page .pn-strip .pn-tab[aria-selected=true]{font-weight:500} :root.android body.pn-note.pn-note #encounter-page .pn-status{padding:8px 16px;border-bottom:0} :root.android body.pn-note.pn-note #note-preview{padding:16px} :root.android body.pn-note.pn-note #note-preview .section-head h2{font-size:14px;font-weight:500;letter-spacing:.1px;text-transform:none;color:var(--accent-text)} :root.android body.pn-note.pn-note #note-preview section>p{font-size:16px;line-height:1.5;letter-spacing:.5px} :root.android body.pn-note.pn-note #encounter-page .document-footer{padding:12px 16px calc(12px + var(--m-home));border-top:0;background:color-mix(in srgb,var(--accent-soft) 35%,var(--panel))} :root.android body.pn-note.pn-note #encounter-page #review:not([hidden]){height:48px;min-height:48px;padding:0 24px;border-radius:var(--r-pill);font-size:14px;font-weight:500;letter-spacing:.1px;box-shadow:none} :root.android body.pn-note.pn-note #encounter-page.ph-signed #export{height:48px;min-height:48px;padding:0 24px;border:1px solid var(--md-outline);border-radius:var(--r-pill);background:transparent;color:var(--accent-text);font-size:14px;font-weight:500} :root.android body.pn-note.pn-note #encounter-page .pn-confirm:not([hidden]){margin:0 16px 12px;border:0;border-radius:12px} :root.android .pn-accept{height:40px;min-height:40px;border-radius:var(--r-pill);font-size:14px;font-weight:500} :root.android .pn-dashed{border-radius:var(--r-pill);font-size:14px;font-weight:500} :root.android body.pn-note.pn-note #addendum-pane #addendum-text{border:1px solid var(--md-outline);border-radius:4px} :root.android body.pn-note.pn-note #addendum-pane #addendum-text:focus{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} :root.android body.pn-note.pn-note #addendum-pane .addendum-actions>button{height:48px;min-height:48px;border-radius:var(--r-pill);font-size:14px;font-weight:500} :root.android .pn-kicker{font-size:14px;font-weight:500;letter-spacing:.1px;text-transform:none;color:var(--accent-text)} /* ---- Recording: the M3 layout — top app bar, the big mono timer, the level meter, then full-width pill buttons on the thumb line: a tonal Pause and the filled Stop side by side, Marker as the outlined pill above them. The label is the button’s own name (its aria-label, so Pause ↔ Resume follows), next to the icon; the caption under the old round buttons goes. ---- */ :root.android .av-transport{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch;padding:0 16px} :root.android .av-transport>.av-ctl{display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:0} :root.android .av-transport>.av-ctl:nth-child(3){grid-column:1/-1;order:-1} :root.android .av-transport .av-ctl-label{display:none} :root.android .av-round,:root.android .av-round.av-stop{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:56px;margin:0;padding:0 24px;border:0;border-radius:var(--r-pill);box-shadow:none;font-size:14px;font-weight:500;letter-spacing:.1px} :root.android .av-round::after{content:attr(aria-label)} :root.android .av-round .av-icon,:root.android .av-round.av-stop .av-icon{width:24px;height:24px} :root.android .av-transport>.av-ctl:nth-child(1) .av-round{background:color-mix(in srgb,var(--recorder-text) 16%,transparent);color:var(--recorder-text)} :root.android .av-transport>.av-ctl:nth-child(3) .av-round{height:48px;border:1px solid color-mix(in srgb,var(--recorder-text) 40%,transparent);background:transparent;color:var(--recorder-text)} :root.android .av-round.av-stop{background:var(--recording-red);color:var(--on-recording-red)} :root.android .av-round[aria-pressed=true]{background:var(--accent);color:var(--on-accent)} :root.android .av-rec-bar{min-height:64px} :root.android .av-rec-name strong{font-size:22px;font-weight:400} :root.android .av-rec .av-chip{border-radius:8px;height:32px;display:inline-flex;align-items:center;padding:0 12px;font-size:14px;font-weight:500} /* ---- Settings and the patient record: M3 headline type, list items 16/400 with 14 supporting text ---- */ :root.android .ad-large-title{font-size:28px;font-weight:400;letter-spacing:0} :root.android .ad-item-copy strong{font-size:16px;letter-spacing:.5px} :root.android .ad-group-title{font-size:14px;font-weight:500;letter-spacing:.1px} :root.android .ad-head h2{font-weight:400;letter-spacing:0} :root.android .ad-tab{font-size:14px;font-weight:500;letter-spacing:.1px} :root.android .ad-tab[aria-selected=true]{font-weight:500} :root.android .ad-status{border-radius:8px;font-size:12px;font-weight:500} :root.android .m-empty__title{font-size:16px;font-weight:500} :root.android .m-empty__line{font-size:14px;color:var(--ink2)} /* ---- Motion: emphasized easing; tabs change with a fade-through, detail screens and sheets rise ---- */ :root.android .screen:not([hidden]){animation:md-fade-through var(--md-dur) var(--md-ease)} @keyframes md-fade-through{from{opacity:0}to{opacity:1}} } @media(max-width:760px) and (prefers-reduced-motion:reduce){:root.android .screen:not([hidden]),:root.android dialog.ph-sheet[open],:root.android #assistant{animation:none}:root.android #phone-tabs .m-tab .m-tab__icon,:root.android .workspace-header.m-appbar{transition:none}} /* ---- Dropdowns drawn by the app (m3-select.js; owner, 24 Sept 2026: the WebView’s own picker dialog is not DocVoc’s look) ---- The