/* ═══════════════════════════════════════════════════════════════════════════
   ATLAS · THE NEW UI AS A SKIN  (Oct 2026 revamp)
   ═══════════════════════════════════════════════════════════════════════════
   Rob, 4 Oct: "You are changing the UI." Where every screen lives, how it
   opens, the nav and the behaviour stay exactly as they are; this sheet only
   restyles the existing markup to Chris's design system (the Claude Design
   package: PortalToday, HealthProvider, AdminOverview, the Chart and Queue
   screens, the check-in designs).

   EVERY RULE IS SCOPED UNDER :root:has([data-ui-v2]) — a hidden marker that
   components/v2/UiSkin.tsx renders only for an account with the new UI (switch on AND an
   internal channel), so for everybody else — the pilot — this file does
   nothing even if a browser has it cached. The scope also lifts each rule's
   specificity above the stylesheet it restyles, which is what lets a skin
   win without !important.

   The screen-by-screen map this follows: atlas-revamp/mapping/*.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root:has([data-ui-v2]) {
  /* Type: Inter Tight everywhere the old system used Jost or Cormorant, Doto
     for big figures. The wordmark keeps its tracked capitals. */
  --sans: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --v2-num: 'Doto', 'Courier New', monospace;
  --v2-mark: 'Cormorant Garamond', Georgia, serif;

  /* Ground and ink, from the design. */
  --v2-ground: #e8e4df;
  --v2-ink: #1b1410;
  --v2-line: rgba(27, 20, 16, 0.08);
  /* --sand-50 is the old card surface everywhere (cards, rows, inputs) AND
     the fill of sheets, drawers, dropdowns and sticky bars that float over
     content — so it must stay OPAQUE (a translucent value let the page show
     through the provider's schedule sheet). The design's milky white, solid. */
  --sand-50: #f7f4ef;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --sand-100: #e8e4df;
  --sand-200: #ddd7cf;
  --sand-300: rgba(27, 20, 16, 0.12);
  /* The greys, set for legibility on the new ground (#f7f4ef / #e8e4df):
     the legibility sweep (e2e/tools/contrast.ts) found secondary text in
     --ink-300 / --ink-400 at 2.2–2.9:1. Now ≥ 4.5:1 for 400 and 500, and
     --ink-300 (placeholders, parked rows) ≥ 3:1. */
  --ink-900: #1b1410;
  --ink-700: #3b332c;
  --ink-500: #5f574e;
  --ink-400: #6b6359;
  --ink-300: #857c72;
  --ink-200: #a69e94;
  --v2-ink-2: #5f574e;

  /* The pillar colours of the new mark. Therapy and Living changed. */
  --steel: #6e2a35;
  --steel-soft: rgba(110, 42, 53, 0.16);
  --steel-tint: #f6eef0;
  --sand-pillar: #4b5d6e;
  --sand-pillar-soft: rgba(75, 93, 110, 0.18);
  --sand-pillar-tint: #eef1f4;

  /* Surfaces. */
  --v2-card: #f7f4ef;
  --v2-card-edge: rgba(255, 255, 255, 0.95);
  --v2-card-shadow: 0 14px 30px -22px rgba(60, 40, 20, 0.4);
  --v2-glass: rgba(255, 255, 255, 0.14);
  --v2-glass-edge: rgba(255, 255, 255, 0.3);
  --v2-glass-in: inset 0 1px 0 rgba(255, 255, 255, 0.32);
  --v2-blur: blur(22px) saturate(140%);

  /* The photograph and its light accent, per pillar (set below). Default:
     the warm patient image. */
  --v2-photo: url(/atlas-v2/img/patient.jpg);
  --v2-ac: #ffad7a;            /* the accent ON the photograph */
  --v2-ac-d: #b9501f;          /* the accent on cream */
  --v2-hero-tint: rgba(185, 80, 31, 0.45);
  --v2-rail-tint: linear-gradient(180deg, rgba(40, 18, 10, 0.4) 0%, rgba(40, 18, 10, 0.7) 50%, rgba(24, 10, 6, 0.9) 100%);
}

/* Selected text. With nothing set, Chrome drew a selection on the glass as a
   solid white bar with the words gone, and it drops an inherited colour too
   (Rob, 16 Oct). So a highlighter: the pillar's pale accent under dark ink,
   which reads on the glass and on the light sheets alike. */
:root:has([data-ui-v2]) ::selection { background: var(--v2-ac, #a9d3bf); color: #1b1410; }
:root:has([data-ui-v2]) [data-pillar="health"], :root:has([data-ui-v2]) .pv-welcome[data-pillar="health"] {
  --v2-bar: #33473d;
  --v2-photo: url(/atlas-v2/img/health.jpg); --v2-ac: #a9d3bf; --v2-ac-d: #2c5a4a; --v2-hero-tint: rgba(44, 90, 74, 0.55);
  --v2-rail-tint: linear-gradient(180deg, rgba(14, 30, 24, 0.45) 0%, rgba(14, 30, 24, 0.7) 50%, rgba(10, 20, 16, 0.9) 100%);
}
:root:has([data-ui-v2]) [data-pillar="wellness"] {
  --v2-photo: url(/atlas-v2/img/patient.jpg); --v2-ac: #f0b48e; --v2-ac-d: #8c5238; --v2-hero-tint: rgba(140, 82, 56, 0.5);
}
:root:has([data-ui-v2]) [data-pillar="therapy"] {
  --v2-bar: #3a1d24;
  --v2-photo: url(/atlas-v2/img/admin.jpg); --v2-ac: #e3a6ae; --v2-ac-d: #6e2a35; --v2-hero-tint: rgba(110, 42, 53, 0.55);
  --v2-rail-tint: linear-gradient(180deg, rgba(36, 12, 18, 0.45) 0%, rgba(36, 12, 18, 0.72) 50%, rgba(20, 8, 12, 0.9) 100%);
  --accent: #6e2a35; --accent-soft: rgba(110, 42, 53, 0.16); --accent-wash: rgba(110, 42, 53, 0.12);
}
:root:has([data-ui-v2]) [data-pillar="living"] {
  --v2-bar: #2c3640;
  --v2-photo: url(/atlas-v2/img/health.jpg); --v2-ac: #b4c4d2; --v2-ac-d: #4b5d6e; --v2-hero-tint: rgba(75, 93, 110, 0.55);
  --v2-rail-tint: linear-gradient(180deg, rgba(16, 22, 30, 0.45) 0%, rgba(16, 22, 30, 0.72) 50%, rgba(10, 14, 20, 0.9) 100%);
  --accent: #4b5d6e; --accent-soft: rgba(75, 93, 110, 0.18); --accent-wash: rgba(75, 93, 110, 0.12);
}
/* The pillar-less rails (shared clinician screens, admin, auditor): the admin
   photograph and its violet accent, as in the AdminOverview design. */
:root:has([data-ui-v2]) [data-pillar="shared"] {
  --v2-bar: #2a2340;
  --v2-photo: url(/atlas-v2/img/admin.jpg); --v2-ac: #c9bdf0; --v2-ac-d: #3d3270; --v2-hero-tint: rgba(61, 50, 112, 0.5);
  --v2-rail-tint: linear-gradient(180deg, rgba(22, 18, 40, 0.45) 0%, rgba(22, 18, 40, 0.72) 50%, rgba(12, 10, 24, 0.9) 100%);
}

:root:has([data-ui-v2]) body {
  background: var(--v2-ground);
  color: var(--v2-ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
/* Titles that set a word in italic to stress it (Your *care* at a glance) read
   the design's way: upright, the stressed part softened. */
:root:has([data-ui-v2]) :is(h1, h2, .pv-title, .big) em { font-style: normal; opacity: 0.55; }

/* ── 2. The mark (Rob, 3 Oct: in place of the  ring, everywhere in the new
   UI). The ring split into four pillar quadrants, 82° each with a 4° gap —
   Health top right, Wellness bottom right, Therapy bottom left, Living top
   left — drawn behind the existing  so no markup changes. Rails, the patient booking receipt and the
   portal footer (Rob, 6 Oct: "full sweep for the crest"); the sign-in pages' .login-mark .ring has its
   own rule further down. ── */
:root:has([data-ui-v2]) :is(.pvs-ring, .rail-bar-ring, .bk-mark, .site-footer .atlas-mark, .empty-day .glyph) {
  position: relative; border: 0 !important; background: none !important;
  color: currentColor; font-family: var(--v2-mark); font-weight: 300; font-style: normal;
}
:root:has([data-ui-v2]) :is(.pvs-ring, .rail-bar-ring, .bk-mark, .site-footer .atlas-mark, .empty-day .glyph)::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(transparent 0 4deg, #2c5a4a 4deg 86deg, transparent 86deg 94deg, #8c5238 94deg 176deg,
    transparent 176deg 184deg, #6e2a35 184deg 266deg, transparent 266deg 274deg, #4b5d6e 274deg 356deg, transparent 356deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - clamp(2px, 13.6%, 3px)), #000 calc(100% - clamp(2px, 13.6%, 3px) + 0.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - clamp(2px, 13.6%, 3px)), #000 calc(100% - clamp(2px, 13.6%, 3px) + 0.5px));
}
/* The ring's width is a share of the circle (13.6% of the radius: 3px on the 44px marks), not a fixed 3px,
   which was far too heavy on the phone bar's small mark (Rob, 8 Oct). Never under 2px, so it still reads. */

/* ── 3. The rail — one skin for all four (portal, pillar, clinician, admin /
   auditor), because they share the .pvs markup. A floating rounded card on
   the pillar's photograph, white type, pill rows. ───────────────────────── */
:root:has([data-ui-v2]) .pvs,
:root:has([data-ui-v2]) .portal .side.pvs {
  top: 16px; left: 16px; width: 272px; flex-basis: 272px; height: calc(100dvh - 32px);
  padding: 24px 14px 14px; border-radius: 32px; color: #fff; z-index: 30;
  background-color: #1b1410;
  background-image: var(--v2-rail-tint), var(--v2-photo);
  background-size: cover; background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 24px 50px -30px rgba(10, 20, 16, 0.7);
}
:root:has([data-ui-v2]) .pvs-brand { padding: 0 8px 18px; gap: 12px; }
:root:has([data-ui-v2]) .pvs-ring { width: 44px; height: 44px; flex-basis: 44px; font-size: 24px; color: #fff; }
:root:has([data-ui-v2]) .pvs-w { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.32em; color: #fff; }
:root:has([data-ui-v2]) .pvs-s { font-size: 10px; letter-spacing: 0.3em; font-weight: 500; color: var(--v2-ac); }
:root:has([data-ui-v2]) .pvs-lbl,
:root:has([data-ui-v2]) .portal .side.pvs .pvs-lbl {
  font-size: 11px; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.5); padding: 20px 14px 4px;
}
:root:has([data-ui-v2]) .pvs-nav { gap: 2px; }
:root:has([data-ui-v2]) .pvs-item,
:root:has([data-ui-v2]) .portal .side.pvs .pvs-item {
  min-height: 42px; padding: 0 14px; gap: 12px; border-radius: 999px; line-height: 1.3;
  font-family: var(--sans); font-size: 14.5px; font-weight: 400; color: rgba(255, 255, 255, 0.86);
  border: 1px solid transparent; border-left: 1px solid transparent;
}
:root:has([data-ui-v2]) .pvs-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
:root:has([data-ui-v2]) .pvs-item.active {
  background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.3); color: #fff;
}
:root:has([data-ui-v2]) .pvs-ni { color: currentColor; opacity: 0.8; font-size: 15px; }
:root:has([data-ui-v2]) .pvs-item.active .pvs-ni { color: var(--v2-ac); opacity: 1; }
:root:has([data-ui-v2]) .pvs-item.parked, :root:has([data-ui-v2]) .pvs-item.unheld { color: rgba(255, 255, 255, 0.45); }
:root:has([data-ui-v2]) .pvs-item.parked:hover { background: none; }
:root:has([data-ui-v2]) .pvs-item.unheld:hover { color: rgba(255, 255, 255, 0.75); }
:root:has([data-ui-v2]) .pvs-soon {
  margin-left: auto; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.6); background: none;
}
:root:has([data-ui-v2]) .pvs-spill {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: grid; place-items: center; background: var(--v2-ac); color: #12261e; font-size: 12px; font-weight: 600; border: 0;
}
/* The identity block, as the design's glass "who" card at the foot. */
:root:has([data-ui-v2]) .pvs-me {
  margin: auto 0 0; padding: 14px; border-radius: 26px; gap: 12px; border: 0;
  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]) .pvs-av {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: var(--v2-ac); color: #12261e;
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; border: 0;
}
:root:has([data-ui-v2]) .pvs-nm { font-family: var(--sans); font-size: 15px; color: #fff; }
:root:has([data-ui-v2]) .pvs-rl { font-size: 12.5px; color: rgba(255, 255, 255, 0.7); }
:root:has([data-ui-v2]) .pvs-signout {
  margin: 10px 2px 0; align-self: flex-start; border-radius: 999px; color: #fff; font-family: var(--sans);
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28);
}
:root:has([data-ui-v2]) .pvs-signout:hover { background: rgba(255, 255, 255, 0.18); color: #fff; border-color: rgba(255, 255, 255, 0.4); }

/* ── 4. Shells: the page column clears the floating rail, on the ground. ── */
:root:has([data-ui-v2]) .pvs-shell { background: var(--v2-ground); position: relative; }
:root:has([data-ui-v2]) .pvs-main { margin-left: 288px; background: transparent; }
:root:has([data-ui-v2]) .portal { --portal-rail: 288px; background: var(--v2-ground); }
:root:has([data-ui-v2]) .portal main.main { background: transparent; }

/* ── 5. The page header as the design's photographic hero ─────────────────
   Whatever a page uses as its header (.pv-top on the consoles, .greet on the
   pillar apps) takes the photograph, full-bleed to the top and right edges
   and running under the floating rail, with white type. Its height is the
   header's own, so nothing can fall off the end of the photograph. */
:root:has([data-ui-v2]) :is(.pv-top, .app .screen > .greet, .app .screen > .hs-storebar) {
  position: relative; isolation: isolate; color: #fff;
  /* !important only because _app-desktop.css pins .greet's side padding with
     it; the photograph has to run under the rail, so the text is pushed back
     out by the rail's width. */
  margin: 0 0 8px -288px; padding: 44px 48px 48px 332px !important; border: 0;
  background-color: #1b1410;
  background-image: linear-gradient(180deg, var(--v2-hero-tint) 0%, rgba(14, 10, 8, 0.15) 35%, rgba(14, 10, 8, 0.4) 65%, rgba(14, 10, 8, 0.82) 100%), var(--v2-photo);
  background-size: cover; background-position: center 40%;
}
:root:has([data-ui-v2]) :is(.pv-top, .app .screen > .greet, .app .screen > .hs-storebar) :is(h1, h2, .pv-title, .big) {
  color: #fff; font-family: var(--sans); font-weight: 400; letter-spacing: -0.045em; line-height: 0.98;
  font-size: clamp(40px, 4.6vw, 64px); margin: 0;
}
:root:has([data-ui-v2]) :is(.pv-top, .app .screen > .greet, .app .screen > .hs-storebar) :is(.kicker, .pv-crumb) {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px; margin-bottom: 18px; border-radius: 999px;
  font-size: 12.5px; letter-spacing: 0; text-transform: none; color: #fff;
  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]) :is(.pv-top, .app .screen > .greet, .app .screen > .hs-storebar) :is(.sub, .pv-sub, p) { color: rgba(255, 255, 255, 0.85); font-size: 15px; }
:root:has([data-ui-v2]) .pv-top a { color: #fff; }

/* ── 6. Cards, figures, rows, pills, buttons (console + pillar apps) ───── */
:root:has([data-ui-v2]) :is(.pv-card, .pv-kpi, .app .stat-box, .app .card) {
  background: var(--v2-card); border: 1px solid var(--v2-card-edge); border-radius: 28px;
  box-shadow: var(--v2-card-shadow);
}
:root:has([data-ui-v2]) .pv-card { padding: 26px 28px; }
:root:has([data-ui-v2]) .pv-card-h { font-family: var(--sans); font-size: 22px; font-weight: 400; letter-spacing: -0.025em; color: var(--v2-ink); }
:root:has([data-ui-v2]) .pv-kpi .lbl { font-size: 12px; letter-spacing: 0.12em; color: var(--v2-ink-2); margin-bottom: 6px; }
/* (The pixel figures stand ~5px above their own line; the label's margin keeps them off it.) */
:root:has([data-ui-v2]) :is(.pv-kpi .val, .app .stat-box b) { font-family: var(--v2-num); font-weight: 800; letter-spacing: -0.02em; font-size: 46px; line-height: 1; }
:root:has([data-ui-v2]) .pv-row { border-bottom-color: var(--v2-line); }
:root:has([data-ui-v2]) .pv-row .ti { font-family: var(--sans); letter-spacing: -0.01em; }
:root:has([data-ui-v2]) .pv-view { padding: 32px 48px 72px; }
:root:has([data-ui-v2]) .pv-btn {
  border-radius: 999px; height: 40px; padding: 0 18px; font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
}
:root:has([data-ui-v2]) .pv-btn.filled { background: var(--v2-ink); border-color: var(--v2-ink); color: #fff; }
:root:has([data-ui-v2]) .pv-pill { border-radius: 999px; font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.02em; text-transform: none; padding: 5px 11px; }

/* ── 7. Small screens: the rail is a drawer, the strip sits on the photo ── */
@media (max-width: 900px) {
  :root:has([data-ui-v2]) .pvs-main { margin-left: 0; }
  :root:has([data-ui-v2]) .pvs,
  :root:has([data-ui-v2]) .portal .side.pvs { top: 8px; left: 8px; height: calc(100dvh - 16px); width: min(300px, calc(100vw - 48px)); }
  :root:has([data-ui-v2]) :is(.pv-top, .app .screen > .greet, .app .screen > .hs-storebar) { margin-left: 0; padding: 40px 20px 32px !important; }
  :root:has([data-ui-v2]) .pv-view { padding: 24px 16px 56px; }
  /* Opaque on purpose (studio.css: iOS Safari colours the status bar from
     this fixed bar's background). A solid dark shade of the pillar's
     photograph, so the bar, the status bar and the hero read as one. */
  :root:has([data-ui-v2]) .rail-bar { background: var(--v2-bar, #2a1a12); border: 0; color: #fff; box-shadow: none; }
  :root:has([data-ui-v2]) .rail-bar :is(.rail-bar-brand, .rail-bar-brand *) { color: #fff; }
  /* Three lines, no circle (Rob, 8 Oct). */
  :root:has([data-ui-v2]) .rail-burger {
    width: 44px; height: 44px; color: #fff; background: none; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  :root:has([data-ui-v2]) .rail-burger span { background: #fff; }
  /* THE DRAWER (Rob, 8 Oct: it opened "off the edge", darkened everything, menu included, and couldn't be
     used). The rail card's z-index of 30 put it under the drawer's own scrim (70), so the scrim took every
     tap; and its top: 8px beat the drawer's own placement at the scroll position (studio.css,
     --rail-top / --nav-top), so on a scrolled page it opened above the screen. Over the scrim, where the
     reader is; a floating card, so it ends 8px above the bottom of the screen instead of running on. */
  :root:has([data-ui-v2]) body.rail-shown .pvs:not(.side),
  :root:has([data-ui-v2]) body.nav-shown .portal .side.pvs {
    z-index: 80; padding-bottom: 14px; overscroll-behavior: contain;
  }
  :root:has([data-ui-v2]) body.rail-shown .pvs:not(.side) { top: calc(var(--rail-top, 0px) + 8px); height: calc(var(--rail-h, 100dvh) - 16px); }
  :root:has([data-ui-v2]) body.nav-shown .portal .side.pvs { top: calc(var(--nav-top, 0px) + 8px); height: calc(var(--nav-h, 100dvh) - 16px); }
  /* The page is locked where it was while the drawer is open (Rob, 8 Oct: "stop scrolling until the menu
     is closed", as the old UI did). The lock is studio.css's — overflow hidden on html and body — but in the
     pillar apps html and body are 100% tall (pillar-app.css), so hiding their overflow cut the page to one
     screen and the browser jumped to the top, under the drawer it had just placed at the reader's scroll
     position. While the drawer is shown they take the page's own height, so the lock keeps the place. */
  :root:has([data-ui-v2]):has(body.rail-shown),
  :root:has([data-ui-v2]) body.rail-shown { height: auto; }
  :root:has([data-ui-v2]) .rail-scrim { touch-action: none; overscroll-behavior: none; }
  /* The top bar steps aside while the drawer is open: dimmed under the scrim it read as a dark band along
     the top beside the drawer (Rob, 8 Oct). The drawer has the brand; tapping outside closes it. */
  :root:has([data-ui-v2]) :is(.rail-bar, .mobile-topbar) { transition: opacity 0.2s ease; }
  :root:has([data-ui-v2]) body.rail-shown .rail-bar,
  :root:has([data-ui-v2]) body.nav-shown .mobile-topbar { opacity: 0; pointer-events: none; }
  :root:has([data-ui-v2]) .rail-bar-brand { color: #fff; }
  /* The portal's bar (PortalBar: the hub, its sub-pages, the Arc, check-in) is the pillar bar: the same height,
     shade and contents, menu on the left (Rob, 8 Oct: "make headers on brand"). The page starts below it. */
  :root:has([data-ui-v2]) .mobile-topbar.portal-bar {
    justify-content: flex-start; gap: 12px; box-sizing: border-box;
    height: calc(52px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 14px 0 !important;
    background: var(--v2-bar, #2a1a12) !important; border: 0 !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  :root:has([data-ui-v2]) .portal .main { padding-top: calc(52px + env(safe-area-inset-top, 0px)); }
}

/* ── 8. The intake and the questionnaires (IntakeScreen, ScreenerScreen) ──
   Chris's "Atlas Health Assessment" and "PHQ-9 · depression check-in" (3 Oct)
   applied to the SAME modal they open in today: a card over the page with
   the rail still there, a bottom sheet on a phone. The card carries the
   photograph — green for the intake, dusk for the questionnaires, as in the
   designs — and every control becomes the design's glass. Nothing about the
   steps, the order or the buttons changes. */
:root:has([data-ui-v2]) .app .pillar-modal-scrim { background: rgba(14, 10, 8, 0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
:root:has([data-ui-v2]) .app .pillar-modal.ax-modal {
  --ax-photo: url(/atlas-v2/img/dusk.jpg);
  /* The smoked glass the app's dark cards use, held over the whole scene (Rob, 6 Oct: the questions were
     hard to read on the bright middle of the scene). It was 30% there; nowhere is lighter than ~58% now. */
  --ax-tint: linear-gradient(180deg, rgba(14, 12, 16, 0.66) 0%, rgba(14, 12, 16, 0.58) 34%, rgba(14, 12, 16, 0.64) 62%, rgba(10, 8, 12, 0.9) 100%);
  color: #fff; border-radius: 32px; max-width: 640px;
  background-color: #12100f; background-image: var(--ax-tint), var(--ax-photo); background-size: cover; background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.75);
}
:root:has([data-ui-v2]) .app .pillar-modal.ax-modal[aria-label="Health intake"],
:root:has([data-ui-v2]) .app .pillar-modal.ax-modal.hs-intake:not([aria-label*="questionnaire"]) {
  --ax-photo: url(/atlas-v2/img/green.jpg);
  --ax-tint: linear-gradient(180deg, rgba(20, 34, 28, 0.66) 0%, rgba(20, 34, 28, 0.58) 34%, rgba(14, 22, 18, 0.66) 62%, rgba(10, 16, 12, 0.9) 100%);
  max-width: 760px;
}
:root:has([data-ui-v2]) .app .ax-modal .pillar-modal-head { border-bottom: 0; padding: 24px 28px 8px; }
:root:has([data-ui-v2]) .app .ax-modal .pillar-modal-head .kicker { color: rgba(255, 255, 255, 0.86); font-size: 12px; letter-spacing: 0.08em; }
:root:has([data-ui-v2]) .app .ax-modal .pillar-modal-title { color: #fff; font-family: var(--sans); font-weight: 400; letter-spacing: -0.03em; font-size: 22px; }
:root:has([data-ui-v2]) .app .ax-modal .pillar-modal-title em { font-style: normal; opacity: 0.6; color: inherit; }
:root:has([data-ui-v2]) .app .ax-modal .pillar-modal-x {
  width: 44px; height: 44px; border-radius: 50%; color: #fff; margin: -4px -6px 0 0;
  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]) .app .ax-modal .pillar-modal-body { padding: 12px 28px 24px; scrollbar-color: rgba(255,255,255,.3) transparent; }
:root:has([data-ui-v2]) .app .ax-modal .ax-rail { gap: 4px; margin-bottom: 26px; }
:root:has([data-ui-v2]) .app .ax-modal .ax-tick { height: 4px; background: rgba(255, 255, 255, 0.22); }
:root:has([data-ui-v2]) .app .ax-modal .ax-tick.done { background: #fff; }
:root:has([data-ui-v2]) .app .ax-modal .ax-tick.on { background: rgba(255, 255, 255, 0.7); }
:root:has([data-ui-v2]) .app .ax-modal .ax-kicker { color: rgba(255, 255, 255, 0.88); font-size: 13px; letter-spacing: 0; text-transform: none; }
:root:has([data-ui-v2]) .app .ax-modal .ax-q { color: #fff; font-family: var(--sans); font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; font-size: clamp(26px, 3vw, 32px); }
:root:has([data-ui-v2]) .app .ax-modal .ax-sub { color: rgba(255, 255, 255, 0.92); font-family: var(--sans); font-style: normal; font-weight: 400; font-size: 15px; }
:root:has([data-ui-v2]) .app .ax-modal :is(.ax-note-inline, .ax-scale-ends, .ax-counter, .ax-step, .ax-lab-name small) { color: rgba(255, 255, 255, 0.8); }
/* The question itself reads at body size, near white — it was caption-sized grey (Rob, 6 Oct). */
:root:has([data-ui-v2]) .app .ax-modal .ax-label { color: rgba(255, 255, 255, 0.94); font-size: 15px; line-height: 1.45; margin: 0 0 10px; }
:root:has([data-ui-v2]) .app .ax-modal :is(.ax-lab-name, .ax-scale-head b) { color: #fff; }
/* Answers: the design's glass pills; chosen = solid white (questionnaire) or
   Health green (intake). */
:root:has([data-ui-v2]) .app .ax-modal .ax-row {
  min-height: 58px; padding: 12px 20px; border-radius: 999px; color: #fff; font-family: var(--sans); font-size: 16px;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
}
:root:has([data-ui-v2]) .app .ax-modal .ax-row:hover { background: rgba(255, 255, 255, 0.2); }
:root:has([data-ui-v2]) .app .ax-modal .ax-row.on { background: #fff; color: #1b1410; border-color: #fff; }
:root:has([data-ui-v2]) .app .ax-modal .ax-dot { width: 22px; height: 22px; border: 1.5px solid rgba(255, 255, 255, 0.55); order: 2; margin-left: auto; }
:root:has([data-ui-v2]) .app .ax-modal .ax-row.on .ax-dot { border: 6px solid #fff; background: #1b1410; box-shadow: 0 0 0 1px #1b1410; }
:root:has([data-ui-v2]) .app .ax-modal.hs-intake:not([aria-label*="questionnaire"]) .ax-row.on,
:root:has([data-ui-v2]) .app .ax-modal:is(.hs-intake:not([aria-label*="questionnaire"])) :is(.ax-chip.on, .ax-card.on, .ax-ticks button.on) {
  background: rgba(44, 90, 74, 0.72); color: #fff; border-color: #a9d3bf; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
:root:has([data-ui-v2]) .app .ax-modal.hs-intake:not([aria-label*="questionnaire"]) .ax-row.on .ax-dot { background: #a9d3bf; border-color: rgba(44, 90, 74, 0.9); box-shadow: 0 0 0 1px #a9d3bf; }
:root:has([data-ui-v2]) .app .ax-modal .ax-rows.inline .ax-row { justify-content: center; padding: 12px 22px; }
:root:has([data-ui-v2]) .app .ax-modal .ax-rows.inline .ax-dot { display: none; }
:root:has([data-ui-v2]) .app .ax-modal :is(.ax-chip, .ax-card, .ax-ticks button, .ax-input, .ax-lab-input) {
  color: #fff; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
}
:root:has([data-ui-v2]) .app .ax-modal .ax-chip { padding: 9px 16px; border-radius: 999px; font-size: 14px; }
:root:has([data-ui-v2]) .app .ax-modal .ax-card { border-radius: 24px; padding: 16px; }
:root:has([data-ui-v2]) .app .ax-modal .ax-card b { color: #fff; font-family: var(--sans); font-weight: 500; font-size: 15px; }
:root:has([data-ui-v2]) .app .ax-modal .ax-card small { color: rgba(255, 255, 255, 0.72); }
:root:has([data-ui-v2]) .app .ax-modal .ax-card-glyph, :root:has([data-ui-v2]) .app .ax-modal .ax-card-tick { color: #a9d3bf; font-family: var(--sans); }
:root:has([data-ui-v2]) .app .ax-modal .ax-ticks button { border-radius: 12px; height: 44px; padding: 0; }
:root:has([data-ui-v2]) .app .ax-modal .ax-ticks button.lit { background: rgba(44, 90, 74, 0.4); color: #fff; border-color: rgba(255,255,255,.28); }
:root:has([data-ui-v2]) .app .ax-modal .ax-scale { border-top-color: rgba(255, 255, 255, 0.16); }
:root:has([data-ui-v2]) .app .ax-modal .ax-scale-v { color: #fff; font-family: var(--v2-num); font-weight: 800; }
:root:has([data-ui-v2]) .app .ax-modal .ax-input { border-radius: 26px; padding: 13px 20px; font-size: 16px; color-scheme: dark; }
:root:has([data-ui-v2]) .app .ax-modal .ax-input::placeholder { color: rgba(255, 255, 255, 0.55); }
:root:has([data-ui-v2]) .app .ax-modal :is(.ax-input, .ax-lab-input):focus { border-color: #a9d3bf !important; box-shadow: none; outline: 2px solid #a9d3bf; outline-offset: 1px; }
:root:has([data-ui-v2]) .app .ax-modal .ax-lab-input { border-radius: 14px; font-size: 16px; }
:root:has([data-ui-v2]) .app .ax-modal .ax-lab-tag.is-ok { color: #a9d3bf; }
:root:has([data-ui-v2]) .app .ax-modal .ax-lab-tag:is(.is-low, .is-high) { color: #ffc9b8; }
:root:has([data-ui-v2]) .app .ax-modal :is(.ax-note, .ax-status) {
  color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 22px;
}
:root:has([data-ui-v2]) .app .ax-modal .ax-status b { color: #fff; }
:root:has([data-ui-v2]) .app .ax-modal .ax-status .ax-status-note { color: rgba(255, 255, 255, 0.72); }
/* The item-9 crisis note: the design's warm red glass. */
:root:has([data-ui-v2]) .app .ax-modal .ax-status.ax-crisis { background: rgba(166, 61, 40, 0.3); border-color: rgba(255, 190, 170, 0.55); }
:root:has([data-ui-v2]) .app .ax-modal .ax-group { border-top-color: rgba(255, 255, 255, 0.16); }
:root:has([data-ui-v2]) .app .ax-modal .ax-group-head span { color: rgba(255, 255, 255, 0.72); }
:root:has([data-ui-v2]) .app .ax-modal :is(.ax-line-k) { color: rgba(255, 255, 255, 0.72); }
:root:has([data-ui-v2]) .app .ax-modal :is(.ax-line-v) { color: #fff; }
:root:has([data-ui-v2]) .app .ax-modal .ax-edit { color: #a9d3bf; letter-spacing: 0.04em; text-transform: none; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
:root:has([data-ui-v2]) .app .ax-modal .ax-error { color: #ffc9b8; }
:root:has([data-ui-v2]) .app .ax-modal .ax-sendnote { color: rgba(255, 255, 255, 0.72); }
:root:has([data-ui-v2]) .app .ax-modal .ax-via-opt { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.1); }
:root:has([data-ui-v2]) .app .ax-modal .ax-via-opt.on { background: #fff; color: #1b1410; }
/* The foot: the design's big white pill. */
:root:has([data-ui-v2]) .app .ax-modal .ax-foot { background: transparent; border-top: 0; padding: 12px 28px calc(22px + env(safe-area-inset-bottom, 0px)); }
:root:has([data-ui-v2]) .app .ax-modal .ax-continue {
  height: 58px; padding: 0; border-radius: 999px; background: #fff; color: #1b1410;
  font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
}
:root:has([data-ui-v2]) .app .ax-modal .ax-continue:disabled { opacity: 0.5; }
:root:has([data-ui-v2]) .app .ax-modal :is(.ax-back, .ax-skip) { color: rgba(255, 255, 255, 0.8); letter-spacing: 0.02em; text-transform: none; font-size: 13.5px; }
@media (max-width: 899px) {
  :root:has([data-ui-v2]) .app .pillar-modal.ax-modal { border-radius: 28px 28px 0 0; max-height: 92dvh; }
}

/* ── 9. "Before your visit" (components/Notice.tsx) — the Check-ins hub's
   featured card, in the place the notice already lives: top right on every
   Health screen, collapsing to the "!" dot exactly as today. A photograph
   card with white type; each item a white pill that opens the same route. */
:root:has([data-ui-v2]) .pv-toast-card {
  color: #fff; border-radius: 32px; padding: 22px 24px 22px; border: 1px solid rgba(255, 255, 255, 0.22);
  background-color: #1b1410;
  background-image: linear-gradient(180deg, rgba(14, 12, 16, 0.35) 0%, rgba(14, 12, 16, 0.55) 55%, rgba(10, 8, 12, 0.85) 100%), url(/atlas-v2/img/dusk.jpg);
  background-size: cover; background-position: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
:root:has([data-ui-v2]) .pv-toast.tone-ask .pv-toast-card { background-color: #1b1410; border-color: rgba(255, 255, 255, 0.22); }
:root:has([data-ui-v2]) .pv-toast-k, :root:has([data-ui-v2]) .pv-toast.tone-ask .pv-toast-k {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; color: #fff;
  font-size: 12px; letter-spacing: 0.02em; text-transform: none;
  background: var(--v2-glass); border: 1px solid var(--v2-glass-edge); box-shadow: var(--v2-glass-in);
}
:root:has([data-ui-v2]) .pv-toast p { color: rgba(255, 255, 255, 0.9); font-family: var(--sans); font-size: 15px; line-height: 1.45; margin-top: 12px; }
:root:has([data-ui-v2]) .pv-toast ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
:root:has([data-ui-v2]) .pv-toast li { margin: 0; }
:root:has([data-ui-v2]) .pv-toast li a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; padding: 11px 20px;
  border-radius: 22px; background: #fff; color: #1b1410; text-decoration: none; font-size: 14px; font-weight: 500;
  line-height: 1.3; box-sizing: border-box;
  /* Padding and a tight leading, so a label that wraps (Rob, 6 Oct: "Say
     whether you see people in person, by telehealth, or both") is two neat
     lines inside the pill, not two loose ones touching its edges. 22px is a
     full pill at one line and a rounded card at two. */
}
:root:has([data-ui-v2]) .pv-toast li a::after { content: "→"; font-weight: 400; }
:root:has([data-ui-v2]) .pv-toast li a:hover { color: #1b1410; background: rgba(255, 255, 255, 0.88); }
:root:has([data-ui-v2]) .pv-toast-dot {
  color: #fff; 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]) .pv-toast-dot:hover { color: #fff; }
:root:has([data-ui-v2]) .pv-toast[data-open="0"] { --dot-bg: var(--v2-ac-d, #2c5a4a); }

/* Header furniture on the photograph: the "‹ Back" links, the store's cart,
   and the full-bleed profile header (pf-hero), which carries an inline accent
   colour today — the photograph goes over it. */
:root:has([data-ui-v2]) .app .screen > :is(.greet, .hs-storebar) .back { color: rgba(255, 255, 255, 0.85); }
:root:has([data-ui-v2]) .app .hs-storebar .cart-btn {
  color: #fff; border-radius: 999px; 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]) .app .hs-storebar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
:root:has([data-ui-v2]) .app .pf-hero {
  background-image: linear-gradient(180deg, var(--v2-hero-tint) 0%, rgba(14, 10, 8, 0.2) 40%, rgba(14, 10, 8, 0.8) 100%), var(--v2-photo) !important;
  background-size: cover !important; background-position: center !important; color: #fff;
}
:root:has([data-ui-v2]) .app .pf-hero .tex { display: none; }

/* ── 10. The member chart (components/chart/styles.ts) — the Chart* designs.
   The back link, identity, facts, Message button and the tab row sit on the
   photograph; the tab row becomes the design's glass pill bar. The tabs stay
   real links (each writes its own record-access entry). */
:root:has([data-ui-v2]) .pd-shell { position: relative; isolation: isolate; background: transparent; padding: 40px 48px 96px; }
:root:has([data-ui-v2]) .pd-shell::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: -288px; right: 0; height: var(--pd-band, 262px);
  background-color: #1b1410;
  background-image: linear-gradient(180deg, var(--v2-hero-tint) 0%, rgba(14, 10, 8, 0.15) 35%, rgba(14, 10, 8, 0.4) 65%, rgba(14, 10, 8, 0.82) 100%), var(--v2-photo);
  background-size: cover; background-position: center 40%;
}
:root:has([data-ui-v2]) .pd-shell:has(.pd-access-note) { --pd-band: 308px; }
:root:has([data-ui-v2]) .pd-wrap { max-width: none; }
:root:has([data-ui-v2]) .pd-back { color: rgba(255, 255, 255, 0.85); font-size: 13px; letter-spacing: 0; text-transform: none; margin-bottom: 18px; }
:root:has([data-ui-v2]) .pd-back:hover { color: #fff; }
:root:has([data-ui-v2]) .pd-access-note { background: var(--v2-glass); color: #fff; border: 1px solid var(--v2-glass-edge); border-radius: 18px; }
:root:has([data-ui-v2]) .pd-head { margin-bottom: 24px; }
:root:has([data-ui-v2]) .pd-ava {
  color: #fff; background: var(--v2-glass); border: 1px solid var(--v2-glass-edge); box-shadow: var(--v2-glass-in);
  font-family: var(--sans); font-weight: 400; -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur);
}
:root:has([data-ui-v2]) .pd-name { color: #fff; font-family: var(--sans); font-weight: 400; letter-spacing: -0.045em; line-height: 1; font-size: clamp(36px, 4vw, 56px); }
:root:has([data-ui-v2]) .pd-name em { opacity: 0.55; font-style: normal; color: inherit; }
:root:has([data-ui-v2]) .pd-email { color: rgba(255, 255, 255, 0.8); }
:root:has([data-ui-v2]) .pd-fact dt { color: rgba(255, 255, 255, 0.6); }
:root:has([data-ui-v2]) .pd-fact dd { color: #fff; font-family: var(--sans); }
:root:has([data-ui-v2]) .pd-msg-btn {
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px;
  background: #fff; color: #1b1410; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
}
:root:has([data-ui-v2]) .pd-msg-btn:hover { color: #1b1410; background: rgba(255, 255, 255, 0.9); }
:root:has([data-ui-v2]) .pd-tabs {
  border-radius: 999px; padding: 5px; gap: 4px; border: 1px solid rgba(255, 255, 255, 0.3); margin-bottom: 44px;
  background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur); overflow-x: auto;
}
:root:has([data-ui-v2]) .pd-tab {
  flex: 1 0 auto; text-align: center; padding: 11px 18px; border-radius: 999px; border: 0; margin: 0;
  color: rgba(255, 255, 255, 0.88); font-size: 14px; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
:root:has([data-ui-v2]) .pd-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
:root:has([data-ui-v2]) .pd-tab.is-active { color: #12261e; background: var(--v2-ac); border: 0; font-weight: 500; }
:root:has([data-ui-v2]) .pd-tab-bubble { background: #b3402f; color: #fff; }
:root:has([data-ui-v2]) .pd-section-head { font-family: var(--sans); }
:root:has([data-ui-v2]) .pd-card { border-radius: 22px; }
@media (max-width: 900px) {
  :root:has([data-ui-v2]) .pd-shell { padding: 28px 16px 64px; }
  :root:has([data-ui-v2]) .pd-shell::before { left: 0; height: var(--pd-band-m, 420px); }
}

/* Console card headings: the design's sentence-case 22px, not the old
   tracked capitals. */
:root:has([data-ui-v2]) .pv-card-h { text-transform: none; letter-spacing: -0.025em; font-size: 22px; font-weight: 400; color: var(--v2-ink); }
:root:has([data-ui-v2]) .pv-card-h em { color: inherit; opacity: 0.55; }

/* ── 11. Page heroes for the screens with their own header family ────────
   accounts / clinicians / patients (acc-), content (cnt-), contribute (ct-),
   outcomes (oc-): their eyebrow + title + lede are grouped by HeroBox
   (display: contents on the current UI). Audit log, auditor and break-glass
   already have a header element (aud-head-row, aud-head, bgx-head). The
   shells lose their old centring so the photograph can run edge to edge. */
:root:has([data-ui-v2]) :is(.acc-shell, .cnt-shell, .ct-shell, .oc-shell, .aud-shell, .bgx-shell) { padding: 0 0 72px; background: transparent; }
:root:has([data-ui-v2]) :is(.acc-wrap, .cnt-wrap, .ct-wrap, .oc-wrap, .aud-wrap, .bgx-wrap) { max-width: none; margin: 0; padding: 0 48px; }
:root:has([data-ui-v2]) :is(.v2-hero, .aud-head-row, .aud-head, .bgx-head) {
  display: block !important; position: relative; isolation: isolate; color: #fff;
  margin: 0 -48px 32px -336px; padding: 44px 48px 44px 336px;
  background-color: #1b1410;
  background-image: linear-gradient(180deg, var(--v2-hero-tint) 0%, rgba(14, 10, 8, 0.15) 35%, rgba(14, 10, 8, 0.4) 65%, rgba(14, 10, 8, 0.82) 100%), var(--v2-photo);
  background-size: cover; background-position: center 40%;
}
:root:has([data-ui-v2]) .aud-head-row { display: flex !important; align-items: flex-end; justify-content: space-between; gap: 24px; }
:root:has([data-ui-v2]) :is(.v2-hero, .aud-head-row, .aud-head, .bgx-head) :is(h1, .acc-title, .cnt-title, .ct-title, .oc-title, .aud-title, .bgx-title) {
  color: #fff; font-family: var(--sans); font-weight: 400; font-style: normal; letter-spacing: -0.045em; line-height: 0.98;
  font-size: clamp(40px, 4.6vw, 64px); margin: 0;
}
:root:has([data-ui-v2]) :is(.v2-hero, .aud-head-row, .aud-head, .bgx-head) h1 em { color: inherit; font-style: normal; opacity: 0.55; }
:root:has([data-ui-v2]) :is(.v2-hero, .aud-head-row, .aud-head, .bgx-head) :is([class$="-eyebrow"], [class$="-kicker"]) {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px; margin: 0 0 18px; border-radius: 999px;
  font-family: var(--sans); font-size: 12.5px; letter-spacing: 0; text-transform: none; color: #fff;
  background: var(--v2-glass); border: 1px solid var(--v2-glass-edge); box-shadow: var(--v2-glass-in);
}
:root:has([data-ui-v2]) :is(.v2-hero, .aud-head-row, .aud-head, .bgx-head) :is([class$="-lede"], p) {
  color: rgba(255, 255, 255, 0.85); font-family: var(--sans); font-style: normal; font-size: 15px; line-height: 1.55; max-width: 720px; margin-top: 14px;
}
:root:has([data-ui-v2]) .oc-top-row { display: flex; align-items: center; justify-content: space-between; }
:root:has([data-ui-v2]) .oc-export-btn { color: #1b1410; background: #fff; border-radius: 999px; padding: 9px 16px; border: 0; }
@media (max-width: 900px) {
  :root:has([data-ui-v2]) :is(.acc-wrap, .cnt-wrap, .ct-wrap, .oc-wrap, .aud-wrap, .bgx-wrap) { padding: 0 16px; }
  :root:has([data-ui-v2]) :is(.v2-hero, .aud-head-row, .aud-head, .bgx-head) { margin: 0 -16px 24px; padding: 84px 20px 32px; }
}

/* ── 12. Portal home, Today (/portal#today) — the PortalToday design ─────
   The greeting and the first four cards (how are you feeling, make a
   request, today's sessions, to do) on the photograph as glass; today's
   module full width on the ground below. Same elements in the same DOM
   order; the grid only PLACES them (the left column and the rail become
   display: contents so their cards can take the design's rows). The
   photograph is the grid's own ::before, spanning the first two rows and
   reaching up behind the greeting, so it always ends where the cards do. */
:root:has([data-ui-v2]) .portal main.main { overflow-x: clip; }
:root:has([data-ui-v2]) .today-portal { position: relative; isolation: isolate; color: #fff; }
:root:has([data-ui-v2]) .today-portal > h1 { color: #fff; font-family: var(--sans); font-weight: 400; letter-spacing: -0.045em; line-height: 0.98; font-size: clamp(44px, 4.6vw, 68px); }
:root:has([data-ui-v2]) .today-portal > h1 :is(em, span) { font-style: normal; color: inherit; }
:root:has([data-ui-v2]) .today-portal > h1 span { opacity: 0.55; }
:root:has([data-ui-v2]) .today-portal > .subhead { color: rgba(255, 255, 255, 0.85); font-family: var(--sans); font-style: normal; font-size: 17px; }
:root:has([data-ui-v2]) .today-portal > .subhead .accent { color: var(--v2-ac); }
:root:has([data-ui-v2]) .today-portal .grid {
  display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; align-items: stretch;
}
:root:has([data-ui-v2]) .today-portal .grid > div, :root:has([data-ui-v2]) .today-portal .grid > .rail { display: contents; }
:root:has([data-ui-v2]) .today-portal .grid .checkin { grid-column: 1; grid-row: 1; }
:root:has([data-ui-v2]) .today-portal .grid .rq { grid-column: 1; grid-row: 2; }
:root:has([data-ui-v2]) .today-portal .grid .rail > .rc:nth-of-type(1) { grid-column: 2; grid-row: 1; }
:root:has([data-ui-v2]) .today-portal .grid .rail > .rc:nth-of-type(2) { grid-column: 2; grid-row: 2; }
:root:has([data-ui-v2]) .today-portal .grid .module { grid-column: 1 / -1; grid-row: 3; margin-top: 60px; color: var(--v2-ink); }
:root:has([data-ui-v2]) .today-portal .grid::before {
  content: ""; grid-column: 1 / -1; grid-row: 1 / 3; z-index: -1; margin: -640px -400px -48px -400px;
  background-color: #2a1a12;
  background-image: linear-gradient(180deg, var(--v2-hero-tint) 0%, rgba(14, 10, 8, 0.15) 35%, rgba(14, 10, 8, 0.4) 65%, rgba(14, 10, 8, 0.82) 100%), var(--v2-photo);
  background-size: cover; background-position: center;
}
:root:has([data-ui-v2]) .today-portal :is(.checkin, .rq, .rc) {
  color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 32px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32); -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur);
}
:root:has([data-ui-v2]) .today-portal :is(.checkin, .rq, .rc) :is(h2, h3, .rc-title, .ci-title, .rq-title) {
  color: #fff; font-family: var(--sans); font-weight: 400; letter-spacing: -0.025em; font-size: 22px; text-transform: none;
}
:root:has([data-ui-v2]) .today-portal :is(.checkin, .rq, .rc) :is(p, .rc-empty, .gm, .gt, .time, span, label, small) { color: rgba(255, 255, 255, 0.85); }
:root:has([data-ui-v2]) .today-portal :is(.checkin, .rq) button {
  color: #fff; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 22px;
}
:root:has([data-ui-v2]) .today-portal .rq button { border-radius: 999px; }
:root:has([data-ui-v2]) .today-portal .module { background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.95); border-radius: 32px; box-shadow: var(--v2-card-shadow); }
@media (max-width: 900px) {
  :root:has([data-ui-v2]) .today-portal .grid { grid-template-columns: minmax(0, 1fr); }
  :root:has([data-ui-v2]) .today-portal .grid .checkin { grid-row: 1; }
  :root:has([data-ui-v2]) .today-portal .grid .rq { grid-row: 2; }
  :root:has([data-ui-v2]) .today-portal .grid .rail > .rc:nth-of-type(1) { grid-column: 1; grid-row: 3; }
  :root:has([data-ui-v2]) .today-portal .grid .rail > .rc:nth-of-type(2) { grid-column: 1; grid-row: 4; }
  :root:has([data-ui-v2]) .today-portal .grid .module { grid-row: 5; margin-top: 40px; }
  :root:has([data-ui-v2]) .today-portal .grid::before { grid-row: 1 / 5; }
}
/* The greeting fades the NAME, as in the design ("Good morning, Rob."). */
:root:has([data-ui-v2]) .today-portal > h1 em { opacity: 1; }
:root:has([data-ui-v2]) .today-portal .module :is(h2, h3, p, em, i) { font-style: normal; font-family: var(--sans); }
:root:has([data-ui-v2]) .today-portal .module :is(h2, h3) { font-weight: 400; letter-spacing: -0.035em; }
:root:has([data-ui-v2]) .today-portal .module :is(a, button)[class*="begin"], :root:has([data-ui-v2]) .today-portal .module .begin {
  letter-spacing: 0; text-transform: none; font-size: 15px; border-radius: 999px;
}

/* ── 13. Dashboards (HealthProvider, AdminOverview designs) ───────────────
   On a dashboard the first rows of cards are grouped by HeroBox inside
   .pv-view. The photograph is that box's ::before, reaching up behind the
   page header (whose own photograph is switched off there) and ending under
   the last grouped row — so it always fits the cards, whatever they hold.
   The grouped cards become the design's glass. */
:root:has([data-ui-v2]) .pvs-main:has(.pv-view > .v2-hero) .pv-top { background: none; z-index: 2; padding-bottom: 28px; }
:root:has([data-ui-v2]) .pv-view > .v2-hero {
  display: block !important; position: relative; z-index: 1; isolation: auto; color: #fff;
  margin: -32px -48px 40px -336px; padding: 0 48px 56px 336px; background: none;
}
:root:has([data-ui-v2]) .pv-view > .v2-hero::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: -900px;
  background-color: #1b1410;
  background-image: linear-gradient(180deg, var(--v2-hero-tint) 0%, rgba(14, 10, 8, 0.15) 30%, rgba(14, 10, 8, 0.4) 65%, rgba(14, 10, 8, 0.82) 100%), var(--v2-photo);
  background-size: cover; background-position: center bottom;
}
:root:has([data-ui-v2]) .pv-view > .v2-hero :is(.pv-card, .pv-kpi) {
  color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 32px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32); -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur);
}
:root:has([data-ui-v2]) .pv-view > .v2-hero :is(.pv-card-h, .ti, .val, .pv-kpi .val) { color: #fff; }
:root:has([data-ui-v2]) .pv-view > .v2-hero :is(.tsub, .tm, .cap, .lbl, .pv-empty, .pv-more, p) { color: rgba(255, 255, 255, 0.75); }
:root:has([data-ui-v2]) .pv-view > .v2-hero .pv-row { border-bottom-color: rgba(255, 255, 255, 0.14); }
/* The design's "Review →" rows: each list row a glass strip. */
:root:has([data-ui-v2]) .pv-view > .v2-hero .pv-card a.pv-row {
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 22px; padding: 14px 18px; margin-top: 8px; background: rgba(255, 255, 255, 0.08); color: #fff;
}
:root:has([data-ui-v2]) .pv-view > .v2-hero .pv-card a.pv-row:hover { background: rgba(255, 255, 255, 0.14); }
:root:has([data-ui-v2]) .pv-view > .v2-hero .pv-empty, :root:has([data-ui-v2]) .pv-view > .v2-hero [class*="empty"] { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.8); border-color: transparent; }
:root:has([data-ui-v2]) .pv-top .pv-actions .pv-btn { color: #fff; border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.1); }
:root:has([data-ui-v2]) .pv-top .pv-actions .pv-btn.filled { background: #fff; color: #1b1410; border-color: #fff; }
@media (max-width: 900px) {
  :root:has([data-ui-v2]) .pv-view > .v2-hero { margin: -24px -16px 32px; padding: 0 16px 40px; }
}
:root:has([data-ui-v2]) .pv-view > .v2-hero .pv-pill { background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); }
:root:has([data-ui-v2]) .pv-view > .v2-hero .pv-pill:is(.live, .alert, .flag) { background: rgba(166, 61, 40, 0.55); border-color: rgba(255, 190, 170, 0.5); }
:root:has([data-ui-v2]) .pv-view > .v2-hero .pv-pill:is(.done, .ok) { background: rgba(169, 211, 191, 0.25); border-color: rgba(169, 211, 191, 0.5); }
:root:has([data-ui-v2]) .pv-btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }

/* ── 14. Signed-out pages (sign-in, sign-up, set-password, forgot password,
   redeem, finish setup, attend) — the Begin design's sign-in card. The
   whole stage takes the warm photograph; the left side keeps its mark and
   line in white; the form panel becomes the glass card. Same forms, same
   fields, same links. Turned on per browser by the switch (PublicUiSkin). */
:root:has([data-ui-v2]) .login-stage {
  background-color: #1b1410;
  background-image: linear-gradient(180deg, rgba(40, 18, 10, 0.55) 0%, rgba(40, 18, 10, 0.2) 40%, rgba(20, 8, 4, 0.8) 100%), url(/atlas-v2/img/patient.jpg);
  background-size: cover; background-position: center;
}
:root:has([data-ui-v2]) .login-art { background: transparent; color: #fff; }
:root:has([data-ui-v2]) .login-art::before { display: none; }
:root:has([data-ui-v2]) .login-mark .ring { position: relative; border: 0; color: #fff; font-family: var(--v2-mark); font-weight: 300; }
:root:has([data-ui-v2]) .login-mark .ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(transparent 0 4deg, #2c5a4a 4deg 86deg, transparent 86deg 94deg, #8c5238 94deg 176deg,
    transparent 176deg 184deg, #6e2a35 184deg 266deg, transparent 266deg 274deg, #4b5d6e 274deg 356deg, transparent 356deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - clamp(2px, 13.6%, 3px)), #000 calc(100% - clamp(2px, 13.6%, 3px) + 0.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - clamp(2px, 13.6%, 3px)), #000 calc(100% - clamp(2px, 13.6%, 3px) + 0.5px));
}
:root:has([data-ui-v2]) .login-mark .word { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.32em; color: #fff; }
:root:has([data-ui-v2]) .login-poem { color: #fff; font-family: var(--sans); font-weight: 400; letter-spacing: -0.045em; line-height: 1; }
:root:has([data-ui-v2]) .login-poem em { font-style: normal; opacity: 0.55; }
:root:has([data-ui-v2]) .login-foot { color: rgba(255, 255, 255, 0.7); }
:root:has([data-ui-v2]) .login-form {
  background: transparent; border: 0; padding: 48px; color: #fff; text-align: left; align-items: stretch;
}
:root:has([data-ui-v2]) .login-form > * { max-width: 460px; margin-left: auto; margin-right: auto; }
/* The panel's content sits in the design's glass card. */
:root:has([data-ui-v2]) .login-form {
  justify-content: center;
}
:root:has([data-ui-v2]) .login-form > :is(form, div, section):first-of-type,
:root:has([data-ui-v2]) .login-form {
  --lf-glass: 1;
}
:root:has([data-ui-v2]) .login-form {
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 32px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32); -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur);
  margin: 48px; min-height: 0; align-self: center;
}
:root:has([data-ui-v2]) .login-form :is(h1, h2) { color: #fff; font-family: var(--sans); font-weight: 400; letter-spacing: -0.04em; text-align: left; }
:root:has([data-ui-v2]) .login-form :is(h1, h2) em { font-style: normal; color: inherit; opacity: 0.55; }
:root:has([data-ui-v2]) .login-form :is(.lede, .eyebrow, label, .alt, p) { color: rgba(255, 255, 255, 0.82); font-family: var(--sans); font-style: normal; }
:root:has([data-ui-v2]) .login-form label { letter-spacing: 0.02em; text-transform: none; font-size: 13px; }
:root:has([data-ui-v2]) .login-form :is(a, .alt a) { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
:root:has([data-ui-v2]) .login-form input:not([type="checkbox"]), :root:has([data-ui-v2]) .login-form select {
  color: #fff; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px;
  padding-left: 44px; min-height: 50px; font-size: 16px;
}
:root:has([data-ui-v2]) .login-form input::placeholder { color: rgba(255, 255, 255, 0.6); }
:root:has([data-ui-v2]) .login-form :is(input, select):focus { border-color: #fff !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); }
:root:has([data-ui-v2]) .login-form .fi { color: rgba(255, 255, 255, 0.7); }
:root:has([data-ui-v2]) .login-form .submit {
  height: 52px; border-radius: 999px; background: #fff; color: #1b1410; border: 0;
  font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none;
}
:root:has([data-ui-v2]) .login-form .submit:hover { background: rgba(255, 255, 255, 0.9); }
:root:has([data-ui-v2]) .login-form .submit-alt {
  height: 50px; border-radius: 999px; color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3);
  font-family: var(--sans); font-size: 15px; letter-spacing: 0; text-transform: none;
}
:root:has([data-ui-v2]) .login-form :is([role="tablist"], .role-tabs) { border: 0; }
:root:has([data-ui-v2]) .login-form .role-highlight { background: rgba(255, 255, 255, 0.22); border-radius: 999px; }
/* The card is the form's width, not the half of the screen it sits in (Rob, 8 Oct: "wideboi" on a wide
   display — the column ran ~870px of glass round a 460px form). 460 + 48 each side, centred in its half. */
:root:has([data-ui-v2]) .login-form { box-sizing: border-box; width: calc(100% - 96px); max-width: 556px; justify-self: center; }
@media (max-width: 900px) {
  :root:has([data-ui-v2]) .login-form { margin: 16px; padding: 28px 22px; width: calc(100% - 32px); }
}
/* A long address ("Setting one for new.patient.1791…@…") breaks rather than
   widening the whole page on a phone (8 Oct, found when the pilot moved to the
   new UI: the card's margin and padding leave ~310px). */
:root:has([data-ui-v2]) .login-form { min-width: 0; overflow-wrap: anywhere; }
:root:has([data-ui-v2]) .login-form { color: #fff; }
:root:has([data-ui-v2]) .login-form :is(span, button, small, a, div, nav, li) { color: inherit; }
:root:has([data-ui-v2]) .login-form :is(button, a):not(.submit):not(.submit-alt) { opacity: 0.9; }
:root:has([data-ui-v2]) .login-form .submit { color: #1b1410; }

/* The score after sending (new UI only — ScreenerScreen renders it only for
   a new-UI account). The design's results: Doto figure, band, track. */
:root:has([data-ui-v2]) .app .ax-modal .ax-score {
  margin: 20px 0 6px; padding: 22px 24px; border-radius: 28px; display: flex; flex-direction: column; gap: 8px;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
:root:has([data-ui-v2]) .app .ax-modal .ax-score-k { font-size: 13px; color: rgba(255, 255, 255, 0.75); }
:root:has([data-ui-v2]) .app .ax-modal .ax-score-v b { font-family: var(--v2-num); font-weight: 800; font-size: 64px; line-height: 0.9; color: #fff; }
:root:has([data-ui-v2]) .app .ax-modal .ax-score-v span { font-size: 15px; color: rgba(255, 255, 255, 0.75); margin-left: 6px; }
:root:has([data-ui-v2]) .app .ax-modal .ax-score-band { font-size: 20px; letter-spacing: -0.02em; color: #fff; }
:root:has([data-ui-v2]) .app .ax-modal .ax-score-track { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
:root:has([data-ui-v2]) .app .ax-modal .ax-score-track i { display: block; height: 100%; background: rgba(255, 255, 255, 0.8); border-radius: 4px; }
:root:has([data-ui-v2]) .app .ax-modal .ax-score-trend { margin: 4px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.88); }
:root:has([data-ui-v2]) .app .ax-modal .ax-score-fine { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.7); }
:root:has([data-ui-v2]) .app .ax-modal .ax-continue { display: flex; align-items: center; justify-content: center; text-decoration: none; }
/* "Next: Anxiety questionnaire" is a link with display: block inline (the current UI's centring), which
   beat the line above and left its words at the top of the pill (Rob, 7 Oct). */
:root:has([data-ui-v2]) .app .ax-modal a.ax-continue { display: flex !important; }

/* ── 15. The "Before your visit" ✕: in from the corner of the bigger card.
   Open: 20px in, a 34px glass button. Collapsed (and the phone's untouched
   "auto"): the corner itself, as today. */
:root:has([data-ui-v2]) .pv-toast { --dot-inset: 18px; --dot-size: 34px; --dot-font: 13px; }
:root:has([data-ui-v2]) .pv-toast[data-open="0"] { --dot-inset: 0px; --dot-size: 34px; --dot-font: 17px; }
@media (max-width: 900px) {
  :root:has([data-ui-v2]) .pv-toast[data-open="auto"] { --dot-inset: 0px; --dot-size: 34px; --dot-font: 17px; }
}
:root:has([data-ui-v2]) .pv-toast:not([data-open="0"]) .pv-toast-k { margin-right: 44px; }

/* ── 16. Messages (components/messages: the provider inbox and the
   patient's Messages, one component). No design of its own, so the
   system's treatment: the list and the conversation as two floating cards
   beside the rail; the conversation's header — who, back, their profile —
   on the pillar's photograph, like the chart; pill search and composer. */
:root:has([data-ui-v2]) .ix-shell {
  background: transparent; gap: 16px; padding: 16px 16px 16px 16px; box-sizing: border-box;
  height: calc(100dvh - var(--console-chrome, 0px));
}
:root:has([data-ui-v2]) :is(.ix-list, .ix-chat) {
  background: var(--v2-card); border: 1px solid var(--v2-card-edge); border-radius: 28px; box-shadow: var(--v2-card-shadow);
  overflow: hidden; min-height: 0;
}
:root:has([data-ui-v2]) .ix-list { border-right: 1px solid var(--v2-card-edge); }
:root:has([data-ui-v2]) .ix-chat { display: flex; flex-direction: column; }
/* On a phone a conversation opens over the list, full screen, so the empty "Select a thread to start"
   pane has no job there (Rob, 8 Oct); the line above had brought it back under the list. */
@media (max-width: 640px) { :root:has([data-ui-v2]) .ix-shell:not(.has-selection) .ix-chat { display: none; } }
:root:has([data-ui-v2]) .ix-list-head { border-bottom: 0; padding: 22px 22px 8px; }
:root:has([data-ui-v2]) .ix-list-title { font-family: var(--sans); font-weight: 400; letter-spacing: -0.03em; font-size: 26px; color: var(--v2-ink); }
:root:has([data-ui-v2]) .ix-list-meta { letter-spacing: 0.1em; font-size: 11px; color: var(--v2-ink-2); }
:root:has([data-ui-v2]) .ix-search { padding: 8px 16px 10px; }
:root:has([data-ui-v2]) .ix-search input {
  border-radius: 999px; padding: 11px 18px; font-size: 14px; background: rgba(27, 20, 16, 0.04); border: 1px solid rgba(27, 20, 16, 0.08);
}
:root:has([data-ui-v2]) .ix-rows { padding: 0 8px 12px; }
:root:has([data-ui-v2]) .ix-row { border-radius: 18px; border: 0; border-left: 0; margin: 2px 0; padding: 12px 14px; }
:root:has([data-ui-v2]) .ix-row:hover { background: rgba(27, 20, 16, 0.04); }
:root:has([data-ui-v2]) .ix-row.active { background: var(--accent-wash, rgba(44, 90, 74, 0.12)); border-left: 0; box-shadow: none; }
:root:has([data-ui-v2]) .ix-row.unread { background: rgba(185, 80, 31, 0.08); }
:root:has([data-ui-v2]) .ix-row-name { font-family: var(--sans); font-size: 15px; letter-spacing: -0.01em; }
:root:has([data-ui-v2]) .ix-row-pillar { letter-spacing: 0.08em; }
:root:has([data-ui-v2]) .ix-row-preview, :root:has([data-ui-v2]) .ix-row-preview em { font-family: var(--sans); font-style: normal; }
:root:has([data-ui-v2]) .ix-ava, :root:has([data-ui-v2]) .ix-chat-ava { font-family: var(--sans); font-weight: 500; }
:root:has([data-ui-v2]) .ix-chat-head {
  border-bottom: 0; padding: 22px 24px; color: #fff;
  background-color: #1b1410;
  background-image: linear-gradient(180deg, var(--v2-hero-tint) 0%, rgba(14, 10, 8, 0.35) 55%, rgba(14, 10, 8, 0.75) 100%), var(--v2-photo);
  background-size: cover; background-position: center 40%;
}
:root:has([data-ui-v2]) .ix-chat-name { color: #fff; font-family: var(--sans); font-weight: 400; letter-spacing: -0.035em; font-size: 26px; }
:root:has([data-ui-v2]) .ix-chat-pillar { color: rgba(255, 255, 255, 0.72); }
:root:has([data-ui-v2]) .ix-chat-ava {
  color: #fff; background: var(--v2-glass); border: 1px solid var(--v2-glass-edge); box-shadow: var(--v2-glass-in);
}
:root:has([data-ui-v2]) :is(.ix-chat-profile, .ix-chat-back) {
  color: #fff; border-radius: 999px; padding: 8px 14px; letter-spacing: 0.02em; text-transform: none; font-size: 13px;
  background: var(--v2-glass); border: 1px solid var(--v2-glass-edge); box-shadow: var(--v2-glass-in); text-decoration: none;
}
:root:has([data-ui-v2]) .ix-chat-body { background: transparent; }
:root:has([data-ui-v2]) :is(.ix-chat-empty, .ix-thread-empty, .ix-empty) { font-family: var(--sans); font-style: normal; color: var(--v2-ink-2); }
:root:has([data-ui-v2]) .ix-bubble { border-radius: 22px; box-shadow: 0 8px 20px -16px rgba(60, 40, 20, 0.5); }
:root:has([data-ui-v2]) .ix-msg-row.from-patient .ix-bubble { background: #fff; border: 1px solid rgba(27, 20, 16, 0.06); }
:root:has([data-ui-v2]) .ix-msg-row.from-clin .ix-bubble { background: var(--v2-ink); border: 0; }
:root:has([data-ui-v2]) .ix-bubble-text { font-family: var(--sans); font-size: 15px; line-height: 1.5; }
:root:has([data-ui-v2]) .ix-reply { background: transparent; border-top: 0; padding: 12px 18px 18px; gap: 10px; }
:root:has([data-ui-v2]) .ix-reply textarea {
  border-radius: 24px; padding: 13px 18px; font-family: var(--sans); font-size: 15px; background: #fff; border: 1px solid rgba(27, 20, 16, 0.1);
}
:root:has([data-ui-v2]) .ix-reply button {
  border-radius: 999px; height: 46px; padding: 0 22px; background: var(--v2-ink); color: #fff; border: 0;
  font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; align-self: flex-end;
}
@media (max-width: 900px) {
  :root:has([data-ui-v2]) .ix-shell { padding: 10px; gap: 10px; }
}

/* ── 17. Every photo-backed surface paints its photograph under its own
   border too. By default an image starts inside the border while the dark
   background colour fills under it, which drew a dark hairline round the
   intake modal (Rob, 5 Oct) and anything else with a photo and a border. */
:root:has([data-ui-v2]) *, :root:has([data-ui-v2]) *::before, :root:has([data-ui-v2]) *::after { background-origin: border-box; }

/* ── 18. Every other modal, sheet and dialog — the same card. Booking,
   visit details, care preferences, saved, orders, protocol, sessions,
   tools, Living's trainer / space / merch / sheets, the store's cart, the
   confirm dialog and the leaving-Atlas warning, the request dialog, the
   provider's schedule sheet and appointment / session-notes dialogs, the
   billing dialogs, the profile preview. Same place, same opening, same
   buttons; the design's card, type and pills. (The intake and the
   questionnaires have their own photographed version, section 8.) */
:root:has([data-ui-v2]) :is(.pillar-modal-scrim, .atlas-confirm-scrim, .sc-modal-backdrop, .tm-scrim, .mm-scrim, .rq-scrim,
  .pv-sheet-scrim, .profile-modal-scrim, .modal-shade, .app .scrim) {
  background: rgba(14, 10, 8, 0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
:root:has([data-ui-v2]) :is(.app .pillar-modal:not(.ax-modal), .atlas-confirm, .sc-modal, .sn-modal, .rq-modal, .profile-modal, .modal, .tm, .mm) {
  background: #f6f3ee; color: var(--v2-ink); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 32px;
  box-shadow: 0 40px 90px -40px rgba(20, 12, 6, 0.6); font-family: var(--sans);
}
:root:has([data-ui-v2]) :is(.pv-sheet, .app .drawer) {
  background: #f6f3ee; color: var(--v2-ink); border-left: 1px solid rgba(255, 255, 255, 0.9); border-radius: 32px 0 0 32px;
  box-shadow: -30px 0 80px -40px rgba(20, 12, 6, 0.55); font-family: var(--sans);
}
:root:has([data-ui-v2]) .app .sheet { background: #f6f3ee; border-radius: 32px 32px 0 0; font-family: var(--sans); }
:root:has([data-ui-v2]) :is(.app .pillar-modal:not(.ax-modal) .pillar-modal-head, .pv-sheet-head, .sc-modal-head, .sn-modal-head, .app .drawer-head) {
  border-bottom: 1px solid rgba(27, 20, 16, 0.08); padding-top: 24px;
}
:root:has([data-ui-v2]) :is(.app .pillar-modal:not(.ax-modal) .pillar-modal-title, .atlas-confirm-title, .pv-sheet-title, .sc-modal-head :is(h2, h3), .sn-modal-head :is(h2, h3), .rq-modal :is(h2, h3), .profile-modal :is(h2, h3), .modal :is(h2, h3), .tm :is(h2, h3), .mm :is(h2, h3), .app .drawer-head :is(h2, h3, .t)) {
  font-family: var(--sans); font-weight: 400; letter-spacing: -0.03em; color: var(--v2-ink); text-transform: none;
}
:root:has([data-ui-v2]) :is(.app .pillar-modal:not(.ax-modal) .pillar-modal-title, .atlas-confirm-title, .pv-sheet-title) em { font-style: normal; opacity: 0.55; color: inherit; }
:root:has([data-ui-v2]) :is(.app .pillar-modal:not(.ax-modal) .pillar-modal-x, .pv-sheet-x) {
  width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--v2-ink);
  background: rgba(27, 20, 16, 0.05); border: 1px solid rgba(27, 20, 16, 0.1);
}
/* Buttons inside any of them: the design's pills, sentence case. */
:root:has([data-ui-v2]) :is(.app .pillar-modal:not(.ax-modal), .atlas-confirm, .sc-modal, .sn-modal, .rq-modal, .profile-modal, .modal, .tm, .mm, .pv-sheet, .app .drawer, .app .sheet)
  :is(button, a):is([class*="btn"], [class*="submit"], [class*="primary"], [class*="cta"], [class*="go"], [class*="keep"], [class*="save"], [class*="send"], [class*="book"], [class*="confirm"], [class*="cancel"]) {
  border-radius: 999px; letter-spacing: 0.01em; text-transform: none; font-family: var(--sans); font-weight: 500;
}
:root:has([data-ui-v2]) .atlas-confirm-btn { min-height: 50px; font-size: 15px; letter-spacing: 0; text-transform: none; border-radius: 999px; }
:root:has([data-ui-v2]) .atlas-confirm-go { background: var(--v2-ink); border-color: var(--v2-ink); color: #fff; }
:root:has([data-ui-v2]) .atlas-confirm-go.is-safe { background: var(--v2-ink); border-color: var(--v2-ink); }
:root:has([data-ui-v2]) .atlas-confirm-keep { background: transparent; color: var(--v2-ink); border: 1px solid rgba(27, 20, 16, 0.18); }
:root:has([data-ui-v2]) .atlas-confirm-body { color: var(--v2-ink-2); font-family: var(--sans); }
:root:has([data-ui-v2]) .leaving-host { font-family: var(--sans); }
/* Fields in them: the rounded field. */
:root:has([data-ui-v2]) :is(.app .pillar-modal:not(.ax-modal), .sc-modal, .sn-modal, .rq-modal, .profile-modal, .modal, .tm, .mm, .pv-sheet, .app .drawer) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-radius: 16px; font-family: var(--sans); font-size: 15px; background: #fff; border: 1px solid rgba(27, 20, 16, 0.12);
}
@media (max-width: 899px) {
  :root:has([data-ui-v2]) .app .pillar-modal:not(.ax-modal) { border-radius: 28px 28px 0 0; }
}

/* ── 19. The hairline, properly (Rob, 5 Oct, twice). The catch-all in §17
   has the lowest specificity there is, so any surface whose own stylesheet
   sets the `background` shorthand (which resets the origin) kept painting
   its photo inside the border, with the dark backing colour showing through
   the border on top. Named here, with the weight to win. */
:root:has([data-ui-v2]) :is(.app .pillar-modal.ax-modal, .pvs, .portal .side.pvs, .pv-toast-card, .pv-top, .app .screen > .greet,
  .app .screen > .hs-storebar, .app .pf-hero, .login-stage, .ix-chat-head, .v2-hero, .aud-head-row, .aud-head, .bgx-head) {
  background-origin: border-box !important;
}

/* ── 20. Sign-in card legibility (Rob, 5 Oct). Several of the card's lines
   carry INLINE dark colours (LoginStage: Forgot password, Schedule a first
   visit, the finish-setting-up line, the legal row), which only !important
   can restyle. On the photograph every line is white; the Sign in button
   keeps its dark text on white. */
:root:has([data-ui-v2]) .login-form :is(a, span, div, label, p, small, li, button):not(.submit):not(.submit *) {
  color: rgba(255, 255, 255, 0.9) !important;
}
:root:has([data-ui-v2]) .login-form a { text-decoration-color: rgba(255, 255, 255, 0.6) !important; }
:root:has([data-ui-v2]) .login-form :is(.submit, .submit *) { color: #1b1410 !important; }
:root:has([data-ui-v2]) .login-form .remember-cb { border-color: rgba(255, 255, 255, 0.7); background: transparent; }
:root:has([data-ui-v2]) .login-form .remember-cb:checked { background: #fff; border-color: #fff; }
:root:has([data-ui-v2]) .login-form .remember-cb:checked::after { border-color: #1b1410; }
:root:has([data-ui-v2]) .login-form :is([role="tab"], [role="tablist"] button) { opacity: 0.75; }
:root:has([data-ui-v2]) .login-form :is([role="tab"][aria-selected="true"], [role="tablist"] button[aria-pressed="true"]) { opacity: 1; }

/* ── 21. No cream framing the page (Rob, 5 Oct: "cream letterboxing"). The
   browser shows the ROOT's colour past the page's edges — overscroll on a
   Mac or a phone, and round a page shorter than the window. That was the old
   cream. The root is now the photographs' dark; the body keeps the ground
   and fills at least the window, so a short page is still ground, not dark.
   (Safari's toolbar tint, theme-color, follows in UiSkin.) */
:root:has([data-ui-v2]) { background-color: #1b1410; }
:root:has([data-ui-v2]) body { min-height: 100vh; min-height: 100dvh; }
/* The page's own height, not the screen's (Rob, 8 Oct, iPhone: the lower half of the Health home — the
   calendar's foot, Upcoming, "Book a visit", "Recent" — was simply not drawn). The pillar apps set
   html, body { height: 100% } (pillar-app.css), so the page spilled past a one-screen body; with the
   living backdrop composited behind it, Safari drew the page into a layer cut at the body's bottom edge.
   The drawer lock (§7) needed the same thing for its own reason. */
:root:has([data-ui-v2]), :root:has([data-ui-v2]) body { height: auto; }
:root:has([data-ui-v2]) body:has(.login-stage) { background: #1b1410; }


/* ── 22. Legibility sweep fixes (Rob, 5 Oct: "do a full sweep"). Found by
   e2e/tools/contrast.ts across every patient, provider, admin and public
   page in the new UI. Secondary text hard-coded as navy at 35–60% opacity
   (admin accounts, chart overview, outcomes, audit log, settings) reads at
   2–3:1 on the new ground; it takes the new secondary ink (≥ 4.5:1).
   Inline styles with the same greys are matched by value. */
:root:has([data-ui-v2]) :is(.acc-atlas-badge.off, .acc-caps-none, .acc-caps-count, .acc-email, .acc-joined, .acc-joined-h, .acc-license,
  .acc-linked, .acc-role-title, .aud-pagination-count, .tc-trend-sub, .yc-soon, .yc-n, .ov-row-label, .ov-row-empty, .lp-empty, .lp-sub,
  .cnt-section-head, .set-soon, .ct-empty, .ct-curator-note, .wk-long, .as-chip.pending, .as-status, .aud-pill.neutral) {
  color: var(--ink-500) !important;
}
:root:has([data-ui-v2]) :is([style*="rgba(27,42,56,0.3"], [style*="rgba(27,42,56,0.4"], [style*="rgba(27,42,56,0.5"],
  [style*="rgba(27,42,56,0.6"], [style*="rgba(27, 42, 56, 0.4"], [style*="rgba(27, 42, 56, 0.5"], [style*="rgba(27, 42, 56, 0.6"]) {
  color: var(--ink-500) !important;
}
/* Status pills: dark text on their tint, not the tint's own colour. */
:root:has([data-ui-v2]) .pv-pill.due { background: rgba(176, 122, 46, 0.16); color: #6b4410; }
:root:has([data-ui-v2]) .pv-pill.wait { background: rgba(27, 20, 16, 0.07); color: var(--ink-700); }
:root:has([data-ui-v2]) .pv-pill.open { background: rgba(185, 80, 31, 0.12); color: #7a3413; }
:root:has([data-ui-v2]) .pv-pill.done { background: rgba(44, 90, 74, 0.14); color: #1f4437; }
:root:has([data-ui-v2]) .pv-pill.live { background: rgba(179, 64, 47, 0.12); color: #7d2a1f; }
:root:has([data-ui-v2]) :is(.pv-view, .acc-shell, .aud-shell, .pd-shell) th { color: var(--ink-500); }
/* Sweep, second pass — what was dimming the remaining lines. */
:root:has([data-ui-v2]) .ov-row.empty { opacity: 0.85; }
:root:has([data-ui-v2]) .acc-head, :root:has([data-ui-v2]) .acc-head * { color: var(--ink-500) !important; }
:root:has([data-ui-v2]) .lhs h2 em { color: inherit; }
:root:has([data-ui-v2]) .sc-scale-k i { opacity: 1; }
:root:has([data-ui-v2]) .wk-long { color: var(--ink-500); opacity: 1; }
/* The softened second word of a heading on the ground (Your *week*, Needs
   your *attention*) at the strength that still reads (≥ 4.5:1); on the
   photographs the design's 0.55 white already does. */
:root:has([data-ui-v2]) :is(.pv-card-h, .section-h, .app h2, .app h3) em { opacity: 0.68; }
:root:has([data-ui-v2]) :is(.v2-hero, .pv-top, .app .screen > .greet, .ax-modal, .today-portal > h1) em { opacity: 0.55; }

/* ═══════════════════════════════════════════════════════════════════════════
   23. DIRECTION B · SMOKED GLASS  (Rob, 5 Oct — design ethos change)
   ═══════════════════════════════════════════════════════════════════════════
   "We're using too much cream … the header and the first main content piece
   should both use this dark system. If there is a separate additional
   content piece that would benefit from a contrast, then and only then do we
   use the cream." Reference: Claude Design "Direction B · Smoked glass".

   So on every logged-in page:
     • the pillar's photograph sits behind the WHOLE page, fixed;
     • the rail is smoked glass, not a second photograph;
     • the page header carries no photograph of its own (it's already on one);
     • content cards are smoked glass — rgba(10,18,14,.36), blur 30 — with
       white type; a nested block inside one is a lighter sheet;
     • cream is kept for pieces that sit apart on top of the page — modals,
       sheets, dialogs, drawers — where the contrast helps.
   Done by flipping the shared colour tokens the existing screens are drawn
   with (ink → white, sand → glass) for the page, and restoring the light
   tokens inside the cream pieces. */

:root:has([data-ui-v2]) {
  color-scheme: dark;
  --ink-900: #ffffff;
  --ink-700: rgba(255, 255, 255, 0.86);
  --ink-500: rgba(255, 255, 255, 0.7);
  --ink-400: rgba(255, 255, 255, 0.62);
  --ink-300: rgba(255, 255, 255, 0.5);
  --ink-200: rgba(255, 255, 255, 0.32);
  --sand-50: rgba(10, 18, 14, 0.36);
  --sand-100: transparent;
  --sand-200: rgba(255, 255, 255, 0.07);
  --sand-300: rgba(255, 255, 255, 0.14);
  --sand-400: rgba(255, 255, 255, 0.26);
  --v2-ink: #ffffff;
  --v2-ink-2: rgba(255, 255, 255, 0.7);
  --v2-line: rgba(255, 255, 255, 0.12);
  --v2-card: rgba(10, 18, 14, 0.36);
  --v2-card-edge: rgba(255, 255, 255, 0.16);
  --v2-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 34px 70px -44px rgba(0, 0, 0, 0.7);
  --v2-smoke-blur: blur(30px) saturate(150%);
}
/* The cream pieces: everything inside reads with the light tokens again. */
:root:has([data-ui-v2]) :is(.app .pillar-modal:not(.ax-modal), .atlas-confirm, .sc-modal, .sn-modal, .rq-modal, .profile-modal,
  .modal, .tm, .mm, .pv-sheet, .app .drawer, .app .sheet) {
  color-scheme: light;
  --ink-900: #1b1410; --ink-700: #3b332c; --ink-500: #5f574e; --ink-400: #6b6359; --ink-300: #857c72; --ink-200: #a69e94;
  --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: #5f574e; --v2-line: rgba(27, 20, 16, 0.08);
  --v2-card: #fbfaf6; --v2-card-edge: rgba(255, 255, 255, 0.95);
  color: #1b1410;
}

/* The photograph behind the whole page — a fixed layer, so it holds still
   while the page scrolls (and works on iOS, which ignores fixed backgrounds). */
:root:has([data-ui-v2]) body { background: transparent; }
:root:has([data-ui-v2]) :is(.pvs-shell, .portal) { background: transparent !important; }
:root:has([data-ui-v2]) :is(.pvs-shell, .portal)::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: #22302a;
  background-image: linear-gradient(180deg, var(--v2-hero-tint) 0%, rgba(14, 10, 8, 0.08) 28%, rgba(14, 10, 8, 0.3) 62%, rgba(10, 8, 6, 0.62) 100%), var(--v2-photo);
  background-size: cover; background-position: center;
}
:root:has([data-ui-v2]) :is(.pvs-main, .portal main.main, .app, .app .screen) { background: transparent !important; }

/* Headers carry no photograph of their own now. */
:root:has([data-ui-v2]) :is(.pv-top, .app .screen > .greet, .app .screen > .hs-storebar, .v2-hero, .aud-head-row, .aud-head, .bgx-head, .ix-chat-head) {
  background: none !important; background-image: none !important;
}
:root:has([data-ui-v2]) :is(.pd-shell, .pv-view > .v2-hero, .today-portal .grid)::before { display: none; }
:root:has([data-ui-v2]) .ix-chat-head { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }

/* The rail: smoked glass. */
:root:has([data-ui-v2]) :is(.pvs, .portal .side.pvs) {
  background: var(--v2-rail-glass, rgba(10, 22, 17, 0.3)) !important; background-image: none !important;
  -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 30px 60px -40px rgba(0, 0, 0, 0.6);
}

/* Content cards: smoked glass, white type. */
:root:has([data-ui-v2]) :is(.pv-card, .pv-kpi, .app .stat-box, .app .card, .ix-list, .ix-chat, .today-portal .module,
  .pv-view > .v2-hero :is(.pv-card, .pv-kpi), .today-portal :is(.checkin, .rq, .rc), .pd-card, .acc-card, .acc-table, .aud-table-wrap) {
  color: #fff; background: rgba(10, 18, 14, 0.36) !important;
  -webkit-backdrop-filter: var(--v2-smoke-blur); backdrop-filter: var(--v2-smoke-blur);
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 34px 70px -44px rgba(0, 0, 0, 0.7);
}
/* A block nested in a card: the lighter sheet. */
:root:has([data-ui-v2]) :is(.pv-card, .app .card, .pd-card) :is(.pv-card, .app .card, .pv-empty) {
  background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(255, 255, 255, 0.12) !important; box-shadow: none; backdrop-filter: none;
}
:root:has([data-ui-v2]) :is(.pv-empty, .app [class*="empty"]) { color: rgba(255, 255, 255, 0.72); }

/* Buttons that were "ink on cream" become the design's white pill; accent
   fills become the light accent with dark type. */
:root:has([data-ui-v2]) :is(.pv-btn.filled, .ix-reply button, .app .book, .app .btn-primary, .pv-book-row a, .pv-book-row button) {
  background: #fff !important; color: #1b1410 !important; border-color: #fff !important;
}
:root:has([data-ui-v2]) .pv-btn:not(.filled) { color: #fff; border-color: rgba(255, 255, 255, 0.35); background: transparent; }
/* Text the old screens coloured with the deep pillar accent (kickers,
   links, stressed words) is the light accent on the dark. */
:root:has([data-ui-v2]) :is(.kicker.accent, .pv-more, .pv-card-h em, .ov-link, .pd-section-head, .app .accent:not(button)) { color: var(--v2-ac) !important; }
:root:has([data-ui-v2]) :is(.pv-view, .app .screen, .pd-shell, .acc-shell, .aud-shell) a:not([class]) { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }
/* Pills on the dark. */
:root:has([data-ui-v2]) .pv-pill { background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); }
:root:has([data-ui-v2]) .pv-pill:is(.due, .warn) { background: rgba(241, 211, 140, 0.16); color: #f1d38c; border-color: rgba(241, 211, 140, 0.3); }
:root:has([data-ui-v2]) .pv-pill:is(.open, .live, .alert, .flag) { background: rgba(243, 154, 128, 0.16); color: #f8b9a6; border-color: rgba(243, 154, 128, 0.3); }
:root:has([data-ui-v2]) .pv-pill:is(.done, .ok) { background: rgba(169, 211, 191, 0.16); color: #d3efe2; border-color: rgba(169, 211, 191, 0.3); }
/* The sweep's hard-coded greys (§22) follow the token, now light. */
/* Fields on the dark. */
:root:has([data-ui-v2]) :is(.pv-view, .app .screen, .pd-shell, .acc-shell, .aud-shell, .ix-shell) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: #fff;
}
:root:has([data-ui-v2]) :is(.pv-view, .app .screen, .pd-shell, .acc-shell, .aud-shell, .ix-shell) :is(input, textarea)::placeholder { color: rgba(255, 255, 255, 0.5); }
/* Messages: the conversation's bubbles on the dark. */
:root:has([data-ui-v2]) .ix-msg-row.from-patient .ix-bubble { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.14); }
:root:has([data-ui-v2]) .ix-msg-row.from-patient .ix-bubble-text { color: #fff; }
:root:has([data-ui-v2]) .ix-msg-row.from-clin .ix-bubble { background: var(--v2-ac); }
:root:has([data-ui-v2]) .ix-msg-row.from-clin :is(.ix-bubble-text, .ix-bubble-sender, .ix-bubble-time) { color: #12261e; }
:root:has([data-ui-v2]) .ix-row.active { background: rgba(255, 255, 255, 0.12); }
:root:has([data-ui-v2]) .ix-search input { background: rgba(255, 255, 255, 0.08); }
/* White pills keep dark type on the dark page (Direction B). */
:root:has([data-ui-v2]) :is(.pd-msg-btn, .pv-toast li a, .rv, .bw, .pv-top .pv-actions .pv-btn.filled) { color: #1b1410 !important; }
:root:has([data-ui-v2]) .pv-toast li a::after { color: #1b1410; }

/* Inline-styled surfaces (cardSurface and friends set their fill in a style
   attribute, so the stylesheet sweep can't see them). Smoked like any card;
   in a cream piece they take the cream sheet. */
:root:has([data-ui-v2]) :is(:is([style*="background:rgba(255, 255, 255, 0.55)"],[style*="background: rgba(255, 255, 255, 0.55)"]), :is([style*="background:rgba(255,255,255,0.55)"],[style*="background: rgba(255, 255, 255, 0.55)"]), :is([style*="background:#f5f1eb"],[style*="background: rgb(245, 241, 235)"])) {
  background: rgba(10, 18, 14, 0.36) !important; border-color: 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]) :is(.pv-card, .app .card, .pd-card, :is([style*="background:rgba(255, 255, 255, 0.55)"],[style*="background: rgba(255, 255, 255, 0.55)"])) :is([style*="background:rgba(255, 255, 255, 0.55)"],[style*="background: rgba(255, 255, 255, 0.55)"]) {
  background: rgba(255, 255, 255, 0.07) !important; backdrop-filter: none;
}
/* ...and rounded like any card (Rob, 29 Oct: "when have we ever done sharp
   corners"). cardSurface's 4px corner was the v1 console's; the smoke above
   recoloured these cards and left the corner, so they sat square beside .pv-card's
   28px. Only boxes that ARE cardSurface (its fill AND its 4px), so a chip or
   input that merely shares the fill keeps its own shape. Nested ones step down. */
:root:has([data-ui-v2]) :is([style*="background:rgba(255, 255, 255, 0.55)"],[style*="background: rgba(255, 255, 255, 0.55)"]):is([style*="border-radius:4px"],[style*="border-radius: 4px"]) {
  border-radius: 28px !important;
}
:root:has([data-ui-v2]) :is(.pv-card, [style*="border-radius: 4px"]) :is([style*="background:rgba(255, 255, 255, 0.55)"],[style*="background: rgba(255, 255, 255, 0.55)"]):is([style*="border-radius:4px"],[style*="border-radius: 4px"]) {
  border-radius: 18px !important;
}
:root:has([data-ui-v2]) :is([style*="background:rgba(255,255,255,0.5)"],[style*="background: rgba(255, 255, 255, 0.5)"]) { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(255, 255, 255, 0.2) !important; color: #fff; }
:root:has([data-ui-v2]) :is(.app .pillar-modal:not(.ax-modal), .atlas-confirm, .sc-modal, .sn-modal, .rq-modal, .profile-modal, .modal, .tm, .mm, .pv-sheet, .app .drawer, .app .sheet)
  :is(:is([style*="background:rgba(255, 255, 255, 0.55)"],[style*="background: rgba(255, 255, 255, 0.55)"]), :is([style*="background:rgba(255,255,255,0.55)"],[style*="background: rgba(255, 255, 255, 0.55)"]), :is([style*="background:rgba(255,255,255,0.5)"],[style*="background: rgba(255, 255, 255, 0.5)"]), :is([style*="background:#f5f1eb"],[style*="background: rgb(245, 241, 235)"])) {
  background: #fff !important; border-color: rgba(27, 20, 16, 0.12) !important; color: inherit; backdrop-filter: none;
}
/* Pillar tags and avatars in the dark: the light accent. */
:root:has([data-ui-v2]) .ix-row-pillar { color: #9fd3bd !important; }
:root:has([data-ui-v2]) .as-av { color: #fff !important; }
/* More white pills (contrast audit, Direction B): dark type on white. */
:root:has([data-ui-v2]) :is(.set-create-btn, .oc-export-btn, .ax-continue, .ax-via-opt.on) { color: #1b1410 !important; }
/* The admin "viewing as" bar: dark glass, white pill link. */
:root:has([data-ui-v2]) .admin-viewbar { background: rgba(10, 18, 14, 0.72) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
:root:has([data-ui-v2]) .admin-viewbar a { background: #fff !important; color: #1b1410 !important; }
/* Next's built-in not-found page draws black type. */
:root:has([data-ui-v2]) :is(.next-error-h1, .next-error-h1 + div h2) { color: #fff !important; border-color: rgba(255, 255, 255, 0.3) !important; }
/* Filter pills (patients list): outlined on the dark; the chosen one white. */
:root:has([data-ui-v2]) .pl-filter-btn { color: rgba(255, 255, 255, 0.78) !important; border-color: rgba(255, 255, 255, 0.24) !important; background: transparent !important; }
:root:has([data-ui-v2]) .pl-filter-btn.active { color: #1b1410 !important; background: #fff !important; border-color: #fff !important; }
/* The Arc (patient /arc, /check-in, provider Curriculum): its palette tokens
   lifted for the dark — ink white, cards smoked, phase colours light. */
:root:has([data-ui-v2]) [style*="--arc-phase1:"] {
  --arc-ink: #fff !important; --arc-inkMid: rgba(255, 255, 255, 0.72) !important; --arc-inkSoft: rgba(255, 255, 255, 0.58) !important;
  --arc-inkFaint: rgba(255, 255, 255, 0.14) !important; --arc-border: rgba(255, 255, 255, 0.14) !important; --arc-borderMid: rgba(255, 255, 255, 0.24) !important;
  --arc-parchment: transparent !important; --arc-cream: rgba(10, 18, 14, 0.36) !important; --arc-cardAlt: rgba(255, 255, 255, 0.07) !important;
  --arc-phase1: color-mix(in srgb, var(--forest) 40%, #fff) !important; --arc-health: color-mix(in srgb, var(--forest) 40%, #fff) !important;
  --arc-phase2: color-mix(in srgb, var(--sienna) 40%, #fff) !important; --arc-wellness: color-mix(in srgb, var(--sienna) 40%, #fff) !important;
  --arc-phase3: color-mix(in srgb, var(--steel) 40%, #fff) !important; --arc-community: color-mix(in srgb, var(--steel) 40%, #fff) !important;
  --arc-phase4: color-mix(in srgb, var(--sand-pillar, #6b5e4a) 40%, #fff) !important; --arc-spirit: color-mix(in srgb, var(--sand-pillar, #6b5e4a) 40%, #fff) !important;
  --arc-alert: #f8b9a6 !important; --arc-warn: #f1d38c !important;
  --arc-phase1Lo: rgba(169, 211, 191, 0.12) !important; --arc-phase2Lo: rgba(233, 180, 143, 0.12) !important;
  --arc-phase3Lo: rgba(185, 205, 224, 0.12) !important; --arc-phase4Lo: rgba(220, 210, 190, 0.12) !important;
  --arc-alertLo: rgba(243, 154, 128, 0.12) !important; --arc-warnLo: rgba(241, 211, 140, 0.12) !important;
}
/* Roster rows are bare buttons: under the dark colour scheme the browser's
   own button grey shows through. Give them the sheet. */
:root:has([data-ui-v2]) .acc-row-btn:not(.acc-row) { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; }
:root:has([data-ui-v2]) :is(.set-soon, .set-check small) { color: rgba(255, 255, 255, 0.86) !important; }
/* Containers inside a smoked card are the lighter inset sheet; on the page
   itself every container is smoked glass (Rob 5 Oct: match the schedule). */
:root:has([data-ui-v2]) :is(.pv-card, .pv-kpi, .app .stat-box, .app .card, .ix-list, .ix-chat, .today-portal .module,
  .pd-card, .acc-card, .acc-table, .aud-table-wrap, :is([style*="background:rgba(255, 255, 255, 0.55)"],[style*="background: rgba(255, 255, 255, 0.55)"]), :is([style*="background:rgba(255,255,255,0.55)"],[style*="background: rgba(255, 255, 255, 0.55)"])) > * {
  --v2-fill: var(--v2-fill-nested); --v2-fill-edge: var(--v2-fill-nested-edge); --v2-fill-blur: none; --v2-fill-shadow: none;
}
/* The console's bare buttons (calendar ← Today →) hover to the white pill. Not a bare button that
   styles itself inline (the chart's intake rows, curriculum Save, toggles) and not a tab (the bloop
   switcher): those whited out completely on hover (Rob, 12 Oct). Same exclusion in studio.css. */
:root:has([data-ui-v2]) .atlas-console button:not([class]):not([style]):not([role="tab"]):hover:not(:disabled) { background: #fff !important; color: #1b1410 !important; }
/* Portal pills (billing, membership) hover to the white pill. */
:root:has([data-ui-v2]) .btn-pill:not(.danger):hover { background: #fff !important; border-color: #fff !important; color: #1b1410 !important; }

/* LIVING BACKGROUNDS (design, Oct 2026): the page's photograph is now an
   animated canvas underneath (components/v2/living). Once it is running the
   shell's fixed layer keeps only its tint; without script the photograph
   stays as before. */
:root[data-lb-backdrop]:has([data-ui-v2]) :is(.pvs-shell, .portal)::before {
  background-color: transparent;
  background-image: linear-gradient(180deg, var(--v2-hero-tint) 0%, rgba(14, 10, 8, 0.08) 28%, rgba(14, 10, 8, 0.3) 62%, rgba(10, 8, 6, 0.62) 100%);
}
/* The pillar apps' profile header is a header like the others: no photograph of its own. */
:root:has([data-ui-v2]) .app .pf-hero { background-image: none !important; }
/* The calendar's "no hours set yet" veil was cream over the grid; on the dark page it is smoke. */
:root:has([data-ui-v2]) .pv-cal-unset { background: linear-gradient(rgba(10, 18, 14, 0.55), rgba(10, 18, 14, 0.55)) !important; }
/* On a phone the week is the day list, and the veil lies over its rows (visual audit, 8 Oct): heavier, so the
   prompt reads over the day names and "2 visits" rather than among them. */
@media (max-width: 760px) { :root:has([data-ui-v2]) .pv-cal-unset { background: linear-gradient(rgba(10, 8, 6, 0.72), rgba(10, 8, 6, 0.72)) !important; border-radius: inherit; } }

/* The rail's glass takes its area's colour (Rob, 6 Oct: one green glass on
   every area read as a separate frame on admin's iris, therapy's wine…). */
:root:has([data-ui-v2]) { --v2-rail-glass: rgba(40, 14, 6, 0.32); }
:root:has([data-ui-v2]) [data-pillar="health"] { --v2-rail-glass: rgba(10, 22, 17, 0.3); }
:root:has([data-ui-v2]) [data-pillar="wellness"] { --v2-rail-glass: rgba(40, 20, 10, 0.32); }
:root:has([data-ui-v2]) [data-pillar="therapy"] { --v2-rail-glass: rgba(36, 10, 18, 0.34); }
:root:has([data-ui-v2]) [data-pillar="living"] { --v2-rail-glass: rgba(10, 16, 28, 0.34); }
:root:has([data-ui-v2]) [data-pillar="shared"] { --v2-rail-glass: rgba(24, 16, 48, 0.34); }

/* VIEW TRANSITIONS — ONE CADENCE (Rob, 6 Oct: backgrounds and colours morph,
   never cut; then: the moves "feel random"). Every change of screen is the same
   move: the whole page cross-fades, old to new, in 450 ms on one curve, and
   nothing slides, scales or arrives on its own timer. In-app moves use React's
   <ViewTransition> (V2ViewTransition); full page loads use the browser's
   cross-document transition; the living backdrop rides the same fade
   (living/auto.js uses the same 450 ms and curve when it fades on its own). */
@view-transition { navigation: auto; }
/* Only the page as a whole takes part: no part of it gets its own group, so no
   region stretches or glides between its old and new size. */
:root:has([data-ui-v2]) body * { view-transition-name: none !important; }
:root:has([data-ui-v2])::view-transition-group(root) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
:root:has([data-ui-v2])::view-transition-old(root),
:root:has([data-ui-v2])::view-transition-new(root) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* The same for the app's own Reduce motion (living/auto.js sets the attribute). */
:root[data-reduce-motion]::view-transition-group(*),
:root[data-reduce-motion]::view-transition-old(*),
:root[data-reduce-motion]::view-transition-new(*) { animation: none !important; }
/* Colours that change on the same element ease on the same clock. */
:root:has([data-ui-v2]) :is(.pvs, .portal .side.pvs, .pvs-item, .pvs-av, .pvs-spill, .pv-pill, .ax-modal) {
  transition: background-color 0.45s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.45s cubic-bezier(0.4, 0, 0.2, 1), color 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Rail icons (Oct 2026, the Becoming Arc brief): Bootstrap icons, not text
   glyphs. Every rail renders both (components/v2/RailIcon.tsx); the pilot
   keeps the glyph, the new UI swaps in the icon. The Atlas-level provider
   rail's wordmark reads ATLAS / PROVIDER. Sign-out is the round button on the
   right of the "who" card, as drawn. */
:root:has([data-ui-v2]) .pvs-ni { display: inline-grid; place-items: center; width: 18px; flex: 0 0 18px; }
:root:has([data-ui-v2]) .pvs-ni > .pvs-g:has(+ .pvs-bi) { display: none; }
:root:has([data-ui-v2]) .pvs-ni > svg.pvs-bi[hidden] { display: block; width: 17px; height: 17px; }
:root:has([data-ui-v2]) .pvs-brand-txt:has(.pvs-s-v2) > .pvs-s:not(.pvs-s-v2) { display: none; }
:root:has([data-ui-v2]) .pvs-s-v2[hidden] { display: block; }
:root:has([data-ui-v2]) .pvs-foot { display: block !important; position: relative; margin-top: auto; flex: none; }
:root:has([data-ui-v2]) .pvs-foot > .pvs-me { margin: 0; padding-right: 66px; }
:root:has([data-ui-v2]) .pvs-foot > form { margin: 0; }
:root:has([data-ui-v2]) .pvs-signout {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%); margin: 0; width: 40px; height: 40px; padding: 0; min-height: 0;
  display: grid; place-items: center; border-radius: 50%;
}
:root:has([data-ui-v2]) .pvs-signout > svg.pvs-bi[hidden] { display: block; width: 16px; height: 16px; }
:root:has([data-ui-v2]) .pvs-signout > .pvs-so-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── The Atlas-level provider screens (Cohort, Curriculum, Patients, Messages,
   Outcomes, Contribute, Settings): home's orange silk and the Home accent,
   by route (the Becoming Arc brief). Admin and the auditor keep iris. */
:root:has([data-ui-v2]) [data-pillar="shared"][data-area="atlas"] {
  --v2-bar: #3a1a0c;
  --v2-photo: url(/atlas-v2/img/patient.jpg); --v2-ac: #ffad7a; --v2-ac-d: #b9501f; --v2-ac-t: #a3461a; --v2-hero-tint: rgba(140, 60, 30, 0.45);
  --v2-rail-tint: linear-gradient(180deg, rgba(40, 14, 6, 0.45) 0%, rgba(40, 14, 6, 0.72) 50%, rgba(26, 9, 4, 0.9) 100%);
  --v2-rail-glass: rgba(30, 11, 5, 0.3);
}
:root:has([data-ui-v2]) [data-area="atlas"] .pvs-spill, :root:has([data-ui-v2]) [data-area="atlas"] .pvs-av { color: #2a1206; }

/* The page's scrollbar keeps its space whether or not the page scrolls. A
   short page and a long one otherwise have different viewport widths, and a
   cross-fade that starts on one and ends on the other is aborted by the
   browser ("Transition was aborted … Viewport size changed" — Rob, 6 Oct,
   Wellness → Schedule). Also stops content shifting sideways between pages. */
html:has([data-ui-v2]) { scrollbar-gutter: stable; }