/* =============================================================================
   Dereal redesign — shared design system (2026-10-08)
   From the clickable prototype (claude.ai/artifact/AdGUZT9dRqr5jBWkBRcUCz).
   Rules: light text only (owner: no dark font colours, even on buttons — main
   buttons are frosted glass with white text); deep ground with a coach-coloured
   glow; Fraunces display + Manrope text (self-hosted: /fonts/redesign-fonts.css).
   Everything is prefixed dr- so it can't collide with the older page styles.
   ============================================================================= */
@import url('/fonts/redesign-fonts.css');

:root {
  --dr-bg: #0b0d12;
  --dr-text: #ece9e2;
  --dr-soft: #b4b0a8;
  --dr-muted: #8f8b84;
  --dr-line: rgba(255,255,255,.08);
  --dr-line-2: rgba(255,255,255,.14);
  --dr-card: rgba(255,255,255,.04);
  --dr-glass: rgba(255,255,255,.14);
  --dr-glass-on: rgba(255,255,255,.2);
  --dr-glass-edge: rgba(255,255,255,.28);
  --dr-radius: 22px;
  --dr-font: 'Manrope', system-ui, -apple-system, sans-serif;
  --dr-display: 'Fraunces', Georgia, serif;
  /* coach colour (rgb triplets) — set per coach below */
  --dr-c: 143,199,154; --dr-c-deep: 34,68,43;
}
body[data-coach="compass"], .dr-coach-compass { --dr-c: 143,199,154; --dr-c-deep: 34,68,43; }
body[data-coach="flora"],   .dr-coach-flora   { --dr-c: 226,180,110; --dr-c-deep: 79,55,20; }
body[data-coach="alethea"], .dr-coach-alethea { --dr-c: 179,166,238; --dr-c-deep: 53,43,99; }
body[data-coach="eirene"],  .dr-coach-eirene  { --dr-c: 127,189,224; --dr-c-deep: 23,58,80; }
body[data-coach="socius"],  .dr-coach-socius  { --dr-c: 238,154,108; --dr-c-deep: 90,42,18; }
body[data-coach="echo"],    .dr-coach-echo    { --dr-c: 127,209,195; --dr-c-deep: 23,74,67; }
body[data-coach="muse"],    .dr-coach-muse    { --dr-c: 240,143,176; --dr-c-deep: 92,31,53; }

/* ── page ─────────────────────────────────────────────────────────────── */
body.dr-page { background: var(--dr-bg); }
/* isolation: its own layer, so the coach glow (::before, z-index -1) is drawn above
   the body's solid background instead of under it */
.dr-main { position: relative; isolation: isolate; max-width: 720px; margin: 0 auto; padding: 28px 16px 120px; color: var(--dr-text);
  font-family: var(--dr-font); box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; }
.dr-main::before { content: ''; position: fixed; inset: 0 0 auto 0; height: 70vh; pointer-events: none; z-index: -1;
  background: radial-gradient(110% 55% at 50% -10%, rgba(var(--dr-glow, var(--dr-c)),.24) 0%, rgba(11,13,18,0) 65%); transition: background .6s ease; }
.dr-main * { box-sizing: border-box; }
.dr-display, .dr-h1, .dr-h2 { font-family: var(--dr-display); font-weight: 400; color: var(--dr-text); }
.dr-h1 { margin: 0; font-size: 2.15rem; line-height: 1.1; letter-spacing: -.01em; }
.dr-h2 { margin: 0; font-size: 1.45rem; line-height: 1.2; }
.dr-date { margin: 0; font-size: .8rem; color: var(--dr-soft); }
.dr-sub { margin: 0; font-size: .95rem; color: var(--dr-soft); }
.dr-label { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dr-muted); margin: 6px 0 0; }
.dr-row { display: flex; align-items: center; gap: 10px; }
.dr-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── cards ────────────────────────────────────────────────────────────── */
.dr-card { border-radius: var(--dr-radius); padding: 16px; background: var(--dr-card); border: 1px solid var(--dr-line); color: var(--dr-text); }
.dr-card-tint { border-radius: 24px; padding: 16px; color: var(--dr-text);
  background: linear-gradient(160deg, rgba(var(--dr-tint, var(--dr-c)),.18), rgba(255,255,255,.03) 70%);
  border: 1px solid rgba(var(--dr-tint, var(--dr-c)),.3); }
a.dr-card, a.dr-card-tint { display: block; text-decoration: none; }
.dr-empty { text-align: center; color: var(--dr-soft); padding: 22px 14px; border: 1px dashed var(--dr-line-2); border-radius: 20px; line-height: 1.5; }
.dr-skel { height: 120px; border-radius: 22px; background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.07), rgba(255,255,255,.03));
  background-size: 200% 100%; animation: drSkel 1.4s linear infinite; }
@keyframes drSkel { to { background-position: -200% 0; } }

/* ── buttons (light text only) ────────────────────────────────────────── */
.dr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; white-space: nowrap; color: #fff; text-decoration: none;
  background: var(--dr-glass); border: 1px solid var(--dr-glass-edge); transition: transform .15s ease, background .2s ease, opacity .2s ease; }
.dr-btn:hover { background: var(--dr-glass-on); }
.dr-btn:active { transform: scale(.97); }
.dr-btn:disabled { opacity: .38; cursor: default; }
.dr-btn-ghost { background: transparent; border-color: var(--dr-line-2); font-weight: 600; color: var(--dr-text); }
.dr-btn-quiet { background: transparent; border-color: transparent; color: var(--dr-soft); font-weight: 600; }
.dr-btn-coach { background: rgb(var(--dr-c-deep)); border: 1.5px solid rgb(var(--dr-c)); color: #fff; }
.dr-btn-danger { background: #8e3426; border-color: #c4553f; color: #fff; }
.dr-btn-sm { min-height: 36px; padding: 0 13px; font-size: .82rem; }
.dr-icon-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.dr-btn:focus-visible, .dr-chip:focus-visible, .dr-tab:focus-visible, .dr-seg button:focus-visible, .dr-switch:focus-visible {
  outline: 2px solid var(--dr-text); outline-offset: 2px; }

/* ── chips, segmented control, switch ─────────────────────────────────── */
.dr-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dr-chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
.dr-chips.scroll::-webkit-scrollbar { display: none; }
.dr-chip { flex: none; min-height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--dr-line-2); background: transparent;
  color: var(--dr-soft); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; transition: all .18s ease; }
.dr-chip:hover { color: var(--dr-text); }
.dr-chip.on { background: var(--dr-glass-on); border-color: var(--dr-glass-edge); color: #fff; }
.dr-chip.tint.on { background: rgba(var(--dr-tint, var(--dr-c)),.24); border-color: rgba(var(--dr-tint, var(--dr-c)),.65); }
.dr-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.dr-seg button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: 999px; border: none;
  background: transparent; color: var(--dr-soft); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; transition: all .2s ease; }
.dr-seg button.on { background: var(--dr-glass-on); color: #fff; box-shadow: inset 0 0 0 1px var(--dr-glass-edge); }
.dr-switch { width: 50px; height: 30px; flex: none; border-radius: 999px; border: none; padding: 0; background: rgba(255,255,255,.18);
  position: relative; cursor: pointer; transition: background .2s ease; }
.dr-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .2s ease; }
.dr-switch[aria-checked="true"] { background: rgb(var(--dr-c)); }
.dr-switch[aria-checked="true"]::after { left: 23px; }

/* ── coach orb ────────────────────────────────────────────────────────── */
.dr-orb { border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff 0%, rgb(var(--dr-c)) 38%, rgb(var(--dr-c-deep)) 100%);
  box-shadow: 0 0 26px rgba(var(--dr-c),.45); }
.dr-orb.breathe { animation: drBreathe 5s ease-in-out infinite; }
@keyframes drBreathe { 0%,100% { transform: scale(.94); } 50% { transform: scale(1.05); } }
.dr-check { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); display: grid; place-items: center;
  color: #fff; font-size: 13px; font-weight: 900; transition: all .2s ease; }
.dr-check.on { background: rgb(var(--dr-c-deep)); border-color: rgb(var(--dr-c)); animation: drPop .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes drPop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.dr-rise { animation: drRise .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes drRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dr-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 60; padding: 10px 18px; border-radius: 999px;
  background: rgba(20,22,29,.95); border: 1px solid var(--dr-line-2); color: #fff; font: 600 .86rem var(--dr-font); white-space: nowrap;
  animation: drRise .35s ease both; }

/* ── bottom tab bar (phones) ──────────────────────────────────────────── */
.dr-tabbar { display: none; }
@media (max-width: 760px) {
  .dr-tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 10px; right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)); height: 64px; z-index: 50; border-radius: 24px;
    background: rgba(18,20,27,.88); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
  .dr-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 44px; color: #8a877f;
    text-decoration: none; font: 700 11px var(--dr-font); }
  .dr-tab svg { width: 22px; height: 22px; }
  .dr-tab.on { color: rgb(var(--dr-c)); }
  body.dr-has-tabbar { padding-bottom: 84px; overflow-x: hidden; }
  /* phones: the tab bar is the navigation (as in the prototype) — no top
     header. Settings, sign out and admin live on You. */
  body.dr-has-tabbar .header { display: none !important; }
  body.dr-has-tabbar .dr-main { padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
  /* pages opened from Talk mount in the overlay (z-index 9000); the bar moves
     into it (tabbar.js) — room for it under the page */
  body.spa-overlay .dr-tabbar { z-index: 9001; }
  body.spa-overlay #spa-overlay-host #view-root { padding-bottom: 96px; }
}
/* ── desktop (> 760px): the same five tabs as a labelled top bar ──────
   (2026-10-09). Replaces the old icon header on every page that mounts the
   tab bar; settings, sign out and admin live on You, as on phones. */
@media (min-width: 761px) {
  .dr-tabbar { display: flex; align-items: center; justify-content: center; gap: 4px; position: fixed; top: 0; left: 0; right: 0;
    height: 64px; z-index: 50; padding: 0 24px; background: rgba(11,13,18,.82); border-bottom: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
  .dr-tabbar::before { content: 'Dereal'; position: absolute; left: 24px; top: 50%; transform: translateY(-50%); padding-left: 38px;
    line-height: 28px; font: 400 21px/28px 'Fraunces', Georgia, serif; letter-spacing: .02em; color: #ece9e2;
    background: url('/brand/dereal-mark.svg') no-repeat left center / 28px 28px; pointer-events: none; }
  .dr-tab { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; color: #b4b0a8;
    text-decoration: none; font: 700 14px var(--dr-font); transition: color .2s ease, background .2s ease; }
  .dr-tab svg { width: 18px; height: 18px; }
  .dr-tab:hover { color: #ece9e2; background: rgba(255,255,255,.06); }
  .dr-tab:focus-visible { outline: 2px solid #ece9e2; outline-offset: 2px; }
  .dr-tab.on { color: #fff; background: rgba(var(--dr-c), .18); box-shadow: inset 0 0 0 1px rgba(var(--dr-c), .5); }
  body.dr-has-tabbar { padding-top: 64px; }
  body.dr-has-tabbar .header { display: none !important; }
  body.dr-has-tabbar .dr-main { padding-top: 36px; }
  body.spa-overlay .dr-tabbar { z-index: 9001; }
  body.spa-overlay #spa-overlay-host #view-root { padding-top: 64px; }
}
@media (min-width: 761px) and (max-width: 900px) { .dr-tabbar::before { content: ''; padding-left: 28px; } }
@media (prefers-reduced-motion: reduce) { .dr-main *, .dr-tabbar * { animation: none !important; transition: none !important; } }
/* Settings → Reduce animations (html.dr-still, /shell/prefs.js) */
html.dr-still *, html.dr-still *::before, html.dr-still *::after { animation: none !important; transition: none !important; }

/* Dereal mark "Seven lights" (/brand/dereal-mark.svg) in the header — replaces
   the old ✧ in a bordered circle. */
.header .logo-symbol.dr-mark { width: 28px; height: 28px; border: none !important; box-shadow: none !important; border-radius: 0;
  background: none; padding: 0; display: block; line-height: 0; }
.header .logo-symbol.dr-mark img { width: 100%; height: 100%; display: block; }