/* =============================================================================
   Pages in your look (2026-10-10): Today, Practice, Journal, You — and every
   other page built on /css/redesign.css — dressed in the theme you picked on
   Talk, after Tariq's Lovable pages: the coach's scene behind (dimmed), frosted
   glass cards, Crimson Pro headings, coach-coloured glow on what's selected.
   Applied by <html data-look data-look-mode> (/shell/look.js). Only design
   tokens and the shared dr- components change; page logic is untouched.
   ============================================================================= */
@font-face { font-family: 'Crimson Pro'; font-weight: 400; font-display: swap; src: url('/fonts/crimson-pro/CrimsonPro-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Crimson Pro'; font-weight: 500; font-display: swap; src: url('/fonts/crimson-pro/CrimsonPro-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Crimson Pro'; font-weight: 600; font-display: swap; src: url('/fonts/crimson-pro/CrimsonPro-SemiBold.ttf') format('truetype'); }

/* ── tokens: dark ─────────────────────────────────────────────────────── */
html[data-look] {
  --dr-bg: #0a0710;
  --dr-text: #f6f1fb;
  --dr-soft: rgba(246,241,251,.74);
  --dr-muted: rgba(246,241,251,.56);
  --dr-line: rgba(255,255,255,.1);
  --dr-line-2: rgba(255,255,255,.18);
  --dr-card: rgba(12,8,20,.66);
  --dr-glass: rgba(255,255,255,.1);
  --dr-glass-on: rgba(255,255,255,.18);
  --dr-glass-edge: rgba(255,255,255,.26);
  --dr-display: 'Crimson Pro', Georgia, serif;
  --dr-font: 'Inter', system-ui, -apple-system, sans-serif;
  --th-dim: linear-gradient(180deg, rgba(8,5,12,.62), rgba(8,5,12,.78) 45%, rgba(8,5,12,.86));
  --th-blur: blur(16px);
}
/* the themes' coach colours (Talk's accents), as rgb triplets */
html[data-look] body[data-coach="muse"]    { --dr-c: 255,79,163;  --dr-c-deep: 112,22,66; }
html[data-look] body[data-coach="flora"]   { --dr-c: 255,194,46;  --dr-c-deep: 110,76,6; }
html[data-look] body[data-coach="echo"]    { --dr-c: 47,212,255;  --dr-c-deep: 10,84,108; }
html[data-look] body[data-coach="compass"] { --dr-c: 52,224,122;  --dr-c-deep: 14,92,48; }
html[data-look] body[data-coach="eirene"]  { --dr-c: 76,141,255;  --dr-c-deep: 22,52,120; }
html[data-look] body[data-coach="socius"]  { --dr-c: 255,138,31;  --dr-c-deep: 112,52,6; }
html[data-look] body[data-coach="alethea"] { --dr-c: 180,92,255;  --dr-c-deep: 72,26,120; }

/* ── the scene behind the page ────────────────────────────────────────── */
html[data-look] body.spa-overlay #spa-overlay-host { background: var(--dr-bg); }
html[data-look] body.spa-overlay #spa-overlay-host::before,
html[data-look] body.shell-page::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--th-dim), var(--dr-scene) 46% 40% / cover no-repeat;
  transition: background .6s ease;
}
html[data-look] body.shell-page { background: var(--dr-bg); }
html[data-look] #spa-overlay-host > *:not(.dr-tabbar), html[data-look] body.shell-page > *:not(.dr-tabbar) { position: relative; z-index: 1; }
html[data-look] .dr-main::before { display: none; }

/* ── type ─────────────────────────────────────────────────────────────── */
html[data-look] .dr-main { font-family: var(--dr-font); }
html[data-look] .dr-h1 { font-weight: 500; font-size: 2.5rem; letter-spacing: 0; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
html[data-look] .dr-h2 { font-weight: 500; font-size: 1.6rem; }
html[data-look] .dr-label { letter-spacing: .2em; font-weight: 600; color: var(--dr-soft); }

/* ── glass cards ──────────────────────────────────────────────────────── */
html[data-look] .dr-card {
  background: var(--dr-card); border-color: var(--dr-line-2);
  backdrop-filter: var(--th-blur); -webkit-backdrop-filter: var(--th-blur);
  box-shadow: 0 10px 34px rgba(0,0,0,.28);
}
html[data-look] .dr-card-tint {
  background: linear-gradient(130deg, rgba(var(--dr-tint, var(--dr-c)),.2), var(--dr-card) 70%);
  border-color: rgba(var(--dr-tint, var(--dr-c)),.45);
  backdrop-filter: var(--th-blur); -webkit-backdrop-filter: var(--th-blur);
  box-shadow: 0 10px 34px rgba(0,0,0,.28), 0 0 14px rgba(var(--dr-tint, var(--dr-c)),.12);
}
html[data-look] .dr-empty { background: rgba(12,8,20,.45); border-color: var(--dr-line-2);
  backdrop-filter: var(--th-blur); -webkit-backdrop-filter: var(--th-blur); }

/* ── buttons & chips: pills, the coach colour glows on what's on ──────── */
html[data-look] .dr-btn { background: rgba(255,255,255,.08); border-color: var(--dr-line-2); font-weight: 600;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
html[data-look] .dr-btn:hover { background: rgba(var(--dr-c),.16); border-color: rgba(var(--dr-c),.6); }
html[data-look] .dr-btn-coach, html[data-look] .dr-btn-primary {
  background: radial-gradient(ellipse at 50% 30%, rgba(var(--dr-c),.55), rgba(var(--dr-c-deep),.92));
  border: 1.5px solid rgba(var(--dr-c),.95); box-shadow: 0 0 12px rgba(var(--dr-c),.45), inset 0 0 12px rgba(var(--dr-c),.25); }
html[data-look] .dr-btn-ghost { background: rgba(12,8,20,.35); }
html[data-look] .dr-btn-quiet { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-look] .dr-chip { background: rgba(12,8,20,.4); border-color: var(--dr-line-2); color: var(--dr-soft);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
html[data-look] .dr-chip:hover { border-color: rgba(var(--dr-c),.6); color: var(--dr-text); }
html[data-look] .dr-chip.on, html[data-look] .dr-chip.tint.on {
  background: radial-gradient(ellipse at 50% 30%, rgba(var(--dr-c),.42), rgba(var(--dr-c-deep),.85));
  border-color: rgba(var(--dr-c),.95); color: #fff; box-shadow: 0 0 10px rgba(var(--dr-c),.4); }
html[data-look] .dr-seg { background: rgba(12,8,20,.5); border-color: var(--dr-line-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
html[data-look] .dr-seg button.on { background: radial-gradient(ellipse at 50% 30%, rgba(var(--dr-c),.45), rgba(var(--dr-c-deep),.9));
  box-shadow: inset 0 0 0 1px rgba(var(--dr-c),.9), 0 0 10px rgba(var(--dr-c),.35); }
html[data-look] .dr-btn:focus-visible, html[data-look] .dr-chip:focus-visible, html[data-look] .dr-seg button:focus-visible,
html[data-look] .dr-switch:focus-visible { outline-color: rgb(var(--dr-c)); }

/* ── tab bar over the scene ───────────────────────────────────────────── */
html[data-look] .dr-tabbar .dr-tab.on { color: rgb(var(--dr-c)); }
@media (min-width: 761px) {
  html[data-look] .dr-tabbar { background: rgba(9,6,14,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  html[data-look] .dr-tabbar::before { font-family: var(--dr-display); font-weight: 500; font-size: 1.6rem; }
}

/* ══ light ════════════════════════════════════════════════════════════
   Dark text on white glass. The older pages assume light text, so the white
   text they set on buttons is turned dark here too. */
html[data-look-mode="light"] {
  --dr-bg: #f5f1f8;
  --dr-text: #241a33;
  --dr-soft: rgba(36,26,51,.72);
  --dr-muted: rgba(36,26,51,.56);
  --dr-line: rgba(40,20,70,.1);
  --dr-line-2: rgba(40,20,70,.16);
  --dr-card: rgba(255,255,255,.8);
  --dr-glass: rgba(255,255,255,.7);
  --dr-glass-on: rgba(255,255,255,.92);
  --dr-glass-edge: rgba(40,20,70,.18);
  --th-dim: linear-gradient(180deg, rgba(250,247,252,.55), rgba(250,247,252,.72) 45%, rgba(250,247,252,.82));
}
html[data-look-mode="light"] .dr-h1 { text-shadow: 0 0 18px rgba(255,255,255,.9); }
html[data-look-mode="light"] .dr-card, html[data-look-mode="light"] .dr-card-tint { box-shadow: 0 10px 34px rgba(40,20,70,.1); }
html[data-look-mode="light"] .dr-card-tint { background: linear-gradient(130deg, rgba(var(--dr-tint, var(--dr-c)),.16), var(--dr-card) 70%); }
html[data-look-mode="light"] .dr-empty { background: rgba(255,255,255,.6); }
html[data-look-mode="light"] .dr-btn, html[data-look-mode="light"] .dr-btn-ghost { background: rgba(255,255,255,.75); color: var(--dr-text); }
html[data-look-mode="light"] .dr-btn:hover { background: rgba(var(--dr-c),.14); }
html[data-look-mode="light"] .dr-btn-coach, html[data-look-mode="light"] .dr-btn-primary,
html[data-look-mode="light"] .dr-chip.on, html[data-look-mode="light"] .dr-chip.tint.on, html[data-look-mode="light"] .dr-seg button.on {
  color: #fff; background: linear-gradient(180deg, rgba(var(--dr-c-deep),.82), rgb(var(--dr-c-deep))); border-color: rgb(var(--dr-c-deep)); }
html[data-look-mode="light"] .dr-chip { background: rgba(255,255,255,.7); }
html[data-look-mode="light"] .dr-seg { background: rgba(255,255,255,.7); }
html[data-look-mode="light"] .dr-switch { background: rgba(40,20,70,.2); }
html[data-look-mode="light"] .dr-check { border-color: rgba(40,20,70,.3); color: var(--dr-text); }
html[data-look-mode="light"] .dr-check.on { color: #fff; }
html[data-look-mode="light"] .dr-toast { background: rgba(255,255,255,.96); color: var(--dr-text); }
html[data-look-mode="light"] .dr-main input, html[data-look-mode="light"] .dr-main textarea, html[data-look-mode="light"] .dr-main select { color: var(--dr-text); }
html[data-look-mode="light"] .dr-main ::placeholder { color: var(--dr-muted); }
html[data-look-mode="light"] body.spa-overlay .dr-tabbar,
html[data-look-mode="light"] body.shell-page .dr-tabbar { background: rgba(255,255,255,.86); border-color: rgba(40,20,70,.1); }
html[data-look-mode="light"] body.spa-overlay .dr-tabbar .dr-tab,
html[data-look-mode="light"] body.shell-page .dr-tabbar .dr-tab { color: rgba(36,26,51,.66); }
html[data-look-mode="light"] body.spa-overlay .dr-tabbar::before,
html[data-look-mode="light"] body.shell-page .dr-tabbar::before { color: #241a33; }
html[data-look-mode="light"] .dr-tabbar .dr-tab.on { color: rgb(var(--dr-c-deep)); }

/* ══ Journal (its own jr- tokens) ═════════════════════════════════════ */
html[data-look] body.journal-page {
  --jr-bg: var(--dr-bg); --jr-text: var(--dr-text); --jr-soft: var(--dr-soft); --jr-muted: var(--dr-muted);
  --jr-line: var(--dr-line-2); --jr-card: var(--dr-card); --jr-light: var(--dr-text);
}
html[data-look] .journal-page .jr-main::before { display: none; }
html[data-look] .jr-composer, html[data-look] .jr-card {
  background: var(--dr-card); border-color: var(--dr-line-2);
  backdrop-filter: var(--th-blur); -webkit-backdrop-filter: var(--th-blur); box-shadow: 0 10px 34px rgba(0,0,0,.28); }
html[data-look] .jr-composer { border-color: rgba(var(--dr-c),.45); box-shadow: 0 10px 34px rgba(0,0,0,.28), 0 0 14px rgba(var(--dr-c),.12); }
html[data-look] .jr-tabs, html[data-look] .jr-search { background: rgba(12,8,20,.5); border-color: var(--dr-line-2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
html[data-look] .jr-tab.on, html[data-look] .jr-btn.primary {
  background: radial-gradient(ellipse at 50% 30%, rgba(var(--dr-c),.45), rgba(var(--dr-c-deep),.9));
  border-color: rgba(var(--dr-c),.95); color: #fff; box-shadow: 0 0 10px rgba(var(--dr-c),.35); }
html[data-look] .jr-ta, html[data-look] .jr-three input { background: rgba(8,5,12,.45); border-color: rgba(var(--dr-c),.35); }
html[data-look] .jr-ta:focus { box-shadow: 0 0 12px rgba(var(--dr-c),.25); }
html[data-look] .jr-h1, html[data-look] .journal-page h1 { font-family: var(--dr-display); font-weight: 500; }

/* ══ light: the pages' own hard-coded light-on-dark bits ═══════════════ */
html[data-look-mode="light"] .dr-btn-danger, html[data-look-mode="light"] .jr-btn.danger { color: #fff; }
html[data-look-mode="light"] .dr-skel, html[data-look-mode="light"] .jr-skel {
  background: linear-gradient(90deg, rgba(40,20,70,.04), rgba(40,20,70,.09), rgba(40,20,70,.04)); background-size: 200% 100%; }
/* Today */
html[data-look-mode="light"] .dr-today-tod, html[data-look-mode="light"] .dr-today-week-icon { background: rgba(255,255,255,.75); }
html[data-look-mode="light"] .dr-today-opener { background: rgba(255,255,255,.7); color: var(--dr-text); }
html[data-look-mode="light"] .dr-today-dots span { background: rgba(40,20,70,.18); }
html[data-look-mode="light"] .dr-today-step { background: var(--dr-card); border-color: var(--dr-line-2); }
html[data-look-mode="light"] .dr-today-play { color: var(--dr-text); background: rgba(255,255,255,.85); border-color: var(--dr-line-2); }
html[data-look-mode="light"] .dr-today-week { background: linear-gradient(130deg, rgba(var(--dr-c),.14), var(--dr-card) 70%); color: var(--dr-text); }
/* Practice */
html[data-look-mode="light"] .dr-pr-day, html[data-look-mode="light"] .dr-pr-habit, html[data-look-mode="light"] .dr-pr-item { background: var(--dr-card); }
html[data-look-mode="light"] .dr-pr-dot { background: #fff; color: var(--dr-text); }
html[data-look-mode="light"] .dr-pr-wd { background: rgba(40,20,70,.12); }
html[data-look-mode="light"] .dr-pr-wd.future { background: rgba(40,20,70,.06); }
html[data-look-mode="light"] .dr-pr-wd.today { box-shadow: inset 0 0 0 1.5px rgba(40,20,70,.4); }
html[data-look-mode="light"] .dr-pr-input { background: rgba(255,255,255,.8); color: var(--dr-text); }
html[data-look-mode="light"] .dr-pr-dashes span, html[data-look-mode="light"] .dr-pr-grab { background: rgba(40,20,70,.2); }
html[data-look-mode="light"] .dr-pr-sheet { background: #fbf9fd; border-top-color: var(--dr-line-2); color: var(--dr-text); }
html[data-look-mode="light"] .dr-pr-box { border-color: rgba(40,20,70,.35); color: var(--dr-text); }
/* You */
html[data-look-mode="light"] .dr-you-ring span { background: #fff; }
html[data-look-mode="light"] .dr-you-mem, html[data-look-mode="light"] .dr-you-more, html[data-look-mode="light"] .dr-you-row,
html[data-look-mode="light"] .dr-you-rowbtn { border-bottom-color: var(--dr-line); }
html[data-look-mode="light"] .dr-you-undo, html[data-look-mode="light"] .dr-you-time, html[data-look-mode="light"] .dr-you-namein { background: rgba(255,255,255,.75); color: var(--dr-text); }
html[data-look-mode="light"] .dr-you-speed span { background: rgba(40,20,70,.1); }
/* Journal */
html[data-look-mode="light"] .jr-composer, html[data-look-mode="light"] .jr-card { box-shadow: 0 10px 34px rgba(40,20,70,.1); }
html[data-look-mode="light"] .jr-tabs, html[data-look-mode="light"] .jr-search { background: rgba(255,255,255,.7); }
html[data-look-mode="light"] .jr-tab.on, html[data-look-mode="light"] .jr-btn.primary {
  background: linear-gradient(180deg, rgba(var(--dr-c-deep),.82), rgb(var(--dr-c-deep))); border-color: rgb(var(--dr-c-deep)); color: #fff; }
html[data-look-mode="light"] .jr-mode, html[data-look-mode="light"] .jr-chip, html[data-look-mode="light"] .jr-tpill,
html[data-look-mode="light"] .jr-icon, html[data-look-mode="light"] .jr-btn.ghost { border-color: var(--dr-line-2); background: rgba(255,255,255,.6); color: var(--dr-text); }
html[data-look-mode="light"] .jr-mode.on { background: rgba(255,255,255,.95); }
html[data-look-mode="light"] .jr-ta, html[data-look-mode="light"] .jr-three input { background: rgba(255,255,255,.75); color: var(--dr-text); }
html[data-look-mode="light"] .jr-to input { border-bottom-color: var(--dr-line-2); color: var(--dr-text); }
html[data-look-mode="light"] .jr-dot, html[data-look-mode="light"] .jr-switch { background: rgba(40,20,70,.14); }
html[data-look-mode="light"] .jr-mood { background: rgba(40,20,70,.08); }
html[data-look-mode="light"] .jr-empty { border-color: var(--dr-line-2); background: rgba(255,255,255,.55); }
html[data-look-mode="light"] .jr-composer[data-mode="dream"], html[data-look-mode="light"] .jr-card[data-mode="dream"] {
  background: linear-gradient(130deg, rgba(80,92,170,.14), var(--dr-card) 70%); }
/* Journal's own fonts follow the look's */
html[data-look] .jr-main { font-family: var(--dr-font); }
html[data-look] .jr-main .serif, html[data-look] .jr-head h1, html[data-look] .jr-ehead h2, html[data-look] .jr-ptext, html[data-look] .jr-to,
html[data-look] .jr-echo, html[data-look] .jr-dreamhead span, html[data-look] .jr-ta.serif, html[data-look] .jr-resurface p { font-family: var(--dr-display); }
html[data-look] .jr-head h1 { font-weight: 500; font-size: 2.5rem; letter-spacing: 0; }
/* light: text colours the pages fix for a dark ground */
html[data-look-mode="light"] .dr-pr-meta, html[data-look-mode="light"] .dr-pr-slotmeta, html[data-look-mode="light"] .dr-pr-libmeta,
html[data-look-mode="light"] .dr-pr-imins, html[data-look-mode="light"] .dr-today-week-l, html[data-look-mode="light"] .dr-today-week-icon { color: var(--dr-soft); }
html[data-look-mode="light"] .dr-you-warn { color: #8e3426; }
html[data-look-mode="light"] .dr-you-delstart { color: #b5432e; }
html[data-look-mode="light"] .dr-you-delstart:hover { color: #8e3426; }
html[data-look-mode="light"] .jr-dreamhead { color: #4a52a0; }
html[data-look-mode="light"] .jr-ta::placeholder, html[data-look-mode="light"] .jr-three input::placeholder { color: var(--dr-muted); }
html[data-look-mode="light"] .dr-today-prompt-icon { color: #8a6a2a; }
html[data-look-mode="light"] body.spa-overlay .dr-tabbar .dr-tab.on,
html[data-look-mode="light"] body.shell-page .dr-tabbar .dr-tab.on { color: rgb(var(--dr-c-deep)); }

/* ══ Coach emblems instead of coloured balls (Tariq's pages show the coach's
   theme icon wherever a coach appears) ═══════════════════════════════════ */
html[data-look] .dr-orb { background: var(--dr-ico) center / cover no-repeat; box-shadow: 0 0 16px rgba(var(--dr-c),.45); }
html[data-look] .dr-coach-muse .dr-orb, html[data-look] .dr-orb.dr-coach-muse { background-image: var(--dr-ico-muse); }
html[data-look] .dr-coach-flora .dr-orb, html[data-look] .dr-orb.dr-coach-flora { background-image: var(--dr-ico-flora); }
html[data-look] .dr-coach-echo .dr-orb, html[data-look] .dr-orb.dr-coach-echo { background-image: var(--dr-ico-echo); }
html[data-look] .dr-coach-compass .dr-orb, html[data-look] .dr-orb.dr-coach-compass { background-image: var(--dr-ico-compass); }
html[data-look] .dr-coach-eirene .dr-orb, html[data-look] .dr-orb.dr-coach-eirene { background-image: var(--dr-ico-eirene); }
html[data-look] .dr-coach-socius .dr-orb, html[data-look] .dr-orb.dr-coach-socius { background-image: var(--dr-ico-socius); }
html[data-look] .dr-coach-alethea .dr-orb, html[data-look] .dr-orb.dr-coach-alethea { background-image: var(--dr-ico-alethea); }
html[data-look-mode="light"] .dr-orb { box-shadow: 0 2px 10px rgba(var(--dr-c-deep),.25); }

/* ══ Line icons (/shell/lucide.js) ══════════════════════════════════════ */
.dr-ic { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.18em; }

/* Icons in place (Practice: needs, day, habits, library) */
html[data-look] .dr-chip { display: inline-flex; align-items: center; gap: 7px; }
html[data-look] .dr-chip .dr-ic { width: 16px; height: 16px; }
html[data-look] .dr-pr-slotlabel { display: inline-flex; align-items: center; gap: 5px; }
html[data-look] .dr-pr-slotlabel .dr-ic { width: 14px; height: 14px; color: rgb(var(--sc, var(--dr-c))); }
html[data-look] .dr-pr-sugic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: rgb(var(--dr-c)); border: 1px solid var(--dr-line-2); }
html[data-look] .dr-pr-sugic .dr-ic { width: 20px; height: 20px; }
html[data-look] .dr-pr-sugg { justify-content: flex-start; }
html[data-look] .dr-pr-sugg .dr-pr-sugtext { flex: 1; }
html[data-look] .dr-pr-libic { display: grid; place-items: center; border-radius: 50%; color: rgb(var(--dr-c));
  border: 1px solid rgba(var(--dr-c),.45); background: rgba(var(--dr-c),.1); }
html[data-look] .dr-pr-libic .dr-ic { width: 22px; height: 22px; }
html[data-look] .dr-you-delstart svg { margin-left: 6px; }

/* Per theme, as on Tariq's pages: dark 2 and 3 select more softly than dark 1 */
html[data-look="2"][data-look-mode="dark"] .dr-chip.on, html[data-look="3"][data-look-mode="dark"] .dr-chip.on,
html[data-look="2"][data-look-mode="dark"] .dr-seg button.on, html[data-look="3"][data-look-mode="dark"] .dr-seg button.on,
html[data-look="2"][data-look-mode="dark"] .jr-tab.on, html[data-look="3"][data-look-mode="dark"] .jr-tab.on {
  background: radial-gradient(ellipse, rgba(var(--dr-c),.3), rgba(16,10,26,.85)); box-shadow: 0 0 8px rgba(var(--dr-c),.3); }
/* light: what's selected is a pale tint with a glowing edge; main buttons are filled */
html[data-look-mode="light"] .dr-chip.on, html[data-look-mode="light"] .dr-chip.tint.on, html[data-look-mode="light"] .dr-seg button.on,
html[data-look-mode="light"] .jr-tab.on {
  color: var(--dr-text); background: rgba(var(--dr-c),.18); border-color: rgb(var(--dr-c-deep));
  box-shadow: 0 0 10px rgba(var(--dr-c),.35); }
html[data-look-mode="light"] .dr-btn-coach, html[data-look-mode="light"] .dr-btn-primary, html[data-look-mode="light"] .jr-btn.primary {
  color: #fff; border-color: transparent; box-shadow: 0 0 14px rgba(var(--dr-c),.35);
  background: linear-gradient(100deg, rgba(var(--dr-c-deep),.75), rgb(var(--dr-c-deep))); }

/* The guided practice player stays a dark, full-screen breathing space in
   every look: light mode's tokens and button rules don't reach inside it. */
html[data-look-mode="light"] .dr-pr-player {
  --dr-text: #f6f1fb; --dr-soft: rgba(246,241,251,.74); --dr-muted: rgba(246,241,251,.56);
  --dr-line: rgba(255,255,255,.1); --dr-line-2: rgba(255,255,255,.18); --dr-card: rgba(12,8,20,.66); }
html[data-look-mode="light"] .dr-pr-player .dr-btn, html[data-look-mode="light"] .dr-pr-player .dr-btn-ghost {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
html[data-look-mode="light"] .dr-pr-player .dr-btn:hover { background: rgba(255,255,255,.16); }
html[data-look-mode="light"] .dr-pr-player .dr-switch { background: rgba(255,255,255,.18); }
html[data-look-mode="light"] .dr-pr-player .dr-switch[aria-checked="true"] { background: rgb(var(--dr-c)); }
html[data-look-mode="light"] .dr-pr-player .dr-pr-dashes span { background: rgba(255,255,255,.15); }
html[data-look-mode="light"] .dr-pr-player .dr-pr-input { background: rgba(255,255,255,.06); color: #f6f1fb; }
html[data-look-mode="light"] .dr-pr-player .dr-check { border-color: rgba(255,255,255,.35); color: #fff; }
html[data-look-mode="light"] .dr-pr-player .dr-pr-meta, html[data-look-mode="light"] .dr-pr-player .dr-pr-imins { color: #c9c5bd; }
html[data-look-mode="light"] .dr-pr-player .dr-pr-dashes span.on { background: rgb(var(--pc)); }

/* ══ Talk's pop-ups in the theme ═══════════════════════════════════════
   Practice / habit / pattern suggestions (healing.js .dsp-notification):
   glass card with the coach's emblem, centred at the bottom like the
   session popup instead of covering the coach list. */
html[data-look] body.dr-themed .dsp-notification {
  left: 50%; right: auto; transform: translateX(-50%); bottom: 28px; width: min(460px, calc(100vw - 24px)); max-width: none;
  background: rgba(12,8,20,.86); border: 1px solid rgba(var(--dr-c),.6); border-radius: 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 18px rgba(var(--dr-c),.2); font-family: var(--dr-font); }
html[data-look] body.dr-themed .dsp-notification.show { transform: translateX(-50%); }
html[data-look] body.dr-themed .dsp-notification .notification-icon {
  width: 40px; height: 40px; background: var(--dr-ico) center / cover no-repeat; box-shadow: 0 0 14px rgba(var(--dr-c),.45); }
html[data-look] body.dr-themed .dsp-notification .notification-body strong { font-family: var(--dr-display); font-weight: 500; font-size: 20px; }
html[data-look] body.dr-themed .dsp-notification .notification-actions { padding-left: 52px; }
html[data-look] body.dr-themed .dsp-notification .notification-btn { font-family: var(--dr-font); font-weight: 600; }
html[data-look] body.dr-themed .dsp-notification .notification-btn.primary {
  background: radial-gradient(ellipse at 50% 30%, rgba(var(--dr-c),.55), rgba(var(--dr-c-deep),.92));
  box-shadow: inset 0 0 0 1.5px rgba(var(--dr-c),.95), 0 0 12px rgba(var(--dr-c),.35); }
@media (max-width: 760px) {
  html[data-look] body.dr-themed .dsp-notification { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
html[data-look-mode="light"] body.dr-themed .dsp-notification { background: rgba(255,255,255,.94); color: var(--dr-text);
  box-shadow: 0 18px 50px rgba(40,20,70,.18), 0 0 14px rgba(var(--dr-c),.2); }
html[data-look-mode="light"] body.dr-themed .dsp-notification .notification-body,
html[data-look-mode="light"] body.dr-themed .dsp-notification p, html[data-look-mode="light"] body.dr-themed .dsp-notification .notification-message { color: var(--dr-text); }
html[data-look-mode="light"] body.dr-themed .dsp-notification .notification-title { color: rgb(var(--dr-c-deep)); }
html[data-look-mode="light"] body.dr-themed .dsp-notification .ritual-duration { background: rgba(40,20,70,.06); color: var(--dr-soft); border-color: var(--dr-line-2); }
html[data-look-mode="light"] body.dr-themed .dsp-notification .notification-btn.primary {
  color: #fff; background: linear-gradient(100deg, rgba(var(--dr-c-deep),.75), rgb(var(--dr-c-deep))); box-shadow: 0 0 12px rgba(var(--dr-c),.3); }
html[data-look-mode="light"] body.dr-themed .dsp-notification .notification-btn.secondary { color: var(--dr-text); border-color: var(--dr-line-2); }

/* Small status notices (utils.js showNotification: "Signed in", "Message
   queued — reconnecting…"): a glass pill at the top instead of a coloured box. */
html[data-look] .notification.notification-info, html[data-look] .notification.notification-success,
html[data-look] .notification.notification-error, html[data-look] .notification.notification-warning {
  top: 76px !important; right: auto !important; left: 50% !important; transform: translateX(-50%);
  background: rgba(12,8,20,.9) !important; color: #f6f1fb !important; border: 1px solid rgba(var(--dr-c),.55);
  border-radius: 999px !important; padding: 10px 20px !important; font: 500 14px var(--dr-font);
  box-shadow: 0 10px 30px rgba(0,0,0,.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: none !important; }
html[data-look] .notification.notification-error { border-color: #e2725b; }
html[data-look-mode="light"] .notification.notification-info, html[data-look-mode="light"] .notification.notification-success,
html[data-look-mode="light"] .notification.notification-warning { background: rgba(255,255,255,.95) !important; color: var(--dr-text) !important; }
html[data-look] .notification.notification-info, html[data-look] .notification.notification-success,
html[data-look] .notification.notification-error, html[data-look] .notification.notification-warning { width: max-content; max-width: calc(100vw - 32px); }
@media (max-width: 760px) {
  html[data-look] .notification.notification-info, html[data-look] .notification.notification-success,
  html[data-look] .notification.notification-error, html[data-look] .notification.notification-warning { top: calc(env(safe-area-inset-top, 0px) + 14px) !important; }
}
/* light: "on" states the light overrides above would grey out */
html[data-look-mode="light"] .dr-switch[aria-checked="true"] { background: rgb(var(--dr-c-deep)); }
html[data-look-mode="light"] .jr-toggle.on .jr-switch { background: rgb(var(--tint)); }
html[data-look-mode="light"] .jr-switch span { background: #fff; }
html[data-look-mode="light"] .dr-you-speed.fill span { background: rgba(var(--dr-c-deep), calc(.45 + var(--k) * .11)); }

/* ══ Sign-in in the default look (Theme 1, dark): Compass's scene, the seven
   coaches' emblems on the ring, glass button. Nobody is signed in yet, so it
   doesn't follow a saved look. ══════════════════════════════════════════ */
html[data-look] .login-screen.dr-login {
  background: linear-gradient(180deg, rgba(8,5,12,.55), rgba(8,5,12,.78) 55%, rgba(8,5,12,.9)),
              url('/img/themes/compass-bg-dark.webp?v=3') 46% 40% / cover no-repeat, #0a0710; }
html[data-look] .login-screen.dr-login::before { display: none; }
html[data-look] .dr-login-ring { border-color: rgba(255,255,255,.12); }
html[data-look] .dr-login-ring .dr-orb { width: 40px; height: 40px; margin: -20px 0 0 -20px; background-size: cover; background-position: center; }
html[data-look] .dr-login-ring .dr-orb.dr-coach-compass { background-image: url('/img/themes/icon-compass.webp'); box-shadow: 0 0 16px rgba(52,224,122,.55); }
html[data-look] .dr-login-ring .dr-orb.dr-coach-flora   { background-image: url('/img/themes/icon-flora.webp'); box-shadow: 0 0 16px rgba(255,194,46,.55); }
html[data-look] .dr-login-ring .dr-orb.dr-coach-alethea { background-image: url('/img/themes/icon-alethea.webp'); box-shadow: 0 0 16px rgba(180,92,255,.55); }
html[data-look] .dr-login-ring .dr-orb.dr-coach-eirene  { background-image: url('/img/themes/icon-eirene.webp'); box-shadow: 0 0 16px rgba(76,141,255,.55); }
html[data-look] .dr-login-ring .dr-orb.dr-coach-socius  { background-image: url('/img/themes/icon-socius.webp'); box-shadow: 0 0 16px rgba(255,138,31,.55); }
html[data-look] .dr-login-ring .dr-orb.dr-coach-echo    { background-image: url('/img/themes/icon-echo.webp'); box-shadow: 0 0 16px rgba(47,212,255,.55); }
html[data-look] .dr-login-ring .dr-orb.dr-coach-muse    { background-image: url('/img/themes/icon-muse.webp'); box-shadow: 0 0 16px rgba(255,79,163,.55); }
html[data-look] .dr-login-title { font-family: 'Crimson Pro', Georgia, serif; font-weight: 500; font-size: 3.2rem; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
html[data-look] .dr-login-in { font-family: 'Inter', system-ui, sans-serif; }
html[data-look] .dr-login-sub { text-shadow: 0 1px 10px rgba(0,0,0,.8); }
html[data-look] .dr-login-text, html[data-look] .dr-login-fine { color: rgba(246,241,251,.78); text-shadow: 0 1px 10px rgba(0,0,0,.85); }
html[data-look] .dr-login-google { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; background: rgba(12,8,20,.6);
  border: 1.5px solid rgba(52,224,122,.75); box-shadow: 0 0 14px rgba(52,224,122,.35), inset 0 0 12px rgba(52,224,122,.15);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
html[data-look] .dr-login-google:hover { background: rgba(52,224,122,.18); }

/* ══ Onboarding: the coach's scene behind, glass choices ═══════════════ */
html[data-look] body.dr-ob-page { background: var(--dr-bg); }
html[data-look] body.dr-ob-page::before { height: auto; bottom: 0; z-index: 0;
  background: var(--th-dim), var(--dr-scene) 46% 40% / cover no-repeat; transition: background .6s ease; }
html[data-look] .dr-ob { z-index: 1; }
html[data-look] .dr-ob-h { font-family: var(--dr-display); font-weight: 500; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
html[data-look] .dr-ob-choice, html[data-look] .dr-ob-coach, html[data-look] .dr-ob-check {
  background: var(--dr-card); border-color: var(--dr-line-2); backdrop-filter: var(--th-blur); -webkit-backdrop-filter: var(--th-blur); }

/* ══ Talk's History sheet in the look ═══════════════════════════════════ */
html[data-look] .dr-tk-sheetin { background: rgba(12,8,20,.9); border-color: rgba(var(--dr-c),.35);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); font-family: var(--dr-font); }
html[data-look] .dr-tk-sheethead b { font-family: var(--dr-display); font-weight: 500; font-size: 26px; }
html[data-look] .dr-tk-item { background: rgba(255,255,255,.04); border-color: var(--dr-line-2); }
html[data-look] .dr-tk-item:hover { border-color: rgba(var(--dr-c),.6); }
html[data-look] .dr-tk-dot { width: 28px; height: 28px; }
html[data-look] .dr-tk-sheet .dr-tk-btn { background: radial-gradient(ellipse at 50% 30%, rgba(var(--dr-c),.5), rgba(var(--dr-c-deep),.92));
  box-shadow: inset 0 0 0 1.5px rgba(var(--dr-c),.9); }
html[data-look] .dr-tk-sheet .dr-tk-btn.ghost { background: transparent; box-shadow: none; }
html[data-look-mode="light"] .dr-tk-sheetin { background: rgba(255,255,255,.95); border-color: var(--dr-line-2); color: var(--dr-text); }
html[data-look-mode="light"] .dr-tk-sheetbg { background: rgba(40,25,60,.3); }
html[data-look-mode="light"] .dr-tk-sheethead b, html[data-look-mode="light"] .dr-tk-item { color: var(--dr-text); }
html[data-look-mode="light"] .dr-tk-item { background: rgba(255,255,255,.7); }
html[data-look-mode="light"] .dr-tk-imeta, html[data-look-mode="light"] .dr-tk-empty, html[data-look-mode="light"] .dr-tk-label { color: var(--dr-soft); }
html[data-look-mode="light"] .dr-tk-x { color: var(--dr-text); border-color: var(--dr-line-2); }
html[data-look-mode="light"] .dr-tk-sheet .dr-tk-btn { color: #fff; background: linear-gradient(100deg, rgba(var(--dr-c-deep),.75), rgb(var(--dr-c-deep))); box-shadow: none; }
html[data-look-mode="light"] .dr-tk-sheet .dr-tk-btn.ghost { color: var(--dr-text); background: transparent; border: 1px solid var(--dr-line-2); }
/* Suggestion pop-up: under History and dialogs; above the text box in Type mode */
html[data-look] body.dr-themed .dsp-notification { z-index: 55; }
@media (min-width: 761px) { html[data-look] body.dr-themed.dr-tk-typing .dsp-notification { bottom: 104px; } }
@media (max-width: 760px) { html[data-look] body.dr-themed.dr-tk-typing .dsp-notification { bottom: calc(96px + 76px + env(safe-area-inset-bottom, 0px)); } }