/* The visit screen on the desktop and the web, to the Visit Redesign handoff (design/DocVoc-Visit-Handoff-2026-09-23, the owner's zip of 23 Sept 2026; "DocVoc Visit Redesign.dc.html" is the source of every value here). Loaded last: whatever older rules say about the visit, this file decides. One layout per stage, keyed on #encounter-page[data-stage] (set in paintVisitFlow): ready the patient bar, then the two cards: Sources (the recorder inside its Transcript pane) and the Note (empty). recording Live transcript on the left, the capture panel on the right: dot · Recording · mic, the timer, the bars, paused Pause | Finish recording, Mark this moment, the two lines at the foot. Paused turns amber. transcribing Live transcript on the left; on the right the progress panel: the bar, the pipeline (Audio saved → Transcribing drafting → Drafting the note), "You can leave this page", Stop and write the note myself. saved nothing heard: one card — the mic-off mark, "We didn't hear anything", the microphone, Record again · Write the note myself. Otherwise the row: Recording saved · Start recording · Recover recording. transcript Sources (Documents · Transcript) beside the Note (its tools, the details to confirm, the sections). draft signed the Note carries the signed banner, Note · Addenda, Export · Print. Phones (android/ios shells and windows under 768px) keep their own screens. */ @media (min-width:768px){ /* ---- The page ------------------------------------------------------------------------------------------------------ */ :root:not(.android):not(.ios) #encounter-page:not([hidden]){display:flex;flex-direction:column;gap:16px!important;padding:22px 28px 18px!important;overflow:hidden} /* the breadcrumb row sits level with Genie's box */ :root:not(.android):not(.ios) body[data-view=encounter] #encounter-page:not([hidden]){padding-bottom:18px!important} /* no page footer any more: the older 90px for it goes */ :root:not(.android):not(.ios) #encounter-page .document-footer,:root:not(.android):not(.ios) #encounter-page .editor-toolbar,:root:not(.android):not(.ios) #encounter-page .document-body,:root:not(.android):not(.ios) #encounter-page #visit-strip-record,:root:not(.android):not(.ios) #encounter-page #draft,:root:not(.android):not(.ios) #encounter-page #source-toggle,:root:not(.android):not(.ios) #encounter-page .source-heading,:root:not(.android):not(.ios) #encounter-page #visit-input-tabs,:root:not(.android):not(.ios) #encounter-page .visit-group-label{display:none!important} :root:not(.android):not(.ios) #message{bottom:24px} :root:not(.android):not(.ios) #encounter-page #visit-strip-status{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap} /* the design shows the stage in the stepper; the words stay for screen readers */ :root:not(.android):not(.ios) .genie-bar.mic-busy .genie-mic{display:none!important} /* "Mic in use" is genie.css's own .genie-mic-busy span (index.html), reachable to a screen reader */ :root:not(.android):not(.ios) body[data-view=encounter] #breadcrumb-view{display:none!important} /* the breadcrumb row says where we are */ /* Older rules (studio.css) hid parts of the one-card layout while a visit prepared; the two cards always stand. */ :root:not(.android):not(.ios) #encounter-page[data-preparing=true] #document>:is(#sources-card,#note-card){display:flex!important} :root:not(.android):not(.ios) #encounter-page[data-preparing=true] #transcript-pane:not([hidden]){display:flex!important} :root:not(.android):not(.ios) #encounter-page .sources-tools>:is(#toolbar-attach,#toolbar-create-doc){display:none!important} :root:not(.android):not(.ios) #encounter-page #document[data-sources=documents] .sources-tools>:is(#toolbar-attach,#toolbar-create-doc):not([hidden]){display:inline-flex!important} :root:not(.android):not(.ios) #encounter-page #document:not([data-sources=transcript]) .sources-tools>:is(#toolbar-edit-transcript,#toolbar-add-recording){display:none!important} :root:not(.android):not(.ios) #encounter-page #document[data-sources=transcript] .sources-tools>:is(#toolbar-edit-transcript,#toolbar-add-recording):not([hidden]){display:inline-flex!important} /* ---- The top row: "Review › Rohini Prinja · Draft note", and on the queue Back to Review · Skip for now beside it. --- */ :root:not(.android):not(.ios) #encounter-page>.visit-top{display:flex!important;align-items:center;gap:10px;min-height:38px;margin:0;padding:0 390px 0 0!important} /* Genie's box keeps the far right */ :root:not(.android):not(.ios) #encounter-page .visit-title{display:flex!important;align-items:center;gap:8px;flex:0 1 auto;min-width:0;margin:0;font:400 13px/1.4 var(--font-sans)!important;letter-spacing:0!important;color:var(--secondary);white-space:nowrap;overflow:hidden} :root:not(.android):not(.ios) #encounter-page .visit-title .crumb-root{height:auto;min-height:0;padding:0;border:0;background:none;box-shadow:none;color:var(--secondary);font:inherit;cursor:pointer} :root:not(.android):not(.ios) #encounter-page .visit-title .crumb-root:hover{color:var(--accent-text)} :root:not(.android):not(.ios) #encounter-page .visit-title>.icon{width:13px;height:13px;flex:none;color:var(--hint)} :root:not(.android):not(.ios) #encounter-page .visit-title .crumb-name{color:var(--ink);font-weight:550;overflow:hidden;text-overflow:ellipsis} :root:not(.android):not(.ios) #encounter-page .visit-title .crumb-dot,:root:not(.android):not(.ios) #encounter-page .visit-title .crumb-stage{color:var(--hint)} :root:not(.android):not(.ios) #encounter-page .visit-nav{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto} :root:not(.android):not(.ios) #encounter-page .visit-nav>button:not([hidden]){display:inline-flex!important;align-items:center;gap:6px;height:32px!important;min-height:32px!important;padding:0 11px!important;border:1px solid var(--border)!important;border-radius:7px!important;background:var(--card)!important;color:var(--ink)!important;font-size:13px!important;font-weight:550!important;box-shadow:none!important} :root:not(.android):not(.ios) #encounter-page .visit-nav>button:hover{background:var(--row-highlight)!important} :root:not(.android):not(.ios) #encounter-page .visit-nav>button[hidden]{display:none!important} :root:not(.android):not(.ios) #encounter-page .visit-nav .icon{width:15px;height:15px} :root:not(.android):not(.ios) #encounter-page .visit-nav>#review-skip .icon{order:2} :root:not(.android):not(.ios) #encounter-page:not([data-stage=draft]) .visit-nav>#review-skip{display:none!important} /* ---- The patient bar: ONE row (owner). Avatar · name, Change | visit type, the facts under them · the steps (the lock line under them while capturing) · Discard / Delete draft. ------------------------------------------------------------ */ :root:not(.android):not(.ios) #encounter-page .visit-strip{display:flex;align-items:center;flex-wrap:nowrap!important;gap:18px!important;flex:none;padding:16px 18px!important;border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:var(--shadow-chip);position:relative;z-index:5} :root:not(.android):not(.ios) #encounter-page .strip-avatar{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:10px;background:var(--accent-tint);color:var(--accent-text);font-size:14px;font-weight:650} :root:not(.android):not(.ios) #encounter-page .strip-avatar.empty{background:var(--accent-tint);border:0} :root:not(.android):not(.ios) #encounter-page .strip-avatar.empty::before{content:"?"} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-who{flex:1 1 auto!important;min-width:160px!important;display:flex;flex-direction:column;justify-content:center;gap:6px} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:nowrap!important;min-width:0} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>#patient{flex:0 1 auto!important;width:auto!important;min-width:60px!important;max-width:100%!important;height:30px;min-height:0;margin:0 0 0 -5px;padding:0 5px;border:1px solid transparent;border-radius:7px;background:transparent;box-shadow:none;color:var(--ink);font-size:19px;font-weight:650;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;field-sizing:content} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>#patient:not([readonly]):hover{border-color:var(--border)} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>#patient:not([readonly]):focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring);background:var(--card);outline:none} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>#patient::placeholder{color:var(--secondary);font-weight:600} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>#patient:placeholder-shown{min-width:150px!important} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>#patient.name-needed{border-color:var(--review-dot);background:var(--review-bg)} /* Change (a linked name) or Assign patient (a bare one): a text link, no box, no icon. New patient lives in the picker. */ :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>:is(#move-visit,#visit-choose-patient){display:inline-flex!important;align-items:center;flex:none;width:auto!important;height:auto!important;min-height:0!important;margin:0;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;color:var(--accent-text)!important;font-size:13px!important;font-weight:550!important;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>:is(#move-visit,#visit-choose-patient):hover{text-decoration:underline} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>:is(#move-visit,#visit-choose-patient) .icon{display:none!important} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>:is(#move-visit,#visit-choose-patient) .action-label{position:static!important;width:auto!important;max-width:none!important;height:auto!important;clip-path:none!important;overflow:visible!important;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>:is(#move-visit,#visit-choose-patient)[hidden],:root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>:is(#move-visit,#visit-choose-patient):disabled,:root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>#visit-new-patient{display:none!important} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>.strip-sep{flex:none;color:var(--border);font-size:13px} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name:has(#move-visit:disabled,#move-visit[hidden]):has(#visit-choose-patient:disabled,#visit-choose-patient[hidden])>.strip-sep{display:none} /* no link, no divider */ :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>#visit-type{flex:0 0 auto;width:auto!important;min-width:118px!important;max-width:170px;height:28px!important;min-height:0!important;margin:0!important;padding:0 26px 0 8px!important;border:1px solid var(--border)!important;border-radius:6px!important;background:var(--row-highlight) url(/app/chevron.svg) no-repeat right 7px center/13px!important;font:400 12.5px/1.4 var(--font-sans)!important;color:var(--ink)!important;box-shadow:none!important;field-sizing:content} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>#visit-type::placeholder{color:var(--secondary);font-style:normal} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>#visit-type:not([readonly]):hover{border-color:var(--hint)!important} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>#visit-type:not([readonly]):focus{border-color:var(--accent)!important;background-color:var(--card)!important;box-shadow:0 0 0 3px var(--focus-ring)!important;outline:none} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>#visit-type[readonly]{pointer-events:none;color:var(--secondary)!important;background-image:none!important;padding-right:8px!important} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>#visit-type[readonly]:placeholder-shown{display:none!important} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>#visit-type::-webkit-calendar-picker-indicator{display:none!important} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-facts{display:flex;align-items:center;min-width:0} :root:not(.android):not(.ios) #encounter-page .visit-strip #visit-meta{display:flex!important;align-items:center;gap:10px;min-width:0;margin:0!important;font:400 12.5px/1.4 var(--font-sans)!important;color:var(--secondary)!important;white-space:nowrap;overflow:hidden} :root:not(.android):not(.ios) #encounter-page .visit-strip #visit-meta:empty{display:none!important} :root:not(.android):not(.ios) #encounter-page .visit-strip #visit-meta .fact-sep{color:var(--border)} :root:not(.android):not(.ios) #encounter-page .visit-strip #visit-meta .fact-mono,:root:not(.android):not(.ios) #encounter-page .visit-strip #visit-meta .fact .fact-mono{font-family:var(--font-mono);font-size:12px} :root:not(.android):not(.ios) #encounter-page .visit-strip #patient-matches{position:absolute;top:calc(100% + 6px);left:0;z-index:30} /* The steps at the right: Record → Transcribe → Draft → Review → Sign, every one named; done in green, the current one filled. */ :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-end{display:flex!important;flex-direction:column;align-items:flex-end;gap:8px;flex:none!important;margin-left:auto!important} :root:not(.android):not(.ios) #encounter-page .visit-strip #visit-steps{order:1;display:flex;align-items:center;gap:0;flex:none!important;margin:0;padding:0;border:0;width:auto} :root:not(.android):not(.ios) #encounter-page .visit-strip #visit-steps>div{display:flex;align-items:center;gap:7px;margin:0!important;padding:0!important;border:0!important;border-radius:0;background:none!important;color:var(--hint);font-size:12.5px;font-weight:500;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .visit-strip #visit-steps>div+div::before{content:"";position:static!important;order:0;display:block;width:18px;height:1.5px;margin:0 8px 0 3px!important;background:var(--border)} :root:not(.android):not(.ios) #encounter-page .visit-strip #visit-steps>div.done+div::before{background:var(--signed-accent)} :root:not(.android):not(.ios) #encounter-page .visit-strip #visit-steps>div>b{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--hint);font-size:10.5px;font-weight:700} :root:not(.android):not(.ios) #encounter-page .visit-strip #visit-steps>div>span{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip-path:none!important} :root:not(.android):not(.ios) #encounter-page .visit-strip #visit-steps>div.done{color:var(--secondary)} :root:not(.android):not(.ios) #encounter-page .visit-strip #visit-steps>div.done>b{border-color:var(--signed-accent);background:var(--signed-bg);color:var(--signed-text)} :root:not(.android):not(.ios) #encounter-page .visit-strip #visit-steps>div:is(.active,.rec-recording,.rec-paused){color:var(--ink);font-weight:650} :root:not(.android):not(.ios) #encounter-page .visit-strip #visit-steps>div:is(.active,.rec-recording,.rec-paused)>b{border-color:var(--accent);background:var(--accent);color:var(--on-accent)} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-lock{order:2;display:none;align-items:center;gap:5px;font-size:12.5px;color:var(--hint);white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-lock .icon{width:13px;height:13px} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused],[data-stage=transcribing],[data-stage=drafting]) .visit-strip .strip-lock{display:inline-flex} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused],[data-stage=transcribing],[data-stage=drafting]) .visit-strip .strip-end{gap:6px} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-actions{display:flex;align-items:center;gap:10px;flex:none} :root:not(.android):not(.ios) #encounter-page .visit-strip #delete{display:inline-flex!important;align-items:center;gap:7px;height:40px!important;min-height:40px!important;padding:0 13px!important;border:1px solid var(--danger-border)!important;border-radius:8px!important;background:var(--card)!important;color:var(--danger)!important;font-size:13px!important;font-weight:550!important;box-shadow:none!important;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .visit-strip #delete:hover{background:var(--danger-bg)!important} :root:not(.android):not(.ios) #encounter-page .visit-strip #delete[hidden],:root:not(.android):not(.ios) #encounter-page .visit-strip #delete:disabled{display:none!important} :root:not(.android):not(.ios) #encounter-page .visit-strip #delete .icon{width:15px;height:15px} :root:not(.android):not(.ios) #encounter-page .visit-strip #delete .action-label{position:static!important;width:auto!important;height:auto!important;clip-path:none!important;overflow:visible!important;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page[data-capturing=true] .visit-strip{border-color:var(--border)!important;box-shadow:var(--shadow-chip)!important} /* ---- The cards ---------------------------------------------------------------------------------------------------- */ :root:not(.android):not(.ios) #encounter-page #document{display:flex!important;flex-direction:row!important;gap:16px;flex:1 1 0!important;min-height:380px;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;overflow:visible!important} :root:not(.android):not(.ios) #encounter-page :is(#sources-card,#note-card){display:flex;flex-direction:column;flex:1 1 0;min-width:0;min-height:0;border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:var(--shadow-chip);overflow:hidden} :root:not(.android):not(.ios) #encounter-page :is(#sources-card,#note-card)>.document-pane{flex:1 1 auto;min-height:0;overflow:hidden!important;padding:0!important;margin:0!important} /* no scrolling: each pane pages (paging.js) */ :root:not(.android):not(.ios) #encounter-page :is(#sources-card,#note-card)>.document-pane>.pg-viewport{flex:1 1 auto!important;min-height:0!important;overflow:hidden!important} :root:not(.android):not(.ios) #encounter-page :is(#sources-card,#note-card)>.document-pane[hidden]{display:none!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused],[data-stage=transcribing],[data-stage=drafting]) #note-card,:root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] #document{display:none!important} /* Tabs: Documents n · Transcript at the left of the sources card; Note · Addenda n on the note card once signed. */ :root:not(.android):not(.ios) #encounter-page .sources-head,:root:not(.android):not(.ios) #encounter-page .note-head{display:flex;align-items:center;gap:8px;flex:none;padding:8px 8px 0;border-bottom:1px solid var(--row-border);background:var(--card)} :root:not(.android):not(.ios) #encounter-page .tabs{display:flex!important;gap:4px!important;flex:0 1 auto!important;min-width:0;margin:0!important;padding:0!important;border:0!important;background:none!important} :root:not(.android):not(.ios) #encounter-page .tabs button{display:inline-flex!important;align-items:center;gap:6px;height:36px!important;min-height:36px!important;margin:0!important;padding:0 12px!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;background:none!important;color:var(--secondary)!important;font-size:13px!important;font-weight:500!important;box-shadow:none!important;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .tabs button::after{display:none!important} :root:not(.android):not(.ios) #encounter-page .tabs button[aria-selected=true]{border-bottom-color:var(--accent)!important;color:var(--accent-text)!important;font-weight:600!important} :root:not(.android):not(.ios) #encounter-page .tabs button[hidden]{display:none!important} :root:not(.android):not(.ios) #encounter-page .tabs button .icon{display:none!important} :root:not(.android):not(.ios) #encounter-page .tabs .tab-count{font:400 11px/1 var(--font-mono);color:var(--hint)} :root:not(.android):not(.ios) #encounter-page .tabs .tab-count:empty{display:none} :root:not(.android):not(.ios) #encounter-page #tab-documents{order:1} :root:not(.android):not(.ios) #encounter-page #tab-transcript{order:2} :root:not(.android):not(.ios) #encounter-page .sources-tools,:root:not(.android):not(.ios) #encounter-page .editor-tools{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;justify-content:flex-end;margin:0 6px 6px 0} :root:not(.android):not(.ios) #encounter-page .sources-head .sources-tools{flex-wrap:nowrap;overflow:hidden} /* never over the tabs */ :root:not(.android):not(.ios) #encounter-page .sources-tools>#toolbar-create-doc{display:none!important} /* the design: creating documents from a visit waits until it is planned; Attach a file is the one action */ :root:not(.android):not(.ios) #encounter-page .sources-tools>:is(#copy-document,#choose-document){width:32px!important;padding:0!important;justify-content:center} /* a drafted document's Copy and Choose another keep their icons; Save keeps its word */ :root:not(.android):not(.ios) #encounter-page .sources-tools>:is(#copy-document,#choose-document) .action-label{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .sources-tools>#save-document:not([hidden]){border:0!important;background:var(--accent)!important;color:var(--on-accent)!important;font-weight:600!important} :root:not(.android):not(.ios) #encounter-page .sources-tools>button:not([hidden]){display:inline-flex!important;align-items:center;gap:6px;height:30px!important;min-height:30px!important;padding:0 10px!important;border:1px solid var(--border)!important;border-radius:7px!important;background:var(--card)!important;color:var(--ink)!important;font-size:12.5px!important;font-weight:550!important;box-shadow:none!important;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .sources-tools>button[hidden]{display:none!important} :root:not(.android):not(.ios) #encounter-page .sources-tools .icon{width:15px;height:15px} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused],[data-stage=transcribing],[data-stage=drafting]) :is(.sources-head,.sources-tools){display:none!important} /* While it captures: "Live transcript · a few seconds behind the room · ■ Clinician ■ Patient" instead of the tabs. */ :root:not(.android):not(.ios) #encounter-page .live-head{display:none;align-items:center;gap:12px;flex:none;padding:12px 18px;border-bottom:1px solid var(--row-border)} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused],[data-stage=transcribing],[data-stage=drafting]) .live-head{display:flex} :root:not(.android):not(.ios) #encounter-page .live-head>strong{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .live-head .live-hint{flex:1;min-width:0;font-size:12px;color:var(--hint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :root:not(.android):not(.ios) #encounter-page .live-head .live-legend{display:flex;align-items:center;gap:6px 12px;font-size:12px;color:var(--secondary);white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .live-head .live-legend i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:2px;background:var(--hint)} :root:not(.android):not(.ios) #encounter-page .live-head .live-legend i.clin{background:var(--accent)} :root:not(.android):not(.ios) #encounter-page .live-head .live-legend i.pat{margin-left:6px} /* ---- Sources: the transcript ---------------------------------------------------------------------------------------- */ :root:not(.android):not(.ios) #encounter-page #transcript-pane{display:flex;flex-direction:column;gap:0} :root:not(.android):not(.ios) #encounter-page #transcript-pane>*{flex:none} :root:not(.android):not(.ios) #encounter-page #transcript-pane .source-search{margin:10px 14px 0;font-size:12px;color:var(--hint)} :root:not(.android):not(.ios) #encounter-page #transcript-pane .source-search input{height:32px;margin-top:4px;padding:0 10px;border:1px solid var(--border);border-radius:7px;font-size:13px} :root:not(.android):not(.ios) #encounter-page #transcript-pane #source-result{margin:4px 14px 0;font-size:12.5px;color:var(--secondary)} :root:not(.android):not(.ios) #encounter-page #transcript-pane #source-result:empty{display:none} :root:not(.android):not(.ios) #encounter-page #transcript-pane #import-recording{display:none!important} /* Import audio lives in the recorder */ :root:not(.android):not(.ios) #encounter-page #kept-audio:not([hidden]){display:flex;align-items:center;gap:10px;margin:0!important;padding:12px 14px!important;border:0!important;border-bottom:1px solid var(--row-border)!important;border-radius:0!important;background:var(--row-highlight)!important} :root:not(.android):not(.ios) #encounter-page #kept-audio .kept-audio-copy{display:none!important} :root:not(.android):not(.ios) #encounter-page #kept-audio #kept-audio-player{display:none!important} :root:not(.android):not(.ios) #encounter-page #kept-audio .kept-audio-actions{display:contents} :root:not(.android):not(.ios) #encounter-page #kept-audio #kept-audio-play{order:-1;display:flex!important;align-items:center;justify-content:center;flex:none;width:34px;height:34px;min-height:0;margin:0;padding:0;border:0;border-radius:50%;background:var(--accent);color:var(--on-accent);box-shadow:none} :root:not(.android):not(.ios) #encounter-page #kept-audio #kept-audio-play .icon{width:14px;height:14px;margin-left:1px} :root:not(.android):not(.ios) #encounter-page #kept-audio #kept-audio-play .action-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} :root:not(.android):not(.ios) #encounter-page #kept-audio #kept-audio-play:disabled{opacity:.5} :root:not(.android):not(.ios) #encounter-page #kept-audio .audio-scrub{flex:1 1 auto;min-width:0} :root:not(.android):not(.ios) #encounter-page #kept-audio .audio-track{position:relative;height:4px;border-radius:2px;background:var(--border);cursor:pointer;outline-offset:6px} :root:not(.android):not(.ios) #encounter-page #kept-audio .audio-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--accent)} :root:not(.android):not(.ios) #encounter-page #kept-audio .audio-times{display:flex;justify-content:space-between;margin-top:6px;font:400 11.5px/1 var(--font-mono);color:var(--hint)} :root:not(.android):not(.ios) #encounter-page #kept-audio #kept-audio-meta{font:inherit;color:inherit} :root:not(.android):not(.ios) #encounter-page #kept-audio #kept-audio-delete{display:inline-flex!important;align-items:center;gap:5px;flex:none;height:30px!important;min-height:30px!important;margin:0;padding:0 10px!important;border:1px solid var(--danger-border)!important;border-radius:7px!important;background:var(--card)!important;color:var(--danger)!important;font-size:12px!important;font-weight:550!important;box-shadow:none!important;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page #kept-audio #kept-audio-delete .icon{width:14px;height:14px} :root:not(.android):not(.ios) #encounter-page #visit-markers:not([hidden]){display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px 0;font-size:11.5px} :root:not(.android):not(.ios) #encounter-page #visit-markers button{height:24px;min-height:0;padding:0 7px;border:0;border-radius:5px;background:var(--accent-tint);color:var(--accent-text);font:400 11.5px/1 var(--font-mono)} /* Speaker turns: the time in mono, the speaker over the words (Clinician in the accent, Patient in grey). */ :root:not(.android):not(.ios) #encounter-page #transcript-lines{margin:0!important;padding:4px 0!important;border:0!important;max-width:none!important} :root:not(.android):not(.ios) #encounter-page #transcript-lines .speaker-line{display:grid!important;grid-template-columns:44px minmax(0,1fr);column-gap:8px;row-gap:2px;align-items:start;margin:0!important;padding:9px 14px!important;border:0!important} :root:not(.android):not(.ios) #encounter-page #transcript-lines.untimed .speaker-line{grid-template-columns:minmax(0,1fr)} :root:not(.android):not(.ios) #encounter-page #transcript-lines .speaker-time{grid-column:1;grid-row:1/span 2;order:0;width:auto;font:400 11.5px/1.9 var(--font-mono);color:var(--hint)} :root:not(.android):not(.ios) #encounter-page #transcript-lines .speaker{grid-column:2;min-height:0;font-size:11.5px!important;font-weight:600;line-height:1.9;letter-spacing:0!important;text-transform:none!important;color:var(--secondary)} :root:not(.android):not(.ios) #encounter-page #transcript-lines .speaker.is-clinician{color:var(--accent-text)} :root:not(.android):not(.ios) #encounter-page #transcript-lines.untimed .speaker,:root:not(.android):not(.ios) #encounter-page #transcript-lines.untimed .speaker-text{grid-column:1} :root:not(.android):not(.ios) #encounter-page #transcript-lines .speaker-text{grid-column:2;font-size:13.5px;line-height:1.6;color:var(--body)} :root:not(.android):not(.ios) #encounter-page #transcript-lines>button.quiet{display:none!important} :root:not(.android):not(.ios) #encounter-page #transcript-pane #transcript{flex:none;min-height:120px;margin:0!important;padding:14px 18px!important;border:0!important;border-radius:0!important;background:var(--card)!important;box-shadow:none!important;font-size:15px!important;line-height:1.6!important;color:var(--body)!important;resize:none!important} :root:not(.android):not(.ios) #encounter-page #transcript-pane #transcript::placeholder{color:var(--hint)} :root:not(.android):not(.ios) #encounter-page .transcript-foot{flex:none;margin:auto 0 0!important;padding:10px 14px;border-top:1px solid var(--row-border);font-size:11.5px;line-height:1.5;color:var(--hint)} :root:not(.android):not(.ios) #encounter-page .transcript-foot[hidden],:root:not(.android):not(.ios) #encounter-page #document:not([data-sources=transcript]) .transcript-foot{display:none!important} /* ---- Sources: documents ---------------------------------------------------------------------------------------------- */ :root:not(.android):not(.ios) #encounter-page #documents-pane{display:flex;flex-direction:column} :root:not(.android):not(.ios) #encounter-page #documents-pane[hidden]{display:none!important} :root:not(.android):not(.ios) #encounter-page #documents-pane .documents-intro,:root:not(.android):not(.ios) #encounter-page #documents-pane[data-empty=true] :is(.attachment-toolbar,#document-create){display:none!important} :root:not(.android):not(.ios) #encounter-page #documents-pane .pane-empty{display:flex;flex-direction:column;align-items:center;gap:9px;margin:0;padding:32px 20px;text-align:center} :root:not(.android):not(.ios) #encounter-page #documents-pane .pane-empty[hidden]{display:none!important} :root:not(.android):not(.ios) #encounter-page #documents-pane .pane-empty>.icon{width:26px;height:26px;color:var(--hint)} :root:not(.android):not(.ios) #encounter-page #documents-pane .pane-empty>strong{font-size:14px;font-weight:600;color:var(--ink)} :root:not(.android):not(.ios) #encounter-page #documents-pane .pane-empty>p{margin:0;max-width:30ch;font-size:12.5px;line-height:1.6;color:var(--secondary)} :root:not(.android):not(.ios) #encounter-page #documents-pane .pane-empty-actions{display:flex;gap:8px;margin-top:6px} :root:not(.android):not(.ios) #encounter-page #documents-pane .pane-empty-actions>button{height:36px!important;min-height:36px!important;padding:0 13px!important;border-radius:8px!important;font-size:12.5px!important;font-weight:600!important} :root:not(.android):not(.ios) #encounter-page #documents-pane .pane-empty-actions>button.primary{border:0!important;background:var(--accent)!important;color:var(--on-accent)!important} :root:not(.android):not(.ios) #encounter-page #documents-pane .pane-empty-actions>button:not(.primary){border:1px solid var(--border)!important;background:var(--card)!important;color:var(--ink)!important} :root:not(.android):not(.ios) #encounter-page #documents-pane .attachment-toolbar{padding:12px 14px} :root:not(.android):not(.ios) #encounter-page #documents-pane #document-create{margin:0 14px 12px} :root:not(.android):not(.ios) #encounter-page #documents-pane #drafted-document{padding:0 14px 14px} /* ---- The note card: the tools, the details to confirm, the sections, the signed banner, the addenda ---------------- */ :root:not(.android):not(.ios) #encounter-page .note-head{padding:8px 10px 0} :root:not(.android):not(.ios) #encounter-page .note-head .editor-tools{margin:0 4px 6px 0} :root:not(.android):not(.ios) #encounter-page .note-head .note-tabs{display:flex!important;flex:0 0 auto!important} :root:not(.android):not(.ios) #encounter-page[data-stage=signed] .note-head{padding:8px 10px 0} :root:not(.android):not(.ios) #encounter-page[data-stage=signed] .note-head .note-tabs{flex:1 1 auto!important} :root:not(.android):not(.ios) #encounter-page .editor-tools{margin:0} :root:not(.android):not(.ios) #encounter-page[data-stage=signed] .editor-tools{flex:0 0 auto;margin:0 0 6px} :root:not(.android):not(.ios) #encounter-page .editor-tools>button:not([hidden]),:root:not(.android):not(.ios) #encounter-page .editor-tools>select{display:inline-flex!important;align-items:center;gap:7px;height:34px!important;min-height:34px!important;margin:0!important;padding:0 11px!important;border:1px solid var(--border)!important;border-radius:7px!important;background-color:var(--card)!important;color:var(--ink)!important;font-size:12.5px!important;font-weight:550!important;box-shadow:none!important;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .editor-tools>button[hidden],:root:not(.android):not(.ios) #encounter-page .editor-tools>select[hidden],:root:not(.android):not(.ios) #encounter-page .editor-tools>#reading-size{display:none!important} :root:not(.android):not(.ios) #encounter-page .editor-tools .icon{width:15px!important;height:15px!important} :root:not(.android):not(.ios) #encounter-page .editor-tools>#note-template{order:1;flex:0 1 auto;min-width:118px;max-width:150px;padding:0 30px 0 9px!important;font-size:13px!important;appearance:none;-webkit-appearance:none;background:var(--card) url(/app/chevron.svg) no-repeat right 9px center/14px!important;opacity:1} :root:not(.android):not(.ios) #encounter-page .editor-tools>#note-template:disabled{color:var(--secondary)!important} :root:not(.android):not(.ios) #encounter-page .editor-tools>#edit-note{order:2} :root:not(.android):not(.ios) #encounter-page .editor-tools>#toolbar-print{order:2} :root:not(.android):not(.ios) #encounter-page .editor-tools>#export{order:3} :root:not(.android):not(.ios) #encounter-page .editor-tools::before{content:"";order:4;flex:1 1 0;min-width:0} /* the space before A−|A+ and Sign */ :root:not(.android):not(.ios) #encounter-page .editor-tools .size-step{order:5;width:32px!important;padding:0!important;justify-content:center;color:var(--secondary)!important;font-weight:600!important} :root:not(.android):not(.ios) #encounter-page .editor-tools>#text-smaller{border-radius:7px 0 0 7px!important;font-size:12px!important} :root:not(.android):not(.ios) #encounter-page .editor-tools>#text-larger{margin-left:-9px!important;border-left:0!important;border-radius:0 7px 7px 0!important;font-size:14px!important} :root:not(.android):not(.ios) #encounter-page .editor-tools .size-step:disabled{color:var(--border)!important} :root:not(.android):not(.ios) #encounter-page .editor-tools>#generate{order:6} :root:not(.android):not(.ios) #encounter-page .editor-tools>#generate[data-has-note=false]:not(:disabled),:root:not(.android):not(.ios) #encounter-page .editor-tools>#review:not([hidden]){border:0!important;border-radius:8px!important;background:var(--accent)!important;color:var(--on-accent)!important;font-size:13px!important;font-weight:600!important;padding:0 14px!important} :root:not(.android):not(.ios) #encounter-page .editor-tools>#review{order:7} :root:not(.android):not(.ios) #encounter-page .note-head .editor-tools{flex-wrap:nowrap;overflow:hidden} /* never over the Note tab: what does not fit shrinks or waits for a wider window */ :root:not(.android):not(.ios) #encounter-page .note-head .editor-tools>#note-template{flex:0 0 134px;min-width:134px} :root:not(.android):not(.ios) #encounter-page .note-head .note-tabs>button{padding:0 9px!important} :root:not(.android):not(.ios) #encounter-page .note-head .editor-tools .size-step{width:30px!important} :root:not(.android):not(.ios) #encounter-page[data-stage=transcript] .editor-tools>.size-step{display:none!important} /* no note to size yet */ :root:not(.android):not(.ios) #encounter-page .editor-tools>#review:disabled{opacity:.5} :root:not(.android):not(.ios) #encounter-page .editor-tools>#review .icon{width:17px!important;height:17px!important} :root:not(.android):not(.ios) #encounter-page[data-stage=ready] .note-head .editor-tools>*,:root:not(.android):not(.ios) #encounter-page:not([data-stage=draft]):not([data-stage=transcript]) .editor-tools>#review,:root:not(.android):not(.ios) #encounter-page .editor-tools>#generate:disabled,:root:not(.android):not(.ios) #encounter-page:is([data-stage=ready],[data-stage=saved]) .editor-tools>#generate{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=signed] .editor-tools>:not(#export):not(#toolbar-print):not(#rx-open){display:none!important} /* The line under the head: the signing error, the Export toast. */ :root:not(.android):not(.ios) #encounter-page .document-line{display:none;align-items:center;gap:12px;flex:none;padding:7px 14px;border-bottom:1px solid var(--row-border);background:var(--card);font-size:12.5px;line-height:1.4} :root:not(.android):not(.ios) #encounter-page .document-line:has(#visit-action-error:not(:empty),#export-toast:not(:empty)){display:flex} :root:not(.android):not(.ios) #encounter-page .document-line>#visit-action-error{position:static!important;height:auto!important;margin:0!important;padding:0!important;color:var(--danger);font-size:12.5px;line-height:1.4;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis;pointer-events:auto!important} :root:not(.android):not(.ios) #encounter-page .document-line>#export-toast{margin:0;color:var(--signed-text);font-weight:550} :root:not(.android):not(.ios) #encounter-page .document-line>:empty{display:none!important} /* The details to confirm, above the note. */ :root:not(.android):not(.ios) #encounter-page .note-flag{position:static;display:flex;flex-direction:column;gap:7px;flex:none;margin:10px 12px 0;padding:8px 10px;border:1px solid var(--highlight-border);border-radius:10px;background:var(--review-bg);animation:none} :root:not(.android):not(.ios) #encounter-page .note-flag[hidden]{display:none!important} :root:not(.android):not(.ios) #encounter-page .note-flag .flag-head{display:flex;align-items:center;gap:8px} :root:not(.android):not(.ios) #encounter-page .note-flag .flag-head>.icon{width:16px;height:16px;flex:none;color:var(--review-text)} :root:not(.android):not(.ios) #encounter-page .note-flag .flag-title{font-size:13px;font-weight:650;color:var(--ink);white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .note-flag .flag-nav{display:flex;align-items:center;gap:3px} :root:not(.android):not(.ios) #encounter-page .note-flag .flag-step{display:flex;align-items:center;justify-content:center;width:26px;height:26px!important;min-height:0!important;padding:0!important;border:1px solid var(--highlight-border)!important;border-radius:6px!important;background:var(--card)!important;color:var(--secondary)!important;box-shadow:none} :root:not(.android):not(.ios) #encounter-page .note-flag .flag-step .icon{width:13px;height:13px} :root:not(.android):not(.ios) #encounter-page .note-flag .flag-pos{min-width:38px;text-align:center;font:400 11.5px/1 var(--font-mono);color:var(--secondary)} :root:not(.android):not(.ios) #encounter-page .note-flag .flag-spacer{flex:1} :root:not(.android):not(.ios) #encounter-page .note-flag .flag-all{height:28px!important;min-height:0!important;padding:0 10px!important;border:1px solid var(--highlight-border)!important;border-radius:6px!important;background:var(--card)!important;color:var(--ink)!important;font-size:12px!important;font-weight:600!important;box-shadow:none;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .note-flag .flag-row{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:7px 9px;border-radius:8px;background:var(--card)} :root:not(.android):not(.ios) #encounter-page .note-flag .flag-n{display:flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:10.5px;font-weight:700;align-self:flex-start} :root:not(.android):not(.ios) #encounter-page .note-flag .flag-copy{flex:1 1 200px;min-width:0} :root:not(.android):not(.ios) #encounter-page .note-flag .flag-word{font-size:13.5px;line-height:1.35;color:var(--ink)} :root:not(.android):not(.ios) #encounter-page .note-flag .flag-word>strong{font-weight:650} :root:not(.android):not(.ios) #encounter-page .note-flag .flag-where{font-size:12.5px;color:var(--hint)} :root:not(.android):not(.ios) #encounter-page .note-flag .flag-why{margin:2px 0 0;font-size:12px;line-height:1.45;color:var(--secondary)} :root:not(.android):not(.ios) #encounter-page .note-flag .flag-actions{display:flex;gap:6px;flex-wrap:wrap;flex:0 1 auto} :root:not(.android):not(.ios) #encounter-page .note-flag .flag-actions>button{display:inline-flex;align-items:center;gap:6px;height:30px!important;min-height:0!important;padding:0 11px!important;border:1px solid var(--border)!important;border-radius:7px!important;background:var(--card)!important;color:var(--ink)!important;font-size:12.5px!important;font-weight:550!important;box-shadow:none;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .note-flag .flag-actions>.flag-right{border:0!important;background:var(--accent)!important;color:var(--on-accent)!important;font-weight:600!important} :root:not(.android):not(.ios) #encounter-page .note-flag .flag-right .icon{width:13px;height:13px} :root:not(.android):not(.ios) #encounter-page .note-flag.is-stale{flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px;padding:11px 14px} :root:not(.android):not(.ios) #encounter-page .note-flag.is-stale>.icon{width:18px;height:18px;flex:none;color:var(--review-text)} :root:not(.android):not(.ios) #encounter-page .note-flag.is-stale .note-flag-text{flex:1;min-width:160px;font-size:12.5px;line-height:1.5;color:var(--ink)} :root:not(.android):not(.ios) #encounter-page .note-flag.is-stale>button{height:30px!important;min-height:0!important;padding:0 12px!important;border:0!important;border-radius:7px!important;background:var(--accent)!important;color:var(--on-accent)!important;font-size:12.5px!important;font-weight:600!important} /* The note itself. */ :root:not(.android):not(.ios) #encounter-page #note-pane{display:flex;flex-direction:column} :root:not(.android):not(.ios) #encounter-page #note-pane>.note-actions{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=signed] #note-pane>.note-actions{display:flex!important;align-items:flex-start;gap:10px;flex:none;order:-2;margin:0!important;padding:12px 18px!important;border:0!important;border-bottom:1px solid var(--row-border)!important;background:var(--signed-bg)!important} :root:not(.android):not(.ios) #encounter-page[data-stage=signed] #note-pane>.note-actions>.icon{width:17px;height:17px;flex:none;margin-top:1px;color:var(--signed-text)} :root:not(.android):not(.ios) #encounter-page[data-stage=signed] #note-pane>.note-actions>#note-legend{display:block!important;margin:0!important;padding:0!important;border:0!important;background:none!important;font-size:13px!important;line-height:1.5;color:var(--ink)!important} :root:not(.android):not(.ios) #encounter-page[data-stage=signed] #note-pane>.note-actions>#note-legend strong{font-weight:600} :root:not(.android):not(.ios) #encounter-page[data-stage=signed] #note-pane>.note-actions>#note-legend .fact-mono{font-family:var(--font-mono);font-size:12.5px} :root:not(.android):not(.ios) #encounter-page[data-stage=signed] #note-pane>.note-actions>#edit-note{display:none!important} :root:not(.android):not(.ios) #encounter-page #note-pane>#note-stale{order:-1} :root:not(.android):not(.ios) #encounter-page #note-preview{flex:1 1 auto;max-width:none!important;margin:0!important;padding:8px 22px 22px!important} :root:not(.android):not(.ios) #encounter-page #note-preview>section{margin:0!important;padding:16px 0!important;border-bottom:1px solid var(--row-border)} :root:not(.android):not(.ios) #encounter-page #note-preview>section:last-child{border-bottom:0} :root:not(.android):not(.ios) #encounter-page .section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px} :root:not(.android):not(.ios) #encounter-page #note-preview>section :is(h2,h3){margin:0!important;font:650 11px/1.4 var(--font-sans)!important;letter-spacing:1.4px!important;text-transform:uppercase;color:var(--hint)!important} :root:not(.android):not(.ios) #encounter-page .section-sources{height:auto!important;min-height:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;color:var(--accent-text)!important;font:550 12px/1.4 var(--font-mono)!important} :root:not(.android):not(.ios) #encounter-page .section-sources .icon{display:none} :root:not(.android):not(.ios) #encounter-page #note-preview>section p{margin:0!important;font-size:var(--reading-size,16px);line-height:1.62!important;color:var(--body)!important;text-wrap:pretty} :root:not(.android):not(.ios) #encounter-page #note-preview>:is(p,div):not(section){margin:0!important;padding:16px 0 0!important} :root:not(.android):not(.ios) #encounter-page #note-preview>.empty-state{margin:auto!important;padding:32px 20px} :root:not(.android):not(.ios) #encounter-page #note-preview>.empty-state strong{font-size:14px;font-weight:600} :root:not(.android):not(.ios) #encounter-page #note-preview>.empty-state p{max-width:36ch;font-size:12.5px;line-height:1.6;color:var(--secondary)} /* A highlighted detail: amber with its number until it is confirmed; the one in hand above the note is blue. */ :root:not(.android):not(.ios) #encounter-page #note-preview .detail-check{position:relative;display:inline;height:auto!important;min-height:0!important;margin:0!important;padding:1px 3px!important;border:0!important;border-radius:4px!important;background:var(--review-bg)!important;box-shadow:inset 0 -2px 0 var(--highlight-border)!important;color:inherit!important;font:inherit!important;font-weight:600!important;line-height:inherit!important;cursor:pointer;text-align:left;white-space:normal} :root:not(.android):not(.ios) #encounter-page #note-preview .detail-check[data-n]:not(.confirmed)::after{content:attr(data-n);display:inline-block;margin-left:2px;vertical-align:super;font-size:10px;font-weight:700;line-height:1;color:var(--review-text)} :root:not(.android):not(.ios) #encounter-page #note-preview .detail-check.is-current{background:var(--accent-tint)!important;box-shadow:inset 0 -2px 0 var(--accent)!important} :root:not(.android):not(.ios) #encounter-page #note-preview .detail-check.is-current::after{color:var(--accent-text)} :root:not(.android):not(.ios) #encounter-page #note-preview .detail-check.confirmed{padding:0!important;background:none!important;box-shadow:none!important;font-weight:400!important;cursor:text} :root:not(.android):not(.ios) #encounter-page #note-preview .detail-check:disabled{padding:0!important;background:none!important;box-shadow:none!important;font-weight:400!important;opacity:1} :root:not(.android):not(.ios) #encounter-page #note-preview .detail-check:disabled::after{display:none} /* Editing the note: the form keeps the card's margins and every field is a visible box (owner, 23 Sept 2026). */ :root:not(.android):not(.ios) #encounter-page #sections:not([hidden]){padding:18px 20px 24px!important;gap:20px!important;max-width:none!important;margin:0!important} :root:not(.android):not(.ios) #encounter-page .note-section label{display:block;margin:0 0 6px;font:650 11px/1.4 var(--font-sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--hint)} :root:not(.android):not(.ios) #encounter-page .note-section textarea{border:1px solid var(--border)!important;border-radius:8px!important;padding:10px 12px!important;min-height:72px!important;background:var(--card)!important;box-shadow:none;font-size:var(--reading-size,16px);line-height:1.62} :root:not(.android):not(.ios) #encounter-page .note-section textarea:hover{border-color:var(--hint)!important} :root:not(.android):not(.ios) #encounter-page .note-section textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--focus-ring)!important;outline:none!important} :root:not(.android):not(.ios) #encounter-page #note-moves:not([hidden]),:root:not(.android):not(.ios) #encounter-page #note-addenda:not([hidden]){padding:0 22px 16px} :root:not(.android):not(.ios) #encounter-page #signed-history:not([hidden]){margin:0 22px 16px;font-size:12.5px;color:var(--secondary)} /* Addenda: the box first, then the entries with a blue rule at their left. */ :root:not(.android):not(.ios) #encounter-page #addendum-pane{display:flex;flex-direction:column;gap:0} :root:not(.android):not(.ios) #encounter-page #addendum-pane[hidden]{display:none!important} :root:not(.android):not(.ios) #encounter-page #addendum-pane .addendum-compose{order:-1;display:flex;flex-direction:column;gap:10px;margin:12px 14px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--row-highlight)} :root:not(.android):not(.ios) #encounter-page #addendum-pane .addendum-compose textarea{width:100%;min-height:82px;margin:0;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--ink);font-size:14px;line-height:1.55;resize:none} :root:not(.android):not(.ios) #encounter-page #addendum-pane .addendum-compose textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring);outline:none} :root:not(.android):not(.ios) #encounter-page #addendum-pane .addendum-compose .addendum-hint{order:3;margin:0;font-size:12px;line-height:1.5;color:var(--hint)} :root:not(.android):not(.ios) #encounter-page #addendum-pane .addendum-compose .addendum-actions{order:4;display:flex;justify-content:flex-end} :root:not(.android):not(.ios) #encounter-page #addendum-pane .addendum-compose .addendum-actions>button{height:38px!important;min-height:38px!important;padding:0 15px!important;border:0!important;border-radius:8px!important;background:var(--accent)!important;color:var(--on-accent)!important;font-size:13px!important;font-weight:600!important;box-shadow:none} :root:not(.android):not(.ios) #encounter-page #addendum-pane .addendum-compose .addendum-actions>button:disabled{background:var(--row-highlight)!important;color:var(--hint)!important;border:1px solid var(--border)!important;opacity:1} :root:not(.android):not(.ios) #encounter-page #addendum-pane .addendum-entry{margin:0 14px 14px;padding:4px 0 4px 14px;border-left:3px solid var(--accent-surface)} :root:not(.android):not(.ios) #encounter-page #addendum-pane .addendum-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--hint)} :root:not(.android):not(.ios) #encounter-page #addendum-pane .addendum-label{font-weight:650;color:var(--secondary)} :root:not(.android):not(.ios) #encounter-page #addendum-pane .addendum-when{font-size:12px} :root:not(.android):not(.ios) #encounter-page #addendum-pane .addendum-tools{display:flex;gap:12px;margin-left:auto} :root:not(.android):not(.ios) #encounter-page #addendum-pane .addendum-tools>button{height:auto!important;min-height:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none;color:var(--accent-text)!important;font-size:12px!important;font-weight:550!important} :root:not(.android):not(.ios) #encounter-page #addendum-pane .addendum-tools>button.danger-outline{color:var(--danger)!important} :root:not(.android):not(.ios) #encounter-page #addendum-pane .addendum-tools .icon{display:none} :root:not(.android):not(.ios) #encounter-page #addendum-pane .addendum-entry>p{margin:5px 0 0;font-size:var(--reading-size,16px);line-height:1.6;color:var(--body)} :root:not(.android):not(.ios) #encounter-page #addendum-pane .addendum-form{margin-top:6px} :root:not(.android):not(.ios) #encounter-page #addendum-pane .addendum-form textarea{width:100%;padding:9px 11px;border:1px solid var(--accent);border-radius:8px;font-size:14px;line-height:1.55;resize:none} :root:not(.android):not(.ios) #encounter-page #addendum-pane .addendum-form .addendum-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px} /* The pager under a paged pane: Back · 1 of 2 · Next on a quiet strip (the owner pages instead of scrolling). */ :root:not(.android):not(.ios) #encounter-page :is(#sources-card,#note-card) .pager{display:flex;align-items:center;gap:8px;flex:none;margin:0;padding:9px 14px;border-top:1px solid var(--row-border);background:var(--row-highlight)} :root:not(.android):not(.ios) #encounter-page :is(#sources-card,#note-card) .pager>button{height:30px!important;min-height:30px!important;padding:0 11px!important;border:1px solid var(--border)!important;border-radius:7px!important;background:var(--card)!important;color:var(--ink)!important;font-size:12.5px!important;font-weight:550!important;box-shadow:none!important} :root:not(.android):not(.ios) #encounter-page :is(#sources-card,#note-card) .pager>button:disabled{color:var(--hint)!important;opacity:1} :root:not(.android):not(.ios) #encounter-page :is(#sources-card,#note-card) .pager .pager-count{flex:1;font:400 12px/1 var(--font-mono);color:var(--hint)} /* ---- ready: the recorder inside the Transcript pane — Start recording, the hint, the input, Import audio · Paste transcript. */ :root:not(.android):not(.ios) #encounter-page[data-preparing][data-capturing][data-working][data-stage=ready] #transcript-pane #visit-inputs:not([hidden]){display:flex!important;flex-direction:column!important;flex-direction:column;align-items:center;justify-content:center;gap:12px;flex:1 1 auto;min-height:320px;margin:0!important;padding:28px 24px!important;border:0!important;border-radius:0!important;background:var(--card)!important;box-shadow:none!important;overflow:visible!important} :root:not(.android):not(.ios) #encounter-page[data-stage=ready]:not([data-input=paste]) #transcript-pane:has(#visit-inputs) :is(#transcript,#transcript-lines,#kept-audio,#visit-markers,.source-search,#source-result){display:none!important} :root:not(.android):not(.ios) #encounter-page[data-preparing][data-capturing][data-working][data-stage=ready][data-input=paste] #transcript-pane #visit-inputs{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=ready] #visit-inputs :is(.visit-head,.title-row,.visit-recording-group,#capture-controls){display:contents!important} :root:not(.android):not(.ios) #encounter-page[data-stage=ready] #visit-inputs :is(.visit-patient-group,#visit-import-panel,#draft,.rec-head,.rec-controls,#marker,.recording-more,.rec-foot,.pipeline,.leave-note,#cancel-transcription,#recover,#write-myself,.silent-mark,.silent-foot,#record-error[hidden],#capture-progress,#note-progress,#input-level,#capture-bars,#record-time,#paused-for,#record-heading,#processing-progress[hidden],#recheck-processing[hidden]){display:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=ready] #record{order:1;display:inline-flex!important;align-items:center;justify-content:center;gap:11px;width:auto!important;height:56px!important;min-height:56px!important;padding:0 26px 0 20px!important;border:0!important;border-radius:999px!important;background:var(--accent)!important;color:var(--on-accent)!important;font-size:16px!important;font-weight:600!important;box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 30%,transparent),0 2px 6px color-mix(in srgb,var(--accent) 20%,transparent)!important} :root:not(.android):not(.ios) #encounter-page[data-stage=ready] #record .icon{width:22px;height:22px} :root:not(.android):not(.ios) #encounter-page[data-stage=ready] #record .action-label{position:static!important;width:auto!important;height:auto!important;clip-path:none!important;overflow:visible!important} :root:not(.android):not(.ios) #encounter-page[data-stage=ready] #record:disabled{opacity:.5;box-shadow:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=ready] .capture-copy{order:2;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:44ch;margin:0!important;padding:0!important;text-align:center} :root:not(.android):not(.ios) #encounter-page[data-stage=ready] #mode-detail{margin:0!important;font-size:13px!important;line-height:1.55;color:var(--secondary)!important} :root:not(.android):not(.ios) #encounter-page[data-stage=ready] #record-error:not([hidden]){display:block;margin:0!important;font-size:12.5px;line-height:1.5;color:var(--danger)} :root:not(.android):not(.ios) #encounter-page[data-stage=ready] .capture-input{order:3;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:center;gap:6px;width:auto!important;max-width:100%;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;font:400 12px/1.4 var(--font-mono);color:var(--hint)} :root:not(.android):not(.ios) #encounter-page[data-stage=ready] .capture-input::before{content:"Input ·"} :root:not(.android):not(.ios) #encounter-page[data-stage=ready] .capture-input>#microphone-name{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=ready] .capture-input>#visit-microphone{grid-column:auto!important;flex:0 1 auto!important;width:auto!important;min-width:0!important;max-width:260px!important;height:22px!important;min-height:0!important;margin:0!important;padding:0 18px 0 4px!important;border:0!important;border-radius:5px!important;background:transparent url(/app/chevron.svg) no-repeat right 2px center/12px!important;box-shadow:none!important;font:400 12px/1.4 var(--font-mono)!important;color:var(--secondary)!important;appearance:none;-webkit-appearance:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer} :root:not(.android):not(.ios) #encounter-page[data-stage=ready] .capture-input>#visit-microphone:hover{color:var(--ink)!important} :root:not(.android):not(.ios) #encounter-page[data-stage=ready] .capture-other{order:4;display:flex;gap:9px;justify-content:center;margin-top:4px} :root:not(.android):not(.ios) #encounter-page[data-stage=ready] .capture-other>button{display:inline-flex!important;align-items:center;gap:7px;height:36px!important;min-height:36px!important;padding:0 13px!important;border:1px solid var(--border)!important;border-radius:8px!important;background:var(--row-highlight)!important;color:var(--ink)!important;font-size:13px!important;font-weight:550!important;box-shadow:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=ready] .capture-other .icon{width:16px;height:16px} :root:not(.android):not(.ios) #encounter-page[data-stage=ready] #capture-import{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=ready] .capture-other>#capture-import{display:inline-flex!important} :root:not(.android):not(.ios) #encounter-page[data-stage=ready] #offline-choice:not([hidden]){order:5;max-width:52ch} :root:not(.android):not(.ios) #encounter-page:not([data-stage=ready]) .capture-other{display:none!important} /* ---- recording / paused / transcribing / drafting: the transcript on the left, the panel on the right. -------------- */ :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused],[data-stage=transcribing],[data-stage=drafting]):not([hidden]){display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:auto auto minmax(360px,1fr)!important;gap:16px!important;column-gap:16px!important;align-items:stretch!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused],[data-stage=transcribing],[data-stage=drafting])>.visit-top{grid-column:1/-1} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused],[data-stage=transcribing],[data-stage=drafting])>#visit-strip{grid-column:1/-1} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused],[data-stage=transcribing],[data-stage=drafting])>#document{grid-column:1;grid-row:3;min-height:0} :root:not(.android):not(.ios) #encounter-page[data-preparing][data-capturing][data-working]:is([data-stage=recording],[data-stage=paused],[data-stage=transcribing],[data-stage=drafting])>#visit-inputs:not([hidden]){grid-column:2;grid-row:3;display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;justify-content:flex-start!important;gap:14px!important;min-height:0;height:auto!important;margin:0!important;padding:18px!important;border:1px solid var(--border)!important;border-radius:12px!important;background:var(--card)!important;box-shadow:var(--shadow-chip)!important;overflow:hidden auto} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused],[data-stage=transcribing],[data-stage=drafting]) #visit-inputs :is(.visit-head,.title-row,.visit-recording-group,#capture-controls,.capture-input){display:contents!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused],[data-stage=transcribing],[data-stage=drafting]) #visit-inputs :is(.visit-patient-group,#visit-import-panel,#draft,#record,.capture-copy,#capture-other,#recover,#write-myself,.silent-mark,.silent-foot,#input-level,#visit-microphone,#paused-for,#offline-choice){display:none!important} /* The capture panel. */ :root:not(.android):not(.ios) #encounter-page .rec-head{display:flex;align-items:center;gap:8px;order:1} :root:not(.android):not(.ios) #encounter-page .rec-head .rec-dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--recording-red);animation:genie-pulse 1.1s ease-in-out infinite} :root:not(.android):not(.ios) #encounter-page .rec-head #rec-label{font-size:13px;font-weight:650;color:var(--danger)} :root:not(.android):not(.ios) #encounter-page .rec-head #microphone-name{display:block!important;position:static!important;clip:auto!important;clip-path:none!important;width:auto!important;height:auto!important;margin:0 0 0 auto!important;max-width:50%!important;font:400 11.5px/1.4 var(--font-sans)!important;color:var(--hint)!important;white-space:nowrap;overflow:hidden!important;text-overflow:ellipsis} :root:not(.android):not(.ios) #encounter-page[data-stage=paused] .rec-head .rec-dot{background:var(--review-dot);animation:none} :root:not(.android):not(.ios) #encounter-page[data-stage=paused] .rec-head #rec-label{color:var(--review-text)} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) #record-time{order:2;display:block!important;width:auto!important;margin:4px 0 0!important;font:500 46px/1 var(--font-mono)!important;letter-spacing:-.02em;text-align:center;color:var(--ink)} :root:not(.android):not(.ios) #encounter-page[data-stage=paused] #record-time{color:var(--review-text)} :root:not(.android):not(.ios) #encounter-page #record-time .clock-colon{margin:0 1px!important;width:auto!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) #capture-bars{order:3;display:flex!important;align-items:center;justify-content:center;gap:3px;height:34px;margin:0!important} :root:not(.android):not(.ios) #encounter-page #capture-bars i{display:block;width:3px;min-height:4px;border-radius:2px;background:var(--recording-red);transition:height .12s linear} :root:not(.android):not(.ios) #encounter-page[data-stage=paused] #capture-bars i{background:var(--border);height:4px!important} :root:not(.android):not(.ios) #encounter-page .rec-controls{order:4;display:flex;align-items:center;gap:10px;width:100%} :root:not(.android):not(.ios) #encounter-page .rec-controls>#pause:not([hidden]){display:inline-flex!important;align-items:center;justify-content:center;gap:9px;flex:0 0 42%;width:auto!important;height:52px!important;min-height:52px!important;margin:0!important;padding:0!important;border:1.5px solid var(--secondary)!important;border-radius:26px!important;background:var(--card)!important;color:var(--ink)!important;font-size:14px!important;font-weight:650!important;box-shadow:none!important;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page[data-stage=paused] .rec-controls>#pause{border-color:var(--recording-red)!important;background:var(--danger-bg)!important;color:var(--danger)!important} :root:not(.android):not(.ios) #encounter-page .rec-controls>#pause .pause-icon{position:relative;display:inline-block;width:14px;height:14px;font-size:0;line-height:0;color:transparent;flex:none} :root:not(.android):not(.ios) #encounter-page .rec-controls>#pause .pause-icon::before,:root:not(.android):not(.ios) #encounter-page .rec-controls>#pause .pause-icon::after{content:"";position:absolute;top:0;width:4px;height:14px;border-radius:1.5px;background:var(--ink)} :root:not(.android):not(.ios) #encounter-page .rec-controls>#pause .pause-icon::before{left:1px} :root:not(.android):not(.ios) #encounter-page .rec-controls>#pause .pause-icon::after{right:1px} :root:not(.android):not(.ios) #encounter-page[data-stage=paused] .rec-controls>#pause .pause-icon::before{left:0;width:14px;border-radius:50%;background:var(--danger)} :root:not(.android):not(.ios) #encounter-page[data-stage=paused] .rec-controls>#pause .pause-icon::after{display:none} :root:not(.android):not(.ios) #encounter-page .rec-controls>#finish:not([hidden]){display:inline-flex!important;align-items:center;justify-content:center;gap:9px;flex:1 1 auto;width:auto!important;height:52px!important;min-height:52px!important;margin:0!important;padding:0 12px!important;border:0!important;border-radius:26px!important;background:var(--accent)!important;color:var(--on-accent)!important;font-size:14px!important;font-weight:650!important;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 25%,transparent)!important;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .rec-controls>#finish .icon{display:none!important} :root:not(.android):not(.ios) #encounter-page .rec-controls>#finish::before{content:"";width:13px;height:13px;flex:none;border-radius:3px;background:currentColor} :root:not(.android):not(.ios) #encounter-page .rec-controls>#finish .action-label,:root:not(.android):not(.ios) #encounter-page .rec-controls>#pause .pause-label{position:static!important;width:auto!important;height:auto!important;clip-path:none!important;overflow:visible!important} :root:not(.android):not(.ios) #encounter-page .rec-controls>button[hidden]{display:none!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) #marker:not([hidden]){order:5;display:inline-flex!important;align-items:center;gap:7px;align-self:center;flex:0 0 auto!important;width:auto!important;max-width:max-content;height:30px!important;min-height:30px!important;margin:-2px 0 0!important;padding:0 11px!important;border:1px solid var(--border)!important;border-radius:999px!important;background:var(--row-highlight)!important;color:var(--secondary)!important;font-size:12px!important;font-weight:550!important;box-shadow:none!important} :root:not(.android):not(.ios) #encounter-page #marker .marker-icon{font-size:12px} :root:not(.android):not(.ios) #encounter-page #marker::after{content:"M";margin-left:2px;padding:0 4px;border:1px solid var(--border);border-radius:4px;background:var(--card);font:400 10.5px/1.5 var(--font-mono);color:var(--hint)} /* The design has no More disclosure beside Discard (gap 14): the recorder's own "Stop and delete the recording" is now the bar's Discard button and its menu (app.js deleteMenu); .recording-more stays in the DOM only as the hidden bridge the phones' own stop-and-delete surfaces click through (android-visit.js, ios-visit.js, phone.js), so it never renders here. */ :root:not(.android):not(.ios) #encounter-page .recording-more{display:none!important} :root:not(.android):not(.ios) #encounter-page .rec-foot{order:9;display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid var(--row-border)} :root:not(.android):not(.ios) #encounter-page .rec-foot>p{display:flex;gap:8px;margin:0;font-size:12px;line-height:1.55;color:var(--secondary);white-space:normal;text-align:left} /* the patient bar's nowrap stops here: the reassurance wraps in a narrow capture card (Genie's panel docked at 1100px) instead of running past its edge */ :root:not(.android):not(.ios) #encounter-page .rec-foot .icon{width:14px;height:14px;flex:none;margin-top:2px;color:var(--hint)} :root:not(.android):not(.ios) #encounter-page:not([data-stage=recording]):not([data-stage=paused]) :is(.rec-head,.rec-controls,#marker,.recording-more,.rec-foot,#capture-bars,#record-time){display:none!important} /* A microphone that will not restart while paused, or drops mid-recording, is said under the controls; the rest of the old copy block stays away */ :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) #visit-inputs :is(.capture-copy,#capture-controls-copy){display:contents!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) #visit-inputs .capture-copy>:is(#record-heading,#mode-detail,#recheck-processing,#processing-progress,#cancel-transcription,#recover,#capture-progress,.pipeline,.leave-note,#note-progress){display:none!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) #visit-inputs :is(#record-error,#record-error-support){display:none!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) #visit-inputs :is(#record-error,#record-error-support):not([hidden]){order:5;display:block!important;position:static!important;flex:0 0 auto!important;width:auto!important;max-width:46ch;height:auto!important;margin:-2px auto 0!important;padding:0!important;font-size:12.5px!important;line-height:1.45;text-align:center;color:var(--danger);white-space:normal!important;overflow:visible!important;text-overflow:clip!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) #visit-inputs #record-error-support:not([hidden]){display:inline-flex!important;color:var(--accent-text);font-size:12.5px!important} /* The progress panel. */ :root:not(.android):not(.ios) #encounter-page:not([data-stage=transcribing]) #capture-progress,:root:not(.android):not(.ios) #encounter-page:not([data-stage=drafting]) #note-progress,:root:not(.android):not(.ios) #encounter-page:not([data-stage=transcribing]):not([data-stage=drafting]) :is(.pipeline,.leave-note),:root:not(.android):not(.ios) #encounter-page:not([data-stage=transcribing]):not([data-stage=drafting]) #cancel-transcription{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing] #capture-progress:not([hidden]),:root:not(.android):not(.ios) #encounter-page[data-stage=drafting] #note-progress:not([hidden]){order:1;display:flex!important;flex:0 0 auto!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;min-height:0;text-align:left} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcribing],[data-stage=drafting]) .note-progress-copy{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:6px!important;margin:0!important;text-align:left} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcribing],[data-stage=drafting]) .note-progress-copy strong{font-size:15px;font-weight:650;color:var(--ink)} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcribing],[data-stage=drafting]) :is(#capture-progress-detail,#note-progress-detail){display:block!important;order:3;margin:0!important;font-size:12.5px;line-height:1.5;color:var(--secondary)} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcribing],[data-stage=drafting]) :is(#capture-progress-detail,#note-progress-detail):empty{display:none!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcribing],[data-stage=drafting]) :is(.note-steps,.progress-spinner,.note-retry[hidden]){display:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=drafting] #visit-inputs #note-progress[data-state=done] .progress-spinner{display:grid!important} /* the check when a note lands (three ids: an older rule hides it with the detail's id) */ :root:not(.android):not(.ios) #encounter-page[data-stage=drafting] #note-progress-time{font:400 13px/1.4 var(--font-mono);color:var(--secondary)} :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing] #capture-progress .transcribe-line,:root:not(.android):not(.ios) #encounter-page[data-stage=drafting] #note-progress .progress-bar{display:block!important;order:2;flex:none!important;width:auto!important;align-self:stretch;height:6px!important;margin:0!important;border-radius:3px;background:var(--row-border);overflow:hidden;position:relative} :root:not(.android):not(.ios) #encounter-page[data-stage=drafting] #note-progress .progress-bar i{position:absolute;left:0;top:0;bottom:0;width:38%;min-width:38%;animation:visit-sweep 1.4s ease-in-out infinite} /* no percentage while the note is written: a sweep */ @keyframes visit-sweep{0%{left:-38%}100%{left:100%}} :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing] #capture-progress .transcribe-line[hidden]{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing] #capture-progress .transcribe-line i,:root:not(.android):not(.ios) #encounter-page[data-stage=drafting] #note-progress .progress-bar i{display:block;height:100%;border-radius:3px;background:var(--accent);transition:width 140ms linear} :root:not(.android):not(.ios) #encounter-page .pipeline{order:4;display:flex;flex-direction:column;gap:10px;margin:0;padding:12px 0 0;border-top:1px solid var(--row-border);list-style:none} :root:not(.android):not(.ios) #encounter-page .pipeline>li{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:var(--hint)} :root:not(.android):not(.ios) #encounter-page .pipeline>li>b{display:flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;border:1.5px solid var(--border);border-radius:50%;background:transparent;color:var(--on-accent);font-size:10px;font-weight:700} :root:not(.android):not(.ios) #encounter-page .pipeline>li.done{color:var(--ink)} :root:not(.android):not(.ios) #encounter-page .pipeline>li.done>b{border-color:var(--signed-dot);background:var(--signed-dot)} :root:not(.android):not(.ios) #encounter-page .pipeline>li.done>b::before{content:"✓"} :root:not(.android):not(.ios) #encounter-page .pipeline>li.now{color:var(--ink);font-weight:600} :root:not(.android):not(.ios) #encounter-page .pipeline>li.now>b{border-color:var(--accent);background:var(--accent-tint)} :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing] .pipeline>li:nth-child(1){color:var(--ink)} :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing] .pipeline>li:nth-child(1)>b{border-color:var(--signed-dot);background:var(--signed-dot)} :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing] .pipeline>li:nth-child(1)>b::before{content:"✓"} :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing] .pipeline>li:nth-child(2){color:var(--ink);font-weight:600} :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing] .pipeline>li:nth-child(2)>b{border-color:var(--accent);background:var(--accent-tint)} :root:not(.android):not(.ios) #encounter-page[data-stage=drafting] .pipeline>li:nth-child(-n+2){color:var(--ink)} :root:not(.android):not(.ios) #encounter-page[data-stage=drafting] .pipeline>li:nth-child(-n+2)>b{border-color:var(--signed-dot);background:var(--signed-dot)} :root:not(.android):not(.ios) #encounter-page[data-stage=drafting] .pipeline>li:nth-child(-n+2)>b::before{content:"✓"} :root:not(.android):not(.ios) #encounter-page[data-stage=drafting] .pipeline>li:nth-child(3){color:var(--ink);font-weight:600} :root:not(.android):not(.ios) #encounter-page[data-stage=drafting] .pipeline>li:nth-child(3)>b{border-color:var(--accent);background:var(--accent-tint)} :root:not(.android):not(.ios) #encounter-page .leave-note{order:5;margin:0;padding-top:12px;border-top:1px solid var(--row-border);font-size:12px;line-height:1.55;color:var(--hint)} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcribing],[data-stage=drafting]) #cancel-transcription:not([hidden]){order:6;display:inline-flex!important;align-items:center;align-self:flex-start;width:auto!important;height:auto!important;min-height:0!important;margin:0!important;padding:6px 0!important;border:0!important;background:none!important;box-shadow:none!important;color:var(--accent-text)!important;font-size:12.5px!important;font-weight:550!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcribing],[data-stage=drafting]) #cancel-transcription .icon{display:none!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcribing],[data-stage=drafting]) #cancel-transcription .action-label{position:static!important;width:auto!important;height:auto!important;clip-path:none!important;overflow:visible!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcribing],[data-stage=drafting]) #transcript-pane #transcript{color:var(--hint)!important;background-image:none!important;animation:none!important} /* ---- saved: nothing was heard — one card; otherwise the row Recording saved · Start recording · Recover recording. ---- */ :root:not(.android):not(.ios) #encounter-page[data-preparing][data-capturing][data-working][data-stage=saved][data-silent=true] #visit-inputs:not([hidden]){display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;justify-content:center!important;align-content:flex-start!important;gap:14px 10px!important;flex:1 1 auto;min-height:0;height:auto!important;margin:0!important;padding:36px 24px!important;border:1px solid var(--border)!important;border-radius:12px!important;background:var(--card)!important;box-shadow:var(--shadow-chip)!important;text-align:center;overflow:hidden auto} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] #visit-inputs :is(.visit-head,.title-row,.visit-recording-group,#capture-controls,.capture-copy){display:contents!important} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] #visit-inputs :is(.visit-patient-group,#visit-import-panel,#draft,.rec-head,.rec-controls,#marker,.recording-more,.rec-foot,.pipeline,.leave-note,#cancel-transcription,#input-level,#capture-bars,#record-time,#paused-for,#microphone-name,#mode-detail,#processing-progress,#recheck-processing[hidden],#capture-progress,#note-progress,.capture-other,#offline-choice){display:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] #visit-inputs :is(#record-heading,#record-error,.silent-foot){flex:0 0 100%!important;max-width:100%} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] .silent-mark{order:1!important;flex:0 0 100%!important;width:52px!important;max-width:52px;margin:0 auto;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--danger-bg);color:var(--danger)} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] .silent-mark .icon{width:24px;height:24px} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] #record-heading{order:2!important;position:static!important;width:auto!important;height:auto!important;clip:auto!important;overflow:visible!important;margin:0!important;font-size:19px!important;font-weight:650!important;letter-spacing:-.02em;color:var(--ink)!important} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] #record-error:not([hidden]){order:3!important;display:block;position:static!important;flex:0 0 100%!important;max-width:48ch;margin:0 auto!important;height:auto!important;margin:0!important;padding:0!important;font-size:13.5px!important;line-height:1.65;color:var(--secondary)!important;white-space:normal!important;overflow:visible!important} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] .capture-input{order:4!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px;flex:0 0 560px!important;width:560px!important;max-width:100%;margin:6px max(0px,calc((100% - 560px) / 2)) 0!important;height:auto!important;min-height:0!important;margin:6px 0 0!important;padding:14px!important;border:1px solid var(--border);border-radius:10px;background:var(--row-highlight);text-align:left} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] .capture-input::before{content:"Microphone";font-size:12.5px;font-weight:600;color:var(--secondary)} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] .capture-input>#visit-microphone{display:block!important;grid-column:auto!important;width:100%!important;max-width:none!important;height:40px!important;min-height:40px!important;margin:0!important;padding:0 10px!important;border:1px solid var(--border)!important;border-radius:8px!important;background:var(--card)!important;color:var(--ink)!important;font-size:13.5px!important;box-shadow:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] #record,:root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] #write-myself{order:5!important;flex:0 0 auto!important} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] #record:not([hidden]){display:inline-flex!important;align-items:center;gap:8px;width:auto!important;height:44px!important;min-height:44px!important;margin:4px 0 0!important;padding:0 18px!important;border:0!important;border-radius:8px!important;background:var(--accent)!important;color:var(--on-accent)!important;font-size:13.5px!important;font-weight:600!important;box-shadow:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] #record .icon{width:16px;height:16px} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] #record .action-label{position:static!important;width:auto!important;height:auto!important;clip-path:none!important;overflow:visible!important} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] #write-myself{display:inline-flex!important;align-items:center;gap:8px;width:auto!important;height:44px!important;min-height:44px!important;margin:4px 0 0!important;padding:0 16px!important;border:1px solid var(--border)!important;border-radius:8px!important;background:var(--card)!important;color:var(--ink)!important;font-size:13.5px!important;font-weight:550!important;box-shadow:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] #write-myself .icon{display:none} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] .silent-foot{order:6!important;margin:0;font-size:12px;color:var(--hint)} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] #recover:not([hidden]){order:7!important;display:inline-flex!important;flex:0 0 auto!important;width:auto!important;height:auto!important;min-height:0!important;margin:0!important;padding:4px 0!important;border:0!important;background:none!important;box-shadow:none!important;color:var(--accent-text)!important;font-size:12.5px!important;font-weight:550!important} /* the kept recording can be run through transcription again — it says nothing was heard again, never invents words */ :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] #recover .icon{display:none} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] #recover .action-label{position:static!important;width:auto!important;height:auto!important;clip-path:none!important;overflow:visible!important} :root:not(.android):not(.ios) #encounter-page:not([data-stage=saved]) :is(#write-myself,.silent-foot,.silent-mark),:root:not(.android):not(.ios) #encounter-page[data-stage=saved]:not([data-silent=true]) :is(#write-myself,.silent-foot,.silent-mark){display:none!important} /* A stopped transcription: the row. */ :root:not(.android):not(.ios) #encounter-page[data-preparing][data-capturing][data-working][data-stage=saved]:not([data-silent=true]) #visit-inputs:not([hidden]){display:flex!important;flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important;gap:16px;flex:none;min-height:66px;margin:0!important;padding:12px 18px!important;border:1px solid var(--border)!important;border-radius:12px!important;background:var(--card)!important;box-shadow:var(--shadow-chip)!important} :root:not(.android):not(.ios) #encounter-page[data-stage=saved]:not([data-silent=true]) #visit-inputs :is(.visit-head,.title-row,.visit-recording-group,#capture-controls){display:contents!important} :root:not(.android):not(.ios) #encounter-page[data-stage=saved]:not([data-silent=true]) #visit-inputs :is(.visit-patient-group,#visit-import-panel,#draft,.capture-input,.capture-other,#capture-import,#cancel-transcription,.recording-more,.rec-head,.rec-controls,.rec-foot,#marker,.pipeline,.leave-note,#capture-bars,#record-time,#input-level,#paused-for,#capture-progress,#note-progress,#offline-choice){display:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=saved]:not([data-silent=true]) .capture-copy{flex:1 1 auto;min-width:0;max-width:none!important;width:auto!important;margin:0!important;padding:0!important;display:flex;flex-direction:column;gap:2px} :root:not(.android):not(.ios) #encounter-page[data-stage=saved]:not([data-silent=true]) #record-heading{position:static!important;width:auto!important;height:auto!important;clip:auto!important;overflow:visible!important;margin:0!important;font-size:14px!important;font-weight:600!important;color:var(--ink)!important} :root:not(.android):not(.ios) #encounter-page[data-stage=saved]:not([data-silent=true]) :is(#mode-detail,#processing-progress){display:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=saved]:not([data-silent=true]) #record-error:not([hidden]){display:block;position:static!important;height:auto!important;max-width:none!important;margin:0!important;padding:0!important;font-size:12.5px!important;line-height:1.45;color:var(--danger);white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis} :root:not(.android):not(.ios) #encounter-page[data-stage=saved]:not([data-silent=true]) #capture-controls>button:not([hidden]){flex:0 0 auto;height:40px!important;min-height:40px!important;padding:0 15px!important;margin:0!important;border-radius:8px!important;font-size:13px!important;font-weight:600!important} :root:not(.android):not(.ios) #encounter-page[data-stage=saved]:not([data-silent=true]) #record{order:10;border:1px solid var(--border)!important;background:var(--card)!important;color:var(--ink)!important;box-shadow:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=saved]:not([data-silent=true]) #recover{order:11;border:0!important;background:var(--accent)!important;color:var(--on-accent)!important} /* ---- transcript / draft / signed: the two cards; the recorder shows only as the Add recording row. ------------------ */ :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcript],[data-stage=draft],[data-stage=signed]):not([data-options=true]) #visit-inputs{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-preparing][data-capturing][data-working]:is([data-stage=transcript],[data-stage=draft])[data-options=true] #visit-inputs:not([hidden]){display:flex!important;flex-direction:row!important;align-items:center!important;flex-wrap:nowrap;gap:16px;flex:none;min-height:66px;margin:0!important;padding:12px 18px!important;border:1px solid var(--border)!important;border-radius:12px!important;background:var(--card)!important;box-shadow:var(--shadow-chip)!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcript],[data-stage=draft])[data-options=true] #visit-inputs :is(.visit-head,.title-row,.visit-recording-group,#capture-controls){display:contents!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcript],[data-stage=draft])[data-options=true] #visit-inputs :is(.visit-patient-group,#visit-import-panel,#draft,.capture-input,.capture-other,#capture-import,#cancel-transcription,.recording-more,.rec-head,.rec-controls,.rec-foot,#marker,.pipeline,.leave-note,#capture-bars,#record-time,#input-level,#paused-for,#mode-detail,#processing-progress,#recover:disabled,#write-myself,.silent-mark,.silent-foot,#capture-progress,#note-progress,#offline-choice){display:none!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcript],[data-stage=draft])[data-options=true] .capture-copy{flex:1 1 auto;min-width:0;margin:0!important;padding:0!important;display:flex;flex-direction:column;gap:2px} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcript],[data-stage=draft])[data-options=true] #record-heading{position:static!important;width:auto!important;height:auto!important;clip:auto!important;overflow:visible!important;margin:0!important;font-size:14px!important;font-weight:600!important;color:var(--ink)!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcript],[data-stage=draft])[data-options=true] #record-error:not([hidden]){display:block;margin:0!important;font-size:12.5px!important;line-height:1.45;color:var(--danger);white-space:normal!important;overflow:visible!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcript],[data-stage=draft])[data-options=true] #capture-controls>button:not([hidden]){flex:0 0 auto;height:40px!important;min-height:40px!important;padding:0 15px!important;margin:0!important;border:0!important;border-radius:8px!important;background:var(--accent)!important;color:var(--on-accent)!important;font-size:13px!important;font-weight:600!important;box-shadow:none!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcript],[data-stage=draft])[data-options=true] #recover:not(:disabled){order:11} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcript],[data-stage=draft])[data-options=true] #capture-controls:has(#recover:not(:disabled)) #record{order:10;border:1px solid var(--border)!important;background:var(--card)!important;color:var(--ink)!important} /* ---- The Review queue: the position is the kicker; Back to Review and Skip for now sit in the top row. ---------------- */ :root:not(.android):not(.ios) #review-page .review-queue[hidden]{display:none!important} :root:not(.android):not(.ios) #review-page #encounter-page>.visit-top{display:flex!important} } /* ---- The sidebar (desktop and web): the visit under "In progress" / "Just signed" — initials, name, a dot and the stage; while a visit records, Record a visit gives way to one line. ------------------------------------------------------------------ */ @media (min-width:768px){ :root:not(.android):not(.ios) .sidebar .main-nav .cv-label{order:9;margin:14px 0 6px!important;padding:0 10px;font:650 10px/1.4 var(--font-sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--hint)} :root:not(.android):not(.ios) .sidebar .main-nav .cv-label[hidden]{display:none!important} :root:not(.android):not(.ios) .sidebar .main-nav #current-visit[data-live]:not([hidden]){order:10!important;display:flex!important;align-items:center;gap:10px;width:100%;margin:0!important;padding:9px 10px!important;border:0!important;border-radius:8px!important;background:var(--accent-tint)!important;color:var(--ink)!important;font-weight:500!important;text-align:left;box-shadow:none!important;animation:none} :root:not(.android):not(.ios) .sidebar .main-nav #current-visit[data-live]:not([hidden])::before{display:none!important} :root:not(.android):not(.ios) .sidebar .main-nav #current-visit .nav-icon,:root:not(.android):not(.ios) .sidebar .main-nav #current-visit>span:not(.cv-avatar):not(.cv-body){display:none!important} :root:not(.android):not(.ios) .sidebar #current-visit .cv-avatar{display:flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border:1px solid var(--accent-surface);border-radius:8px;background:var(--card);color:var(--accent-text);font-size:11.5px;font-weight:650} :root:not(.android):not(.ios) .sidebar #current-visit .cv-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} :root:not(.android):not(.ios) .sidebar #current-visit .cv-name{display:block;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :root:not(.android):not(.ios) .sidebar #current-visit .cv-status{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--hint);white-space:nowrap;overflow:hidden} :root:not(.android):not(.ios) .sidebar #current-visit .cv-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--hint)} :root:not(.android):not(.ios) .sidebar #current-visit[data-live] #current-visit-tag,:root:not(.android):not(.ios) .sidebar #current-visit #current-visit-tag{display:inline!important;margin:0!important;font:400 11.5px/1.3 var(--font-sans)!important;letter-spacing:0!important;color:inherit!important;overflow:hidden;text-overflow:ellipsis} :root:not(.android):not(.ios) .sidebar #current-visit #current-visit-tag::after{content:none!important} :root:not(.android):not(.ios) .sidebar #current-visit[data-state=live] .cv-status{color:var(--danger)} :root:not(.android):not(.ios) .sidebar #current-visit[data-state=live] .cv-dot{background:var(--recording-red);animation:genie-pulse 1.1s ease-in-out infinite} :root:not(.android):not(.ios) .sidebar #current-visit[data-state=warn] .cv-status{color:var(--review-text)} :root:not(.android):not(.ios) .sidebar #current-visit[data-state=warn] .cv-dot{background:var(--review-dot)} :root:not(.android):not(.ios) .sidebar #current-visit[data-state=accent] .cv-status{color:var(--accent-text)} :root:not(.android):not(.ios) .sidebar #current-visit[data-state=accent] .cv-dot{background:var(--accent)} :root:not(.android):not(.ios) .sidebar #current-visit[data-state=ok] .cv-status{color:var(--signed-text)} :root:not(.android):not(.ios) .sidebar #current-visit[data-state=ok] .cv-dot{background:var(--signed-dot)} :root:not(.android):not(.ios) .sidebar .record-note{display:none;margin:0 0 12px;padding:0 8px;font-size:12px;line-height:1.55;color:var(--hint)} :root:not(.android):not(.ios) body.recording .sidebar .record-note{display:block} :root:not(.android):not(.ios) body.recording .sidebar .record-visit{display:none!important} } /* The visit's compact rules follow the room the page has (the .workspace container), not the window: with Genie's panel docked a wide window leaves the page what a narrow one would. The old window widths beside the 218px menu: 1199px → 981px, 1359px → 1141px. */ @media (min-width:768px){@container workspace (max-width:981px){ :root:not(.android):not(.ios) #encounter-page .sources-tools>button:not([hidden]){width:32px!important;padding:0!important;justify-content:center} :root:not(.android):not(.ios) #encounter-page .sources-tools>button .action-label{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap} }} @media (min-width:768px) and (max-height:760px){ :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused])>#visit-inputs:not([hidden]){gap:10px!important;padding:14px 18px!important} :root:not(.android):not(.ios) #encounter-page .rec-foot>p>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* a short window: each line of reassurance stays one line (ending in an ellipsis) */ :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) #record-time{font-size:36px!important;margin-top:0!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) #capture-bars{height:26px!important} :root:not(.android):not(.ios) #encounter-page .rec-controls>:is(#pause,#finish):not([hidden]){height:46px!important;min-height:46px!important} :root:not(.android):not(.ios) #encounter-page .rec-foot{padding-top:8px;gap:4px} :root:not(.android):not(.ios) #encounter-page .recording-more>summary{padding:2px 8px} } /* A textarea grown to its content by the pager never shrinks back in the flow (a window that narrowed below 768px). */ .pg-flow>textarea#transcript{flex:0 0 auto} @media (max-width:767px){.rec-head,.rec-foot,.pipeline,.leave-note,.silent-mark,.silent-foot,#write-myself,.live-head,.transcript-foot,.strip-lock,.strip-actions,.strip-sep{display:none!important}} /* phone widths keep their own screens */ /* ---- Smooth movement (owner, 23 Sept 2026) -------------------------------------------------------------------------- A change of stage or screen paints inside a view transition (app.js smoothPaint): the parts named here keep their identity and move to their new places; the rest cross-fades. Dialogs, Genie's box and the toast fade in and out. Reduced motion turns all of it off (smoothPaint skips the transition too). */ @media (min-width:768px) and (prefers-reduced-motion:no-preference){ :root:not(.android):not(.ios) #visit-strip{view-transition-name:visit-strip} :root:not(.android):not(.ios) #visit-inputs{view-transition-name:visit-inputs} :root:not(.android):not(.ios) #encounter-page>.visit-top{view-transition-name:visit-top} :root:not(.android):not(.ios) #sources-card{view-transition-name:visit-sources} :root:not(.android):not(.ios) #note-card{view-transition-name:visit-note} :root:not(.android):not(.ios) #current-visit{view-transition-name:current-visit} :root:not(.android):not(.ios) #genie-bar{view-transition-name:genie} ::view-transition-old(root),::view-transition-new(root){animation-duration:.22s} ::view-transition-group(*){animation-duration:.28s;animation-timing-function:cubic-bezier(.2,.7,.2,1)} ::view-transition-old(visit-inputs),::view-transition-new(visit-inputs),::view-transition-old(visit-sources),::view-transition-new(visit-sources),::view-transition-old(visit-note),::view-transition-new(visit-note){animation-duration:.22s} :root:not(.android):not(.ios) dialog[open]{transition:opacity .16s ease;opacity:1} @starting-style{:root:not(.android):not(.ios) dialog[open]{opacity:0}} :root:not(.android):not(.ios) dialog[open]::backdrop{transition:opacity .16s ease;opacity:1} @starting-style{:root:not(.android):not(.ios) dialog[open]::backdrop{opacity:0}} :root:not(.android):not(.ios) #genie-convo:not([hidden]){transition:opacity .16s ease;opacity:1} @starting-style{:root:not(.android):not(.ios) #genie-convo:not([hidden]){opacity:0}} :root:not(.android):not(.ios) #message:not(:empty){transition:opacity .16s ease;opacity:1} @starting-style{:root:not(.android):not(.ios) #message:not(:empty){opacity:0}} } @media (min-width:768px){@container workspace (max-width:1141px){ :root:not(.android):not(.ios) #encounter-page .editor-tools>#edit-note .action-label{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .editor-tools>#edit-note{padding:0 9px!important} }} /* ---- Under 1360px the bar keeps its one line: the steps show their words only for the current one, the visit type and the note's template shrink, Back to Review keeps its chevron. ----------------------------------------------------------------- */ @media (min-width:768px){@container workspace (max-width:1141px){ :root:not(.android):not(.ios) #encounter-page .visit-strip #visit-steps>div:not(.active):not(.rec-recording):not(.rec-paused)>span{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .visit-strip #visit-steps>div+div::before{width:12px;margin:0 6px 0 2px!important} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>#visit-type{min-width:100px!important;max-width:130px} :root:not(.android):not(.ios) #encounter-page .visit-strip #delete{padding:0 11px!important} :root:not(.android):not(.ios) #encounter-page .editor-tools>#note-template{min-width:118px;max-width:134px} :root:not(.android):not(.ios) #encounter-page .visit-nav>#review-back{width:32px!important;padding:0!important;justify-content:center} :root:not(.android):not(.ios) #encounter-page .visit-nav>#review-back .action-label{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap} }} /* The blocks below are the desktop and web design (DESIGN_GUIDE §12); the phones keep their own tiers (phone.css, android*.css, ios*.css). */ @media (min-width:768px){ /* ---- The patient picker (DESIGN_GUIDE §12.2): one dialog for Change, Assign patient, Sign on a bare visit and New patient ---- */ :root:not(.android):not(.ios) #clinical-dialog.patient-picker{width:min(600px,92vw);max-height:84dvh;padding:0;border-radius:var(--r-panel);box-shadow:var(--shadow-card);overflow:hidden;margin-top:9vh} :root:not(.android):not(.ios) #clinical-dialog.patient-picker #clinical-dialog-header,:root:not(.android):not(.ios) #clinical-dialog.patient-picker .dialog-actions{display:none} :root:not(.android):not(.ios) #clinical-dialog.patient-picker[open]{display:flex;flex-direction:column} :root:not(.android):not(.ios) #clinical-dialog.patient-picker #clinical-form,:root:not(.android):not(.ios) #clinical-dialog.patient-picker #clinical-dialog-content,:root:not(.android):not(.ios) #clinical-dialog.patient-picker .picker,:root:not(.android):not(.ios) .picker-body{display:flex;flex-direction:column;min-height:0;flex:1 1 auto} :root:not(.android):not(.ios) #clinical-dialog.patient-picker .picker-head{flex:none} .picker-head{display:flex;align-items:flex-start;gap:12px;padding:18px 20px 14px} .picker-copy{flex:1;min-width:0}.picker-title{font-size:18px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}.picker-sub{font-size:12.5px;color:var(--ink2);margin-top:4px} .picker-close{width:32px;height:32px;min-height:0;border-radius:8px;border:none;background:var(--panel2);color:var(--ink2);display:flex;align-items:center;justify-content:center;flex:none;padding:0}.picker-close .icon{width:16px;height:16px} .picker-search-block{padding:0 20px 12px} .picker-search{display:flex;align-items:center;gap:10px;height:44px;border-radius:9px;border:1.5px solid var(--accent);background:var(--panel);padding:0 12px;box-shadow:0 0 0 3px var(--accent-soft)} .picker-search>.icon{width:17px;height:17px;color:var(--ink3);flex:none} .picker-search input.picker-query{flex:1;min-width:0;width:auto;height:auto;min-height:0;border:none;background:transparent;color:var(--ink);outline:none;font-size:14px;padding:0;box-shadow:none} .picker-clear{width:24px;height:24px;min-height:0;border-radius:6px;border:none;background:var(--panel2);color:var(--ink3);display:flex;align-items:center;justify-content:center;padding:0}.picker-clear .icon{width:13px;height:13px} .picker-list{flex:1 1 auto;overflow-y:auto;min-height:0;border-top:1px solid var(--line2);padding:6px 8px 8px} .picker-list-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 6px} .picker-kicker{font-size:10.5px;font-weight:650;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink3)}.picker-keys{font-size:11px;color:var(--ink3)} .picker-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;text-align:left;padding:9px 10px;border-radius:9px;border:none;background:transparent;color:var(--ink);margin-bottom:2px;min-height:0;height:auto;font:inherit} .picker-row.is-active{background:var(--panel2)}.picker-row.is-sel{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)} .picker-avatar{width:36px;height:36px;border-radius:9px;background:var(--accent-soft);color:var(--accent-text);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:650} .picker-row.is-sel .picker-avatar,.picker-row.is-current .picker-avatar{background:var(--accent);color:var(--accent-ink)} .picker-who{min-width:0}.picker-name{font-size:14px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.picker-hit{color:var(--accent-text);font-weight:700} .picker-meta{display:flex;align-items:center;gap:8px;margin-top:2px;font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden}.picker-dot{color:var(--line)}.picker-mrn{font-family:var(--font-mono)}.picker-mrn.is-none,.picker-seen{color:var(--ink3)} .picker-tag{font-size:11px;font-weight:600;border-radius:var(--r-badge);white-space:nowrap;padding:0}.picker-tag.is-current{color:var(--accent-text);background:var(--accent-soft);padding:3px 7px}.picker-tag.is-same{color:var(--warn);background:var(--warn-bg);padding:3px 7px} .picker-empty{padding:18px 10px 10px;font-size:13px;color:var(--ink2);line-height:1.6}.picker-empty strong{color:var(--ink);font-weight:600} .picker-new{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:9px 10px;border-radius:9px;border:1px dashed var(--accent-line);background:transparent;color:var(--accent-text);margin-top:6px;font-size:14px;font-weight:600;height:auto;min-height:0}.picker-new.is-hot{border-color:var(--accent)} .picker-new-icon{width:36px;height:36px;border-radius:9px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;flex:none}.picker-new-icon .icon{width:17px;height:17px} .picker-foot{display:flex;align-items:center;gap:10px;padding:12px 20px;border-top:1px solid var(--line2);background:var(--panel2);flex-wrap:wrap;flex:none} .picker-hint{flex:1;min-width:200px;font-size:12px;color:var(--ink3);line-height:1.5} .picker-cancel{height:38px;min-height:0;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink2);font-size:13px;font-weight:550} .picker-assign,.picker-create{display:inline-flex;align-items:center;gap:7px;height:38px;min-height:0;padding:0 16px;border-radius:8px;border:none;background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:600;white-space:nowrap} .picker-assign:disabled,.picker-create:disabled{background:var(--panel);color:var(--ink3);box-shadow:inset 0 0 0 1px var(--line);cursor:not-allowed} .picker-create .icon{width:16px;height:16px} .picker-new-form{flex:1 1 auto;overflow-y:auto;min-height:0;padding:0 20px 18px;display:flex;flex-direction:column;gap:14px} .picker-back{align-self:flex-start;display:flex;align-items:center;gap:6px;border:none;background:none;padding:0;color:var(--accent-text);font-size:12.5px;font-weight:550;height:auto;min-height:0}.picker-back .icon{width:14px;height:14px} .picker-dup{display:flex;align-items:center;gap:12px;border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:10px;padding:11px 13px;flex-wrap:wrap}.picker-dup>.icon{width:17px;height:17px;color:var(--warn);flex:none} .picker-dup-copy{flex:1;min-width:200px}.picker-dup-title{font-size:13px;font-weight:600;color:var(--ink)}.picker-dup-sub{font-size:12px;color:var(--ink2);margin-top:2px} .picker-dup-use{height:32px;min-height:0;padding:0 12px;border-radius:7px;border:1px solid var(--warn-line);background:var(--panel);color:var(--ink);font-size:12.5px;font-weight:600;white-space:nowrap} .picker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.picker-field.is-wide{grid-column:1/-1} .picker-label{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:6px}.picker-opt{font-weight:400;color:var(--ink3)} .picker-input,.picker-phone,.picker-seg{width:100%;height:44px;min-height:0;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:0 12px;font-size:13.5px;box-sizing:border-box} .picker-input.is-name{font-size:14.5px}.picker-input.is-mono,.picker-phone input.is-mono{font-family:var(--font-mono);font-size:13px} .picker-seg{display:flex;padding:0;overflow:hidden}.picker-seg button{flex:1;border:none;border-left:1px solid var(--line);background:var(--panel);color:var(--ink2);font-size:13px;font-weight:500;min-height:0;height:auto;padding:0;border-radius:0}.picker-seg button:first-child{border-left:none}.picker-seg button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent-text);font-weight:600} .picker-phone{display:flex;padding:0;overflow:hidden}.picker-prefix{display:flex;align-items:center;padding:0 10px;border-right:1px solid var(--line);background:var(--panel2);font-size:13px;color:var(--ink2);font-family:var(--font-mono)}.picker-phone input{flex:1;min-width:0;width:auto;border:none;background:transparent;color:var(--ink);padding:0 11px;font-size:13.5px;outline:none;height:auto;min-height:0;box-shadow:none} .picker-age{font-size:12px;color:var(--ink3);margin-top:5px;min-height:16px}.picker-age.is-ok{color:var(--ok)}.picker-age.is-bad{color:var(--danger)}.picker-fine{font-size:12px;color:var(--ink3);margin-top:5px} :root:not(.android):not(.ios) #clinical-dialog.patient-picker #clinical-dialog-error{margin:0;padding:0 20px 10px;font-size:12.5px;color:var(--danger)}:root:not(.android):not(.ios) #clinical-dialog.patient-picker #clinical-dialog-error:empty{display:none} /* the strip under the bar after Assign */ .visit-reassigned{flex:none;display:flex;align-items:center;gap:12px;border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:10px;padding:10px 14px;flex-wrap:wrap} .visit-reassigned>.icon{width:17px;height:17px;color:var(--accent-text);flex:none;stroke-width:2} .reassigned-text{font-size:13px;color:var(--ink);flex:1;min-width:220px} .reassigned-undo{height:30px;min-height:0;padding:0 12px;border-radius:7px;border:1px solid var(--accent-line);background:var(--panel);color:var(--accent-text);font-size:12.5px;font-weight:600} .reassigned-dismiss{width:30px;height:30px;min-height:0;border-radius:7px;border:none;background:transparent;color:var(--ink3);display:flex;align-items:center;justify-content:center;padding:0}.reassigned-dismiss .icon{width:15px;height:15px} /* Merge with… on the patient record (clinical.js openMergePicker): the picker's find mode, what moves above its foot, and the same strip on the record kept — "Merged from … · Undo". */ .merge-picker .merge-summary{flex:none;margin:0 20px 12px} /* ---- Capture states to the design (DESIGN_GUIDE §12.1): the live card, the panel, transcribing, the silent card ---- */ :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused],[data-stage=transcribing],[data-stage=drafting]) #transcript-lines{padding:8px 18px 18px!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused],[data-stage=transcribing],[data-stage=drafting]) .speaker-line{column-gap:10px;padding:10px 0!important;border-bottom:1px solid var(--line2)!important;align-items:baseline} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused],[data-stage=transcribing],[data-stage=drafting]) .speaker{font-size:12px!important;font-weight:600} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused],[data-stage=transcribing],[data-stage=drafting]) .speaker-time{font-size:11.5px;color:var(--ink3);font-family:var(--font-mono)} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused],[data-stage=transcribing],[data-stage=drafting]) .speaker-text{font-size:15px;line-height:1.6;color:var(--body);margin-top:2px} :root:not(.android):not(.ios) #encounter-page[data-stage=recording] .speaker-line.is-partial .speaker-text{color:var(--ink3);font-style:italic} :root:not(.android):not(.ios) .speaker-line.is-partial .caret{font-style:normal;color:var(--accent)} :root:not(.android):not(.ios) .live-skeleton{display:flex;flex-direction:column;gap:9px;padding:14px 0 0 54px} :root:not(.android):not(.ios) .live-skeleton i{display:block;height:11px;border-radius:4px;background:var(--line2)} :root:not(.android):not(.ios) .live-skeleton i:first-child{width:82%}:root:not(.android):not(.ios) .live-skeleton i:nth-child(2){width:61%} :root:not(.android):not(.ios) .live-skeleton span{font-size:12px;color:var(--ink3);margin-top:4px} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcribing],[data-stage=drafting]) :is(#kept-audio,.transcript-foot){display:none!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcribing],[data-stage=drafting]) .document.is-transcribing #transcript-pane{animation:none;background:none} /* the panel */ :root:not(.android):not(.ios) #encounter-page .rec-head #microphone-name::before{content:none} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) .rec-head .rec-dot{animation:none} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) #record-time .clock-colon{animation:none!important} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) #capture-bars{height:34px} :root:not(.android):not(.ios) #encounter-page[data-stage=paused] #capture-bars i{height:6px!important;background:var(--line)} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) .rec-controls>#pause .pause-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:0} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) .rec-controls>#pause .pause-icon::before,:root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) .rec-controls>#pause .pause-icon::after{display:none} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) .rec-controls>#pause .pause-icon .icon{width:18px;height:18px;stroke:none;fill:currentColor} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) #marker .marker-icon{display:inline-flex;width:14px;height:14px;font-size:0} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) #marker .marker-icon .icon{width:14px;height:14px;stroke-width:1.8} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) #marker:not([hidden]){align-self:center;width:auto!important;max-width:max-content} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) #visit-markers:not([hidden]){order:6!important;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:0!important;margin:0!important;border:0} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) #visit-markers .visit-markers-label{display:none} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused]) #visit-markers button{height:auto;min-height:0;padding:3px 7px;border:0;border-radius:var(--r-badge);background:var(--accent-soft);color:var(--accent-text);font:400 11.5px/1.4 var(--font-mono)} :root:not(.android):not(.ios) #encounter-page[data-stage=paused] #visit-inputs .capture-input{display:flex!important;order:7;align-items:center;gap:10px;width:auto!important;max-width:none;margin:0!important;padding:0!important} :root:not(.android):not(.ios) #encounter-page[data-stage=paused] #visit-inputs .capture-input>label{font-size:12.5px;color:var(--ink2)} :root:not(.android):not(.ios) #encounter-page[data-stage=paused] #visit-inputs #visit-microphone:not([hidden]){display:block!important;height:40px;min-height:0;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:0 10px;font-size:13.5px} :root:not(.android):not(.ios) #encounter-page[data-stage=paused] #visit-inputs .silent-test{display:none} /* transcribing: the title, the bar */ :root:not(.android):not(.ios) #encounter-page:is([data-stage=transcribing],[data-stage=drafting]) :is(#capture-progress,#note-progress) .note-progress-copy strong{font-size:15px;font-weight:650} :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing][data-working=true] #capture-progress .transcribe-line:not([hidden]){flex:0 0 6px!important;height:6px!important;min-width:0;width:auto!important;margin:0!important;border-radius:3px;background:var(--line2);overflow:hidden} :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing][data-working=true] #capture-progress .transcribe-line:not([hidden]) i{background:var(--accent);border-radius:3px;transition:width 140ms linear} :root:not(.android):not(.ios) #encounter-page[data-stage=drafting] #note-progress-time{font-family:var(--font-sans);font-size:12.5px;color:var(--ink2)} /* transcribing: the title row carries the honest percentage; the eta sits under the bar, never beside the title (design 478-485). */ :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing] #capture-progress .note-progress-copy{flex-direction:row!important;align-items:baseline!important;justify-content:space-between!important;gap:10px!important} :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing] #capture-progress-pct{order:1;flex:none;font:400 13px/1 var(--font-mono);color:var(--secondary)} :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing] #capture-progress-pct[hidden]{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing][data-working=true] #capture-progress #capture-progress-detail{display:block!important;order:3;margin:0!important;font-size:12.5px;line-height:1.5;color:var(--secondary)} :root:not(.android):not(.ios) #encounter-page[data-stage=transcribing][data-working=true] #capture-progress #capture-progress-detail:empty{display:none!important} /* the silent card: one centred column, the microphone test, no Try again link */ :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] #visit-inputs .silent-actions{order:5!important;flex:0 0 100%!important;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] #visit-inputs .capture-input .silent-test{margin-top:2px} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] #visit-inputs .silent-actions>button{flex:0 0 auto!important;width:auto!important;margin:0!important} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] #visit-inputs #recover{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=saved][data-silent=true] #visit-inputs .silent-foot{order:6} :root:not(.android):not(.ios) .silent-test{display:flex;align-items:center;gap:10px} :root:not(.android):not(.ios) #encounter-page:not([data-silent=true]) .silent-test{display:none} :root:not(.android):not(.ios) #test-microphone{height:34px;min-height:0;padding:0 12px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:12.5px;font-weight:550;white-space:nowrap} :root:not(.android):not(.ios) .silent-test-bars{display:flex;align-items:center;gap:3px;height:22px;flex:1} :root:not(.android):not(.ios) .silent-test-bars i{display:block;width:3px;height:4px;border-radius:2px;background:var(--line)} :root:not(.android):not(.ios) .silent-test-bars.is-testing i{background:var(--ok)} :root:not(.android):not(.ios) #test-state{font-size:12px;color:var(--ink3);white-space:nowrap}:root:not(.android):not(.ios) #test-state.is-ok{color:var(--ok)} /* ---- The note card to the design (DESIGN_GUIDE §12.1): one-row head before signing, Link to sources, section times, the navigator's Hear it and inline Correct, the ask before signing over unconfirmed details, the all-confirmed line, the banner above the tabs, Export's menu, the addenda ---- */ :root:not(.android):not(.ios) #encounter-page:not([data-stage=signed]) .note-head .note-tabs{display:none!important} :root:not(.android):not(.ios) #encounter-page:not([data-stage=signed]) .note-head{padding:10px 14px;gap:8px;border-bottom:1px solid var(--line2)} :root:not(.android):not(.ios) #encounter-page:not([data-stage=signed]) .note-head .editor-tools{margin:0;flex:1 1 auto} :root:not(.android):not(.ios) #encounter-page .editor-tools>#link-sources{order:2;width:34px!important;min-width:34px;padding:0!important;justify-content:center;border-radius:7px!important;border:1px solid var(--line)!important;background:var(--panel)!important;color:var(--ink2)!important} :root:not(.android):not(.ios) #encounter-page .editor-tools>#link-sources[aria-pressed=true]{background:var(--accent-soft)!important;color:var(--accent-text)!important;border-color:var(--accent-line)!important} :root:not(.android):not(.ios) #encounter-page .editor-tools>#link-sources .icon{stroke-width:1.8} :root:not(.android):not(.ios) #encounter-page .editor-tools>#edit-note{order:3} :root:not(.android):not(.ios) #encounter-page .editor-tools>.size-group{order:5;display:flex;flex:none;border:1px solid var(--line);border-radius:7px;overflow:hidden} :root:not(.android):not(.ios) #encounter-page .editor-tools>.size-group>.size-step{width:32px!important;height:32px!important;min-height:32px!important;padding:0!important;border:0!important;border-radius:0!important;background:var(--panel)!important;color:var(--ink2)!important;font-weight:600!important;margin:0!important} :root:not(.android):not(.ios) #encounter-page .editor-tools>.size-group>#text-smaller{font-size:12px!important} :root:not(.android):not(.ios) #encounter-page .editor-tools>.size-group>#text-larger{font-size:14px!important;border-left:1px solid var(--line)!important} :root:not(.android):not(.ios) #encounter-page .editor-tools>.size-group>.size-step:disabled{color:var(--line)!important;opacity:1} :root:not(.android):not(.ios) #encounter-page[data-stage=transcript] .editor-tools>.size-group{display:none!important} :root:not(.android):not(.ios) #encounter-page[data-stage=signed] .editor-tools>:not(#export):not(#rx-open){display:none!important} :root:not(.android):not(.ios) #encounter-page #note-preview>section{border-bottom:1px solid var(--line2)} :root:not(.android):not(.ios) #encounter-page #note-preview>section p{font-size:var(--reading-size,16px)} :root:not(.android):not(.ios) #encounter-page .section-sources{border:none;background:none;padding:6px 6px;margin:-6px -6px;color:var(--accent-text);font:550 12px/1 var(--font-mono);height:auto;min-height:0} :root:not(.android):not(.ios) #encounter-page .detail-check.confirmed{background:transparent;box-shadow:none;padding:0;cursor:text;font-weight:400} :root:not(.android):not(.ios) #encounter-page .detail-check.confirmed::after{content:none} /* the transcript line a section or a detail came from */ :root:not(.android):not(.ios) #encounter-page .speaker-line.is-current{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)} :root:not(.android):not(.ios) #encounter-page .speaker-line.is-playing{background:var(--panel2)} :root:not(.android):not(.ios) #encounter-page .speaker-line:is(.is-current,.is-playing) .speaker-time{color:var(--accent-text);font-weight:600} /* the navigator: Hear it, the inline correction */ :root:not(.android):not(.ios) #encounter-page .flag-actions>.flag-hear{height:30px;min-height:0;padding:0 9px;border-radius:7px;border:none;background:transparent;color:var(--accent-text);font-size:12.5px;font-weight:550;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .flag-copy>.flag-edit{width:100%;height:30px;border-radius:7px;border:1px solid var(--accent);background:var(--panel);color:var(--ink);padding:0 9px;font-size:13.5px;box-sizing:border-box} :root:not(.android):not(.ios) #encounter-page .flag-actions>.flag-cancel{height:30px;min-height:0;padding:0 11px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--ink2);font-size:12.5px} :root:not(.android):not(.ios) #encounter-page .flag-actions>.flag-save{height:30px;min-height:0;padding:0 11px;border-radius:7px;border:none;background:var(--accent);color:var(--accent-ink);font-size:12.5px;font-weight:600} :root:not(.android):not(.ios) #encounter-page .flag-right .icon{stroke-width:2.2} /* Sign with details unconfirmed? */ :root:not(.android):not(.ios) #encounter-page .note-flag.sign-ask{display:flex;flex-direction:column;gap:10px;margin:14px 14px 0;padding:13px 14px;border:1.5px solid var(--warn-line);border-radius:10px;background:var(--panel);box-shadow:var(--shadow-card)} :root:not(.android):not(.ios) #encounter-page .sign-ask .ask-title{font-size:14px;font-weight:650;color:var(--ink)} :root:not(.android):not(.ios) #encounter-page .sign-ask .ask-chips{display:flex;flex-wrap:wrap;gap:6px} :root:not(.android):not(.ios) #encounter-page .sign-ask .ask-chip{font-size:12px;font-weight:600;color:var(--warn);background:var(--warn-bg);border-radius:var(--r-badge);padding:3px 8px} :root:not(.android):not(.ios) #encounter-page .sign-ask .ask-copy{margin:0;font-size:12.5px;color:var(--ink2);line-height:1.55} :root:not(.android):not(.ios) #encounter-page .sign-ask .ask-actions{display:flex;justify-content:flex-end;gap:8px} :root:not(.android):not(.ios) #encounter-page .sign-ask .ask-keep{height:34px;min-height:0;padding:0 13px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:12.5px;font-weight:550} :root:not(.android):not(.ios) #encounter-page .sign-ask .ask-sign{height:34px;min-height:0;padding:0 13px;border-radius:7px;border:none;background:var(--accent);color:var(--accent-ink);font-size:12.5px;font-weight:600} /* All n details confirmed. */ :root:not(.android):not(.ios) #encounter-page .note-flag.is-clear{display:flex;flex-direction:row;align-items:center;gap:10px;margin:14px 14px 0;padding:11px 14px;border:1px solid var(--ok-line);border-radius:10px;background:var(--ok-bg);font-size:13.5px;color:var(--ink)} :root:not(.android):not(.ios) #encounter-page .note-flag.is-clear>.icon{width:17px;height:17px;color:var(--ok);stroke-width:2;flex:none} :root:not(.android):not(.ios) #encounter-page .note-flag.is-clear strong{font-weight:650} /* the signed banner above the tabs row */ :root:not(.android):not(.ios) #encounter-page #note-card>.note-actions{order:0;display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line2);background:var(--ok-bg);font-size:13px;color:var(--ink);line-height:1.5;margin:0} :root:not(.android):not(.ios) #encounter-page #note-card>.note-actions>.icon{width:17px;height:17px;color:var(--ok);flex:none;stroke-width:2} :root:not(.android):not(.ios) #encounter-page #note-card>.note-actions strong{font-weight:650} :root:not(.android):not(.ios) #encounter-page #note-addenda{display:none!important} /* Export: one 32px button with its menu */ :root:not(.android):not(.ios) #encounter-page[data-stage=signed] .editor-tools>#export{height:32px!important;min-height:32px!important;padding:0 11px!important;border-radius:7px!important;border:1px solid var(--line)!important;background:var(--panel)!important;color:var(--ink)!important;font-size:12.5px!important;font-weight:550!important} :root:not(.android):not(.ios) #encounter-page[data-stage=signed] .editor-tools>#export .icon{width:15px!important;height:15px!important} :root:not(.android):not(.ios) #encounter-page[data-stage=signed] .editor-tools>#export::after{content:"";width:13px;height:13px;margin-left:2px;background:currentColor;opacity:.7;-webkit-mask:url(/app/icons.svg#chevronD) center/contain no-repeat;mask:url(/app/icons.svg#chevronD) center/contain no-repeat} :root:not(.android):not(.ios) #export-dialog.export-menu{width:250px;border-radius:10px;padding:6px;box-shadow:var(--shadow-card)} :root:not(.android):not(.ios) #export-dialog.export-menu h2{display:none} :root:not(.android):not(.ios) #export-dialog.export-menu .export-choices button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;padding:8px 10px;border-radius:7px;border:none;background:transparent;font-size:13px;font-weight:550;color:var(--ink);height:auto;min-height:0} :root:not(.android):not(.ios) #export-dialog.export-menu .export-choices button:hover{background:var(--panel2)} :root:not(.android):not(.ios) #export-dialog.export-menu .export-choices button .icon{display:none} :root:not(.android):not(.ios) #export-dialog.export-menu .export-choices button[data-sub]::after{content:attr(data-sub);font-size:11.5px;font-weight:400;color:var(--ink3);white-space:normal} :root:not(.android):not(.ios) #export-dialog.export-menu :is(#download-note,#export-calendar,#share-note,#close-export){display:none!important} /* the addenda */ :root:not(.android):not(.ios) #encounter-page .addendum-compose{padding:12px 14px;border-bottom:1px solid var(--line2)} :root:not(.android):not(.ios) #encounter-page .addendum-compose .compose-box{border:1px solid var(--line);border-radius:10px;background:var(--panel2);padding:12px;display:flex;flex-direction:column;gap:10px} :root:not(.android):not(.ios) #encounter-page .addendum-compose textarea{width:100%;min-height:0;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:10px 12px;font-size:14px;line-height:1.55;resize:none;box-sizing:border-box} :root:not(.android):not(.ios) #encounter-page .addendum-compose .compose-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap} :root:not(.android):not(.ios) #encounter-page .addendum-compose .compose-row>span{font-size:12px;color:var(--ink3);flex:1;min-width:0;line-height:1.5} :root:not(.android):not(.ios) #encounter-page .addendum-compose .compose-row>button{height:38px;min-height:0;padding:0 15px;border-radius:8px;border:none;background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:600;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .addendum-compose .compose-row>button:disabled{background:var(--panel);color:var(--ink3);box-shadow:inset 0 0 0 1px var(--line);opacity:1} :root:not(.android):not(.ios) #encounter-page .addendum-entry{border-left:3px solid var(--accent-line);padding:4px 0 4px 14px;margin:0 0 14px} :root:not(.android):not(.ios) #encounter-page .addendum-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--ink3)} :root:not(.android):not(.ios) #encounter-page .addendum-label{font-weight:650;color:var(--ink2)} :root:not(.android):not(.ios) #encounter-page .addendum-when{font-family:var(--font-mono);font-size:12px} :root:not(.android):not(.ios) #encounter-page .addendum-window{font-size:11px;font-weight:600;color:var(--ink2);background:var(--panel2);border-radius:var(--r-badge);padding:2px 7px} :root:not(.android):not(.ios) #encounter-page .addendum-fresh{font-size:11px;font-weight:600;color:var(--ok);background:var(--ok-bg);border-radius:var(--r-badge);padding:2px 7px} :root:not(.android):not(.ios) #encounter-page .addendum-entry>p{font-size:var(--reading-size,16px);line-height:1.6;color:var(--body);margin:5px 0 0} :root:not(.android):not(.ios) #encounter-page .addendum-tools{display:flex;align-items:center;gap:12px;margin:7px 0 0} :root:not(.android):not(.ios) #encounter-page .addendum-tools>button{border:none;background:none;padding:0;height:auto;min-height:0;color:var(--accent-text);font-size:12px;font-weight:550} :root:not(.android):not(.ios) #encounter-page .addendum-tools>button.danger-outline{color:var(--danger)} :root:not(.android):not(.ios) #encounter-page .addendum-tools>button .icon{display:none} /* ---- The Sources card to the design (DESIGN_GUIDE §12.1): the head, the player row, the transcript rows, the documents ---- */ :root:not(.android):not(.ios) #encounter-page .sources-tools>:is(#toolbar-attach,#toolbar-edit-transcript){display:none!important} :root:not(.android):not(.ios) #encounter-page .live-legend{gap:12px} :root:not(.android):not(.ios) #encounter-page .live-legend .leg{display:flex;align-items:center;gap:6px} :root:not(.android):not(.ios) #encounter-page .live-legend i{margin:0!important} /* the player row: play · scrubber · speed · download · Delete */ :root:not(.android):not(.ios) #encounter-page #kept-audio-play{width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;border-radius:50%!important;border:none!important;background:var(--accent)!important;color:var(--accent-ink)!important} :root:not(.android):not(.ios) #encounter-page #kept-audio-play .icon{width:14px!important;height:14px!important;margin-left:2px;stroke:none;fill:currentColor} :root:not(.android):not(.ios) #encounter-page #kept-audio-play .action-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} :root:not(.android):not(.ios) #encounter-page .audio-speed{flex:none;height:28px;min-height:0;padding:0 8px;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--ink2);font:600 11.5px/1 var(--font-mono)} :root:not(.android):not(.ios) #encounter-page #audio-download{flex:none;width:28px;height:28px;min-height:0;padding:0;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--ink2);display:inline-flex;align-items:center;justify-content:center} :root:not(.android):not(.ios) #encounter-page #audio-download .icon{width:14px;height:14px;stroke-width:1.9} :root:not(.android):not(.ios) #encounter-page #kept-audio-delete{height:30px!important;min-height:30px!important;padding:0 10px!important;border-radius:7px!important;border:1px solid var(--danger-line)!important;background:var(--panel)!important;color:var(--danger)!important;font-size:12px!important;font-weight:550!important;gap:5px} :root:not(.android):not(.ios) #encounter-page #kept-audio-delete .icon{width:14px!important;height:14px!important} :root:not(.android):not(.ios) #encounter-page .audio-confirm{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--danger-line);background:var(--danger-bg);flex-wrap:wrap;font-size:12.5px;color:var(--ink);line-height:1.5} :root:not(.android):not(.ios) #encounter-page .audio-confirm-copy{flex:1;min-width:180px}:root:not(.android):not(.ios) #encounter-page .audio-confirm-copy strong{font-weight:600} :root:not(.android):not(.ios) #encounter-page .audio-keep{height:30px;min-height:0;padding:0 11px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--ink2);font-size:12.5px} :root:not(.android):not(.ios) #encounter-page .audio-delete{height:30px;min-height:0;padding:0 11px;border-radius:7px;border:none;background:var(--danger);color:var(--on-fill);font-size:12.5px;font-weight:600;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .audio-confirm button .icon{display:none} :root:not(.android):not(.ios) #encounter-page #audio-gone{padding:11px 14px;border-bottom:1px solid var(--line2);background:var(--panel2);font-size:12.5px;color:var(--ink2);line-height:1.5} /* transcript rows: time · speaker (Corrected · pencil) · text; a click on the time cues the player */ :root:not(.android):not(.ios) #encounter-page #transcript-lines .speaker-line{display:grid!important;grid-template-columns:44px minmax(0,1fr);column-gap:8px;row-gap:0;padding:9px 14px!important;align-items:start} :root:not(.android):not(.ios) #encounter-page #transcript-lines .speaker-time{grid-column:1;grid-row:1;height:28px;min-height:0;margin-top:-4px;border:none;background:none;padding:0;text-align:left;font:400 11.5px/28px var(--font-mono);color:var(--ink3);cursor:pointer} :root:not(.android):not(.ios) #encounter-page #transcript-lines span.speaker-time{cursor:default} :root:not(.android):not(.ios) #encounter-page #transcript-lines .speaker-head{grid-column:2;grid-row:1;display:flex;align-items:center;gap:6px;min-height:26px} :root:not(.android):not(.ios) #encounter-page #transcript-lines .speaker-head .speaker{font-size:12px;font-weight:600;line-height:1.2} :root:not(.android):not(.ios) #encounter-page #transcript-lines .speaker-spacer{flex:1} :root:not(.android):not(.ios) #encounter-page #transcript-lines .speaker-text{grid-column:2;grid-row:2;font-size:14px;line-height:1.6;color:var(--body);margin-top:2px} :root:not(.android):not(.ios) #encounter-page #transcript-lines .line-edit{width:26px;height:26px;min-height:0;padding:0;border-radius:6px;border:none;background:none;color:var(--ink3);display:inline-flex;align-items:center;justify-content:center} :root:not(.android):not(.ios) #encounter-page #transcript-lines .line-edit .icon{width:15px;height:15px;stroke-width:1.8} :root:not(.android):not(.ios) #encounter-page #transcript-lines .line-edit:hover{background:var(--panel2);color:var(--ink)} :root:not(.android):not(.ios) #encounter-page #transcript-lines .corrected-chip{height:20px;min-height:0;padding:0 5px 0 6px;border:none;border-radius:4px;background:var(--accent-soft);color:var(--accent-text);font-size:10.5px;font-weight:600;display:inline-flex;align-items:center;gap:2px} :root:not(.android):not(.ios) #encounter-page #transcript-lines .corrected-chip .icon{width:11px;height:11px;stroke-width:2.4} :root:not(.android):not(.ios) #encounter-page #transcript-lines .heard-peek{grid-column:2;grid-row:3;display:flex;flex-direction:column;gap:3px;border-left:2px solid var(--line);padding:2px 0 2px 10px;margin-top:6px} :root:not(.android):not(.ios) #encounter-page #transcript-lines .heard-label{font-size:10.5px;font-weight:650;letter-spacing:1px;text-transform:uppercase;color:var(--ink3)} :root:not(.android):not(.ios) #encounter-page #transcript-lines .heard-text{font-size:13px;color:var(--ink2)} :root:not(.android):not(.ios) #encounter-page #transcript-lines .heard-revert{align-self:flex-start;border:none;background:none;padding:0;height:auto;min-height:0;color:var(--accent-text);font-size:12px;font-weight:550} :root:not(.android):not(.ios) #encounter-page #transcript-lines .line-form{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:8px;margin-top:4px} :root:not(.android):not(.ios) #encounter-page #transcript-lines .line-form textarea{width:100%;min-height:0;border-radius:8px;border:1px solid var(--accent);background:var(--panel);color:var(--ink);padding:8px 10px;font-size:14px;line-height:1.5;resize:none;box-sizing:border-box} :root:not(.android):not(.ios) #encounter-page #transcript-lines .line-actions{display:flex;justify-content:flex-end;gap:8px} :root:not(.android):not(.ios) #encounter-page #transcript-lines .line-actions>button{height:30px;min-height:0;padding:0 11px;border-radius:7px;font-size:12.5px} :root:not(.android):not(.ios) #encounter-page #transcript-lines .line-actions>.line-cancel{border:1px solid var(--line);background:var(--panel);color:var(--ink2)} :root:not(.android):not(.ios) #encounter-page #transcript-lines .line-actions>.line-save{border:none;background:var(--accent);color:var(--accent-ink);font-weight:600} :root:not(.android):not(.ios) #encounter-page #transcript-lines .line-actions>button .icon{display:none} /* the documents: rows and + Attach another */ :root:not(.android):not(.ios) #encounter-page .docs-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line2)} :root:not(.android):not(.ios) #encounter-page .docs-row>.icon{width:18px;height:18px;color:var(--ink3);flex:none} :root:not(.android):not(.ios) #encounter-page .docs-row-copy{flex:1;min-width:0} :root:not(.android):not(.ios) #encounter-page .docs-row-copy strong{display:block;font-size:13px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :root:not(.android):not(.ios) #encounter-page .docs-row-copy small{display:block;font:400 11.5px/1.5 var(--font-mono);color:var(--ink3)} :root:not(.android):not(.ios) #encounter-page .docs-row>button{height:32px!important;min-height:32px!important;padding:0 11px!important;border-radius:7px!important;border:1px solid var(--line)!important;background:var(--panel)!important;color:var(--ink)!important;font-size:12.5px!important;font-weight:550!important;flex:none} :root:not(.android):not(.ios) #encounter-page .docs-row>button.docs-remove{border-color:var(--danger-line)!important;color:var(--danger)!important;gap:5px} :root:not(.android):not(.ios) #encounter-page .docs-row>button .icon{width:14px!important;height:14px!important} :root:not(.android):not(.ios) #encounter-page .docs-attach-more{border:none;background:none;padding:12px 14px;height:auto;min-height:0;color:var(--accent-text);font-size:12.5px;font-weight:550;text-align:left} :root:not(.android):not(.ios) #encounter-page #documents-pane .pane-empty>.icon{width:26px;height:26px;stroke-width:1.6;color:var(--ink3)} :root:not(.android):not(.ios) #encounter-page #transcript-lines.untimed .speaker-line{grid-template-columns:minmax(0,1fr)} :root:not(.android):not(.ios) #encounter-page #transcript-lines.untimed .speaker-head,:root:not(.android):not(.ios) #encounter-page #transcript-lines.untimed .speaker-text{grid-column:1} /* ---- The patient bar, the breadcrumb row, the sidebar, Genie's box and the page frame to the design (DESIGN_GUIDE §5, §12.1) ---- */ :root:not(.android):not(.ios) body[data-view=encounter] #encounter-page:not([hidden]){padding:14px 28px 20px!important} :root:not(.android):not(.ios) #encounter-page .visit-top{min-height:44px} :root:not(.android):not(.ios) #encounter-page .visit-strip{gap:18px} :root:not(.android):not(.ios) #encounter-page .strip-left{display:flex;align-items:center;gap:13px;flex:1 1 360px;min-width:280px;position:relative} :root:not(.android):not(.ios) #encounter-page .strip-who{position:relative} :root:not(.android):not(.ios) #encounter-page #patient-matches{top:calc(100% + 6px);left:0} :root:not(.android):not(.ios) #encounter-page #patient::placeholder{color:var(--ink);font-weight:650;opacity:1} :root:not(.android):not(.ios) #encounter-page #visit-meta .fact-mono{font-size:12.5px} :root:not(.android):not(.ios) #encounter-page #visit-meta .fact-quiet{color:var(--ink3)} :root:not(.android):not(.ios) #encounter-page select#visit-type{height:28px;min-height:0;border-radius:6px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);padding:0 24px 0 6px;font-size:12.5px;appearance:none;-webkit-appearance:none;background-image:none} :root:not(.android):not(.ios) #encounter-page select#visit-type:disabled{opacity:1;color:var(--ink2)} :root:not(.android):not(.ios) #encounter-page .strip-name .type-wrap{position:relative;display:inline-flex;align-items:center} :root:not(.android):not(.ios) #encounter-page #visit-steps>div.error{color:var(--danger);font-weight:650} :root:not(.android):not(.ios) #encounter-page #visit-steps>div.error>b{border-color:var(--danger-line);background:var(--danger-bg);color:var(--danger)} :root:not(.android):not(.ios) #encounter-page #visit-steps>div.done>b{border-color:var(--ok-line)} :root:not(.android):not(.ios) #encounter-page #visit-steps>div.done+div::before{background:var(--ok-line)} /* the bar's destructive action and its menu */ :root:not(.android):not(.ios) #encounter-page .strip-actions{position:relative;display:flex;align-items:center;gap:10px} :root:not(.android):not(.ios) #encounter-page:is([data-stage=recording],[data-stage=paused],[data-stage=transcribing],[data-stage=drafting]) #delete:not([hidden]){display:inline-flex!important} :root:not(.android):not(.ios) #encounter-page #delete:disabled{display:none!important} :root:not(.android):not(.ios) #encounter-page .delete-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:35;width:280px;border:1px solid var(--line);border-radius:11px;background:var(--panel);box-shadow:var(--shadow-card);padding:6px} :root:not(.android):not(.ios) #encounter-page .delete-item{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;text-align:left;white-space:normal;padding:9px 10px;border-radius:7px;border:none;background:transparent;color:var(--danger);height:auto;min-height:0} /* the label above its line, both wrapping inside the menu */ :root:not(.android):not(.ios) #encounter-page .delete-item:hover{background:var(--panel2)} :root:not(.android):not(.ios) #encounter-page .delete-item-label{display:block;font-size:13px;font-weight:550} :root:not(.android):not(.ios) #encounter-page .delete-item-sub{display:block;font-size:11.5px;color:var(--ink3);margin-top:2px;line-height:1.45} :root:not(.android):not(.ios) #encounter-page .delete-confirm{padding:10px} :root:not(.android):not(.ios) #encounter-page .delete-title{font-size:13.5px;font-weight:600;color:var(--ink)} :root:not(.android):not(.ios) #encounter-page .delete-body{font-size:12.5px;color:var(--ink2);margin-top:5px;line-height:1.55} :root:not(.android):not(.ios) #encounter-page .delete-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px} :root:not(.android):not(.ios) #encounter-page .delete-keep{height:34px;min-height:0;padding:0 12px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--ink2);font-size:12.5px;font-weight:550;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .delete-go{height:34px;min-height:0;padding:0 12px;border-radius:7px;border:none;background:var(--danger);color:var(--on-fill);font-size:12.5px;font-weight:600;white-space:nowrap} /* Next to review · Name › */ :root:not(.android):not(.ios) #encounter-page #next-review{display:inline-flex;align-items:center;gap:8px;height:40px;min-height:0;padding:0 16px;border-radius:8px;border:none;background:var(--accent);color:var(--accent-ink);font-size:13.5px;font-weight:600;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page #next-review[hidden]{display:none!important} :root:not(.android):not(.ios) #encounter-page #next-review .next-name{font-weight:500;opacity:.85} :root:not(.android):not(.ios) #encounter-page #next-review .icon{width:16px;height:16px;stroke-width:2} /* This draft was deleted */ :root:not(.android):not(.ios) #encounter-page[data-deleted=true]>:not(#deleted-card):not(.visit-top){display:none!important} :root:not(.android):not(.ios) #encounter-page[data-deleted=true] .visit-top .crumb-name,:root:not(.android):not(.ios) #encounter-page[data-deleted=true] .visit-top .crumb-dot,:root:not(.android):not(.ios) #encounter-page[data-deleted=true] .visit-top .crumb-stage{display:none} :root:not(.android):not(.ios) #encounter-page .deleted-card{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:48px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center} :root:not(.android):not(.ios) #encounter-page .deleted-title{font-size:17px;font-weight:650;color:var(--ink)} :root:not(.android):not(.ios) #encounter-page .deleted-text{font-size:13px;color:var(--ink2);max-width:46ch;line-height:1.6} :root:not(.android):not(.ios) #encounter-page .deleted-actions{display:flex;gap:10px;margin-top:8px} :root:not(.android):not(.ios) #encounter-page .deleted-undo{height:40px;min-height:0;padding:0 16px;border-radius:8px;border:none;background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:600} :root:not(.android):not(.ios) #encounter-page .deleted-back{height:40px;min-height:0;padding:0 16px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:13px;font-weight:550} /* the signed banner's one line; Record a visit gives way while a visit is captured, transcribed, drafted or silent */ :root:not(.android):not(.ios) #encounter-page #note-card>.note-actions>#note-legend{display:inline;flex:1 1 auto;margin:0;line-height:1.5} :root:not(.android):not(.ios) #encounter-page #note-card>.note-actions>:not(.icon):not(#note-legend):not(#unsign-note){display:none!important} /* Unsign note (owner, 24 Sept 2026): the signed banner's one action, while the signature can be taken back (24 h, not exported) */ :root:not(.android):not(.ios) #encounter-page .note-actions>#unsign-note[hidden]{display:none!important} :root:not(.android):not(.ios) #encounter-page .note-actions>#unsign-note:not([hidden]){display:inline-flex!important;align-items:center;gap:6px;flex:none;height:32px;min-height:32px;padding:0 11px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:12.5px;font-weight:550;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .note-actions>#unsign-note .icon{width:15px;height:15px} :root:not(.android):not(.ios) #encounter-page #note-card>.note-actions #note-legend .fact-mono{font-size:13px} :root:not(.android):not(.ios) #encounter-page[data-stage=signed] #note-card>.note-actions>#note-legend{display:inline!important;flex:1 1 auto!important;margin:0!important;padding:0!important;border:0!important;background:none!important;font-size:13px;color:var(--ink)} :root:not(.android):not(.ios) #encounter-page[data-stage=signed] #note-card>.note-actions>#note-legend::before{content:none!important} } /* Send Rx sits with Export on the signed note's own tab only (never over the Addenda tab). */ @media (min-width:768px){:root:not(.android):not(.ios) #encounter-page #document:not([data-tab=note]) .editor-tools>#rx-open{display:none!important}} /* ---- Genie's panel docked beside the page (owner, 1 Oct 2026): the page has the room a narrow window would, so the visit's tiers follow the .workspace container. The note card's tools wrap to a second line rather than losing the template (it was clipped at its left edge); in the narrowest room (1100–1279px windows) the steps step aside (the breadcrumb names the stage; the list stays for screen readers), the visit type narrows and Delete draft / Discard keep their bin (the word stays their name). ------------------------------------------ */ @media (min-width:768px){ @container workspace (max-width:981px){ :root:not(.android):not(.ios) #encounter-page .note-head .editor-tools{flex-wrap:wrap!important;row-gap:6px;overflow:visible!important} } @container workspace (max-width:820px){ :root:not(.android):not(.ios) #encounter-page .visit-strip #visit-steps{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap} :root:not(.android):not(.ios) #encounter-page .visit-strip .strip-name>#visit-type{min-width:0!important;max-width:128px} :root:not(.android):not(.ios) #encounter-page .visit-strip #delete{width:36px!important;min-width:36px;padding:0!important;justify-content:center} :root:not(.android):not(.ios) #encounter-page .visit-strip #delete .action-label{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap} } }