@import url('/dashboard/tokens.css?v=20260929b');   /* design system — bump v= when tokens.css changes */
@import url('/dashboard/components.css?v=20260828e');   /* shared components — bump v= when it changes */
@import url('/dashboard/ask.css?v=20261006a');   /* "Have a question?" pop-up — bump v= when it changes */
@import url('/dashboard/labreport.css?v=20261004a');   /* "Your results, explained" — bump v= when it changes */
@import url('/dashboard/records.css?v=20261005b');   /* Health Records hub — bump v= when it changes */
@import url('/dashboard/shop.css?v=20261007a');   /* member shop (dash_shop.go) — bump v= when it changes */
@import url('/dashboard/visits.css?v=20261004c');   /* Visits: the services menu (dash_visits.go) — bump v= when it changes */
@import url('/dashboard/consent.css?v=20261004a');   /* the one consent pop-up (dash_consent_pop.go) — bump v= when it changes */
/* Circle Health — Dashboard (main.gsb) */
/* Color palette matches app.mycirclehealth.ca mockup */
:root {
  --orange: var(--color-orange);
  /* Hover tone for the orange buttons. Was #D44E09, on which the buttons'
     black text went illegible (Pavel, 2026-09-03: "when I hover the button
     gets darker and the black text becomes illegible"). One step down the
     ramp keeps black at 6.8:1; the hover is said by depth as much as tone,
     see .dash-btn-lift below. */
  --orange-dark: var(--orange-500, #EE6D21);
  --orange-tint: var(--orange-050);
  --cream: var(--color-cream);
  --font: var(--color-font);
  --brand-black: var(--color-font);   /* "circle black" */
  --font-brand: var(--font-sans);
  --text-secondary: #6B6560;
  --text-dim: rgba(255,255,255,0.5);
  --surface: var(--color-surface);
  --muted: var(--color-cream);
  --sand: var(--sand-400);
  --border: var(--sand-400);
  --navy: var(--color-navy);
  --disabled: #C5C2BD;
  --nav-gated: #7A736E;   /* gated nav row — legible (4.61:1) but plainly inactive */
  --icon: var(--color-navy);
  --tab-inactive: rgba(16,41,60,0.5);
  --tab-active: var(--color-navy);
  --text-on-dark: #FFFEF6;
  --success: #4A7C59;
  --warning: #C45C4A;
  --sidebar-w: 300px;   /* nav v4 — was 260px */
  --topbar-h: 56px;
  /* The floating desktop pill: where it sits and how tall it stands. Anything
     that has to line up with the bell derives from these two. */
  --topbar-top: 12px;
  --topbar-pill-h: 40px;   /* 32px controls + 4px padding, top and bottom */
  --bottomnav-h: 56px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --bg: var(--color-cream);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-elevated: 0 4px 12px rgba(0,0,0,0.08);
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--font);
  background: var(--bg);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  min-height: 100%;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* ── Sidebar (desktop) ── */
.dash-sidebar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid rgba(220,182,136,0.15);
  flex-direction: column;
  transition: width 260ms ease-in-out;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 50;
}
@media (min-width: 768px) {
  .dash-sidebar { display: flex; }
}

/* Collapsed-rail tooltip. Positioned by dashRailTip() in the shell script, so
   it is a fixed element rather than a pseudo-element on the row: the rail
   clips its own overflow, and anything drawn inside a row would be cut off at
   the rail's edge. */
.dash-railtip {
  position: fixed;
  z-index: 200;
  transform: translateY(-50%);
  background: var(--color-navy);
  color: var(--text-on-dark);
  font-size: 13px; font-weight: 500; line-height: 1.2;
  padding: 8px 11px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: var(--shadow-elevated);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 120ms;
}
.dash-railtip-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .dash-railtip { transition: none; }
}

/* ── Rail collapse ─────────────────────────────────────────────────────────
   The toggle is 32px wide at 24px of padding, so its centre is 40px from the
   rail's left edge. The collapsed rail is 80px wide and centres its contents —
   which puts the button on that same 40px axis. It does not move. */
/* The logo icon stands in for the wordmark once there is no room for words,
   at the size of the wordmark's C: the C is ~280 of the wordmark's 302 units
   tall, so at a 22px wordmark it is ~20.4px; the icon (300×308) is drawn 22px
   wide, 22.6px tall. The link box is held at one height in both states so the
   rows below do not move up or down when the brand swaps. */
.dash-sidebar-mark { display: none; width: 22px; height: 22.6px; }
.dash-sidebar-logo a { height: 26px; }

.dash-sidebar-logo {
  padding: 32px 24px 24px;
  transition: padding 260ms ease-in-out;   /* slides to the icon axis with the rows */
}
.dash-sidebar-logo a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--font);
}
.dash-sidebar-logo a:hover { text-decoration: none; }
.dash-sidebar-brand {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.dash-sidebar-nav {
  flex: 1;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (min-width: 768px) {
  /* One token drives the rail's width and the content's left padding, so
     redefining it here moves the whole layout. */
  /* 68px, down from 80 (Pavel, 2026-09-03: "the entire bar might be a bit
     too wide"). Every glyph sits on the bar's centre line, x = 34. */
  body.dash-rail-collapsed { --sidebar-w: 68px; }

  /* NOTHING here re-aligns with justify-content. That property is discrete —
     it would snap every glyph to the centre of a bar that is still 300px wide,
     which is the jump that made the two halves look out of step. The glyphs are
     centred by padding instead, which animates with the width. Each value is
     (line width - glyph) / 2, where the line is 68px less its own side margins:
       rows      68 - 24 nav padding = 44, glyph 20  -> 12px
       identity  68 - 24 side margin = 44, avatar 38 ->  3px
       next card 68 - 24 side margin = 44, glyph 20  -> 12px
       brand     68 - 0, icon 22               -> 23px (34 - 11) */
  body.dash-rail-collapsed .dash-sidebar-item,
  body.dash-rail-collapsed .dash-sidebar-next { padding-left: 12px; padding-right: 12px; }
  body.dash-rail-collapsed .dash-sidebar-identity { padding-left: 3px; padding-right: 3px; }
  /* The brand used to keep its 24px padding and so sat 6px left of the icon
     axis (Pavel's screenshot, 2026-09-03). It is centred on the same line. */
  body.dash-rail-collapsed .dash-sidebar-logo { padding-left: 23px; padding-right: 23px; }

  /* Text fades rather than vanishing, and is clipped by the rail's own
     overflow as the bar closes over it. Faster than the width so the words are
     gone before the bar arrives, instead of being cut off mid-slide. */
  body.dash-rail-collapsed .dash-sidebar-label,
  body.dash-rail-collapsed .dash-sidebar-identity-text,
  body.dash-rail-collapsed .dash-sidebar-next-text { opacity: 0; }
  body.dash-rail-collapsed .dash-sidebar-wordmark,
  body.dash-rail-collapsed .dash-sidebar-chevron,
  body.dash-rail-collapsed .dash-sidebar-badge,
  body.dash-rail-collapsed .dash-sidebar-next-chevron { display: none; }
  body.dash-rail-collapsed .dash-sidebar-mark { display: block; }
}
/* Held in both states, not just the collapsed one. A label that may wrap will
   wrap the moment the rail is narrow — mid-animation the rows would grow taller
   and shove the rest of the rail down before settling. One line, clipped. */
.dash-sidebar-label,
.dash-sidebar-identity-text,
.dash-sidebar-next-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 160ms ease-in-out;
}

.dash-sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background 150ms, color 150ms,
              padding 260ms ease-in-out, margin 260ms ease-in-out;
  text-decoration: none;
  position: relative;
}
.dash-sidebar-item:hover {
  background: var(--muted);
  color: var(--font);
  text-decoration: none;
}
.dash-sidebar-item.active {
  /* Half-strength cream-deep. The rgba line is the same colour at the same
     opacity, for engines without color-mix. */
  background: rgba(230,226,209,0.5);
  background: color-mix(in srgb, var(--cream-deep) 50%, transparent);
  color: var(--brand-black);
}
.dash-sidebar-item.active svg {
  stroke-width: 2;
}
.dash-sidebar-item-disabled {
  color: var(--disabled);
  cursor: default;
  pointer-events: none;
}
.dash-sidebar-item-disabled:hover {
  background: transparent;
  color: var(--disabled);
}

.dash-sidebar-chevron {
  margin-left: auto;
  transition: transform 150ms;
  flex-shrink: 0;
}
.dash-sidebar-item-expanded .dash-sidebar-chevron {
  transform: rotate(180deg);
}

.dash-sidebar-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 200ms ease;
}
.dash-sidebar-sub.dash-sidebar-open {
  max-height: 200px;
}
.dash-sidebar-subitem {
  display: block;
  padding: 8px 16px 8px 48px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 150ms, color 150ms;
}
.dash-sidebar-subitem:hover {
  background: var(--muted);
  color: var(--font);
  text-decoration: none;
}
.dash-sidebar-subitem.active {
  color: var(--orange-600);
  background: var(--orange-tint);
}

.dash-sidebar-badge {
  margin-left: auto;
  background: var(--muted);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 400;
  padding: 2px 8px;
  border-radius: 999px;
}

.dash-sidebar-bottom {
  padding: 0 12px 24px;
}
.dash-sidebar-divider {
  border-top: 1px solid rgba(220,182,136,0.15);
  margin: 8px 16px 12px;
}

/* ── Desktop top bar (profile pill) ── */
.dash-topbar {
  display: none;
  position: fixed;
  top: var(--topbar-top);
  right: 16px;
  z-index: 60;
  align-items: center;
  gap: 2px;
  background: var(--surface);
  border-radius: 999px;
  padding: 4px 4px 4px 6px;
  box-shadow: var(--shadow-card);
}
@media (min-width: 768px) {
  .dash-topbar { display: flex; }
}

.dash-topbar-bell {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--icon);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms;
}
.dash-topbar-bell:hover {
  background: var(--muted);
}

.dash-topbar-profile {
  position: relative;
}

.dash-topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--cream-deep);
  color: var(--brand-black);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  transition: background 150ms;
}
.dash-topbar-avatar:hover {
  background: var(--muted);
}

.dash-profile-dropdown {
  display: none;
  position: absolute;
  top: 40px;
  right: 0;
  width: 200px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
  z-index: 100;
}
.dash-profile-open {
  display: block;
}
.dash-profile-item {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background 150ms, color 150ms;
  text-decoration: none;
  border-top: 1px solid rgba(220,182,136,0.15);
}
.dash-profile-item:first-child { border-top: none; }
.dash-profile-item:hover {
  background: var(--muted);
  color: var(--font);
  text-decoration: none;
}

/* ── Main content area ── */
/* The bottom padding is a CONSTANT, not env(safe-area-inset-bottom).
   iOS changes that inset as the browser chrome collapses and expands during a
   scroll. When it feeds a padding in the document's flow, the page's total
   height changes mid-scroll and the content steps up and down under your
   finger — which is what "the text jumps up and down" is (Pavel, iPhone,
   2026-08-31). The bar itself still uses env() for its own height, because a
   fixed element resizing costs the document nothing; only the space reserved
   for it has to be stable. 34px is the tallest home-indicator inset, so this
   clears the bar on every phone; on a device with no inset it is a little extra
   room under the last element and nothing else. */
.dash-content {
  min-height: 100vh;
  padding-bottom: calc(var(--bottomnav-h) + 34px);
}
@media (min-width: 768px) {
  .dash-content {
    padding-left: var(--sidebar-w);
    padding-bottom: 0;
    transition: padding-left 260ms ease-in-out;
  }
}

.dash-main {
  --dash-main-pt: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--dash-main-pt) 24px;
}
@media (min-width: 768px) {
  .dash-main { --dash-main-pt: 48px; padding: var(--dash-main-pt) 40px; }
}
/* Wide monitors. The 1200px cap was set when the rail was 260px and the only
   page was a single column; with a 300px rail it leaves a narrow ribbon
   floating in the middle of a 1920px screen. The column grows in two steps
   rather than going full-bleed, because a 1900px-wide row of label/value pairs
   is unreadable in the other direction. */
@media (min-width: 1400px) {
  .dash-main { max-width: 1440px; padding: var(--dash-main-pt) 56px; }
}
@media (min-width: 1800px) {
  .dash-main { max-width: 1560px; }
}

.dash-container {}
.dash-greeting {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 24px;
  color: var(--font);
}
.dash-subtitle {
  color: var(--text-secondary);
  margin: 0;
  font-size: 15px;
}

/* ── Dashboard sections ── */
.dash-section {
  margin-bottom: 28px;
}
.dash-section-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--font);
  margin: 0 0 16px;
}

/* ── Priority card ── */
.dash-priority-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: background 150ms, transform 150ms, box-shadow 150ms;
  text-decoration: none;
  color: var(--font);
  cursor: pointer;
}
/* Hover lifts the card rather than tinting it: --muted is the cream the page
   is painted in, so the old hover made the card vanish into its background
   (Pavel, 2026-09-03). */
.dash-priority-card:hover {
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(20,30,50,0.12), 0 1px 3px rgba(0,0,0,0.06);
  transform: translateY(-1px);
  text-decoration: none;
}
.dash-priority-card:active {
  transform: scale(0.98);
}
.dash-priority-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}
.dash-priority-icon svg {
  width: 20px;
  height: 20px;
  color: var(--font);
  stroke-width: 1.5;
}
.dash-priority-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 1px var(--surface);
}
.dash-priority-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--font-secondary, rgba(41,38,38,0.4));
  transition: transform 150ms;
}
.dash-priority-card:hover .dash-priority-chevron {
  transform: translateX(2px);
}
.dash-priority-body {
  flex: 1;
  min-width: 0;
}
.dash-priority-label {
  font-size: 16px;
  font-weight: 500;
  color: var(--font);
  margin: 0;
  line-height: 1.25;
}
.dash-priority-desc {
  font-size: 14px;
  color: var(--text-secondary, rgba(41,38,38,0.7));
  margin: 4px 0 0;
  line-height: 1.625;
}
.dash-membership-card .dash-priority-icon svg {
  color: var(--orange);
}
/* Black, not orange: these sit beside black headings in a plain list. */
.dash-priority-img {
  filter: brightness(0) invert(15%);   /* --brand-black #292626 */
}

/* ── Explore grid (2-col cards) ── */
.dash-explore-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .dash-explore-grid { grid-template-columns: 1fr; }
}
.dash-explore-card {
  display: block;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: background 150ms;
  text-decoration: none;
  color: var(--font);
}
.dash-explore-card:hover {
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(20,30,50,0.12);
  transform: translateY(-1px);
  text-decoration: none;
}
.dash-explore-card-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  color: var(--orange);
}
.dash-explore-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--font);
  margin: 0 0 4px;
}
.dash-explore-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Care section card ── */
.dash-care-card {
  display: block;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: background 150ms;
  text-decoration: none;
  color: var(--font);
}
.dash-care-card:hover {
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(20,30,50,0.12);
  transform: translateY(-1px);
  text-decoration: none;
}
.dash-care-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--font);
  margin: 0 0 4px;
}
.dash-care-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Appointment card (extends care card) ── */
.dash-appt-card {
  position: relative;
}
.dash-appt-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.dash-appt-icon {
  width: 18px;
  height: 18px;
  color: var(--orange);
  flex-shrink: 0;
}
.dash-appt-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1.4;
  text-transform: uppercase;
}
.dash-appt-badge-video {
  background: rgba(249, 115, 22, 0.12);
  color: var(--orange);
}
.dash-appt-badge-inperson {
  background: rgba(59, 130, 246, 0.10);
  color: #3b82f6;
}
.dash-appt-card.dash-care-card:hover .dash-appt-icon {
  opacity: 0.8;
}

/* ── Mobile bottom nav ── */
.dash-bottom-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(244,241,226,0.95);
  background: color-mix(in srgb, var(--color-cream) 95%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(220,182,136,0.2);
  /* space-around leaves half-width gaps at the two ends, and the tabs are
     different widths because their labels are, so the rhythm never reads even.
     Equal-width columns instead: every glyph lands on its column's centre. */
  justify-content: space-between;
  align-items: center;
  padding-left: 4px;
  padding-right: 4px;
  /* 56px of bar, centred, PLUS the home-indicator inset below it. Adding the
     inset to the height instead of letting it eat into the height is what
     evens the space above and below the icons. */
  height: calc(var(--bottomnav-h) + max(8px, env(safe-area-inset-bottom, 8px)));
  padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
}
@media (min-width: 768px) {
  .dash-bottom-nav { display: none; }
}

.dash-bottom-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  gap: 3px;
  font-size: 11px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 13px 2px 3px;
  transition: color 150ms;
}
.dash-bottom-item:hover { text-decoration: none; }
.dash-bottom-item.active {
  color: var(--font);
  font-weight: 500;
}
.dash-bottom-item.active svg { stroke-width: 2; }
.dash-bottom-disabled {
  color: var(--disabled);
  cursor: default;
  pointer-events: none;
}

/* ── Mobile header (scroll-aware) ── */
.dash-mobile-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: rgba(244,241,226,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  color: var(--font);
}
.dash-mobile-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.dash-mobile-header-logo img {
  height: 28px;
  width: auto;
}
.dash-mobile-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-mobile-header-bell,
.dash-mobile-header-hamburger {
  background: none;
  border: none;
  color: inherit;
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 150ms;
}
.dash-mobile-header-bell:hover,
.dash-mobile-header-hamburger:hover {
  background: rgba(0,0,0,0.06);
}

/* Scrolled state kept for JS toggle compatibility — same as default.
   A compact-on-scroll bar was tried on 2026-08-31 and REVERTED the same day:
   reclaiming the 14px means the content padding shrinks with the bar, so the
   page jumps under your finger the moment you cross the threshold. Pavel: "now
   it jumps and becomes smaller... I'd rather have it the way it was". The bar
   is one height, always. */
.dash-header-scrolled.dash-mobile-header {
  background: rgba(244,241,226,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  color: var(--font);
}
.dash-header-scrolled .dash-mobile-header-logo img {
  filter: none;
}
.dash-header-scrolled .dash-mobile-header-bell:hover,
.dash-header-scrolled .dash-mobile-header-hamburger:hover {
  background: rgba(0,0,0,0.06);
}

/* Hide mobile header on desktop */
@media (min-width: 768px) {
  .dash-mobile-header { display: none; }
}

/* ── The phone's fixed bars are left exactly as they shipped ──────────────
   REVERTED 2026-08-31, twice over. Chasing the scroll jitter I dropped
   backdrop-filter from both bars here, then added transform: translateZ(0) when
   the bottom bar started stranding itself mid-page. Neither helped and the
   first one caused the stranding: with those overrides in place the tab bar
   settled in a different wrong place on every scroll (two screenshots from
   Pavel).

   The jitter had a different cause entirely and is fixed — env(safe-area-inset-
   bottom) feeding .dash-content's padding, see the note there. So these bars go
   back to the blur they shipped with, and anything tried on them again should
   be tried ONE change at a time, on a phone.

   Do not re-add a transform to a position:fixed bar on iOS. */

/* ── Slide-out menu ── */
.dash-slide-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
}
.dash-slide-overlay.dash-slide-open {
  opacity: 1;
  pointer-events: auto;
}

.dash-slide-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  z-index: 210;
  background: var(--surface);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 16px rgba(0,0,0,0.1);
}
.dash-slide-menu.dash-slide-open {
  transform: translateX(0);
}

.dash-slide-menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(220,182,136,0.25);
}
.dash-slide-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cream-deep);
  color: var(--brand-black);
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}
.dash-slide-userinfo {
  flex: 1;
  min-width: 0;
}
.dash-slide-dispname {
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-slide-close {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms;
}
.dash-slide-close:hover { background: rgba(0,0,0,0.06); }

.dash-slide-menu-nav {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
}
.dash-slide-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: var(--font);
  font-size: 15px;
  transition: background 150ms;
}
.dash-slide-item:hover { background: rgba(0,0,0,0.04); text-decoration: none; }
.dash-slide-item.active {
  color: var(--orange-600);
  font-weight: 500;
  background: var(--orange-tint);
}
.dash-slide-item svg { flex-shrink: 0; }
.dash-slide-divider {
  height: 1px;
  background: rgba(220,182,136,0.25);
  margin: 8px 20px;
}

/* ── Fullscreen TopNav (mobile) ── */
.dash-fs-topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-h);
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid rgba(220,182,136,0.2);
}
.dash-fs-topnav-back {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  margin-left: -8px;
  font-size: 14px;
  color: var(--font);
  text-decoration: none;
  transition: opacity 150ms;
}
.dash-fs-topnav-back:hover { opacity: 0.6; text-decoration: none; }
.dash-fs-topnav-title {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  margin: 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-fs-topnav-bell {
  background: none;
  border: none;
  padding: 8px;
  margin-right: -8px;
  color: var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 150ms;
}
.dash-fs-topnav-bell:hover { background: rgba(0,0,0,0.06); }

/* ── Desktop header row (fullscreen pages only) ──
   Sits in the content column, to the right of the rail and under the
   floating top-bar pill: Back, then the pathway's name, so the person can
   see they are inside Circle filling in one form. */
.dash-fullscreen-back-desktop {
  display: none; /* hidden on mobile */
  align-items: center;
  gap: 14px;
  padding: 22px 40px 0;
  padding-left: calc(var(--sidebar-w) + 40px);
  transition: padding-left 260ms ease-in-out;
}
.dash-focus-title {
  font-size: 14px;
  color: var(--font);
  font-weight: 500;
  padding-left: 14px;
  border-left: 1px solid rgba(220,182,136,0.35);
  line-height: 1.2;
}
.dash-fullscreen-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--text-secondary);
  transition: color 150ms;
}
.dash-fullscreen-back-link:hover { color: var(--font); text-decoration: none; }

@media (min-width: 768px) {
  .dash-fullscreen-back-desktop { display: flex; }
  .dash-fs-topnav { display: none; } /* no sticky header on desktop */
}

/* ── Fullscreen body layout ──
   "Fullscreen" is a phone idea: the sticky TopNav (Back · title · bell) takes
   over from the app chrome so a survey gets the whole screen. On desktop the
   rail and the top bar STAY — a survey used to remove the left bar, which
   read as leaving the app rather than filling in one pathway's form (Pavel,
   2026-09-03). The desktop header row below names the pathway instead. */
body.dash-fullscreen .dash-bottom-nav,
body.dash-fullscreen .dash-mobile-header,
body.dash-fullscreen .dash-slide-overlay,
body.dash-fullscreen .dash-slide-menu {
  display: none !important;
}
@media (max-width: 767px) {
  body.dash-fullscreen .dash-sidebar,
  body.dash-fullscreen .dash-topbar { display: none !important; }
  body.dash-fullscreen .dash-content {
    margin-left: 0;
    padding-left: 0;
    padding-bottom: 0;
    padding-top: var(--topbar-h); /* space for sticky TopNav */
  }
}
@media (min-width: 768px) {
  body.dash-fullscreen .dash-content { padding-bottom: 0; }
}

/* Dashboard pages with mobile header need top padding */
@media (max-width: 767px) {
  body.dash-body .dash-content {
    padding-top: var(--topbar-h);
  }
}

/* ── Intake styles ── */
/* Fullscreen TOC: narrow centered */
body.dash-fullscreen .dash-main {
  max-width: 28rem;
  padding: 20px 24px;
}
@media (min-width: 768px) {
  body.dash-fullscreen .dash-main {
    padding: 40px 24px;
  }
}
/* Section question view: expand container to full width so the pager can span edge-to-edge */
body.dash-fullscreen .dash-main:has(.dash-intake-questions) {
  max-width: 100%;
  padding: 20px 0;
}
@media (min-width: 768px) {
  body.dash-fullscreen .dash-main:has(.dash-intake-questions) {
    padding: 32px 0;
  }
}

.dash-intake {
  max-width: 100%;
  padding: 0 0 16px;
}

.dash-intake-questions {
  max-width: 100%;
  padding: 0;
}

.dash-intake-progress-text {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 20px;
}

/* ── Progress bar ── */
/* What this form is, and what it is for — above the progress bar. */
.dash-intake-context { margin: 0 0 22px; }
.dash-intake-kicker {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-600);
}
.dash-intake-context-title {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--font);
}
.dash-intake-context-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}
/* Inside the questions: the same kicker, aligned with the header's padding. */
.dash-intake-section-kicker { padding: 0 24px; margin-bottom: 10px; }
.dash-intake-progress-bar-wrap {
  margin-bottom: 24px;
}
.dash-intake-progress-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.dash-intake-progress-track {
  width: 100%;
  height: 4px;
  background: rgba(29, 26, 26, 0.1);
  border-radius: 999px;
  overflow: hidden;
}
.dash-intake-progress-fill {
  height: 100%;
  background: var(--orange);
  border-radius: 999px;
  transition: width 300ms ease-out;
}

/* ── Stepper layout (vertical timeline) ── */
.dash-intake-stepper {
  position: relative;
}
.dash-intake-step-row {
  display: flex;
  gap: 16px;
}
.dash-intake-step-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
}
.dash-intake-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(29, 26, 26, 0.2);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 150ms, border-color 150ms;
}
.dash-intake-step-dot.dash-intake-step-active {
  background: var(--orange);
  border-color: var(--orange);
}
.dash-intake-step-dot svg {
  display: block;
}
.dash-intake-step-num0 {
  font-size: 12px;
  font-weight: 600;
  color: rgba(29, 26, 26, 0.4);
  line-height: 1;
}
.dash-intake-step-num1 {
  font-size: 12px;
  font-weight: 600;
  color: var(--font);
  line-height: 1;
}
.dash-intake-step-line {
  width: 2px;
  flex: 1;
  min-height: 16px;
  background: rgba(29, 26, 26, 0.1);
  transition: background 150ms;
}
.dash-intake-step-line-done {
  background: var(--orange);
}

/* ── Section cards ── */
.dash-intake-section-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  padding: 16px;
  border: 1px solid rgba(220, 182, 136, 0.2);
  border-radius: 1rem;
  background: var(--cream);
  text-decoration: none;
  color: var(--font);
  cursor: pointer;
  transition: border-color 150ms, background 150ms, box-shadow 150ms;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.dash-intake-section-card:hover {
  text-decoration: none;
  border-color: rgba(255, 136, 76, 0.3);
  background: var(--surface);
}
.dash-intake-section-current {
  border-color: var(--orange);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(255, 136, 76, 0.12);
}
.dash-intake-section-completed {
  background: var(--surface);
}
.dash-intake-section-completed:hover {
  border-color: rgba(255, 136, 76, 0.3);
}
.dash-intake-section-body {
  flex: 1;
  min-width: 0;
}
.dash-intake-section-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.dash-intake-section-text {
  flex: 1;
  min-width: 0;
}
.dash-intake-section-name {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}
.dash-intake-section-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 4px 0 0;
  line-height: 1.4;
}
.dash-intake-section-done {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--success);
  background: rgba(74, 124, 89, 0.15);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.5;
  flex-shrink: 0;
  margin-top: 2px;
}
.dash-intake-section-cta {
  font-size: 14px;
  font-weight: 500;
  color: var(--orange);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 12px;
  display: block;
}

/* ── Mini progress bar inside section cards ── */
.dash-intake-mini-progress {
  margin-top: 6px;
}
.dash-intake-mini-progress span {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.dash-intake-mini-bar {
  width: 100%;
  height: 4px;
  background: rgba(29, 26, 26, 0.1);
  border-radius: 999px;
  overflow: hidden;
}
.dash-intake-mini-fill {
  height: 100%;
  background: var(--orange);
  border-radius: 999px;
  transition: width 300ms ease-out;
}

/* ── Footer summary ── */
.dash-intake-summary {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(220, 182, 136, 0.2);
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-secondary);
}

/* ── Question flow ── */
.dash-intake-questions {
  max-width: 100%;
  padding: 0 0 48px;
}

.dash-intake-back-link {
  display: inline-block;
  margin-bottom: 16px;
  padding: 0 24px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.dash-intake-back-link:hover {
  color: var(--text-primary);
}

.dash-intake-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 0 24px;
}
.dash-intake-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 150ms;
}
.dash-intake-nav-btn:hover:not(:disabled) {
  color: var(--font);
}
.dash-intake-nav-btn:disabled {
  color: rgba(29, 26, 26, 0.25);
  cursor: default;
}
.dash-intake-section-center {
  flex: 1;
  min-width: 0;
}
.dash-intake-section-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.dash-intake-section-progress-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--font);
}
.dash-intake-section-est-time {
  font-size: 13px;
  color: var(--text-secondary);
}


.dash-intake-question-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 28rem;
  margin: 0 auto;
  padding: 0 24px;
}

.dash-intake-question {
  padding: 20px 0;
  border-bottom: 1px solid rgba(220, 182, 136, 0.15);
}
.dash-intake-question:last-child {
  border-bottom: none;
}

.dash-intake-question-text {
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 4px;
  line-height: 1.4;
  color: var(--font);
}
.dash-intake-question-text::after {
  content: "";
}
.dash-intake-question.required .dash-intake-question-text::after {
  content: " *";
  color: var(--warning);
}

.dash-intake-question-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 16px;
  line-height: 1.5;
}

/* ── Options (radio / checkbox) ── */
.dash-intake-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.dash-intake-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid rgba(220, 182, 136, 0.2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
  font-size: 15px;
  line-height: 1.4;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
}
/* Hover lifts the row and warms its edge; it never tints toward the cream
   the page is painted in, which made hovered rows vanish (Pavel, 2026-09-03). */
.dash-intake-option:hover {
  background: var(--surface);
  border-color: var(--orange-300, #FFB791);
  box-shadow: 0 6px 16px rgba(20,30,50,0.10);
}
.dash-intake-option:has(input:checked) {
  border-color: var(--orange);
  background: rgba(232, 126, 58, 0.08);
}
/* Hide native inputs — visual state shown via .dash-intake-check-circle */
.dash-intake-option input[type="radio"],
.dash-intake-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* Custom circle indicator */
.dash-intake-check-circle {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  border: 2px solid rgba(29, 26, 26, 0.25);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: background 150ms, border-color 150ms;
}
.dash-intake-check-circle svg {
  width: 12px;
  height: 12px;
  opacity: 0;
  transition: opacity 150ms;
}
/* Checked state */
.dash-intake-option:has(input:checked) .dash-intake-check-circle,
.dash-intake-option:has(input:checked) .dash-intake-check-square {
  background: var(--orange);
  border-color: var(--orange);
}
.dash-intake-option:has(input:checked) .dash-intake-check-circle svg,
.dash-intake-option:has(input:checked) .dash-intake-check-square svg {
  opacity: 1;
}
/* Radio: filled circle instead of checkmark */
.dash-intake-option:has(input[type="radio"]:checked) .dash-intake-check-circle svg {
  display: none;
}
.dash-intake-option:has(input[type="radio"]:checked) .dash-intake-check-circle::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
/* Checkbox: square indicator with checkmark */
.dash-intake-check-square {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 4px;
  border: 2px solid rgba(29, 26, 26, 0.25);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: background 150ms, border-color 150ms;
}
.dash-intake-check-square svg {
  width: 12px;
  height: 12px;
  opacity: 0;
  transition: opacity 150ms;
}
.dash-intake-option > span {
  flex: 1;
}
/* ── Scale: horizontal number line ── */
.dash-intake-scale {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.dash-intake-scale-option {
  flex: 1 1 0;
  min-width: 32px;
  justify-content: center;
  padding: 10px 4px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid rgba(220, 182, 136, 0.2);
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
}
.dash-intake-scale-option:hover {
  background: var(--surface);
  border-color: var(--orange-300, #FFB791);
  box-shadow: 0 6px 16px rgba(20,30,50,0.10);
}
.dash-intake-scale-option:has(input:checked) {
  border-color: var(--orange);
  background: rgba(232, 126, 58, 0.08);
}
.dash-intake-scale-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.dash-intake-scale-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 4px;
  margin-bottom: 2px;
  font-size: 12px;
  color: var(--muted-fg, #888);
}
.dash-intake-scale-label-low {
  font-style: italic;
}
.dash-intake-scale-label-high {
  font-style: italic;
}
/* ── Question subtitle ── */
.dash-intake-question-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: -4px 0 0 0;
}
/* ── None-of-the-above option: greyed out when other options are selected ── */
.dash-intake-option-none.dash-intake-option-disabled {
  opacity: 0.45;
  cursor: default;
  background: var(--muted);
  border-color: rgba(220, 182, 136, 0.15);
}
.dash-intake-option-multi.dash-intake-option-none.dash-intake-option-disabled {
  pointer-events: none;
}
.dash-intake-option.dash-intake-option-disabled:not(.dash-intake-option-none) {
  opacity: 0.45;
  cursor: pointer;
}
.dash-intake-option-none.dash-intake-option-disabled .dash-intake-check-circle,
.dash-intake-option-none.dash-intake-option-disabled .dash-intake-check-square {
  border-color: rgba(29, 26, 26, 0.12);
}
.dash-intake-option-desc {
  font-size: 12px;
  color: var(--text-secondary);
  display: block;
  margin-top: 2px;
}

/* ── Text / number inputs ── */
.dash-intake-input {
  margin-top: 12px;
}
.dash-intake-textarea,
.dash-intake-text,
.dash-intake-number {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(220, 182, 136, 0.3);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  color: var(--font);
  background: var(--surface);
  transition: border-color 150ms;
  box-sizing: border-box;
}
.dash-intake-textarea:focus,
.dash-intake-text:focus,
.dash-intake-number:focus {
  outline: none;
  border-color: var(--orange);
}
.dash-intake-textarea {
  resize: vertical;
  min-height: 80px;
}
.dash-intake-number {
  max-width: 200px;
}

/* ── Date input with calendar icon ── */
.dash-intake-date-wrap {
  position: relative;
}
.dash-intake-date {
  width: 100%;
  padding: 12px 14px;
  padding-right: 44px;
  border: 1px solid rgba(220, 182, 136, 0.3);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  color: var(--font);
  background: var(--surface);
  transition: border-color 150ms;
  box-sizing: border-box;
}
/* Hide browser's native calendar icon */
.dash-intake-date::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}
.dash-intake-date:focus {
  outline: none;
  border-color: var(--orange);
}
.dash-intake-date-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: rgba(220, 182, 136, 0.6);
}
.dash-intake-date:focus ~ .dash-intake-date-icon {
  color: var(--orange);
}

/* ── Height/Weight compound input ── */
.dash-intake-height-weight {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dash-intake-unit-toggle {
  display: flex;
  gap: 4px;
  background: var(--bg);
  border-radius: 9999px;
  padding: 3px;
  width: fit-content;
}
.dash-intake-unit-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s;
}
.dash-intake-unit-btn.active {
  background: var(--orange);
  color: var(--brand-black);
  font-weight: 500;
}
.dash-intake-hw-inputs {
  position: relative;
}
.dash-intake-hw-field {
  align-items: center;
  gap: 6px;
}
.dash-intake-unit-label {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.dash-intake-hw-field .dash-intake-ft {
  width: 60px;
}
.dash-intake-hw-field .dash-intake-in {
  width: 60px;
}
.dash-intake-field {
  flex: 1;
}
.dash-intake-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* ── Scale (1-10) ──
   One row, always. The tiles have flex-basis 0 and NO minimum width, so the
   sum of their bases is 0 and the row never wraps whatever the count; the
   earlier 32px minimum made ten tiles overflow a 28rem column and "10"
   wrapped onto its own line as one wide button under "Very ready" (Pavel,
   2026-09-03). The end labels take a full line of their own above. */
.dash-intake-scale {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.dash-intake-scale .dash-intake-scale-labels { flex: 0 0 100%; }
.dash-intake-scale-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 8px 2px;
  border: 1px solid rgba(220, 182, 136, 0.2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex: 1;
  text-align: center;
  transition: background 150ms, border-color 150ms;
  font-size: 15px;
}
.dash-intake-scale-option:hover {
  background: var(--surface);
}
.dash-intake-scale-option input[type="radio"] {
  display: none;
}
.dash-intake-scale-option:has(input:checked) {
  background: var(--orange-tint);
  border-color: var(--orange);
  font-weight: 600;
}
.dash-intake-scale-option span {
  font-size: 16px;
  font-weight: 500;
}

/* ── Next / Complete button ── */
.dash-intake-next {
  display: block;
  width: 100%;
  padding: 14px 24px;
  margin-top: 20px;
  background: var(--orange);
  color: var(--brand-black);
  border: none;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 150ms, opacity 150ms;
}
/* Hover deepens the tone and the shadow; it does not rise. A button that
   lifts toward the pointer feels backwards (Pavel, 2026-09-03: "when you
   push a button it should go down a little bit, not up"); the press itself
   is the :active scale below. */
.dash-intake-next:hover:not(:disabled) {
  background: var(--orange-dark);
  box-shadow: 0 6px 16px rgba(255,136,76,0.30);
}
.dash-intake-next:disabled {
  opacity: 0.4;
  cursor: default;
}
.dash-intake-next:active:not(:disabled) {
  transform: scale(0.98);
}
.dash-intake-complete-btn {
  background: var(--success);
}
.dash-intake-complete-btn:hover:not(:disabled) {
  background: #3d6a4a;
}

/* ── Completion screen ── */
.dash-intake-complete {
  text-align: center;
  padding: 48px 24px;
}
.dash-intake-complete-icon {
  margin-bottom: 16px;
}
.dash-intake-complete-icon img {
  filter: invert(36%) sepia(50%) saturate(400%) hue-rotate(90deg);
}
.dash-intake-complete-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--font);
}
.dash-intake-complete-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0 0 24px;
}

/* ── Error state ── */
.dash-intake-error {
  text-align: center;
  padding: 48px 24px;
}
.dash-intake-error p {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0 0 16px;
}

/* ── Red flag alert ── */
.dash-intake-red-flag {
  background: rgba(196, 92, 74, 0.08);
  border: 1px solid rgba(196, 92, 74, 0.2);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--warning);
}

/* ── CTA button (for non-questionnaire intake types like account-setup) ── */
.dash-intake-cta-btn {
  display: inline-block;
  padding: 14px 32px;
  background: var(--orange);
  color: var(--brand-black);
  border: none;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms;
  margin-top: 16px;
}
.dash-intake-cta-btn:active { transform: scale(0.98); }
.dash-intake-cta-btn:hover {
  background: var(--orange-dark);
  box-shadow: 0 6px 16px rgba(255,136,76,0.30);
  text-decoration: none;
  color: var(--brand-black);
}

/* ── Conditional questions (hidden by default, shown by JS) ── */
.dash-intake-conditional {
  /* Hidden by default; intake.js shows them when conditions are met */
}
/* ── Account Setup Form ── */
/* ── Account setup: top bar (logo + skip link) ── */
.as-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.as-top-bar-logo {
  height: 30px;
  width: auto;
}
.as-skip-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 150ms;
}
.as-skip-link:hover {
  color: var(--font);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ══ ACCOUNT SETUP — desktop layout ══════════════════════════════════════
   Design source: mockups/transactional/account-setup-desktop.html.
   The page renders inside the dashboard shell now, so the v4 rail sits beside
   it on desktop; the form itself is a surface card centred in the content area.
   Below 900px the card flattens onto the page, which is the existing mobile
   look and is deliberately unchanged. */
.as-page { padding-bottom: 48px; }
.as-card {
  max-width: 680px; margin: 0 auto;
  background: var(--surface); border: 1px solid rgba(220,182,136,0.22);
  border-radius: 20px; padding: 40px 48px 44px;
}
.as-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.as-title { font-size: 26px; font-weight: 500; margin: 0; }
.as-subtitle { font-size: 15px; line-height: 1.55; color: var(--text-secondary); margin: 8px 0 28px; }
/* Small uppercase label opening each block. */
.as-section-label {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-secondary); margin: 0 0 14px;
}
.as-optional { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-secondary); margin-left: 6px; }
.as-optional::before { content: "\00b7"; margin-right: 6px; }
/* The photo card sits flat inside the setup card: one frame, not a card in a card. */
.as-card .dash-photo-card { border: 0; box-shadow: none; padding: 4px 0 0; background: transparent; }
.as-card .dash-photo-card + .dash-set-note { margin: 8px 0 22px; }
.as-section-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.as-section-row .as-section-label { margin: 0; }
.as-divider { height: 1px; background: rgba(220,182,136,0.25); margin: 30px 0 22px; }
/* Inside the card the form fills the width; its own 480px cap is a mobile-era
   constraint that left the desktop card half empty. */
.as-card .account-setup-form { max-width: none; padding: 0; }
/* A phone number stretched across 680px is what made the old desktop view feel
   unfinished — it takes the left half, matching the name row above it. */
.as-card .account-setup-field-half { width: calc(50% - 6px); }
.as-save-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.as-save-row .account-setup-submit { width: auto; min-width: 150px; margin: 0; }
.as-save-note { font-size: 13px; color: var(--text-secondary); margin: 0; }

@media (max-width: 899px) {
  /* Mobile keeps the current production look: no card, page background. */
  .as-card { max-width: none; background: none; border: 0; border-radius: 0; padding: 0; }
  .as-title { font-size: 22px; }
  .as-card .account-setup-field-half { width: 100%; }
  .as-save-row .account-setup-submit { width: 100%; }
  .as-save-note { text-align: center; width: 100%; }
}

.account-setup-form {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px;
}
.account-setup-row {
  display: flex;
  gap: 12px;
}
.account-setup-row > .account-setup-field {
  flex: 1;
  /* A flex item defaults to min-width:auto, which means it refuses to shrink
     below its content's intrinsic width. <input type="date"> has a wide
     intrinsic width on iOS — it sizes to the date it displays plus the picker
     affordance — so the Date of Birth field pushed its row off the side of the
     phone (Pavel, 2026-08-31). Everything in this row may shrink. */
  min-width: 0;
}
/* 20px, not 10px. At 10px a field's hint sat almost against the next field's
   label and the whole form read as one dense block — worst in the health-card
   section, where every field carries a hint (Pavel, 2026-08-31: "everything
   looks so crammed"). This is the form's whole vertical rhythm; the label/hint
   gaps below are tuned against it so a label always sits closer to its own
   field than to the field above. */
.account-setup-field {
  margin-bottom: 20px;
}
.account-setup-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--font);
  margin-bottom: 6px;
}
.account-setup-input {
  width: 100%;
  min-width: 0;
  /* Stated rather than left at `normal`, so every field in this form is the
     same 46px: 20 + 12 + 12 + 2 borders. A date input is measured against this
     below. */
  line-height: 20px;
  padding: 12px 16px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 9999px;
  font-size: 16px;
  font-family: inherit;
  color: var(--font);
  background: #fff;
  outline: none;
  transition: border-color 150ms;
  box-sizing: border-box;
}
.account-setup-input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,136,76,0.15);
}
.account-setup-input::placeholder {
  color: rgba(0,0,0,0.35);
}
/* iOS draws a date input with its own control metrics and it came out taller
   than the phone field beside it. Stripping the native appearance and stating
   the same height as every other field puts the two back on one line. */
input[type="date"].account-setup-input {
  -webkit-appearance: none;
  appearance: none;
  height: 46px;
  /* iOS centres a date input's value inside the field, so Date of Birth and
     Health card expiry sat centred in a form where every other value is left
     aligned (Pavel, 2026-08-31). text-align alone does not reach it — the value
     lives in a shadow pseudo-element and has to be told directly. */
  text-align: left;
}
input[type="date"].account-setup-input::-webkit-date-and-time-value {
  text-align: left;
}
/* Safari also lays that value out as an inline block that shrinks to its own
   text and then centres in the leftover room; making it fill the field is what
   actually pins it to the left edge. */
input[type="date"].account-setup-input::-webkit-datetime-edit {
  display: block;
  text-align: left;
}
/* NOTE: there is deliberately no rule stacking a date field on a phone.
   Stacking Date of Birth was a guess that half a phone's width would clip the
   picker's own text; Pavel's screenshot settles it — Expiry Date renders
   "Feb 12, 2031" comfortably in exactly that space on his phone. The real cause
   of the overflow was the missing min-width:0 above. Keeping every row two-up
   is what makes the four health-card fields line up into a grid. */
select.account-setup-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23666'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.account-setup-error {
  display: block;
  font-size: 12px;
  color: var(--warning);
  margin-top: 2px;
  min-height: 0;
}
.account-setup-hint {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.account-setup-toggle-field {
  margin-top: 8px;
  margin-bottom: 8px;
}
.account-setup-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--font);
}
.account-setup-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--orange);
  cursor: pointer;
}
.account-setup-dropdown {
  display: none;
  position: absolute;
  z-index: 100;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 16px;
  margin-top: 4px;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.account-setup-dropdown-item {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background 100ms;
}
.account-setup-dropdown-item:hover {
  background: rgba(255,136,76,0.08);
}
.account-setup-dropdown-item:last-child {
  border-bottom: none;
}
/* Health coverage notices under the card fields (go_app/dash_coverage.go, 2026-10-10) */
.as-cov { margin-top: 18px; padding: 16px 18px; border: 1px solid rgba(220,182,136,0.6); border-radius: 14px; background: var(--color-surface, #FFFEF6); }
.as-cov[hidden] { display: none; }
.as-cov-t { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--color-navy, #10293C); }
.as-cov-p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; color: var(--color-font, #292626); }
.as-cov-p[hidden] { display: none; }
.as-cov-p a { color: var(--color-navy, #10293C); text-decoration: underline; }
.as-cov-msg { margin: 8px 0 0; font-weight: 600; }
/* a saved health card is shown, not typed over (updated by a new photo or a message to the team) */
.account-setup-input[readonly], select.account-setup-input:disabled { background: rgba(16,41,60,.04); color: var(--text-secondary, #6B6560); cursor: default; }
.as-cov-choice, .as-cov-ack { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 0; font-size: 14.5px; line-height: 1.45; }
.as-cov-choice input, .as-cov-ack input { flex: 0 0 auto; margin-top: 2px; }
.account-setup-autowarn {
  display: none;
  padding: 8px 12px;
  margin-top: 6px;
  font-size: 12px;
  color: #8B6914;
  background: rgba(255,193,7,0.1);
  border: 1px solid rgba(255,193,7,0.25);
  border-radius: 9999px;
  line-height: 1.4;
}
.account-setup-address-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(74,124,89,0.08);
  border: 1px solid rgba(74,124,89,0.2);
  border-radius: 12px;
  margin-top: 8px;
  font-size: 14px;
  color: var(--font);
}
.account-setup-address-change {
  background: none;
  border: none;
  color: var(--orange);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}
.account-setup-address-change:hover {
  color: var(--orange-600);
}
.account-setup-submit {
  display: block;
  width: 100%;
  padding: 14px 24px;
  background: var(--orange);
  color: var(--brand-black);
  border: none;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 150ms;
  margin-top: 4px;
  margin-bottom: 24px;
}
.account-setup-submit:hover {
  background: var(--orange-dark);
}
.account-setup-submit:disabled {
  background: rgba(0,0,0,0.15);
  color: rgba(0,0,0,0.4);
  cursor: not-allowed;
}
.account-setup-form-error {
  padding: 12px 16px;
  background: rgba(196,92,74,0.1);
  border: 1px solid rgba(196,92,74,0.2);
  border-radius: 12px;
  color: var(--warning);
  font-size: 14px;
  margin-top: 16px;
}
.account-setup-field > .account-setup-input {
  position: relative;
}

/* ── Sex radio row ── */
.account-setup-radio-row {
  display: flex;
  gap: 10px;
}
.account-setup-radio {
.account-setup-field-locked .account-setup-radio { opacity: .6; cursor: default; }
.account-setup-field-locked .account-setup-radio:has(input:checked) { opacity: 1; }
.account-setup-sex-note a { color: var(--color-navy); }
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--font);
  padding: 10px 16px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 9999px;
  transition: border-color 150ms, background 150ms;
}
.account-setup-radio:has(input:checked) {
  border-color: var(--orange);
  background: rgba(255,136,76,0.06);
}
.account-setup-radio input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--orange);
  cursor: pointer;
  margin: 0;
}
.account-setup-sex-note {
  margin-top: 8px;
  padding: 10px 14px;
  background: rgba(74,124,89,0.06);
  border: 1px solid rgba(74,124,89,0.18);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.account-setup-sex-note p {
  margin: 0;
}

/* ── Address field needs position:relative for dropdown ── */
.account-setup-address-field {
  position: relative;
}

/* ── Health card scanner UI ── */
.account-setup-scan-section {
  margin-top: 12px;
  margin-bottom: 8px;
}
.account-setup-scan-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #fff;
  border: 1.5px dashed rgba(0,0,0,0.18);
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--font);
  font-family: inherit;
  width: 100%;
  text-align: left;
  transition: border-color 150ms, background 150ms;
}
.account-setup-scan-btn:hover {
  border-color: var(--orange);
  background: rgba(255,136,76,0.04);
}
.account-setup-scan-btn svg {
  flex-shrink: 0;
  color: var(--orange);
}
.account-setup-scan-btn-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.account-setup-scan-btn-primary {
  font-weight: 500;
  color: var(--font);
}
.account-setup-scan-btn-secondary {
  font-size: 12px;
  color: var(--text-secondary);
}
.account-setup-heading {
  font-size: 16px;
  font-weight: 500;
  color: var(--font);
  margin: 0 0 10px;
}
/* Name chooser (inside result area, matching app2) */
.as-scan-name-chooser {
  margin: 10px 0 0;
  padding: 10px;
  background: rgba(255,136,76,0.04);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
}
.as-scan-name-chooser-text {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--font);
}
.as-scan-name-chooser-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.as-scan-name-option {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 150ms;
}
.as-scan-name-option:hover {
  background: rgba(255,136,76,0.04);
}
.as-scan-name-option-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--font);
}
.as-scan-name-option-sub {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 1px;
}
/* ── Health card scanner (inline, inside form panel) ── */

/* Intro phase: scan button + links */
.as-scan-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.as-scan-start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  border: 1.5px solid var(--orange);
  color: var(--brand-black);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 150ms, border-color 150ms;
}
.as-scan-start-btn:hover {
  background: rgba(255,136,76,0.06);
}
.as-scan-gallery-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 6px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  text-underline-offset: 2px;
}
.as-scan-gallery-btn:hover {
  color: var(--font);
  text-decoration: underline;
}
.as-scan-gallery-btn svg {
  flex-shrink: 0;
}
.as-scan-manual-link {
  display: block;
  width: 100%;
  padding: 4px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  text-underline-offset: 2px;
}
.as-scan-manual-link:hover {
  color: var(--font);
  text-decoration: underline;
}

/* Camera phase: inline video with card frame */
/* .as-scan-camera visibility is managed by JS showPhase() via inline style */
.as-scan-video-container {
  position: relative;
}
.as-scan-video-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  aspect-ratio: 3/4;
  background: #000;
  overflow: hidden;
  border-radius: 12px;
}
.as-scan-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mirroring is applied via JS only for front-facing (user) cameras */
}
.as-scan-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  aspect-ratio: 85.6/53.98;
  max-height: 65%;
  pointer-events: none;
  /* Dim everything outside the frame */
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
  border: 2px solid #fff;
  border-radius: 10px;
}
.as-scan-frame-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--orange);
  border-style: solid;
  border-width: 0;
}
.as-scan-frame-tl { top: -1px; left: -1px; border-top-width: 3px; border-left-width: 3px; border-radius: 10px 0 0 0; }
.as-scan-frame-tr { top: -1px; right: -1px; border-top-width: 3px; border-right-width: 3px; border-radius: 0 10px 0 0; }
.as-scan-frame-bl { bottom: -1px; left: -1px; border-bottom-width: 3px; border-left-width: 3px; border-radius: 0 0 0 10px; }
.as-scan-frame-br { bottom: -1px; right: -1px; border-bottom-width: 3px; border-right-width: 3px; border-radius: 0 0 10px 0; }
.as-scan-instruction-top {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 16px;
  pointer-events: none;
}
.as-scan-instruction-label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.8);
}
.as-scan-instruction-detail {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.as-scan-instruction-bottom {
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 16px;
  pointer-events: none;
}
.as-scan-instruction-bottom p {
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Cancel button (top-left, translucent circle) */
.as-scan-cancel-btn {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 3;
  background: rgba(0,0,0,0.4);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: inherit;
  transition: background 150ms;
}
.as-scan-cancel-btn:hover {
  background: rgba(0,0,0,0.6);
}

/* Shutter button (bottom-center, orange circle) */
.as-scan-shutter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--brand-black);
  border: none;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.7);
  cursor: pointer;
  transition: transform 100ms;
  padding: 0;
  font-weight: 500;
}
.as-scan-shutter-btn:active {
  transform: translateX(-50%) scale(0.95);
}
.as-scan-shutter-btn:hover {
  opacity: 0.9;
}

/* File-input fallback */
.as-scan-file-wrap {
  display: none;
  padding: 28px 20px;
  text-align: center;
}
.as-scan-file-heading {
  font-size: 15px;
  font-weight: 500;
  color: var(--font);
  margin: 0 0 8px;
}
.as-scan-file-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 16px;
}
.as-scan-file-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--orange);
  color: var(--brand-black);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.as-scan-file-label:hover {
  opacity: 0.9;
}
.as-scan-back-btn {
  display: block;
  margin: 12px auto 0;
  padding: 8px 20px;
  background: none;
  border: 1.5px solid rgba(0,0,0,0.15);
  border-radius: 20px;
  color: var(--font);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.as-scan-back-btn:hover {
  background: rgba(0,0,0,0.04);
}

/* Reading phase */
/* .as-scan-reading visibility is managed by JS showPhase() via inline style */
.as-scan-reading {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background: #fff;
  padding: 16px;
  text-align: center;
  animation: as-fade-up 0.5s ease both;
}
.as-scan-reading-photo {
  max-width: 240px;
  margin: 0 auto 12px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.as-scan-reading-img {
  width: 100%;
  display: block;
  opacity: 0.6;
}
.as-scan-reading-info h4 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--font);
}
.as-scan-reading-info p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Result phase (success or error) */
/* .as-scan-result visibility is managed by JS showPhase() via inline style */
.as-scan-result {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  background: #fff;
  padding: 16px;
  /* It is followed immediately by the fields it just filled in; without this
     the card's border sat almost on the "Health Card Number" label. */
  margin-bottom: 18px;
  animation: as-fade-up 0.5s ease both;
}
.as-scan-result-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.as-scan-result-thumb {
  flex-shrink: 0;
  width: 84px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
}
.as-scan-result-thumb img {
  width: 100%;
  display: block;
}
.as-scan-result-info {
  flex: 1;
  min-width: 0;
}
.as-scan-result-title {
  font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
  color: var(--font);
}
.as-scan-result-detail {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-top: 4px;
}
/* A real 32px target, pulled back into the card's padding so the glyph still
   reads as sitting in the corner rather than floating inside the text. */
.as-scan-result-discard {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  margin: -6px -6px 0 0;
  padding: 0;
  border-radius: 50%;
  line-height: 1;
}
.as-scan-result-discard:hover {
  color: var(--font);
  background: rgba(0,0,0,0.04);
}
.as-scan-result-warn {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: rgba(196,92,74,0.08);
  border-radius: 8px;
  font-size: 13px;
  color: var(--font);
}
.as-scan-result-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.as-scan-retake-btn {
  flex: 1;
  padding: 10px;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--font);
  cursor: pointer;
  font-family: inherit;
}
.as-scan-retake-btn:hover {
  background: rgba(0,0,0,0.04);
}
/* On the success card the button follows the photo-and-text block directly, with no
   .as-scan-result-actions row to space it — flex:1 does nothing there because
   the parent is not a flex container, so it needs its own gap and a real
   horizontal padding rather than the 10px all round it inherits. */
.as-scan-result > .as-scan-retake-btn {
  margin-top: 16px;
  padding: 10px 18px;
}

@keyframes as-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.account-setup-or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.account-setup-or-divider::before,
.account-setup-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,0.1);
}
.account-setup-nudge {
  padding: 10px 14px;
  background: rgba(255,136,76,0.06);
  border: 1px solid rgba(255,136,76,0.15);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.5;
}
.account-setup-nudge strong {
  font-weight: 500;
  color: var(--font);
}

/* ── Multi-add list (medications, allergies, etc.) ── */
.dash-intake-multi-add {
  margin-top: 8px;
}
.dash-intake-ma-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.dash-intake-ma-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(220, 182, 136, 0.08);
  border: 1px solid rgba(220, 182, 136, 0.2);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--font);
}
.dash-intake-ma-item-name {
  font-weight: 500;
}
.dash-intake-ma-item-details {
  color: var(--text-secondary);
  font-size: 13px;
}
.dash-intake-ma-item-details::before {
  content: " · ";
}
.dash-intake-ma-remove {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 16px;
  line-height: 1;
  border-radius: 4px;
}
.dash-intake-ma-remove:hover {
  color: #c0392b;
  background: rgba(192, 57, 43, 0.08);
}
.dash-intake-ma-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-intake-ma-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.dash-intake-ma-field-wrap {
  position: relative;
  flex: 1;
  min-width: 160px;
}
.dash-intake-ma-input,
.dash-intake-ma-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(220, 182, 136, 0.3);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--font);
  background: var(--surface);
  transition: border-color 150ms;
  box-sizing: border-box;
}
.dash-intake-ma-input:focus,
.dash-intake-ma-select:focus {
  outline: none;
  border-color: var(--orange);
}
.dash-intake-ma-primary {
  min-width: 180px;
}
.dash-intake-ma-detail {
  width: auto;
  min-width: 100px;
  max-width: 140px;
}
.dash-intake-ma-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid rgba(220, 182, 136, 0.3);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  max-height: 180px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.dash-intake-ma-ac-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--font);
  border-bottom: 1px solid rgba(220, 182, 136, 0.1);
}
.dash-intake-ma-ac-item:last-child {
  border-bottom: none;
}
.dash-intake-ma-ac-item:hover,
.dash-intake-ma-ac-item.active {
  background: rgba(220, 182, 136, 0.12);
}
.dash-intake-ma-add-btn {
  background: none;
  border: 1.5px solid rgba(220, 182, 136, 0.4);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 20px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  transition: all 150ms;
  flex-shrink: 0;
  align-self: center;
}
.dash-intake-ma-add-btn:hover:not(:disabled) {
  border-color: var(--orange);
  color: var(--brand-black);
}
.dash-intake-ma-add-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.dash-intake-ma-none {
  background: none;
  border: 1px solid rgba(220, 182, 136, 0.3);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  color: var(--text-secondary);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: all 150ms;
  margin-top: 8px;
}
.dash-intake-ma-none:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.dash-intake-ma-none.active {
  border-color: var(--orange);
  background: rgba(232, 138, 56, 0.1);
  color: var(--orange);
  font-weight: 500;
}

/* ── Checkbox Grid (family history) ── */
.dash-intake-grid {
  margin-top: 12px;
  /* Break out of question padding so the grid can be wider */
  margin-left: -24px;
  margin-right: -24px;
  padding: 0 12px;
}

/* Desktop: table grid */
.dash-intake-grid-desktop {
  margin-top: 8px;
}

.dash-intake-grid-desktop table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 14px;
}

.dash-intake-grid-desktop thead th {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-secondary);
  text-align: center;
  padding: 4px 6px 8px;
  vertical-align: bottom;
}

.dash-intake-grid-desktop thead th:first-child {
  text-align: left;
  width: 35%;
}

.dash-intake-grid-desktop tbody tr {
  border-top: 1px solid rgba(220, 182, 136, 0.25);
}

.dash-intake-grid-desktop tbody td {
  padding: 10px 4px;
  text-align: center;
}

.dash-intake-grid-desktop tbody td:first-child {
  text-align: left;
  font-size: 14px;
  line-height: 1.35;
  color: var(--font);
  word-break: break-word;
}

.dash-intake-grid-cell {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.dash-intake-grid-check {
  width: 26px;
  height: 26px;
  margin: 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(29, 26, 26, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms, border-color 150ms;
}

.dash-intake-grid-cell.checked .dash-intake-grid-check {
  background: var(--orange);
  border-color: var(--orange);
}

.dash-intake-grid-cell.checked .dash-intake-grid-check::after {
  content: '';
  display: block;
  width: 8px;
  height: 5px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg);
  margin-top: -2px;
}

/* Mobile: card layout */
.dash-intake-grid-mobile {
  display: none;
}

.dash-intake-grid-card {
  padding: 14px;
  background: var(--surface);
  border: 1px solid rgba(220, 182, 136, 0.2);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

.dash-intake-grid-card:last-child {
  margin-bottom: 0;
}

.dash-intake-grid-card-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--font);
  margin-bottom: 10px;
}

.dash-intake-grid-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dash-intake-grid-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 16px;
  border-radius: 9999px;
  border: 1px solid rgba(220, 182, 136, 0.3);
  background: var(--muted);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms;
  -webkit-user-select: none;
  user-select: none;
}

.dash-intake-grid-pill:hover {
  background: rgba(232, 126, 58, 0.1);
  border-color: rgba(232, 126, 58, 0.3);
}

.dash-intake-grid-pill.active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--brand-black);
  font-weight: 500;
}

/* Responsive: show cards on mobile, table on desktop */
@media (max-width: 640px) {
  .dash-intake-grid-desktop { display: none; }
  .dash-intake-grid-mobile { display: block; }
  .dash-intake-grid { margin-left: 0; margin-right: 0; padding: 0; }
}
@media (min-width: 641px) {
  .dash-intake-grid-desktop { display: block; }
  .dash-intake-grid-mobile { display: none; }
}

/* ── Pathway list ── */

.dash-pathway-list {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px 48px;
}

.dash-pathway-header {
  margin-bottom: 24px;
}

.dash-pathway-title-main {
  font-size: 24px;
  font-weight: 600;
  color: var(--font);
  margin: 0 0 8px;
}

.dash-pathway-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.dash-pathway-section {
  margin-bottom: 24px;
}

.dash-pathway-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--orange);
  margin: 0 0 12px;
}

.dash-pathway-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow 150ms;
}

.dash-pathway-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.dash-pathway-card-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.dash-pathway-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.dash-pathway-icon-emoji {
  line-height: 1;
}

.dash-pathway-card-text {
  flex: 1;
  min-width: 0;
}

.dash-pathway-card-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--font);
  margin: 0 0 2px;
}

.dash-pathway-card-tagline {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.dash-pathway-divider {
  border: none;
  border-top: 1px solid rgba(220,182,136,0.2);
  margin: 16px 0;
}

.dash-pathway-includes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 4px;
}

.dash-pathway-include-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.dash-pathway-include-item svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--font);
}

.dash-pathway-expand-content {
  display: none;
}

.dash-pathway-card-expanded .dash-pathway-expand-content {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(220,182,136,0.2);
}

.dash-pathway-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 8px 0;
}

.dash-pathway-whofor {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 8px 0;
}

.dash-pathway-whofor strong {
  color: var(--font);
  font-weight: 500;
}

.dash-pathway-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-left: 4px;
}

.dash-pathway-price {
  font-size: 18px;
  font-weight: 600;
  color: var(--font);
}

.dash-pathway-price-unit {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-left: 4px;
}

.dash-pathway-included {
  font-size: 14px;
  font-weight: 500;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 4px;
}

.dash-pathway-expand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: rgba(29,26,26,0.6);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 150ms;
}

.dash-pathway-expand:hover {
  color: var(--font);
}

.dash-pathway-expand.active svg {
  transform: rotate(180deg);
}

.dash-pathway-expand svg {
  transition: transform 200ms;
}

.dash-pathway-cta-wrap {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(220,182,136,0.2);
}

.dash-pathway-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 24px;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  background: var(--orange);
  color: var(--brand-black);
  border: none;
  cursor: pointer;
  transition: background 150ms, opacity 150ms;
}

.dash-pathway-cta:hover {
  opacity: 0.9;
  color: white;
}

.dash-pathway-cta-secondary {
  background: transparent;
  color: var(--font);
  border: 1px solid rgba(29,26,26,0.2);
}

.dash-pathway-cta-secondary:hover {
  background: rgba(220,182,136,0.1);
  color: var(--font);
}

.dash-pathway-cta-disabled {
  background: rgba(29,26,26,0.1);
  color: var(--text-secondary);
  cursor: default;
  pointer-events: none;
}

.dash-pathway-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 32px 0;
  font-size: 14px;
}

.dash-pathway-error {
  text-align: center;
  color: var(--text-secondary);
  padding: 32px 0;
}

.dash-pathway-quiz {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px 48px;
}

.dash-pathway-quiz-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--font);
  margin: 0 0 8px;
}

.dash-pathway-quiz-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Pathway carousel (home page) ── */

.dash-pathway-carousel {
  margin-bottom: 24px;
}

.dash-pathway-carousel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 24px;
}

.dash-pathway-carousel-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--font);
  margin: 0;
}

.dash-pathway-carousel-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 150ms;
}

.dash-pathway-carousel-link:hover {
  color: var(--font);
}

.dash-pathway-carousel-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 24px 8px;
  scrollbar-width: none;
}

.dash-pathway-carousel-track::-webkit-scrollbar {
  display: none;
}

/* Treatment Program tiles, in the style of app.mycirclehealth.ca (Pavel, 2026-09-05), a little
   smaller: the photo at 80% over black, title and tagline at the top over a dark fade, an outlined
   "Explore" pill and the quiz length at the bottom over a soft blur. Phone: a swipeable row.
   Desktop (768px+): a grid that fills the column. No colour wash; light drop shadows only. */
.dash-pathway-tile {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  max-width: 220px;
  aspect-ratio: 4/5;
  border-radius: 20px;
  overflow: hidden;
  padding: 16px;
  scroll-snap-align: start;
  text-decoration: none;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  isolation: isolate;
  background-color: #000;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-card);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
/* the reference shows the photo at 80% over black so whites never blow out: a flat 20% black
   layer does the same here, under a top fade for the title and a bottom fade for the button */
.dash-pathway-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.66) 0%, rgba(0,0,0,.16) 34%, rgba(0,0,0,0) 50%),
    linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 32%),
    linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2));
}
.dash-pathway-tile:hover {
  color: #fff;
  box-shadow: var(--shadow-elevated), 0 12px 28px -14px rgba(16,41,60,.45);
}
.dash-pathway-tile:active {
  transform: scale(.98);
}
.dash-pathway-tile:focus-visible {
  outline: 3px solid var(--color-orange, #FF884C);
  outline-offset: 2px;
}
.dash-pathway-tile:hover,
.dash-pathway-tile:hover *,
.dash-pathway-tile:focus {
  text-decoration: none;
}
.dash-pathway-tile-head,
.dash-pathway-tile-foot {
  position: relative;
  z-index: 1;
  display: flex;
}
.dash-pathway-tile-head {
  flex-direction: column;
  gap: 5px;
}
.dash-pathway-tile-foot {
  margin-top: auto;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dash-pathway-tile-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  position: relative;
  z-index: 1;
}
.dash-pathway-tile-tagline {
  font-size: 13.5px;
  line-height: 1.35;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dash-pathway-tile-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding: 7px 12px 7px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.7);
  font-size: 13.5px;
  font-weight: 500;
  color: #fff;
  position: relative;
  z-index: 1;
  transition: border-color 150ms, background 150ms, transform 150ms;
}
.dash-pathway-tile:hover .dash-pathway-tile-cta {
  border-color: #fff;
  background: rgba(255,255,255,.12);
  transform: translateY(-2px);
}
.dash-pathway-tile-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  white-space: nowrap;
}
.dash-pathway-tile-owned {
  position: relative;
  opacity: 1;
}
.dash-pathway-tile-active {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #292626;
  background: rgba(255,254,246,.92);
  padding: 4px 10px;
  border-radius: 9999px;
  text-shadow: none;
}
.dash-pathway-tile-owned .dash-pathway-tile-head { padding-right: 76px; }

@media (min-width: 768px) {
  .dash-pathway-carousel-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    overflow: visible;
    scroll-snap-type: none;
    padding: 4px 24px 8px;
  }
  .dash-pathway-tile {
    min-width: 0;
    max-width: none;
    width: auto;
    aspect-ratio: 4/5;
  }
}
@media (min-width: 1200px) {
  .dash-pathway-tile { padding: 18px; }
  .dash-pathway-tile-title { font-size: 19px; }
}

/* ── Program introduction page (dash_pathway_intro_content) ── */
.dash-pintro { max-width: 60rem; margin: 0 auto; padding: 0 0 40px; }
.dash-pintro-back {
  display: inline-flex; align-items: center; gap: 4px; margin: 0 0 14px;
  font-size: 13.5px; font-weight: 500; color: var(--text-secondary); text-decoration: none;
}
.dash-pintro-back:hover { color: var(--font); text-decoration: none; }
.dash-pintro-hero { min-height: 260px; border-radius: 20px; }
.dash-pintro-hero .pathway-hero-body { padding: 96px 32px 32px; max-width: none; }
.dash-pintro-hero .pathway-results-title { font-size: 34px; }
.dash-pintro-sheet { margin-top: 0; padding: 22px 0 0; background: transparent; border-radius: 0; }
.dash-pintro-grid { max-width: none; }
@media (min-width: 900px) { .dash-pintro-grid { grid-template-columns: 1.15fr 1fr; } }
.dash-pintro-lead { margin: 6px 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.dash-pintro-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-pintro-chip {
  display: inline-block; padding: 6px 11px; border-radius: 9999px; font-size: 13px; font-weight: 500;
  color: var(--font); background: var(--cream); border: 1px solid rgba(220,182,136,.45);
}
.dash-pintro-how {
  margin: 16px 0 0; padding: 22px 24px 24px; background: var(--surface);
  border: 1px solid rgba(220,182,136,.28); border-radius: 18px;
}
.dash-pintro-steps { margin: 0; padding: 0 0 0 22px; }
.dash-pintro-steps li { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.dash-pintro-steps li b { font-weight: 500; color: var(--font); }
.dash-pintro-cta { margin-top: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.dash-pintro-btn {
  display: inline-flex; align-items: center; gap: 10px; width: auto; margin: 0;
  padding: 14px 22px; border-radius: 999px;
}
.dash-pintro-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(238,109,33,.6); }
.dash-pintro-btn-meta { font-size: 13px; font-weight: 500; opacity: .75; }
.dash-pintro-cta-note { margin: 0; font-size: 13px; color: var(--text-secondary); }
.dash-pintro .dash-pathway-owned-badge { display: inline-block; }
@media (max-width: 767px) {
  .dash-pintro-hero { min-height: 220px; border-radius: 16px; }
  .dash-pintro-hero .pathway-hero-body { padding: 72px 20px 24px; }
  .dash-pintro-hero .pathway-results-title { font-size: 28px; }
  .dash-pintro-how { padding: 18px 16px 20px; }
  .dash-pintro-btn { width: 100%; justify-content: center; }
}

/* profile dropdown: who is signed in, above Settings / Sign out */
.dash-profile-who { padding: 12px 16px 10px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid rgba(220,182,136,0.25); }
.dash-profile-name { font-size: 14px; font-weight: 600; color: var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-profile-email { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-profile-who + .dash-profile-item { border-top: none; }

/* ── Pathway Quiz (uses intake-style classes, minimal overrides) ── */
.pathway-step {
	margin-bottom: 0;
}

/* ── Pathway Results ── */
.pathway-results {
	padding: 32px 24px;
	max-width: 44rem;
	margin: 0 auto;
}
.pathway-results-label {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--orange);
	margin: 0 0 4px;
}
.pathway-results-title {
	font-size: 22px;
	font-weight: 600;
	color: var(--font);
	margin: 0 0 12px;
	line-height: 1.3;
}
.pathway-results-qualified {
	font-size: 14px;
	color: var(--text-secondary);
	margin: 0 0 16px;
}
.pathway-summary {
	margin: 0 0 16px;
}
.pathway-summary-text {
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.5;
}
.pathway-includes-card {
	background: var(--surface);
	border-radius: 12px;
	padding: 16px 20px;
	border: 1px solid rgba(220, 182, 136, 0.15);
	margin: 0 0 16px;
}
.pathway-includes-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--font);
	margin: 0 0 12px;
}
.pathway-includes-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.pathway-includes-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.5;
	padding: 4px 0;
}
.pathway-includes-check {
	color: var(--success);
	font-size: 13px;
	flex-shrink: 0;
	line-height: 1.5;
}

/* ── Pathway Two-Column Pricing ── */
.pathway-results-pricing {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin: 20px 0;
}
.pathway-pricing-col {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--surface);
	border-radius: 12px;
	padding: 20px;
	border: 1px solid rgba(220, 182, 136, 0.15);
}
.pathway-pricing-amount {
	font-size: 22px;
	font-weight: 700;
	color: var(--font);
	line-height: 1.2;
}
.pathway-pricing-recurring {
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.4;
	margin-bottom: 4px;
}
/* Mon|Year frequency toggle */
.pathway-frequency-toggle {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 12px;
	gap: 2px;
}
.pathway-freq-btn {
	background: none;
	border: none;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-secondary);
	padding: 2px 6px;
	cursor: pointer;
	transition: color 150ms;
	text-transform: lowercase;
}
.pathway-freq-btn:hover {
	color: var(--font);
}
.pathway-freq-active {
	color: var(--font);
	font-weight: 700;
}
.pathway-freq-divider {
	font-size: 12px;
	color: var(--text-secondary);
	padding: 0 2px;
}
/* Subplan plan selector */
.pathway-plan-select {
	margin-bottom: 16px;
}
.pathway-plan-select-label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-secondary);
	margin: 0 0 10px;
}
.pathway-plan-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	margin-bottom: 8px;
	border: 2px solid rgba(220, 182, 136, 0.2);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 150ms, background 150ms;
	-webkit-user-select: none;
	user-select: none;
}
.pathway-plan-option:hover {
	border-color: rgba(220, 182, 136, 0.5);
	background: var(--surface);
}
.pathway-plan-option-selected,
.pathway-plan-option:has(input:checked) {
	border-color: var(--orange);
	background: rgba(232, 126, 58, 0.08);
}
.pathway-plan-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}
.pathway-plan-option .pathway-plan-radio {
	width: 20px;
	height: 20px;
	min-width: 20px;
	border-radius: 50%;
	border: 2px solid rgba(29, 26, 26, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
	transition: border-color 150ms, background 150ms;
}
.pathway-plan-option-selected .pathway-plan-radio,
.pathway-plan-option:has(input:checked) .pathway-plan-radio {
	border-color: var(--orange);
	background: var(--orange);
}
.pathway-plan-option-selected .pathway-plan-radio::after,
.pathway-plan-option:has(input:checked) .pathway-plan-radio::after {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}
.pathway-plan-option-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.pathway-plan-option-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--font);
	line-height: 1.3;
}
.pathway-plan-option-prefix {
	font-size: 11px;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.pathway-plan-option-price {
	font-size: 13px;
	color: var(--text-secondary);
}
.pathway-plan-option-tagline {
	font-size: 12px;
	color: var(--text-secondary);
	line-height: 1.4;
}
.pathway-plan-option-pending {
	cursor: default;
	opacity: 0.6;
	pointer-events: none;
}
.pathway-plan-option-pending:hover {
	border-color: rgba(220, 182, 136, 0.2);
	background: transparent;
}
.pathway-plan-option-info .dash-sidebar-badge {
	margin-left: 6px;
	vertical-align: middle;
}
.pathway-pricing-includes-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.pathway-pricing-includes-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.5;
	padding: 6px 0;
}
.pathway-pricing-check {
	color: var(--success);
	font-size: 14px;
	flex-shrink: 0;
	line-height: 1.5;
}
.pathway-pricing-disclaimer {
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.5;
	margin: 6px 0 0;
}
.pathway-pricing-membership-badge {
	font-size: 12px;
	color: var(--success);
	font-weight: 600;
	margin-top: 8px;
}
.pathway-upgrade-badge {
	font-size: 13px;
	color: var(--orange);
	font-weight: 600;
	margin-bottom: 4px;
}
.pathway-checkout-upgrade-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	margin-bottom: 16px;
	background: rgba(220, 182, 136, 0.12);
	border: 1px solid var(--orange);
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--font);
}
.pathway-checkout-upgrade-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--orange);
	color: #fff;
	font-size: 14px;
	flex-shrink: 0;
}
.pathway-upsell-card {
	margin-top: 16px;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: 8px;
}
.pathway-upsell-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--font);
	margin: 0 0 12px 0;
}
.pathway-upsell-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid var(--border);
}
.pathway-upsell-item:last-child {
	border-bottom: none;
}
.pathway-upsell-item input[type="checkbox"] {
	accent-color: var(--orange);
	width: 16px;
	height: 16px;
}
.pathway-upsell-item-name {
	flex: 1;
	font-size: 14px;
	color: var(--font);
}
.pathway-upsell-item-cost {
	font-size: 14px;
	font-weight: 500;
	color: var(--font);
}
@media (max-width: 600px) {
	.pathway-results-pricing {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}
.pathway-pricing {
	margin: 0 0 8px;
	background: var(--surface);
	border-radius: 12px;
	padding: 16px 20px;
	border: 1px solid rgba(220, 182, 136, 0.15);
}
.pathway-price {
	font-size: 24px;
	font-weight: 700;
	color: var(--font);
}
.pathway-checkout-btn {
	display: block;
	width: 100%;
	padding: 14px 24px;
	background: var(--orange);
	color: var(--brand-black);
	border: none;
	border-radius: var(--radius);
	font-size: 16px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s;
	margin-top: 20px;
}
.pathway-checkout-btn:hover {
	background: var(--orange-dark);
}

/* ── Pathway Checkout Steps ── */
.pathway-checkout-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 0 0 32px;
	padding: 0;
}
.pathway-checkout-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.pathway-checkout-step-num {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	background: var(--surface);
	color: var(--text-secondary);
	border: 2px solid var(--border);
	transition: all 0.2s;
}
.pathway-checkout-step.active .pathway-checkout-step-num {
	background: var(--orange);
	color: #fff;
	border-color: var(--orange);
}
.pathway-checkout-step.completed .pathway-checkout-step-num {
	background: var(--success);
	color: #fff;
	border-color: var(--success);
}
.pathway-checkout-step-label {
	font-size: 12px;
	color: var(--text-secondary);
	font-weight: 500;
}
.pathway-checkout-step.active .pathway-checkout-step-label {
	color: var(--font);
	font-weight: 600;
}
.pathway-checkout-step.completed .pathway-checkout-step-label {
	color: var(--success);
}
.pathway-checkout-step-line {
	flex: 1;
	height: 2px;
	background: var(--border);
	min-width: 24px;
	max-width: 48px;
	margin: 0 8px;
	align-self: center;
	margin-bottom: 20px;
}
.pathway-checkout-content {
	max-width: 28rem;
	margin: 0 auto;
	padding: 0 24px 32px;
}
.pathway-checkout-step-title {
	font-size: 22px;
	font-weight: 600;
	color: var(--font);
	margin: 0 0 8px;
}
.pathway-checkout-tagline {
	font-size: 15px;
	color: var(--text-secondary);
	margin: 0 0 20px;
}
.pathway-price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	font-size: 15px;
	color: var(--text-secondary);
}
.pathway-price-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0 0;
	margin-top: 8px;
	border-top: 1px solid var(--border);
	font-size: 17px;
	font-weight: 600;
	color: var(--font);
}
.pathway-price-subtotal {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 0;
	font-size: 15px;
	color: var(--text-secondary);
	border-top: 1px dashed var(--border);
}
.pathway-price-hst {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 0;
	font-size: 14px;
	color: var(--text-secondary);
}
.pathway-price-credit {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	font-size: 15px;
	color: var(--success, #22c55e);
}
.pathway-price-credit span:last-child {
	color: var(--success, #22c55e);
	font-weight: 500;
}
.pathway-credit-abbr {
	text-decoration: none;
	border-bottom: none;
	cursor: help;
	color: var(--success, #22c55e);
	white-space: nowrap;
}
.pathway-credit-abbr:hover {
	text-decoration: underline dotted;
}
.pathway-credit-icon {
	width: 14px;
	height: 14px;
	vertical-align: middle;
	margin-left: 4px;
	opacity: 0.7;
	display: inline;
}
.pathway-price-group-separator {
	height: 1px;
	background: var(--border);
	margin: 16px 0 8px;
}
.pathway-price-group-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--font);
	padding: 0 0 4px;
}
.pathway-payment-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	background: var(--surface);
	border-radius: 12px;
	border: 1px solid rgba(220,182,136,0.15);
	margin-bottom: 20px;
	font-size: 18px;
	font-weight: 700;
	color: var(--font);
}
.pathway-pay-btn {
	margin-top: 12px;
}
.pathway-pay-btn.processing {
	opacity: 0.7;
	cursor: not-allowed;
}
.pathway-pay-secure {
	text-align: center;
	font-size: 13px;
	color: var(--text-secondary);
	margin: 12px 0 0;
}
.pathway-loading {
	color: var(--text-secondary);
	font-style: italic;
}

/* ── Pathway Success ── */
.pathway-success {
	text-align: center;
	padding: 32px 0;
}
.pathway-success-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--success);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	margin: 0 auto 16px;
}
.pathway-success-title {
	font-size: 22px;
	font-weight: 600;
	color: var(--font);
	margin: 0 0 8px;
}
.pathway-success-text {
	font-size: 15px;
	color: var(--text-secondary);
	margin: 0 0 24px;
}

/* ── Pathway Error ── */
.pathway-error {
	display: none;
	background: #fee;
	border: 1px solid #c00;
	border-radius: var(--radius);
	padding: 12px 16px;
	color: #c00;
	font-size: 14px;
	margin: 16px 0;
}

/* ── Pathway Owned Badge ── */
.dash-pathway-owned-badge {
	display: inline-block;
	background: var(--success);
	color: #fff;
	padding: 4px 12px;
	border-radius: 9999px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 12px;
}


/* ── My Pathway (owned) content panel ── */
.dash-mypathway {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px;
}
.dash-mypathway-header {
  text-align: center;
  padding: 32px 0 24px;
}
.dash-mypathway-badge {
  display: inline-block;
  background: #16a34a;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.dash-mypathway-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--font);
  margin: 0 0 8px;
}
.dash-mypathway-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

/* Revise answers link */
.pathway-revise-answers {
	margin: 8px 0 12px;
	font-size: 13px;
}
.pathway-revise-answers a {
	color: var(--text-secondary);
	text-decoration: underline;
}
.pathway-revise-answers a:hover {
	color: var(--font);
}

/* ══════════════════════════════════════════════════════════════════════════
   MEMBERSHIP PURCHASE FLOW  (3 steps: Why Circle · Your plan · Checkout)

   Design source: mockups/membership/membership-step{1,2,3}-*.html.
   Markup: dash_membership_step_1 in dash_main.go, dash_membership_step_2 and
   dash_membership_checkout_review_content in dash_membership_checkout.go.

   The shared shape across all three steps: one page-width column on a phone;
   at 820px it splits into content + a sticky rail on the right that carries the
   price and the single action. Class names are kept from the previous flow
   wherever membership.js addresses them — restyled, not renamed.

   Font: the dashboard runs Inter, so this flow does too. The mocks are drawn in
   CircularXX; switching the whole dashboard over is a separate decision.
   ══════════════════════════════════════════════════════════════════════════ */

#membership-flow {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 4px 64px;
}
.membership-back-link {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 4px 0 10px; padding: 4px;
  color: var(--text-secondary); font-size: 14px; text-decoration: none;
}
.membership-back-link:hover { color: var(--font); text-decoration: none; }
/* Desktop only, and only outside fullscreen — where the floating pill exists.
   Cancel the container's top padding and stand as tall as the pill, so this
   link's centre lands on the bell's centre. Derived from the pill's own tokens
   rather than a fixed number, so changing either keeps the two in line. */
@media (min-width: 768px) {
  body:not(.dash-fullscreen) .membership-back-link {
    height: var(--topbar-pill-h); padding: 0 4px;
    margin: calc(var(--topbar-top) - var(--dash-main-pt, 48px)) 0 18px;
  }
}
.membership-chev { font-size: 20px; line-height: 1; display: inline-block; }

/* ── Step header: back · label/name · progress ───────────────────────────── */
.membership-step-header { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.membership-back-btn {
  width: 30px; height: 30px; flex: none; padding: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--font); font-family: inherit;
}
.membership-back-btn:hover:not(:disabled) { background: rgba(41,38,38,0.06); }
.membership-back-btn:disabled { opacity: 0.3; cursor: default; }
.membership-step-header-content { flex: 1; min-width: 0; }
.membership-step-header-row {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px;
}
.membership-step-label { font-size: 14px; font-weight: 500; }
.membership-step-title { font-size: 14px; color: var(--text-secondary); }
#membership-flow .dash-intake-progress-track {
  height: 4px; border-radius: 999px; background: rgba(41,38,38,0.1); overflow: hidden;
}
#membership-flow .dash-intake-progress-fill {
  height: 100%; border-radius: 999px; background: var(--orange); transition: width 240ms;
}

/* ── The two-column shape shared by all three steps ──────────────────────── */
.membership-grid { display: grid; gap: 0; }
.membership-col-main { min-width: 0; }
.membership-rail { display: flex; flex-direction: column; }

@media (min-width: 820px) {
  .membership-grid {
    grid-template-columns: 1fr minmax(320px, 360px);
    column-gap: 36px; align-items: start; margin-top: 20px;
  }
  .membership-rail { position: sticky; top: 20px; }
  .membership-col-main > .membership-plans { margin-top: 0; }
  .membership-rail > .membership-card:first-child,
  .membership-col-main > .membership-card:first-child,
  .membership-col-main > .membership-plain:first-child { margin-top: 0; }
  /* The summary sits inside a per-plan panel div, so the reset above never
     reached it — its own 20px was the offset against the first plan card. */
  .membership-rail > .membership-pricing-panel > .membership-summary { margin-top: 0; }
}

/* ── Shared furniture ────────────────────────────────────────────────────── */
.membership-h1 { font-size: 24px; font-weight: 500; margin: 0; }
.membership-subline { color: var(--text-secondary); font-size: 14px; margin: 4px 0 0; }
.membership-pill {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: 2px 8px; font-size: 12px; font-weight: 500;
  background: rgba(255,136,76,0.12); color: var(--orange-600);
  border: 1px solid var(--orange-600);
}
.membership-card, .membership-summary {
  background: var(--surface); border: 1px solid rgba(220,182,136,0.2);
  border-radius: 16px; box-shadow: var(--shadow-card); padding: 20px; margin-top: 14px;
}
.membership-plain {
  background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-card);
  padding: 20px; margin-top: 14px;
}
/* Colour, weight and every interaction state come from the component in
   components.css; only this button's placement in the rail lives here. */
.membership-btn { margin-top: 20px; }
.membership-kicker {
  font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-secondary); margin: 0 0 10px;
}
/* Feature list — one shape, used on step 2's summary and step 3's includes. */
.membership-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.membership-feats li { display: flex; gap: 8px; font-size: 14px; line-height: 1.45; }
.membership-feat-check { width: 14px; height: 14px; flex: none; margin-top: 4px; display: block; }
.membership-cancel { color: var(--text-secondary); font-size: 14px; margin: 14px 0 0; }

/* ══ STEP 1 — Why Circle ═════════════════════════════════════════════════ */
.membership-eyebrow {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--orange-600); margin: 0;
}
/* Set in the brand face, upright — the headline carries the voice by weight and
   size, not by a change of typeface. */
.membership-headline {
  font-family: var(--font-brand); font-style: normal; font-weight: 500;
  font-size: clamp(34px, 3.6vw, 46px); line-height: 1.03; letter-spacing: -0.022em; margin: 12px 0 0;
  text-wrap: balance;
}
.membership-subtitle { color: var(--text-secondary); font-size: 16px; margin: 12px 0 0; }
/* The second subtitle line (Sapna, 2026-08-29) is the three-part promise that
   follows the official positioning sentence. It is tighter to the line above
   than that line is to the headline, so the two read as one paragraph pair
   rather than two unrelated statements. */
.membership-subtitle-2 { margin-top: 6px; color: var(--brand-black); font-weight: 500; }
/* The list reads as a list, not a stack of cards — no surface, no plate behind
   the icon. The extra row gap does the separating the card edges used to do. */
.membership-benefits { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }
.membership-benefit-row {
  display: flex; gap: 12px; align-items: flex-start;
}
.membership-benefit-icon {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  margin-top: 1px;
}
/* Source SVGs are stroked in brand orange; brightness(0) flattens that to black
   and invert(15%) lifts it back to the brand near-black (--font, #292626). */
.membership-benefit-img { width: 20px; height: 20px; display: block; filter: brightness(0) invert(15%); }
/* Capped so a bullet is a couple of short lines, not a paragraph. */
.membership-benefit-text { max-width: 420px; }
.membership-benefit-title { margin: 0; font-size: 16px; font-family: var(--font-brand); font-weight: 500; }
.membership-benefit-desc { margin: 2px 0 0; font-size: 16px; color: var(--text-secondary); }
.membership-pricecard {
  background: var(--surface); border: 1px solid rgba(220,182,136,0.2);
  border-radius: 16px; box-shadow: var(--shadow-card); padding: 20px;
}
/* On a phone Step 1 leads with the price and the button (Pavel, 2026-08-31).
   Above 820px the rail is a sticky column beside the case for joining, so it is
   visible the whole way down; stacked, it was underneath seven benefit rows and
   the member had to scroll the entire pitch before finding out what it costs or
   how to proceed. Step 1 only — Step 2 must open on the plans and Step 3 on
   what you are about to pay for. */
@media (max-width: 819px) {
  .membership-why .membership-rail { order: -1; margin-bottom: 26px; }
}
.membership-amt { font-size: 30px; font-weight: 500; margin: 8px 0 0; }
.membership-amt small { font-size: 16px; font-weight: 400; color: var(--text-secondary); }
.membership-amt-alt { color: var(--text-secondary); font-size: 14px; margin-left: 6px; }
.membership-fine { color: var(--text-secondary); font-size: 14px; margin: 8px 0 0; }

/* ══ STEP 2 — Your plan ══════════════════════════════════════════════════ */
/* One per row, at every width.
   The plans used to sit two-up between 400px and 819px, which on a phone gave
   each card about 190px to hold an icon, a name, a sub-line and a price with a
   "two months free" note under it — Family was cramped and ran off the screen
   (Pavel, iPhone, 2026-08-31). The reason they already stacked at >=820px is
   the same reason they should stack on a phone: side by side they are two
   narrow columns fighting for one glance. */
.membership-plans { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
/* .membership-type-bubble is the plan card. The class name predates this
   design and is what membership.js selects on — restyled, not renamed. */
.membership-type-bubble {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  color: var(--font); background: var(--surface);
  /* The resting border is transparent, not absent: it holds the 2px so the card
     does not resize when it becomes the selected one. */
  border: 2px solid transparent; border-radius: 16px;
  padding: 14px; cursor: pointer; font-family: inherit; box-shadow: var(--shadow-card);
}
.membership-type-bubble:hover { border-color: var(--orange-200); }
.membership-type-bubble-active,
.membership-type-bubble-active:hover {
  border-color: var(--orange); background: var(--orange-050); box-shadow: none;
}
.membership-plan-icon {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
}
/* Same treatment as the step-1 bullets: brightness(0) flattens the source
   stroke (navy, here) to black and invert(15%) lifts it to the brand
   near-black, so the filter holds whatever colour the asset ships with. */
.membership-plan-img { width: 20px; height: 20px; display: block; filter: brightness(0) invert(15%); }
.membership-plan-mid { flex: 1; min-width: 0; }
.membership-type-bubble-name { display: block; font-size: 14px; font-weight: 500; color: var(--font); }
.membership-plan-sub { font-size: 12px; color: var(--text-secondary); }
.membership-plan-price { font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--font); text-align: right; }
/* Sits under the yearly figure on the card, so the saving is visible while the
   choice is being made and not only in the summary. */
.membership-plan-free {
  display: block; font-size: 11.5px; font-weight: 500;
  color: var(--orange-600); margin-top: 2px;
}
/* The same line under the monthly price, invisible: it holds the height the
   annual price needs, so the card does not resize when the interval is
   switched. visibility, not display or opacity — it has to keep its box, and
   assistive tech already ignores it. */
.membership-plan-free-ghost { visibility: hidden; }
.membership-type-bubble-pending { cursor: default; opacity: 0.75; }
.membership-type-bubble-pending:hover { border-color: transparent; }

/* Billing interval */
/* Two cards side by side — no tray around them. The container read as a third
   surface stacked behind two more. */
.membership-freq-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 12px;
}
/* Both options have to look pressable. The mock draws the unselected one as
   transparent-on-transparent, which reads as a label rather than a choice —
   Pavel could not tell the other interval was clickable. It gets its own
   surface and border at rest, and lifts on hover; the selected one still wins
   on the orange border and the shadow. */
.membership-freq-tab {
  border: 2px solid transparent; border-radius: 16px; padding: 14px 10px;
  text-align: center; background: var(--surface);
  cursor: pointer; font-family: inherit; box-shadow: var(--shadow-card);
  transition: background 140ms, border-color 140ms;
}
.membership-freq-tab:hover { background: var(--surface); border-color: var(--orange-200); }
.membership-freq-tab:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.membership-freq-tab-active,
.membership-freq-tab-active:hover {
  border-color: var(--orange); background: var(--orange-050); box-shadow: none;
}
.membership-freq-title {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 14px; font-weight: 500; color: var(--text-secondary);
}
.membership-freq-tab-active .membership-freq-title { color: var(--font); }
/* 13px, not 11px: "Billed each month" / "Billed once a year" is the line that
   tells you what the tab above it actually does, and at 11px it was unreadable
   on a phone (Pavel, 2026-08-31). */
.membership-freq-sub { display: block; font-size: 13px; color: var(--text-secondary); margin-top: 3px; }
.membership-save-pill {
  display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 6px;
  font-size: 10px; font-weight: 500;
  background: rgba(74,124,89,0.12); color: var(--success); border: 1px solid rgba(74,124,89,0.35);
}
.membership-freq-divider { display: none; }

/* The summary card (one pre-rendered per plan × interval) */
.membership-summary { margin-top: 20px; }
/* Stacked: the founding-pricing pill sits above the plan name. */
.membership-summary-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.membership-summary-label {
  font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-secondary);
}
.membership-summary-amount { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; }
.membership-summary-big { font-size: 40px; font-weight: 500; line-height: 1; }
.membership-summary-per { font-size: 14px; color: var(--text-secondary); }
.membership-summary-sub { color: var(--text-secondary); font-size: 14px; margin: 6px 0 0; }
.membership-summary-rows { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.membership-summary-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--text-secondary);
}
.membership-summary-row span:last-child { font-variant-numeric: tabular-nums; color: var(--font); }
.membership-summary-row-credit span:last-child { color: var(--success); }
.membership-summary .membership-feats {
  padding-top: 16px; margin-top: 14px; border-top: 1px solid rgba(220,182,136,0.15);
}

/* ══ STEP 3 — Checkout ═══════════════════════════════════════════════════ */
.membership-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.membership-planname { font-size: 16px; font-weight: 500; margin: 0; }
.membership-planmeta { font-size: 14px; color: var(--text-secondary); margin: 2px 0 0; }
.membership-edit {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  border: 0; background: transparent; color: var(--text-secondary);
  font-family: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer; padding: 4px 8px; border-radius: 999px;
}
.membership-edit:hover { background: rgba(41,38,38,0.05); color: var(--font); }
.membership-edit-img { width: 12px; height: 12px; display: block; }
.membership-period {
  display: flex; gap: 8px; align-items: flex-start;
  border-top: 1px solid rgba(220,182,136,0.15); margin-top: 14px; padding-top: 14px;
}
.membership-period-img { width: 15px; height: 15px; flex: none; margin-top: 3px; display: block; }
.membership-period-text { font-size: 14px; }
.membership-period-top { color: var(--font); }
.membership-period-bot { color: var(--text-secondary); }
.membership-opensnote { color: var(--text-secondary); font-size: 12px; margin: 12px 0 0; }

/* Foundations Visit window — the one date on this page that is derived from
   how many people have paid, so it is called out rather than set in a row. */
.membership-callout {
  border: 1px solid rgba(232,200,88,0.7); background: #FBF3E2;
  border-radius: 16px; padding: 16px; margin-top: 14px; display: flex; gap: 12px;
}
.membership-callout-img { width: 18px; height: 18px; flex: none; margin-top: 3px; display: block; }
.membership-callout-title { font-size: 14px; font-weight: 500; margin: 0; }
.membership-callout-body { font-size: 13px; color: var(--text-secondary); margin: 2px 0 0; line-height: 1.45; }
.membership-callout-body b { color: var(--font); font-weight: 500; }

/* Cost breakdown */
.membership-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; margin-bottom: 10px; gap: 12px; }
.membership-line-lbl { color: var(--text-secondary); }
.membership-line-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.membership-line-credit .membership-line-val { color: var(--success); }
.membership-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border-top: 1px solid rgba(220,182,136,0.25); padding-top: 12px;
}
.membership-total-lbl { font-size: 16px; font-weight: 500; }
.membership-total-val { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.membership-renew { font-size: 12px; color: var(--text-secondary); margin: 12px 0 0; }
.membership-terms { text-align: center; font-size: 12px; color: var(--text-secondary); margin: 16px 0 0; }
.membership-terms a { color: var(--text-secondary); text-decoration: underline; }
.membership-trust {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-secondary); margin-top: 10px;
}
.membership-trust span { display: inline-flex; align-items: center; gap: 5px; }
.membership-trust-img { width: 12px; height: 12px; display: block; }
.membership-note { font-size: 13px; color: var(--text-secondary); margin: 10px 0 0; text-align: center; }
.membership-help { margin-top: 18px; }
.membership-help a { color: var(--color-navy); text-decoration: underline; text-underline-offset: 2px; }

/* Placeholder / error states */
.membership-step-placeholder {
  background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-card);
  padding: 24px; margin-top: 20px; text-align: center; color: var(--text-secondary);
}
.membership-checkout-receipt { text-align: center; padding: 32px 4px; max-width: 460px; margin: 0 auto; }

/* ══ POST-PAYMENT PAGE ═══════════════════════════════════════════════════
   What a member sees the moment the charge clears. Design source:
   mockups/transactional/post-payment-page.html. Markup:
   dash_membership_checkout_receipt_content() in dash_membership_checkout.go.
   Deliberately carries no price — the receipt has the numbers, and a priced
   surface would oblige the full uninsured-services disclaimer here too. */
/* 24px, not 64px, at the foot: .dash-main already pads the page and
   .dash-content reserves the whole bottom bar below that, so the old value was
   a third helping of the same space and left the FAQ line stranded a long way
   up the screen (Pavel, 2026-08-31). */
.thanks { max-width: 620px; margin: 0 auto; padding: 8px 4px 24px; }
.thanks-eyebrow {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--orange-600); margin: 0;
}
.thanks-head {
  font-family: var(--font-sans); font-style: normal; font-weight: 500;
  font-size: 40px; line-height: 1.05; margin: 12px 0 0;
}
.thanks-lede { font-size: 16px; line-height: 1.6; color: var(--text-secondary); margin: 14px 0 0; }
.thanks-lede strong { color: var(--font); font-weight: 500; }
.thanks-chip {
  display: inline-block; margin: 18px 0 0; padding: 5px 12px; border-radius: 999px;
  background: rgba(255,136,76,0.12); border: 1px solid rgba(255,136,76,0.35);
  color: var(--orange-600); font-size: 12.5px; font-weight: 500;
}
.thanks-kicker {
  font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-secondary); margin: 32px 0 10px;
}
.thanks-card {
  background: var(--surface); border: 1px solid rgba(220,182,136,0.3);
  border-radius: 16px; box-shadow: var(--shadow-card); padding: 20px;
}
.thanks-card-step {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--orange-600); margin: 0 0 6px;
}
.thanks-card-title { font-size: 18px; font-weight: 500; margin: 0; }
.thanks-card-body { font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); margin: 6px 0 0; }
/* A finished task stays on the page rather than vanishing — a page that drops
   a task silently looks like it lost it. */
.thanks-card-done { display: flex; gap: 12px; align-items: flex-start; background: rgba(74,124,89,0.06); border-color: rgba(74,124,89,0.3); }
.thanks-card-tick {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(74,124,89,0.14); display: grid; place-items: center; margin-top: 2px;
}
.thanks-tick-img { width: 14px; height: 14px; display: block; }

.thanks-timeline { display: flex; flex-direction: column; gap: 10px; }
.thanks-tl-row {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-card); padding: 16px 18px;
}
.thanks-tl-date {
  flex: none; width: 48px; text-align: center; border-radius: 12px;
  background: var(--navy); color: #fff; padding: 7px 0;
}
/* The month at 60% white on navy was the quiet half of a date badge whose whole
   job is to be read at a glance — "OCT" did not stand out (Pavel, 2026-08-31).
   At 92% it reads as part of the date; the day number still leads on size and
   weight, so the hierarchy survives. */
.thanks-tl-mon {
  display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.92);
}
.thanks-tl-day { display: block; font-size: 19px; font-weight: 500; line-height: 1.1; }
.thanks-tl-text { min-width: 0; }
.thanks-tl-title { font-size: 15.5px; font-weight: 500; margin: 0; }
.thanks-tl-body { font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin: 4px 0 0; }

.thanks-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
/* Both buttons come from components.css — .thanks-btn is the solid action,
   .thanks-btn-ghost the secondary variant. Only placement lives here. */
.thanks-card .thanks-btn { margin-top: 16px; }

.thanks-receipt { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); margin: 24px 0 0; }
.thanks-receipt strong { color: var(--font); font-weight: 500; }
/* It leaves the app for the marketing site, so it has to announce itself as a
   link before it is pressed — it was plain body text, and Pavel clicked it not
   knowing it would navigate. */
.thanks-receipt a {
  color: var(--orange-600); font-weight: 500;
  text-decoration: underline; text-underline-offset: 2px;
}
.thanks-receipt a:hover { color: var(--orange-700, var(--orange-600)); }
@media (min-width: 768px) {
  .thanks-head { font-size: 46px; }
  .thanks-actions { flex-direction: row; }
  .thanks-actions .thanks-btn { width: auto; flex: 1; }
}
.membership-receipt-mark {
  width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%;
  background: rgba(74,124,89,0.12); display: grid; place-items: center;
}
.membership-receipt-check { width: 26px; height: 26px; display: block; }
.membership-checkout-receipt .membership-subline { margin-top: 6px; }
.membership-receipt-callout { text-align: left; margin-top: 22px; }
.membership-receipt-btn { margin-top: 22px; }

/* ── Chat layout ── */

.chat-layout {
	display: flex;
	height: 100vh;
	min-height: 400px;
	overflow: hidden;
}

/* Left column: conversation list */
.chat-list {
	width: 30%;
	min-width: 240px;
	max-width: 360px;
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--border);
}

.chat-list-header {
	padding: 16px 20px;
	border-bottom: 1px solid var(--border);
}

.chat-list-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.chat-list-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--font);
	margin: 0;
}

/* Tabs: Circle Assistant vs Care Team mail-style threads */
.chat-list-tabs {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.chat-list-tab {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: 18px;
	background: var(--surface);
	color: var(--text-secondary);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-list-tab:hover {
	background: var(--bg);
	color: var(--font);
}

.chat-list-tab-active {
	background: var(--orange);
	border-color: var(--orange);
	color: #fff;
}

.chat-list-tab-active:hover {
	background: var(--orange);
	color: #fff;
}

/* Empty state for the Care Team list (mail-style threads stub) */
.chat-list-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 40px 24px;
	text-align: center;
	color: var(--text-secondary);
}

.chat-list-empty-icon {
	opacity: 0.35;
	margin-bottom: 4px;
}

.chat-list-empty-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--font);
}

.chat-list-empty-body {
	font-size: 13px;
	line-height: 1.5;
	margin: 0;
}

.chat-list-empty-note {
	font-size: 12px;
	margin: 0;
	color: var(--text-secondary);
	opacity: 0.8;
}

.chat-list-items {
	flex: 1;
	overflow-y: auto;
}

.chat-list-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 20px;
	cursor: pointer;
	transition: background 0.15s;
	border-bottom: 1px solid var(--border);
	position: relative;
}

.chat-list-item:hover {
	background: var(--bg);
}

.chat-list-item-active {
	background: rgba(232, 126, 58, 0.06);
}

.chat-list-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--font);
	flex-shrink: 0;
}

/* Assistant chats: orange-tinted badge with the sparkle mark (matches the
   right-pane header) instead of initials derived from the chat title */
.chat-list-avatar-assistant {
	background: rgba(232, 126, 58, 0.18);
}

.chat-list-item-content {
	flex: 1;
	min-width: 0;
}

.chat-list-item-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.chat-list-item-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--font);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-list-item-time {
	font-size: 12px;
	color: var(--text-secondary);
	flex-shrink: 0;
}

.chat-list-item-preview {
	font-size: 13px;
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
}

.chat-list-item-badge {
	background: var(--orange);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	min-width: 18px;
	height: 18px;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	flex-shrink: 0;
}
.chat-list-item-delete {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	opacity: 0;
	transition: opacity 0.15s;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--text-secondary);
	padding: 4px;
	line-height: 1;
	font-size: 16px;
}
.chat-list-item:hover .chat-list-item-delete {
	opacity: 1;
}
.chat-list-item-delete:hover {
	color: #e74c3c;
}

/* Right column: chat window */
.chat-window {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.chat-window-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--border);
	background: var(--surface);
}

.chat-back-btn {
	display: none;
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	color: var(--text-secondary);
	border-radius: 50%;
	transition: background 0.15s, color 0.15s;
}

.chat-back-btn:hover {
	background: var(--bg);
	color: var(--font);
}

.chat-window-header-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--orange);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.chat-window-header-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.chat-window-header-title {
	font-size: 15px;
	color: var(--font);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-window-header-title b {
	font-weight: 600;
}

.chat-window-header-sep {
	color: var(--text-secondary);
	margin: 0 4px;
}

.chat-window-header-chatname {
	font-style: italic;
	color: var(--font);
}

.chat-window-header-subtitle {
	font-size: 12px;
	color: var(--text-secondary);
}

.chat-window-header-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--font);
}

.chat-window-header-status {
	font-size: 12px;
	color: var(--success, #22c55e);
}

/* Dashboard chat input area — full-width bottom bar with rounded textarea + send icon */
.dash-chat-input-area {
	padding: 12px 16px;
	border-top: 1px solid var(--border);
	background: var(--surface);
	flex-shrink: 0;
}
.dash-chat-input-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}
.dash-chat-input {
	flex: 1;
	min-height: 40px;
	max-height: 120px;
	height: auto;
	padding: 8px 16px;
	border: 1px solid var(--border);
	border-radius: 20px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	resize: none;
	outline: none;
	background: var(--bg);
	color: var(--font);
	overflow-y: auto;
	box-sizing: border-box;
}
.dash-chat-input:focus {
	border-color: var(--orange);
}
.dash-chat-input::placeholder {
	color: var(--text-secondary);
}
.dash-chat-send-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: var(--orange);
	color: var(--brand-black);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s;
  font-weight: 500;
}
.dash-chat-send-btn:hover {
	background: var(--orange-dark);
}

/* New chat button */
.chat-new-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: var(--orange);
	color: var(--brand-black);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s;
  font-weight: 500;
}

.chat-new-btn:hover {
	background: var(--orange-dark);
}

/* Locked + button while the Care Team tab is active: greyed out, with a
   "Coming soon" hint on hover (care-team compose is a stub for now) */
.chat-new-btn-locked {
	position: relative;
	background: var(--border);
	color: var(--text-secondary);
	cursor: not-allowed;
}

.chat-new-btn-locked:hover {
	background: var(--border);
}

/* "Coming soon" hint — only while hovering the locked + button */
.chat-new-btn-locked:hover::after {
	content: 'Coming soon';
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	background: var(--brand-black);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 6px;
	white-space: nowrap;
	z-index: 20;
	pointer-events: none;
}

/* Chat window empty state */
.chat-window-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: 12px;
	color: var(--text-secondary);
}

/* Cap the empty-state copy to a comfortable measure so long lines don't
   span the full pane width (mobile included) */
.chat-window-empty p {
	max-width: 440px;
	margin: 0;
	line-height: 1.55;
}

.chat-window-empty .chat-window-empty-note {
	font-size: 12px;
	opacity: 0.8;
	margin-top: -4px;
}
	text-align: center;
	padding: 40px;
}

.chat-window-empty p {
	margin: 0;
	font-size: 14px;
}

/* New chat welcome panel */
.chat-new-welcome {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32px 24px 16px;
	text-align: center;
}
.chat-new-privacy {
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.5;
	max-width: 480px;
	margin-bottom: 24px;
}
.chat-new-privacy-icon {
	display: inline;
	width: 14px;
	height: 14px;
	vertical-align: middle;
	margin-right: 4px;
	filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(20deg) brightness(98%) contrast(97%);
}
.chat-new-prompts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 16px;
}
.chat-new-prompt-tag {
	padding: 6px 14px;
	border: 1px solid var(--orange);
	border-radius: 16px;
	background: var(--surface);
	color: var(--orange);
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.chat-new-prompt-tag:hover {
	background: var(--orange);
	color: var(--brand-black);
	border-color: var(--orange);
}
.chat-new-prompt-tag:hover svg {
	stroke: #fff;
}
.chat-new-prompt-tag svg {
	flex-shrink: 0;
	transition: stroke 0.15s;
}

/* Buttons inside agent response bubbles (appt booking, etc.) */
.botchatbubble.from_agent button {
	padding: 10px 38px 10px 18px;
	border: 1px solid var(--orange);
	border-radius: 20px;
	background-color: var(--surface);
	background-image: url('/dashboard/imgs/icons/chevron-right.svg');
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px 14px;
	color: var(--brand-black);
	font-size: 14px;
	font-family: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
	display: inline-flex;
	align-items: center;
	margin: 4px 2px;
	line-height: 1.4;
}

.botchatbubble.from_agent button:hover {
	background-color: var(--orange);
	background-image: url('/dashboard/imgs/icons/chevron-right-white.svg');
	color: var(--brand-black);
	border-color: var(--orange);
}

/* Chat window content area — XHR-injected botchat goes here */
.chat-window-content {
	flex: 1;
	overflow-y: auto;
}

/* Chat list pagination */
.chat-list-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 12px 20px;
	border-top: 1px solid var(--border);
	font-size: 13px;
	color: var(--text-secondary);
}

.chat-list-pager-link {
	color: var(--orange);
	text-decoration: none;
	cursor: pointer;
	font-weight: 500;
}

.chat-list-pager-link:hover {
	text-decoration: underline;
}

.chat-list-pager-info {
	color: var(--text-secondary);
}

/* ── Chat responsive: mobile ── */
@media (max-width: 767px) {
	.chat-layout {
		height: calc(100vh - var(--topbar-h, 56px) - var(--bottomnav-h, 56px));
	}

	.chat-list {
		width: 100%;
		max-width: none;
		border-right: none;
	}

	.chat-list-header {
		padding: 10px 16px;
	}

	.chat-window {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		background: var(--surface);
	}

	.chat-window.chat-window-visible {
		display: flex;
	}

	.chat-back-btn {
		display: flex;
	}

	.chat-list.chat-list-hidden {
		display: none;
	}

	.dash-chat-input-area {
		padding: 12px;
	}
}

/* Chat layout needs to fill full height — strip ancestor padding and min-height */
.dash-content:has(.chat-layout) {
	min-height: 0 !important;
	padding: var(--topbar-h) 0 var(--bottomnav-h) 0 !important;
}
@media (min-width: 768px) {
	.dash-content:has(.chat-layout) {
		padding: 0 0 0 var(--sidebar-w) !important;
	}
}
.dash-container:has(.chat-layout) {
	padding: 0 !important;
	max-width: none !important;
}
.dash-main:has(.chat-layout) {
	padding: 0 !important;
	max-width: none !important;
}

/* ── Botchat content (injected via XHR from showbotchat/newbotchat) ── */
.chat-window-content .section {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
	margin: 0;
}
.chat-window-content .sectiontitle {
	display: none; /* title is shown in the chat-window-header */
}
.chat-window-content .inputrow {
	display: none; /* model info hidden in dashboard context */
}
.chat-window-content .botchatbubble {
	padding: 10px 16px;
	border-radius: 16px;
	font-size: 14px;
	line-height: 1.5;
	max-width: 80%;
	margin: 6px 0 10px;
	word-wrap: break-word;
}
.chat-window-content .botchatbubble.from_user {
	background: var(--orange);
	color: #fff;
	border-bottom-right-radius: 4px;
	margin-left: auto;
	text-align: right;
}
.chat-window-content .botchatbubble.from_agent {
	background: var(--surface);
	color: var(--font);
	border-bottom-left-radius: 4px;
	margin-right: auto;
	margin-left: 8px;
	text-align: left;
}
.chat-window-content .botchatbubble.botchat_thinking {
	background: var(--surface);
	color: var(--text-secondary);
	font-style: italic;
	max-height: 200px;
	overflow-y: auto;
	cursor: pointer;
	margin-right: auto;
	margin-left: 8px;
}
.chat-window-content .botchatbubble.botchat_streaming {
	background: var(--surface);
	color: var(--font);
	margin-right: auto;
	margin-left: 8px;
}
.chat-window-content .botchat_wait {
	opacity: 0.5;
}
.botchat-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--orange, #E8783A);
	animation: botchat-pulse 1.2s ease-in-out infinite;
	vertical-align: middle;
}
@keyframes botchat-pulse {
	0% { transform: scale(0.3); opacity: 0.8; }
	50% { transform: scale(1); opacity: 0.3; }
	100% { transform: scale(0.3); opacity: 0.8; }
}
.chat-window-content .inplong {
	width: 100%;
	min-height: 60px;
	padding: 10px;
	border: 1px solid var(--border);
	border-radius: 10px;
	font-family: inherit;
	font-size: 14px;
	resize: none;
	box-sizing: border-box;
	background: var(--bg);
	color: var(--font);
}
.chat-window-content .buttonbelt {
	display: flex;
	gap: 8px;
	padding: 8px 0;
}
.chat-window-content .buttonbelt button {
	padding: 6px 14px;
	border: 1px solid var(--border);
	border-radius: 6px;
	cursor: pointer;
	background: var(--surface);
	color: var(--font);
	font-size: 13px;
}
.chat-window-content .buttonbelt button:hover {
	background: var(--bg);
}
.chat-window-content .buttonbelt button.warn {
	border-color: #ef4444;
	color: #ef4444;
}
.chat-window-content .buttonbelt button.warn:hover {
	background: #fef2f2;
}
.chat-window-content .edithover {
	display: none;
}
.chat-window-content .corner_hide {
	display: none;
}
.chat-window-content img.botchat_wait {
	vertical-align: middle;
}

/* Hide Gyroscope UI elements in dashboard chat context */
.chat-window-content .changebar,
.chat-window-content .savebar {
	display: none !important;
}
.chat-window-content .infobox {
	display: none !important;
}
.chat-window-content .buttonbelt.corner_hide {
	display: none !important;
}
.chat-window-content .clear {
	display: none;
}

/* Botchat message area and input — fit within the dashboard chat window */
.chat-window-content #botchatmsgs_[id^="botchatmsgs_"] {
	/* messages fill the space */
}
.chat-window-content [id^="botchatmsgs_"]:not([id*="_adder_"]) {
	overflow-y: auto;
	flex: 1;
	padding: 16px 20px 80px;
}
.chat-window-content [id^="botchatmsgs_adder_"] {
	/* adder container for streaming responses */
}
.chat-window-content textarea.inplong {
	width: 100%;
	min-height: 60px;
	max-height: 120px;
	padding: 10px 14px;
	border: 1px solid var(--border);
	border-radius: 10px 10px 0 10px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	resize: none;
	box-sizing: border-box;
	background: var(--bg);
	color: var(--font);
}
.chat-window-content textarea.inplong:focus {
	outline: none;
	border-color: var(--orange);
}

/* ===== Settings page ===== */
.dash-settings-card {
	background: var(--surface);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: 20px;
	margin-bottom: 12px;
}
.dash-settings-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	min-height: 36px;
}
.dash-settings-row:last-child {
	margin-bottom: 0;
}
.dash-settings-label {
	min-width: 140px;
	font-size: 14px;
	color: var(--text-secondary);
	flex-shrink: 0;
}
.dash-settings-value {
	flex: 1;
	font-size: 14px;
	color: var(--font);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.dash-settings-input {
	width: 100%;
	max-width: 320px;
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-family: inherit;
	color: var(--font);
	background: var(--bg);
	box-sizing: border-box;
}
/* Inside a selection card the field sits on the card's own white, not on the
   cream the rest of the settings forms use. The panel scope is required, not
   decorative: .dash-set-panel .dash-settings-input sets a cream wash later in
   this file at equal specificity, and would otherwise win the tie. */
.dash-settings-radio-option .dash-settings-input,
.dash-set-panel .dash-settings-radio-option .dash-settings-input {
	background: var(--surface);
}
/* A field label inside a card names the thing you are filling in, so it reads
   as a label, not as secondary prose. Panel-scoped for the same tie-break. */
.dash-settings-radio-option .dash-settings-label,
.dash-set-panel .dash-settings-radio-option .dash-settings-label {
	font-weight: 500;
	color: var(--brand-black);
}
.dash-settings-input:focus {
	outline: none;
	border-color: var(--orange);
}
.dash-settings-input-disabled {
	opacity: 0.6;
	background: var(--muted);
	cursor: not-allowed;
}
.dash-settings-input-short {
	max-width: 180px;
}
/* Second line inside a settings row's label — says what the row is for without
   needing a tooltip. */
.dash-settings-hint {
  display: block; font-size: 12.5px; font-weight: 400; line-height: 1.4;
  color: var(--text-secondary); margin-top: 2px;
}

.dash-settings-btn {
	display: inline-block;
	padding: 8px 20px;
	background: var(--orange);
	color: var(--brand-black);
	border: none;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s;
  font-weight: 500;
}
.dash-settings-btn:hover {
	background: var(--orange-dark);
}
.dash-settings-btn:active {
	transform: scale(0.97);
}
.dash-settings-btn-disabled {
	background: var(--muted);
	color: var(--text-secondary);
	cursor: not-allowed;
	opacity: 0.6;
}
.dash-settings-btn-disabled:hover {
	background: var(--muted);
}
.dash-settings-btn-disabled:active {
	transform: none;
}
.dash-settings-btn-sm {
	display: inline-block;
	padding: 4px 12px;
	background: var(--surface);
	color: var(--font);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s;
}
.dash-settings-btn-sm:hover {
	background: var(--muted);
}
.dash-settings-btn-danger {
	color: var(--warning);
	border-color: var(--warning);
}
.dash-settings-btn-danger:hover {
	background: rgba(196,92,74,0.08);
}
/* Action links carry the ramp's orange-600, not the brand orange: #FF884C on
   white is about 2:1, which is not a legible link. */
.dash-settings-link {
	color: var(--orange-600);
	text-decoration: none;
	cursor: pointer;
	font-size: 13px;
	margin-left: 8px;
}
.dash-settings-link:hover {
	text-decoration: underline;
}
.dash-settings-status {
	font-size: 13px;
	color: var(--text-secondary);
	margin-left: 8px;
}
.dash-settings-passwarn {
	font-size: 12px;
	color: var(--warning);
	display: inline-block;
	margin-left: 8px;
}
/* Rendered by dashCheckPass from the checkpass server payload —
   one pill per failed rule; the type colors the dot. */
.dash-passrule {
	display: inline-flex;
	align-items: center;
	margin-left: 6px;
	cursor: help;
	white-space: nowrap;
}
.dash-passrule::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 4px;
	background: #ff884c;
}
.dash-passrule-comp::before {
	background: #ff6b35;
}
.dash-settings-toggle {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
	flex-shrink: 0;
}
.dash-settings-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
}
.dash-settings-toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--disabled);
	border-radius: 24px;
	transition: 0.2s;
}
.dash-settings-toggle-slider::before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	border-radius: 50%;
	transition: 0.2s;
}
.dash-settings-toggle input:checked + .dash-settings-toggle-slider {
	background-color: var(--orange);
}
.dash-settings-toggle input:checked + .dash-settings-toggle-slider::before {
	transform: translateX(20px);
}
.dash-settings-toggle-label {
	font-size: 14px;
	color: var(--font);
}
.dash-settings-yubikey-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}
.dash-settings-zap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: #999;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	flex-shrink: 0;
}
.dash-settings-zap svg {
	width: 16px;
	height: 16px;
}
.dash-settings-zap:hover {
	color: #666;
	background: rgba(0,0,0,0.05);
}
.dash-settings-zap-active {
	background: var(--orange);
	color: var(--brand-black);
  font-weight: 500;
}
.dash-settings-zap-active:hover {
	background: var(--orange-dark);
	color: var(--brand-black);
}
.dash-settings-zap-active svg {
	stroke: #fff;
}
.dash-settings-passless-info {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 12px;
	padding: 10px 12px;
	background: var(--surface);
	border-radius: var(--radius);
	font-size: 13px;
	color: #8a8580;
	line-height: 1.4;
}
.dash-settings-passless-info svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 1px;
	stroke: var(--orange);
}

/* ── Pharmacy Preferences (Settings page) ── */

/* Same selection pattern as the membership plan cards: a solid white card with
   no resting stroke, an orange stroke and a light orange wash when chosen. The
   2px border is always declared so choosing one does not resize it. The radio
   stays — it is what says only one of these can be true. */
.dash-settings-radio-option {
	background: var(--surface);
	/* A hairline from the cream ramp holds the edge; hover and selected only
	   ever recolour it, never resize it, so the card cannot shift. */
	border: 1px solid var(--cream-200);
	border-radius: 16px;
	padding: 16px;
	margin-bottom: 12px;
	box-shadow: var(--shadow-card);
	position: relative;
	cursor: pointer;
	transition: border-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
	            background 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.dash-settings-radio-option:hover { border-color: var(--orange-200); }
.dash-settings-radio-option:last-of-type {
	margin-bottom: 0;
}
/* The class is authoritative — settings.js sets it on change. :has is kept as
   the no-JS fallback, not as the mechanism. */
.dash-settings-radio-option-on,
.dash-settings-radio-option-on:hover,
.dash-settings-radio-option:has(input:checked),
.dash-settings-radio-option:has(input:checked):hover {
	border-color: var(--orange);
	background: var(--orange-050);
}
/* And the unselected card is explicitly reset, so a stale :has match cannot
   leave two cards looking chosen. */
.dash-settings-radio-option:not(.dash-settings-radio-option-on) {
	border-color: var(--cream-200);
	background: var(--surface);
}
.dash-settings-radio-option:not(.dash-settings-radio-option-on):hover {
	border-color: var(--orange-200);
}
/* The label's hit area is stretched over the whole card, so a click anywhere
   on it selects the option. The body sits above the overlay on its own layer,
   otherwise the consent box and the fields under it would stop responding. */
.dash-settings-radio-header::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.dash-settings-radio-body {
	position: relative;
	z-index: 1;
	cursor: auto;
}
.dash-settings-radio-header {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
	color: var(--font);
}
/* Drawn rather than accented. accent-color left the native control's own ring
   under our colour, which is where the doubled orange edge came from: fill,
   then the UA's border, then the accent ring. appearance:none removes all of
   it and leaves exactly two things — a black stroke and an orange fill. */
.dash-settings-radio-header input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	flex-shrink: 0;
	border-radius: 50%;
	border: 2.5px solid var(--black-400);
	cursor: pointer;
	/* Checked is the familiar form-library radio: the disc fills with the accent
	   colour and a smaller white dot sits in the middle — here in Circle orange
	   rather than the usual blue. The dot is a centred gradient whose size is
	   animated, so it scales out of the centre instead of appearing flat.
	   160ms on the standard curve: quick enough to read as a response to the
	   click, slow enough to be seen. */
	background-color: var(--surface);
	/* closest-side, or the gradient's default farthest-corner radius paints the
	   whole background box white and the dot renders as a square. */
	background-image: radial-gradient(circle closest-side at 50% 50%, var(--surface) 99%, transparent 100%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0% 0%;
	transition: background-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
	            background-size 160ms cubic-bezier(0.4, 0, 0.2, 1),
	            border-color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.dash-settings-radio-header input[type="radio"]:checked {
	background-color: var(--orange);
	border-color: var(--orange);
	background-size: 40% 40%;   /* ~7px dot in an 18px control */
}
.dash-settings-radio-header input[type="radio"]:focus-visible {
	outline: 2px solid var(--orange-700);
	outline-offset: 2px;
}
.dash-settings-radio-body {
	margin: 14px 0 0 28px;
}
@media (max-width: 600px) {
	.dash-settings-radio-body {
		margin-left: 0;
	}
	.dash-settings-upsell {
		margin-left: 0;
	}
}
.dash-settings-upsell {
	margin: 0 0 0 28px;
	color: var(--text-secondary);
	line-height: 1.5;
	font-size: 14px;
}
.dash-settings-consent-box {
	/* Sized to its content, not to a fixed 120px window. The pharmacy consent
	   is four short paragraphs — about 530 characters — and a fixed height gave
	   it a scrollbar for text that fits comfortably (Pavel, 2026-08-31). The
	   max-height is a guard for a longer document one day, not the normal case:
	   at today's length nothing scrolls. */
	height: auto;
	/* no max-height: the consent is ~3,900 characters, and a scroll box inside a scrolling page is
	   miserable on a phone (QA pass, 2026-09-21). It is already behind "Read the full consent". */
	border: 1px solid var(--border);
	background: var(--surface);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--text-secondary);
	margin-bottom: 12px;
}
.dash-settings-consent-box:focus {
	outline: none;
	border-color: var(--orange);
}
.dash-settings-checkbox-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--font);
}
.dash-settings-checkbox-row input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	flex-shrink: 0;
	accent-color: var(--orange);
}

/* ── Requisitions section (Insights page) ── */

.dash-req-visit-group {
	background: var(--surface);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	margin-bottom: 16px;
	overflow: hidden;
}
.dash-req-visit-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid var(--muted);
}
.dash-req-visit-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.dash-req-visit-label {
	font-weight: 600;
	font-size: 15px;
	color: var(--font);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dash-req-visit-date {
	font-size: 12px;
	color: var(--text-secondary);
}
.dash-req-email-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--font);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s;
}
.dash-req-email-link:hover {
	background: var(--muted);
	border-color: var(--sand);
	text-decoration: none;
	color: var(--font);
}
.dash-req-email-link svg {
	width: 14px;
	height: 14px;
	stroke: var(--font);
}
.dash-req-list {
	display: flex;
	flex-direction: column;
}
.dash-req-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 18px;
	border-bottom: 1px solid var(--muted);
	transition: background 0.15s;
}
.dash-req-item:last-child {
	border-bottom: none;
}
.dash-req-item:hover {
	background: rgba(244,241,226,0.4);
}
.dash-req-item-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.dash-req-item-name {
	font-size: 14px;
	font-weight: 500;
	color: var(--font);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dash-req-item-date {
	font-size: 12px;
	color: var(--text-secondary);
}
.dash-req-item-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.dash-req-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.dash-req-status-signed {
	background: #E8F5E9;
	color: var(--success);
}
.dash-req-status-pending {
	background: #FFF3E0;
	color: var(--orange-600);
}
.dash-req-view-btn {
	padding: 6px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--font);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.dash-req-view-btn:hover {
	background: var(--muted);
	border-color: var(--sand);
}
.dash-req-load-more {
	text-align: center;
	padding: 12px 0;
}
.dash-req-load-more-btn {
	padding: 8px 24px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text-secondary);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.dash-req-load-more-btn:hover {
	background: var(--muted);
	border-color: var(--sand);
	color: var(--font);
}
.dash-req-email-confirm {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: #E8F5E9;
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 500;
	color: var(--success);
}
.dash-req-email-confirm svg {
	flex-shrink: 0;
}
.dash-req-email-confirm-error {
	background: #FFEBEE;
	color: var(--error, #EF4444);
}

/* ── Lab Results ── */
.dash-lab-group {
	background: var(--surface);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	margin-bottom: 16px;
	overflow: hidden;
}
.dash-lab-group-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid var(--muted);
}
.dash-lab-group-label {
	font-weight: 600;
	font-size: 15px;
	color: var(--font);
}
.dash-lab-list {
	display: flex;
	flex-direction: column;
}
.dash-lab-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 18px;
	border-bottom: 1px solid var(--muted);
	transition: background 0.15s;
}
.dash-lab-item:last-child {
	border-bottom: none;
}
.dash-lab-item:hover {
	background: rgba(244,241,226,0.4);
}
.dash-lab-item-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.dash-lab-item-name {
	font-size: 14px;
	font-weight: 500;
	color: var(--font);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dash-lab-item-date {
	font-size: 12px;
	color: var(--text-secondary);
}
.dash-lab-item-status {
	font-size: 11px;
	color: var(--text-secondary);
	opacity: 0.7;
}
.dash-lab-item-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.dash-lab-view-btn {
	padding: 6px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--font);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s;
}
.dash-lab-view-btn:hover {
	background: var(--muted);
	border-color: var(--sand);
}
.dash-lab-load-more {
	text-align: center;
	padding: 12px 0;
}
.dash-lab-load-more-btn {
	padding: 8px 24px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text-secondary);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.dash-lab-load-more-btn:hover {
	background: var(--muted);
	border-color: var(--sand);
	color: var(--font);
}

/* ── Pharmacy drugstore autocomplete (Settings page) ── */

.dash-pharmacy-field {
	position: relative;
}
.dash-pharmacy-dropdown {
	display: none;
	position: absolute;
	z-index: 100;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	margin-top: 4px;
	max-height: 200px;
	overflow-y: auto;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.dash-pharmacy-dropdown-item {
	padding: 10px 12px;
	cursor: pointer;
	font-size: 14px;
	color: var(--font);
	border-bottom: 1px solid rgba(0,0,0,0.06);
	transition: background 100ms;
	line-height: 1.4;
}
.dash-pharmacy-dropdown-name {
	font-weight: 500;
}
.dash-pharmacy-dropdown-addr {
	color: var(--text-secondary);
	font-size: 13px;
}
.dash-pharmacy-dropdown-item:hover {
	background: rgba(255,136,76,0.08);
}
.dash-pharmacy-dropdown-item:last-child {
	border-bottom: none;
}
.dash-pharmacy-dropdown-item small {
	color: var(--text-secondary);
	margin-left: 6px;
}
.dash-pharmacy-dropdown-item .dash-pharmacy-circle-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 500;
	color: var(--success);
	margin-left: 6px;
	padding: 1px 5px;
	border-radius: 9999px;
	background: rgba(74,124,89,0.1);
}
.dash-pharmacy-selected-card {
	display: none;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	background: rgba(74,124,89,0.08);
	border: 1px solid rgba(74,124,89,0.2);
	border-radius: var(--radius-sm);
	margin-top: 4px;
}
.dash-pharmacy-selected-card-text {
	font-size: 14px;
	color: var(--font);
}
.dash-pharmacy-selected-card-text small {
	color: var(--text-secondary);
}
.dash-pharmacy-selected-change {
	background: none;
	border: none;
	color: var(--orange-600);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: underline;
}
.dash-pharmacy-selected-change:hover {
	color: var(--orange-600);
}

/* ── Upload card (patient visit uploads) ── */
.dash-upload-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 12px;
}
.dash-upload-card .dash-care-card-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--font);
	margin: 0 0 4px;
}
.dash-upload-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 24px;
	border: 2px dashed var(--border);
	border-radius: 8px;
	cursor: pointer;
	color: var(--text-secondary);
	transition: border-color 0.2s, background 0.2s;
	margin-top: 12px;
}
.dash-upload-area:hover {
	border-color: var(--orange);
	background: var(--surface-hover);
	color: var(--font);
}
.dash-upload-area.dragover {
	border-color: var(--orange);
	background: rgba(232, 118, 30, 0.08);
}
.dash-upload-area p {
	margin: 0;
	font-size: 14px;
}
.dash-upload-area svg {
	color: var(--text-secondary);
}
.dash-upload-progress {
	height: 4px;
	background: var(--orange);
	border-radius: 2px;
	margin-top: 8px;
	transition: width 0.3s;
}
.dash-upload-files {
	margin-top: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.dash-upload-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border: 1px solid var(--border);
	border-radius: 14px;
	font-size: 12px;
	background: var(--surface);
	color: var(--font);
}
.dash-upload-chip .dash-chip-del {
	cursor: pointer;
	color: var(--text-secondary);
	font-weight: bold;
	font-size: 14px;
	line-height: 1;
	margin-left: 2px;
}
.dash-upload-chip .dash-chip-del:hover {
	color: #c00;
}

/* ══════════════════════════════════════════════════════════════════════════
   Nav v4 — identity, Next-step card, grouped rows, gated rows, gate panel.
   Markup is built in go_app/dash_nav.go. Design source:
   mockups/left-nav/nav-goapp-v4.html.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Icon recolouring ──────────────────────────────────────────────────────
   The nav-*.svg files are stroked #292626 and drawn with <img>, so they cannot
   inherit currentColor. Each chain below was solved to land exactly on a token,
   so an icon matches the text beside it. Don't hand-tweak — re-solve if a token
   moves. */
/* A tab-bar glyph is 24px on both iOS and Android; 20px is a rail size, so
   .dash-bottom-icon overrides it just below. */
.dash-sidebar-icon, .dash-bottom-icon {
  width: 20px; height: 20px; flex: none; display: block;
  filter: brightness(0) saturate(100%) invert(15%) sepia(84%) saturate(1519%) hue-rotate(15deg) brightness(47%) contrast(25%); /* #6B6560 */
}
.dash-bottom-icon { width: 24px; height: 24px; }
.dash-sidebar-item:hover .dash-sidebar-icon,
.dash-bottom-item:hover .dash-bottom-icon {
  filter: brightness(0) saturate(100%) invert(52%) sepia(84%) saturate(1066%) hue-rotate(318deg) brightness(3%) contrast(72%); /* #292626 */
}
/* Black, and thickened: these are <img> glyphs, so the stroke cannot be
   changed in CSS — two hairline drop-shadows in the same colour spread the
   ink by about half a pixel, which is the weight difference without a second
   set of assets. */
.dash-bottom-item.active .dash-bottom-icon {
  /* Pavel, 2026-09-29: the thickened active glyph read too bold — the two
     drop-shadows (~0.5px of ink) are gone; active is now colour alone. */
  filter: brightness(0) invert(15%);
}
/* In the rail the active row is marked by its cream-deep ground, so the glyph
   stays the same near-black as every other row rather than doubling up. */
.dash-sidebar-item.active .dash-sidebar-icon {
  filter: brightness(0) invert(15%); /* --brand-black #292626 */
}
/* The next-step card carries the deeper ramp orange, not the nav's active orange. */
.dash-sidebar-next-icon, .dash-sidebar-next-chevron {
  filter: brightness(0) saturate(100%) invert(55.9%) sepia(93%) saturate(430%) hue-rotate(333deg) brightness(68.6%) contrast(157.0%); /* --orange-600 #CA4E00 */
}
.dash-sidebar-item-gated .dash-sidebar-icon,
.dash-sidebar-item-gated:hover .dash-sidebar-icon,
.dash-bottom-item-gated .dash-bottom-icon {
  filter: brightness(0) saturate(100%) invert(14%) sepia(55%) saturate(1035%) hue-rotate(349deg) brightness(118%) contrast(14%); /* #7A736E — matches --nav-gated */
}

/* A live row is an <a>; a gated one is a <button> so it can be clicked and
   announced. This reset is what keeps the two visually identical. */
button.dash-sidebar-item, button.dash-bottom-item {
  background: none; border: 0; font-family: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none; width: 100%; text-align: left;
}
/* The gated tabs and More are <button>s; Home is an <a>. This reset used to
   zero the padding, which an element+class selector wins — so only the anchor
   kept the tab padding and every button sat higher. It takes the shared
   padding now; only the button-specific resets stay. */
button.dash-bottom-item { padding: 13px 2px 3px; width: auto; text-align: center; }

/* ── Brand ── */
.dash-sidebar-wordmark { height: 22px; width: auto; display: block; }

/* ── Identity row ── */
.dash-sidebar-identity {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 12px 0; padding: 8px 10px;
  border-radius: var(--radius); text-decoration: none; color: var(--font);
  transition: background 150ms, padding 260ms ease-in-out;
}
.dash-sidebar-identity:hover { background: var(--muted); text-decoration: none; }
.dash-sidebar-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--cream-deep); color: var(--brand-black);
  font-size: 13px; font-weight: 500; text-transform: uppercase;
}
.dash-sidebar-identity-text { min-width: 0; }
.dash-sidebar-identity-name { font-size: 15px; font-weight: 500; line-height: 1.15; }
.dash-sidebar-identity-status {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
  font-size: 12px; color: var(--text-secondary); line-height: 1.2;
}
.dash-sidebar-status-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--disabled);
}
.dash-sidebar-status-dot-active { background: var(--success); }

/* ── Next-step card ─────────────────────────────────────────────────────────
   The one dynamic object in the rail: it names the single outstanding task and
   is not rendered at all when there isn't one. Markup: navNextCardHTML() in
   go_app/dash_nav.go. */
.dash-sidebar-next {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 12px 4px; padding: 18px 12px 18px 14px;
  background: var(--orange-tint); border-radius: var(--radius);
  transition: padding 260ms ease-in-out;
  text-decoration: none; color: var(--font);
}
.dash-sidebar-next:hover { text-decoration: none; color: var(--font); filter: brightness(0.985); }
.dash-sidebar-next-icon { width: 20px; height: 20px; flex: none; display: block; }
.dash-sidebar-next-text { min-width: 0; flex: 1; }
.dash-sidebar-next-kicker {
  display: block; font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--orange-600); line-height: 1;
}
.dash-sidebar-next-title { display: block; font-size: 14px; font-weight: 500; line-height: 1.25; margin-top: 3px; }
.dash-sidebar-next-sub { display: block; font-size: 12px; color: var(--text-secondary); line-height: 1.35; margin-top: 2px; }
.dash-sidebar-next-chevron { width: 16px; height: 16px; flex: none; margin-left: auto; display: block; }

/* Stands in for the group heading in the desktop rail: the clusters are still
   separated, without a label on each one. (The slide-out menu keeps its
   headings — it lists more rows and needs them.) */
/* No extra space between clusters: with the headings gone the groups are not
   announced, so an uneven gap just reads as a stray gap. display:none rather
   than height:0 — a zero-height spacer would still take one of the nav's own
   row gaps and leave the seam 2px wider than every other. */
.dash-sidebar-groupgap { display: none; }

/* ── Group heading (slide-out menu) ── */
.dash-sidebar-group {
  padding: 16px 16px 6px; font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--font);
}

/* ── Row label and second line ── */
.dash-sidebar-label { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dash-sidebar-sublabel {
  font-size: 12.5px; font-weight: 400; color: var(--text-secondary);
  line-height: 1.3; margin-top: 2px;
}
.dash-sidebar-item.active .dash-sidebar-sublabel { color: var(--font); }

/* Gated is NOT .dash-sidebar-item-disabled: that sets pointer-events:none,
   which is exactly the dead click this design forbids.

   --disabled (#C5C2BD) is 1.76:1 against the rail — below the 3:1 floor for any
   text, and unreadable at the 12.5px the second line runs at. A gated row still
   has to be read: it is carrying the reason it is gated. --nav-gated is 4.61:1,
   which clears AA, while sitting far off --font's 14.83:1 so the row still
   plainly reads as unavailable. Label, second line and icon all take it, so a
   gated row greys as one object rather than fading out in pieces. */
.dash-sidebar-item-gated:hover { background: var(--muted); }
/* The colours live at the very end of this file — see "gated colour" there.
   .dash-sidebar-item-gated and .dash-sidebar-item are the same specificity
   (0,1,0), so whichever is written last wins, and the geometry block below
   sets colour on .dash-sidebar-item. */

.dash-sidebar-count {
  margin-left: auto; flex: none; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--orange); color: #fff;
  font-size: 12px; font-weight: 500; display: grid; place-items: center;
}

/* ── Mobile bottom bar ──────────────────────────────────────────────────────
   Five tabs on a 320px phone leave about 58px each, so a label is held to one
   line and shortened at the source rather than wrapped. */
.dash-bottom-item { position: relative; }
.dash-bottom-label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-bottom-item-gated { color: var(--disabled); }

/* ── Preview panels ─────────────────────────────────────────────
   What a gated row opens — not a notice but a preview of the thing being held
   back: chip, title, promise, an illustrative vignette of the real interface,
   three value lines, a dated footer. Markup is built server-side in
   dashPreviewPanelsHTML(), go_app/dash_nav.go. Design source:
   mockups/left-nav/nav-preview-panels-v4.html — that mock is drawn at one
   phone width (380px). Here the phone keeps it as a bottom sheet and the
   desktop widens to 720px, where the vignette and the value lines sit side by
   side rather than stacking into a very tall column.
   Hidden until dashGate() adds .dash-gate-open. */
.dash-gate-overlay {
  position: fixed; inset: 0; background: rgba(41,38,38,0.32);
  opacity: 0; visibility: hidden; transition: opacity 160ms; z-index: 90;
}
.dash-gate-overlay.dash-gate-open { opacity: 1; visibility: visible; }
body.dash-gate-locked { overflow: hidden; }

.dash-preview {
  position: fixed; z-index: 91;
  left: 50%; top: 50%; transform: translate(-50%, -46%);
  width: min(720px, calc(100vw - 48px));
  max-height: min(88vh, 900px); overflow-y: auto;
  background: var(--surface); border: 1px solid rgba(220,182,136,0.4);
  border-radius: 20px; padding: 26px 28px 22px;
  box-shadow: 0 24px 60px rgba(41,38,38,0.18), 0 2px 6px rgba(41,38,38,0.06);
  opacity: 0; visibility: hidden; transition: opacity 160ms, transform 160ms;
}
.dash-preview.dash-gate-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.dash-gate-grip { display: none; }

/* The close control.
   It sits ON the status banner, which reserves padding-right for it — but a
   bare X at top:14 landed on the banner's rounded top-right CORNER, half on the
   orange and half off it, reading as a stray mark rather than a button (Pavel,
   2026-08-31: "a random x that hovers right over the orange rounded corner
   box"). Two fixes, together: it is inset to sit INSIDE the banner rather than
   across its corner, and it is a real disc again — surface white on the orange
   tint, which is the contrast the earlier white-on-white attempt lacked,
   because back then it sat on the panel's own white ground and not on a tint.
   The offsets are the panel's padding plus the banner's own 12px inset, so the
   disc lines up with the banner's first line at both breakpoints; the 34px box
   is the tap target, not the mark. */
.dash-preview-x {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(41,38,38,0.10); background: var(--surface);
  box-shadow: 0 1px 2px rgba(41,38,38,0.10);
  display: grid; place-items: center; cursor: pointer;
  padding: 0; transition: background 140ms, transform 140ms;
}
.dash-preview-x:hover { background: var(--cream-100, #FBF9F1); }
.dash-preview-x:active { transform: scale(0.94); }
.dash-preview-x:focus-visible {
  outline: 2px solid var(--orange-700); outline-offset: 2px;
}
.dash-preview-x-icon {
  width: 18px; height: 18px; display: block;
  filter: brightness(0) invert(15%);   /* --brand-black; the asset ships #292626 */
}

/* The status banner. It is the first thing on the panel and the loudest thing
   on it on purpose: a panel that opens straight into its vignette reads as if
   the preview were the feature. This says what is shut, and until when. */
.dash-preview-status {
  /* The positioning context for the close button, which is a child of this
     banner. Offsets measured from the banner mean the disc sits inside it at
     any panel padding, instead of being aimed at the banner's corner from
     across the panel. */
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 16px; padding: 12px 52px 12px 12px;
  background: var(--orange-tint);
  border: 1px solid var(--orange);
  border-radius: var(--radius);
}
/* On desktop the close button sits in the panel's top-right corner. The notice
   used to run the full width and merely pad its text clear of it, so the box
   still passed underneath. It now ends 60px short of the edge instead. */
@media (min-width: 768px) {
  .dash-preview-status { margin-right: 60px; padding-right: 12px; }
}
/* Hidden (Pavel, 2026-08-31). The panel's title and promise carry the "not yet"
   message on their own. Display, not deletion: the copy still lives in
   previewCopy (Status/StatusSub, go_app/dash_nav.go), and this rule has to sit
   AFTER the block above — same specificity, so source order decides. */
.dash-preview-status { display: none; }
/* …except the members-only state, which is not a date being repeated but the
   way in: it names the barrier and the panel's button clears it. */
.dash-preview-status-gate { display: flex; }

.dash-preview-status-icon {
  width: 16px; height: 16px; flex: none; margin-top: 2px; display: block;
  filter: brightness(0) saturate(100%) invert(37%) sepia(84%) saturate(426%) hue-rotate(336deg) brightness(97%) contrast(141%); /* #D44E09 */
}
.dash-preview-status span { font-size: 12.5px; line-height: 1.45; color: var(--font); }
.dash-preview-status b {
  display: block; font-size: 14.5px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--orange-600); margin-bottom: 2px;
}
.dash-preview-title {
  font-size: 21px; font-weight: 500; line-height: 1.2;
  letter-spacing: -0.01em; margin: 0 0 6px;
}
.dash-preview-promise { font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 18px; }

/* The vignette: a still of the real interface, in a card of its own so it
   never reads as the member's own data. */
.dash-preview-vig {
  border: 1px solid rgba(220,182,136,0.3); border-radius: 14px;
  padding: 14px; background: #fff;
}
.dash-preview-viglabel {
  /* Above the card now, so it is a heading rather than an eyebrow: sentence
     case as written, at body size. */
  font-size: 16px; font-weight: 500; letter-spacing: -0.005em;
  color: var(--brand-black); margin-bottom: 8px;
}
.dash-preview-illus { font-size: 12px; color: var(--text-secondary); margin: 8px 2px 14px; }

.dash-preview-values {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: flex; flex-direction: column; gap: 9px;
}
.dash-preview-values li { display: flex; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--text-secondary); }
.dash-preview-bullet {
  flex: none; width: 18px; height: 18px; margin-top: 1px;
  border-radius: 50%; background: var(--orange);
  display: grid; place-items: center;
}
.dash-preview-check {
  width: 12px; height: 12px; display: block;
  filter: brightness(0) invert(15%);   /* --brand-black, on the orange disc */
}

.dash-preview-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid rgba(220,182,136,0.25); padding-top: 14px;
}
.dash-preview-when { font-size: 12px; color: var(--text-secondary); line-height: 1.35; margin: 0; }
.dash-preview-when b { display: block; color: var(--font); font-weight: 500; font-size: 16px; }
/* Colour and states come from the button component; the dialog only sets how
   much room the action takes in its footer. */
.dash-preview-ok { flex: none; white-space: nowrap; padding: 11px 22px; min-height: 40px; }
.dash-preview-disc { font-size: 10.5px; color: var(--text-secondary); line-height: 1.4; margin: 12px 0 0; }

/* ── Vignette internals ─────────────────────────────────────── */
.dash-preview-visit > div { display: flex; gap: 12px; align-items: flex-start; padding: 5px 0; font-size: 13px; }
/* Widened from 46px (2026-08-30): the column used to hold clock times ("0:00")
   and now holds who you are with ("With your nurse"), because the visit is a
   nurse portion then a physician portion rather than a stopwatch. 96px fits the
   longest label on one line; below 400px the sheet is too narrow for that, so
   the label sits above its row instead of squeezing the description. */
/* The stage names carry the sequence, so they take the action orange rather
   than the quiet grey the rows' sub-lines use. */
.dash-preview-visit-t { width: 96px; flex: none; text-align: right; color: var(--orange-600); font-size: 12px; padding-top: 1px; line-height: 1.35; }
@media (max-width: 400px) {
  .dash-preview-visit > div { flex-direction: column; gap: 2px; }
  .dash-preview-visit-t { width: auto; text-align: left; font-weight: 500; }
}
.dash-preview-visit-d b { display: block; font-weight: 500; }
.dash-preview-visit-d > span { display: block; color: var(--text-secondary); font-size: 12px; }

.dash-preview-msg { display: flex; flex-direction: column; gap: 8px; }
.dash-preview-bub { max-width: 82%; margin: 0; padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; }
/* The member's own message is the navy one: it reads as sent, and it separates
   cleanly from the care team's reply beside it. */
.dash-preview-bub-me {
  align-self: flex-end;
  background: var(--color-navy);
  color: var(--text-on-dark);
  border-bottom-right-radius: 4px;
}
.dash-preview-bub-them { background: #F1EEE4; border-bottom-left-radius: 4px; }
.dash-preview-bub small { display: block; font-size: 10.5px; color: var(--text-secondary); margin-top: 3px; }

.dash-preview-rows > div {
  display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px;
  border-bottom: 1px solid rgba(220,182,136,0.18);
}
.dash-preview-rows > div:last-child { border-bottom: 0; }
.dash-preview-rows-n { flex: 1; }
.dash-preview-rows-v { font-weight: 500; font-variant-numeric: tabular-nums; }
/* Borderline / optimal / borderline, with the marker where the value sits. The
   band is generic, not a real reference range — it says "in range", nothing more. */
.dash-preview-bar {
  position: relative; flex: none; width: 70px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, #E8C858 0 22%, var(--success) 22% 78%, #E8C858 78%);
}
.dash-preview-bar i {
  position: absolute; top: -3px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--font); border: 2px solid #fff; transform: translateX(-50%);
}

.dash-preview-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dash-preview-tile { background: #F1EEE4; border-radius: 10px; padding: 10px; font-size: 12px; line-height: 1.3; }
.dash-preview-tile b { display: block; font-weight: 500; font-size: 12.5px; margin-bottom: 2px; }
/* A tile may carry a subtitle AND a detail line (what it is, then when) — two
   inline spans would run together on one line, so they stack. The grid stretches
   every tile to the tallest, so a three-line tile beside two-line ones is even. */
.dash-preview-tile span { display: block; color: var(--text-secondary); font-size: 11px; }
.dash-preview-tile span + span { margin-top: 3px; }
.dash-preview-why { font-size: 11.5px; color: var(--orange-600); margin: 10px 0 0; }

/* Desktop: the panel has room to put the vignette beside the value lines, so
   the whole panel is read at a glance instead of scrolled. */
@media (min-width: 768px) {
  .dash-preview-status { padding: 14px 56px 14px 14px; margin-bottom: 18px; }
  .dash-preview-status b { font-size: 15.5px; }
  .dash-preview-status span { font-size: 13px; }
  .dash-preview-title { font-size: 24px; }
  .dash-preview-promise { font-size: 16px; max-width: 62ch; margin-bottom: 20px; }
  .dash-preview-body {
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px;
    align-items: start; margin-bottom: 20px;
  }
  .dash-preview-illus { margin-bottom: 0; }
  /* The left column carries a heading above its card; this column does not, so
     it starts that much higher. The offset drops the first tick level with the
     top of the card beside it. */
  .dash-preview-values { margin-bottom: 0; margin-top: 32px; }
  .dash-preview-bub { max-width: 90%; }
}

/* On a phone it rises from the bottom, above the tab bar it was opened from. */
@media (max-width: 767px) {
  .dash-preview {
    left: 0; right: 0; top: auto; bottom: 0; width: auto;
    /* Stop short of the fixed app header — 88vh ran the sheet's top edge and
       its close button underneath it. The bar is --topbar-h tall, and the 20px
       is the gap that lets you see this is a sheet over the app, not a page. */
    max-height: calc(100vh - var(--topbar-h) - 20px);
    max-height: calc(100dvh - var(--topbar-h) - 20px);
    transform: translateY(100%);
    border: 0; border-radius: 20px 20px 0 0;
    /* 8px was the room the drag grip used to take. With the grip gone the title
       and the X had nothing above them. */
    padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .dash-preview.dash-gate-open { transform: translateY(0); }
  /* No drag grip: it advertises a gesture this sheet does not support — it is
     closed with the X or the overlay, not by dragging. */
  /* Bottom sheet: the grip sits above, so the X moves down a little. */
  /* The banner is pinned to the top of the sheet while the sheet scrolls, so
     the close button — which lives inside it — is always in the same place and
     always one thumb away (Pavel, 2026-08-31: "make the close button persist in
     the same spot"). It carries the state line up there with it, which is where
     the panel wants it anyway. top:0 rather than a few px down: any gap would
     let the sheet's content scroll through it above the banner. */
  .dash-preview-status { position: sticky; top: 0; z-index: 3; }

  /* The action follows you down the sheet. It bleeds to the sheet's edges and
     carries the panel's own background, so content scrolls under it cleanly;
     at the end of the scroll it settles back into place above the small print. */
  .dash-preview-foot {
    position: sticky;
    bottom: calc(-1 * (20px + env(safe-area-inset-bottom, 0px)));
    margin: 0 -20px;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid rgba(220,182,136,0.25);
  }
  .dash-preview-disc { padding-top: 12px; }
}

/* ── v4 geometry and colour ────────────────────────────────────────────────
   The original rail rules predate this design. Rather than edit them in place
   — they are load-bearing for the slide-out menu too — the differences against
   mockups/left-nav/nav-goapp-v4.html are restated here, where they win on
   source order. Row text is --font, not --text-secondary: in v4 the second line
   carries the quiet grey and the label itself stays dark. */
.dash-sidebar-logo { padding: 32px 24px 20px; }
.dash-sidebar-nav  { padding: 0 12px; gap: 2px; }
.dash-sidebar-item {
  gap: 14px;
  padding: 10px 14px;
  min-height: 44px;
  color: var(--font);
}
.dash-sidebar-item:hover { color: var(--font); }
.dash-sidebar-bottom { padding: 0 12px 20px; }
.dash-sidebar-bottom .dash-sidebar-item { min-height: 40px; padding: 8px 14px; }
.dash-sidebar-divider { margin: 10px 4px; }
/* The collapse row: a <button> wearing the row's clothes, quiet grey like the
   EMR's, chevron pointing the way the rail will move. */
.dash-sidebar-item-collapse {
  width: 100%; border: 0; background: none; font: inherit; text-align: left;
  cursor: pointer; color: var(--text-secondary);
}
.dash-sidebar-item-collapse:hover { color: var(--font); }
.dash-sidebar-collapse-icon { transform: rotate(180deg); transition: transform 260ms ease-in-out; }
body.dash-rail-collapsed .dash-sidebar-collapse-icon { transform: none; }

/* ── Gated colour — must stay last ─────────────────────────────────────────
   .dash-sidebar-item-gated ties with .dash-sidebar-item at specificity 0,1,0,
   so source order decides it. The v4 geometry block above sets colour on
   .dash-sidebar-item; these have to come after it or a gated row renders in
   full --font and is indistinguishable from a live one. Anything added below
   this point must not set colour on .dash-sidebar-item. */
.dash-sidebar-item-gated,
.dash-sidebar-item-gated:hover { color: var(--nav-gated); }
.dash-sidebar-item-gated .dash-sidebar-sublabel,
.dash-sidebar-item-gated:hover .dash-sidebar-sublabel { color: var(--nav-gated); }
/* The bottom bar needs a wider gap between "tap me" and "not yet" than the rail
   does. In the rail a gated row carries a sub-line saying when it opens; a tab
   has room for a word and a glyph and nothing else, so colour is the whole
   signal — and --nav-gated (#7A736E) against --text-secondary (#6B6560) was a
   two-shade difference nobody could see (Pavel, 2026-08-31: "they don't show up
   grey enough as unavailable"). --nav-gated is left alone so the rail keeps its
   legible-but-inactive grey; the bar goes lighter, and the icon lightens with
   it — the glyph is an <img> whose colour comes from a filter chain, so opacity
   is what moves it without a second filter to maintain. */
.dash-bottom-item-gated,
.dash-bottom-item-gated:hover { color: #A9A29C; }
.dash-bottom-item-gated .dash-bottom-icon,
.dash-bottom-item-gated:hover .dash-bottom-icon { opacity: 0.55; }
/* The other end of the range is already right: .dash-bottom-item.active is
   --font (#292626) at weight 500 with a thickened glyph. It only looked weak
   because the "unavailable" tabs beside it were nearly the same grey as the
   available ones. */

/* ══════════════════════════════════════════════════════════════════════════
   Dashboard home v3 — editorial layout
   Design source: mockups/transactional/dashboard-home.html (r338).

   Safe to sit below the gated-colour block above: nothing here sets colour on
   .dash-sidebar-item or .dash-bottom-item.

   FULL BLEED. The hero and the social band run edge to edge inside the content
   column, which .dash-main normally caps at 1200px and pads. Rather than
   negative-margin every band out, the container is stripped for this page only
   — the same :has() trick the chat layout already uses — and the padding is
   handed back to .dash-home-rest, which wraps the ordinary card sections that
   still want a measure.
   ══════════════════════════════════════════════════════════════════════════ */

.dash-main:has(.dash-home) {
	max-width: none;
	padding: 0;
}

.dash-home {
	--home-slate: var(--slate-200);
	--home-pad: 64px;
	font-family: var(--font-sans);
	background: var(--cream);
}
.dash-home-serif,
.dash-home-title,
.dash-home-roadtitle,
.dash-home-social-title,
.dash-home-opens-date,
.dash-home-action-n,
.dash-home-notice-i {
	font-family: var(--font-sans);
	font-style: normal;
	font-weight: 500;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.dash-home-hero {
	position: relative;
	overflow: hidden;
	padding: 52px var(--home-pad) 140px;
	/* Flat Circle Navy #10293C (Pavel, 2026-09-29: "it's the actual circle navy blue").
	   Was a radial highlight from --navy-800 in the top-right corner. */
	background: var(--color-navy, #10293C);
}
/* The ghosted ring breaking the top-right corner. A bordered empty element, not
   an <img>: an image would occupy its box and answer hit-testing while painting
   almost nothing. */
.dash-home-hero::before {
	content: "";
	position: absolute;
	right: -140px;
	top: -180px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	border: 56px solid rgba(220,182,136,0.09);
	pointer-events: none;
}
.dash-home-hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0,1fr) 300px;
	gap: 56px;
	align-items: start;
}
.dash-home-eyebrow {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-orange);
}
.dash-home-title {
	margin: 0 0 16px;
	font-size: 52px;
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--text-on-dark);
}
.dash-home-lede {
	margin: 0;
	max-width: 520px;
	font-size: 17px;
	line-height: 1.65;
	color: #C7D3DB;
}

/* Clinic-opens card — the opening date gets to be an object, not a clause. */
.dash-home-opens {
	padding: 22px 24px;
	margin-top: 20px;   /* sits a little below the greeting it shares the row with */
	border: 1px solid rgba(220,182,136,0.28);
	border-radius: var(--radius-lg);
	background: rgba(255,254,246,0.06);
}
.dash-home-opens-k {
	margin: 0 0 6px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-orange);
}
.dash-home-opens-date {
	margin: 0;
	font-size: 26px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--text-on-dark);
}
.dash-home-opens-rule {
	margin: 16px 0 14px;
	border-top: 1px solid rgba(220,182,136,0.25);
}
.dash-home-opens-addr {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: #C7D3DB;
}

/* ── Cream hero (Pavel, 2026-09-29) ──────────────────────────────────────────
   The top band moves from Circle Navy to Circle Cream, so its type moves from
   the on-dark whites to Circle Black and the greys. The navy rules above are
   left intact: delete this block to switch back. */
.dash-home-hero { background: var(--color-cream, #F4F1E2); }
.dash-home-hero::before { border-color: rgba(220,182,136,0.18); }
.dash-home-hero .dash-home-eyebrow,
.dash-home-opens-k { color: var(--orange-600, #CA4E00); }   /* brand orange is under 2:1 on cream; hero only */
/* Footer handle (navy band) reads in the paragraph's colour (Pavel, 2026-09-29). */
.dash-home-social .dash-home-eyebrow { color: #C7D3DB; }
.dash-home-title,
.dash-home-opens-date { color: var(--color-font, #292626); }
.dash-home-lede,
.dash-home-opens-addr { color: var(--text-secondary, #6B6560); }
.dash-home-opens { background: var(--color-surface, #FFFEF6); border-color: rgba(220,182,136,0.45); }
.dash-home-opens-rule { border-top-color: rgba(220,182,136,0.45); }
/* No ring on the cream band (Pavel, 2026-09-29: "just remove it"). */
.dash-home-hero::before { display: none; }

/* ── Breakout action card ───────────────────────────────────────────────── */
.dash-home-breakout {
	position: relative;
	z-index: 1;
	margin: -88px var(--home-pad) 0;
}
.dash-home-action {
	position: relative;
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 30px 36px;
	border-radius: 22px;
	background: var(--surface);
	box-shadow: 0 20px 25px -5px rgba(16,41,60,0.10), 0 8px 10px -6px rgba(16,41,60,0.10), 0 2px 0 rgba(220,182,136,0.25) inset;   /* "xl" shadow (Pavel, 2026-09-29); was 0 24px 60px -12px @ .35 */
}
.dash-home-action-n {
	flex: none;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--orange-tint);
	color: var(--color-font, #292626);   /* Circle Black (Pavel, 2026-09-29) */
	font-size: 26px;
	border: 2px solid var(--orange-300, #FFB791);   /* orange stroke (Pavel, 2026-09-29) */
	box-sizing: border-box;
}
.dash-home-action-body { min-width: 0; }
/* Care-open action card: the number becomes the ask's own glyph, on the same
   orange disc, so the object the member learned in September is the one that
   asks them for the clinical intake in October. */
.dash-home-action-ico { width: 26px; height: 26px; display: block; filter: brightness(0) invert(15%); }
.dash-home-action-for { display: block; font-size: 14px; font-weight: 400; color: var(--text-secondary); margin-top: 2px; }
.dash-home-action-t {
	display: block;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--font);
}
.dash-home-action-d {
	display: block;
	margin-top: 4px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--text-secondary);
}
.dash-home-action-d b { color: var(--success); font-weight: 600; }
.dash-home-action-cta {
	flex: none;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 15px 30px;
	border-radius: 999px;
	background: var(--orange);
	color: var(--brand-black);
	font-size: 16px;
	font-weight: 500;
	white-space: nowrap;
}
.dash-home-action-cta:hover { background: var(--orange-dark); text-decoration: none; }

/* Visit today (dash_visit_today.go): the action card the day of a visit */
.dash-visit { flex-wrap: wrap; }
.dash-visit .dash-home-action-body { flex: 1 1 280px; } /* a long title wraps inside the body; the icon stays left and the buttons right */
.dash-visit-covers { display: block; margin: -2px 0 6px; font-size: 14px; color: var(--text-secondary); }
.dash-visit-k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 4px; }
.dash-visit-time { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--orange-tint); color: var(--orange-600); letter-spacing: 0; font-size: 12px; text-transform: none; }
.dash-visit-where { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13.5px; color: var(--text-secondary); }
.dash-visit-where-ico { width: 16px; height: 16px; flex: none; filter: grayscale(1) opacity(.65); }
.dash-visit-where a { color: var(--color-navy); text-decoration: underline; text-underline-offset: 2px; }
.dash-visit-acts { flex: none; margin-left: auto; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.dash-visit-acts .dash-home-action-cta { margin-left: 0; justify-content: center; border: 0; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; }
.dash-visit-acts .dash-home-action-cta:disabled { opacity: .6; cursor: default; }
.dash-visit-late { border: 0; background: none; padding: 4px 0; font: inherit; font-size: 14px; font-weight: 500; color: var(--color-navy); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: center; }
.dash-visit-late:disabled { opacity: .5; cursor: default; }
.dash-visit-nolink { font-size: 13.5px; color: var(--text-secondary); max-width: 220px; text-align: center; }
.dash-visit-late-menu { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 16px; margin-top: 4px; border-top: 1px solid rgba(220,182,136,.35); }
.dash-visit-late-menu[hidden] { display: none; } /* the flex rule above beat the hidden attribute: the menu showed before "Running late" was tapped */
/* Several visits on one day: the cards stack inside the one breakout slot. */
.dash-visit-stack > .dash-home-breakout { margin: 14px 0 0; }
.dash-visit-stack > .dash-home-breakout:first-child { margin-top: 0; }
.dash-visit-late-k { font-size: 13.5px; color: var(--text-secondary); margin-right: 4px; }
.dash-visit-late-opt { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(220,182,136,.6); background: var(--surface); font: inherit; font-size: 14px; font-weight: 500; color: var(--font); cursor: pointer; }
.dash-visit-late-opt:hover:not(:disabled) { border-color: var(--orange-500, #EE6D21); }
.dash-visit-late-opt:disabled { opacity: .5; cursor: default; }
@media (max-width: 700px) { .dash-visit-acts { width: 100%; margin-left: 0; } }

/* Finished state — quiet, green, and it still names what comes next. */
.dash-home-action-done { border: 1px solid rgba(74,124,89,0.35); }
.dash-home-action-tick {
	flex: none;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(74,124,89,0.12);
}
.dash-home-action-tick-img {
	width: 26px;
	height: 26px;
	/* recolour the shared nav tick to the success green */
	filter: brightness(0) saturate(100%) invert(41%) sepia(21%) saturate(717%) hue-rotate(84deg) brightness(94%) contrast(88%);
}
.dash-home-action-done .dash-home-action-t { color: var(--success); }

/* ── What happens next ──────────────────────────────────────────────────── */
.dash-home-road { padding: 64px var(--home-pad) 12px; }
.dash-home-kicker {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--orange-600);
}
.dash-home-roadtitle {
	margin: 0 0 30px;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--font);
}
.dash-home-moments {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: 18px;
	margin-top: 100px;   /* room for the connector to breathe above the cards */
}
/* Runs dot to dot: the dots sit at the centre of each third (16.6% and 83.3%),
   so the rule starts and stops there instead of overshooting both ends. */
.dash-home-moments::before {
	content: "";
	position: absolute;
	top: -43px;
	left: 16.6%;
	right: 16.7%;
	border-top: 2px solid var(--cream-300);
}
/* Care-open timeline (dash_home_v3.go homeCareHTML): four steps on the same
   connector. Dots sit at the centre of each quarter, so the rule runs from
   12.5% to 87.5%. Below 1100px four cards are too narrow to read, so the
   steps fall into two rows and the connector goes — as it already does on
   the phone. */
.dash-home-moments-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.dash-home-moments-4::before { left: 12.5%; right: 12.5%; }
@media (max-width: 1100px) {
	.dash-home-moments-4 { grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 24px; }
	.dash-home-moments-4::before,
	.dash-home-moments-4 .dash-home-dot { display: none; }
}
/* Still to come: an outline on the same rule the line is drawn in.
   Sized so the 24px circle stays centred on the connector at -28px. */
.dash-home-dot {
	position: absolute;
	top: -60px;   /* centres the 36px ring on the connector at -42px */
	width: 36px;
	height: 36px;
	margin-left: -18px;
	border-radius: 50%;
	/* The page ground, not transparent — the connector must stop at the ring
	   rather than run through the middle of it. */
	background: var(--cream);
	border: 2px solid var(--cream-300);
}
/* The moment the member is in is still ahead of them, so it reads as one of
   the outlined ones. */
.dash-home-dot-on {
	background: var(--cream);
	border-color: var(--cream-300);
	box-shadow: none;
}
/* Behind them: solid orange, no stroke, ticked. The check asset already ships
   stroked #292626, so it needs no filter to read black. */
/* An outlined dot holds its moment's glyph, one step darker than the ring it
   sits in so it reads as part of the same quiet mark. */
.dash-home-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 17px 17px;
	/* Sources ship in different stroke colours; brightness(0) flattens them
	   first, and the rest lands on --cream-400 #B7B4A8. */
	filter: brightness(0) saturate(100%) invert(55.4%) sepia(8%) saturate(231%) hue-rotate(11deg) brightness(116.2%) contrast(132.4%);
}
.dash-home-dot-setup::after { background-image: url('/dashboard/imgs/icons/ico-account-setup.svg'); }
.dash-home-dot-app::after   { background-image: url('/dashboard/imgs/icons/nav-app.svg'); }
.dash-home-dot-care::after  { background-image: url('/dashboard/imgs/icons/mem-steth.svg'); }
.dash-home-dot-intake::after { background-image: url('/dashboard/imgs/icons/ico-health-profile.svg'); }
.dash-home-dot-panel::after  { background-image: url('/dashboard/imgs/icons/mem-flask.svg'); }
.dash-home-dot-visit::after  { background-image: url('/dashboard/imgs/icons/mem-steth.svg'); }
.dash-home-dot-plan::after   { background-image: url('/dashboard/imgs/icons/nav-records.svg'); }

/* Orange fill, black tick, no ring — the border stays declared as transparent
   so the completed dot keeps the same 36px footprint as the outlined ones. */
.dash-home-dot-past {
	background: var(--orange);
	border-color: transparent;
}
.dash-home-dot-past::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Its own asset — nav-check.svg is shared with the preview list and the
	   moment tick, so its weight cannot be tuned for this one spot. Drawn at
	   1.9 and rendered at 25px, it lands near 2px of ink. The shorthand and the
	   filter reset are what clear the moment glyph inherited above. */
	background: url('/dashboard/imgs/icons/nav-check-bold.svg') calc(50% + 1px) center / 25px 25px no-repeat;
	filter: none;
}
.dash-home-moment {
	position: relative;
	padding: 24px 26px;
	border: 1px solid transparent;   /* holds the geometry, draws nothing */
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-card);
}
/* Every moment is the same card; the dots on the connector say where the
   member is, so the card does not have to say it a second time. */
.dash-home-moment-when {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--text-secondary);
}
.dash-home-moment-done .dash-home-moment-when { color: var(--success); }
.dash-home-moment-title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 7px;
	font-size: 17.5px;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--font);
}
.dash-home-moment-icon {
	flex: none;
	width: 20px;
	height: 20px;
	display: block;
	filter: brightness(0) invert(15%);   /* --brand-black, whatever the asset ships */
}
/* A bare green check, no plate: "Done" is already the word, so the tick only
   has to agree with it. */
/* A filled disc, not a hairline glyph. A 16px green tick next to a 12.5px word
   was the quietest mark on a row whose last card carries a full uppercase pill;
   done should read as settled, not as unfinished (Pavel, mobile, 2026-08-31). */
.dash-home-moment-tick {
	flex: none;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--success);
}
.dash-home-moment-tick-img {
	width: 12px;
	height: 12px;
	/* White on the disc. The asset ships stroked #292626. */
	filter: brightness(0) invert(1);
}
/* The word beside it grows with the mark rather than staying at the size the
   other cards use for a date. */
.dash-home-moment-done .dash-home-moment-when {
	font-size: 13.5px;
	letter-spacing: 0.01em;
}
.dash-home-moment-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-secondary);
}
.dash-home-chip {
	display: inline-block;
	margin-top: 14px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.dash-home-chip-next { background: var(--orange-tint); color: var(--orange-600); }
/* Same chip as the pricing pages: orange stroke, orange label. */
.dash-home-chip-open {
	background: rgba(255,136,76,0.12); color: var(--orange-600);
	border: 1px solid var(--orange-600);
}
.dash-home-chip-done { background: rgba(74,124,89,0.14); color: var(--success); }
/* A chip that goes somewhere: same pill, navy, so the step's one action reads
   as a button without adding a second kind of button to the page. */
a.dash-home-chip-link {
	background: var(--color-navy);
	color: var(--text-on-dark);
	text-decoration: none;
	transition: background .15s ease, transform .15s ease;
}
a.dash-home-chip-link:hover { background: var(--navy-800); }
a.dash-home-chip-link:active { transform: scale(0.97); }

/* ── Health-info notice ───────────────────────────────────────────────────
   MARKUP REMOVED (Pavel, 2026-08-31): homeNoticeHTML() is gone from
   dash_home_v3.go, so nothing renders these. Kept only so the treatment does
   not have to be rebuilt if the notice returns; safe to delete. */
.dash-home-notice {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 16px 0 0;
	padding: 18px 22px;
	border: 1px solid rgba(16,41,60,0.12);
	border-radius: 14px;
	background: rgba(217,226,231,0.4);
}
/* A plain black glyph — no disc. */
.dash-home-notice-i {
	flex: none;
	display: block;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	filter: brightness(0) invert(15%);   /* --brand-black, whatever the asset ships */
}
.dash-home-notice-body { min-width: 0; max-width: 820px; }
/* Same two sizes as the cards it now sits under. */
.dash-home-notice-t {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--font);
}
.dash-home-notice-d {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.625;
	color: var(--text-secondary);
}

/* ── The ordinary card sections, when there are any ─────────────────────── */
.dash-home-rest {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px var(--home-pad) 8px;
}

/* ── Social band — the page's only footer ───────────────────────────────── */
.dash-home-social {
	display: grid;
	grid-template-columns: minmax(0,1fr) 460px;
	gap: 56px;
	align-items: center;
	margin-top: 56px;
	padding: 64px var(--home-pad) 66px;
	background: var(--color-navy, #10293C);   /* flat Circle Navy, no glow (Pavel, 2026-09-29) */
}
.dash-home-social-title {
	margin: 0 0 16px;
	font-size: 46px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--text-on-dark);
}
.dash-home-social-text {
	margin: 0 0 28px;
	max-width: 440px;
	font-size: 16px;
	line-height: 1.65;
	color: #C7D3DB;
}
.dash-home-follow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	border-radius: 999px;
	background: var(--orange);
	color: var(--brand-black);
	font-size: 15.5px;
	font-weight: 500;
}
.dash-home-follow:hover { background: var(--orange-dark); text-decoration: none; }
.dash-home-seeall {
	margin-left: 16px;
	font-size: 14px;
	color: #C7D3DB;
	border-bottom: 1px solid rgba(199,211,219,0.4);
}
.dash-home-ig {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.dash-home-tile {
	display: block;
	position: relative;
	aspect-ratio: 1;
	border-radius: 12px;
	overflow: hidden;
}
.dash-home-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 250ms ease;
}
.dash-home-tile:hover img { transform: scale(1.05); }
.dash-home-addr {
	grid-column: 1 / -1;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(255,254,246,0.12);
	font-size: 13px;
	color: #8FA3B0;
}

/* ── Tablet: the hero's side card drops under the headline first ────────── */
@media (max-width: 1100px) {
	.dash-home { --home-pad: 40px; }
	.dash-home-hero-grid { grid-template-columns: 1fr; gap: 28px; }
	.dash-home-opens { max-width: 420px; }
	.dash-home-title { font-size: 42px; }
	.dash-home-social { grid-template-columns: 1fr; gap: 40px; }
	.dash-home-social-text { max-width: none; }
}

/* ── Phone ──────────────────────────────────────────────────────────────────
   Not the desktop page shrunk. Three things are actively REMOVED because they
   cost height and carry nothing once the layout is one column wide:

     · the dashed connector and its dots — they describe a left-to-right
       sequence that no longer exists when the moments are stacked;
     · the ghosted hero ring — at this width it sits behind the headline and
       reads as a smudge rather than a motif;
     · "See all posts" — the same destination as the button directly above it.

   The clinic-opens card stays: the date and the address are the two facts a
   member opens this page to check. It becomes a full-width band instead of a
   floating card so it does not read as a second, competing action.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.dash-home { --home-pad: 20px; }

	.dash-home-hero { padding: 32px var(--home-pad) 104px; }
	.dash-home-hero::before { display: none; }
	.dash-home-title { font-size: 30px; line-height: 1.14; }
	.dash-home-lede { font-size: 15.5px; line-height: 1.6; }
	.dash-home-eyebrow { font-size: 11px; letter-spacing: 0.18em; }
	.dash-home-opens { max-width: none; padding: 18px 20px; margin-top: 0; }
	.dash-home-opens-date { font-size: 22px; }
	.dash-home-opens-rule { margin: 12px 0 10px; }

	.dash-home-breakout { margin: -76px var(--home-pad) 0; }
	.dash-home-action {
		flex-wrap: wrap;
		gap: 14px;
		padding: 22px 20px;
		border-radius: 18px;
	}
	/* Number and title share a line — a 56px circle on its own row above the
	   text wastes the phone's scarcest resource. */
	.dash-home-action-n,
	.dash-home-action-tick { width: 40px; height: 40px; font-size: 20px; }
	.dash-home-action-tick-img { width: 20px; height: 20px; }
	.dash-home-action-body { flex: 1 1 60%; }
	.dash-home-action-t { font-size: 17px; }
	.dash-home-action-d { font-size: 14px; }
	.dash-home-action-cta {
		margin-left: 0;
		width: 100%;
		justify-content: center;
		padding: 14px 24px;
	}

	.dash-home-road { padding: 40px var(--home-pad) 20px; }
	.dash-home-roadtitle { font-size: 24px; margin-bottom: 20px; }
	/* No connector on this breakpoint, so the room it needed goes back. */
	.dash-home-moments { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
	.dash-home-moments::before,
	.dash-home-dot { display: none; }
	.dash-home-moment { padding: 20px 20px; }
	.dash-home-moment-title { font-size: 16.5px; }
	/* Status on the title's line, far right (Pavel, 2026-09-29): icon + title left,
	   Done/Now right, then the text and any button full width underneath. */
	.dash-home-moment { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 12px; align-items: center; }
	.dash-home-moment-title { grid-row: 1; grid-column: 1; margin: 0; }
	.dash-home-moment-when { grid-row: 1; grid-column: 2; justify-self: end; margin: 0; white-space: nowrap; }
	.dash-home-moment > :not(.dash-home-moment-title):not(.dash-home-moment-when) { grid-column: 1 / -1; justify-self: start; }
	.dash-home-moment-text { margin-top: 7px; }

	.dash-home-notice { margin: 12px 0 0; padding: 16px 18px; gap: 12px; }
	.dash-home-notice-d { font-size: 13.5px; }

	.dash-home-rest { padding: 28px var(--home-pad) 4px; }

	.dash-home-social { margin-top: 36px; padding: 44px var(--home-pad) 48px; gap: 28px; }
	.dash-home-social-title { font-size: 28px; }
	.dash-home-social-text { font-size: 15px; margin-bottom: 22px; }
	.dash-home-follow { width: 100%; justify-content: center; }
	.dash-home-seeall { display: none; }
	.dash-home-ig { gap: 6px; }
	.dash-home-tile { border-radius: 9px; }
	.dash-home-addr {
		flex-direction: column;
		gap: 6px;
		margin-top: 20px;
		padding-top: 16px;
		font-size: 12px;
	}
}

/* No action card (setup complete): the hero stops reserving the 140px the
   breakout card used to be pulled up into, and the moments move up to meet it.
   Without this the finished state reads as a loading failure — a band of empty
   navy where the member last saw their one task. */
.dash-home-noaction .dash-home-hero { padding-bottom: 56px; }
.dash-home-noaction .dash-home-road { padding-top: 48px; }
@media (max-width: 767px) {
	.dash-home-noaction .dash-home-hero { padding-bottom: 36px; }
	.dash-home-noaction .dash-home-road { padding-top: 32px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SETTINGS (redesign) — mockups/transactional/settings-redesign.html, r339
   
   Class names are namespaced dash-set-*. The mockup styles bare .card, .row,
   .nav, .btn and .chip, which would collide with half the dashboard; the names
   below say what the object is, per house convention.

   BREAKPOINT. The mockup puts its section-nav beside the content from 860px,
   because it was drawn as a standalone page. Inside the dashboard the app rail
   already takes --sidebar-w (300px), so 860px of viewport leaves nothing. The
   side-by-side layout starts at 1180px here: 300 rail + 80 page padding +
   208 nav + 24 gap + 560 content. Below that the nav is a row of pills, which
   is also what a phone gets.
   ══════════════════════════════════════════════════════════════════════════ */

.dash-set { display: block; }

/* ── Section nav ─────────────────────────────────────────────────────────── */
.dash-set-nav { padding: 0 0 4px; }
.dash-set-nav-list { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; }
.dash-set-nav-grp { display: none; }

.dash-set-navitem {
  display: flex; align-items: center; gap: 8px; flex: none;
  white-space: nowrap; text-decoration: none;
  border: 1px solid rgba(220,182,136,0.45); border-radius: 999px;
  background: var(--surface); color: var(--font);
  font-size: 14px; padding: 8px 15px; cursor: pointer;
  transition: background 140ms, border-color 140ms, color 140ms;
}
.dash-set-navitem:hover { background: rgba(0,0,0,0.03); text-decoration: none; }
.dash-set-navitem-on {
  /* The rail's active row at half strength; this one carries it at full. */
  background: var(--cream-deep);
  border-color: var(--cream-300);
  color: var(--brand-black); font-weight: 500;
}
.dash-set-navicon { display: none; }
/* Greyed future homes: visible on desktop only — on a phone they would push
   the six real sections off the end of the scroller. */
.dash-set-navitem-soon { display: none; }

.dash-set-pill {
  display: inline-block; border-radius: 999px; padding: 2px 8px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; background: var(--cream); color: var(--cream-700);
  border: 1px solid var(--cream-300);
}

/* ── Content ─────────────────────────────────────────────────────────────── */
.dash-set-content { min-width: 0; padding-top: 4px; }
.dash-set-panel { display: none; }
.dash-set-panel-on { display: block; }
.dash-set-subview { display: none; }
.dash-set-subview-on { display: block; }

.dash-set-h1 { font-size: 24px; font-weight: 500; margin: 0; letter-spacing: -0.01em; }
.dash-set-h1-sm { font-size: 21px; }
/* Same eyebrow as the group headings inside the panel (.dash-set-seclabel),
   so a panel's title and its section labels read as one system. */
.dash-set-sub {
  color: var(--text-secondary);
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Same 7px gap the group labels leave above their card, so the panel header
     and the sections inside it sit on one rhythm. */
  margin: 7px 0 7px;
}
.dash-set-body { font-size: 14px; color: var(--text-secondary); margin: 0; line-height: 1.55; }
.dash-set-body b, .dash-set-note b { font-weight: 500; color: var(--font); }
.dash-set-muted { color: var(--text-secondary); }

.dash-set-seclabel {
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-secondary); margin: 24px 0 7px;
}

.dash-set-card {
  background: var(--surface); border: 1px solid rgba(220,182,136,0.2);
  border-radius: 16px; box-shadow: 0 1px 3px rgba(41,38,38,0.06); padding: 16px;
}
.dash-set-card-flush { padding: 0; overflow: hidden; }
.dash-set-cardact { margin-top: 14px; }

/* ── Rows ────────────────────────────────────────────────────────────────── */
.dash-set-row {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid rgba(220,182,136,0.15); padding: 11px 0;
}
.dash-set-row:last-child { border-bottom: 0; }
.dash-set-row-top { border-top: 1px solid rgba(220,182,136,0.15); border-bottom: 0; margin-top: 12px; padding-top: 14px; }
.dash-set-lbl { width: 132px; flex: none; font-size: 13px; color: var(--text-secondary); }
.dash-set-val { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; }
.dash-set-edit {
  flex: none; font-size: 13px; font-weight: 500; color: var(--text-secondary);
  background: transparent; border: 0; font-family: inherit; cursor: pointer;
  text-decoration: none; padding: 4px 2px; border-radius: 6px;
}
.dash-set-edit:hover { color: var(--orange-600); text-decoration: none; }
.dash-set-edit-ink { color: var(--orange-600); }
.dash-set-edit:focus-visible,
.dash-set-navitem:focus-visible,
.dash-set-navrow:focus-visible,
.dash-set-back:focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 2px; }

/* ── Chips ───────────────────────────────────────────────────────────────── */
.dash-set-chip {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
  border: 1px solid; padding: 2px 9px; font-size: 11px; font-weight: 500;
}
.dash-set-chip-pos { background: rgba(74,124,89,0.12); color: #4A7C59; border-color: rgba(74,124,89,0.3); }
.dash-set-chip-warn { background: rgba(196,92,74,0.12); color: #C45C4A; border-color: rgba(196,92,74,0.3); }
.dash-set-chip-neu { background: var(--cream); color: var(--cream-700); border-color: var(--cream-300); }
.dash-set-chip-ic {
  width: 11px; height: 11px; display: block;
  filter: brightness(0) saturate(100%) invert(41%) sepia(18%) saturate(818%) hue-rotate(83deg) brightness(94%) contrast(87%); /* #4A7C59 */
}

.dash-set-note { font-size: 12px; color: var(--text-secondary); margin: 8px 2px 0; line-height: 1.55; }

/* ── Profile photo (Settings › Profile › Photo; dash_photo.go) ──────────── */
.dash-photo-card { padding: 16px 18px; }
.dash-photo-row { display: flex; align-items: center; gap: 18px; }
.dash-photo-avatar {
  width: 72px; height: 72px; flex: none; border-radius: 50%;
  display: grid; place-items: center; object-fit: cover;
  background: var(--cream-deep); color: var(--brand-black);
  font-size: 26px; font-weight: 500; text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(220,182,136,0.35);
}
.dash-photo-text { min-width: 0; }
.dash-photo-name { margin: 0 0 8px; font-size: 15px; font-weight: 500; }
.dash-photo-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* The file input lives inside the button's label, so the button is the
   platform's own and the input never has to be styled. */
.dash-photo-btn { position: relative; cursor: pointer; }
.dash-photo-btn .dash-photo-input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.dash-photo-busy { opacity: .5; pointer-events: none; }
.dash-photo-progress { margin-top: 14px; }
.dash-photo-msg { color: var(--orange-600); }
@media (max-width: 767px) {
  .dash-photo-row { gap: 14px; }
  .dash-photo-avatar { width: 60px; height: 60px; font-size: 22px; }
}

/* The avatar circles the photo replaces: rail, top bar, slide-out. The
   circle keeps its size and its initial; the photo fills it when present. */
.dash-avatar { display: contents; }
.dash-avatar-img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}
.dash-topbar-avatar { overflow: hidden; padding: 0; }
.dash-sidebar-avatar, .dash-slide-avatar { overflow: hidden; }

.dash-set-note-mid { text-align: center; margin-top: 14px; }

/* ── Nav rows (a link shaped like a card row) ────────────────────────────── */
.dash-set-navrow {
  display: flex; align-items: center; gap: 14px; padding: 15px 16px;
  cursor: pointer; background: transparent; border: 0; width: 100%;
  font-family: inherit; text-align: left; text-decoration: none; color: var(--font);
}
.dash-set-navrow:hover { background: rgba(0,0,0,0.02); text-decoration: none; }
.dash-set-navrow-next { border-top: 1px solid rgba(220,182,136,0.15); }
/* No plate behind a row icon — the row is the object, the glyph just labels it. */
.dash-set-navrow-ic {
  width: 24px; height: 24px; display: grid; place-items: center; flex: none;
}
.dash-set-navrow-icimg,
.dash-set-method-icimg {
  width: 20px; height: 20px; display: block;
  filter: brightness(0) invert(15%);   /* --brand-black #292626 */
}
.dash-set-navrow-tx { flex: 1; min-width: 0; }
.dash-set-navrow-tx b { display: block; font-size: 15px; font-weight: 500; }
.dash-set-navrow-tx span { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.dash-set-navrow-chev {
  width: 18px; height: 18px; flex: none; display: block;
  filter: brightness(0) saturate(100%) invert(45%) sepia(6%) saturate(316%) hue-rotate(2deg) brightness(93%) contrast(87%); /* #6B6560 */
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.dash-set-btn {
  border: 0; border-radius: 999px; background: var(--orange); color: var(--brand-black);
  font-family: inherit; font-size: 14px; font-weight: 500; padding: 11px 22px;
  cursor: pointer; text-decoration: none; display: inline-block;
}
.dash-set-btn:hover { background: var(--orange-dark); color: var(--brand-black); text-decoration: none; }
.dash-set-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(220,182,136,0.5); border-radius: 999px; background: transparent;
  color: var(--font); font-family: inherit; font-size: 13px; font-weight: 500;
  padding: 7px 15px; cursor: pointer; text-decoration: none;
}
.dash-set-ghost:hover { background: rgba(0,0,0,0.03); text-decoration: none; }
.dash-set-ghost-danger { border-color: rgba(196,92,74,0.4); color: #C45C4A; }
.dash-set-ghost-ic {
  width: 14px; height: 14px; display: block;
  filter: brightness(0) saturate(100%) invert(15%);
}
.dash-set-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.dash-set-actions-end { justify-content: flex-end; }

/* ── Toggles ─────────────────────────────────────────────────────────────── */
.dash-set-tg {
  position: relative; width: 44px; height: 24px; border: 0; border-radius: 999px;
  background: rgba(220,182,136,0.45); cursor: pointer; flex: none;
  transition: background 150ms; padding: 0;
}
.dash-set-tg-on { background: var(--orange); }
.dash-set-tg::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(41,38,38,0.25);
  transition: left 150ms;
}
.dash-set-tg-on::after { left: 22px; }
.dash-set-tg-locked { opacity: 0.5; cursor: not-allowed; }
.dash-set-tg:focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 2px; }

/* ── Radios ──────────────────────────────────────────────────────────────── */
.dash-set-radio {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  border: 2px solid rgba(220,182,136,0.4); border-radius: 14px;
  background: var(--surface); padding: 14px; cursor: pointer; margin-bottom: 10px;
  transition: border-color 140ms, background 140ms;
}
.dash-set-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.dash-set-radio-dot {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  border: 2px solid var(--border); display: grid; place-items: center; margin-top: 1px;
}
.dash-set-radio:has(input:checked) { border-color: var(--orange); background: rgba(255,136,76,0.05); }
.dash-set-radio:has(input:checked) .dash-set-radio-dot { border-color: var(--orange); }
.dash-set-radio:has(input:checked) .dash-set-radio-dot::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--orange);
}
.dash-set-radio:has(input:focus-visible) { outline: 2px solid var(--orange-dark); outline-offset: 2px; }
.dash-set-radio-tx b { display: block; font-size: 15px; font-weight: 500; }
.dash-set-radio-tx span { font-size: 13px; color: var(--text-secondary); }

/* ── Two-factor method rows ──────────────────────────────────────────────── */
.dash-set-method {
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid rgba(220,182,136,0.15); padding: 14px 0;
}
.dash-set-method-ic {
  width: 24px; height: 24px; display: grid; place-items: center; flex: none;
}
.dash-set-method-soon .dash-set-method-icimg {
  filter: brightness(0) saturate(100%) invert(45%) sepia(6%) saturate(316%) hue-rotate(2deg) brightness(93%) contrast(87%);
}
.dash-set-method-tx { flex: 1; min-width: 0; }
.dash-set-method-tx b { font-size: 15px; font-weight: 500; }
.dash-set-method-tx p { margin: 2px 0 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* ── Plan head ───────────────────────────────────────────────────────────── */
.dash-set-planhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.dash-set-planname { display: flex; align-items: center; gap: 8px; }
.dash-set-planname b { font-size: 17px; font-weight: 500; }

/* ── Receipts ────────────────────────────────────────────────────────────── */
.dash-set-receipt { padding: 15px 16px; border-bottom: 1px solid rgba(220,182,136,0.15); }
.dash-set-receipt:last-child { border-bottom: 0; }
.dash-set-receipt-top { display: flex; align-items: center; gap: 12px; }
.dash-set-receipt-top b { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; }
.dash-set-amt { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.dash-set-receipt-meta { font-size: 13px; color: var(--text-secondary); margin-top: 3px; }
.dash-set-receipt-acts { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.dash-set-receipt-acts a {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  font-weight: 500; color: var(--text-secondary); text-decoration: none;
}
.dash-set-receipt-acts a:hover { color: var(--orange-600); text-decoration: none; }
.dash-set-receipt-ic {
  width: 14px; height: 14px; display: block;
  filter: brightness(0) saturate(100%) invert(45%) sepia(6%) saturate(316%) hue-rotate(2deg) brightness(93%) contrast(87%);
}
.dash-set-chargehead { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.dash-set-chargehead b { font-size: 15px; font-weight: 500; }

/* ── Callout, danger, forms ──────────────────────────────────────────────── */
.dash-set-callout {
  display: flex; gap: 12px; border: 1px solid rgba(232,200,88,0.7);
  background: #FBF3E2; border-radius: 14px; padding: 14px; margin: 14px 0;
}
.dash-set-callout-ic {
  width: 18px; height: 18px; flex: none; margin-top: 2px; display: block;
  filter: brightness(0) saturate(100%) invert(48%) sepia(51%) saturate(704%) hue-rotate(9deg) brightness(91%) contrast(88%); /* #9A7B1E */
}
.dash-set-callout b { font-size: 14px; font-weight: 500; }
.dash-set-callout p { margin: 3px 0 0; font-size: 13px; color: var(--text-secondary); line-height: 1.55; }

.dash-set-danger {
  border: 1px solid rgba(196,92,74,0.3); background: rgba(196,92,74,0.05);
  border-radius: 16px; padding: 16px;
}
.dash-set-danger b { font-size: 15px; font-weight: 500; }
.dash-set-danger-act { margin-top: 14px; }

.dash-set-textarea,
.dash-set-field {
  width: 100%; resize: none; border: 1px solid rgba(220,182,136,0.4);
  border-radius: 12px; background: rgba(244,241,226,0.4); padding: 11px 14px;
  font-family: inherit; font-size: 14px; color: var(--font);
}
.dash-set-textarea:focus, .dash-set-field:focus { outline: 2px solid var(--orange-dark); outline-offset: 1px; }
.dash-set-check { display: flex; gap: 10px; margin: 14px 2px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.dash-set-check input { margin-top: 2px; accent-color: var(--orange); flex: none; }

.dash-set-subcard { padding-top: 14px; margin-top: 4px; border-top: 1px solid rgba(220,182,136,0.15); }
.dash-set-subcard-title { font-size: 13px; font-weight: 500; color: var(--text-secondary); margin: 0 0 10px; }

.dash-set-linkrow { margin-top: 12px; display: flex; gap: 18px; font-size: 14px; font-weight: 500; }
.dash-set-linkrow a { color: var(--orange-600); text-decoration: none; }
.dash-set-linkrow a:hover { text-decoration: underline; }

/* ── Subview head ────────────────────────────────────────────────────────── */
.dash-set-subhead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dash-set-back {
  border: 0; background: transparent; cursor: pointer; flex: none;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  text-decoration: none;
}
.dash-set-back:hover { background: var(--cream); }
.dash-set-back-ic { width: 20px; height: 20px; display: block; filter: brightness(0); }

/* ── Notification matrix ─────────────────────────────────────────────────── */
.dash-set-notif-head {
  display: flex; gap: 12px; align-items: center;
  border-bottom: 1px solid rgba(220,182,136,0.15); padding-bottom: 9px;
  font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-secondary);
}
.dash-set-notif-row {
  display: flex; gap: 12px; align-items: center;
  border-bottom: 1px solid rgba(220,182,136,0.15); padding: 13px 0;
}
.dash-set-notif-row:last-child { border-bottom: 0; }
.dash-set-notif-name { flex: 1; min-width: 0; }
.dash-set-notif-name b { font-size: 15px; font-weight: 500; }
.dash-set-notif-name p { margin: 2px 0 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.dash-set-notif-col { width: 46px; flex: none; display: flex; justify-content: center; text-align: center; }

/* ── Legacy blocks, themed to match ──────────────────────────────────────────
   The password fields, SSO providers, security keys and pharmacy form are
   still rendered by the original code with their original ids, because
   settings.js addresses those ids by name. They are restyled here rather than
   rewritten — no DOM change, so no JS breakage. */
.dash-set-panel .dash-settings-card {
  background: var(--surface); border: 1px solid rgba(220,182,136,0.2);
  border-radius: 16px; box-shadow: 0 1px 3px rgba(41,38,38,0.06);
  padding: 16px; margin: 0;
}
.dash-set-panel .dash-section { margin: 0; }
.dash-set-panel .dash-section-title {
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-secondary); margin: 24px 0 7px;
}
.dash-set-panel .dash-settings-row {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid rgba(220,182,136,0.15); padding: 11px 0;
}
.dash-set-panel .dash-settings-row:last-child { border-bottom: 0; }
.dash-set-panel .dash-settings-label { width: 132px; flex: none; font-size: 13px; color: var(--text-secondary); }
.dash-set-panel .dash-settings-value { flex: 1; min-width: 0; font-size: 14px; }
.dash-set-panel .dash-settings-input {
  width: 100%; border: 1px solid rgba(220,182,136,0.4); border-radius: 12px;
  background: rgba(244,241,226,0.4); padding: 10px 14px;
  font-family: inherit; font-size: 14px; color: var(--font);
}
.dash-set-panel .dash-settings-btn,
.dash-set-panel .dash-settings-btn-sm {
  border: 1px solid rgba(220,182,136,0.5); border-radius: 999px; background: transparent;
  color: var(--font); font-family: inherit; font-size: 13px; font-weight: 500;
  padding: 7px 15px; cursor: pointer; text-decoration: none; display: inline-block;
}
.dash-set-panel .dash-settings-btn:hover { background: rgba(0,0,0,0.03); }
/* The panel's default button is a quiet outlined pill. The one that commits a
   change is not: orange fill, black label, and the ramp for its states. */
.dash-set-panel .dash-settings-btn:not(.dash-settings-btn-sm):not(.dash-settings-btn-danger) {
  background: var(--orange); border-color: transparent; color: var(--brand-black);
  font-weight: 500;
}
.dash-set-panel .dash-settings-btn:not(.dash-settings-btn-sm):not(.dash-settings-btn-danger):hover {
  background: var(--orange-500);
}
.dash-set-panel .dash-settings-btn:not(.dash-settings-btn-sm):not(.dash-settings-btn-danger):active {
  background: var(--orange-600);
}
/* Not yet available to press: inert, and plainly so. */
.dash-set-panel .dash-settings-btn-disabled,
.dash-set-panel .dash-settings-btn-disabled:hover,
.dash-set-panel .dash-settings-btn-disabled:active {
  background: var(--muted); border-color: rgba(220,182,136,0.5);
  color: var(--text-secondary); cursor: not-allowed; opacity: 0.6;
}
/* The action row carries no label column, so the button starts at the card's
   left edge instead of in the value column. */
.dash-settings-row-action { align-items: flex-start; }
@media (min-width: 1180px) {
  .dash-set-panel .dash-settings-row-action .dash-settings-btn {
    font-size: 15px; padding: 12px 28px; border-radius: 12px;
  }
}
.dash-set-panel .dash-settings-btn-danger { border-color: rgba(196,92,74,0.4); color: #C45C4A; }

/* ── Desktop: nav beside content ─────────────────────────────────────────── */
@media (min-width: 1180px) {
  .dash-set { display: flex; gap: 24px; align-items: flex-start; }
  .dash-set-nav { flex: none; width: 208px; padding: 0; }
  .dash-set-nav-sticky { position: sticky; top: 24px; }
  .dash-set-nav-list { display: block; overflow: visible; padding: 0; }
  .dash-set-nav-grp {
    display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-secondary); margin: 20px 0 6px 12px;
  }
  .dash-set-navitem {
    width: 100%; border: 0; background: transparent; border-radius: 10px;
    padding: 9px 12px; margin-bottom: 2px; white-space: normal;
  }
  .dash-set-navitem-on { background: var(--cream-deep); }
  .dash-set-navicon {
    display: block; width: 17px; height: 17px; flex: none;
    filter: brightness(0) saturate(100%) invert(45%) sepia(6%) saturate(316%) hue-rotate(2deg) brightness(93%) contrast(87%);
  }
  .dash-set-navitem-on .dash-set-navicon {
    filter: brightness(0) invert(15%);   /* --brand-black #292626 */
  }
  .dash-set-navitem-soon { display: flex; opacity: 0.55; cursor: not-allowed; }
  .dash-set-navitem-soon .dash-set-pill { margin-left: auto; }
  /* The content column takes the space the rail and the section list leave,
     up to a cap — so it is 560px on a small laptop and 860px on a wide
     monitor, instead of the same 640px ribbon on both. */
  .dash-set-content { flex: 1; min-width: 0; max-width: 860px; padding-top: 0; }
}
@media (min-width: 1400px) {
  .dash-set { gap: 32px; }
  .dash-set-nav { width: 232px; }
  .dash-set-lbl { width: 160px; }
}

/* ── Phone ───────────────────────────────────────────────────────────────── */
@media (max-width: 599px) {
  .dash-set-lbl { width: 104px; }
  .dash-set-row { align-items: flex-start; }
  .dash-set-planhead { flex-direction: column; gap: 12px; }
  .dash-set-actions { flex-direction: column-reverse; align-items: stretch; }
  .dash-set-actions .dash-set-btn,
  .dash-set-actions .dash-set-ghost { width: 100%; text-align: center; justify-content: center; }
  /* The matrix is the one thing that cannot shrink: three 46px columns plus a
     label do not fit beside each other at 320px, so the card scrolls sideways
     inside its own box rather than the page doing it. */
  .dash-set-notif-scroll { overflow-x: auto; }
  .dash-set-notif-head, .dash-set-notif-row { min-width: 340px; }
}
.dash-set-val-stack { flex-direction: column; align-items: flex-start; gap: 2px; }
.dash-set-val-stack b { font-weight: 500; }
.dash-set-val-stack .dash-set-note { margin: 0; }

/* Collapsing the rail is motion; honour the preference to do without it. */
@media (prefers-reduced-motion: reduce) {
  .dash-sidebar, .dash-content, .dash-sidebar-item, .dash-sidebar-next,
  .dash-sidebar-identity, .dash-sidebar-label,
  .dash-sidebar-identity-text, .dash-sidebar-next-text,
  .dash-settings-radio-option,
  .dash-settings-radio-header input[type="radio"] { transition: none; }
}

/* ══ Notifications panel ═════════════════════════════════════════════════
   What the bell opens. One panel serves all three bells — the mobile header,
   the desktop top bar and the fullscreen TopNav — so it is positioned against
   the viewport rather than against any one of them.

   Desktop: a card under the top-right corner, the same surface and elevation
   as the profile dropdown beside it. Phone: it spans the width under the
   header, because a 200px card floating in the corner of a phone is a hit
   target you have to aim at.

   The overlay is invisible and exists only to swallow the next tap on a
   touch screen, where "click outside to close" otherwise costs two taps. */
.dash-notif-overlay {
  display: none; position: fixed; inset: 0; z-index: 109;
  background: transparent;
}
.dash-notif-overlay.dash-notif-open { display: block; }
.dash-notif {
  display: none;
  position: fixed; z-index: 110;
  top: calc(var(--topbar-h) + 8px); right: 16px;
  width: min(340px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid rgba(220,182,136,0.35);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 18px 44px rgba(41,38,38,0.16), 0 2px 6px rgba(41,38,38,0.06);
  overflow: hidden;
}
.dash-notif.dash-notif-open { display: block; }
.dash-notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 12px 12px 16px;
  border-bottom: 1px solid rgba(220,182,136,0.25);
}
.dash-notif-title { font-size: 15px; font-weight: 500; color: var(--font); }
.dash-notif-x {
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: transparent; display: grid; place-items: center;
  cursor: pointer; padding: 0; transition: background 140ms;
}
.dash-notif-x:hover { background: var(--cream-200); }
.dash-notif-x:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.dash-notif-x-icon { width: 16px; height: 16px; display: block; filter: brightness(0) invert(15%); }
/* The list will live here when there is one to show. */
.dash-notif-body { max-height: min(60vh, 420px); overflow-y: auto; }
.dash-notif-empty { padding: 28px 20px 30px; text-align: center; }
.dash-notif-empty-icon {
  width: 40px; height: 40px; margin: 0 auto 12px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--cream-200);
}
/* The asset ships near-black; lightened here so the empty state reads as calm
   rather than as an alert. */
.dash-notif-empty-img { width: 20px; height: 20px; display: block; opacity: 0.55; }
.dash-notif-empty-lead { margin: 0; font-size: 15px; font-weight: 500; color: var(--font); }
.dash-notif-empty-sub {
  margin: 6px auto 0; max-width: 260px;
  font-size: 13.5px; line-height: 1.5; color: var(--text-secondary);
}
@media (max-width: 767px) {
  .dash-notif {
    top: calc(var(--topbar-h) + 6px); right: 10px; left: 10px;
    width: auto;
  }
}

/* The way back into the purchase flow from the confirmation page, for a member
   who is deliberately changing plan. Quiet on purpose: it must be findable and
   must not compete with "Set up your account". */
.thanks-change { margin: 16px 0 0; font-size: 13px; text-align: center; }
.thanks-change a {
  color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px;
}
.thanks-change a:hover { color: var(--font); }

/* ══ Touch: no form control under 16px ═══════════════════════════════════
   THIS IS WHY THE BOTTOM BAR FLOATS MID-PAGE ON THE PHONE.

   Mobile Safari zooms the page in when you focus a field whose text is under
   16px — and it does not zoom back out. Once the page is zoomed, the visual
   viewport is smaller than the layout viewport, and `position: fixed` pins to
   the LAYOUT viewport: the tab bar lands wherever that bottom edge happens to
   be on screen, in a different place every time you pan, and the mobile header
   sits off-screen above. Both of Pavel's screenshots show exactly that — a
   stranded tab bar AND no header at the top, which no repaint bug would do.

   It showed up on Settings because .dash-settings-input is 14px. The signup
   gate had the same defect and was fixed the same way earlier today; this is
   the rest of the app.

   Touch pointers only, so the desktop type scale is untouched. Checkboxes and
   radios are not affected — they carry no text. */
@media (pointer: coarse) {
  .dash-settings-input,
  .dash-set-panel .dash-settings-input,
  .dash-chat-input,
  .dash-intake-ma-select,
  .chat-window-content textarea.inplong,
  body.dash-body input[type="text"],
  body.dash-body input[type="email"],
  body.dash-body input[type="tel"],
  body.dash-body input[type="password"],
  body.dash-body input[type="number"],
  body.dash-body input[type="search"],
  body.dash-body input[type="date"],
  body.dash-body input:not([type]),
  body.dash-body select,
  body.dash-body textarea {
    font-size: 16px;
  }
}

/* ── Settings: form feedback and a receipt that is not ready ──────────────
   The billing question's reply to the member. It is the only thing on that
   screen that tells them whether the mail actually went, so it is not muted. */
.dash-set-formmsg {
  margin: 14px 0 0; padding: 10px 14px; border-radius: 10px;
  font-size: 13.5px; line-height: 1.5;
}
.dash-set-formmsg-ok {
  background: rgba(74,124,89,0.12); color: var(--success);
  border: 1px solid rgba(74,124,89,0.3);
}
.dash-set-formmsg-err {
  background: rgba(196,92,74,0.10); color: var(--warning, #C45C4A);
  border: 1px solid rgba(196,92,74,0.3);
}
/* A purchased charge whose PDF has not been generated yet. Stated rather than
   linked: the link used to go to a page that said "still being generated",
   which is a dead end dressed as an action. */
.dash-set-receipt-pending { color: var(--text-secondary); font-size: 13px; }

/* ── Settings: the "we have it" state ─────────────────────────────────────
   What a request screen becomes once it has been sent. It replaces the form
   rather than sitting under it — a spent button beneath live radio buttons
   reads as a form you might still have to submit. */
.dash-set-sent {
  background: var(--surface);
  border: 1px solid rgba(220,182,136,0.35);
  border-radius: 16px;
  padding: 30px 24px 26px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.dash-set-sent-tick {
  width: 46px; height: 46px; margin: 0 auto 16px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(74,124,89,0.12);
}
.dash-set-sent-ic {
  width: 22px; height: 22px; display: block;
  /* --success #4A7C59 */
  filter: brightness(0) saturate(100%) invert(41%) sepia(18%) saturate(818%) hue-rotate(83deg) brightness(94%) contrast(87%);
}
.dash-set-sent-title { margin: 0; font-size: 19px; font-weight: 500; color: var(--font); }
.dash-set-sent-body {
  margin: 8px auto 0; max-width: 420px;
  font-size: 14.5px; line-height: 1.6; color: var(--text-secondary);
}
.dash-set-actions-center { justify-content: center; margin-top: 22px; }

/* ── Slide-out menu: the expandable Settings group ────────────────────────
   Six sections that are otherwise a side-scrolling strip of pills at the top
   of the Settings page. Collapsed by default so the menu still reads as a
   short list. */
.dash-slide-group { display: block; }
.dash-slide-parent {
  display: flex; align-items: center; width: 100%;
  background: none; border: 0; font-family: inherit; cursor: pointer;
  text-align: left;
}
.dash-slide-parent .dash-sidebar-label { flex: 1; }
.dash-slide-chev {
  width: 16px; height: 16px; flex: none; display: block;
  transform: rotate(90deg); transition: transform 160ms ease;
  filter: brightness(0) saturate(100%) invert(45%) sepia(6%) saturate(316%) hue-rotate(2deg) brightness(93%) contrast(87%);
}
.dash-slide-group-open .dash-slide-chev { transform: rotate(-90deg); }
.dash-slide-sub { display: none; padding: 2px 0 6px; }
.dash-slide-group-open .dash-slide-sub { display: block; }
.dash-slide-subitem {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px 9px 40px; border-radius: 10px;
  color: var(--text-secondary); text-decoration: none; font-size: 14px;
}
.dash-slide-subitem:hover { background: var(--cream-200); color: var(--font); }
.dash-slide-subicon {
  width: 16px; height: 16px; flex: none; display: block;
  filter: brightness(0) saturate(100%) invert(45%) sepia(6%) saturate(316%) hue-rotate(2deg) brightness(93%) contrast(87%);
}

/* ── Settings: screens that are designs, not working flows ────────────────
   Marked loudly on purpose (Pavel, 2026-08-31: "display them in a way that is
   easy to identify that it's not done yet"). The banner says it, xxNN stands
   in for every figure the app cannot work out, and the actions are disabled
   rather than dressed up as live. */
.dash-set-todo-banner {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0 0 22px; padding: 14px 16px;
  background: rgba(255,136,76,0.10);
  border: 1px dashed var(--orange-600);
  border-radius: 12px;
}
.dash-set-todo-banner b { display: block; font-size: 14px; color: var(--font); }
.dash-set-todo-banner p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.dash-set-todo-banner code,
.dash-set-change code, .dash-set-card code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; padding: 1px 5px; border-radius: 5px;
  background: rgba(41,38,38,0.07); color: var(--orange-700, #A33F00);
}
.dash-set-change { padding: 18px 20px; border-bottom: 1px solid rgba(220,182,136,0.25); }
.dash-set-change:last-child { border-bottom: 0; }
.dash-set-change-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-set-change-head b { font-size: 15.5px; color: var(--font); }
.dash-set-change-what { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--font); }
.dash-set-change .dash-set-note { margin-top: 4px; }
.dash-set-btn-off,
.dash-set-btn-off:hover {
  margin-top: 14px;
  background: var(--cream-200); color: var(--text-secondary);
  border: 1px dashed rgba(41,38,38,0.25);
  cursor: not-allowed; box-shadow: none;
}

/* ── Sign-in methods: the live one ────────────────────────────────────────
   Passkey sits in the same list as the methods that do not exist yet, so it
   uses the same row; what differs is its right edge — a working toggle where
   the others carry a "Soon" pill — and that turning it on opens the key
   enrolment directly underneath (Pavel, 2026-08-31).

   The live row keeps the near-black glyph and full-strength text; only the
   .dash-set-method-soon rows are greyed. */
.dash-set-method-live .dash-set-method-tx b { color: var(--font); }
.dash-set-method-live .dash-settings-toggle { flex: none; margin: 0; }
/* No bottom rule when its enrolment block is open — the two are one thing. */
.dash-set-method-live:has(+ .dash-set-method-open:not([style*="display:none"])) {
  border-bottom: 0;
}
/* 38px is the icon (24) plus the row's gap (14), so everything in here starts
   on the same left edge as "Passkey" and its description — including on a
   phone, where an earlier version dropped the indent and left the button
   hanging under the icon instead (Pavel, 2026-08-31).

   No padding-top: the row above already ends with its own, and the two
   together left a visible hole above the Add button. */
.dash-set-method-open {
  padding: 0 0 14px 38px;
  border-bottom: 1px solid rgba(220,182,136,0.15);
}
/* The rows inside carry the block's rhythm, not their own leading gap. */
.dash-set-method-open .dash-settings-row:first-child { margin-top: 0; }
.dash-set-method-open .dash-settings-row-add { min-height: 0; margin-bottom: 0; }

/* ── Pharmacy: two offers, not two radio buttons ──────────────────────────
   The partner pharmacy is a service worth choosing, so each option is a card
   that says what the member gets. The radio is still the control — it is only
   moved out of the way visually. */
.dash-pharm-opt { padding: 18px 20px; }
.dash-pharm-head { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.dash-pharm-head input[type="radio"] { margin-top: 4px; flex: none; accent-color: var(--orange); width: 18px; height: 18px; }
.dash-pharm-tx { display: block; min-width: 0; }
.dash-pharm-title { display: block; font-size: 16px; font-weight: 500; color: var(--font); letter-spacing: -0.005em; }
.dash-pharm-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--text-secondary); }
.dash-pharm-points { margin: 10px 0 0 30px; padding: 0; list-style: none; }
.dash-pharm-points li {
  position: relative; padding-left: 16px; margin-bottom: 6px;
  font-size: 14px; line-height: 1.55; color: var(--text-secondary);
}
.dash-pharm-points li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--orange);
}
.dash-pharm-terms-toggle {
  margin: 10px 0 0; padding: 0; background: none; border: 0;
  font-family: inherit; font-size: 13px; color: var(--text-secondary);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.dash-pharm-terms-toggle:hover { color: var(--font); }
.dash-pharm-opt .dash-settings-consent-box { margin-top: 10px; }

/* A section a member cannot use yet because it belongs to the membership. */
.dash-set-locked { display: flex; gap: 14px; align-items: flex-start; padding: 4px 0; }
.dash-set-locked-ic {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--cream-200);
}
.dash-set-locked-icimg { width: 17px; height: 17px; display: block; opacity: 0.55; }
.dash-set-locked b { display: block; font-size: 15.5px; font-weight: 500; color: var(--font); }
.dash-set-locked p { margin: 5px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.dash-set-locked .dash-set-btn { margin-top: 14px; display: inline-block; }

/* The pharmacy search takes the whole width of its card — no label column
   beside it, and no 320px cap that would leave it short of the card's edge. */
.dash-pharm-searchrow { display: block; margin-top: 12px; }
.dash-pharm-searchrow .dash-settings-value { display: block; width: 100%; }
.dash-pharm-searchrow .dash-settings-input { max-width: none; }

/* The consent / data-sharing log, opened from Privacy & Data. Empty today and
   saying so plainly — "nobody has seen your record" is the answer a member is
   looking for, and it should read as an answer rather than a placeholder. */
.dash-set-consentlog {
  margin: 4px 0 2px; padding: 14px 16px;
  background: var(--cream-100, #F4F1E2); border-radius: 12px;
}
.dash-set-consentlog-empty { margin: 0; font-size: 14px; line-height: 1.6; color: var(--font); }
.dash-set-consentlog .dash-set-note { margin-top: 8px; }

/* The partner pharmacy's four benefits — Sapna's copy, 2026-08-31.
   A lead-in line, then a glyph and a promise per row. This is the one place in
   Settings that is selling something, so it is built as a panel rather than as
   another list of settings: the rows sit on their own tinted ground, indented
   to the card's text column, and the option beside it keeps plain bullets so
   the difference in weight is the point. */
.dash-pharm-lede {
  margin: 12px 0 0 30px; font-size: 14px; line-height: 1.55; color: var(--font);
}
.dash-pharm-bens {
  margin: 12px 0 0 30px; padding: 16px 18px;
  background: rgba(255,136,76,0.06);
  border: 1px solid rgba(255,136,76,0.22);
  border-radius: 14px;
}
.dash-pharm-ben { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.dash-pharm-ben:last-child { margin-bottom: 0; }
.dash-pharm-ben-ic {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface);
  box-shadow: 0 1px 2px rgba(41,38,38,0.08);
}
.dash-pharm-ben-icimg {
  width: 16px; height: 16px; display: block;
  /* --orange-600 #CA4E00 */
  filter: brightness(0) saturate(100%) invert(55.9%) sepia(93%) saturate(430%) hue-rotate(333deg) brightness(68.6%) contrast(157%);
}
.dash-pharm-ben-tx { min-width: 0; }
.dash-pharm-ben-tx b { display: block; font-size: 14.5px; font-weight: 500; color: var(--font); }
.dash-pharm-ben-tx p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.dash-pharm-closer {
  margin: 12px 0 0 30px; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary);
}
.dash-pharm-title .dash-set-chip { margin-left: 8px; vertical-align: 2px; }
@media (max-width: 599px) {
  .dash-pharm-lede, .dash-pharm-bens, .dash-pharm-closer { margin-left: 0; }
  .dash-pharm-points { margin-left: 0; }
  .dash-pharm-bens { padding: 14px; }
}

/* ── Pharmacy delivery preferences ────────────────────────────────────────
   The partner pharmacy asked for the method, whether someone will be present,
   and a preferred day (via Sapna, 2026-08-31). Three plain questions inside the
   option the member has just chosen, not a form of their own. */
.dash-pharm-delivery { margin: 4px 0 16px; }
.dash-pharm-delivery-lbl {
  display: block; margin: 0 0 8px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-secondary);
}
.dash-pharm-methods { display: grid; gap: 8px; }
.dash-pharm-method {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; border: 1px solid rgba(220,182,136,0.5);
  border-radius: 12px; background: var(--surface); cursor: pointer;
}
.dash-pharm-method:has(input:checked) { border-color: var(--orange); background: var(--orange-050); }
.dash-pharm-method input { margin-top: 2px; flex: none; accent-color: var(--orange); width: 16px; height: 16px; }
.dash-pharm-method-tx b { display: block; font-size: 14px; font-weight: 500; color: var(--font); }
.dash-pharm-method-tx span { display: block; margin-top: 1px; font-size: 13px; color: var(--text-secondary); }
.dash-pharm-present { margin-top: 12px; }
.dash-pharm-day { margin-top: 14px; }
.dash-pharm-day select { max-width: 260px; }
.dash-pharm-delivery-note {
  margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary);
}
.dash-pharm-delivery-warn {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 10px;
  background: rgba(255,136,76,0.10); border: 1px solid rgba(255,136,76,0.3);
  font-size: 12.5px; line-height: 1.55; color: var(--font);
}

/* "Have a question?" pop-up styles live in ask.css (imported at the top of this file). */


/* ══════════════════════════════════════════════════════════════════════════
   Pathway quiz — the reference is the quiz Pavel designed at
   app.mycirclehealth.ca/quiz/{slug} (read from its bundles, 2026-09-03):
   option rows rounded-xl (12px) with a border that warms on hover and NO
   shadow; selected = orange border + 5% orange wash + a 22px ring with a
   dot; questions slide 40px and fade between steps; single-choice steps
   advance on their own; the 1–10 scale is a row of 48px tiles with its
   end labels UNDER it; pill-shaped primary buttons. Scoped to .pathway-step
   / #pathway-quiz so the intake forms keep their own look until they are
   brought over deliberately.
   ══════════════════════════════════════════════════════════════════════════ */

/* Question */
.pathway-step { padding: 8px 0 24px; border-bottom: 0; }
.pathway-step .dash-intake-question-text {
  font-size: 20px; font-weight: 400; line-height: 1.5; margin: 0 0 18px;
}
.pathway-step .dash-intake-question-text b,
.pathway-step .dash-intake-question-text strong { font-weight: 500; }
.pathway-step .dash-intake-options { gap: 10px; margin-top: 0; }

/* Option rows */
.pathway-step .dash-intake-option {
  padding: 14px 16px; gap: 12px;
  border: 1px solid rgba(220,182,136,0.40); border-radius: 12px;
  background: var(--surface); font-size: 16px; line-height: 1.4;
  box-shadow: none;
  transition: border-color 150ms, background 150ms;
}
.pathway-step .dash-intake-option:hover {
  background: var(--surface);
  border-color: rgba(255,136,76,0.35);
  box-shadow: none;
}
.pathway-step .dash-intake-option:has(input:checked) {
  border-color: var(--orange);
  background: rgba(255,136,76,0.05);
}
/* Radio: a ring that gains a dot, not a disc that fills. */
.pathway-step .dash-intake-check-circle {
  width: 22px; height: 22px; min-width: 22px;
  border: 2.5px solid rgba(41,38,38,0.28); background: transparent;
}
.pathway-step .dash-intake-option:has(input[type="radio"]:checked) .dash-intake-check-circle {
  border-color: var(--orange); background: transparent;
}
.pathway-step .dash-intake-option:has(input[type="radio"]:checked) .dash-intake-check-circle::after {
  width: 12px; height: 12px; background: var(--orange);
}
/* Checkbox: 20px, rounded-md, fills orange with a white tick (as before). */
.pathway-step .dash-intake-check-square { width: 20px; height: 20px; min-width: 20px; border-radius: 6px; }

/* Scale: 48px tiles, labels underneath */
.pathway-step .dash-intake-scale { gap: 6px; }
.pathway-step .dash-intake-scale-option {
  height: 48px; padding: 0; justify-content: center;
  border: 0; border-radius: 12px; background: var(--surface);
  box-shadow: 0 1px 3px rgba(41,38,38,0.08);
  font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums;
  transition: background 150ms, color 150ms;
}
.pathway-step .dash-intake-scale-option:hover { background: rgba(255,136,76,0.10); box-shadow: 0 1px 3px rgba(41,38,38,0.08); border-color: transparent; }
.pathway-step .dash-intake-scale-option:has(input:checked) {
  background: var(--orange); color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(255,136,76,0.35);
}
.pathway-step .dash-intake-scale .dash-intake-scale-labels {
  order: 2; margin: 10px 0 0; padding: 0 2px;
  font-size: 14px; font-style: normal; color: rgba(41,38,38,0.7);
}
.pathway-step .dash-intake-scale-label-low,
.pathway-step .dash-intake-scale-label-high { font-style: normal; }

/* Single-choice steps advance on their own after a 3-2-1 count shown on the
   Continue button, which stays as the manual route (Pavel, 2026-09-03:
   "keep it as a back-up"). The ring unwinds once per second. */
.pathway-step-next { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pathway-count { position: relative; width: 22px; height: 22px; flex: none; }
.pathway-count svg { position: absolute; inset: 0; width: 22px; height: 22px; transform: rotate(-90deg); }
.pathway-count-track { fill: none; stroke: rgba(41,38,38,0.18); stroke-width: 2.5; }
.pathway-count-ring {
  fill: none; stroke: var(--brand-black); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 62.83; stroke-dashoffset: 0;
}
.pathway-count-run { animation: pathwayCountUnwind 1s linear forwards; }
@keyframes pathwayCountUnwind { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 62.83; } }
.pathway-count-n {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 11px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
}

/* Buttons: pills */
.pathway-step-next,
.pathway-checkout-btn { border-radius: 999px; }

/* Header: quiet counter, round arrow buttons */
#pathway-quiz .dash-intake-section-progress-label { font-size: 12px; font-weight: 500; color: rgba(41,38,38,0.55); }
#pathway-quiz .dash-intake-nav-btn { border-radius: 50%; transition: background 150ms, color 150ms; }
#pathway-quiz .dash-intake-nav-btn:hover:not(:disabled) { background: var(--cream-deep); }

/* Motion between steps (pathwaySwapStep in pathway.js) */
@keyframes pathwayStepInFwd  { from { opacity: 0; transform: translateX(40px);  } to { opacity: 1; transform: none; } }
@keyframes pathwayStepInBack { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes pathwayStepOutFwd  { to { opacity: 0; transform: translateX(-40px); } }
@keyframes pathwayStepOutBack { to { opacity: 0; transform: translateX(40px);  } }
.pathway-step-in-fwd   { animation: pathwayStepInFwd  200ms ease-out both; }
.pathway-step-in-back  { animation: pathwayStepInBack 200ms ease-out both; }
.pathway-step-out-fwd  { animation: pathwayStepOutFwd  150ms ease-in both; pointer-events: none; }
.pathway-step-out-back { animation: pathwayStepOutBack 150ms ease-in both; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .pathway-step-in-fwd, .pathway-step-in-back, .pathway-step-out-fwd, .pathway-step-out-back { animation-duration: 1ms; }
}
/* The slide runs 40px past the column edges; the list clips it so the page
   never grows a horizontal scrollbar mid-motion. */
#pathway-quiz .dash-intake-question-list { overflow: hidden; }

/* ── Pathway results: hero + sheet + the decision ─────────────────────────
   Pavel, 2026-09-03: "the final page really should give a price and why
   they should pay, OR they can choose FREE (upgrade to Circle Membership)";
   paying members "should get a final confirmation screen … submit it for
   physician review". Reference for the shape (not copied): the results
   page of the quiz he designed — a banner with the program's image, then a
   sheet that overlaps it. */
.pathway-results { padding: 0; max-width: none; }
.pathway-hero {
  position: relative; min-height: 300px;
  display: flex; align-items: flex-end;
  background: var(--color-navy) center / cover no-repeat;
  border-radius: 20px 20px 0 0; overflow: hidden;
}
.pathway-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,41,60,0.15) 0%, rgba(16,41,60,0.72) 60%, rgba(16,41,60,0.92) 100%);
}
.pathway-hero-body { position: relative; width: 100%; max-width: 44rem; margin: 0 auto; padding: 72px 32px 40px; }
.pathway-hero .pathway-results-label { color: var(--orange-300, #FFB791); font-size: 12px; letter-spacing: 0.18em; margin-bottom: 10px; }
.pathway-hero .pathway-results-title { color: #fff; font-size: 36px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.12; margin: 0 0 10px; }
.pathway-hero-sub { margin: 0; color: rgba(255,255,255,0.72); font-size: 16px; line-height: 1.5; max-width: 34rem; }
.pathway-hero .pathway-summary { margin: 14px 0 0; }
.pathway-hero .pathway-summary-text { color: rgba(255,255,255,0.85); font-size: 14px; }
.pathway-hero .pathway-loading { color: rgba(255,255,255,0.7); }

.pathway-sheet {
  position: relative; margin-top: -20px;
  background: var(--cream); border-radius: 24px 24px 0 0;
  padding: 28px 24px 32px;
}
.pathway-choice { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 44rem; margin: 0 auto; }
@media (min-width: 900px) { .pathway-choice { grid-template-columns: 1.15fr 1fr; align-items: start; max-width: 60rem; } }

.pathway-choice-card {
  background: var(--surface); border: 1px solid rgba(220,182,136,0.28);
  border-radius: 18px; padding: 24px 24px 22px;
}
.pathway-choice-k {
  margin: 0 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--orange-600);
}
.pathway-choice-t { margin: 0 0 10px; font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: var(--font); }
.pathway-choice-p { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.pathway-choice-list { list-style: none; margin: 0 0 18px; padding: 0; }
.pathway-choice-list li {
  position: relative; padding: 5px 0 5px 26px; font-size: 14.5px; line-height: 1.5; color: var(--font);
}
.pathway-choice-list li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--orange) url('/dashboard/imgs/icons/nav-check-bold.svg') center / 12px 12px no-repeat;
}
.pathway-choice-why { margin: 14px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.pathway-choice-fine { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.65); }

/* Pay card: the existing pricing block, stacked and quiet */
.pathway-choice-pay .pathway-results-pricing { grid-template-columns: 1fr; gap: 14px; margin: 6px 0 16px; }
.pathway-choice-pay .pathway-pricing-membership-badge { display: none !important; } /* the free card says it */

/* Free card: navy, so the two routes read as two different things */
.pathway-choice-free { background: var(--color-navy); border-color: transparent; color: #fff; }
.pathway-choice-free .pathway-choice-k { color: var(--orange-300, #FFB791); }
.pathway-choice-free .pathway-choice-t { color: #fff; }
.pathway-choice-free .pathway-choice-p { color: rgba(255,255,255,0.75); }
.pathway-choice-free .pathway-choice-list li { color: #fff; }
.pathway-checkout-btn.pathway-btn-cream { display: block; text-align: center; text-decoration: none; }

.pathway-internal-note {
  max-width: 44rem; margin: 0 auto 14px; padding: 10px 14px; border-radius: 10px;
  background: #FFF3CD; color: #6b4e00; font-size: 12.5px; line-height: 1.5; border: 1px dashed #d9b64a;
}
/* Member confirmation */
.pathway-confirm { max-width: 44rem; margin: 0 auto; }
.pathway-confirm-sent { border-color: rgba(74,124,89,0.35); }
.pathway-confirm-sent .pathway-choice-k { color: var(--success); }
.pathway-confirm .pathway-checkout-btn { display: block; width: 100%; text-align: center; text-decoration: none; margin-top: 4px; }

.pathway-sheet .pathway-revise-answers { text-align: center; margin: 18px 0 0; }

@media (max-width: 767px) {
  .pathway-hero { min-height: 240px; border-radius: 0; }
  .pathway-hero-body { padding: 56px 20px 32px; }
  .pathway-hero .pathway-results-title { font-size: 28px; }
  .pathway-sheet { padding: 22px 16px 28px; border-radius: 20px 20px 0 0; }
  .pathway-choice-card { padding: 20px 18px; border-radius: 16px; }
}

/* Results step: the banner is the top of the page. The desktop "Back ·
   {pathway}" row and the phone TopNav go, and the main column loses the
   padding that left a cream band above the hero (Pavel, 2026-09-03). The
   floating bell/avatar pill stays; "Change your answers" is the way back. */
body.pathway-results-on .dash-fullscreen-back-desktop,
body.pathway-results-on .dash-fs-topnav { display: none !important; }
body.pathway-results-on.dash-fullscreen .dash-main:has(.dash-intake-questions) { padding-top: 0; }
body.pathway-results-on .pathway-hero { border-radius: 0; }
body.pathway-results-on .pathway-hero-body { padding-top: 96px; }
@media (max-width: 767px) {
  body.pathway-results-on.dash-fullscreen .dash-content { padding-top: 0; }
  body.pathway-results-on .pathway-hero-body { padding-top: 72px; }
}

/* ── Program pitch under the price (dash_pathway_pitch.go) ─────────────── */
.pathway-pitch { margin: 18px 0 20px; }
.pathway-pitch-k {
  margin: 18px 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-secondary);
}
.pathway-pitch-k:first-child { margin-top: 0; }
.pathway-pitch-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pathway-pitch-steps li { display: flex; gap: 12px; align-items: flex-start; }
.pathway-pitch-n {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--orange-tint, #FFF2E5); color: var(--orange-600); font-size: 12.5px; font-weight: 600;
}
.pathway-pitch-steps b { display: block; font-size: 15px; font-weight: 500; color: var(--font); margin-bottom: 2px; }
.pathway-pitch-steps span:not(.pathway-pitch-n) { display: block; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.pathway-pitch-plan { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pathway-pitch-plan li {
  padding: 7px 12px; border-radius: 999px; font-size: 13px; color: var(--font);
  background: var(--cream); border: 1px solid rgba(220,182,136,0.35);
}
.pathway-pitch-med {
  margin: 14px 0 0; padding: 12px 14px; border-radius: 12px;
  background: var(--orange-tint, #FFF2E5); color: var(--font); font-size: 14px; line-height: 1.5;
}
.pathway-pitch-ship {
  display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0;
  font-size: 13px; line-height: 1.5; color: var(--text-secondary);
}
.pathway-pitch-ship img { width: 18px; height: 18px; flex: none; margin-top: 1px; filter: brightness(0) invert(45%); }
.pathway-confirm .pathway-pitch { margin-top: 4px; }

/* Price block: the amount, what it is made of, then the ongoing price. The
   plan config's own three-line inclusions list is not drawn on the pay card
   any more — "What you get" says it better (Pavel, 2026-09-03); the list
   stays in the DOM because pathway.js reads it for the checkout review. */
.pathway-choice-pay .pathway-pricing-amount { font-size: 30px; font-weight: 500; letter-spacing: -0.01em; }
.pathway-price-breakdown { font-size: 13.5px; color: var(--text-secondary); margin: 2px 0 6px; }
.pathway-price-breakdown:empty { display: none; }
.pathway-choice-pay .pathway-pricing-recurring { font-size: 15px; color: var(--font); }
.pathway-choice-pay .pathway-pricing-includes-list { display: none; }
.pathway-choice-pay .pathway-checkout-btn { margin-top: 4px; }

/* ── Checkout under the banner: add-ons, review, payment ─────────────────── */
#pathway-checkout { max-width: 44rem; margin: 0 auto; padding: 24px 24px 32px; }
#pathway-checkout .pathway-checkout-steps { margin: 4px 0 24px; }
#pathway-checkout .pathway-checkout-step-num { width: 28px; height: 28px; font-size: 13px; border-color: rgba(220,182,136,0.4); }
#pathway-checkout .pathway-checkout-step-line { background: rgba(220,182,136,0.4); }
#pathway-checkout .pathway-checkout-content { background: none; border: 0; padding: 0; }
#pathway-checkout .dash-intake-back-link { display: block; text-align: center; margin-top: 16px; }
/* Review + receipt sit in the same card the decision used */
#pathway-checkout-step-2-content, #pathway-checkout-step-3-content {
  background: var(--surface); border: 1px solid rgba(220,182,136,0.28); border-radius: 18px; padding: 24px;
}
#pathway-checkout .pathway-checkout-step-title { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 14px; }
#pathway-checkout .pathway-pricing { border: 0; padding: 0; margin: 0 0 16px; }
/* Add-on card */
.pathway-upsell-card { margin: 0; padding: 0; border: 0; }
.pathway-upsell-item { display: block; padding: 24px; border-bottom: 0; }
.pathway-upsell-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.pathway-upsell-head .pathway-choice-t { margin: 0; }
.pathway-upsell-price { flex: none; text-align: right; font-size: 20px; font-weight: 500; color: var(--font); line-height: 1.1; }
.pathway-upsell-price small { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-secondary); margin-top: 3px; }
.pathway-upsell-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.pathway-checkout-btn.pathway-btn-quiet { background: var(--cream); color: var(--font); border: 1px solid rgba(220,182,136,0.4); }
.pathway-checkout-btn.pathway-btn-quiet:hover { background: var(--cream-deep); box-shadow: none; }
.pathway-upsell-fine { color: var(--text-secondary); margin-top: 12px; }
@media (max-width: 767px) {
  #pathway-checkout { padding: 20px 16px 28px; }
  .pathway-upsell-actions { grid-template-columns: 1fr; }
  .pathway-upsell-head { flex-direction: column; gap: 6px; }
  .pathway-upsell-price { text-align: left; }
}

/* Checkout steps: finished steps are navy, not the success green that came
   with the old stepper ("a weird new green style"), and they are buttons
   back to that step. Orange stays the current step. */
#pathway-checkout .pathway-checkout-step.completed .pathway-checkout-step-num {
  background: var(--color-navy); color: #fff; border-color: var(--color-navy);
}
#pathway-checkout .pathway-checkout-step.completed .pathway-checkout-step-label { color: var(--font); }
#pathway-checkout .pathway-checkout-step.completed { cursor: pointer; }
#pathway-checkout .pathway-checkout-step.completed:hover .pathway-checkout-step-num { background: var(--navy-800); border-color: var(--navy-800); }
#pathway-checkout .pathway-checkout-step.completed:hover .pathway-checkout-step-label { text-decoration: underline; text-underline-offset: 3px; }
#pathway-checkout .pathway-checkout-step.active .pathway-checkout-step-num { color: var(--brand-black); }

/* ── Quiz screening verdict (dash_pathway_screen.go), inside the results banner ── */
.pathway-screen { margin: 16px 0 0; padding: 16px 18px; border-radius: 14px; background: rgba(255,254,246,.10); border: 1px solid rgba(255,254,246,.22); color: #fff; max-width: 40rem; }
.pathway-screen-h { margin: 0 0 6px; font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: #fff; }
.pathway-screen-p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.82); }
.pathway-screen-list { list-style: none; margin: 0 0 10px; padding: 0; }
.pathway-screen-list li { position: relative; padding: 5px 0 5px 22px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.92); }
.pathway-screen-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--orange-300, #FFB791); }
.pathway-screen-list li.pathway-screen-stop::before { background: #F0A090; }
.pathway-screen-list li.pathway-screen-review::before { background: var(--sand-300, #E3C9AA); }
.pathway-screen-list li b { font-weight: 600; color: #fff; }
.pathway-screen-next { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: #fff; }
.pathway-screen-fine { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.62); }
.pathway-screen-clear { background: rgba(60,107,73,.22); border-color: rgba(143,200,160,.35); }
.pathway-screen-stop { background: rgba(196,92,74,.20); border-color: rgba(240,160,144,.45); }
.pathway-screen-refer { background: rgba(255,136,76,.16); border-color: rgba(255,183,145,.45); }
.pathway-screen-review { background: rgba(255,254,246,.10); }
.pathway-screen-actions { margin-top: 12px; }
.pathway-screen-continue { display: inline-block; text-decoration: none; cursor: pointer; }
.pathway-screen-continue-review { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,254,246,.7); color: #fff; font-size: 13.5px; font-weight: 500; }
.pathway-screen-continue-review:hover { background: rgba(255,254,246,.12); text-decoration: none; }
.pathway-screen-continue-refer { color: rgba(255,255,255,.85); font-size: 13.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.pathway-screen-continue-stop { color: rgba(255,255,255,.62); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
.pathway-screen-continue-refer:hover, .pathway-screen-continue-stop:hover { color: #fff; }
#pathway-results[data-tier="stop"]:not(.pathway-continue) .pathway-choice,
#pathway-results[data-tier="stop"]:not(.pathway-continue) .pathway-confirm,
#pathway-results[data-tier="stop"]:not(.pathway-continue) .pathway-internal-note,
#pathway-results[data-tier="refer"]:not(.pathway-continue) .pathway-choice,
#pathway-results[data-tier="refer"]:not(.pathway-continue) .pathway-confirm,
#pathway-results[data-tier="refer"]:not(.pathway-continue) .pathway-internal-note,
#pathway-results[data-tier="review"]:not(.pathway-continue) .pathway-choice,
#pathway-results[data-tier="review"]:not(.pathway-continue) .pathway-confirm,
#pathway-results[data-tier="review"]:not(.pathway-continue) .pathway-internal-note { display: none; }
#pathway-results.pathway-continue .pathway-screen-actions { display: none; }

/* ── Program intro: hero call to action + full-width navy band ── */
.dash-pintro-herobody { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dash-pintro-herobody .dash-pintro-btn { flex: 0 0 auto; margin: 0 0 4px; }
.dash-pintro-band { margin-top: 16px; padding: 26px 28px 28px; border-radius: 18px; background: var(--color-navy); color: #fff; display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; }
.dash-pintro-band .pathway-choice-k { color: var(--orange-300, #FFB791); }
.dash-pintro-band .pathway-choice-t { color: #fff; }
.dash-pintro-band .pathway-choice-list li { color: #fff; }
.dash-pintro-band .pathway-choice-fine { color: rgba(255,255,255,.65); }
.dash-pintro-band .dash-pintro-steps li { color: rgba(255,255,255,.78); }
.dash-pintro-band .dash-pintro-steps li b { color: #fff; }
.dash-pintro-band .dash-pintro-cta-note { color: rgba(255,255,255,.65); }
.dash-pintro-band-how { border-left: 1px solid rgba(255,255,255,.14); padding-left: 28px; }
.dash-pintro-band .dash-pintro-cta { margin-top: 14px; }
.dash-pintro-you { margin-top: 0; }
@media (max-width: 899px) {
  .dash-pintro-band { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px 22px; }
  .dash-pintro-band-how { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.14); padding-top: 18px; }
  .dash-pintro-herobody .dash-pintro-btn { width: 100%; justify-content: center; }
}

/* intro page spans the content column; the hero button keeps its own width beside the title */
.dash-pintro { max-width: none; }
.dash-pintro-herobody > div:first-child { flex: 1 1 320px; min-width: 0; }
.dash-pintro-herobody .dash-pintro-btn, .dash-pintro-herobody a.pathway-checkout-btn.dash-pintro-btn { display: inline-flex; width: auto; flex: 0 0 auto; }
@media (max-width: 767px) { .dash-pintro-herobody .dash-pintro-btn, .dash-pintro-herobody a.pathway-checkout-btn.dash-pintro-btn { width: 100%; justify-content: center; } }

/* Program intro: the hero goes edge to edge like the home hero (Pavel, 2026-09-05,
   screenshot 100): no gutter above it, no gap to the rail, no rounded corners. The
   page padding is handed back to the sheet below, which keeps the reading measure. */
.dash-main:has(.dash-pintro) { max-width: none; padding: 0; }
.dash-pintro { position: relative; padding: 0 0 40px; }
.dash-pintro-back { position: absolute; top: 20px; left: 40px; z-index: 2; margin: 0; color: rgba(255,255,255,.88); text-shadow: 0 1px 8px rgba(16,41,60,.6); }
.dash-pintro-back:hover { color: #fff; }
.dash-pintro-hero { border-radius: 0; min-height: 340px; }
.dash-pintro-hero .pathway-hero-body { max-width: 1200px; margin: 0 auto; padding: 110px 40px 36px; }
.dash-pintro-sheet { max-width: 1200px; margin: 0 auto; padding: 24px 40px 0; }
@media (min-width: 1400px) {
  .dash-pintro-hero .pathway-hero-body, .dash-pintro-sheet { max-width: 1440px; padding-left: 56px; padding-right: 56px; }
  .dash-pintro-back { left: 56px; }
}
@media (max-width: 767px) {
  .dash-pintro-back { top: 14px; left: 20px; }
  .dash-pintro-hero { min-height: 260px; }
  .dash-pintro-hero .pathway-hero-body { padding: 72px 20px 24px; }
  .dash-pintro-sheet { padding: 18px 16px 0; }
}
@media (max-width: 767px) { .dash-pintro-hero { border-radius: 0; } }
.dash-pintro-sheet { margin-top: 0; border-radius: 0; }
/* Keep the rounded touch: the banner bleeds off the top and the rail, and its two
   bottom corners stay rounded so the cream sheet tucks under it. */
.dash-pintro-hero, .dash-pintro-hero.pathway-hero { border-radius: 0 0 24px 24px; }
@media (max-width: 767px) { .dash-pintro-hero, .dash-pintro-hero.pathway-hero { border-radius: 0 0 18px 18px; } }

/* The base sheet underlines every link on hover (a:hover, r238). That is right for a
   link in a sentence and wrong for anything that looks like a button, a tile, a chip,
   or an image (Pavel, 2026-09-05: "take the quiz hover should definitely NOT have an
   underline"). Anchors dressed as those get the underline taken away here. */
a[class*="btn"]:hover, a[class*="-cta"]:hover, a[class*="tile"]:hover, a[class*="card"]:hover,
a[class*="chip"]:hover, a[class*="badge"]:hover, a[class*="avatar"]:hover, a[class*="logo"]:hover,
a:has(> img):hover, a:has(> svg):hover, a:has(> picture):hover,
.dash-pintro-back:hover, .dash-pintro-herobody a:hover, .dash-pathway-tile:hover *,
.dash-sidebar a:hover, .dash-topbar a:hover, .dash-bottomnav a:hover {
  text-decoration: none;
}

/* 0–10 scale as one connected row (Pavel, 2026-09-05, screenshot 101: the floating
   pills looked wrong). Cells share borders; the end labels sit under the ends. */
.dash-intake-scale { gap: 0; margin-top: 18px; }
.dash-intake-scale .dash-intake-scale-labels { order: 2; margin: 10px 0 0; font-size: 12.5px; font-style: normal; color: var(--text-secondary); }
.dash-intake-scale .dash-intake-scale-label-low, .dash-intake-scale .dash-intake-scale-label-high { font-style: normal; }
.dash-intake-scale-option {
  order: 1; min-width: 0; padding: 13px 0; margin-left: -1px;
  border: 1px solid rgba(220,182,136,.55); border-radius: 0; background: var(--surface);
  font-size: 15px; font-weight: 500; color: var(--font); box-shadow: none; transition: background 120ms, color 120ms;
}
.dash-intake-scale-option:first-of-type { margin-left: 0; border-radius: 12px 0 0 12px; }
.dash-intake-scale-option:last-of-type { border-radius: 0 12px 12px 0; }
.dash-intake-scale-option:hover { background: var(--orange-050); border-color: rgba(220,182,136,.55); box-shadow: none; transform: none; }
.dash-intake-scale-option:has(input:checked) { background: var(--orange-400); border-color: var(--orange-400); color: #fff; z-index: 1; }
.dash-intake-scale-option:has(input:checked) span { color: #fff; }
@media (max-width: 420px) { .dash-intake-scale-option { padding: 12px 0; font-size: 14px; } }

/* Scale, second pass (Pavel, 2026-09-05): the row is one rounded box; the numbers sit
   dead centre; the key text above gets breathing room. */
.dash-intake-scale { margin-top: 26px; border: 1px solid rgba(220,182,136,.55); border-radius: 14px; overflow: hidden; background: var(--surface); }
.dash-intake-scale-option, .dash-intake-scale-option:first-of-type, .dash-intake-scale-option:last-of-type {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  height: 50px; padding: 0; margin: 0; gap: 0; line-height: 1;
  border: 0; border-right: 1px solid rgba(220,182,136,.45); border-radius: 0; background: transparent; overflow: visible;
}
.dash-intake-scale-option:last-of-type { border-right: 0; }
.dash-intake-scale-option span, .dash-intake-option.dash-intake-scale-option > span { flex: 0 0 auto; font-size: 16px; font-weight: 500; line-height: 1; }
.dash-intake-scale-option:hover { background: var(--orange-050); box-shadow: none; transform: none; }
.dash-intake-scale-option:has(input:checked) { background: var(--orange-400); border-right-color: var(--orange-400); color: #fff; }
.dash-intake-scale .dash-intake-scale-labels { order: 2; margin: 0; padding: 9px 12px 8px; border-top: 1px solid rgba(220,182,136,.45); background: var(--cream); font-size: 12.5px; color: var(--text-secondary); }
.dash-intake-question-subtitle { margin-top: 2px; }
@media (max-width: 420px) { .dash-intake-scale-option, .dash-intake-scale-option:first-of-type, .dash-intake-scale-option:last-of-type { height: 46px; } .dash-intake-scale-option span { font-size: 14.5px; } }

/* Scale, third pass. The quiz's own option rules (.pathway-step .dash-intake-option,
   above) outrank the scale rules, which is why cells 1–10 kept their pill look while 0
   didn't (Pavel, 2026-09-05, screenshot 103). Everything here is written at that level. */
.pathway-step .dash-intake-options.dash-intake-scale {
  gap: 0; margin-top: 26px; border: 1px solid rgba(220,182,136,.55); border-radius: 14px; overflow: hidden; background: var(--surface);
}
.pathway-step .dash-intake-scale .dash-intake-option,
.pathway-step .dash-intake-scale .dash-intake-option:first-of-type,
.pathway-step .dash-intake-scale .dash-intake-option:last-of-type {
  display: flex; flex: 1 1 0; flex-direction: row; align-items: center; justify-content: center;
  height: 50px; padding: 0; margin: 0; gap: 0; line-height: 1; min-width: 0;
  border: 0; border-right: 1px solid rgba(220,182,136,.45); border-radius: 0; background: transparent; box-shadow: none; overflow: visible;
}
.pathway-step .dash-intake-scale .dash-intake-option:last-of-type { border-right: 0; }
.pathway-step .dash-intake-scale .dash-intake-option > span { flex: 0 0 auto; font-size: 16px; font-weight: 500; line-height: 1; color: var(--font); }
.pathway-step .dash-intake-scale .dash-intake-option:hover { background: var(--orange-050); border-color: rgba(220,182,136,.45); box-shadow: none; transform: none; }
.pathway-step .dash-intake-scale .dash-intake-option:has(input:checked) { background: var(--orange-400); border-right-color: var(--orange-400); }
.pathway-step .dash-intake-scale .dash-intake-option:has(input:checked) > span { color: #fff; }
.pathway-step .dash-intake-scale .dash-intake-scale-labels {
  order: 2; flex: 0 0 100%; margin: 0; padding: 9px 12px 8px; border-top: 1px solid rgba(220,182,136,.45);
  background: var(--cream); font-size: 12.5px; font-style: normal; color: var(--text-secondary);
}
.pathway-step .dash-intake-question-subtitle { margin: -6px 0 0; font-size: 15px; line-height: 1.55; }
@media (max-width: 420px) {
  .pathway-step .dash-intake-scale .dash-intake-option, .pathway-step .dash-intake-scale .dash-intake-option:first-of-type, .pathway-step .dash-intake-scale .dash-intake-option:last-of-type { height: 46px; }
  .pathway-step .dash-intake-scale .dash-intake-option > span { font-size: 14.5px; }
}

/* Screening verdict lives in the cream sheet now, not over the hero photo: a solid card,
   dark text at reading size, a tier-coloured edge (Pavel, 2026-09-05, screenshot 104). */
.pathway-sheet .pathway-summary { max-width: 44rem; margin: 0 auto 20px; }
.pathway-sheet .pathway-summary-text { font-size: 16px; line-height: 1.55; color: var(--text-secondary); margin: 0 0 14px; }
.pathway-sheet .pathway-screen { max-width: none; margin: 0; padding: 24px 26px 22px; border-radius: 16px; background: var(--surface); border: 1px solid rgba(220,182,136,.45); border-left: 5px solid var(--orange-400); color: var(--font); }
.pathway-sheet .pathway-screen-clear { border-left-color: #3C6B49; background: var(--surface); }
.pathway-sheet .pathway-screen-review { border-left-color: var(--orange-300); background: var(--surface); }
.pathway-sheet .pathway-screen-refer { border-left-color: var(--orange-400); background: var(--surface); }
.pathway-sheet .pathway-screen-stop { border-left-color: #C45C4A; background: var(--surface); }
.pathway-sheet .pathway-screen-h { font-size: 22px; line-height: 1.3; margin: 0 0 12px; color: var(--font); }
.pathway-sheet .pathway-screen-p { font-size: 16px; line-height: 1.55; color: var(--font); margin: 0 0 10px; }
.pathway-sheet .pathway-screen-list { margin: 0 0 14px; }
.pathway-sheet .pathway-screen-list li { font-size: 16px; line-height: 1.55; color: var(--font); padding: 6px 0 6px 24px; }
.pathway-sheet .pathway-screen-list li::before { top: 13px; width: 10px; height: 10px; background: var(--orange-400); }
.pathway-sheet .pathway-screen-list li.pathway-screen-stop::before { background: #C45C4A; }
.pathway-sheet .pathway-screen-list li.pathway-screen-review::before { background: var(--orange-300); }
.pathway-sheet .pathway-screen-next { font-size: 16px; line-height: 1.55; color: var(--font); margin: 0 0 10px; }
.pathway-sheet .pathway-screen-fine { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.pathway-sheet .pathway-screen-actions { margin-top: 16px; }
.pathway-sheet .pathway-screen-continue-review { padding: 11px 20px; border: 1px solid var(--color-navy); color: var(--color-navy); font-size: 15px; background: transparent; }
.pathway-sheet .pathway-screen-continue-review:hover { background: var(--color-navy); color: #fff; }
.pathway-sheet .pathway-screen-continue-refer { color: var(--color-navy); font-size: 15px; font-weight: 500; }
.pathway-sheet .pathway-screen-continue-stop { color: var(--text-secondary); font-size: 14px; }
.pathway-sheet .pathway-screen-continue-refer:hover, .pathway-sheet .pathway-screen-continue-stop:hover { color: var(--font); }
@media (max-width: 767px) {
  .pathway-sheet .pathway-screen { padding: 20px 18px 18px; }
  .pathway-sheet .pathway-screen-h { font-size: 20px; }
}

/* "Continue anyway" swaps the warning card for the checkout; a one-line note stays. */
#pathway-results.pathway-continue .pathway-screen { display: none; }
.pathway-screen-after { display: none; margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.pathway-screen-after a { color: var(--color-navy); text-decoration: underline; text-underline-offset: 2px; }
#pathway-results.pathway-continue .pathway-screen-after { display: block; }

/* No add-ons to offer: the stepper shows Review and Payment only, numbered 1 and 2. */
.pathway-checkout-no-addons .pathway-checkout-step[data-checkout-step="1"],
.pathway-checkout-no-addons .pathway-checkout-step[data-checkout-step="1"] + .pathway-checkout-step-line { display: none; }
/* The original digit is hidden (the active/completed rules set their own font-size,
   which is why "12" and "23" showed) and the renumbered digit is drawn in its place. */
.pathway-checkout-no-addons .pathway-checkout-step-num { font-size: 0 !important; line-height: 0 !important; }
.pathway-checkout-no-addons .pathway-checkout-step-num::before { font-size: 14px; line-height: 1; }
.pathway-checkout-no-addons .pathway-checkout-step[data-checkout-step="2"] .pathway-checkout-step-num::before { content: "1"; }
.pathway-checkout-no-addons .pathway-checkout-step[data-checkout-step="3"] .pathway-checkout-step-num::before { content: "2"; }

/* Review step: payment method row (card on file or not) above the continue button */
.pathway-paymethod { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; padding: 12px 14px; border: 1px solid rgba(220,182,136,.45); border-radius: 12px; background: var(--cream); }
.pathway-paymethod-k { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.pathway-paymethod-v { flex: 1; font-size: 15px; font-weight: 500; color: var(--font); }
.pathway-paymethod-sub { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--text-secondary); }
.pathway-paymethod-change { font-size: 13.5px; font-weight: 500; color: var(--color-navy); text-decoration: underline; text-underline-offset: 2px; }
.pathway-paymethod-change:hover { color: var(--font); }

/* Post-payment page: the next step on top, then the program timeline */
.pathway-checkout-receipt .pathway-choice-k { margin-bottom: 6px; }
.pathway-checkout-receipt .pathway-checkout-step-title { margin-bottom: 10px; }
.pathway-receipt-lead { margin: 0 0 16px; font-size: 16px; line-height: 1.55; color: var(--font); }
.pathway-receipt-cta { margin: 0 0 10px; }
.pathway-receipt-cta .pathway-checkout-btn { display: inline-flex; width: auto; text-decoration: none; }
.pathway-receipt-fine { margin: 0 0 22px; font-size: 13.5px; color: var(--text-secondary); }
.pathway-receipt-back { margin: 18px 0 0; text-align: center; }
.dash-pathway-owned .dash-pintro-sheet { padding-top: 8px; }

/* Post-payment page on desktop: the next step on the left, the timeline on the right,
   using the width a desktop has instead of the 28rem checkout column. */
#pathway-checkout:has(.pathway-checkout-receipt) { max-width: 72rem; }
#pathway-checkout .pathway-checkout-content:has(.pathway-checkout-receipt) { max-width: none; }
.pathway-checkout-receipt .pathway-receipt-back { text-align: left; margin-top: 22px; }
#pathway-checkout .pathway-checkout-receipt .dash-intake-back-link { display: inline; text-align: left; margin: 0; }
.pathway-receipt-body .dash-journey { margin: 0; }
@media (min-width: 900px) {
  .pathway-checkout-receipt { display: grid; grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
  .pathway-receipt-head { position: sticky; top: 24px; }
  .pathway-checkout-receipt .pathway-checkout-step-title { font-size: 30px; line-height: 1.2; letter-spacing: -0.015em; }
  .pathway-receipt-lead { font-size: 17px; }
  .pathway-receipt-body .dash-journey { padding: 28px 32px 22px; }
}
@media (min-width: 1200px) {
  .pathway-checkout-receipt { gap: 64px; }
}

/* Owned-program page (the timeline on its own) gets a reading width, not the quiz column */
.dash-pathway-quiz.dash-pathway-owned { max-width: 52rem; }
.dash-pathway-owned .pathway-receipt-back { text-align: left; }

/* Program journey (dash_pathway_journey.go). The block written on 2026-09-05 afternoon
   never landed (its guard matched an earlier rule), which is why the timeline rendered as
   a bare numbered list (Pavel, screenshot 107). */
.dash-journey { background: var(--surface); border: 1px solid rgba(220,182,136,0.28); border-radius: 18px; padding: 24px 24px 18px; margin: 0 0 16px; text-align: left; }
.dash-journey-head .pathway-choice-k { margin: 0 0 6px; }
.dash-journey-head .pathway-choice-t { margin: 0 0 6px; }
.dash-journey-head .pathway-choice-p { margin: 0 0 16px; }
.dash-journey-list { list-style: none; margin: 0; padding: 0; position: relative; }
.dash-journey-list::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: 14px; width: 2px; background: rgba(220,182,136,0.45); }
.dash-journey-stage { position: relative; display: flex; gap: 16px; padding: 10px 0 14px; margin: 0; }
.dash-journey-dot { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; background: var(--cream); border: 2px solid rgba(220,182,136,0.7); margin-top: 2px; position: relative; z-index: 1; box-sizing: border-box; }
.dash-journey-done .dash-journey-dot { background: var(--orange-400); border-color: var(--orange-400); }
.dash-journey-done .dash-journey-dot::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dash-journey-now .dash-journey-dot { background: #fff; border: 3px solid var(--orange-400); box-shadow: 0 0 0 4px rgba(255,136,76,.18); }
.dash-journey-next { opacity: .62; }
.dash-journey-body { flex: 1; min-width: 0; }
.dash-journey-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dash-journey-title { font-size: 16px; font-weight: 500; color: var(--font); }
.dash-journey-when { font-size: 12.5px; color: var(--text-secondary); }
.dash-journey-chip { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #b5561f; background: rgba(255,136,76,.16); border-radius: 999px; padding: 2px 8px; }
.dash-journey-detail { margin: 3px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); }
.dash-journey-now .dash-journey-detail { color: var(--font); }
.dash-journey-link { display: inline-block; margin-top: 8px; font-size: 14.5px; font-weight: 500; color: var(--color-navy); text-decoration: underline; text-underline-offset: 3px; }
.dash-journey-now .dash-journey-link { display: inline-flex; align-items: center; margin-top: 10px; padding: 10px 18px; border-radius: 999px; background: var(--orange-400); color: #1a1a1a; text-decoration: none; font-weight: 500; }
.dash-journey-now .dash-journey-link:hover { background: var(--orange-500); text-decoration: none; }
.dash-journey-fine { margin: 10px 0 0 36px; font-size: 12px; color: var(--text-secondary); }

/* Owned-program page: a reading width and left-aligned timeline */
.dash-mypathway { max-width: 52rem; }
.dash-mypathway .dash-pintro-sheet { text-align: left; padding-left: 0; padding-right: 0; }
@media (min-width: 900px) { .dash-journey { padding: 28px 32px 22px; } }

/* Typed-value quiz question (height, weight) — same missed block as the journey */
.pathway-step .dash-intake-options.dash-intake-number { display: flex; justify-content: center; gap: 0; }
.dash-intake-number-field { display: inline-flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid rgba(220,182,136,0.55); border-radius: 14px; padding: 6px 16px 6px 6px; }
.dash-intake-number-field input { width: 150px; border: 0; background: transparent; font-family: inherit; font-size: 28px; font-weight: 500; color: var(--font); padding: 8px 10px; text-align: right; outline: none; }
.dash-intake-number-field input::-webkit-outer-spin-button, .dash-intake-number-field input::-webkit-inner-spin-button { -webkit-appearance: none; }
.dash-intake-number-field input[type=number] { -moz-appearance: textfield; }
.dash-intake-number-field:focus-within { border-color: var(--orange-400); box-shadow: 0 0 0 3px rgba(255,136,76,.15); }
.dash-intake-number-unit { font-size: 16px; color: var(--text-secondary); }
.pathway-step-actions { display: flex; justify-content: center; margin-top: 22px; }

/* Owned-program page on desktop: full page width, header left, timeline right */
.dash-mypathway { max-width: none; padding: 8px 0 40px; }
.dash-mypathway .dash-mypathway-header { text-align: left; padding: 0 0 8px; }
.dash-mypathway .dash-pintro-sheet { padding-top: 0; }
@media (min-width: 900px) {
  .dash-mypathway { display: grid; grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
  .dash-mypathway .dash-mypathway-header { position: sticky; top: 24px; }
  .dash-mypathway .dash-mypathway-title { font-size: 34px; line-height: 1.15; letter-spacing: -0.015em; }
  .dash-mypathway .dash-mypathway-subtitle { font-size: 16px; }
}
@media (min-width: 1200px) { .dash-mypathway { gap: 72px; } }

/* The fullscreen shell caps its column at 28rem (a quiz column). The owned-program
   timeline lives in that shell too, and was rendering 250px wide on a desktop
   (Pavel, 2026-09-05, screenshot 108). Lift the cap for that page and give it the
   same two-column layout as the post-payment page. */
body.dash-fullscreen .dash-main:has(.dash-pathway-owned) { max-width: 72rem; padding: 24px 40px 48px; }
.dash-pathway-quiz.dash-pathway-owned { max-width: none; padding: 0; }
.dash-pathway-owned .dash-pintro-sheet { max-width: none; padding: 0; margin: 0; }
.dash-pathway-owned .dash-journey { margin: 0; }
@media (min-width: 900px) {
  .dash-pathway-owned .dash-journey { padding: 32px 36px 24px; }
  .dash-pathway-owned .dash-journey-head { display: grid; grid-template-columns: minmax(240px, 4fr) minmax(0, 8fr); gap: 32px; align-items: end; margin-bottom: 8px; }
  .dash-pathway-owned .dash-journey-head .pathway-choice-k { grid-column: 1; }
  .dash-pathway-owned .dash-journey-head .pathway-choice-t { grid-column: 1; font-size: 30px; line-height: 1.15; }
  .dash-pathway-owned .dash-journey-head .pathway-choice-p { grid-column: 2; margin: 0 0 6px; }
  .dash-pathway-owned .dash-journey-stage { padding: 14px 0 16px; gap: 20px; }
  .dash-pathway-owned .dash-journey-body { display: grid; grid-template-columns: minmax(200px, 3fr) minmax(0, 9fr); gap: 24px; align-items: start; }
  .dash-pathway-owned .dash-journey-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .dash-pathway-owned .dash-journey-detail { margin: 0; font-size: 15px; }
  .dash-pathway-owned .dash-journey-fine { margin-left: 40px; }
}
@media (max-width: 767px) { body.dash-fullscreen .dash-main:has(.dash-pathway-owned) { padding: 16px 16px 40px; } }
@media (min-width: 900px) { .dash-pathway-owned .dash-journey-link { grid-column: 2; justify-self: start; } }

/* Stage name is a link when the stage has somewhere to go; detail and button share a cell */
.dash-journey-title-link { color: var(--font); text-decoration: none; }
.dash-journey-title-link:hover { color: var(--color-navy); text-decoration: underline; text-underline-offset: 3px; }
.dash-journey-now .dash-journey-title-link:hover { color: #b5561f; }
.dash-journey-text { min-width: 0; }
.dash-journey-now .dash-journey-link { margin-top: 10px; }
@media (min-width: 900px) {
  .dash-pathway-owned .dash-journey-body { grid-template-columns: minmax(200px, 3fr) minmax(0, 9fr); }
  .dash-pathway-owned .dash-journey-text { grid-column: 2; }
  .dash-pathway-owned .dash-journey-link { grid-column: auto; }
  .dash-pathway-owned .dash-journey-now .dash-journey-link { margin-top: 12px; }
}

/* ── Intake section view on desktop: section rail left, questions right ──────────
   (Pavel, 2026-09-05: "we have enough space on computers to show the sections on the
   left"). Below 1000px the rail is hidden; the overview page lists the sections there. */
.dash-intake-rail { display: none; }
.dash-intake-complete-btn, .dash-intake-complete-btn:hover:not(:disabled) { background: var(--orange-400); color: var(--brand-black, #1a1a1a); }
.dash-intake-complete-btn { font-size: 17px; padding: 16px 24px; box-shadow: 0 10px 24px -14px rgba(238,109,33,.7); }
.dash-intake-complete-btn:hover:not(:disabled) { background: var(--orange-500); transform: translateY(-1px); }
.dash-intake-complete-btn::after { content: " \2192"; }
.dash-intake-complete-btn:disabled { box-shadow: none; }
@media (min-width: 1000px) {
  body.dash-fullscreen .dash-main:has(.dash-intake-questions:has(.dash-intake-rail)) { padding: 32px 40px 48px; }
  .dash-intake-questions:has(.dash-intake-rail) { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 48px; max-width: 72rem; margin: 0 auto; }
  .dash-intake-questions:has(.dash-intake-rail) > .dash-intake-section-kicker,
  .dash-intake-questions:has(.dash-intake-rail) > .dash-intake-section-header,
  .dash-intake-questions:has(.dash-intake-rail) > .dash-intake-question-list { grid-column: 2; }
  .dash-intake-questions:has(.dash-intake-rail) > .dash-intake-section-header { padding: 0; }
  .dash-intake-questions:has(.dash-intake-rail) > .dash-intake-question-list { max-width: 36rem; margin: 0; }
  .dash-intake-rail { display: block; grid-column: 1; grid-row: 1 / span 3; align-self: start; position: sticky; top: 24px; padding: 4px 0 0; }
  .dash-intake-rail-k { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
  .dash-intake-rail-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; margin: 0 0 4px; border-radius: 12px; border: 1px solid transparent; text-decoration: none; color: var(--font); }
  .dash-intake-rail-item:hover { background: var(--surface); border-color: rgba(220,182,136,.35); text-decoration: none; }
  .dash-intake-rail-current { background: var(--surface); border-color: var(--orange-400); }
  .dash-intake-rail-num { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; background: var(--cream-deep, #EDE9DA); color: var(--font); margin-top: 1px; }
  .dash-intake-rail-current .dash-intake-rail-num { background: var(--orange-400); color: #1a1a1a; }
  .dash-intake-rail-done .dash-intake-rail-num { background: var(--success); color: #fff; font-size: 0; }
  .dash-intake-rail-done .dash-intake-rail-num::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -2px; }
  .dash-intake-rail-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .dash-intake-rail-name { font-size: 14.5px; font-weight: 500; line-height: 1.3; }
  .dash-intake-rail-state { font-size: 12px; color: var(--text-secondary); }
  .dash-intake-rail-current .dash-intake-rail-state { color: #b5561f; font-weight: 600; }
  .dash-intake-rail-all { display: inline-block; margin: 10px 12px 0; font-size: 13px; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
  .dash-intake-rail-all:hover { color: var(--font); }
}

/* Section crumb above the question counter (phones and narrow windows) */
.dash-intake-section-crumb { display: inline-block; margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #b5561f; text-decoration: none; }
.dash-intake-section-crumb:hover { text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 1000px) { .dash-intake-questions:has(.dash-intake-rail) .dash-intake-section-crumb { display: none; } }

/* Carried-over answer note (quiz or health profile) under the question */
.dash-intake-prefill-note { display: inline-block; margin: -4px 0 14px; padding: 5px 10px; border-radius: 999px; background: var(--orange-050); color: #b5561f; font-size: 12.5px; font-weight: 500; }
.dash-intake-locked-note { margin: -4px 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.dash-intake-locked-note a { color: var(--color-navy); }
.dash-intake-question-locked .dash-intake-option { cursor: default; opacity: .7; }
.dash-intake-question-locked .dash-intake-option:has(input:checked) { opacity: 1; }
.dash-intake-question-locked .dash-intake-option:hover { border-color: inherit; background: inherit; }

/* Carried-over answers: "To review" state on the overview and the rail */
.dash-intake-context-note { margin: -8px 0 18px; padding: 10px 14px; border-radius: 12px; background: var(--orange-050); color: #7a3a10; font-size: 14px; line-height: 1.5; }
.dash-intake-section-done.dash-intake-section-review { background: var(--orange-100); color: #b5561f; }
.dash-intake-rail-review .dash-intake-rail-num { background: var(--orange-100); color: #b5561f; }
.dash-intake-rail-review .dash-intake-rail-state { color: #b5561f; }

/* ── Intake overview on desktop (Pavel, 2026-09-05, screenshot 114): the fullscreen shell's
   28rem column is lifted; program context, progress and the note sit left, the section
   list runs down the right with room to breathe. ─────────────────────────────────── */
@media (min-width: 1000px) {
  body.dash-fullscreen .dash-main:has(.dash-intake) { max-width: 72rem; padding: 40px 40px 56px; }
  .dash-intake { display: grid; grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
  .dash-intake > .dash-intake-context,
  .dash-intake > .dash-intake-progress-bar-wrap,
  .dash-intake > .dash-intake-context-note { grid-column: 1; }
  .dash-intake > .dash-intake-stepper { grid-column: 2; grid-row: 1 / span 4; }
  .dash-intake > .dash-intake-summary { grid-column: 2; }
  /* Account Setup shares the .dash-intake wrapper but is one centred card, not the
     two-column overview: in the grid its card fell into the narrow left column and sat
     squeezed against the rail (Pavel, desktop, 2026-09-21). Same for the "already set up"
     page, which uses the same wrapper. */
  .dash-intake.as-page { display: block; }
  .dash-intake-context-title { font-size: 34px; line-height: 1.15; letter-spacing: -0.015em; }
  .dash-intake-context-sub { font-size: 16.5px; line-height: 1.55; }
  .dash-intake-progress-bar-wrap { margin: 8px 0 20px; }
  .dash-intake-context-note { margin: 0; font-size: 14.5px; }
  .dash-intake-step-row { gap: 20px; }
  .dash-intake-section-card { padding: 20px 22px; }
  .dash-intake-section-name { font-size: 17px; }
  .dash-intake-section-desc, .dash-intake-mini-progress span { font-size: 14px; }
  .dash-intake-section-done { font-size: 12px; }
  .dash-intake-section-cta { font-size: 15px; }
}
@media (min-width: 1300px) { .dash-intake { column-gap: 88px; } }
.dash-intake-complete-btn.dash-intake-saving::after { content: "\2026"; }

/* Rail: the current section should read as "you are here", not shout (Pavel, 2026-09-05,
   screenshot 116). One accent, the orange number; the rest stays quiet. */
@media (min-width: 1000px) {
  .dash-intake-rail-current { background: var(--surface); border-color: rgba(220,182,136,.45); box-shadow: none; }
  .dash-intake-rail-current .dash-intake-rail-name { font-weight: 500; }
  .dash-intake-rail-current .dash-intake-rail-state { color: var(--text-secondary); font-weight: 400; }
  .dash-intake-rail-current .dash-intake-rail-num { background: var(--orange-400); color: #1a1a1a; }
}

/* Intake finished screen */
.dash-intake-finished { display: block; }
.dash-intake-finished-head { max-width: 40rem; margin: 0 auto; text-align: center; padding: 24px 0 8px; }
.dash-intake-finished-check { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: var(--orange-400); position: relative; }
.dash-intake-finished-check::after { content: ""; position: absolute; left: 20px; top: 13px; width: 12px; height: 22px; border: solid #1a1a1a; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.dash-intake-finished .dash-intake-context-title { font-size: 32px; margin: 4px 0 10px; }
.dash-intake-finished .dash-intake-context-sub { font-size: 16.5px; line-height: 1.6; }
.dash-intake-finished-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 22px 0 0; }
.dash-intake-finished-cta .pathway-checkout-btn { display: inline-flex; width: auto; text-decoration: none; padding: 14px 28px; }
.dash-intake-finished-cta .dash-intake-back-link { padding: 0; margin: 0; }
.dash-intake-finished-journey { max-width: 52rem; margin: 32px auto 0; }
@media (min-width: 1000px) {
  body.dash-fullscreen .dash-main:has(.dash-intake-finished) { max-width: 72rem; padding: 40px 40px 56px; }
  .dash-intake-finished { display: grid; grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
  .dash-intake-finished-head { text-align: left; margin: 0; padding: 8px 0 0; position: sticky; top: 24px; }
  .dash-intake-finished-check { margin: 0 0 18px; }
  .dash-intake-finished-cta { align-items: flex-start; }
  .dash-intake-finished-journey { max-width: none; margin: 0; }
}

/* Home: program status rows ("In progress") — informational, quieter than an ask */
.dash-priority-status { background: var(--cream); }
.dash-priority-status .dash-priority-label { font-weight: 500; }
.dash-priority-stage { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--orange-050); color: #b5561f; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }

/* Status rows were painted in the page's own cream and vanished (Pavel, 2026-09-05,
   screenshot 118): white surface and a sand edge like every other card, one tint
   lighter than an ask so they still read as "for information". */
.dash-priority-status { background: var(--surface); border: 1px solid rgba(220,182,136,.4); box-shadow: 0 1px 3px rgba(0,0,0,0.04); border-radius: 12px; }
.dash-priority-status:hover { border-color: rgba(255,136,76,.35); }
.dash-priority-status .dash-priority-icon { background: var(--orange-050); }

/* ── Treatment programs list: small photo cards, three across (Pavel, 2026-09-05) ──── */
.dash-pathway-list { max-width: none; }
.dash-pathway-list .dash-pathway-header { max-width: 44rem; }
.dash-pgrid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 600px) { .dash-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .dash-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.dash-pgrid-card { display: flex; flex-direction: column; gap: 0; border-radius: 20px; background: var(--surface); border: 1px solid rgba(220,182,136,.32); overflow: hidden; text-decoration: none; color: var(--font); transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms; }
.dash-pgrid-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(16,41,60,.4); border-color: rgba(255,136,76,.35); text-decoration: none; color: var(--font); }
.dash-pgrid-card:hover * { text-decoration: none; }
.dash-pgrid-tile.dash-pathway-tile { min-width: 0; max-width: none; aspect-ratio: 16 / 10; border-radius: 0; box-shadow: none; }
.dash-pgrid-tile.dash-pathway-tile:hover { box-shadow: none; }
.dash-pgrid-tile.dash-pathway-tile:active { transform: none; }
.dash-pgrid-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; }
.dash-pgrid-includes { display: flex; flex-direction: column; gap: 6px; }
.dash-pgrid-inc { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--font); }
.dash-pgrid-inc svg { flex: 0 0 13px; margin-top: 3px; color: var(--orange-500); }
.dash-pgrid-note { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.dash-pgrid-stage { font-size: 14.5px; font-weight: 500; color: var(--font); }
.dash-pgrid-stage-k { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 999px; background: var(--orange-050); color: #b5561f; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }

/* ── Requisition ready: modal, bell feed, home card (dash_requisition_ready.go) ────── */
.dash-reqready-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(16,41,60,.45); display: flex; align-items: center; justify-content: center; padding: 20px; }
.dash-reqready-overlay[hidden] { display: none; }
.dash-reqready { width: 100%; max-width: 30rem; background: var(--surface); border-radius: 20px; padding: 28px 28px 24px; box-shadow: 0 30px 60px -30px rgba(16,41,60,.6); }
.dash-reqready-title { margin: 4px 0 10px; font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; color: var(--font); }
.dash-reqready-desc { margin: 0 0 10px; font-size: 16px; line-height: 1.55; color: var(--font); }
.dash-reqready-tests { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.dash-reqready-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.dash-reqready-primary.pathway-checkout-btn { text-decoration: none; }
.dash-reqready-secondary { padding: 12px 18px; border-radius: 999px; border: 1px solid var(--color-navy); background: transparent; color: var(--color-navy); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.dash-reqready-secondary:hover:not(:disabled) { background: var(--color-navy); color: #fff; }
.dash-reqready-later { background: none; border: 0; padding: 6px; font: inherit; font-size: 14px; color: var(--text-secondary); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.dash-reqready-note { margin: 8px 0 0; min-height: 1.2em; font-size: 13px; color: var(--text-secondary); text-align: center; }
.dash-notif-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--font); }
.dash-notif-item:hover { background: var(--cream); text-decoration: none; }
.dash-notif-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: rgba(220,182,136,.7); margin-top: 7px; }
.dash-notif-new .dash-notif-dot { background: var(--orange-400); }
.dash-notif-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-notif-h { font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.dash-notif-sub { font-size: 12.5px; color: var(--text-secondary); }
.dash-notif-empty-hidden { display: none; }

/* ── Bell: unread dot ── */
.dash-bell-unread { position: relative; }
.dash-bell-unread::after { content: ""; position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--orange-400); box-shadow: 0 0 0 2px var(--surface); }

/* ── Home: "What's new" alerts (post-launch) ── */
.dash-alert { display: flex; gap: 24px; align-items: flex-start; padding: 22px 24px; border-radius: 16px; background: var(--surface); border: 1px solid rgba(220,182,136,.45); border-left: 5px solid var(--orange-400); margin-bottom: 14px; }
.dash-alert-body { flex: 1; min-width: 0; }
.dash-alert-k { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.dash-alert-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--cream-deep, #EDE9DA); color: var(--text-secondary); font-size: 10.5px; letter-spacing: .04em; }
.dash-alert-chip-new { background: var(--orange-400); color: var(--color-font, #292626); }
.dash-alert-t { margin: 0 0 6px; font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--font); }
.dash-alert-d { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.dash-alert-acts { display: flex; flex-direction: column; align-items: stretch; gap: 8px; flex: 0 0 auto; min-width: 200px; }
.dash-alert-primary.pathway-checkout-btn { text-decoration: none; width: auto; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.dash-alert-link { text-align: center; font-size: 14px; font-weight: 500; color: var(--color-navy); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) { .dash-alert { flex-direction: column; } .dash-alert-acts { width: 100%; } }

/* ── Bloodwork page ── */
.dash-bw { max-width: none; }
.dash-bw-head { max-width: 48rem; margin-bottom: 26px; }
.dash-bw-title { margin: 4px 0 10px; font-size: 32px; line-height: 1.15; font-weight: 500; letter-spacing: -0.015em; color: var(--font); }
.dash-bw-lede { margin: 0 0 16px; font-size: 16.5px; line-height: 1.6; color: var(--font); }
.dash-bw-formrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash-bw-btn.pathway-checkout-btn { display: inline-flex; width: auto; text-decoration: none; }
.dash-bw-formnote { font-size: 13px; color: var(--text-secondary); }
.dash-bw-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 1000px) { .dash-bw-grid { grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr); gap: 40px; align-items: start; } .dash-bw-side { position: sticky; top: 24px; } }
.dash-bw-h2 { margin: 0 0 12px; font-size: 20px; font-weight: 500; }
.dash-bw-choices { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .dash-bw-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dash-bw-choice { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(220,182,136,.5); background: var(--surface); font: inherit; color: var(--font); cursor: pointer; transition: border-color 150ms, box-shadow 150ms; }
.dash-bw-choice:hover { border-color: rgba(255,136,76,.5); }
.dash-bw-choice-on { border-color: var(--orange-400); box-shadow: 0 0 0 3px rgba(255,136,76,.15); }
.dash-bw-choice-off { cursor: default; background: var(--cream); color: var(--text-secondary); }
.dash-bw-choice-off:hover { border-color: rgba(220,182,136,.5); }
.dash-bw-choice-t { font-size: 16px; font-weight: 500; }
.dash-bw-choice-off .dash-bw-choice-t { color: var(--font); }
.dash-bw-choice-d { font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }
.dash-bw-postal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 18px; }
.dash-bw-postal-l { font-size: 14px; color: var(--text-secondary); }
.dash-bw-postal-in { width: 9rem; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(220,182,136,.55); background: var(--surface); font: inherit; font-size: 15px; text-transform: uppercase; }
.dash-bw-postal-go { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--color-navy); background: transparent; color: var(--color-navy); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.dash-bw-postal-go:hover { background: var(--color-navy); color: #fff; }
.dash-bw-save { font-size: 13px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; }
.dash-bw-soon { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; background: var(--orange-050); color: #b5561f; }
.dash-bw-hint { margin: 0; padding: 16px 18px; border-radius: 12px; background: var(--cream); font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); }
.dash-bw-found { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.dash-bw-places { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .dash-bw-places { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash-bw-place { padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid rgba(220,182,136,.4); }
.dash-bw-place-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dash-bw-net { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.dash-bw-net-lifelabs { background: #E8EEF5; color: #10293C; }
.dash-bw-net-dynacare { background: #EAF3EC; color: #3C6B49; }
.dash-bw-open { font-size: 12px; color: var(--text-secondary); }
.dash-bw-open-yes { color: #3C6B49; font-weight: 600; }
.dash-bw-dist { margin-left: auto; font-size: 12.5px; color: var(--text-secondary); }
.dash-bw-place-name { margin: 0 0 2px; font-size: 16px; font-weight: 500; color: var(--font); }
.dash-bw-place-addr { margin: 0 0 6px; font-size: 14px; line-height: 1.45; color: var(--font); }
.dash-bw-place-meta { margin: 0 0 10px; font-size: 13.5px; color: var(--text-secondary); }
.dash-bw-place-acts { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.dash-bw-place-link { font-size: 14px; font-weight: 500; color: var(--color-navy); text-decoration: underline; text-underline-offset: 2px; }
.dash-bw-place-soon { margin-left: auto; padding: 6px 10px; border-radius: 999px; border: 1px dashed rgba(220,182,136,.7); background: transparent; color: var(--text-secondary); font: inherit; font-size: 12px; }
.dash-bw-card { padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid rgba(220,182,136,.4); margin-bottom: 12px; }
.dash-bw-card-k { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
.dash-bw-card-p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--font); }
.dash-bw-list { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.6; color: var(--font); }
.dash-bw-card-warn { border-left: 4px solid var(--orange-400); }
.dash-bw-card-soon { background: var(--cream); border-style: dashed; }
.dash-reqready-view { text-align: center; text-decoration: none; }

/* Modal tidy (Pavel, 2026-09-06, screenshot 142): buttons line up and centre, no empty
   space held at the bottom for a note that is not there. */
.dash-reqready { padding: 26px 26px 18px; }
.dash-reqready .pathway-checkout-btn, .dash-reqready-primary.pathway-checkout-btn { display: flex; justify-content: center; text-align: center; width: 100%; box-sizing: border-box; padding: 13px 18px; }
.dash-reqready-secondary, .dash-reqready-view { display: flex; justify-content: center; align-items: center; width: 100%; box-sizing: border-box; padding: 12px 18px; }
.dash-reqready-actions { gap: 8px; margin-top: 12px; }
.dash-reqready-tests { margin-bottom: 0; }
.dash-reqready-later { padding: 4px; margin-top: 2px; }
.dash-reqready-note { min-height: 0; margin: 0; }
.dash-reqready-note:empty { display: none; }
.dash-reqready-note:not(:empty) { margin-top: 8px; }

/* Bloodwork: inline viewer with actions, and the map */
.dash-bw-viewer { margin: 0 0 28px; border: 1px solid rgba(220,182,136,.45); border-radius: 16px; overflow: hidden; background: var(--surface); }
.dash-bw-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid rgba(220,182,136,.35); background: var(--cream); }
.dash-bw-viewer-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-bw-tab { padding: 6px 12px; border-radius: 999px; border: 1px solid transparent; background: transparent; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--text-secondary); cursor: pointer; }
.dash-bw-tab-on { background: var(--surface); border-color: rgba(220,182,136,.5); color: var(--font); }
.dash-bw-viewer-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dash-bw-act { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(220,182,136,.55); background: var(--surface); font: inherit; font-size: 13.5px; font-weight: 500; color: var(--color-navy); text-decoration: none; cursor: pointer; }
.dash-bw-act:hover:not(:disabled) { border-color: var(--color-navy); text-decoration: none; }
.dash-bw-act-mail { border-color: var(--color-navy); }
.dash-bw-frame { display: block; width: 100%; height: 62vh; min-height: 420px; border: 0; background: #e9e6da; }
@media (max-width: 700px) { .dash-bw-frame { height: 70vh; min-height: 360px; } .dash-bw-viewer-acts { width: 100%; } }
.dash-bw-mapwrap { position: relative; margin: 0 0 14px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(220,182,136,.4); }
.dash-bw-map { height: 260px; background: #e9e6da; }
@media (max-width: 700px) { .dash-bw-map { height: 200px; } }
.dash-bw-maparea { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 500; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--color-navy); background: var(--surface); color: var(--color-navy); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(16,41,60,.5); }
.dash-bw-maparea[hidden] { display: none; }
.bw-pin { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--color-navy); color: #fff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.bw-pin span { transform: rotate(45deg); font-size: 11px; font-weight: 700; }
.bw-pin-dynacare { background: #3C6B49; }
.bw-pin-lifelabs { background: #10293C; }
.dash-bw-place { cursor: pointer; }
.dash-bw-place-on { border-color: var(--orange-400); box-shadow: 0 0 0 3px rgba(255,136,76,.15); }

/* ── Bloodwork page, second pass (Pavel, 2026-09-06): compact requisition card with a
   thumbnail and a pop-up viewer; a segmented "where from" control over a small live map;
   the list under it. ────────────────────────────────────────────────────────────────── */
.dash-bw-top { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 26px; }
@media (min-width: 900px) { .dash-bw-top { grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); gap: 32px; align-items: start; } }
.dash-bw-head { margin: 0; max-width: none; }
.dash-bw-req { display: flex; gap: 16px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid rgba(220,182,136,.45); }
.dash-bw-thumb { flex: 0 0 96px; width: 96px; height: 124px; position: relative; padding: 0; border: 1px solid rgba(0,0,0,.08); border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer; box-shadow: 0 6px 16px -10px rgba(16,41,60,.5); }
.dash-bw-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dash-bw-thumb-blank { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.dash-bw-thumb-zoom { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: var(--color-navy); color: #fff; font-size: 11px; font-weight: 600; }
.dash-bw-thumb:hover .dash-bw-thumb-zoom { background: var(--orange-500); }
.dash-bw-req-meta { flex: 1; min-width: 0; }
.dash-bw-req-k { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
.dash-bw-req-t { margin: 0 0 4px; font-size: 15.5px; font-weight: 500; color: var(--font); }
.dash-bw-req-d { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }
.dash-bw-req-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-bw-act-main { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.dash-bw-forms { list-style: none; margin: 10px 0 12px; padding: 0; border-top: 1px solid rgba(220,182,136,.35); }
.dash-bw-form { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(220,182,136,.35); }
.dash-bw-form-t { font-size: 14px; font-weight: 600; color: var(--font); }
.dash-bw-form-w { grid-column: 1; font-size: 12.5px; color: var(--text-secondary); }
.dash-bw-form { grid-template-columns: 22px 1fr auto; }
.dash-bw-form-n { grid-row: 1 / 3; width: 22px; height: 22px; border-radius: 50%; background: var(--color-navy); color: #F4F1E2; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.dash-bw-form-t { grid-column: 2; }
.dash-bw-form-w { grid-column: 2; line-height: 1.45; }
.dash-bw-form-w a { color: var(--color-navy); }
.dash-bw-form-view { grid-column: 3; grid-row: 1 / 3; padding: 5px 11px; font-size: 13px; }
.dash-bw-req-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.dash-bw-maillink { padding: 0; border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--color-navy); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.dash-bw-maillink:disabled { text-decoration: none; color: #1F6B44; cursor: default; }
.dash-bw-choice { margin: 0 4px 0 0; padding: 5px 11px; font-size: 13px; }
.rv-note, .dash-bw-formnote { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rv-note:empty, .dash-bw-formnote:empty { display: none; }
.dash-bw-act-sent, .dash-bw-act-sent:disabled { background: rgba(46,139,87,.12); border-color: #3C6B49; color: #1F6B44; opacity: 1; }
.dash-bw-tabs-k { align-self: center; margin-right: 4px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--text-secondary); }
.dash-bw-tab { display: inline-flex; align-items: center; gap: 7px; }
.dash-bw-tab i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: rgba(41,38,38,.08); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; color: var(--font); }
.dash-bw-tab-on { background: var(--color-navy); border-color: var(--color-navy); color: #F4F1E2; }
.dash-bw-tab-on i { background: #F4F1E2; color: var(--color-navy); }
.dash-bw-act-main:hover { background: var(--navy-800, #0b1d2b); }
.dash-bw-where { margin-bottom: 12px; }
.dash-bw-seg { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.dash-bw-segbtn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(220,182,136,.55); background: var(--surface); font: inherit; font-size: 14px; font-weight: 500; color: var(--font); cursor: pointer; }
.dash-bw-segbtn:hover { border-color: rgba(255,136,76,.5); }
.dash-bw-segbtn-on { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.dash-bw-segpanel { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); padding: 2px 4px 0; }
.dash-bw-segpanel[hidden] { display: none; }
.dash-bw-segpanel a { color: var(--color-navy); }
.dash-bw-postal.dash-bw-segpanel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 0; }
.dash-bw-mapwrap { position: relative; margin: 0 0 14px; }
.dash-bw-map { height: 280px; }
@media (max-width: 700px) { .dash-bw-map { height: 220px; } }
.dash-bw-maplegend { position: absolute; left: 10px; bottom: 10px; z-index: 500; display: flex; gap: 6px; flex-wrap: wrap; }
.dash-bw-lg { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: rgba(255,254,246,.92); font-size: 11px; font-weight: 600; color: var(--font); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.dash-bw-lg::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #10293C; }
.dash-bw-lg-you::before { background: #2A7DE1; }
.dash-bw-lg-dynacare::before { background: #3C6B49; }
.dash-bw-lg-circle::before { background: var(--orange-400); }
/* the bloodwork map wears the pharmacy finder's look (Pavel, 2026-09-23: "make this one much nicer too") */
.dash-bw-map .leaflet-tile-pane { filter: grayscale(.75) sepia(.3) brightness(1.05) contrast(.9); }
.dash-bw-map.leaflet-container { background: #F1E9D8; font-family: inherit; }
.dash-bw-map .leaflet-bar { border: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px -4px rgba(16,41,60,.35); }
.dash-bw-map .leaflet-bar a { width: 34px; height: 34px; line-height: 34px; color: var(--color-navy); border-bottom-color: rgba(220,182,136,.4); }
.dash-bw-map .leaflet-control-attribution { background: rgba(255,254,246,.8); font-size: 10px; border-radius: 8px 0 0 0; }
.dash-bw-map .dash-pharm-pin.bw-pin-dynacare { background: #3C6B49; }
.dash-bw-map .dash-pharm-pin.bw-pin-dynacare b, .dash-bw-map .dash-pharm-pin.bw-pin-lifelabs b { color: #fff; }
.dash-bw-map .dash-pharm-pin.bw-pin-lifelabs { background: var(--color-navy); }
.dash-bw-map .dash-pharm-pin.bw-pin-circle { background: var(--orange-400); }
.dash-bw-map .dash-pharm-pin.bw-pin-circle b { color: #1a1a1a; }
.bw-pop { display: grid; gap: 3px; min-width: 180px; font-size: 13.5px; }
.bw-pop b { font-size: 14.5px; color: var(--font); }
.bw-pop span { color: var(--text-secondary); }
.bw-pop a { color: var(--color-navy); font-weight: 600; text-decoration: none; }
.dash-journey-btn { display: inline-flex; align-items: center; margin: 8px 0 0 12px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(220,182,136,.7); background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--color-navy); cursor: pointer; }
.dash-journey-btn:hover { border-color: var(--color-navy); }
.dash-home-roadlink { color: inherit; text-decoration: none; }
.dash-home-roadlink:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Care-open roadmap: only "Foundations plan" is the link, and it always looks like one;
   plus a plain way in under the cards (Pavel, 2026-09-29). */
/* underline removed again (Pavel, 2026-09-29); the base rule still underlines on hover */
.dash-home-road-more { margin: 18px 0 0; text-align: center; font-size: 15px; }
.dash-home-road-more a { color: var(--color-navy, #10293C); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.dash-intake-save-error { margin: 10px 0 0; font-size: 13.5px; color: #9B2C2C; }
.dash-intake-unitrow { display: flex; align-items: center; gap: 10px; }
.dash-intake-unitrow .dash-intake-number { max-width: 140px; }
.dash-intake-unit { font-size: 14px; color: var(--text-secondary); }
.bw-you { width: 18px; height: 18px; }
.bw-you span { display: block; width: 18px; height: 18px; border-radius: 50%; background: #2A7DE1; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(42,125,225,.25), 0 2px 6px rgba(0,0,0,.3); }
.bw-pin-circle { background: var(--orange-400); color: #1a1a1a; }
.dash-bw-check { margin: 0; padding: 0; list-style: none; }
.dash-bw-check li { position: relative; padding: 4px 0 4px 26px; font-size: 14.5px; line-height: 1.5; color: var(--font); }
.dash-bw-check li::before { content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid rgba(220,182,136,.8); }
/* pop-up viewer */
.dash-bw-modal { position: fixed; inset: 0; z-index: 1300; background: rgba(16,41,60,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dash-bw-modal[hidden] { display: none; }
.dash-bw-modal-box { width: min(920px, 100%); height: min(92vh, 1100px); display: flex; flex-direction: column; background: var(--surface); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(16,41,60,.7); }
.dash-bw-modal .dash-bw-frame { flex: 1; height: auto; min-height: 0; }
.dash-bw-close { font-size: 18px; line-height: 1; padding: 5px 11px; }
body.dash-bw-lock { overflow: hidden; }
@media (max-width: 700px) { .dash-bw-modal { padding: 0; } .dash-bw-modal-box { height: 100vh; border-radius: 0; } .dash-bw-req { flex-direction: row; } .dash-bw-thumb { flex-basis: 76px; width: 76px; height: 98px; } }

/* Bloodwork: two independent columns (Pavel, 2026-09-06, screenshot 145) */
.dash-bw { display: flex; flex-direction: column; }
.dash-bw-left, .dash-bw-right { display: contents; }
.dash-bw-head { order: 1; margin-bottom: 18px; }
.dash-bw-req { order: 2; margin-bottom: 22px; }
.dash-bw-main { order: 3; }
.dash-bw-side { order: 4; margin-top: 24px; }
.dash-bw > .pathway-receipt-back { order: 5; }
@media (min-width: 1000px) {
  .dash-bw { display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr); column-gap: 40px; align-items: start; }
  .dash-bw-left, .dash-bw-right { display: block; min-width: 0; }
  .dash-bw-left { grid-column: 1; }
  .dash-bw-right { grid-column: 2; position: sticky; top: 24px; }
  .dash-bw > .pathway-receipt-back { grid-column: 1; }
  .dash-bw-side { margin-top: 0; }
  .dash-bw-head { margin-bottom: 22px; }
}
.dash-bw-thumb { flex-basis: 84px; width: 84px; height: 108px; }

/* Bloodwork: Circle card, done/booked strip */
.dash-bw-place-circle { border-color: rgba(255,136,76,.6); background: var(--orange-050); }
.dash-bw-net-circle { background: var(--orange-400); color: #1a1a1a; }
.dash-bw-place-book.pathway-checkout-btn { display: inline-flex; width: auto; padding: 9px 16px; font-size: 14px; text-decoration: none; }
.dash-bw-done { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid rgba(220,182,136,.45); font-size: 14.5px; line-height: 1.5; color: var(--font); }
.dash-bw-done-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--success, #3C6B49); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dash-bw-booked .dash-bw-done-chip { background: var(--color-navy); }
.dash-bw-done-btn { margin-left: auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--color-navy); background: transparent; color: var(--color-navy); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.dash-bw-done-btn:hover:not(:disabled) { background: var(--color-navy); color: #fff; }
.dash-alert-quiet { border-left-color: var(--success, #3C6B49); }
/* No coloured left stripe on "What's new" cards (Pavel, 2026-09-29: "it looks like AI"). */
.dash-alert, .dash-alert-quiet { border-left: 1px solid rgba(220,182,136,.45); }

/* Booking page */
.dash-book-head { max-width: 48rem; margin-bottom: 22px; }
.dash-book-why { margin: 0; font-size: 14px; color: var(--text-secondary); }
.dash-book-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 1000px) { .dash-book-grid { grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr); gap: 40px; align-items: start; } .dash-book-side { position: sticky; top: 24px; } }
.dash-book-k { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
.dash-book-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 18px; scroll-snap-type: x mandatory; }
.dash-book-day { flex: 0 0 64px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; border: 1px solid rgba(220,182,136,.5); background: var(--surface); font: inherit; color: var(--font); cursor: pointer; }
.dash-book-day-w { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.dash-book-day-n { font-size: 20px; font-weight: 500; line-height: 1.1; }
.dash-book-day-m { font-size: 11px; color: var(--text-secondary); }
.dash-book-day-on { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.dash-book-day-on .dash-book-day-w, .dash-book-day-on .dash-book-day-m { color: rgba(255,255,255,.75); }
.dash-book-slotlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 18px; }
.dash-book-slot { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(220,182,136,.5); background: var(--surface); font: inherit; color: var(--font); cursor: pointer; text-align: left; }
.dash-book-slot:hover { border-color: rgba(255,136,76,.5); }
.dash-book-slot-on { border-color: var(--orange-400); box-shadow: 0 0 0 3px rgba(255,136,76,.15); }
.dash-book-slot-t { font-size: 16px; font-weight: 500; }
.dash-book-slot-p { font-size: 12.5px; color: var(--text-secondary); }
.dash-book-confirm { padding: 18px; border-radius: 14px; background: var(--surface); border: 1px solid rgba(220,182,136,.45); }
.dash-book-confirm[hidden] { display: none; }
.dash-book-confirm-t { margin: 0 0 12px; font-size: 16px; font-weight: 500; }
.dash-book-radio { display: inline-flex; align-items: center; gap: 6px; margin: 0 16px 12px 0; font-size: 14.5px; }
.dash-book-confirm-how { margin: 0 0 12px; font-size: 14.5px; color: var(--text-secondary); }
.dash-book-card { padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid rgba(220,182,136,.4); margin-bottom: 12px; }
.dash-book-locked { padding: 22px 24px; border-radius: 14px; background: var(--surface); border: 1px solid rgba(220,182,136,.4); max-width: 560px; }
.dash-book-locked .dash-bw-card-p { margin: 8px 0 0; }
.dash-book-upc { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid rgba(220,182,136,.3); font-size: 14px; }
.dash-book-upc:first-of-type { border-top: 0; }
.dash-book-upc-when { font-weight: 500; }
.dash-book-upc-what { color: var(--text-secondary); font-size: 13.5px; }
.dash-book-done { text-align: center; padding: 24px 0; }
.dash-book-done .dash-intake-finished-check { margin: 0 auto 16px; }
.dash-book-done-t { margin: 0 0 8px; font-size: 28px; font-weight: 500; }
.dash-book-done-p { margin: 0 0 10px; font-size: 16px; line-height: 1.55; }
.dash-book-done-acts { margin-top: 18px; }

/* Booking: month grid + confirm step (2026-09-08) */
.dash-book-pick { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 720px) { .dash-book-pick { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 32px; align-items: start; } }
.dash-book-cal { padding: 14px 14px 10px; border-radius: 14px; background: var(--surface); border: 1px solid rgba(220,182,136,.4); }
.dash-book-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dash-book-cal-m { font-size: 16px; font-weight: 500; }
.dash-book-cal-nav { width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(220,182,136,.5); background: transparent; color: var(--font); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.dash-book-cal-nav:disabled { opacity: .3; cursor: default; }
.dash-book-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dash-book-cal-wd { text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); padding: 4px 0 6px; }
.dash-book-cal-d { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 999px; font: inherit; font-size: 14.5px; }
.dash-book-cal-off { color: var(--text-secondary); opacity: .45; }
.dash-book-cal-open { position: relative; border: 1px solid rgba(220,182,136,.6); background: var(--surface); color: var(--font); font-weight: 500; cursor: pointer; }
.dash-book-cal-open::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 999px; background: var(--orange-400); }
.dash-book-cal-open:hover { border-color: var(--orange-500, #ff884c); }
.dash-book-cal-open.dash-book-day-on { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.dash-book-cal-open.dash-book-day-on::after { background: #fff; }
.dash-book-cal-legend { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12px; color: var(--text-secondary); }
.dash-book-cal-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--orange-400); }
.dash-book-cal-none { margin: 10px 0 0; }
.dash-book-slotday { margin: 0 0 8px; font-size: 15px; font-weight: 500; }
.dash-book-confirm-card { padding: 22px 24px; border-radius: 16px; background: var(--surface); border: 1px solid rgba(220,182,136,.45); border-left: 5px solid var(--orange-400); max-width: 34rem; }
.dash-book-confirm-card .dash-book-confirm-t { margin: 0 0 2px; font-size: 22px; }
.dash-book-confirm-with { margin: 0 0 12px; font-size: 15px; color: var(--text-secondary); }
.dash-book-confirm-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 6px; }
.dash-book-confirm-acts .dash-bw-btn { width: auto; }
.dash-book-back { border: 0; background: none; padding: 0; font: inherit; font-size: 14px; font-weight: 500; color: var(--color-navy); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.dash-book-change { margin: 0 0 22px; padding: 14px 18px; border-radius: 12px; background: var(--orange-050, #fff3ea); border: 1px solid rgba(255,136,76,.35); max-width: 48rem; }
.dash-book-change-t { margin: 0 0 4px; font-size: 15px; }
.dash-book-change-d { margin: 0; font-size: 14px; color: var(--text-secondary); }
.dash-book-change-d a { color: var(--color-navy); }
.dash-book-upc-acts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.dash-book-upc-act { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 500; color: var(--color-navy); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.dash-book-upc-cancel { color: var(--text-secondary); }
.dash-book-upc-note { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.dash-book-upc-gone .dash-book-upc-when { text-decoration: line-through; color: var(--text-secondary); }
.dash-cal-add { position: relative; }
.dash-cal-add > summary { list-style: none; cursor: pointer; display: inline-block; }
.dash-cal-add > summary::-webkit-details-marker { display: none; }
.dash-cal-add > summary.pathway-checkout-btn { width: 100%; text-align: center; box-sizing: border-box; }
.dash-cal-add-menu { position: absolute; z-index: 20; left: 0; top: calc(100% + 6px); min-width: 200px; padding: 6px; border-radius: 12px; background: var(--surface); border: 1px solid rgba(220,182,136,.5); box-shadow: 0 10px 28px rgba(16,41,60,.14); display: flex; flex-direction: column; }
.dash-cal-add-opt { padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--font); text-decoration: none; }
.dash-cal-add-opt:hover { background: var(--orange-050, #FFF2E5); }
.dash-book-upc-acts .dash-cal-add-menu { top: calc(100% + 4px); }
.dash-alert-resched { margin-left: 10px; font-size: 14px; font-weight: 500; color: var(--color-navy); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.dash-book-upc-when .dash-book-upc-act { margin-left: 8px; }

/* Preparing for your bloodwork (dash_bloodwork_prep.go) */
.dash-prep-card { border-left: 4px solid var(--orange-400); }
.dash-prep-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dash-prep-top .dash-bw-card-k { margin: 0; }
.dash-prep-lede { margin: 10px 0 12px; padding: 9px 12px; border-radius: 10px; background: var(--orange-050); color: #7a3a10; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.dash-prep-list { display: flex; flex-direction: column; gap: 10px; }
.dash-prep-item { display: flex; flex-direction: column; gap: 4px; }
.dash-prep-badge { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--color-navy); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dash-prep-h { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--font); }
.dash-prep-d { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.dash-prep-none { margin: 10px 0 0; font-size: 13px; color: var(--text-secondary); }
.dash-prep-k { margin: 14px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
.dash-prep-always { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: var(--font); }
.dash-prep-fine { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }

/* ── Care Team thread (chat page, #chat-careteam-content) ───────────────────
   Mail-style unified thread over circle.messages: clinic SMS/app messages are
   .from_agent bubbles, the patient's own composer replies .from_user. Rendered
   by dash_careteam.go (action=chat_careteam_thread). */
.careteam-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.careteam-thread {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	padding: 16px 20px 8px;
}
.careteam-daysep {
	align-self: center;
	margin: 10px 0 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-secondary);
}
.careteam-msgrow {
	display: flex;
	flex-direction: column;
}
.careteam-msgrow .botchatbubble {
	margin-bottom: 2px;
}
.careteam-msgmeta {
	font-size: 11px;
	color: var(--text-secondary);
	margin: 0 0 10px;
	padding: 0 4px;
}
.careteam-msgrow:has(.from_user) .careteam-msgmeta {
	text-align: right;
}

/* ── Care Team thread (unified SMS/app messages with the clinic) ── */
.careteam-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
	margin: 0;
}
.careteam-thread {
	flex: 1;
	overflow-y: auto;
	padding: 16px 20px 8px;
}
.careteam-daysep {
	text-align: center;
	font-size: 12px;
	color: var(--text-secondary);
	margin: 14px 0 6px;
}
.careteam-daysep:first-child { margin-top: 0; }
.careteam-msgrow {
	display: flex;
	flex-direction: column;
}
.careteam-msgrow .botchatbubble { margin-bottom: 2px; }
.careteam-msgmeta {
	font-size: 11px;
	color: var(--text-secondary);
	margin: 0 8px 8px 8px;
}
.careteam-msgrow:has(.from_user) .careteam-msgmeta { text-align: right; margin-right: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Messages v2 — 2026-09-16 (Pavel: "re-do the visuals", iPhone Safari first)
   One index (Care Team row + Clara conversations), a person-like header,
   bubbles that fit their text, 16px type, a sticky composer, and a window
   that scrolls inside itself on iOS. Overrides the chat block above; the
   DOM and every id/class botchats.js and chat.js rely on are unchanged.
   ══════════════════════════════════════════════════════════════════════════ */
.chat-layout { background: var(--color-cream); }
.chat-list-tabs { display: none !important; }

/* Index */
.chat-list { width: 340px; min-width: 300px; max-width: 360px; background: var(--color-cream); border-right: 1px solid rgba(41,38,38,.08); }
.chat-list-header { padding: 20px 20px 8px; border-bottom: 0; }
.chat-list-title { font-size: 28px; font-weight: 500; letter-spacing: -.01em; }
.chat-new-btn { width: 36px; height: 36px; }
.chat-list-items-careteam { flex: 0 0 auto; overflow: visible; }
#chat-list-items { flex: 1; padding-bottom: 12px; }
.chat-list-item { align-items: center; gap: 14px; margin: 2px 10px; padding: 12px 12px; border-bottom: 0; border-radius: 16px; }
.chat-list-item:hover { background: rgba(255,254,246,.7); }
.chat-list-item-active { background: var(--color-surface); box-shadow: 0 1px 2px rgba(41,38,38,.06); }
/* 2026-10-02 (Pavel): the open conversation is a darker cream, not a white card (the left menu's
   own selected look), and Clara's rows come first, the Care Team after. The two lists keep their
   places in the markup; only the order they are shown in changes. Delete these four lines to
   switch back. */
.chat-list-item-active, .chat-list-item-active:hover { background: var(--cream-deep, #E6E2D1); box-shadow: none; }
.chat-list-item:hover { background: color-mix(in srgb, var(--cream-deep, #E6E2D1) 50%, transparent); }
#chat-list-items { order: 1; flex: 0 0 auto; padding-bottom: 0; }
.chat-list-items-careteam { order: 2; padding-bottom: 12px; }
.chat-list-avatar { width: 50px; height: 50px; background: transparent; overflow: hidden; }
.chat-list-avatar img { width: 50px; height: 50px; border-radius: 50%; display: block; }
.chat-list-avatar-assistant { background: transparent; }
.chat-list-avatar-careteam { background: var(--peach-200); }
.chat-list-avatar-careteam img { width: 24px; height: 24px; border-radius: 0; opacity: .85; }
.chat-list-item-name { font-size: 17px; font-weight: 500; letter-spacing: -.005em; }
.chat-list-item-time { font-size: 13px; color: var(--slate-600); }
.chat-list-item-preview { font-size: 15px; color: var(--slate-700); margin-top: 2px; }
.chat-list-item-delete { right: 10px; }
.chat-list-pager { border-top: 0; }

/* Header: who you are talking to */
.chat-window { background: var(--color-cream); }
.chat-window-header { padding: 12px 16px; gap: 12px; background: var(--color-surface); border-bottom: 1px solid rgba(41,38,38,.08); }
.chat-window-header-icon { width: 44px; height: 44px; background: transparent; overflow: hidden; }
.chat-window-header-icon img { width: 44px; height: 44px; border-radius: 50%; display: block; }
.chat-window-header-icon.chat-window-header-icon-careteam { background: var(--peach-200); }
.chat-window-header-icon.chat-window-header-icon-careteam img { width: 22px; height: 22px; border-radius: 0; opacity: .85; }
.chat-window-header-title { font-size: 17px; font-weight: 500; }
.chat-window-header-title b { font-weight: 500; }
.chat-window-header-sep, .chat-window-header-chatname { display: none; }
/* engine tool-call chips are inline boxes: between bubbles they left blank lines */
.chat-window-content acronym, .chat-window-content .sidereelresolver, .chat-window-content .botchatresolver { display: none !important; }
.chat-window-content .botchatbubble a { word-break: break-all; }
.chat-daysep { text-align: center; margin: 22px 0 10px; font-size: 12.5px; color: var(--slate-600); }
/* Earlier Clara conversations, folded above the current one (gsai/icl_showbotchat.go) */
.chat-earlier > summary { display: block; width: max-content; margin: 6px auto 4px; padding: 8px 16px; border: 1px solid rgba(16,41,60,.18); border-radius: 999px; font-size: 13px; color: var(--color-navy, #10293C); cursor: pointer; list-style: none; }
.chat-earlier > summary::-webkit-details-marker { display: none; }
.chat-earlier[open] > summary { display: none; }
.chat-new-btn { display: none; }
.chat-window-header-subtitle { font-size: 13px; color: var(--slate-700); margin-top: 1px; }
.chat-back-btn { color: var(--color-font); }

/* The window scrolls inside itself; the composer sticks to its bottom.
   (.section = messages + adder + composer, rendered by the engine.) */
.chat-window-content { background: var(--color-cream); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.chat-window-content > .section { min-height: 100%; display: flex; flex-direction: column; padding: 0; margin: 0; }
.chat-window-content [id^="botchatmsgs_"] { flex: 1 0 auto; padding: 18px 16px 4px; }
.chat-window-content [id^="botchatmsgs_adder_"] { flex: 0 0 auto; padding: 0 16px; }
.chat-window-content [id^="botchatmsgs_adder_"]:empty { padding: 0; }
.chat-window-content .clear { display: none !important; }

/* Bubbles fit their text: each engine row becomes a flex column so a short
   message is a short bubble, not a full-width bar. */
.chat-window-content [id^="botchatmsgs_"] > div { display: flex; flex-direction: column; align-items: flex-start; }
.chat-window-content [id^="botchatmsgs_"] > div:has(> .from_user) { align-items: flex-end; }
.chat-window-content .botchatbubble {
	position: relative; width: auto; max-width: 78%;
	padding: 11px 15px; margin: 0 0 8px;
	border-radius: 20px; font-size: 16px; line-height: 1.42;
	word-wrap: break-word; overflow-wrap: anywhere;
}
.chat-window-content .botchatbubble.from_user {
	background: var(--color-navy); color: #fff;
	border-bottom-right-radius: 6px; margin-left: 0; text-align: left;
}
.chat-window-content .botchatbubble.from_user a { color: #fff; }
.chat-window-content .botchatbubble.from_agent,
.chat-window-content .botchatbubble.botchat_streaming {
	background: var(--color-surface); color: var(--color-font);
	border-bottom-left-radius: 6px; margin-left: 34px; margin-right: 0; text-align: left;
	box-shadow: 0 1px 2px rgba(41,38,38,.06), 0 4px 14px rgba(41,38,38,.04);
}
/* Who is talking: Clara's mark beside her bubbles */
.chat-window-content .botchatbubble.from_agent::before,
.chat-window-content .botchatbubble.botchat_streaming::before {
	content: ""; position: absolute; left: -34px; bottom: 0;
	width: 26px; height: 26px; border-radius: 50%;
	background: url(/dashboard/imgs/brand/clara-v7.svg) center / 26px 26px no-repeat;
}
/* Care Team thread: a person, not Clara */
.careteam-msgrow .botchatbubble.from_agent::before {
	background: var(--peach-200) url(/dashboard/imgs/icons/user-round.svg) center / 14px 14px no-repeat;
}
.chat-window-content .botchatbubble p { margin: 0 0 8px; }
.chat-window-content .botchatbubble p:last-child { margin-bottom: 0; }
.chat-window-content .botchatbubble ul, .chat-window-content .botchatbubble ol { margin: 6px 0; padding-left: 20px; }
.chat-window-content .botchatbubble a { color: var(--color-navy); text-decoration: underline; text-underline-offset: 2px; }
/* Only new bubbles move in; re-rendered history must not jump */
.chat-window-content .botchatbubble.from_user,
.chat-window-content .botchatbubble.botchat_streaming { animation: dashAskIn .22s ease-out both; }
/* Thinking text is not a thing here: iMessage-style dots only */
.chat-window-content .botchatbubble.botchat_thinking { display: none !important; }
.chat-window-content .botchat-status { font-size: 14px; color: var(--slate-600); margin-left: 6px; vertical-align: middle; }
/* Typing: the engine's spinner becomes three breathing dots */
.chat-window-content .botchat_wait.botchat-spinner {
	display: inline-block; width: 8px; height: 8px; margin: 6px 22px 6px 2px;
	border-radius: 50%; background: var(--slate-400); opacity: 1;
	animation: msgTyping 1.2s ease-in-out infinite;
	box-shadow: 12px 0 0 0 var(--slate-400), 24px 0 0 0 var(--slate-400);
}
@keyframes msgTyping {
	0%, 80%, 100% { opacity: .35; }
	40% { opacity: 1; }
}

/* Composer */
.chat-window-content .dash-chat-input-area,
.careteam-panel .dash-chat-input-area {
	position: sticky; bottom: 0; z-index: 2;
	background: var(--color-cream); border-top: 0;
	padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
}
.dash-chat-input-wrap { align-items: flex-end; gap: 10px; }
.dash-chat-input {
	font-size: 16px; line-height: 1.35; min-height: 44px; max-height: 140px;
	padding: 11px 16px; border-radius: 22px;
	background: var(--color-surface); border: 1px solid rgba(41,38,38,.12); color: var(--color-font);
}
.dash-chat-input:focus { border-color: rgba(41,38,38,.28); box-shadow: 0 0 0 3px rgba(255,136,76,.14); }
.dash-chat-input::placeholder { color: var(--slate-500); }
.dash-chat-send-btn { width: 40px; height: 40px; background: var(--color-orange); color: var(--color-font); }
.dash-chat-send-btn:hover { background: var(--color-orange); transform: scale(1.05); }
.dash-chat-send-btn:active { transform: scale(.96); }

/* New-chat welcome */
.chat-window-content .chat-new-welcome { padding: 28px 16px 8px; }
.chat-window-content .chat-new-welcome .botchatbubble.from_agent { margin-left: 34px !important; }
.chat-new-privacy { font-size: 14px; color: var(--slate-700); }
.chat-new-prompt-tag { font-size: 15px; padding: 9px 16px; border-radius: 20px; background: var(--color-surface); border-color: rgba(41,38,38,.14); color: var(--color-font); }
.chat-new-prompt-tag svg { stroke: var(--color-font); }

/* Care Team thread */
.careteam-thread { padding: 18px 16px 8px; }
.careteam-msgrow { align-items: flex-start; }
.careteam-msgrow:has(.from_user) { align-items: flex-end; }
.careteam-msgmeta { font-size: 12px; color: var(--slate-600); margin: -4px 8px 10px 42px; }
.careteam-msgrow:has(.from_user) .careteam-msgmeta { margin-left: 0; margin-right: 6px; }
.careteam-daysep { font-size: 12px; color: var(--slate-600); }

/* Empty states */
.chat-window-empty p { font-size: 16px; color: var(--slate-700); }

/* Phone */
@media (max-width: 767px) {
	.chat-layout { height: calc(100dvh - var(--topbar-h, 56px) - var(--bottomnav-h, 56px)); }
	.chat-list { width: 100%; min-width: 0; max-width: none; border-right: 0; }
	.chat-list-header { padding: 14px 16px 4px; }
	.chat-list-title { font-size: 26px; }
	.chat-list-item { margin: 2px 6px; padding: 12px 10px; }
	.chat-list-item-delete { display: none; }
	.chat-window { position: fixed; inset: 0; height: 100dvh; z-index: 100; background: var(--color-cream); }
	.chat-window-header { padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; }
	.chat-window-content { flex: 1; min-height: 0; }
	.chat-window-content .botchatbubble { max-width: 84%; font-size: 16px; }
}

/* Sends never show the XHR wait image; the echo carries the typing dots (2026-09-16) */
.chat-window-content img.botchat_wait { display: none !important; }
.chat-window-content [id^="botchatmsgs_adder_"] { opacity: 1 !important; }

/* The send echo (botchat_echo_<id>) wraps its two rows; lay them out like history rows */
.chat-window-content [id^="botchat_echo_"] { display: contents; }
.chat-window-content [id^="botchat_echo_"] > div { display: flex; flex-direction: column; align-items: flex-start; }
.chat-window-content [id^="botchat_echo_"] > div:has(> .from_user) { align-items: flex-end; }

/* ── Attachments in chat (2026-09-16) ── */
.dash-chat-attach-btn {
	flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
	border: 1px solid rgba(41,38,38,.12);
	background: var(--color-surface) url(/dashboard/imgs/icons/paperclip.svg) center / 20px 20px no-repeat;
	transition: border-color .15s;
}
.dash-chat-attach-btn:hover { border-color: rgba(41,38,38,.3); }
.botchat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px 8px; }
.botchat-chips:empty { display: none; }
.botchat-chip {
	display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
	padding: 6px 10px; border-radius: 12px; font-size: 14px; color: var(--color-font);
	background: var(--color-surface); border: 1px solid rgba(41,38,38,.12);
}
.botchat-chip img { width: 36px; height: 36px; object-fit: cover; border-radius: 8px; }
.botchat-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.botchat-chip b { cursor: pointer; font-weight: 500; font-size: 18px; line-height: 1; color: var(--slate-600); padding: 0 2px; }
.botchat-chip-uploading { opacity: .55; }
.botchat-chip-error { color: #b3261e; border-color: rgba(179,38,30,.3); }
.botchatbubble img.botchat-attachment { display: block; max-width: min(260px, 100%); height: auto; border-radius: 14px; margin: 2px 0; }
.chat-window-content .botchatbubble.from_user:has(> img.botchat-attachment:first-child) { padding: 5px; }
.botchatbubble a.botchat-file {
	display: inline-flex; align-items: center; gap: 8px; margin: 2px 0;
	padding: 8px 12px; border-radius: 12px; text-decoration: none; color: inherit;
	background: rgba(255,255,255,.14);
	background-image: url(/dashboard/imgs/icons/rec-file.svg); background-repeat: no-repeat; background-position: 10px center; background-size: 16px 16px; padding-left: 34px;
}
.botchatbubble.from_agent a.botchat-file { background-color: rgba(41,38,38,.06); }
.botchat-chip-error span { max-width: none; white-space: normal; }

/* ── Booking v2 (Pavel, 2026-09-17): how-to-meet filter, times by part of day,
   a confirm sheet instead of a block below the fold, reminders on the booked
   panel. Doctor-agnostic: no names on slots. ── */
.dash-book-how { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.dash-book-how-k { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-600); margin-right: 4px; }
.dash-book-how-pill { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(41,38,38,.16); background: var(--color-surface); color: var(--color-font); font: inherit; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s; }
.dash-book-how-pill:hover { border-color: rgba(41,38,38,.35); }
.dash-book-how-on { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.dash-book-slotgroup-k { margin: 12px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-600); }
.dash-book-slotgroup-k:first-of-type { margin-top: 4px; }
.dash-book-slotlist { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin-bottom: 8px; }
.dash-book-slot { align-items: center; padding: 10px 8px; gap: 3px; text-align: center; }
.dash-book-slot-t { font-size: 16px; }
.dash-book-slot-how { font-size: 11.5px; letter-spacing: .02em; color: var(--slate-600); }
.dash-book-slot-video { color: var(--teal-700); }
.dash-book-slot:hover { border-color: rgba(41,38,38,.35); }
/* the sheet */
.dash-book-sheet { position: fixed; inset: 0; z-index: 1200; display: none; }
.dash-book-sheet-open { display: block; }
.dash-book-sheet-bg { position: absolute; inset: 0; background: rgba(41,38,38,.42); animation: dashAskIn .18s ease-out both; }
.dash-book-sheet-card { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92dvh; overflow-y: auto; padding: 22px 20px calc(24px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0; background: var(--color-surface); box-shadow: 0 -12px 40px rgba(41,38,38,.18); animation: bookSheetUp .26s cubic-bezier(.2,.8,.2,1) both; }
@keyframes bookSheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (min-width: 720px) {
	.dash-book-sheet-card { left: 50%; right: auto; top: 50%; bottom: auto; width: min(560px, calc(100vw - 32px)); max-height: 86vh; transform: translate(-50%, -50%); border-radius: 22px; padding: 28px 30px 26px; animation: bookSheetIn .22s ease-out both; }
	@keyframes bookSheetIn { from { transform: translate(-50%, -48%); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
}
.dash-book-sheet-lock { overflow: hidden; }
.dash-book-sheet-x { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(41,38,38,.06); color: var(--color-font); font-size: 24px; line-height: 1; cursor: pointer; }
.dash-book-sheet-t { margin: 4px 0 16px; font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; }
.dash-book-sheet-facts { margin: 0 0 14px; padding: 0; }
.dash-book-sheet-facts > div { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(41,38,38,.08); }
.dash-book-sheet-facts dt { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-600); padding-top: 2px; }
.dash-book-sheet-facts dd { margin: 0; font-size: 15.5px; line-height: 1.5; }
.dash-book-sheet-soft { color: var(--slate-700); }
.dash-book-sheet-after { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--slate-700); }
.dash-book-sheet .dash-book-radio { display: block; margin: 4px 0; }
/* reminders on the booked panel */
.dash-book-remind { max-width: 440px; margin: 26px auto 0; padding: 16px 18px 10px; border-radius: 16px; background: var(--color-surface); border: 1px solid rgba(220,182,136,.45); text-align: left; }
.dash-book-remind-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(41,38,38,.08); cursor: pointer; }
.dash-book-remind-row:first-of-type { border-top: 0; }
.dash-book-remind-tx { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.dash-book-remind-tx small { font-size: 13px; color: var(--slate-700); }
.dash-book-remind .dash-set-note { margin: 8px 0 4px; }

/* confirm sheet: opt-in rows (Pavel, 2026-09-17) */
.dash-book-sheet-opts { display: flex; flex-direction: column; gap: 6px; }
.dash-book-sheet-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; cursor: pointer; }
.dash-book-sheet-opt .dash-settings-toggle { flex: 0 0 auto; }
.dash-book-sheet .dash-book-confirm-acts { justify-content: flex-end; margin-top: 10px; }
.dash-book-sheet .dash-book-sheet-t { font-size: 22px; }
.dash-book-how-pill { display: inline-flex; align-items: center; gap: 8px; }
.dash-book-how-pill input { margin: 0; width: 16px; height: 16px; accent-color: var(--color-orange); }
.dash-book-how-on input { accent-color: var(--color-orange); }

/* booked: one centred card (Pavel, 2026-09-17) */
.dash-book-booked { display: flex; justify-content: center; padding: 8vh 0 40px; }
.dash-book-booked .dash-book-done { width: min(480px, 100%); padding: 36px 28px 28px; border-radius: 22px; background: var(--color-surface); border: 1px solid rgba(220,182,136,.4); text-align: center; }
.dash-book-done-when { margin: 6px 0 0; font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.dash-book-done-how { margin: 4px 0 0; font-size: 16px; color: var(--slate-700); }
.dash-book-done-what { margin: 14px 0 0; font-size: 15px; line-height: 1.45; color: var(--slate-700); }
.dash-book-booked .dash-book-done-acts { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 24px; }
.dash-book-booked .dash-book-done-acts .dash-cal-add { width: 100%; max-width: 300px; }
.dash-book-booked .dash-book-done-acts .dash-cal-add summary { display: block; width: 100%; text-align: center; }
.dash-book-done-note { margin: 18px 0 0; font-size: 13px; color: var(--slate-600); }
.dash-book-done-note:empty { display: none; }
.dash-book-done-links { display: flex; gap: 18px; justify-content: center; }
.dash-book-done-links .dash-book-upc-act { font-size: 14px; }

/* Clara reminders (2026-09-17): confirm button / confirmed line on the visit card;
   texts mirrored into Messages carry a small "via text" mark */
.dash-book-done-ask { margin: 16px 0 0; }
.dash-book-done-confirmed { margin: 14px 0 0; font-size: 15px; color: var(--teal-700); font-weight: 500; }
.chat-window-content .botchatbubble p.via-sms::before { content: "via text"; display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-600); margin-bottom: 4px; }

/* ── Mobile verification (2026-09-17) ── */
.dash-verify { width: min(440px, 100%); margin: 6vh auto 40px; padding: 32px 26px 26px; border-radius: 22px; background: var(--color-surface); border: 1px solid rgba(220,182,136,.4); text-align: center; }
.dash-verify-t { margin: 6px 0 8px; font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; }
.dash-verify-p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.5; color: var(--slate-700); }
.dash-verify-p b { font-weight: inherit; white-space: nowrap; }
.dash-verify-form { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.dash-verify-input { width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(41,38,38,.18); background: var(--color-surface); font: inherit; font-size: 20px; text-align: center; color: var(--color-font); }
.dash-verify-input:focus { outline: none; border-color: var(--color-orange); box-shadow: 0 0 0 3px rgba(255,136,76,.16); }
/* Six boxes painted from one invisible input (verify.js) so iOS "From Messages" autofill still works. */
.dash-verify-boxes { position: relative; display: flex; gap: 8px; justify-content: center; margin: 6px 0 4px; }
.dash-verify-box { flex: 1 1 0; max-width: 52px; height: 60px; border-radius: 12px; border: 1px solid rgba(41,38,38,.18); background: var(--color-surface); display: flex; align-items: center; justify-content: center; font-size: 26px; font-variant-numeric: tabular-nums; color: var(--color-font); transition: border-color .12s, box-shadow .12s; }
.dash-verify-box-on { border-color: var(--color-orange); box-shadow: 0 0 0 3px rgba(255,136,76,.16); }
.dash-verify-boxes-busy .dash-verify-box { opacity: .5; }
.dash-verify-code { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: transparent; font-size: 16px; color: transparent; caret-color: transparent; opacity: .01; outline: none; }
.dash-verify-code::selection { background: transparent; }
.dash-verify-form .pathway-checkout-btn { width: 100%; }
.dash-verify-note { margin: 0; font-size: 14px; color: var(--slate-700); }
.dash-verify-err { margin: 0; font-size: 14px; color: #b3261e; }
.dash-verify-links { margin: 16px 0 0; font-size: 14px; color: var(--slate-600); }
.dash-verify-links a { color: var(--color-font); text-decoration: underline; text-underline-offset: 2px; }
/* the verification card as a sheet over the page */
.dash-verify-sheet { position: fixed; inset: 0; z-index: 1300; }
.dash-verify-sheet-bg { position: absolute; inset: 0; background: rgba(41,38,38,.42); }
.dash-verify-sheet-card { position: absolute; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); padding: 0; background: transparent; border: 0; box-shadow: none; animation: bookSheetUp .26s cubic-bezier(.2,.8,.2,1) both; }
.dash-verify-sheet .dash-verify { width: 100%; margin: 0 auto; max-height: 90dvh; overflow-y: auto; box-shadow: 0 -12px 40px rgba(41,38,38,.18); }
@media (min-width: 720px) {
	.dash-verify-sheet-card { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); padding: 0; animation: bookSheetIn .22s ease-out both; }
	.dash-verify-sheet .dash-verify { box-shadow: 0 20px 60px rgba(41,38,38,.22); }
}
.dash-verify-lock { overflow: hidden; }
.dash-verify .dash-intake-finished-check { margin: 0 auto 18px; }
/* buttons: centred text, always (Pavel, 2026-09-17 "as per usual") */
.dash-verify-form .pathway-checkout-btn, .dash-book-confirm-btn, .dash-book-booked .pathway-checkout-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; }


/* Clara by chat vs Clara by text message: a small tag beside the name, and a read-only
   text thread (2026-09-20). */
.chat-chan { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: .02em; line-height: 1.4; vertical-align: 1px; color: var(--ink, #292626); background: var(--peach-200, #F6E3D3); }
.chat-chan img { width: 12px; height: 12px; display: block; opacity: .8; }
.chat-chan-sms { background: #E3EAEE; }
.dash-chat-readonly { padding: 14px 18px; }
.dash-chat-readonly-note { margin: 0; display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.55; color: #6B6560; }
.dash-chat-readonly-note img { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; opacity: .7; }
.dash-chat-readonly-note a { color: inherit; text-decoration: underline; }


/* Walk-in visit: the standing entry on the home and the one-screen form (dash_walkin.go). */
.dash-home-walkin { display: flex; align-items: center; gap: 12px; margin: 18px var(--home-pad) 0; padding: 14px 18px; border-radius: 16px; background: var(--surface); border: 1px solid rgba(16,41,60,0.10); color: inherit; text-decoration: none; font-size: 14.5px; line-height: 1.5; }
.dash-home-walkin:hover { border-color: rgba(16,41,60,0.28); }
.dash-home-walkin-ico { width: 22px; height: 22px; flex: 0 0 22px; opacity: .8; }
.dash-home-walkin-tx { flex: 1 1 auto; }
.dash-home-walkin-go { width: 16px; height: 16px; flex: 0 0 16px; opacity: .5; }
/* Pavel, 2026-09-29: type one step up, a black 2px stethoscope a little larger, and
   closer to the band above when it follows the hero directly (no action card). */
.dash-home-walkin { font-size: 16px; }
.dash-home-walkin-ico { width: 26px; height: 26px; flex-basis: 26px; opacity: 1; }
.dash-home-walkin-go { opacity: 1; }   /* grey is in walkin-chevron.svg itself */
.dash-home-noaction:has(.dash-home-walkin) .dash-home-hero { padding-bottom: 20px; }
@media (max-width: 767px) { .dash-home-noaction:has(.dash-home-walkin) .dash-home-hero { padding-bottom: 16px; } }
/* Care-open roadmap: centred title, no "Foundations" eyebrow (removed in dash_home_v3.go). */
.dash-home-road-care .dash-home-roadtitle { text-align: left; }   /* left like the other home headings (2026-09-29) */
.dash-walkin-911 { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: #F6E1DA; color: #5E2A1E; font-size: 14px; line-height: 1.55; }
/* what the form still needs before it can go on to the times (routine visit, program pre-order): it had no rule, so it read as an ordinary line */
.pathway-preorder-error { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; border: 1px solid #9B2C2C; background: #FBEDEA; color: #9B2C2C; font-size: 15px; font-weight: 600; line-height: 1.5; }
.dash-walkin-form { display: block; }
.dash-walkin-q { display: block; margin: 18px 0 8px; padding: 0; font-weight: 600; font-size: 15px; }
.dash-walkin-form > .dash-walkin-q:first-child { margin-top: 0; }
.dash-walkin-form textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(16,41,60,0.2); background: #fff; font: inherit; font-size: 16px; line-height: 1.5; resize: vertical; }
.dash-walkin-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.dash-walkin-picks, .dash-walkin-set { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-walkin-picks { margin-top: 10px; }
.dash-walkin-set > legend { flex-basis: 100%; }
.dash-walkin-pick { position: relative; display: inline-flex; cursor: pointer; }
.dash-walkin-exam { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; background: #F3EEE2; color: #474444; font-size: 14px; line-height: 1.5; }
.dash-walkin-exam[hidden] { display: none; }
.dash-book-sheet-reason b { display: block; font-weight: 500; }
.dash-book-sheet-reason span { display: block; margin-top: 2px; color: #474444; white-space: pre-line; overflow-wrap: anywhere; }
.dash-book-sheet-reason a { display: inline-block; margin-top: 4px; font-size: 14px; }
.dash-book-oneaday a { white-space: nowrap; }
.dash-walkin-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dash-walkin-pick span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(16,41,60,0.2); background: #fff; font-size: 14px; line-height: 1.3; }
.dash-walkin-pick input:checked + span { background: #10293C; border-color: #10293C; color: #fff; }
.dash-walkin-pick input:focus-visible + span { outline: 2px solid var(--orange-dark); outline-offset: 2px; }
.dash-walkin-form .pathway-checkout-btn { margin-top: 22px; }
.dash-walkin-urgent { margin-bottom: 18px; }


/* Programs hidden until Account Setup is done; the home's Account Setup chip is a link. */
.dash-programs-locked { margin: 8px 0 0; padding: 22px 24px; border-radius: 16px; background: var(--surface); border: 1px dashed rgba(16,41,60,0.22); }
.dash-programs-locked-carousel { margin: 0 var(--home-pad, 0); }
.dash-programs-locked-t { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.dash-programs-locked-d { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: #6B6560; }
.dash-programs-locked-cta { display: inline-block; padding: 10px 20px; border-radius: 999px; background: #10293C; color: #fff; text-decoration: none; font-size: 14.5px; }
.dash-programs-locked-cta:hover { background: #1B3B53; color: #fff; }
a.dash-home-chip-link { text-decoration: none; cursor: pointer; }
a.dash-home-chip-link:hover { filter: brightness(0.95); }

/* The Account Setup step's way in (homeMomentsHTML, 2026-09-21). Pavel: "more actionable,
   still too small, give it a subtle glisten that will draw someone's eyes to it."
   A real button size, and a soft band of light that crosses it once every few seconds.
   Only this chip: the other linked chips (dash-home-chip-link alone) stay as they were. */
a.dash-home-chip-next.dash-home-chip-link {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	padding: 13px 24px;
	font-size: 13px;
	letter-spacing: 0.08em;
	background: var(--color-navy);
	color: var(--text-on-dark);
	box-shadow: 0 6px 18px -8px rgba(16,41,60,0.55);
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
a.dash-home-chip-next.dash-home-chip-link:hover {
	background: var(--navy-800);
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -8px rgba(16,41,60,0.6);
}
a.dash-home-chip-next.dash-home-chip-link:focus-visible { outline: 2px solid var(--orange-600); outline-offset: 3px; }
a.dash-home-chip-next.dash-home-chip-link::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: -60%;
	width: 45%;
	background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0) 100%);
	transform: translateX(0) skewX(-18deg);
	will-change: transform;
	pointer-events: none;
	animation: dash-chip-glisten 4.8s ease-in-out 1.2s infinite;
}
/* transform, not left: the compositor moves it and the page is never laid out again for it */
@keyframes dash-chip-glisten {
	0%   { transform: translateX(0) skewX(-18deg); }
	22%  { transform: translateX(420%) skewX(-18deg); }
	100% { transform: translateX(420%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
	a.dash-home-chip-next.dash-home-chip-link::after { animation: none; display: none; }
}
@media (max-width: 767px) {
	a.dash-home-chip-next.dash-home-chip-link { display: flex; justify-content: center; padding: 15px 20px; font-size: 13.5px; }
}


/* Circle's own calendar for date fields (dash_datepick.go), desktop. Built on the booking
   page's month grid so the two calendars are one object. */
.account-setup-field:has(> .dash-dp-mount) { position: relative; }
.dash-dp-mount { position: absolute; left: 0; top: calc(100% - 14px); z-index: 30; }
.dash-dp-mount:empty { display: none; }
.dash-dp { width: 312px; padding: 16px 16px 12px; border-radius: 18px; background: var(--surface); border: 1px solid rgba(220,182,136,.45); box-shadow: 0 24px 60px -18px rgba(11,30,45,.38), 0 2px 8px rgba(11,30,45,.08); }
.dash-dp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.dash-dp-sels { display: flex; gap: 6px; }
.dash-dp-sel { appearance: none; -webkit-appearance: none; padding: 7px 26px 7px 12px; border-radius: 999px; border: 1px solid rgba(220,182,136,.55); background: transparent url(/dashboard/imgs/icons/chevron-down.svg) right 9px center / 12px 12px no-repeat; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--font); cursor: pointer; }
.dash-dp-sel:hover, .dash-dp-sel:focus { border-color: var(--orange-500); outline: none; }
.dash-dp-grid { gap: 2px; }
.dash-dp-d { border: 1px solid transparent; background: transparent; color: var(--font); cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.dash-dp-d:hover { border-color: var(--orange-500); background: var(--orange-050); }
.dash-dp-today { border-color: rgba(220,182,136,.8); }
.dash-dp-on, .dash-dp-on:hover { background: var(--color-navy); border-color: var(--color-navy); color: #fff; font-weight: 500; }
.dash-dp-blank { visibility: hidden; }
.dash-dp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(220,182,136,.3); }
.dash-dp-hint { font-size: 12px; color: var(--text-secondary); }
.dash-dp-close { border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--color-navy); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 2px 0; }


/* Health card scanner: hands-free capture (intake.js scanAuto*). The count sits over the
   card, the frame corners turn orange while it runs. */
.as-scan-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 3; }
.as-scan-count[hidden] { display: none; }
.as-scan-count-n { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 999px; background: rgba(16,41,60,0.55); border: 2px solid rgba(255,255,255,0.85); color: #fff; font-size: 52px; font-weight: 500; line-height: 1; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); text-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.as-scan-counting .as-scan-frame-corner { border-color: var(--orange, #ff884c); }
.as-scan-counting .as-scan-instruction-bottom p { color: #fff; font-weight: 500; }
.as-scan-instruction-bottom p { transition: color .2s ease; }


/* Account Setup: a problem has to LOOK like a problem (2026-09-21). The message beside a field
   was 12px of rust-coloured text; the field itself did not change at all. */
.account-setup-error:not(:empty) {
	display: flex; align-items: flex-start; gap: 6px;
	margin-top: 8px; font-size: 14px; font-weight: 500; line-height: 1.4; color: #A33A28;
}
.account-setup-error:not(:empty)::before {
	content: ""; flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px;
	background: #A33A28;
	-webkit-mask: url(/dashboard/imgs/icons/circle-alert.svg) center / 16px 16px no-repeat;
	mask: url(/dashboard/imgs/icons/circle-alert.svg) center / 16px 16px no-repeat;
}
/* the field wears it too: no script state, the message being there is the state */
.account-setup-field:has(> .account-setup-error:not(:empty)) .account-setup-input,
.account-setup-field:has(> .account-setup-error:not(:empty)) .account-setup-address-card {
	border-color: #C45C4A; box-shadow: 0 0 0 3px rgba(196,92,74,0.16);
}
.account-setup-field:has(> .account-setup-error:not(:empty)) .account-setup-label { color: #A33A28; }
/* the first one the page scrolls to pulses ONCE so the eye lands on it (it pulsed twice at
   first; Pavel, 2026-09-21: "take away the 2nd blink, too much") */
.as-field-flash { animation: as-field-flash .9s ease-out 1; border-radius: 14px; }
@keyframes as-field-flash {
	0%   { box-shadow: 0 0 0 0 rgba(196,92,74,0); }
	35%  { box-shadow: 0 0 0 10px rgba(196,92,74,0.18); }
	100% { box-shadow: 0 0 0 0 rgba(196,92,74,0); }
}
/* beside the Save button */
.account-setup-form-error { font-size: 15px; font-weight: 500; color: #8A2E1F; background: #F9E3DC; border-color: #E5A999; }
/* and one that is always in view, whatever the scroll position */
.as-toast {
	position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 200;
	display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px));
	padding: 14px 20px; border-radius: 14px; background: #8A2E1F; color: #fff;
	font-size: 15px; font-weight: 500; line-height: 1.4;
	box-shadow: 0 18px 40px -12px rgba(60,16,8,0.55);
	animation: as-toast-in .25s ease-out 1;
}
.as-toast[hidden] { display: none; }
.as-toast-ico { width: 20px; height: 20px; flex: 0 0 20px; filter: brightness(0) invert(1); }
@keyframes as-toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 767px) { .as-toast { bottom: 92px; } } /* clear of the bottom bar */
@media (prefers-reduced-motion: reduce) { .as-field-flash, .as-toast { animation: none; } }


/* Account Setup, after a save: a small "Saved" beside the button and the way back (accountSetupAfterSaveHTML). */
.as-saved-mark { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--success, #4A7C59); animation: as-saved-in .3s ease-out 1; }
.as-saved-mark[hidden], .as-back-link[hidden] { display: none; }
.as-saved-mark-ico { width: 16px; height: 16px; filter: invert(43%) sepia(16%) saturate(1046%) hue-rotate(86deg) brightness(93%) contrast(88%); }
.as-back-link { font-size: 15px; font-weight: 500; color: var(--color-navy); text-decoration: underline; text-underline-offset: 3px; }
.account-setup-submit-idle, .account-setup-submit:disabled.account-setup-submit-idle { opacity: .45; cursor: default; }
@keyframes as-saved-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .as-saved-mark { animation: none; } }

.as-scan-result-warn { color: #A33A28; font-weight: 500; }


/* Account Setup: which fields are required (QA pass + Pavel, 2026-09-21: "a tiny star"). The star
   follows the markup: any field whose input carries `required` gets it, no list to maintain. */
.account-setup-field:has(> [required]) > .account-setup-label::after,
.account-setup-label-req::after { content: "*"; margin-left: 3px; color: var(--orange-600, #CA4E00); font-weight: 600; }
.as-req-note { float: right; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; color: var(--text-secondary); }
.as-req-star { color: var(--orange-600, #CA4E00); font-weight: 600; }
/* the could-not-load state */
.as-loadfail .as-subtitle { margin-bottom: 8px; }
.as-loadfail-btn { display: inline-block; width: auto; min-width: 150px; margin: 0; text-align: center; text-decoration: none; box-sizing: border-box; }


/* A home tile with a scene (homeAskCardHTML, imgs/scenes/): words left, illustration right. */
.dash-priority-feature {
	align-items: center; gap: 12px; padding: 0 0 0 26px; overflow: hidden; border-radius: 18px;
	/* brand Sand, not the pinkish peach of the first version (Pavel, 2026-09-21: "doesn't match the rest of
	   the company colours"): Cream page, Sand tile, Navy and Orange in the scene */
	background: var(--color-cream, #F4F1E2);   /* Circle Cream; the sand moved into the clouds (Pavel, 2026-09-29) */
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	border: 1.5px solid var(--cream-400, #B7B4A8);   /* darker cream stroke on the cream tile (Pavel, 2026-09-29) */
}
.dash-priority-feature:hover { background: var(--color-cream, #F4F1E2); }
.dash-priority-feature .dash-priority-body { flex: 1 1 auto; min-width: 0; padding: 22px 0; }
.dash-priority-feature .dash-priority-label { font-size: 19px; font-weight: 600; letter-spacing: -0.005em; }
.dash-priority-feature .dash-priority-desc { font-size: 15px; margin-top: 6px; max-width: 30rem; }
.dash-priority-feature-cta { display: inline-block; margin-top: 14px; padding: 9px 18px; border-radius: 999px; background: var(--color-navy); color: #fff; font-size: 14.5px; font-weight: 500; transition: background .15s ease; }
.dash-priority-feature:hover .dash-priority-feature-cta { background: var(--navy-800, #1B3B53); }
.dash-priority-scene { flex: 0 0 auto; width: 46%; max-width: 340px; height: auto; display: block; align-self: flex-end; }
/* the road must not start with a hard edge in the middle of the tile: it fades in from the left */
@media (min-width: 641px) {
	.dash-priority-scene { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%); mask-image: linear-gradient(to right, transparent 0, #000 22%); }
}
@media (max-width: 640px) {
	.dash-priority-feature { flex-direction: column-reverse; align-items: stretch; padding: 0; gap: 0; }
	.dash-priority-feature .dash-priority-body { padding: 16px 20px 22px; }
	.dash-priority-scene { width: 100%; max-width: none; }
}


/* Pharmacy choice: two choices you can see at once (2026-09-21). */
.dash-pharm-choose { margin: 4px 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
/* the chosen card is marked by settings.js with .dash-settings-radio-option-on (see the radio-option rules
   above); here it only gets a soft ring so the choice is unmistakable on a phone */
.dash-pharm-opt.dash-settings-radio-option-on { box-shadow: 0 0 0 3px rgba(238,109,33,0.14); }
.dash-pharm-head input[type="radio"] { width: 22px; height: 22px; margin-top: 1px; }
.dash-pharm-more { margin: 10px 0 0 34px; }
.dash-pharm-more > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 500; color: var(--color-navy); text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; }
.dash-pharm-more > summary::-webkit-details-marker { display: none; }
.dash-pharm-more > summary::after { content: ""; width: 12px; height: 12px; background: url(/dashboard/imgs/icons/chevron-down.svg) center / 12px 12px no-repeat; transition: transform .15s ease; }
.dash-pharm-more[open] > summary::after { transform: rotate(180deg); }
.dash-pharm-more .dash-pharm-bens { margin-top: 8px; }
@media (max-width: 640px) { .dash-pharm-more { margin-left: 0; } .dash-pharm-opt { padding: 16px; } }

.dash-pharmacy-dropdown-note { padding: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }


/* Pharmacy: what the chosen option needs, as steps BELOW the two choices (2026-09-21). */
.dash-pharm-steps { margin-top: 6px; }
.dash-pharm-step { margin: 22px 0 10px; padding-top: 18px; border-top: 1px solid rgba(220,182,136,0.35); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.dash-pharm-steps .dash-pharm-delivery { margin: 0; }
.dash-pharm-days { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dash-pharm-daychip { position: relative; display: inline-flex; cursor: pointer; }
.dash-pharm-daychip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.dash-pharm-daychip span { display: inline-block; padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(16,41,60,0.2); background: var(--surface); font-size: 14.5px; line-height: 1.2; }
.dash-pharm-daychip input:checked + span { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.dash-pharm-daychip input:focus-visible + span { outline: 2px solid var(--orange-dark); outline-offset: 2px; }
.dash-pharm-steps .dash-pharm-terms-toggle { margin: 0 0 10px; }
.dash-pharm-steps .dash-settings-consent-box { margin: 0 0 14px; }


/* Pharmacy, phone pass (Pavel's screenshots, 2026-09-21). */
/* "Recommended" sat in the title and wrapped under it; it is a tag on the card's top edge now */
.dash-pharm-opt-rec { position: relative; }
.dash-pharm-rec { position: absolute; top: -11px; right: 16px; padding: 3px 10px; border-radius: 999px; background: #E3EEE6; border: 1px solid #BFD6C6; color: #3E6B4B; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; line-height: 1.3; }
.dash-pharm-choose { margin-bottom: 16px; }
/* "What's included" lines up with the text column, under the title, at every width */
.dash-pharm-more, .dash-pharm-more .dash-pharm-bens { margin-left: 0; }
.dash-pharm-more { margin: 8px 0 0 34px; }
@media (max-width: 640px) { .dash-pharm-more { margin-left: 34px; } .dash-pharm-more[open] { margin-left: 0; } .dash-pharm-more[open] > summary { margin-left: 34px; } }
/* five days, one row, a tick on the chosen ones */
.dash-pharm-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.dash-pharm-daychip { display: block; }
.dash-pharm-daychip span { display: block; text-align: center; padding: 10px 0; font-size: 14px; color: var(--text-secondary); }
.dash-pharm-daychip input:checked + span::before { content: "\2713\00a0"; font-weight: 600; }
.dash-pharm-lbl-hint { margin-left: 6px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12.5px; color: var(--text-secondary); }
/* notes: the bold part is the message */
.dash-pharm-delivery-warn b, .dash-pharm-delivery-note b { font-weight: 600; color: var(--font); }
.dash-pharm-more > summary { padding: 4px 0 0; }
.dash-pharm-more:not([open]) { margin-bottom: -2px; }


/* "What's included": a button, not <details> (which opened to nothing on an iPhone). */
.dash-pharm-more-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0 34px; padding: 6px 0; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--color-navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dash-pharm-more-toggle::after { content: ""; width: 12px; height: 12px; background: url(/dashboard/imgs/icons/chevron-down.svg) center / 12px 12px no-repeat; transition: transform .15s ease; }
.dash-pharm-more-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
div.dash-pharm-more { margin: 4px 0 0; }
div.dash-pharm-more .dash-pharm-bens, div.dash-pharm-more .dash-pharm-closer { margin-left: 0; }

/* The consent: in view from the start, in a box that scrolls, set like a document. */
.dash-pharm-consent { max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(16,41,60,0.18); background: #fff; font-size: 14px; line-height: 1.6; color: var(--font); box-shadow: inset 0 -14px 14px -14px rgba(16,41,60,0.18); }
.dash-pharm-consent p { margin: 0 0 10px; }
.dash-pharm-consent p:first-child { font-weight: 600; }
.dash-pharm-consent p:last-child { margin-bottom: 0; }
.dash-pharm-consent ul { margin: 0 0 12px; padding-left: 20px; list-style: disc; }
.dash-pharm-consent li { margin: 0 0 6px; }
.dash-pharm-steps .dash-settings-checkbox-row { margin-top: 14px; font-size: 15px; line-height: 1.5; }

/* Delivery day chips: the same quiet "chosen" look as the cards above them (pale orange ground, orange
   edge, dark text) instead of solid navy (Pavel, 2026-09-21: "far too aggressive, while all other
   selections above are not this colourful"). */
.dash-pharm-daychip span { border-color: var(--cream-200, #E3E1DB); }
.dash-pharm-daychip input:checked + span { background: var(--orange-050, #FFF2E5); border-color: var(--orange, #FF884C); color: var(--font); font-weight: 500; }
.dash-pharm-daychip input:checked + span::before { color: var(--orange-600, #CA4E00); }


/* Pharmacy, fourth pass (2026-09-21). */
/* Recommended sits beside the title where there is room, above it on a phone; never on the far edge */
.dash-pharm-titlerow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.dash-pharm-titlerow .dash-pharm-title { display: inline; }
.dash-pharm-rec { position: static; top: auto; right: auto; }
@media (max-width: 640px) { .dash-pharm-titlerow { flex-direction: column; align-items: flex-start; gap: 4px; } .dash-pharm-titlerow .dash-pharm-rec { order: -1; } }
/* closed points right, open points down: nobody reads a right arrow as "already open" */
.dash-pharm-more-toggle::after { transform: rotate(-90deg); }
.dash-pharm-more-toggle[aria-expanded="true"]::after { transform: rotate(0deg); }
/* the delivery note is information, not an alarm */
.dash-pharm-delivery-note { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--cream-100, #F4F1E2); border: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
/* near home + search */
.dash-pharm-find { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.dash-pharm-near { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--color-navy); background: var(--color-navy); color: #fff; font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.dash-pharm-near img { width: 15px; height: 15px; filter: brightness(0) invert(1); }
.dash-pharm-near-busy { opacity: .6; cursor: default; }
.dash-pharm-find-or { font-size: 13.5px; color: var(--text-secondary); }

/* "What's included": the option label stretches an invisible hit area over the WHOLE card
   (.dash-settings-radio-header::before, inset:0) so a tap anywhere picks the option. Only
   .dash-settings-radio-body was lifted above it; the toggle and the benefits box were not, so a tap on
   the words selected the card instead of opening the list (Pavel: "clicking on it, while it's blue and
   underlined, doesn't do anything"). Same cause behind the <details> that would not collapse. */
.dash-pharm-more-toggle, div.dash-pharm-more { position: relative; z-index: 1; }
div.dash-pharm-more { cursor: auto; }

/* The benefits read as an offer, not an alert: no tinted, outlined box (it turned a darker pink on
   the selected card). A plain list, quiet round icons. */
.dash-pharm-bens { background: transparent; border: 0; padding: 6px 0 0; margin-top: 6px; }
.dash-pharm-ben { margin-bottom: 16px; }
.dash-pharm-ben-ic { width: 34px; height: 34px; background: var(--surface, #FFFEF6); box-shadow: 0 0 0 1px rgba(220,182,136,0.55); }
.dash-pharm-ben-icimg { filter: brightness(0) saturate(100%) invert(13%) sepia(24%) saturate(1600%) hue-rotate(169deg) brightness(95%) contrast(95%); } /* Circle Navy */
.dash-pharm-ben-tx b { font-size: 15px; font-weight: 600; }
.dash-pharm-ben-tx p { font-size: 14px; line-height: 1.5; }
div.dash-pharm-more .dash-pharm-closer { margin: 4px 0 0; font-size: 14px; color: var(--font); font-weight: 500; }

/* ── Pharmacy finder with a map (Pavel, 2026-09-21: "we need a map search here… near home is still too
   blue… I couldn't click out… the selected pharmacy should also show a map with location marker,
   definitely an address"). The results sit IN the page under the map (nothing floats, so there is
   nothing to click out of); rows and pins share a number; the chosen pharmacy is a place card. ── */
.dash-pharm-near { border: 1px solid rgba(16,41,60,.22); background: var(--surface); color: var(--font); }
.dash-pharm-near:hover { background: var(--orange-050, #FFF3EA); border-color: var(--orange-400); }
.dash-pharm-near img { filter: none; opacity: .8; }
.dash-pharm-found { margin: 10px 0 0; font-size: 13px; color: var(--text-secondary); }
.dash-pharm-found[hidden] { display: none; }
.dash-pharm-mapwrap { position: relative; margin: 10px 0 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(220,182,136,.4); }
.dash-pharm-mapwrap[hidden] { display: none; }
.dash-pharm-map { height: 280px; background: #e9e6da; }
@media (max-width: 700px) { .dash-pharm-map { height: 230px; } }
.dash-pharm-pin { background: var(--color-navy); }
.dash-pharm-pop { display: flex; flex-direction: column; gap: 3px; min-width: 170px; font-family: inherit; }
.dash-pharm-pop b { font-size: 14px; font-weight: 600; color: var(--font); }
.dash-pharm-pop span { font-size: 12.5px; color: var(--text-secondary); }
.dash-pharm-pop button { margin-top: 7px; padding: 8px 12px; border-radius: 999px; border: 0; background: var(--orange-400); color: #1a1a1a; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.dash-pharmacy-dropdown { position: static; margin-top: 10px; max-height: 320px; box-shadow: none; border-radius: 14px; border-color: rgba(220,182,136,.4); -webkit-overflow-scrolling: touch; }
.dash-pharmacy-dropdown-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; }
.dash-pharm-num { flex: 0 0 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--color-navy); color: #fff; font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.dash-pharm-num-off { background: transparent; border: 1.5px dashed rgba(16,41,60,.25); }
.dash-pharm-rowtx { flex: 1 1 auto; min-width: 0; }
.dash-pharm-km { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--font); white-space: nowrap; }
.dash-pharm-row-on { background: var(--orange-050, #FFF3EA); box-shadow: inset 3px 0 0 var(--orange-400); }
.dash-pharm-place { display: flex; align-items: stretch; gap: 14px; margin: 6px 0 14px; padding: 14px; border-radius: 14px; border: 1px solid var(--orange-400); background: var(--orange-050, #FFF3EA); }
.dash-pharmacy-selected-card.dash-pharm-place { display: none; align-items: stretch; justify-content: flex-start; margin-top: 4px; }
.dash-pharm-place-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dash-pharm-place-tx b { font-size: 16px; font-weight: 600; color: var(--font); line-height: 1.3; }
.dash-pharm-place-tx span { font-size: 14px; line-height: 1.45; color: var(--text-secondary); }
.dash-pharm-place-tx span:empty { display: none; }
.dash-pharm-place-tx .dash-pharmacy-selected-change { align-self: flex-start; margin-top: 8px; padding: 0; }
.dash-pharm-place-map { flex: 0 0 46%; min-height: 140px; border-radius: 10px; overflow: hidden; background: #e9e6da; }
.dash-pharm-place-map[hidden] { display: none; }
@media (max-width: 640px) {
	.dash-pharm-place { flex-direction: column; }
	.dash-pharm-place-map { flex: 0 0 auto; height: 150px; }
}
.dash-pharm-near { white-space: nowrap; }
.dash-pharm-find { flex-wrap: wrap; }

/* ── Pharmacy map, second pass (Pavel, 2026-09-21: "the map is ugly… apply a filter or something over
   the top… the blue markers are meh"). The street map is toned to the brand's sand and cream (a CSS
   filter on the tile layer only, so pins and controls keep their colours); pins are Circle-orange
   drops with the row's number, and the one in focus turns navy and grows. ── */
.dash-pharm-map .leaflet-tile-pane, .dash-pharm-place-map .leaflet-tile-pane { filter: grayscale(.75) sepia(.3) brightness(1.05) contrast(.9); }
.dash-pharm-map.leaflet-container, .dash-pharm-place-map.leaflet-container { background: #F1E9D8; font-family: inherit; }
.dash-pharm-marker { background: none; border: 0; }
.dash-pharm-pin { position: absolute; left: 1px; top: 4px; /* tip lands on the marker's anchor, the bottom centre of its 30x38 box */ width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); transform-origin: 50% 50%; background: var(--orange-400); border: 2px solid #fff; box-shadow: 0 3px 8px rgba(16,41,60,.35); display: flex; align-items: center; justify-content: center; transition: transform .15s ease, background .15s ease; }
.dash-pharm-pin b { transform: rotate(45deg); font-size: 12px; font-weight: 700; color: #1a1a1a; line-height: 1; }
.dash-pharm-pin-dot b { width: 9px; height: 9px; border-radius: 50%; background: #fff; }
/* The tip must not move when a pin grows: it IS the location. The pin turns about its centre (the tip sits 19.8px
   below it), so growing by s lowers the tip by (s-1)*19.8px and the translate lifts it back. An earlier version
   changed transform-origin to the corner instead, which swung the whole pin 14px sideways: across the street. */
.dash-pharm-marker-on .dash-pharm-pin { background: var(--color-navy); transform: translateY(-5px) rotate(-45deg) scale(1.25); }
.dash-pharm-marker-on .dash-pharm-pin b { color: #fff; }
.dash-pharm-home { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--color-navy); border: 2px solid #fff; box-shadow: 0 0 0 6px rgba(16,41,60,.14), 0 3px 8px rgba(16,41,60,.35); }
.dash-pharm-home img { width: 15px; height: 15px; filter: brightness(0) invert(1); }
.dash-pharm-me { display: block; width: 16px; height: 16px; margin: 7px; border-radius: 50%; background: var(--color-navy); border: 3px solid #fff; box-shadow: 0 0 0 7px rgba(255,136,76,.28), 0 2px 6px rgba(0,0,0,.3); box-sizing: content-box; margin: 4px; }
.dash-pharm-num { background: var(--orange-400); color: #1a1a1a; }
.dash-pharm-popwrap .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 10px 28px -10px rgba(16,41,60,.45); }
.dash-pharm-popwrap .leaflet-popup-content { margin: 12px 14px; }
.dash-pharm-map .leaflet-bar { border: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px -4px rgba(16,41,60,.35); }
.dash-pharm-map .leaflet-bar a { width: 34px; height: 34px; line-height: 34px; color: var(--color-navy); border-bottom-color: rgba(220,182,136,.4); }
.dash-pharm-map .leaflet-control-attribution, .dash-pharm-place-map .leaflet-control-attribution { background: rgba(255,254,246,.8); font-size: 10px; border-radius: 8px 0 0 0; }
.dash-pharm-map { height: 320px; }
@media (max-width: 700px) { .dash-pharm-map { height: 260px; } }
.dash-pharm-marker-on.dash-pharm-marker-hover .dash-pharm-pin { transform: translateY(-5px) rotate(-45deg) scale(1.25); }
.dash-pharm-marker-hover .dash-pharm-pin { transform: translateY(-3px) rotate(-45deg) scale(1.14); box-shadow: 0 0 0 4px rgba(255,136,76,.28), 0 4px 10px rgba(16,41,60,.4); }

/* Pin pop-up, second pass (Pavel, 2026-09-21: "this could look better"): a small place card in the app's own
   type: name, the tidy address, "1.2 km away · phone", and a compact navy button instead of a wide orange slab. */
.dash-pharm-popwrap .leaflet-popup-content-wrapper { border-radius: 16px; border: 1px solid rgba(220,182,136,.45); background: var(--surface, #FFFEF6); box-shadow: 0 14px 32px -12px rgba(16,41,60,.45); }
.dash-pharm-popwrap .leaflet-popup-tip { background: var(--surface, #FFFEF6); box-shadow: none; }
.dash-pharm-popwrap .leaflet-popup-content { margin: 14px 16px; width: auto !important; min-width: 200px; max-width: 260px; }
.dash-pharm-pop { gap: 2px; }
.dash-pharm-pop b { font-size: 15px; line-height: 1.3; }
.dash-pharm-pop span { font-size: 13px; line-height: 1.45; }
.dash-pharm-pop .dash-pharm-pop-meta { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--font); }
.dash-pharm-pop button { align-self: flex-start; margin-top: 10px; padding: 8px 18px; background: var(--color-navy); color: #fff; font-size: 13.5px; font-weight: 500; }
.dash-pharm-pop button:hover { background: #0b1f2e; }
/* One line BETWEEN rows, never under the last one: a row's own bottom line sat on the list's rounded border as a
   double line (Pavel, 2026-09-21). */
.dash-pharmacy-dropdown .dash-pharmacy-dropdown-item { border-bottom: 0; }
.dash-pharmacy-dropdown .dash-pharmacy-dropdown-item + .dash-pharmacy-dropdown-item { border-top: 1px solid rgba(0,0,0,.06); }
/* Two moments left once Account Setup is done (the finished card leaves the row, 2026-09-21). */
@media (min-width: 701px) { /* on a phone the row is one column, like the three-card version (Pavel, 2026-09-21: "too narrow") */
	.dash-home-moments-2 { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 760px; margin-left: auto; margin-right: auto; }
	.dash-home-moments-2::before { left: 25%; right: 25%; }
}
/* Program page: the quiz button lives in the "Is this for you?" card, under the chips (Pavel, 2026-09-21). */
.dash-pintro-you .pathway-checkout-btn.dash-pintro-btn { display: inline-flex; width: auto; margin-top: 20px; } /* .pathway-checkout-btn (block, 100%) is declared later than .dash-pintro-btn and won on its own */

/* Program price card: the term switch is a segmented control, on the LEFT with the price, right above it, and
   says Monthly / Annual (Pavel, 2026-09-21: month/year sat on the right while the price sat on the left, too
   much space above the price, "mon" is not the lingo). */
.pathway-frequency-toggle { justify-content: flex-start; margin: 0 0 6px; gap: 0; padding: 3px; border-radius: 999px; background: var(--cream-100, #F4F1E2); width: max-content; }
.pathway-freq-btn { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; text-transform: none; color: var(--text-secondary); }
.pathway-freq-btn.pathway-freq-active { background: var(--surface); color: var(--font); font-weight: 600; box-shadow: 0 1px 3px rgba(16,41,60,.12); }
.pathway-freq-divider { display: none; }
.pathway-choice-pay .pathway-pricing-col { gap: 4px; }

/* Checkout, 2026-09-21 (Pavel): compact stepper on one line, a tick for a finished step; the add-on title on
   its own line with the price under it; the payment method as one plain sentence. */
.pathway-checkout-steps { gap: 0; margin: 0 0 24px; }
.pathway-checkout-step { flex-direction: row; gap: 8px; }
.pathway-checkout-step-num { width: 24px; height: 24px; font-size: 12px; border-width: 1.5px; }
.pathway-checkout-step-label { font-size: 13.5px; }
.pathway-checkout-step.completed .pathway-checkout-step-num { color: transparent; background: var(--surface) url("/dashboard/imgs/icons/nav-check-bold.svg") center / 13px 13px no-repeat; border-color: var(--color-navy); }
.pathway-checkout-step.completed .pathway-checkout-step-label { color: var(--font); }
.pathway-checkout-step-line { min-width: 20px; max-width: 36px; margin: 0 12px; }
.pathway-upsell-t { margin: 0 0 4px; }
p.pathway-upsell-price { margin: 0 0 12px; font-size: 20px; font-weight: 500; color: var(--font); line-height: 1.2; text-align: left; }
p.pathway-upsell-price small { display: inline; font-size: 13px; font-weight: 400; color: var(--text-secondary); margin-left: 6px; }
p.pathway-paymethod { display: block; margin: 2px 0 14px; padding: 0; border: 0; background: none; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
p.pathway-paymethod b { font-weight: 600; color: var(--font); }
/* Accepted cards + who secures the payment (checkout review, 2026-09-21) */
.pathway-paysecure { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -6px 0 16px; }
.pathway-paycard { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 28px; border-radius: 6px; border: 1px solid rgba(220,182,136,.5); background: #fff; }
.pathway-paycard img { width: 28px; height: 16px; }
.pathway-paycard-visa img { filter: invert(14%) sepia(30%) saturate(1200%) hue-rotate(180deg) brightness(90%); }
.pathway-paycard-mastercard img { width: 24px; filter: invert(45%) sepia(90%) saturate(2000%) hue-rotate(350deg); }
.pathway-paycard-americanexpress img { width: 24px; filter: invert(35%) sepia(60%) saturate(900%) hue-rotate(170deg); }
.pathway-paysecure-tx { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-size: 13px; color: var(--text-secondary); }
.pathway-paysecure-tx img { width: 14px; height: 14px; opacity: .7; }
/* Stepper circles, third pass (Pavel, 2026-09-21: too small, a grey border under the orange made them blurry):
   larger, no border on the coloured states, a clear ring only for steps still to come. */
.pathway-checkout-step-num { width: 30px; height: 30px; font-size: 13.5px; font-weight: 700; border: 1.5px solid rgba(16,41,60,.25); background: transparent; color: var(--text-secondary); }
.pathway-checkout-step.active .pathway-checkout-step-num { background: var(--orange-400); border-color: var(--orange-400); color: #1a1a1a; box-shadow: 0 0 0 4px rgba(255,136,76,.22); }
.pathway-checkout-step.completed .pathway-checkout-step-num { background: var(--color-navy) url("/dashboard/imgs/icons/nav-check-white.svg") center / 15px 15px no-repeat; border-color: var(--color-navy); color: transparent; }
.pathway-checkout-step-label { font-size: 14px; }
/* Quiz warning card: the continue control is a real button (Pavel, 2026-09-21: "doesn't look like a button"). */
.pathway-screen-continue-review { display: inline-block; padding: 12px 22px; border-radius: 999px; border: 0; background: var(--color-navy); color: #fff; font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.pathway-screen-continue-review:hover { background: #0b1f2e; color: #fff; }
/* Add-on step: Add and Skip sit 10px apart; the base button rule's 20px top margin was adding to the grid gap. */
.pathway-upsell-actions .pathway-checkout-btn { margin-top: 0; }
/* Journey timeline: the connector runs BEHIND the dots (it showed through the hollow ones, 2026-09-21).
   The list gets its own stacking context so the line's negative index cannot fall behind the card. */
.dash-journey-list { isolation: isolate; }
.dash-journey-list::before { z-index: 0; }
.dash-journey-stage { z-index: 1; }
/* Back to home, last thing on the post-payment page */
.pathway-checkout-receipt .pathway-receipt-back { margin-top: 18px; }
@media (min-width: 900px) { .pathway-checkout-receipt .pathway-receipt-back { grid-column: 1; margin-top: 0; } }
/* Intake tip ("Some answers are already filled in"): a quiet line, not an orange warning box (Pavel, 2026-09-21). */
.dash-intake-context-note { display: flex; align-items: flex-start; gap: 8px; padding: 0; background: none; border: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.dash-intake-context-note b { font-weight: 600; color: var(--font); }
.dash-intake-context-note img { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; opacity: .8; }
/* "To review" pill: white with a dark edge, not an orange wash that sinks into the cream (Pavel, 2026-09-21). */
.dash-intake-section-done.dash-intake-section-review { background: var(--surface, #FFFEF6); color: var(--font); border: 1px solid rgba(16,41,60,.35); font-weight: 600; }
/* Journey connector, drawn per stage BEHIND its own dot (the one long line kept showing through the hollow
   dots whatever the stacking, 2026-09-21). Each stage is its own stacking context (z-index 1 above); its line
   sits at z -1 inside it, under the dot, and stops at the first and last dot. */
.dash-journey-list::before { display: none; }
.dash-journey-stage::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: rgba(220,182,136,0.45); z-index: -1; }
.dash-journey-stage:first-child::before { top: 12px; }
.dash-journey-stage:last-child::before { bottom: auto; height: 22px; }
@media (min-width: 900px) { .dash-pathway-owned .dash-journey-stage:last-child::before { height: 26px; } }
.dash-journey-dot { background: var(--surface, #FFFEF6); }
.dash-journey-now .dash-journey-dot { background: #fff; }
/* Program timeline head: one line, no two-column grid, no explainer (Pavel, 2026-09-21: the title wrapped
   into a narrow column beside a sentence that lined up with nothing). */
@media (min-width: 900px) {
  .dash-pathway-owned .dash-journey-head { display: block; margin-bottom: 14px; }
  .dash-pathway-owned .dash-journey-head .pathway-choice-t { font-size: 28px; }
}
/* Home "In progress" stage tag: outlined like the CLINIC OPENS chip Pavel pointed to (2026-09-21: the orange
   wash had no edge and sank into the pink). Same family as .dash-home-chip-open. */
.dash-priority-stage { background: rgba(255,136,76,0.10); color: var(--orange-600); border: 1px solid var(--orange-600); border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; }
.dash-priority-status .dash-priority-icon { background: none; } /* the icon had an orange-050 square behind it for no reason (Pavel, 2026-09-21) */
/* Intake overview rail: the program timeline's dots (Pavel, 2026-09-21). Done = orange with a white tick;
   now = white, orange ring, soft halo, orange number; ahead = hollow sand ring, muted number; sand connector. */
.dash-intake-step-dot { width: 26px; height: 26px; border: 2px solid rgba(220,182,136,0.7); background: var(--surface, #FFFEF6); }
.dash-intake-step-dot.dash-intake-step-now { background: #fff; border: 3px solid var(--orange-400); box-shadow: 0 0 0 4px rgba(255,136,76,.18); }
.dash-intake-step-dot.dash-intake-step-now .dash-intake-step-num1 { color: #b5561f; font-size: 11.5px; }
.dash-intake-step-dot.dash-intake-step-complete { background: var(--orange-400); border-color: var(--orange-400); }
.dash-intake-step-num0 { color: var(--text-secondary); font-size: 11.5px; }
.dash-intake-step-line { background: rgba(220,182,136,0.45); }
.dash-intake-step-line-done { background: var(--orange-400); }
/* Section card CTA (Start / Continue / Review): a real pill button, not orange text (Pavel, 2026-09-21: easier
   to tap on a phone). The whole card is still the link; this is its visible handle. */
.dash-intake-section-cta { display: inline-block; margin-top: 14px; padding: 10px 20px; border-radius: 999px; background: var(--orange-400); color: #1a1a1a; font-size: 14.5px; font-weight: 500; }
.dash-intake-section-card:hover .dash-intake-section-cta { background: var(--orange-500, #EE6D21); }
/* Intake: nothing that is merely "carried over from the quiz" looks like a warning (Pavel, 2026-09-22:
   "warning signs everywhere"). The rail's review counts are plain grey text with the ordinary number circle;
   the prefill note under a question is a quiet line. Orange is kept for the CURRENT step only. */
.dash-intake-rail-review .dash-intake-rail-num { background: var(--cream-200, #ECE7D6); color: var(--font); }
.dash-intake-rail-review .dash-intake-rail-state { color: var(--text-secondary); }
.dash-intake-prefill-note { display: block; margin: -2px 0 14px; padding: 0; background: none; color: var(--text-secondary); font-size: 13px; font-weight: 400; }
/* Intake Next button carries the quiz's 3-2-1 ring while a single choice auto-advances (2026-09-22). */
.dash-intake-next { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.dash-intake-next .pathway-count-ring { stroke: #1a1a1a; }
/* Sections rail: the name's first line is centred on its 24px circle (the circle sat below the text once the
   state words were dropped, Pavel 2026-09-22); an empty state line takes no room. */
.dash-intake-rail-item { align-items: flex-start; }
.dash-intake-rail-name { display: block; line-height: 24px; }
.dash-intake-rail-state:empty { display: none; }
/* Intake with the sections rail: the rail spans three grid rows, and when it was taller than a short section
   (one question) the spare height was shared out to the kicker and header rows, so "Question 1 of 1" sat 40px
   lower than on other sections (Pavel, 2026-09-22). Only the question row may grow. */
@media (min-width: 900px) {
  .dash-intake-questions:has(.dash-intake-rail) { grid-template-rows: auto auto 1fr; align-content: start; }
}
/* Follow-up question context ("Because you answered Yes to …"), 2026-09-22 */
.dash-intake-question-ctx { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.dash-intake-question-ctx b { font-weight: 600; color: var(--font); }

/* "Your answers": a member's read-only intake summary (dash_intake_review.go, 2026-09-22) */
.dash-intake-review { display: block; max-width: 44rem; margin: 0 auto; }
.dash-intake-review-back { display: inline-block; margin-bottom: 14px; }
.dash-intake-review-sec { margin: 22px 0 0; padding: 18px 20px; border-radius: 14px; background: var(--surface); border: 1px solid rgba(220,182,136,.35); }
.dash-intake-review-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.dash-intake-review-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.dash-intake-review-change { font-size: 14px; font-weight: 500; color: var(--color-navy); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.dash-intake-review-list { margin: 0; }
.dash-intake-review-list dt { margin: 12px 0 2px; font-size: 13.5px; color: var(--text-secondary); }
.dash-intake-review-list dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--font); }
.dash-intake-review-list dd.dash-intake-review-none { color: var(--text-secondary); font-style: italic; }
.dash-intake-review-link { display: inline-block; margin-left: 14px; font-size: 14.5px; font-weight: 500; color: var(--color-navy); text-decoration: underline; text-underline-offset: 3px; }

/* ── Health intake fixes, 2026-09-24 (Pavel's walk-through) ─────────────────────────────── */
/* Two button looks only: off (until answered) and Circle Orange. Hover and "Complete section"
   no longer switch to the darker orange-500, which read as a third and fourth style. */
.dash-intake-next:not(.pathway-step-next),
.dash-intake-next:not(.pathway-step-next):hover:not(:disabled),
.dash-intake-complete-btn,
.dash-intake-complete-btn:hover:not(:disabled) {
  background: var(--orange-400);
  color: var(--brand-black, #1a1a1a);
  box-shadow: none;
  transform: none;
}
.dash-intake-complete-btn { font-size: 16px; padding: 14px 24px; }
.dash-intake-next:active:not(:disabled) { transform: scale(0.98); }
.dash-intake-next:disabled { opacity: 0.4; }

/* Select-all-that-apply ticks are rounded squares; round rings stay for one-answer questions. */
.dash-intake-option:has(input[type="checkbox"]) .dash-intake-check-circle,
.pathway-step .dash-intake-option:has(input[type="checkbox"]) .dash-intake-check-circle { border-radius: 6px; }

/* Height: feet and inches wide enough to read 9.5 */
.dash-intake-hw-field .dash-intake-ft { width: 76px; }
.dash-intake-hw-field .dash-intake-in { width: 96px; }

/* Add-a-list (food allergies, medications…): one row at the height of the other inputs,
   the severity picker drawn like them, and the "none" choice drawn like an answer row. */
.dash-intake-ma-row { align-items: stretch; }
.dash-intake-ma-input,
.dash-intake-ma-select {
  min-height: 48px;
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid rgba(220, 182, 136, 0.45);
  background-color: var(--surface);
}
.dash-intake-ma-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image: url('/dashboard/imgs/icons/chevron-down.svg');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
  cursor: pointer;
}
.dash-intake-ma-detail { max-width: 190px; }
.dash-intake-ma-add-btn {
  width: 48px;
  height: auto;
  min-height: 48px;
  align-self: stretch;
  background: var(--surface);
  border: 1px solid rgba(220, 182, 136, 0.45);
  color: var(--font);
}
.dash-intake-ma-add-btn:disabled { opacity: 0.45; }
.dash-intake-ma-none {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid rgba(220, 182, 136, 0.3);
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--font);
  text-align: left;
}
.dash-intake-ma-none:hover { border-color: var(--orange-300, #FFB791); color: var(--font); }
.dash-intake-ma-none.active {
  border-color: var(--orange);
  background: rgba(232, 126, 58, 0.08);
  color: var(--font);
  font-weight: 500;
}
@media (max-width: 600px) {
  .dash-intake-ma-row { flex-wrap: wrap; }
  .dash-intake-ma-field-wrap { flex-basis: 100%; }
  .dash-intake-ma-detail { max-width: none; flex: 1; }
}

/* ── Requisition viewer: every form in one scroll, close in the corner (2026-09-24) ── */
.dash-bw-modal-box { position: relative; }
.dash-bw-x { position: absolute; top: 10px; right: 10px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(220,182,136,.55); background: var(--surface); color: var(--font); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 12px -6px rgba(16,41,60,.35); }
.dash-bw-x:hover { border-color: var(--orange-300, #FFB791); }
#bw-modal .dash-bw-viewer-bar { padding: 14px 60px 12px 16px; flex-direction: column; align-items: flex-start; gap: 10px; }
.dash-bw-viewer-lead { margin: 0; font-size: 14.5px; color: var(--font); }
.dash-bw-viewer-lead b { font-weight: 600; }
.dash-bw-sheets { flex: 1; min-height: 0; overflow-y: auto; background: #e9e6da; padding: 18px 16px 28px; scroll-behavior: smooth; }
.dash-bw-sheets[hidden] { display: none; }
.dash-bw-sheet { max-width: 760px; margin: 0 auto 26px; }
.dash-bw-sheet-hd { position: sticky; top: -18px; z-index: 1; margin: 0 0 10px; padding: 10px 0 8px; background: #e9e6da; font-size: 15px; font-weight: 600; color: var(--font); display: flex; align-items: baseline; gap: 10px; }
.dash-bw-sheet-n { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-600, #CA4E00); }
.dash-bw-page { display: block; width: 100%; height: auto; margin: 0 0 12px; background: #fff; border-radius: 6px; box-shadow: 0 8px 22px -14px rgba(16,41,60,.55); }
.dash-bw-sheets-end { max-width: 760px; margin: 0 auto; padding: 14px 16px; border-radius: 12px; background: var(--surface); font-size: 14.5px; color: var(--font); text-align: center; }
.dash-bw-printframe { position: absolute; width: 0; height: 0; border: 0; visibility: hidden; }
@media (max-width: 700px) { .dash-bw-sheets { padding: 12px 10px 24px; } .dash-bw-sheet-hd { top: -12px; } #bw-modal .dash-bw-viewer-bar { padding-right: 56px; } }
/* preparation items: the instruction is the pill, the reason sits under it (2026-09-24) */
.dash-prep-item { display: block; margin: 0 0 12px; }
.dash-prep-h { display: inline-block; margin: 0 0 5px; padding: 4px 11px; border-radius: 10px; background: var(--color-navy); color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.dash-prep-d { margin: 0; }

/* printing the requisition viewer: only the stacked forms, one page per sheet */
@media print {
  body.dash-bw-printing * { visibility: hidden !important; }
  body.dash-bw-printing #bw-sheets, body.dash-bw-printing #bw-sheets * { visibility: visible !important; }
  body.dash-bw-printing #bw-sheets { position: absolute; left: 0; top: 0; width: 100%; height: auto; overflow: visible; background: #fff; padding: 0; }
  body.dash-bw-printing .dash-bw-sheet-hd, body.dash-bw-printing .dash-bw-sheets-end { display: none !important; }
  body.dash-bw-printing .dash-bw-page { box-shadow: none; border-radius: 0; margin: 0; page-break-after: always; break-after: page; }
  body.dash-bw-printing .dash-bw-modal-box { height: auto; overflow: visible; }
  body.dash-bw-printing .dash-bw-modal { position: static; background: none; padding: 0; }
}
/* the frame's own display:block beat [hidden] and took half the viewer's height (2026-09-24) */
.dash-bw-frame[hidden] { display: none !important; }
.dash-bw-sheet-prep .dash-bw-prep { padding: 18px 20px; border-radius: 10px; background: var(--surface); box-shadow: 0 8px 22px -14px rgba(16,41,60,.55); }
.dash-bw-sheet-prep .dash-prep-always { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.55; }
.dash-bw-sheet-prep .dash-prep-k { margin: 16px 0 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--text-secondary); }
@media print { body.dash-bw-printing .dash-bw-sheet-prep { page-break-before: always; } }
/* form headings scroll with their form: stuck, the band showed the page through above it and
   ran narrower than the scroll area (Pavel, 2026-09-24: "this looks weird"); the tabs above
   already say which form is in view */
.dash-bw-sheet-hd { position: static; background: none; padding: 4px 0 8px; }
@media (max-width: 700px) { .dash-bw-sheet-hd { position: static; } }
/* room between the "That's all 2 forms" note and the How to prepare section (2026-09-24) */
.dash-bw-sheets-end { margin-bottom: 36px; }
.dash-bw-sheet-prep { margin-top: 0; }
.dash-bw-sheet-prep .dash-bw-sheet-hd { padding-top: 0; margin-bottom: 12px; }
/* viewer header on a phone: one scrolling row of tabs, smaller actions (2026-09-25) */
@media (max-width: 700px) {
  #bw-modal .dash-bw-viewer-bar { gap: 8px; padding-top: 12px; padding-bottom: 10px; }
  #bw-modal .dash-bw-viewer-lead { font-size: 13.5px; }
  #bw-modal .dash-bw-viewer-tabs { flex-wrap: nowrap; overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #bw-modal .dash-bw-viewer-tabs::-webkit-scrollbar { display: none; }
  #bw-modal .dash-bw-tab { flex: 0 0 auto; white-space: nowrap; }
  #bw-modal .dash-bw-viewer-acts { flex-wrap: nowrap; overflow-x: auto; }
  #bw-modal .dash-bw-viewer-acts .dash-bw-act { flex: 0 0 auto; padding: 6px 12px; font-size: 13.5px; }
}
/* phone: 100vh ran under Safari's address bar and hid the viewer's top edge with its close
   button (Pavel, 2026-09-25: "you removed the close button"); size to the visible screen and pin
   the button to the visible corner */
@media (max-width: 700px) {
  .dash-bw-modal-box { height: 100vh; height: 100dvh; }
  .dash-bw-x { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 10px; z-index: 1310; }
}
/* maps stay under the sticky top bar: Leaflet's panes carry z-index 400-1000, which escaped the
   map box and painted over the header while scrolling (Pavel, 2026-09-27). A stacking context
   per map keeps them inside. */
.dash-bw-map, .dash-pharm-map, .dash-pharm-mapwrap { position: relative; z-index: 0; isolation: isolate; }

/* ── Foundations moves into History (dash_foundations_done.go, 2026-09-27) ── */
.fdone-overlay { position: fixed; inset: 0; z-index: 1400; background: rgba(16,41,60,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.fdone-overlay[hidden] { display: none; }
.fdone { width: min(440px, 100%); background: var(--surface); border-radius: 20px; padding: 26px 26px 20px; box-shadow: 0 30px 60px -30px rgba(16,41,60,.7); text-align: center; }
.fdone-stage { position: relative; height: 150px; margin: 0 0 16px; }
.fdone-folder { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); width: 120px; height: 104px; border-radius: 16px; background: var(--orange-050, #FFF2E5); border: 1px solid rgba(220,182,136,.55); display: grid; place-items: center; align-content: center; gap: 6px; opacity: .35; animation: fdoneFolder 2.2s ease .2s forwards; }
.fdone-folder img { width: 34px; height: 34px; }
.fdone-folder span { font-size: 13px; font-weight: 600; color: var(--rec-navy, #10293C); }
.fdone-card { position: absolute; left: 50%; top: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: #fff; box-shadow: 0 10px 24px -12px rgba(16,41,60,.55); white-space: nowrap; font-size: 14.5px; font-weight: 600; color: var(--font); transform: translate(-50%, 0) scale(1); animation: fdoneCard 2.2s cubic-bezier(.6,0,.3,1) .2s forwards; }
.fdone-card-ico { width: 18px; height: 18px; }
.fdone-card-tick { width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: var(--color-orange); filter: none; }
@keyframes fdoneCard {
  0%   { transform: translate(-50%, -34px) scale(1); opacity: 1; }
  35%  { transform: translate(-50%, -34px) scale(1); opacity: 1; }
  80%  { transform: translate(-50%, 10px) scale(.45); opacity: .9; }
  100% { transform: translate(-50%, 16px) scale(.35); opacity: 0; }
}
@keyframes fdoneFolder {
  0%, 60% { opacity: .35; transform: translateX(-50%) scale(1); }
  82%     { opacity: 1; transform: translateX(-50%) scale(1.08); }
  100%    { opacity: 1; transform: translateX(-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .fdone-card { animation: none; opacity: 0; }
  .fdone-folder { animation: none; opacity: 1; }
}
.fdone-title { margin: 4px 0 8px; font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--font); }
.fdone-desc { margin: 0 0 20px; font-size: 15px; line-height: 1.55; color: var(--font); }
.fdone-acts { display: grid; gap: 10px; }
.fdone-primary { display: block; width: 100%; }
.fdone-later { background: none; border: 0; font: inherit; font-size: 14.5px; color: var(--text-secondary); text-decoration: underline; cursor: pointer; padding: 6px; }

/* ── October release (dash_home_release.go, preview=0 cohort, 2026-09-27) ── */
.rel { margin: 44px 0 10px; padding: 0 var(--home-pad, 64px); } /* same inset as the hero and action card (QA 2026-09-27) */
.rel-hd { max-width: 640px; margin: 0 0 22px; }
.rel-k { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-600, #CA4E00); }
.rel-k-light { color: #DCB688; }
.rel-h2 { margin: 0 0 10px; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.12; font-weight: 600; letter-spacing: -.015em; color: var(--font, #292626); }
.rel-lede { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--text-secondary, #6B6560); }
.rel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rel-card { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 176px; padding: 18px 18px 16px; border-radius: 18px; background: var(--surface, #FFFEF6); border: 1px solid rgba(220,182,136,.4); text-decoration: none; color: var(--font, #292626); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.rel-card:hover { transform: translateY(-2px); border-color: var(--orange-300, #FFB791); box-shadow: 0 16px 30px -22px rgba(16,41,60,.55); }
.rel-card-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--orange-050, #FFF2E5); display: grid; place-items: center; margin-bottom: 6px; }
.rel-card-ico img { width: 22px; height: 22px; }
.rel-card-t { font-size: 16px; font-weight: 600; line-height: 1.25; }
.rel-card-d { font-size: 14px; line-height: 1.5; color: var(--text-secondary, #6B6560); flex: 1; }
.rel-card-go { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--color-navy, #10293C); }
.rel-card-go::after { content: " \2192"; }
.rel-chip { position: absolute; top: 16px; right: 16px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--orange-400, #FF884C); color: var(--color-font, #292626); }
.rel-chip-done { background: #E4EFE6; color: #2E6B45; }
.rel-chip-soon { position: static; align-self: flex-start; background: rgba(16,41,60,.08); color: var(--color-navy, #10293C); margin-bottom: 6px; }
.rel-launch { margin: 28px 0 0; padding: 34px 36px; border-radius: 26px; background: var(--color-navy, #10293C); color: #F4F1E2; display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: center; overflow: hidden; }
.rel-launch-h { margin: 0 0 16px; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.15; font-weight: 600; color: #fff; }
.rel-launch-list { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 10px; }
.rel-launch-list li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.5; color: rgba(244,241,226,.88); }
.rel-launch-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--orange-400, #FF884C); }
.rel-launch-list b { color: #fff; font-weight: 600; }
.rel-stores { display: flex; flex-wrap: wrap; gap: 8px; }
.rel-store { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(244,241,226,.35); font-size: 13.5px; font-weight: 600; color: #fff; }
.rel-store-date { background: var(--orange-400, #FF884C); border-color: var(--orange-400, #FF884C); color: var(--color-font, #292626); }
.rel-phone { justify-self: center; width: 190px; height: 380px; border-radius: 36px; background: #0b1d2b; border: 8px solid #1f3a4f; box-shadow: 0 40px 70px -30px rgba(0,0,0,.6); position: relative; animation: relPhoneIn 1.1s cubic-bezier(.2,.8,.2,1) .15s both; }
.rel-phone::before { content: ""; position: absolute; top: 10px; left: 50%; width: 60px; height: 16px; margin-left: -30px; border-radius: 999px; background: #0b1d2b; z-index: 1; }
.rel-phone-screen { position: absolute; inset: 0; border-radius: 28px; background: #F4F1E2; display: flex; flex-direction: column; align-items: stretch; padding: 58px 18px 20px; gap: 12px; overflow: hidden; }
.rel-phone-mark { width: 44px; height: 44px; align-self: center; margin-bottom: 10px; }
.rel-phone-row { display: block; height: 42px; border-radius: 12px; background: #FFFEF6; border: 1px solid rgba(220,182,136,.45); }
.rel-phone-row-1 { background: var(--orange-050, #FFF2E5); }
.rel-phone-row-3 { width: 70%; }
.rel-phone-btn { display: block; margin-top: auto; height: 36px; border-radius: 999px; background: var(--orange-400, #FF884C); }
@keyframes relPhoneIn { from { opacity: 0; transform: translateY(36px) rotate(-4deg); } to { opacity: 1; transform: translateY(0) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .rel-phone { animation: none; transform: rotate(-4deg); } }
.rel-next { margin: 28px 0 0; }
.rel-next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rel-next-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 18px; border: 1px dashed rgba(16,41,60,.22); color: var(--font, #292626); }
/* Next-up cards: icon on the left, "Coming soon" inline after the title (Pavel, 2026-09-29) */
.rel-next-card:has(> .rel-card-ico) { flex-direction: row; align-items: flex-start; gap: 12px; }
.rel-next-card > .rel-card-ico { flex: none; width: 22px; height: 22px; margin: 1px 0 0; padding: 0; background: none; border-radius: 0; }   /* bare icon, no disc */
.rel-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.rel-card-t .rel-chip-soon { display: inline-block; vertical-align: 2px; margin: 0 0 0 6px; padding: 2px 8px; font-size: 10px; white-space: nowrap; }
@media (max-width: 1000px) { .rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rel-launch { grid-template-columns: 1fr; } .rel-phone { width: 160px; height: 320px; } }
@media (max-width: 640px) {
  .rel { margin-top: 32px; }
  .rel-phone { display: none; } /* decorative; 350px of scroll on a phone */
  .rel-grid { grid-template-columns: 1fr; gap: 10px; }
  .rel-card { min-height: 0; }
  .rel-launch { padding: 26px 20px; border-radius: 20px; }
  .rel-next-grid { grid-template-columns: 1fr; }
}

/* ── Walk-through of what is open (dash_tour.go, 2026-09-27) ── */
.tour { position: fixed; inset: 0; z-index: 1350; }
.tour[hidden] { display: none; }
.tour-shade { position: absolute; inset: 0; background: rgba(16,41,60,.5); }
.tour:not(.tour-centered) .tour-shade { background: transparent; }
.tour-ring { position: fixed; border-radius: 14px; border: 3px solid var(--orange-400, #FF884C); box-shadow: 0 0 0 9999px rgba(16,41,60,.5); pointer-events: none; transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; z-index: 1; }
.tour-ring[hidden] { display: none; }
.tour-card { position: fixed; z-index: 2; width: min(340px, calc(100vw - 32px)); padding: 18px 18px 14px; border-radius: 18px; background: var(--surface, #FFFEF6); box-shadow: 0 24px 50px -24px rgba(16,41,60,.7); }
.tour-card[hidden] { display: none; }
.tour-centered .tour-card { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.tour-count { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-600, #CA4E00); }
.tour-t { margin: 0 0 6px; font-size: 19px; font-weight: 600; line-height: 1.25; color: var(--font, #292626); }
.tour-d { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; color: var(--font, #292626); }
.tour-link { display: inline-block; margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--color-navy, #10293C); }
.tour-acts { display: flex; align-items: center; gap: 10px; }
.tour-back, .tour-skip { background: none; border: 0; font: inherit; font-size: 14px; color: var(--text-secondary, #6B6560); cursor: pointer; padding: 6px 4px; }
.tour-skip { margin-right: auto; text-decoration: underline; }
.tour-back + .tour-skip { margin-left: 0; }
.tour-next { width: auto; padding: 10px 22px; margin: 0; }
@media (max-width: 999px) {
  .tour:not(.tour-centered) .tour-card { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); top: auto; width: auto; }
}
/* the menu announces what is new (navNewPage) */
.dash-nav-new { margin-left: auto; padding: 2px 7px; border-radius: 999px; background: var(--orange-400, #FF884C); color: var(--color-font, #292626); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rel-open { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.rel-open > div { max-width: 620px; }
.rel-tour-btn { width: auto; padding: 12px 24px; margin: 0; }
/* collapsed rail: the "New" pill becomes a dot on the icon (QA 2026-09-27) */
body.dash-rail-collapsed .dash-sidebar-item { position: relative; }
body.dash-rail-collapsed .dash-nav-new { position: absolute; top: 6px; left: 30px; width: 9px; height: 9px; padding: 0; font-size: 0; overflow: hidden; }

/* Preview panels (2026-09-27, Pavel: "this box to stretch the entire pop-up span and have the close
   button more in the top right corner"). The close button left the banner: it sits in a zero-height
   sticky strip at the top of the panel, pinned to the panel's top-right corner, and stays there while
   the phone sheet scrolls. The banner now runs the full width below it. Members, whose banner is
   hidden, keep a close button too (it used to be hidden with the banner). */
.dash-preview-closebar { position: sticky; top: 26px; height: 0; z-index: 4; }
.dash-preview-closebar .dash-preview-x { position: absolute; top: -16px; right: -18px; }
.dash-preview-status { margin-top: 22px; margin-right: 0; padding-right: 12px; }
@media (min-width: 768px) { .dash-preview-status { margin-right: 0; padding-right: 14px; } }
.dash-preview-title { padding-right: 36px; }
@media (max-width: 767px) {
  .dash-preview-closebar { top: 24px; }
  .dash-preview-closebar .dash-preview-x { top: -14px; right: -10px; }
  .dash-preview-status { position: static; }
}

/* Walk-through opener (dash_tour.go tourWelcomeHTML, 2026-09-27): the doors-open moment. Navy band,
   the brand mark, then each newly opened menu item pops in once. Tiles rest in place (fill both). */
.tour-card.tour-welcome { width: min(520px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.tour-w-band { position: relative; background: var(--color-navy, #10293C); padding: 30px 24px 26px; text-align: center; overflow: hidden; }
.tour-w-band::before { content: ""; position: absolute; left: 50%; top: -120px; width: 420px; height: 420px; margin-left: -210px; border-radius: 50%; background: radial-gradient(circle, rgba(255,136,76,.28), rgba(255,136,76,0) 65%); animation: tourGlow 1.6s ease-out both; }
.tour-w-mark { position: relative; display: block; margin: 0 auto; width: 44px; height: 44px; filter: brightness(0) invert(1); animation: tourMark .7s cubic-bezier(.2,.8,.2,1) both; }
.tour-w-tiles { position: relative; display: flex; justify-content: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.tour-w-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 96px; padding: 14px 6px 12px; border-radius: 14px; background: var(--surface, #FFFEF6); box-shadow: 0 12px 24px -14px rgba(0,0,0,.6); animation: tourTile .55s cubic-bezier(.2,1.3,.4,1) both; animation-delay: calc(.55s + var(--i) * .18s); }
.tour-w-tile img { width: 26px; height: 26px; }
.tour-w-tile span { font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--font, #292626); }
.tour-w-body { padding: 22px 24px 16px; }
.tour-w-t { margin: 0 0 8px; font-size: 26px; font-weight: 600; line-height: 1.2; color: var(--font, #292626); }
.tour-w-d { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--font, #292626); }
.tour-welcome .tour-next { padding: 12px 26px; }
@keyframes tourGlow { from { opacity: 0; transform: scale(.6); } }
@keyframes tourMark { from { opacity: 0; transform: scale(.5); } }
@keyframes tourTile { from { opacity: 0; transform: translateY(18px) scale(.85); } }
@media (max-width: 480px) {
  .tour-w-band { padding: 24px 14px 20px; }
  .tour-w-tiles { gap: 8px; }
  .tour-w-tile { width: calc(50% - 4px); max-width: 130px; flex-direction: row; justify-content: flex-start; padding: 10px; gap: 8px; }
  .tour-w-tile img { width: 20px; height: 20px; }
  .tour-w-tile span { text-align: left; }
  .tour-w-t { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .tour-w-band::before, .tour-w-mark, .tour-w-tile { animation: none; } }
/* Opener: a close X on the navy band, and a light edge + glow so the navy band does not melt into
   the navy home hero behind it (Pavel, 2026-09-27). */
.tour-card.tour-welcome { border: 1px solid rgba(255,255,255,.22); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 -10px 40px -6px rgba(255,255,255,.22), 0 30px 60px -24px rgba(0,0,0,.7); }
.tour-w-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; background: rgba(255,255,255,.12); transition: background 140ms; }
.tour-w-x:hover { background: rgba(255,255,255,.24); }
.tour-w-x:focus-visible { outline: 2px solid var(--orange-400, #FF884C); outline-offset: 2px; }
.tour-w-x img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
/* Opener: the real Circle wordmark (light version, as on the signup screen), not the lone C mark. */
.tour-w-mark { width: auto; height: 30px; filter: none; }
/* Home October 13 phone: the real wordmark, not the lone C (Pavel, 2026-09-27). */
.rel-phone-mark { width: 96px; height: auto; }
/* Walk-through: a card stays invisible until tour.js has placed it, then fades in (no top-left flash). */
.tour-card { visibility: hidden; opacity: 0; transition: opacity .18s ease; }
.tour-card.tour-card-placed { visibility: visible; opacity: 1; }
/* Settings > pharmacy summary: who delivers, under "Delivered to your door" (2026-09-27). */
.dash-pharm-by { display: block; font-size: 13.5px; color: var(--text-secondary, #6B6560); margin-top: 2px; }
/* Walk-through finale (tourFinaleHTML, 2026-09-27): a date tile lands, confetti bursts from it once. */
.tour-f-band { padding: 34px 24px 24px; }
.tour-f-stage { position: relative; height: 120px; display: flex; align-items: center; justify-content: center; }
.tour-f-date { position: relative; z-index: 1; width: 104px; border-radius: 18px; overflow: hidden; background: var(--surface, #FFFEF6); box-shadow: 0 18px 36px -16px rgba(0,0,0,.7); text-align: center; animation: tourDate .7s cubic-bezier(.2,1.4,.4,1) .15s both; }
.tour-f-mark { z-index: 1; height: 40px; } /* the wordmark where the "Oct 13" tile was (2026-10-10: no opening date) */
.tour-f-mon { display: block; padding: 6px 0 5px; background: var(--orange-400, #FF884C); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.tour-f-day { display: block; padding: 4px 0 8px; font-size: 48px; font-weight: 700; line-height: 1; color: var(--color-navy, #10293C); }
.tour-f-bit { position: absolute; left: 50%; top: 50%; width: 9px; height: 14px; margin: -7px 0 0 -4px; border-radius: 2px; background: var(--c); transform: translate(var(--x), var(--y)) rotate(var(--r)); animation: tourBit .9s cubic-bezier(.15,.8,.3,1) both; animation-delay: calc(.55s + var(--d)); }
.tour-f-chips { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tour-f-chip { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: 12.5px; font-weight: 600; animation: tourTile .5s ease both; animation-delay: 1.1s; }
.tour-f-chip + .tour-f-chip { animation-delay: 1.25s; }
.tour-f-spacer { flex: 1; }
.tour-finale .tour-back { text-decoration: none; }
@keyframes tourDate { from { opacity: 0; transform: translateY(-40px) scale(.7) rotate(-8deg); } }
@keyframes tourBit { from { opacity: 0; transform: translate(0, 0) rotate(0) scale(.3); } }
@media (max-width: 480px) { .tour-f-day { font-size: 42px; } .tour-f-date { width: 92px; } }
@media (prefers-reduced-motion: reduce) { .tour-f-date, .tour-f-bit, .tour-f-chip { animation: none; } }
/* "New" pill: capitals sat ~1.5px high in Safari (Pavel, 2026-09-27); the font reserves descender
   room that capitals never use. Trim the box to the cap height where supported, else nudge down. */
.dash-nav-new { line-height: 1; padding: 3px 7px 1px; }
@supports (text-box: trim-both cap alphabetic) { .dash-nav-new { text-box: trim-both cap alphabetic; padding: 5px 7px; } }

/* Home October 13 phone (2026-09-27, Pavel: "the black phone feels weird… make the app look good in
   this preview, as opposed to blank boxes"). A slim metal frame instead of a thick navy slab on the
   navy band, and a Circle home on the screen (relPhoneScreenHTML). Everything inside is in em of the
   phone's font-size, so the smaller phone below 1000px scales as one piece. */
.rel-phone { width: 224px; height: 456px; font-size: 10px; padding: 7px; border: 0; border-radius: 42px; background: #0d1116;
  box-shadow: 0 0 0 1.5px #8e99a4, 0 0 0 3px #dfe4e8, 0 0 0 4px #7d8893, 0 44px 80px -30px rgba(0,0,0,.75), 0 0 90px -10px rgba(255,136,76,.25); }
.rel-phone::before { top: 16px; width: 64px; height: 18px; margin-left: -32px; background: #0d1116; z-index: 2; }
.rel-phone-screen { inset: 7px; border-radius: 35px; padding: 1.4em 1.3em 0; gap: 0; background: #F4F1E2; }
.rp-status { display: flex; justify-content: space-between; align-items: center; height: 2.2em; padding: 0 .9em; font-size: 1.05em; font-weight: 600; color: var(--color-font, #292626); }
.rp-status-r { display: flex; align-items: center; gap: .4em; }
.rp-sig { display: block; width: 1.4em; height: .8em; background: linear-gradient(90deg, var(--color-font, #292626) 0 20%, transparent 20% 27%, var(--color-font, #292626) 27% 47%, transparent 47% 54%, var(--color-font, #292626) 54% 74%, transparent 74% 81%, var(--color-font, #292626) 81%); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.rp-bat { display: block; width: 1.9em; height: .9em; border-radius: .25em; border: 1.5px solid var(--color-font, #292626); box-shadow: inset 0 0 0 1.5px #F4F1E2; background: var(--color-font, #292626); }
.rp-top { display: flex; justify-content: space-between; align-items: center; margin: 1.6em 0 1em; }
.rp-logo { width: 6.2em; height: auto; }
.rp-avatar { width: 2.8em; height: 2.8em; border-radius: 50%; display: grid; place-items: center; display: flex; align-items: center; justify-content: center; background: var(--color-navy, #10293C); color: #fff; font-size: 1.05em; font-weight: 700; }
.rp-greet { margin: 0 0 .9em; font-size: 1.75em; font-weight: 600; line-height: 1.15; color: var(--color-font, #292626); }
.rp-card { display: block; margin-bottom: .8em; padding: 1em 1.1em; border-radius: 1.3em; background: #FFFEF6; border: 1px solid rgba(220,182,136,.45); }
.rp-next { background: var(--orange-050, #FFF2E5); border-color: rgba(255,136,76,.35); }
.rp-k { display: block; font-size: .85em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-600, #CA4E00); }
.rp-t { display: block; margin: .25em 0 .5em; font-size: 1.35em; font-weight: 600; color: var(--color-font, #292626); }
.rp-row { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.rp-d { font-size: 1em; color: #6B6560; }
.rp-btn { padding: .45em 1.1em; border-radius: 999px; background: var(--orange-400, #FF884C); font-size: 1em; font-weight: 700; color: var(--color-font, #292626); }
.rp-m { display: flex; justify-content: space-between; margin-top: .75em; font-size: 1.05em; }
.rp-mn { font-weight: 600; color: var(--color-font, #292626); }
.rp-ok { color: #2F7D4F; font-weight: 600; }
.rp-bar { position: relative; display: block; height: .45em; margin-top: .45em; border-radius: 999px; background: #EDE7D6; }
.rp-zone { position: absolute; left: 22%; right: 26%; top: 0; bottom: 0; border-radius: 999px; background: #B9DCC5; }
.rp-dot { position: absolute; top: 50%; width: 1em; height: 1em; margin: -.5em 0 0 -.5em; border-radius: 50%; background: var(--color-navy, #10293C); border: 2px solid #fff; }
.rp-clara { display: flex; align-items: flex-start; gap: .6em; margin-top: .2em; }
.rp-clara img { width: 2.4em; height: 2.4em; flex: none; }
.rp-clara span { padding: .7em .9em; border-radius: 1.2em 1.2em 1.2em .3em; background: var(--color-navy, #10293C); color: #fff; font-size: 1em; line-height: 1.35; }
.rp-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; align-items: center; height: 4.8em; padding-bottom: .8em; background: #FFFEF6; border-top: 1px solid rgba(220,182,136,.4); }
.rp-tabs img { width: 1.9em; height: 1.9em; opacity: .45; }
.rp-tabs .rp-tab-on { opacity: 1; filter: brightness(0) saturate(100%) invert(58%) sepia(76%) saturate(1500%) hue-rotate(338deg) brightness(101%) contrast(101%); }
.rp-in { animation: rpIn .5s ease both; animation-delay: calc(1s + var(--i) * .15s); }
@keyframes rpIn { from { opacity: 0; transform: translateY(.8em); } }
@media (prefers-reduced-motion: reduce) { .rp-in { animation: none; } }
@media (max-width: 1000px) { .rel-phone { width: 196px; height: 400px; font-size: 8.7px; } }

/* Draw-date dialog behind "Mark as complete" (drawnAskHTML, 2026-09-27). Today / Yesterday are one
   tap; any other day comes from a date field held to the same window the server enforces. */
.drawn-ask { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(16,41,60,.5); }
.drawn-ask[hidden] { display: none; }
.drawn-ask-box { position: relative; width: min(420px, 100%); padding: 24px 22px 20px; border-radius: 20px; background: var(--surface, #FFFEF6); box-shadow: 0 30px 60px -24px rgba(16,41,60,.7); }
.drawn-ask-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(41,38,38,.1); background: var(--surface, #FFFEF6); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.drawn-ask-x img { width: 16px; height: 16px; }
.drawn-ask-t { margin: 0 0 6px; padding-right: 36px; font-size: 21px; font-weight: 600; line-height: 1.25; color: var(--font, #292626); }
.drawn-ask-d { margin: 0 0 16px; font-size: 14.5px; color: var(--text-secondary, #6B6560); }
.drawn-ask-days { display: flex; gap: 10px; }
.drawn-ask-day { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid rgba(220,182,136,.6); background: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color 140ms, background 140ms; }
.drawn-ask-day b { font-size: 15.5px; font-weight: 600; color: var(--font, #292626); }
.drawn-ask-day span { font-size: 13px; color: var(--text-secondary, #6B6560); }
.drawn-ask-day:hover { border-color: var(--orange-400, #FF884C); }
.drawn-ask-day-on, .drawn-ask-day-on:hover { border-color: var(--orange-400, #FF884C); background: var(--orange-050, #FFF2E5); box-shadow: inset 0 0 0 1px var(--orange-400, #FF884C); }
.drawn-ask-other { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid rgba(220,182,136,.6); background: #fff; font-size: 15px; font-weight: 600; color: var(--font, #292626); }
.drawn-ask-other:has(.drawn-ask-date-on) { border-color: var(--orange-400, #FF884C); background: var(--orange-050, #FFF2E5); }
.drawn-ask-date { font: inherit; font-size: 15px; font-weight: 400; padding: 6px 8px; border: 1px solid rgba(41,38,38,.15); border-radius: 10px; background: #fff; color: var(--font, #292626); }
.drawn-ask-err { min-height: 0; margin: 10px 0 0; font-size: 14px; color: #B42318; }
.drawn-ask-err:empty { display: none; }
.drawn-ask-save { width: 100%; margin: 16px 0 0; }
.drawn-ask-save:disabled { opacity: .45; cursor: not-allowed; }
/* Draw-date calendar (2026-09-27, Pavel: the browser's date popup was "a bit too small", would not
   take today or yesterday, and had no hover). Booking's month grid look, bigger cells, a clear hover,
   one selection shared with the Today / Yesterday picks (.drawn-on on both). */
.drawn-ask-box { width: min(440px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.drawn-ask-day.drawn-on, .drawn-ask-day.drawn-on:hover { border-color: var(--orange-400, #FF884C); background: var(--orange-050, #FFF2E5); box-shadow: inset 0 0 0 1px var(--orange-400, #FF884C); }
.drawn-cal-k { margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary, #6B6560); }
.drawn-cal { padding: 12px 12px 10px; }
.drawn-cal-month[hidden] { display: none; }
.drawn-cal .dash-book-cal-grid { gap: 5px; }
.drawn-cal .dash-book-cal-d { min-height: 42px; font-size: 15.5px; }
.drawn-cal-day { border: 1px solid rgba(220,182,136,.6); background: #fff; color: var(--font, #292626); font-weight: 500; cursor: pointer; transition: background 120ms, border-color 120ms, transform 120ms; }
.drawn-cal-day:hover { background: var(--orange-050, #FFF2E5); border-color: var(--orange-400, #FF884C); transform: scale(1.06); }
.drawn-cal-day:focus-visible { outline: 2px solid var(--orange-400, #FF884C); outline-offset: 2px; }
.drawn-cal-today { box-shadow: inset 0 0 0 1.5px var(--color-navy, #10293C); }
.drawn-cal-day.drawn-on, .drawn-cal-day.drawn-on:hover { background: var(--color-navy, #10293C); border-color: var(--color-navy, #10293C); color: #fff; transform: none; }

/* ── Appointments (dash_appointments.go, scheduling Phase 1, 2026-09-27) ───────────────────── */
.appt { max-width: 880px; }
.appt-head { margin: 0 0 20px; }
.appt-title { margin: 4px 0 6px; font-size: clamp(26px, 3.2vw, 34px); font-weight: 500; line-height: 1.15; color: var(--font); text-wrap: balance; }
.appt-lede { margin: 0; font-size: 15.5px; color: var(--text-secondary); }
.appt-lede b { color: var(--font); font-weight: 500; }
.appt-back { margin: 0 0 14px; font-size: 14px; }
.appt-back a { color: var(--text-secondary); text-decoration: none; }
.appt-back a:hover { color: var(--font); text-decoration: underline; }
.appt-empty { margin: 0 0 8px; padding: 18px 20px; border-radius: 16px; background: var(--surface); border: 1px dashed rgba(220,182,136,.7); color: var(--text-secondary); font-size: 15px; }
.appt-h2 { margin: 34px 0 12px; font-size: 19px; font-weight: 500; color: var(--font); }
.appt-note { margin: 0 0 16px; font-size: 14.5px; color: var(--text-secondary); max-width: 62ch; }

.appt-list { display: flex; flex-direction: column; gap: 10px; }
.appt-row { display: grid; grid-template-columns: 132px 1fr auto; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid rgba(220,182,136,.45); color: var(--font); text-decoration: none; transition: border-color 140ms, box-shadow 140ms; }
.appt-row:hover { border-color: var(--orange-400, #FF884C); box-shadow: 0 8px 20px -14px rgba(16,41,60,.45); }
.appt-row-when { display: flex; flex-direction: column; font-size: 14px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.appt-row-when b { font-size: 15.5px; font-weight: 500; color: var(--font); }
.appt-row-what { display: flex; flex-direction: column; font-size: 15.5px; font-weight: 500; }
.appt-row-sub { font-size: 13.5px; font-weight: 400; color: var(--text-secondary); }
.appt-row-go { font-size: 24px; color: var(--text-secondary); }

.appt-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.appt-offer { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 16px; background: var(--surface); border: 1px solid rgba(220,182,136,.45); color: var(--font); text-decoration: none; transition: border-color 140ms, box-shadow 140ms; }
.appt-offer:hover { border-color: var(--orange-400, #FF884C); box-shadow: 0 8px 20px -14px rgba(16,41,60,.45); }
.appt-offer-t { font-size: 16.5px; font-weight: 500; line-height: 1.3; }
.appt-offer-sub { font-size: 13.5px; color: var(--text-secondary); }
.appt-offer-go { margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--orange-600, #CA4E00); }
.appt-offer-locked { background: var(--cream-deep, #E6E2D1); border-style: dashed; }
.appt-offer-lock { margin-top: 8px; font-size: 13.5px; color: var(--font); }

.appt-formats { display: inline-flex; gap: 4px; margin: 0 0 16px; padding: 4px; border-radius: 999px; background: var(--cream-deep, #E6E2D1); }
.appt-format { padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--font); text-decoration: none; }
.appt-format-on { background: var(--surface); box-shadow: 0 1px 3px rgba(41,38,38,.15); }
.appt-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 900px) { .appt-pick { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.appt-times:empty { display: none; }
.appt-times-k { margin: 0 0 10px; font-size: 15px; font-weight: 500; color: var(--font); }
.appt-loading { margin: 0; font-size: 14px; color: var(--text-secondary); }
.appt-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.appt-slot { padding: 11px 6px; border-radius: 12px; border: 1px solid rgba(220,182,136,.6); background: var(--surface); font: inherit; font-size: 14.5px; font-weight: 500; color: var(--font); cursor: pointer; font-variant-numeric: tabular-nums; transition: background 120ms, border-color 120ms; }
.appt-slot:hover { background: var(--orange-050, #FFF2E5); border-color: var(--orange-400, #FF884C); }
.appt-slot-on, .appt-slot-on:hover { background: var(--color-navy, #10293C); border-color: var(--color-navy, #10293C); color: #fff; }
.appt-cal .dash-book-day-on { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }

.appt-confirm-card { margin-top: 16px; padding: 18px 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--orange-400, #FF884C); }
.appt-confirm-t { margin: 0 0 4px; font-size: 16px; font-weight: 500; color: var(--font); }
.appt-confirm-when { margin: 0 0 6px; font-size: 15px; color: var(--font); }
.appt-confirm-when b { font-weight: 500; }
.appt-confirm-fine { margin: 0; font-size: 13.5px; color: var(--text-secondary); }
.appt-confirm-btn { margin-top: 14px; }
.appt-err { margin: 10px 0 0; font-size: 14px; color: #B42318; }
.appt-err:empty { display: none; }

.appt-done { padding: 28px 24px; border-radius: 20px; background: var(--surface); border: 1px solid rgba(220,182,136,.45); text-align: center; }
.appt-done-ico { width: 40px; height: 40px; margin: 0 auto 10px; display: block; }
.appt-done-t { margin: 0 0 6px; font-size: 24px; font-weight: 500; color: var(--font); }
.appt-done-when { margin: 0 0 8px; font-size: 16px; color: var(--font); }
.appt-done-when b { font-weight: 500; }
.appt-done-p { margin: 0 auto 8px; max-width: 52ch; font-size: 14.5px; color: var(--text-secondary); }
.appt-done-btn { display: inline-block; width: auto; margin-top: 14px; padding: 12px 26px; }

.appt-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.appt-act { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid rgba(220,182,136,.8); background: var(--surface); font: inherit; font-size: 15px; font-weight: 500; color: var(--font); text-decoration: none; cursor: pointer; }
.appt-act:hover { background: var(--orange-050, #FFF2E5); }
.appt-act-quiet { background: transparent; }
.appt-acts .pathway-checkout-btn { width: auto; margin: 0; padding: 12px 24px; }
.appt-cancel-ask { margin-top: 16px; padding: 18px 20px; border-radius: 16px; background: var(--surface); border: 1px solid rgba(220,182,136,.45); }
.appt-cancel-ask p { margin: 0 0 10px; }

.appt-triage { padding: 20px; border-radius: 18px; background: var(--surface); border: 1px solid rgba(220,182,136,.45); }
.appt-triage-t { margin: 0 0 12px; font-size: 17px; font-weight: 500; color: var(--font); }
.appt-reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.appt-reason { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(220,182,136,.6); background: #fff; cursor: pointer; font-size: 15px; }
.appt-reason:has(input:checked) { border-color: var(--orange-400, #FF884C); background: var(--orange-050, #FFF2E5); }
.appt-reason input { accent-color: var(--color-navy, #10293C); }
.appt-virtual { margin: 0 0 14px; padding: 14px 16px; border-radius: 14px; background: var(--orange-050, #FFF2E5); }
.appt-virtual p { margin: 0 0 10px; font-size: 14.5px; }
.appt-virtual .pathway-checkout-btn { width: auto; margin: 0; padding: 10px 20px; }
.appt-waiver { margin: 0 0 14px; font-size: 14.5px; color: var(--font); max-width: 62ch; }
.appt-waiver b { font-weight: 500; }

@media (max-width: 640px) {
  .appt-row { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .appt-row-when { flex-direction: row; gap: 8px; align-items: baseline; grid-column: 1; }
  .appt-row-what { grid-column: 1; }
  .appt-row-go { grid-row: 1 / span 2; grid-column: 2; }
  .appt-offers, .appt-reasons { grid-template-columns: 1fr; }
}
/* Next up: two cards (a program customer has no biological-age card) fill the row, no empty third slot. */
@media (min-width: 641px) { .rel-next-grid:has(> .rel-next-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Intake: a question answered at account setup is not shown (dash-intake-known; intake.js skips it). */
.dash-intake-question.dash-intake-known { display: none !important; }
/* Date answers: inside the phone's width (iOS gives a date input its own minimum width) and
   left-aligned like every other answer, not centred (Pavel, 2026-09-27). */
.dash-intake-question input[type="date"] { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; text-align: left; -webkit-appearance: none; appearance: none; }
.dash-intake-question input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
/* Emergency contact: one step, three boxes (2026-09-27). */
.dash-intake-ec { display: flex; flex-direction: column; gap: 12px; }
.dash-intake-ec-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--font); }
.dash-intake-ec-field input { width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(220,182,136,.7); background: #fff; font: inherit; font-size: 16px; font-weight: 400; color: var(--font); }
.dash-intake-ec-field input:focus { outline: none; border-color: var(--orange-400, #FF884C); box-shadow: 0 0 0 3px rgba(255,136,76,.18); }

/* Intake on a phone: the fullscreen TopNav is position:sticky, so it already takes its own
   height in the flow; the content's extra padding-top of --topbar-h doubled it into ~76px of
   empty space above "Health intake" and pushed the answer button under Safari's toolbar
   (Pavel, 2026-09-27). Drop the duplicate and let the last button scroll clear of the toolbar. */
@media (max-width: 767px) {
  body.dash-fullscreen .dash-content:has(.dash-intake-questions, .dash-intake) { padding-top: 0; }
  body.dash-fullscreen .dash-main:has(.dash-intake-questions) { padding-top: 16px; }
  .dash-intake-questions { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* Family history grid (2026-09-27): the table on every screen (the phone's card per condition
   took a screen each), a "None" column per condition, and "None of these" for all at once. */
@media (max-width: 767px) {
  .dash-intake-grid-mobile { display: none !important; }
  .dash-intake-grid-desktop { display: block !important; margin-top: 4px; }
  .dash-intake-grid-desktop thead th { font-size: 10.5px; padding: 4px 1px 8px; letter-spacing: -.01em; }
  .dash-intake-grid-desktop thead th:first-child { width: 30%; }
  .dash-intake-grid-desktop tbody td { padding: 9px 1px; }
  .dash-intake-grid-desktop tbody td:first-child { font-size: 14px; padding-right: 6px; }
  .dash-intake-grid-desktop table { background: var(--surface); border-radius: 14px; }
}
.dash-intake-grid-desktop thead th.dash-intake-grid-none-h { color: var(--font); }
.dash-intake-grid-desktop td.dash-intake-grid-none { border-left: 1px dashed rgba(220,182,136,.55); }
.dash-intake-grid-allnone { display: inline-flex; align-items: center; min-height: 40px; margin: 2px 0 10px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(220,182,136,.8); background: var(--surface); font: inherit; font-size: 14.5px; font-weight: 500; color: var(--font); cursor: pointer; }
.dash-intake-grid-allnone:hover { background: var(--orange-050, #FFF2E5); }
.dash-intake-grid-allnone.active { background: var(--orange-050, #FFF2E5); border-color: var(--orange-400, #FF884C); box-shadow: inset 0 0 0 1px var(--orange-400, #FF884C); }
@media (max-width: 767px) {
  .dash-intake-grid-desktop tbody td:first-child { padding-left: 12px; word-break: normal; overflow-wrap: normal; hyphens: manual; }
  .dash-intake-grid-desktop thead th:not(:first-child) { width: 13%; hyphens: manual; -webkit-hyphens: manual; }
}
/* Draw date: when today is the only day, its one button spans the row and is already chosen. */
.drawn-ask-days-one .drawn-ask-day { flex: 1 1 100%; }
.dash-visit-geo-note { margin: 8px 0 0; font-size: 14px; color: #B42318; }

/* ── Foundations Visit: what to expect (dash_foundations_prep.go, 2026-09-28) ───────────────── */
.fvp-page { max-width: 760px; }
.fvp-back { margin: 0 0 14px; font-size: 14px; }
.fvp-back a { color: var(--text-secondary); text-decoration: none; }
.fvp-back a:hover { color: var(--font); text-decoration: underline; }
.dash-book-booked .fvp { margin-top: 28px; text-align: left; }
.fvp { display: flex; flex-direction: column; gap: 16px; }
.fvp-hero { padding: 26px 26px 22px; border-radius: 22px; background: linear-gradient(135deg, var(--orange-050, #FFF2E5), #FFFEF6 70%); border: 1px solid rgba(255,136,76,.25); }
.fvp-k { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-600, #CA4E00); }
.fvp-title { margin: 0 0 8px; font-size: clamp(26px, 3.4vw, 32px); font-weight: 500; line-height: 1.15; color: var(--font); }
.fvp-lede { margin: 0 0 16px; font-size: 16px; line-height: 1.55; color: #474444; max-width: 58ch; }
.fvp-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.fvp-fact { padding: 6px 12px; border-radius: 999px; background: var(--surface, #FFFEF6); border: 1px solid rgba(220,182,136,.6); font-size: 13.5px; font-weight: 500; color: var(--font); }
.fvp-fact-when { background: var(--color-navy, #10293C); border-color: var(--color-navy, #10293C); color: #fff; }
.fvp-block { padding: 22px 24px; border-radius: 20px; background: var(--surface, #FFFEF6); border: 1px solid rgba(220,182,136,.45); }
.fvp-h3 { margin: 0 0 14px; font-size: 18px; font-weight: 500; color: var(--font); }
.fvp-p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: var(--font); }
.fvp-p b { font-weight: 500; }
.fvp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; position: relative; }
.fvp-step { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; position: relative; }
.fvp-step:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 36px; bottom: -14px; width: 2px; background: rgba(220,182,136,.6); }
.fvp-step-n { width: 34px; height: 34px; border-radius: 50%; background: var(--color-navy, #10293C); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; position: relative; z-index: 1; }
.fvp-step-t { margin: 5px 0 4px; font-size: 16px; font-weight: 500; color: var(--font); }
.fvp-step-len { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--cream-deep, #E6E2D1); font-size: 12.5px; font-weight: 500; color: #474444; white-space: nowrap; }
.fvp-step-d { margin: 0; font-size: 14.5px; line-height: 1.55; color: #474444; }
.fvp-todos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fvp-todo { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.fvp-box { width: 24px; height: 24px; margin-top: 1px; border-radius: 7px; border: 1.5px solid rgba(220,182,136,.9); background: #fff; display: flex; align-items: center; justify-content: center; }
.fvp-todo-done .fvp-box { background: var(--color-navy, #10293C); border-color: var(--color-navy, #10293C); }
.fvp-check { width: 14px; height: 14px; filter: brightness(0) invert(1); }
.fvp-todo-t { margin: 0 0 2px; font-size: 15.5px; font-weight: 500; color: var(--font); }
.fvp-todo-d { margin: 0; font-size: 14px; line-height: 1.5; color: #605D5D; }
.fvp-note { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--cream, #F4F1E2); }
.fvp-note-t { margin: 0 0 6px; font-size: 14.5px; font-weight: 500; color: var(--font); }
.fvp-tell { background: var(--orange-050, #FFF2E5); border-color: rgba(255,136,76,.3); }
.fvp-link { display: inline-block; font-size: 15px; font-weight: 500; color: var(--color-navy, #10293C); text-decoration: underline; text-underline-offset: 3px; }
.fvp-acc { display: flex; flex-direction: column; border-top: 1px solid rgba(220,182,136,.45); }
.fvp-det { border-bottom: 1px solid rgba(220,182,136,.45); }
.fvp-det summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 2px; font-size: 15.5px; font-weight: 500; color: var(--font); cursor: pointer; }
.fvp-det summary::-webkit-details-marker { display: none; }
.fvp-det summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid #605D5D; border-bottom: 2px solid #605D5D; transform: rotate(45deg); margin-right: 6px; transition: transform 160ms; flex: none; }
.fvp-det[open] summary::after { transform: rotate(-135deg); }
.fvp-det > :not(summary) { margin: 0 0 16px; }
.fvp-list { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.6; color: var(--font); }
.fvp-list li { margin-bottom: 6px; }
.fvp-list b { font-weight: 500; }
.fvp-list-roomy li { margin-bottom: 10px; }
.fvp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fvp-chip { padding: 7px 12px; border-radius: 999px; background: var(--cream, #F4F1E2); border: 1px solid rgba(220,182,136,.55); font-size: 13.5px; color: var(--font); }
@media (max-width: 640px) {
  .fvp-hero, .fvp-block { padding: 18px; border-radius: 18px; }
  .fvp-step-len { display: inline-block; margin: 4px 0 0; }
}
/* checklist items to do are a marker, not an empty tick box (they are not tappable); done ones keep the tick */
.fvp-todo:not(.fvp-todo-done) .fvp-box { width: 10px; height: 10px; margin: 7px 8px 0; border: 0; border-radius: 50%; background: var(--orange-400, #FF884C); }
.fvp-todo-link { color: var(--color-navy, #10293C); text-decoration: underline; text-underline-offset: 3px; }
/* Foundations visit details: the visit's actions live in the guide's top section (2026-09-28) */
.fvp-acts { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(220,182,136,.45); }
.fvp-acts .dash-book-done-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px 18px; margin: 0; }
.fvp-acts .dash-book-done-acts .pathway-checkout-btn { width: auto; margin: 0; padding: 12px 24px; }
.fvp-acts .dash-book-done-links { display: inline-flex; gap: 16px; margin: 0; }
.fvp-acts .dash-book-done-note { margin: 10px 0 0; text-align: left; font-size: 13.5px; color: var(--text-secondary); }
.fvp-acts .dash-book-done-note:empty { display: none; }
.fvp-acts .dash-book-done-confirmed, .fvp-acts .dash-book-done-ask { margin: 0 0 12px; text-align: left; }

/* ── Settings › Connected devices (2026-09-28) ────────────────────────────────────────────── */
.dev-section { display: flex; flex-direction: column; gap: 14px; }
.dev-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dev-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 18px; background: var(--surface, #FFFEF6); border: 1px solid rgba(220,182,136,.45); }
.dev-card-on { border-color: rgba(47,125,79,.35); }
.dev-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dev-name { font-size: 18px; font-weight: 500; color: var(--font); }
.dev-state { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #E3F1E8; color: #2F7D4F; font-size: 13px; font-weight: 500; }
.dev-state img { width: 13px; height: 13px; filter: invert(38%) sepia(21%) saturate(1092%) hue-rotate(92deg) brightness(92%) contrast(88%); }
.dev-shares { display: flex; flex-wrap: wrap; gap: 6px; }
.dev-share { padding: 4px 10px; border-radius: 999px; background: var(--cream, #F4F1E2); font-size: 12.5px; color: #474444; }
.dev-note { margin: 0; font-size: 14px; line-height: 1.5; color: #605D5D; flex: 1; }
.dev-connect { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; margin-top: 4px; border-radius: 999px; text-decoration: none; }
.dev-disconnect { align-self: flex-start; margin-top: 2px; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dev-disconnect:hover { color: var(--font); }
.dev-soon-k { margin: 10px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.dev-soon { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.dev-soon-item { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; border: 1px dashed rgba(220,182,136,.8); background: transparent; }
.dev-soon-name { font-size: 15px; font-weight: 500; color: var(--font); }
.dev-soon-when { font-size: 13px; color: var(--text-secondary); }
.dev-fine { margin: 2px 0 0; font-size: 13.5px; color: var(--text-secondary); }
@media (max-width: 640px) { .dev-grid { grid-template-columns: 1fr; } }

/* ── Settings › Insurance & benefits (dash_settings_insurance.go, 2026-09-28) ─────────────── */
.ins { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.ins-view[hidden], .ins-form[hidden], .ins-second[hidden], .ins-other[hidden], .ins-holder[hidden], .ins-add-second[hidden], .ins-drop-second[hidden] { display: none !important; }
.ins-empty { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: 16px; background: var(--surface, #FFFEF6); border: 1px solid rgba(220,182,136,.45); }
.ins-empty-tx b { display: block; font-size: 16px; font-weight: 500; color: var(--font); }
.ins-empty-tx p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: #605D5D; max-width: 52ch; }
.ins-view:not(.ins-empty) { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ins-plan { padding: 18px 20px; border-radius: 16px; background: var(--surface, #FFFEF6); border: 1px solid rgba(220,182,136,.45); }
.ins-plan-k { margin: 0 0 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.ins-plan-carrier { margin: 0 0 8px; font-size: 18px; font-weight: 500; color: var(--font); }
.ins-plan-ids { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 6px; font-size: 14.5px; color: var(--font); font-variant-numeric: tabular-nums; }
.ins-plan-ids em { font-style: normal; color: var(--text-secondary); margin-right: 4px; }
.ins-plan-holder { margin: 0; font-size: 13.5px; color: #605D5D; }
.ins-acts { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; }
.ins-remove, .ins-cancel, .ins-add-second, .ins-drop-second { padding: 6px 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ins-add-second { color: var(--color-navy, #10293C); font-weight: 500; text-decoration: none; }
.ins-form { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 16px; background: var(--surface, #FFFEF6); border: 1px solid rgba(220,182,136,.45); }
.ins-plan-f { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 12px; }
.ins-plan-f legend { margin-bottom: 4px; padding: 0; font-size: 15.5px; font-weight: 500; color: var(--font); }
.ins-second .ins-plan-f { padding-top: 14px; border-top: 1px solid rgba(220,182,136,.45); }
.ins-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ins-field { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--font); }
.ins-field em { font-style: normal; font-weight: 400; color: var(--text-secondary); }
.ins-field input, .ins-field select, .ins-field textarea { width: 100%; box-sizing: border-box; min-height: 46px; padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(220,182,136,.7); background: #fff; font: inherit; font-size: 16px; font-weight: 400; color: var(--font); }
.ins-field textarea { min-height: 64px; resize: vertical; }
.ins-field input:focus, .ins-field select:focus, .ins-field textarea:focus { outline: none; border-color: var(--orange-400, #FF884C); box-shadow: 0 0 0 3px rgba(255,136,76,.18); }
.ins-err { margin: 0; font-size: 14px; color: #B42318; }
.ins-err:empty { display: none; }
.ins-form-acts { display: flex; align-items: center; gap: 18px; }
.ins-fine { margin: 0; font-size: 13px; color: var(--text-secondary); }
@media (max-width: 640px) { .ins-row { grid-template-columns: 1fr; } .ins-empty { flex-direction: column; align-items: flex-start; } }

/* Insurance card photos + camera (2026-09-28): the health card's scanner, in the settings style */
.ins-photos { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(220,182,136,.45); display: flex; flex-direction: column; gap: 8px; }
.ins-photos-k { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.ins-photo { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ins-photo-l { min-width: 44px; font-weight: 500; color: var(--font); }
.ins-photo-none { color: var(--text-secondary); }
.ins-photo-on { color: #2F7D4F; font-weight: 500; }
.ins-photo-btn { margin-left: auto; padding: 6px 14px; border-radius: 999px; border: 1.5px solid rgba(220,182,136,.8); background: var(--surface, #FFFEF6); font: inherit; font-size: 13.5px; font-weight: 500; color: var(--font); cursor: pointer; }
.ins-photo-btn:hover { background: var(--orange-050, #FFF2E5); }
.inscap { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(16,41,60,.72); }
.inscap[hidden], .inscap [hidden] { display: none !important; }
.inscap-box { position: relative; width: min(460px, 100%); padding: 14px; border-radius: 22px; background: var(--surface, #FFFEF6); display: flex; flex-direction: column; gap: 12px; }
.inscap-video { position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 70vh; border-radius: 16px; overflow: hidden; background: #0d1116; }
.inscap-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inscap-frame { position: absolute; left: 7%; right: 7%; top: 50%; aspect-ratio: 85.6 / 53.98; transform: translateY(-50%); border-radius: 14px; box-shadow: 0 0 0 9999px rgba(0,0,0,.42); z-index: 1; }
.inscap-c { position: absolute; width: 26px; height: 26px; border: 3px solid #fff; }
.inscap-tl { left: -2px; top: -2px; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.inscap-tr { right: -2px; top: -2px; border-left: 0; border-bottom: 0; border-radius: 0 12px 0 0; }
.inscap-bl { left: -2px; bottom: -2px; border-right: 0; border-top: 0; border-radius: 0 0 0 12px; }
.inscap-br { right: -2px; bottom: -2px; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }
.inscap-label { position: absolute; left: 0; right: 0; top: 14px; z-index: 2; margin: 0; text-align: center; font-size: 15px; font-weight: 600; color: #fff; }
.inscap-status { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; margin: 0; text-align: center; font-size: 13.5px; line-height: 1.4; color: #fff; }
.inscap-count { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.inscap-count span { font-size: 88px; font-weight: 600; color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.5); }
.inscap-file { padding: 26px 12px; text-align: center; }
.inscap-file-t { margin: 0 0 4px; font-size: 16px; font-weight: 500; color: var(--font); }
.inscap-file-d { margin: 0; font-size: 14px; color: var(--text-secondary); }
.inscap-review { text-align: center; }
.inscap-review-img { width: 100%; border-radius: 12px; display: block; }
.inscap-review-t { margin: 10px 0 0; font-size: 14px; color: var(--text-secondary); }
.inscap-err { margin: 0; font-size: 14px; color: #B42318; text-align: center; }
.inscap-err:empty { display: none; }
.inscap-acts { display: flex; align-items: center; justify-content: center; gap: 22px; }
.inscap-shutter { width: 64px; height: 64px; border-radius: 50%; border: 4px solid var(--color-navy, #10293C); background: #fff; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 30px var(--orange-400, #FF884C); cursor: pointer; }
.inscap-choose { font-size: 14.5px; font-weight: 500; color: var(--color-navy, #10293C); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.inscap-x { position: absolute; top: 22px; right: 22px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.inscap-x img { width: 16px; height: 16px; filter: brightness(0) invert(1); }

/* Section intros read at 16px on desktop (Pavel, 2026-09-29: "too small on the screen").
   Phones keep the smaller size. */
@media (min-width: 768px) {
	.dash-subtitle,
	.as-subtitle { font-size: 16px; line-height: 1.55; }
}

/* Home: .dash-home-rest already carries the page padding, so the carousel's own
   24px inset doubled it (Pavel, 2026-09-29). The Treatment Programs page keeps it. */
.dash-home-rest .dash-pathway-carousel-header,
.dash-home-rest .dash-pathway-carousel-track { padding-left: 0; padding-right: 0; }

/* "What's new" above the Foundations steps (dash_main.go alertsTop); the roadmap
   below it no longer needs its full top gap. */
.dash-home-alerts-top { padding-bottom: 0; }
.dash-home-alerts-top .dash-alerts { margin-bottom: 0; }
.dash-home-alerts-top + .dash-home-road { padding-top: 36px; }
/* Phones: the card's 24px gap plus the button's own 20px margin left ~48px between the
   text and the button (Pavel, 2026-09-29). */
@media (max-width: 700px) {
	.dash-alert { gap: 14px; padding: 18px 18px; }
	.dash-alert-acts .pathway-checkout-btn { margin-top: 0; }
	.dash-home-alerts-top + .dash-home-road { padding-top: 24px; }
}

/* Walk-in inside the hero's clinic card (homeHeroWalkinHTML), 2026-09-29. */
.dash-home-opens-walkin-k { margin: 0 0 10px; font-size: 15px; font-weight: 500; color: var(--color-font, #292626); text-align: center; }
.dash-home-opens-walkin { width: 100%; box-sizing: border-box; }

/* Clinic card status line: a dot + the state, under the clinic's name (2026-09-29).
   Green is the design system's teal (tokens.css), not the legacy --success. */
.dash-home-opens-status { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 14.5px; font-weight: 500; color: var(--color-font, #292626); }
.dash-home-opens-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.dash-home-opens-dot-open { background: var(--teal-accent, #62795F); box-shadow: 0 0 0 3px var(--teal-200, #DCE4DB); }
.dash-home-opens-dot-soon { background: var(--orange-400, #FF884C); box-shadow: 0 0 0 3px var(--orange-100, #FFEADC); }
/* Name left, status far right on the same line (Pavel, 2026-09-29). */
.dash-home-opens-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dash-home-opens-head .dash-home-opens-status { margin: 0; white-space: nowrap; }
/* Clinic address: pin on the left, opens the device's maps (clinicMapsURL), 2026-09-29. */
.dash-home-opens-map { display: flex; align-items: flex-start; gap: 8px; text-decoration: none; }
.dash-home-opens-map:hover span { text-decoration: underline; text-underline-offset: 2px; }
.dash-home-opens-pin { flex: none; width: 18px; height: 18px; margin-top: 2px; }
/* "What's new" straight under the hero: much less air between the walk-in button's card
   and the section (Pavel, 2026-09-29). Was the hero's 56px + the section's 20px. */
.dash-home-noaction:has(.dash-home-alerts-top) .dash-home-hero { padding-bottom: 24px; }
.dash-home-noaction .dash-home-alerts-top { padding-top: 4px; }
@media (max-width: 767px) {
	.dash-home-noaction:has(.dash-home-alerts-top) .dash-home-hero { padding-bottom: 20px; }
}
/* Hero eyebrow as a chip, the same object as the "What's new" chips (.dash-alert-chip:
   "Opened", "September 27") — Pavel, 2026-09-29. */
.dash-home-hero .dash-home-eyebrow { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--cream-deep, #E6E2D1); color: var(--text-secondary, #6B6560); font-size: 11px; font-weight: 500; letter-spacing: .08em; line-height: 1.5; }
@media (max-width: 767px) { .dash-home-hero .dash-home-eyebrow { font-size: 10.5px; letter-spacing: .06em; } }
/* Desktop: tighter still (Pavel, 2026-09-29, "mobile is fine"). 2026-09-30: the gap above
   "What's new" now matches the 36px above "Four steps..." (.dash-home-alerts-top + .dash-home-road). */
@media (min-width: 768px) {
	.dash-home-noaction:has(.dash-home-alerts-top) .dash-home-hero { padding-bottom: 36px; }
	.dash-home-noaction .dash-home-alerts-top { padding-top: 0; }
}

/* Program tiles (Pavel, 2026-09-29, Figma 11:15): "Included"/"Active" moves under the
   description as a plain white check + word, no pill, so it never sits on the title. */
.dash-pathway-tile-active { position: static; display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 0; background: none; border-radius: 0; color: #fff; font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.dash-pathway-tile-check { width: 14px; height: 14px; flex: none; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.dash-pathway-tile-owned .dash-pathway-tile-head { padding-right: 0; }
/* Home, phone: the row runs off the right edge of the screen instead of stopping at the
   page gutter; the end padding lets the last tile still scroll fully into view. */
@media (max-width: 767px) {
	.dash-home-rest .dash-pathway-carousel-track { margin-right: calc(-1 * var(--home-pad)); padding-right: var(--home-pad); }
}

/* Care-open steps: "Done" under the description (dash_home_v3.go whenFoot). */
.dash-home-moment-when-foot { margin: 12px 0 0; }
@media (max-width: 767px) {
	.dash-home-moment .dash-home-moment-when-foot { grid-row: auto; grid-column: 1 / -1; justify-self: start; margin-top: 12px; }
}
/* Before opening: "Opens October 13" goes under the clinic's name, not beside it (2026-09-29). */
.dash-home-opens-dot-soon-head { flex-direction: column; align-items: flex-start; gap: 8px; }

/* Done steps (2026-09-29): green timeline dot with a white tick, the same green as the
   cards' old "Done" tick; the card itself carries a corner tick on phones only. */
.dash-home-dot-past { background: var(--success, #4A7C59); }
.dash-home-dot-past::after { filter: brightness(0) invert(1); }
.dash-home-moment-donetick { display: none; }
@media (max-width: 767px) {
	.dash-home-moment .dash-home-moment-donetick { display: block; grid-row: 1; grid-column: 2; justify-self: end; }
}

/* Next-up cards: "Coming soon" under the description, not beside the title (2026-09-29). */
.rel-card-body > .rel-chip-soon { margin: 8px 0 0; align-self: flex-start; padding: 2px 8px; font-size: 10px; }
.rel-next > .dash-section-title { margin-bottom: 16px; }
/* October 13 band, desktop: even line lengths instead of a long line and a stub (Pavel, 2026-09-29). */
@media (min-width: 1001px) {
	.rel-launch-h,
	.rel-launch-list li { text-wrap: balance; }
}
/* "Coming soon" chip: outline only, broken stroke — the same dash as the Next-up cards (2026-09-29). */
.rel-chip-soon { background: transparent; border: 1px dashed rgba(16,41,60,.45); }
/* No button beside "What's open in Circle": the copy takes the full width (2026-09-29). */
.rel-open:not(:has(.rel-tour-btn)) > div { max-width: none; flex: 1 1 100%; }
/* "Choose your membership": the membership crown, black 2px, in place of the "1" (2026-09-29). */
.dash-home-action-n-ico { width: 26px; height: 26px; display: block; }
@media (max-width: 767px) { .dash-home-action-n-ico { width: 20px; height: 20px; } }
/* ...and no disc behind it: just the icon (2026-09-29). */
.dash-home-action-n-bare { background: none; border: 0; width: 32px; height: 32px; }
.dash-home-action-n-bare .dash-home-action-n-ico { width: 32px; height: 32px; }
@media (max-width: 767px) {
	.dash-home-action-n-bare, .dash-home-action-n-bare .dash-home-action-n-ico { width: 26px; height: 26px; }
}
/* "Choose your membership" card: orange stroke instead of the drop shadow (Pavel, 2026-09-29). */
.dash-home-action:has(.dash-home-action-n-bare) { box-shadow: none; border: 1.5px solid rgba(255,136,76,0.5); }   /* Circle Orange at 50% */
/* Next-up cards: a light white wash so they lift off the cream (Pavel, 2026-09-29). */
.rel-next-card { background: rgba(255,254,246,0.6); }

/* Rail "Next step: Choose your membership" matches the home card (2026-09-29): Circle White
   fill, Circle Orange stroke at 50%, the black membership-card icon. */
.dash-sidebar-next-membership { background: var(--color-surface, #FFFEF6); border: 1.5px solid rgba(255,136,76,0.5); }
.dash-sidebar-next-membership .dash-sidebar-next-icon { filter: none; }

/* Care-open steps on phones: a vertical status rail down the left instead of ticks inside
   the cards (Pavel, 2026-09-29). Green disc + white tick = done, orange ring = where you
   are, cream ring = still to come. Desktop keeps the horizontal connector; the marks hide. */
.dash-home-moment-mark { display: none; }
@media (max-width: 767px) {
	.dash-home-road-care .dash-home-moments { position: relative; padding-left: 40px; }
	.dash-home-road-care .dash-home-moments::before { content: ""; display: block; position: absolute; left: 13px; top: 24px; bottom: 24px; width: 2px; border-radius: 1px; background: var(--cream-300, #D0CEC4); }
	.dash-home-road-care .dash-home-moment-mark { display: grid; place-items: center; position: absolute; left: -40px; top: 18px; width: 28px; height: 28px; border-radius: 50%; box-sizing: border-box; background: var(--color-cream, #F4F1E2); border: 2px solid var(--cream-300, #D0CEC4); }
	.dash-home-road-care .dash-home-moment-mark-now { border-color: var(--orange-400, #FF884C); }
	.dash-home-road-care .dash-home-moment-mark-done { background: var(--success, #4A7C59); border-color: var(--success, #4A7C59); }
	.dash-home-moment-mark-img { width: 16px; height: 16px; display: block; filter: brightness(0) invert(1); }
}
/* Marks sit on each card's vertical centre (Pavel, 2026-09-29, Figma 12:17). The rail is drawn
   per card, centre to centre, so it starts at the first mark and stops at the last whatever the
   card heights: an up-segment from the gap above (12px) to the centre, a down-segment from the
   centre to the card's foot. */
@media (max-width: 767px) {
	.dash-home-road-care .dash-home-moments::before { display: none; }
	.dash-home-road-care .dash-home-moment-mark { top: 50%; transform: translateY(-50%); z-index: 1; }
	.dash-home-road-care .dash-home-moment:not(:first-of-type)::before,
	.dash-home-road-care .dash-home-moment:not(:last-of-type)::after { content: ""; position: absolute; left: -27px; width: 2px; background: var(--cream-300, #D0CEC4); }
	.dash-home-road-care .dash-home-moment:not(:first-of-type)::before { top: -13px; height: calc(50% + 13px); }
	.dash-home-road-care .dash-home-moment:not(:last-of-type)::after { top: 50%; height: calc(50% + 1px); }
}
/* The mark matched the "> :not(title):not(when)" grid-placement rule above, and a grid-placed
   absolute box measures from the grid area (inside the 20px padding), not the card edge the
   rail uses: it sat ~20px right of the line (Figma 13:20). No grid placement for the mark. */
@media (max-width: 767px) {
	.dash-home-road-care .dash-home-moment > .dash-home-moment-mark { grid-column: auto; grid-row: auto; justify-self: auto; }
}

/* What's new (2026-09-29): date chip after the label; once opened, the button steps down to an
   outline and "Opened <date>" sits under it. */
.dash-alert-k .dash-alert-chip + .dash-alert-chip { margin-left: -2px; }
.dash-alert-primary.dash-alert-secondary { background: transparent; border: 1.5px solid rgba(16,41,60,0.28); color: var(--color-navy, #10293C); box-shadow: none; }
.dash-alert-primary.dash-alert-secondary:hover { background: rgba(16,41,60,0.05); border-color: rgba(16,41,60,0.45); }
.dash-alert-opened { margin: 0; text-align: center; font-size: 12.5px; color: var(--text-secondary, #6B6560); }

/* What's new: the card's kind is a chip too, first in the row, in Circle Black so it still
   reads before the grey date / Opened chips (Pavel, 2026-09-29). */
.dash-alert-k { gap: 6px; flex-wrap: wrap; }
.dash-alert-k .dash-alert-chip + .dash-alert-chip { margin-left: 0; }
/* 2026-10-02 (Pavel): the kind chip takes the same lighter grey as the status chip beside it;
   two greys in one row read as an accident. Was Circle Black: color: var(--color-font, #292626). */
.dash-alert-chip-kind { color: var(--text-secondary); }
/* A little more air between the chip row and the title (Pavel, 2026-09-29). Was 6px. */
.dash-alert-k { margin-bottom: 12px; }
/* Home section headings match "Four steps from here to your Foundations plan."
   (.dash-home-roadtitle in .dash-home-road-care): 32px, centred, 24px on phones (Pavel, 2026-09-29). */
.dash-home-rest .dash-pathway-carousel-header { justify-content: center; margin-bottom: 30px; }
.dash-home-rest .dash-pathway-carousel-title,
.dash-home-alerts-top .dash-section-title {
	font-size: 32px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 500;
	color: var(--font); text-align: center;
}
.dash-home-alerts-top .dash-section-title { margin: 0 0 30px; }
@media (max-width: 767px) {
	.dash-home-rest .dash-pathway-carousel-header { margin-bottom: 20px; }
	.dash-home-rest .dash-pathway-carousel-title,
	.dash-home-alerts-top .dash-section-title { font-size: 24px; }
	.dash-home-alerts-top .dash-section-title { margin-bottom: 20px; }
}
/* ...left-aligned after all, and a little less space below (Pavel, 2026-09-29). */
.dash-home-rest .dash-pathway-carousel-header { justify-content: flex-start; margin-bottom: 20px; }
.dash-home-rest .dash-pathway-carousel-title,
.dash-home-alerts-top .dash-section-title { text-align: left; }
.dash-home-alerts-top .dash-section-title { margin-bottom: 20px; }
@media (max-width: 767px) {
	.dash-home-rest .dash-pathway-carousel-header,
	.dash-home-alerts-top .dash-section-title { margin-bottom: 14px; }
}
/* (2026-09-29: dots-on-left-edge tried and reverted; dots stay centred on each card) */
/* Four-step cards look like the What's new cards: thin sand stroke, no shadow (Pavel, 2026-09-29). */
.dash-home-road-care .dash-home-moment { border: 1px solid rgba(220,182,136,.45); border-radius: 16px; box-shadow: none; }
/* Clinic card: no rules above or below the address (Pavel, 2026-09-29); space does the separating. */
.dash-home-opens .dash-home-opens-rule { display: none; }
.dash-home-opens .dash-home-opens-map { margin-top: 14px; }
.dash-home-opens .dash-home-opens-walkin-k { margin-top: 18px; }
/* Date / Opened chips: a lighter cream than --cream-deep (Pavel, 2026-09-29), halfway to Circle White. */
.dash-alert-chip:not(.dash-alert-chip-new) { background: color-mix(in srgb, var(--cream-deep, #E6E2D1) 55%, var(--color-surface, #FFFEF6)); }

/* ── Design system page (dash_design_system.go), Pavel only ─────────────── */
.ds { max-width: 1000px; margin: 0 auto; padding: 8px 0 48px; }
.ds-k { margin: 0 0 8px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-600, #CA4E00); }
.ds-h1 { margin: 0 0 10px; font-size: 36px; font-weight: 500; letter-spacing: -.015em; color: var(--color-font); }
.ds-lede { margin: 0; max-width: 64ch; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.ds code { font-size: .88em; padding: 1px 6px; border-radius: 6px; background: var(--cream-deep, #E6E2D1); color: var(--color-font); }
.ds-sec { margin-top: 44px; }
.ds-h2 { margin: 0 0 6px; font-size: 24px; font-weight: 500; color: var(--color-font); }
.ds-note { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); max-width: 70ch; }
.ds-panel { padding: 22px 24px; border-radius: 16px; background: var(--color-surface, #FFFEF6); border: 1px solid rgba(220,182,136,.45); margin-bottom: 14px; }
.ds-panel-dark { background: var(--color-navy, #10293C); border-color: var(--color-navy, #10293C); color: #F4F1E2; }
.ds-panel-dark .ds-panel-k, .ds-panel-dark .ds-code { color: #C7D3DB; }
.ds-panel-dark code { background: rgba(255,254,246,.12); color: #FFFEF6; }
.ds-panel-k { margin: 0 0 14px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.ds-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ds-row > .circle-btn { width: auto; }
.ds-code { margin: 14px 0 0; font-size: 13px; color: var(--text-secondary); }
.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ds-swatches-primary { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-bottom: 22px; }
.ds-swatch { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 12px; background: var(--color-surface, #FFFEF6); border: 1px solid rgba(220,182,136,.35); }
.ds-swatch-chip { display: block; height: 52px; border-radius: 8px; margin-bottom: 6px; border: 1px solid rgba(41,38,38,.08); }
.ds-swatch-name { font-size: 12.5px; font-weight: 500; color: var(--color-font); }
.ds-swatch-hex { font-size: 12px; color: var(--text-secondary); }
.ds-swatch-note { font-size: 11px; line-height: 1.35; color: var(--text-secondary); }
.ds-ramp { margin-top: 16px; }
.ds-ramp-name { margin: 0 0 8px; font-size: 13px; font-weight: 500; text-transform: capitalize; color: var(--color-font); }
.ds-type-row { padding: 12px 0; border-bottom: 1px solid rgba(220,182,136,.3); }
.ds-type-row:last-child { border-bottom: 0; }
.ds-type-label { margin: 0 0 4px; font-size: 12px; color: var(--text-secondary); }
.ds-type-sample { margin: 0; color: var(--color-font); }
@media (max-width: 767px) { .ds-h1 { font-size: 28px; } .ds-type-sample { font-size: min(1em, 30px) !important; } }
/* October 13 band: the date folds into the heading; the store chips and the orange
   "Coming October 13" pill give way to two plain white platform marks (Pavel, 2026-09-29). */
.rel-stores { display: flex; align-items: center; gap: 16px; }
.rel-store-ico { width: 26px; height: 26px; display: block; }
/* the full-body robot reads lighter than the Apple mark at the same box; give it 2px more */
.rel-store-ico[alt="Android"] { width: 28px; height: 28px; }
/* "So does the app." on its own line on phones only (Pavel, 2026-09-29). */
.rel-br-phone { display: none; }
@media (max-width: 767px) { .rel-br-phone { display: inline; } }
/* Desktop: the phone mockup 15% smaller (Pavel, 2026-09-29). zoom, not transform:
   the entrance animation (relPhoneIn) already owns transform, and zoom scales the
   phone's px-sized screen with it. Tablet/phone keep their own 160x320. */
@media (min-width: 1001px) { .rel-phone { zoom: 0.85; } }
/* October 13 band: Mist 800 → 600 gradient instead of flat Circle Navy (Pavel, 2026-09-29).
   The lighter end is ~4:1 against the cream text, so the list goes to full Circle White. */
.rel-launch { background: linear-gradient(135deg, var(--mist-800, #3B4750) 0%, var(--mist-600, #6C7D8A) 100%); }
.rel-launch-list li { color: var(--color-surface, #FFFEF6); }
/* Choose-membership cards, home and rail: Circle Navy stroke (Pavel, 2026-09-29; was orange 50%).
   The rail card's arrow is the home CTA's "→", in navy. */
.dash-home-action:has(.dash-home-action-n-bare) { border-color: var(--color-navy, #10293C); }
.dash-sidebar-next-membership { border-color: var(--color-navy, #10293C); }
.dash-sidebar-next-arrow { flex: none; margin-left: auto; font-size: 18px; line-height: 1; color: var(--color-navy, #10293C); }
body.dash-rail-collapsed .dash-sidebar-next-arrow { display: none; }

/* ── October 13 band, sunrise (Pavel, 2026-09-29) ─────────────────────────
   A dark ramp that lightens toward the bottom (Circle Navy → Mist 800 → Clay 600),
   with a soft orange sun glowing in the middle. Clay 600 is as light as the bottom
   goes so the white list text keeps its contrast. Replaces the Mist 800→600 try. */
.rel-launch {
	background:
		radial-gradient(circle at 50% 62%, rgba(255,136,76,.62) 0%, rgba(255,136,76,.30) 16%, rgba(255,136,76,.10) 30%, rgba(255,136,76,0) 44%),
		linear-gradient(to bottom, var(--color-navy, #10293C) 0%, var(--mist-800, #3B4750) 52%, var(--clay-600, #A26A59) 100%);
}
/* The phone: no metallic rings, no drop shadow, no glow — just the device. It sits low,
   running off the bottom edge of the band (.rel-launch clips it). */
.rel-phone { box-shadow: none !important; align-self: end; margin-bottom: -120px; }
@media (max-width: 1000px) { .rel-phone { margin-bottom: -100px; } }
@media (max-width: 767px) { .rel-launch { padding-bottom: 0; } .rel-phone { margin-bottom: -90px; } }
/* Its tab bar matches the app's: inactive grey (#6B6560), the active tab Circle Black and a
   touch heavier, as the real bar draws it. */
.rp-tabs img { opacity: 1; filter: brightness(0) saturate(100%) invert(15%) sepia(84%) saturate(1519%) hue-rotate(15deg) brightness(47%) contrast(25%); }
.rp-tabs .rp-tab-on { filter: brightness(0) invert(15%) drop-shadow(0 0 0.35px #292626) drop-shadow(0 0 0.35px #292626); }
/* Rail "Next step" label: grey, not orange (Pavel, 2026-09-29). */
.dash-sidebar-next-membership .dash-sidebar-next-kicker { color: var(--text-secondary, #6B6560); }
/* Sunrise, second pass (Pavel, 2026-09-29): the sun sits below the frame (centre ~120%
   down, so only its glow rises into the band), the warm at the bottom is subtler (Clay 600
   only 40% mixed into Mist 800), and the phone is cropped less. */
.rel-launch {
	background:
		radial-gradient(circle at 50% 122%, rgba(255,136,76,.60) 0%, rgba(255,136,76,.32) 22%, rgba(255,136,76,.10) 42%, rgba(255,136,76,0) 60%),
		linear-gradient(to bottom, var(--color-navy, #10293C) 0%, var(--mist-800, #3B4750) 60%, color-mix(in srgb, var(--clay-600, #A26A59) 40%, var(--mist-800, #3B4750)) 100%);
}
.rel-phone { margin-bottom: -70px; }
@media (max-width: 1000px) { .rel-phone { margin-bottom: -60px; } }
@media (max-width: 767px) { .rel-phone { margin-bottom: -50px; } }
/* Pharmacy / delivery card: Circle White, with the Choose-membership card's 1.5px Circle Navy stroke (Pavel, 2026-09-29). */
.dash-priority-feature, .dash-priority-feature:hover { background: var(--color-surface, #FFFEF6); border: 1.5px solid var(--color-navy, #10293C); }
/* "Waiting for you" inside the October release, above Next up (2026-09-29). */
.rel-waiting { margin: 32px 0 0; }
.rel-waiting > .dash-section { margin-bottom: 0; }
/* Membership page eyebrow as a chip, the same object as the home hero's "Founding member" (2026-09-29). */
.membership-eyebrow { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--cream-deep, #E6E2D1); color: var(--text-secondary, #6B6560); font-size: 11px; font-weight: 500; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; }
@media (max-width: 767px) { .membership-eyebrow { font-size: 10.5px; letter-spacing: .06em; } }
/* "Choose your membership" card: the pharmacy card's padding (Pavel/Mike, 2026-09-29) —
   22px top and bottom, 26px sides on desktop; 16 / 20 / 22 on phones. */
.dash-home-action:has(.dash-home-action-n-bare) { padding: 22px 26px; }
@media (max-width: 767px) { .dash-home-action:has(.dash-home-action-n-bare) { padding: 16px 20px 22px; } }
/* The Design system row's own nav wrapper: same inset as the main list, but it must not grow. */
.dash-sidebar-nav-ds { flex: none; margin: 8px 0 4px; }

/* Messages (2026-09-29): the Care Team is two people in white on a darker cream, not one
   person on peach; Clara is Circle Orange with the AI sparkles (clara-ai.svg, no "C");
   the "Chat" tag is the muted chip used on the home cards. */
.chat-list-avatar-careteam,
.chat-window-header-icon.chat-window-header-icon-careteam { background: var(--cream-400, #B7B4A8); }
.chat-list-avatar-careteam img { width: 26px; height: 26px; opacity: 1; }
.chat-window-header-icon.chat-window-header-icon-careteam img { width: 24px; height: 24px; opacity: 1; }
.careteam-msgrow .botchatbubble.from_agent::before { background: var(--cream-400, #B7B4A8) url(/dashboard/imgs/icons/careteam-white.svg) center / 15px 15px no-repeat; }
.chat-chan-chat { background: color-mix(in srgb, var(--cream-deep, #E6E2D1) 55%, var(--color-surface, #FFFEF6)); color: var(--text-secondary, #6B6560); }
.chat-chan-chat img { opacity: 1; filter: brightness(0) saturate(100%) invert(15%) sepia(84%) saturate(1519%) hue-rotate(15deg) brightness(47%) contrast(25%); }
/* one step darker: white 2px lines were too faint on cream-400 */
.chat-list-avatar-careteam,
.chat-window-header-icon.chat-window-header-icon-careteam { background: var(--cream-500, #9C9989); }
.careteam-msgrow .botchatbubble.from_agent::before { background-color: var(--cream-500, #9C9989); }
/* Success page (2026-09-29): the plan facts as a list at the lede's size in Medium, and the
   finished step's tick as the filled green disc used on the home steps. */
.thanks-facts { margin: 16px 0 0; padding-left: 20px; font-size: 16px; line-height: 1.6; font-weight: 500; color: var(--color-font, #292626); }
.thanks-facts li { margin: 2px 0; }
.thanks-facts li::marker { color: var(--text-secondary, #6B6560); }
.thanks-card-done .thanks-card-tick { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--success, #4A7C59); border: 0; }
.thanks-card-done .thanks-tick-img { width: 14px; height: 14px; filter: brightness(0) invert(1); }
.thanks-card-done .thanks-card-tick { width: 26px; height: 26px; }   /* keep the original footprint */
/* Walk-through welcome pop-up (2026-09-29): no white stroke or white halo around the card;
   each feature icon sits on a Circle Cream disc; "October release" in a darker cream. */
.tour-card.tour-welcome { border: 0; box-shadow: 0 30px 60px -24px rgba(0,0,0,.7); }
.tour-w-tile img { box-sizing: content-box; width: 22px; height: 22px; padding: 10px; border-radius: 50%; background: var(--color-cream, #F4F1E2); }
@media (max-width: 767px) { .tour-w-tile img { width: 18px; height: 18px; padding: 7px; } }
.tour-welcome .tour-count { color: var(--cream-600, #7E7B6C); }
/* ...correction: the TILES are Circle Cream, the icons sit plain inside them (2026-09-29). */
.tour-w-tile { background: var(--color-cream, #F4F1E2); }
.tour-w-tile img { width: 26px; height: 26px; padding: 0; border-radius: 0; background: none; }
@media (max-width: 767px) { .tour-w-tile img { width: 20px; height: 20px; padding: 0; } }
/* ...and finally no tiles at all: white icon and white label straight on the navy band (2026-09-29). */
.tour-w-tile { background: none; box-shadow: none; }
.tour-w-tile img { filter: brightness(0) invert(1); }
.tour-w-tile span { color: var(--color-surface, #FFFEF6); }
/* larger icons and labels in the pop-up band (2026-09-29): 26 → 34px icons, 12 → 14.5px labels */
.tour-w-tile img { width: 34px; height: 34px; }
.tour-w-tile span { font-size: 14.5px; }
.tour-w-tile { width: 104px; }
@media (max-width: 767px) { .tour-w-tile img { width: 26px; height: 26px; } .tour-w-tile span { font-size: 13.5px; } .tour-w-tile { width: calc(50% - 4px); } }
/* Walk-through step counter "1 of 8" (2026-09-29): darker cream, "of" in lowercase (no forced
   capitals), and more room before the title. */
.tour-count.tour-count-step { color: var(--cream-600, #7E7B6C); text-transform: none; letter-spacing: .04em; margin-bottom: 10px; }
/* Success page: "Welcome to Circle" in the plan-facts style (16px Medium, Circle Black,
   no capitals) rather than an orange uppercase eyebrow (2026-09-29). */
.thanks-eyebrow { font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: 0; text-transform: none; color: var(--color-font, #292626); }
.thanks-eyebrow { font-size: 20px; line-height: 1.4; }   /* larger (2026-09-29): 16 → 20px */
/* Menu "New" tag: Circle Black text, Circle Orange stroke, no fill (2026-09-29). The collapsed
   rail's 9px dot stays filled: an outline that small would all but vanish. */
.dash-nav-new { background: transparent; border: 1px solid var(--orange-400, #FF884C); color: var(--color-font, #292626); font-weight: 500; }
body.dash-rail-collapsed .dash-nav-new { background: var(--orange-400, #FF884C); border: 0; }
.dash-nav-new { border-width: 2px; }   /* 2px stroke (2026-09-29) */
body.dash-rail-collapsed .dash-nav-new { border: 0; }
/* Phones hide the phone mockup, so the band must keep its bottom padding: the zero set for the
   crop left the store icons sitting on the edge (2026-09-29). */
@media (max-width: 767px) { .rel-launch { padding-bottom: 26px; } }
/* Step buttons ("Health Overview", "View requisition"...) in normal case, not all capitals (2026-09-29). */
.dash-home-chip-link { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500; }
/* "Your plan" card as a link to Health Overview: no button, the words carry it (2026-09-29). */
a.dash-home-moment-linkcard { display: block; color: inherit; text-decoration: none; transition: border-color .15s ease; }
@media (max-width: 767px) { a.dash-home-moment-linkcard { display: grid; } }
a.dash-home-moment-linkcard:hover { border-color: var(--color-navy, #10293C); text-decoration: none; }
.dash-home-moment-link { font-weight: 500; color: var(--color-font, #292626); text-decoration: underline; text-underline-offset: 2px; }

/* Walk-in visit: one column. It borrows .dash-bw for type, not the bloodwork two-column grid,
   which pushed the form into the side column (Pavel, 2026-09-29). */
.dash-bw.dash-walkin { display: block; max-width: 44rem; }
.dash-bw.dash-walkin .dash-bw-head { margin-bottom: 18px; }
.dash-bw.dash-walkin .dash-walkin-set { margin-top: 20px; }
.dash-bw.dash-walkin .dash-walkin-set > legend { margin: 0 0 8px; }

/* Home: "Coming up", booked visits no other card shows (dash_home_v3.go homeUpcomingHTML) */
.dash-home-upc { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 10px; border-radius: 16px; background: var(--surface); border: 1px solid rgba(16,41,60,0.10); color: inherit; text-decoration: none; }
.dash-home-upc:hover { border-color: rgba(16,41,60,0.28); }
.dash-home-upc-when { flex: 0 0 auto; font-weight: 500; font-size: 15.5px; color: var(--color-navy, #10293C); }
.dash-home-upc-what { flex: 1 1 auto; min-width: 0; font-size: 14.5px; color: #474444; }
.dash-home-upc-go { flex: 0 0 auto; font-size: 14px; font-weight: 500; color: var(--color-navy, #10293C); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  .dash-home-upc { flex-wrap: wrap; row-gap: 4px; }
  .dash-home-upc-what { flex-basis: 100%; order: 3; }
  .dash-home-upc-go { margin-left: auto; }
}

/* Visit page: "What you told us" (dash_book.go bookToldUsHTML) */
.dash-book-told { margin: 18px auto 4px; max-width: 30rem; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid rgba(16,41,60,0.10); text-align: left; }
.dash-book-told-list { margin: 8px 0 0; }
.dash-book-told-list > div { padding: 8px 0; border-top: 1px solid rgba(16,41,60,0.08); }
.dash-book-told-list > div:first-child { border-top: 0; padding-top: 2px; }
.dash-book-told-list dt { font-size: 12.5px; color: #474444; margin: 0 0 2px; }
.dash-book-told-list dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--color-font, #292626); }
.dash-book-told-note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: #474444; }
/* Clinic card (Pavel, 2026-09-30): the clinic's photo, in place of the pin, runs full
   height down the card's left edge with no padding around it (the card's rounded corners
   clip it); beside it the name + status, the address, the button. Same on every width.
   The walk-in label is gone, so the button takes its spacing. Earlier passes are in
   /root/draft as *.optionA.bak (round avatar) and *.optionC.bak (banner on top). */
.dash-home-opens { position: relative; overflow: hidden; padding: 16px 18px 16px 148px; }
.dash-home-opens-banner { position: absolute; left: 0; top: 0; bottom: 0; display: block; width: 132px; height: 100%; object-fit: cover; margin: 0; }
.dash-home-opens .dash-home-opens-head { flex-wrap: wrap; row-gap: 4px; column-gap: 10px; }
.dash-home-opens .dash-home-opens-date { font-size: 17px; line-height: 1.3; letter-spacing: 0; }
.dash-home-opens .dash-home-opens-status { font-size: 14px; font-weight: 400; }
.dash-home-opens .dash-home-opens-dot { width: 8px; height: 8px; }
.dash-home-opens .dash-home-opens-map { margin-top: 6px; }
.dash-home-opens .dash-home-opens-walkin { margin-top: 14px; }
/* Narrow desktops (card column still 300px): a slimmer photo so the text keeps its room. */
@media (min-width: 1101px) and (max-width: 1279px) {
	.dash-home-opens { padding-left: 124px; }
	.dash-home-opens-banner { width: 108px; }
}
/* Desktop greeting one step down the ramp (52 -> 42, the tablet size) to give the card room;
   the card column widens 300 -> 360 once there is space for both (Pavel, 2026-09-30). */
@media (min-width: 1101px) {
	.dash-home-title { font-size: 42px; }
}
@media (min-width: 1280px) {
	.dash-home-hero-grid { grid-template-columns: minmax(0,1fr) 360px; }
}
/* Home on wide screens (Pavel, 2026-09-30): every band's content shares one 1320px
   measure, centred in the content column. The bands' backgrounds stay full bleed; only
   the inset grows. Before, the hero, the four steps and the social band stretched edge to
   edge while .dash-home-rest (What's new, Treatment Programs) sat centred at 1200px, so
   on a 2500px screen the sections no longer lined up. Viewport units rather than %,
   because --home-pad is also used on nested elements. */
@media (min-width: 1400px) {
	.dash-home { --home-pad: max(64px, calc((100vw - var(--sidebar-w) - 1320px) / 2)); }
	.dash-home-rest { max-width: none; margin: 0; }
}
/* Phones (Pavel, 2026-09-30): "What's new" above the clinic card. When there is a What's new,
   dash_main.go renders a second clinic card after it (.dash-home-opens-late); phones show
   that one and hide the hero's, other widths the reverse. The What's new title drops to
   eyebrow size on phones. */
.dash-home-opens-late { display: none; }
.dash-home-opens-late + .dash-home-road { padding-top: 36px; }  /* same as .dash-home-alerts-top + .dash-home-road */
@media (max-width: 767px) {
	.dash-home:has(.dash-home-opens-late) .dash-home-hero .dash-home-opens { display: none; }
	.dash-home-opens-late { display: block; padding: 20px var(--home-pad) 0; }
	.dash-home-opens-late + .dash-home-road { padding-top: 24px; }
	.dash-home-alerts-top .dash-section-title { font-size: 11px; line-height: 1.5; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary, #6B6560); margin-bottom: 12px; }
}
/* Care-open steps on phones (Pavel, 2026-09-30): the status rail moves to the right of the
   cards. And the rail ran out between steps 3 and 4: its segments were keyed on
   :first-of-type / :last-of-type, but step 4 is an <a> (a link card) and the rest are <div>s,
   so step 3 counted as the last div and step 4 as the first a. Now keyed on position: the
   first card follows the last desktop dot, the last card is the container's last child. */
@media (max-width: 767px) {
	.dash-home-road-care .dash-home-moments { padding-left: 0; padding-right: 40px; }
	.dash-home-road-care .dash-home-moment-mark { left: auto; right: -40px; }
	.dash-home-road-care .dash-home-moment:not(:first-of-type)::before,
	.dash-home-road-care .dash-home-moment:not(:last-of-type)::after { content: none; }
	.dash-home-road-care .dash-home-moment:not(.dash-home-dot + .dash-home-moment)::before,
	.dash-home-road-care .dash-home-moment:not(:last-child)::after { content: ""; position: absolute; left: auto; right: -27px; width: 2px; background: var(--cream-300, #D0CEC4); }
	.dash-home-road-care .dash-home-moment:not(.dash-home-dot + .dash-home-moment)::before { top: -13px; height: calc(50% + 13px); }
	.dash-home-road-care .dash-home-moment:not(:last-child)::after { top: 50%; height: calc(50% + 1px); }
}
/* October release straight under the hero (accounts the clinic is not open for yet): the
   hero's 56px foot + the section's 44px top left ~100px of cream above "October release".
   Now the same 36px (24px on phones) as above "What's new" (Pavel, 2026-09-30). */
.dash-home-noaction:has(> .dash-home-hero + .rel) .dash-home-hero { padding-bottom: 36px; }
.dash-home-hero + .rel { margin-top: 0; }
@media (max-width: 767px) {
	.dash-home-noaction:has(> .dash-home-hero + .rel) .dash-home-hero { padding-bottom: 24px; }
}
/* Foundations members (Pavel, 2026-09-30): the "Four steps" band sits on Teal 200 (was 400 for an hour), full
   bleed. The band only renders for them (homeCareHTML, st.Foundations). The cream-300
   connector, rings and rail vanish on teal, so they take Teal 600, and the upcoming rings
   fill with the band colour so the connector still stops at each ring. The cards stay
   Circle White; text on #DCE4DB is Circle Black, well past AA. */
.dash-home-road-care { background: var(--teal-200, #DCE4DB); padding-bottom: 48px; }
.dash-home-road-care .dash-home-moments::before { border-top-color: var(--teal-600, #6E806C); }
.dash-home-road-care .dash-home-dot:not(.dash-home-dot-past) { background: var(--teal-200, #DCE4DB); border-color: var(--teal-600, #6E806C); }
.dash-home-road-care .dash-home-moment { border-color: transparent; }
@media (max-width: 767px) {
	.dash-home-road-care { padding-bottom: 32px; }
	.dash-home-road-care .dash-home-moment-mark:not(.dash-home-moment-mark-done) { background: var(--teal-200, #DCE4DB); border-color: var(--teal-600, #6E806C); }
	.dash-home-road-care .dash-home-moment-mark.dash-home-moment-mark-now { border-color: var(--orange-400, #FF884C); }
	.dash-home-road-care .dash-home-moment:not(.dash-home-dot + .dash-home-moment)::before,
	.dash-home-road-care .dash-home-moment:not(:last-child)::after { background: var(--teal-600, #6E806C); }
}
/* A coloured band needs its own air: the gap that used to sit above the title moves outside
   the band as cream, and the band gets a padded top of its own. */
.dash-home .dash-home-alerts-top + .dash-home-road-care,
.dash-home .dash-home-opens-late + .dash-home-road-care { margin-top: 36px; padding-top: 48px; }
.dash-home .dash-home-hero + .dash-home-road-care { padding-top: 48px; }
@media (max-width: 767px) {
	.dash-home .dash-home-alerts-top + .dash-home-road-care,
	.dash-home .dash-home-opens-late + .dash-home-road-care { margin-top: 24px; padding-top: 32px; }
	.dash-home .dash-home-hero + .dash-home-road-care { padding-top: 32px; }
}
/* Home "Treatment Programs" on Sand 200, full bleed like the teal "Four steps" band (Pavel,
   2026-09-30). .dash-home-rest carries the page inset, so the carousel pulls back out by
   --home-pad and pads itself in by the same. Rest's own cap is lifted when it holds the
   carousel so the band reaches both edges at every width (rail collapsed included). */
.dash-home-rest:has(.dash-pathway-carousel) { max-width: none; }
.dash-home-rest:has(> .dash-pathway-carousel:last-child) { padding-bottom: 0; }
.dash-home-rest .dash-pathway-carousel { margin: 36px calc(-1 * var(--home-pad)) 0; padding: 48px var(--home-pad); background: var(--sand-200, #F0DEC9); }
.dash-home-rest .dash-pathway-carousel:first-child { margin-top: 16px; }
@media (max-width: 767px) {
	.dash-home-rest .dash-pathway-carousel { margin-top: 24px; padding-top: 32px; padding-bottom: 32px; }
	.dash-home-rest .dash-pathway-carousel:first-child { margin-top: 0; }
}
/* ...and no cream above or below the band (Pavel, 2026-09-30): it meets the teal "Four
   steps" band above and the navy social band below directly. Other sections in the same
   wrapper (Waiting for you, In progress) still keep their gap above it. */
.dash-home-rest:has(> .dash-pathway-carousel:first-child) { padding-top: 0; }
.dash-home-rest .dash-pathway-carousel:first-child { margin-top: 0; }
.dash-home-rest:has(> .dash-pathway-carousel:last-child) + .dash-home-social { margin-top: 0; }
@media (max-width: 767px) {
	.dash-home-rest:has(> .dash-pathway-carousel:first-child) { padding-top: 0; }
	.dash-home-rest:has(> .dash-pathway-carousel:last-child) + .dash-home-social { margin-top: 0; }
}
/* Slide-out menu: member status under the name, as in the rail (Pavel, 2026-09-30). */
.dash-slide-status { margin: 3px 0 0; }
/* "Founding member" on its own line under the name, rail and phone menu (Pavel, 2026-09-30:
   "it's special"): small caps-style label in Sand 700 (5.82:1 on cream, AA), the same
   letter-spaced uppercase as the design system's eyebrow, then "● Active" beneath it. */
.dash-sidebar-founding { margin-top: 4px; font-size: 10.5px; font-weight: 500; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--sand-700, #77572C); }
.dash-sidebar-founding + .dash-sidebar-identity-status { margin-top: 3px; }
.dash-slide-status.dash-sidebar-founding { margin: 4px 0 0; }
/* October release "Next up" on Slate 200, full bleed, the same band treatment as the teal
   "Four steps" and sand "Treatment Programs" (Pavel, 2026-09-30). .rel carries the page
   inset, so the band pulls back out by --home-pad and pads itself in again. It is the
   section's last block, so the band runs straight into the navy social band: no cream
   below. The cream gap above it (under the navy launch card) stays. */
.rel .rel-next { margin: 36px calc(-1 * var(--home-pad, 64px)) 0; padding: 48px var(--home-pad, 64px); background: var(--slate-200, #D9E2E7); }
.rel .rel-next-card { background: var(--color-surface, #FFFEF6); }
.dash-home .rel:has(> .rel-next:last-child) { margin-bottom: 0; }
.dash-home .rel:has(> .rel-next:last-child) + .dash-home-social { margin-top: 0; }
@media (max-width: 767px) {
	.rel .rel-next { margin-top: 24px; padding-top: 32px; padding-bottom: 32px; }
}
/* Active = a green dot on the avatar's lower right, rail and phone menu; the word "Active" is
   gone (Pavel, 2026-09-30). The ring is the rail/menu ground so the dot reads as cut out. */
.dash-avatar-wrap { position: relative; display: block; flex: none; }
.dash-avatar-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box; background: var(--success, #4A7C59); border: 2px solid var(--surface, #FFFEF6); }
.dash-sidebar-founding { margin-top: 3px; }
/* "Waiting for you" and "Next up" take the "Treatment Programs" title treatment (Pavel,
   2026-09-30): 32px Medium, tight tracking, left, 20px below; 24px and 14px on phones.
   "Waiting for you" renders inside the October release (.rel-waiting) before opening day
   and in .dash-home-rest after it; the rest selector also catches "In progress". */
.rel-next > .dash-section-title,
.rel-waiting .dash-section-title,
.dash-home-rest > .dash-section > .dash-section-title {
	margin: 0 0 20px; font-size: 32px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 500;
	color: var(--font); text-align: left;
}
@media (max-width: 767px) {
	.rel-next > .dash-section-title,
	.rel-waiting .dash-section-title,
	.dash-home-rest > .dash-section > .dash-section-title { font-size: 24px; margin-bottom: 14px; }
}
/* "Waiting for you" now opens the October release, above its heading (Pavel, 2026-09-30). */
.rel > .rel-waiting:first-child { margin: 0 0 36px; }
@media (max-width: 767px) { .rel > .rel-waiting:first-child { margin-bottom: 24px; } }
/* The clinic card moves below Treatment Programs on every width (Pavel, 2026-09-30), in its
   own cream band just above the navy social band. The hero keeps only the greeting, so its
   grid is one column. The phone-only second copy (.dash-home-opens-late) is no longer
   rendered; its rules above are inert. */
.dash-home-hero-grid { grid-template-columns: minmax(0,1fr); }
@media (min-width: 1280px) { .dash-home-hero-grid { grid-template-columns: minmax(0,1fr); } }
.dash-home-clinic { padding: 48px var(--home-pad); }
.dash-home-clinic .dash-home-opens { max-width: 440px; margin-top: 0; }
.dash-home-clinic + .dash-home-social { margin-top: 0; }
@media (max-width: 767px) {
	.dash-home-clinic { padding: 32px var(--home-pad); }
	.dash-home-clinic .dash-home-opens { max-width: none; }
}
/* Clinic row below Treatment Programs (Pavel, 2026-09-30): full bleed, 50:50. Desktop: the
   clinic photo in a large circle, centred in the left half; on the right the eyebrow ("Your
   clinic"), the street as the title, the rest of the address, the status, and a Book a visit
   button at its natural width. Phones stack: the photo full width on top (16:9), text under.
   Overrides the older side-panel card rules above. */
.dash-home-clinic { padding: 0; }
.dash-home-clinic .dash-home-opens {
	display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto auto auto 1fr;
	max-width: none; margin: 0; padding: 64px 0; border: 0; border-radius: 0;
	background: var(--color-surface, #FFFEF6); overflow: visible;
}
.dash-home-clinic .dash-home-opens > * { grid-column: 2; margin-left: 24px; margin-right: var(--home-pad); max-width: 440px; }
.dash-home-clinic .dash-home-opens-banner {
	position: static; grid-column: 1; grid-row: 1 / -1; justify-self: center; align-self: center;
	width: min(360px, 80%); height: auto; aspect-ratio: 1 / 1; max-width: none; margin: 0;
	border-radius: 999px; object-fit: cover; object-position: 55% 50%;
}
.dash-home-clinic .dash-home-opens-k { grid-row: 2; margin-top: 0; margin-bottom: 12px; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--orange-600, #CA4E00); }
.dash-home-clinic .dash-home-opens-map { grid-row: 3; display: flex; flex-direction: column; gap: 6px; margin-top: 0; color: inherit; }
.dash-home-clinic .dash-home-opens-title { font-size: 36px; line-height: 1.15; letter-spacing: -0.015em; font-weight: 500; color: var(--color-font, #292626); }
.dash-home-clinic .dash-home-opens-sub { font-size: 16px; line-height: 1.5; color: var(--text-secondary, #6B6560); }
.dash-home-clinic .dash-home-opens-status { grid-row: 4; margin-top: 16px; }
.dash-home-clinic .dash-home-opens-walkin { grid-row: 5; justify-self: start; width: auto; margin-top: 28px; padding-left: 32px; padding-right: 32px; }
@media (max-width: 767px) {
	.dash-home-clinic .dash-home-opens { grid-template-columns: 1fr; grid-template-rows: none; padding: 0 0 32px; }
	.dash-home-clinic .dash-home-opens > * { grid-column: 1; grid-row: auto; margin-left: var(--home-pad); margin-right: var(--home-pad); max-width: none; }
	.dash-home-clinic .dash-home-opens-banner { justify-self: stretch; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 22px; border-radius: 0; }
	.dash-home-clinic .dash-home-opens-k { font-size: 11px; margin-bottom: 8px; }
	.dash-home-clinic .dash-home-opens-title { font-size: 26px; }
	.dash-home-clinic .dash-home-opens-sub { font-size: 15px; }
	.dash-home-clinic .dash-home-opens-walkin { justify-self: stretch; width: 100%; margin-top: 20px; }
}
/* Social band title in Circle Cream (Pavel, 2026-09-30), with its Follow button (buttons.css). */
.dash-home-social .dash-home-social-title { color: var(--color-cream, #F4F1E2); }
/* Rising sun behind the top section (greeting + the cards under it), Pavel 2026-09-30.
   A soft orange disc (a radial gradient, i.e. a heavily blurred circle) whose centre comes
   to rest on the bottom edge of the top section, so only its upper half glows above that
   line, like a sun on the horizon. It is drawn in a box that ends at that edge, so the edge
   stays put while the disc rises into place. The pseudo-element sits on whichever block ends
   the top section: the What's new cards when there are any, otherwise the hero. The content
   above it is lifted (z-index 1) so the glow stays behind the text and cards. */
@property --dash-sun-y { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
.dash-home-hero-grid { z-index: 1; }
.dash-home-alerts-top { position: relative; }
.dash-home-alerts-top > * { position: relative; z-index: 1; }
.dash-home-alerts-top::after,
.dash-home:not(:has(> .dash-home-alerts-top)) .dash-home-hero::after {
	content: ""; position: absolute; z-index: 0; left: 50%; bottom: 0;
	width: 820px; height: 380px; margin-left: -410px; pointer-events: none;
	background: radial-gradient(circle 360px at 50% var(--dash-sun-y),
		rgba(255,136,76,.50) 0%, rgba(255,136,76,.34) 30%, rgba(255,136,76,.14) 60%, rgba(255,136,76,0) 100%);
	animation: dash-sun-rise 2.6s cubic-bezier(.2,.7,.2,1) .15s both;
}
@keyframes dash-sun-rise {
	from { --dash-sun-y: 135%; opacity: 0; }
	to   { --dash-sun-y: 100%; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.dash-home-alerts-top::after,
	.dash-home:not(:has(> .dash-home-alerts-top)) .dash-home-hero::after { animation: none; }
}
/* The disc is wider than a phone; the page never scrolls sideways for it. */
.dash-home { overflow-x: clip; }
@media (max-width: 767px) {
	.dash-home-alerts-top::after,
	.dash-home:not(:has(> .dash-home-alerts-top)) .dash-home-hero::after { width: 560px; height: 260px; margin-left: -280px; background: radial-gradient(circle 250px at 50% var(--dash-sun-y), rgba(255,136,76,.50) 0%, rgba(255,136,76,.34) 30%, rgba(255,136,76,.14) 60%, rgba(255,136,76,0) 100%); }
}
/* Clinic row, second pass (Pavel, 2026-09-30): Circle Cream band; on desktop the photo sits at
   the inner edge of its half and the text starts 56px from it, so the two read as one group;
   the eyebrow in Cream 700 (a darker Circle Cream, 5.75:1, AA) instead of orange. */
.dash-home-clinic .dash-home-opens { background: var(--color-cream, #F4F1E2); }
.dash-home-clinic .dash-home-opens-k { color: var(--cream-700, #605E52); }
@media (min-width: 768px) {
	.dash-home-clinic .dash-home-opens-banner { justify-self: end; }
	.dash-home-clinic .dash-home-opens > :not(.dash-home-opens-banner) { margin-left: 56px; }
}
/* Rising sun, second pass (Pavel, 2026-09-30, Figma CH 2016:2963): the glow ended at the
   cards and a strip of plain cream sat between it and the teal band. The gap now lives inside
   the top section (padding under the cards) and the band follows with no margin, so the
   horizon is the band's top edge. And a stronger sun. */
.dash-home-alerts-top { padding-bottom: 36px; }
.dash-home .dash-home-alerts-top + .dash-home-road-care { margin-top: 0; }
.dash-home-alerts-top::after,
.dash-home:not(:has(> .dash-home-alerts-top)) .dash-home-hero::after {
	height: 440px;
	background: radial-gradient(circle 400px at 50% var(--dash-sun-y),
		rgba(255,136,76,.85) 0%, rgba(255,136,76,.60) 28%, rgba(255,136,76,.28) 58%, rgba(255,136,76,0) 100%);
}
@media (max-width: 767px) {
	.dash-home-alerts-top { padding-bottom: 24px; }
	.dash-home .dash-home-alerts-top + .dash-home-road-care { margin-top: 0; }
	.dash-home-alerts-top::after,
	.dash-home:not(:has(> .dash-home-alerts-top)) .dash-home-hero::after {
		width: 640px; height: 320px; margin-left: -320px;
		background: radial-gradient(circle 300px at 50% var(--dash-sun-y),
			rgba(255,136,76,.85) 0%, rgba(255,136,76,.60) 28%, rgba(255,136,76,.28) 58%, rgba(255,136,76,0) 100%);
	}
}
/* Rising sun, third pass (Pavel, 2026-09-30): the disc's centre sits on the section's bottom
   LEFT corner, so a quarter of it glows up and to the right from that corner. */
.dash-home-alerts-top::after,
.dash-home:not(:has(> .dash-home-alerts-top)) .dash-home-hero::after {
	left: 0; margin-left: 0; width: 520px; height: 460px;
	background: radial-gradient(circle 440px at 0% var(--dash-sun-y),
		rgba(255,136,76,.85) 0%, rgba(255,136,76,.60) 28%, rgba(255,136,76,.28) 58%, rgba(255,136,76,0) 100%);
}
@media (max-width: 767px) {
	.dash-home-alerts-top::after,
	.dash-home:not(:has(> .dash-home-alerts-top)) .dash-home-hero::after {
		left: 0; margin-left: 0; width: 340px; height: 340px;
		background: radial-gradient(circle 320px at 0% var(--dash-sun-y),
			rgba(255,136,76,.85) 0%, rgba(255,136,76,.60) 28%, rgba(255,136,76,.28) 58%, rgba(255,136,76,0) 100%);
	}
}
/* Band colours swapped (Pavel, 2026-09-30): the clinic row takes Slate 200 (what "Next up"
   had), and "Next up" takes Teal 200, the Foundations "Four steps" band. */
.dash-home-clinic .dash-home-opens { background: var(--color-cream, #F4F1E2); }   /* back to Circle Cream (Pavel, same day) */
.rel .rel-next { background: var(--teal-200, #DCE4DB); }
/* "Waiting for you" cards in the hero under the sub copy, no heading (Pavel, 2026-09-30). */
.dash-home-waiting { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; max-width: 760px; }
.dash-home-hero-copy > .dash-home-title + .dash-home-waiting { margin-top: 8px; }
/* October release (Pavel, 2026-09-30): more air above it, and its eyebrow ("October release")
   in Cream 700, the darker Circle Cream the clinic row's eyebrow uses, instead of orange. */
.dash-home .dash-home-hero + .rel { margin-top: 0; padding-top: 56px; }
.rel-k:not(.rel-k-light) { color: var(--cream-700, #605E52); }
@media (max-width: 767px) {
	.dash-home .dash-home-hero + .rel { padding-top: 36px; }
}
/* ...and the same space below the "October release" block, before the navy October 13 card
   (Pavel, 2026-09-30): 56px, 36px on phones. */
.rel > .rel-open + .rel-launch { margin-top: 56px; }
@media (max-width: 767px) { .rel > .rel-open + .rel-launch { margin-top: 36px; } }
/* Clinic row on phones (Pavel, 2026-09-30): the circle treatment as on desktop instead of the
   full-width 16:9 photo, and the Book a visit button at its natural width. */
@media (max-width: 767px) {
	.dash-home-clinic .dash-home-opens { padding: 40px 0; }
	.dash-home-clinic .dash-home-opens-banner {
		justify-self: start; width: 200px; max-width: none; margin: 0 var(--home-pad) 24px;
		aspect-ratio: 1 / 1; border-radius: 999px; object-position: 55% 50%;
	}
	.dash-home-clinic .dash-home-opens-walkin { justify-self: start; width: auto; padding-left: 32px; padding-right: 32px; }
}
/* Clinic row on phones, second pass (Pavel, 2026-09-30): the circle photo to the right of the
   address. Two columns: eyebrow / address / status on the left, the photo on the right beside
   them, the button under both. */
@media (max-width: 767px) {
	.dash-home-clinic .dash-home-opens { grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto auto auto; column-gap: 16px; padding-left: var(--home-pad); padding-right: var(--home-pad); }
	.dash-home-clinic .dash-home-opens > * { grid-column: 1; margin-left: 0; margin-right: 0; }
	.dash-home-clinic .dash-home-opens-k { grid-row: 1; }
	.dash-home-clinic .dash-home-opens-map { grid-row: 2; }
	.dash-home-clinic .dash-home-opens-status { grid-row: 3; }
	.dash-home-clinic .dash-home-opens-walkin { grid-row: 4; grid-column: 1 / -1; }
	.dash-home-clinic .dash-home-opens-banner { grid-column: 2; grid-row: 1 / 4; align-self: center; justify-self: end; width: 116px; margin: 0; }
}
/* ...photo on the LEFT of the address instead (Pavel, 2026-09-30). */
@media (max-width: 767px) {
	.dash-home-clinic .dash-home-opens { grid-template-columns: auto minmax(0,1fr); }
	.dash-home-clinic .dash-home-opens > * { grid-column: 2; }
	.dash-home-clinic .dash-home-opens-banner { grid-column: 1; justify-self: start; }
	.dash-home-clinic .dash-home-opens-walkin { grid-column: 1 / -1; }
}
/* Quick actions under the greeting (Pavel, 2026-09-30): Book a visit (primary), Health Overview
   and Message the team (secondary), natural width, wrapping. */
.dash-home-quick { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.dash-home-hero-copy > .dash-home-title + .dash-home-quick { margin-top: 8px; }
.dash-home-quick-btn { width: auto; }
@media (max-width: 767px) {
	.dash-home-quick { gap: 8px; margin-top: 20px; }
	.dash-home-quick-btn { flex: 1 1 auto; }
}
/* Quick actions on phones: the two buttons share one row (Pavel, 2026-09-30). */
@media (max-width: 767px) {
	.dash-home-quick { flex-wrap: nowrap; }
	.dash-home-quick-btn { flex: 1 1 0; min-width: 0; padding-left: 12px !important; padding-right: 12px !important; white-space: nowrap; }
}
/* Phone bottom bar: slides away while scrolling down, back on scrolling up (navbar.js),
   Pavel 2026-09-30. A transform, so it is cheap to animate and moves the home-indicator
   padding with it. Reduced motion: it still hides and shows, without the slide. */
@media (max-width: 767px) {
	.dash-bottom-nav { transition: transform .22s cubic-bezier(.2,.7,.2,1); will-change: transform; }
	.dash-bottom-nav.dash-bottom-nav-hidden { transform: translateY(100%); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.dash-bottom-nav { transition: none; }
}
/* Clinic row pass 3 (Pavel, 2026-09-30): the status sits beside the "Your clinic" eyebrow
   (under it on phones), PATH level on its own address line, and Book a visit is a secondary
   button in the text column on every width (phones: beside the photo, not under it). */
.dash-home-clinic .dash-home-opens-kline { grid-row: 2; display: flex; align-items: center; flex-wrap: wrap; column-gap: 16px; row-gap: 6px; margin-bottom: 12px; }
.dash-home-clinic .dash-home-opens-kline .dash-home-opens-k { margin: 0; }
.dash-home-clinic .dash-home-opens-kline .dash-home-opens-status { margin: 0; font-size: 14px; font-weight: 400; }
.dash-home-clinic .dash-home-opens-walkin { grid-row: 4; width: auto; margin-top: 24px; }
@media (max-width: 767px) {
	.dash-home-clinic .dash-home-opens-kline { grid-row: 1; flex-direction: column; align-items: flex-start; margin-bottom: 8px; }
	.dash-home-clinic .dash-home-opens-map { grid-row: 2; }
	.dash-home-clinic .dash-home-opens-walkin { grid-row: 3; grid-column: 2; justify-self: start; margin-top: 16px; padding-left: 24px; padding-right: 24px; }
	.dash-home-clinic .dash-home-opens-banner { grid-row: 1 / 4; }
}
/* Clinic row pass 4 (Pavel, 2026-09-30): no eyebrow; "Your Clinic" is the title, with the
   status beside it (under it on phones). */
.dash-home-clinic .dash-home-opens-kline { margin-bottom: 8px; column-gap: 20px; }
.dash-home-clinic .dash-home-opens-kline .dash-home-opens-title { margin: 0; }
@media (max-width: 767px) {
	.dash-home-clinic .dash-home-opens-kline { margin-bottom: 6px; row-gap: 4px; }
}
/* Clinic row pass 5 (Pavel, 2026-09-30): title and status share one line whenever they fit,
   phones included; when they don't, the status wraps whole under the title (neither breaks). */
.dash-home-clinic .dash-home-opens-kline .dash-home-opens-title,
.dash-home-clinic .dash-home-opens-kline .dash-home-opens-status { white-space: nowrap; }
@media (max-width: 767px) {
	.dash-home-clinic .dash-home-opens-kline { flex-direction: row; align-items: center; column-gap: 14px; }
}
/* Narrow phones (<=359px): smaller photo so the address lines stay whole. */
@media (max-width: 359px) {
	.dash-home-clinic .dash-home-opens-banner { width: 88px; }
}
/* Clinic row pass 6 (Pavel, 2026-09-30): the status sits above "Your Clinic" on every width. */
.dash-home-clinic .dash-home-opens-kline { flex-direction: column; align-items: flex-start; row-gap: 8px; }
@media (max-width: 767px) {
	.dash-home-clinic .dash-home-opens-kline { flex-direction: column; align-items: flex-start; row-gap: 6px; }
}
/* Phones (Pavel, 2026-09-30): "Your Clinic ● Open now" on one line, never broken. */
@media (max-width: 767px) {
	/* wraps since 2026-10-05: "Opens in phases from Oct 13" is longer than the row and ran off the screen (Sapna) */
	.dash-home-clinic .dash-home-opens-kline { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; }
	.dash-home-clinic .dash-home-opens-kline .dash-home-opens-title { order: -1; }
}
@media (max-width: 767px) {
	.dash-home-clinic .dash-home-opens-banner { width: clamp(72px, calc(100vw - 280px), 116px); }
	.dash-home-clinic .dash-home-opens-kline .dash-home-opens-title { font-size: clamp(20px, calc(6vw + 1px), 26px); }
}
@media (max-width: 389px) {
	.dash-home-clinic .dash-home-opens-kline { column-gap: 8px; }
	.dash-home-clinic .dash-home-opens-kline .dash-home-opens-status { font-size: 13px; gap: 6px; }
}
/* One set of "things to look at" in the hero (Pavel, 2026-09-30): the to-dos (homeAskCardHTML)
   and the October release news card use the news card (.dash-alert): chips, 20px title, 15px
   line, one button. A to-do card is one link; the button inside it is its label. */
.dash-home-waiting .dash-alert { margin: 0; }
a.dash-home-news-link { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
@media (hover: hover) {
	a.dash-home-news-link:hover { border-color: rgba(220,182,136,.9); box-shadow: 0 2px 10px rgba(41,38,38,.06); }
}
a.dash-home-news-link:focus-visible { outline: 2px solid var(--navy, #13293D); outline-offset: 2px; }
/* "Next up" removed (Pavel, 2026-09-30): the release band now ends on the October 13 card,
   so it takes the same space below it as above (56px, 36px on phones). */
.dash-home .rel:has(> .rel-launch:last-child) { margin-bottom: 56px; }
@media (max-width: 767px) { .dash-home .rel:has(> .rel-launch:last-child) { margin-bottom: 36px; } }
/* Mini phone tab bar = the real phone bar (Pavel, 2026-09-30): five tabs with labels. The
   active-tab filter moves from the <img> to the tab's own img. */
.rp-tabs { justify-content: space-between; padding-left: .4em; padding-right: .4em; }
.rp-tab { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .25em; color: var(--text-secondary, #6B6560); }
.rp-tab img { width: 1.7em; height: 1.7em; }
.rp-tab span { font-size: .8em; line-height: 1; white-space: nowrap; }
.rp-tab-on { color: var(--color-font, #292626); font-weight: 500; }
.rp-tabs .rp-tab-on { filter: none; }
.rp-tabs .rp-tab-on img { filter: brightness(0) invert(15%) drop-shadow(0 0 0.35px #292626) drop-shadow(0 0 0.35px #292626); }
/* Appointments (Pavel, 2026-09-30): the Foundations Visit leads the page (a card into its steps),
   then Upcoming, booking, and Past; a past appointment opens its own page (.appt-detail). */
.appt-found { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid rgba(220,182,136,.45); color: var(--font); text-decoration: none; transition: border-color 140ms, box-shadow 140ms; }
.appt-found:hover { border-color: rgba(220,182,136,.9); box-shadow: 0 8px 20px -14px rgba(16,41,60,.45); text-decoration: none; }
.appt-found-ico { width: 24px; height: 24px; }
.appt-row-past .appt-row-when { color: var(--text-secondary); }
.appt-facts { display: flex; flex-direction: column; gap: 14px; margin: 24px 0 0; padding: 18px 20px; border-radius: 16px; background: var(--surface); border: 1px solid rgba(220,182,136,.45); }
.appt-facts > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; }
.appt-facts dt { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); padding-top: 2px; }
.appt-facts dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--font); }
.appt-detail .appt-acts { margin-top: 20px; }
@media (max-width: 767px) {
	.appt-facts > div { grid-template-columns: 1fr; gap: 4px; }
}
/* The Foundations card shares .appt-row-what/-go with the rows; keep its own three columns on
   phones (the row rules put both in column 1/2 and squeezed the text into the icon's 24px). */
.appt-found > .appt-found-ico { grid-column: 1; grid-row: 1; }
.appt-found > .appt-row-what { grid-column: 2; grid-row: 1; min-width: 0; }
.appt-found > .appt-row-go { grid-column: 3; grid-row: 1; }
@media (max-width: 767px) { .appt-found { gap: 12px; padding: 14px 16px; } }
/* Completed appointment eyebrow (Pavel, 2026-09-30): a filled green check, then "Completed". */
.appt-status-done { display: flex; align-items: center; gap: 8px; color: var(--color-font, #292626); }
.appt-status-ico { flex: none; width: 18px; height: 18px; }
/* Empty sections on the Appointments list are a plain line, not a dashed card (Pavel, 2026-09-30). */
.appt-none { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
/* Appointments pass (Pavel, 2026-09-30): back is a larger black arrow on its own; a visit's
   header sits in a card; actions are the app's secondary buttons (buttons.css paints them);
   a bookable type is one large secondary button: icon, title + length, arrow. */
.appt-back { margin: 0 0 14px; }
.appt-back-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -10px; border-radius: 999px; }
.appt-back-arrow img { width: 28px; height: 28px; }
@media (hover: hover) { .appt-back-arrow:hover { background: rgba(16,41,60,.06); } }
.appt-head-card { padding: 22px 24px; border-radius: 16px; background: var(--surface); border: 1px solid rgba(220,182,136,.45); }
.appt-head-card .appt-title { margin-top: 2px; }
.appt-act.circle-btn { min-height: 44px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 500; text-decoration: none; width: auto; }
.appt-offer-btn, .appt-offer-locked { flex-direction: row; align-items: center; gap: 16px; }
.appt-offer-btn { padding: 16px 22px; border-radius: 999px; background: transparent; border: 1.5px solid var(--btn-secondary-border, #10293C); }
.appt-offer-btn:hover { border-color: var(--btn-secondary-border, #10293C); background: var(--btn-secondary-bg-hover, rgba(16,41,60,.06)); box-shadow: none; }
.appt-offer-txt { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.appt-offer-ico { flex: none; width: 24px; height: 24px; }
.appt-offer-arrow { flex: none; width: 22px; height: 22px; }
.appt-offer-locked { padding: 16px 22px; }
.appt-offer-locked .appt-offer-lock { margin-top: 4px; }
@media (max-width: 767px) {
	.appt-head-card { padding: 18px 18px; }
	.appt-offer-btn { padding: 14px 18px; }
}
.appt-offers { align-items: start; }   /* a pill keeps its own height beside a taller locked card */
/* Offer button: 20px corners on Circle White (Pavel, 2026-09-30); a little less air under the
   page title (was ~60px to the first section heading, now ~40px). */
.appt-offer-btn { border-radius: 20px; background: var(--color-surface, #FFFEF6); }
.appt-offer-btn:hover { background: color-mix(in srgb, var(--color-surface, #FFFEF6) 94%, #10293C); }
.appt-head + .appt-h2 { margin-top: 14px; }
.appt-offer-locked .appt-offer-lock { margin-top: 0; line-height: 1.4; }   /* tighter under "75 min · In person" (Pavel, 2026-09-30) */
/* Chip text centred in the pill on every browser (Pavel, 2026-09-30: "a little too high"). The
   pill used to take its height from the font's line box, and Safari/macOS place CircularXX's caps
   high in it. Trimming the box to the cap height and baseline makes equal padding equal space
   above and below the letters. Browsers without text-box keep the old sizing. */
@supports (text-box: trim-both cap alphabetic) {
	.dash-alert-chip { line-height: 1; padding: 6.5px 8px; text-box: trim-both cap alphabetic; }
}
/* Appointments cards use the home news card type (Pavel, 2026-09-30): title 20px Medium,
   the line under it 15px (.dash-alert-t / .dash-alert-d). */
.appt-found .appt-row-what,
.appt-row .appt-row-what,
.appt-offer .appt-offer-t { font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.appt-found .appt-row-sub,
.appt-row .appt-row-sub,
.appt-offer .appt-offer-sub,
.appt-offer .appt-offer-lock { font-size: 15px; line-height: 1.55; letter-spacing: 0; }
.appt-row .appt-row-sub, .appt-found .appt-row-sub { margin-top: 2px; }
.appt-row-when { font-size: 15px; }
.appt-row-when b { font-size: 16px; }
/* Foundations card without its icon or section heading (Pavel, 2026-09-30). */
.appt-found-plain { grid-template-columns: 1fr auto; }
.appt-found-plain > .appt-row-what { grid-column: 1; }
.appt-found-plain > .appt-row-go { grid-column: 2; }
.appt-head + .appt-found-list { margin-top: 4px; }
/* "Your Foundations Visit" is the same button as a bookable type, in the same two-column grid, so
   it has the same width (Pavel, 2026-09-30). */
.appt-head + .appt-found-list { margin-top: 4px; }
.appt-found-booked { margin-top: 10px; }
/* Dates read as one item (Pavel, 2026-09-30): the past row's date is a single line, the visit
   page's date line one colour and weight. */
.appt-row-when-one { display: block; font-size: 16px; font-weight: 500; color: var(--font); white-space: nowrap; font-variant-numeric: normal; font-feature-settings: normal; }
.appt-row-past .appt-row-when-one { color: var(--font); }
.appt-lede-one { color: var(--font); }
@media (max-width: 767px) { .appt-row-when-one { font-size: 15px; } }
/* tabular-nums in CircularXXSub sets commas and spaces full width ("Wed ,  Sep  30 ,  2026"),
   which is what made the dates read as several pieces; off for appointment dates and times.
   The date column is wide enough for "Wed, Sep 30, 2026" on desktop. */
.appt-row-when { font-variant-numeric: normal; }
@media (min-width: 768px) { .appt-row { grid-template-columns: 164px 1fr auto; } }
/* Past rows (Pavel, 2026-09-30): the date in the light second-line treatment ("Completed · In
   person": 15px, regular, secondary), equal space above and below the visit title, and a 22px
   chevron like the arrow on the buttons above. */
.appt-row-when-one, .appt-row-past .appt-row-when-one { font-size: 15px; font-weight: 400; color: var(--text-secondary); line-height: 1.55; }
.appt-row .appt-row-sub { margin-top: 4px; }
.appt-row-chev { width: 22px; height: 22px; font-size: 0; }
@media (max-width: 767px) {
	.appt-row { row-gap: 4px; }
	.appt-row-when-one, .appt-row-past .appt-row-when-one { font-size: 15px; }
}
.appt-none-upcoming { margin-top: 28px; }   /* stands in for the Upcoming section when nothing is booked */
/* No "Book an appointment" heading: the booking buttons follow the line above them (Pavel, 2026-09-30). */
.appt-none-upcoming + .appt-offers, .appt-list + .appt-offers { margin-top: 16px; }
.appt-none-upcoming + .appt-none, .appt-list + .appt-none { margin-top: 16px; }
.appt-offer-btn.appt-offer-pill { border-radius: 999px; padding-left: 24px; padding-right: 24px; }   /* routine visit button fully rounded (Pavel, 2026-09-30) */
/* Routine pill on phones: less padding and gap so "Book a routine / sick visit" stays on one line
   (it needs ~226px at 20px); under 390px the title steps down to 18px. */
@media (max-width: 767px) {
	.appt-offer-btn.appt-offer-pill { padding-left: 18px; padding-right: 18px; gap: 12px; }
}
@media (max-width: 389px) {
	.appt-offer-btn.appt-offer-pill .appt-offer-t { font-size: 18px; }
}
/* Routine pill without its icon (Pavel, 2026-09-30): the room it frees keeps the title at 20px on one line down to 360px. */
@media (max-width: 389px) { .appt-offer-btn.appt-offer-pill .appt-offer-t { font-size: 20px; } }
@media (max-width: 767px) { .appt-offer-btn.appt-offer-pill { padding-left: 22px; } }
/* Booking buttons: the second line sits closer under the title (Pavel, 2026-09-30). */
.appt-offer-btn .appt-offer-txt { gap: 0; }
.appt-offer-btn .appt-offer-sub { line-height: 1.4; margin-top: 2px; }
@media (max-width: 767px) { .appt-offer-btn.appt-offer-pill { padding-left: 18px; } }
/* The home screen's "Book a visit" button on the Appointments page (Pavel, 2026-09-30). */
.appt-bookvisit { margin-top: 16px; }
.appt-bookvisit + .appt-offers { margin-top: 12px; }
@media (max-width: 767px) { .appt-bookvisit .dash-home-quick-btn { flex: none; } }
/* Appointments "Book a visit": the home button's width. On phones home shows it half a row
   (it shares the row with Health Overview), so it takes half the row here too; desktop is the
   natural width on both. More air above it on desktop (Pavel, 2026-09-30). */
.appt-bookvisit { display: flex; gap: 8px; }
@media (min-width: 768px) { .appt-bookvisit { margin-top: 32px; } }
@media (max-width: 767px) { .appt-bookvisit .dash-home-quick-btn { flex: 0 0 calc((100% - 8px) / 2); } }

/* Checkout: the agreement tickbox (dash_membership_checkout.go) */
.membership-agree { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--color-font, #292626); cursor: pointer; text-align: left; }
.membership-agree input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--color-navy, #10293C); }
.membership-agree a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
#membership-start-payment-btn:disabled { opacity: .45; cursor: not-allowed; }

/* The Membership & Program Agreement page (dash_agreement.go) */
.agr-page { max-width: 46rem; }
.agr-ver { margin: 6px 0 22px; font-size: 14px; line-height: 1.55; color: #474444; }
.agr-ver a { color: inherit; text-decoration: underline; }
.agr-body { font-size: 15px; line-height: 1.65; color: var(--color-font, #292626); }
.agr-body h2 { margin: 28px 0 8px; font-size: 17px; font-weight: 500; }
.agr-body h2.agr-sched { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(16,41,60,0.12); font-size: 15px; letter-spacing: .04em; }
.agr-body h3 { margin: 18px 0 6px; font-size: 15px; font-weight: 500; }
.agr-body p { margin: 0 0 12px; }
.agr-callout { margin: 0 0 20px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid rgba(16,41,60,0.12); font-size: 14px; }
.agr-consents { margin: 8px 0 0; }
.agr-consents > div { padding: 10px 0; border-top: 1px solid rgba(16,41,60,0.08); }
.agr-consents dt { font-weight: 500; margin: 0 0 3px; }
.agr-consents dd { margin: 0; }
.agr-accept { margin: 32px 0 8px; padding: 18px 20px; border-radius: 16px; background: var(--surface); border: 1px solid rgba(16,41,60,0.14); }
.agr-accept .membership-agree { margin-top: 0; }
.agr-accept-done p { margin: 0; font-size: 15px; color: var(--color-font, #292626); }
.agr-accept-err { margin: 8px 0 0; font-size: 13.5px; color: #8A2A1A; }
/* the signature: a typed name above the tick (dash_agreement.go, 2026-10-03) */
.agr-sign { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; font-size: 14px; color: #474444; }
.agr-sign input { width: 100%; max-width: 420px; box-sizing: border-box; padding: 13px 14px; border: 1px solid rgba(16,41,60,.22); border-radius: 12px; background: #FFFEF6; font: inherit; font-size: 16px; color: var(--color-font, #292626); }
.agr-sign input:focus { outline: 2px solid var(--color-navy, #10293C); outline-offset: 1px; }
.agr-accept-lead { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--color-font, #292626); }
.agr-accept-fine { margin: 12px 0 0; font-size: 13px; color: #474444; }
.agr-accept .circle-btn { margin-top: 16px; }
.agr-accept-done .agr-next { margin-top: 16px; }
.agr-gate { max-width: 36rem; }
.agr-gate-p { margin: 12px 0 24px; font-size: 16px; line-height: 1.6; color: var(--color-font, #292626); }
.dash-home-upc-list { display: flex; flex-direction: column; gap: 16px; }

/* ══ HOME-DARK-TOP (Pavel, 2026-10-01) ═══════════════════════════════════════════════════════
   The top of the home page (greeting, and the "What's new" cards under it) takes the Health
   page's dark ground: Circle Navy falling to warm brown with the orange glow at the foot. The
   type on it inverts, the quick buttons become light outlines, and the cards standing on it get
   a glass edge. The cream rules above are untouched: DELETE THIS BLOCK TO SWITCH BACK. */
.dash-home-hero { background: linear-gradient(180deg, #10293C 0%, #1B3544 100%); }
.dash-home-alerts-top { background: radial-gradient(150% 150% at 0% 120%, rgba(255,136,76,.74) 0%, rgba(255,136,76,.30) 34%, rgba(255,136,76,0) 62%), linear-gradient(180deg, #1B3544 0%, #2D2A22 60%, #3E2A1E 100%); }
.dash-home:not(:has(> .dash-home-alerts-top)) .dash-home-hero { background: radial-gradient(150% 150% at 0% 120%, rgba(255,136,76,.74) 0%, rgba(255,136,76,.30) 34%, rgba(255,136,76,0) 62%), linear-gradient(345deg, #3E2A1E 0%, #2D2A22 35%, #1B3544 65%, #10293C 100%); }
/* the rising sun belonged to the cream ground; the dark one carries its own glow */
.dash-home-alerts-top::after,
.dash-home:not(:has(> .dash-home-alerts-top)) .dash-home-hero::after { display: none; }
.dash-home-hero .dash-home-title { color: var(--color-cream, #F4F1E2); }   /* Circle Cream (Pavel, 2026-10-01) */
.dash-home-hero .dash-home-lede { color: rgba(255,254,246,.72); }
.dash-home-lede + .dash-home-lede { margin-top: 12px; } /* the registered screen has three paragraphs (2026-10-10) */
.dash-home-hero .dash-home-lede a { color: #FFFEF6; }
.dash-home-hero .dash-home-eyebrow { background: rgba(255,255,255,.12); color: rgba(255,254,246,.82); }
.dash-home-hero .dash-home-quick { --btn-secondary-border: rgba(255,254,246,.45); --btn-secondary-fg: #FFFEF6; --btn-secondary-bg-hover: rgba(255,255,255,.10); }
/* glass edge: the card keeps its light face (and all its type), and gains a bright hairline, a
   frosted rim and a soft drop so it sits on the dark ground like a pane */
.dash-home-hero .dash-alert,
.dash-home-alerts-top .dash-alert {
	background: var(--color-surface, #FFFEF6);   /* fully opaque (Pavel, 2026-10-01) */
	border: 1px solid rgba(255,255,255,.7);
	box-shadow: 0 0 0 5px rgba(255,255,255,.10), inset 0 1px 0 #fff, 0 26px 44px -26px rgba(0,0,0,.6);
}
/* Phone top bar on the home page: clear over the dark greeting until the page is scrolled
   (the shell adds .dash-header-scrolled past 80px), then the usual cream bar. The dark ground
   runs up behind it, so the greeting gets the bar's height as extra top padding. Only when the
   greeting is the first thing on the page. The bar's height and blur are not touched. */
@media (max-width: 767px) {
	body.dash-body:has(#dash-content > .dash-home:first-child > .dash-home-hero:first-child) .dash-content { padding-top: 0; }
	body.dash-body #dash-content > .dash-home:first-child > .dash-home-hero:first-child { padding-top: calc(var(--topbar-h) + 24px); }
	.dash-mobile-header { transition: background-color .25s ease, box-shadow .25s ease, color .25s ease; }
	body:has(#dash-content > .dash-home:first-child > .dash-home-hero:first-child) .dash-mobile-header:not(.dash-header-scrolled) { background: transparent; box-shadow: none; color: var(--color-cream, #F4F1E2); }
	body:has(#dash-content > .dash-home:first-child > .dash-home-hero:first-child) .dash-mobile-header:not(.dash-header-scrolled) .dash-mobile-header-logo img { filter: brightness(0) invert(1) sepia(1) brightness(.955); }   /* white, then tinted to Circle Cream */
	body:has(#dash-content > .dash-home:first-child > .dash-home-hero:first-child) .dash-mobile-header:not(.dash-header-scrolled) :is(.dash-mobile-header-bell, .dash-mobile-header-hamburger):hover { background: rgba(255,255,255,.12); }
}
/* ══ /HOME-DARK-TOP ══════════════════════════════════════════════════════════════════════════ */
/* "Your Foundations Visit," / "step by step": the break falls after the comma on phones (Pavel, 2026-10-01). */
@media (max-width: 767px) { .dash-home-roadtitle-rest { display: block; } }

/* ══ LAUNCH-BAND-SLATE (Pavel, 2026-10-01) ═══════════════════════════════════════════════════
   "October 13, the clinic opens": the band runs edge to edge (no card, no radius) on Slate 300,
   with the orange glow rising from its foot, and the type on it goes dark (Circle Black; store
   icons too). The navy sunrise rules above are untouched: DELETE THIS BLOCK TO SWITCH BACK. */
.rel .rel-launch {
	margin-left: calc(-1 * var(--home-pad, 64px)); margin-right: calc(-1 * var(--home-pad, 64px));
	padding: 48px var(--home-pad, 64px) 0;
	border-radius: 0;
	color: var(--color-font, #292626);
	/* second try (Pavel, 2026-10-01): Mist 100 falling to a Mist 50 equivalent at the foot (there is
	   no --mist-50 token; #F7F9FB is the ramp carried one step lighter). Slate 300 + orange glow was first. */
	/* third try: Mist 200, falling one step lighter (Mist 100) at the foot */
	background: linear-gradient(to bottom, var(--mist-200, #DBE2E9) 0%, var(--mist-200, #DBE2E9) 40%, var(--mist-100, #EEF2F6) 100%);
}
.rel .rel-launch-copy { padding-bottom: 48px; }
.rel .rel-launch-h { color: var(--color-font, #292626); }
.rel .rel-launch-list li { color: var(--color-font, #292626); }
.rel .rel-launch-list b { color: var(--color-font, #292626); }
.rel .rel-store-ico { filter: brightness(0); opacity: .82; }
.rel .rel-stores { padding-left: 22px; }   /* in line with the list text, past the bullets (Pavel, 2026-10-01) */
@media (max-width: 767px) {
	.rel .rel-launch { padding-top: 32px; padding-bottom: 0; }
	.rel .rel-launch-copy { padding-bottom: 32px; }
}
/* No cream strips above or below the band (Pavel, 2026-10-01): when the band opens the release
   section it meets the dark top directly, and when it ends it the next section follows at once. */
.dash-home .rel:has(> .rel-launch:first-child) { margin-top: 0; padding-top: 0; }   /* padding: .dash-home-hero + .rel had 56px */
/* a to-do card straddling the greeting's foot: its wrapper runs edge to edge and paints the band's
   colour from the hero's bottom edge down, so no cream shows around the card */
.dash-home .dash-home-breakout:has(+ .rel > .rel-launch:first-child) { margin-left: 0; margin-right: 0; padding: 0 var(--home-pad); display: flow-root; background: linear-gradient(to bottom, transparent 88px, var(--mist-200, #DBE2E9) 88px); }   /* flow-root: the card's own bottom margin stays inside the painted wrapper */
@media (max-width: 767px) { .dash-home .dash-home-breakout:has(+ .rel > .rel-launch:first-child) { background: linear-gradient(to bottom, transparent 76px, var(--mist-200, #DBE2E9) 76px); } }
.dash-home .rel > .rel-launch:first-child { margin-top: 0; }
.dash-home .rel:has(> .rel-launch:last-child) { margin-bottom: 0; }
.dash-home .rel:has(> .rel-launch:last-child) + .dash-home-rest { padding-top: 0; }
.dash-home .rel:has(> .rel-launch:last-child) + .dash-home-rest > .dash-pathway-carousel:first-child { margin-top: 0; }
.dash-home .dash-home-rest:has(+ .rel > .rel-launch:first-child) { padding-bottom: 0; }
/* ══ /LAUNCH-BAND-SLATE ══════════════════════════════════════════════════════════════════════ */

/* ══ PROGRAMS-FILL (Pavel, 2026-10-01) ═══════════════════════════════════════════════════════
   Treatment Programs on the home page: five tiles that do not fit one row no longer leave one
   alone on a second row with three empty places; they fill the space as a row of two and a row
   of three, at one height. Wide enough for five in a row, or too narrow for three, nothing
   changes. DELETE THIS BLOCK TO SWITCH BACK. */
.dash-home-rest .dash-pathway-carousel { container-type: inline-size; }
@container (min-width: 620px) and (max-width: 1013px) {
	.dash-pathway-carousel-track:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.dash-pathway-carousel-track:has(> :nth-child(5):last-child) > * { grid-column: span 2; aspect-ratio: auto; height: 300px; }
	.dash-pathway-carousel-track:has(> :nth-child(5):last-child) > :nth-child(-n+2) { grid-column: span 3; }
}
/* ══ /PROGRAMS-FILL ══════════════════════════════════════════════════════════════════════════ */
/* "Your clinic, being built." on one line on phones (Pavel, 2026-10-01); the break stays on desktop. */
@media (max-width: 767px) { .dash-home-social-br { display: none; } }
@media (max-width: 359px) { .dash-home-social .dash-home-social-title { font-size: 22px; } }

/* ══ PHONE-MOCK-V2 (Pavel, 2026-10-01) ═══════════════════════════════════════════════════════
   The phone on the October 13 band shows the home page as it looks now: a dark greeting band at
   the top (navy to warm brown with the orange glow), the mark, bell and menu in Circle Cream on
   it, the greeting in cream, two outline quick buttons, and the first card on the band with a
   glass edge and a navy button. The initials avatar is gone (the app's phone bar has none).
   DELETE THIS BLOCK, and restore relPhoneScreenHTML, TO SWITCH BACK. */
.rp-v2 { padding: 0; }
.rp-v2 > :not(.rp-hero):not(.rp-tabs) { margin-left: 1.3em; margin-right: 1.3em; }
.rp-v2 .rp-hero { padding: 1.4em 1.3em 1.2em; margin-bottom: 1em; background: radial-gradient(120% 90% at 0% 115%, rgba(255,136,76,.62) 0%, rgba(255,136,76,.24) 36%, rgba(255,136,76,0) 62%), linear-gradient(180deg, #10293C 0%, #1B3544 46%, #2D2A22 82%, #3E2A1E 100%); }
.rp-v2 .rp-status { color: #F4F1E2; }
.rp-v2 .rp-sig { background: linear-gradient(90deg, #F4F1E2 0 20%, transparent 20% 27%, #F4F1E2 27% 47%, transparent 47% 54%, #F4F1E2 54% 74%, transparent 74% 81%, #F4F1E2 81%); }
.rp-v2 .rp-bat { border-color: #F4F1E2; background: #F4F1E2; box-shadow: inset 0 0 0 1.5px #10293C; }
.rp-v2 .rp-top { margin: 1.3em 0 1.3em; }
.rp-v2 .rp-logo { width: 2.5em; filter: brightness(0) invert(1) sepia(1) brightness(.955); }
.rp-top-r { display: flex; align-items: center; gap: 1em; }
.rp-bell { width: 1.9em; height: 1.9em; filter: brightness(0) invert(1) sepia(1) brightness(.955); }
.rp-menu { display: block; width: 1.8em; height: 1.3em; background: linear-gradient(#F4F1E2, #F4F1E2) top / 100% .16em no-repeat, linear-gradient(#F4F1E2, #F4F1E2) center / 100% .16em no-repeat, linear-gradient(#F4F1E2, #F4F1E2) bottom / 100% .16em no-repeat; }
.rp-v2 .rp-greet { margin-bottom: .8em; font-weight: 500; color: #F4F1E2; }
.rp-quick { display: flex; gap: .6em; margin-bottom: 1.1em; }
.rp-quick span { flex: 1 1 0; padding: .6em .2em; border-radius: 999px; border: 1.5px solid rgba(255,254,246,.45); font-size: .95em; font-weight: 500; text-align: center; white-space: nowrap; color: #FFFEF6; }
.rp-v2 .rp-next { margin-bottom: 0; background: #FFFEF6; border: 1px solid rgba(255,255,255,.7); box-shadow: 0 0 0 .35em rgba(255,255,255,.10), 0 1.6em 2.4em -1.6em rgba(0,0,0,.6); }
.rp-v2 .rp-k { display: inline-block; padding: .2em .7em; border-radius: 999px; background: var(--orange-400, #FF884C); font-size: .75em; letter-spacing: .06em; color: var(--color-font, #292626); }
.rp-v2 .rp-card:not(.rp-next) .rp-k { padding: 0; background: none; font-size: .85em; letter-spacing: .12em; color: var(--cream-700, #605E52); }
.rp-v2 .rp-t { margin-top: .5em; font-weight: 500; }
.rp-v2 .rp-btn { background: var(--color-navy, #10293C); color: #FFFEF6; font-weight: 500; }
.rp-v2 .rp-mn, .rp-v2 .rp-ok { font-weight: 500; }
/* ══ /PHONE-MOCK-V2 ══════════════════════════════════════════════════════════════════════════ */

/* ══ INTAKE-TIDY (Pavel, 2026-10-01) ═════════════════════════════════════════════════════════
   The health intake, tightened. (1) The name is said once: on the overview only the big title
   (no bar title, no eyebrow); on a question only "1 of 8 – About You" above the progress bar.
   (2) Overview on desktop: one column (title, progress, then the sections), not a title stranded
   left of a list; the Start button is as wide as its label. (3) Step numbers, lines and bars in
   greys and cream, green for done; no orange. (4) Question page: a thicker progress bar; the
   section list on desktop has its page padding back, no "Sections" title, and plain rows. (5)
   Field icons in Circle Black; no browser spinners on number fields.
   DELETE THIS BLOCK TO SWITCH BACK (the lbs default and the "1 of 8" wording are in dash_main.go). */
/* (1) one name */
body.dash-fullscreen:has(.dash-intake:not(.dash-intake-finished):not(.dash-intake-review) .dash-intake-context-title) .dash-focus-title,
body.dash-fullscreen:has(.dash-intake-questions .dash-intake-section-crumb) .dash-focus-title { display: none; }
body.dash-fullscreen:has(.dash-intake:not(.dash-intake-finished):not(.dash-intake-review) .dash-intake-context-title) .dash-fs-topnav-title { visibility: hidden; }
/* on a question the phone bar carries the intake's name, centred on the screen (not between the
   arrow and the bell, which are different widths) */
body.dash-fullscreen:has(.dash-intake-questions .dash-intake-section-crumb) .dash-fs-topnav { position: sticky; }
body.dash-fullscreen:has(.dash-intake-questions .dash-intake-section-crumb) .dash-fs-topnav-title { position: absolute; left: 60px; right: 60px; margin: 0; text-align: center; font-size: 16px; font-weight: 500; pointer-events: none; }
.dash-intake:not(.dash-intake-finished) > .dash-intake-context:has(.dash-intake-context-title) > .dash-intake-kicker { display: none; }
.dash-intake-questions:has(.dash-intake-section-crumb) > .dash-intake-section-kicker { display: none; }
/* (2) overview: one column on desktop */
@media (min-width: 1000px) {
	body.dash-fullscreen .dash-main:has(.dash-intake:not(.dash-intake-finished):not(.dash-intake-review)) { max-width: 52rem; }
	.dash-intake:not(.dash-intake-finished):not(.dash-intake-review) { display: block; }
	.dash-intake:not(.dash-intake-finished):not(.dash-intake-review) > .dash-intake-progress-bar-wrap { max-width: 28rem; margin: 14px 0 32px; }
}
.dash-intake .dash-intake-section-cta { display: inline-flex; width: auto; align-self: flex-start; }   /* every width, phones too (Pavel, 2026-10-01, second note) */
/* (3) greys, cream, green for done */
.dash-intake-step-dot { border-color: var(--cream-300, #D0CEC4); background: var(--surface, #FFFEF6); }
.dash-intake-step-num0 { color: var(--cream-600, #7E7B6C); }
.dash-intake-step-dot.dash-intake-step-now { background: var(--color-font, #292626); border: 2px solid var(--color-font, #292626); box-shadow: none; }
.dash-intake-step-dot.dash-intake-step-now .dash-intake-step-num1 { color: var(--color-cream, #F4F1E2); }
.dash-intake-step-dot.dash-intake-step-complete { background: var(--success, #3C6B49); border-color: var(--success, #3C6B49); }
.dash-intake-step-line { background: var(--cream-300, #D0CEC4); }
.dash-intake-step-line-done { background: var(--success, #3C6B49); }
.dash-intake-section-card.dash-intake-section-current { border-color: var(--cream-400, #B7B4A8); box-shadow: none; }
/* the horizontal progress bars stay orange (Pavel, same day); only the step dots and their vertical line went grey and green */
.dash-intake .dash-intake-progress-fill, .dash-intake-questions .dash-intake-progress-fill, .dash-intake-mini-fill { background: var(--orange-400, #FF884C); }
.dash-intake .dash-intake-progress-track, .dash-intake-questions .dash-intake-progress-track, .dash-intake-mini-bar { background: var(--cream-200, #E3E1DB); }
/* (4) question page */
.dash-intake-questions .dash-intake-section-crumb,
.dash-intake-questions:has(.dash-intake-rail) .dash-intake-section-crumb { display: inline-block; margin: 0 0 8px; font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--cream-700, #605E52); }
.dash-intake-questions .dash-intake-section-progress-label { font-size: 14.5px; }
.dash-intake-questions .dash-intake-progress-track { height: 6px; border-radius: 999px; }
.dash-intake-questions .dash-intake-progress-fill { border-radius: 999px; }
@media (min-width: 1000px) {
	body.dash-body.dash-fullscreen .dash-main:has(.dash-intake-questions .dash-intake-rail) { padding-left: 40px; padding-right: 40px; }
	.dash-intake-rail-k { display: none; }
	.dash-intake-rail-item, .dash-intake-rail-current { padding: 7px 10px; margin: 0 0 2px; background: transparent; border-color: transparent; box-shadow: none; color: var(--text-secondary, #6B6560); }
	.dash-intake-rail-item:hover { background: rgba(41,38,38,.04); border-color: transparent; }
	.dash-intake-rail-current, .dash-intake-rail-current .dash-intake-rail-name { color: var(--color-font, #292626); }
	.dash-intake-rail-num { background: var(--cream-200, #E3E1DB); color: var(--cream-700, #605E52); font-weight: 500; }
	.dash-intake-rail-current .dash-intake-rail-num { background: var(--color-font, #292626); color: var(--color-cream, #F4F1E2); }
	.dash-intake-rail-done .dash-intake-rail-num { background: var(--success, #3C6B49); }
	.dash-intake-rail-review .dash-intake-rail-num { background: var(--cream-200, #E3E1DB); color: var(--color-font, #292626); }
}
/* (5) field icons */
.dash-intake-date-icon, .dash-intake-date:focus ~ .dash-intake-date-icon { color: var(--color-font, #292626); }
.dash-intake-number::-webkit-outer-spin-button, .dash-intake-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dash-intake-number[type="number"] { -moz-appearance: textfield; appearance: textfield; }
/* (6) answer options (Pavel, 2026-10-01): at rest a part-transparent Circle White; hover brings
   it up with a navy edge; chosen = full Circle White with a navy stroke and a navy tick box.
   Orange is gone from the chosen state. The pathway quiz (.pathway-step) has its own rules. */
.dash-intake-questions .dash-intake-option { background: rgba(255,254,246,.55); border-color: rgba(16,41,60,.10); box-shadow: none; }
@media (hover: hover) { .dash-intake-questions .dash-intake-option:hover { background: rgba(255,254,246,.9); border-color: rgba(16,41,60,.45); box-shadow: none; } }
.dash-intake-questions .dash-intake-option:has(input:checked),
.dash-intake-questions .dash-intake-option:has(input:checked):hover { background: var(--color-surface, #FFFEF6); border-color: var(--color-navy, #10293C); box-shadow: 0 0 0 .5px var(--color-navy, #10293C); }
.dash-intake-questions .dash-intake-option:has(input:checked) .dash-intake-check-circle,
.dash-intake-questions .dash-intake-option:has(input:checked) .dash-intake-check-square { background: var(--color-navy, #10293C); border-color: var(--color-navy, #10293C); }
.dash-intake-questions .dash-intake-option:has(input:focus-visible) { outline: 2px solid var(--color-navy, #10293C); outline-offset: 2px; }
.dash-intake-questions .dash-intake-question-locked .dash-intake-option:hover { background: rgba(255,254,246,.55); border-color: rgba(16,41,60,.10); }
/* desktop: the section list on the left already says where you are, so no "2 of 8 – …" line */
@media (min-width: 1000px) { .dash-intake-questions:has(.dash-intake-rail) .dash-intake-section-crumb { display: none; } }
/* section list, second pass: no "All sections" link under it (Back returns to the overview);
   sections not yet done are an empty circle with a darker-cream outline */
@media (min-width: 1000px) {
	.dash-intake-rail-all { display: none; }
	.dash-intake-rail-item:not(.dash-intake-rail-current):not(.dash-intake-rail-done) .dash-intake-rail-num { background: transparent; box-shadow: inset 0 0 0 1.5px var(--cream-400, #B7B4A8); color: var(--cream-700, #605E52); }
}
/* one type size on a question (Pavel, 2026-10-01): the "Because you answered…" line, the question
   and the hint under it all read at the question's size; colour and weight still tell them apart */
.dash-intake-questions .dash-intake-question-ctx,
.dash-intake-questions .dash-intake-question-subtitle { font-size: 16px; line-height: 1.45; }
.dash-intake-questions .dash-intake-question-text { font-size: 16px; line-height: 1.45; }
.dash-intake-questions .dash-intake-question-ctx b { font-weight: 500; }
/* question header, roomier (Pavel, 2026-10-01: "still feels a little crammed"): the progress bar
   runs the full width on its own line; the words sit above it on the left and the two arrows
   above it on the right, instead of the bar squeezed between the arrows */
.dash-intake-questions:has(.dash-intake-section-crumb) > .dash-intake-section-header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 2px; row-gap: 0; align-items: center; margin-bottom: 28px; }
.dash-intake-questions:has(.dash-intake-section-crumb) .dash-intake-section-center { display: contents; }
.dash-intake-questions:has(.dash-intake-section-crumb) .dash-intake-section-crumb { grid-column: 1; grid-row: 1; margin: 0 0 2px; justify-self: start; }
.dash-intake-questions:has(.dash-intake-section-crumb) .dash-intake-section-progress-row { grid-column: 1; grid-row: 2; margin: 0; }
.dash-intake-questions:has(.dash-intake-section-crumb) .dash-intake-prev-btn { grid-column: 2; grid-row: 1 / span 2; }
.dash-intake-questions:has(.dash-intake-section-crumb) .dash-intake-next-nav-btn { grid-column: 3; grid-row: 1 / span 2; margin-right: -6px; }
.dash-intake-questions:has(.dash-intake-section-crumb) .dash-intake-section-header > .dash-intake-section-center > .dash-intake-progress-track { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; }
.dash-intake-questions:has(.dash-intake-section-crumb) .dash-intake-nav-btn { width: 36px; height: 36px; border-radius: 50%; }
@media (hover: hover) { .dash-intake-questions:has(.dash-intake-section-crumb) .dash-intake-nav-btn:hover:not(:disabled) { background: rgba(41,38,38,.05); } }
@media (min-width: 1000px) { .dash-intake-questions:has(.dash-intake-rail) > .dash-intake-section-header { max-width: 36rem; padding: 0 24px; box-sizing: border-box; } }   /* the bar is as wide as the question under it */
/* 1-to-10 scale (Pavel, 2026-10-01): navy, not orange, for the chosen number; no frame around the
   whole thing, so the two end labels ("Very poor", "Excellent") sit plainly under the row of
   numbers instead of in a boxed footer. The numbers keep their joined-row shape. */
.dash-intake-questions .dash-intake-scale { border: 0; border-radius: 0; overflow: visible; background: transparent; }
.dash-intake-questions .dash-intake-scale-option,
.dash-intake-questions .dash-intake-scale-option:first-of-type,
.dash-intake-questions .dash-intake-scale-option:last-of-type { border: 1px solid rgba(16,41,60,.16); border-left-width: 0; border-radius: 0; background: rgba(255,254,246,.55); box-shadow: none; }
.dash-intake-questions .dash-intake-scale-option:first-of-type { border-left-width: 1px; border-radius: 12px 0 0 12px; }
.dash-intake-questions .dash-intake-scale-option:last-of-type { border-radius: 0 12px 12px 0; }
@media (hover: hover) { .dash-intake-questions .dash-intake-scale-option:hover { background: rgba(16,41,60,.07); border-color: rgba(16,41,60,.16); box-shadow: none; } }
.dash-intake-questions .dash-intake-scale-option:has(input:checked),
.dash-intake-questions .dash-intake-scale-option:has(input:checked):hover { background: var(--color-navy, #10293C); border-color: var(--color-navy, #10293C); box-shadow: none; color: #FFFEF6; }
.dash-intake-questions .dash-intake-scale-option:has(input:checked) span { color: #FFFEF6; }
.dash-intake-questions .dash-intake-scale .dash-intake-scale-labels { order: 2; margin: 0; padding: 8px 2px 0; border-top: 0; background: none; font-size: 13.5px; color: var(--text-secondary, #6B6560); }
/* desktop: the intake's name above the section list, to anchor it */
@media (min-width: 1000px) {
	.dash-intake-rail-k.dash-intake-rail-title { display: block; margin: 0 0 14px; padding: 0 10px; font-size: 18px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.25; color: var(--color-font, #292626); }
}
/* overview, third pass (Pavel, 2026-10-01): sections not yet done have a darker outline; their
   numbers sit on Circle Cream; and each number is centred on its card's height. The connecting
   line is drawn in two halves per row (above and below the number) so it always meets the next
   number whatever the cards' heights. */
.dash-intake-section-card.dash-intake-section-locked { border-color: var(--cream-300, #D0CEC4); }
.dash-intake-step-dot:not(.dash-intake-step-now):not(.dash-intake-step-complete) { background: var(--color-cream, #F4F1E2); border-color: var(--cream-400, #B7B4A8); }
.dash-intake-step-rail { position: relative; justify-content: center; padding-top: 0; padding-bottom: 12px; }
.dash-intake-step-dot { position: relative; z-index: 1; }
.dash-intake-step-rail > .dash-intake-step-line { position: absolute; left: 50%; margin-left: -1px; top: calc(50% - 6px); bottom: 0; flex: none; min-height: 0; }
.dash-intake-step-rail::before { content: ""; position: absolute; left: 50%; margin-left: -1px; width: 2px; top: 0; bottom: calc(50% + 6px); background: var(--cream-300, #D0CEC4); }
.dash-intake-step-row:first-child > .dash-intake-step-rail::before { display: none; }
.dash-intake-step-row:has(.dash-intake-step-line-done) + .dash-intake-step-row > .dash-intake-step-rail::before { background: var(--success, #3C6B49); }
/* tick grid ("Has anyone in your immediate family been diagnosed with…"), Pavel 2026-10-01: the
   lines and empty circles in the cream ramp instead of sand and grey; a ticked circle, the
   chosen pill and the "None" button in navy instead of orange */
.dash-intake-questions .dash-intake-grid-desktop tbody tr { border-top-color: var(--cream-300, #D0CEC4); }
.dash-intake-questions .dash-intake-grid-desktop td.dash-intake-grid-none { border-left-color: var(--cream-400, #B7B4A8); }
.dash-intake-questions .dash-intake-grid-check { border-color: var(--cream-400, #B7B4A8); background: var(--color-cream, #F4F1E2); }
@media (hover: hover) { .dash-intake-questions .dash-intake-grid-cell:hover .dash-intake-grid-check { border-color: var(--color-navy, #10293C); } }
.dash-intake-questions .dash-intake-grid-cell.checked .dash-intake-grid-check { background: var(--color-navy, #10293C); border-color: var(--color-navy, #10293C); }
.dash-intake-questions .dash-intake-grid-pill { border-color: var(--cream-400, #B7B4A8); }
.dash-intake-questions .dash-intake-grid-pill:hover { border-color: var(--color-navy, #10293C); background: transparent; }
.dash-intake-questions .dash-intake-grid-pill.active { background: var(--color-navy, #10293C); border-color: var(--color-navy, #10293C); color: #FFFEF6; }
.dash-intake-questions .dash-intake-grid-card { border-color: var(--cream-300, #D0CEC4); }
.dash-intake-questions .dash-intake-grid-allnone { border-color: var(--cream-400, #B7B4A8); }
.dash-intake-questions .dash-intake-grid-allnone:hover { background: rgba(16,41,60,.05); }
.dash-intake-questions .dash-intake-grid-allnone.active { background: var(--color-surface, #FFFEF6); border-color: var(--color-navy, #10293C); box-shadow: inset 0 0 0 1px var(--color-navy, #10293C); }
/* section list on desktop: a line behind the numbers joining them, green as far as the sections
   done (Pavel, 2026-10-01). The circles are opaque so the line passes behind them. */
@media (min-width: 1000px) {
	.dash-intake-rail-item { position: relative; }
	.dash-intake-rail-item::before { content: ""; position: absolute; left: 21px; top: 0; bottom: -2px; width: 2px; background: var(--cream-300, #D0CEC4); }
	.dash-intake-rail-item.dash-intake-rail-done::before { background: var(--success, #3C6B49); }
	.dash-intake-rail-k + .dash-intake-rail-item::before, .dash-intake-rail > .dash-intake-rail-item:first-child::before { top: 19px; }
	.dash-intake-rail-item:has(+ .dash-intake-rail-all)::before, .dash-intake-rail-item:last-child::before { bottom: auto; height: 19px; }
	.dash-intake-rail-item:hover::before { }
	.dash-intake-rail-num { position: relative; z-index: 1; }
	.dash-intake-rail-item:not(.dash-intake-rail-current):not(.dash-intake-rail-done) .dash-intake-rail-num { background: var(--color-cream, #F4F1E2); }
}
/* completion page ("Your health profile is complete"), Pavel 2026-10-01: it was a narrow column
   stuck to the left of an empty page on desktop, an orange tick, the intake named three times,
   and three stacked links of three kinds. Now: centred on the page, a green tick (the colour of
   "done" everywhere else), the name once, a primary button with "Your answers" as an outline
   button beside it and "Back to home" as the quiet line under them. Program intakes that show a
   timeline beside the message keep their two columns. */
body.dash-fullscreen:has(.dash-intake-finished) .dash-focus-title { display: none; }
body.dash-fullscreen:has(.dash-intake-finished) .dash-fs-topnav-title { visibility: hidden; }
.dash-intake-finished .dash-intake-kicker { display: none; }
.dash-intake-finished-check { background: var(--success, #3C6B49); }
.dash-intake-finished-check::after { border-color: #FFFEF6; }
.dash-intake-finished .dash-intake-context-title { margin: 0 0 12px; font-weight: 500; }
.dash-intake-finished .dash-intake-context-sub { max-width: 34rem; margin-left: auto; margin-right: auto; color: var(--text-secondary, #6B6560); }
.dash-intake-finished-cta { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 28px; }
.dash-intake-finished-cta .dash-intake-review-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 13px 26px; border-radius: 999px; border: 1.5px solid var(--btn-secondary-border, #10293C); background: transparent; font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--btn-secondary-fg, #10293C); text-decoration: none; }
@media (hover: hover) { .dash-intake-finished-cta .dash-intake-review-link:hover { background: var(--btn-secondary-bg-hover, rgba(16,41,60,0.06)); text-decoration: none; } }
.dash-intake-finished-cta .dash-intake-back-link { flex: 0 0 100%; margin-top: 6px; text-align: center; font-size: 14.5px; color: var(--text-secondary, #6B6560); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1000px) {
	body.dash-fullscreen .dash-main:has(.dash-intake-finished:not(:has(.dash-intake-finished-journey))) { max-width: 52rem; }
	.dash-intake-finished:not(:has(.dash-intake-finished-journey)) { display: block; }
	.dash-intake-finished:not(:has(.dash-intake-finished-journey)) .dash-intake-finished-head { position: static; max-width: 40rem; margin: 0 auto; padding: 56px 0 0; text-align: center; }
	.dash-intake-finished:not(:has(.dash-intake-finished-journey)) .dash-intake-finished-check { margin: 0 auto 22px; }
	.dash-intake-finished:not(:has(.dash-intake-finished-journey)) .dash-intake-finished-cta { justify-content: center; align-items: center; }
	.dash-intake-finished:has(.dash-intake-finished-journey) .dash-intake-context-sub { margin-left: 0; }
	.dash-intake-finished:has(.dash-intake-finished-journey) .dash-intake-finished-cta { justify-content: flex-start; }
	.dash-intake-finished:has(.dash-intake-finished-journey) .dash-intake-finished-cta .dash-intake-back-link { text-align: left; }
}
.dash-intake-finished-cta > .pathway-checkout-btn, .dash-intake-finished-cta > .dash-intake-review-link { margin: 0; min-height: 48px; box-sizing: border-box; align-self: center; }
/* ══ /INTAKE-TIDY ════════════════════════════════════════════════════════════════════════════ */

/* ══ FS-TOPNAV (Pavel, 2026-10-01) ═══════════════════════════════════════════════════════════
   The phone bar on full-screen pages (intake, answers, verify): Circle Cream like the page, not
   white; Back is the arrow used on the Health pages (nav-back-arrow.svg) on its own, with the
   word kept for screen readers. DELETE THIS BLOCK TO SWITCH BACK. */
.dash-fs-topnav { background: var(--color-cream, #F4F1E2); border-bottom-color: rgba(41,38,38,.08); }
.dash-fs-topnav-back { width: 44px; height: 44px; padding: 0; margin-left: -8px; gap: 0; font-size: 0; border-radius: 999px; background: url(/dashboard/imgs/icons/nav-back-arrow.svg) center / 28px 28px no-repeat; }
.dash-fs-topnav-back svg { display: none; }
.dash-fs-topnav-back:hover { opacity: 1; }
/* ══ /FS-TOPNAV ══════════════════════════════════════════════════════════════════════════════ */
/* Full-screen pages on phones (Pavel, 2026-10-01): a short page no longer scrolls. The content
   area was a full screen tall AND sat under the 56px bar, so every page was 56px too long (more
   on iOS, where 100vh ignores the browser's own bars). It now fills what is left under the bar.
   Delete to switch back. */
@media (max-width: 767px) {
	body.dash-fullscreen .dash-content { min-height: calc(100vh - var(--topbar-h)); min-height: calc(100dvh - var(--topbar-h)); }
}
/* Countdown ring on the intake's Next button (Pavel, 2026-10-01): drawn for an orange button
   (dark track, dark ring, dark number), it vanished on the navy one. On navy: a faint cream
   track, a cream ring and a cream number. The quiz's own orange-era button is left alone.
   Delete to switch back. */
.dash-intake-next:not(.pathway-step-next) .pathway-count-track { stroke: rgba(255,254,246,.28); }
.dash-intake-next:not(.pathway-step-next) .pathway-count-ring { stroke: #FFFEF6; }
.dash-intake-next:not(.pathway-step-next) .pathway-count-n { color: #FFFEF6; }
/* Sideways scrolling on iPhone while answering (Pavel, 2026-10-01). iOS Safari zooms the page in
   when a field with text under 16px is focused, and once zoomed the page pans side to side. The
   intake's fields were 15px. They are 16px on phones, so no zoom; and the page is clipped
   sideways as a guard. Delete to switch back. */
@media (max-width: 767px) {
	.dash-intake-questions input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
	.dash-intake-questions textarea,
	.dash-intake-questions select { font-size: 16px; }
	body.dash-fullscreen .dash-content { overflow-x: clip; }
}
/* the countdown sits at the far left of the Next button; "Next" stays centred (Pavel, 2026-10-01) */
.dash-intake-next:not(.pathway-step-next) { position: relative; }
.dash-intake-next:not(.pathway-step-next) > .pathway-count { position: absolute; left: 18px; top: 50%; margin-top: -11px; }
/* Home, "Your Foundations Visit, step by step" on phones: the tick marks and their line sit to
   the LEFT of the cards (Pavel, 2026-10-01; they had been moved to the right on 2026-09-30).
   Delete to put them back on the right. */
@media (max-width: 767px) {
	.dash-home-road-care .dash-home-moments { padding-left: 40px; padding-right: 0; }
	.dash-home-road-care .dash-home-moment-mark { left: -40px; right: auto; }
	.dash-home-road-care .dash-home-moment:not(.dash-home-dot + .dash-home-moment)::before,
	.dash-home-road-care .dash-home-moment:not(:last-child)::after { left: -27px; right: auto; }
}

/* ══ BLOODWORK-V2 (Pavel, 2026-10-01) ════════════════════════════════════════════════════════
   The bloodwork page, simplified: one column on every width. Head (body copy in the site's
   regular grey), a green "done" card with a tick, the requisitions under it, then two tabs:
   "Where to go" and "Preparing for your bloodwork". The preparation reads as normal text: no
   orange strip, no boxed summary, no navy pills. Scoped to .dash-bw-v2 (the walk-in and booking
   pages share .dash-bw and are untouched). DELETE THIS BLOCK TO SWITCH BACK (and the v2 class,
   the tabs and bloodworkTab in dash_bloodwork.go / bloodwork.js). */
.dash-bw.dash-bw-v2 { display: flex; flex-direction: column; max-width: 1040px; }
.dash-bw-v2 > .dash-bw-left, .dash-bw-v2 > .dash-bw-right { display: contents; position: static; }
.dash-bw-v2 .dash-bw-head { order: 1; margin-bottom: 20px; max-width: 760px; }
.dash-bw-v2 .dash-bw-req { order: 2; margin-bottom: 28px; max-width: 760px; }
.dash-bw-v2 .dash-bw-ptabs { order: 3; }
.dash-bw-v2 .dash-bw-main { order: 4; }
.dash-bw-v2 .dash-bw-side { order: 4; position: static; margin-top: 0; }
.dash-bw-v2 > .pathway-receipt-back { order: 9; }
.dash-bw-v2 > .dash-bw-modal { order: 10; }
.dash-bw-v2 .dash-bw-lede { font-size: 16px; line-height: 1.55; color: var(--text-secondary, #6B6560); }
/* done */
.dash-bw-v2 .dash-bw-done:not(.dash-bw-booked) { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 14px 16px; border-radius: 14px; background: rgba(60,107,73,.08); border: 1px solid var(--success, #3C6B49); font-size: 16px; line-height: 1.5; color: var(--color-font, #292626); }
.dash-bw-v2 .dash-bw-done:not(.dash-bw-booked) .dash-bw-done-chip { position: relative; width: 28px; height: 28px; padding: 0; border-radius: 50%; background: var(--success, #3C6B49); font-size: 0; letter-spacing: 0; }
.dash-bw-v2 .dash-bw-done:not(.dash-bw-booked) .dash-bw-done-chip::after { content: ""; position: absolute; left: 10px; top: 6px; width: 6px; height: 11px; border: solid #FFFEF6; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* requisitions */
.dash-bw-v2 .dash-bw-req-k { margin: 0 0 8px; font-size: 20px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--color-font, #292626); }
.dash-bw-v2 .dash-bw-form { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 6px; padding: 10px 0; }
.dash-bw-v2 .dash-bw-form-n { grid-row: 1; width: auto; height: auto; border-radius: 0; background: none; display: inline; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--color-font, #292626); }
.dash-bw-v2 .dash-bw-form-n::after { content: "."; }
.dash-bw-v2 .dash-bw-form-t { font-size: 16px; font-weight: 500; line-height: 1.4; }
.dash-bw-v2 .dash-bw-form-w { grid-column: 2; font-size: 14.5px; }
.dash-bw-v2 .dash-bw-form-view { grid-row: 1 / 3; }
/* tabs */
.dash-bw-ptabs { display: flex; gap: 4px; margin: 0 0 22px; border-bottom: 1px solid rgba(41,38,38,.24); }
.dash-bw-ptab { flex: none; padding: 12px 14px 10px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font: inherit; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--text-secondary, #6B6560); cursor: pointer; }
.dash-bw-ptab:hover { color: var(--color-font, #292626); }
.dash-bw-tab-where .dash-bw-ptab[data-tab="where"], .dash-bw-tab-prep .dash-bw-ptab[data-tab="prep"] { color: var(--color-font, #292626); border-bottom-color: var(--color-orange, #FF884C); }
.dash-bw-v2.dash-bw-tab-where .dash-bw-side, .dash-bw-v2.dash-bw-tab-prep .dash-bw-main { display: none; }
.dash-bw-v2 .dash-bw-where > .dash-bw-h2 { display: none; }   /* the tab is the heading now */
@media (max-width: 767px) {
	.dash-bw-ptabs { margin-bottom: 18px; }
	.dash-bw-ptab { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; font-size: 15px; text-align: center; }
}
/* preparation: plain reading text */
.dash-bw-v2 .dash-prep-card { max-width: 760px; padding: 0; margin: 0 0 24px; border: 0; border-radius: 0; background: none; }
.dash-bw-v2 .dash-prep-top { justify-content: flex-end; margin-bottom: 4px; }
.dash-bw-v2 .dash-prep-top .dash-bw-card-k { display: none; }   /* the tab says it */
.dash-bw-v2 .dash-prep-lede { margin: 0 0 18px; padding: 0; border-radius: 0; background: none; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--color-font, #292626); }
.dash-bw-v2 .dash-prep-item { margin: 0 0 16px; }
.dash-bw-v2 .dash-prep-h { display: block; margin: 0 0 4px; padding: 0; border-radius: 0; background: none; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--color-font, #292626); }
.dash-bw-v2 .dash-prep-d, .dash-bw-v2 .dash-prep-none, .dash-bw-v2 .dash-prep-always { font-size: 16px; line-height: 1.55; color: var(--text-secondary, #6B6560); }
.dash-bw-v2 .dash-prep-none { margin-top: 0; }
.dash-bw-v2 .dash-prep-k { margin: 22px 0 8px; font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--color-font, #292626); }
.dash-bw-v2 .dash-prep-always b { color: var(--color-font, #292626); font-weight: 500; }
.dash-bw-v2 .dash-prep-fine { margin-top: 16px; font-size: 14px; }
/* the notes that were the side column: a quiet grid under the preparation */
.dash-bw-v2 .dash-bw-side { max-width: 1040px; }
@media (min-width: 768px) {
	.dash-bw-v2 .dash-bw-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
	.dash-bw-v2 .dash-bw-side > .dash-prep-card { grid-column: 1 / -1; }
	.dash-bw-v2 .dash-bw-side > .dash-bw-card { margin-bottom: 0; }
	.dash-bw-v2.dash-bw-tab-where .dash-bw-side { display: none; }
}
.dash-bw-v2 .dash-bw-card { border-color: rgba(41,38,38,.10); }
.dash-bw-v2 .dash-bw-card-k { font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--color-font, #292626); }
.dash-bw-v2 .dash-bw-card-p, .dash-bw-v2 .dash-bw-check { font-size: 15px; line-height: 1.55; color: var(--text-secondary, #6B6560); }
.dash-bw-v2 .dash-bw-card-warn { border-left: 1px solid rgba(41,38,38,.10); }
.dash-bw.dash-bw-v2 { align-items: stretch; }
@media (max-width: 767px) { .dash-bw-ptab { flex: none; padding-left: 10px; padding-right: 10px; } .dash-bw-ptabs { gap: 0; } }   /* natural widths: the long label stays on one line */
/* second pass (Pavel, 2026-10-01) */
/* done card: dark green words; the tick centred by the box, not by offsets */
.dash-bw-v2 .dash-bw-done:not(.dash-bw-booked) { color: #1F5B3A; }
.dash-bw-v2 .dash-bw-done:not(.dash-bw-booked) .dash-bw-done-chip { display: grid; place-items: center; }
.dash-bw-v2 .dash-bw-done:not(.dash-bw-booked) .dash-bw-done-chip::after { position: static; margin-top: -3px; }
/* requisitions: a smaller, tighter card */
.dash-bw-v2 .dash-bw-req { max-width: 480px; gap: 12px; padding: 10px 12px; border-radius: 14px; border-color: rgba(41,38,38,.10); margin-bottom: 24px; }
.dash-bw-v2 .dash-bw-thumb { flex: 0 0 52px; width: 52px; height: 68px; border-radius: 6px; }
.dash-bw-v2 .dash-bw-thumb-zoom { display: none; }
.dash-bw-v2 .dash-bw-req-k { margin: 0 0 2px; font-size: 16px; }
.dash-bw-v2 .dash-bw-forms { margin: 4px 0 6px; border-top: 0; }
.dash-bw-v2 .dash-bw-form { padding: 5px 0; border-bottom: 0; }
.dash-bw-v2 .dash-bw-form-n, .dash-bw-v2 .dash-bw-form-t { font-size: 15px; }
.dash-bw-v2 .dash-bw-form-w { font-size: 13.5px; line-height: 1.35; }
.dash-bw-v2 .dash-bw-form-view { padding: 4px 12px; font-size: 13px; }
.dash-bw-v2 .dash-bw-req-foot { margin-top: 2px; }
.dash-bw-v2 .dash-bw-maillink { font-size: 13.5px; }
/* "search from" filters: smaller; and the postal-code form stays hidden until chosen (a flex rule
   was overriding [hidden], so it showed under every filter) */
.dash-bw-v2 .dash-bw-seg { gap: 6px; margin-bottom: 8px; }
.dash-bw-v2 .dash-bw-segbtn { gap: 5px; padding: 6px 11px; font-size: 13px; border-color: var(--cream-400, #B7B4A8); background: transparent; }
.dash-bw-v2 .dash-bw-segbtn svg { width: 14px; height: 14px; }
.dash-bw-v2 .dash-bw-segbtn:hover { border-color: var(--color-navy, #10293C); }
.dash-bw-v2 .dash-bw-segbtn-on, .dash-bw-v2 .dash-bw-segbtn-on:hover { background: var(--color-navy, #10293C); border-color: var(--color-navy, #10293C); color: #FFFEF6; }
.dash-bw-v2 .dash-bw-postal.dash-bw-segpanel[hidden] { display: none; }
.dash-bw-v2 .dash-bw-postal-in { width: 8rem; padding: 7px 10px; font-size: 16px; }
.dash-bw-v2 .dash-bw-postal-go { padding: 7px 14px; font-size: 13.5px; }
@media (max-width: 767px) { .dash-bw-v2 .dash-bw-segbtn { padding: 6px 9px; font-size: 12.5px; } .dash-bw-v2 .dash-bw-seg { gap: 5px; } }
/* results: a sentence-case heading; quieter, evenly spaced card text; no lab-brand tags */
.dash-bw-v2 .dash-bw-found { margin: 4px 0 12px; font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--color-font, #292626); }
.dash-bw-v2 .dash-bw-found::first-letter { text-transform: uppercase; }
.dash-bw-v2 .dash-bw-net-lifelabs, .dash-bw-v2 .dash-bw-net-dynacare { display: none; }
.dash-bw-v2 .dash-bw-place { border-color: rgba(41,38,38,.10); }
.dash-bw-v2 .dash-bw-place-top { margin-bottom: 6px; min-height: 18px; }
.dash-bw-v2 .dash-bw-place-name { margin: 0 0 4px; line-height: 1.35; }
.dash-bw-v2 .dash-bw-place-addr, .dash-bw-v2 .dash-bw-place-meta { margin: 0 0 4px; font-size: 14px; line-height: 1.45; color: var(--text-secondary, #6B6560); }
.dash-bw-v2 .dash-bw-place-meta { margin-bottom: 10px; }
.dash-bw-v2 .dash-bw-place-on { border-color: var(--color-navy, #10293C); box-shadow: 0 0 0 .5px var(--color-navy, #10293C); }
/* the Circle card matches the others (white, no orange tint, no tag); a navy outline sets it apart */
.dash-bw-v2 .dash-bw-place-circle { background: var(--surface, #FFFEF6); border-color: var(--color-navy, #10293C); box-shadow: 0 0 0 .5px var(--color-navy, #10293C); }
.dash-bw-v2 .dash-bw-net-circle { display: none; }
/* the Circle mark, orange, in the card's bottom-right corner (the logo file as a mask) */
.dash-bw-place-circle { position: relative; }
.dash-bw-place-mark { position: absolute; right: 16px; bottom: 16px; width: 26px; height: 27px; background: var(--orange-400, #FF884C); -webkit-mask: url(/images/circle-mini.svg) center / contain no-repeat; mask: url(/images/circle-mini.svg) center / contain no-repeat; pointer-events: none; }
/* requisitions, third pass: no page thumbnail; each form has an icon, View and Download; "Email
   them all to me" is a button under the list */
.dash-bw-v2 .dash-bw-req > .dash-bw-thumb { display: none; }
.dash-bw-v2 .dash-bw-req { max-width: 560px; padding: 14px 16px; }
.dash-bw-v2 .dash-bw-req-k { margin-bottom: 6px; }
.dash-bw-v2 .dash-bw-form { grid-template-columns: 20px auto minmax(0, 1fr) auto auto; column-gap: 8px; row-gap: 0; align-items: center; padding: 7px 0; }
.dash-bw-form-ico { grid-column: 1; grid-row: 1; width: 20px; height: 20px; opacity: .8; }
.dash-bw-v2 .dash-bw-form-n { grid-column: 2; grid-row: 1; }
.dash-bw-v2 .dash-bw-form-t { grid-column: 3; grid-row: 1; }
.dash-bw-v2 .dash-bw-form-w { grid-column: 2 / 4; grid-row: 2; }
.dash-bw-v2 .dash-bw-form-view { grid-column: 4; grid-row: 1 / 3; }
.dash-bw-v2 .dash-bw-form-dl { grid-column: 5; grid-row: 1 / 3; }
.dash-bw-v2 .dash-bw-form .dash-bw-act, .dash-bw-v2 .dash-bw-maillink { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--btn-secondary-border, #10293C); background: transparent; font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1; color: var(--btn-secondary-fg, #10293C); text-decoration: none; cursor: pointer; }
@media (hover: hover) { .dash-bw-v2 .dash-bw-form .dash-bw-act:hover, .dash-bw-v2 .dash-bw-maillink:hover:not(:disabled) { background: var(--btn-secondary-bg-hover, rgba(16,41,60,0.06)); border-color: var(--btn-secondary-border, #10293C); } }
.dash-bw-v2 .dash-bw-req-foot { margin-top: 10px; }
@media (max-width: 520px) {
	.dash-bw-v2 .dash-bw-form { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; padding: 9px 0; }
	.dash-bw-v2 .dash-bw-form-t { flex: 1 1 0; min-width: 0; }
	.dash-bw-v2 .dash-bw-form-w { flex: 0 0 100%; box-sizing: border-box; padding-left: 28px; }
	.dash-bw-v2 .dash-bw-form-view { margin: 8px 0 0 28px; }
	.dash-bw-v2 .dash-bw-form-dl { margin-top: 8px; }
}
/* done card tick: the check icon file, centred by the box (the hand-drawn tick sat off-centre) */
.dash-bw-v2 .dash-bw-done:not(.dash-bw-booked) .dash-bw-done-chip::after { position: static; width: 16px; height: 16px; margin: 0; border: 0; transform: none; background: #FFFEF6; -webkit-mask: url(/dashboard/imgs/icons/nav-check.svg) center / contain no-repeat; mask: url(/dashboard/imgs/icons/nav-check.svg) center / contain no-repeat; }
/* Download: an icon button the height of View */
.dash-bw-v2 .dash-bw-form .dash-bw-form-dl { width: 32px; padding: 0; justify-content: center; }
.dash-bw-form-dl-i { width: 16px; height: 16px; display: block; }
/* Preparing for your bloodwork, as a walk-through (Pavel, 2026-10-01). Reading text is plain: a
   one-line summary, "Before your draw" as numbered steps, "On the day", then "Good to know".
   Only what is acted on is a card: what to bring, and a test that may be charged. Cards sit on
   the page's cream with an outline, not on white. */
.dash-bw-v2 .dash-bw-side { display: block; max-width: 720px; }
.dash-bw-v2.dash-bw-tab-where .dash-bw-side { display: none; }
.dash-bw-v2 .dash-prep-card { max-width: none; margin-bottom: 0; }
.dash-bw-v2 .dash-prep-top { float: right; margin: 0 0 8px 16px; }
.dash-bw-v2 .dash-prep-lede { margin: 0 0 4px; font-size: 16px; font-weight: 400; color: var(--text-secondary, #6B6560); }
.dash-prep-sec { margin: 30px 0 14px; font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: 0; color: var(--color-font, #292626); clear: both; }
.dash-bw-v2 .dash-prep-list { counter-reset: prep; gap: 18px; }
.dash-bw-v2 .dash-prep-item { position: relative; margin: 0; padding-left: 42px; counter-increment: prep; }
.dash-bw-v2 .dash-prep-item::before { content: counter(prep); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--cream-400, #B7B4A8); display: grid; place-items: center; font-size: 13.5px; font-weight: 500; color: var(--cream-700, #605E52); }
.dash-bw-v2 .dash-prep-h { margin-bottom: 3px; }
.dash-bw-v2 .dash-prep-none { margin: 18px 0 0; padding-left: 42px; }
.dash-bw-v2 .dash-prep-k { margin: 30px 0 14px; font-size: 20px; line-height: 1.25; }
.dash-bw-v2 .dash-prep-always { padding-left: 0; list-style: none; display: grid; gap: 10px; }
.dash-bw-v2 .dash-prep-always li { position: relative; padding-left: 42px; }
.dash-bw-v2 .dash-prep-always li::before { content: ""; position: absolute; left: 11px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--cream-500, #9C9989); }
.dash-bw-v2 .dash-prep-fine { margin: 20px 0 0; padding-left: 42px; font-size: 14px; }
.dash-bw-v2 .dash-bw-side > .dash-bw-card:not(.dash-prep-card) { margin: 28px 0 0; padding: 16px 18px; border-radius: 14px; background: var(--color-cream, #F4F1E2); border: 1px solid var(--cream-400, #B7B4A8); }
.dash-bw-v2 .dash-bw-side > .dash-bw-card:not(.dash-prep-card) + .dash-bw-card { margin-top: 12px; }
.dash-bw-v2 .dash-bw-card-k { margin-bottom: 6px; }
.dash-bw-v2 .dash-bw-check li { font-size: 16px; color: var(--color-font, #292626); }
.dash-bw-v2 .dash-bw-check li::before { top: 9px; border-color: var(--cream-500, #9C9989); background: var(--color-surface, #FFFEF6); }
.dash-bw-v2 .dash-bw-card-p { font-size: 16px; }
.dash-bw-v2 .dash-bw-card-warn { border-left-width: 1px; border-color: var(--cream-400, #B7B4A8); }
.dash-bw-note { margin: 0 0 12px; font-size: 16px; line-height: 1.55; color: var(--text-secondary, #6B6560); }
.dash-bw-note b { font-weight: 500; color: var(--color-font, #292626); }
@media (max-width: 520px) { .dash-bw-v2 .dash-bw-form-dl { margin-left: 0; } }
/* Download icon: a heavier stroke in navy (the 1.6px one read as faint at this size) */
.dash-bw-v2 .dash-bw-form .dash-bw-form-dl { background: url(/dashboard/imgs/icons/rec-download-bold.svg) center / 17px 17px no-repeat; }
.dash-bw-v2 .dash-bw-form-dl-i { display: none; }
@media (hover: hover) { .dash-bw-v2 .dash-bw-form .dash-bw-form-dl:hover { background-color: var(--btn-secondary-bg-hover, rgba(16,41,60,0.06)); } }
/* no summary line above the steps: the steps below say the same (Pavel, 2026-10-01); Print sits on
   the "Before your draw" line */
.dash-bw-v2 .dash-prep-lede { display: none; }
.dash-bw-v2 .dash-prep-card > .dash-prep-sec:first-of-type { clear: none; margin-top: 4px; }
/* requisitions card on Circle Cream with a frame (Pavel, 2026-10-01) */
.dash-bw-v2 .dash-bw-req { background: var(--color-cream, #F4F1E2); border: 1px solid var(--cream-400, #B7B4A8); }
/* done card: the timeline's "done" mark (the 24px green dot used on the Foundations steps), and
   it sits at the middle of the card's height, not at the first line */
.dash-bw-v2 .dash-bw-done:not(.dash-bw-booked) { grid-template-columns: 24px minmax(0, 1fr); align-items: center; }
.dash-bw-v2 .dash-bw-done:not(.dash-bw-booked) .dash-bw-done-chip { width: 24px; height: 24px; align-self: center; line-height: 0; }
.dash-bw-v2 .dash-bw-done:not(.dash-bw-booked) .dash-bw-done-chip::after { width: 14px; height: 14px; }
/* "Email them all to me" in the card's top-right corner, on the title's line, above View and
   Download; its "Sent" note stays at the foot. Very narrow phones keep it at the foot. */
@media (min-width: 361px) {
	.dash-bw-v2 .dash-bw-req { position: relative; }
	.dash-bw-v2 .dash-bw-req-k { min-height: 32px; margin-bottom: 4px; display: flex; align-items: center; padding-right: 170px; }
	.dash-bw-v2 .dash-bw-maillink { position: absolute; top: 14px; right: 16px; }
	.dash-bw-v2 .dash-bw-req-foot { margin-top: 0; min-height: 0; }
}
@media (min-width: 361px) and (max-width: 520px) {
	.dash-bw-v2 .dash-bw-req-k { padding-right: 0; white-space: nowrap; }
	.dash-bw-v2 .dash-bw-maillink { height: 30px; padding: 0 11px; font-size: 13px; right: 12px; }
}
/* requisitions card back on Circle White (Pavel, same day), with a faint line between forms */
.dash-bw-v2 .dash-bw-req { background: var(--color-surface, #FFFEF6); border-color: rgba(41,38,38,.10); }
.dash-bw-v2 .dash-bw-form { padding: 10px 0; }
.dash-bw-v2 .dash-bw-form + .dash-bw-form { border-top: 1px solid rgba(41,38,38,.08); }
/* done tick, final: no drawn or masked pseudo-element (both came out low in Chrome on the Mac).
   The tick is a white check file set as the green dot's own background, centred by the browser. */
.dash-bw-v2 .dash-bw-done:not(.dash-bw-booked) .dash-bw-done-chip { display: block; background: var(--success, #3C6B49) url(/dashboard/imgs/icons/rec-check-white.svg) center / 16px 16px no-repeat; }
.dash-bw-v2 .dash-bw-done:not(.dash-bw-booked) .dash-bw-done-chip::after { content: none; display: none; }
/* requisitions card as wide as the done notice above it; "Email them all to me" is an underlined
   text link in the top-right corner, not a button */
.dash-bw-v2 .dash-bw-req { max-width: 760px; }
.dash-bw-v2 .dash-bw-maillink, .dash-bw-v2 .dash-bw-maillink:hover:not(:disabled) { height: auto; padding: 0; border: 0; border-radius: 0; background: none; font-size: 14.5px; font-weight: 500; line-height: 32px; color: var(--color-navy, #10293C); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 361px) and (max-width: 520px) { .dash-bw-v2 .dash-bw-maillink { height: auto; padding: 0; font-size: 14px; right: 16px; } }
/* ══ /BLOODWORK-V2 ═══════════════════════════════════════════════════════════════════════════ */

/* Booking page (Pavel, 2026-10-01): hovering a day or a time shows a navy edge, not orange; the
   chosen time is navy too. Delete to switch back. */
.dash-book-cal-open:hover { border-color: var(--color-navy, #10293C); }
.dash-book-slot:hover { border-color: var(--color-navy, #10293C); }
.dash-book-slot-on, .dash-book-slot-on:hover { border-color: var(--color-navy, #10293C); box-shadow: 0 0 0 .5px var(--color-navy, #10293C); }
/* Home step cards: a title that wraps ("Bloodwork requisition" in a narrow card) keeps its icon
   on the first line and its lines close together (Pavel, 2026-10-01; the icon was floating
   between two widely spaced lines). */
.dash-home-moment-title { align-items: flex-start; line-height: 1.25; }
.dash-home-moment-title > .dash-home-moment-icon { margin-top: 1px; }

/* ══ HOME-FOUNDATIONS-SHEET (Pavel, 2026-10-02) ═══════════════════════════════════════════════
   The "Your Foundations Visit, step by step" band leaves Teal 200 for Circle Cream and rises
   over the dark top with the Health Overview sheet's rounded corners (32px, 24px on phones).
   The dark block above gives up the overlap as extra foot room, so its cards are not covered.
   On cream the step cards take the sand stroke again. DELETE THIS BLOCK TO SWITCH BACK. */
.dash-home-road-care { position: relative; z-index: 1; background: var(--color-cream, #F4F1E2); }
/* the sheet only where the band follows the dark top directly (earlier rules set margin-top with
   .dash-home in front, so these carry it too) */
.dash-home .dash-home-alerts-top + .dash-home-road-care,
.dash-home .dash-home-hero + .dash-home-road-care { margin-top: -32px; border-radius: 32px 32px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,.08); }
.dash-home-alerts-top:has(+ .dash-home-road-care) { padding-bottom: 68px; }
.dash-home-hero:has(+ .dash-home-road-care) { padding-bottom: 88px; }
.dash-home-road-care .dash-home-dot:not(.dash-home-dot-past) { background: var(--color-cream, #F4F1E2); }
.dash-home-road-care .dash-home-moment { border-color: rgba(220,182,136,.45); }
@media (max-width: 767px) {
	.dash-home .dash-home-alerts-top + .dash-home-road-care,
	.dash-home .dash-home-hero + .dash-home-road-care { margin-top: -24px; border-radius: 24px 24px 0 0; }
	.dash-home-alerts-top:has(+ .dash-home-road-care) { padding-bottom: 48px; }
	.dash-home-hero:has(+ .dash-home-road-care) { padding-bottom: 60px; }
	.dash-home-road-care .dash-home-moment-mark:not(.dash-home-moment-mark-done) { background: var(--color-cream, #F4F1E2); }
}
/* ══ /HOME-FOUNDATIONS-SHEET ══════════════════════════════════════════════════════════════════ */

/* Menu counter (2026-10-02): the Shop row's cart count, at the row's end in the rail and the
   slide-out menu; on the collapsed rail it rides the icon's corner. No fill: a dark grey number
   in a lighter grey ring, as quiet as the row's icon (Pavel, 2026-10-02; was navy with white). */
.dash-nav-count { margin-left: auto; min-width: 24px; height: 24px; box-sizing: border-box; padding: 0 6px; border: 1.5px solid #B3ADA5; border-radius: 999px; background: transparent; color: #474444; font-size: 12.5px; line-height: 21px; font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; }
.dash-nav-count[hidden] { display: none; }
.dash-nav-new + .dash-nav-count { margin-left: 6px; }
body.dash-rail-collapsed .dash-sidebar .dash-nav-count { position: absolute; top: 2px; left: 28px; min-width: 18px; height: 18px; padding: 0 4px; font-size: 11px; line-height: 15px; background: var(--color-surface, #FFFEF6); }   /* filled here so the icon's lines do not run through the number */

/* Program page hero with a second line (a program's own words, dash_pathway_copy.go, 2026-10-02):
   the tagline reads first in white, the sentence under it stays quiet. */
.pathway-hero-sub:has(+ .pathway-hero-line) { color: #fff; font-weight: 500; }
.pathway-hero-line { margin-top: 6px; font-size: 14.5px; color: rgba(255,255,255,.72); max-width: 36rem; text-wrap: balance; }

/* Program quiz, height and weight (2026-10-02): the other unit's fields sit where the first field
   was, and the unit switch (the health intake's own two-button toggle) sits under them. */
.pathway-unit-alt { gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.pathway-unit-alt .pathway-unit-ft, .pathway-unit-alt .pathway-unit-in { width: 96px; }
.pathway-unit-toggle { margin-top: 14px; }

/* ── Program page: the "you could lose" card (Metabolic Health + Weight, 2026-10-02). It sits to
   the right of "Is this for you?" on wide screens and under the quiz button below that. Circle's
   own colours: a white pane on the card, navy track and line, the orange dot. ─────────────── */
.pintro-wl { --wl-fill: 40%; margin-top: 24px; padding: 22px 22px 18px; border-radius: 20px; background: var(--color-cream, #F4F1E2); border: 1px solid rgba(220,182,136,.45); max-width: 360px; }
.pintro-wl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pintro-wl-k { margin: 0; font-size: 15px; color: #474444; }
.pintro-wl-now { font-size: 15px; font-weight: 500; color: var(--color-font, #292626); font-variant-numeric: tabular-nums; }
.pintro-wl-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 6px 0 0; background: transparent; cursor: pointer; }
.pintro-wl-range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(to right, var(--color-navy, #10293C) var(--wl-fill), #FFFEF6 var(--wl-fill)); border: 1px solid rgba(16,41,60,.18); }
.pintro-wl-range::-moz-range-track { height: 8px; border-radius: 999px; background: #FFFEF6; border: 1px solid rgba(16,41,60,.18); }
.pintro-wl-range::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--color-navy, #10293C); }
.pintro-wl-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #FFFEF6; border: 2px solid var(--color-navy, #10293C); box-shadow: 0 2px 6px rgba(16,41,60,.25); }
.pintro-wl-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #FFFEF6; border: 2px solid var(--color-navy, #10293C); box-shadow: 0 2px 6px rgba(16,41,60,.25); }
.pintro-wl-range:focus-visible { outline: 2px solid var(--orange-400, #FF884C); outline-offset: 4px; border-radius: 999px; }
.pintro-wl-curve { display: block; width: 100%; height: auto; margin: 6px 0 8px; }
.pintro-wl-k2 { text-align: center; }
.pintro-wl-n { margin: 2px 0 0; text-align: center; font-size: 40px; line-height: 1.1; font-weight: 500; letter-spacing: -.01em; color: var(--color-font, #292626); font-variant-numeric: tabular-nums; }
.pintro-wl-fine { margin: 12px 0 0; font-size: 12px; line-height: 1.45; color: #5E5A57; text-align: center; text-wrap: balance; }
@media (min-width: 1100px) {
  .dash-pintro-you-visual { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 40px; align-items: start; }
  .dash-pintro-you-visual > * { grid-column: 1; }
  .dash-pintro-you-visual > .pintro-wl { grid-column: 2; grid-row: 1 / span 12; margin-top: 0; max-width: none; align-self: center; }
  .dash-pintro-you-visual > .pathway-checkout-btn.dash-pintro-btn { justify-self: start; }
}

/* ══ PINTRO-V2 (Pavel, 2026-10-02): the treatment program pages ═══════════════════════════════
   1. The photo band is full bleed with square corners; the rounded corners belong to the cream
      sheet that rises over it (the Health Overview pattern, same side inset and band height).
   2. One hierarchy: quiet small-caps labels, one large title per card, 16px body, and the steps
      as numbered rows with their own headline.
   3. The second card ("What you get" / "How it works") is a white card like the first, not navy.
   Every program page uses this. DELETE THIS BLOCK TO SWITCH BACK. */
.dash-pintro { --home-pad: 64px; }
@media (max-width: 1100px) { .dash-pintro { --home-pad: 40px; } }
@media (max-width: 767px) { .dash-pintro { --home-pad: 20px; } }
@media (min-width: 1400px) { .dash-pintro { --home-pad: max(64px, calc((100vw - var(--sidebar-w) - 1320px) / 2)); } }

/* 1. (the photo band and its cream sheet were replaced the same day by PINTRO-V3 below) */

/* 3. both cards white, same edge */
.dash-pintro .pathway-choice-card.dash-pintro-you,
.dash-pintro .dash-pintro-band { padding: 32px; border-radius: 20px; background: var(--color-surface, #FFFEF6); border: 1px solid rgba(220,182,136,.45); color: var(--color-font, #292626); }
.dash-pintro .dash-pintro-band { margin-top: 20px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; }
.dash-pintro .dash-pintro-band-how { border-left: 1px solid rgba(16,41,60,.10); padding-left: 48px; }
.dash-pintro .dash-pintro-band .pathway-choice-t,
.dash-pintro .dash-pintro-band .pathway-choice-list li,
.dash-pintro .dash-pintro-band .dash-pintro-steps li b { color: var(--color-font, #292626); }
.dash-pintro .dash-pintro-band .pathway-choice-fine,
.dash-pintro .dash-pintro-band .dash-pintro-steps li,
.dash-pintro .dash-pintro-band .dash-pintro-cta-note { color: #5E5A57; }

/* 2. hierarchy */
.dash-pintro .pathway-choice-k,
.dash-pintro .dash-pintro-band .pathway-choice-k,
.dash-pintro .dash-pintro-lead { margin: 0 0 12px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #6B6560; }
.dash-pintro .dash-pintro-lead { margin-top: 24px; }
.dash-pintro .pathway-choice-t { margin: 0 0 12px; max-width: 780px; font-size: 28px; line-height: 1.18; letter-spacing: -.01em; text-wrap: balance; }
.dash-pintro .dash-pintro-band .pathway-choice-t { font-size: 24px; text-wrap: pretty; }
.dash-pintro .pathway-choice-p { margin: 0; max-width: 700px; font-size: 16.5px; line-height: 1.55; color: #5E5A57; }
.dash-pintro .dash-pintro-chips { gap: 6px; }
.dash-pintro .dash-pintro-chip { padding: 4px 11px; font-size: 13px; font-weight: 400; }   /* smaller (Pavel, 2026-10-02) */
.dash-pintro .dash-pintro-you .pathway-checkout-btn.dash-pintro-btn { margin-top: 28px; }
.dash-pintro .dash-pintro-band .pathway-choice-list { margin: 4px 0 0; }
.dash-pintro .dash-pintro-band .pathway-choice-list li { padding: 7px 0 7px 30px; font-size: 16px; }
.dash-pintro .dash-pintro-band .pathway-choice-list li::before { top: 11px; width: 18px; height: 18px; }
.dash-pintro .dash-pintro-band .pathway-choice-fine { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(16,41,60,.08); font-size: 13px; line-height: 1.55; }
/* steps: a numbered row, the bold lead as its own line */
.dash-pintro .dash-pintro-band .dash-pintro-steps { list-style: none; margin: 4px 0 0; padding: 0; counter-reset: pintro-step; display: grid; gap: 18px; }
.dash-pintro .dash-pintro-band .dash-pintro-steps li { position: relative; margin: 0; padding-left: 44px; counter-increment: pintro-step; font-size: 15px; line-height: 1.5; }
.dash-pintro .dash-pintro-band .dash-pintro-steps li::before { content: counter(pintro-step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--cream-deep, #E6E2D1); font-size: 13px; font-weight: 500; color: var(--color-font, #292626); }
.dash-pintro .dash-pintro-band .dash-pintro-steps li b { display: block; margin-bottom: 2px; font-size: 16.5px; font-weight: 500; line-height: 1.35; }
.dash-pintro .dash-pintro-band .dash-pintro-cta { margin-top: 26px; }
/* the closing quiz button is the same pill as the first one, not a full-width bar */
.dash-pintro .dash-pintro-band .dash-pintro-cta .pathway-checkout-btn.dash-pintro-btn { display: inline-flex; width: auto; margin: 0; }
@media (max-width: 1199px) {   /* the rail takes 300px: under this the two columns are too narrow to read */
  .dash-pintro .dash-pintro-band { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dash-pintro .dash-pintro-band-how { border-left: 0; padding-left: 0; margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(16,41,60,.10); }
}
@media (max-width: 767px) {
  .dash-pintro .pathway-choice-card.dash-pintro-you, .dash-pintro .dash-pintro-band { padding: 22px 20px; border-radius: 18px; }
  .dash-pintro .pathway-choice-t { font-size: 23px; text-wrap: pretty; }
  .dash-pintro .dash-pintro-band .dash-pintro-cta .pathway-checkout-btn.dash-pintro-btn { width: 100%; justify-content: center; }
  .dash-pintro .dash-pintro-band .pathway-choice-t { font-size: 21px; }
  .dash-pintro .pathway-choice-p { font-size: 16px; }
}
/* ══ /PINTRO-V2 ══════════════════════════════════════════════════════════════════════════════ */

/* ══ PINTRO-V3 (Pavel's mockup, 2026-10-02, Figma CH 2058:3283): the program page's top ═══════
   The website's treatment hero: its warm ground (Sand 100 falling to Sand 200, measured from
   circlehealth.ca/treatments), the program's name in Circle Black with the quiz button, and the
   site's own photo standing to the right. "Is this for you?" sits under the name; the second card
   runs full width below. The card styles are PINTRO-V2's. */
.dash-main:has(.dash-pintro-v3) { max-width: none; padding: 0; }
.dash-pintro.dash-pintro-v3 { min-height: 100vh; padding: 20px var(--home-pad) 64px; background: linear-gradient(180deg, var(--sand-100, #FAF0E5) 0%, var(--sand-200, #F0DEC9) 100%); }
.dash-pintro-v3 > .rec-back { margin: 0 0 4px; }
.pintro-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36%); grid-template-rows: auto 1fr; gap: 28px 56px; align-items: start; }
.pintro-head { grid-column: 1; grid-row: 1; padding-top: 12px; }
.pintro-top > .dash-pintro-you { grid-column: 1; grid-row: 2; margin: 0; }
/* the photo runs exactly from the top of "Treatment program" to the foot of the "Is this for
   you?" card (Pavel, 2026-10-02), so the gap under the photo and under the card is the same */
.pintro-side { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; margin-top: 12px; min-height: 0; display: flex; flex-direction: column; gap: 20px; }
.pintro-photo { flex: 1 1 auto; position: relative; min-height: 300px; border-radius: 24px; overflow: hidden; background: var(--sand-300, #E3C9AA); }
/* the weight card (Metabolic) under the photo: the column's own width, a white pane on the warm ground */
.pintro-side > .pintro-wl { flex: none; margin: 0; max-width: none; background: var(--color-surface, #FFFEF6); }
.pintro-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.pintro-photo-hair img { object-position: 40% 50%; }   /* the hair photo is landscape: keep her face in the frame */
.pintro-k { margin: 0 0 10px; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #474444; }
.pintro-h1 { margin: 0 0 12px; font-size: 52px; line-height: 1.05; font-weight: 500; letter-spacing: -.02em; color: var(--color-font, #292626); text-wrap: balance; }
.pintro-sub { margin: 0; max-width: 620px; font-size: 20px; line-height: 1.4; color: #474444; }
.pintro-line { margin: 8px 0 0; max-width: 620px; font-size: 16px; line-height: 1.5; color: #5E5A57; }
.pintro-head .pathway-checkout-btn.dash-pintro-btn { display: inline-flex; width: auto; margin: 26px 0 0; }
.dash-pintro-v3 > .dash-journey { margin-top: 28px; }
.dash-pintro-v3 > .dash-pintro-band { margin-top: 28px; }
/* in the narrower left column the weight card sits under the chips, not beside them */
.dash-pintro-v3 .dash-pintro-you-visual { display: block; }
.dash-pintro-v3 .dash-pintro-you-visual > .pintro-wl { margin-top: 24px; max-width: 380px; }
@media (max-width: 1199px) {
  .pintro-top { grid-template-columns: minmax(0, 1fr) minmax(0, 34%); gap: 24px 32px; }
  .pintro-h1 { font-size: 44px; }
}
@media (max-width: 1023px) {
  /* one column: name and button, the photo, then the card */
  .pintro-top { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 24px; }
  .pintro-head, .pintro-top > .dash-pintro-you, .pintro-side { grid-column: 1; grid-row: auto; }
  .pintro-side { margin-top: 0; }
  .pintro-side > .pintro-wl { max-width: 420px; }
  .pintro-photo { flex: none; min-height: 0; aspect-ratio: 16 / 9; max-width: 640px; border-radius: 22px; }
}
@media (max-width: 767px) {
  .dash-pintro.dash-pintro-v3 { padding: 8px var(--home-pad) 48px; }
  .pintro-head { padding-top: 4px; }
  .pintro-h1 { font-size: 34px; }
  .pintro-sub { font-size: 17.5px; }
  .pintro-photo { aspect-ratio: 3 / 2; border-radius: 18px; }
  .pintro-head .pathway-checkout-btn.dash-pintro-btn { width: 100%; justify-content: center; margin-top: 22px; }
}
/* ══ /PINTRO-V3 ══════════════════════════════════════════════════════════════════════════════ */

/* ══ PGRID-TALL (Pavel, 2026-10-02): the Treatment Programs page. The tiles carry the website's
   photos (pathwayPhotoURL), stand taller and speak larger. Delete this block to switch back. */
.dash-pgrid-tile.dash-pathway-tile { aspect-ratio: 1 / 1.08; padding: 22px; background-position: center 30%; }
.dash-pgrid-tile .dash-pathway-tile-title { font-size: 26px; line-height: 1.15; letter-spacing: -.015em; }
.dash-pgrid-tile .dash-pathway-tile-tagline { font-size: 16px; line-height: 1.4; -webkit-line-clamp: 3; }
.dash-pgrid-tile .dash-pathway-tile-head { gap: 8px; }
.dash-pgrid-tile .dash-pathway-tile-active { font-size: 14px; }
.dash-pgrid-tile .dash-pathway-tile-cta { padding: 9px 16px 9px 18px; font-size: 15px; }
.dash-pgrid-tile .dash-pathway-tile-time { font-size: 14px; }
.dash-pgrid-body { padding: 20px 22px 22px; gap: 12px; }
.dash-pgrid-inc { font-size: 15.5px; }
.dash-pgrid-note { font-size: 14.5px; }
.dash-pgrid-stage { font-size: 16px; }
@media (max-width: 599px) {
  .dash-pgrid-tile.dash-pathway-tile { aspect-ratio: 1 / 0.92; padding: 18px; }
  .dash-pgrid-tile .dash-pathway-tile-title { font-size: 24px; }
}
/* columns follow the room there is: a card is never narrower than 280px (three across squeezed the
   words out of the tile on a ~1100px window, Pavel 2026-10-02) */
.dash-pgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.dash-pgrid-tile.dash-pathway-tile { min-height: 300px; }
/* an owned program with nothing to report has no body: no blank strip under its photo */
.dash-pgrid-body:empty { display: none; }
/* page title and its line at the size of the other pages' (Shop, Visits): 42px Medium, 17px */
.dash-pathway-list .dash-pathway-header { max-width: 46rem; margin-bottom: 28px; }
.dash-pathway-list .dash-pathway-title-main { margin: 0; font-size: 42px; line-height: 1.1; font-weight: 500; letter-spacing: -.015em; color: var(--color-font, #292626); }
.dash-pathway-list .dash-pathway-subtitle { margin: 10px 0 0; font-size: 17px; line-height: 1.5; color: var(--text-secondary, #6B6560); }
@media (max-width: 767px) {
  /* the page shell already gives the side inset; this page added its own 24px on top of it */
  .dash-pathway-list { padding-left: 0; padding-right: 0; }
  .dash-pathway-list .dash-pathway-title-main { font-size: 30px; }
  .dash-pathway-list .dash-pathway-subtitle { font-size: 15.5px; }
}
/* ══ /PGRID-TALL ═════════════════════════════════════════════════════════════════════════════ */

/* The "you could lose" card, much shorter (Pavel, 2026-10-02): tighter padding, a flatter curve,
   and "You could lose" with its number on one line. Delete this block for the tall version. */
.pintro-wl, .pintro-side > .pintro-wl { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 14px 18px 12px; border-radius: 18px; }
.pintro-wl > * { grid-column: 1 / -1; }
.pintro-wl-range { height: 24px; margin-top: 2px; }
.pintro-wl-curve { margin: 2px 0 4px; }
.pintro-wl > .pintro-wl-k2 { grid-column: 1; text-align: left; }
.pintro-wl > .pintro-wl-n { grid-column: 2; margin: 0; font-size: 26px; line-height: 1.15; text-align: right; }
.pintro-wl-fine { margin-top: 8px; font-size: 11.5px; line-height: 1.4; text-align: left; text-wrap: pretty; }

/* ══ QUIZ-NAVY (Pavel, 2026-10-02): the program quizzes take the health intake's look ═════════
   The quiz kept its own orange rules when the intake was tidied (INTAKE-TIDY, part 6). Chosen
   answers, the scale, the number field and Next are now Circle Navy, as on the intake. The progress
   bar stays orange, as it does on the intake. DELETE THIS BLOCK TO SWITCH BACK. */
#pathway-quiz .pathway-step .dash-intake-option { background: rgba(255,254,246,.55); border-color: rgba(16,41,60,.10); }
@media (hover: hover) { #pathway-quiz .pathway-step .dash-intake-option:hover { background: rgba(255,254,246,.9); border-color: rgba(16,41,60,.45); } }
#pathway-quiz .pathway-step .dash-intake-option:has(input:checked),
#pathway-quiz .pathway-step .dash-intake-option:has(input:checked):hover { background: var(--color-surface, #FFFEF6); border-color: var(--color-navy, #10293C); box-shadow: 0 0 0 .5px var(--color-navy, #10293C); }
#pathway-quiz .pathway-step .dash-intake-option:has(input[type="radio"]:checked) .dash-intake-check-circle { border-color: var(--color-navy, #10293C); background: transparent; }
#pathway-quiz .pathway-step .dash-intake-option:has(input[type="radio"]:checked) .dash-intake-check-circle::after { background: var(--color-navy, #10293C); }
#pathway-quiz .pathway-step .dash-intake-option:has(input[type="checkbox"]:checked) .dash-intake-check-circle,
#pathway-quiz .pathway-step .dash-intake-option:has(input:checked) .dash-intake-check-square { background: var(--color-navy, #10293C); border-color: var(--color-navy, #10293C); }
#pathway-quiz .pathway-step .dash-intake-option:has(input:focus-visible) { outline: 2px solid var(--color-navy, #10293C); outline-offset: 2px; }
/* scale */
@media (hover: hover) { #pathway-quiz .pathway-step .dash-intake-scale .dash-intake-option:hover { background: rgba(16,41,60,.07); border-color: rgba(16,41,60,.16); } }
#pathway-quiz .pathway-step .dash-intake-scale .dash-intake-option:has(input:checked),
#pathway-quiz .pathway-step .dash-intake-scale .dash-intake-option:has(input:checked):hover { background: var(--color-navy, #10293C); border-color: var(--color-navy, #10293C); border-right-color: var(--color-navy, #10293C); box-shadow: none; }
#pathway-quiz .pathway-step .dash-intake-scale .dash-intake-option:has(input:checked) > span { color: #FFFEF6; }
/* height / weight field */
#pathway-quiz .dash-intake-number-field:focus-within { border-color: var(--color-navy, #10293C); box-shadow: 0 0 0 3px rgba(16,41,60,.12); }
/* Next / See results: the navy primary, with the countdown ring in cream on it */
#pathway-quiz .pathway-step-next, #pathway-quiz .pathway-step-next:hover:not(:disabled) { background: var(--color-navy, #10293C); color: #FFFEF6; border: 0; box-shadow: none; }
#pathway-quiz .pathway-step-next:disabled { background: var(--color-navy, #10293C); color: #FFFEF6; opacity: .35; }
#pathway-quiz .pathway-step-next .pathway-count-track { stroke: rgba(255,254,246,.28); }
#pathway-quiz .pathway-step-next .pathway-count-ring { stroke: #FFFEF6; }
#pathway-quiz .pathway-step-next .pathway-count-n { color: #FFFEF6; }
/* ══ /QUIZ-NAVY ══════════════════════════════════════════════════════════════════════════════ */

/* ══ TILE-FOOT (Pavel, 2026-10-02): program tiles, home and the Treatment Programs page ═══════
   The photo is left clear: "Included" (or the quiz length) sits top left, the name and its line
   sit at the foot over a single bottom shade, and the outlined Open/Explore button is just a
   right-facing chevron in the bottom right corner. Markup unchanged (the head and foot wrappers
   are flattened with display: contents). DELETE THIS BLOCK TO SWITCH BACK. */
.dash-pathway-tile::after { background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.52) 22%, rgba(0,0,0,.14) 46%, rgba(0,0,0,0) 62%); }
.dash-pathway-tile-head, .dash-pathway-tile-foot { display: contents; }
.dash-pathway-tile > .dash-pathway-tile-head > *, .dash-pathway-tile > .dash-pathway-tile-foot > * { position: relative; z-index: 1; }
/* top left: the status tag, on a soft dark chip so it reads on any photo */
.dash-pathway-tile .dash-pathway-tile-active,
.dash-pathway-tile .dash-pathway-tile-time { order: -1; align-self: flex-start; top: auto; right: auto; margin: 0; padding: 5px 10px 5px 8px; border-radius: 999px; background: rgba(16,24,32,.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; text-shadow: none; }
/* foot: name, then its line, with room kept for the chevron */
.dash-pathway-tile .dash-pathway-tile-title { margin-top: auto; padding-right: 34px; }
.dash-pathway-tile .dash-pathway-tile-tagline { margin-top: 5px; padding-right: 34px; }
.dash-pgrid-tile .dash-pathway-tile-tagline { margin-top: 8px; }
/* bottom right: the chevron alone (the word stays for screen readers) */
.dash-pathway-tile .dash-pathway-tile-cta,
.dash-pgrid-tile .dash-pathway-tile-cta { position: absolute; right: 14px; bottom: 14px; width: 28px; height: 28px; margin: 0; padding: 0 !important; gap: 0; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; font-size: 0 !important; justify-content: center; }   /* !important: buttons.css paints this class as an outlined pill */
.dash-pathway-tile .dash-pathway-tile-cta svg { width: 22px; height: 22px; }
.dash-pgrid-tile .dash-pathway-tile-cta { right: 18px; bottom: 20px; }
.dash-pathway-tile:hover .dash-pathway-tile-cta { transform: translateX(3px); }
/* ══ /TILE-FOOT ══════════════════════════════════════════════════════════════════════════════ */

/* ══ SOCIAL-SMALL (Pavel, 2026-10-02): the Instagram band at the foot of the home page is
   shorter. Its height came from the 3x3 photo grid (460px square); the grid is 300px now, with
   less padding and a smaller title. Two-column layout only; phones and tablets are unchanged.
   Delete this block to switch back. */
@media (min-width: 1101px) {
  .dash-home-social { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; row-gap: 28px; padding: 40px var(--home-pad) 32px; }
  .dash-home-social .dash-home-social-title { margin-bottom: 12px; font-size: 34px; }
  .dash-home-social-text { margin-bottom: 20px; max-width: 520px; font-size: 15px; line-height: 1.55; }
  .dash-home-social .dash-home-follow { padding: 11px 22px; font-size: 14.5px; }
  .dash-home-ig { gap: 6px; }
  .dash-home-ig .dash-home-tile { border-radius: 8px; }
}
/* ══ /SOCIAL-SMALL ═══════════════════════════════════════════════════════════════════════════ */
/* A program photo that does not quite cover its tile shows the tile's own colour at the edge:
   warm brown, not black, so a hairline never reads as a border (Pavel, 2026-10-02). */
.dash-pathway-tile { background-color: #3A2E24; }

/* ══ HOME-PANELS (Pavel, 2026-10-02): the colours of the home page's lower bands ══════════════
   Down the page: dark top, then October 13 on warm Sand, Treatment Programs on a Circle Cream
   gradient, Your Clinic small (about 260px) on a Mist gradient, then the navy Instagram band.
   Each band differs from its neighbours in temperature, so they read as separate rooms.
   DELETE THIS BLOCK TO SWITCH BACK (Oct 13 on Mist, programs on Sand 200, clinic on cream). */
/* October 13: Sand, a step lighter at the foot */
.rel .rel-launch { background: linear-gradient(to bottom, var(--sand-200, #F0DEC9) 0%, var(--sand-200, #F0DEC9) 40%, var(--sand-100, #FAF0E5) 100%); }
.dash-home .dash-home-breakout:has(+ .rel > .rel-launch:first-child) { background: linear-gradient(to bottom, transparent 88px, var(--sand-200, #F0DEC9) 88px); }
@media (max-width: 767px) { .dash-home .dash-home-breakout:has(+ .rel > .rel-launch:first-child) { background: linear-gradient(to bottom, transparent 76px, var(--sand-200, #F0DEC9) 76px); } }
/* Treatment Programs: the darker cream, flat (Pavel, second pass: #E6E2D1) */
.dash-home-rest .dash-pathway-carousel { background: var(--cream-deep, #E6E2D1); }
/* Your Clinic, second pass: an even split. The photo fills the left half edge to edge (no circle),
   the right half is Circle Cream with the words centred in it. About 340px tall. */
.dash-home-clinic .dash-home-opens { background: var(--color-cream, #F4F1E2); }
.dash-home-clinic .dash-home-opens-k { color: var(--cream-700, #605E52); }
@media (min-width: 768px) {
  .dash-home-clinic .dash-home-opens { padding: 0; min-height: 340px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dash-home-clinic .dash-home-opens-banner { justify-self: stretch; align-self: stretch; width: 100%; height: 100%; min-height: 340px; aspect-ratio: auto; margin: 0; border-radius: 0; object-position: 50% 50%; }
  .dash-home-clinic .dash-home-opens > *:not(.dash-home-opens-banner) { margin-left: 56px; margin-right: var(--home-pad); }
}
/* ══ /HOME-PANELS ════════════════════════════════════════════════════════════════════════════ */
/* The 911 line under the Care Team message is the same size and strength as the message itself
   (Pavel, 2026-10-02; it was 12px at 80%). */
.chat-window-empty .chat-window-empty-note { font-size: 16px; opacity: 1; margin-top: 4px; }

/* Program pages: each takes its own ground, the gradient of its page on circlehealth.ca
   (bg-gradient-to-b from-<colour>-100 to-<colour>-200, read from the site 2026-10-02). Hair keeps
   Sand, the block's default. Keyed on the photo's class so the markup is unchanged. */
.dash-pintro.dash-pintro-v3:has(.pintro-photo-metabolic) { background: linear-gradient(180deg, var(--peach-100, #FBEFE7) 0%, var(--peach-200, #F2DDCE) 100%); }
.dash-pintro.dash-pintro-v3:has(.pintro-photo-ed)        { background: linear-gradient(180deg, var(--clay-100, #FBEEEA) 0%, var(--clay-200, #F6DAD2) 100%); }
.dash-pintro.dash-pintro-v3:has(.pintro-photo-trt)       { background: linear-gradient(180deg, var(--teal-100, #EFF3EE) 0%, var(--teal-200, #DCE4DB) 100%); }
.dash-pintro.dash-pintro-v3:has(.pintro-photo-hrt)       { background: linear-gradient(180deg, var(--blush-100, #F8F0ED) 0%, var(--blush-200, #F0D2C9) 100%); }
.dash-pintro.dash-pintro-v3:has(.pintro-photo-skin)      { background: linear-gradient(180deg, var(--butter-100, #F6F1E6) 0%, var(--butter-200, #EBD8A8) 100%); }
/* Messages list previews wrap to two lines instead of cutting off with "…" after a few words
   (Shawn's review, 2026-10-01) */
.chat-list-item-preview { white-space: normal; overflow: hidden; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; }
/* Uninsured Fee Schedule (dash_fees.go, 2026-10-03): the agreement page's type, plus tables */
.fee-page { max-width: 52rem; }
.fee-tw { margin: 0 0 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fee-t { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; }
.fee-t th, .fee-t td { padding: 10px 12px 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(16,41,60,.10); font-weight: 400; }
.fee-t thead th { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: #605E52; border-bottom-color: rgba(16,41,60,.22); white-space: nowrap; }
.fee-t td { white-space: nowrap; }
.fee-t tbody th { min-width: 180px; }
.fee-t3 td:last-child, .fee-t4 td { white-space: normal; }
@media (max-width: 767px) { .fee-t { font-size: 13.5px; } .fee-t tbody th { min-width: 0; width: 44%; } .fee-t td, .fee-t thead th { white-space: normal; } .fee-t th, .fee-t td { padding-right: 8px; } .fee-t thead th { font-size: 11px; } }
/* "In plain terms" notes under each agreement heading (dash_agreement_plain.go, 2026-10-03) */
.agr-plain { margin: 4px 0 16px; padding: 2px 0 2px 14px; border-left: 3px solid var(--color-sand, #DCB688); font-size: 14.5px; line-height: 1.55; color: var(--color-font, #292626); }
.agr-plain b { display: block; margin: 0 0 2px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #605E52; }
.agr-plain-about { margin: 0 0 20px; font-size: 13.5px; line-height: 1.55; color: #474444; }
.agr-plain-about b { font-weight: 500; }
.fee-public { margin: 0 auto; padding-bottom: 64px; }
/* Cards on file (dash_cards.go, 2026-10-03) */
.set-card-acts { display: inline-flex; flex-wrap: wrap; gap: 4px 16px; justify-content: flex-end; }
.set-card-acts .dash-set-edit { white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; }
.set-card-rm { color: #474444; }
.set-card-note { color: var(--color-font, #292626); }
.set-card-err { margin: 12px 0 0; font-size: 14px; color: #8A2A1A; }
#set-cards .dash-set-actions { margin-top: 20px; }


/* ── PLAN-CHANGE (2026-10-04): Settings > Change plan (go_app/dash_plan_change.go). One block. ── */
.set-pc-sum { width: 100%; max-width: 460px; border-collapse: collapse; margin: 12px 0 4px; font-size: 14px; }
.set-pc-sum th, .set-pc-sum td { padding: 8px 0; border-bottom: 1px solid rgba(220,182,136,.25); text-align: left; font-weight: 400; color: var(--font); vertical-align: top; }
.set-pc-sum td { text-align: right; white-space: nowrap; padding-left: 16px; font-variant-numeric: tabular-nums; }
.set-pc-sum th small { display: block; font-size: 12.5px; line-height: 1.4; color: var(--text-secondary); }
.set-pc-sum .set-pc-total th, .set-pc-sum .set-pc-total td { font-weight: 500; border-bottom: 0; font-size: 15px; }
.set-pc-opt .circle-btn { margin-top: 12px; }
.set-pc-confirm[hidden], .set-pc-opts[hidden] { display: none; }
.set-pc-field { display: block; margin: 14px 0 10px; max-width: 420px; }
.set-pc-field span { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.set-pc-field input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid rgba(16,41,60,.22); border-radius: 12px; background: var(--surface, #FFFEF6); font: inherit; font-size: 16px; color: var(--font); box-sizing: border-box; }
.set-pc-field input:focus { outline: 2px solid var(--color-navy, #10293C); outline-offset: 1px; }
.set-pc-done { margin-bottom: 18px; }
#set-planchange .rec-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; margin: 6px 0 4px; }
/* Family (go_app/dash_family.go) */
.set-fam-form { margin-top: 12px; }
.set-fam-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; max-width: 520px; }
.set-fam-grid .set-pc-field { max-width: none; }
.set-pc-field select { width: 100%; height: 48px; padding: 0 12px; border: 1px solid rgba(16,41,60,.22); border-radius: 12px; background: var(--surface, #FFFEF6); font: inherit; font-size: 16px; color: var(--font); box-sizing: border-box; }
#set-family .rec-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; margin: 6px 0 4px; }
@media (max-width: 480px) { .set-fam-grid { grid-template-columns: minmax(0, 1fr); } }
/* A child's profile and the name row that moves between "me" and each child (go_app/dash_family_child.go) */
.fam-switch { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 4px 0 22px; padding-bottom: 2px; }
.fam-switch::-webkit-scrollbar { display: none; }
.fam-switch-i { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 16px 6px 6px; border-radius: 999px; border: 1px solid rgba(41,38,38,.12); background: var(--surface, #FFFEF6); text-decoration: none; color: var(--font); }
.fam-switch-i:hover { border-color: rgba(41,38,38,.3); }
.fam-switch-on { background: var(--color-navy, #10293C); border-color: var(--color-navy, #10293C); color: #FFFEF6; }
.fam-switch-n { display: flex; flex-direction: column; font-size: 14.5px; line-height: 1.2; font-weight: 500; }
.fam-switch-n small { font-size: 12px; font-weight: 400; opacity: .7; }
.fam-av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(220,182,136,.35); color: var(--color-navy, #10293C); font-size: 16px; font-weight: 500; }
.fam-switch-on .fam-av { background: rgba(255,254,246,.18); color: #FFFEF6; }
.fam-av-lg { width: 44px; height: 44px; }
.fam-cards { display: grid; gap: 10px; max-width: 560px; }
.fam .fam-card { grid-template-columns: 44px 1fr 22px; }
.fam-act { margin: 22px 0 0; }
.fam-facts { max-width: 560px; }
.fam-facts td { white-space: normal; }
.fam-form { max-width: 560px; }
.fam-form[hidden], .fam-facts[hidden], .fam-edit-btn[hidden] { display: none; }
.fam-form-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.fam-saved { margin-bottom: 8px; }
.fam .rec-sec-hd { align-items: center; justify-content: flex-start; gap: 14px; }
.fam .fam-edit-btn { font-size: 14px; text-decoration: underline; text-underline-offset: 3px; color: var(--font); min-height: 32px; }
.fam-ask { margin-top: 14px; }
.fam-ask-open[hidden] { display: none; }
.fam-wide { max-width: 520px; }
.set-pc-field textarea { width: 100%; padding: 12px 14px; border: 1px solid rgba(16,41,60,.22); border-radius: 12px; background: var(--surface, #FFFEF6); font: inherit; font-size: 16px; line-height: 1.5; color: var(--font); box-sizing: border-box; resize: vertical; }
.fam-results th small { display: block; font-size: 12.5px; color: var(--text-secondary); }
.fam .fam-results td { white-space: nowrap; }
.fam .rec-mk-static { cursor: default; }
.fam .fam-cat { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.fam a.fam-switch-i, .fam a.fam-switch-i:hover, .fam a.fam-switch-i *, .fam a.fam-card, .fam a.fam-card:hover { text-decoration: none; }
.fam-switch-n { justify-content: center; }
.fam-av-pic { overflow: hidden; background: none; }
.fam-av-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fam-head { display: flex; align-items: center; gap: 18px; margin-bottom: 6px; }
.fam-head .rec-hd { margin: 0; }
.fam-av-xl { width: 84px; height: 84px; font-size: 30px; }
.fam-photo-btn { display: inline-block; margin-top: 6px; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; color: var(--font); cursor: pointer; min-height: 32px; }
.fam-photo-in { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* the list of choices: a name and one line each; everything else waits until one is chosen */
.set-pc-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 64px; padding: 14px 18px; border: 0; border-bottom: 1px solid rgba(220,182,136,.25); background: transparent; font: inherit; color: var(--font); text-align: left; cursor: pointer; }
.set-pc-row:last-child { border-bottom: 0; }
.set-pc-row:hover { background: rgba(220,182,136,.10); }
.set-pc-row:focus-visible { outline: 2px solid var(--color-navy, #10293C); outline-offset: -2px; }
.set-pc-row-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.set-pc-row-t b { font-size: 15.5px; font-weight: 500; }
.set-pc-row-t small { font-size: 13.5px; line-height: 1.4; color: var(--text-secondary); }
.set-pc-row-chev { flex: none; width: 18px; height: 18px; opacity: .55; }
/* ── end PLAN-CHANGE ── */
.set-pc-done a { color: var(--color-navy, #10293C); text-decoration: underline; text-underline-offset: 3px; }
/* Family: the add-a-child form stays folded once there is a child (Pavel, 2026-10-06: "why does this need to be so big") */
.set-fam-more { margin-top: 4px; }
.set-fam-more > summary { display: inline-block; cursor: pointer; padding: 8px 0; font-size: 14px; color: var(--color-navy, #10293C); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.set-fam-more > summary::-webkit-details-marker { display: none; }
.set-fam-more[open] > summary { text-decoration: none; font-weight: 500; color: var(--font); cursor: default; }
.set-fam-more > .set-fam-form { margin-top: 6px; }
/* Family screen rows: photo or initial, name over a quiet line, action (dash_family.go familyRowHTML) */
.set-fam-row { gap: 14px; }
.set-fam-who { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 2px; }
.set-fam-who > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; overflow-wrap: anywhere; }
.set-fam-name { color: var(--font); text-decoration: none; font-weight: 500; }
.set-fam-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.set-fam-sub { font-size: 13px; color: var(--text-secondary); }
/* child profile: "Edit details" beside the photo link; no table of details on the page */
button.fam-photo-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; }
.fam-photo-btn + .fam-photo-btn { margin-left: 16px; }
.fam-details { margin-top: 0; }
.fam-details > #fam-facts:empty { display: none; }
.fam .fam-switch { margin: 0 0 20px; }
/* Invited to a Family plan, not joined yet (dash_family.go familyInviteBannerHTML) */
.fam-invite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 0 0 20px; padding: 20px 22px; border-radius: 20px; background: var(--surface, #FFFEF6); border: 1px solid rgba(16,41,60,.14); box-shadow: 0 18px 40px -28px rgba(16,41,60,.5); }
.fam-invite-tx { flex: 1 1 280px; min-width: 0; font-size: 15px; line-height: 1.5; color: var(--font); }
.fam-invite-tx b { display: block; font-size: 18px; font-weight: 500; }
.fam-invite-tx p { margin: 4px 0 0; color: var(--text-secondary); }
.fam-invite-page { max-width: 760px; }
/* membership checkout: the typed name over the agreement tick (dash_membership_checkout.go) */
.membership-sign { margin: 18px 0 4px; text-align: left; }
.membership-sign-hint { margin: 0 0 10px; min-height: 0; font-size: 13.5px; color: #8A3B2B; text-align: left; }
.membership-sign-hint:empty { display: none; }
/* Membership purchase: the agreement step (dash_membership_checkout.go membershipAgreementStepHTML) */
.mem-agr { max-width: 760px; margin: 0 auto; text-align: left; }
.mem-agr-h { margin: 8px 0 6px; font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; color: var(--color-font, #292626); }
.mem-agr-lede { margin: 0 0 16px; font-size: 16px; line-height: 1.55; color: #5E5A57; }
.mem-agr-box { max-height: min(52vh, 520px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 20px 20px; border: 1px solid rgba(16,41,60,.18); border-radius: 16px; background: var(--surface, #FFFEF6); }
.mem-agr-box:focus-visible { outline: 2px solid var(--color-navy, #10293C); outline-offset: 2px; }
.mem-agr-more { margin: 10px 0 0; font-size: 14px; color: #5E5A57; }
.mem-agr-more[hidden] { display: none; }
.mem-agr-sign { margin: 18px 0 6px; }
.mem-agr-sign input:disabled { background: rgba(16,41,60,.04); }
.mem-agr .membership-btn { margin-top: 10px; }
@media (max-width: 560px) {
  .mem-agr-h { font-size: 23px; }
  .mem-agr-box { max-height: 48vh; padding: 2px 14px 16px; }
}
/* "Founding member pricing": a quiet navy tag, not an orange outline that reads as a warning (Pavel, 2026-10-06) */
.membership-pill { padding: 3px 10px; background: rgba(16,41,60,.07); color: var(--color-navy, #10293C); border: 0; }
.thanks-card + .thanks-card { margin-top: 12px; }
/* Health intake finished, a program's questions next (dash_intake_programs.go) */
.dash-intake-nextprog { max-width: 40rem; margin: 18px auto 0; padding: 22px 22px 6px; text-align: center; border-radius: 20px; background: var(--surface, #FFFEF6); border: 1px solid rgba(16,41,60,.12); }
.dash-intake-nextprog-t { margin: 4px 0 8px; font-size: 22px; line-height: 1.25; font-weight: 500; color: var(--font); }
.dash-intake-nextprog .dash-intake-finished-cta { margin: 16px 0 14px; }
.dash-intake-finished-quiet { margin-top: 14px; }
.rec-unpaid-acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; }
/* a program's quiz or checkout, for a non-member while programs are members-only (dash_main.go programsClosedHTML) */
.prog-closed-acts { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 20px 0 0; }
.prog-closed-acts .pathway-checkout-btn { display: inline-flex; width: auto; text-decoration: none; padding: 14px 28px; }

/* HOME-WIDE (Pavel, 2026-10-07: "the desktop spacing is too narrow ... lots of blank space").
   The greeting's cards were capped at 760px inside the 1320px measure, so the right half of the
   dark top stayed empty on a desktop. From 1101px they sit under the greeting at the full
   measure, like the "What's new" card and the bands below. (Cards beside the greeting from
   1700px was tried the same day and rejected by Pavel: "they should be underneath the text, at
   full width".) Phones and tablets untouched. Delete this block to switch back. */
@media (min-width: 1101px) {
	.dash-home-waiting { max-width: none; }
}
/* end HOME-WIDE */

/* LAUNCH-BAND-INVERT (Pavel, 2026-10-07: "invert the direction of the bg gradient"): the
   October 13 band now runs Sand 100 at the top to Sand 200 at the foot (was 200 down to 100,
   HOME-PANELS above), so it ends on a firm edge where the phone is cropped. The strip painted
   behind a to-do card above the band follows the band's new top colour. Delete to switch back. */
.rel .rel-launch { background: linear-gradient(to bottom, var(--sand-100, #FAF0E5) 0%, var(--sand-200, #F0DEC9) 60%, var(--sand-200, #F0DEC9) 100%); }
.dash-home .dash-home-breakout:has(+ .rel > .rel-launch:first-child) { background: linear-gradient(to bottom, transparent 88px, var(--sand-100, #FAF0E5) 88px); }
@media (max-width: 767px) { .dash-home .dash-home-breakout:has(+ .rel > .rel-launch:first-child) { background: linear-gradient(to bottom, transparent 76px, var(--sand-100, #FAF0E5) 76px); } }
/* end LAUNCH-BAND-INVERT */

/* UPLOAD-SPACE (Pavel, 2026-10-07): "Upload Documents" on the home gets the same room above and
   below as the Treatment Programs band (48px, 32px on phones). It had 20px above and sat tight
   under the October 13 band. Delete to switch back. */
.dash-home-rest > .dash-section:has(> .dash-upload-card) { margin: 0; padding: 48px 0; }
.dash-home-rest > .dash-section:has(> .dash-upload-card) > .dash-upload-card:last-child { margin-bottom: 0; }
.dash-home-rest:has(> .dash-section:first-child > .dash-upload-card) { padding-top: 0; }
.dash-home-rest > .dash-section:has(> .dash-upload-card) + .dash-pathway-carousel { margin-top: 0; }
@media (max-width: 767px) {
	.dash-home-rest > .dash-section:has(> .dash-upload-card) { padding: 32px 0; }
}
/* end UPLOAD-SPACE */

/* PATHWAY-NUMBER (Sapna, 2026-10-07: "these two in weight are still not formatting correctly"). The
   program quiz's height and weight step puts .dash-intake-number on its options wrapper, and that is
   also the health intake's plain number INPUT (200px wide, bordered, padded): the fields sat in a
   narrow white box with the unit hanging out of it. Its Next button carries .dash-intake-next-btn,
   which has no rules, so it was a small chip. Here the wrapper is a plain left-aligned column and
   the button matches the other steps' Next. Delete this block to revert. */
#pathway-quiz .dash-intake-options.dash-intake-number {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0;
  width: auto; max-width: none; margin-top: 14px; padding: 0;
  border: 0; border-radius: 0; background: transparent; font-size: inherit;
}
#pathway-quiz .pathway-unit-alt { justify-content: flex-start; }
#pathway-quiz .pathway-step-actions { display: block; margin-top: 20px; }
#pathway-quiz .pathway-step-actions .pathway-step-next {
  width: 100%; padding: 14px 24px; border: 0; font-family: inherit; font-size: 16px; font-weight: 500; line-height: normal; cursor: pointer;
}
#pathway-quiz .pathway-step-actions .pathway-step-next:disabled { cursor: default; }
#pathway-quiz .pathway-unit-toggle { background: rgba(41,38,38,.07); }
/* end PATHWAY-NUMBER */

/* Prep steps on the bloodwork page and in the requisition viewer (2026-10-10): the round number
   beside each step already counts it, so the "1." written into the heading for the printable
   sheet is hidden here (it showed twice); and a step's second paragraph gets its own space. */
.dash-bw-v2 .dash-prep-num { display: none; }
.dash-bw-v2 .dash-prep-d + .dash-prep-d { margin-top: 8px; }

/* Insurance, stricter section (2026-10-10): fill from a photo or PDF; the reason for removing. */
.ins-read { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; }
.ins-read-btn { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1.5px solid rgba(220,182,136,.8); background: var(--surface, #FFFEF6); font-size: 14px; font-weight: 500; color: var(--color-navy, #10293C); cursor: pointer; }
.ins-read-btn:hover { background: var(--orange-050, #FFF2E5); }
.ins-read-st { font-size: 14px; color: var(--text-secondary, #6B6560); }
.ins-read-st.ins-read-bad { color: #B42318; }
.ins-err.ins-note { color: var(--text-primary, #292626); }
.ins-remove-f { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.ins-remove-f[hidden] { display: none; }

/* Insurance: what happened after a card file was added (2026-10-10). */
.ins-ok { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #EAF3EC; color: #1F5132; font-size: 14px; line-height: 1.45; }