/* Settings and the sign-in / sign-up / verification screens 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). */

/* ==== Settings ==== */
/* Desktop and the web at 768px and up: the phones’ web tier keeps app.css’s own settings frame. */
@media (min-width:768px){

/* The Settings dialog’s frame (Source 1338-1339): a centred modal at most 1000px wide, 84dvh tall, a 14px radius and the
   design’s shadow-card, over a plain #1c2c4766 scrim in both themes (design/DocVoc-Visit-Handoff-2026-09-23 audit gap 1;
   overrides app.css:740-743, which drew an 88vw/1600px sheet with a blurred backdrop). */
@media (min-width:768px){
  :root:not(.android):not(.ios) #settings-dialog{width:min(1000px,92vw);height:84dvh;max-width:none;max-height:none;border-radius:14px;box-shadow:var(--shadow-popover)}
  :root:not(.android):not(.ios) #settings-dialog[open]{grid-template-columns:212px minmax(0,1fr)}
  :root:not(.android):not(.ios) #settings-dialog::backdrop{background:var(--scrim);backdrop-filter:none}

  /* The rail (gap 2, Source 1341-1353): the sidebar ground, 13px/500 rows with a 17px icon, ink2 when unselected. The header
     and the tab list stay two grid rows (app.css:741); their combined padding and gap approximate the design’s single
     16px/10px, gap:14px column. */
  :root:not(.android):not(.ios) #settings-dialog .settings-dialog-header{padding:16px 10px 0;background:var(--sidebar-bg)}
  :root:not(.android):not(.ios) #settings-dialog .settings-dialog-tabs{padding:14px 10px 16px;gap:2px;background:var(--sidebar)}
  :root:not(.android):not(.ios) #settings-dialog .settings-dialog-tabs button{min-height:0;padding:9px 10px;gap:10px;font-size:13px;font-weight:500;color:var(--ink2);white-space:nowrap}
  :root:not(.android):not(.ios) #settings-dialog .settings-dialog-tabs .icon{width:17px;height:17px}

  /* The content column (gap 4, Source 1355-1374): the close button sits at the top-right of the whole dialog, in line with a
     20/24/22px rhythm instead of the wider 32/36px app.css gave the body; the rail’s own "Invite teammate" header button is
     removed (settings.js, Clinic & team below), so nothing collides with Close (F197). */
  :root:not(.android):not(.ios) #settings-dialog .settings-dialog-body{padding:20px 24px 22px}
  :root:not(.android):not(.ios) #settings-close{top:20px;right:20px}

  /* Row cards and controls (gap 6, Source 1386-1418): #local-settings rows (Recording & notes, Privacy) match the design’s
     13.5/550 ink label over a borderless panel2 field, phone/registration in mono. The shadow root’s own .set-row and
     .profile-field carry the matching rule in customer_portal/static/settings.css. */
  :root:not(.android):not(.ios) #settings-dialog .retention-label :is(label,.retention-name),
  :root:not(.android):not(.ios) #settings-dialog .recording-card .retention-row>label{font-size:13.5px;font-weight:550;color:var(--ink)}
  :root:not(.android):not(.ios) #settings-dialog .retention-row select{border:0;background:var(--row-highlight)}

  /* The toggle switch (gap 12, Source 1405-1407): 46×26, no border, the line colour off and the accent on, a plain white
     knob with the design’s shadow (app.css:408-409 drew a 52×28 bordered track with a grey knob). */
  :root:not(.android):not(.ios) .switch{width:46px;height:26px;border:0;background:var(--line);transition:background-color 160ms linear}
  :root:not(.android):not(.ios) .switch.on{background:var(--accent);border-color:transparent}
  :root:not(.android):not(.ios) .switch i{background:var(--on-fill);box-shadow:var(--knob-shadow)}

  /* Recording & notes → the test-clip card (gap 13, Source 1420-1429): recordingCard() now returns a wrapper (id
     recording-settings) around two sibling cards — the rows, then the test clip — instead of nesting the mic test inside
     the rows card’s own overflow:hidden box (studio.css:892, :902). Run recording setup moves inside as a quiet link. */
  :root:not(.android):not(.ios) #settings-dialog #recording-settings{display:contents} /* two blocks the pager can split, not one tall one it would clip */
  :root:not(.android):not(.ios) #settings-dialog #recording-settings>section{flex:none} /* the pager places a card whole on a page; a shrinking card would clip its rows */
  :root:not(.android):not(.ios) #settings-dialog .mic-test-card{padding:14px 16px;background:var(--row-highlight);border:1px solid var(--line);border-radius:12px}
  :root:not(.android):not(.ios) #settings-dialog .mic-test-card .mic-test{margin:0;padding:0;border:0;background:transparent}
  :root:not(.android):not(.ios) #settings-dialog .mic-test-card .setup-again{margin-top:10px;align-self:flex-start;border:0;background:transparent;color:var(--accent-text);padding:0;min-height:0}

  /* Privacy → Kept audio (gap 15): the sentence moves to a right-hand static value, the label alone on the left. */
  :root:not(.android):not(.ios) #settings-dialog .kept-audio-row{justify-content:space-between}
  :root:not(.android):not(.ios) #settings-dialog .kept-audio-value{flex:0 1 320px;min-width:0;font-size:13.5px;font-weight:550;color:var(--ink);text-align:right}

  /* Privacy → Export all my data (gap 24): a one-line status under the row, visible while the dialog covers the shared
     #message banner (clinical.js:1408, F203), instead of only the hidden status behind the modal. */
  :root:not(.android):not(.ios) #settings-dialog .retention-status{font-size:12.5px;line-height:1.55;color:var(--ink2);margin-top:-6px}
  :root:not(.android):not(.ios) #settings-dialog .retention-status:empty{display:none}
}

/* ==== Account entry ==== */
/* The workspace’s email-verification dialog (app.css:620-635; a legacy id-based sheet, out-specified rather than
   edited): at 1040x680 the six sections (icon, eyebrow, heading, description, instructions card, actions, Sign out)
   can still run past the dialog’s fixed max-height with overflow:hidden, clipping Sign out below the fold. A short
   window tightens the gaps and the instructions card instead of adding a scrollbar (owner: never a dead end). */
@media (min-width: 768px) and (max-height: 760px) {
  :root:not(.android):not(.ios) #email-verification-dialog { padding: 16px clamp(20px, 3vw, 40px) 20px !important; }
  :root:not(.android):not(.ios) .verification-content { gap: 8px !important; }
  :root:not(.android):not(.ios) .verification-icon { width: 40px !important; height: 40px !important; }
  :root:not(.android):not(.ios) .verification-instructions { padding: 12px !important; }
  :root:not(.android):not(.ios) #email-verification-dialog .verification-instructions p + p { margin-top: 6px !important; }
}
}

/* Recording & notes at a short window: the rows and the test clip sit closer so each card stays within one page of the dialog. */
@media (min-width:768px) and (max-height:760px){
  :root:not(.android):not(.ios) #settings-dialog .recording-card .retention-rows{gap:6px;margin-top:8px}
  :root:not(.android):not(.ios) #settings-dialog .recording-card .retention-row{padding-top:4px;padding-bottom:4px;min-height:0}
  :root:not(.android):not(.ios) #settings-dialog .recording-card .mic-test{margin-top:8px;padding:8px 14px}
  :root:not(.android):not(.ios) #settings-dialog .recording-card .setup-again{margin-top:8px;padding:6px 12px}
}

/* A short window (≤820px, as app.css always compacted): the dialog body keeps its rows on screen rather than clipping the last one. */
@media (min-width:768px) and (max-height:820px){
  :root:not(.android):not(.ios) #settings-dialog .settings-dialog-body{padding:12px 24px 10px}
  :root:not(.android):not(.ios) #settings-dialog{height:calc(100dvh - 32px)} /* the design’s 84dvh only once the window is tall enough to hold every tab’s rows */
}

/* The phones’ web tier keeps its own Recording & notes card: the desktop-and-web rows (default language, Genie voice control —
   Genie’s top-bar mic exists only there) and the test-clip card’s frame stay out of the small window, so nothing scrolls. */
@media (max-width:767px){
  :root:not(.android):not(.ios) #settings-dialog .retention-row:has(#recording-language),:root:not(.android):not(.ios) #settings-dialog .retention-row:has(#genie-voice-control){display:none}
  :root:not(.android):not(.ios) #settings-dialog #recording-settings{display:contents}
  :root:not(.android):not(.ios) #settings-dialog .mic-test-card{padding:0;border:0;background:none;box-shadow:none}
}