/* ═══════════════════════════════════════════════
   SELF SHELF — Global Design System
   Editorial · Luxe palette
   Fraunces (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 Fraunces (serif, variable axis) + DM Sans (sans, variable).
   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=Fraunces:ital,opsz,wght,SOFT@0,9..144,200..700,30..100;1,9..144,200..600,30..100&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

:root {
  /* ── Surfaces ── */
  --bg:           #F4F0E6;     /* bone — primary page background */
  --surface:      #EEE8D8;     /* linen — recessed surface */
  --card:         #FFFFFF;     /* paper — card / hero surface */
  --paper:        #FFFFFF;     /* alias of --card for luxe rules */
  --bone:         #F4F0E6;     /* alias of --bg */
  --linen:        #EEE8D8;     /* alias of --surface */
  --ivory:        #F9F5EB;     /* ivory — sidebar surface */
  --putty:        #E2DAC4;     /* putty — deeper accent surface */

  /* ── Ink ── */
  --ink:          #14130F;     /* deep ink — text + primary buttons */
  --ink-soft:     #3A3631;     /* secondary text */
  --muted:        #756F60;     /* meta text, eyebrows */
  --whisper:      #ADA48B;     /* tertiary, light meta */

  /* ── Lines & shadows ── */
  --border:       #DCD3BD;     /* primary hairline */
  --border-light: #ECE5D3;     /* whisper hairline */
  --line:         #DCD3BD;     /* alias */
  --line-w:       #ECE5D3;     /* alias */
  --shadow:       rgba(31,61,82,0.07);   /* cool drop shadow */

  /* ── Accent · Ocean ── */
  --accent:       #1F3D52;     /* ocean-deep — primary accent (was navy) */
  --accent-light: #ECF1F4;     /* ocean wash */
  --accent-mid:   rgba(56,91,114,0.15);
  --ocean:        #385B72;     /* ocean — mid */
  --ocean-d:      #1F3D52;     /* ocean — deep (alias of --accent) */
  --ocean-f:      #5C8FA8;     /* ocean — fresh (lively italic accents) */
  --ocean-w:      #ECF1F4;     /* ocean — whisper wash */
  --ocean-h:      #D5DEE3;     /* ocean — hairline */
  --ocean-m:      #E5EDF1;     /* ocean — 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;

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

  /* ── Type stacks ── */
  --serif: 'Fraunces', 'Instrument Serif', Georgia, 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('https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=3840&q=95&auto=format&fit=crop&fm=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; }

*, *::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.32em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 6px;
}

.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: 14px 22px;
  border-radius: 0;
  font-size: 11px;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  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: 10px;
  letter-spacing: 0.2em;
}

/* 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: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  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: 'Instrument Serif', 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 {
  display: grid;
  grid-template-columns: 240px 1fr auto;
  width: 100%;
  height: 100%;
  min-height: 600px;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Instrument Sans', sans-serif;
  overflow: hidden;
  border-radius: 0;
  border: 1px solid var(--border);
}

/* ── Sidebar (board list) — flatter, more editorial ── */
.wb-sidebar {
  border-right: 1px solid var(--border);
  background: var(--card);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wb-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
}
.wb-sidebar-head h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
  margin: 0;
}
.wb-new-board-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  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: var(--card);
  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: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wb-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  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-style: italic;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 10px;
  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; }

/* ── 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-root { 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: 'Instrument Serif', 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;
}

/* ── 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 22px;
  border-right: 1px solid var(--border-light);
  position: relative;
}
.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: 9.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 12px;
}
.lux-stat .v {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 96, "SOFT" 50;
  font-size: 42px;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-feature-settings: "tnum";
}
.lux-stat .v em {
  font-style: italic;
  color: var(--ocean-f);
  font-variation-settings: "opsz" 96, "SOFT" 100, "wght" 300;
}
.lux-stat .v small {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  font-weight: 300;
  color: var(--muted);
  margin-left: 4px;
}
.lux-stat .sub { display: none; }

/* ── 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;
}
.lux-card-h h3 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin: 0;
}
.lux-card-h .ct {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--muted);
  font-weight: 500;
}
.lux-card-h .more {
  font-family: var(--sans);
  font-size: 10.5px;
  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;
  cursor: pointer;
}
.lux-card-h .more:hover { color: var(--ink); border-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: 26px;
  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; }
}

/* ── 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); } }

/* ── 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;
}
.lux-sanctuary .attr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 12px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.lux-sanctuary .attr-btn:hover {
  background: var(--ink);
  color: #fff;
}
.lux-sanctuary .attr-btn i {
  font-size: 11px;
}

/* ── 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) .da-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) .da-asgn-left,
body[data-backdrop="ocean"] .section:not(#section-overview) .da-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) .da-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) .da-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.
   ════════════════════════════════════════════════════════════ */
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;
}