/* the app shell: sidebar, page header row, breadcrumb, Genie box frame, page frame to the design (design/DESIGN_GUIDE.md; audit design/previews/visit-redesign/audit/app-gaps.json). Desktop and the web only: every rule is scoped :root:not(.android):not(.ios) or wrapped in @media (min-width:768px); the phones keep their tiers. Colours through tokens.css only (rule I-3). */ /* ---- Base values the design gives every control on desktop and the web (DESIGN_GUIDE §6, §7). Zero-specificity scoping (:where) so the rules sit exactly where app.css's own `button` / `a` / `input` rules sit and any class or id rule still wins. ---------------------- */ @media (min-width:768px){ :root:not(.android):not(.ios){--input-bg:var(--panel2)} :where(:root:not(.android):not(.ios)) button{background:var(--panel2);color:var(--ink);font-size:13px;font-weight:600} :where(:root:not(.android):not(.ios)) .primary{font-size:13px;font-weight:600} :where(:root:not(.android):not(.ios)) :is(input,select){padding:0 13px} :where(:root:not(.android):not(.ios)) a{color:var(--accent-text);text-decoration:none} :where(:root:not(.android):not(.ios)) a:hover{text-decoration:underline} :where(:root:not(.android):not(.ios)) button:focus-visible,:where(:root:not(.android):not(.ios)) a:focus-visible,:where(:root:not(.android):not(.ios)) summary:focus-visible,:where(:root:not(.android):not(.ios)) [role=tab]:focus-visible{outline:3px solid var(--focus);outline-offset:3px} } /* ---- The sidebar: brand, nav, Record a visit, the In progress item, the account row (the Visit Redesign's 236px column, carried over from visit.css; the nav's resting ink, selected weight and the Record glyph from the Redesign) ------------------------------------- */ @media (min-width:768px){ :root:not(.android):not(.ios){--sidebar:236px} :root:not(.android):not(.ios) .sidebar{padding:16px 12px;gap:18px} /* The Windows title bar's traffic lights (app.css:100 .desktop.windows .sidebar) keep their 14px clearance; this rule's higher specificity would otherwise win the top padding at 16px. */ :root:not(.android):not(.ios).windows .sidebar{padding-top:14px} /* The "Workspace" kicker (studio.css:17, faithful) stays; the sidebar's wider 18px gap (vs. studio.css's 16px) needs a bigger pull-up than studio.css's -7px to keep the design's 9px between the kicker and the nav. */ :root:not(.android):not(.ios) .sidebar .main-nav{margin-top:-9px} :root:not(.android):not(.ios) .sidebar .brand{padding:2px 8px;gap:10px;font-size:16px;font-weight:650;letter-spacing:-.02em;color:var(--ink);cursor:default} :root:not(.android):not(.ios) .sidebar .brand img{width:28px;height:28px;border-radius:8px} :root:not(.android):not(.ios) .main-nav{gap:2px} :root:not(.android):not(.ios) .main-nav button{gap:11px;padding:9px 10px;border-radius:8px;color:var(--ink2);font-size:13.5px;font-weight:500} :root:not(.android):not(.ios) .main-nav button.active,:root:not(.android):not(.ios) .main-nav button[aria-current=page]{background:var(--accent-soft);color:var(--accent-text);font-weight:650} :root:not(.android):not(.ios) .main-nav small{font:400 11.5px/1 var(--font-mono);color:var(--ink3)} /* Record a visit: the design's 18px filled circle (the only microphone on screen is Genie's), gap 8 */ :root:not(.android):not(.ios) .sidebar .record-visit{gap:8px;height:44px;border-radius:8px;font-size:13.5px;font-weight:600} :root:not(.android):not(.ios) .sidebar .record-visit::before{display:none!important;content:none} :root:not(.android):not(.ios) .sidebar .record-visit .icon{width:18px;height:18px} /* Account row: transparent at rest, --panel2 while its menu is open; name 13/550, practice 11 --ink3, 15px chevron */ :root:not(.android):not(.ios) .sidebar .account{margin-top:-4px;padding-top:0;border-top:1px solid var(--line2)} :root:not(.android):not(.ios) .sidebar .account>summary{background:transparent!important;padding:8px!important;gap:10px} :root:not(.android):not(.ios) .sidebar .account[open]>summary{background:var(--panel2)!important} :root:not(.android):not(.ios) .sidebar .account .avatar{width:30px;height:30px;border-radius:8px;font-size:11.5px!important;font-weight:650!important;background:var(--accent-soft);color:var(--accent-text)} :root:not(.android):not(.ios) .sidebar .account-copy strong{font-size:13px;font-weight:550} :root:not(.android):not(.ios) .sidebar .account-copy small{font-size:11px;color:var(--ink3)} /* The 16px chevron (studio.css:742) already matches the design; nothing to add here. */ :root:not(.android):not(.ios) .sidebar .today-card{display:none!important} /* The account menu: the sidebar's inner width, 6px above the row, head with the name and email, 17px icons, a --line2 rule, Log out in --ink2 */ :root:not(.android):not(.ios) .sidebar .account-popover{left:0;right:0;width:auto;bottom:calc(100% + 6px);z-index:30;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:var(--shadow-card);overflow:hidden;gap:0} :root:not(.android):not(.ios) .sidebar .account-head{gap:0;padding:10px 10px 12px;border-bottom:1px solid var(--line2);margin-bottom:6px} :root:not(.android):not(.ios) .sidebar .account-head strong{font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :root:not(.android):not(.ios) .sidebar .account-popover .account-head #account-email{padding:0;margin-top:2px;font:400 11.5px/1.45 var(--font-sans);color:var(--ink3);overflow-wrap:anywhere} :root:not(.android):not(.ios) .sidebar .account-popover>button,:root:not(.android):not(.ios) .sidebar .account-popover>a{display:flex;align-items:center;gap:10px;width:100%;min-height:0;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:13px;font-weight:500;text-align:left} :root:not(.android):not(.ios) .sidebar .account-popover>button:hover,:root:not(.android):not(.ios) .sidebar .account-popover>a:hover{background:var(--panel2);color:var(--ink)} :root:not(.android):not(.ios) .sidebar .account-popover .account-menu-icon{width:17px;height:17px;flex:0 0 17px;color:var(--ink3)} :root:not(.android):not(.ios) .sidebar .account-divider{border:0;height:1px;background:var(--line2);margin:6px 0} :root:not(.android):not(.ios) .sidebar .account-popover #signout{color:var(--ink2)} :root:not(.android):not(.ios) .sidebar .account-popover #signout:hover{color:var(--ink)} /* Desktop device row: the processing mode and Sync move here (app.js, isDesktop block) now that the header holds only kicker · title · Genie; Settings › This computer / Processing carry the same controls in full, but this is the one obvious, always-visible place to see the mode and reach Sync (and the unsynced count) without opening a dialog. */ :root:not(.android):not(.ios) .sidebar .device-row{display:flex;flex-direction:column;gap:7px;margin-top:-4px;padding:9px 2px;border-top:1px solid var(--line2)} :root:not(.android):not(.ios) .sidebar .device-row .mode-chip{width:100%;justify-content:space-between;padding:7px 10px;border-radius:8px;background:var(--panel2);border-color:var(--line)} :root:not(.android):not(.ios) .sidebar .device-row .mode-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px} :root:not(.android):not(.ios) .sidebar .device-row .mode-chip b{font-size:11px} :root:not(.android):not(.ios) .sidebar .device-row-sync{display:flex;align-items:center;gap:8px} :root:not(.android):not(.ios) .sidebar #desktop-upload{flex:1;justify-content:center;border-radius:8px;font-size:12.5px} :root:not(.android):not(.ios) .sidebar #desktop-pending-count{font:400 11px/1 var(--font-mono);color:var(--ink3);white-space:nowrap} /* In progress / Just signed (the Visit Redesign) */ :root:not(.android):not(.ios) #current-visit .cv-avatar{border:1px solid var(--accent-line)} :root:not(.android):not(.ios) #current-visit .cv-dot{animation:none!important} :root:not(.android):not(.ios) #current-visit[data-state=live] .cv-dot{background:var(--live)} :root:not(.android):not(.ios) #current-visit[data-state=warn] .cv-dot{background:var(--warn-line)} :root:not(.android):not(.ios) #current-visit[data-state=ok] .cv-dot{background:var(--ok)} :root:not(.android):not(.ios) #current-visit[data-state=danger] .cv-dot{background:var(--danger)} :root:not(.android):not(.ios) #current-visit[data-state=danger] .cv-status{color:var(--danger)} :root:not(.android):not(.ios) .cv-label{margin:16px 0 0;padding:0 10px 8px} /* Record a visit gives way while a visit is captured, transcribed, drafted or silent */ :root:not(.android):not(.ios) body.visit-busy .sidebar .record-visit{display:none!important} :root:not(.android):not(.ios) body.visit-busy .sidebar #record-note{display:block!important} } /* ---- The collapsible menu (owner, 1 Oct 2026: "make the menu left collapsible"; sidebar.js owns the state). The toggle sits at the foot above the account row, a quiet row in the nav item's geometry: "Collapse menu" with chevronL (12.5/550 --ink3, --panel2 on hover). #shell.sidebar-collapsed turns the menu into a 68px icon rail whose centre line is the expanded menu's icon column, so no icon moves: every label is clipped to no width (it stays the item's name for screen readers), the counts become small mono badges on their icons (.rail-count; the count stays in the name), the visit in progress shows its initials and status dot, the desktop device row waits for the full menu, and the account menu opens at the full menu's width beside the rail. The kickers and the busy paragraph keep their room, so nothing moves up or down either. The width moves in 200ms (MO-1 panels), not at all with reduced motion; while it moves the menu clips and nothing in it wraps. ------------------------------------------------- */ @media (min-width:768px){ :root:not(.android):not(.ios) .sidebar{transition:width 200ms var(--ease),flex-basis 200ms var(--ease)} :root:not(.android):not(.ios) #sidebar-toggle{flex:none;justify-content:flex-start;gap:11px;width:100%;min-height:0;height:auto;padding:9px 10px 9px 13px;border:0;border-radius:8px;background:transparent;color:var(--ink3);font-size:12.5px;font-weight:550;line-height:1.45;white-space:nowrap;box-shadow:none} :root:not(.android):not(.ios) #sidebar-toggle:hover{background:var(--panel2);color:var(--ink2)} :root:not(.android):not(.ios) #sidebar-toggle .icon{width:18px;height:18px} :root:not(.android):not(.ios) .main-nav .rail-count{display:none} :root:not(.android):not(.ios) #shell.sidebar-collapsed>.sidebar{width:68px;flex-basis:68px} /* While the width moves no row changes height: nothing wraps, and the one paragraph ("One visit records at a time…") takes its final width at once. The account row's two values are single lines in any case (T-8: they truncate). */ :root:not(.android):not(.ios) #shell.sidebar-moving>.sidebar{overflow:hidden} :root:not(.android):not(.ios) #shell.sidebar-moving>.sidebar *{white-space:nowrap} :root:not(.android):not(.ios) #shell.sidebar-moving:not(.sidebar-collapsed)>.sidebar #record-note{flex:none;width:calc(var(--sidebar) - 24px);white-space:normal} :root:not(.android):not(.ios) .sidebar .account-copy>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :root:not(.android):not(.ios) .sidebar-collapsed .sidebar :is(.brand>span,.record-visit>span,.main-nav>button>span:not(.cv-avatar),#sidebar-toggle>span,.account-copy){flex:0 0 0;width:0;min-width:0;overflow:hidden;white-space:nowrap} :root:not(.android):not(.ios) .sidebar-collapsed .sidebar :is(.brand,.record-visit,.main-nav>button,#sidebar-toggle,.account>summary){gap:0} :root:not(.android):not(.ios) .sidebar-collapsed .sidebar .record-visit{padding:0} :root:not(.android):not(.ios) .sidebar-collapsed .sidebar .main-nav>button{position:relative} :root:not(.android):not(.ios) .sidebar-collapsed .sidebar .sidebar-label{visibility:hidden;white-space:nowrap} /* While a visit records, Record a visit gives way to its one paragraph; the rail keeps the paragraph's room (blank) so the nav does not move */ :root:not(.android):not(.ios) .sidebar-collapsed .sidebar #record-note{flex:none;width:calc(var(--sidebar) - 24px);visibility:hidden} :root:not(.android):not(.ios) .sidebar-collapsed .sidebar .main-nav>button>small{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap} :root:not(.android):not(.ios) .sidebar-collapsed .sidebar .device-row{display:none} :root:not(.android):not(.ios) .sidebar-collapsed .main-nav .rail-count:not([hidden]){display:block;position:absolute;top:2px;left:24px;min-width:16px;height:16px;padding:0 4px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink2);font:550 11px/14px var(--font-mono);text-align:center;pointer-events:none} /* The visit in progress: its initials on the centre line (visit.css holds the item's 10px padding), the status dot at their corner */ :root:not(.android):not(.ios) .sidebar-collapsed .sidebar .main-nav #current-visit{flex-wrap:nowrap} :root:not(.android):not(.ios) .sidebar-collapsed #current-visit .cv-avatar{margin-left:-3.5px} :root:not(.android):not(.ios) .sidebar-collapsed #current-visit .cv-dot{position:absolute;top:6px;left:31px;width:8px;height:8px} /* The account row: the avatar on the icons' line (the summary holds its 8px padding), the menu at the full menu's inner width */ :root:not(.android):not(.ios) .sidebar-collapsed .sidebar .account .avatar{margin-left:-1px} :root:not(.android):not(.ios) .sidebar-collapsed .sidebar .account .chevron{display:none} :root:not(.android):not(.ios) .sidebar-collapsed .sidebar .account-popover{right:auto;width:calc(var(--sidebar) - 24px)} } /* app.css's older narrow-window rail (761–1000px: labels, counts and the kicker display:none, items centred) still serves the Android and iPhone shells; on desktop and the web the menu is the same at every width and its rail is the collapsed state above. */ @media (min-width:768px) and (max-width:1000px){ :root:not(.android):not(.ios) .sidebar :is(.sidebar-label,.brand>span,.record-visit>span,.main-nav>button>span:not(.cv-avatar):not(.cv-body),.main-nav>button>small,.account .chevron){display:block} :root:not(.android):not(.ios) .sidebar .account-copy{display:flex} :root:not(.android):not(.ios) .sidebar :is(.brand,.main-nav>button,.account>summary){justify-content:flex-start} } @media (min-width:768px) and (prefers-reduced-motion:reduce){ :root:not(.android):not(.ios) .sidebar{transition:none} } /* ---- The header row: kicker and title on the left, Genie's box at the right and nothing else. The save state stays for scripts and screen readers (role=status) in a 1px box; the recording is shown once, in Genie's box, never as a second chip. ---------------------- */ @media (min-width:768px){ :root:not(.android):not(.ios) .workspace-header #connection-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} /* The recording/paused pill lives once, in Genie's box (paintRecording, faithful); the chip stays only for a visit transcribing or writing its note elsewhere with no microphone open — the one case Genie's box does not cover — so there is still a way back. */ :root:not(.android):not(.ios) .workspace-header #recording-chip:not(.working){display:none!important} /* Genie's box frame (the Visit Redesign's 340px box; idle over the page canvas, 220ms colour changes) */ :root:not(.android):not(.ios) .genie-wrap{flex:0 1 340px;max-width:340px} :root:not(.android):not(.ios) .genie-bar{border-radius:9px!important;gap:10px;padding:0 6px 0 12px;background:transparent;transition:background-color 220ms var(--ease),border-color 220ms var(--ease),box-shadow 220ms var(--ease)} :root:not(.android):not(.ios) #assistant-open .genie-keys{font:400 11px/1 var(--font-mono);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--ink3);background:none} :root:not(.android):not(.ios) .genie-bar .genie-mic{color:var(--accent-text)} :root:not(.android):not(.ios) .genie-bar .genie-mic .icon{width:16px;height:16px} :root:not(.android):not(.ios) .genie-bar .genie-mic-busy{font-size:11px;color:var(--ink3);padding-right:6px;white-space:nowrap} :root:not(.android):not(.ios) .genie-bar .genie-mic-busy[hidden]{display:none} :root:not(.android):not(.ios) .genie-bar.mic-busy::after{content:none} /* The page frame: header 14px from the top, content 18px 30px 18px */ :root:not(.android):not(.ios) .screen:not(#encounter-page){padding-bottom:18px} /* The status line is one line (owner): the design's toast — --ink on --panel text, bottom centre, never wrapping */ :root:not(.android):not(.ios) #message{max-width:min(640px,calc(100% - 48px));padding:11px 14px;border:0;border-radius:10px;background:var(--ink);color:var(--panel);box-shadow:var(--shadow-card);font-size:13px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} } @media (min-width:768px) and (prefers-reduced-motion:reduce){ :root:not(.android):not(.ios) .genie-bar{transition:none} } /* ---- Shared furniture: table card head and pager, empty states (DESIGN_GUIDE §6; the Redesign's card and pane-empty) ------------ */ @media (min-width:768px){ :root:not(.android):not(.ios) .table-card>.table-title{padding:12px 19px} :root:not(.android):not(.ios) .table-card>.pagination{border-top:0} :root:not(.android):not(.ios) .pagination :is(.pager-back,.pager-next){font-size:12.5px!important;font-weight:550!important;color:var(--ink2)!important} :root:not(.android):not(.ios) .pagination :is(.pager-back,.pager-next):disabled{color:var(--ink3)!important} :root:not(.android):not(.ios) .empty-state,:root:not(.android):not(.ios) .table-card .empty-state{padding:26px 19px;gap:8px} :root:not(.android):not(.ios) .empty-state h2{font-size:14px;font-weight:600} :root:not(.android):not(.ios) .empty-state p{max-width:40ch;font-size:12.5px;line-height:1.6;color:var(--ink2)} :root:not(.android):not(.ios) .empty-state button{height:38px;min-height:38px;margin-top:4px;padding:0 15px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font-size:13px;font-weight:600} :root:not(.android):not(.ios) .empty-state button .icon{width:16px;height:16px} /* Horizontal tabs are filled pills everywhere the app already fills a selected tab (patient record, editor toolbar): a rounded pill needs a radius too, which studio.css's fill rules never added (UI-CONSISTENCY-001). The Visit Redesign's split view (≥768px) also moves the horizontal tabs out of .editor-toolbar into #sources-card and #note-card's own .note-tabs (splitDocument, app.js), so its widest screens never got the single-card fill rule at all; same fill, the split structure's own selectors. */ :root:not(.android):not(.ios) #encounter-page .editor-toolbar .tabs button[aria-selected=true], :root:not(.android):not(.ios) #encounter-page #sources-card .tabs button[aria-selected=true], :root:not(.android):not(.ios) #encounter-page #note-card .note-tabs button[aria-selected=true]{background:var(--accent-tint)!important;color:var(--accent-text)!important;font-weight:600!important;border-radius:8px!important} } /* ---- Dialogs: the modal frame (New patient is the template) and the destructive confirm (DESIGN_GUIDE §6 Modal / Destructive confirm) ---- */ .dialog-close{display:none} @media (min-width:768px){ :root:not(.android):not(.ios) :is(#setup-dialog,#legacy-import,#remote,#session-signin,#approval-dialog,#quota-dialog,#objection-dialog,#import-dialog,#tab-lock,#shortcuts-dialog,#name-nudge){padding:24px 28px;border-radius:14px;box-shadow:var(--shadow-card)} :root:not(.android):not(.ios) :is(#setup-dialog,#legacy-import,#remote,#session-signin,#approval-dialog,#quota-dialog,#objection-dialog,#import-dialog,#tab-lock,#shortcuts-dialog,#name-nudge) h2{font-size:22px;font-weight:600;letter-spacing:-.026em;line-height:1.25;margin:0 0 6px} :root:not(.android):not(.ios) :is(#setup-dialog,#legacy-import,#remote,#session-signin,#approval-dialog,#quota-dialog,#objection-dialog,#import-dialog,#tab-lock,#name-nudge) h2+p{font-size:13px;color:var(--ink2);line-height:1.65} :root:not(.android):not(.ios) :is(#setup-dialog,#legacy-import,#session-signin,#approval-dialog,#quota-dialog,#objection-dialog,#import-dialog,#tab-lock,#name-nudge) .dialog-actions{justify-content:flex-end;gap:11px;border-top:1px solid var(--line);padding-top:20px;margin-top:23px} /* The shared form dialog keeps its head / scrolling body / foot split; the head loses its rule, the foot gains the design's */ :root:not(.android):not(.ios) #clinical-dialog{border-radius:14px;box-shadow:var(--shadow-card)} :root:not(.android):not(.ios) #clinical-dialog .clinical-dialog-header{padding:24px 72px 0 28px;border-bottom:0} :root:not(.android):not(.ios) #clinical-dialog .clinical-dialog-header h2{font-size:22px;font-weight:600;letter-spacing:-.026em;line-height:1.25} :root:not(.android):not(.ios) #clinical-dialog #clinical-dialog-content{padding:20px 28px} :root:not(.android):not(.ios) #clinical-dialog[open] .dialog-actions{margin:0 28px;padding:20px 0 24px;border-top:1px solid var(--line);gap:11px;justify-content:flex-end} :root:not(.android):not(.ios) #clinical-dialog .dialog-actions .spacer{display:none} :root:not(.android):not(.ios) #clinical-dialog .dialog-close{display:inline-flex;align-items:center;justify-content:center;position:absolute;top:24px;right:28px;z-index:2;width:34px;height:34px;min-height:0;padding:0;border:0;border-radius:8px;background:var(--panel2);color:var(--ink2)} :root:not(.android):not(.ios) #clinical-dialog .dialog-close:hover{background:var(--line2);color:var(--ink)} :root:not(.android):not(.ios) #clinical-dialog .dialog-close .icon{width:19px;height:19px} /* Footer buttons: Cancel 13/550 --ink2 on --panel, the primary 13/600; no glyph on Cancel */ :root:not(.android):not(.ios) dialog .dialog-actions button:not(.primary):not(.danger):not(.danger-outline){padding-left:16px;padding-right:16px;border:1px solid var(--line);background:var(--panel);color:var(--ink2);font-size:13px;font-weight:550} :root:not(.android):not(.ios) dialog .dialog-actions button:not(.primary):not(.danger):not(.danger-outline):hover{background:var(--panel2);color:var(--ink)} :root:not(.android):not(.ios) dialog .dialog-actions .primary{padding-left:18px;padding-right:18px;font-size:13px;font-weight:600} :root:not(.android):not(.ios) dialog .dialog-actions button[data-action-icon=close] .action-icon{display:none} /* Destructive confirm: 470px, 24px 26px, 18/600 title, the list of what is lost in a --panel2 box, Keep it and the verb at the right */ :root:not(.android):not(.ios) :is(#signout-dialog,#recording-guard,#delete-data){width:min(470px,calc(100vw - 32px));max-width:none;padding:24px 26px;border-radius:14px;box-shadow:var(--shadow-card)} :root:not(.android):not(.ios) :is(#signout-dialog,#recording-guard,#delete-data) h2{font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.3;margin:0} :root:not(.android):not(.ios) :is(#signout-dialog,#recording-guard,#delete-data) h2+p{font-size:13px;color:var(--ink2);line-height:1.65;margin:6px 0 0} :root:not(.android):not(.ios) .alert-head{display:flex;gap:13px;align-items:flex-start} :root:not(.android):not(.ios) .alert-head>div{min-width:0;flex:1} :root:not(.android):not(.ios) .alert-tile{display:flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:9px;background:var(--danger-bg);color:var(--danger)} :root:not(.android):not(.ios) .alert-tile .icon{width:19px;height:19px} :root:not(.android):not(.ios) :is(#signout-dialog,#delete-data) .signout-list{margin:16px 0 0;padding:0;list-style:none;border:1px solid var(--line);border-radius:10px;background:var(--panel2);overflow:hidden} :root:not(.android):not(.ios) :is(#signout-dialog,#delete-data) .signout-list li{margin:0;padding:10px 13px;font-size:13px;color:var(--ink);border-bottom:1px solid var(--line2)} :root:not(.android):not(.ios) :is(#signout-dialog,#delete-data) .signout-list li:last-child{border-bottom:0} :root:not(.android):not(.ios) :is(#signout-dialog,#recording-guard,#delete-data) p.muted{font-size:12.5px;color:var(--ink3);line-height:1.6;margin:12px 0 0} :root:not(.android):not(.ios) #recording-guard h2+p.muted{font-size:13px;color:var(--ink2);line-height:1.65;margin:6px 0 0} :root:not(.android):not(.ios) :is(#signout-dialog,#recording-guard,#delete-data) .dialog-actions{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;margin-top:20px;border:0;padding:0} :root:not(.android):not(.ios) :is(#signout-dialog,#recording-guard,#delete-data) .dialog-actions button{height:42px;min-height:42px;width:auto;flex:none;margin:0;padding:0 16px;font-size:13px;white-space:nowrap;justify-content:center} :root:not(.android):not(.ios) :is(#signout-dialog,#recording-guard,#delete-data) .dialog-actions .primary,:root:not(.android):not(.ios) :is(#signout-dialog,#recording-guard,#delete-data) .dialog-actions .danger{padding:0 18px;font-weight:600} :root:not(.android):not(.ios) :is(#signout-dialog,#recording-guard,#delete-data) .dialog-actions .danger{border:0;background:var(--danger-fill);color:var(--on-fill)} :root:not(.android):not(.ios) #recording-guard .dialog-actions #guard-stay{margin-right:auto} :root:not(.android):not(.ios) #signout-dialog .dialog-actions #signout-cancel{order:-1;margin-right:auto} :root:not(.android):not(.ios) #signout-dialog .dialog-actions #signout-keep{order:3} }