/* DocVoc on Android — the September 2026 design (the Phone page of the design canvas, "Android — …" boards).
   Loaded last, so it restyles the shared phone build without touching iOS or the web. Only :root.android rules; colours only
   through tokens.css. The shapes: a quiet app bar on the page colour with the kicker over a 28px serif title, cards with a 16px
   radius and no shadow, 52px pill buttons, 64 × 32 tab indicators, serif figures, mono times. */

:root.android{--tabbar:calc(80px + var(--safe-bottom));--ad-title:28px;--ad-card-r:16px;--ad-row:64px;--ad-tab-h:80px}

/* ---- App bar: page colour, no rule under it; kicker (12/600 caps) over the serif title ---- */
html:root.android .workspace-header.m-appbar{background:var(--bg);border-bottom:0;box-shadow:none;align-items:center}
html:root.android .workspace-header.m-appbar.m-scrolled{background:var(--bg);box-shadow:0 1px 0 var(--line2)}
html:root.android .workspace-header.m-appbar #phone-title{font-family:var(--font-serif);font-size:var(--ad-title);font-weight:400;letter-spacing:-.01em;line-height:1.15;color:var(--ink)}
html:root.android .workspace-header.m-appbar #phone-kicker{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
html:root.android .m-appbar .phone-heading{gap:2px}
html:root.android .m-appbar .m-back{color:var(--ink)}
html:root.android .m-appbar .m-mic{color:var(--ink)}
html:root.android #account-mobile.m-lead{background:var(--accent-soft);color:var(--accent-text);font-weight:600}

/* ---- Bottom navigation: Today · Patients · Review · Settings (Schedule opens from Today) ---- */
html:root.android #phone-tabs [data-phone=schedule]{display:none}
html:root.android #phone-tabs{height:var(--tabbar);background:var(--panel2);border-top:1px solid var(--line2);padding:12px 0 calc(var(--m-home) + 8px);align-items:flex-start}
html:root.android #phone-tabs .m-tab{gap:4px;color:var(--muted);font-size:12px;font-weight:500;padding:0}
html:root.android #phone-tabs .m-tab__icon{position:relative;display:flex;align-items:center;justify-content:center;width:64px;height:32px;padding:0;border-radius:16px}
html:root.android #phone-tabs .m-tab[aria-current="page"]{color:var(--ink);font-weight:600}
html:root.android #phone-tabs .m-tab[aria-current="page"] .m-tab__icon{padding:0;background:var(--accent-soft);color:var(--accent-text)}
html:root.android #phone-tabs .m-tab__badge{position:absolute;top:-3px;left:38px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;background:var(--danger-fill);color:var(--on-fill);font-size:11px;font-weight:600;line-height:18px;text-align:center}
html:root.android #phone-tabs .m-tab__badge[hidden]{display:none}

/* ---- Cards, rows and avatars ---- */
html:root.android :is(.m-card,.m-set-card,.ad-group-card){border-radius:var(--ad-card-r);box-shadow:none;border-color:var(--line)}
html:root.android .m-card__title{font-family:var(--font-serif);font-size:20px;font-weight:400;letter-spacing:0}
html:root.android .m-avatar{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
html:root.android .m-kicker{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---- Buttons: 52px navy pills; the quieter ones outlined ---- */
html:root.android .m-btn{height:52px;border-radius:var(--r-pill);font-size:16px;font-weight:600}
html:root.android .m-btn--primary{box-shadow:none}

/* ---- Today: the next patient with its own Start visit, the two counts in serif, the day's queue ---- */
html:root.android #dashboard-page.m-today{gap:12px}
html:root.android .m-today .m-next{display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"kick kick when" "face name name" "face line line" "go go go";column-gap:12px;row-gap:2px;align-items:center;padding:14px 16px 16px;background:var(--accent-soft);border:1px solid var(--accent-line);text-align:left}
html:root.android .m-today .m-next>.m-kicker{grid-area:kick;color:var(--accent-text);margin-bottom:8px}
html:root.android .m-today .m-next__when{grid-area:when;align-self:start;font-family:var(--font-mono);font-size:13px;color:var(--accent-text)}
html:root.android .m-today .m-next>.m-avatar{grid-area:face;width:40px;height:40px;background:var(--panel);align-self:center}
html:root.android .m-today .m-next__title{grid-area:name;font-family:var(--font-serif);font-size:21px;font-weight:400;line-height:1.2;color:var(--ink)}
html:root.android .m-today .m-next__line{grid-area:line;font-size:13px;color:var(--muted)}
html:root.android .m-today .m-next:not(:has(.m-avatar)) :is(.m-next__title,.m-next__line){grid-column:1/-1}
html:root.android .m-today .m-next__go{grid-area:go;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:10px;height:52px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);font-size:16px;font-weight:600}
html:root.android .m-today .m-next__go svg{width:20px;height:20px}
html:root.android .m-today .m-stat{padding:12px 14px;gap:0}
html:root.android .m-today .m-stat__value{order:-1;font-family:var(--font-serif);font-size:30px;font-weight:400;line-height:1.1;letter-spacing:0}
html:root.android .m-today .m-stat .m-kicker{font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}
html:root.android .m-queue .m-card__head{padding:12px 16px 8px}
html:root.android .m-queue__walkin{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:0;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-text);font-size:14px;font-weight:600}
html:root.android .m-queue__walkin svg{width:16px;height:16px}
html:root.android .m-queue .m-card__head{gap:8px}
html:root.android .m-queue .m-card__title{flex:1}
html:root.android .m-queue__week{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:0;border-radius:50%;background:transparent;color:var(--ink)}
html:root.android .m-queue__week svg{width:22px;height:22px}
html:root.android .m-queue .m-srow{min-height:var(--ad-row)}
html:root.android .m-queue .m-srow .dv-badge{margin-left:auto}
html:root.android .m-queue .m-queue__more{align-self:stretch;height:44px;border:0;border-top:1px solid var(--line2);background:transparent;color:var(--accent-text);font-size:14px;font-weight:600}

/* ---- Lists: search pill, filter chips, 64px rows ---- */
html:root.android .m-search{height:auto;min-height:50px;border-radius:var(--r-pill);background:var(--panel);border:1px solid var(--line)}
html:root.android .m-search input{height:48px}
html:root.android :is(.m-prow,.ph-row.m-row){min-height:var(--ad-row)}
html:root.android .m-row__name{font-size:16px}

/* ---- Schedule: the chosen day filled navy ---- */
html:root.android .m-schedule .m-day.is-selected{background:var(--accent);color:var(--accent-ink);border-radius:14px}
html:root.android .m-schedule .m-dayhead__date{display:none} /* the app bar names the day */
html:root.android .m-schedule .m-dayhead{justify-content:flex-end}
html:root.android .m-srow__time{font-family:var(--font-mono);font-size:13px;color:var(--muted)}

/* ---- The patient record ---- */
html:root.android .m-record .m-ident__name{font-family:var(--font-serif);font-weight:400}

/* ---- Settings: grouped cards under small caps headers ---- */
html:root.android .m-set-group>h2,html:root.android .ad-group-title{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
html:root.android .m-set-row{min-height:56px}

/* ---- Sheets: 28px top corners ---- */
html:root.android :is(dialog.ph-sheet,.m-sheet,dialog.m-psheet){border-top-left-radius:28px;border-top-right-radius:28px}
html:root.android :is(dialog.ph-sheet,dialog.m-psheet) :is(h2,.ph-sheet__title,.m-psheet__title){font-family:var(--font-serif);font-weight:400}

/* ==== The visit (Android — Visit ready, Recording, Paused, Writing the note, Note boards) ==== */
/* Capture screens: the page colour, a quiet bar with the serif title, the patient as a card */
html:root.android :is(#av-setup,#av-rec,#av-progress){background:var(--bg)}
html:root.android :is(#av-setup,#av-rec,#av-progress) .vc-bar{background:var(--bg);border-bottom:0;box-shadow:none}
html:root.android :is(#av-setup,#av-rec,#av-progress) .m-appbar__title{font-family:var(--font-serif);font-size:var(--ad-title);font-weight:400;letter-spacing:-.01em;line-height:1.15}
html:root.android :is(#av-setup,#av-rec,#av-progress) .m-appbar__kicker{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
html:root.android :is(#av-setup,#av-progress) .vc-strip{margin:4px 16px 0;padding:12px 16px;gap:12px;border:1px solid var(--line);border-radius:var(--ad-card-r);background:var(--panel)}
html:root.android :is(#av-setup,#av-rec,#av-progress) .vc-tile{width:40px;height:40px;border-radius:50%;font-size:14px}
html:root.android :is(#av-setup,#av-progress) .vc-name{font-size:16px}

/* Ready: one round Start in the middle of the page; the consent switch and the input line under it */
html:root.android #av-setup .vc-ready-body{justify-content:center;gap:16px}
html:root.android #av-setup .vc-idle{display:none}
html:root.android #av-setup .vc-start{flex-direction:column;justify-content:center;gap:6px;width:136px;height:136px;padding:0 14px;border-radius:50%;font-size:15px;line-height:1.2;white-space:normal;text-align:center;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 28%,transparent)}
html:root.android #av-setup .vc-start svg{width:34px;height:34px}
html:root.android #av-setup .vc-consent{padding:10px 16px;border:1px solid var(--line);border-radius:var(--ad-card-r);background:var(--panel)}
html:root.android #av-setup .vc-input{font-family:var(--font-mono);font-size:13px;color:var(--muted)}
html:root.android #av-setup .vc-helper{max-width:300px;color:var(--muted)}
html:root.android :is(#av-setup,#av-rec,#av-progress) .vc-foot{background:transparent;border-top:0}
html:root.android #av-setup .vc-import{border-color:var(--line);background:var(--panel)}

/* Recording and Paused: the patient centred, the big mono clock, navy level bars, the live transcript as a card,
   and round controls — Pause at the side, Finish large in the middle */
html:root.android #av-rec .vc-strip{position:relative;flex-direction:column;justify-content:center;gap:4px;padding:8px 16px 4px;border:0;background:transparent}
html:root.android #av-rec .vc-strip .vc-tile{display:none}
html:root.android #av-rec .vc-who-button{justify-content:center;text-align:center}
html:root.android #av-rec .vc-who{align-items:center}
html:root.android #av-rec .vc-name{font-family:var(--font-serif);font-size:24px;font-weight:400}
html:root.android #av-rec .vc-strip .vc-badge{position:absolute;top:-52px;right:16px}
html:root.android #av-rec .vc-strip .vc-discard{position:absolute;top:-54px;right:12px}
html:root.android #av-rec .vc-strip .vc-badge.warn{display:none} /* Paused says it in the title; Discard takes the corner */
html:root.android #av-rec .vc-timer{background:var(--bg);border:0;padding:2px 16px 8px}
html:root.android #av-rec .vc-clock{font-size:56px;font-weight:400;letter-spacing:-.03em}
html:root.android #av-rec .vc-meter i{background:var(--accent)}
html:root.android #av-rec.paused .vc-meter i{background:var(--line)}
html:root.android #av-rec .vc-live{margin:0 16px 8px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--ad-card-r);background:var(--panel)}
html:root.android #av-rec .vc-transport{justify-content:center;align-items:center;gap:32px;padding:8px 16px 14px}
html:root.android #av-rec .vc-transport .m-btn{flex:none}
/* Pause stands as tall as Finish (buttons side by side share one line); its round face is drawn inside */
html:root.android #av-rec #av-pause{position:relative;width:64px;height:92px;padding:0;border:0;border-radius:32px;background:transparent;isolation:isolate}
html:root.android #av-rec #av-pause::before{content:'';position:absolute;left:2px;top:calc(50% - 30px);width:60px;height:60px;border-radius:50%;border:1px solid var(--line);background:var(--panel);box-sizing:border-box;z-index:-1}
html:root.android #av-rec #av-pause>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
html:root.android #av-rec #av-pause svg{width:24px;height:24px}
html:root.android #av-rec.paused #av-pause{color:var(--accent-text)}
html:root.android #av-rec.paused #av-pause::before{background:var(--accent-soft);border-color:var(--accent-line)}
html:root.android #av-rec #av-stop{flex-direction:column;gap:2px;width:92px;height:92px;padding:0 10px;border-radius:50%;font-size:13px;line-height:1.2;white-space:normal;text-align:center;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 28%,transparent)}
html:root.android #av-rec #av-stop svg{width:26px;height:26px}

/* Writing the note: the steps as a card, the transcript so far as a card */
html:root.android #av-progress .vc-progress-body{gap:12px;padding:12px 16px}
html:root.android #av-progress .vc-trail{padding:6px 16px;border:1px solid var(--line);border-radius:var(--ad-card-r);background:var(--panel)}
html:root.android #av-progress .vc-progress-transcript{padding:12px 16px;border:1px solid var(--line);border-radius:var(--ad-card-r);background:var(--panel)}
html:root.android #av-progress #av-back-today{border-color:var(--line);background:var(--panel)}

/* The visit's tabs: pills, the chosen one filled (48px tall to the finger, 40 to the eye) */
html:root.android:root body.pn-note.pn-note #encounter-page .pn-strip{gap:4px;padding:0 12px;border-bottom:0;background:var(--bg)}
html:root.android:root body.pn-note.pn-note #encounter-page .pn-strip .pn-tab{flex:1 1 auto;min-width:0;justify-content:center;min-height:48px;height:48px;margin:0;padding:0 10px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink);font-size:14px;font-weight:500;box-shadow:inset 0 0 0 1px var(--line),inset 0 0 0 4px var(--bg);background-clip:content-box;position:relative}
html:root.android:root body.pn-note.pn-note #encounter-page .pn-strip .pn-tab::before{content:'';position:absolute;inset:4px 0;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--panel);z-index:-1}
html:root.android:root body.pn-note.pn-note #encounter-page .pn-strip .pn-tab{box-shadow:none;isolation:isolate}
html:root.android:root body.pn-note.pn-note #encounter-page .pn-strip .pn-tab[aria-selected=true]{color:var(--accent-ink);font-weight:600;border-bottom-color:transparent}
html:root.android:root body.pn-note.pn-note #encounter-page .pn-strip .pn-tab[aria-selected=true]::before{border-color:var(--accent);background:var(--accent)}
html:root.android:root body.pn-note.pn-note #encounter-page .pn-strip .pn-tab .pn-count:not(:empty){margin-left:4px}

/* The note: one card, each section under a small-caps eyebrow */
html:root.android #encounter-page #note-preview{margin:0 12px;padding:4px 16px;border:1px solid var(--line);border-radius:var(--ad-card-r);background:var(--panel)}
html:root.android #encounter-page #note-preview>section{padding:10px 0;border-top:1px solid var(--line2)}
html:root.android #encounter-page #note-preview>section:first-child{border-top:0}
html:root.android #encounter-page #note-preview .section-head h2{margin:0 0 4px;font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
html:root.android #encounter-page #note-preview p{font-size:16px;line-height:1.5;color:var(--ink)}

/* The foot bar: pills — Export and Addendum outlined, Sign and Send Rx filled */
html:root.android #encounter-page .document-footer .toolbar>button{min-height:48px;border-radius:var(--r-pill);font-size:15px;font-weight:600;padding:0 18px}
html:root.android #encounter-page .document-footer .toolbar>button:not(.primary){border:1px solid var(--line);background:var(--panel);color:var(--ink)}
html:root.android #encounter-page .document-footer .toolbar>button.primary{border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);box-shadow:none}
html:root.android #encounter-page .document-footer .toolbar>button[hidden]{display:none}
html:root.android #av-rec .vc-name{line-height:1.25}

/* Send Rx on the phone: a bottom sheet — the prescription as the patient reads it, their WhatsApp number, then
   Send on WhatsApp full width with Print and Cancel under it */
html:root.android dialog#clinical-dialog.rx-dialog{position:fixed;inset:auto 0 0 0;width:100%;max-width:none;max-height:92dvh;margin:0;padding:12px 20px calc(16px + var(--m-home));border:0;border-radius:28px 28px 0 0;background:var(--panel)}
html:root.android dialog#clinical-dialog.rx-dialog>.dialog-close{display:none}
html:root.android #clinical-dialog.rx-dialog #clinical-dialog-title{font-family:var(--font-serif);font-size:26px;font-weight:400}
html:root.android #clinical-dialog.rx-dialog .rx-preview{padding:14px 16px;border:1px solid var(--line);border-radius:var(--ad-card-r);background:var(--bg);font-family:var(--font-sans);font-size:15px;line-height:1.5;white-space:pre-wrap}
html:root.android #clinical-dialog.rx-dialog input[name=phone]{height:52px;border-radius:12px;font-size:16px}
html:root.android #clinical-dialog.rx-dialog .dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
html:root.android #clinical-dialog.rx-dialog .dialog-actions .spacer{display:none}
html:root.android #clinical-dialog.rx-dialog .dialog-actions button{min-height:50px;border-radius:var(--r-pill);font-size:16px;font-weight:600}
html:root.android #clinical-dialog.rx-dialog #clinical-submit{grid-column:1/-1;order:-1;height:52px}
html:root.android #clinical-dialog.rx-dialog .dialog-actions button:not(.primary){border:1px solid var(--line);background:var(--panel);color:var(--ink)}

/* ==== Getting in (Android — Sign in board): the navy brand band on Sign in; serif titles on every step ==== */
html:root.android #entry[data-state=signin] .e-panel{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:0;padding:calc(var(--safe-top) + 20px) 24px 22px;background:var(--brand-panel);color:var(--brand-panel-ink)}
html:root.android #entry[data-state=signin] .e-panel .brand{display:flex;align-items:center;gap:10px;min-height:44px;font-family:var(--font-serif);font-size:22px;font-weight:500;color:var(--brand-panel-ink)}
html:root.android #entry[data-state=signin] .e-panel .e-headline{margin:4px 0 0;max-width:none;font-family:var(--font-serif);font-size:38px;font-weight:400;line-height:1.05;letter-spacing:-.02em;color:var(--brand-panel-ink)}
html:root.android #entry[data-state=signin] .e-panel .e-sub{margin:0;font-size:15px;line-height:1.5;color:var(--brand-panel-sub)}
html:root.android #entry[data-state=signin] .e-panel :is(.e-points,.e-panel-foot){display:none}
html:root.android #entry[data-state=signin] .e-mobile-brand{display:none}
html:root.android #entry #entry-title{font-family:var(--font-serif);font-size:30px;font-weight:400;letter-spacing:-.01em}
html:root.android #entry .e-appbar .m-appbar__title{font-family:var(--font-serif);font-size:22px;font-weight:400}

/* Small phones (320–380 wide, or short): everything a size down so the live transcript and the note keep their room */
@media (max-width:380px),(max-height:700px){
  html:root.android #av-rec .vc-name{font-size:20px}
  html:root.android #av-rec .vc-clock{font-size:42px}
  html:root.android #av-rec .vc-meter{height:20px}
  html:root.android #av-rec .vc-meter i{height:20px}
  html:root.android #av-rec #av-stop{width:76px;height:76px;font-size:12px}
  html:root.android #av-rec #av-stop svg{width:22px;height:22px}
  html:root.android #av-rec #av-pause{height:76px}
  html:root.android #av-rec .vc-transport{gap:24px;padding:6px 16px 10px}
  html:root.android #av-rec #av-rec-status{font-size:13px}
  html:root.android #av-progress .vc-strip{margin-top:0;padding:8px 12px}
  html:root.android #av-progress .vc-strip .vc-tile{display:none}
  html:root.android #av-progress .vc-progress-body{gap:8px;padding:8px 12px}
  html:root.android #av-progress .vc-trail{padding:2px 12px}
  html:root.android #av-progress .vc-info{display:none}
  html:root.android:root body.pn-note.pn-note #encounter-page .pn-strip .pn-tab{padding:0 6px;font-size:13px}
  html:root.android #entry #entry-title{font-size:26px}
  html:root.android #entry[data-state=signin] .e-panel .e-headline{font-size:30px}
  html:root.android #entry[data-state=signin] .e-panel{padding-bottom:16px}
  html:root.android :is(.m-set-group>h2,.ad-group-title){letter-spacing:.04em}
}
@media (max-width:340px){
  html:root.android:root body.pn-note.pn-note #encounter-page .pn-strip .pn-tab{flex:1 1 0;padding:0 2px;font-size:12.5px}
  html:root.android:root body.pn-note.pn-note #encounter-page .pn-strip{gap:3px;padding:0 8px}
  html:root.android :is(.m-set-group>h2,.ad-group-title){font-size:11px;letter-spacing:.02em}
  html:root.android #local-settings .settings-card>h2{font-size:16px}
  html:root.android #encounter-page .document-footer .toolbar>button{padding:0 14px}
  html:root.android:root body.pn-note.pn-note #encounter-page .pn-strip .pn-tab .pn-count{display:none}
  html:root.android:root body.pn-note.pn-note #encounter-page .pn-strip .pn-tab{min-height:44px;height:44px}
  html:root.android:root #local-settings:is(.m-settings,.m-drill) :is(.ad-group-title,.m-set-head){letter-spacing:.02em}
}