/* THE SCREENS CHRIS DIDN'T DRAW, IN THE DESIGN SYSTEM (Oct 2026 revamp).
 *
 * skin.css carries the designed screens and the shared frame; skin-smoke.css
 * (generated) moves hard-coded light fills and dark type onto the dark page.
 * Neither turns an undrawn screen into the system: it kept its old fonts,
 * boxed rows and buttons (Rob, 6 Oct). This file does, screen family by
 * screen family, in the vocabulary of the drawn screens:
 *
 *   card    smoked glass, 28px corners, 26/28 padding
 *   head    eyebrow (11px caps, accent) over a 22px Inter Tight title
 *   rows    inside a card, hairline dividers, no box per row
 *   pills   999px, 11.5px, glass or tone
 *   buttons white pill (primary), glass pill (secondary)
 *   fields  glass, 14px corners
 *
 * Every rule is under :root:has([data-ui-v2]) body, which out-ranks both
 * other sheets; nothing changes for anyone without the new UI.
 */

/* ── 0. Type: Inter Tight for everything on the page ────────────────────── */
/* The designs set every word in Inter Tight (numbers in Doto). The old screens
   name Jost, Cormorant and Cinzel in their own stylesheets and in inline
   style attributes, so this has to win over both. The rail and the sign-in
   mark keep their own faces (they are outside these containers). */
:root:has([data-ui-v2]) body :is(.pvs-main, .portal main, .app, [role="dialog"], .pv-sheet, .atlas-confirm) *:not(svg, svg *),
:root:has([data-ui-v2]) body :is(.pvs-main, .portal main, .app, [role="dialog"], .pv-sheet, .atlas-confirm) *::before,
:root:has([data-ui-v2]) body :is(.pvs-main, .portal main, .app, [role="dialog"], .pv-sheet, .atlas-confirm) *::after {
  font-family: var(--sans) !important;
}
:root:has([data-ui-v2]) body :is(.pvs-main, .portal main, .app, [role="dialog"]) :is(.pv-kpi .val, .app .stat-box b, .ax-scale-v, .ax-score-v b, .v2-num, .you-stat b, .pw-stat b, .stats .stat .v, .qeeg-index .iscore) {
  font-family: var(--v2-num) !important;
}
/* Every big figure is Doto (Rob, 8 Oct): the You tiles, the pillar tab's three, the cohort tiles, the qEEG
   index scores joined the home tiles. Doto is drawn at 800 everywhere. */
:root:has([data-ui-v2]) body :is(.pvs-main, .portal main, .app) :is(.you-stat b, .pw-stat b, .stats .stat .v, .qeeg-index .iscore) {
  font-weight: 800 !important; letter-spacing: -0.02em;
}
/* Italic serif emphasis becomes the design's dimmed upright word. */
:root:has([data-ui-v2]) body :is(.pvs-main, .portal main, .app) :is(h1, h2, h3, h4, [class*="title"], [class*="-h"]) em {
  font-style: normal; opacity: 0.6; color: inherit;
}
:root:has([data-ui-v2]) body :is(.pvs-main, .portal main, .app) :is(h2, h3) {
  font-weight: 400; letter-spacing: -0.025em;
}

/* ── 1. Accounts, Providers, Patients (components/admin/styles.ts, acc-) ── */
/* The hero sits right on top of the first card, as on the overview. */
:root:has([data-ui-v2]) body .acc-shell .v2-hero { margin-bottom: 8px; padding-bottom: 20px; min-height: 0; }

/* The list is ONE card; each account is a row in it. */
:root:has([data-ui-v2]) body .acc-list {
  background: rgba(10, 18, 14, 0.36) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 28px; padding: 10px 14px 12px; overflow: hidden;
  -webkit-backdrop-filter: var(--v2-smoke-blur); backdrop-filter: var(--v2-smoke-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 34px 70px -44px rgba(0, 0, 0, 0.7);
}
:root:has([data-ui-v2]) body .acc-head {
  background: none !important; border: 0 !important; padding: 14px 14px 10px !important;
  font-size: 11px !important; letter-spacing: 0.14em !important; text-transform: uppercase;
}
:root:has([data-ui-v2]) body .acc-head * { color: var(--v2-ac) !important; font-size: 11px !important; letter-spacing: 0.14em !important; }
:root:has([data-ui-v2]) body .acc-item { border: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 0 !important; background: none !important; margin: 0 !important; box-shadow: none !important; }
:root:has([data-ui-v2]) body :is(.acc-row, .acc-row-btn, .acc-row-btn:not(.acc-row)) {
  background: transparent !important; border: 0 !important; border-radius: 18px !important; box-shadow: none !important;
  padding: 14px !important; color: #fff; transform: none !important;
}
:root:has([data-ui-v2]) body :is(.acc-row-btn:hover, .acc-item.open .acc-row) { background: rgba(255, 255, 255, 0.07) !important; }
:root:has([data-ui-v2]) body .acc-name { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: #fff !important; }
:root:has([data-ui-v2]) body :is(.acc-email, .acc-role-title, .acc-linked, .acc-license, .acc-joined, .acc-caps, .acc-account-txt > div:not(.acc-name)) {
  font-size: 12.5px !important; font-style: normal !important; letter-spacing: 0 !important; color: rgba(255, 255, 255, 0.66) !important;
}
:root:has([data-ui-v2]) body .acc-ava {
  width: 40px; height: 40px; border-radius: 50%; border: 0 !important; background: var(--v2-ac) !important; color: #1b1410 !important;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em; display: grid; place-items: center;
}
:root:has([data-ui-v2]) body .acc-you {
  font-size: 10.5px !important; letter-spacing: 0.04em !important; text-transform: none; padding: 2px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14) !important; color: #fff !important; border: 0 !important; margin-left: 8px;
}
/* Role, tier and access badges: the design's tone pills. */
:root:has([data-ui-v2]) body :is(.acc-role-badge, .acc-tier-badge, .acc-atlas-badge) {
  border-radius: 999px !important; padding: 5px 11px !important; font-size: 11.5px !important; letter-spacing: 0.02em !important;
  text-transform: none !important; font-weight: 500; border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.12) !important; color: #fff !important;
}
:root:has([data-ui-v2]) body .acc-atlas-badge.on { background: rgba(169, 211, 191, 0.16) !important; border-color: rgba(169, 211, 191, 0.3) !important; color: #d3efe2 !important; }
:root:has([data-ui-v2]) body .acc-atlas-badge.off { background: transparent !important; color: rgba(255, 255, 255, 0.6) !important; }
:root:has([data-ui-v2]) body .acc-status { font-size: 12.5px !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff !important; }
:root:has([data-ui-v2]) body .acc-status-dot { width: 7px; height: 7px; }
:root:has([data-ui-v2]) body :is(.acc-caps-all, .acc-caps-none, .acc-linked-none) { font-style: normal !important; color: rgba(255, 255, 255, 0.6) !important; }
:root:has([data-ui-v2]) body .acc-caps-count { color: var(--v2-ac) !important; }
:root:has([data-ui-v2]) body .acc-chev { color: rgba(255, 255, 255, 0.55) !important; }

/* Filter chips: glass pills; the chosen one white. */
:root:has([data-ui-v2]) body .acc-summary { gap: 8px; margin: 0 0 16px; }
:root:has([data-ui-v2]) body :is(.acc-pill, .acc-pill-btn) {
  border-radius: 999px !important; padding: 8px 16px !important; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important;
  background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; color: #fff !important; opacity: 1 !important;
}
:root:has([data-ui-v2]) body .acc-pill-btn:hover { background: rgba(255, 255, 255, 0.18) !important; }
:root:has([data-ui-v2]) body .acc-pill-btn.on { background: #fff !important; border-color: #fff !important; color: #1b1410 !important; }

/* "+ New ▾": the white pill; its menu is a cream floating piece. */
:root:has([data-ui-v2]) body .acc-actions-trigger {
  border-radius: 999px !important; padding: 10px 18px !important; font-size: 14px !important; font-weight: 500; letter-spacing: 0 !important; text-transform: none !important;
  background: #fff !important; color: #1b1410 !important; border: 0 !important; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
}
:root:has([data-ui-v2]) body .acc-actions-menu { border-radius: 20px !important; padding: 6px !important; border: 0 !important; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6) !important; }
:root:has([data-ui-v2]) body .acc-actions-item { border-radius: 14px !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; padding: 10px 14px !important; }

/* The open account's editor and the invite / access-code panels: the inset
   sheet inside the card, glass fields, segmented controls. */
:root:has([data-ui-v2]) body :is(.acc-editor, .acc-invite, .acc-invite-bar) {
  background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 22px !important; box-shadow: none !important; margin: 4px 0 12px !important; padding: 22px 24px !important;
}
:root:has([data-ui-v2]) body :is(.acc-invite, .acc-invite-bar):not(.acc-list *) {
  background: rgba(10, 18, 14, 0.36) !important; border-color: rgba(255, 255, 255, 0.16) !important; border-radius: 28px !important;
  -webkit-backdrop-filter: var(--v2-smoke-blur); backdrop-filter: var(--v2-smoke-blur);
}
:root:has([data-ui-v2]) body :is(.acc-edit-label, .acc-invite-head, .acc-fld > span, .acc-invite-done-label) {
  font-size: 11px !important; letter-spacing: 0.14em !important; text-transform: uppercase; color: var(--v2-ac) !important; font-weight: 500;
}
:root:has([data-ui-v2]) body :is(.acc-edit-note, .acc-invite-hint, .acc-invite-note) { font-size: 12.5px !important; font-style: normal !important; color: rgba(255, 255, 255, 0.66) !important; }
:root:has([data-ui-v2]) body .acc-seg { gap: 6px; background: none !important; border: 0 !important; padding: 0 !important; }
:root:has([data-ui-v2]) body :is(.acc-seg-btn, .acc-cap) {
  border-radius: 999px !important; padding: 7px 14px !important; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important;
  background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: #fff !important;
}
:root:has([data-ui-v2]) body :is(.acc-seg-btn.on, .acc-cap.on) { background: #fff !important; border-color: #fff !important; color: #1b1410 !important; }
:root:has([data-ui-v2]) body .acc-seg-btn:disabled:not(.on) { opacity: 0.45; }
:root:has([data-ui-v2]) body :is(.acc-fld input, .acc-fld select, .acc-edit-group select, .acc-editor .tw-input, .acc-invite-link input) {
  border-radius: 14px !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important; font-size: 14px !important; letter-spacing: 0 !important; padding: 10px 14px !important; height: auto;
}
:root:has([data-ui-v2]) body :is(.acc-invite-submit, .acc-invite-link button, .acc-invite-open) {
  border-radius: 999px !important; background: #fff !important; color: #1b1410 !important; border: 0 !important;
  font-size: 14px !important; font-weight: 500; letter-spacing: 0 !important; text-transform: none !important; padding: 10px 18px !important;
}
:root:has([data-ui-v2]) body .acc-invite-secondary {
  border-radius: 999px !important; background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; padding: 10px 18px !important;
}
:root:has([data-ui-v2]) body .acc-err { color: #f8b9a6 !important; font-style: normal !important; }
:root:has([data-ui-v2]) body .acc-fld > .acc-move-hint { color: #f8b9a6 !important; font-family: inherit !important; font-style: normal !important; font-size: 12.5px !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.4 !important; }
:root:has([data-ui-v2]) body .acc-lede strong { color: #fff; font-weight: 500; }
:root:has([data-ui-v2]) body .acc-atlas-badge { width: auto !important; min-width: 0 !important; display: inline-flex !important; justify-content: center; }
:root:has([data-ui-v2]) body .acc-actions { margin-top: -6px; margin-bottom: 14px; }

/* Machine text (hashes, JSON, IPs) stays monospace, upright and as written. */
:root:has([data-ui-v2]) body :is(.pvs-main, .portal main, .app, [role="dialog"]) :is(.mono, pre, code, kbd, .aud-modal-pre) {
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important; text-transform: none !important; letter-spacing: 0 !important;
}

/* ── Shared: fields, primary / secondary / danger pills, smoked cards ─────── */
:root:has([data-ui-v2]) body :is(.aud-input, .bg-input, .bg-reason, .bg-field select, .bg-field input, .bg-field textarea, .set-card :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)) {
  border-radius: 14px !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important; font-size: 14px !important; letter-spacing: 0 !important; padding: 11px 14px !important; box-shadow: none !important;
}
:root:has([data-ui-v2]) body :is(.aud-filter-submit, .set-create-btn, .set-save, .bgx-link.primary) {
  border-radius: 999px !important; background: #fff !important; color: #1b1410 !important; border: 0 !important;
  font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; padding: 10px 20px !important; height: auto !important;
}
:root:has([data-ui-v2]) body :is(.aud-filter-clear, .aud-page-btn, .bg-close, .bg-unpick, .bg-read) {
  border-radius: 999px !important; background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.22) !important;
  font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; padding: 8px 16px !important; text-decoration: none !important;
}
:root:has([data-ui-v2]) body .aud-page-btn.disabled { opacity: 0.4; }
:root:has([data-ui-v2]) body .bg-btn {
  border-radius: 999px !important; background: #f39a80 !important; color: #1b1410 !important; border: 0 !important;
  font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; padding: 11px 22px !important;
}
:root:has([data-ui-v2]) body .bg-btn:disabled { opacity: 0.4; }
:root:has([data-ui-v2]) body :is(.aud-card, .bg-panel, .bgx-card, .set-card) {
  background: rgba(10, 18, 14, 0.36) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 28px !important;
  -webkit-backdrop-filter: var(--v2-smoke-blur); backdrop-filter: var(--v2-smoke-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 34px 70px -44px rgba(0, 0, 0, 0.7) !important;
}

/* ── 2. Audit log (AuditLogScreen / AuditTable / AuditChainBadge, aud-) ──── */
:root:has([data-ui-v2]) body .aud-filters { gap: 10px; margin-bottom: 16px; }
:root:has([data-ui-v2]) body .aud-card { padding: 10px 14px 14px !important; overflow: hidden; }
:root:has([data-ui-v2]) body .aud-table { border-collapse: separate; border-spacing: 0; }
:root:has([data-ui-v2]) body .aud-table th {
  background: none !important; border: 0 !important; padding: 14px 14px 10px !important;
  font-size: 11px !important; letter-spacing: 0.14em !important; text-transform: uppercase; color: var(--v2-ac) !important; font-weight: 500;
}
:root:has([data-ui-v2]) body .aud-table td { border: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; padding: 13px 14px !important; font-size: 13.5px; color: #fff; background: none !important; }
:root:has([data-ui-v2]) body .aud-table tbody tr:hover td { background: rgba(255, 255, 255, 0.06) !important; }
:root:has([data-ui-v2]) body .aud-table .dim { color: rgba(255, 255, 255, 0.6) !important; }
:root:has([data-ui-v2]) body .aud-pill {
  border-radius: 999px !important; padding: 4px 10px !important; font-size: 11.5px !important; letter-spacing: 0 !important; text-transform: none !important;
  background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
:root:has([data-ui-v2]) body .aud-pagination { border-top: 1px solid rgba(255, 255, 255, 0.1) !important; padding: 14px 14px 4px !important; background: none !important; }
:root:has([data-ui-v2]) body .aud-pagination-count { font-size: 12.5px !important; letter-spacing: 0 !important; color: rgba(255, 255, 255, 0.66) !important; }
:root:has([data-ui-v2]) body .aud-badge {
  border-radius: 999px !important; padding: 8px 14px !important; background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; display: inline-flex; align-items: center; gap: 8px;
}
:root:has([data-ui-v2]) body .aud-badge-label { position: static !important; opacity: 1 !important; max-width: none !important; margin-right: 0 !important; transform: none !important; background: none !important; color: #fff !important; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; padding: 0 !important; }
:root:has([data-ui-v2]) body .aud-badge-pop { border-radius: 22px !important; padding: 18px 20px !important; }
:root:has([data-ui-v2]) body .aud-modal { border-radius: 32px !important; }
:root:has([data-ui-v2]) body :is(.aud-field-label, .aud-modal-meta) { font-size: 11px !important; letter-spacing: 0.14em !important; text-transform: uppercase; }
:root:has([data-ui-v2]) body .aud-modal-pre { border-radius: 16px !important; }
:root:has([data-ui-v2]) body .aud-modal-close { border-radius: 50% !important; width: 40px; height: 40px; }

/* ── 3. Break the glass (break-glass/page.tsx bgx-, BreakGlassPanel bg-) ── */
:root:has([data-ui-v2]) body .bgx-cards { gap: 16px; }
:root:has([data-ui-v2]) body .bgx-card { padding: 22px 26px !important; min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; }
:root:has([data-ui-v2]) body .bgx-n { font-family: var(--v2-num) !important; font-weight: 800 !important; font-size: 46px !important; line-height: 1; color: #fff !important; letter-spacing: -0.02em; }
:root:has([data-ui-v2]) body .bgx-l { font-size: 11px !important; letter-spacing: 0.14em !important; text-transform: uppercase; color: rgba(255, 255, 255, 0.78) !important; }
:root:has([data-ui-v2]) body .bgx-card .bgx-link {
  align-self: flex-start; border-radius: 999px !important; padding: 8px 14px !important; background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #fff !important; text-decoration: none !important; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important;
}
:root:has([data-ui-v2]) body .bg-panel { padding: 28px !important; }
:root:has([data-ui-v2]) body .bg-h { font-size: 22px !important; font-weight: 400 !important; letter-spacing: -0.025em !important; color: #fff !important; }
:root:has([data-ui-v2]) body .bg-p { font-size: 14px !important; color: rgba(255, 255, 255, 0.72) !important; font-style: normal !important; }
:root:has([data-ui-v2]) body .bg-field > span, :root:has([data-ui-v2]) body .bg-field label { font-size: 11px !important; letter-spacing: 0.14em !important; color: var(--v2-ac) !important; }
:root:has([data-ui-v2]) body :is(.bg-results, .bg-list) { border-radius: 20px !important; overflow: hidden; }
:root:has([data-ui-v2]) body :is(.bg-result, .bg-list > *) { border-radius: 0 !important; }
:root:has([data-ui-v2]) body :is(.bg-chosen, .bg-thread) { border-radius: 20px !important; background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; }
:root:has([data-ui-v2]) body .bg-pill { border-radius: 999px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 11.5px !important; padding: 4px 10px !important; }
:root:has([data-ui-v2]) body .bg-sep { border-color: rgba(255, 255, 255, 0.1) !important; }

/* The rail scrolls when its items outgrow the window, without a scrollbar
   showing (Rob, 6 Oct: "so it's not so jarring"). */
:root:has([data-ui-v2]) body :is(.pvs, .portal .side.pvs, .pvs nav, .pvs .pvs-nav) { scrollbar-width: none; -ms-overflow-style: none; }
:root:has([data-ui-v2]) body :is(.pvs, .portal .side.pvs, .pvs nav, .pvs .pvs-nav)::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ── 4. Content library (admin/content, cnt-) ───────────────────────────── */
/* Each group is a card (eyebrow head, rows inside), like the overview's cards. */
:root:has([data-ui-v2]) body .cnt-section {
  background: rgba(10, 18, 14, 0.36) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 28px !important;
  padding: 22px 26px 12px !important; margin: 0 0 16px !important;
  -webkit-backdrop-filter: var(--v2-smoke-blur); backdrop-filter: var(--v2-smoke-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 34px 70px -44px rgba(0, 0, 0, 0.7);
}
:root:has([data-ui-v2]) body .cnt-section-head {
  font-size: 11px !important; letter-spacing: 0.14em !important; text-transform: uppercase; color: var(--v2-ac) !important; margin: 0 0 6px !important; font-weight: 500;
}
:root:has([data-ui-v2]) body .cnt-list { gap: 0 !important; display: block !important; }
:root:has([data-ui-v2]) body .cnt-row {
  background: none !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 0 !important;
  padding: 14px 6px !important; margin: 0 !important; color: #fff !important; box-shadow: none !important;
}
:root:has([data-ui-v2]) body .cnt-list > .cnt-row:first-child { border-top: 0 !important; }
:root:has([data-ui-v2]) body .cnt-row:hover { background: rgba(255, 255, 255, 0.06) !important; border-radius: 14px !important; }
:root:has([data-ui-v2]) body .cnt-row-label { font-size: 15px !important; letter-spacing: -0.01em !important; color: #fff !important; }
:root:has([data-ui-v2]) body .cnt-row-count {
  font-size: 12px !important; border-radius: 999px; padding: 3px 10px; background: rgba(255, 255, 255, 0.12); color: #fff !important; letter-spacing: 0 !important;
}
:root:has([data-ui-v2]) body .cnt-row-arrow { color: rgba(255, 255, 255, 0.6) !important; }
:root:has([data-ui-v2]) body .cnt-row-sample { border-radius: 999px; font-size: 11px !important; letter-spacing: 0.04em !important; text-transform: none !important; }
/* The sample-content switch: a card with the design's switch. */
:root:has([data-ui-v2]) body .cnt-sample {
  background: rgba(10, 18, 14, 0.36) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 28px !important;
  padding: 22px 26px !important; -webkit-backdrop-filter: var(--v2-smoke-blur); backdrop-filter: var(--v2-smoke-blur); color: #fff;
}
:root:has([data-ui-v2]) body .cnt-sample > span > span:first-child { font-size: 16px !important; color: #fff !important; }
:root:has([data-ui-v2]) body .cnt-sample > span > span + span { color: rgba(255, 255, 255, 0.66) !important; }
:root:has([data-ui-v2]) body .cnt-sample [role="switch"] { background: rgba(255, 255, 255, 0.2) !important; }
:root:has([data-ui-v2]) body .cnt-sample [role="switch"][aria-checked="true"] { background: var(--v2-ac) !important; }

/* One content type's list (ContentAdmin, inline-styled; cad- hooks). */
:root:has([data-ui-v2]) body .cad-shell { background: transparent !important; padding: 0 48px 80px !important; min-height: 0 !important; }
:root:has([data-ui-v2]) body .cad-back {
  display: inline-flex; margin-top: 40px; border-radius: 999px; padding: 7px 14px !important; background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28); color: #fff !important; font-size: 12.5px !important; letter-spacing: 0 !important; text-transform: none !important;
}
:root:has([data-ui-v2]) body .cad-head { margin: 22px 0 28px !important; }
:root:has([data-ui-v2]) body .cad-title { font-size: clamp(44px, 6vw, 72px) !important; font-weight: 400 !important; letter-spacing: -0.05em !important; line-height: 0.95 !important; color: #fff !important; }
:root:has([data-ui-v2]) body :is(.cad-add, .cad-modal button[style*="999"]) {
  background: #fff !important; color: #1b1410 !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; padding: 10px 20px !important;
}
:root:has([data-ui-v2]) body .cad-table {
  display: table; border-collapse: separate !important; border-spacing: 0; border-radius: 28px; overflow: hidden;
  background: rgba(10, 18, 14, 0.36); border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: var(--v2-smoke-blur); backdrop-filter: var(--v2-smoke-blur);
}
:root:has([data-ui-v2]) body .cad-table th { border: 0 !important; padding: 18px 16px 10px !important; font-size: 11px !important; letter-spacing: 0.14em !important; color: var(--v2-ac) !important; }
:root:has([data-ui-v2]) body .cad-table td { border: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; padding: 14px 16px !important; color: #fff !important; }
:root:has([data-ui-v2]) body .cad-table tr.cad-sample td { color: rgba(255, 255, 255, 0.45) !important; }
:root:has([data-ui-v2]) body .cad-edit { color: var(--v2-ac) !important; }
:root:has([data-ui-v2]) body .cad-delete { color: #f8b9a6 !important; }
/* Its editor floats over the page: cream, the design's modal shape. */
:root:has([data-ui-v2]) body .cad-scrim { background: rgba(14, 10, 8, 0.45) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
:root:has([data-ui-v2]) body .cad-modal { background: #f6f3ee !important; color: #1b1410 !important; border-radius: 32px !important; padding: 30px !important; box-shadow: 0 40px 90px -40px rgba(20, 12, 6, 0.6); }
:root:has([data-ui-v2]) body .cad-modal :is(input, select, textarea) { border-radius: 14px !important; background: #fff !important; border: 1px solid rgba(27, 20, 16, 0.14) !important; color: #1b1410 !important; }
:root:has([data-ui-v2]) body .cad-modal h2 { font-size: 24px !important; font-weight: 400; letter-spacing: -0.03em; color: #1b1410 !important; }
:root:has([data-ui-v2]) body .cad-modal button[style*="999"] { background: #1b1410 !important; color: #fff !important; }
:root:has([data-ui-v2]) body .cad-modal {
  color-scheme: light; --ink-900: #1b1410; --ink-700: #3b332c; --ink-500: #5f574e; --ink-400: #6b6359; --ink-300: #857c72;
  --sand-50: #fbfaf6; --sand-100: #f6f3ee; --sand-200: #ece7df; --sand-300: rgba(27, 20, 16, 0.12);
  --v2-text: #1b1410; --v2-text-2: #5f574e; --v2-lift: 100%; --v2-on-ink: #fbfaf6;
  --v2-fill: #fff; --v2-fill-nested: #fff; --v2-fill-edge: rgba(27, 20, 16, 0.1); --v2-fill-nested-edge: rgba(27, 20, 16, 0.1); --v2-fill-blur: none; --v2-sheet: #fff;
}

/* The designs never set type in italics (the serif italics were the old
   system's voice). */
:root:has([data-ui-v2]) body :is(.pvs-main, .portal main, .app) :is(p, span, div, small, em, i, label, a, li, td, dd, dt, blockquote, cite) { font-style: normal !important; }

/* ── 5. Segmented tabs: the design's glass switch (Admin/Provider/Patient) ─ */
:root:has([data-ui-v2]) body :is(.ct-tabs) {
  display: inline-flex !important; gap: 4px; padding: 5px !important; border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.1) !important; -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur); margin-bottom: 18px !important;
}
:root:has([data-ui-v2]) body .ct-tabs > button {
  border: 0 !important; border-radius: 999px !important; padding: 9px 18px !important; background: transparent !important; color: #fff !important;
  font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important;
}
:root:has([data-ui-v2]) body .ct-tabs > button.active { background: var(--v2-ac) !important; color: #1b1410 !important; }
:root:has([data-ui-v2]) body .ct-count { border-radius: 999px; background: rgba(27, 20, 16, 0.18); padding: 1px 7px; margin-left: 6px; font-size: 11px; }

/* ── 6. Contribute (ContributePanel, ct-) ───────────────────────────────── */
:root:has([data-ui-v2]) body :is(.ct-card, .ct-block) {
  background: rgba(10, 18, 14, 0.36) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 28px !important;
  padding: 24px 28px !important; -webkit-backdrop-filter: var(--v2-smoke-blur); backdrop-filter: var(--v2-smoke-blur); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}
:root:has([data-ui-v2]) body :is(.ct-empty, .ct-curator-note) {
  border-radius: 22px !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important;
  padding: 22px 24px !important; color: rgba(255, 255, 255, 0.82) !important; text-align: left !important; font-size: 15px !important;
}
:root:has([data-ui-v2]) body .ct-item-title { font-size: 18px !important; letter-spacing: -0.02em; color: #fff !important; }
:root:has([data-ui-v2]) body :is(.ct-item-meta, .ct-item-desc, .ct-review-note, .ct-review-trace, .ct-target) { color: rgba(255, 255, 255, 0.7) !important; font-size: 13.5px !important; }
:root:has([data-ui-v2]) body :is(.ct-label, .ct-eyebrow) { font-size: 11px !important; letter-spacing: 0.14em !important; color: var(--v2-ac) !important; }
:root:has([data-ui-v2]) body .ct-pill { border-radius: 999px !important; padding: 4px 10px !important; font-size: 11.5px !important; letter-spacing: 0 !important; text-transform: none !important; background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; }
:root:has([data-ui-v2]) body .ct-form :is(input, select, textarea) { border-radius: 14px !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #fff !important; font-size: 14px !important; }
:root:has([data-ui-v2]) body :is(.ct-submit, .ct-review-actions .approve) { border-radius: 999px !important; background: #fff !important; color: #1b1410 !important; border: 0 !important; font-size: 14px !important; font-weight: 500; letter-spacing: 0 !important; text-transform: none !important; padding: 10px 20px !important; }
:root:has([data-ui-v2]) body .ct-review-actions .reject { border-radius: 999px !important; background: transparent !important; color: #f8b9a6 !important; border: 1px solid rgba(243, 154, 128, 0.45) !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; padding: 10px 20px !important; }

/* ── 7. Settings (clinician + admin; components/settings/styles, set-) ──── */
/* A section is ONE card: its eyebrow inside, the old inner card dissolved. */
:root:has([data-ui-v2]) body .set-section {
  background: rgba(10, 18, 14, 0.36) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 28px !important;
  padding: 24px 28px !important; margin: 0 0 16px !important;
  -webkit-backdrop-filter: var(--v2-smoke-blur); backdrop-filter: var(--v2-smoke-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 34px 70px -44px rgba(0, 0, 0, 0.7);
}
:root:has([data-ui-v2]) body .set-section-head { font-size: 11px !important; letter-spacing: 0.14em !important; color: var(--v2-ac) !important; margin: 0 0 8px !important; font-weight: 500; }
:root:has([data-ui-v2]) body .set-section-note { font-size: 13.5px !important; color: rgba(255, 255, 255, 0.72) !important; }
:root:has([data-ui-v2]) body .set-section .set-card {
  background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root:has([data-ui-v2]) body .set-line { border-color: rgba(255, 255, 255, 0.1) !important; padding: 13px 0 !important; }
:root:has([data-ui-v2]) body .set-line-k { font-size: 12.5px !important; letter-spacing: 0 !important; text-transform: none !important; color: rgba(255, 255, 255, 0.66) !important; }
:root:has([data-ui-v2]) body .set-line-v { font-size: 15px !important; color: #fff !important; }
:root:has([data-ui-v2]) body .set-admin-link {
  border-radius: 22px !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; padding: 18px 20px !important; color: #fff !important;
}
:root:has([data-ui-v2]) body .set-admin-nav { display: grid; gap: 10px; }
:root:has([data-ui-v2]) body .set-admin-link:hover { background: rgba(255, 255, 255, 0.14) !important; }
:root:has([data-ui-v2]) body .set-admin-link-t { font-size: 16px !important; color: #fff !important; }
:root:has([data-ui-v2]) body .set-admin-link-d { font-size: 13px !important; color: rgba(255, 255, 255, 0.7) !important; }
:root:has([data-ui-v2]) body .set-signout {
  border-radius: 999px !important; background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; padding: 10px 20px !important;
}
:root:has([data-ui-v2]) body :is(.set-section label, .set-form label, .set-create-field > span) { font-size: 11px !important; letter-spacing: 0.14em !important; color: var(--v2-ac) !important; }

/* The care-team matrix (CareTeamMatrix, ctm-): filters as chips, the grid as a
   card of rows, assignees as pills, "+ Assign" as a quiet glass pill. */
:root:has([data-ui-v2]) body .ctm-filters { background: none !important; border: 0 !important; padding: 0 0 14px !important; gap: 8px; }
:root:has([data-ui-v2]) body .ctm-search { border-radius: 999px !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #fff !important; padding: 10px 16px !important; font-size: 14px !important; }
:root:has([data-ui-v2]) body :is(.ctm-filter-chip, .ctm-w-chip) {
  border-radius: 999px !important; padding: 7px 14px !important; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important;
  background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; color: #fff !important;
}
:root:has([data-ui-v2]) body :is(.ctm-filter-chip.on, .ctm-filter-chip.active, .ctm-filter-chip[aria-pressed="true"], .ctm-w-chip.on) { background: #fff !important; border-color: #fff !important; color: #1b1410 !important; }
:root:has([data-ui-v2]) body :is(.ctm-clin-filter, .ctm-result-count) { font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; color: rgba(255, 255, 255, 0.75) !important; }
:root:has([data-ui-v2]) body .ctm-grid { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 22px !important; overflow: hidden; }
:root:has([data-ui-v2]) body .ctm-headrow > * { font-size: 11px !important; letter-spacing: 0.14em !important; color: var(--v2-ac) !important; background: none !important; border: 0 !important; }
:root:has([data-ui-v2]) body .ctm-row > * { border-left: 0 !important; border-right: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; background: none !important; }
:root:has([data-ui-v2]) body .ctm-pname { font-size: 15px !important; color: #fff !important; }
:root:has([data-ui-v2]) body .ctm-pemail { font-size: 12px !important; color: rgba(255, 255, 255, 0.6) !important; }
:root:has([data-ui-v2]) body .ctm-chip { border-radius: 999px !important; padding: 4px 10px !important; background: rgba(255, 255, 255, 0.14) !important; border: 0 !important; color: #fff !important; font-size: 12.5px !important; letter-spacing: 0 !important; }
:root:has([data-ui-v2]) body .ctm-add-btn {
  border-radius: 999px !important; padding: 4px 11px !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; background: transparent !important;
  color: rgba(255, 255, 255, 0.75) !important; font-size: 12px !important; letter-spacing: 0 !important; text-transform: none !important;
}
:root:has([data-ui-v2]) body .ctm-add-btn:hover { background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; }
:root:has([data-ui-v2]) body .ctm-c-cov { font-size: 12.5px !important; color: rgba(255, 255, 255, 0.75) !important; }
:root:has([data-ui-v2]) body .ctm-workload { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 22px !important; padding: 16px 18px !important; margin-top: 14px !important; }
:root:has([data-ui-v2]) body .ctm-workload-head { font-size: 11px !important; letter-spacing: 0.14em !important; color: var(--v2-ac) !important; }
:root:has([data-ui-v2]) body .ctm-menu { border-radius: 18px !important; padding: 6px !important; }
:root:has([data-ui-v2]) body .ctm-menu-item { border-radius: 12px !important; }
:root:has([data-ui-v2]) body :is(.acc-shell, .cnt-shell, .ct-shell, .set-shell, .aud-shell) { background: transparent !important; border: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root:has([data-ui-v2]) body .acc-atlas-badge { justify-self: start; align-self: center; max-width: max-content; }

/* ── 8. Patient lists and billing (studio.css pl-) ──────────────────────── */
:root:has([data-ui-v2]) body .pl-search { border-radius: 999px !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #fff !important; padding: 11px 18px !important; font-size: 14px !important; }
:root:has([data-ui-v2]) body .pl-filter-btn { font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; padding: 7px 14px !important; }
:root:has([data-ui-v2]) body .pl-list {
  background: rgba(10, 18, 14, 0.36) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 28px !important;
  padding: 8px 12px !important; gap: 0 !important; -webkit-backdrop-filter: var(--v2-smoke-blur); backdrop-filter: var(--v2-smoke-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 34px 70px -44px rgba(0, 0, 0, 0.7);
}
:root:has([data-ui-v2]) body .pl-row {
  background: transparent !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 18px !important;
  margin: 0 !important; padding: 14px 14px !important; box-shadow: none !important; transform: none !important;
}
:root:has([data-ui-v2]) body .pl-list > .pl-row:first-child { border-top-color: transparent !important; }
:root:has([data-ui-v2]) body a.pl-row:hover { background: rgba(255, 255, 255, 0.07) !important; }
:root:has([data-ui-v2]) body .pl-ava { border-radius: 50% !important; background: var(--v2-ac) !important; color: #1b1410 !important; border: 0 !important; font-weight: 600; }
:root:has([data-ui-v2]) body .pl-name { font-size: 15px !important; font-weight: 500 !important; color: #fff !important; letter-spacing: -0.01em !important; }
:root:has([data-ui-v2]) body .pl-meta { font-size: 12.5px !important; color: rgba(255, 255, 255, 0.62) !important; letter-spacing: 0 !important; }
:root:has([data-ui-v2]) body .pl-stat-v { font-size: 17px !important; color: #fff !important; }
:root:has([data-ui-v2]) body .pl-stat-k { font-size: 10.5px !important; letter-spacing: 0.12em !important; color: rgba(255, 255, 255, 0.55) !important; }
:root:has([data-ui-v2]) body .pl-chev { color: rgba(255, 255, 255, 0.5) !important; }

/* ── 9. Empty states: the design's inset "Nothing waiting." sheet ────────── */
:root:has([data-ui-v2]) body :is(.pv-empty, .as-empty, .as-group-empty, .oc-empty, .pd-empty, .ov-row-empty, .oc-row-empty) {
  border-radius: 20px !important; background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.8) !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; padding: 18px 20px !important;
}

/* ── 10. Assessments queue (studio.css as-) ─────────────────────────────── */
:root:has([data-ui-v2]) body :is(.as-queue, .as-detail) { border-radius: 28px !important; }
:root:has([data-ui-v2]) body .as-search { border-radius: 999px !important; padding: 10px 16px !important; }
:root:has([data-ui-v2]) body .as-group-h { border-radius: 14px !important; }
:root:has([data-ui-v2]) body :is(.as-group-t, .as-sec-kick, .as-kick) { font-size: 11px !important; letter-spacing: 0.14em !important; color: var(--v2-ac) !important; }
:root:has([data-ui-v2]) body .as-pt { border-radius: 18px !important; }
:root:has([data-ui-v2]) body .as-chip { border-radius: 999px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 11.5px !important; }
:root:has([data-ui-v2]) body .as-detail :is(.iv-card, section.iv-card) { border-radius: 22px !important; }
:root:has([data-ui-v2]) body .as-detail .fold-sheet { border-radius: 0 22px 22px 22px !important; }

/* ── 11. Chart overview (OverviewTab, ov-) ──────────────────────────────── */
:root:has([data-ui-v2]) body .ov-stats { gap: 14px !important; }
:root:has([data-ui-v2]) body .ov-stat {
  border-radius: 24px !important; background: rgba(10, 18, 14, 0.36) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important;
  padding: 18px 20px !important; -webkit-backdrop-filter: var(--v2-smoke-blur); backdrop-filter: var(--v2-smoke-blur);
}
:root:has([data-ui-v2]) body .ov-stat.warn { background: rgba(243, 154, 128, 0.14) !important; border-color: rgba(243, 154, 128, 0.32) !important; }
:root:has([data-ui-v2]) body .ov-stat.ok { background: rgba(169, 211, 191, 0.12) !important; border-color: rgba(169, 211, 191, 0.3) !important; }
:root:has([data-ui-v2]) body .ov-stat-v { font-size: 26px !important; font-weight: 400 !important; letter-spacing: -0.03em !important; color: #fff !important; }
:root:has([data-ui-v2]) body .ov-stat.warn .ov-stat-v { color: #f8b9a6 !important; }
:root:has([data-ui-v2]) body .ov-stat.ok .ov-stat-v { color: #d3efe2 !important; }
:root:has([data-ui-v2]) body :is(.ov-stat-k, .ov-eyebrow, .ov-latest-head) { font-size: 11px !important; letter-spacing: 0.14em !important; color: rgba(255, 255, 255, 0.7) !important; }
:root:has([data-ui-v2]) body :is(.ov-eyebrow, .ov-latest-head) { color: var(--v2-ac) !important; }
:root:has([data-ui-v2]) body .ov-latest-list {
  border-radius: 24px !important; background: rgba(10, 18, 14, 0.36) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important;
  padding: 6px 18px !important; -webkit-backdrop-filter: var(--v2-smoke-blur); backdrop-filter: var(--v2-smoke-blur);
}
:root:has([data-ui-v2]) body .ov-row { background: none !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 0 !important; padding: 12px 2px !important; }
:root:has([data-ui-v2]) body .ov-latest-list > .ov-row:first-child { border-top: 0 !important; }
:root:has([data-ui-v2]) body .ov-row-key { font-size: 11px !important; letter-spacing: 0.1em !important; color: rgba(255, 255, 255, 0.6) !important; }
:root:has([data-ui-v2]) body .ov-pill { border-radius: 999px !important; text-transform: none !important; letter-spacing: 0 !important; }

/* ── 12. Outcomes (clinician/outcomes, oc- + TrendCard tc-) ─────────────── */
:root:has([data-ui-v2]) body .oc-kpis { gap: 14px !important; }
:root:has([data-ui-v2]) body .oc-kpis > * {
  border-radius: 24px !important; background: rgba(10, 18, 14, 0.36) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important;
  padding: 18px 20px !important; -webkit-backdrop-filter: var(--v2-smoke-blur); backdrop-filter: var(--v2-smoke-blur);
}
:root:has([data-ui-v2]) body .oc-kpi-v { font-family: var(--v2-num) !important; font-weight: 800 !important; font-size: 40px !important; line-height: 1 !important; color: #fff !important; }
:root:has([data-ui-v2]) body .oc-kpi-k { font-size: 11px !important; letter-spacing: 0.12em !important; color: rgba(255, 255, 255, 0.72) !important; }
:root:has([data-ui-v2]) body :is(.oc-section-head, .oc-coming-eyebrow) { font-size: 11px !important; letter-spacing: 0.14em !important; color: var(--v2-ac) !important; }
:root:has([data-ui-v2]) body :is(.tc-trend, .oc-table, .oc-coming) {
  border-radius: 28px !important; background: rgba(10, 18, 14, 0.36) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important;
  -webkit-backdrop-filter: var(--v2-smoke-blur); backdrop-filter: var(--v2-smoke-blur);
}
:root:has([data-ui-v2]) body .tc-trend { padding: 20px 22px !important; }
:root:has([data-ui-v2]) body .oc-table { padding: 8px 12px !important; overflow: hidden; }
:root:has([data-ui-v2]) body .oc-row { background: none !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 16px !important; }
:root:has([data-ui-v2]) body .oc-row:hover { background: rgba(255, 255, 255, 0.06) !important; }
:root:has([data-ui-v2]) body .oc-row-name { font-size: 15px !important; color: #fff !important; }
:root:has([data-ui-v2]) body :is(.oc-row-email, .oc-row-meta) { font-size: 12px !important; color: rgba(255, 255, 255, 0.6) !important; }
:root:has([data-ui-v2]) body :is(.oc-ava, .oc-attn-ava) { border-radius: 50% !important; background: var(--v2-ac) !important; color: #1b1410 !important; border: 0 !important; }
:root:has([data-ui-v2]) body .oc-export-btn { font-size: 13.5px !important; letter-spacing: 0 !important; text-transform: none !important; padding: 9px 16px !important; }
:root:has([data-ui-v2]) body :is(.tc-trend-title) { font-size: 11px !important; letter-spacing: 0.14em !important; color: var(--v2-ac) !important; }
:root:has([data-ui-v2]) body .ov-stat.warn { background: linear-gradient(rgba(243, 154, 128, 0.16), rgba(243, 154, 128, 0.16)), rgba(10, 18, 14, 0.5) !important; }
:root:has([data-ui-v2]) body .ov-stat.ok { background: linear-gradient(rgba(169, 211, 191, 0.14), rgba(169, 211, 191, 0.14)), rgba(10, 18, 14, 0.5) !important; }

/* ── 13. Chart tabs: Labs, Requests, Schedule, Notes, Homework, Check-ins ─ */
/* As in ChartLabs / ChartSchedule / ChartNotes: each section a card, its
   head the card title, its empty state the inset sheet, actions as pills. */
:root:has([data-ui-v2]) body .pd-shell .pd-section {
  background: rgba(10, 18, 14, 0.36) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 28px !important;
  padding: 26px 28px !important; margin: 0 0 16px !important;
  -webkit-backdrop-filter: var(--v2-smoke-blur); backdrop-filter: var(--v2-smoke-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 34px 70px -44px rgba(0, 0, 0, 0.7);
}
:root:has([data-ui-v2]) body .pd-shell :is(.pd-section-head, .member-section-head, .lp-title) {
  font-size: 22px !important; font-weight: 400 !important; letter-spacing: -0.025em !important; text-transform: none !important;
  color: #fff !important; margin: 0 0 14px !important; border: 0 !important; padding: 0 !important;
}
:root:has([data-ui-v2]) body .pd-shell :is(.pd-section-head, .member-section-head) em { color: var(--v2-ac) !important; opacity: 1; }
:root:has([data-ui-v2]) body .pd-shell :is(.lp-head, .sc-head) { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 0 !important; margin-top: 18px; }
:root:has([data-ui-v2]) body .pd-shell :is(.lp-sub, .sub, .lp-muted, .lp-disclaimer, .lp-note) { color: rgba(255, 255, 255, 0.7) !important; font-size: 13.5px !important; letter-spacing: 0 !important; text-transform: none !important; }
:root:has([data-ui-v2]) body .pd-shell :is(.lp-empty) {
  border-radius: 20px !important; background: rgba(255, 255, 255, 0.07) !important; border: 1px dashed rgba(255, 255, 255, 0.2) !important; padding: 18px 20px !important; color: rgba(255, 255, 255, 0.8) !important;
}
:root:has([data-ui-v2]) body .pd-shell :is(.lp-add-btn, .sc-add-toggle) {
  border-radius: 999px !important; padding: 10px 18px !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important;
  background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.32) !important;
}
:root:has([data-ui-v2]) body .pd-shell .lp-add-btn { background: #fff !important; color: #1b1410 !important; border-color: #fff !important; }
:root:has([data-ui-v2]) body .pd-shell :is(.lp-card, .pd-card) { border-radius: 20px !important; }
:root:has([data-ui-v2]) body .pd-shell :is(.lp-pill, .pd-pill) { border-radius: 999px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 11.5px !important; }
:root:has([data-ui-v2]) body .pd-shell :is(.rq-btn) { border-radius: 999px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13.5px !important; padding: 8px 16px !important; }
:root:has([data-ui-v2]) body .pd-shell .rq-approve { background: #fff !important; color: #1b1410 !important; border-color: #fff !important; }
/* Notes: the glass field and the white "Save note" pill. */
:root:has([data-ui-v2]) body .pd-shell .pd-section textarea { border-radius: 20px !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #fff !important; padding: 14px 18px !important; font-size: 14px !important; }
:root:has([data-ui-v2]) body .pd-shell .pd-section button:not([class]):not([style]) {
  border-radius: 999px !important; padding: 10px 20px !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important;
  background: #fff !important; color: #1b1410 !important; border: 0 !important;
}
:root:has([data-ui-v2]) body .pd-shell .pd-section button:not([class]):not([style]):disabled { opacity: 0.45; }
:root:has([data-ui-v2]) body .pd-shell .pd-section button[style*="uppercase"] { text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; }
/* Their pop-up editors (lab panel, schedule item) float in cream. */
:root:has([data-ui-v2]) body :is(.lp-modal, .sc-modal) { border-radius: 32px !important; }
:root:has([data-ui-v2]) body :is(.lp-modal, .sc-modal) :is(input, select, textarea) { border-radius: 14px !important; }
:root:has([data-ui-v2]) body :is(.lp-save) { border-radius: 999px !important; text-transform: none !important; letter-spacing: 0 !important; }
:root:has([data-ui-v2]) body .ov-latest .ov-latest-list { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(255, 255, 255, 0.12) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ── 14. Inline-styled console pages (Living bookings / community / events,
   provider billing): their small header becomes the design's page top —
   the crumb pill and the large title — over cards. Hooks: lv-*. */
:root:has([data-ui-v2]) body .lv-shell { max-width: none !important; margin: 0 !important; padding: 40px 48px 80px !important; color: #fff !important; }
:root:has([data-ui-v2]) body .lv-head { margin-bottom: 32px !important; }
:root:has([data-ui-v2]) body .lv-crumb {
  display: inline-flex; border-radius: 999px; padding: 7px 14px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff !important; font-size: 12.5px !important; letter-spacing: 0 !important; text-transform: none !important;
}
:root:has([data-ui-v2]) body .lv-title { font-size: clamp(44px, 6vw, 72px) !important; font-weight: 400 !important; letter-spacing: -0.05em !important; line-height: 0.95 !important; color: #fff !important; margin: 22px 0 12px !important; }
:root:has([data-ui-v2]) body .lv-sub { font-size: 15px !important; color: rgba(255, 255, 255, 0.8) !important; max-width: 640px; }
@media (max-width: 899px) { :root:has([data-ui-v2]) body .lv-shell { padding: 84px 16px 64px !important; } }
/* Settings checkboxes (Scheduling): plain sentences, not tracked caps. */
:root:has([data-ui-v2]) body .set-check { font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff !important; }
:root:has([data-ui-v2]) body .set-check :is(span, small, p, div) { letter-spacing: 0 !important; text-transform: none !important; }
:root:has([data-ui-v2]) body .set-check small, :root:has([data-ui-v2]) body .set-check .set-section-note { color: rgba(255, 255, 255, 0.68) !important; font-size: 13px !important; }
:root:has([data-ui-v2]) body .set-check input[type="checkbox"] { accent-color: var(--v2-ac); }
:root:has([data-ui-v2]) body .set-input { border-radius: 14px !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #fff !important; padding: 10px 14px !important; font-size: 14px !important; }

/* ── 15. Buttons and fields everywhere on the page (the system's defaults) ─ */
/* Buttons speak in sentences: no tracked capitals (eyebrows keep theirs). */
:root:has([data-ui-v2]) body :is(.pvs-main, .portal main, .app) :is(button, a[class*="btn"], a[class*="cta"], [role="button"], [role="tab"]):not(.pvs *) {
  text-transform: none !important; letter-spacing: 0 !important;
}
/* Coloured filled buttons become the white primary pill; selected chips white. */
:root:has([data-ui-v2]) body :is(.chat-input button, .portal main button:is([style*="background:var(--forest"],[style*="background: var(--forest"]), .portal main button:is([style*="background:var(--steel"],[style*="background: var(--steel"]), .portal main button:is([style*="background:var(--ink-900"],[style*="background: var(--ink-900"]), .btn-pill.filled, .wnet-cta, .ev-pill.on, .ev-cat-pill.on) {
  background: #fff !important; color: #1b1410 !important; border-color: #fff !important; border-radius: 999px !important;
}
:root:has([data-ui-v2]) body :is(.chat-input button, .portal main button:is([style*="background:var(--forest"],[style*="background: var(--forest"]), .portal main button:is([style*="background:var(--steel"],[style*="background: var(--steel"]), .portal main button:is([style*="background:var(--ink-900"],[style*="background: var(--ink-900"])) { padding: 9px 18px !important; font-size: 13.5px !important; font-weight: 500 !important; border: 0 !important; }

:root:has([data-ui-v2]) body :is(.ev-pill, .ev-cat-pill):not(.on) { background: rgba(255, 255, 255, 0.1) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 999px !important; }
/* Fields: glass on the dark page (cream pop-ups keep their own). */
:root:has([data-ui-v2]) body :is(.pvs-main, .portal main, .app) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea):not(:is(.pillar-modal:not(.ax-modal), .atlas-confirm, .sc-modal, .sn-modal, .rq-modal, .profile-modal, .modal, .tm, .mm, .pv-sheet, .lp-modal, .cad-modal, .ev-modal, .aud-modal, .cur-panel, .arc-journal-modal, .app .drawer, .app .sheet, .acc-actions-menu) *) {
  background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #fff !important; border-radius: 14px !important;
}
:root:has([data-ui-v2]) body :is(.pvs-main, .portal main, .app) :is(input, textarea)::placeholder { color: rgba(255, 255, 255, 0.5) !important; }
:root:has([data-ui-v2]) body :is(.pvs-main, .portal main, .app) select option { color: #1b1410; background: #fff; }

/* ── 16. Pillar apps: empty states sit on the inset glass sheet, not on the
   background (text belongs on glass). ─────────────────────────────────── */
:root:has([data-ui-v2]) body .app :is(.wl-empty, .hs-empty, .rc-empty, .pw-empty, .feed-empty, .cart-empty, .vitals-empty, .rail-empty),
:root:has([data-ui-v2]) body .app .screen .pad > p:only-child:not([class]),
:root:has([data-ui-v2]) body .app .screen :is(div, p).pad:not(:has(*)):not(:empty) {
  border-radius: 20px !important; background: rgba(10, 18, 14, 0.36) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important;
  -webkit-backdrop-filter: var(--v2-smoke-blur); backdrop-filter: var(--v2-smoke-blur);
  color: rgba(255, 255, 255, 0.82) !important; font-size: 14px !important; padding: 18px 20px !important; margin: 0 !important; text-align: left;
}
:root:has([data-ui-v2]) body .app .screen :is(div, p).pad:not(:has(*)):not(:empty) { margin: 0 22px !important; }
:root:has([data-ui-v2]) body .app .comm-card-empty { border-radius: 24px !important; }

/* Living community: the "Open to connecting?" opt-in is a card on the dark
   page, not a cream slab. */
:root:has([data-ui-v2]) body .app .optin {
  background: rgba(10, 18, 14, 0.36) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 24px !important;
  -webkit-backdrop-filter: var(--v2-smoke-blur); backdrop-filter: var(--v2-smoke-blur); color: #fff !important; margin: 0 22px !important; padding: 20px 22px !important;
}
:root:has([data-ui-v2]) body .app .optin .t { color: #fff !important; font-size: 16px !important; }
:root:has([data-ui-v2]) body .app .optin .d { color: rgba(255, 255, 255, 0.72) !important; }
:root:has([data-ui-v2]) body .app .optin .lab { color: rgba(255, 255, 255, 0.8) !important; text-transform: none !important; letter-spacing: 0 !important; }
:root:has([data-ui-v2]) body .app .optin .sw { background: rgba(255, 255, 255, 0.2) !important; }
:root:has([data-ui-v2]) body .app .optin .toggle.on .sw { background: var(--v2-ac) !important; }
:root:has([data-ui-v2]) body .app .net { border-color: rgba(255, 255, 255, 0.1) !important; }

/* ── 17. Account pages from the old portal (Billing, Membership, Events) ── */
/* The ribbon becomes the crumb line; the first section head becomes the
   page's large title, as on every other page. */
:root:has([data-ui-v2]) body .portal main .ribbon {
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 34px 48px 0 !important;
  -webkit-backdrop-filter: none; backdrop-filter: none; gap: 14px;
}
:root:has([data-ui-v2]) body .portal main .ribbon .crumb {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 7px 14px; background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28); color: #fff !important; font-size: 12.5px !important; letter-spacing: 0 !important; text-transform: none !important;
}
:root:has([data-ui-v2]) body .portal main .ribbon .crumb em { color: #fff !important; opacity: 1; }
:root:has([data-ui-v2]) body .portal main .ribbon .crumb .sep { opacity: 0.45; }
:root:has([data-ui-v2]) body .portal main .ribbon .progress { display: none !important; }
:root:has([data-ui-v2]) body .portal main .ribbon .week { color: rgba(255, 255, 255, 0.75) !important; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; }
:root:has([data-ui-v2]) body .portal main .page { padding: 18px 48px 72px !important; }
:root:has([data-ui-v2]) body .portal main .page > .member-section-head:first-child { margin-bottom: 28px !important; align-items: flex-end; }
:root:has([data-ui-v2]) body .portal main .page > .member-section-head:first-child h2 {
  font-size: clamp(44px, 6vw, 72px) !important; font-weight: 400 !important; letter-spacing: -0.05em !important; line-height: 0.95 !important; color: #fff !important; margin: 6px 0 14px !important;
}
:root:has([data-ui-v2]) body .portal main .page > .member-section-head:first-child .sub { font-size: 15px !important; color: rgba(255, 255, 255, 0.8) !important; max-width: 620px; }
:root:has([data-ui-v2]) body .portal main .member-section-head h2 { font-size: 26px; letter-spacing: -0.03em !important; font-weight: 400 !important; }
:root:has([data-ui-v2]) body .portal main :is(.bill-card, .summary-card, .tier, .tier-card, .wnet-card, .addon, .addon-card, .event-card, .ev-day) { border-radius: 24px !important; }
:root:has([data-ui-v2]) body .portal main .btn-pill { border-radius: 999px !important; font-size: 13px !important; }
@media (max-width: 899px) {
  :root:has([data-ui-v2]) body .portal main .ribbon { padding: 84px 16px 0 !important; }
  :root:has([data-ui-v2]) body .portal main .page { padding: 18px 16px 64px !important; }
}
/* Library: its empty line on the inset sheet. */
:root:has([data-ui-v2]) body .app .pillar-library :is(.pillar-lib-empty, .lib-empty, .empty) {
  border-radius: 20px !important; background: rgba(10, 18, 14, 0.36) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; padding: 18px 20px !important; color: rgba(255, 255, 255, 0.82) !important;
}
:root:has([data-ui-v2]) body .app .screen > .pad:is([style*="text-align:center"],[style*="text-align: center"]) {
  margin: 0 22px !important; border-radius: 24px !important; background: rgba(10, 18, 14, 0.36) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important;
  -webkit-backdrop-filter: var(--v2-smoke-blur); backdrop-filter: var(--v2-smoke-blur);
}
:root:has([data-ui-v2]) body .app .screen > .pad:is([style*="text-align:center"],[style*="text-align: center"]) p { color: rgba(255, 255, 255, 0.82) !important; }
/* Their lists: one card, rows inside (lv-row), like every other list. */
:root:has([data-ui-v2]) body .lv-shell :has(> .lv-row) {
  gap: 0 !important; background: rgba(10, 18, 14, 0.36) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 28px !important;
  padding: 8px 14px !important; -webkit-backdrop-filter: var(--v2-smoke-blur); backdrop-filter: var(--v2-smoke-blur);
}
:root:has([data-ui-v2]) body .lv-shell .lv-row {
  background: transparent !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 16px 8px !important;
}
:root:has([data-ui-v2]) body .lv-shell .lv-row:first-child { border-top: 0 !important; }
:root:has([data-ui-v2]) body .lv-shell .lv-row > div > div:first-child { font-size: 15px !important; color: #fff !important; }
:root:has([data-ui-v2]) body .lv-empty { border-radius: 24px !important; }

/* ── 18. The Arc (ArcApp on /arc, /check-in, provider Curriculum) ───────── */
/* Its colours come through the --arc-* tokens (skin.css lifts them for the
   dark). Here: the system's type, upright, and the system's rounder corners. */
:root:has([data-ui-v2]) body [style*="--arc-phase1:"] *:not(svg, svg *) { font-family: var(--sans) !important; font-style: normal !important; }
:root:has([data-ui-v2]) body [style*="--arc-phase1:"] :is(h1, h2, h3) { font-weight: 400 !important; letter-spacing: -0.03em !important; text-transform: none !important; font-variant: normal !important; }
:root:has([data-ui-v2]) body [style*="--arc-phase1:"] :is(:is([style*="border-radius:2px"],[style*="border-radius: 2px"]), :is([style*="border-radius:3px"],[style*="border-radius: 3px"]), :is([style*="border-radius:4px"],[style*="border-radius: 4px"]), :is([style*="border-radius:6px"],[style*="border-radius: 6px"])):not(span) { border-radius: 20px !important; }
:root:has([data-ui-v2]) body [style*="--arc-phase1:"] button.card-hov { border-radius: 20px !important; overflow: hidden; }
:root:has([data-ui-v2]) body [style*="--arc-phase1:"] :is([style*="font-variant:small-caps"],[style*="font-variant: small-caps"]) { font-variant: normal !important; }
/* Underlined text-buttons from the old portal ("Edit name & password →",
   "Add contact →", "Update →"): the glass secondary pill. */
:root:has([data-ui-v2]) body .portal main button:is([style*="border-bottom:1px solid"],[style*="border-bottom: 1px solid"]) {
  background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.24) !important; border-radius: 999px !important;
  color: #fff !important; font-size: 13px !important; padding: 7px 14px !important;
}

/* Sweep fixes (6 Oct): white pills keep dark type; hovers land on the white pill. */
:root:has([data-ui-v2]) body .portal main .day-pill.on :is(.dow, .dd, *) { color: #1b1410 !important; }
:root:has([data-ui-v2]) body :is(a.pw-cta, a.begin, .pw-cta, .begin):hover { background: #fff !important; color: #1b1410 !important; border-color: #fff !important; }
:root:has([data-ui-v2]) body button:is([style*="border-bottom:1px solid"],[style*="border-bottom: 1px solid"]) {
  background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.24) !important; border-radius: 999px !important;
  color: #fff !important; font-size: 13px !important; padding: 7px 14px !important; text-transform: none !important; letter-spacing: 0 !important;
}
:root:has([data-ui-v2]) body .stub-tile p { color: rgba(255, 255, 255, 0.78) !important; }
:root:has([data-ui-v2]) body :is(.set-check small, .set-soon, .wk-long) { color: rgba(255, 255, 255, 0.82) !important; }
/* The same text-buttons when the browser has serialized their border (client-rendered). */
:root:has([data-ui-v2]) body .portal main button:is([style*="border-bottom-style: solid"], [style*="border-bottom: 1px solid"]) {
  background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.24) !important; border-radius: 999px !important;
  color: #fff !important; font-size: 13px !important; padding: 7px 14px !important; text-transform: none !important; letter-spacing: 0 !important;
}
:root:has([data-ui-v2]) body .portal main button:is([style*="background: var(--forest"], [style*="background: var(--steel"], [style*="background-color: var(--forest"]) {
  background: #fff !important; color: #1b1410 !important; border-radius: 999px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13.5px !important; padding: 9px 18px !important;
}
:root:has([data-ui-v2]) body .stub-tile p { color: rgba(255, 255, 255, 0.86) !important; opacity: 1 !important; }

/* Clinician console "Push to cohort": the action is the white pill; once a day
   is live its button is the calm "Live" tone pill (click again to retract). */
:root:has([data-ui-v2]) body .push-row { grid-template-columns: 64px 1fr auto !important; }
:root:has([data-ui-v2]) body .push-row button {
  border-radius: 999px !important; padding: 9px 18px !important; font-size: 13.5px !important; font-weight: 500 !important;
  letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap;
  background: rgba(169, 211, 191, 0.16) !important; border: 1px solid rgba(169, 211, 191, 0.34) !important; color: #d3efe2 !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}
:root:has([data-ui-v2]) body .push-row button:hover { background: rgba(169, 211, 191, 0.26) !important; color: #fff !important; }
:root:has([data-ui-v2]) body .push-row button.scheduled { background: #fff !important; border-color: #fff !important; color: #1b1410 !important; }
:root:has([data-ui-v2]) body .push-row button.scheduled:hover { background: rgba(255, 255, 255, 0.86) !important; color: #1b1410 !important; }
/* Same card's neighbours: "+ Create event" and "Submit a contribution →" are the white pill. */
:root:has([data-ui-v2]) body :is(.ev-add-btn, .contrib .cta) {
  background: #fff !important; color: #1b1410 !important; border: 0 !important; border-radius: 999px !important;
  padding: 9px 18px !important; font-size: 13.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important;
}
:root:has([data-ui-v2]) body .ev-add-btn:hover, :root:has([data-ui-v2]) body .contrib .cta:hover { background: rgba(255, 255, 255, 0.86) !important; }

/* ── 19. Every pop-up, one system (Rob, 6 Oct: "Edit provider modal on
   desktop is mobile focused and is the wrong look"). The look is the one
   already approved on the patient side — the cream card, radius 32, a header
   (eyebrow, title, round ×) over a hairline, the design's pills — applied to
   every pop-up that still had its own: the content editor, the provider's
   appointment / session / lab / note / event dialogs and schedule sheet, the
   curriculum's day and week panels, the audit entry, the patient's account
   and Living dialogs, the Arc journal. On a desktop a form uses the room: two
   columns, the header and the buttons held in place while the fields scroll;
   on a phone each one is a full-width sheet from the bottom. */

/* 19a. A pop-up opened from inside a glass card was trapped in the card: a
   blurred box becomes the frame for anything "fixed" inside it, so the dialog
   sat in the card, was clipped by it, and later cards painted over it (the
   audit entry, the chart's New session). While one is open, the boxes around
   it drop their blur — invisible under the scrim, which blurs everything. */
:root:has([data-ui-v2]) body :is(div, main, section, article, aside, form, li, table, tbody, tr, td, header):has(> * :is(.cad-scrim, .ev-modal-backdrop, .lp-modal-backdrop, .sc-modal-backdrop, .sn-backdrop, .aud-modal-bg, .pillar-modal-scrim, .atlas-confirm-scrim, .tm-scrim, .mm-scrim, .rq-scrim, .profile-modal-scrim, .pv-sheet-scrim, .modal-shade.open, .lab-scrim, .arc-journal-modal-shell, .cur-scrim), > :is(.cad-scrim, .ev-modal-backdrop, .lp-modal-backdrop, .sc-modal-backdrop, .sn-backdrop, .aud-modal-bg, .pillar-modal-scrim, .atlas-confirm-scrim, .tm-scrim, .mm-scrim, .rq-scrim, .profile-modal-scrim, .pv-sheet-scrim, .modal-shade.open, .lab-scrim, .arc-journal-modal-shell, .cur-scrim)) {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none !important; transform: none !important; contain: none !important; will-change: auto !important;
  z-index: auto !important; isolation: auto !important;
}
:root:has([data-ui-v2]) body :is(.cad-scrim, .ev-modal-backdrop, .lp-modal-backdrop, .sc-modal-backdrop, .sn-backdrop, .aud-modal-bg, .arc-journal-modal-shell, .cur-scrim) {
  position: fixed !important; inset: 0 !important; z-index: 200 !important;
  background: rgba(14, 10, 8, 0.45) !important; -webkit-backdrop-filter: blur(4px) !important; backdrop-filter: blur(4px) !important;
  display: flex !important; align-items: center !important; justify-content: center !important; padding: 32px !important; overflow: auto;
}
:root:has([data-ui-v2]) body .cur-scrim { display: block !important; padding: 0 !important; }
:root:has([data-ui-v2]) body .cur-panel { z-index: 201 !important; }
/* The audit chain's note opens under the badge; the table card below it was painting over it. */
:root:has([data-ui-v2]) body :is(div, header, section):has(> .aud-badge-pop, > * > .aud-badge-pop) { position: relative; z-index: 30 !important; }

/* 19b. The card. */
:root:has([data-ui-v2]) body :is(.cad-modal, .ev-modal, .lp-modal, .sc-modal, .sn-modal, .aud-modal, .profile-modal, .rq-modal, .arc-journal-modal, .mm, .tm) {
  color-scheme: light; background: #f6f3ee !important; color: #1b1410 !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important; border-radius: 32px !important;
  box-shadow: 0 40px 90px -40px rgba(20, 12, 6, 0.6) !important;
  max-height: calc(100vh - 64px) !important; overflow-y: auto !important; overscroll-behavior: contain;
  --ink-900: #1b1410; --ink-700: #3b332c; --ink-500: #574e45; --ink-400: #6b6359; --ink-300: #857c72;
  --sand-50: #fbfaf6; --sand-100: #f6f3ee; --sand-200: #ece7df; --sand-300: rgba(27, 20, 16, 0.12);
  --v2-ink: #1b1410; --v2-ink-2: #574e45; --v2-text: #1b1410; --v2-text-2: #574e45; --v2-lift: 100%; --v2-on-ink: #fbfaf6;
  --v2-fill: #fff; --v2-fill-nested: #fff; --v2-fill-edge: rgba(27, 20, 16, 0.1); --v2-fill-nested-edge: rgba(27, 20, 16, 0.1); --v2-fill-blur: none; --v2-sheet: #fff;
}
/* Side sheets: the appointment sheet, the curriculum's day / week panels. */
:root:has([data-ui-v2]) body :is(.cur-panel, .pv-sheet) {
  color-scheme: light; background: #f6f3ee !important; color: #1b1410 !important;
  border: 0 !important; border-left: 1px solid rgba(255, 255, 255, 0.9) !important; border-radius: 32px 0 0 32px !important;
  box-shadow: -30px 0 80px -40px rgba(20, 12, 6, 0.55) !important; top: 0 !important; bottom: 0 !important; height: 100vh !important; overflow-y: auto !important;
  --ink-900: #1b1410; --ink-700: #3b332c; --ink-500: #574e45; --sand-50: #fbfaf6; --sand-100: #f6f3ee; --sand-200: #ece7df; --sand-300: rgba(27, 20, 16, 0.12);
  --v2-ink: #1b1410; --v2-ink-2: #574e45; --v2-text: #1b1410; --v2-text-2: #574e45; --v2-lift: 100%; --v2-on-ink: #fbfaf6;
  --v2-fill: #fff; --v2-fill-nested: #fff; --v2-fill-edge: rgba(27, 20, 16, 0.1); --v2-fill-nested-edge: rgba(27, 20, 16, 0.1); --v2-fill-blur: none; --v2-sheet: #fff;
}
:root:has([data-ui-v2]) body .cur-panel { width: min(640px, 100vw) !important; display: flex !important; flex-direction: column; }
:root:has([data-ui-v2]) body aside.cur-panel[style] { background: #f6f3ee !important; }
:root:has([data-ui-v2]) body .cur-panel-body { flex: 1 0 auto; }

/* Everything inside reads in the system's type; no italics, no old caps. */
:root:has([data-ui-v2]) body :is(.cad-modal, .ev-modal, .lp-modal, .sc-modal, .sn-modal, .aud-modal, .profile-modal, .rq-modal, .arc-journal-modal, .mm, .tm, .cur-panel, .pv-sheet) :is(*:not(pre, code, pre *, code *, [class*="mono"], [class*="mono"] *)) {
  font-family: 'Inter Tight', -apple-system, system-ui, sans-serif !important; font-style: normal !important;
}
/* Nested cards in a cream piece are white sheets, not smoke. */
:root:has([data-ui-v2]) body :is(.cad-modal, .ev-modal, .lp-modal, .sc-modal, .sn-modal, .aud-modal, .profile-modal, .rq-modal, .cur-panel, .pv-sheet, .tm, .mm) :is(.pv-card, .pv-kpi, .pv-empty, .pd-card, .cad-media) {
  background: #fff !important; border: 1px solid rgba(27, 20, 16, 0.1) !important; border-radius: 20px !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; color: #1b1410 !important;
}
:root:has([data-ui-v2]) body :is(.pv-sheet, .cur-panel, .cad-modal) :is(.pv-card, .pv-kpi, .pd-card, .cad-media) :is(h2, h3, h4, b, strong, span, div, p, label, small):not(button, button *) { color: inherit; }
:root:has([data-ui-v2]) body :is(.pv-sheet, .cad-modal) :is(.pv-card, .cad-media) :is(small, p, [class*="hint"], [class*="sub"]) { color: #574e45 !important; }

/* Titles. */
:root:has([data-ui-v2]) body :is(.cad-modal-title, .ev-modal-head :is(h2, h3), .lp-modal-head :is(h2, h3, .lp-title), .sc-modal-head :is(h2, h3), .sn-modal-head :is(h2, h3), .aud-modal-head-txt :is(h2, h3, b, strong), .cur-panel-head h2, .rq-modal :is(h2, h3), .arc-journal-modal :is(h2, h3), .profile-modal > div:first-child > div:first-child, .tm-nm, .mm-nm) {
  font-family: 'Inter Tight', sans-serif !important; font-weight: 400 !important; font-size: 26px !important; letter-spacing: -0.03em !important;
  line-height: 1.1 !important; color: #1b1410 !important; text-transform: none !important;
}
:root:has([data-ui-v2]) body .profile-modal > div:first-child > div:first-child em { opacity: 0.55; font-style: normal; }
/* Headers and footers: hairlines, the room the approved card has. */
:root:has([data-ui-v2]) body :is(.ev-modal-head, .lp-modal-head, .sc-modal-head, .sn-modal-head, .aud-modal-head, .cur-panel-head) {
  padding: 26px 30px 18px !important; border-bottom: 1px solid rgba(27, 20, 16, 0.08) !important; background: transparent !important;
}
:root:has([data-ui-v2]) body :is(.ev-modal-body, .lp-modal-body, .sc-modal-body, .sn-modal-body, .aud-modal-body, .cur-panel-body) { padding: 22px 30px !important; }
:root:has([data-ui-v2]) body :is(.ev-modal-foot, .lp-modal-foot, .sc-modal-foot, .sn-modal-foot, .cur-panel-foot) {
  padding: 16px 30px 22px !important; border-top: 1px solid rgba(27, 20, 16, 0.08) !important; background: #f6f3ee !important;
  display: flex !important; justify-content: flex-end !important; align-items: center; gap: 10px !important;
  position: sticky; bottom: 0; z-index: 2;
}
:root:has([data-ui-v2]) body .cur-panel-foot { flex-direction: row-reverse !important; justify-content: flex-start !important; }
/* Eyebrows: the design's small caps in the accent. */
:root:has([data-ui-v2]) body :is(.cad-modal, .ev-modal, .lp-modal, .sc-modal, .sn-modal, .aud-modal, .profile-modal, .rq-modal, .arc-journal-modal, .cur-panel, .pv-sheet, .tm, .mm) [style*="uppercase"]:not(button, label, label > span, [class*="-field"] > span) {
  font-size: 11px !important; letter-spacing: 0.14em !important; color: #8a3712 !important; font-weight: 500 !important;
}
:root:has([data-ui-v2]) body :is(.aud-modal-meta, .aud-modal) :is(dt, [class*="-k"]) { font-size: 11px !important; letter-spacing: 0.14em !important; color: #8a3712 !important; }

/* Field labels: sentence case, readable. */
:root:has([data-ui-v2]) body :is(.cad-modal, .ev-modal, .lp-modal, .sc-modal, .sn-modal, .profile-modal, .rq-modal, .arc-journal-modal, .cur-panel, .pv-sheet, .tm, .mm) :is([class*="-field"] > span, .cad-label, label > span:first-child, .sn-field > label) {
  font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; color: #574e45 !important; font-weight: 500 !important; margin-bottom: 6px;
}
:root:has([data-ui-v2]) body .cad-label span { color: #5f574e !important; font-weight: 400; }
/* Fields: white, radius 14. */
:root:has([data-ui-v2]) body :is(.cad-modal, .ev-modal, .lp-modal, .sc-modal, .sn-modal, .profile-modal, .rq-modal, .arc-journal-modal, .cur-panel, .pv-sheet, .tm, .mm) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
  background: #fff !important; border: 1px solid rgba(27, 20, 16, 0.14) !important; border-radius: 14px !important; color: #1b1410 !important;
  padding: 11px 14px !important; min-height: 44px; font-size: 15px !important; line-height: 1.4 !important; box-shadow: none !important;
  width: 100%; max-width: 100%; min-width: 0 !important; box-sizing: border-box !important;
}
:root:has([data-ui-v2]) body :is(.cad-modal, .ev-modal, .lp-modal, .sc-modal, .sn-modal, .profile-modal, .rq-modal, .arc-journal-modal, .cur-panel, .pv-sheet, .tm, .mm) textarea { min-height: 96px; }
:root:has([data-ui-v2]) body :is(.cad-modal, .ev-modal, .lp-modal, .sc-modal, .sn-modal, .profile-modal, .rq-modal, .arc-journal-modal, .cur-panel, .pv-sheet, .tm, .mm) :is(input, select, textarea):focus {
  outline: none !important; border-color: #1b1410 !important; box-shadow: 0 0 0 3px rgba(27, 20, 16, 0.08) !important;
}
:root:has([data-ui-v2]) body :is(.cad-modal, .ev-modal, .lp-modal, .sc-modal, .sn-modal, .profile-modal, .pv-sheet, .cur-panel) :is(input, textarea)::placeholder { color: #a69e94 !important; }
:root:has([data-ui-v2]) body :is(.ev-modal, .lp-modal, .sc-modal, .pv-sheet, .cad-modal) :is([class*="field-row"], [class*="-row"]:has(> label)) > * { min-width: 0; }
:root:has([data-ui-v2]) body :is(.cad-modal, .ev-modal, .lp-modal, .sc-modal, .sn-modal, .profile-modal, .cur-panel, .pv-sheet) input[type="checkbox"] { accent-color: #1b1410; width: 18px; height: 18px; }

/* Buttons: the design's pills — the action dark, the way out a ghost. */
:root:has([data-ui-v2]) body :is(.ev-modal-foot, .lp-modal-foot, .sc-modal-foot, .sn-modal-foot, .cad-modal-foot, .cur-panel-foot, .profile-modal, .tm, .mm) button:not(.tm-x, .mm-x, [class*="day"], [class*="slot"], [class*="chip"], [class*="tab"]) {
  border-radius: 999px !important; min-height: 44px; padding: 0 22px !important; font-size: 14px !important; font-weight: 500 !important;
  letter-spacing: 0 !important; text-transform: none !important; font-family: 'Inter Tight', sans-serif !important; flex: 0 0 auto !important;
  background: #1b1410 !important; color: #fff !important; border: 1px solid #1b1410 !important; cursor: pointer;
}
:root:has([data-ui-v2]) body :is(.ev-modal-foot, .lp-modal-foot, .sc-modal-foot, .sn-modal-foot, .cad-modal-foot, .cur-panel-foot, .profile-modal, .tm, .mm) button:is([class*="cancel"], [class*="remove"], [class*="ghost"], [class*="close"], [class*="keep"], [class*="back"], .cad-cancel, .cur-panel-foot > :last-child, [style*="background: transparent"], [style*="background:transparent"], [style*="background: none"], [style*="background:none"]):not(.tm-x, .mm-x) {
  background: transparent !important; color: #1b1410 !important; border: 1px solid rgba(27, 20, 16, 0.18) !important;
}
:root:has([data-ui-v2]) body :is(.ev-modal-foot, .lp-modal-foot, .sc-modal-foot, .sn-modal-foot, .cad-modal-foot, .cur-panel-foot, .profile-modal, .tm, .mm) button:disabled { opacity: 0.45 !important; cursor: default; }
:root:has([data-ui-v2]) body :is(.ev-modal-foot, .lp-modal-foot, .sc-modal-foot, .sn-modal-foot, .cad-modal-foot, .cur-panel-foot) button:not(:disabled):hover { filter: brightness(1.15); }
:root:has([data-ui-v2]) body :is(.tm, .mm) :is(.btn-full, .tm-go) { background: #1b1410 !important; color: #fff !important; border-radius: 999px !important; }
:root:has([data-ui-v2]) body :is(.tm, .mm) :is(.btn-ghost, .mm-cancel) { background: transparent !important; border: 0 !important; color: #574e45 !important; }
/* The round ×. */
:root:has([data-ui-v2]) body :is(.lp-x, .sc-x, .sn-x, .ev-x, .aud-modal-close, .tm-x, .profile-modal > div:first-child > button) {
  width: 40px !important; height: 40px !important; border-radius: 50% !important; display: inline-grid !important; place-items: center !important; padding: 0 !important;
  background: rgba(27, 20, 16, 0.05) !important; border: 1px solid rgba(27, 20, 16, 0.1) !important; color: #1b1410 !important; font-size: 18px !important; line-height: 1 !important;
}

/* 19c. On a desktop: sized by what is in them, forms in two columns. */
@media (min-width: 760px) {
  :root:has([data-ui-v2]) body :is(.sc-modal, .sn-modal, .lp-modal, .profile-modal, .rq-modal, .aud-modal) { width: min(640px, calc(100vw - 64px)) !important; max-width: none !important; }
  :root:has([data-ui-v2]) body .ev-modal { width: min(720px, calc(100vw - 64px)) !important; max-width: none !important; }
  /* The content editor: every field of a row, two columns, header and buttons held. */
  :root:has([data-ui-v2]) body .cad-modal {
    width: min(880px, calc(100vw - 64px)) !important; max-width: none !important; padding: 0 32px !important;
    display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; align-content: start;
  }
  :root:has([data-ui-v2]) body .cad-modal > * { grid-column: 1 / -1; }
  :root:has([data-ui-v2]) body .cad-modal > .cad-field:not(.cad-field-textarea):not(.cad-field-array) { grid-column: auto; }
  :root:has([data-ui-v2]) body .cad-modal > .cad-field { margin-bottom: 16px !important; }
  :root:has([data-ui-v2]) body .cad-modal-title {
    position: sticky; top: 0; z-index: 2; background: #f6f3ee; margin: 0 -32px 22px !important; padding: 28px 32px 18px !important;
    border-bottom: 1px solid rgba(27, 20, 16, 0.08);
  }
  :root:has([data-ui-v2]) body .cad-modal-foot {
    position: sticky; bottom: 0; z-index: 2; background: #f6f3ee; border-top: 1px solid rgba(27, 20, 16, 0.08);
    margin: 8px -32px 0 !important; padding: 16px 32px 24px !important; justify-content: flex-start !important; flex-direction: row-reverse;
  }
  :root:has([data-ui-v2]) body .cad-modal .cad-error { margin: 0 0 8px; }
  :root:has([data-ui-v2]) body .cad-media { padding: 18px !important; margin-bottom: 16px !important; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
  :root:has([data-ui-v2]) body .cad-media > div:nth-child(-n+2), :root:has([data-ui-v2]) body .cad-media > datalist { grid-column: 1 / -1; }
  :root:has([data-ui-v2]) body .cad-media label { min-height: 44px; display: inline-flex !important; align-items: center; border-radius: 999px !important; padding: 0 16px !important; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; background: #1b1410 !important; color: #fff !important; }
  /* A Living booking: who on the left, when on the right. */
  :root:has([data-ui-v2]) body .tm-scrim { padding: 32px !important; }
  :root:has([data-ui-v2]) body .tm:not(.is-confirmed) {
    width: min(820px, calc(100vw - 64px)) !important; height: auto !important; max-height: min(680px, calc(100vh - 64px)) !important;
    display: grid !important; grid-template-columns: 320px minmax(0, 1fr); overflow: hidden !important;
  }
  :root:has([data-ui-v2]) body .tm:not(.is-confirmed) > :not(.tm-x) { overflow-y: auto; }
  :root:has([data-ui-v2]) body .tm-who { background: #ece7df !important; border: 0 !important; border-right: 1px solid rgba(27, 20, 16, 0.08) !important; padding: 32px 28px !important; }
  :root:has([data-ui-v2]) body .tm.is-confirmed { width: min(440px, calc(100vw - 64px)) !important; height: auto !important; }
  :root:has([data-ui-v2]) body .mm { width: min(440px, calc(100vw - 64px)) !important; }
}
/* 19d. On a phone: a sheet from the bottom, full width. */
@media (max-width: 759px) {
  :root:has([data-ui-v2]) body :is(.cad-scrim, .ev-modal-backdrop, .lp-modal-backdrop, .sc-modal-backdrop, .sn-backdrop, .aud-modal-bg, .arc-journal-modal-shell) { align-items: flex-end !important; padding: 0 !important; }
  :root:has([data-ui-v2]) body :is(.cad-modal, .ev-modal, .lp-modal, .sc-modal, .sn-modal, .aud-modal, .profile-modal, .rq-modal, .arc-journal-modal) {
    width: 100% !important; max-width: none !important; border-radius: 28px 28px 0 0 !important; max-height: 92vh !important;
  }
  :root:has([data-ui-v2]) body .cad-modal { padding: 0 22px !important; }
  :root:has([data-ui-v2]) body .cad-modal-title { position: sticky; top: 0; z-index: 2; background: #f6f3ee; margin: 0 -22px 18px !important; padding: 24px 22px 14px !important; border-bottom: 1px solid rgba(27, 20, 16, 0.08); }
  :root:has([data-ui-v2]) body .cad-modal-foot { position: sticky; bottom: 0; z-index: 2; background: #f6f3ee; margin: 8px -22px 0 !important; padding: 14px 22px 22px !important; border-top: 1px solid rgba(27, 20, 16, 0.08); flex-direction: row-reverse; justify-content: flex-start !important; }
  :root:has([data-ui-v2]) body :is(.cur-panel, .pv-sheet) { border-radius: 0 !important; }
  :root:has([data-ui-v2]) body .tm { border-radius: 0 !important; }
}
/* 19e. The same, held against the page-wide rules that also reach inside
   (the generated smoke fills and the white-pill default are stronger
   selectors; :not(#v2) lifts these above them). */
:root:has([data-ui-v2]) body :is(.cad-modal, .ev-modal, .lp-modal, .sc-modal, .sn-modal, .aud-modal, .profile-modal, .rq-modal, .cur-panel, .pv-sheet, .tm, .mm) :is(.pv-card, .pv-kpi, .pv-empty, .pd-card, .cad-media):not(#v2) {
  background: #fff !important; border: 1px solid rgba(27, 20, 16, 0.1) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; color: #1b1410 !important;
}
:root:has([data-ui-v2]) body .pv-sheet .pv-card :is(div, label) { min-width: 0; }
:root:has([data-ui-v2]) body :is(.ev-modal-foot, .lp-modal-foot, .sc-modal-foot, .sn-modal-foot, .cad-modal-foot, .cur-panel-foot) button:not(#v2),
:root:has([data-ui-v2]) body .pv-sheet :is(.pv-btn.filled, button[type="submit"]):not(#v2) {
  background: #1b1410 !important; color: #fff !important; border: 1px solid #1b1410 !important; border-radius: 999px !important; min-height: 44px; padding: 0 22px !important;
  font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important;
}
:root:has([data-ui-v2]) body :is(.ev-modal-foot, .lp-modal-foot, .sc-modal-foot, .sn-modal-foot, .cad-modal-foot, .cur-panel-foot) button:is([class*="cancel"], [class*="remove"], [class*="ghost"], [class*="close"], [class*="keep"], [class*="back"], .cad-cancel, .cur-panel-foot > :last-child):not(#v2),
:root:has([data-ui-v2]) body .pv-sheet .pv-btn:not(.filled):not(.pv-sheet-tab):not(#v2) {
  background: transparent !important; color: #1b1410 !important; border: 1px solid rgba(27, 20, 16, 0.18) !important;
}
:root:has([data-ui-v2]) body :is(.ev-modal-foot, .lp-modal-foot, .sc-modal-foot, .sn-modal-foot, .cad-modal-foot, .cur-panel-foot) button:disabled:not(#v2) { opacity: 0.45 !important; }
/* The account dialog's password form (AccountForms, inline-styled). */
:root:has([data-ui-v2]) body :is(.profile-modal, .cur-panel, .cad-modal, .ev-modal, .sc-modal, .lp-modal, .sn-modal) label[style*="uppercase"]:not(#v2) {
  font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; color: #574e45 !important; font-weight: 500 !important;
}
:root:has([data-ui-v2]) body .profile-modal form button:not(#v2) {
  background: #1b1410 !important; color: #fff !important; border: 1px solid #1b1410 !important; border-radius: 999px !important; min-height: 44px; padding: 0 22px !important;
  font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important;
}
/* The appointment sheet sits above the phone's bottom bar, like every other pop-up. */
:root:has([data-ui-v2]) body .pv-sheet-scrim { z-index: 200 !important; }
:root:has([data-ui-v2]) body .pv-sheet { z-index: 201 !important; }
/* Inside the approved cream dialogs (the readability sweep with each one open):
   the eyebrow's light accent was meant for the dark page; the chosen visit
   type took the dark page's white "on" pill, white type on white; the quiet
   lines were too faint; an avatar with no colour of its own vanished. */
:root:has([data-ui-v2]) body :is(.app .pillar-modal:not(.ax-modal), .atlas-confirm, .modal, .tm, .mm, .pv-sheet) .kicker.accent:not(#v2) { color: color-mix(in srgb, var(--v2-ac, #b9501f) 40%, #1b1410) !important; }
:root:has([data-ui-v2]) body :is(.app .pillar-modal:not(.ax-modal), .tm, .mm) .slot.active:not(#v2) { background: #1b1410 !important; border-color: #1b1410 !important; color: #fff !important; }
:root:has([data-ui-v2]) body :is(.app .pillar-modal:not(.ax-modal), .tm, .mm) .slot.active:not(#v2) * { color: #fff !important; }
:root:has([data-ui-v2]) body .profile-modal p { color: #574e45 !important; }
:root:has([data-ui-v2]) body .tm-av:not([style*="background"]) { background: #1b1410 !important; color: #fff !important; }

/* ── 20. The Becoming Arc — Curriculum overview (components/v2/ArcOverview,
   design's atlas-becoming-arc, approved). Values are the design's. ─────── */
:root:has([data-ui-v2]) body .ao {
  --ao-ac: var(--v2-ac, #ffad7a); --ao-ac-d: var(--v2-ac-d, #b9501f); --ao-ac-t: var(--v2-ac-t, #a3461a);
  font-family: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif; color: #1b1410; -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; gap: 28px; padding: 32px 48px 64px; max-width: 1180px; box-sizing: border-box;
}
:root:has([data-ui-v2]) body .ao * { font-family: inherit; font-style: normal; box-sizing: border-box; }
:root:has([data-ui-v2]) body .ao-hero { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: end; padding-bottom: 8px; }
:root:has([data-ui-v2]) body .ao-intro { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
:root:has([data-ui-v2]) body .ao-ebw { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ao-ac); font-weight: 500; }
:root:has([data-ui-v2]) body .ao-h1 { margin: 0; font-size: 72px; font-weight: 400; letter-spacing: -.045em; line-height: .98; color: #fff; }
:root:has([data-ui-v2]) body .ao-lede { margin: 0; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, .88); max-width: 600px; }
:root:has([data-ui-v2]) body .ao-mods { display: flex; flex-wrap: wrap; gap: 8px; }
:root:has([data-ui-v2]) body .ao-mods span {
  display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 999px; font-size: 13px; color: #fff;
  background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32);
}
:root:has([data-ui-v2]) body .ao-meta { display: flex; flex-wrap: wrap; gap: 44px; margin-top: 14px; }
:root:has([data-ui-v2]) body .ao-meta div { display: flex; flex-direction: column; gap: 8px; }
:root:has([data-ui-v2]) body .ao-num { font-family: 'Doto', 'Courier New', monospace !important; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-size: 30px; color: #fff; }
:root:has([data-ui-v2]) body .ao-meta span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
/* Today: the dark glass card. */
:root:has([data-ui-v2]) body .ao-today {
  color: #fff; border-radius: 30px; display: flex; flex-direction: column; padding: 24px;
  background: rgba(30, 11, 5, .34); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 30px 60px -40px rgba(0, 0, 0, .6);
}
:root:has([data-ui-v2]) body .ao-today .ao-ebw { margin-bottom: 14px; }
:root:has([data-ui-v2]) body .ao-tt { margin: 0; font-size: 28px; font-weight: 400; letter-spacing: -.03em; line-height: 1.05; color: #fff; }
:root:has([data-ui-v2]) body .ao-ts { margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, .76); line-height: 1.4; }
:root:has([data-ui-v2]) body .ao-today-bar { margin: 20px 0 22px; }
:root:has([data-ui-v2]) body .ao-dayw { display: block; }
:root:has([data-ui-v2]) body .ao-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
:root:has([data-ui-v2]) body .ao-days i { display: block; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .22); }
:root:has([data-ui-v2]) body .ao-days i.d { background: rgba(255, 255, 255, .85); }
:root:has([data-ui-v2]) body .ao-days i.n { background: var(--ao-ac); box-shadow: 0 0 12px rgba(255, 173, 122, .8); }
:root:has([data-ui-v2]) body .ao-dl { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255, 255, 255, .7); margin-top: 8px; }
:root:has([data-ui-v2]) body .ao-bw {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px;
  background: #fff !important; color: #1b1410 !important; font-size: 14px; font-weight: 500; border: 0; cursor: pointer; text-transform: none; letter-spacing: 0;
}
:root:has([data-ui-v2]) body .ao-bw:hover { background: rgba(255, 255, 255, .86) !important; }
/* The year at a glance. */
:root:has([data-ui-v2]) body .ao-arc {
  border-radius: 30px; padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 14px; color: #fff;
  background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32);
}
:root:has([data-ui-v2]) body .ao-arc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 6px; }
:root:has([data-ui-v2]) body .ao-arc-h b { font-weight: 400; font-size: 15px; }
:root:has([data-ui-v2]) body .ao-arc-h span { font-size: 13px; color: rgba(255, 255, 255, .72); }
:root:has([data-ui-v2]) body .ao-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 0 5px; align-items: end; }
:root:has([data-ui-v2]) body .ao-ph-g { display: flex; gap: 7px; align-items: end; height: 40px; padding: 0 10px; }
:root:has([data-ui-v2]) body .ao-ph-g i { flex: 1; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, .22); }
:root:has([data-ui-v2]) body .ao-ph-g i.d { background: rgba(255, 255, 255, .8); }
:root:has([data-ui-v2]) body .ao-ph-g i.n { height: 40px; background: var(--ao-ac); box-shadow: 0 0 16px rgba(255, 173, 122, .85); }

/* The bloop switcher (components/v2/BloopTabs) — the glass variant. */
:root:has([data-ui-v2]) body .bloop {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--bloop-gap, 4px); padding: var(--bloop-pad, 5px);
  border-radius: 999px; isolation: isolate; box-sizing: border-box; container-type: inline-size; width: 100%;
  background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
:root:has([data-ui-v2]) body .bloop > button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 10px; border: 0;
  border-radius: 999px; background: transparent !important; font-size: 14px; cursor: pointer; white-space: nowrap; color: rgba(255, 255, 255, .9) !important;
  text-transform: none; letter-spacing: 0; box-shadow: none;
}
:root:has([data-ui-v2]) body .bloop-blob { position: absolute; top: var(--bloop-pad, 5px); bottom: var(--bloop-pad, 5px); z-index: 2; border-radius: 999px; pointer-events: none; }
:root:has([data-ui-v2]) body .bloop-bg {
  position: absolute; inset: 0; border-radius: 999px; transform-origin: 50% 50%;
  background: var(--ao-ac, var(--v2-ac, #ffad7a)); box-shadow: 0 10px 24px -10px rgba(6, 16, 12, .7), inset 0 1px 0 rgba(255, 255, 255, .5);
}
:root:has([data-ui-v2]) body .bloop-clip { position: absolute; inset: 0; border-radius: 999px; overflow: hidden; }
:root:has([data-ui-v2]) body .bloop-lab {
  position: absolute; top: calc(-1 * var(--bloop-pad, 5px)); bottom: calc(-1 * var(--bloop-pad, 5px)); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: var(--bloop-gap, 4px); padding: var(--bloop-pad, 5px); box-sizing: border-box;
}
:root:has([data-ui-v2]) body .bloop-bl { display: flex; align-items: center; justify-content: center; height: 42px; padding: 0 10px; font-size: 14px; font-weight: 500; white-space: nowrap; color: #2a1206; }
:root:has([data-ui-v2]) body .bloop-badge { margin-left: 6px; display: inline-flex; }
:root:has([data-ui-v2]) body .ao-now {
  display: inline-grid; place-items: center; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; background: rgba(42, 18, 6, .35); color: #fff;
}
:root:has([data-ui-v2]) body .bloop-bl .ao-now { background: rgba(42, 18, 6, .14); color: #2a1206; }
@keyframes bloopA { 0% { transform: scale(1, 1) } 20% { transform: scale(1.03, .78) } 45% { transform: scale(.97, 1.12) } 64% { transform: scale(1.015, .94) } 82% { transform: scale(.995, 1.03) } 100% { transform: scale(1, 1) } }
@keyframes bloopB { 0% { transform: scale(1, 1) } 20% { transform: scale(1.03, .78) } 45% { transform: scale(.97, 1.12) } 64% { transform: scale(1.015, .94) } 82% { transform: scale(.995, 1.03) } 100% { transform: scale(1, 1) } }
@media (prefers-reduced-motion: reduce) { :root:has([data-ui-v2]) body :is(.bloop-blob, .bloop-lab) { transition: none !important; } :root:has([data-ui-v2]) body .bloop-bg { animation: none !important; } }
:root[data-reduce-motion]:has([data-ui-v2]) body :is(.bloop-blob, .bloop-lab) { transition: none !important; }
:root[data-reduce-motion]:has([data-ui-v2]) body .bloop-bg { animation: none !important; }

/* The phase: the dark glass card Today is, and the week tiles inside it (Rob, 8 Oct: the light card was the only
   one of its kind on a dark page). */
:root:has([data-ui-v2]) body .ao-card {
  border-radius: 32px; padding: 28px 30px; min-width: 0; color: #fff;
  background: rgba(30, 11, 5, .34); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 30px 60px -40px rgba(0, 0, 0, .6);
}
:root:has([data-ui-v2]) body .ao-ch { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
:root:has([data-ui-v2]) body .ao-ch-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
:root:has([data-ui-v2]) body .ao-eb { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ao-ac); font-weight: 500; }
:root:has([data-ui-v2]) body .ao-cct { margin: 8px 0 0; font-size: 30px; font-weight: 400; letter-spacing: -.025em; color: #fff; }
:root:has([data-ui-v2]) body .ao-rs { font-size: 13px; color: rgba(255, 255, 255, .7); }
:root:has([data-ui-v2]) body .ao-tag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 500; flex: none; white-space: nowrap; }
:root:has([data-ui-v2]) body .ao-tag.ok { background: var(--ao-ac-d); color: #fff; }
:root:has([data-ui-v2]) body .ao-tag.line { background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .85); }
:root:has([data-ui-v2]) body .ao-tag-sm { height: 22px; padding: 0 9px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
:root:has([data-ui-v2]) body .ao-wks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
:root:has([data-ui-v2]) body .ao-wkc {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: left; padding: 16px 18px 18px; border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .07) !important; color: #fff !important; cursor: pointer; min-height: 44px;
  transition: background .2s ease, box-shadow .2s ease; min-width: 0; font-size: inherit; text-transform: none; letter-spacing: 0; box-shadow: none;
}
:root:has([data-ui-v2]) body .ao-wkc:hover { background: rgba(255, 255, 255, .13) !important; }
:root:has([data-ui-v2]) body .ao-wt { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
:root:has([data-ui-v2]) body .ao-wn { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .66); font-weight: 500; }
:root:has([data-ui-v2]) body .ao-wn svg { color: rgba(255, 255, 255, .5); }
:root:has([data-ui-v2]) body .ao-wm { font-size: 12.5px; color: rgba(255, 255, 255, .66); }
:root:has([data-ui-v2]) body .ao-wtx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
:root:has([data-ui-v2]) body .ao-wtt { font-size: 16.5px; letter-spacing: -.015em; line-height: 1.25; }
:root:has([data-ui-v2]) body .ao-wst { font-size: 13.5px; color: rgba(255, 255, 255, .7); line-height: 1.4; }
:root:has([data-ui-v2]) body .ao-wkc.past { background: rgba(255, 255, 255, .04) !important; }
:root:has([data-ui-v2]) body .ao-wkc.past .ao-wtt { color: rgba(255, 255, 255, .8); }
:root:has([data-ui-v2]) body .ao-wkc.cur { background: rgba(255, 255, 255, .14) !important; border-color: transparent; box-shadow: 0 0 0 2px var(--ao-ac), 0 20px 40px -26px rgba(0, 0, 0, .6); }
:root:has([data-ui-v2]) body .ao-wkc.cur .ao-wn { color: var(--ao-ac); }
:root:has([data-ui-v2]) body .ao-wkc .ao-dayw { margin-top: 10px; }
:root:has([data-ui-v2]) body .ao-wkc .ao-days i { background: rgba(255, 255, 255, .22); }
:root:has([data-ui-v2]) body .ao-wkc .ao-days i.d { background: rgba(255, 255, 255, .85); }
:root:has([data-ui-v2]) body .ao-wkc .ao-days i.n { background: var(--ao-ac); box-shadow: none; }
:root:has([data-ui-v2]) body .ao-wkc .ao-dl { color: rgba(255, 255, 255, .7); }
:root:has([data-ui-v2]) body .ao-wkc.cap { background: rgba(255, 173, 122, .12) !important; border-color: rgba(255, 173, 122, .34); grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; }
:root:has([data-ui-v2]) body .ao-wkc.cap .ao-wt { grid-column: 1 / -1; }
:root:has([data-ui-v2]) body .ao-wkc.cap .ao-cap-tag { align-self: center; }
:root:has([data-ui-v2]) body .ao-wkc.cap.cur .ao-dayw { grid-column: 1 / -1; }
:root:has([data-ui-v2]) body .ao-foot { font-size: 12px; color: rgba(255, 255, 255, .7); letter-spacing: .04em; }

@media (max-width: 899px) {
  :root:has([data-ui-v2]) body .ao { padding: 20px 16px 40px; gap: 20px; }
  :root:has([data-ui-v2]) body .ao-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  :root:has([data-ui-v2]) body .ao-intro { gap: 18px; }
  :root:has([data-ui-v2]) body .ao-h1 { font-size: 46px; }
  :root:has([data-ui-v2]) body .ao-lede { font-size: 15.5px; }
  :root:has([data-ui-v2]) body .ao-mods span { height: 28px; font-size: 12.5px; padding: 0 11px; }
  :root:has([data-ui-v2]) body .ao-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; margin-top: 6px; }
  :root:has([data-ui-v2]) body .ao-num { font-size: 26px; }
  :root:has([data-ui-v2]) body .ao-today { padding: 20px; }
  :root:has([data-ui-v2]) body .ao-tt { font-size: 24px; }
  :root:has([data-ui-v2]) body .ao-ts { font-size: 13.5px; }
  :root:has([data-ui-v2]) body .ao-bw { align-self: stretch; justify-content: center; }
  :root:has([data-ui-v2]) body .ao-arc { padding: 16px 12px 12px; border-radius: 26px; }
  :root:has([data-ui-v2]) body .ao-ph-g { gap: 2px; padding: 0 3px; height: 32px; }
  :root:has([data-ui-v2]) body .ao-ph-g i { height: 18px; border-radius: 2px; }
  :root:has([data-ui-v2]) body .ao-ph-g i.n { height: 32px; }
  :root:has([data-ui-v2]) body :is(.bloop > button, .bloop-bl) { font-size: 12.5px; padding: 0 4px; }
  :root:has([data-ui-v2]) body .ao-sw .ao-now { display: none; }
  :root:has([data-ui-v2]) body .ao-card { border-radius: 26px; padding: 20px 14px; }
  :root:has([data-ui-v2]) body .ao-wks { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  :root:has([data-ui-v2]) body .ao-ch { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding: 0 4px; }
  :root:has([data-ui-v2]) body .ao-cct { font-size: 26px; }
  :root:has([data-ui-v2]) body .ao-wkc.cap { display: flex; }
  :root:has([data-ui-v2]) body .ao-wkc.cap .ao-cap-tag { align-self: flex-start; }
}

/* ── 21. Pop-ups are light frosted glass, not solid cream (Rob, 6 Oct: the
   Becoming Arc's phase card is the material — translucent light glass over
   whatever is behind, dark type). Every dialog, sheet and drawer above takes
   it; the bands that stay put while a form scrolls (titles, button rows) are
   the same glass a little denser, so fields passing under them stay hidden. */
:root:has([data-ui-v2]) {
  --v2-pop: rgba(250, 246, 240, 0.86);
  --v2-pop-band: rgba(250, 246, 240, 0.9);
  --v2-pop-blur: blur(30px) saturate(170%);
  --v2-pop-edge: rgba(255, 255, 255, 0.6);
  --v2-pop-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 40px 90px -40px rgba(20, 8, 4, 0.7);
}
:root:has([data-ui-v2]) body :is(.app .pillar-modal:not(.ax-modal), .atlas-confirm, .sc-modal, .sn-modal, .rq-modal, .profile-modal, .modal, .tm, .mm,
  .cad-modal, .ev-modal, .lp-modal, .aud-modal, .arc-journal-modal):not(#v2) {
  background: var(--v2-pop) !important; -webkit-backdrop-filter: var(--v2-pop-blur) !important; backdrop-filter: var(--v2-pop-blur) !important;
  border: 1px solid var(--v2-pop-edge) !important; box-shadow: var(--v2-pop-shadow) !important;
}
:root:has([data-ui-v2]) body :is(.pv-sheet, .app .drawer, .cur-panel, aside.cur-panel[style], .app .sheet):not(#v2) {
  background: var(--v2-pop) !important; -webkit-backdrop-filter: var(--v2-pop-blur) !important; backdrop-filter: var(--v2-pop-blur) !important;
  border-color: var(--v2-pop-edge) !important;
}
:root:has([data-ui-v2]) body :is(.cad-modal-title, .cad-modal-foot, .ev-modal-foot, .lp-modal-foot, .sc-modal-foot, .sn-modal-foot, .cur-panel-foot):not(#v2) {
  background: var(--v2-pop-band) !important; -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
}
/* Inside: tiles and fields are white glass, as the week tiles are. */
:root:has([data-ui-v2]) body :is(.cad-modal, .ev-modal, .lp-modal, .sc-modal, .sn-modal, .aud-modal, .profile-modal, .rq-modal, .cur-panel, .pv-sheet, .tm, .mm) :is(.pv-card, .pv-kpi, .pv-empty, .pd-card, .cad-media):not(#v2):not(#v3) {
  background: rgba(255, 255, 255, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.75) !important;
}
:root:has([data-ui-v2]) body :is(.cad-modal, .ev-modal, .lp-modal, .sc-modal, .sn-modal, .profile-modal, .rq-modal, .arc-journal-modal, .cur-panel, .pv-sheet, .tm, .mm)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea):not(#v2) {
  background: rgba(255, 255, 255, 0.72) !important; border-color: rgba(27, 20, 16, 0.16) !important;
}
:root:has([data-ui-v2]) body .tm-who:not(#v2) { background: rgba(255, 255, 255, 0.3) !important; }
/* The Arc's palette wrapper sets every face to the sans; the stats keep Doto. */
:root:has([data-ui-v2]) body [style*="--arc-phase1:"] .ao .ao-num { font-family: var(--v2-num, 'Doto'), 'Courier New', monospace !important; }

/* ── 22. Tabs that sit on the living background, and the folder tabs inside
   cards (Rob, 6 Oct: the chart's tab bar "too bright for the text"; the
   Report / Intake / Atlas Intelligence folder "really didn't come out"). ──

   22a. A bar of white labels can't be clear glass: over Health's pale sky
   (or any light patch of a moving scene) the labels wash out. These bars are
   the smoked glass the cards are, so they read on any background. */
:root:has([data-ui-v2]) body :is(.pd-tabs, .ct-tabs):not(#v2) {
  background: rgba(10, 18, 14, 0.34) !important;
  -webkit-backdrop-filter: blur(26px) saturate(150%) !important; backdrop-filter: blur(26px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 20px 40px -30px rgba(0, 0, 0, 0.55) !important;
}
:root:has([data-ui-v2]) body .pd-tab:not(.is-active):not(#v2) { color: rgba(255, 255, 255, 0.92) !important; }
:root:has([data-ui-v2]) body .pd-tab:not(.is-active):hover { background: rgba(255, 255, 255, 0.1) !important; }

/* 22b. The folder (IntakeFolder, ScreenersPanel — chart and Assessments).
   Rob, 6 Oct: keep the manila folder tabs ("I liked the manila folder tabs
   … the color was just off"). Same slanted tabs as the old design, coloured
   for the dark card: a warm glass folder whose chosen tab is the same sheet
   as the page under it, the others a step back. No borders, no overlap —
   the tab sits flush on the sheet, so two translucent layers never stack
   into a seam. */
:root:has([data-ui-v2]) body .fold:not(#v2) { --fold-sheet: rgba(240, 228, 204, 0.1); --fold-back: rgba(240, 228, 204, 0.045); margin: 6px 0 18px; }
:root:has([data-ui-v2]) body .fold-tabs:not(#v2) {
  display: flex; align-items: flex-end; gap: 3px; padding: 0; margin: 0; border: 0; border-radius: 0;
  background: none !important; z-index: 1; max-width: 100%; overflow-x: auto; overflow-y: hidden;
}
:root:has([data-ui-v2]) body .fold-tab:not(#v2) {
  position: relative; isolation: isolate; height: 40px; padding: 0 34px 0 20px; border: 0 !important; border-radius: 0;
  background: none !important; box-shadow: none !important; white-space: nowrap;
  font-size: 13.5px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 400;
  color: rgba(255, 255, 255, 0.66) !important;
}
:root:has([data-ui-v2]) body .fold-tab::before {
  content: "" !important; display: block !important; position: absolute; inset: 0; z-index: -1;
  background: var(--fold-back) !important; border: 0 !important; border-radius: 12px 16px 0 0;
  transform: perspective(14px) rotateX(1.6deg); transform-origin: bottom left;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
:root:has([data-ui-v2]) body .fold-tab::after { content: none !important; display: none !important; }
:root:has([data-ui-v2]) body .fold-tab:not([aria-selected="true"]):not(:disabled):hover { color: #fff !important; }
:root:has([data-ui-v2]) body .fold-tab[aria-selected="true"]:not(#v2) { color: #fff !important; font-weight: 500; z-index: 2; }
:root:has([data-ui-v2]) body .fold-tab[aria-selected="true"]::before { background: var(--fold-sheet) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
:root:has([data-ui-v2]) body .fold-tab:disabled:not(#v2) { color: rgba(255, 255, 255, 0.42) !important; }
:root:has([data-ui-v2]) body .fold-badge:not(#v2) {
  margin-left: 8px; font-size: 9.5px; letter-spacing: 0.1em; padding: 4px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85);
}
:root:has([data-ui-v2]) body .fold-badge.live:not(#v2) { background: color-mix(in srgb, var(--v2-ac, #a9d3bf) 26%, transparent); color: #fff; }
:root:has([data-ui-v2]) body .fold-sheet:not(#v2) {
  background: var(--fold-sheet) !important; border: 0 !important; border-radius: 0 22px 22px 22px !important;
  padding: 22px 24px 20px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
:root:has([data-ui-v2]) body .as-detail .fold-sheet:not(#v2) { border-radius: 0 22px 22px 22px !important; }

/* ── 23. The selected row of a list (Rob, 6 Oct, option B "accent wash"):
   the area's accent as a soft tint with a hairline edge in the same colour,
   all the way round — not the old 3px left bar, which bent round the
   rounded corner. Assessments queue (a patient, an assessment) and the
   Messages inbox, in every console. */
:root:has([data-ui-v2]) body :is(.as-pt.on, .as-row.on, .ix-row.active):not(#v2) {
  background: color-mix(in srgb, var(--v2-ac, #a9d3bf) 16%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v2-ac, #a9d3bf) 45%, transparent) !important;
  border-color: transparent !important; border-left: 0 !important; border-radius: 18px !important;
}
:root:has([data-ui-v2]) body .as-pt.on .as-row:not(#v2) { background: transparent !important; box-shadow: none !important; }
:root:has([data-ui-v2]) body .as-pt.on .as-row:hover { background: transparent !important; }

/* An empty list container drew as a blank glass bar (Rob, 6 Oct: the line
   under "Nothing yet." in a Wellness member's Latest activity — Wellness has
   no check-ins or labs, so the list has no rows). A list with nothing in it
   draws nothing, here and in every other card. */
:root:has([data-ui-v2]) body :is(.ov-latest-list, [class$="-list"], [class$="-rows"], [class$="-items"]):empty { display: none !important; }

/* ── 24. Dropdowns are the pop-ups' frosted glass (Rob, 6 Oct: the sign-up
   city list let the checkbox and the Create account button read through it).
   A list that floats over content blurs what is behind it, with dark type,
   the §21 material. The city list (sign-up, Profile) was on --sand-50, which
   the new UI turns into 36% smoke with no blur; the accounts "+ Invite" menu
   and the audit chain note were solid cream; the care-team assign menu was
   the same see-through smoke. Native <select> lists are drawn by the OS. */
:root:has([data-ui-v2]) body :is(.city-autocomplete-list, .gsel-list, .acc-actions-menu, .ctm-menu, .aud-badge-pop):not(#v2) {
  color-scheme: light; color: #1b1410 !important;
  background: var(--v2-pop) !important; -webkit-backdrop-filter: var(--v2-pop-blur) !important; backdrop-filter: var(--v2-pop-blur) !important;
  border: 1px solid var(--v2-pop-edge) !important; box-shadow: var(--v2-pop-shadow) !important;
  --ink-900: #1b1410; --ink-700: #3b332c; --ink-500: #574e45; --ink-400: #6b6359; --ink-300: #857c72;
  --sand-50: #fbfaf6; --sand-100: #f6f3ee; --sand-200: #ece7df; --sand-300: rgba(27, 20, 16, 0.12); --sand-400: rgba(27, 20, 16, 0.25);
  --v2-ink: #1b1410; --v2-ink-2: #574e45; --v2-text: #1b1410; --v2-text-2: #574e45;
}
:root:has([data-ui-v2]) body .city-autocomplete-list:not(#v2) { border-radius: 18px !important; padding: 6px !important; scrollbar-color: rgba(27, 20, 16, 0.25) transparent; }
/* The sign-in / sign-up card paints every div in it white (skin.css). */
:root:has([data-ui-v2]) body .city-autocomplete-list > div:not(#v2) { border-radius: 12px; color: #1b1410 !important; }
:root:has([data-ui-v2]) body .ctm-menu-item:not(#v2) { color: #1b1410 !important; }
/* 24b. A blurred element can't blur through a blurred card it sits in:
   Chrome boxes the menu's blur inside the card's, so the rows behind the menu
   stayed sharp. The cards that hold a menu carry their blur on a layer behind
   their content instead; they look the same. Sign-in / sign-up (city list),
   provider Settings (care-team assign menu). */
:root:has([data-ui-v2]) body :is(.login-form, .set-section):not(#v2) {
  position: relative; isolation: isolate; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
:root:has([data-ui-v2]) body :is(.login-form, .set-section):not(#v2)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
}
:root:has([data-ui-v2]) body .login-form:not(#v2)::before { -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur); }
:root:has([data-ui-v2]) body .set-section:not(#v2)::before { -webkit-backdrop-filter: var(--v2-smoke-blur); backdrop-filter: var(--v2-smoke-blur); }
/* 24c. A card that clips its content cut the menu off: Profile's Demographics
   tile showed one city of the list; the care-team grid (rounded with a clip in
   §7) would cut a menu opened on its last rows. The tile lets go while its
   list is open; the grid rounds its header row instead of clipping. */
:root:has([data-ui-v2]) body .stub-tile:has(.city-autocomplete-list):not(#v2) { overflow: visible; }
:root:has([data-ui-v2]) body .stub-tile:has(.city-autocomplete-list)::before { border-radius: inherit; }
:root:has([data-ui-v2]) body .ctm-grid:not(#v2) { overflow: visible; }
:root:has([data-ui-v2]) body .ctm-headrow:not(#v2) { border-radius: 21px 21px 0 0; }
/* 24d. Sign-up's other dropdowns (Gender, State, Billing, How did you find
   us) open the same list as the city field instead of the OS pop-up (Rob,
   6 Oct: "they should all match"). GlassSelect: the native select stays the
   field, laid invisibly under a button that looks like it; the button and the
   list exist only here. */
:root:has([data-ui-v2]) body .gsel:not(#v2) { display: block !important; position: relative; }
:root:has([data-ui-v2]) body .gsel-native:not(#v2) {
  position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; min-height: 0 !important;
  opacity: 0 !important; pointer-events: none; margin: 0 !important;
}
:root:has([data-ui-v2]) body .gsel-btn:not(#v2) {
  display: block; width: 100%; box-sizing: border-box; text-align: left; cursor: pointer;
  min-height: 50px; padding: 0 18px 0 44px !important; border-radius: 999px !important;
  font-family: var(--sans); font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: #fff !important; background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important; box-shadow: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:root:has([data-ui-v2]) body .gsel-btn.is-empty:not(#v2) { color: rgba(255, 255, 255, 0.6) !important; }
:root:has([data-ui-v2]) body .gsel:has(.gsel-list) .gsel-btn:not(#v2),
:root:has([data-ui-v2]) body .gsel:has(.gsel-native:focus-visible) .gsel-btn:not(#v2) { border-color: #fff !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); }
:root:has([data-ui-v2]) body .gsel-list:not(#v2) {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1000; text-align: left;
  max-height: 264px; overflow-y: auto; overscroll-behavior: contain; border-radius: 18px !important; padding: 6px !important;
  scrollbar-width: thin; scrollbar-color: rgba(27, 20, 16, 0.25) transparent;
}
:root:has([data-ui-v2]) body .gsel-opt:not(#v2) {
  padding: 10px 16px; border-radius: 12px; font-family: var(--sans); font-size: 14px; color: #1b1410 !important; cursor: pointer;
}
:root:has([data-ui-v2]) body .gsel-opt:hover { background: rgba(27, 20, 16, 0.06); }
:root:has([data-ui-v2]) body .gsel-opt[aria-selected="true"]:not(#v2) {
  background: color-mix(in srgb, var(--v2-ac-d, #b9501f) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v2-ac-d, #b9501f) 40%, transparent);
}
/* A focused field's icon took the old UI's focus green, dark on the glass. */
:root:has([data-ui-v2]) body .login-form .icon-field:focus-within .fi:not(#v2) { color: #fff; }
/* ── 25. The provider welcome (first sign-in). On a desktop the member card
   sits on the right, held in view while the form scrolls on the left (Rob,
   6 Oct: framed like Profile & brand — same 360px card, 32px gutter, sticky
   24px from the top, one column at 1100px and below, card above the form).
   The form is one smoked card, as Profile & brand's is. */
:root:has([data-ui-v2]) body .pv-welcome-form:not(#v2) { display: block !important; }
:root:has([data-ui-v2]) body .pv-welcome-form > .pv-field:last-of-type { margin-bottom: 0; }
:root:has([data-ui-v2]) body .pv-welcome-form textarea.pv-input { display: block; }
:root:has([data-ui-v2]) body .pv-welcome-form .pv-tags { margin-top: 4px; }
@media (min-width: 1101px) {
  :root:has([data-ui-v2]) body .pv-welcome-card:not(#v2) {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 32px; align-items: start; max-width: 1020px;
  }
  :root:has([data-ui-v2]) body .pv-welcome-card > * { grid-column: 1; }
  :root:has([data-ui-v2]) body .pv-welcome-card > :is(.pv-crumb, .pv-title, .pv-welcome-sub) { grid-column: 1 / -1; }
  :root:has([data-ui-v2]) body .pv-welcome-card > .pv-welcome-preview:not(#v2) {
    grid-column: 2; grid-row: 4 / span 2; position: sticky; top: 24px; margin: 0; display: block;
  }
}

/* ── 26. Choice pills (.pv-tag: "What you treat" on the welcome and on
   Profile & brand). Glass pills; a chosen one is the white pill, as the
   filter chips are; the lead one keeps its star and gets a soft ring. */
:root:has([data-ui-v2]) body .pv-tag:not(#v2) {
  font-family: var(--sans); font-size: 14px; letter-spacing: 0; text-transform: none; padding: 9px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; box-shadow: none;
}
:root:has([data-ui-v2]) body .pv-tag:not(.on):hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.4); }
:root:has([data-ui-v2]) body .pv-tag.on:not(#v2) { background: #fff; border-color: #fff; color: #1b1410 !important; }
:root:has([data-ui-v2]) body .pv-tag.on.primary:not(#v2) { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); }
:root:has([data-ui-v2]) body .pv-tag:focus:not(:focus-visible) { outline: none; }
:root:has([data-ui-v2]) body .pv-tag:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* "What you treat" sat right under the About box (Rob, 6 Oct): the pill
   group's label gets the room above it that a field row has. */
:root:has([data-ui-v2]) body .pv-field:has(> .pv-tags):not(#v2) { margin-top: 22px; }

/* ── 27. No page-wide grain overlay in the new UI (Rob, 6 Oct: hovering the "Not yet bookable" card
   flashed a line down the window, through whichever frosted pieces crossed it). atlas.css lays a
   fixed film-grain over the whole page (body.grain::before: z-index 200, mix-blend-mode: overlay).
   A blend layer over everything makes Chrome re-blend the page under it whenever anything changes,
   in tiles, and the frosted cards beneath showed the tile seam for a frame. The living backgrounds
   carry their own grain, so the new UI doesn't need it. */
:root:has([data-ui-v2]) body.grain::before { display: none; }

/* ── 28. The schedule side sheet (Appointment / Availability / Blocked time) on the pop-ups' rules
   (Rob, 6 Oct): a title row with the round ×, the tabs under it, a hairline; the availability
   form sits on the glass (the day, then start – end · Add), not in a card inside the sheet; one
   line of copy. The current UI keeps its own sheet (the title is `hidden` there). */
:root:has([data-ui-v2]) body .pv-sheet-head:not(#v2) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 12px;
  padding: 24px 24px 16px; border-bottom: 1px solid rgba(27, 20, 16, 0.08); background: var(--v2-pop-band);
}
:root:has([data-ui-v2]) body .pv-sheet-name:not(#v2) { display: block; grid-column: 1; grid-row: 1; font-size: 26px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; color: #1b1410; }
:root:has([data-ui-v2]) body .pv-sheet-head > .pv-sheet-x:not(#v2) { grid-column: 2; grid-row: 1; width: 40px; height: 40px; border: 1px solid rgba(27, 20, 16, 0.14); background: rgba(255, 255, 255, 0.6); color: #1b1410; }
:root:has([data-ui-v2]) body .pv-sheet-head > :is(.pv-sheet-tabs, .pv-sheet-title):not(#v2) { grid-column: 1 / -1; grid-row: 2; }
:root:has([data-ui-v2]) body .pv-sheet-body:not(#v2) { padding: 22px 24px; }
:root:has([data-ui-v2]) body .pv-sheet-foot:not(#v2) { padding: 16px 24px 22px; border-top: 1px solid rgba(27, 20, 16, 0.08); }

/* No card inside the sheet, on any tab: the sheet is the card. Availability: one line of copy, the form on the glass. */
:root:has([data-ui-v2]) body .pv-sheet .pv-sheet-body .pv-card:not(#v2):not(#v3):not(#v4) { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:root:has([data-ui-v2]) body .av-editor :is(.av-note, .av-empty):not(#v2) { display: none; }
:root:has([data-ui-v2]) body .av-editor .av-blurb:not(#v2) { font-size: 14px !important; color: #574e45 !important; margin: 0 0 18px !important; }
:root:has([data-ui-v2]) body .av-editor .av-add:not(#v2) {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 10px 8px !important; align-items: center;
}
:root:has([data-ui-v2]) body .av-editor .av-add > .gsel:not(#v2) { grid-column: 1 / -1; }
:root:has([data-ui-v2]) body .av-editor .av-add > :is(input, .gsel, .pv-btn) { min-width: 0; margin: 0; }
:root:has([data-ui-v2]) body .av-editor .av-to:not(#v2) { color: #857c72; font-size: 13px; }
/* Each saved window: the day and hours on the left, Remove at the row's end. */
:root:has([data-ui-v2]) body .av-editor .pv-row:not(#v2) { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
@media (max-width: 400px) {
  :root:has([data-ui-v2]) body .av-editor .av-add:not(#v2) { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  :root:has([data-ui-v2]) body .av-editor .av-add > .pv-btn { grid-column: 1 / -1; }
}
/* GlassSelect on a light pop-up: the field is the pop-up's white field (§21), the list the same frosted list. */
:root:has([data-ui-v2]) body :is(.pv-sheet, .cur-panel) .gsel-btn:not(#v2) {
  min-height: 44px; padding: 0 16px !important; border-radius: 14px !important; font-size: 14px;
  background: rgba(255, 255, 255, 0.72) !important; border: 1px solid rgba(27, 20, 16, 0.16) !important; color: #1b1410 !important;
}
:root:has([data-ui-v2]) body :is(.pv-sheet, .cur-panel) .gsel:has(.gsel-list) .gsel-btn:not(#v2),
:root:has([data-ui-v2]) body :is(.pv-sheet, .cur-panel) .gsel:has(.gsel-native:focus-visible) .gsel-btn:not(#v2) { border-color: #1b1410 !important; box-shadow: 0 0 0 2px rgba(27, 20, 16, 0.12); }
:root:has([data-ui-v2]) body :is(.pv-sheet, .cur-panel) .gsel-list:not(#v2) { right: auto; min-width: 100%; width: max-content; }

/* ── 29. Schedule grid: hours outside your availability read darker than bookable ones again (Rob,
   6 Oct). studio.css shades .cell.outside with a 3.5% wash meant for cream, invisible on the smoked
   glass. Same logic (only the outside hours are shaded, so a week with no hours set stays plain),
   in a shade that shows on glass. Desktop grid and the phone's day list. */
:root:has([data-ui-v2]) body .pv-cal-wrap .cell.outside:not(.blocked):not(#v2) { background-color: rgba(8, 6, 4, 0.26); }

/* ── 30. A provider in the patient's pillar app (Discover's "Book a visit" rows) sits in that pillar's
   four-quadrant ring, as on /schedule (Rob, 6 Oct). The pillar comes from the shell. */
:root:has([data-ui-v2]) body .pvs-shell[data-pillar="health"] .prov-av { --pq: #2c5a4a; }
:root:has([data-ui-v2]) body .pvs-shell[data-pillar="wellness"] .prov-av { --pq: #8c5238; }
:root:has([data-ui-v2]) body .pvs-shell[data-pillar="therapy"] .prov-av { --pq: #6e2a35; }
:root:has([data-ui-v2]) body .pvs-shell[data-pillar="living"] .prov-av { --pq: #4b5d6e; }
:root:has([data-ui-v2]) body .prov-av:not(#v2) { position: relative; overflow: visible; margin: 6px; }
:root:has([data-ui-v2]) body .prov-av::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(transparent 0 4deg, var(--pq, #2c5a4a) 4deg 86deg, transparent 86deg 94deg, var(--pq, #2c5a4a) 94deg 176deg, transparent 176deg 184deg, var(--pq, #2c5a4a) 184deg 266deg, transparent 266deg 274deg, var(--pq, #2c5a4a) 274deg 356deg, transparent 356deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
}

/* ── 31. Cards side by side are the same height (Rob, 6 Oct: "featured content pieces … different
   heights"). .pv-grid top-aligns its cards (studio.css), so a row of stats or a pair of dashboard
   cards came out ragged whenever one ran longer — a label wrapping onto two lines, one list longer
   than its neighbour. In the new UI every row stretches to its tallest card; in the stat cards the
   number and its caption sit at the bottom, so the numbers line up across the row. (List-and-detail
   layouts — the assessments queue, the qEEG history — differ on purpose and are left alone.) */
:root:has([data-ui-v2]) body .pv-grid:not(#v2) { align-items: stretch; }
:root:has([data-ui-v2]) body .pv-grid > .pv-kpi:not(#v2) { display: flex; flex-direction: column; }
:root:has([data-ui-v2]) body .pv-grid > .pv-kpi > .val:not(#v2) { margin-top: auto; }

/* ── 32. Break the glass, finished (Rob, 6 Oct: "feels half done"). The figures are the dashboards'
   dot-matrix numbers (a broader font rule was winning); every card reads label on top, as the stat
   cards do; the history is one inset list with hairlines between entries, not a stack of dark blocks
   inside the dark card. */
:root:has([data-ui-v2]) body .bgx-card .bgx-n:not(#v2) { font-family: var(--v2-num), 'Courier New', monospace !important; font-weight: 800 !important; margin-top: auto; }
:root:has([data-ui-v2]) body .bgx-card:not(#v2) { justify-content: flex-start !important; gap: 14px; }
:root:has([data-ui-v2]) body .bgx-card .bgx-l:not(#v2) { order: -1; }
:root:has([data-ui-v2]) body .bgx-card .bgx-link:not(#v2) { margin-top: auto; }
:root:has([data-ui-v2]) body .bg-list:not(#v2):not(#v3) { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 22px !important; }
:root:has([data-ui-v2]) body .bg-list .bg-row:not(#v2):not(#v3) {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 0 !important;
  box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 18px 22px !important;
}
:root:has([data-ui-v2]) body .bg-list .bg-row:last-child:not(#v2):not(#v3) { border-bottom: 0 !important; }
:root:has([data-ui-v2]) body .bg-list .bg-reason:not(#v2) { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; }

/* ── 33. Every dropdown shows the same chevron, clear of the edge (Rob, 6 Oct: the native arrow sat on
   the rim; the custom ones had none). Native selects draw it instead of the browser's; the frosted
   GlassSelect button carries the same one. White on dark fields, ink inside the light pop-ups. */
:root:has([data-ui-v2]) body select:not([multiple]):not([size]):not(.gsel-native):not(#v2):not(#v3),
:root:has([data-ui-v2]) body .gsel-btn:not(#v2):not(#v3) {
  -webkit-appearance: none; appearance: none; padding-right: 42px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 12px 8px !important;
}
:root:has([data-ui-v2]) body :is(.cad-modal, .ev-modal, .lp-modal, .sc-modal, .sn-modal, .profile-modal, .rq-modal, .arc-journal-modal, .cur-panel, .pv-sheet, .tm, .mm, .atlas-confirm, .modal, .app .pillar-modal:not(.ax-modal))
  :is(select:not([multiple]):not([size]):not(.gsel-native), .gsel-btn):not(#v2):not(#v3) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231b1410' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* ── 34. The morning check-in as a wizard inside its card (Rob, 6 Oct): the faces, then the card slides
   over to "Anything behind it?" and Save, with the picked face as the way back. Two panels side by
   side in a track (MorningCheckIn.tsx); the card is as tall as the panel showing, eased between the
   two (--ci-h, measured by the component), and the bubbles rise from below its edge. The bubbles are soft all over (--ci-soft, read by the canvas). */
:root:has([data-ui-v2]) body .today-portal .checkin { --ci-soft: 2.5; }
:root:has([data-ui-v2]) body .today-portal .ci-track:not(#v2) { display: flex !important; align-items: flex-start; overflow: hidden; height: var(--ci-h, auto); transition: height 450ms cubic-bezier(.4, 0, .2, 1); }
:root:has([data-ui-v2]) body .today-portal .ci-pane:not(#v2) {
  display: block !important; flex: 0 0 100%; min-width: 0; box-sizing: border-box;
  transition: transform 450ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 450ms;
}
:root:has([data-ui-v2]) body .today-portal .ci-pane-2:not(#v2) { padding-left: 2px; }
:root:has([data-ui-v2]) body .today-portal .ci-track[data-step="2"] .ci-pane { transform: translateX(-100%); }
/* The panel slid away is out of reach (no tabbing into it), once it has finished leaving. */
:root:has([data-ui-v2]) body .today-portal .ci-track[data-step="1"] .ci-pane-2,
:root:has([data-ui-v2]) body .today-portal .ci-track[data-step="2"] .ci-pane-1 { visibility: hidden; }
:root:has([data-ui-v2]) body .today-portal .ci-track[data-step="1"] .ci-pane-1,
:root:has([data-ui-v2]) body .today-portal .ci-track[data-step="2"] .ci-pane-2 { visibility: visible; transition: transform 450ms cubic-bezier(.4, 0, .2, 1), visibility 0s; }
:root:has([data-ui-v2]) body .today-portal .ci-back:not(#v2) {
  display: inline-flex !important; align-items: center; gap: 8px; margin: 0 0 16px; padding: 4px 14px 4px 10px !important;
  border-radius: 999px !important; font-size: 14px; color: #fff;
}
:root:has([data-ui-v2]) body .today-portal .ci-back .mood-ic:not(#v2) { width: 28px; height: 28px; padding: 6px; }
:root:has([data-ui-v2]) body .today-portal .ci-pane-2 .ci-behind > .label:not(#v2) { display: block; margin-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { :root:has([data-ui-v2]) body .today-portal :is(.ci-pane, .ci-track) { transition: none !important; } }
:root[data-reduce-motion]:has([data-ui-v2]) body .today-portal :is(.ci-pane, .ci-track) { transition: none !important; }

/* ── §35 The Reduce motion switch (components/v2/ReduceMotionToggle.tsx; Rob,
   7 Oct). New UI only: the component renders nothing until it finds the new
   UI. A row in provider Settings' Account card; on the patient's Profile it
   sits in its own tile, like Notifications. */
:root:has([data-ui-v2]) .rm-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
:root:has([data-ui-v2]) .set-card > * + .rm-row { border-top: 1px solid rgba(255, 255, 255, 0.12); }
:root:has([data-ui-v2]) .rm-row .rm-txt { display: flex; flex-direction: column; gap: 3px; }
:root:has([data-ui-v2]) .rm-row .rm-t { font-size: 14.5px; font-weight: 500; }
:root:has([data-ui-v2]) .rm-row .rm-d { font-size: 13px; opacity: 0.72; }
:root:has([data-ui-v2]) .rm-switch:not(#v2) {
  position: relative; flex: none; width: 44px; height: 24px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.2); transition: background-color 0.2s;
}
:root:has([data-ui-v2]) .rm-switch[aria-checked="true"]:not(#v2) { background: var(--v2-ac, #e8743b); }
:root:has([data-ui-v2]) .rm-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.2s;
}
:root:has([data-ui-v2]) .rm-switch[aria-checked="true"]::after { transform: translateX(20px); }
:root:has([data-ui-v2]) .rm-switch:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── §36 Phone fixes (Rob, 8 Oct, on his iPhone) ──
   A link dressed as a button ("Fill it out with Rob", and every other a.pv-btn) carries an inline
   display: inline-block, which beat the pill's centring and left its words at the top. */
:root:has([data-ui-v2]) body a.pv-btn:not(#v2) { display: inline-flex !important; align-items: center; justify-content: center; }
/* The intake folder's third tab is "AI" on a phone, so all three fit; the full name stays readable to a
   screen reader (moved off screen, not removed). */
@media (max-width: 760px) {
  :root:has([data-ui-v2]) body .fold-tab .fold-tab-long:not(#v2) {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  :root:has([data-ui-v2]) body .fold-tab .fold-tab-short[hidden]:not(#v2) { display: inline; }
  /* Tighter tabs, so "AI" with its "Soon" or count pill still fits beside the other two. */
  :root:has([data-ui-v2]) body .fold-tab:not(#v2) { padding: 0 22px 0 14px; }
  :root:has([data-ui-v2]) body .fold-badge:not(#v2) { margin-left: 2px; }
}
/* The assessments queue: the patient card had no room inside the list's card — flush to its sides and
   onto the next section's line. A margin all round, and the sections themselves breathe. */
:root:has([data-ui-v2]) body .as-queue .as-pt:not(#v2) { margin: 6px 10px 14px; }
:root:has([data-ui-v2]) body .as-queue .as-group-h:not(#v2) { padding: 14px 16px; }
:root:has([data-ui-v2]) body .as-queue .as-subs:not(#v2) { padding-bottom: 8px; }
/* A questionnaire's header on the chart (ScreenersPanel): on a phone the actions go under the name, in a
   row, so "PHQ-9" doesn't break and "Fill it out with …" keeps to one line. */
@media (max-width: 760px) {
  :root:has([data-ui-v2]) body .sc-head:not(#v2) { flex-wrap: wrap; row-gap: 12px; }
  :root:has([data-ui-v2]) body .sc-acts:not(#v2) { width: 100%; justify-content: flex-start !important; }
  :root:has([data-ui-v2]) body .sc-acts .pv-btn:not(#v2) { white-space: nowrap; }
}
:root:has([data-ui-v2]) body .sc-name:not(#v2) { white-space: nowrap; }

/* ── §37 The schedule sheet, every tab, on a phone and the desktop (Rob, 8 Oct: "spacing and
   overlapping and clipping", and the fields white on white) ── */
/* Placeholders on every cream pop-up and sheet are a muted ink. The dark page's white placeholder
   rule outranked the pop-ups' own (its list has `.portal main`), so on the schedule sheet the hints
   ("Start typing a name…") were white on white. */
:root:has([data-ui-v2]) body :is(.app .pillar-modal:not(.ax-modal), .atlas-confirm, .sc-modal, .sn-modal, .rq-modal, .profile-modal, .modal, .tm, .mm, .pv-sheet, .lp-modal, .cad-modal, .ev-modal, .aud-modal, .cur-panel, .arc-journal-modal, .app .drawer, .app .sheet) :is(input, textarea):not(#v2)::placeholder {
  color: #8a8178 !important; opacity: 1 !important;
}
/* Date and time fields fill their cell instead of keeping the browser's own width (iOS's is wide
   enough to push "Ends" off the screen). */
:root:has([data-ui-v2]) body .pv-sheet input:is([type="date"], [type="time"], [type="datetime-local"]):not(#v2) {
  display: block; width: 100% !important; min-width: 0 !important; text-align: left; -webkit-appearance: none; appearance: none;
}
/* Availability: the day; then start – end; then Add, the full width. Add was a fourth column beside the
   two times, which on a phone pushed it into them. */
:root:has([data-ui-v2]) body .av-editor .av-add:not(#v2):not(#v3) { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px 10px !important; }
:root:has([data-ui-v2]) body .av-editor .av-add > .pv-btn:not(#v2) { grid-column: 1 / -1; width: 100%; justify-content: center; }
/* Blocked time: what it is; the date; from | to; how it repeats (and until); Add. */
:root:has([data-ui-v2]) body .pv-sheet .bt-form:not(#v2) {
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 10px !important; align-items: end;
}
:root:has([data-ui-v2]) body .pv-sheet .bt-form > :is(.bt-what, .bt-date, .bt-rep, .bt-until, .bt-add):not(#v2) { grid-column: 1 / -1; }
:root:has([data-ui-v2]) body .pv-sheet .bt-form > label:not(#v2) { min-width: 0; flex: none !important; }
:root:has([data-ui-v2]) body .pv-sheet .bt-form > .bt-add:not(#v2) { width: 100%; justify-content: center; margin-top: 4px; }
/* New appointment: Starts and Ends one under the other on a phone. */
@media (max-width: 640px) {
  :root:has([data-ui-v2]) body .pv-sheet .ap-when:not(#v2) { flex-direction: column; gap: 12px !important; }
}
/* On a phone the sheet rises from the bottom, with a gap above it, like the app's other pop-ups — not
   from the top edge under the status bar. */
@media (max-width: 640px) {
  :root:has([data-ui-v2]) body .pv-sheet:not(#v2):not(#v3) {
    top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100vw !important;
    height: auto !important; max-height: calc(100dvh - 28px - env(safe-area-inset-top, 0px)) !important;
    border-radius: 28px 28px 0 0 !important; border-left: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 -30px 80px -40px rgba(20, 12, 6, 0.55) !important; padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: pv-sheet-up 260ms cubic-bezier(0.22, 0.8, 0.3, 1);
  }
  :root:has([data-ui-v2]) body .pv-sheet .pv-sheet-head:not(#v2) { border-radius: 28px 28px 0 0; }
}
/* "Viewing as admin · Back to Admin": on a phone the words are hidden (studio.css), which left the
   dark tag wrapped round the white pill — a button in a button. There it is the pill alone. */
@media (max-width: 640px) {
  :root:has([data-ui-v2]) .admin-viewbar:not(#v2) { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  :root:has([data-ui-v2]) .admin-viewbar a:not(#v2) { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.55); padding: 9px 16px; }
}

/* ── §38 A row's time / date cell (.pv-row > .tm: admin "Recent admin activity", the provider Studio
   rows' lead column, admin Health) is plain figures on the glass (Rob, 8 Oct). It shares its class name
   with the Living trainer pop-up (.tm), so the cream pop-up rules (fill, radius, padding, dark ink)
   had turned every one into a little cream pill. ── */
:root:has([data-ui-v2]) body .pv-row > .tm:not(#v2):not(#v3):not(#v4) {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  color: rgba(255, 255, 255, 0.72) !important; font-size: 13px !important; font-weight: 500; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums; width: 72px; flex: 0 0 72px; line-height: 1.5; max-height: none; overflow: visible;
}
/* …and the same pop-up's wide-screen layout (§19c: a 320px two-column grid,
   overflow hidden, all !important) clipped the time to "10:0" on every
   console list at 760px and up — the Wellness program's classes, "Coming up". */
@media (min-width: 760px) {
  :root:has([data-ui-v2]) body .pv-row > .tm:not(#v2):not(#v3):not(#v4) {
    display: block !important; overflow: visible !important; width: 72px !important;
    height: auto !important; max-height: none !important;
  }
}

/* ── §39 After a purchase, the Orders sheet's "Thank you — your order is confirmed" (OrdersScreen): the
   cream sheets' own note (sans, ink, a soft fill), not a serif box. ── */
:root:has([data-ui-v2]) body .hs-order-confirm:not(#v2) {
  background: rgba(27, 20, 16, 0.04) !important; border: 1px solid rgba(27, 20, 16, 0.1) !important; border-radius: 22px !important;
}
:root:has([data-ui-v2]) body .hs-order-confirm > div:first-child:not(#v2) { font-family: var(--sans) !important; color: #1b1410 !important; font-size: 17px !important; letter-spacing: -0.01em; }
:root:has([data-ui-v2]) body .hs-order-confirm > div + div:not(#v2) { color: #574e45 !important; }

/* ── §40 Outcomes, "Per-patient signal", on a phone (visual audit, 8 Oct): the seven-column desktop row
   squeezed its sparklines on top of each other. Each patient becomes a small card — who, then days and
   last check-in, safety and mood, engagement — each figure with its own label. ── */
@media (max-width: 640px) {
  :root:has([data-ui-v2]) body .oc-row.head:not(#v2) { display: none !important; }
  :root:has([data-ui-v2]) body .oc-row:not(.head):not(#v2) {
    grid-template-columns: 40px repeat(2, minmax(0, 1fr)) !important; gap: 10px 14px !important; align-items: start; padding: 16px 10px !important;
  }
  :root:has([data-ui-v2]) body .oc-row:not(.head) > :nth-child(1):not(#v2) { grid-column: 1; grid-row: 1; }
  :root:has([data-ui-v2]) body .oc-row:not(.head) > :nth-child(2):not(#v2) { grid-column: 2 / -1; grid-row: 1; align-self: center; min-width: 0; }
  :root:has([data-ui-v2]) body .oc-row:not(.head) > :nth-child(3):not(#v2) { grid-column: 2; grid-row: 2; }
  :root:has([data-ui-v2]) body .oc-row:not(.head) > :nth-child(7):not(#v2) { grid-column: 3; grid-row: 2; }
  :root:has([data-ui-v2]) body .oc-row:not(.head) > :nth-child(4):not(#v2) { grid-column: 2; grid-row: 3; }
  :root:has([data-ui-v2]) body .oc-row:not(.head) > :nth-child(5):not(#v2) { grid-column: 3; grid-row: 3; }
  :root:has([data-ui-v2]) body .oc-row:not(.head) > :nth-child(6):not(#v2) { grid-column: 2 / -1; grid-row: 4; }
  :root:has([data-ui-v2]) body .oc-row:not(.head) > :is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7))::before {
    display: block; margin-bottom: 4px; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
  }
  :root:has([data-ui-v2]) body .oc-row:not(.head) > :nth-child(3)::before { content: "In care"; }
  :root:has([data-ui-v2]) body .oc-row:not(.head) > :nth-child(4)::before { content: "Safety · 7d"; }
  :root:has([data-ui-v2]) body .oc-row:not(.head) > :nth-child(5)::before { content: "Mood · 7d"; }
  :root:has([data-ui-v2]) body .oc-row:not(.head) > :nth-child(6)::before { content: "Engagement"; }
  :root:has([data-ui-v2]) body .oc-row:not(.head) > :nth-child(7)::before { content: "Last check-in"; }
  :root:has([data-ui-v2]) body .oc-row-email:not(#v2) { overflow-wrap: anywhere; }
}

/* ── §41 No sideways scroll on a phone (visual audit, 8 Oct) ──
   The chart's stat tiles (four of them, three to a row) ran off the right edge on every chart tab:
   two to a row on a phone. The admin content tables scroll inside their card instead of widening
   the page. */
@media (max-width: 640px) {
  :root:has([data-ui-v2]) body .ov-stats:not(#v2) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  :root:has([data-ui-v2]) body .ov-stats > .ov-stat:not(#v2) { min-width: 0; }
  :root:has([data-ui-v2]) body table.cad-table:not(#v2) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── §42 The sign-in card's ✕ (sign-in, sign-up, reset, set-password, redeem, the code step). Its inline
   place (26px down, 46px in) was set for the old, roomier panel; on a phone it sat on the headline
   ("Choose a new password"). Tucked into the card's corner, with the headline kept clear of it. ── */
:root:has([data-ui-v2]) body .login-form > a[aria-label="Close and return to Atlas"]:not(#v2) { top: 14px !important; right: 14px !important; color: rgba(255, 255, 255, 0.8) !important; }
:root:has([data-ui-v2]) body .login-form:has(> a[aria-label="Close and return to Atlas"]) :is(h1, h2):first-of-type:not(#v2) { padding-right: 40px; }
/* Pill buttons keep their label on one line ("+ Add provider" wrapped inside its pill on a phone). */
:root:has([data-ui-v2]) body .cad-add:not(#v2) { white-space: nowrap; }

/* ── §43 Legibility (visual audit, 8 Oct) ──
   The store / care plan line's "approved for you" was the old forest green, near-invisible on the glass.
   The store's empty state drew a ✚ text glyph as its icon; the card says enough without it.
   The pillar week strip's today column was a solid cream block on the dark calendar, its weekday letter
   white on cream; now a faint glass highlight, like the Health calendar's. */
:root:has([data-ui-v2]) body .app .hs-store .hs-approved-note em:not(#v2) { color: #fff !important; font-style: normal; font-weight: 500; opacity: 1; }
:root:has([data-ui-v2]) body .app .hs-store .hs-approved-note:not(#v2) { font-family: var(--sans) !important; color: rgba(255, 255, 255, 0.8) !important; }
/* The same line on the care plan's cream sheet reads in the sheet's ink. */
:root:has([data-ui-v2]) body .app .hs-protocol .hs-approved-note:not(#v2) { font-family: var(--sans) !important; color: #574e45 !important; }
:root:has([data-ui-v2]) body .app .hs-protocol .hs-approved-note em:not(#v2) { color: #1b1410 !important; font-style: normal; font-weight: 500; }
:root:has([data-ui-v2]) body .app .hs-empty-glyph:not(#v2) { display: none; }
:root:has([data-ui-v2]) body .app .pillar-cal-col.today:not(#v2) { background: rgba(255, 255, 255, 0.12) !important; }
:root:has([data-ui-v2]) body .app .pillar-cal-col.today .pillar-cal-colhead .dow:not(#v2) { color: #fff !important; }

/* ── §44 The questionnaires and the intake on a phone (visual audit, 8 Oct): on a shorter phone the
   fourth PHQ-9 answer ("Nearly every day") sat under the Continue button. Tighter rhythm on a phone so
   a question and all its answers fit: a smaller question, slimmer rows, less air around the rail. ── */
@media (max-width: 640px) {
  :root:has([data-ui-v2]) body .app .ax-modal .ax-rail:not(#v2) { margin-bottom: 18px; }
  :root:has([data-ui-v2]) body .app .ax-modal .ax-q:not(#v2) { font-size: 24px; }
  :root:has([data-ui-v2]) body .app .ax-modal .ax-sub:not(#v2) { font-size: 14.5px; line-height: 1.45; }
  :root:has([data-ui-v2]) body .app .ax-modal .ax-rows:not(.inline) .ax-row:not(#v2) { min-height: 0; padding-top: 13px; padding-bottom: 13px; }
  :root:has([data-ui-v2]) body .app .ax-modal .ax-rows:not(#v2) { gap: 8px; }
}

/* ── §45 The chart's Intake on a phone (visual audit, 8 Oct): the report sat three boxes deep — the card,
   the submission's box, the folder sheet — and was left about 60% of the screen wide. On a phone the
   submission's box drops its frame, and the sheet its extra padding; long values wrap. ── */
@media (max-width: 640px) {
  :root:has([data-ui-v2]) body .ip-sub:not(#v2) { border: 0 !important; border-radius: 0 !important; }
  :root:has([data-ui-v2]) body .ip-sub > button:not(#v2) { padding-left: 0 !important; padding-right: 0 !important; background: none !important; }
  :root:has([data-ui-v2]) body .ip-sub-body:not(#v2) { padding: 8px 0 0 !important; }
  :root:has([data-ui-v2]) body .fold-sheet:not(#v2):not(#v3) { padding-left: 16px !important; padding-right: 16px !important; }
  :root:has([data-ui-v2]) body .fold-sheet *:not(#v2) { min-width: 0; overflow-wrap: anywhere; }
}

/* ── §46 The rail on a shorter desktop window (visual audit, 8 Oct: at 1440×900 the admin rail cut its
   account card in half and a pillar rail cut "Services"). The account card is pinned to the rail's foot
   and the list scrolls above it; below 960px of height the rows and section labels tighten. ── */
@media (min-width: 901px) {
  :root:has([data-ui-v2]) body .pvs-foot:not(#v2) { position: sticky !important; bottom: -14px; z-index: 2; padding-bottom: 14px; margin-bottom: -14px; }
}
@media (min-width: 901px) and (max-height: 960px) {
  :root:has([data-ui-v2]) body .pvs .pvs-lbl:not(#v2) { padding-top: 12px !important; }
  :root:has([data-ui-v2]) body .pvs .pvs-item:not(#v2) { padding-top: 8px !important; padding-bottom: 8px !important; }
  :root:has([data-ui-v2]) body .pvs .pvs-brand:not(#v2) { padding-bottom: 10px !important; }
}

/* ── §47 One type family in every pop-up (visual audit, 8 Oct: the lab panel's "+ Add panel" still
   spoke Jost and Cormorant). The page-wide rule (§0) reaches the main column and [role="dialog"]; the
   pop-up families that are neither are named here. ── */
:root:has([data-ui-v2]) body :is(.lp-modal, .lp-modal-backdrop, .cad-modal, .ev-modal, .sc-modal, .sn-modal, .aud-modal, .profile-modal, .rq-modal, .cur-panel, .tm, .mm, .atlas-confirm) *:not(svg, svg *),
:root:has([data-ui-v2]) body :is(.lp-modal, .cad-modal, .ev-modal, .sc-modal, .sn-modal, .aud-modal, .profile-modal, .rq-modal, .cur-panel, .tm, .mm) :is(*::before, *::after) {
  font-family: var(--sans) !important;
}
:root:has([data-ui-v2]) body :is(.lp-modal, .cad-modal, .ev-modal, .sc-modal, .sn-modal, .aud-modal, .profile-modal, .rq-modal, .cur-panel, .tm, .mm) :is(em, i, [style*="italic"]):not(#v2) { font-style: normal !important; }

/* ── §48 Old-design pieces inside new screens (visual audit, 8 Oct) ── */
/* Today's "This day hasn't been written yet": the old serif italic outranked the module's sans. */
:root:has([data-ui-v2]) body .today-portal .module :is(h2, h3, p, em, i):not(#v2) { font-family: var(--sans) !important; font-style: normal !important; }
/* Protocol library (internal): its protocols are the system's cards, and its heading the section's. */
:root:has([data-ui-v2]) body .pl-lib .pl-card:not(#v2) {
  background: var(--v2-card) !important; border: 1px solid var(--v2-card-edge) !important; border-radius: 28px !important; box-shadow: var(--v2-card-shadow) !important;
  padding: 22px 24px !important;
}
:root:has([data-ui-v2]) body .pl-lib > div:first-child h2:not(#v2) { font-size: 24px !important; letter-spacing: -0.03em; color: #fff; }
/* A session's media upload: the cards' radius, a hairline that reads on the glass. */
:root:has([data-ui-v2]) body .pv-upload:not(#v2) { border-radius: 24px !important; border-color: rgba(255, 255, 255, 0.28) !important; }
/* The audit chain's pop-over: the cream pop-up card, not a white 10px box. */
:root:has([data-ui-v2]) body .aud-badge-pop:not(#v2) {
  background: #f6f3ee !important; border: 1px solid rgba(255, 255, 255, 0.9) !important; border-radius: 22px !important;
  box-shadow: 0 30px 70px -30px rgba(20, 12, 6, 0.6) !important; padding: 18px !important;
}
:root:has([data-ui-v2]) body .aud-badge-pop :is(.aud-badge-pop-title):not(#v2) { color: #1b1410 !important; }
:root:has([data-ui-v2]) body .aud-badge-pop :is(.aud-badge-pop-text, .aud-badge-pop-foot):not(#v2) { color: #574e45 !important; }
/* The messaging switches (admin Platform settings): the accent when on, not the old navy. */
:root:has([data-ui-v2]) body .msg-switch:not(#v2) { background: rgba(255, 255, 255, 0.2) !important; }
:root:has([data-ui-v2]) body .msg-switch[aria-checked="true"]:not(#v2) { background: var(--v2-ac, #e8743b) !important; }
/* Their knob stays white. The rule that turns inline white backgrounds into the
   glass fill skips it by its "width:18px", but once React rewrites the style
   attribute (on the first click) it reads "width: 18px" and the knob went
   see-through, the accent showing through it (Rob, 16 Oct). */
:root:has([data-ui-v2]) body .msg-switch > span:not(#v2) { background: #fff !important; }
/* /admin/patients' editor: the system's radius and a light hairline. */
:root:has([data-ui-v2]) body .acc-editor:not(#v2) { border-radius: 0 0 22px 22px !important; border-color: rgba(255, 255, 255, 0.14) !important; background: rgba(255, 255, 255, 0.06) !important; }
:root:has([data-ui-v2]) body .acc-shell :is(.acc-fld input, .acc-fld select, .acc-invite-link input):not(#v2) { border-radius: 14px !important; }
/* "Message Patient →": in the pill (inline-flex) the arrow's leading space collapsed. */
:root:has([data-ui-v2]) body .pd-msg-btn::after { content: "→" !important; margin-left: 8px; }
/* Outcomes: the "Outcomes" pill and "Export CSV" on one line, centred on each other. */
:root:has([data-ui-v2]) body .oc-top-row > *:not(#v2) { margin-top: 0 !important; margin-bottom: 0 !important; }

/* ── §49 The patient portal's phone menu (visual audit, 8 Oct): it came out 32% opaque with no photograph,
   so the page read through it ("Visitor" under the account card), and its last row met the rounded
   foot. Frosted dark glass like the other rails, and room at the bottom. ── */
@media (max-width: 900px) {
  :root:has([data-ui-v2]) body.nav-shown .portal .side.pvs:not(#v2) {
    background-color: rgba(26, 12, 8, 0.86) !important;
    -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%);
    padding-bottom: 22px !important;
  }
}

/* ── §50 The portal's "Available to add" pillar card (visual audit, 8 Oct): its feature pills were
   white text on white, "Preview Living" dark on the dark card, and the headline's dimmed last word
   vanished into the card's highlight. Glass pills, a glass ghost button, the dimmed word a touch firmer. ── */
:root:has([data-ui-v2]) body .pw-banner .pw-offer > span:not(#v2) {
  background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.28) !important;
}
:root:has([data-ui-v2]) body .pw-banner .pw-cta.ghost:not(#v2) {
  background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.45) !important;
}
:root:has([data-ui-v2]) body .pw-banner .pw-cta.ghost > span:not(#v2) { color: #fff !important; }
:root:has([data-ui-v2]) body .pw-banner :is(h2, h3) em:not(#v2) { opacity: 0.72 !important; color: #fff !important; }
@media (max-width: 640px) {
  /* The phone card's readings sit bare under their labels (an empty reading drew as a little box). */
  :root:has([data-ui-v2]) body .oc-row:not(.head) :is(.oc-row-trend, .oc-row-empty):not(#v2) { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; min-height: 0 !important; }
}

/* ── §51 A pillar's tagline pill on a phone (visual audit, 8 Oct): beside a short title it fitted;
   beside "Integrated Health" it wrapped under the title still carrying its 14px left margin. On a phone
   every pillar puts it on its own line, flush left. ── */
@media (max-width: 640px) {
  :root:has([data-ui-v2]) body .pw h1 .pw-arcflag:not(#v2) { display: table; margin: 12px 0 0 !important; }
}
@media (min-width: 901px) {
  /* The pinned account card sits on a frosted band, so the rows that scroll under it blur away instead
     of reading through it. */
  :root:has([data-ui-v2]) body .pvs-foot:not(#v2) { isolation: isolate; }
  :root:has([data-ui-v2]) body .pvs-foot::before {
    content: ""; position: absolute; z-index: -1; left: -14px; right: -14px; top: -14px; bottom: 0; border-radius: 0 0 32px 32px;
    background: linear-gradient(180deg, rgba(12, 9, 7, 0) 0%, rgba(12, 9, 7, 0.55) 22px, rgba(12, 9, 7, 0.6) 100%);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    -webkit-mask: linear-gradient(180deg, transparent 0, #000 20px); mask: linear-gradient(180deg, transparent 0, #000 20px);
    pointer-events: none;
  }
}

/* ── 52. Second visual audit (8 Oct). ─────────────────────────────────────── */
/* An empty state that is itself the screen's padded block (the Health Store's "Nothing to purchase yet") keeps
   the page's gutter: §16 zeroes its margin, and its padding is the card's own, so it ran edge to edge. The
   store's intro line starts where the heading does. */
:root:has([data-ui-v2]) body .app .screen .pad:is(.wl-empty, .hs-empty, .rc-empty, .pw-empty, .feed-empty, .vitals-empty, .rail-empty):not(#v2) { margin: 0 20px !important; }
:root:has([data-ui-v2]) body .app .hs-store .hs-approved-note:not(#v2) { padding: 0 20px 14px; }
@media (min-width: 901px) {
  :root:has([data-ui-v2]) body .app .screen .pad:is(.wl-empty, .hs-empty, .rc-empty, .pw-empty, .feed-empty, .vitals-empty, .rail-empty):not(#v2) { margin: 0 44px !important; }
  :root:has([data-ui-v2]) body .app .hs-store .hs-approved-note:not(#v2) { padding: 0 44px 16px; }
}
/* The cart is a cream sheet: its empty line is the sheet's ink, not a smoke card. */
:root:has([data-ui-v2]) body .app .drawer .cart-empty:not(#v2) {
  background: none !important; border: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  color: #574e45 !important; text-align: center; padding: 28px 8px !important;
}
/* The pillar tagline ("Where the arc is taught") was the pillar's own colour on that pillar's backdrop. */
:root:has([data-ui-v2]) body .pw h1 .pw-arcflag:not(#v2) {
  color: rgba(255, 255, 255, 0.9) !important; border-color: rgba(255, 255, 255, 0.34) !important; background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
/* An admin's "Back to Admin" pill floats over the bottom of every page on a phone; the page ends clear of it. */
@media (max-width: 640px) {
  :root:has([data-ui-v2]) body:has(.admin-viewbar) :is(.pvs-main, .portal main, .app .screen.active) { padding-bottom: 72px !important; }
}

/* The cohort roster's initials were navy on the dark page's translucent sand: pale chips, as the caseload lists have. */
:root:has([data-ui-v2]) body .roster-row .ava:not(#v2) { background: rgba(255, 255, 255, 0.82) !important; color: #1b1410 !important; }
/* The Arc's and check-in's page header, as every screen's .greet is (Rob, 8 Oct: "make headers on brand"):
   the glass pill, the title with its second word dimmed, the line under it, from the left. And the Arc's
   phase heading is a section heading ("Your record"), not a coloured bar beside a caps label. */
:root:has([data-ui-v2]) body .arc-head { text-align: left; margin: 8px 0 40px; }
:root:has([data-ui-v2]) body .arc-head-k:not(#v2) {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px; margin-bottom: 18px; border-radius: 999px;
  font-size: 12.5px !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff !important; text-decoration: none;
  background: var(--v2-glass); border: 1px solid var(--v2-glass-edge); box-shadow: var(--v2-glass-in);
  -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur);
}
:root:has([data-ui-v2]) body .arc-head h1:not(#v2) {
  color: #fff !important; font-weight: 400 !important; letter-spacing: -0.045em !important; line-height: 0.98 !important;
  font-size: clamp(40px, 4.6vw, 64px) !important; margin: 0 0 14px !important;
}
:root:has([data-ui-v2]) body .arc-head p:not(#v2) { color: rgba(255, 255, 255, 0.85) !important; font-size: 15px !important; line-height: 1.5; max-width: 560px; margin: 0 0 24px !important; }
:root:has([data-ui-v2]) body .arc-phase-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
:root:has([data-ui-v2]) body .arc-phase-h h2:not(#v2) { margin: 0 !important; font-size: 26px !important; font-weight: 400 !important; letter-spacing: -0.025em !important; color: #fff !important; text-transform: none !important; }
:root:has([data-ui-v2]) body .arc-phase-h span:not(#v2) { font-size: 13px !important; color: rgba(255, 255, 255, 0.66) !important; letter-spacing: 0 !important; }
:root:has([data-ui-v2]) body :is(.arc-head h1, .arc-phase-h h2) em:not(#v2) { font-style: normal !important; opacity: 0.6; color: inherit !important; }
/* A portal page's header stacks on a phone (portal-extras.css, 500px); stacked, the desktop's flex-end pushed
   the title to the right edge (Billing, Events, Membership). It starts on the left, as every header does. */
@media (max-width: 500px) {
  :root:has([data-ui-v2]) body .portal main .page > .member-section-head:first-child { align-items: stretch !important; }
}

/* ── §53 Space between stacked cards, and above the rail's account card (Rob, 12 Oct). ──────────── */
/* A console page that stacks cards straight into .pv-view, without a StudioGrid (Profile & brand: the
   profile card, then the Scheduling / Contact / Your team sections), had them touching: .pv-card has no
   margin and §7 pins .set-section's top margin to 0. Every card after the first gets the grid's 16px.
   Margins collapse in .pv-view (a block), so a block that already leaves 16px below itself stays at 16.
   Only .set-section needs !important, to beat §7's; an inline margin elsewhere still wins. */
:root:has([data-ui-v2]) body .pv-view > :is(.pv-card, .pv-grid, .set-section) ~ :is(.pv-card, .pv-grid):not(#v2) { margin-top: 16px; }
:root:has([data-ui-v2]) body .pv-view > :is(.pv-card, .pv-grid, .set-section) ~ .set-section:not(#v2) { margin-top: 16px !important; }
/* The account card at the rail's foot sat flush against the last rail entry once the list filled the
   rail. Every rail (provider, admin, auditor, member) wraps that card in .pvs-foot. */
:root:has([data-ui-v2]) body .pvs-foot:not(#v2) { padding-top: 14px; }

/* ── §54 The rail's two ends never move; the list scrolls between them and fades before it reaches
   either (Rob, 12 Oct). ─────────────────────────────────────────────────────────────────────────────── */
/* Every rail (provider, admin, auditor, member) wraps everything between the ATLAS lockup and the account
   card in .pvs-scroll, display:contents for the current UI. Here it becomes the one part that scrolls: the
   rail itself stops scrolling, the lockup and the card are ordinary flex items at its top and bottom, and
   the list's edges are masked so rows fade out before they reach either. Nothing passes behind them, so
   §46's sticky foot and §49's frosted band under it are retired wherever the wrapper is present. */
@property --pvs-fade-top { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pvs-fade-bot { syntax: "<length>"; inherits: false; initial-value: 0px; }
:root:has([data-ui-v2]) body :is(.pvs, .portal .side.pvs):has(> .pvs-scroll):not(#v2) { overflow: hidden !important; }
:root:has([data-ui-v2]) body .pvs > .pvs-scroll:not(#v2) {
  display: flex !important; flex-direction: column; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  /* Bleed to the rail's sides so a row's hover pill isn't clipped by the scroll box. */
  margin: 0 -14px; padding: 0 14px;
  --pvs-fade-top: 0px; --pvs-fade-bot: 28px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--pvs-fade-top), #000 calc(100% - var(--pvs-fade-bot)), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--pvs-fade-top), #000 calc(100% - var(--pvs-fade-bot)), transparent 100%);
}
:root:has([data-ui-v2]) body .pvs > .pvs-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Each fade only where there is more to scroll to: none at the top until the list has moved, none at the
   bottom once it has reached its end, none at all on a rail that fits. Without scroll timelines (Firefox,
   for now) the bottom fade stays on and the top stays off. */
@supports (animation-timeline: scroll()) {
  :root:has([data-ui-v2]) body .pvs > .pvs-scroll:not(#v2) {
    --pvs-fade-bot: 0px;
    animation: pvs-fade-top linear both, pvs-fade-bot linear both;
    animation-timeline: scroll(self block), scroll(self block);
    animation-range: 0 32px, calc(100% - 32px) 100%;
  }
}
@keyframes pvs-fade-top { from { --pvs-fade-top: 0px; } to { --pvs-fade-top: 28px; } }
@keyframes pvs-fade-bot { from { --pvs-fade-bot: 28px; } to { --pvs-fade-bot: 0px; } }
:root:has([data-ui-v2]) body :is(.pvs, .portal .side.pvs):has(> .pvs-scroll) .pvs-foot:not(#v2) {
  /* top/bottom reset too: §46's sticky "bottom: -14px" survived as a relative offset and pushed the card
     14px down onto the rail's edge (Rob, 12 Oct). The rail's own 14px bottom padding is its breathing room. */
  position: relative !important; top: auto; bottom: auto; margin-top: 0; margin-bottom: 0; padding-bottom: 0;
}
:root:has([data-ui-v2]) body :is(.pvs, .portal .side.pvs):has(> .pvs-scroll) .pvs-foot::before { display: none; }

/* ── §55 In-between widths: a small laptop, an iPad either way round (sweep at 1024 and 834, Rob 12 Oct:
   "not quite full size wide screen and not quite mobile there's some quirks"). Between 901px and ~1400px
   the rail still takes 272px, so the page has far less room than the viewport suggests: layouts that were
   sized for a full desktop squeezed, clipped or let a secondary pane win. ───────────────────────────── */

/* Split screens give the room to the thing being read. Messages: the conversation list was a fixed 340px,
   so at 1024 it was as wide as the conversation itself. It now takes ~30%, between 240 and 340. */
@media (min-width: 641px) {
  :root:has([data-ui-v2]) body .ix-shell:not(#v2) { grid-template-columns: clamp(240px, 30%, 340px) minmax(0, 1fr); }
}
/* …and its heading wraps rather than running "Messages" into "Your care team" at tablet width. */
:root:has([data-ui-v2]) body .ix-list-head:not(#v2) { flex-wrap: wrap; column-gap: 12px; row-gap: 2px; }
/* The "Before your visit" notice is a card pinned top-right, which on Messages is the conversation itself:
   the newest message sat under it. On a page with an inbox it starts folded to its "!" (as it already does
   on a phone); one tap opens it. Nothing else about it changes. */
:root:has([data-ui-v2]) body:has(.ix-shell) .pv-toast[data-open="auto"]:not(#v2) {
  --dot-inset: 0px; --dot-size: 34px; --dot-font: 17px; --dot-bg: var(--v2-ac-d, #2c5a4a); --dot-fg: #fff;
  --dot-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.6);
}
:root:has([data-ui-v2]) body:has(.ix-shell) .pv-toast[data-open="auto"] .pv-toast-card:not(#v2) { display: none; }
:root:has([data-ui-v2]) body:has(.ix-shell) .pv-toast[data-open="auto"] .pv-toast-bang:not(#v2) { display: block; }
:root:has([data-ui-v2]) body:has(.ix-shell) .pv-toast[data-open="auto"] .pv-toast-x:not(#v2) { display: none; }

/* Assessments: the 268px queue beside the review left the review ~350px at 1024, its folder tabs cut off.
   With the rail showing and under 1180px the queue goes on top, as it already does under 900, kept short
   and scrolling so the review starts on screen. */
@media (min-width: 901px) and (max-width: 1180px) {
  :root:has([data-ui-v2]) body .as-split:not(#v2) { grid-template-columns: minmax(0, 1fr); }
  :root:has([data-ui-v2]) body .as-split > .as-queue:not(#v2) { position: static; max-height: 300px; overflow-y: auto; }
}

/* Dashboards: a card in a StudioGrid could not shrink below its content, so at 1024 the second column of
   Health's "Today's sessions | Unclaimed patients" ran off the page and was clipped. Cards may now shrink;
   and the two-column dashboard rows go to one column while the rail shows and the page is under 1180. */
:root:has([data-ui-v2]) body .pv-grid > *:not(#v2) { min-width: 0; }
@media (min-width: 901px) and (max-width: 1180px) {
  :root:has([data-ui-v2]) body .pv-grid[style*="--pv-cols"]:not(.pv-kpis):not(#v2) { grid-template-columns: minmax(0, 1fr); }
}

/* Members: the five stat columns are fixed at 88px and the name column could not shrink below the email,
   so a long email pushed that row's stats out past the card. The name column shrinks (the email ends in
   …), and under 1280 the row takes its tablet shape: name on top, the five stats in a row beneath. */
:root:has([data-ui-v2]) body .pl-list.rich .pl-row:not(#v2) { grid-template-columns: 44px minmax(0, 1fr) repeat(5, 88px) 16px; }
:root:has([data-ui-v2]) body .pl-list.rich .pl-name-col:not(#v2) { min-width: 0; }
:root:has([data-ui-v2]) body .pl-list.rich .pl-name-col :is(.pl-name, .pl-meta):not(#v2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1280px) {
  :root:has([data-ui-v2]) body .pl-list.rich .pl-row:not(#v2) { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 8px; row-gap: 14px; }
  :root:has([data-ui-v2]) body .pl-list.rich .pl-ava:not(#v2) { grid-column: 1 / 2; grid-row: 1; }
  :root:has([data-ui-v2]) body .pl-list.rich .pl-name-col:not(#v2) { grid-column: 2 / -1; grid-row: 1; }
  :root:has([data-ui-v2]) body .pl-list.rich .pl-stat:not(#v2) { grid-row: 2; text-align: center; }
  :root:has([data-ui-v2]) body .pl-list.rich .pl-chev:not(#v2) { display: none; }
}

/* Billing (all four consoles): each row laid its own fields out, so a long email shifted that row's columns
   right of the rest. One shared grid now — the name column, then an equal column per field — so every
   row's Billing type, Source, Membership, Stripe and Tebra line up; under 1280 the fields go beneath the
   name. Billing rows carry .bill-row (components/provider/ProviderBillingPage.tsx). */
:root:has([data-ui-v2]) body .pl-row.bill-row:not(#v2) {
  display: grid; grid-template-columns: minmax(0, 1.4fr); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  column-gap: 16px; align-items: center;
}
:root:has([data-ui-v2]) body .pl-row.bill-row > *:not(#v2) { min-width: 0 !important; }
:root:has([data-ui-v2]) body .pl-row.bill-row :is(.pl-name, .pl-meta):not(#v2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1280px) {
  :root:has([data-ui-v2]) body .pl-row.bill-row:not(#v2) { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 10px; }
  :root:has([data-ui-v2]) body .pl-row.bill-row > :first-child:not(#v2) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  :root:has([data-ui-v2]) body .pl-row.bill-row:not(#v2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Schedule: the week grid had a 900px minimum, so at 1024 only Mon–Thu showed (834: Mon–Sat) and the
   rest hid behind a scroll the new UI draws no bar for. The day columns may now go down to 64px, so the
   whole week fits from 901px up (the phone keeps its day list, below 760). */
@media (max-width: 1400px) {
  :root:has([data-ui-v2]) body .pv-cal:not(#v2) { grid-template-columns: 52px repeat(7, minmax(64px, 1fr)); min-width: 560px; }
}

/* Admin rosters (Accounts, Providers, Patients): six columns with 200px minimums need ~1000px of page,
   which the rail leaves only above ~1400. Their own stacked layout (until now phone-only, under 860)
   applies up to 1400, so nothing is clipped off the right. Same rules as components/admin/styles.ts. */
@media (max-width: 1400px) {
  :root:has([data-ui-v2]) body .acc-shell .acc-head:not(#v2) { display: none; }
  /* Accounts: the row is the button. */
  :root:has([data-ui-v2]) body .acc-shell .acc-row.acc-row-btn:not(#v2) {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "account role" "account status" "caps caps" "atlas atlas" "joined joined"; row-gap: 10px;
  }
  :root:has([data-ui-v2]) body .acc-shell .acc-row.acc-row-btn .acc-account:not(#v2) { grid-area: account; min-width: 0; }
  :root:has([data-ui-v2]) body .acc-shell .acc-row.acc-row-btn .acc-caps:not(#v2) { grid-area: caps; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 10px; }
  :root:has([data-ui-v2]) body .acc-shell .acc-row.acc-row-btn .acc-atlas-badge:not(#v2) { grid-area: atlas; }
  :root:has([data-ui-v2]) body .acc-shell .acc-row.acc-row-btn .acc-joined:not(#v2) { grid-area: joined; }
  /* Providers and Patients: the row sits inside the button. */
  :root:has([data-ui-v2]) body .acc-shell .acc-row-btn > .acc-row:not(#v2) { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  :root:has([data-ui-v2]) body .acc-shell .acc-row-btn > .acc-row > .acc-account:not(#v2) { grid-column: 1; grid-row: 1; min-width: 0; }
  :root:has([data-ui-v2]) body .acc-shell .acc-row-btn > .acc-row .acc-chev:not(#v2) { grid-column: 2; grid-row: 1; }
  :root:has([data-ui-v2]) body .acc-shell .acc-row-btn > .acc-row > span:not(.acc-chev):not(#v2) { grid-column: 1 / -1; justify-self: start; font-size: 12.5px; }
  :root:has([data-ui-v2]) body .acc-shell .acc-role-title:not(#v2) { overflow-wrap: anywhere; }
}

/* Audit log: a fixed-layout table in percentages, so at 1024 each column was too narrow for its content and
   the timestamps ran into the Actor column. The table keeps a readable width and its card scrolls sideways. */
:root:has([data-ui-v2]) body :has(> .aud-table):not(#v2) { overflow-x: auto; }
:root:has([data-ui-v2]) body .aud-table:not(#v2) { min-width: 940px; }
@media (max-width: 1400px) {
  :root:has([data-ui-v2]) body .aud-table td.nowrap:not(#v2) { white-space: normal; }
}

/* ── §55 Nothing butts up against anything (Rob, 19 Oct). ──────────────────────────────────────────── */
/* Found by the spacing sweep (e2e/tools/spacing.ts: SHOTS_SPACING=1), every page, every role. The rule is
   the design's: cards 16px apart, rows 8px apart, chips 8px apart.
   1. Profile & brand: the Scheduling card sat flush under the profile card. §53 only spaced a card that
      follows another .pv-card / .pv-grid / .set-section; the profile is a .pv-profile, and each section
      injects a <style> between itself and the card before it. Any card after any block now gets 16px. */
:root:has([data-ui-v2]) body .pv-view > :not(style, script, template) ~ :is(.pv-card, .pv-grid, .pv-profile, .pl-list):not(#v2) { margin-top: 16px; }
:root:has([data-ui-v2]) body .pv-view > :not(style, script, template) ~ .set-section:not(#v2) { margin-top: 16px !important; }
/* 2. Lists (Patients, Billing, Outcomes): rounded rows stacked edge to edge, divided by a line that the
      rounding curled at both ends. Rows are the design's .av-gr now: their own soft fill and outline,
      8px apart, inside the list's card. */
:root:has([data-ui-v2]) body .pl-list:not(#v2) { display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 12px !important; }
:root:has([data-ui-v2]) body .pl-row:not(#v2) {
  background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 22px !important;
}
:root:has([data-ui-v2]) body .pl-list > .pl-row:first-child:not(#v2) { border-top-color: rgba(255, 255, 255, 0.12) !important; }
:root:has([data-ui-v2]) body a.pl-row:hover:not(#v2) { background: rgba(255, 255, 255, 0.11) !important; }
:root:has([data-ui-v2]) body .oc-table:not(#v2) { display: flex; flex-direction: column; gap: 8px; padding: 12px !important; }
:root:has([data-ui-v2]) body .oc-row:not(.head):not(#v2) {
  background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 22px !important;
}
:root:has([data-ui-v2]) body .oc-row.head:not(#v2) { border: 0 !important; background: none !important; padding-bottom: 4px !important; }
:root:has([data-ui-v2]) body a.oc-row:hover:not(#v2) { background: rgba(255, 255, 255, 0.11) !important; }
/* 3. The pillar apps' week calendar sat 4px under the stats above it. */
:root:has([data-ui-v2]) body .app .pillar-cal:not(#v2) { margin-top: 16px; }
/* 4. /events: the week's day chips were 4px apart. */
:root:has([data-ui-v2]) body .portal .day-strip:not(#v2) { gap: 8px; }
@media (max-width: 500px) { :root:has([data-ui-v2]) body .portal .day-strip:not(#v2) { gap: 6px; } }
/* 5. Settings forms: a field's label sat 4px under the input above it ("Where you see people" /
      "Street address"). Fields stacked in a group are 14px apart. Not side by side: in a
      .set-create-row grid that pushed every field after the first 14px below it (Scale, Credits). */
:root:has([data-ui-v2]) body :not(.set-create-row) > .set-create-field + .set-create-field:not(#v2) { margin-top: 14px; }