/* ═══════════════════════════════════════════════
   astrasera — Global Design System
   Editorial · Luxe palette
   Cormorant Garamond (serif) + DM Sans (sans)
   Bone cream + deep ink + ocean accent + sage warmth
   ═══════════════════════════════════════════════

   Token names are preserved (--bg, --ink, --accent, --card, etc.)
   so every existing component continues to cascade correctly.
   Values are remapped to the luxe palette. New luxe-specific
   aliases are added below for opt-in use. */

/* Load Cormorant Garamond (serif) + DM Sans (sans).
   Imported alongside the existing Instrument family so legacy
   selectors that explicitly request 'Instrument Sans'/'Serif' keep
   working until they're migrated to the var()-based stack. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ── Surfaces ──
     Sampled from the light mockups: a clean warm-white (NOT cream/yellow),
     a faintly warmer sidebar, white panels, neutral-warm lines. */
  --bg:           #F7F5F0;     /* warm paper — primary page background */
  --surface:      #F4F2EC;     /* recessed paper surface */
  --card:         #F7F5F0;     /* paper — panel / hero surface */
  --paper:        #F7F5F0;     /* alias of --card for luxe rules */
  --bone:         #F7F5F0;     /* alias of --bg */
  --linen:        #F4F2EC;     /* alias of --surface */
  --ivory:        #EFECE6;     /* sidebar surface */
  --putty:        #DDD8CF;     /* deeper accent surface */

  /* ── Ink ── */
  --ink:          #1B1B1B;     /* warm near-black — text */
  --ink-soft:     #44413B;     /* secondary text */
  --muted:        #6F6A62;     /* meta text, eyebrows */
  --whisper:      #A7A096;     /* tertiary, light meta */

  /* ── Lines & shadows ── */
  --border:       #DDD8CF;     /* primary hairline — neutral-warm gray */
  --border-light: #E8E3DA;     /* whisper hairline */
  --line:         #DDD8CF;     /* alias */
  --line-w:       #E8E3DA;     /* alias */
  --shadow:       rgba(27,27,27,0.05);   /* soft neutral drop shadow */

  /* ── Accent · muted slate (mockup-sampled #5F6D7C) ── */
  --accent:       #6E7D91;     /* muted slate — primary accent */
  --accent-light: #E8EAED;     /* slate wash */
  --accent-mid:   rgba(110,125,145,0.15);
  --ocean:        #6E7D91;     /* mid */
  --ocean-d:      #6E7D91;     /* deep (alias of --accent) */
  --ocean-f:      #6E7D91;     /* fresh — italic / name accents */
  --ocean-w:      #E8EAED;     /* whisper wash */
  --ocean-h:      #D8DDE3;     /* hairline */
  --ocean-m:      #EEF0F2;     /* mist */

  /* ── Sage (calming green family) ── */
  --green:        #5A6B57;     /* sage-deep */
  --green-light:  #E8ECDF;     /* sage wash */
  --sage:         #7E927A;
  --sage-d:       #5A6B57;
  --sage-w:       #E8ECDF;

  /* ── Status tones ── */
  --gold:         #b5860a;
  --gold-light:   #FAEFD6;
  --red:          #b83232;
  --red-light:    #fdecea;
  --amber:        #b5620a;
  --amber-light:  #FAEFD6;
  --purple:       #5b3fa6;
  --purple-light: #ede9fe;
  --purple-hair:  rgba(91,63,166,0.18);

  /* ── Radii ── */
  --radius:       14px;
  --radius-lg:    20px;
  --radius-sm:    8px;

  /* ── Type stacks ── */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'DM Sans', 'Instrument Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* ═══════════════════════════════════════════════
   Body grain overlays + photographic backdrop
   ───────────────────────────────────────────────
   Three fixed pseudo-element layers (z-index 0/1)
   sit beneath all app chrome (z-index ≥ 2 on the
   shell). They give the page the luxe paper-grain
   + ocean-atmosphere feel without affecting layout.
   Photo URL is driven by a CSS variable so it can be
   swapped at runtime (see background-photo.js). */

body { position: relative; }

/* Linen weave — fine isotropic paper grain. */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: 0.16;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.14  0 0 0 0 0.11  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Driftwood grain — long horizontal streaks at very low opacity. */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: 0.55;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='400'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.004 0.42' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.37  0 0 0 0 0.28  0 0 0 0.055 0'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>");
}

/* Ocean photographic backdrop — opt-in via body[data-backdrop="ocean"].
   The image is set on a CSS variable (--page-photo) so the runtime
   cycler can swap it freely. Default falls back to a Coastal ocean.

   The wash overlay above keeps card contrast strong without
   washing the photo out. */
body[data-backdrop="ocean"]::before,
body[data-backdrop="ocean"]::after {
  /* Move the grain UNDER the photo when the backdrop is active so
     it doesn't interfere with the cinematic feel. */
  z-index: 0;
}
.bg-photo {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: var(--page-photo, url('Website%20Photos/personal/coast.jpg'));
  background-size: cover;
  background-position: center 32%;
  filter: saturate(1.06) contrast(1.03);
  display: none;
}
body[data-backdrop="ocean"] .bg-photo { display: block; }
.bg-photo-wash {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(244,240,230,0.08) 0%, rgba(244,240,230,0.16) 100%);
  display: none;
}
body[data-backdrop="ocean"] .bg-photo-wash { display: block; }

/* Lift the actual page content above the backdrop layers. */
.topbar, .hub-shell, .hub-main, .page, header, main, footer { position: relative; z-index: 2; }

/* ═══════════════════════════════════════════════
   THEME · Plain Dark   html[data-theme="dark"]
   ───────────────────────────────────────────────
   Editorial charcoal palette. The neutral tokens
   flip; --accent stays a white-text-safe ocean so
   every existing `background:var(--accent);color:#fff`
   spot keeps its contrast untouched. Only the handful
   of surfaces that paint ON --ink (now light) with
   hardcoded white text get explicit overrides below.
   Light theme = the default :root values (data-theme
   absent or "light"). Default theme is set to dark by
   the theme engine in user.js. */
html[data-theme="dark"] {
  /* Flat, warm-neutral charcoal — near-monochrome, whisper-subtle steps
     between bg → surface → card so panels read as planes of light, not
     boxes. Tuned to the dark mockups (Journal / Schedule): deep, calm,
     premium; no purple cast, no high-contrast cards. */
  /* Neutral near-black per the spec (Observatory): #0E0E0F ground, #171717
     panels, off-white #F2EEE8 ink, muted moonlight-blue accent. */
  --bg:           #0E0E0F;
  --surface:      #121212;
  --card:         #171717;     /* panels per spec */
  --paper:        #171717;
  --bone:         #0E0E0F;
  --linen:        #121212;
  --ivory:        #141414;
  --putty:        #1E1E1E;

  --ink:          #F2EEE8;     /* off-white per spec */
  --ink-soft:     rgba(242,238,232,0.72);
  --muted:        rgba(242,238,232,0.50);
  --whisper:      rgba(242,238,232,0.32);

  --border:       rgba(255,255,255,0.08);
  --border-light: rgba(255,255,255,0.045);
  --line:         rgba(255,255,255,0.08);
  --line-w:       rgba(255,255,255,0.045);
  --shadow:       rgba(0,0,0,0.5);

  /* Muted moonlight blue — silver-blue; the fill tone stays legible under
     white text (avatars/chips), the lighter tone is for name/italic accents. */
  --accent:       #5E6E84;
  --accent-light: rgba(94,110,132,0.16);
  --accent-mid:   rgba(94,110,132,0.22);
  --ocean:        #5E6E84;
  --ocean-d:      #5E6E84;
  --ocean-f:      #9DB0C6;   /* fresh — soft italic / name accents */
  --ocean-w:      rgba(94,110,132,0.14);
  --ocean-h:      rgba(255,255,255,0.08);
  --ocean-m:      rgba(94,110,132,0.10);

  --green:        #9BB097;
  --green-light:  rgba(126,146,122,0.16);
  --gold:         #D8A72E;
  --gold-light:   rgba(181,134,10,0.16);
  --red:          #E06B6B;
  --red-light:    rgba(184,50,50,0.18);
  --amber:        #D98A3E;
  --amber-light:  rgba(181,98,10,0.16);
  --purple:       #A78BDB;
  --purple-light: rgba(91,63,166,0.22);
  --purple-hair:  rgba(167,139,219,0.30);

  --champagne:    #E7DFCF;
}

/* Surfaces that paint on --ink (now light) with white text. */
html[data-theme="dark"] .topbar,
html[data-theme="dark"] body[data-backdrop="ocean"] .topbar { background: var(--surface); color: rgba(243,240,232,0.85); }
/* Daytime ocean photo never bleeds into a dark theme (it's a Nature-day layer). */
html[data-theme="dark"] .bg-photo,
html[data-theme="dark"] .bg-photo-wash { display: none !important; }
html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] button.primary,
html[data-theme="dark"] a.primary { background: var(--champagne); color: #16141C; }
html[data-theme="dark"] .btn.primary:hover,
html[data-theme="dark"] button.primary:hover,
html[data-theme="dark"] a.primary:hover { background: #F1EBDC; }
html[data-theme="dark"] .btn.secondary:hover, html[data-theme="dark"] button.secondary:hover,
html[data-theme="dark"] .btn.ghost:hover,     html[data-theme="dark"] button.ghost:hover {
  background: rgba(255,255,255,0.08); color: var(--ink); border-color: var(--border);
}
html[data-theme="dark"] .wb-new-board-btn:hover,
html[data-theme="dark"] .wb-tool.wb-tool-active,
html[data-theme="dark"] .wb-btn-primary,
html[data-theme="dark"] .wb-empty-cta { background: var(--accent); color: #fff; }

/* Dashboard chrome that paints on --ink / --accent with white text. */
html[data-theme="dark"] .toast,
html[data-theme="dark"] .da-share-toast { background: #0E0D13; color: #F3F0E8; }
html[data-theme="dark"] .friends-hero { background: #17151F; }
html[data-theme="dark"] .fr-filter-btn.active,
html[data-theme="dark"] .da-fchip.active,
html[data-theme="dark"] .cal-view-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Light paper-grain reads as haze on charcoal — soften it. */
html[data-theme="dark"] body::before { opacity: 0.05; }
html[data-theme="dark"] body::after  { opacity: 0.10; }

/* ── Nature · night starfield backdrop (body[data-backdrop="night"]) ── */
.bg-night {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; display: none;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,0.90), transparent),
    radial-gradient(1.5px 1.5px at 28% 64%, rgba(255,255,255,0.70), transparent),
    radial-gradient(1px   1px   at 47% 31%, rgba(255,255,255,0.80), transparent),
    radial-gradient(1.5px 1.5px at 63% 78%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1px   1px   at 76% 18%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.5px 1.5px at 88% 52%, rgba(255,255,255,0.70), transparent),
    radial-gradient(1px   1px   at 38% 88%, rgba(255,255,255,0.60), transparent),
    radial-gradient(circle at 72% 26%, rgba(46,52,84,0.55) 0%, transparent 55%),
    linear-gradient(180deg, #0B0A12 0%, #131119 100%);
}
body[data-backdrop="night"] .bg-night { display: block; }
/* Let the starfield read through the page margins (mirrors the ocean layer). */
body[data-backdrop="night"] { background: transparent; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01";
}

/* ── Typography ──
   Hero-scale heads use Fraunces with the variable-axis tuned for
   editorial weight + lower softness. h3/h4 stay sans-serif for UI
   density. The serif italic ('em') becomes the luxe accent gesture
   wherever it appears in body text. */
h1, h2 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-variation-settings: "opsz" 96, "SOFT" 50;
}
h1 { font-size: clamp(34px, 4.6vw, 64px); }
h2 { font-size: clamp(24px, 3.2vw, 38px); }
h1 em, h2 em {
  font-style: italic;
  color: var(--ocean-d);
  font-variation-settings: "opsz" 96, "SOFT" 100, "wght" 300;
}

/* UI chrome headings — sans-serif at smaller sizes, uppercase eyebrow flavor. */
h3, h4, h5 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.005em;
}
h3 { font-size: 16px; }
h4 { font-size: 14px; }

.card-header h3,
.panel-header h3 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

p { line-height: 1.7; }
em {
  font-style: italic;
  font-family: var(--serif);
  font-variation-settings: "opsz" 24, "SOFT" 100, "wght" 400;
  color: var(--ocean-d);
}
strong { font-weight: 500; }

/* Luxe eyebrow — wider tracking, taupe muted color (not accent),
   600 weight. Matches the editorial preview's section eyebrows. */
.eyebrow {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 8px;
}

.muted { color: var(--muted); font-size: 14px; }
.mini  { font-size: 11px; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; font-weight: 500; }

/* ── Layout ── */
.page {
  padding: 0 clamp(24px, 4vw, 72px) 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Topbar — LUXE black header strip ──
   Black ink background, white-on-black text. Spans the viewport,
   sticky at the top. Like the editorial preview-bar — but functional
   (brand + nav + actions). */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top: 0;
  background: var(--ink);
  color: rgba(255,255,255,0.85);
  z-index: 100;
}

.page > .topbar {
  margin: 0 calc(-1 * clamp(24px, 4vw, 72px));
  padding: 12px clamp(24px, 4vw, 72px);
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.brand-mark {
  width: 34px; height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.45) 0%, transparent 60%),
    linear-gradient(160deg, var(--ocean) 0%, var(--ocean-d) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-weight: 350;
  font-variation-settings: "opsz" 60, "SOFT" 40;
  font-size: 16px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset;
}
.brand-name {
  font-family: var(--serif);
  font-weight: 350;
  font-variation-settings: "opsz" 60, "SOFT" 40;
  font-size: 18px;
  letter-spacing: -0.018em;
  color: #fff;
  line-height: 1;
}
.brand-name em {
  font-style: italic;
  color: var(--ocean-f);
  font-variation-settings: "opsz" 60, "SOFT" 100, "wght" 350;
}
.brand-tag {
  font-family: var(--sans);
  font-size: 9.5px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
}

.nav {
  display: flex;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.nav a {
  text-decoration: none;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  padding: 7px 14px;
  border-radius: 0;
  transition: color 0.2s;
  font-weight: 500;
  position: relative;
}
.nav a:hover { color: #fff; background: transparent; }
.nav a.active { color: #fff; background: transparent; }
.nav a.active::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: -2px;
  height: 1px;
  background: var(--ocean-f);
}

/* Topbar buttons — ghosts pick up the dark surface */
.topbar .btn.ghost { color: #fff; border-color: rgba(255,255,255,0.3); }
.topbar .btn.ghost:hover { background: rgba(255,255,255,0.08); border-color: #fff; color: #fff; }
.topbar .btn.primary { background: #fff; color: var(--ink); border-color: #fff; }
.topbar .btn.primary:hover { background: var(--ocean-f); color: #fff; border-color: var(--ocean-f); }

.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; }

/* ── Buttons — LUXE editorial: hard corners, uppercase, tracked ── */
.btn, button.primary, button.secondary, button.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 0;
  font-size: 13px;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
  white-space: nowrap;
  line-height: 1;
}

.btn.primary, button.primary, a.primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn.primary:hover, button.primary:hover { background: var(--ocean-d); border-color: var(--ocean-d); color: var(--paper); }

.btn.secondary, button.secondary, a.secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 13px 22px;
}
.btn.secondary:hover, button.secondary:hover { background: var(--ink); color: var(--paper); }

.btn.ghost, button.ghost, a.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 13px 22px;
}
.btn.ghost:hover, button.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn.accent { background: var(--ocean-d); color: var(--paper); border-color: var(--ocean-d); }
.btn.accent:hover { background: var(--ocean); border-color: var(--ocean); }

.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Some compact buttons in tight UI (table action cells, chip-like quick
   actions) opt out of the luxe scale via .btn.compact. */
.btn.compact {
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: -0.01em;
}

/* Zoom control for the in-app rich-text (Google Docs) editor toolbar */
.as-rte-zoom { display: inline-flex; align-items: center; gap: 3px; }
.as-rte-zoom > button { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); cursor: pointer; font-size: 13px; line-height: 1; padding: 0; transition: background .12s, border-color .12s; }
.as-rte-zoom > button:hover { background: var(--surface); border-color: var(--ink); }
.as-rte-zoom [data-rte-zoom-pct] { min-width: 40px; text-align: center; font-size: 12px; color: var(--muted); cursor: pointer; user-select: none; font-family: var(--sans); }

/* Profile button */
.profile-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: 'Instrument Sans', sans-serif;
}
.profile-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-caret { font-size: 10px; color: var(--muted); }

/* ── Cards & Panels ──
   Luxe editorial card: paper background, hairline border, cool
   layered drop shadows, HARD square edges. No border-radius —
   the cards read as architectural columns, not pill chips. */
.panel,
.card {
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 0;
  padding: 24px;
  box-shadow:
    0 1px 0 rgba(92,143,168,0.06),
    0 14px 38px -18px rgba(31,61,82,0.18),
    0 4px 12px -6px rgba(31,61,82,0.07);
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.panel-header h3 { margin: 0; }

/* ── Chips ── */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border-light);
  white-space: nowrap;
}
.chip.green  { background: var(--sage-w);       color: var(--sage-d); border-color: rgba(90,107,87,.22); }
.chip.amber  { background: var(--amber-light);  color: var(--amber);  border-color: rgba(181,98,10,.22); }
.chip.blue   { background: var(--ocean-w);      color: var(--ocean-d); border-color: rgba(31,61,82,.18); }
.chip.red    { background: var(--red-light);    color: var(--red);    border-color: rgba(184,50,50,.22); }
.chip.purple { background: var(--purple-light); color: var(--purple); border-color: rgba(91,63,166,.22); }

/* ── Item list ── */
.item-list { display: flex; flex-direction: column; gap: 2px; }
.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.item:hover { background: var(--surface); }
.item strong { font-size: 14px; font-weight: 500; display: block; margin-bottom: 2px; }

/* ── Progress bar ── */
.progress-bar {
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  font-style: normal;
}

/* ── Form elements ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 11px 14px;
  font-size: 13.5px;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--ocean-d);
  box-shadow: 0 0 0 3px rgba(31,61,82,0.08);
}
textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
label {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}

.form-stack { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }

/* ── Link ── */
.link {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ocean-d);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--ocean-d);
  padding-bottom: 2px;
}
.link:hover { color: var(--ink); border-color: var(--ink); }

/* ════════════════════════════════════════════
   EDITORIAL HERO TREATMENT
   ───────────────────────────────────────────
   .section-hero (used across every section in
   therapist-dashboard.html + dashboard.html) and
   .hub-hero (admin hub) both pick up the luxe
   editorial treatment: paper background, ocean
   gradient rail along the top, Fraunces hero
   headline with italic accent, taupe eyebrow.

   Scoped under body[data-backdrop="ocean"] so the
   selector specificity beats the inline page styles
   that load after styles.css. No HTML changes.
   ════════════════════════════════════════════ */
body[data-backdrop="ocean"] .section-hero,
body[data-backdrop="ocean"] .hub-hero {
  position: relative;
  background: var(--paper) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 0 !important;
  padding: 40px 44px 32px !important;
  margin-bottom: 6px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(92,143,168,0.06),
    0 14px 38px -18px rgba(31,61,82,0.18),
    0 4px 12px -6px rgba(31,61,82,0.07);
}
body[data-backdrop="ocean"] .section-hero::before,
body[data-backdrop="ocean"] .hub-hero::before {
  /* Ocean gradient rail along the top — the luxe signature. */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ocean-d) 0%, var(--ocean) 35%, var(--ocean-f) 65%, var(--ocean) 100%);
}
body[data-backdrop="ocean"] .section-hero > div:first-child,
body[data-backdrop="ocean"] .hub-hero > div:first-child { flex: 1; min-width: 0; }

body[data-backdrop="ocean"] .section-hero h1,
body[data-backdrop="ocean"] .hub-hero h1 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(36px, 5vw, 64px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.032em !important;
  color: var(--ink);
  margin: 0 0 14px !important;
}
body[data-backdrop="ocean"] .section-hero h1 em,
body[data-backdrop="ocean"] .hub-hero h1 em {
  font-style: italic;
  color: var(--ocean-d);
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 300;
}
body[data-backdrop="ocean"] .section-hero p,
body[data-backdrop="ocean"] .hub-hero p {
  font-family: var(--serif) !important;
  font-weight: 350;
  font-variation-settings: "opsz" 24, "SOFT" 50;
  font-size: 17px !important;
  line-height: 1.45 !important;
  color: var(--ink-soft) !important;
  letter-spacing: -0.005em !important;
  margin: 0 !important;
  max-width: 560px;
}
body[data-backdrop="ocean"] .section-hero .eyebrow,
body[data-backdrop="ocean"] .hub-hero .eyebrow,
body[data-backdrop="ocean"] .section-hero p.eyebrow,
body[data-backdrop="ocean"] .hub-hero p.eyebrow {
  margin-bottom: 18px !important;
  color: var(--muted) !important;
  font-family: var(--sans) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase;
  font-weight: 600 !important;
}

@media (max-width: 720px) {
  body[data-backdrop="ocean"] .section-hero,
  body[data-backdrop="ocean"] .hub-hero {
    flex-direction: column;
    align-items: stretch;
    padding: 28px 24px 24px !important;
  }
}

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fadeUp 0.5s ease forwards; }

.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Profile Identity Card (shared across all pages) ── */
/* Usage: .pcard wrapper around .pcard-avatar + .pcard-body */
.pcard { display: flex; align-items: center; gap: 12px; }
.pcard-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-light); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 17px;
  overflow: hidden;
}
.pcard-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pcard-avatar.lg { width: 48px; height: 48px; font-size: 19px; }
.pcard-name { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; line-height: 1.2; }
.pcard-sub  { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .nav { display: none; }
  .page { padding: 0 16px 40px; }
}

/* ═══════════════════════════════════════════════
   WHITEBOARD / WORKSPACE
═══════════════════════════════════════════════ */
.wb-host {
  display: flex;
  height: 100%;
  min-height: 600px;
}

.wb-root:fullscreen { width: 100vw; height: 100vh; min-height: 0; background: var(--bg); }
/* Google Docs viewer fullscreen — fill the screen, keep the toolbar + doc stacked */
#tjGdocsPanel:fullscreen, #cGdocsPanel:fullscreen { width: 100vw; height: 100vh; background: var(--bg); }
#tjGdocsPanel:fullscreen iframe, #cGdocsPanel:fullscreen iframe { min-height: 0; }
/* Journal fullscreen (both dashboards). The SECTION is the fullscreen
   element — not the shell — so the hero row (tabs + Open Entry + New Entry
   + Enter/Exit Fullscreen) stays available while writing.
   Note: :fullscreen and :-webkit-full-screen (Safari) must live in SEPARATE
   rules — one unrecognized pseudo invalidates the whole selector list. */
#section-journal:fullscreen { width: 100vw !important; height: 100vh !important; background: var(--bg) !important; display: flex !important; flex-direction: column; overflow-y: auto; }
#section-journal:-webkit-full-screen { width: 100vw !important; height: 100vh !important; background: var(--bg) !important; display: flex !important; flex-direction: column; overflow-y: auto; }
/* The module fills the space under the hero row. */
#section-journal:fullscreen #journalShell, #section-journal:fullscreen #tjJournalShell { flex: 1; min-height: 0; }
#section-journal:-webkit-full-screen #journalShell, #section-journal:-webkit-full-screen #tjJournalShell { flex: 1; min-height: 0; }

/* In normal layout the sidebar + analysis panel are transparent (they show the
   journal-app's var(--card) through them). In fullscreen the shell background
   is var(--bg), so transparent panels expose it — the sidebar reads as a black
   bar against the white editor. Paint them on a solid surface that matches the
   editor, in EVERY theme, so the whole module is one coherent surface. Higher
   specificity (id + :fullscreen + class) + !important beats the transparent
   rule; duplicated per vendor prefix. */
#section-journal:fullscreen .journal-sidebar,
#section-journal:fullscreen .analysis-panel,
#section-journal:fullscreen .tj-sidebar,
#section-journal:fullscreen .tj-analysis-panel { background: var(--card) !important; }
#section-journal:-webkit-full-screen .journal-sidebar,
#section-journal:-webkit-full-screen .analysis-panel,
#section-journal:-webkit-full-screen .tj-sidebar,
#section-journal:-webkit-full-screen .tj-analysis-panel { background: var(--card) !important; }

/* The "ocean" backdrop makes the journal panels transparent (glass over the
   page photo). In fullscreen the element is in the top layer with only a black
   ::backdrop behind it — no photo — so the transparent panels render black.
   Restore solid surfaces in fullscreen. Higher specificity + !important to
   beat the ocean rules; duplicated per vendor prefix (see note above). */
body[data-backdrop="ocean"] #section-journal:fullscreen { background: var(--bg) !important; }
body[data-backdrop="ocean"] #section-journal:-webkit-full-screen { background: var(--bg) !important; }

body[data-backdrop="ocean"] #section-journal:fullscreen .journal-sidebar,
body[data-backdrop="ocean"] #section-journal:fullscreen .tj-sidebar { background: var(--surface) !important; }
body[data-backdrop="ocean"] #section-journal:-webkit-full-screen .journal-sidebar,
body[data-backdrop="ocean"] #section-journal:-webkit-full-screen .tj-sidebar { background: var(--surface) !important; }

body[data-backdrop="ocean"] #section-journal:fullscreen .editor-area,
body[data-backdrop="ocean"] #section-journal:fullscreen .analysis-panel,
body[data-backdrop="ocean"] #section-journal:fullscreen .tj-editor-area,
body[data-backdrop="ocean"] #section-journal:fullscreen .tj-analysis-panel { background: var(--card) !important; }
body[data-backdrop="ocean"] #section-journal:-webkit-full-screen .editor-area,
body[data-backdrop="ocean"] #section-journal:-webkit-full-screen .analysis-panel,
body[data-backdrop="ocean"] #section-journal:-webkit-full-screen .tj-editor-area,
body[data-backdrop="ocean"] #section-journal:-webkit-full-screen .tj-analysis-panel { background: var(--card) !important; }
.wb-root {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 600px;
  background: transparent;
  color: var(--ink);
  font-family: 'Instrument Sans', sans-serif;
  overflow: hidden;
  border-radius: 0;
  /* No outer frame — the workspace is part of the page, not a boxed widget.
     The hairline border-right on the board list provides the only structure. */
  border: none;
}
/* Full-width top bar: brand on the left, share/AI/audit/fullscreen on the right,
   sitting above the board list + workspace body. */
.wb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 22px var(--as-page-pad-x, clamp(24px, 2.6vw, 46px)) 18px;
  border-bottom: 1px solid var(--border);
}
.wb-topbar-brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.wb-topbar-brand h3 {
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 30px); font-weight: 400; letter-spacing: 0.01em;
  color: var(--ink); margin: 0; white-space: nowrap;
}
/* The board list + workspace, below the top bar — inherits the old 3-column grid. */
/* Board list moved into the top-bar dropdown — the workspace now spans full width. */
.wb-body {
  display: grid;
  grid-template-columns: 1fr auto;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
/* ── Board switcher dropdown (in the top bar) ── */
.wb-switch { position: relative; }
.wb-switch-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0;
  border-bottom: 1px solid transparent;
  padding: 6px 2px; cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; font-weight: 300;
  color: var(--muted); transition: color 0.12s, border-color 0.12s;
}
.wb-switch-btn:hover { color: var(--ink); border-bottom-color: var(--border); }
.wb-switch-btn .wb-header-name { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.wb-switch-caret { font-size: 11px; color: var(--muted); transition: transform 0.15s ease; }
.wb-switch.open .wb-switch-caret { transform: rotate(180deg); }
.wb-switch-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 280px; max-height: 360px; overflow-y: auto;
  list-style: none; margin: 0; padding: 6px;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 10px 32px var(--shadow);
}
.wb-switch-menu[hidden] { display: none; }
.wb-root:fullscreen { border: none; }

/* ── Sidebar (board list) — flatter, more editorial ── */
.wb-sidebar {
  position: relative;
  border-right: 1px solid var(--border);
  background: transparent;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Drag handle on the sidebar's right edge — drag left to compress
   (240px is the max), double-click to snap collapsed/expanded. */
.wb-sidebar-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  width: 9px;
  height: 100%;
  cursor: col-resize;
  z-index: 6;
  background: transparent;
  touch-action: none;
}
.wb-sidebar-resizer::after {
  content: '';
  position: absolute;
  top: 0;
  right: 4px;
  width: 2px;
  height: 100%;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.15s;
}
.wb-sidebar-resizer:hover::after,
.wb-root.wb-sb-dragging .wb-sidebar-resizer::after { opacity: 0.5; }
.wb-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 20px 14px;
}
.wb-sidebar-head h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
  text-transform: none;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Compact state (sidebar dragged narrow) — drop labels/meta so it
   stays legible as a rail instead of overflowing. */
.wb-sidebar.is-compact .wb-sidebar-head { padding: 18px 10px 14px; justify-content: center; }
.wb-sidebar.is-compact .wb-sidebar-head h3 { display: none; }
.wb-sidebar.is-compact .wb-new-board-btn span { display: none; }

/* ── Board picker modal ── */
.wb-board-picker { position: fixed; inset: 0; background: rgba(20,18,15,.56); z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
.wb-board-picker[hidden] { display: none; }
.wb-picker-card { background: var(--card); border: 1px solid var(--border); width: min(720px, 94vw); max-height: 82vh; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(26,24,20,.22); }
.wb-picker-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px 16px; border-bottom: 1px solid var(--ink); }
.wb-picker-head h4 { font-family: var(--serif); font-size: 22px; font-weight: 400; margin: 0; letter-spacing: .01em; }
.wb-picker-close { background: none; border: 0; color: var(--muted); font-size: 15px; cursor: pointer; padding: 4px 6px; }
.wb-picker-close:hover { color: var(--ink); }
.wb-picker-grid { overflow-y: auto; padding: 20px 26px 26px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.wb-picker-board { text-align: left; background: var(--bg); border: 1px solid var(--border); padding: 16px 18px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; font-family: var(--sans); transition: border-color .15s; }
.wb-picker-board:hover { border-color: var(--ink); }
.wb-pb-title { font-family: var(--serif); font-size: 17px; font-weight: 400; color: var(--ink); margin-bottom: 3px; }
.wb-pb-meta { font-size: 11.5px; color: var(--muted); font-weight: 300; }
.wb-pb-when { font-size: 11px; color: var(--muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.wb-empty-cta-ghost { background: none !important; color: var(--muted) !important; border: 1px solid var(--border) !important; }
.wb-empty-cta-ghost:hover { color: var(--ink) !important; border-color: var(--ink) !important; }
.wb-sidebar.is-compact .wb-new-board-btn { padding: 5px 8px; }
.wb-sidebar.is-compact .wb-board-list { padding: 4px 6px 16px; }
.wb-sidebar.is-compact .wb-board-row { padding: 10px 8px; }
.wb-sidebar.is-compact .wb-board-row-meta { display: none; }
.wb-sidebar.is-compact .wb-board-row-title { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-new-board-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.wb-new-board-btn:hover {
  background: var(--ink);
  color: #fff;
}
.wb-new-board-btn i { font-size: 11px; }

.wb-board-list {
  list-style: none;
  overflow-y: auto;
  padding: 4px 12px 16px;
  margin: 0;
  flex: 1;
}
.wb-board-row {
  display: block;
  padding: 12px 14px;
  border-radius: 0;
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.wb-board-row:hover { background: var(--surface); }
.wb-board-row.wb-active {
  background: var(--surface);
  border-left-color: var(--ink);
}
.wb-board-row-title { font-size: 13px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.wb-board-row-meta { font-size: 11px; color: var(--muted); margin-top: 4px; letter-spacing: 0.02em; }
.wb-board-empty { padding: 32px 12px; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.6; }

/* ── Main canvas area ── */
.wb-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* Identity row (board name + sharing/AI/audit) */
.wb-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  background: transparent;
  min-height: 56px;
}
.wb-header-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.wb-header-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.wb-header-name {
  font-size: 13.5px;
  font-weight: 300;
  color: inherit;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wb-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Tool row */
.wb-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  min-height: 48px;
}
.wb-tool-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.wb-tb-divider {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 4px;
}
.wb-toolbar-spacer { flex: 1; }

.wb-zoom-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.wb-zoom {
  font-size: 11px;
  color: var(--muted);
  padding: 0 6px;
  min-width: 38px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Buttons — three variants: .wb-tool (icon-only square), .wb-icon-btn (square ghost), .wb-btn (ghost text+icon) */
.wb-tool, .wb-icon-btn, .wb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.wb-tool, .wb-icon-btn {
  width: 32px;
  height: 32px;
  font-size: 14px;
  padding: 0;
}
.wb-btn {
  padding: 6px 12px;
  font-size: 12.5px;
  height: 32px;
}
.wb-tool:hover, .wb-icon-btn:hover, .wb-btn:hover {
  background: var(--surface);
}
.wb-tool.wb-tool-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.wb-btn-ghost {
  color: var(--ink);
}
.wb-btn-primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.wb-btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.wb-btn i, .wb-tool i, .wb-icon-btn i { font-size: 14px; }
.wb-btn span { letter-spacing: 0.01em; }

.wb-presence {
  display: flex; gap: 3px; margin-right: 4px;
}
.wb-presence-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--card);
  box-shadow: 0 0 0 1px var(--border);
}

/* ── Stage (canvas area) ── */
.wb-stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0) 0 0 / 24px 24px,
    var(--bg);
  cursor: default;
  min-height: 0;
}
.wb-stage[data-tool="pan"]    { cursor: grab; }
.wb-stage[data-tool="ink"]    { cursor: crosshair; }
.wb-stage[data-tool="sticky"] { cursor: copy; }
.wb-stage[data-tool="text"]   { cursor: text; }
.wb-stage[data-tool="arrow"]  { cursor: pointer; }

.wb-world {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  width: 0; height: 0; /* children positioned absolutely */
}
.wb-ink-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.wb-cursors {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.wb-cursor {
  position: absolute;
  transform: translate(-3px, -3px);
  font-size: 18px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

.wb-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  pointer-events: none;
}
/* The [hidden] attribute is equivalent to display:none, but `display:flex`
   above outranks it in the cascade. This rule restores the expected behavior
   so `state.els.empty.hidden = true` in whiteboard.js actually hides the
   "Open or create a board to start." placeholder. */
.wb-empty[hidden] { display: none; }
.wb-empty-content {
  max-width: 420px;
  padding: 40px 32px;
  pointer-events: auto;
}
.wb-empty-icon {
  width: 64px; height: 64px;
  margin: 0 auto 22px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  background: var(--card);
}
.wb-empty-icon i {
  font-size: 28px;
  color: var(--muted);
  opacity: 0.7;
}
.wb-empty h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 22px;
  line-height: 1.25;
}
.wb-empty p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 22px;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}
.wb-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.wb-empty-cta:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.wb-empty-cta i { font-size: 12px; }

/* ── Items (cards on canvas) ── */
.wb-item {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: grab;
  transition: box-shadow 120ms ease, transform 80ms ease;
}
.wb-item:hover {
  box-shadow: 0 4px 14px var(--shadow);
}
.wb-item.wb-selected {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.wb-item.wb-arrow-source {
  outline: 2px dashed var(--gold);
  outline-offset: 2px;
}
.wb-item.wb-editing {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  cursor: text;
  user-select: text;
  z-index: 9999 !important;
}
.wb-item.wb-editing .wb-item-text {
  user-select: text;
  cursor: text;
}
.wb-item[data-kind="sticky"] {
  background: #fde68a;
  border-color: rgba(0,0,0,0.08);
}
.wb-item[data-kind="text"] {
  background: transparent;
  box-shadow: none;
  border: 1px dashed var(--border);
}
.wb-item[data-kind="image"] img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.wb-item-handle {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 18px;
  cursor: grab;
  background: linear-gradient(transparent, transparent);
  pointer-events: none; /* whole card is draggable now; this is purely visual */
}
.wb-item-resize {
  position: absolute;
  right: 0; bottom: 0;
  width: 14px; height: 14px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--border) 50%);
  border-bottom-right-radius: var(--radius);
}

/* Author indicator — small dot in top-right showing the creator's stable
   color. Survives when the note background color is overridden. */
.wb-item-author {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  pointer-events: none;
  z-index: 2;
}

/* Color swatches — appear inline only when the Sticky tool is active.
   The .wb-swatches-open class is toggled on .wb-root by selectTool() in
   whiteboard.js. When closed, the popover collapses to width:0 so the
   toolbar reflows tightly. */
.wb-swatches {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding: 0;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-width 0.18s ease, opacity 0.15s ease, margin 0.18s ease, padding 0.18s ease;
}
.wb-swatches-open .wb-swatches {
  max-width: 240px;
  opacity: 1;
  pointer-events: auto;
  padding: 0 6px 0 2px;
  margin-left: 4px;
}
.wb-swatches-label {
  display: none; /* Removed — the swatches are contextual now, no label needed */
}
.wb-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  cursor: pointer;
  padding: 0;
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.wb-swatch:hover {
  transform: scale(1.15);
}
.wb-swatch.wb-swatch-active {
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--card);
  transform: scale(1.1);
}

.wb-item header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
  padding: 8px 12px 4px;
  display: flex; align-items: center; gap: 6px;
}
.wb-item-title {
  font-size: 14px;
  font-weight: 500;
  padding: 2px 12px;
  color: var(--ink);
}
.wb-item-text {
  font-size: 13px;
  line-height: 1.45;
  padding: 4px 12px 10px;
  overflow: hidden;
  flex: 1;
  color: var(--ink);
  outline: none;
}
.wb-item-text.wb-text-plain { padding: 10px 12px; font-size: 14px; }
.wb-item footer {
  font-size: 11px;
  color: var(--muted);
  padding: 4px 12px 8px;
  border-top: 1px solid var(--border);
}

/* ── Aside (share / AI / audit) ── */
.wb-aside {
  width: 340px;
  border-left: 1px solid var(--border);
  background: var(--card);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.wb-aside[hidden] { display: none; }
.wb-aside-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.wb-aside-head h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-transform: none;
  letter-spacing: -0.01em;
}
.wb-aside-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.wb-aside-body h4 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.wb-empty-text { color: var(--muted); font-size: 13px; text-align: center; padding: 10px; }

/* ── Picker ── */
.wb-picker { display: flex; flex-direction: column; gap: 6px; }
.wb-picker-row {
  text-align: left;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: all 0.12s;
}
.wb-picker-row:hover { background: var(--surface); border-color: var(--accent); }
.wb-picker-label { font-size: 13px; font-weight: 500; display: block; }
.wb-picker-sub { font-size: 11px; color: var(--muted); margin-top: 2px; display: block; }

/* ── Lineage cluster (main entry + derived dropdown) ── */
.wb-lineage { display: flex; flex-direction: column; }
.wb-lineage-main { display: flex; align-items: stretch; gap: 4px; }
.wb-lineage-main .wb-picker-row { flex: 1; min-width: 0; }
.wb-lineage-toggle {
  flex: 0 0 auto; width: 34px; border: 1px solid var(--border); background: var(--card);
  border-radius: var(--radius-sm); color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: all 0.12s;
}
.wb-lineage-toggle:hover { background: var(--surface); border-color: var(--accent); color: var(--ink); }
.wb-lineage-toggle i { transition: transform 0.15s; }
.wb-lineage-toggle.is-open i { transform: rotate(180deg); }
.wb-lineage-derived { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 2px 18px; padding-left: 12px; border-left: 2px solid var(--border); }
.wb-picker-derived .wb-picker-label { font-weight: 400; font-style: italic; color: var(--ink); }

/* ── Multi-select picker ── */
.wb-picker-multi { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.wb-picker-search {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
}
.wb-picker-search:focus { outline: none; border-color: var(--accent); }
.wb-picker-bar {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--muted);
}
.wb-picker-count { font-weight: 500; }
.wb-mini-btn {
  font-family: inherit; font-size: 12px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
}
.wb-mini-btn:hover { background: var(--surface); color: var(--ink); }
.wb-picker-list {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding-right: 2px;
}
.wb-picker-check {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer;
}
.wb-picker-check input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}
.wb-picker-check input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.4; }
.wb-picker-check.is-selected {
  background: var(--surface);
  border-color: var(--accent);
}
.wb-picker-text { flex: 1; min-width: 0; }
.wb-picker-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.wb-btn-secondary {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.wb-btn-secondary:hover { background: var(--surface); }
.wb-picker-actions .wb-btn-primary {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--accent);
}
.wb-picker-actions .wb-btn-primary:disabled {
  opacity: 0.5; cursor: not-allowed;
}

/* ── Share ── */
.wb-share-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.wb-share-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-size: 13px;
}
.wb-share-list select {
  font-family: inherit; font-size: 12px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink);
}

/* ── AI ── */
.wb-ai-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.wb-tab {
  flex: 1;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.wb-tab.wb-tab-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.wb-ai-prompt textarea {
  width: 100%;
  min-height: 70px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  background: var(--card);
  color: var(--ink);
  margin-bottom: 8px;
}
.wb-ai-out { margin-top: 12px; }
.wb-ai-block h5 {
  font-size: 12px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 4px;
  color: var(--ink);
}
.wb-ai-block p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.wb-ai-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--surface);
}
.wb-ai-card h5 { margin-bottom: 4px; }
.wb-ai-card small { color: var(--muted); font-size: 11px; }
.wb-ai-loading { color: var(--muted); font-size: 13px; padding: 10px; text-align: center; }
.wb-ai-error { color: var(--red); font-size: 13px; padding: 10px; }
.wb-spin { animation: wb-spin 1s linear infinite; display: inline-block; }
@keyframes wb-spin { to { transform: rotate(360deg); } }
.wb-ai-history { list-style: none; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }

/* ── Audit ── */
.wb-audit { display: flex; flex-direction: column; gap: 8px; }
.wb-audit-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: var(--card);
}
.wb-audit-event { font-size: 12px; font-weight: 600; color: var(--ink); }
.wb-audit-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.wb-audit-row pre {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--muted);
  background: var(--surface);
  padding: 4px 6px;
  border-radius: 4px;
  margin-top: 4px;
  overflow-x: auto;
}

/* ── Read-only ── */
.wb-root.wb-readonly .wb-tool[data-tool="sticky"],
.wb-root.wb-readonly .wb-tool[data-tool="text"],
.wb-root.wb-readonly .wb-tool[data-tool="ink"],
.wb-root.wb-readonly .wb-tool[data-tool="arrow"],
.wb-root.wb-readonly [data-action^="add-"] {
  opacity: 0.35;
  pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .wb-body { grid-template-columns: 1fr; }
  .wb-sidebar { display: none; }
  .wb-aside { position: absolute; right: 0; top: 0; bottom: 0; z-index: 10; box-shadow: -6px 0 20px rgba(0,0,0,0.1); }
}

/* ═══════════════════════════════════════════════════════════
   Submission Viewer (sv-*) — inline review modal
   ═══════════════════════════════════════════════════════════ */
.sv-modal {
  position: fixed; inset: 0; z-index: 5000;
  background: rgba(26,24,20,0.65);
  display: none; align-items: stretch; justify-content: center;
  padding: 0;
}
.sv-modal.is-open { display: flex; }

.sv-shell {
  width: 100%; height: 100%;
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ── Header / Toolbar ── */
.sv-header {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.sv-close {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: all .15s;
}
.sv-close:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.sv-title { flex: 0 1 auto; min-width: 0; max-width: 320px; }
.sv-title-name {
  font-size: 14px; font-weight: 600; color: var(--ink);
  font-family: 'Instrument Sans', sans-serif; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sv-title-sub {
  font-size: 11px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sv-toolbar {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  justify-content: center;
}
.sv-tool-group { display: inline-flex; gap: 2px; }
.sv-tool-divider {
  width: 1px; height: 22px; background: var(--border); margin: 0 6px;
}
.sv-tool {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent;
  color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; transition: all .12s;
}
.sv-tool:hover { background: var(--surface); border-color: var(--border); }
.sv-tool.is-active {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.sv-color {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  margin: 0 2px; padding: 0;
  transition: transform .1s, border-color .1s;
}
.sv-color:hover { transform: scale(1.1); }
.sv-color.is-active { border-color: var(--ink); }

.sv-status {
  font-size: 11px; color: var(--muted); min-width: 96px;
  text-align: right; white-space: nowrap;
}

/* ── Body ── */
.sv-body {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1fr 380px;
  background: var(--surface);
}

/* ── Viewport (file rendering) ── */
.sv-viewport {
  overflow-y: auto; overflow-x: auto;
  padding: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  background: #f4f1ec;
}
.sv-page {
  position: relative; flex-shrink: 0;
  background: #fff;
  box-shadow: 0 4px 16px rgba(26,24,20,0.12);
  border-radius: 4px;
  overflow: hidden;
}
.sv-pdf-canvas, .sv-image {
  display: block; max-width: 100%;
  user-select: none;
}
.sv-image { width: auto; max-height: 70vh; }
.sv-anno-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  touch-action: none;
}
.sv-pin-layer {
  position: absolute; inset: 0;
  pointer-events: none;
}
.sv-pin-layer .sv-pin { pointer-events: auto; }

.sv-text-page {
  width: min(900px, 96%);
  max-width: 900px;
  min-height: 240px;
  background: #fff;
  padding: 0;
}
.sv-text-page-inner {
  padding: 24px 28px;
  font-family: 'Instrument Sans', sans-serif;
}
.sv-text-page-inner h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-bottom: 12px; font-weight: 600;
}
.sv-text-page-inner pre {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.65;
  white-space: pre-wrap; word-wrap: break-word;
  color: var(--ink); margin: 0;
}

/* ── Journal-mode page: paper-document styling so a shared journal
   entry feels like a PDF the clinician is marking up, not a chat log.
   The page fills the viewport vertically (minus modal chrome + a
   margin band) so even a one-line entry still has room for pins,
   pen strokes, and other marginalia. The body region uses flex:1
   so the white "paper" below the text stays clickable for annotations. */
.sv-journal-page {
  background: #fdfaf2;
  width: min(900px, 96%);
  /* 100vh − header(~60) − publish banner(~42) − viewport padding(48) − comfort(40)
     ≈ 100vh − 190px. Tweak the constant if the chrome height changes. */
  min-height: calc(100vh - 190px);
  display: flex; flex-direction: column;
}
.sv-journal-inner {
  padding: 56px 64px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.sv-journal-head { border-bottom: 1px solid rgba(26,24,20,0.12); padding-bottom: 18px; margin-bottom: 26px; }
.sv-journal-eyebrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.13em; color: var(--muted); margin: 0 0 8px; font-weight: 500; }
.sv-journal-title { font-family: var(--serif); font-size: 28px; font-weight: 400; color: var(--ink); letter-spacing: 0.01em; line-height: 1.18; margin: 0; }
.sv-journal-prompt { background: color-mix(in srgb, var(--accent) 6%, transparent); border-left: 3px solid var(--accent); padding: 12px 16px; margin-bottom: 24px; font-family: var(--serif); font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.sv-journal-prompt-label { display: block; font-family: var(--sans); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.13em; font-weight: 500; color: var(--muted); margin-bottom: 4px; }
.sv-journal-prompt em { font-style: italic; }
/* The body grows to fill remaining vertical space. The trailing
   blank room is intentional working surface for clinician markup. */
.sv-journal-body { font-family: var(--serif); font-size: 16px; line-height: 1.82; color: var(--ink); flex: 1; }
.sv-journal-body p { margin: 0 0 16px; }
.sv-journal-body p:last-child { margin-bottom: 0; }
/* Draft-pin drag affordance */
.sv-pin-draft.is-dragging .sv-pin-dot { transform: scale(1.12); box-shadow: 0 4px 16px rgba(26,24,20,0.45), 0 0 0 3px rgba(255,255,255,0.95); }
.sv-pin-draft .sv-pin-dot { cursor: grab; }
.sv-pin-draft.is-dragging .sv-pin-dot { cursor: grabbing; }

/* Author-attribution tip pinned to the bottom of the viewport column.
   Positioned relative to .sv-body, offset 0..(side panel width) so it
   centers under the viewport, not over the side pane. Pointer-events
   none so it never blocks clicks/hover on annotations underneath. */
.sv-body { position: relative; }
.sv-author-tip {
  position: absolute;
  /* Span the viewport column: 0 → (100% − side panel width). The body
     grid is `1fr 380px`; on small screens the @media rule flips it to
     a single column so we drop the right offset too. */
  left: 0;
  right: 380px;
  bottom: 18px;
  margin: 0 auto;
  width: fit-content;
  max-width: min(560px, calc(100% - 64px));
  transform: translateY(12px);
  background: var(--ink); color: #fff;
  font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.01em;
  padding: 9px 18px; border-radius: 999px;
  box-shadow: 0 6px 24px rgba(26,24,20,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 6;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sv-author-tip.is-visible { opacity: 1; transform: translateY(0); }

/* Journal-self mode: paper layout + visibility same as journal mode.
   No publish banner here so the paper fills more vertical space. */
.sv-modal[data-mode="journal-self"] .sv-text-page {
  min-height: calc(100vh - 150px);
  width: min(900px, 96%);
  display: flex; flex-direction: column;
}
.sv-modal[data-mode="journal-self"] .sv-text-page-inner { flex: 1; display: flex; flex-direction: column; }
/* Override the journal-page rule that assumes a publish banner is present. */
.sv-modal[data-mode="journal-self"] .sv-journal-page { min-height: calc(100vh - 150px); }

/* ── Publish-state banner for journal mode. Sits between the header
   and the viewport. Three colored states: private (amber), published
   (green), client-view (neutral). */
.sv-publish-banner {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 22px;
  font-family: var(--sans); font-size: 13px; line-height: 1.45;
  border-bottom: 1px solid var(--border);
}
.sv-publish-banner i { font-size: 15px; flex-shrink: 0; }
.sv-publish-banner span { flex: 1; min-width: 0; }
.sv-publish-banner[data-state="private"] {
  background: #fef3c7; color: #78350f; border-bottom-color: #fcd34d;
}
.sv-publish-banner[data-state="published"] {
  background: #ddf3df; color: #14532d; border-bottom-color: #86c596;
}
.sv-publish-banner[data-state="client-view"] {
  background: color-mix(in srgb, var(--accent) 8%, var(--card)); color: var(--accent); border-bottom-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
.sv-publish-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  border: 1px solid currentColor; background: transparent;
  cursor: pointer; border-radius: 0;
  color: inherit;
  transition: background 0.15s, color 0.15s;
}
.sv-publish-btn:hover { background: rgba(0,0,0,0.05); }
.sv-publish-btn.primary {
  background: #b45309; color: #fff; border-color: #b45309;
}
.sv-publish-btn.primary:hover { background: #92400e; border-color: #92400e; }

.sv-unsupported {
  margin: auto;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 56px 36px; text-align: center;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); max-width: 460px;
}
.sv-unsupported h3 { font-size: 16px; font-weight: 600; margin: 0; }
.sv-unsupported p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; }

/* ── Pins ── */
.sv-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer; z-index: 4;
  background: none; border: none; padding: 0;
}
.sv-pin-dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(26,24,20,0.4), 0 0 0 3px rgba(255,255,255,0.85);
  transition: transform .12s;
}
.sv-pin:hover .sv-pin-dot { transform: scale(1.1); }
.sv-pin.is-active .sv-pin-dot { background: var(--ink); }
.sv-pin.is-resolved .sv-pin-dot { background: var(--green); }

.sv-pin-draft .sv-pin-dot { background: var(--amber); }
.sv-pin-popover {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px;
  width: 280px; box-shadow: 0 12px 32px rgba(26,24,20,0.18);
  z-index: 5;
}
.sv-pin-popover textarea {
  width: 100%; box-sizing: border-box;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13px; line-height: 1.5;
  padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: vertical; background: var(--bg); color: var(--ink);
}
.sv-pin-popover-actions {
  display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px;
}
.sv-pin-popover-actions .btn { font-size: 12px; padding: 5px 10px; }

/* ── Side panel ── */
.sv-side {
  display: flex; flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--card);
  min-height: 0;
}
.sv-tabs {
  display: flex; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.sv-tab {
  flex: 1; padding: 12px 14px;
  border: none; background: transparent; cursor: pointer;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13px; font-weight: 500; color: var(--muted);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s;
}
.sv-tab:hover { color: var(--ink); }
.sv-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.sv-tab-count {
  font-size: 10px; font-weight: 600;
  background: var(--surface); color: var(--muted);
  padding: 1px 7px; border-radius: 999px;
}
.sv-tab.is-active .sv-tab-count {
  background: var(--accent); color: #fff;
}

.sv-pane {
  display: none; flex-direction: column;
  flex: 1; min-height: 0;
}
.sv-pane.is-active { display: flex; }

.sv-cmt-list, .sv-fb-list {
  flex: 1; overflow-y: auto;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.sv-empty {
  margin: auto;
  text-align: center; color: var(--muted);
  padding: 28px 16px;
}
.sv-empty i { font-size: 26px; opacity: 0.5; display: block; margin-bottom: 8px; }
.sv-empty p { font-size: 13px; line-height: 1.55; margin: 0; }

/* Comment item */
.sv-cmt {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  transition: box-shadow .15s, border-color .15s;
}
.sv-cmt-flash {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(167,139,250,0.18);
}
.sv-cmt-head { display: flex; align-items: flex-start; gap: 9px; }
.sv-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
  font-family: 'Instrument Sans', sans-serif;
}
.sv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sv-avatar-sm { width: 22px; height: 22px; font-size: 10px; }

.sv-cmt-meta { flex: 1; min-width: 0; }
.sv-cmt-author {
  font-size: 12px; line-height: 1.35; color: var(--ink);
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.sv-cmt-author strong { font-weight: 600; }
.sv-cmt-role {
  font-size: 10px; padding: 1px 6px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; color: var(--muted);
}
.sv-cmt-pin-badge, .sv-cmt-thread-badge {
  font-size: 10px; padding: 1px 7px;
  background: var(--accent-light); color: var(--accent);
  border-radius: 999px; font-weight: 600;
}
.sv-cmt-thread-badge {
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--border);
}
.sv-cmt-resolved {
  font-size: 10px; padding: 1px 7px;
  background: var(--green-light); color: var(--green);
  border-radius: 999px; font-weight: 600;
}
.sv-cmt-when { font-size: 10px; color: var(--muted); margin-top: 1px; }
.sv-cmt-actions-top { display: flex; gap: 2px; }
.sv-icon-btn {
  width: 24px; height: 24px; border-radius: var(--radius-sm);
  border: none; background: transparent; cursor: pointer;
  color: var(--muted); display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.sv-icon-btn:hover { background: var(--bg); color: var(--ink); }

.sv-cmt-body {
  font-size: 13px; line-height: 1.55; color: var(--ink);
  white-space: pre-wrap; padding-left: 37px;
}
.sv-cmt-replies {
  display: flex; flex-direction: column; gap: 6px;
  padding-left: 37px; margin-top: 4px;
}
.sv-reply {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 7px 10px; background: var(--bg);
  border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.sv-reply-body { flex: 1; min-width: 0; font-size: 12px; line-height: 1.5; color: var(--ink); }
.sv-reply-meta { font-size: 10px; color: var(--muted); margin-bottom: 2px; }

.sv-cmt-reply-row {
  display: flex; gap: 6px; padding-left: 37px; margin-top: 2px;
}
.sv-cmt-reply-row input {
  flex: 1; padding: 6px 10px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg); color: var(--ink);
}
.sv-cmt-reply-row input:focus { outline: none; border-color: var(--accent); }

.sv-cmt-input, .sv-fb-input {
  flex-shrink: 0;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--card);
  display: flex; flex-direction: column; gap: 8px;
}
.sv-cmt-input textarea, .sv-fb-input textarea {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13px; line-height: 1.5;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: none; background: var(--bg); color: var(--ink);
}
.sv-cmt-input textarea:focus, .sv-fb-input textarea:focus {
  outline: none; border-color: var(--accent);
}
.sv-cmt-actions {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.sv-hint { font-size: 10px; color: var(--muted); flex: 1; }
.sv-cmt-send, .sv-fb-send { font-size: 12px; padding: 6px 12px; }

/* Feedback chat */
.sv-fb-msg {
  display: flex; gap: 9px; align-items: flex-start;
}
.sv-fb-msg-mine { flex-direction: row-reverse; }
.sv-fb-bubble {
  flex: 0 1 auto; max-width: 78%;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 11px;
}
.sv-fb-msg-mine .sv-fb-bubble {
  background: var(--accent-light); border-color: rgba(167,139,250,0.25);
}
.sv-fb-meta { font-size: 10px; color: var(--muted); margin-bottom: 3px; }
.sv-fb-body { font-size: 13px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; }
.sv-fb-input { flex-direction: row; align-items: flex-end; }
.sv-fb-input textarea { flex: 1; }

@media (max-width: 900px) {
  .sv-body { grid-template-columns: 1fr; grid-template-rows: minmax(200px, 1fr) auto; }
  .sv-side { border-left: none; border-top: 1px solid var(--border); max-height: 50vh; }
  .sv-toolbar { display: none; }
  /* Side panel collapses to a row below the viewport — drop the right
     offset so the author tip stays centered. */
  .sv-author-tip { right: 0; }
}

/* ── Prescription "Coming Soon" placeholder ──────────────────────
   Used in every surface that previously exposed the prescription module.
   The underlying code, tables, RLS, and edge functions are unchanged —
   only the UI is gated. When the feature is ready to ship, swap the
   placeholder back to the real component. */
.rx-coming-soon {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 56px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 560px;
  margin: 32px auto;
  box-shadow: 0 2px 16px var(--shadow);
}
.rx-coming-soon .rx-cs-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-light); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.rx-coming-soon h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  margin: 0;
  color: var(--ink);
}
.rx-coming-soon p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  max-width: 440px;
}
.rx-coming-soon .rx-cs-tag {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
/* Compact variant for tabs, cards, sidebars, video-session panels */
.rx-coming-soon.rx-cs-compact {
  padding: 28px 20px;
  margin: 16px auto;
  max-width: 380px;
}
.rx-coming-soon.rx-cs-compact h2 { font-size: 19px; }
.rx-coming-soon.rx-cs-compact p { font-size: 12.5px; }
.rx-coming-soon.rx-cs-compact .rx-cs-icon { width: 42px; height: 42px; font-size: 20px; }
/* Disabled state for sidebar / tab items still visible but non-functional */
.rx-disabled {
  opacity: 0.45 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* ═══════════════════════════════════════════════════════════
   EDITORIAL · LUXE — Page-level overrides
   ═══════════════════════════════════════════════════════════
   Scoped to body[data-backdrop="ocean"] so this section only
   affects opted-in luxe pages (the two dashboards today; can
   extend to other pages by adding the body attribute).

   Goals:
     • Switch the dark ink sidebar → ivory with shiplap weave
     • Switch the cream topbar → paper white
     • Soften inline-color overrides via !important high-specificity
     • Keep every existing element and handler intact
   ═══════════════════════════════════════════════════════════ */

/* ── Topbar — black ink, modern sans, sticky ──
   Reverts to the global .topbar black-ink default and tightens
   the type so it reads "modern UI" rather than "editorial". */
body[data-backdrop="ocean"] header.topbar {
  background: var(--ink) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  backdrop-filter: none;
}

/* ── Brand mark — ocean-deep tone on black ── */
body[data-backdrop="ocean"] .brand-mark {
  background: var(--ocean-d);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-variation-settings: normal;
}
body[data-backdrop="ocean"] .brand-name {
  font-family: var(--sans);
  font-weight: 600;
  font-variation-settings: normal;
  font-size: 15px;
  letter-spacing: -0.012em;
  color: #fff;
}
body[data-backdrop="ocean"] .brand-name em {
  font-style: normal;
  font-weight: 500;
  color: var(--ocean-f);
}
body[data-backdrop="ocean"] .brand-tag {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}

/* ── Topbar interactive items — uniform height ──
   .btn (primary) is 41px, .btn.ghost is 39px, .user-bubble is ~42px.
   Lock all three to 40px with consistent box-sizing so the topbar
   row reads as a clean ruler-aligned strip. */
body[data-backdrop="ocean"] .topbar .btn,
body[data-backdrop="ocean"] .topbar .user-bubble {
  height: 40px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}
body[data-backdrop="ocean"] .topbar .user-bubble {
  padding-left: 4px !important;
  padding-right: 12px !important;
}
body[data-backdrop="ocean"] .topbar .user-avatar-circle {
  width: 30px !important;
  height: 30px !important;
}

/* ════════════════════════════════════════════
   FIXED DARK NAVIGATION RAIL  (light + dark themes)
   ───────────────────────────────────────────
   The sidebar is always a calm dark rail — charcoal
   ground, off-white items, champagne active icon, a
   rounded active/hover highlight (no left bar, no
   shadow). Same in both themes, per the mockup.
   Higher specificity than the per-dashboard token CSS. */
body aside.hub-sidebar {
  background: #131211 !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
}
body aside.hub-sidebar .sidebar-profile { border-bottom: 1px solid rgba(255,255,255,0.07) !important; }
body aside.hub-sidebar .sidebar-profile-name { color: #ECE7DD !important; }
body aside.hub-sidebar .sidebar-profile-role { color: rgba(236,231,221,0.45) !important; }
body aside.hub-sidebar .sidebar-avatar { background: rgba(255,255,255,0.09) !important; color: #ECE7DD !important; }
body aside.hub-sidebar .sidebar-profile-toggle { color: rgba(236,231,221,0.5) !important; border-color: rgba(255,255,255,0.12) !important; }
body aside.hub-sidebar .sidebar-profile-toggle:hover { background: rgba(255,255,255,0.06) !important; color: #fff !important; border-color: rgba(255,255,255,0.18) !important; }
body aside.hub-sidebar .sidebar-section-label { color: rgba(236,231,221,0.34) !important; }
body aside.hub-sidebar .sidebar-item { color: rgba(236,231,221,0.66) !important; border-radius: 9px; }
body aside.hub-sidebar .sidebar-item .si-icon { color: rgba(236,231,221,0.48) !important; }
body aside.hub-sidebar .sidebar-item:hover { background: rgba(255,255,255,0.05) !important; color: #ECE7DD !important; }
body aside.hub-sidebar .sidebar-item:hover .si-icon { color: #ECE7DD !important; }
body aside.hub-sidebar .sidebar-item.active { background: rgba(255,255,255,0.07) !important; color: #FFFFFF !important; font-weight: 500; box-shadow: none !important; }
body aside.hub-sidebar .sidebar-item.active::before { display: none !important; }
body aside.hub-sidebar .sidebar-item.active .si-icon { color: var(--champagne, #E7DFCF) !important; opacity: 1; }
body aside.hub-sidebar .sidebar-divider { background: rgba(255,255,255,0.08) !important; }
body aside.hub-sidebar .sidebar-badge { background: var(--champagne, #E7DFCF) !important; color: #1B1A1E !important; }
body aside.hub-sidebar .sidebar-badge.red { background: #C0594A !important; color: #fff !important; }

/* ── Sidebar — ivory with shiplap weave ──
   The existing .hub-sidebar uses background:var(--ink) and white
   labels (set inline). We invert it to ivory + dark text using
   high specificity scoped to luxe pages. */
body[data-backdrop="ocean"] aside.hub-sidebar {
  /* Solid ivory — no shiplap weave (those 1px-every-80px stripes
     read as faint horizontal "lines" the user wanted gone). */
  background: var(--ivory) !important;
  background-image: none !important;
  border-right: 1px solid var(--line);
  color: var(--ink-soft);
}

/* Inside the sidebar — every white/light-on-dark rule the old
   theme had gets flipped to dark-on-light. */
body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-profile-name,
body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-profile-role,
body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-section-label,
body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-item,
body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-item .si-icon,
body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-item .si-label,
body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-toggle,
body[data-backdrop="ocean"] aside.hub-sidebar a {
  color: var(--ink-soft) !important;
}
body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-profile-name {
  color: var(--ink) !important;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 24, "SOFT" 50;
}
body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-profile-role {
  color: var(--muted) !important;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}
body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-section-label {
  color: var(--whisper) !important;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  /* Uniform section rhythm — every section break uses the same
     padding so Overview / My Care / Personal / Connect read as
     evenly spaced groups. No first-of-type exception. */
  padding: 14px 14px 6px !important;
  margin: 0 !important;
}
body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-section-label:first-of-type {
  padding-top: 14px !important;
}
/* No explicit dividers — every section break is spacing-only. */
body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-divider {
  display: none !important;
}
/* Drop the sign-out top border so the Account / Sign-out break uses
   the same rhythm as every other section (spacing, not a line). */
body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-signout {
  border-top: 0 !important;
  padding-top: 10px !important;
}
body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-item:hover,
body[data-backdrop="ocean"] aside.hub-sidebar a:hover {
  background: var(--bg) !important;
  color: var(--ink) !important;
}
body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-item.active,
body[data-backdrop="ocean"] aside.hub-sidebar a.active {
  background: transparent !important;
  color: var(--ink) !important;
  font-weight: 500;
  position: relative;
  box-shadow: none !important;
  border: 0 !important;
}
body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-item.active::before,
body[data-backdrop="ocean"] aside.hub-sidebar a.active::before {
  /* Ocean-deep left rail — the luxe active indicator. */
  content: '';
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 2px;
  background: var(--ocean-d);
}
body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-divider {
  background: var(--line-w) !important;
}
body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-avatar {
  background: var(--ocean-w) !important;
  color: var(--ocean-d) !important;
  border: 1px solid var(--line);
  font-family: var(--serif);
  font-variation-settings: "opsz" 36, "SOFT" 50;
}
body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-badge {
  background: var(--ink) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 600;
}
body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-badge.amber {
  background: var(--ink) !important;
  color: #fff !important;
}

/* ── Main content area — let the photo show through ── */
body[data-backdrop="ocean"] .hub-main {
  background: transparent !important;
}

/* ── Make sections inside the dashboards more transparent so the
   photo backdrop's mood reads through, but cards stay strong. ── */
body[data-backdrop="ocean"] .section {
  background: transparent;
}

/* ── Drill-view shell — let the paper bg lift it off the photo ── */
body[data-backdrop="ocean"] .drv-shell {
  background: var(--bg);
}
body[data-backdrop="ocean"] .drv-header,
body[data-backdrop="ocean"] .drv-toolbar {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

/* ── Sidebar identity widget at top, when present ── */
body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-profile {
  border-bottom: 1px solid var(--line-w);
}

/* ── User bubble (topbar profile dropdown) — paper surface, ocean rail ── */
body[data-backdrop="ocean"] .user-bubble {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
}
body[data-backdrop="ocean"] .user-dropdown {
  border-radius: 0 !important;
}
body[data-backdrop="ocean"] .dropdown-item {
  border-radius: 0 !important;
}
body[data-backdrop="ocean"] .user-bubble:hover { border-color: var(--ocean-d) !important; }
body[data-backdrop="ocean"] .user-avatar-circle {
  background: var(--ocean-w);
  color: var(--ocean-d);
  font-family: var(--serif);
}
body[data-backdrop="ocean"] .user-display-name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12.5px;
}
body[data-backdrop="ocean"] .user-dropdown {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(92,143,168,0.06),
    0 18px 48px -18px rgba(31,61,82,0.24),
    0 6px 16px -6px rgba(31,61,82,0.10);
}

/* ── DRV cards — same paper + shadow recipe but tighter spacing ── */
body[data-backdrop="ocean"] .drv-card {
  background: var(--paper) !important;
  border: 1px solid var(--line-w) !important;
  box-shadow:
    0 1px 0 rgba(92,143,168,0.06),
    0 10px 28px -16px rgba(31,61,82,0.18),
    0 3px 10px -6px rgba(31,61,82,0.06);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.12s;
}
body[data-backdrop="ocean"] .drv-card:hover {
  border-color: var(--ocean-f) !important;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(92,143,168,0.10),
    0 16px 36px -16px rgba(31,61,82,0.25),
    0 5px 14px -6px rgba(31,61,82,0.10);
}
body[data-backdrop="ocean"] .drv-card-title {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 24, "SOFT" 50;
  font-size: 17px;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--ink);
}
body[data-backdrop="ocean"] .drv-card-meta {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.01em;
}
body[data-backdrop="ocean"] .drv-card-desc {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-variation-settings: "opsz" 18, "SOFT" 100;
  font-size: 13.5px;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  line-height: 1.5;
}

/* ── DRV header eyebrow + title — editorial scale ── */
body[data-backdrop="ocean"] .drv-header-eyebrow {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
body[data-backdrop="ocean"] .drv-header-title {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 36, "SOFT" 50;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════
   EDITORIAL LUXE — OVERVIEW LAYOUT COMPONENTS
   ───────────────────────────────────────────────────────────
   Mirrors the preview's overview structure 1:1. Component class
   names are prefixed `.lux-` so they can't collide with any of
   the existing dashboard chrome (.stat-row, .day, etc. already
   exist for unrelated purposes).
   ─────────────────────────────────────────────────────────── */

/* ── Hero augmentation ──
   The .section-hero already provides the paper+rail surface.
   Inside the hero we add a two-row layout: top row is the
   text+CTA group; below it sits the stat row. */
.lux-hero-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px;
  align-items: end;
  margin-bottom: 36px;
  width: 100%;
}
@media (max-width: 720px) { .lux-hero-top { grid-template-columns: 1fr; gap: 24px; } }

.lux-hero-eyebrow {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.lux-hero-eyebrow .yr { color: var(--ocean-f); font-feature-settings: "tnum"; font-weight: 700; }
.lux-hero-eyebrow .pip {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--ocean-f);
  display: inline-block; opacity: 0.55;
}

.lux-hero-lede {
  font-family: var(--serif);
  font-weight: 350;
  font-variation-settings: "opsz" 24, "SOFT" 50;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  max-width: 560px;
  margin: 0;
}

.lux-hero-cta { display: flex; gap: 12px; flex-shrink: 0; }

/* ── Stat row (4 stats inside the hero) ──
   Bordered grid sitting in the bottom strip of the hero. */
.lux-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  margin: 0 -44px -32px;       /* extend to hero edges */
}
@media (max-width: 900px) { .lux-stat-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .lux-stat-row { grid-template-columns: 1fr; } }

.lux-stat {
  padding: 24px 28px 40px;
  border-right: 1px solid var(--border-light);
  position: relative;
  /* Column so the footer link sits on one baseline across all four tiles,
     however tall the value above it runs (a wrapped question is two lines). */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.lux-stat:last-child { border-right: none; }
@media (max-width: 900px) {
  .lux-stat:nth-child(2) { border-right: none; }
  .lux-stat:nth-child(-n+2) { border-bottom: 1px solid var(--border-light); }
}
@media (max-width: 520px) {
  .lux-stat { border-right: none; border-bottom: 1px solid var(--border-light); }
  .lux-stat:last-child { border-bottom: none; }
}
.lux-stat .h {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 12px;
}
.lux-stat .v {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 28, "SOFT" 40;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-feature-settings: "tnum";
  min-height: 32px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 7px;
}
/* Empty / awaiting states read as an intentional, legible secondary value —
   not the ghosted 50%-white-on-cream they were before. */
.lux-stat .v .lux-stat-empty {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  font-variation-settings: "opsz" 20;
  letter-spacing: -0.005em;
  color: var(--muted);
}
.lux-stat .v .ov-st-sub {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: -0.005em;
}
.lux-stat .v em {
  font-style: italic;
  color: var(--ocean-f);
  font-variation-settings: "opsz" 40, "SOFT" 60, "wght" 400;
}
.lux-stat .v small {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--muted);
  margin-left: 2px;
}
/* A question is prose, not a figure: it wraps, sets smaller, and leans
   italic so it reads as something to sit with rather than a measurement. */
.lux-stat .v .ov-st-q {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Money keeps lining figures — Instrument Serif's old-style "1" reads as a
   roman numeral at this size. */
.lux-stat .v { font-variant-numeric: lining-nums tabular-nums; }
.lux-stat .v.ov-st-due { color: var(--amber); }
.lux-stat .v.ov-st-due .ov-st-sub { color: var(--amber); opacity: .85; }
.lux-stat .sub { display: none; }
/* "View schedule →" link under each stat number (mockup). */
.lux-stat-link {
  display: inline-block;
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.lux-stat-link:hover { color: var(--ink); }

/* ── Two-column body grid ──
   The grid sits *inside* the Overview section, beneath the hero,
   and gives us a 1.55fr/1fr split with stacked cards in each
   column. */
.lux-body {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 28px;
  margin-top: 28px;
}
@media (max-width: 1000px) { .lux-body { grid-template-columns: 1fr; } }
.lux-body-left, .lux-body-right { display: flex; flex-direction: column; gap: 24px; }

/* ── Card chrome (luxe) ──
   The base .card already inherits the paper+shadow recipe from
   the global styles. We add the `.lux-card-h` row at the top of
   each card with the wide-tracked eyebrow heading + .more link. */
.lux-card-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
  gap: 14px;
}
/* Editorial section headers — sentence-case serif, not all-caps SaaS eyebrows. */
.lux-card-h h3 {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  font-weight: 400;
  margin: 0;
}
.lux-card-h .ct {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  font-weight: 400;
}
.lux-card-h .more {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  text-decoration: none;
  font-weight: 400;
  border-bottom: none;
  padding-bottom: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}
.lux-card-h .more::after { content: '  →'; }
.lux-card-h .more:hover { color: var(--ink); }

/* ── This Week mini calendar ── */
.lux-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.lux-day {
  border: 1px solid var(--border-light);
  padding: 14px 12px 16px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 110px;
  position: relative;
}
.lux-day.today {
  background: var(--ocean-m);
  border-color: var(--ocean-f);
}
.lux-day.today::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--ocean-f);
}
.lux-day .dl {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.lux-day .dn {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 60, "SOFT" 50;
  font-size: 17px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-feature-settings: "tnum";
}
.lux-day.today .dn em {
  font-style: italic;
  color: var(--ocean-f);
  font-variation-settings: "opsz" 60, "SOFT" 100, "wght" 300;
}
.lux-day .ds {
  margin-top: auto;
  font-size: 10.5px;
  color: var(--ink);
  line-height: 1.35;
  padding-top: 6px;
  border-top: 1px solid var(--border-light);
}
.lux-day .ds .t {
  font-feature-settings: "tnum";
  color: var(--ocean-f);
  font-weight: 600;
}
.lux-day.empty .ds { color: var(--whisper); }
@media (max-width: 900px) {
  .lux-week { grid-template-columns: repeat(7, minmax(110px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
}

/* ════════════════════════════════════════════
   OVERVIEW ALIGNMENT
   ───────────────────────────────────────────
   The hero, stat row and body each had a different
   horizontal inset (hero +44px, stats +28px, body 0),
   so the section headers stair-stepped and butted the
   sidebar at narrow widths. Put ONE inset on the shell
   and align every child to it. */
#section-overview .lux-overview-shell {
  padding-left: clamp(20px, 3.2vw, 44px);
  padding-right: clamp(20px, 3.2vw, 44px);
  box-sizing: border-box;
}
#section-overview .section-hero { padding-left: 0 !important; padding-right: 0 !important; }
#section-overview .lux-stat-row { margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; }
#section-overview .lux-stat:first-child { padding-left: 0; }
#section-overview .lux-stat:last-child { padding-right: 0; }
/* No vertical dividers between stats — whitespace only (mockup). */
#section-overview .lux-stat { border: none; }
/* Drop the all-caps "CLINICIAN DASHBOARD" eyebrow — the mockup leads straight
   with the serif greeting. */
#section-overview .lux-hero-eyebrow { display: none; }

/* ════════════════════════════════════════════
   FLAT EDITORIAL OVERVIEW
   ───────────────────────────────────────────
   Panels are planes, not cards: no fill-box, no
   border, no drop shadow. Structure comes from the
   hairline section headers + generous whitespace.
   This is the "spacious, flowy, not widget-y" feel
   of the mockups, applied in both themes. */
.lux-body { gap: 44px; margin-top: 44px; }
.lux-body-left, .lux-body-right { gap: 44px; }
.lux-body .card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.lux-card-h { margin-bottom: 24px; padding-bottom: 16px; }

/* This Week — open, centered columns; pure whitespace, no boxes, no dividers.
   Today is a soft circle behind the number (not a bar). */
.lux-week { gap: 0; border-top: none; }
.lux-day {
  border: none;
  padding: 8px 6px;
  min-height: 0;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.lux-day .dn {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; line-height: 1;
}
/* Today — a soft filled cell behind the whole column (mockup), not a ring.
   Same treatment in light + dark. !important + #section-overview scope beats
   the global `.empty { background: transparent !important }` rule, since
   today usually has no sessions and so also carries the .empty class. */
#section-overview .lux-day.today { background: var(--accent-light) !important; border-radius: 4px; }
.lux-day.today::before { display: none; }
.lux-day.today .dn { border-radius: 0; background: transparent; border: none; }
.lux-day .ds { border-top: none; padding-top: 0; }

/* ── Item list (Journal / Notes / Sessions) ── */
.lux-list { display: flex; flex-direction: column; }
.lux-li {
  display: grid;
  /* Date column widened so long tags like "BREAKTHROUGH" don't overflow
     into the title column. Body column gets min-width:0 so the title
     truncates gracefully if it ever runs long. */
  grid-template-columns: 116px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-light);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.2s;
}
.lux-li .li-body { min-width: 0; }
.lux-li:last-child { border-bottom: none; }
.lux-li:hover { opacity: 0.72; }
.lux-li .when {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  font-feature-settings: "tnum";
}
.lux-li .li-body .t {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 24, "SOFT" 50;
  font-size: 17px;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 4px;
}
.lux-li .li-body .ex {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-variation-settings: "opsz" 18, "SOFT" 100;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  letter-spacing: -0.005em;
}
.lux-li .meta {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  text-align: right;
}
.lux-li .meta.sage { color: var(--sage-d); }
.lux-li .meta.sea  { color: var(--ocean-d); }
.lux-li .meta::before {
  content: '';
  display: inline-block;
  width: 6px; height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 2px;
}

/* ── Sessions list (this week) ── */
.lux-sess { display: flex; flex-direction: column; }
.lux-s-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-light);
}
.lux-s-row:last-child { border-bottom: none; }
.lux-s-row .when {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 60, "SOFT" 50;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-feature-settings: "tnum";
  line-height: 1;
}
.lux-s-row .when .ampm {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 3px;
  font-weight: 500;
}
.lux-s-row .who {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 24, "SOFT" 100;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.lux-s-row .who small {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-top: 3px;
}
.lux-s-row .tag {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  text-align: right;
}
.lux-s-row .tag.sage { color: var(--sage-d); }
.lux-s-row .tag.sea  { color: var(--ocean-d); }
.lux-s-row .tag::before {
  content: '';
  display: inline-block;
  width: 6px; height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 2px;
}

/* ── Action items list ── */
.lux-acts { display: flex; flex-direction: column; }
.lux-act-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
}
.lux-act-row:last-child { border-bottom: none; }
.lux-act-row .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  margin-top: 8px;
}
.lux-act-row .dot.high   { background: var(--red); }
.lux-act-row .dot.medium { background: var(--amber); }
.lux-act-row .dot.low    { background: var(--green); }
/* Legacy classes preserved for any non-priority callers */
.lux-act-row .dot.sage  { background: var(--sage-d); }
.lux-act-row .dot.muted { background: var(--whisper); }
.lux-act-row .b {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
}
.lux-act-row .b strong { font-weight: 500; }
.lux-act-row .b em {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 18, "SOFT" 100;
  color: var(--ocean-d);
}
.lux-act-row .b .when {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 500;
}
.lux-act-row .b .when .pri {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 9.5px;
  line-height: 1.5;
  vertical-align: 1px;
}
.lux-act-row .b .when .pri.high   { background: var(--red-light);   color: var(--red); }
.lux-act-row .b .when .pri.medium { background: var(--amber-light); color: var(--amber); }
.lux-act-row .b .when .pri.low    { background: var(--green-light); color: var(--green); }
.lux-act-row .b .when .sep { margin: 0 8px; opacity: 0.5; }
.lux-act-row .tag {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* ── People list (My Clients / My Clinicians) ── */
.lux-people { display: flex; flex-direction: column; }
.lux-p-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
}
.lux-p-row:last-child { border-bottom: none; }
.lux-p-row:hover { opacity: 0.85; }
.lux-p-row .av {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ocean-w);
  border: 1px solid var(--border-light);
  color: var(--ocean-d);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 13px;
  font-variation-settings: "opsz" 36, "SOFT" 50;
}
.lux-p-row .av.sage { background: var(--sage-w); color: var(--sage-d); }
.lux-p-row .av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.lux-p-row .nm {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 24, "SOFT" 50;
  font-size: 16px;
  letter-spacing: -0.008em;
  color: var(--ink);
  line-height: 1.2;
}
.lux-p-row .nm em {
  font-style: italic;
  color: var(--ocean-d);
  font-variation-settings: "opsz" 24, "SOFT" 100, "wght" 400;
}
.lux-p-row .ms {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
  letter-spacing: 0.01em;
}
.lux-p-row .when {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

/* ── AI Pattern Summary (client detail · overview) ──
   Expandable inference rows. Click the chevron row to reveal the
   rationale + source dates. The container's own .cps-card border
   defines the visual edge; rows are flat with a subtle hover. */
.cps-card { padding: 18px 22px; }
.cps-list { display: flex; flex-direction: column; gap: 4px; }
.cps-row {
  border-top: 1px solid var(--border-light);
  padding: 4px 0;
}
.cps-row:first-child { border-top: none; padding-top: 0; }
.cps-row-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  transition: opacity 0.15s;
}
.cps-row-head:hover { opacity: 0.7; }
.cps-row-arrow {
  width: 16px; flex-shrink: 0;
  display: inline-flex; align-items: center;
  color: var(--muted);
  font-size: 11px;
  transition: transform 0.18s;
}
.cps-row.open .cps-row-arrow { transform: rotate(90deg); color: var(--ink); }
.cps-row-title { flex: 1; min-width: 0; letter-spacing: -0.005em; }
.cps-row-rationale {
  padding: 0 0 10px 26px;
  animation: cps-fade 0.18s ease;
}
@keyframes cps-fade { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
@keyframes cps-spin { to { transform: rotate(360deg); } }
.cps-ev-wrap { margin-top: 4px; }
.cps-ev-h { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.cps-ev { display: flex; gap: 9px; align-items: baseline; padding: 5px 0; }
.cps-ev + .cps-ev { border-top: 1px solid var(--border-light); }
.cps-ev-date { flex-shrink: 0; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 42px; letter-spacing: 0.02em; }
.cps-ev-body { font-size: 12.5px; line-height: 1.55; color: var(--ink); }
.cps-ev-quote .cps-ev-body { font-family: var(--serif, Georgia, serif); font-style: italic; color: var(--ink); }
.cps-ev-signal .cps-ev-body { color: var(--muted); }

/* ── Sanctuary card (decorative editorial card with photo + quote) ── */
.lux-sanctuary {
  background: var(--paper);
  border: 1px solid var(--border-light);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow:
    0 1px 0 rgba(92,143,168,0.06),
    0 14px 38px -18px rgba(31,61,82,0.18),
    0 4px 12px -6px rgba(31,61,82,0.07);
}
.lux-sanctuary .photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: linear-gradient(180deg, #C5D1D8 0%, #E0E5DA 60%, #F0E9D8 100%);
  box-sizing: border-box;
}
.lux-sanctuary .photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) brightness(1.0) contrast(0.97);
}
.lux-sanctuary .photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(244,240,230,0.05) 0%, rgba(244,240,230,0.18) 100%);
  pointer-events: none;
}
.lux-sanctuary .sm {
  padding: 20px 24px 24px;
  border-top: 1px solid var(--border-light);
}
.lux-sanctuary .cap {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 12px;
}
.lux-sanctuary .cap em {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 18, "SOFT" 100, "wght" 400;
  color: var(--ocean-f);
  letter-spacing: -0.005em;
  text-transform: none;
  font-size: 11.5px;
  margin: 0 4px;
}
.lux-sanctuary .quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-variation-settings: "opsz" 36, "SOFT" 100;
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -0.008em;
  color: var(--ink);
  margin: 0;
}
.lux-sanctuary .attr {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* Matches the dashboard's other CTAs (.lux-stat-link) — a quiet "Open Journal →"
   text link, not a bordered button, so it doesn't sit oddly among them. */
.lux-sanctuary .attr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 0;
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: transparent;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: opacity 0.2s ease;
}
.lux-sanctuary .attr-btn:hover {
  opacity: 0.6;
}
.lux-sanctuary .attr-btn i {
  font-size: 12px;
}

/* ── Sidebar vista (small photo widget tucked above the sidebar profile) ── */
.lux-sb-vista {
  margin: 22px 4px 16px;
  background: var(--paper);
  border: 1px solid var(--border-light);
  overflow: hidden;
}
.lux-sb-vista-photo {
  position: relative;
  height: 110px;
  overflow: hidden;
  background: linear-gradient(180deg, #B6CAD4, #ECE7DA);
}
.lux-sb-vista-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 50%;
  filter: saturate(0.88) brightness(1.02);
  display: block;
}
.lux-sb-vista-cap {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border-light);
}
.lux-sb-vista-cap .t {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 18, "SOFT" 100;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--ocean-d);
  font-weight: 400;
}
.lux-sb-vista-cap .s {
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-top: 3px;
}

/* ── Footer photo bookend (closes the Overview page) ── */
.lux-foot-photo {
  position: relative;
  height: 140px;
  overflow: hidden;
  margin-top: 48px;
  background: linear-gradient(180deg, #9FB8C4 0%, #C0D0D8 60%, #1F3D52 100%);
}
.lux-foot-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 65%;
  filter: saturate(0.86) brightness(0.92) contrast(1.02);
  display: block;
}
.lux-foot-photo::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,19,15,0.10) 0%, rgba(20,19,15,0.35) 100%);
  pointer-events: none;
}
.lux-foot-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  z-index: 1;
}
.lux-foot-overlay .wm-foot {
  font-family: var(--serif);
  font-weight: 350;
  font-variation-settings: "opsz" 72, "SOFT" 40;
  font-size: 26px;
  letter-spacing: -0.015em;
  color: #fff;
  display: flex; align-items: baseline; gap: 7px;
  line-height: 1;
  text-shadow: 0 1px 12px rgba(20,19,15,0.18);
}
.lux-foot-overlay .wm-foot em {
  font-style: italic;
  font-variation-settings: "opsz" 72, "SOFT" 100, "wght" 350;
}
.lux-foot-overlay .wm-foot .sep {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  margin: 0 1px 7px;
}
.lux-foot-overlay .tagline {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  font-weight: 500;
}
.lux-foot-overlay .tagline em {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  font-size: 12px;
  color: #fff;
  margin: 0 5px;
  font-variation-settings: "opsz" 18, "SOFT" 100, "wght" 400;
  letter-spacing: -0.005em;
}

/* ── Outer container & paddings for the Overview content ── */
body[data-backdrop="ocean"] #section-overview.active {
  display: block !important;
  padding: 0 !important;
  flex: 1 !important;
}
body[data-backdrop="ocean"] #section-overview .lux-overview-shell {
  /* Thinner side margins — widgets sit closer to the sidebar and
     right edge so the layout reads tighter / more proportional. */
  padding: 36px clamp(14px, 1.8vw, 28px) 0;
  max-width: none;
  margin: 0;
}
body[data-backdrop="ocean"] #section-overview .lux-body {
  padding: 0;
}
/* Hero (Welcome + stat-row) extends past the shell's side padding so it
   touches the menu sidebar on the left and the page edge on the right —
   anchors the page top, reads as the "main" widget. Strip the left+right
   border so the seam against the sidebar is clean (no extra hairline). */
body[data-backdrop="ocean"] #section-overview .lux-overview-shell > .section-hero {
  margin-left: calc(-1 * clamp(14px, 1.8vw, 28px));
  margin-right: calc(-1 * clamp(14px, 1.8vw, 28px));
  border-left: 0 !important;
  border-right: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   NON-OVERVIEW PAGES — modern, tight, edge-to-sidebar
   Overview keeps the editorial luxe vibe; everything else gets
   collapsed gaps, sans-serif headings, and content that runs
   flush to the sidebar so the photo backdrop only "peeks"
   at top and bottom of the page.
   ════════════════════════════════════════════════════════════ */

/* Tight vertical rhythm between section-hero + widgets */
body[data-backdrop="ocean"] .section.active:not(#section-overview) {
  gap: 4px !important;
}
body[data-backdrop="ocean"] .section:not(#section-overview) .section-hero,
body[data-backdrop="ocean"] .section:not(#section-overview) .hub-hero {
  margin-bottom: 0 !important;
  padding: 14px 20px 12px !important;
  /* The hero is the page title strip, not a floating widget.
     Strip the card chrome — keep a single hairline below it as the
     break between hero and content. */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--line) !important;
}
/* .card / .panel on non-overview — drop chrome so they read as
   regions of the bone page, not stacked floating widgets. */
body[data-backdrop="ocean"] .section:not(#section-overview) .card,
body[data-backdrop="ocean"] .section:not(#section-overview) .panel {
  padding: 16px 20px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body[data-backdrop="ocean"] .section:not(#section-overview) .card + .card,
body[data-backdrop="ocean"] .section:not(#section-overview) .panel + .panel {
  border-top: 1px solid var(--line) !important;
}
body[data-backdrop="ocean"] .section:not(#section-overview) .panel-header {
  margin-bottom: 12px !important;
}

/* Multi-pane shells (Clinicians / Clients / Assignments / Notes) —
   strip every layer of "widget" chrome so the two-pane workspace
   reads as the page itself: no outer frame, no separate column
   backgrounds, no panel header borders. Only a single 1px column
   separator remains for structural orientation. */
body[data-backdrop="ocean"] .section:not(#section-overview) .clin-layout,
body[data-backdrop="ocean"] .section:not(#section-overview) .clients-layout,
body[data-backdrop="ocean"] .section:not(#section-overview) .asgn-shell,
body[data-backdrop="ocean"] .section:not(#section-overview) .notes-shell {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}
/* Column panes — transparent backgrounds, no chrome */
body[data-backdrop="ocean"] .section:not(#section-overview) .clin-left,
body[data-backdrop="ocean"] .section:not(#section-overview) .clin-right,
body[data-backdrop="ocean"] .section:not(#section-overview) .clients-left,
body[data-backdrop="ocean"] .section:not(#section-overview) .clients-right,
body[data-backdrop="ocean"] .section:not(#section-overview) .asgn-left,
body[data-backdrop="ocean"] .section:not(#section-overview) .asgn-right,
body[data-backdrop="ocean"] .section:not(#section-overview) .notes-left,
body[data-backdrop="ocean"] .section:not(#section-overview) .notes-right {
  background: transparent !important;
}
/* Keep a single hairline between left & right for structure only */
body[data-backdrop="ocean"] .section:not(#section-overview) .clin-left,
body[data-backdrop="ocean"] .section:not(#section-overview) .clients-left,
body[data-backdrop="ocean"] .section:not(#section-overview) .asgn-left,
body[data-backdrop="ocean"] .section:not(#section-overview) .notes-left {
  border-right: 1px solid var(--line) !important;
}
/* Drop the chrome borders inside each column header */
body[data-backdrop="ocean"] .section:not(#section-overview) .clin-left-header,
body[data-backdrop="ocean"] .section:not(#section-overview) .clients-left-head,
body[data-backdrop="ocean"] .section:not(#section-overview) .asgn-left-head,
body[data-backdrop="ocean"] .section:not(#section-overview) .notes-left-head {
  border-bottom: 0 !important;
  background: transparent !important;
}
/* Tab strips inside non-overview pages (Sessions Individual/Group,
   Journal tabs, etc.) — flatten the active-tab pill so it reads as
   inline page navigation rather than a card-tab control. */
body[data-backdrop="ocean"] .section:not(#section-overview) .svt-tabs,
body[data-backdrop="ocean"] .section:not(#section-overview) .journal-tab-bar,
body[data-backdrop="ocean"] .section:not(#section-overview) .tj-tab-bar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════
   JOURNAL three-pane (client .journal-* + clinician .tj-*) —
   strip every layer of widget chrome so the entry list, editor,
   and analysis panel read as one integrated page surface.
   Internal column borders kept (1px hairlines) for orientation.
   ════════════════════════════════════════════════════════════ */
body[data-backdrop="ocean"] #section-journal .journal-app,
body[data-backdrop="ocean"] #section-journal .tj-journal-app {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body[data-backdrop="ocean"] #section-journal .journal-sidebar,
body[data-backdrop="ocean"] #section-journal .tj-sidebar,
body[data-backdrop="ocean"] #section-journal .editor-area,
body[data-backdrop="ocean"] #section-journal .tj-editor-area,
body[data-backdrop="ocean"] #section-journal .analysis-panel,
body[data-backdrop="ocean"] #section-journal .tj-analysis-panel {
  background: transparent !important;
}
/* Column dividers — keep a single 1px hairline between panes */
body[data-backdrop="ocean"] #section-journal .journal-sidebar,
body[data-backdrop="ocean"] #section-journal .tj-sidebar {
  border-right: 1px solid var(--line) !important;
}
body[data-backdrop="ocean"] #section-journal .analysis-panel,
body[data-backdrop="ocean"] #section-journal .tj-analysis-panel {
  border-left: 1px solid var(--line) !important;
}
/* Sidebar internal section borders — soften to hairlines */
body[data-backdrop="ocean"] #section-journal .sidebar-head,
body[data-backdrop="ocean"] #section-journal .tj-sidebar-head,
body[data-backdrop="ocean"] #section-journal .log-filters,
body[data-backdrop="ocean"] #section-journal .tj-filters {
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
}
/* Editor toolbar — same treatment */
body[data-backdrop="ocean"] #section-journal .editor-toolbar,
body[data-backdrop="ocean"] #section-journal .tj-editor-toolbar {
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
}
/* Tabs at the top of journal — already flattened above, but
   make sure the active state is just a left rail / underline,
   not a colored pill */
body[data-backdrop="ocean"] #section-journal .journal-tab,
body[data-backdrop="ocean"] #section-journal .tj-tab {
  border-radius: 0 !important;
}
body[data-backdrop="ocean"] .section:not(#section-overview) .schedule-layout,
body[data-backdrop="ocean"] .section:not(#section-overview) .client-schedule-layout {
  gap: 4px !important;
}
body[data-backdrop="ocean"] .section:not(#section-overview) #sessionsIndividualPanel,
body[data-backdrop="ocean"] .section:not(#section-overview) #tSessionsIndividualPanel,
body[data-backdrop="ocean"] .section:not(#section-overview) #sessionHubView,
body[data-backdrop="ocean"] .section:not(#section-overview) #sessionHubView > *:not(:first-child) {
  gap: 4px !important;
}
body[data-backdrop="ocean"] .section:not(#section-overview) .panel + .panel,
body[data-backdrop="ocean"] .section:not(#section-overview) .card + .card {
  margin-top: 0 !important;
}
body[data-backdrop="ocean"] .section:not(#section-overview) .day-notes-panel {
  margin-bottom: 0 !important;
}

/* Modern fonts on non-Overview hero (no Fraunces) */
body[data-backdrop="ocean"] .section:not(#section-overview) .section-hero h1,
body[data-backdrop="ocean"] .section:not(#section-overview) .hub-hero h1 {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-variation-settings: normal !important;
  font-size: clamp(26px, 3.2vw, 38px) !important;
  letter-spacing: -0.022em !important;
  line-height: 1.1 !important;
}
body[data-backdrop="ocean"] .section:not(#section-overview) .section-hero h1 em,
body[data-backdrop="ocean"] .section:not(#section-overview) .hub-hero h1 em {
  font-style: normal;
  font-weight: 600;
  color: var(--ocean-d);
}
body[data-backdrop="ocean"] .section:not(#section-overview) .section-hero p,
body[data-backdrop="ocean"] .section:not(#section-overview) .hub-hero p {
  font-family: var(--sans) !important;
  font-weight: 400 !important;
  font-variation-settings: normal !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  color: var(--ink-soft) !important;
}
body[data-backdrop="ocean"] .section:not(#section-overview) .section-hero .eyebrow,
body[data-backdrop="ocean"] .section:not(#section-overview) .hub-hero .eyebrow,
body[data-backdrop="ocean"] .section:not(#section-overview) .section-hero p.eyebrow,
body[data-backdrop="ocean"] .section:not(#section-overview) .hub-hero p.eyebrow {
  margin-bottom: 10px !important;
  font-size: 9.5px !important;
  letter-spacing: 0.28em !important;
}
/* Modern fonts on non-Overview panel headings too */
body[data-backdrop="ocean"] .section:not(#section-overview) .panel-header h3,
body[data-backdrop="ocean"] .section:not(#section-overview) .panel h3,
body[data-backdrop="ocean"] .section:not(#section-overview) .card h3,
body[data-backdrop="ocean"] .section:not(#section-overview) .drv-card-title,
body[data-backdrop="ocean"] .section:not(#section-overview) .drv-header-title {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-variation-settings: normal !important;
  letter-spacing: -0.012em !important;
}

/* Edge-to-sidebar: hub-main on non-overview gets an opaque bone
   backing so the photo doesn't bleed between sidebar and widgets.
   Cards keep their paper-white identity + chrome — the photo still
   shows below the last widget via the existing 56px ::after spacer. */
body[data-backdrop="ocean"] .hub-main:has(.section.active:not(#section-overview)) {
  background: var(--bg) !important;
}
/* Section-hero on non-overview: edge-to-edge (no inset), no border-radius */
body[data-backdrop="ocean"] .section:not(#section-overview) .section-hero {
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
}
/* Kill the ocean gradient rail above non-overview heroes — keeps it modern */
body[data-backdrop="ocean"] .section:not(#section-overview) .section-hero::before {
  display: none !important;
}

/* Sidebar touches topbar (top): remove any top padding on the
   first sidebar element. */
body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-profile {
  padding-top: 16px !important;
}

/* ════════════════════════════════════════════════════════════
   GLOBAL: square every corner on dashboard pages
   The website's editorial-luxe theme is hard-square. Some
   stragglers (whiteboard buttons, inline AI-Coach link, board
   rows) reach for --radius-sm. Zeroing the tokens under the
   ocean scope squares them all without touching individual
   selectors. Avatars / swatches / badges keep their own
   explicit border-radius rules below.
   ════════════════════════════════════════════════════════════ */
body[data-backdrop="ocean"] {
  --radius: 0px;
  --radius-sm: 0px;
  --radius-lg: 0px;
}

/* ════════════════════════════════════════════════════════════
   BOARDS — flat, edge-to-edge, theme-aligned
   No outer widget border, no rounded card frame. The boards
   list (label bar) and the canvas live directly on the page,
   matching the rest of the dashboard's flat editorial chrome.
   ════════════════════════════════════════════════════════════ */
/* The Boards header sits on the page gutter like every other module.
   .wb-topbar carried its own 22px inset on top of the section's, so the
   title landed 22px right of and 28px below "Sessions" / "My Assignments".
   Zeroing its own gutter makes it identical to .section-hero (0 0 18px +
   hairline); the toolbar beneath aligns to the same left edge. */
#section-boards .wb-topbar {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 18px !important;
}
#section-boards .wb-toolbar {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body[data-backdrop="ocean"] #section-boards.active {
  padding: 0 !important;
  gap: 0 !important;
  flex: 1 !important;
  min-height: 0 !important;
}
body[data-backdrop="ocean"] #boards-mount {
  height: 100% !important;
  min-height: 0 !important;
  flex: 1 !important;
}
body[data-backdrop="ocean"] .wb-host,
body[data-backdrop="ocean"] .wb-root {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--bg) !important;
  height: 100% !important;
  min-height: 0 !important;
}
body[data-backdrop="ocean"] .wb-sidebar {
  background: var(--paper) !important;
  border-right: 1px solid var(--line) !important;
}
body[data-backdrop="ocean"] .wb-sidebar-head {
  padding: 18px 18px 14px !important;
  border-bottom: 1px solid var(--line) !important;
}
body[data-backdrop="ocean"] .wb-sidebar-head h3 {
  font-family: var(--sans) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
}
body[data-backdrop="ocean"] .wb-board-row {
  border-radius: 0 !important;
  padding: 12px 14px !important;
  border-left: 2px solid transparent;
}
body[data-backdrop="ocean"] .wb-board-row:hover {
  background: var(--bone) !important;
}
body[data-backdrop="ocean"] .wb-board-row.wb-active {
  background: var(--bone) !important;
  border-left-color: var(--ocean-d) !important;
}
body[data-backdrop="ocean"] .wb-toolbar {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 12px 18px !important;
}
body[data-backdrop="ocean"] .wb-tool,
body[data-backdrop="ocean"] .wb-btn {
  border-radius: 0 !important;
  font-family: var(--sans) !important;
  color: var(--ink) !important;
}
body[data-backdrop="ocean"] .wb-tool:hover,
body[data-backdrop="ocean"] .wb-btn:hover {
  background: var(--bone) !important;
  border-color: var(--line) !important;
}
body[data-backdrop="ocean"] .wb-tool.wb-tool-active {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
}
body[data-backdrop="ocean"] .wb-btn-primary {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
}
body[data-backdrop="ocean"] .wb-btn-primary:hover {
  background: var(--ocean-d) !important;
  border-color: var(--ocean-d) !important;
}
body[data-backdrop="ocean"] .wb-btn-secondary {
  border: 1px solid var(--ink) !important;
  color: var(--ink) !important;
}
body[data-backdrop="ocean"] .wb-divider {
  background: var(--line) !important;
}
body[data-backdrop="ocean"] .wb-zoom {
  color: var(--muted) !important;
  font-feature-settings: "tnum";
}
/* Color swatches stay round — they're visual color pickers, not buttons */
body[data-backdrop="ocean"] .wb-swatch {
  border-radius: 50% !important;
}

/* ════════════════════════════════════════════════════════════
   OVERVIEW hero — keep the editorial Fraunces feel, but make
   the user's name match the surrounding "Welcome back," text
   (no italic, no extra weight variation — just a subtle ocean
   color accent so the name reads as a unified phrase).
   ════════════════════════════════════════════════════════════ */
body[data-backdrop="ocean"] #section-overview .lux-hero-top h1 em,
body[data-backdrop="ocean"] #section-overview #overviewName em,
body[data-backdrop="ocean"] #section-overview #welcomeHeading em {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
  font-variation-settings: inherit !important;
  letter-spacing: inherit !important;
  color: var(--ocean-d);
  /* Fraunces ss03 swaps the curly-descender J for a clean straight J */
  font-feature-settings: "ss03" on;
}

/* ── Full Entry Log: cross-entry multi-select + synthesis ───────── */
.el-select-cb { flex-shrink:0; width:16px; height:16px; margin-top:2px; cursor:pointer; accent-color:var(--ink) !important; }
.el-select-cb-grid { position:absolute; top:12px; right:12px; margin:0; z-index:2; }
.el-grid-card { position:relative; }
.el-list-item.el-selected, .el-grid-card.el-selected { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }

/* Host sits OUTSIDE the scrolling list (between the tabs and the entries),
   so the bar never overlaps scrolled rows. Collapses to nothing when empty. */
.el-selbar-host { flex-shrink:0; padding:12px 20px 0; }
.el-selbar-host:empty { display:none; }
/* Editorial selection bar — a quiet hairline strip, not a saturated band. */
.el-selbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px; background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:0; box-shadow:none; }
/* Clinical-notes bar stays inline in its card list (non-sticky). */
.cn-selbar { margin-bottom:14px; }
.el-selbar-count { font-size:12.5px; font-weight:500; letter-spacing:0.02em; display:flex; align-items:center; gap:7px; color:var(--ink); }
.el-selbar-count strong { font-weight:600; }
.el-selbar-actions { display:flex; gap:8px; }
.el-selbar .el-list-btn { color:var(--muted); border:1px solid var(--border); background:transparent; border-radius:0; }
.el-selbar .el-list-btn:hover { color:var(--ink); border-color:var(--ink); background:transparent; }
.el-selbar-go { background:var(--ink) !important; color:var(--bg) !important; border:1px solid var(--ink) !important; border-radius:0; font-weight:500; display:inline-flex; align-items:center; gap:6px; }
.el-selbar-go:hover { opacity:0.85; }
.el-selbar-go:disabled { opacity:.4; cursor:not-allowed; }

.el-synth-overlay { display:none; position:fixed; inset:0; z-index:9000; background:rgba(20,19,15,.45); align-items:center; justify-content:center; padding:24px; }
.el-synth-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); width:min(720px,100%); max-height:86vh; display:flex; flex-direction:column; box-shadow:0 24px 60px rgba(20,19,15,.28); overflow:hidden; }
.el-synth-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); background:var(--card); }
.el-synth-title { font-size:15px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px; letter-spacing:-0.01em; }
.el-synth-close { background:none; border:none; font-size:26px; line-height:1; color:var(--muted); cursor:pointer; padding:0 4px; }
.el-synth-close:hover { color:var(--ink); }
.el-synth-body { padding:20px 22px 24px; overflow-y:auto; }
.el-synth-loading { display:flex; align-items:center; gap:10px; justify-content:center; padding:40px 0; color:var(--muted); font-size:14px; }
.el-synth-headline { font-size:16px; font-weight:600; color:var(--ink); line-height:1.45; margin-bottom:4px; }
.el-synth-meta { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:600; margin-bottom:18px; }
.el-synth-section { padding:14px 0; border-top:1px solid var(--border); }
.el-synth-section:first-of-type { border-top:none; padding-top:0; }
.el-synth-sec-title { font-size:13px; font-weight:600; color:var(--accent); margin-bottom:6px; letter-spacing:-0.01em; }
.el-synth-sec-obs { font-size:14px; line-height:1.65; color:var(--ink); }
.el-synth-evidence { margin:8px 0 0; padding-left:18px; }
.el-synth-evidence li { font-size:12.5px; line-height:1.55; color:var(--muted); margin-bottom:4px; }
.el-synth-questions { margin-top:18px; padding:16px 18px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); }
.el-synth-q-title { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:600; margin-bottom:8px; }
.el-synth-questions ul { margin:0; padding-left:18px; }
.el-synth-questions li { font-size:14px; line-height:1.6; color:var(--ink); margin-bottom:7px; }

/* ── Clinical Notes: cross-note multi-select ───────────────────── */
.cn-select-cb { flex-shrink:0; width:16px; height:16px; cursor:pointer; accent-color:var(--ink) !important; border-radius:0; }
.drv-card.cn-selected { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink) inset; }
.cn-selbar { margin-bottom:14px; }

/* ── Journal analysis panel: minimize / drag-resize / fullscreen ── */
.jp-panel { position: relative; }
/* The collapse handle rides the panel's right edge at its vertical centre —
   where a drawer handle lives, not tucked in a corner. */
.jp-ctrls { position: absolute; top: 50%; transform: translateY(-50%); right: 5px; display: flex; flex-direction: column; gap: 4px; z-index: 7; }
.jp-ctrl { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; padding: 0; transition: background .12s, color .12s, border-color .12s; }
.jp-ctrl:hover { color: var(--ink); border-color: var(--ink); background: var(--surface, var(--bg)); }
.jp-resizer { position: absolute; left: 0; top: 0; bottom: 0; width: 9px; transform: translateX(-50%); cursor: col-resize; z-index: 6; touch-action: none; }
.jp-resizer::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: transparent; transition: background .12s; }
.jp-resizer:hover::after, .jp-resizer:active::after { background: var(--accent); }
/* Minimized: collapse to a thin restore strip. */
.jp-panel.jp-min > *:not(.jp-restore) { display: none !important; }
.jp-restore { display: none; }
.jp-panel.jp-min .jp-restore { display: flex; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: none; background: var(--card); color: var(--muted); cursor: pointer; font-family: var(--sans); font-size: 12px; transition: color .12s, background .12s; }
.jp-panel.jp-min .jp-restore:hover { color: var(--ink); background: var(--surface, var(--bg)); }
.jp-panel.jp-min .jp-restore span { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; font-weight: 600; }

/* ── AI model-choice + usage confirmation modal ───────────────── */
.ssac-overlay { display:none; position:fixed; inset:0; z-index:10050; background:rgba(20,19,15,.5); align-items:center; justify-content:center; padding:24px; }
.ssac-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); width:min(440px,100%); box-shadow:0 24px 60px rgba(20,19,15,.3); overflow:hidden; }
.ssac-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 12px; }
.ssac-title { font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
.ssac-x { background:none; border:none; font-size:24px; line-height:1; color:var(--muted); cursor:pointer; padding:0 4px; }
.ssac-x:hover { color:var(--ink); }
.ssac-sub { padding:0 18px 8px; font-size:12.5px; color:var(--muted); line-height:1.5; }
.ssac-models { display:flex; flex-direction:column; gap:8px; padding:6px 18px 4px; }
.ssac-model { text-align:left; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:11px 13px; cursor:pointer; transition:border-color .12s, box-shadow .12s; display:flex; flex-direction:column; gap:3px; }
.ssac-model:hover { border-color:var(--accent); }
.ssac-model.active { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.ssac-model-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ssac-model-name { font-size:13.5px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:7px; }
.ssac-rec { font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); padding:2px 6px; border-radius:999px; }
.ssac-model-cost { font-size:11.5px; font-weight:600; color:var(--muted); flex-shrink:0; }
.ssac-model-blurb { font-size:11.5px; color:var(--muted); line-height:1.45; }
.ssac-cost { margin:10px 18px 4px; padding:10px 12px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:12.5px; color:var(--ink); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ssac-cost i { color:var(--accent); }
.ssac-short { color:var(--red,#c0392b); font-weight:600; }
.ssac-actions { display:flex; justify-content:flex-end; gap:8px; padding:12px 18px 16px; }
.ssac-btn { font-family:var(--sans); font-size:13px; font-weight:500; padding:8px 16px; border-radius:var(--radius-sm); cursor:pointer; border:1px solid var(--border); background:var(--card); color:var(--ink); transition:all .12s; }
.ssac-cancel:hover { border-color:var(--ink); }
.ssac-go { background:var(--accent); color:#fff; border-color:var(--accent); display:inline-flex; align-items:center; gap:6px; }
.ssac-go:hover { opacity:.9; }
.ssac-go:disabled { opacity:.45; cursor:not-allowed; }

/* ── AI confirm: token note + usage preview bar ───────────────── */
.ssac-preview { margin:10px 18px 4px; }
.ssac-note { font-size:12.5px; color:var(--ink); display:flex; align-items:center; gap:6px; line-height:1.5; }
.ssac-note i { color:var(--accent); }
.ssac-note + .ssac-note { margin-top:4px; }
.ssac-muted { color:var(--muted); }
.ssac-bar { position:relative; height:10px; background:var(--border); border-radius:999px; overflow:hidden; margin:10px 0 0; }
.ssac-bar-fill { position:absolute; left:0; top:0; bottom:0; background:var(--accent); }
/* min-width keeps the projected slice visible even when one run is a tiny
   fraction of a large monthly cap (e.g. 4 actions out of 2,000). */
.ssac-bar-proj { position:absolute; top:0; bottom:0; min-width:6px; background:color-mix(in srgb, var(--accent) 36%, transparent); border-left:1px solid var(--bg); }
.ssac-bar-proj.over { background:color-mix(in srgb, var(--red,#c0392b) 45%, transparent); }
.ssac-bar-label { display:flex; justify-content:space-between; gap:10px; font-size:11px; color:var(--muted); margin-top:6px; }
.ssac-proj-key { color:var(--accent); font-weight:600; }
.ssac-short { color:var(--red,#c0392b); font-weight:600; }

/* ── Live monthly AI-usage bar (analysis surfaces) ────────────── */
[data-as-usage-bar] { display:none; }
.ssub-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px; }
.ssub-label { font-size:11px; color:var(--muted); font-weight:500; display:flex; align-items:center; gap:5px; }
.ssub-count { font-size:11px; color:var(--ink); font-weight:600; }
.ssub-track { height:7px; background:var(--border); border-radius:999px; overflow:hidden; }
.ssub-fill { height:100%; border-radius:999px; transition:width .4s ease; }
/* Client AI-usage: "Get more" top-up affordance under the bar. */
.cai-actions { position:relative; margin-top:7px; }
.cai-getmore { font-family:var(--sans); font-size:11px; font-weight:600; color:var(--accent); background:none; border:none; padding:0; cursor:pointer; letter-spacing:0.01em; }
.cai-getmore:hover { text-decoration:underline; }
.cai-menu { position:absolute; z-index:20; top:calc(100% + 6px); left:0; min-width:180px; background:var(--paper,var(--surface)); border:1px solid var(--border); border-radius:8px; box-shadow:0 12px 30px -12px rgba(31,61,82,0.28); padding:5px; }
.cai-menu[hidden] { display:none; }
.cai-menu button { width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; font-family:var(--sans); font-size:12.5px; color:var(--ink); background:none; border:none; padding:9px 11px; border-radius:6px; cursor:pointer; text-align:left; }
.cai-menu button:hover { background:var(--surface,rgba(0,0,0,0.04)); }
.cai-price { color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums; }

/* ── Full Entry Log — Subject/Tag filter dropdowns (both dashboards) ── */
.el-filter { position:relative; display:inline-block; }
.el-filter-btn { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-family:var(--sans); padding:7px 10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--ink); cursor:pointer; transition:background .15s, border-color .15s; }
.el-filter-btn:hover { background:var(--card); }
.el-filter-btn.active { border-color:var(--accent); color:var(--accent); }
.el-filter-caret { font-size:10px; opacity:.55; }
.el-filter-badge { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 5px; font-size:10px; font-weight:600; background:var(--accent); color:#fff; border-radius:999px; }
.el-filter-badge[hidden], .el-filter-clear[hidden] { display:none; }
.el-filter-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:50; min-width:210px; max-height:300px; overflow-y:auto; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:0 8px 28px var(--shadow); padding:6px; display:none; }
.el-filter-menu.open { display:block; }
.el-filter-opt { display:flex; align-items:center; gap:8px; width:100%; padding:7px 9px; border-radius:7px; font-size:12.5px; color:var(--ink); background:none; border:none; cursor:pointer; text-align:left; font-family:var(--sans); }
.el-filter-opt:hover { background:var(--surface); }
.el-filter-opt input { accent-color:var(--accent); margin:0; pointer-events:none; }
.el-filter-opt-label { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.el-filter-opt-count { font-size:11px; color:var(--muted); }
.el-filter-empty { padding:12px 10px; font-size:12px; color:var(--muted); text-align:center; }
.el-filter-clear { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-family:var(--sans); padding:7px 9px; background:none; border:none; color:var(--muted); cursor:pointer; border-radius:var(--radius-sm); }
.el-filter-clear:hover { color:var(--accent); background:var(--surface); }

/* ════════════════════════════════════════════════════════════
   GLOBAL DE-SAAS LAYER  (appended last so it wins the cascade)
   ────────────────────────────────────────────────────────────
   A full-app audit found the same SaaS tells on nearly every
   page: drop-shadows on cards/panels/tiles, hover-lift effects,
   and heavy modal slabs. This layer flattens them everywhere so
   each surface reads as a calm editorial space, not a widget.
   !important is deliberate — it overrides the per-page inline
   <style> blocks without editing 25 files. Structure/lines are
   preserved (1px hairline borders stay); only the depth/lift go. */

/* 1 · No drop-shadows on cards, panels, tiles, list rows. */
.card, .panel, .stat-card, .stat-tile, .auth-card, .settings-card,
.ve-card, .p-card, .lobby-card, .ov-card, .coach-layout, .user-card,
.therapist-card, .clinician-card, .session-card, .prx-card, .rx-card,
.rx-med-card, .jentry-card, .general-section, .topic-section, .hub-panel,
.cp-panel, .intro-card, .results-panel, .profile-hero,
.lux-card, .lux-panel {
  box-shadow: none !important;
}

/* 2 · No hover lift / hover-shadow (the gamified SaaS reflex).
   Calm: hover shifts colour, never position or depth. */
.card:hover, .panel:hover, .stat-card:hover, .user-card:hover,
.therapist-card:hover, .clinician-card:hover, .session-card:hover,
.prx-card:hover, .rx-card:hover, .rx-med-card:hover, .jentry-card:hover,
.p-card:hover, .lobby-card:hover, .cp-panel:hover {
  box-shadow: none !important;
  transform: none !important;
}

/* 3 · Modals / slide-overs keep only a whisper of depth, not a slab. */
.modal-box, .rx-modal, #txDetailCard, .detail-panel, .reject-modal,
.ssl-box, .modal-card, .modal-panel {
  box-shadow: 0 12px 40px rgba(0,0,0,0.18) !important;
}

/* ════════════════════════════════════════════════════════════
   ASTRASERA DESIGN SYSTEM REFACTOR
   Visual-only skin layer: editorial spacing, quiet typography,
   restrained nature treatments, and notebook-like writing areas.
   This lives last so it overrides older dashboard/card styling
   without touching markup, handlers, IDs, routes, or data logic.
   ════════════════════════════════════════════════════════════ */

body[data-backdrop="ocean"] {
  background: var(--bg) !important;
  color: var(--ink);
}

body[data-backdrop="ocean"] .bg-photo,
body[data-backdrop="ocean"] .bg-photo-wash {
  display: none !important;
}

body[data-backdrop="ocean"] header.topbar {
  background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
  border-bottom: 0 !important;
  padding: 28px 36px 18px !important;
  color: var(--ink) !important;
}

body[data-backdrop="ocean"] .brand-logo,
body[data-backdrop="ocean"] .topbar .brand-logo {
  filter: none !important;
  opacity: 0.78;
}

body[data-backdrop="ocean"] .brand-name {
  font-family: var(--serif) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
}

body[data-backdrop="ocean"] .topbar .btn,
body[data-backdrop="ocean"] .topbar .user-bubble {
  min-height: 44px !important;
  height: 44px !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body[data-backdrop="ocean"] .topbar .btn:hover,
body[data-backdrop="ocean"] .topbar .user-bubble:hover {
  background: var(--surface) !important;
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}

body[data-backdrop="ocean"] aside.hub-sidebar {
  width: 230px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ivory) 96%, transparent), color-mix(in srgb, var(--bg) 82%, transparent)) !important;
  border-right: 1px solid var(--border-light) !important;
  padding-top: 20px !important;
}

body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-profile {
  border-bottom: 0 !important;
  padding: 26px 24px 22px !important;
}

body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-items-wrap {
  padding: 8px 20px 18px !important;
  gap: 6px !important;
}

body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-section-label {
  padding: 24px 0 8px !important;
  letter-spacing: 0.32em !important;
  color: var(--whisper) !important;
}

body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-item {
  padding: 10px 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--ink-soft) !important;
}

body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-item:hover {
  background: transparent !important;
  color: var(--ink) !important;
}

body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-item.active {
  background: transparent !important;
  color: var(--ink) !important;
}

body[data-backdrop="ocean"] aside.hub-sidebar .sidebar-item.active::before {
  left: -12px !important;
  top: 12px !important;
  bottom: 12px !important;
  width: 2px !important;
  background: var(--accent) !important;
  display: block !important;
}

body[data-backdrop="ocean"] .hub-main {
  background: var(--bg) !important;
}

body[data-backdrop="ocean"] #section-overview .lux-overview-shell {
  /* Match the shared page gutter — the overview should start at the same
     left edge as every other module, not float 92px off the sidebar. */
  padding: 0 var(--as-page-pad-x, clamp(24px, 2.6vw, 46px)) 80px !important;
}

body[data-backdrop="ocean"] #section-overview .lux-overview-shell > .section-hero {
  position: relative;
  min-height: 360px;
  padding: 86px 0 0 !important;
  margin: 0 calc(-1 * var(--as-page-pad-x, clamp(24px, 2.6vw, 46px))) !important;
  overflow: hidden;
}

body[data-backdrop="ocean"] #section-overview .lux-overview-shell > .section-hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: min(80vw, 1200px);
  height: 430px;
  background:
    linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 30%, color-mix(in srgb, var(--bg) 4%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 10%, transparent), var(--bg) 96%),
    url('Website%20Photos/personal/coast.jpg') right 72% / cover no-repeat;
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
}

body[data-backdrop="ocean"] #section-overview .lux-hero-top,
body[data-backdrop="ocean"] #section-overview .lux-stat-row {
  position: relative;
  z-index: 1;
  width: calc(100% - (2 * var(--as-page-pad-x, clamp(24px, 2.6vw, 46px))));
  margin-left: var(--as-page-pad-x, clamp(24px, 2.6vw, 46px)) !important;
  margin-right: var(--as-page-pad-x, clamp(24px, 2.6vw, 46px)) !important;
}

body[data-backdrop="ocean"] #section-overview .lux-hero-top {
  margin-bottom: 58px !important;
}

body[data-backdrop="ocean"] #section-overview h1,
body[data-backdrop="ocean"] #section-overview #overviewName,
body[data-backdrop="ocean"] #section-overview #welcomeHeading {
  font-family: var(--serif) !important;
  font-size: clamp(56px, 5.8vw, 92px) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.045em !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
}

body[data-backdrop="ocean"] #section-overview .lux-hero-lede {
  font-size: 20px !important;
  max-width: 520px !important;
  color: var(--ink-soft) !important;
}

body[data-backdrop="ocean"] #section-overview .lux-hero-cta .btn {
  border-radius: 999px !important;
  min-width: 118px;
}

body[data-backdrop="ocean"] #section-overview .lux-stat-row {
  border-top: 0 !important;
  gap: 0 !important;
  padding-top: 0 !important;
}

body[data-backdrop="ocean"] #section-overview .lux-stat {
  padding: 0 38px 0 0 !important;
  border-right: 1px solid var(--border) !important;
}

body[data-backdrop="ocean"] #section-overview .lux-stat:last-child {
  border-right: 0 !important;
  padding-right: 0 !important;
}

body[data-backdrop="ocean"] #section-overview .lux-stat .h {
  margin-bottom: 18px !important;
  color: var(--ink-soft) !important;
}

body[data-backdrop="ocean"] #section-overview .lux-stat .v {
  font-size: 27px !important;
}

body[data-backdrop="ocean"] #section-overview .lux-body {
  margin-top: 56px !important;
  gap: clamp(48px, 6vw, 96px) !important;
}

body[data-backdrop="ocean"] .lux-card-h {
  border-bottom: 1px solid var(--border) !important;
}

body[data-backdrop="ocean"] .lux-card-h h3 {
  font-size: 23px !important;
}

body[data-backdrop="ocean"] .lux-sanctuary {
  background: transparent !important;
  border: 0 !important;
}

body[data-backdrop="ocean"] .lux-sanctuary .photo {
  aspect-ratio: 16 / 7 !important;
  min-height: 180px;
}

body[data-backdrop="ocean"] #section-journal.active {
  padding: 0 clamp(28px, 4vw, 64px) 54px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 74%, transparent), var(--bg) 36%) !important;
}

body[data-backdrop="ocean"] .journal-tab-bar,
body[data-backdrop="ocean"] .tj-tab-bar {
  padding: 0 0 24px !important;
  gap: 26px !important;
}

body[data-backdrop="ocean"] .journal-tab,
body[data-backdrop="ocean"] .tj-tab {
  padding: 0 0 7px !important;
  border-bottom: 1px solid transparent !important;
  color: var(--muted) !important;
  background: transparent !important;
}

body[data-backdrop="ocean"] .journal-tab.active,
body[data-backdrop="ocean"] .tj-tab.active {
  color: var(--ink) !important;
  border-bottom-color: var(--ink) !important;
}

body[data-backdrop="ocean"] #section-journal .journal-app,
body[data-backdrop="ocean"] #section-journal .tj-journal-app {
  background: color-mix(in srgb, var(--bg) 82%, var(--surface)) !important;
  border-top: 1px solid var(--border-light) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

body[data-backdrop="ocean"] #section-journal .editor-area,
body[data-backdrop="ocean"] #section-journal .tj-editor-area {
  background:
    linear-gradient(90deg, transparent 0, transparent 58px, color-mix(in srgb, var(--border) 46%, transparent) 59px, transparent 60px),
    color-mix(in srgb, var(--bg) 88%, var(--surface)) !important;
}

body[data-backdrop="ocean"] #section-journal .editor-scroll,
body[data-backdrop="ocean"] #section-journal .tj-editor-scroll {
  padding: clamp(34px, 5vw, 74px) clamp(42px, 6vw, 96px) !important;
}

body[data-backdrop="ocean"] #journalEditor,
body[data-backdrop="ocean"] .tj-editor,
body[data-backdrop="ocean"] .tj-editor-textarea {
  font-family: var(--serif) !important;
  font-size: clamp(19px, 1.55vw, 25px) !important;
  line-height: 1.9 !important;
  color: var(--ink) !important;
}

body[data-backdrop="ocean"] #journalEditor::placeholder,
body[data-backdrop="ocean"] .tj-editor::placeholder,
body[data-backdrop="ocean"] .tj-editor-textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 62%, transparent) !important;
  font-style: italic;
}

html[data-theme="dark"] body,
html[data-theme="dark"] body[data-backdrop="ocean"],
body[data-backdrop="night"] {
  background: #0E0E0F !important;
}

/* Dark theme: cool dark slate-stone backdrop (matches the mockup) — the
   photographic texture replaces the procedural grain. Scoped to plain dark so
   the Coast (ocean) and Observatory (night) nature backdrops keep their own. */
html[data-theme="dark"] body:not([data-backdrop="ocean"]):not([data-backdrop="night"]) {
  /* Texture is anchored to the TOP-RIGHT and fades to clean dark toward the
     bottom-left, so the content area stays calm (matches the mockup). */
  background:
    linear-gradient(to bottom left, transparent 0%, rgba(14,14,15,0.45) 30%, #0E0E0F 60%),
    url('Website%20Photos/personal/dark-slate.jpg') top right / cover no-repeat fixed,
    #0E0E0F !important;
}
html[data-theme="dark"] body:not([data-backdrop="ocean"]):not([data-backdrop="night"])::after {
  display: none !important;
}

/* Keep a faint grain only for the Observatory (night) backdrop. */
body[data-backdrop="night"]::after {
  opacity: 0.10 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='400'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.004 0.42' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.62 0 0 0 0 0.66 0 0 0 0.2 0'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>") !important;
}

body[data-backdrop="night"] .bg-night {
  background:
    radial-gradient(1.3px 1.3px at 18% 21%, rgba(255,255,255,0.76), transparent),
    radial-gradient(1px 1px at 36% 64%, rgba(255,255,255,0.46), transparent),
    radial-gradient(1.5px 1.5px at 78% 31%, rgba(255,255,255,0.58), transparent),
    radial-gradient(circle at 82% 18%, rgba(110,125,145,0.18), transparent 34%),
    linear-gradient(180deg, #0E0E0F, #111111) !important;
}

html[data-theme="dark"] body[data-backdrop="ocean"] header.topbar,
body[data-backdrop="night"] header.topbar {
  /* Opaque over the sidebar column (left), fading to transparent so the
     top-right texture still reads — keeps the sidebar divider from showing
     through the topbar (matches the light theme). */
  background: linear-gradient(to right, #0E0E0F 0, #0E0E0F 252px, transparent 332px) !important;
  color: var(--ink) !important;
  border-bottom: 0 !important;
}

html[data-theme="dark"] body[data-backdrop="ocean"] .brand-logo,
body[data-backdrop="night"] .brand-logo {
  filter: invert(1) !important;
}

html[data-theme="dark"] body[data-backdrop="ocean"] .brand-name,
body[data-backdrop="night"] .brand-name {
  color: var(--ink) !important;
}

html[data-theme="dark"] body[data-backdrop="ocean"] aside.hub-sidebar,
body[data-backdrop="night"] aside.hub-sidebar {
  background: color-mix(in srgb, #111111 92%, transparent) !important;
  border-right-color: rgba(255,255,255,0.08) !important;
}

html[data-theme="dark"] body[data-backdrop="ocean"] .hub-main,
body[data-backdrop="night"] .hub-main {
  background:
    linear-gradient(90deg, rgba(14,14,15,0.98), rgba(14,14,15,0.88)),
    transparent !important;
}

html[data-theme="dark"] body[data-backdrop="ocean"] #section-overview .lux-overview-shell > .section-hero::after,
body[data-backdrop="night"] #section-overview .lux-overview-shell > .section-hero::after {
  background:
    linear-gradient(90deg, #0E0E0F 0%, rgba(14,14,15,0.68) 38%, transparent 86%),
    radial-gradient(circle at 70% 28%, rgba(242,238,232,0.08), transparent 34%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='320'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.01 0.48' numOctaves='4' seed='12' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.52 0 0 0 0 0.47 0 0 0 0.23 0'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>") center / cover no-repeat !important;
  opacity: 1 !important;
}

html[data-theme="dark"] body[data-backdrop="ocean"] #section-overview .lux-stat,
body[data-backdrop="night"] #section-overview .lux-stat {
  border-right-color: rgba(255,255,255,0.09) !important;
}

@media (max-width: 900px) {
  body[data-backdrop="ocean"] aside.hub-sidebar {
    width: 230px;
  }

  body[data-backdrop="ocean"] #section-overview .lux-overview-shell {
    padding-left: 26px !important;
    padding-right: 26px !important;
  }

  body[data-backdrop="ocean"] #section-overview .lux-overview-shell > .section-hero {
    margin-left: -26px !important;
    margin-right: -26px !important;
  }

  body[data-backdrop="ocean"] #section-overview .lux-hero-top,
  body[data-backdrop="ocean"] #section-overview .lux-stat-row {
    width: calc(100% - 52px);
    margin-left: 26px !important;
    margin-right: 26px !important;
  }

  body[data-backdrop="ocean"] #section-overview .lux-stat {
    border-right: 0 !important;
    padding: 0 0 28px !important;
  }
}

/* Default dashboard state: user.js removes data-backdrop unless a Nature
   preference is active, so the Astrasera skin also targets the app shell. */
body:has(.hub-shell) {
  background: var(--bg) !important;
  color: var(--ink);
}

body:has(.hub-shell) header.topbar {
  background: var(--bg) !important;
  border-bottom: 0 !important;
  padding: 28px 36px 18px !important;
}

body:has(.hub-shell) .brand-logo,
body:has(.hub-shell) .topbar .brand-logo {
  filter: none !important;
  opacity: 0.78;
}

body:has(.hub-shell) .brand-name {
  font-family: var(--serif) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
}

body:has(.hub-shell) .topbar .btn {
  min-height: 44px !important;
  height: 44px !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body:has(.hub-shell) .topbar .nav-actions { gap: 16px !important; }

/* Profile chip — no box. Just avatar + name + caret. Subtle wash on hover. */
body:has(.hub-shell) .topbar .user-bubble {
  min-height: 44px !important;
  height: 44px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 4px 10px 4px 4px !important;
}
body:has(.hub-shell) .topbar .user-bubble:hover {
  background: color-mix(in srgb, var(--ink) 5%, transparent) !important;
  border: 0 !important;
}

body:has(.hub-shell) aside.hub-sidebar {
  width: 230px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ivory) 96%, transparent), color-mix(in srgb, var(--bg) 82%, transparent)) !important;
  border-right: 1px solid var(--border-light) !important;
  padding-top: 20px !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-profile {
  border-bottom: 0 !important;
  padding: 26px 24px 22px !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-items-wrap {
  padding: 8px 20px 18px !important;
  gap: 6px !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-section-label {
  padding: 24px 0 8px !important;
  letter-spacing: 0.32em !important;
  color: var(--whisper) !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-item {
  padding: 10px 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--ink-soft) !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-item.active {
  background: transparent !important;
  color: var(--ink) !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-item.active::before {
  left: -12px !important;
  top: 12px !important;
  bottom: 12px !important;
  width: 2px !important;
  background: var(--accent) !important;
  display: block !important;
}

body:has(.hub-shell) .hub-main {
  background: var(--bg) !important;
}

body:has(.hub-shell) #section-overview .lux-overview-shell {
  /* Shared page gutter — this later duplicate was overriding the aligned
     ocean-backdrop rule and reintroducing the 92px inset. */
  padding: 0 var(--as-page-pad-x, clamp(24px, 2.6vw, 46px)) 80px !important;
}

body:has(.hub-shell) #section-overview .lux-overview-shell > .section-hero {
  position: relative;
  /* Was 300px to hold the four stat tiles. With the tiles gone this is a
     photo band carrying only the greeting — sized to that, not to a ghost. */
  min-height: 168px;
  padding: 46px 0 0 !important;
  margin: 0 calc(-1 * var(--as-page-pad-x, clamp(24px, 2.6vw, 46px))) !important;
  overflow: hidden;
}

body:has(.hub-shell) #section-overview .lux-overview-shell > .section-hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: min(80vw, 1200px);
  height: 430px;
  background:
    linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 30%, color-mix(in srgb, var(--bg) 4%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 10%, transparent), var(--bg) 96%),
    url('Website%20Photos/personal/coast.jpg') right 72% / cover no-repeat;
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
}

body:has(.hub-shell) #section-overview .lux-hero-top,
body:has(.hub-shell) #section-overview .lux-stat-row {
  position: relative;
  z-index: 1;
  width: calc(100% - (2 * var(--as-page-pad-x, clamp(24px, 2.6vw, 46px))));
  margin-left: var(--as-page-pad-x, clamp(24px, 2.6vw, 46px)) !important;
  margin-right: var(--as-page-pad-x, clamp(24px, 2.6vw, 46px)) !important;
}

body:has(.hub-shell) #section-overview h1,
body:has(.hub-shell) #section-overview #overviewName,
body:has(.hub-shell) #section-overview #welcomeHeading {
  font-family: var(--serif) !important;
  font-size: clamp(34px, 3.4vw, 50px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.025em !important;
  font-weight: 400 !important;
}

body:has(.hub-shell) #section-overview .lux-stat {
  padding: 0 38px 30px 0 !important;
  border-right: 1px solid var(--border) !important;
}

body:has(.hub-shell) #section-overview .lux-stat:last-child {
  border-right: 0 !important;
}

body:has(.hub-shell) #section-journal.active {
  /* Top 0 — "Your Journal" sits at the same content top as every other
     module header (the 34px inset dropped it below the template line). */
  padding: 0 var(--as-page-pad-x) 54px !important;
}

body:has(.hub-shell) #section-journal .editor-area,
body:has(.hub-shell) #section-journal .tj-editor-area {
  background:
    linear-gradient(90deg, transparent 0, transparent 58px, color-mix(in srgb, var(--border) 46%, transparent) 59px, transparent 60px),
    color-mix(in srgb, var(--bg) 88%, var(--surface)) !important;
}

body:has(.hub-shell) #journalEditor,
body:has(.hub-shell) .tj-editor,
body:has(.hub-shell) .tj-editor-textarea {
  font-family: var(--serif) !important;
  font-size: 17.5px !important;
  line-height: 1.8 !important;
}

html[data-theme="dark"] body:has(.hub-shell) {
  background: #0E0E0F !important;
}

html[data-theme="dark"] body:has(.hub-shell) header.topbar {
  /* The sidebar runs full-height behind the (overlapping) topbar; a fully
     transparent topbar let the sidebar's border + panel show through up top,
     so the divider appeared to run into the topbar (it doesn't in light, whose
     topbar is opaque). Paint the topbar opaque OVER the sidebar column on the
     left, then fade to transparent so the top-right texture still reads. */
  background: linear-gradient(to right, #0E0E0F 0, #0E0E0F 252px, transparent 332px) !important;
}

html[data-theme="dark"] body:has(.hub-shell) .brand-logo {
  filter: invert(1) !important;
}

html[data-theme="dark"] body:has(.hub-shell) aside.hub-sidebar {
  background: color-mix(in srgb, #111111 92%, transparent) !important;
  border-right-color: rgba(255,255,255,0.08) !important;
}

html[data-theme="dark"] body:has(.hub-shell) .hub-main {
  /* Transparent — the body's own top-right texture + dark fade show through, so
     the content area stays clean and the texture only reads in the top-right. */
  background: transparent !important;
}

html[data-theme="dark"] body:has(.hub-shell) #section-overview .lux-overview-shell > .section-hero::after {
  /* Subtle cool darkening on the left for the welcome copy; the slate texture
     (on the body) shows through the rest. */
  background:
    linear-gradient(90deg, rgba(12,12,14,0.62) 0%, rgba(12,12,14,0.28) 42%, transparent 80%) !important;
  opacity: 1 !important;
}

/* ════════════════════════════════════════════════════════════
   ASTRASERA COMPLETE APP SKIN
   Broad shared selectors for every dashboard section. This keeps
   product placement and behavior intact while making schedule,
   sessions, settings, billing, connect, notes, assignments, and
   generated rows share the same modern editorial composition.
   ════════════════════════════════════════════════════════════ */

body:has(.hub-shell) {
  --as-page-pad-x: clamp(24px, 2.6vw, 46px);
  --as-section-gap: clamp(30px, 4vw, 56px);
}

body:has(.hub-shell) .section.active:not(#section-overview):not(#section-journal):not(.drv-active) {
  gap: var(--as-section-gap) !important;
  /* Top padding 0 so the page header sits at the same ~90px content top as the
     drv-shell pages (clients/sessions/notes), which get padding:0 by ID rule.
     Keeps every page's title at a consistent height below the topbar. */
  padding: 0 var(--as-page-pad-x) 74px !important;
}

body:has(.hub-shell) .section.active.drv-active {
  padding: clamp(28px, 3vw, 44px) var(--as-page-pad-x) 64px !important;
}

body:has(.hub-shell) .section:not(#section-overview) > .section-hero,
body:has(.hub-shell) .section:not(#section-overview) > .hub-hero,
body:has(.hub-shell) .section:not(#section-overview) .studio-shell > .section-hero {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 28px !important;
  padding: 0 0 18px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body:has(.hub-shell) .section:not(#section-overview) > .section-hero::before,
body:has(.hub-shell) .section:not(#section-overview) > .hub-hero::before,
body:has(.hub-shell) .section:not(#section-overview) .studio-shell > .section-hero::before {
  display: none !important;
}

body:has(.hub-shell) .section:not(#section-overview) > .section-hero h1,
body:has(.hub-shell) .section:not(#section-overview) > .hub-hero h1,
body:has(.hub-shell) .section:not(#section-overview) .studio-shell > .section-hero h1 {
  font-family: var(--serif) !important;
  font-size: clamp(24px, 2.1vw, 30px) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.028em !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

body:has(.hub-shell) .section:not(#section-overview) > .section-hero p,
body:has(.hub-shell) .section:not(#section-overview) > .hub-hero p,
body:has(.hub-shell) .section:not(#section-overview) .studio-shell > .section-hero p,
body:has(.hub-shell) .section:not(#section-overview) .sub {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
  /* A page subtitle reads as a sentence, not a spaced micro-cap label
     (.sub is swept into the eyebrow group elsewhere). */
  text-transform: none !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
}

body:has(.hub-shell) .card,
body:has(.hub-shell) .panel,
body:has(.hub-shell) .stat-card,
body:has(.hub-shell) .fr-body,
body:has(.hub-shell) .dir-lookup-card,
body:has(.hub-shell) .client-day-notes-panel,
body:has(.hub-shell) .day-notes-panel,
body:has(.hub-shell) .rx-coming-soon,
body:has(.hub-shell) .pending-panel {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:has(.hub-shell) .card,
body:has(.hub-shell) .panel {
  padding: 0 !important;
}

body:has(.hub-shell) .card + .card,
body:has(.hub-shell) .panel + .panel,
body:has(.hub-shell) .bill-panel .card + .card {
  padding-top: 28px !important;
  border-top: 1px solid var(--border) !important;
}

body:has(.hub-shell) .card-header,
body:has(.hub-shell) .panel-header,
body:has(.hub-shell) .drv-header,
body:has(.hub-shell) .drv-toolbar,
body:has(.hub-shell) .lux-card-h,
body:has(.hub-shell) .fr-tabs,
body:has(.hub-shell) .billing-tabs,
body:has(.hub-shell) .dir-conn-tabs,
body:has(.hub-shell) .svt-tabs {
  background: transparent !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

body:has(.hub-shell) .card-header,
body:has(.hub-shell) .panel-header {
  padding: 0 0 18px !important;
  margin: 0 0 18px !important;
  border-bottom: 1px solid var(--border) !important;
}

body:has(.hub-shell) .card-header h3,
body:has(.hub-shell) .panel-header h3,
body:has(.hub-shell) .ssn-group-header,
body:has(.hub-shell) .fr-req-col-head,
body:has(.hub-shell) .dir-lookup-title {
  font-family: var(--serif) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  /* The base .card-header/.panel-header h3 rule uppercases; at serif 22px that
     read as shouted caps (SHARED WITH YOU / EMOTION ARC). Title case instead. */
  text-transform: none !important;
}
/* Serif section headers read as title case, not shouted caps —
   the base .ssn-group-header rule sets uppercase; undo it here. */
body:has(.hub-shell) .ssn-group-header { text-transform: none !important; }

body:has(.hub-shell) .stat-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}

body:has(.hub-shell) .stat-card {
  padding: 28px 28px 24px !important;
  border-right: 1px solid var(--border) !important;
}

body:has(.hub-shell) .stat-card:last-child {
  border-right: 0 !important;
}

body:has(.hub-shell) .stat-card .mini,
body:has(.hub-shell) .stat-card .stat-label,
body:has(.hub-shell) .stat-card .stat-label,
body:has(.hub-shell) .stat-card .stat-label {
  color: var(--muted) !important;
}

body:has(.hub-shell) .stat-card .mini {
  font-size: 10px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

body:has(.hub-shell) .stat-card .stat-num {
  font-family: var(--serif) !important;
  font-size: clamp(36px, 3.4vw, 56px) !important;
  line-height: 1 !important;
  font-weight: 300 !important;
  letter-spacing: -0.035em !important;
  color: var(--ink) !important;
}

body:has(.hub-shell) .btn,
body:has(.hub-shell) button.primary,
body:has(.hub-shell) button.secondary,
body:has(.hub-shell) button.ghost,
body:has(.hub-shell) a.primary,
body:has(.hub-shell) a.ghost {
  border-radius: 0 !important;
  min-height: 40px;
  padding: 11px 19px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

body:has(.hub-shell) .btn.primary,
body:has(.hub-shell) button.primary,
body:has(.hub-shell) a.primary {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
}

body:has(.hub-shell) .btn.ghost,
body:has(.hub-shell) button.ghost,
body:has(.hub-shell) a.ghost {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}

body:has(.hub-shell) .btn:hover,
body:has(.hub-shell) button:hover {
  transform: none !important;
}

body:has(.hub-shell) input[type="text"],
body:has(.hub-shell) input[type="email"],
body:has(.hub-shell) input[type="password"],
body:has(.hub-shell) input[type="date"],
body:has(.hub-shell) input[type="number"],
body:has(.hub-shell) input[type="search"],
body:has(.hub-shell) textarea,
body:has(.hub-shell) select {
  background: color-mix(in srgb, var(--bg) 82%, var(--surface)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:has(.hub-shell) input:focus,
body:has(.hub-shell) textarea:focus,
body:has(.hub-shell) select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent) inset !important;
}

/* Eyebrow micro-caps — intentional. Form <label>s are deliberately excluded so
   they read as clean, modern, normal-case labels (not widgety spaced caps). */
body:has(.hub-shell) .mini,
body:has(.hub-shell) .drv-header-eyebrow,
body:has(.hub-shell) .entry-item-date {
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
}
/* Overview stat labels stay quieter than the eyebrow micro-caps — the
   0.26em tracking read as widgety on the four-tile strip. */
body:has(.hub-shell) .lux-stat .h { letter-spacing: 0.14em !important; text-transform: uppercase !important; }

body:has(.hub-shell) .chip,
body:has(.hub-shell) .sidebar-badge,
body:has(.hub-shell) .fr-tab-count,
body:has(.hub-shell) .el-filter-badge {
  border-radius: 999px !important;
}

/* Chips: no outlined box. Color-coded variants keep a soft borderless tint;
   neutral status chips (Disconnected, Pending, etc.) become clean muted text. */
body:has(.hub-shell) .chip { border-color: transparent !important; }
/* Solid ink chip — a completed state, not a neutral one. Needs its own
   variant because the neutral rule below forces transparency with
   !important, which outranks an inline background. */
body:has(.hub-shell) .chip.ink,
.chip.ink { background: var(--ink) !important; color: var(--bg) !important; border-color: var(--ink) !important; }
body:has(.hub-shell) .chip:not(.green):not(.amber):not(.blue):not(.red):not(.purple):not(.ink) {
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body:has(.hub-shell) .svt-tabs,
body:has(.hub-shell) .fr-tabs,
body:has(.hub-shell) .billing-tabs,
body:has(.hub-shell) .dir-conn-tabs,
body:has(.hub-shell) .journal-tab-bar,
body:has(.hub-shell) .tj-tab-bar {
  display: flex !important;
  gap: 26px !important;
  padding: 0 0 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
}

body:has(.hub-shell) .svt-tab,
body:has(.hub-shell) .fr-tab,
body:has(.hub-shell) .billing-tab,
body:has(.hub-shell) .dir-conn-tab,
body:has(.hub-shell) .journal-tab,
body:has(.hub-shell) .tj-tab {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  padding: 0 0 8px !important;
  color: var(--muted) !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
}

body:has(.hub-shell) .svt-tab.active,
body:has(.hub-shell) .fr-tab.active,
body:has(.hub-shell) .billing-tab.active,
body:has(.hub-shell) .dir-conn-tab.active,
body:has(.hub-shell) .journal-tab.active,
body:has(.hub-shell) .tj-tab.active {
  color: var(--ink) !important;
  border-bottom-color: var(--ink) !important;
}

/* Sessions header: the Individual/Group switch lives inline in the header
   actions next to "New Session Lobby", so it must NOT take the full-width
   tab-bar treatment (heavy underline + 18px padding) — that made it a stray
   floating line. Render it compact and give the button real breathing room. */
body:has(.hub-shell) .drv-header .svt-tabs {
  padding: 0 !important;
  border-bottom: 0 !important;
  gap: 20px !important;
  align-items: center !important;
}
body:has(.hub-shell) .drv-header .svt-tab {
  padding: 0 0 3px !important;
}
body:has(.hub-shell) #sessionsHeaderListActions,
body:has(.hub-shell) #sessionsHeaderDetailActions {
  gap: 28px !important;
}

/* Export All split-button: it had both a flex gap AND inline icon margins,
   so the download glyph, label, and chevron sat unevenly spaced. Zero the
   inline margins and use one tight, consistent gap. */
body:has(.hub-shell) #btnExportPastSessions {
  gap: 8px !important;
  padding: 11px 16px !important;
}
body:has(.hub-shell) #btnExportPastSessions i {
  margin: 0 !important;
}

/* Assignments page: now has a proper drv-header. Three spacings were stacking
   between the header and the panes (section flex-gap + header margin + shell
   margin = ~90px). Collapse them to a single, clean gap. */
/* Selector mirrors the high-specificity section-gap rule (which uses two
   :not(#id)s) so this 22px gap actually wins. */
body:has(.hub-shell) #section-assignments:not(#section-overview):not(#section-journal) {
  gap: 22px !important;
}
body:has(.hub-shell) #section-assignments .drv-header {
  margin-bottom: 0 !important;
}
body:has(.hub-shell) .drv-shell,
body:has(.hub-shell) .clin-layout,
body:has(.hub-shell) .clients-layout,
body:has(.hub-shell) .notes-shell {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body:has(.hub-shell) .drv-header {
  min-height: 0 !important;
  padding: 0 var(--as-page-pad-x) 16px !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Detail-view back button: give it real breathing room from the title block
   and a hairline divider so it reads as a separate control, not crowding the
   client name. Align it to the title (not the eyebrow) for a clean baseline. */
body:has(.hub-shell) .drv-header .drv-back-btn {
  align-self: flex-end !important;
  margin-right: 26px !important;
  padding-right: 26px !important;
  border: 0 !important;
  border-right: 1px solid var(--border) !important;
  background: transparent !important;
  padding-left: 0 !important;
}
body:has(.hub-shell) .drv-header .drv-back-btn:hover {
  background: transparent !important;
  color: var(--ink) !important;
}

/* Master-detail panes (clients/notes/sessions/assignments) were flush against
   the sidebar — inset them like every other section so headings don't clip. */
body:has(.hub-shell) .drv-body {
  padding-left: var(--as-page-pad-x) !important;
  padding-right: var(--as-page-pad-x) !important;
}
/* …and zero the inner panes' own horizontal padding so it doesn't double up. */
body:has(.hub-shell) .drv-body .cdr-body,
body:has(.hub-shell) .drv-body .cdr-tabs {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* De-box the detail "card": page bg already equals --card, so the border was
   the only thing making it a box. Drop it; keep only the tab strip underline. */
body:has(.hub-shell) .drv-body .cdr-body {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
body:has(.hub-shell) .drv-body .cdr-tabs {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
}
body:has(.hub-shell) .drv-body .cdr-header {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Stat rows everywhere: no vertical dividers, no boxed band — match the
   overview's flat editorial stat row (billing, client detail, etc.). */
body:has(.hub-shell) .stat-card {
  border-right: 0 !important;
  border-left: 0 !important;
}
body:has(.hub-shell) .stat-row {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

body:has(.hub-shell) .drv-toolbar {
  display: flex !important;
  align-items: center !important;
  padding: 18px var(--as-page-pad-x) !important;
  border-bottom: 1px solid var(--border) !important;
}
body:has(.hub-shell) .drv-toolbar input { margin: 0 !important; }

/* The list under it was double-guttered: the shell is full-bleed, the toolbar
   pads itself with the page padding, and the list re-added its own gutter on
   top — so every row sat ~64px inside the search box on both sides. The rows
   now share the toolbar's edges. */
body:has(.hub-shell) .drv-list-view {
  padding-left: var(--as-page-pad-x) !important;
  padding-right: var(--as-page-pad-x) !important;
}

body:has(.hub-shell) .drv-body {
  background: transparent !important;
}

body:has(.hub-shell) .drv-header-title {
  font-family: var(--serif) !important;
  font-size: clamp(24px, 2.1vw, 30px) !important;
  line-height: 1.14 !important;
  font-weight: 400 !important;
  letter-spacing: -0.028em !important;
}

/* The open-note breadcrumb in the Clinical Notes header is the document's own
   name (also editable in the body below). It competes with 4 action buttons,
   so a giant serif headline wraps to 3 lines. Keep it a quiet single-line
   label, not a headline. */
body:has(.hub-shell) #notesHeaderDetailName {
  font-size: 15px !important;
  font-weight: 500 !important;
  font-family: var(--sans) !important;
  letter-spacing: 0 !important;
  color: var(--muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 320px !important;
}

/* Note editor metadata: client / folder / tags / pin should sit on one row,
   not stack full-width (a generic `select{width:100%}` rule was forcing the
   stack). Make them auto-width flex items so the module stays compact. */
body:has(.hub-shell) .cn-doc-meta { gap: 12px !important; }
body:has(.hub-shell) .cn-doc-meta #noteClient,
body:has(.hub-shell) .cn-doc-meta #noteFolder {
  width: auto !important;
  flex: 0 1 240px !important;
  min-width: 180px !important;
}
body:has(.hub-shell) .cn-doc-meta #noteTags {
  width: auto !important;
  flex: 1 1 240px !important;
  min-width: 200px !important;
}
/* Clinical Notes filter row: compact boxed dropdowns with a chevron — the
   global select{width:100%} was stretching each to full width and stacking
   them, and appearance:none left them with no affordance. */
body:has(.hub-shell) .cn-list-toolbar > select {
  width: auto !important;
  flex: 0 0 auto !important;
  min-width: 130px !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  color: var(--ink) !important;
  font-size: 12.5px !important;
  line-height: 1.2 !important;
  padding: 9px 30px 9px 12px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L2 4h8z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
}

/* Editable note title in the body — refined, with room to breathe. */
body:has(.hub-shell) .cn-title-input {
  font-size: clamp(24px, 2.4vw, 32px) !important;
  margin-bottom: 18px !important;
}

body:has(.hub-shell) .drv-card,
body:has(.hub-shell) .entry-item,
body:has(.hub-shell) .session-card,
body:has(.hub-shell) .fr-req-card,
body:has(.hub-shell) .fr-suggest-card,
body:has(.hub-shell) .dir-therapist-card,
body:has(.hub-shell) .road-card,
body:has(.hub-shell) .rx-card,
body:has(.hub-shell) .rx-med-card,
body:has(.hub-shell) .asgn-sub-card,
body:has(.hub-shell) .topic-section,
body:has(.hub-shell) .general-section,
body:has(.hub-shell) .credential-row,
body:has(.hub-shell) .lux-li,
body:has(.hub-shell) .lux-s-row,
body:has(.hub-shell) .lux-p-row,
body:has(.hub-shell) .lux-act-row,
body:has(.hub-shell) .session-row {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-light) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body:has(.hub-shell) .drv-card:hover,
body:has(.hub-shell) .entry-item:hover,
body:has(.hub-shell) .session-card:hover,
body:has(.hub-shell) .dir-therapist-card:hover {
  background: color-mix(in srgb, var(--surface) 56%, transparent) !important;
  opacity: 1 !important;
}

body:has(.hub-shell) .drv-card-title,
body:has(.hub-shell) .entry-item-preview,
body:has(.hub-shell) .pcard-name,
body:has(.hub-shell) .fr-card-name,
body:has(.hub-shell) .credential-value {
  font-family: var(--serif) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: -0.018em !important;
}

body:has(.hub-shell) .schedule-layout,
body:has(.hub-shell) .client-schedule-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 42px !important;
}

body:has(.hub-shell) .cal-controls h3,
body:has(.hub-shell) #calLabel,
body:has(.hub-shell) #clientCalLabel {
  font-family: var(--serif) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;   /* was inheriting uppercase from .panel-header h3 → "Jun 28 – Jul 4" not "JUN 28 – JUL 4" */
}

/* Calendar week arrows — quiet icon buttons, subordinate to the serif date
   (were big bordered .btn.ghost squares that dwarfed it). */
.cal-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; flex-shrink: 0;
  background: transparent; border: none; border-radius: 999px;
  color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.cal-arrow:hover { color: var(--ink); background: var(--surface); }
.cal-arrow:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

body:has(.hub-shell) .cal-view-toggle,
body:has(.hub-shell) .dir-filter-chips {
  display: inline-flex !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
}

body:has(.hub-shell) .cal-view-btn,
body:has(.hub-shell) .dir-filter-chip,
body:has(.hub-shell) .el-filter-btn,
body:has(.hub-shell) .el-filter-clear {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  color: var(--muted) !important;
}

body:has(.hub-shell) .cal-view-btn.active,
body:has(.hub-shell) .dir-filter-chip.active,
body:has(.hub-shell) .el-filter-btn.active {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
}

/* Calendar view switch (Day/Week/Month/Year/List): one sleek segmented
   control — joined, square, hairline dividers — not cramped pills. This
   higher-specificity block overrides the pill + underline-tab rules that
   otherwise fight over .cal-view-btn. */
body:has(.hub-shell) .cal-view-toggle {
  display: inline-flex !important;
  gap: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}
body:has(.hub-shell) .cal-view-toggle .cal-view-btn {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  padding: 8px 16px !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
body:has(.hub-shell) .cal-view-toggle .cal-view-btn + .cal-view-btn {
  border-left: 1px solid var(--border) !important;
}
body:has(.hub-shell) .cal-view-toggle .cal-view-btn.active {
  background: var(--ink) !important;
  color: var(--paper) !important;
}

body:has(.hub-shell) .week-grid,
body:has(.hub-shell) .client-week-grid,
body:has(.hub-shell) #monthGrid,
body:has(.hub-shell) #clientMonthGrid,
body:has(.hub-shell) #yearGrid {
  border-top: 1px solid var(--border) !important;
  background: transparent !important;
}

/* The overview "This Week" widget already sits under its own header rule —
   the extra line above the weekday labels was redundant. */
body:has(.hub-shell) .week-grid,
body:has(.hub-shell) .client-week-grid {
  border-top: 0 !important;
}

/* Day note: the module's own layout is the house layout now — no label
   rail, no grid, no serif book-scale textarea. Only the top seam is kept. */
body:has(.hub-shell) .client-day-notes-panel {
  border-top: 1px solid var(--border) !important;
  padding-top: 22px !important;
}

body:has(.hub-shell) .fr-body,
body:has(.hub-shell) .dir-conn-panel,
body:has(.hub-shell) .fr-panel,
body:has(.hub-shell) .bill-panel {
  background: transparent !important;
  border: 0 !important;
}

body:has(.hub-shell) .dir-filter-row,
body:has(.hub-shell) .fr-two-col {
  gap: 28px !important;
}

body:has(.hub-shell) table,
body:has(.hub-shell) .mig-table {
  border-collapse: collapse !important;
  background: transparent !important;
}

body:has(.hub-shell) th,
body:has(.hub-shell) td,
body:has(.hub-shell) .mig-table th,
body:has(.hub-shell) .mig-table td {
  border-color: var(--border-light) !important;
  background: transparent !important;
}

body:has(.hub-shell) .modal-box,
body:has(.hub-shell) .rx-modal,
body:has(.hub-shell) .ssl-box,
body:has(.hub-shell) .modal-card,
body:has(.hub-shell) .modal-panel,
body:has(.hub-shell) .share-modal,
body:has(.hub-shell) .as-delete-modal,
body:has(.hub-shell) .ssac-card,
body:has(.hub-shell) .el-synth-card {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 64px rgba(0,0,0,0.18) !important;
}

body:has(.hub-shell) .ns-path-card {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(.hub-shell) .card,
html[data-theme="dark"] body:has(.hub-shell) .panel,
html[data-theme="dark"] body:has(.hub-shell) .stat-card,
html[data-theme="dark"] body:has(.hub-shell) .drv-shell,
html[data-theme="dark"] body:has(.hub-shell) .fr-body,
html[data-theme="dark"] body:has(.hub-shell) .dir-conn-panel,
html[data-theme="dark"] body:has(.hub-shell) .client-day-notes-panel,
html[data-theme="dark"] body:has(.hub-shell) .day-notes-panel {
  background: transparent !important;
}

html[data-theme="dark"] body:has(.hub-shell) input[type="text"],
html[data-theme="dark"] body:has(.hub-shell) input[type="email"],
html[data-theme="dark"] body:has(.hub-shell) input[type="password"],
html[data-theme="dark"] body:has(.hub-shell) input[type="date"],
html[data-theme="dark"] body:has(.hub-shell) input[type="number"],
html[data-theme="dark"] body:has(.hub-shell) input[type="search"],
html[data-theme="dark"] body:has(.hub-shell) textarea,
html[data-theme="dark"] body:has(.hub-shell) select {
  background: rgba(255,255,255,0.025) !important;
}

html[data-theme="dark"] body:has(.hub-shell) .btn.primary,
html[data-theme="dark"] body:has(.hub-shell) button.primary,
html[data-theme="dark"] body:has(.hub-shell) a.primary,
html[data-theme="dark"] body:has(.hub-shell) .cal-view-btn.active,
html[data-theme="dark"] body:has(.hub-shell) .dir-filter-chip.active {
  background: var(--champagne) !important;
  border-color: var(--champagne) !important;
  color: #111111 !important;
}

html[data-theme="dark"] body:has(.hub-shell) .btn.ghost,
html[data-theme="dark"] body:has(.hub-shell) button.ghost,
html[data-theme="dark"] body:has(.hub-shell) a.ghost,
html[data-theme="dark"] body:has(.hub-shell) .cal-view-btn,
html[data-theme="dark"] body:has(.hub-shell) .dir-filter-chip {
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--ink) !important;
}

@media (max-width: 1100px) {
  body:has(.hub-shell) .stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:has(.hub-shell) .stat-card:nth-child(2n) {
    border-right: 0 !important;
  }

  body:has(.hub-shell) .day-notes-panel,
  body:has(.hub-shell) .client-day-notes-panel {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  body:has(.hub-shell) {
    --as-page-pad-x: 22px;
  }

  body:has(.hub-shell) .section.active:not(#section-overview):not(#section-journal):not(.drv-active),
  body:has(.hub-shell) .section.active.drv-active {
    padding-left: var(--as-page-pad-x) !important;
    padding-right: var(--as-page-pad-x) !important;
  }

  body:has(.hub-shell) .stat-row {
    grid-template-columns: 1fr !important;
  }

  body:has(.hub-shell) .stat-card {
    border-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }
}

/* Onboarding screens after login: profile and plan selection. Login has
   its own ceremonial dark composition, so exclude the login auth-stage. */
body.onboarding-body:not(:has(.auth-stage)) {
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 28%),
    linear-gradient(180deg, var(--bg), var(--surface)) !important;
}

body.onboarding-body:not(:has(.auth-stage)) .topbar {
  background: transparent !important;
  border-bottom: 0 !important;
  padding: 30px clamp(28px, 5vw, 72px) !important;
}

body.onboarding-body:not(:has(.auth-stage)) .brand-mark {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

body.onboarding-body:not(:has(.auth-stage)) .brand-name {
  font-family: var(--serif) !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
}

body.onboarding-body:not(:has(.auth-stage)) .brand-tag {
  display: none !important;
}

body.onboarding-body:not(:has(.auth-stage)) .onboarding-main {
  align-items: flex-start !important;
  padding: clamp(44px, 8vh, 92px) clamp(24px, 5vw, 72px) 72px !important;
}

body.onboarding-body:not(:has(.auth-stage)) .auth-card,
body.onboarding-body:not(:has(.auth-stage)) .plan-page {
  width: min(980px, 100%) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.onboarding-body:not(:has(.auth-stage)) .card-header {
  text-align: center !important;
  margin: 0 auto 46px !important;
  max-width: 680px !important;
}

body.onboarding-body:not(:has(.auth-stage)) .card-header h1,
body.onboarding-body:not(:has(.auth-stage)) .plan-page h1 {
  font-family: var(--serif) !important;
  /* Same family as the launcher title. At 78px these ran 2.6x the section
     heroes, so onboarding shouted where the app speaks. */
  font-size: clamp(30px, 3.6vw, 50px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.045em !important;
  font-weight: 400 !important;
  text-align: center !important;
}

body.onboarding-body:not(:has(.auth-stage)) .profile-grid {
  grid-template-columns: 180px minmax(0, 1fr) !important;
  gap: clamp(34px, 5vw, 72px) !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--border) !important;
}

body.onboarding-body:not(:has(.auth-stage)) .avatar-preview {
  width: 180px !important;
  height: 220px !important;
  border: 1px solid var(--border) !important;
  background: color-mix(in srgb, var(--surface) 66%, transparent) !important;
}

body.onboarding-body:not(:has(.auth-stage)) .role-cards,
body.onboarding-body:not(:has(.auth-stage)) .plan-grid {
  gap: 0 !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}

body.onboarding-body:not(:has(.auth-stage)) .role-card,
body.onboarding-body:not(:has(.auth-stage)) .p-card {
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  padding: clamp(26px, 3vw, 42px) !important;
}

body.onboarding-body:not(:has(.auth-stage)) .role-card:last-child,
body.onboarding-body:not(:has(.auth-stage)) .p-card:last-child {
  border-right: 0 !important;
}

body.onboarding-body:not(:has(.auth-stage)) .role-card:hover,
body.onboarding-body:not(:has(.auth-stage)) .p-card:hover,
body.onboarding-body:not(:has(.auth-stage)) .role-card.selected,
body.onboarding-body:not(:has(.auth-stage)) .p-card.selected {
  background: color-mix(in srgb, var(--surface) 68%, transparent) !important;
  border-color: var(--border) !important;
}

body.onboarding-body:not(:has(.auth-stage)) .role-card.selected,
body.onboarding-body:not(:has(.auth-stage)) .p-card.selected {
  box-shadow: inset 0 2px 0 var(--accent) !important;
}

body.onboarding-body:not(:has(.auth-stage)) .rc-title,
body.onboarding-body:not(:has(.auth-stage)) .tier-price {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
}

body.onboarding-body:not(:has(.auth-stage)) .rc-title {
  font-size: 24px !important;
}

body.onboarding-body:not(:has(.auth-stage)) .rc-desc,
body.onboarding-body:not(:has(.auth-stage)) .tier-features {
  color: var(--muted) !important;
  line-height: 1.7 !important;
}

body.onboarding-body:not(:has(.auth-stage)) .plan-actions .btn-primary {
  border-radius: 999px !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.onboarding-body:not(:has(.auth-stage)) {
  background:
    radial-gradient(circle at 82% 16%, rgba(242,238,232,0.05), transparent 26%),
    #0E0E0F !important;
}

html[data-theme="dark"] body.onboarding-body:not(:has(.auth-stage)) .brand-mark {
  color: var(--ink) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

html[data-theme="dark"] body.onboarding-body:not(:has(.auth-stage)) .role-card.selected,
html[data-theme="dark"] body.onboarding-body:not(:has(.auth-stage)) .p-card.selected {
  background: rgba(255,255,255,0.035) !important;
}

@media (max-width: 800px) {
  body.onboarding-body:not(:has(.auth-stage)) .profile-grid,
  body.onboarding-body:not(:has(.auth-stage)) .role-cards,
  body.onboarding-body:not(:has(.auth-stage)) .plan-grid {
    grid-template-columns: 1fr !important;
  }

  body.onboarding-body:not(:has(.auth-stage)) .avatar-preview {
    width: 100% !important;
    height: 160px !important;
  }

  body.onboarding-body:not(:has(.auth-stage)) .role-card,
  body.onboarding-body:not(:has(.auth-stage)) .p-card {
    border-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }
}

/* ════════════════════════════════════════════════════════════
   OVERVIEW BREATHING ROOM  (appended last — wins the cascade)
   ────────────────────────────────────────────────────────────
   The dashboard read busy/cluttered: a late block re-added vertical
   dividers between stats and the vertical rhythm was tight. Per the
   spec (generous whitespace, no dividers, calm) this removes the stat
   dividers and roughly doubles the spacing between sections so the
   overview reads as a spacious composition, not a packed grid. */
body:has(.hub-shell) #section-overview .lux-stat { border-right: none !important; border-bottom: none !important; }
body:has(.hub-shell) #section-overview .lux-hero-top { margin-bottom: 36px !important; }
body:has(.hub-shell) #section-overview .lux-stat-row { padding-top: 28px !important; }
body:has(.hub-shell) #section-overview .lux-body { gap: 76px !important; margin-top: 76px !important; }
body:has(.hub-shell) #section-overview .lux-body-left,
body:has(.hub-shell) #section-overview .lux-body-right { gap: 76px !important; }
body:has(.hub-shell) #section-overview .lux-card-h { margin-bottom: 34px !important; padding-bottom: 20px !important; }
body:has(.hub-shell) #section-overview .lux-li { padding: 26px 0 !important; }
body:has(.hub-shell) #section-overview .lux-overview-shell { padding-bottom: 88px !important; }
body:has(.hub-shell) #section-overview .lux-week { margin-top: 8px !important; }
body:has(.hub-shell) #section-overview .lux-day { padding: 14px 6px !important; gap: 16px !important; }

/* Re-assert the dark navigation rail over the luxe blended-sidebar layer
   (the dashboard mockup + the user's explicit instruction = dark rail). */
body:has(.hub-shell) aside.hub-sidebar {
  background: #131211 !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
}
body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-name { color: #ECE7DD !important; }
body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-role { color: rgba(236,231,221,0.45) !important; }
body:has(.hub-shell) aside.hub-sidebar .sidebar-avatar { background: rgba(255,255,255,0.09) !important; color: #ECE7DD !important; }
body:has(.hub-shell) aside.hub-sidebar .sidebar-section-label { color: rgba(236,231,221,0.34) !important; }
body:has(.hub-shell) aside.hub-sidebar .sidebar-item { color: rgba(236,231,221,0.66) !important; border-radius: 9px !important; }
body:has(.hub-shell) aside.hub-sidebar .sidebar-item .si-icon { color: rgba(236,231,221,0.48) !important; }
body:has(.hub-shell) aside.hub-sidebar .sidebar-item:hover { background: rgba(255,255,255,0.05) !important; color: #ECE7DD !important; }
body:has(.hub-shell) aside.hub-sidebar .sidebar-item:hover .si-icon { color: #ECE7DD !important; }
body:has(.hub-shell) aside.hub-sidebar .sidebar-item.active { background: rgba(255,255,255,0.07) !important; color: #FFFFFF !important; }
body:has(.hub-shell) aside.hub-sidebar .sidebar-item.active .si-icon { color: var(--champagne, #E7DFCF) !important; }
body:has(.hub-shell) aside.hub-sidebar .sidebar-item.active::before { display: none !important; }

/* Sidebar mockup match: dark private-club rail, soft row pills, generous
   section rhythm, muted line icons, and a profile header with square menu. */
body:has(.hub-shell) .hub-shell {
  grid-template-columns: 230px 1fr !important;
}

body:has(.hub-shell) .hub-sidebar,
body:has(.hub-shell) aside.hub-sidebar {
  width: 230px !important;
  min-height: 100vh !important;
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 130 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018), transparent 120px),
    #111110 !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
  color: rgba(236,231,221,0.72) !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body:has(.hub-shell) .hub-main {
  margin-left: 230px !important;
}

body:has(.hub-shell) header.topbar {
  padding-left: calc(230px + 36px) !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-profile {
  min-height: 176px !important;
  padding: 94px 32px 28px 40px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 0 !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-avatar {
  order: 1 !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(236,231,221,0.58) !important;
  color: #ECE7DD !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.45) inset !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-info {
  order: 2 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 2px !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-name {
  color: #F1EEE7 !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-role {
  color: rgba(236,231,221,0.42) !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-toggle,
body:has(.hub-shell) aside.hub-sidebar .sidebar-toggle {
  order: 3 !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 28px !important;
  margin: 0 0 0 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,0.018) !important;
  color: rgba(236,231,221,0.52) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-toggle:hover,
body:has(.hub-shell) aside.hub-sidebar .sidebar-toggle:hover {
  border-color: rgba(236,231,221,0.38) !important;
  color: #ECE7DD !important;
  background: rgba(255,255,255,0.045) !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-toggle i,
body:has(.hub-shell) aside.hub-sidebar .sidebar-toggle i {
  font-size: 14px !important;
  line-height: 1 !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-items-wrap {
  padding: 0 40px 34px !important;
  gap: 0 !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-section-label {
  padding: 0 0 11px !important;
  margin: 0 !important;
  color: rgba(236,231,221,0.30) !important;
  font-family: var(--sans) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.38em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-section-label:not(:first-child) {
  padding-top: 28px !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-item {
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: rgba(236,231,221,0.62) !important;
  font-family: var(--sans) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-item .si-icon {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(236,231,221,0.44) !important;
  opacity: 1 !important;
  font-size: 17px !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-item .si-icon i {
  font-size: 17px !important;
  line-height: 1 !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-item .si-label {
  color: inherit !important;
  font-size: inherit !important;
  /* Exceed font-size so descenders (g, p, y) clear the overflow:hidden box. */
  line-height: 1.5 !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-item:hover {
  background: rgba(255,255,255,0.045) !important;
  color: rgba(236,231,221,0.86) !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-item:hover .si-icon {
  color: rgba(236,231,221,0.70) !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-item.active {
  background: transparent !important;
  color: #F7F3EA !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
  position: relative !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-item.active .si-icon {
  color: var(--champagne, #E7DFCF) !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-item.active::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: -22px !important;
  top: 10px !important;
  width: 2px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: var(--accent) !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-badge,
body:has(.hub-shell) aside.hub-sidebar .si-badge {
  margin-left: auto !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--champagne, #E7DFCF) !important;
  color: #111110 !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-badge[style*="display:none"],
body:has(.hub-shell) aside.hub-sidebar .sidebar-badge[style*="display: none"],
body:has(.hub-shell) aside.hub-sidebar .si-badge[style*="display:none"],
body:has(.hub-shell) aside.hub-sidebar .si-badge[style*="display: none"] {
  display: none !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-divider {
  display: block !important;
  height: 1px !important;
  margin: 2px 0 !important;
  background: rgba(236,231,221,0.11) !important;
  border: 0 !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-signout {
  margin-top: auto !important;
  padding: 8px 18px 12px !important;
  border-top: 1px solid rgba(236,231,221,0.08) !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-signout .sidebar-item {
  min-height: 34px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

body:has(.hub-shell) aside.hub-sidebar.collapsed {
  width: 72px !important;
}

body:has(.hub-shell) .hub-shell.sidebar-collapsed {
  grid-template-columns: 72px 1fr !important;
}

body:has(.hub-shell) .hub-shell.sidebar-collapsed .hub-main {
  margin-left: 72px !important;
}

body:has(.hub-shell):has(.hub-shell.sidebar-collapsed) header.topbar {
  padding-left: calc(72px + 36px) !important;
}

body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-profile {
  min-height: 84px !important;
  display: flex !important;
  justify-content: center !important;
  padding: 18px 0 !important;
}

body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-items-wrap {
  padding: 8px !important;
}

body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-item {
  justify-content: center !important;
  gap: 0 !important;
  padding: 0 !important;
}

body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-item .si-icon {
  margin: 0 !important;
}

/* Light-mode sidebar: same proportions as dark, but warm gallery ivory like
   the reference mockup. The existing topbar brand is visually anchored into
   the rail, preserving markup and navigation behavior. */
body:has(.hub-shell) header.topbar .brand {
  position: fixed !important;
  left: 44px !important;
  top: 31px !important;
  z-index: 160 !important;
  gap: 16px !important;
}

body:has(.hub-shell) header.topbar .brand-logo {
  width: 34px !important;
  height: 34px !important;
  filter: invert(1) opacity(0.82) !important;
}

/* Brand wordmark — match the mockup: clean spaced sans caps, larger and
   lighter than before, cool light-grey on the slate. */
body:has(.hub-shell) header.topbar .brand-name {
  font-family: var(--sans) !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  letter-spacing: 0.34em !important;
  line-height: 1 !important;
  color: rgba(231,230,228,0.82) !important;
  text-transform: uppercase !important;
}

html:not([data-theme="dark"]) body:has(.hub-shell) aside.hub-sidebar,
html[data-theme="light"] body:has(.hub-shell) aside.hub-sidebar {
  /* Same solid color as the topbar + content so there's no tonal seam. */
  background: var(--bg) !important;
  border-right: 1px solid var(--border-light) !important;
  color: var(--muted) !important;
}

html:not([data-theme="dark"]) body:has(.hub-shell) header.topbar .brand-logo,
html[data-theme="light"] body:has(.hub-shell) header.topbar .brand-logo {
  filter: grayscale(1) opacity(0.58) !important;
}

html:not([data-theme="dark"]) body:has(.hub-shell) header.topbar .brand-name,
html[data-theme="light"] body:has(.hub-shell) header.topbar .brand-name {
  color: var(--ink-soft) !important;
}

html:not([data-theme="dark"]) body:has(.hub-shell) aside.hub-sidebar .sidebar-avatar,
html[data-theme="light"] body:has(.hub-shell) aside.hub-sidebar .sidebar-avatar {
  background: color-mix(in srgb, var(--putty) 42%, transparent) !important;
  border: 0 !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

html:not([data-theme="dark"]) body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-name,
html[data-theme="light"] body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-name {
  color: var(--ink-soft) !important;
}

html:not([data-theme="dark"]) body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-role,
html[data-theme="light"] body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-role {
  color: var(--muted) !important;
}

html:not([data-theme="dark"]) body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-toggle,
html:not([data-theme="dark"]) body:has(.hub-shell) aside.hub-sidebar .sidebar-toggle,
html[data-theme="light"] body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-toggle,
html[data-theme="light"] body:has(.hub-shell) aside.hub-sidebar .sidebar-toggle {
  background: transparent !important;
  color: var(--muted) !important;
}

html:not([data-theme="dark"]) body:has(.hub-shell) aside.hub-sidebar .sidebar-section-label,
html[data-theme="light"] body:has(.hub-shell) aside.hub-sidebar .sidebar-section-label {
  color: var(--whisper) !important;
}

html:not([data-theme="dark"]) body:has(.hub-shell) aside.hub-sidebar .sidebar-item,
html[data-theme="light"] body:has(.hub-shell) aside.hub-sidebar .sidebar-item {
  color: color-mix(in srgb, var(--ink) 72%, transparent) !important;
}

html:not([data-theme="dark"]) body:has(.hub-shell) aside.hub-sidebar .sidebar-item .si-icon,
html[data-theme="light"] body:has(.hub-shell) aside.hub-sidebar .sidebar-item .si-icon {
  color: color-mix(in srgb, var(--ink) 58%, transparent) !important;
}

html:not([data-theme="dark"]) body:has(.hub-shell) aside.hub-sidebar .sidebar-item:hover,
html[data-theme="light"] body:has(.hub-shell) aside.hub-sidebar .sidebar-item:hover {
  background: transparent !important;
  color: var(--ink-soft) !important;
}

html:not([data-theme="dark"]) body:has(.hub-shell) aside.hub-sidebar .sidebar-item.active,
html[data-theme="light"] body:has(.hub-shell) aside.hub-sidebar .sidebar-item.active {
  color: var(--ink-soft) !important;
}

html:not([data-theme="dark"]) body:has(.hub-shell) aside.hub-sidebar .sidebar-item.active .si-icon,
html[data-theme="light"] body:has(.hub-shell) aside.hub-sidebar .sidebar-item.active .si-icon {
  color: var(--accent) !important;
}

html:not([data-theme="dark"]) body:has(.hub-shell) aside.hub-sidebar .sidebar-badge,
html:not([data-theme="dark"]) body:has(.hub-shell) aside.hub-sidebar .si-badge,
html[data-theme="light"] body:has(.hub-shell) aside.hub-sidebar .sidebar-badge,
html[data-theme="light"] body:has(.hub-shell) aside.hub-sidebar .si-badge {
  background: color-mix(in srgb, var(--muted) 74%, transparent) !important;
  color: var(--paper) !important;
}

html:not([data-theme="dark"]) body:has(.hub-shell) aside.hub-sidebar .sidebar-divider,
html[data-theme="light"] body:has(.hub-shell) aside.hub-sidebar .sidebar-divider,
html:not([data-theme="dark"]) body:has(.hub-shell) aside.hub-sidebar .sidebar-signout,
html[data-theme="light"] body:has(.hub-shell) aside.hub-sidebar .sidebar-signout {
  border-color: var(--border-light) !important;
}

body:has(.hub-shell.sidebar-collapsed) header.topbar .brand {
  left: 20px !important;
}

/* Keep the ASTRASERA wordmark visible even when the sidebar is collapsed. */
body:has(.hub-shell.sidebar-collapsed) header.topbar .brand-name {
  display: none !important;
}

html[data-theme="dark"] body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-name,
html[data-theme="dark"] body:has(.hub-shell) aside.hub-sidebar .sidebar-item.active {
  color: var(--ink) !important;
}

html[data-theme="dark"] body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-role,
html[data-theme="dark"] body:has(.hub-shell) aside.hub-sidebar .sidebar-item {
  color: var(--ink-soft) !important;
}

html[data-theme="dark"] body:has(.hub-shell) aside.hub-sidebar .sidebar-section-label {
  color: var(--whisper) !important;
}

html[data-theme="dark"] body:has(.hub-shell) aside.hub-sidebar .sidebar-item .si-icon {
  color: rgba(242,238,232,0.48) !important;
}

html[data-theme="dark"] body:has(.hub-shell) aside.hub-sidebar .sidebar-item.active .si-icon {
  color: var(--champagne) !important;
}

html[data-theme="dark"] body aside.hub-sidebar .sidebar-item.active,
html[data-theme="dark"] body aside.hub-sidebar .sidebar-item.active .si-label {
  color: var(--ink) !important;
}

html[data-theme="dark"] body aside.hub-sidebar .sidebar-item:not(.active) {
  color: var(--ink-soft) !important;
}

/* ════════════════════════════════════════════════════════════════
   ASTRASERA WHOLE-SITE EDITORIAL CONSISTENCY PASS
   Scope: visual presentation only. This layer intentionally targets shared
   primitives and standalone-page classes so the product reads as one luxury
   self-development space rather than a collection of SaaS widgets.
   ════════════════════════════════════════════════════════════════ */
:root {
  --as-space-1: 4px;
  --as-space-2: 8px;
  --as-space-3: 12px;
  --as-space-4: 16px;
  --as-space-5: 24px;
  --as-space-6: 32px;
  --as-space-7: 48px;
  --as-space-8: 64px;
  --as-space-9: 88px;
  --as-space-10: 120px;
  --as-radius-none: 0;
  --as-radius-soft: 10px;
  --as-radius-round: 999px;
  --as-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --as-transition: 220ms var(--as-ease);
  --as-hairline: color-mix(in srgb, var(--border) 70%, transparent);
  --as-section-pad: clamp(var(--as-space-7), 7vw, var(--as-space-10));
  --as-measure: 760px;
  --space-studio-bg: var(--bg);
  --space-studio-surface: var(--surface);
  --space-coast-accent: var(--accent);
  --space-observatory-bg: var(--bg);
}

html {
  background: var(--bg);
}

body {
  background-color: var(--bg);
  color: var(--ink);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
  font-family: var(--sans);
}

p,
li {
  line-height: 1.72;
}

h1,
h2,
.section-hero h1,
.hub-hero h1,
.dir-hero h1,
.ct-hero h1,
.settings-card h2,
.settings-card h3,
.modal-title,
.modes-title,
.space-name,
.welcome-state h3 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  letter-spacing: -0.028em !important;
}

h1,
.section-hero h1,
.hub-hero h1,
.dir-hero h1 {
  font-size: clamp(42px, 5.4vw, 76px) !important;
  line-height: 0.98 !important;
}

h2 {
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.06;
}

h3,
.panel-header h3,
.card-header h3,
.lux-card-h h3,
.hub-panel-head h3 {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.018em !important;
}

.eyebrow,
.mini,
.sub,
.brand-tag,
.section-head-sub,
.lux-hero-eyebrow,
.sidebar-section-label,
.settings-nav-item,
.modal-sub,
.stat-label,
.space-tag,
.ct-hero .eyebrow,
.dir-hero .eyebrow,
.drv-header-eyebrow,
.entry-item-date,
.asgn-section-lbl,
.rx-section-label,
.ling-label {
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
}

/* Shared chrome: quiet, hairline, no startup-button energy. */
.btn,
button,
a.primary,
a.secondary,
a.ghost,
button.primary,
button.secondary,
button.ghost,
.new-chat-btn,
.send-btn,
.space-cta,
.settings-nav-item,
.ct-tab,
.billing-tab,
.journal-tab,
.tj-tab,
.fr-tab,
.svt-tab,
.cal-view-btn,
.dir-filter-chip,
.mode-card,
.starter-chip,
.ap-opt,
.env-card {
  transition:
    color var(--as-transition),
    background-color var(--as-transition),
    border-color var(--as-transition),
    opacity var(--as-transition),
    transform var(--as-transition) !important;
  box-shadow: none !important;
}

.btn,
button.primary,
button.secondary,
button.ghost,
a.primary,
a.secondary,
a.ghost {
  border-radius: var(--as-radius-none) !important;
  min-height: 42px;
}

.btn.primary,
button.primary,
a.primary,
.new-chat-btn,
.send-btn {
  background: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  color: var(--bg) !important;
}

.btn.ghost,
button.ghost,
a.ghost,
.btn.secondary,
button.secondary,
a.secondary {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
}

.btn:hover,
button:hover,
a.primary:hover,
a.ghost:hover,
a.secondary:hover {
  transform: none !important;
  opacity: 0.78;
}

/* Forms should feel like stationery, not app inputs. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 11px 13px !important;
  box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent) !important;
  box-shadow: none !important;
}

/* Flatten SaaS containers into editorial sections. */
.card,
.panel,
.settings-card,
.hub-panel,
.results-panel,
.dir-lookup-card,
.therapist-card,
.user-card,
.room-card,
.colleague-card,
.room-detail-main,
.room-detail-side,
.ct-gate,
.verify-gate,
.pending-panel,
.stat-card,
.drv-card,
.entry-item,
.session-card,
.fr-req-card,
.fr-suggest-card,
.dir-therapist-card,
.road-card,
.rx-med-card,
.rx-pharm-card,
.asgn-sub-card,
.topic-section,
.general-section,
.jlog-card,
.mode-card,
.history-item,
.context-chip,
.starter-chip,
.plan-card,
.p-card,
.role-card {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--as-hairline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.card,
.panel,
.settings-card,
.hub-panel,
.results-panel,
.room-card,
.colleague-card,
.ct-gate,
.verify-gate,
.pending-panel,
.rx-med-card,
.rx-pharm-card,
.topic-section,
.general-section {
  padding: clamp(var(--as-space-5), 3vw, var(--as-space-7)) 0 !important;
}

.card-header,
.panel-header,
.hub-panel-head,
.settings-card > h3,
.section-head,
.drv-header,
.lux-card-h,
.modal-header,
.room-detail-hdr {
  border-bottom: 1px solid var(--as-hairline) !important;
  padding-bottom: var(--as-space-4) !important;
  margin-bottom: var(--as-space-5) !important;
}

/* Page layout: make standalone pages breathe like designed spaces. */
.page {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: clamp(var(--as-space-5), 5vw, var(--as-space-9)) !important;
  padding-right: clamp(var(--as-space-5), 5vw, var(--as-space-9)) !important;
}

.section.active:not(#section-overview):not(#section-journal),
.settings-section.active,
.ct-section.active {
  gap: var(--as-space-7) !important;
}

.section-hero,
.hub-hero,
.dir-hero,
.ct-hero {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--as-hairline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: clamp(var(--as-space-7), 6vw, var(--as-space-9)) 0 var(--as-space-6) !important;
  margin-bottom: var(--as-space-7) !important;
}

/* .modes-sub excluded — the launcher subtitle is serif and sized by its
   own page rule; this sans clamp shrank it illegibly. */
.section-hero p,
.hub-hero p,
.dir-hero p,
.ct-hero p {
  max-width: var(--as-measure);
  font-size: clamp(16px, 1.2vw, 19px) !important;
  line-height: 1.74 !important;
}

/* Tables and dense grids become quiet ledgers. */
table,
.mig-table,
.billing-table,
.admin-table {
  border-collapse: collapse !important;
  background: transparent !important;
  border: 0 !important;
}

th,
td,
.mig-table th,
.mig-table td {
  border-bottom: 1px solid var(--as-hairline) !important;
  padding: 18px 10px !important;
}

th {
  color: var(--muted) !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}

/* Tabs are text navigation, not segmented controls. */
.billing-tabs,
.journal-tab-bar,
.tj-tab-bar,
.fr-tabs,
.svt-tabs,
.dir-conn-tabs,
.ap-seg,
.appearance-seg {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--as-hairline) !important;
  border-radius: 0 !important;
  gap: var(--as-space-5) !important;
  padding: 0 !important;
}

.billing-tab,
.journal-tab,
.tj-tab,
.fr-tab,
.svt-tab,
.dir-conn-tab,
.ap-opt,
.cal-view-btn,
.dir-filter-chip {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  color: var(--muted) !important;
  padding: 14px 0 !important;
}

.billing-tab.active,
.journal-tab.active,
.tj-tab.active,
.fr-tab.active,
.svt-tab.active,
.dir-conn-tab.active,
.ap-opt.active,
.cal-view-btn.active,
.dir-filter-chip.active {
  background: transparent !important;
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}

/* Modals: ceremonial sheets, not pop-up widgets. */
.modal-backdrop,
.modal-overlay,
.rx-modal-overlay,
.sv-modal {
  background: color-mix(in srgb, var(--bg) 74%, transparent) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.modal-box,
.rx-modal,
.sv-modal-card {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.modal-title {
  font-size: clamp(28px, 3vw, 42px) !important;
}

/* Empty states: quieter, more editorial. */
.empty,
.empty-panel,
.ct-empty,
.drv-empty,
.jlog-empty,
.wb-board-empty,
.welcome-state,
.rx-empty {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--as-hairline) !important;
  border-radius: 0 !important;
  color: var(--muted) !important;
  padding: var(--as-space-8) var(--as-space-5) !important;
}

.empty i,
.empty-panel i,
.ct-empty i,
.welcome-state .wi {
  color: var(--accent) !important;
  opacity: 0.42 !important;
}

/* Post-login space selection: editorial chapters, not app tiles. The title
   sits close under the topbar — it's a question, not a hero. */
.modes-stage {
  padding-top: clamp(14px, 2.5vh, 28px) !important;
}

.modes-title {
  /* Leads the page without swallowing it. At 92px the title ran 3.4x the
     27px space names, so the question dominated the answer; this holds it
     near the app's page-title scale, a step above what it introduces. */
  font-size: clamp(30px, 3.4vw, 46px) !important;
  line-height: 1.1 !important;
}

/* modes.html "Choose your space" — the side-by-side 3-column doorway cards
   are defined in modes.html's own <style>. The image-left stacked override
   that previously lived here was removed to restore that layout. */

/* Settings: Spaces should feel like choosing an environment. */
.settings-shell {
  grid-template-columns: minmax(220px, 260px) minmax(0, 860px) !important;
  gap: clamp(var(--as-space-6), 4vw, var(--as-space-8)) !important;
  align-items: start;
}

.settings-nav {
  position: sticky;
  top: var(--as-space-6);
  gap: var(--as-space-3) !important;
}

.settings-nav-item {
  padding: 12px 0 !important;
  border-bottom: 1px solid transparent !important;
}

.settings-nav-item:hover,
.settings-nav-item.active {
  background: transparent !important;
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}

.env-section {
  padding-top: var(--as-space-4);
}

.env-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--as-space-5) !important;
}

.env-card {
  min-height: 176px !important;
  padding: var(--as-space-5) !important;
  text-align: left !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
}

.env-card.active,
.env-card[aria-checked="true"] {
  border-color: var(--ink) !important;
  background: color-mix(in srgb, var(--surface) 62%, transparent) !important;
}

/* Reflection/chat surfaces: AI becomes a quiet reflection room. */
.coach-layout {
  height: calc(100vh - 110px) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: var(--as-space-7) !important;
}

.coach-sidebar,
.chat-area {
  background: transparent !important;
  border: 0 !important;
}

.sidebar-top,
.chat-header,
.chat-input-area {
  border-color: var(--as-hairline) !important;
}

.ai-avatar,
.msg.ai .msg-avatar,
.mode-badge {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--accent) !important;
}

.msg-bubble {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.msg.ai .msg-bubble {
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid var(--as-hairline) !important;
}

.msg.user .msg-bubble {
  background: var(--ink) !important;
  color: var(--bg) !important;
}

.typing-dots span {
  animation: none !important;
}

.input-row {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
}

/* Consultation / Connect / Directory: private-club ledgers. */
.ct-shell {
  grid-template-columns: 230px 1fr !important;
}

.ct-side {
  background: color-mix(in srgb, var(--surface) 68%, transparent) !important;
  border-right: 1px solid var(--as-hairline) !important;
  padding: var(--as-space-7) var(--as-space-5) !important;
}

.ct-tab {
  border-bottom: 1px solid transparent !important;
  padding: 13px 0 !important;
}

.ct-tab:hover,
.ct-tab.active {
  background: transparent !important;
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}

.ct-main,
.dir-main,
.connect-main {
  padding: clamp(var(--as-space-7), 6vw, var(--as-space-9)) clamp(var(--as-space-5), 5vw, var(--as-space-8)) !important;
}

.room-grid,
.dir-results,
.results-grid,
.clin-grid,
.rx-med-grid,
.rx-pharm-grid {
  gap: var(--as-space-6) !important;
}

/* Journal and writing spaces: notebook first, controls second. */
#section-journal .journal-app,
#section-journal .tj-journal-app {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#section-journal .journal-sidebar,
#section-journal .tj-sidebar,
#section-journal .analysis-panel,
#section-journal .tj-analysis-panel {
  background: transparent !important;
  border-color: var(--as-hairline) !important;
}

/* Long-form writing surface: book-scale serif (not display-scale) and a
   comfortable reading measure so in-depth entries stay easy to write and read. */
#journalEditor,
.tj-editor,
.tj-editor-textarea {
  font-family: var(--serif) !important;
  font-size: 17.5px !important;
  line-height: 1.8 !important;
  max-width: 76ch;
}

.editor-toolbar,
.tj-editor-toolbar {
  opacity: 0.72;
}

.editor-toolbar:hover,
.tj-editor-toolbar:hover {
  opacity: 1;
}

/* Billing/subscription/pricing: remove loud plan boxes. */
.plan-card,
.p-card,
.role-card {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  padding: var(--as-space-6) !important;
}

.plan-card.selected,
.p-card.selected,
.role-card.selected,
.plan-card.popular,
.p-card.popular {
  border-color: var(--ink) !important;
  background: color-mix(in srgb, var(--surface) 56%, transparent) !important;
}

/* Alerts/toasts: quiet notices. */
.toast,
.success-toast,
.auth-message,
.setup-banner,
.hipaa-notice-bar,
.phi-banner,
.clin-readonly,
.clin-status-bar {
  border-radius: 0 !important;
  border: 1px solid var(--as-hairline) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .hub-panel,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .rx-modal,
html[data-theme="dark"] .sv-modal-card {
  background: transparent !important;
}

html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] button.primary,
html[data-theme="dark"] a.primary,
html[data-theme="dark"] .new-chat-btn,
html[data-theme="dark"] .send-btn {
  background: var(--champagne) !important;
  border-color: var(--champagne) !important;
  color: var(--bg) !important;
}

@media (max-width: 900px) {
  .page {
    padding-left: var(--as-space-5) !important;
    padding-right: var(--as-space-5) !important;
  }

  .space,
  .settings-shell,
  .ct-shell,
  .coach-layout {
    grid-template-columns: 1fr !important;
  }

  .space-img {
    min-height: 160px;
  }

  .env-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════
   SIDEBAR — open + soft (appended last)
   More vertical breathing room between items and groups; the
   active state is a soft rounded wash, not a harsh grey pill;
   larger, calmer type. Matches the dark-rail mockups. */
body:has(.hub-shell) aside.hub-sidebar .sidebar-items-wrap { gap: 5px !important; padding: 12px 16px 20px !important; }
body:has(.hub-shell) aside.hub-sidebar .sidebar-item {
  padding: 11px 14px !important;
  font-size: 14px !important;
  gap: 15px !important;
  border-radius: 10px !important;
  letter-spacing: 0.005em !important;
}
body:has(.hub-shell) aside.hub-sidebar .sidebar-item .si-icon { font-size: 15px !important; }
body:has(.hub-shell) aside.hub-sidebar .sidebar-section-label {
  padding: 26px 14px 10px !important;
  letter-spacing: 0.16em !important;
  font-size: 10px !important;
  color: rgba(236,231,221,0.32) !important;
}
body:has(.hub-shell) aside.hub-sidebar .sidebar-item.active {
  background: rgba(255,255,255,0.045) !important;
  color: #FFFFFF !important;
}
body:has(.hub-shell) aside.hub-sidebar .sidebar-item.active::before { display: none !important; }
body:has(.hub-shell) aside.hub-sidebar .sidebar-profile { padding: 8px 16px 18px !important; }
body:has(.hub-shell) aside.hub-sidebar .sidebar-divider { margin: 2px 16px !important; background: rgba(255,255,255,0.06) !important; }

/* ════════════════════════════════════════════════════════════
   APPEARANCE — environment theme cards (Studio / Coast / Observatory)
   The Settings module to switch theme + nature. Looks like the mockup:
   three preview cards, the active one bordered with a check badge. */
.env-section { max-width: 580px; }
.env-section .env-head { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.env-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.env-card {
  position: relative; padding: 0; border: 1px solid var(--border); border-radius: 12px;
  background: none; cursor: pointer; overflow: hidden; height: 104px; display: block;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.env-card:hover { border-color: var(--accent); }
.env-card.env-active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.env-preview { position: absolute; inset: 0; }
.env-preview.studio { background: #EFECE6; }
.env-preview.studio::after { content: ''; position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%); width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(27,27,27,0.22); }
.env-preview.coast { background: url('Website%20Photos/personal/waves-shore-optimized.jpg') center/cover no-repeat, #9fb3bd url('Website%20Photos/personal/coastal-sunset.jpg') center/cover no-repeat; }
.env-preview.observatory {
  background:
    radial-gradient(1px 1px at 30% 30%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 62% 22%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.4px 1.4px at 75% 48%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 45% 60%, rgba(255,255,255,0.6), transparent),
    radial-gradient(circle at 60% 38%, rgba(157,176,198,0.22) 0%, transparent 46%),
    #0E0E0F;
}
.env-name {
  position: absolute; left: 0; right: 0; bottom: 0; top: 0;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16px;
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.01em;
}
.env-card .env-name { color: rgba(255,255,255,0.92); text-shadow: 0 1px 6px rgba(0,0,0,0.4); }
.env-card[data-env-set="studio"] .env-name { color: #1B1B1B; text-shadow: none; }
.env-check {
  position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink); color: var(--bg); display: none; align-items: center; justify-content: center;
  font-size: 11px; z-index: 2;
}
.env-card.env-active .env-check { display: flex; }

/* ════════════════════════════════════════════════════════════
   SIDEBAR — lighter text + clean inset highlight (appended last)
   Items read too bold vs the mockup; the active band was full-bleed.
   Regular weight, muted inactive / off-white active, and a soft
   inset rounded highlight (never edge-to-edge). */
body:has(.hub-shell) aside.hub-sidebar .sidebar-item,
body:has(.hub-shell) aside.hub-sidebar .sidebar-item .si-label {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
body:has(.hub-shell) aside.hub-sidebar .sidebar-item { color: rgba(242,238,232,0.60) !important; }
body:has(.hub-shell) aside.hub-sidebar .sidebar-item .si-icon { color: rgba(242,238,232,0.46) !important; }
body:has(.hub-shell) aside.hub-sidebar .sidebar-item:hover { color: rgba(242,238,232,0.92) !important; background: rgba(255,255,255,0.04) !important; }
body:has(.hub-shell) aside.hub-sidebar .sidebar-item.active,
body:has(.hub-shell) aside.hub-sidebar .sidebar-item.active .si-label { font-weight: 500 !important; }
body:has(.hub-shell) aside.hub-sidebar .sidebar-item.active {
  color: #F2EEE8 !important;
  background: rgba(255,255,255,0.055) !important;
  border-radius: 10px !important;
}
body:has(.hub-shell) aside.hub-sidebar .sidebar-items-wrap { padding: 12px 14px 20px !important; }

/* ════════════════════════════════════════════════════════════
   SETTINGS → horizontal tabs (mockup layout)
   The settings sub-nav moves from a left rail to a clean underline
   tab bar across the top; panels flow below. Same tabs/panels. */
#section-settings .st-shell { display: block !important; }
#section-settings .st-shell > aside.panel {
  background: none !important; border: none !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 0 30px !important; align-self: stretch !important;
}
#section-settings .st-nav {
  flex-direction: row !important; gap: 30px !important; flex-wrap: wrap !important;
  border-bottom: 1px solid var(--border) !important;
}
#section-settings .st-nav-item {
  background: none !important; color: var(--muted) !important; font-weight: 400 !important;
  padding: 8px 1px !important; border-radius: 0 !important;
  border-bottom: 2px solid transparent !important; margin-bottom: -1px !important;
  font-size: 14px !important; letter-spacing: 0 !important;
}
#section-settings .st-nav-item:hover { background: none !important; color: var(--ink) !important; }
#section-settings .st-nav-item.active {
  background: none !important; color: var(--ink) !important; font-weight: 500 !important;
  border-bottom-color: var(--ink) !important;
}
#section-settings .st-ni-icon { display: none !important; }

/* Appearance — locale selects under the theme cards (match mockup). */
.env-locale { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; max-width: 580px; }
.env-loc-row { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 20px; }
.env-loc-row > label { font-family: var(--sans); font-size: 12.5px; color: var(--muted); text-transform: none; letter-spacing: 0; margin: 0; }
.env-loc-row select {
  font-family: var(--sans); font-size: 13.5px; color: var(--ink);
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 12px; cursor: pointer; width: 100%;
}
.env-loc-row select:focus { outline: none; border-color: var(--accent); }

/* ════════════════════════════════════════════════════════════
   SIDEBAR/TOPBAR — final Astrasera rail geometry + truncation.
   Full-height rail like the mockups; brand is visually placed inside
   the rail, and names truncate instead of clipping. */
body:has(.hub-shell) aside.hub-sidebar {
  top: 0 !important;
  height: 100vh !important;
  padding-top: 0 !important;
}
body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-info { min-width: 0 !important; overflow: hidden !important; }
body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-name {
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 100% !important;
}
body:has(.hub-shell) aside.hub-sidebar .si-label {
  overflow: hidden !important; text-overflow: ellipsis !important;
  /* Line-height must exceed the font-size so descenders (g, p, y) aren't
     clipped by the overflow:hidden used for ellipsis truncation. */
  line-height: 1.5 !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-profile {
  min-height: 176px !important;
  padding: 94px 32px 28px 40px !important;
}

body:has(.hub-shell) aside.hub-sidebar .sidebar-items-wrap {
  padding: 0 18px 34px !important;
}

/* ── Sidebar top: no profile card — just the hamburger collapse button. ── */
body:has(.hub-shell) aside.hub-sidebar .sidebar-avatar,
body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-info {
  display: none !important;
}
body:has(.hub-shell) aside.hub-sidebar .sidebar-profile {
  min-height: 0 !important;
  /* Top padding clears the fixed brand that sits over the sidebar top. */
  /* The section-label "O" ink starts at ~32px (label letter-spacing/indent).
     Push the toggle right so the hamburger bars' left edge lands flush with
     that "O": glyph box ≈ padding+2, lands the bars flush at ~32px. */
  padding: 92px 30px 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  border-bottom: 0 !important;
}
body:has(.hub-shell) aside.hub-sidebar .sidebar-avatar {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-family: var(--sans) !important;
  overflow: hidden !important;
}
body:has(.hub-shell) aside.hub-sidebar .sidebar-avatar { order: 1 !important; }
body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-info {
  order: 2 !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 1px !important;
}
body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-name {
  font-family: var(--sans) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-role {
  font-size: 12px !important;
  font-weight: 400 !important;
}
body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-toggle,
body:has(.hub-shell) aside.hub-sidebar .sidebar-toggle {
  order: 3 !important;
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  border: 0 !important;
  background: transparent !important;
  padding: 4px !important;
}
body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-profile-info,
body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-profile-toggle,
body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-toggle {
  display: none !important;
}
body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-avatar { margin: 0 auto !important; }
body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-profile {
  justify-content: center !important;
  padding: 16px 0 !important;
}

/* ════════════════════════════════════════════════════════════
   Match the dark mockup exactly — stat dividers + "today" ring
   ════════════════════════════════════════════════════════════ */
/* Thin vertical dividers between the overview stats, as in the mockup.
   Dark only — the light overview stays flat (as previously approved). */
html[data-theme="dark"] body:has(.hub-shell) #section-overview .lux-stat {
  border-right: 1px solid var(--border) !important;
  border-bottom: none !important;
}
html[data-theme="dark"] body:has(.hub-shell) #section-overview .lux-stat:last-child {
  border-right: none !important;
}
/* "Today" filled cell in dark — a clearly-visible slate lift so it reads like
   the light theme's filled cell (dark's --accent-light alone is too faint). */
html[data-theme="dark"] body:has(.hub-shell) #section-overview .lux-day.today {
  background: rgba(94,110,132,0.28) !important;
  border-radius: 4px !important;
}

/* Assignment modal refinement — modern editorial form sheet.
   Styling only: preserves IDs, handlers, inputs, checkboxes, and save flow. */
.asgn-form-overlay,
#tAsgnModal.modal-overlay {
  background: color-mix(in srgb, var(--bg) 78%, rgba(14,14,15,0.42)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(0.9) !important;
  backdrop-filter: blur(14px) saturate(0.9) !important;
  padding: clamp(18px, 4vw, 56px) !important;
}

.asgn-form-modal,
#tAsgnModal .modal-box {
  width: min(760px, 92vw) !important;
  max-height: min(860px, 92vh) !important;
  overflow-y: auto !important;
  background: var(--bg) !important;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent) !important;
  border-radius: 0 !important;
  box-shadow: 0 28px 90px rgba(0,0,0,0.16) !important;
  padding: clamp(34px, 4.8vw, 58px) !important;
  gap: 26px !important;
}

.asgn-form-modal h3,
#tAsgnModal .modal-title {
  font-family: var(--sans) !important;
  font-size: clamp(24px, 2.6vw, 34px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.05 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

#tAsgnModal .modal-sub {
  max-width: 520px !important;
  margin: -12px 0 4px !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--muted) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.asgn-form-modal .form-stack,
#tAsgnModal .modal-field {
  gap: 22px !important;
}

.asgn-form-modal .form-stack > div,
#tAsgnModal .modal-field {
  margin: 0 0 22px !important;
}

.asgn-form-modal label,
#tAsgnModal .modal-field label,
#tAsgnModal label {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  color: var(--muted) !important;
  margin-bottom: 8px !important;
}

.asgn-form-modal label span,
#tAsgnModal label span {
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 400 !important;
  color: color-mix(in srgb, var(--muted) 80%, transparent) !important;
}

.asgn-form-modal input[type="text"],
.asgn-form-modal input[type="date"],
.asgn-form-modal textarea,
#tAsgnModal input[type="text"],
#tAsgnModal input[type="date"],
#tAsgnModal textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  background: color-mix(in srgb, var(--surface) 34%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent) !important;
  border-radius: 0 !important;
  padding: 18px 20px !important;
  min-height: 58px !important;
  font-family: var(--sans) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.5 !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.asgn-form-modal textarea,
#tAsgnModal textarea {
  min-height: 156px !important;
  resize: vertical !important;
}

.asgn-form-modal input::placeholder,
.asgn-form-modal textarea::placeholder,
#tAsgnModal input::placeholder,
#tAsgnModal textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 52%, transparent) !important;
  opacity: 1 !important;
}

.asgn-form-modal input:focus,
.asgn-form-modal textarea:focus,
#tAsgnModal input:focus,
#tAsgnModal textarea:focus {
  outline: 1px solid color-mix(in srgb, var(--accent) 62%, var(--border)) !important;
  outline-offset: 2px !important;
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border)) !important;
  background: transparent !important;
}

.asgn-client-checks,
#tAsgnClients {
  max-height: 210px !important;
  background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow-y: auto !important;
}

.asgn-client-checks label,
.t-client-check,
#tAsgnClients label {
  min-height: 54px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 0 18px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.asgn-client-checks label:last-child,
.t-client-check:last-child,
#tAsgnClients label:last-child {
  border-bottom: 0 !important;
}

.asgn-client-checks input[type="checkbox"],
.t-client-check input[type="checkbox"],
#tAsgnClients input[type="checkbox"],
.asgn-remind-row input[type="checkbox"],
#tAsgnCalRemind {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  border: 1px solid color-mix(in srgb, var(--border) 72%, var(--muted)) !important;
  border-radius: 6px !important;
  background: transparent !important;
  display: inline-grid !important;
  place-items: center !important;
  margin: 0 !important;
}

.asgn-client-checks input[type="checkbox"]:checked,
.t-client-check input[type="checkbox"]:checked,
#tAsgnClients input[type="checkbox"]:checked,
.asgn-remind-row input[type="checkbox"]:checked,
#tAsgnCalRemind:checked {
  background: color-mix(in srgb, var(--ink) 88%, var(--accent)) !important;
  border-color: color-mix(in srgb, var(--ink) 88%, var(--accent)) !important;
}

.asgn-client-checks input[type="checkbox"]:checked::after,
.t-client-check input[type="checkbox"]:checked::after,
#tAsgnClients input[type="checkbox"]:checked::after,
.asgn-remind-row input[type="checkbox"]:checked::after,
#tAsgnCalRemind:checked::after {
  content: "" !important;
  width: 6px !important;
  height: 11px !important;
  border: solid var(--bg) !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) translate(-1px, -1px) !important;
}

.asgn-remind-row,
#tAsgnModal .modal-actions + div,
#tAsgnModal div:has(> #tAsgnCalRemind) {
  align-items: flex-start !important;
  gap: 14px !important;
  margin-top: 4px !important;
}

.asgn-remind-row label,
#tAsgnModal label[for="tAsgnCalRemind"] {
  max-width: 560px !important;
  color: color-mix(in srgb, var(--ink) 78%, var(--muted)) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.55 !important;
  text-transform: none !important;
  margin: 1px 0 0 !important;
}

.asgn-form-actions,
#tAsgnModal .modal-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 28px !important;
}

.asgn-form-actions .btn,
#tAsgnModal .modal-actions .btn {
  min-width: 132px !important;
  min-height: 52px !important;
  border-radius: 999px !important;
  padding: 0 28px !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}

.asgn-form-actions .btn.ghost,
#tAsgnModal .modal-actions .btn.ghost {
  background: transparent !important;
  color: var(--ink) !important;
  border-color: color-mix(in srgb, var(--border) 92%, transparent) !important;
}

.asgn-form-actions .btn.primary,
#tAsgnModal .modal-actions .btn.primary {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border-color: var(--ink) !important;
}

html[data-theme="dark"] .asgn-form-modal,
html[data-theme="dark"] #tAsgnModal .modal-box {
  background: var(--surface) !important;
}

html[data-theme="dark"] .asgn-form-actions .btn.primary,
html[data-theme="dark"] #tAsgnModal .modal-actions .btn.primary {
  background: var(--champagne) !important;
  color: var(--bg) !important;
  border-color: var(--champagne) !important;
}

/* Astrasera wordmark correction.
   Match the mockup's engraved serif mark: tighter, smaller, and more
   refined than the previous wide sans caps. Styling only. */
.brand-name,
.topbar .brand-name,
body:has(.hub-shell) .brand-name,
body:has(.hub-shell) header.topbar .brand-name,
.lp-brand-name,
.modes-brand .wm {
  font-family: var(--serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: 0.18em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  color: var(--ink-soft) !important;
  padding-left: 0.18em !important;
  font-variation-settings: normal !important;
}

html[data-theme="dark"] .brand-name,
html[data-theme="dark"] .topbar .brand-name,
html[data-theme="dark"] body:has(.hub-shell) .brand-name,
html[data-theme="dark"] body:has(.hub-shell) header.topbar .brand-name,
body[data-backdrop="night"] .brand-name,
body[data-backdrop="night"] .topbar .brand-name {
  color: color-mix(in srgb, var(--ink) 76%, transparent) !important;
  text-shadow: 0 1px 10px color-mix(in srgb, var(--bg) 55%, transparent);
}

.lp-topbar:not(.scrolled) .lp-brand-name {
  color: color-mix(in srgb, var(--bg) 82%, transparent) !important;
}

body:has(.hub-shell) header.topbar .brand-logo,
body:has(.hub-shell) .topbar .brand-logo {
  width: 38px !important;
  height: 38px !important;
}

/* Dashboard topbar wordmark — small (the enso logo carries the size).
   Choose Your Space matches it: same mark, same lockup, one identity. */
html body:has(.hub-shell) header.topbar .brand-name,
html body .modes-brand .wm {
  font-size: 18px !important;
}

/* Phones and the narrowest splits: the fixed 230px rail left ~160px for
   content — one word per line. Below 760px the rail is always the icon
   rail (the collapsed treatment, applied unconditionally), which keeps the
   whole nav reachable and gives the page back to the page. */
@media (max-width: 760px) {
  body:has(.hub-shell) .hub-shell { grid-template-columns: 64px 1fr !important; }
  body:has(.hub-shell) aside.hub-sidebar { width: 64px !important; }
  body:has(.hub-shell) aside.hub-sidebar .sidebar-section-label,
  body:has(.hub-shell) aside.hub-sidebar .sidebar-divider,
  body:has(.hub-shell) aside.hub-sidebar .si-label,
  body:has(.hub-shell) aside.hub-sidebar .sidebar-avatar,
  body:has(.hub-shell) aside.hub-sidebar .sidebar-profile-info {
    display: none !important;
  }
  body:has(.hub-shell) aside.hub-sidebar .sidebar-items-wrap {
    gap: 6px !important;
    padding: 10px 8px !important;
    overflow-x: hidden !important;
  }
  body:has(.hub-shell) aside.hub-sidebar .sidebar-item {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    position: relative !important;
    border-radius: 12px !important;
  }
  body:has(.hub-shell) aside.hub-sidebar .sidebar-item .si-icon {
    width: 24px !important; height: 24px !important; font-size: 18px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
  }
  body:has(.hub-shell) aside.hub-sidebar .sidebar-badge {
    position: absolute !important;
    top: 5px !important; right: 5px !important;
    width: 8px !important; height: 8px !important;
    min-width: 0 !important; max-width: none !important;
    padding: 0 !important; margin: 0 !important;
    border-radius: 50% !important;
    font-size: 0 !important; line-height: 0 !important;
    display: block !important; opacity: 1 !important;
    pointer-events: none !important;
    background: var(--accent) !important;
  }
  body:has(.hub-shell) aside.hub-sidebar .sidebar-signout { padding: 8px !important; }
  /* The content offset tracks the rail it sits beside. */
  body:has(.hub-shell) .hub-main { margin-left: 64px !important; }
  body:has(.hub-shell) header.topbar { padding-left: 20px !important; }
}

/* Phone topbar: the enso mark carries the brand alone — the wordmark was
   colliding with the account chip. */
@media (max-width: 540px) {
  body:has(.hub-shell) header.topbar .brand-name { display: none !important; }
}

/* Collapsed sidebar spacing correction.
   Collapsed mode should read like a quiet icon rail, not an open menu with
   invisible headings still taking space. Styling only. */
@media (min-width: 901px) {
  body:has(.hub-shell) aside.hub-sidebar.collapsed {
    width: 72px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-profile {
    min-height: auto !important;
    /* Clear the fixed brand/topbar so the hamburger sits in the icon rail,
       not behind the topbar. */
    padding: 96px 0 12px !important;
    justify-content: center !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
  }

  body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-avatar,
  body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-profile-info {
    display: none !important;
  }

  body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-profile-toggle,
  body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-toggle {
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
  }

  body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-items-wrap {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    gap: 8px !important;
    padding: 12px 10px 10px !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
  }

  body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-section-label,
  body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-divider {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-item {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    border-radius: 12px !important;
  }

  body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-item .si-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body:has(.hub-shell) aside.hub-sidebar.collapsed .si-label {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* The unread count survives collapse as a corner dot. Absolute, so it can
     never join the row and shove the icon off-centre — which is what made
     badged items look disoriented next to their neighbours. */
  body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-item { position: relative !important; }
  body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-badge {
    position: absolute !important;
    top: 5px !important; right: 5px !important;
    width: 8px !important; height: 8px !important;
    min-width: 0 !important; max-width: none !important;
    padding: 0 !important; margin: 0 !important;
    border-radius: 50% !important;
    font-size: 0 !important; line-height: 0 !important;
    display: block !important; opacity: 1 !important;
    pointer-events: none !important;
    background: var(--accent) !important;
  }

  body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-signout {
    margin-top: auto !important;
    padding: 10px 10px 14px !important;
    flex: 0 0 auto !important;
  }

  body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-signout .sidebar-item {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
  }

  html:not([data-theme="dark"]) body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-item .si-icon,
  html[data-theme="light"] body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-item .si-icon {
    color: var(--muted) !important;
  }

  html:not([data-theme="dark"]) body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-item.active .si-icon,
  html[data-theme="light"] body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-item.active .si-icon {
    color: var(--accent) !important;
  }
}

/* ── Respect JS sidebar gating ──────────────────────────────────────
   .sidebar-item carries `display: flex !important` for layout, which would
   otherwise override the inline `style.display='none'` that scripts use to
   gate items by role/plan (Supervision, Supervisees, Practice Team,
   Consultation, Client View). This higher-specificity rule lets those gates
   actually hide the item. */
body:has(.hub-shell) aside.hub-sidebar .sidebar-item[style*="display:none"],
body:has(.hub-shell) aside.hub-sidebar .sidebar-item[style*="display: none"] {
  display: none !important;
}

/* ── Hide the sidebar scrollbar (scrolling still works) — a visible scrollbar
   broke up the dashboard. ── */
body:has(.hub-shell) aside.hub-sidebar,
body:has(.hub-shell) aside.hub-sidebar .sidebar-items-wrap {
  scrollbar-width: none !important;        /* Firefox */
  -ms-overflow-style: none !important;     /* IE / old Edge */
}
body:has(.hub-shell) aside.hub-sidebar::-webkit-scrollbar,
body:has(.hub-shell) aside.hub-sidebar .sidebar-items-wrap::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;                /* WebKit (Chrome/Safari) */
}

/* ── Same for the main dashboard scroll area (and master-detail panes):
   hide the scrollbar, keep scrolling. ── */
body:has(.hub-shell) .hub-main,
body:has(.hub-shell) .drv-body {
  scrollbar-width: none !important;        /* Firefox */
  -ms-overflow-style: none !important;     /* IE / old Edge */
}
body:has(.hub-shell) .hub-main::-webkit-scrollbar,
body:has(.hub-shell) .drv-body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;                /* WebKit (Chrome/Safari) */
}

/* ── Overview hero view toggle (Schedule / Sessions) — refined square
   segmented control instead of two rounded pills. ── */
body:has(.hub-shell) #section-overview .lux-hero-cta {
  display: inline-flex !important;
  gap: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  flex-shrink: 0;
}
body:has(.hub-shell) #section-overview .lux-hero-cta .btn {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 11px 24px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  min-height: 0 !important;
}
body:has(.hub-shell) #section-overview .lux-hero-cta .btn + .btn {
  border-left: 1px solid var(--border) !important;
}
body:has(.hub-shell) #section-overview .lux-hero-cta .btn.ghost {
  background: transparent !important;
  color: var(--ink) !important;
}
body:has(.hub-shell) #section-overview .lux-hero-cta .btn.ghost:hover {
  background: var(--surface) !important;
}
body:has(.hub-shell) #section-overview .lux-hero-cta .btn.primary {
  background: var(--ink) !important;
  color: var(--bg) !important;
}

/* ── Studio sidebar group (expand-on-hover, inline) ───────────────── */
.sidebar-group { position: relative; }
.sidebar-group-toggle .si-caret {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.5;
  transition: transform 0.25s ease;
}
.sidebar-group:hover .sidebar-group-toggle .si-caret,
.sidebar-group.expanded .sidebar-group-toggle .si-caret,
.sidebar-group.has-active .sidebar-group-toggle .si-caret { transform: rotate(180deg); }
.sidebar-subitems {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.28s ease, opacity 0.2s ease;
}
.sidebar-group:hover .sidebar-subitems,
.sidebar-group.expanded .sidebar-subitems,
.sidebar-group.has-active .sidebar-subitems { max-height: 360px; opacity: 1; }
body:has(.hub-shell) aside.hub-sidebar .sidebar-item.sub {
  padding-left: 24px !important;
  font-size: 0.94em;
}
body:has(.hub-shell) aside.hub-sidebar .sidebar-item.sub .si-icon { opacity: 0.85; }
/* Match the title-case of the top-level nav (sub labels were inheriting uppercase). */
body:has(.hub-shell) aside.hub-sidebar .sidebar-item.sub .si-label { text-transform: none !important; }

/* Studio tool section scaffolds — normal block flow; hub-main scrolls.
   The parent .section already carries the shared page gutter (padding: 0
   var(--as-page-pad-x) 74px) via the editorial layer, so the shell must NOT
   add its own inset — doing so double-padded Inner Work / Analysis Center,
   pushing their header ~38px down and ~52px right of every other module and
   leaving a dead margin against the sidebar. Zero it; the section provides
   the gutter, top alignment, and bottom breathing room. */
.studio-section.active { display: block !important; }
.studio-shell { width: 100%; padding: 0; box-sizing: border-box; }

/* Match the Schedule page: header sized like .section-hero h1, content FILLS the
   width (was narrow + left-anchored with blank space), squared editorial buttons.
   These beat each module's self-injected styles on specificity (.studio-shell .x). */
.studio-shell .pm-wrap, .studio-shell .rf-wrap, .studio-shell .ex-wrap,
.studio-shell .fw-wrap, .studio-shell .an-wrap { max-width: none !important; }
/* Reframe HOME fills the studio width like every other ledger (Sessions,
   Questions). It used to be pinned to a centred 760px column, which stranded
   ~40% of the row and squeezed the entries — it read as a widget dropped on
   the page rather than the page itself. It now inherits the max-width:none
   rule above; the working FORM keeps its own reading width. */
.studio-shell .pm-title, .studio-shell .rf-title, .studio-shell .ex-title,
.studio-shell .fw-title, .studio-shell .an-title { font-size: clamp(24px, 3vw, 32px) !important; line-height: 1.12 !important; margin-bottom: 6px; }
.studio-shell .pm-head, .studio-shell .rf-head, .studio-shell .ex-head,
.studio-shell .fw-head, .studio-shell .an-head { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.studio-shell .rf-btn, .studio-shell .ex-btn, .studio-shell .fw-btn, .studio-shell .an-btn,
.studio-shell .rf-send, .studio-shell .ex-send, .studio-shell .an-scope,
.studio-shell .an-gen, .studio-shell .rf-card, .studio-shell .ex-input,
.studio-shell .rf-input, .studio-shell .rf-area { border-radius: 0 !important; }

/* Inner Work — consolidated Patterns / Reframe / Beliefs workspace. The sub-nav
   sits at the top; each view hosts an existing tool module's shell. The view
   shells inherit the .studio-shell title/button overrides above (they're inside
   one). The module's own .x-head also serves as each view's heading. */
/* Inner Work follows the Schedule layout: a .section-hero (title left, the
   Patterns/Reframe/Beliefs tabs as the top-right controls, hairline beneath),
   then a full-width module. Uses the same Cormorant Garamond serif as every
   other header (Schedule, Overview) — no per-section font override. */
/* View tabs — their own text-nav row under the Inner Work header (the same
   treatment as the journal/billing tab rows), not tucked in the hero's
   top-right corner. */
#section-innerwork .iw-nav { display: flex; align-items: center; gap: 26px; margin: 18px 0 0; padding: 0 0 14px; border-bottom: 1px solid var(--border); }
/* "Inner Work" heading + hover-info widget */
.iw-hero-head { display: inline-flex; align-items: center; gap: 9px; }
.iw-info { position: relative; display: inline-flex; align-items: center; color: var(--muted); cursor: help; font-size: 15px; line-height: 1; align-self: center; }
.iw-info:hover, .iw-info:focus, .iw-info:focus-visible { color: var(--ink); outline: none; }
.iw-tip {
  position: absolute; top: calc(100% + 9px); left: 0; width: 300px;
  background: var(--paper, var(--surface)); color: var(--ink);
  border: 1px solid var(--border); border-radius: 9px; padding: 12px 14px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 400; line-height: 1.55; letter-spacing: 0;
  text-transform: none; box-shadow: 0 14px 34px -14px rgba(31,61,82,0.30);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 60;
}
.iw-tip strong { font-weight: 600; color: var(--ink); }
.iw-info:hover .iw-tip, .iw-info:focus .iw-tip, .iw-info:focus-within .iw-tip { opacity: 1; visibility: visible; transform: translateY(0); }
.iw-tab { font-family: var(--serif, Georgia, serif); font-size: 18px; font-weight: 400; color: var(--muted); background: none; border: none; padding: 0 0 6px; margin: 0; cursor: pointer; position: relative; transition: color .15s ease; }
.iw-tab:hover { color: var(--ink); }
.iw-tab.active { color: var(--ink); }
.iw-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--ink); }
.iw-view { display: none; }
.iw-view.active { display: block; margin-top: 4px; }
/* Patterns' intro state floats centred in the module. Reframe does NOT — its
   home is a ledger, so it starts under the header and flows down the page like
   Sessions and Questions. Vertically centring a ledger made it read as a
   floating widget rather than part of the page. */
#section-innerwork .iw-view.active:has(.pm-intro) {
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - 430px);
}
/* The section-hero owns the page header now — drop the redundant per-view titles
   and their divider; keep each view's sub description. */
.iw-view .pm-head, .iw-view .rf-head, .iw-view .fw-head, .iw-view .ex-head { margin-top: 0; border-bottom: none; padding-bottom: 0; }
.iw-view .pm-title, .iw-view .rf-title, .iw-view .fw-title, .iw-view .ex-title { display: none; }

/* Collapsed sidebar: Studio behaves like the flat groups — show its tool icons
   centered, and hide the redundant parent toggle + caret (which threw the icon
   out of alignment with the rest of the rail). */
body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-group-toggle { display: none !important; }
body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-group .sidebar-subitems { max-height: none !important; opacity: 1 !important; overflow: visible !important; }
body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-item.sub { padding-left: 0 !important; justify-content: center !important; }
.sidebar-group-toggle .si-caret { margin-left: auto; }
.studio-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 320px; color: var(--muted);
  font-family: var(--sans); font-size: 14px;
}
.studio-empty i { font-size: 30px; opacity: 0.4; }


/* ── Journal v2 (approved journal-rework) — client #section-journal ── */
#section-journal .jv2-hero { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 20px !important; }
/* No title-size override — "Your Journal" inherits the editorial section-hero
   h1 style so the journal header is pixel-identical to Schedule/Sessions. */
/* The journal tabs live inline in the hero next to New Entry (the Sessions
   header pattern), so the tab bar drops its full-width underline treatment —
   the hero's own hairline is the only divider. Covers both dashboards: the
   client's .journal-tab-bar and the clinician's .tj-tab-bar. */
#section-journal .jv2-hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; min-width: 0; }
/* New Entry + Fullscreen read as one pair: 8px between them, while the row's
   26px keeps the pair clear of the tabs. Both dashboards use this wrapper. */
#section-journal .jv2-hero-btns { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#section-journal .jv2-hero-btns .new-entry-btn.header-new,
#section-journal .jv2-hero-btns .tj-new-btn.tj-header-new { margin-top: 0 !important; }
#section-journal .jv2-hero-actions .journal-tab-bar,
#section-journal .jv2-hero-actions .tj-tab-bar { padding: 0 !important; border: 0 !important; border-bottom: 0 !important; background: transparent !important; gap: 22px !important; align-items: center !important; flex-wrap: wrap; }
#section-journal .jv2-hero-actions .journal-tab,
#section-journal .jv2-hero-actions .tj-tab { padding: 0 0 2px !important; background: transparent !important; white-space: nowrap; }
#section-journal .editor-header { display: none !important; }
#section-journal .editor-sub { display: none !important; }
#section-journal .journal-sidebar .analyze-btn { margin: 14px 0 6px !important; }
#section-journal .active-entry-info:empty { display: none !important; }
#section-journal .new-entry-btn.header-new,
#section-journal .tj-new-btn.tj-header-new { background: var(--ink) !important; color: var(--bg) !important; border: 1px solid var(--ink) !important; border-radius: 0 !important; padding: 11px 20px !important; font-size: 13px !important; letter-spacing: .04em !important; box-shadow: none !important; margin-top: 0 !important; width: auto !important; }
/* Fullscreen is the pair's secondary action — light, so New Entry stays the one dark primary. */
#section-journal #journalFullscreenHeaderBtn,
#section-journal #tjJournalFullscreenHeaderBtn { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--border) !important; }
#section-journal #journalFullscreenHeaderBtn:hover,
#section-journal #tjJournalFullscreenHeaderBtn:hover { border-color: var(--ink) !important; opacity: 1 !important; }
#section-journal .editor-toolbar { display: flex; align-items: center !important; justify-content: space-between !important; gap: 18px !important; border-top: 1px solid var(--ink) !important; border-bottom: 1px solid var(--border) !important; padding: 13px 32px !important; background: transparent !important; box-shadow: none !important; min-height: 0 !important; }
#section-journal .editor-meta { display: flex !important; align-items: center !important; gap: 16px !important; min-width: 0; flex: 1; }
@media (max-width: 1080px) {
  /* Split-screen: the toolbar becomes rows instead of a collision. Date and
     topic hold line one with the actions; the tab strip takes a full line
     under them, where it has room to be tabs. */
  #section-journal .editor-toolbar { flex-wrap: wrap !important; row-gap: 6px !important; }
  #section-journal .editor-meta { flex-wrap: wrap; row-gap: 4px; }
  #section-journal .editor-actions { margin-left: auto; }
  #section-journal .editor-date-label { white-space: nowrap; }
  #section-journal .entry-tabs { flex-basis: 100%; order: 9; margin: 2px 0 0; }
}
#section-journal .entry-tab { border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
#section-journal .editor-date-label { font-family: var(--serif) !important; font-style: italic !important; font-size: 14.5px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--muted) !important; font-weight: 400 !important; white-space: nowrap; }
#section-journal .subject-input { border: 0 !important; background: transparent !important; font-size: 13.5px !important; color: var(--muted) !important; padding: 4px 2px !important; max-width: 180px; cursor: pointer; }
#section-journal .subject-input:focus { color: var(--ink) !important; outline: none !important; }
#section-journal .btn-private { border: 0 !important; background: none !important; font-size: 12.5px !important; color: var(--muted) !important; padding: 4px 2px !important; letter-spacing: .01em; }
#section-journal .btn-private:hover { color: var(--ink) !important; }
#section-journal .editor-actions { display: flex !important; align-items: center !important; gap: 4px !important; }
#section-journal .jv2-ib { width: 38px !important; height: 38px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; background: none !important; color: var(--muted) !important; font-size: 16px !important; border-radius: 0 !important; box-shadow: none !important; }
#section-journal .jv2-ib:hover { color: var(--ink) !important; background: none !important; }
#section-journal .jv2-ib.recording, #section-journal .btn-dictate.recording { background: #e05050 !important; color: #fff !important; }
#section-journal .jv2-gone { display: none !important; }
#section-journal .jv2-more { position: relative; }
#section-journal .jv2-menu { position: absolute; right: 0; top: 44px; z-index: 60; background: var(--card); border: 1px solid var(--border); box-shadow: 0 14px 44px rgba(26,24,20,.14); min-width: 200px; padding: 6px 0; display: flex; flex-direction: column; }
#section-journal .jv2-menu[hidden] { display: none; }
#section-journal .jv2-menu button { border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; text-align: left !important; justify-content: flex-start !important; width: 100%; padding: 10px 16px !important; font-size: 13px !important; color: var(--ink) !important; display: flex; align-items: center !important; gap: 10px !important; }
#section-journal .jv2-menu button:hover { background: var(--surface) !important; }
#section-journal .jv2-menu .btn-delete { color: var(--clay, #A96F5F) !important; border-top: 1px solid var(--border) !important; margin-top: 4px; }
/* Cream-on-near-black at weight 500 renders thin under the page's
   antialiased smoothing and reads as a disabled button. Pure white at 600
   with subpixel smoothing gives it back the weight of a primary action. */
#section-journal .btn-save { background: var(--ink) !important; color: #fff !important; font-weight: 600 !important; -webkit-font-smoothing: subpixel-antialiased; border: 1px solid var(--ink) !important; border-radius: 0 !important; padding: 10px 22px !important; font-size: 13px !important; letter-spacing: .04em !important; margin-left: 12px !important; box-shadow: none !important; opacity: 1 !important; }
#section-journal .btn-save:hover { background: #000 !important; border-color: #000 !important; opacity: 1 !important; }
/* The guiding prompt keeps its lavender — it is the one surface in the
   journal that carries a color, so the editorial wash stops at its edge. */
#section-journal .prompt-block { max-width: var(--j-measure); margin: 0 0 0 !important; }
#section-journal .prompt-toggle { font-size: 12.5px !important; border: 0 !important; background: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 11px 18px 11px 15px !important; }
#section-journal .prompt-banner { border: 0 !important; background: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
/* The global input reset strips the frame and forces 11px 13px padding,
   which left the text sitting against the left border. This one is a box
   you write in, so it keeps its frame and its own even padding. */
#section-journal .prompt-text {
  background: var(--card) !important;
  border: 1px solid var(--purple-hair) !important;
  padding: 12px 14px !important;
}
#section-journal .prompt-text:focus { border-color: var(--purple) !important; }
/* The writing column tracks the space it's given. min() means the measure
   caps the line on a wide screen but never leaves the column half-empty when
   the analysis rail folds away — the text breathes out as the rail closes
   and draws back in as it opens, in step with the grid's own transition. */
#section-journal { --j-measure: min(1500px, 100%); }
#section-journal .rte { font-family: var(--serif) !important; font-size: 21px !important; line-height: 1.95 !important; font-weight: 400 !important; max-width: var(--j-measure); padding-top: 22px !important; }
#section-journal .format-bar,
#section-journal .entry-questions,
#section-journal #journalAttachStrip,
#section-journal .linked-entries-bar { max-width: var(--j-measure); }
#section-journal .rte[data-placeholder]:empty::before { font-style: italic; opacity: .55; }
/* The border and background now belong to .editor-foot, which owns the
   pinned strip; the bar itself just lays the controls out. */
#section-journal .format-bar { border-top: 0 !important; background: var(--card) !important; padding: 6px 0 2px !important; gap: 4px !important; box-shadow: none !important; }
#section-journal .format-bar button { width: 40px !important; height: 40px !important; font-size: 17px !important; border: 0 !important; background: none !important; color: var(--muted) !important; border-radius: 0 !important; }
#section-journal .format-bar button:hover { color: var(--ink) !important; }
/* Active formatting at the caret — the same state ⌘B / ⌘I toggles. */
#section-journal .format-bar button.fmt.on { color: var(--ink) !important; background: var(--surface) !important; }
#section-journal .word-counter { font-size: 12.5px !important; color: var(--muted) !important; }
#section-journal .analyze-btn { width: 100%; background: none !important; border: 1px solid var(--border) !important; color: var(--muted) !important; font-size: 12px !important; letter-spacing: .04em !important; padding: 11px !important; border-radius: 0 !important; box-shadow: none !important; }
#section-journal .analyze-btn:hover:not(:disabled) { border-color: var(--ink) !important; color: var(--ink) !important; }


/* Boards header actions: New leads in ink, Open is the quiet ghost. */
.wb-topbar .wb-new-board-btn[data-action="new-board"] { background: var(--ink) !important; color: var(--bg) !important; border: 1px solid var(--ink) !important; border-radius: 0 !important; letter-spacing: .04em; }
.wb-topbar .wb-new-board-btn[data-action="new-board"]:hover { opacity: .85; }
.wb-topbar .wb-new-board-btn[data-action="open-picker"] { background: none !important; color: var(--muted) !important; border: 1px solid var(--border) !important; border-radius: 0 !important; letter-spacing: .04em; }
.wb-topbar .wb-new-board-btn[data-action="open-picker"]:hover { color: var(--ink) !important; border-color: var(--ink) !important; }


/* Clinician detail overview: one editorial stat line, equal scale across
   the trio (the .stat-card luxe clamp blew "None yet" up past the numerals). */
.clst-row { display: flex; gap: clamp(44px, 7vw, 130px); margin: 4px 0 34px; flex-wrap: wrap; }
.clst-k { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.clst-v { font-family: var(--serif); font-size: 30px; font-weight: 400; color: var(--ink); margin-top: 10px; font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1, 'onum' 0; letter-spacing: .01em; line-height: 1.15; }


/* Sessions: the 48px section gap read as a hole between the tab bar and the
   first seam — this page's rhythm is carried by the seams themselves. */
body:has(.hub-shell) #section-sessions#section-sessions#section-sessions.section.active { gap: 26px !important; }

/* ════════════════════════════════════════════
   GUIDE — feature-discovery companion
   (pill + side panel; content from guide-manifest.js)
   ════════════════════════════════════════════ */
/* The enso is the guide, named — the mark leads the pill, the word "Guide"
   beside it. Tokens invert it with the theme: ink pill, white mark and cream
   text by day; light pill, dark mark and ink text by night. */
#guidePill {
  position: fixed; right: 26px; bottom: 26px; z-index: 3800;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ink) !important; color: var(--bg) !important;
  border: 1px solid var(--ink) !important; border-radius: 999px !important;
  padding: 10px 20px 10px 13px !important;
  font-family: var(--sans) !important; font-size: 12.5px !important;
  font-weight: 500 !important; letter-spacing: .06em !important;
  cursor: pointer; box-shadow: 0 8px 28px rgba(26,24,20,.22);
  transition: transform .18s ease, box-shadow .18s ease;
}
#guidePill img { width: 22px; height: 22px; object-fit: contain; filter: invert(1) opacity(.92); }
#guidePill:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(26,24,20,.28); }
html[data-theme="dark"] #guidePill { box-shadow: 0 8px 28px rgba(0,0,0,.45); }
html[data-theme="dark"] #guidePill img { filter: none; opacity: .9; }

#guidePanel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 94vw); z-index: 3900;
  background: var(--bg); border-left: 1px solid var(--border);
  box-shadow: -18px 0 60px rgba(26,24,20,.14);
  display: flex; flex-direction: column;
  transform: translateX(103%); transition: transform .22s ease;
}
#guidePanel.open { transform: translateX(0); }
#guidePanel .guide-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
#guidePanel .guide-title { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink); letter-spacing: .01em; }
#guidePanel .guide-x { background: none !important; border: 0 !important; color: var(--muted) !important; font-size: 14px; cursor: pointer; padding: 4px 6px !important; box-shadow: none !important; }
#guidePanel .guide-x:hover { color: var(--ink) !important; }
#guidePanel .guide-tabs { display: flex; gap: 22px; padding: 12px 24px 0; border-bottom: 1px solid var(--border); flex-shrink: 0; }
#guidePanel .guide-tabs button {
  background: none !important; border: 0 !important; border-bottom: 2px solid transparent !important;
  border-radius: 0 !important; box-shadow: none !important;
  font-family: var(--sans) !important; font-size: 13px !important; font-weight: 500 !important;
  color: var(--muted) !important; padding: 6px 0 10px !important; cursor: pointer;
}
#guidePanel .guide-tabs button.on { color: var(--ink) !important; border-bottom-color: var(--ink) !important; }
#guidePanel .guide-body { flex: 1; overflow-y: auto; padding: 20px 24px 28px; }

#guidePanel .guide-area-h { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 18px; color: var(--ink); margin: 2px 0 6px; }
#guidePanel .guide-area-h i { font-size: 15px; color: var(--muted); }
#guidePanel .guide-sub { font-size: 13px; color: var(--muted); line-height: 1.65; margin: 0 0 14px; }
#guidePanel .guide-feat { padding: 12px 0; border-bottom: 1px solid var(--border); }
#guidePanel .guide-feat:last-of-type { border-bottom: 0; }
#guidePanel .guide-feat-n { font-size: 13.5px; font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#guidePanel .guide-feat-w { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-top: 3px; }
#guidePanel .guide-how { margin: 8px 0 0; padding-left: 18px; }
#guidePanel .guide-how li { font-size: 12px; color: var(--muted); line-height: 1.7; }
#guidePanel .guide-tier { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 500; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }

#guidePanel .guide-acc { border-bottom: 1px solid var(--border); }
#guidePanel .guide-acc summary { display: flex; align-items: center; gap: 10px; padding: 13px 2px; cursor: pointer; list-style: none; }
#guidePanel .guide-acc summary::-webkit-details-marker { display: none; }
#guidePanel .guide-acc summary i { font-size: 14px; color: var(--muted); flex-shrink: 0; }
#guidePanel .guide-acc-l { font-size: 13.5px; font-weight: 500; color: var(--ink); flex: 1; }
#guidePanel .guide-seen, #guidePanel .guide-new { font-size: 10.5px; letter-spacing: .04em; border-radius: 999px; padding: 2px 9px; }
#guidePanel .guide-seen { color: var(--green, #3d7a4f); background: color-mix(in srgb, var(--green, #3d7a4f) 10%, transparent); }
/* "Your first week" — the post-arrival checklist (therapists, Explore tab) */
#guidePanel .guide-fw { border: 1px solid var(--border); background: var(--card, #fff); padding: 16px 18px 12px; margin: 0 0 18px; }
#guidePanel .guide-fw-t { font-family: var(--serif, Georgia, serif); font-size: 17px; font-weight: 400; color: var(--ink); margin: 0 0 4px; }
#guidePanel .guide-fw-s { font-size: 12px; color: var(--muted); margin: 0 0 12px; line-height: 1.55; }
#guidePanel .guide-fw-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-light, var(--border)); }
#guidePanel .guide-fw-row .ic { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); color: transparent; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
#guidePanel .guide-fw-row.done .ic { background: var(--green, #3d7a4f); border-color: var(--green, #3d7a4f); color: #fff; }
#guidePanel .guide-fw-row .lb { flex: 1; font-size: 12.5px; color: var(--ink); }
#guidePanel .guide-fw-row.done .lb { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
#guidePanel .guide-fw-row .go { font-size: 11px; color: var(--accent); background: none; border: none; cursor: pointer; padding: 2px; font-family: var(--sans); }
#guidePanel .guide-fw-hide { display: block; margin-top: 8px; font-size: 10.5px; color: var(--muted); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; font-family: var(--sans); }
#guidePanel .guide-new { color: var(--muted); border: 1px solid var(--border); }
#guidePanel .guide-acc-b { padding: 2px 2px 16px; }
#guidePanel .guide-go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  background: var(--ink) !important; color: var(--bg) !important; border: 1px solid var(--ink) !important;
  border-radius: 0 !important; padding: 8px 16px !important; font-size: 12px !important;
  font-weight: 500 !important; letter-spacing: .03em !important; cursor: pointer; box-shadow: none !important;
}
#guidePanel .guide-go.sm { padding: 5px 12px !important; font-size: 11px !important; margin-top: 8px; display: block; }

#guidePanel .guide-chat { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; max-height: 52vh; overflow-y: auto; }
#guidePanel .guide-msg { font-size: 13px; line-height: 1.65; padding: 10px 14px; max-width: 92%; }
#guidePanel .guide-msg.user { align-self: flex-end; background: var(--ink); color: var(--bg); }
#guidePanel .guide-msg.assistant { align-self: flex-start; background: var(--surface); color: var(--ink); border: 1px solid var(--border); }
#guidePanel .guide-askrow { display: flex; gap: 8px; }
#guidePanel .guide-askrow input {
  flex: 1; min-width: 0; font-family: var(--sans); font-size: 13px; color: var(--ink);
  background: var(--card); border: 1px solid var(--border); border-radius: 0; padding: 10px 12px;
}
#guidePanel .guide-askrow input:focus { outline: none; border-color: var(--ink); }
#guidePanel .guide-askrow button {
  background: var(--ink) !important; color: var(--bg) !important; border: 1px solid var(--ink) !important;
  border-radius: 0 !important; padding: 10px 18px !important; font-size: 12.5px !important; cursor: pointer; box-shadow: none !important;
}
@media print { #guidePill, #guidePanel { display: none !important; } }

/* ── Questions: collapse the section rhythm. The global 48px child gap
   (rule ~6521) stacked four times here — hero → composer → filters → ledger
   read as separate widgets adrift in dead air. The page is one instrument:
   composer under the hero, filters under the composer, ledger right after.
   (Same exemption the journal already has via :not(#section-journal).) ── */
/* The :not(#…) chains mirror the competing rules at ~4715 and ~3549 — IDs
   inside :not() count toward specificity, so those selectors carry two IDs
   and a plain #section-questions rule loses to them despite coming later. */
body:has(.hub-shell) #section-questions.section.active:not(#section-overview):not(#section-journal) { gap: 0 !important; }
body:has(.hub-shell) #section-questions.section .section-hero { margin-bottom: 20px !important; }
body:has(.hub-shell) #section-questions .qlog-compose { margin: 0 0 14px !important; }
body:has(.hub-shell) #section-questions .qlog-segs { margin-bottom: 18px !important; }

/* ── Notifications: collapse the section rhythm (same fix as Questions).
   The editorial child gap (~56px at desktop) sat between the hero and the
   card, and the card added its own 24px on top — the filters floated in
   ~80px of dead air. Hero, filters, list now read as one instrument.
   The :not(#…) chain matches the competing gap rule's specificity (IDs
   inside :not() count), same as the Questions exemption above. ── */
body:has(.hub-shell) #section-notifications.section.active:not(#section-overview):not(#section-journal) { gap: 0 !important; }
body:has(.hub-shell) #section-notifications.section .section-hero { margin-bottom: 18px !important; }
/* Keep the card's side padding (the list's -24px gutters depend on it);
   drop only the top so the filters sit on the hero's rhythm. */
body:has(.hub-shell) #section-notifications > .card { padding-top: 0 !important; }

/* Notifications — Mark All As Read. A full button with the New Entry
   footprint (11px 20px, 13px type), in the pastel blue the palette calls
   ocean. Lives here because Notifications renders on BOTH dashboards, and
   the client page never loads the clinician sheet. */
.ntf-markall, .as-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
  color: var(--ocean-d, #5E6E84) !important;
  background: var(--ocean-w, #E8EAED) !important;
  border: 1px solid color-mix(in srgb, var(--ocean, #6E7D91) 36%, transparent) !important;
  border-radius: 0 !important;
  padding: 11px 20px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease !important;
}
.ntf-markall:hover, .as-btn:hover {
  background: color-mix(in srgb, var(--ocean, #6E7D91) 14%, var(--ocean-w, #E8EAED)) !important;
  border-color: var(--ocean, #6E7D91) !important;
}
.ntf-markall:disabled, .as-btn:disabled { opacity: .5 !important; cursor: default !important; }
/* Compact variant for inline row actions — same button, less footprint. */
.as-btn--sm { padding: 7px 14px !important; font-size: 12.5px !important; }

/* ── Overview: state of play — the week and the mind ───────────
   Two named columns. "The week." is a ledger of kind-dotted rows
   (ocean session · sage assignment · gold money), each a door to
   its module; "The mind." holds the open question on the purple
   wash. Empty facts are still omitted, never announced. */
.lux-state-band {
  background: var(--bg);
  padding: 24px 0 30px;
  border-bottom: 1px solid var(--border-light);
  margin: 0 calc(-1 * var(--as-page-pad-x, clamp(24px, 2.6vw, 46px)));
}
.lux-sb-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 8px 56px;
  align-items: start;
  padding: 0 var(--as-page-pad-x, clamp(24px, 2.6vw, 46px));
}
.lux-sb-h {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  padding-bottom: 9px;
  margin: 0;
}
.lux-wk-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 2px;
  border-top: 1px solid var(--border-light);
  cursor: pointer;
  transition: background .14s ease;
}
.lux-wk-row:first-child { border-top: none; }
.lux-wk-row:hover { background: color-mix(in srgb, var(--ink) 3.5%, transparent); }
.lux-wk-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; position: relative; top: -1px; }
.lux-wk-dot.oc { background: var(--ocean); }
.lux-wk-dot.sg { background: var(--green); }
.lux-wk-dot.gd { background: var(--gold); }
.lux-wk-k {
  flex: 0 0 88px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.lux-wk-v { font-family: var(--serif); font-size: 16px; line-height: 1.45; color: var(--ink); min-width: 0; }
.lux-state-due { color: var(--amber); }
.lux-wk-car { margin-left: auto; align-self: center; color: var(--muted); font-size: 11px; }
.lux-wk-quiet { font-family: var(--serif); font-size: 16.5px; line-height: 1.55; color: var(--muted); padding: 13px 2px 0; }
.lux-q-card {
  border-left: 3px solid var(--purple);
  background: color-mix(in srgb, var(--purple) 5%, transparent);
  padding: 15px 20px 15px 17px;
  margin-top: 13px;
}
.lux-q-lead {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple);
  font-weight: 600;
}
.lux-q-text {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink);
  margin-top: 7px;
}
.lux-q-actions { display: flex; gap: 10px; margin-top: 13px; }
@media (max-width: 900px) {
  .lux-sb-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ── Session pages get the dashboards' header ───────────────────
   The header styling above is gated on body:has(.hub-shell), which the
   session lobby / recap page never matches — it wraps in .overview-page.
   So it kept rendering the old dark Self Shelf bar. Same rules, same
   gate shape, applied to the session shell. */
body:has(.overview-page) header.topbar {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border-light) !important;
  padding: 22px 36px 18px !important;
}
body:has(.overview-page) .topbar .brand-logo {
  filter: none !important;
  opacity: 0.78;
}
body:has(.overview-page) .brand-name {
  font-family: var(--serif) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
}
body:has(.overview-page) .topbar .nav-actions { gap: 16px !important; align-items: center; }
body:has(.overview-page) .topbar .btn {
  min-height: 44px !important;
  height: 44px !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body:has(.overview-page) .topbar .user-bubble {
  min-height: 44px !important;
  height: 44px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 4px 10px 4px 4px !important;
}
body:has(.overview-page) .topbar .user-bubble:hover {
  background: color-mix(in srgb, var(--ink) 5%, transparent) !important;
  border: 0 !important;
}

/* ═══ The menu row — the hamburger gets a name (2026-08-27) ═══
   Replaces the orphan ≡: a labeled row at the top of the rail in the
   section-label grammar. Appended last so it wins the earlier
   .sidebar-toggle geometry overrides at equal specificity. */
body:has(.hub-shell) aside.hub-sidebar .sidebar-toggle.sidebar-menu-row {
  order: 0 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  width: auto !important;
  height: auto !important;
  margin: 6px 0 2px !important;
  padding: 10px 14px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer;
  color: var(--muted) !important;
  text-align: left !important;
}
/* Hamburger sits in the same icon box as every .si-icon below it
   (22px wide, 18px glyph, 15px gap under the editorial layer), and
   the label takes the item-label type — same columns, same sizes. */
body:has(.hub-shell) aside.hub-sidebar .sidebar-menu-row i {
  /* !important outranks the generic .sidebar-toggle i 14px rule above */
  font-size: 18px !important; width: 22px; text-align: center; flex-shrink: 0;
}
body:has(.hub-shell) aside.hub-sidebar .sidebar-menu-row .smr-label {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  letter-spacing: normal; text-transform: none;
}
body:has(.hub-shell) aside.hub-sidebar .sidebar-menu-row:hover {
  color: var(--ink) !important;
  background: transparent !important;
}
/* Dark rail keeps its own palette */
body:has(.hub-shell):not([data-backdrop="ocean"]) aside.hub-sidebar .sidebar-menu-row {
  color: rgba(236,231,221,0.52) !important;
}
body:has(.hub-shell):not([data-backdrop="ocean"]) aside.hub-sidebar .sidebar-menu-row:hover {
  color: #ECE7DD !important;
}
/* Collapsed: the icon alone, centered on the same axis as the items
   (they collapse to padding 11px 8px, no side margins). */
body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-menu-row {
  justify-content: center !important;
  margin: 6px 0 2px !important;
  padding: 11px 8px !important;
}
body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-menu-row .smr-label { display: none; }
/* Menu row alignment: match the section-label left edge in every theme
   (the light-rail block above wins on specificity, so mirror its prefixes). */
html:not([data-theme="dark"]) body:has(.hub-shell) aside.hub-sidebar .sidebar-toggle.sidebar-menu-row,
html[data-theme="light"] body:has(.hub-shell) aside.hub-sidebar .sidebar-toggle.sidebar-menu-row,
html body:has(.hub-shell) aside.hub-sidebar .sidebar-toggle.sidebar-menu-row {
  width: 100% !important;
  height: auto !important;
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  margin: 6px 0 2px !important;
  padding: 10px 14px !important;
}
html body:has(.hub-shell) aside.hub-sidebar.collapsed .sidebar-toggle.sidebar-menu-row {
  width: 100% !important;
  justify-content: center !important;
  margin: 6px 0 2px !important;
  padding: 11px 8px !important;
}
/* Narrow rail (≤760px): the items become 44px centered icon tiles —
   the menu row takes the identical tile so the hamburger stays on
   the same axis; the label steps out with the others. */
@media (max-width: 760px) {
  html body:has(.hub-shell) aside.hub-sidebar .sidebar-toggle.sidebar-menu-row {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
  }
  body:has(.hub-shell) aside.hub-sidebar .sidebar-menu-row .smr-label { display: none !important; }
}