/* ===== Daily AI Journal — "chronicle console" =====
   Deep-space glass UI. Ground #08090C, aurora cyan→violet, warm star-amber core
   (the old sun, futurized). Orbitron = brand/dates only; Sora = everything read. */

:root {
  --bg: #08090c;
  --bg2: #12141a;
  --panel: rgba(200, 205, 215, 0.055);
  --panel-solid: #191c24;
  --line: rgba(200, 205, 215, 0.14);
  --line-bright: rgba(255, 59, 59, 0.45);
  --text: #eceef2;
  --dim: #9aa1ac;
  --cyan: #ff3b3b;
  --violet: #e11d2a;
  --amber: #f4b14e;
  --danger: #fb7185;
  --ok: #34d399;
  --glow-cyan: 0 0 18px rgba(255, 59, 59, 0.35);
  --r: 14px;
  --font-body: "Sora", system-ui, sans-serif;
  --font-disp: "Orbitron", "Sora", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* THE RULE THAT MAKES hidden MEAN HIDDEN. Classes below set display:grid/flex, and any
   author display beats the browser's [hidden]{display:none} — so without this, the
   "hidden" confirm overlay still covered the page (eating every click on the welcome
   card) and the "hidden" app shell rendered below the login. Do not remove. */
[hidden] { display: none !important; }
html { color-scheme: dark; }
/* the page never scrolls sideways — and (unlike hidden) clip also stops mobile
   browsers from silently widening the layout viewport past the phone, which was
   pushing every fixed element (bottom nav, the coach) below the visible screen */
html, body { overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-weight: 300;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
}
::selection { background: rgba(255, 59, 59, 0.3); }

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
mark { background: rgba(244, 177, 78, 0.28); color: var(--amber); border-radius: 3px; padding: 0 2px; }

/* ---------- backdrop: aurora + stars ---------- */
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); opacity: 0.35; will-change: transform;
  animation: drift 26s ease-in-out infinite alternate;
}
.aurora i:nth-child(1) { width: 55vw; height: 55vw; left: -18vw; top: -22vw; background: radial-gradient(circle, var(--violet), transparent 65%); }
.aurora i:nth-child(2) { width: 48vw; height: 48vw; right: -16vw; top: 8vh; background: radial-gradient(circle, var(--cyan), transparent 65%); opacity: 0.22; animation-duration: 32s; animation-delay: -8s; }
.aurora i:nth-child(3) { width: 40vw; height: 40vw; left: 28vw; bottom: -24vw; background: radial-gradient(circle, #7c2d12, transparent 65%); opacity: 0.3; animation-duration: 38s; animation-delay: -16s; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(6vw, 4vh, 0) scale(1.15); }
}
#stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .aurora i { animation: none; }
  * { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* ---------- shared bits ---------- */
.btn {
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--text);
  padding: 10px 18px; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.btn:hover { transform: translateY(-1px); border-color: var(--line-bright); }
.btn:disabled { opacity: 0.5; cursor: wait; transform: none; }
.btn-primary {
  background: linear-gradient(135deg, rgba(255, 59, 59, 0.18), rgba(225, 29, 42, 0.18));
  border-color: var(--line-bright);
  box-shadow: var(--glow-cyan);
}
.btn-primary:hover { box-shadow: 0 0 26px rgba(255, 59, 59, 0.5); }
.btn-primary.danger-bg { background: linear-gradient(135deg, rgba(251, 113, 133, 0.25), rgba(225, 29, 42, 0.15)); border-color: rgba(251, 113, 133, 0.5); box-shadow: 0 0 18px rgba(251, 113, 133, 0.25); }
.btn-soft { background: rgba(200, 205, 215, 0.08); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--dim); }
.btn-ghost:hover { color: var(--text); border-color: var(--line); }
.btn-ghost.danger:hover { color: var(--danger); border-color: rgba(251, 113, 133, 0.4); }
.btn-small { font-size: 13px; padding: 7px 13px; }
.btn-big { font-size: 16px; padding: 14px 26px; width: 100%; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-disp); font-weight: 700; }

.icon-btn {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; width: 38px; height: 38px; font-size: 18px; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.icon-btn:hover { border-color: var(--line-bright); box-shadow: var(--glow-cyan); }

.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px 24px;
  margin-bottom: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.card::before {
  /* thin energized top edge */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: var(--r) var(--r) 0 0;
  background: linear-gradient(90deg, transparent, rgba(255, 59, 59, 0.55), rgba(225, 29, 42, 0.45), transparent);
  opacity: 0.6; pointer-events: none;
}
.card h2 { font-size: 16px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.card h2 .ic { color: var(--cyan); }

.pill { font-size: 11px; border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px; color: var(--dim); letter-spacing: 0.06em; text-transform: uppercase; }
.pill.ok { color: var(--ok); border-color: rgba(52, 211, 153, 0.4); box-shadow: 0 0 10px rgba(52, 211, 153, 0.15); }
.hint { font-size: 13.5px; color: var(--dim); margin: 6px 0 10px; }
.subhead { font-size: 13px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; margin: 18px 0 6px; }
.empty-note { color: var(--dim); font-size: 14.5px; padding: 18px 4px; }

input[type="text"], input[type="password"], input[type="search"], input[type="date"], select, textarea {
  font-family: var(--font-body); font-size: 15px; color: var(--text);
  background: rgba(8, 9, 12, 0.6);
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--line-bright); box-shadow: var(--glow-cyan); }
input[type="date"] { font-family: var(--font-disp); font-weight: 500; font-size: 13.5px; letter-spacing: 0.05em; }
::placeholder { color: rgba(138, 148, 168, 0.65); }

/* shimmer loading */
.shimmer-lines i { display: block; height: 12px; border-radius: 6px; margin: 10px 0; background: linear-gradient(90deg, rgba(200, 205, 215, 0.06), rgba(200, 205, 215, 0.16), rgba(200, 205, 215, 0.06)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.shimmer-lines i:nth-child(2) { width: 82%; }
.shimmer-lines i:nth-child(3) { width: 58%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- THE GATE — Insights by Gotti (store Gorilla-Gate mechanic, Gotti lime) ---------- */
.gate { position: fixed; inset: 0; z-index: 10; background: #050604; overflow: hidden; perspective: 1200px; --lime: #a2c90a; }
.ig-status {
  position: absolute; z-index: 7; font-family: var(--font-disp); font-weight: 700;
  font-size: clamp(0.55rem, 1vw, 0.72rem); letter-spacing: 0.24em;
  color: var(--lime); opacity: 0.75; text-shadow: 0 0 12px var(--lime);
}
.ig-status.s1 { top: 24px; left: 28px; }
.ig-status.s2 { top: 24px; right: 28px; text-align: right; }
.ig-rings { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
.ig-ring {
  position: absolute; width: min(72vw, 82vh); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(162, 201, 10, 0.35);
  box-shadow: 0 0 34px rgba(162, 201, 10, 0.12), inset 0 0 34px rgba(162, 201, 10, 0.08);
  opacity: 0.5; transition: transform 1.6s cubic-bezier(0.66, 0, 0.12, 1), opacity 1s;
}
.ig-ring::before, .ig-ring::after {
  content: ""; position: absolute; inset: -5px; border-radius: inherit;
  border-top: 2px solid #d3f34e; border-right: 2px solid transparent;
  filter: drop-shadow(0 0 8px #a2c90a);
}
.ig-ring::after { inset: 9%; border-top-color: transparent; border-right-color: rgba(211, 243, 78, 0.65); }
.ig-ring.r1 { animation: igring 18s linear infinite; }
.ig-ring.r2 { width: min(56vw, 64vh); opacity: 0.34; animation: igring 13s linear reverse infinite; }
.ig-ring.r3 { width: min(88vw, 96vh); opacity: 0.18; animation: igring 28s linear infinite; }
@keyframes igring { to { transform: rotate(360deg); } }

.ig-head {
  position: absolute; top: 5vh; left: 0; right: 0; bottom: 22vh; z-index: 3;
  display: grid; place-items: center; transform-style: preserve-3d;
  animation: igbreathe 7s ease-in-out infinite;
}
@keyframes igbreathe { 0%, 100% { transform: rotateY(-2deg) scale(1); } 50% { transform: rotateY(2deg) scale(1.006); } }
.ig-half {
  position: absolute; top: 50%; width: min(36vh, 42vw); height: min(72vh, 84vw);
  max-height: 74vh; transform: translateY(-50%);
  background-image: url("fpm-shield.jpg"); background-size: 200% 100%; background-repeat: no-repeat;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.8));
  transition: transform 1.5s cubic-bezier(0.7, 0, 0.15, 1), opacity 1.2s ease;
}
.ig-half.l { right: 50%; background-position: 0 0; border-right: 1px solid rgba(162, 201, 10, 0.4); }
.ig-half.r { left: 50%; background-position: 100% 0; border-left: 1px solid rgba(162, 201, 10, 0.4); }

.ig-slab {
  position: absolute; top: 0; bottom: 0; width: 51%; z-index: 2; transform-style: preserve-3d;
  background: linear-gradient(90deg, rgba(1, 4, 0, 0.74), rgba(12, 18, 4, 0.38) 50%, rgba(1, 4, 0, 0.72));
  box-shadow: inset 0 0 160px rgba(0, 0, 0, 0.75);
  transition: transform 1.5s cubic-bezier(0.7, 0, 0.15, 1), opacity 1.5s ease;
}
.ig-slab.l { left: 0; transform-origin: left center; box-shadow: inset -34px 0 64px rgba(0, 0, 0, 0.6), inset -2px 0 0 rgba(162, 201, 10, 0.5); }
.ig-slab.r { right: 0; transform-origin: right center; box-shadow: inset 34px 0 64px rgba(0, 0, 0, 0.6), inset 2px 0 0 rgba(162, 201, 10, 0.5); }
/* the old full-height seam read as a stray green line (Liza 2026-07-31) — the shield
   halves' lime edges draw the split themselves, so the seam is gone */
.ig-seam { display: none; }
@keyframes igseam { 0%, 100% { filter: brightness(0.85); } 50% { filter: brightness(1.5); } }

.ig-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 0 clamp(12px, 4vw, 60px) 26px; display: grid; gap: 16px; justify-items: center; }
.ig-pillars { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(4px, 1vw, 12px); width: min(860px, 100%); }
.ig-pillar {
  text-align: center; padding: 10px 4px 9px;
  border: 1px solid rgba(162, 201, 10, 0.35); border-radius: 10px;
  background: rgba(6, 9, 1, 0.72); backdrop-filter: blur(8px);
  font-family: var(--font-disp); font-weight: 700; font-size: clamp(0.5rem, 1.15vw, 0.72rem);
  letter-spacing: 0.14em; color: #e8f2cf;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.ig-pillar span { display: block; font-size: clamp(15px, 2.4vw, 22px); margin-bottom: 4px; filter: drop-shadow(0 0 8px rgba(162, 201, 10, 0.5)); }
.ig-pillar:hover { border-color: rgba(211, 243, 78, 0.8); box-shadow: 0 0 20px rgba(162, 201, 10, 0.25); transform: translateY(-3px); }
.ig-pillar { position: relative; cursor: default; }
.ig-pillar i {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px);
  width: max(170px, 120%); padding: 10px 12px; border-radius: 10px;
  background: rgba(6, 9, 1, 0.95); border: 1px solid rgba(162, 201, 10, 0.5);
  box-shadow: 0 0 24px rgba(162, 201, 10, 0.25), 0 10px 30px rgba(0, 0, 0, 0.6);
  font-family: var(--font-body); font-weight: 400; font-size: 12px; letter-spacing: 0.01em;
  line-height: 1.55; text-transform: none; color: #e8f2cf; font-style: normal;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 8;
}
.ig-pillar:hover i { opacity: 1; transform: translateX(-50%) translateY(0); }
.ig-enter {
  font-family: var(--font-disp); font-weight: 900; font-size: clamp(14px, 2vw, 18px); letter-spacing: 0.3em;
  color: #060901; background: linear-gradient(135deg, #d3f34e, #a2c90a);
  border: none; border-radius: 12px; padding: 16px 44px; cursor: pointer;
  box-shadow: 0 0 30px rgba(162, 201, 10, 0.45), 0 10px 40px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s, box-shadow 0.3s;
  animation: igenter 2.6s ease-in-out infinite;
}
.ig-enter:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 50px rgba(211, 243, 78, 0.7), 0 12px 44px rgba(0, 0, 0, 0.5); }
@keyframes igenter { 0%, 100% { box-shadow: 0 0 24px rgba(162, 201, 10, 0.35), 0 10px 40px rgba(0, 0, 0, 0.5); } 50% { box-shadow: 0 0 46px rgba(211, 243, 78, 0.6), 0 10px 40px rgba(0, 0, 0, 0.5); } }
.ig-flash {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 44%, #fff 0%, #f4ffd0 18%, #a2c90a 42%, transparent 72%);
}

/* opening */
.gate.open .ig-slab.l { transform: translateX(-72%) rotateY(-42deg); opacity: 0; }
.gate.open .ig-slab.r { transform: translateX(72%) rotateY(42deg); opacity: 0; }
.gate.open .ig-half.l { transform: translateY(-50%) translateX(-58vw) rotateY(-30deg); opacity: 0; }
.gate.open .ig-half.r { transform: translateY(-50%) translateX(58vw) rotateY(30deg); opacity: 0; }
.gate.open .ig-seam { opacity: 0; }
.gate.open .ig-ring { transform: scale(2.2); opacity: 0; }
.gate.open .ig-flash { animation: igflash 1.3s ease-out forwards; }
.gate.open .ig-bottom { opacity: 0; transition: opacity 0.8s; pointer-events: none; }
@keyframes igflash { 0% { opacity: 0; transform: scale(0.4); } 22% { opacity: 1; transform: scale(1.1); } 52% { opacity: 0.85; transform: scale(1.55); } 100% { opacity: 0; transform: scale(2.1); } }
@media (prefers-reduced-motion: reduce) { .ig-ring, .ig-head, .ig-seam, .ig-enter { animation: none; } }

/* ---------- auth tabs / intake / mascots / welcome splash ---------- */
.auth-tabs { display: flex; gap: 8px; margin-bottom: 14px; justify-content: center; }
.auth-tab {
  font-family: var(--font-disp); font-weight: 700; font-size: 12px; letter-spacing: 0.14em;
  padding: 9px 22px; border-radius: 99px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--dim);
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.auth-tab.active { color: var(--text); border-color: var(--line-bright); box-shadow: var(--glow-cyan); }
#authForm input[type="email"], #authForm input[type="password"] { text-align: center; letter-spacing: 0.06em; font-family: var(--font-body); }
.intake-card { width: min(600px, 96vw); text-align: left; max-height: 92vh; overflow-y: auto; }
.intake-card h1, .intake-card .tagline { text-align: center; }
.intake-form { display: grid; gap: 16px; margin-top: 10px; }
.intake-form label { display: grid; gap: 7px; font-size: 13.5px; color: var(--dim); }
.intake-form input, .intake-form textarea, .intake-form select { width: 100%; }
.intake-pillars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.intake-pillars button {
  font-family: var(--font-disp); font-weight: 500; font-size: 10px; letter-spacing: 0.06em;
  padding: 10px 2px; border-radius: 9px; cursor: pointer;
  background: rgba(8, 9, 12, 0.5); border: 1px solid var(--line); color: var(--dim);
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.intake-pillars button.sel { color: var(--text); border-color: var(--line-bright); box-shadow: var(--glow-cyan); }
.mascot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mascot-card {
  display: grid; gap: 2px; justify-items: center; padding: 14px 6px 10px;
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  background: rgba(8, 9, 12, 0.5); color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.mascot-card .me { font-size: 30px; }
.mascot-card .mn { font-family: var(--font-disp); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; }
.mascot-card small { font-size: 10px; color: var(--dim); }
.mascot-card:hover { border-color: var(--line-bright); transform: translateY(-2px); }
.mascot-card.sel { border-color: var(--line-bright); box-shadow: var(--glow-cyan); background: rgba(255, 59, 59, 0.07); }
.mascot-card.locked { opacity: 0.45; cursor: not-allowed; }
.mascot-card.locked:hover { transform: none; border-color: var(--line); }
.ws-mascot { font-size: 64px; margin-bottom: 6px; animation: pulse 2.4s ease-in-out infinite; }
.ws-text { text-align: left; font-size: 15.5px; line-height: 1.75; margin: 14px 0 20px; white-space: pre-wrap; }
@media (max-width: 560px) { .intake-pillars { grid-template-columns: repeat(2, 1fr); } .mascot-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- welcome / auth ---------- */
.auth-screen { position: relative; z-index: 2; min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card {
  width: min(460px, 94vw); text-align: center;
  background: rgba(18, 20, 26, 0.72);
  border: 1px solid var(--line); border-radius: 20px;
  padding: 40px 34px 34px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(200, 205, 215, 0.12);
  animation: rise 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(22px) scale(0.98); } }

.auth-sun, .brand-sun { position: relative; display: inline-block; width: 58px; height: 58px; }
.auth-sun .core, .brand-sun .core {
  position: absolute; inset: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fde68a, var(--amber) 60%, #d97706);
  box-shadow: 0 0 24px rgba(244, 177, 78, 0.55);
  animation: pulse 3.2s ease-in-out infinite;
}
.auth-sun .ring, .brand-sun .ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px dashed rgba(255, 59, 59, 0.55);
  animation: spin 14s linear infinite;
}
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes spin { to { transform: rotate(360deg); } }

.auth-card h1 {
  font-family: var(--font-disp); font-weight: 900; font-size: 26px;
  letter-spacing: 0.22em; margin: 16px 0 4px;
  background: linear-gradient(90deg, var(--cyan), #f4b14e, var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.glitch { position: relative; }
.tagline { color: var(--dim); font-size: 14px; letter-spacing: 0.04em; margin-bottom: 18px; }

.welcome-quote {
  margin: 4px 0 18px; padding: 16px 18px; text-align: left;
  border: 1px solid var(--line); border-left: 2px solid var(--amber);
  border-radius: 12px; background: rgba(244, 177, 78, 0.045);
}
.welcome-quote .wq-text { font-size: 15.5px; font-weight: 400; font-style: italic; }
.welcome-quote .wq-author { color: var(--amber); font-size: 13px; margin-top: 6px; font-family: var(--font-disp); font-weight: 500; letter-spacing: 0.08em; }
.welcome-quote .wq-focus { color: var(--dim); font-size: 13px; margin-top: 8px; }
.welcome-quote .wq-focus:empty, .welcome-quote .wq-author:empty { display: none; }

.auth-hint { font-size: 14px; color: var(--dim); margin-bottom: 16px; }
#authForm { display: grid; gap: 12px; }
#authForm input { text-align: center; font-family: var(--font-disp); letter-spacing: 0.3em; }
.auth-error { margin-top: 12px; color: var(--danger); font-size: 14px; }
.auth-links { margin-top: 14px; font-size: 13px; }
.auth-links a { color: var(--dim); }
.auth-links a:hover { color: var(--cyan); }
#authCode { text-align: center; font-family: var(--font-disp); letter-spacing: 0.5em; font-size: 18px; }

/* ---------- app shell ---------- */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: 210px 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 26px;
  padding: 26px 16px;
  background: rgba(18, 20, 26, 0.6);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 6px; }
.brand-sun { width: 40px; height: 40px; flex: none; }
.brand-sun .core { inset: 10px; }
.brand-name { font-family: var(--font-disp); font-weight: 700; font-size: 13px; letter-spacing: 0.24em; line-height: 1.5; color: var(--text); }

.nav { display: grid; gap: 6px; }
.nav-btn {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px; text-align: left;
  color: var(--dim); background: transparent; border: 1px solid transparent;
  border-radius: 10px; padding: 11px 14px; cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.nav-btn .ic { width: 18px; text-align: center; color: inherit; font-style: normal; }
.nav-btn:hover { color: var(--text); background: var(--panel); }
.nav-btn.active {
  color: var(--text); background: linear-gradient(135deg, rgba(255, 59, 59, 0.14), rgba(225, 29, 42, 0.12));
  border-color: var(--line-bright); box-shadow: var(--glow-cyan);
}
.nav-btn.active .ic { color: var(--cyan); }

.sidebar-foot { margin-top: auto; display: grid; gap: 10px; }
.streak-chip {
  font-family: var(--font-disp); font-weight: 500; font-size: 12.5px; letter-spacing: 0.06em;
  text-align: center; color: var(--amber);
  border: 1px solid rgba(244, 177, 78, 0.35); border-radius: 99px; padding: 8px 10px;
  background: rgba(244, 177, 78, 0.06); box-shadow: 0 0 14px rgba(244, 177, 78, 0.12) inset;
}

.main { padding: 34px clamp(18px, 4vw, 48px) 80px; max-width: 980px; width: 100%; margin: 0 auto; }
.view { animation: viewIn 0.35s ease both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } }

.hero { margin-bottom: 20px; }
.hero h1 { font-size: clamp(24px, 4vw, 34px); font-weight: 700; letter-spacing: 0.01em; }
.hero-date { font-family: var(--font-disp); font-weight: 500; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); margin-top: 4px; }
.view-head { margin-bottom: 20px; }
.view-head h1 { font-size: 26px; font-weight: 700; }
.view-head p { color: var(--dim); font-size: 14.5px; }

/* ---------- prep card ---------- */
.prep-card { border-left: 2px solid var(--violet); }
.prep-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.prep-badge { font-family: var(--font-disp); font-weight: 500; font-size: 11px; letter-spacing: 0.22em; color: var(--violet); }
.prep-card h2 { font-size: 18px; font-weight: 600; }
#prepQuestions { list-style: none; display: grid; gap: 8px; }
#prepQuestions li {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px;
  font-size: 14.5px; cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
#prepQuestions li:hover { border-color: rgba(225, 29, 42, 0.55); background: rgba(225, 29, 42, 0.08); transform: translateX(4px); }
#prepQuestions li::before { content: "» "; color: var(--violet); }
.prep-note { color: var(--dim); font-size: 12.5px; margin-top: 10px; }

/* ---------- the living book ---------- */
.book-topline { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); font-style: italic; }
.book-chap { border: 1px solid var(--line, rgba(255, 255, 255, 0.09)); border-radius: 12px; padding: 11px 15px; margin-top: 10px; }
.book-chap summary { cursor: pointer; font-size: 15px; list-style-position: inside; }
.book-chap summary:hover { color: var(--amber); }
.book-chap .book-text { margin-top: 10px; font-size: 14.5px; line-height: 1.68; }
/* "I like it, but…" — correcting the narrator in place (Liza 2026-08-14) */
.chap-fix { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line, rgba(255,255,255,.09)); }
.chap-fix-form { margin-top: 10px; }
.chap-fix .chap-note { width: 100%; resize: vertical; font: inherit; font-size: 14px; line-height: 1.5;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line, rgba(255,255,255,.14));
  background: rgba(0,0,0,.22); color: inherit; }
.chap-fix-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.chap-fix-row .hint { margin: 0; font-size: 12px; }
.book-open-line { font-size: 15px; }
.book-unwritten { margin-top: 6px; font-style: italic; color: var(--dim); letter-spacing: 0.07em; }

/* ---------- daily inspiration ---------- */
.daily-card { border-left: 2px solid var(--amber); }
.daily-refresh { position: absolute; top: 14px; right: 14px; }
.daily-quote { font-size: 17px; font-style: italic; font-weight: 400; padding-right: 40px; }
.daily-author { font-family: var(--font-disp); font-weight: 500; font-size: 12.5px; letter-spacing: 0.1em; color: var(--amber); margin-top: 6px; }
/* why THIS quote today — the one-line bridge from the quote to their own week */
.daily-why { margin-top: 8px; font-size: 13px; font-style: italic; color: var(--dim, #9aa88a); }
.daily-enc { margin-top: 12px; font-size: 15px; }
.daily-focus {
  display: inline-block; margin-top: 12px; font-size: 13.5px;
  border: 1px solid rgba(255, 59, 59, 0.4); color: var(--cyan);
  border-radius: 99px; padding: 5px 14px; background: rgba(255, 59, 59, 0.07);
}
.daily-note { display: block; margin-top: 10px; font-size: 13px; color: var(--dim); }
/* the day it happens it's on the front page: appointments, birthdays, goal deadlines */
.daily-today {
  margin-top: 12px; font-size: 14px; line-height: 1.5;
  border: 1px solid rgba(251, 191, 36, 0.45); border-radius: 10px;
  background: rgba(251, 191, 36, 0.08); padding: 10px 14px;
}
.daily-growth {
  display: block; width: 100%; text-align: left; margin-top: 12px;
  border: 1px solid rgba(52, 211, 153, 0.35); border-radius: 10px;
  background: rgba(52, 211, 153, 0.06); color: var(--text);
  font-family: var(--font-body); font-size: 14px; padding: 11px 14px; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.daily-growth:hover { border-color: rgba(52, 211, 153, 0.6); box-shadow: 0 0 14px rgba(52, 211, 153, 0.2); transform: translateY(-1px); }
.daily-growth em { font-style: normal; font-weight: 600; }
.daily-recovery {
  margin-top: 12px; padding: 11px 14px; font-size: 14px; line-height: 1.65;
  border: 1px solid rgba(244, 177, 78, 0.35); border-left: 3px solid var(--amber);
  border-radius: 10px; background: rgba(244, 177, 78, 0.05);
}
.daily-growth span { color: var(--ok); font-size: 12.5px; white-space: nowrap; }

/* ---------- editor ---------- */
.editor-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.date-label { display: flex; align-items: center; gap: 8px; color: var(--dim); }
.mood-row { display: flex; gap: 4px; }
.mood-row button {
  font-size: 20px; background: transparent; border: 1px solid transparent; border-radius: 10px;
  padding: 5px 8px; cursor: pointer; filter: grayscale(0.9) brightness(0.8);
  transition: filter 0.2s, transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}
.mood-row button:hover { filter: none; transform: scale(1.12); }
.mood-row button.selected { filter: none; border-color: var(--line-bright); box-shadow: var(--glow-cyan); background: rgba(255, 59, 59, 0.08); }

/* the day's committed entries */
.session-list { display: grid; gap: 10px; margin-bottom: 14px; }
.session-list:empty { display: none; }
.session-item {
  position: relative; border: 1px solid var(--line); border-left: 2px solid var(--cyan);
  border-radius: 10px; padding: 12px 14px 12px 16px; background: rgba(8, 9, 12, 0.45);
}
.session-item .s-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.session-item .s-time { font-family: var(--font-disp); font-weight: 500; font-size: 11.5px; letter-spacing: 0.14em; color: var(--cyan); }
.session-item .s-mood { font-size: 15px; }
.session-item .s-actions { margin-left: auto; display: flex; gap: 6px; opacity: 0; transition: opacity 0.2s; }
.session-item:hover .s-actions { opacity: 1; }
.session-item .s-actions button {
  background: transparent; border: 1px solid var(--line); color: var(--dim);
  border-radius: 7px; font-size: 12px; padding: 3px 9px; cursor: pointer;
}
.session-item .s-actions button:hover { color: var(--text); border-color: var(--line-bright); }
.session-item .s-actions button.danger:hover { color: var(--danger); border-color: rgba(251, 113, 133, 0.5); }
.session-item .s-text { font-size: 14.5px; white-space: pre-wrap; word-break: break-word; }
.session-item .s-summary { font-size: 14.5px; }
.session-item .s-summary h4 { margin: 10px 0 4px; font-size: 14px; color: var(--cyan); }
.session-item .s-summary ul, .session-item .s-summary ol { padding-left: 20px; margin: 4px 0; }
.session-item .s-summary li { margin: 3px 0; }
.session-item .s-summary strong { color: var(--text); }
.s-words-link {
  margin-top: 10px; background: none; border: none; cursor: pointer;
  font-family: var(--font-disp); font-weight: 500; font-size: 11.5px; letter-spacing: 0.1em;
  color: var(--amber); padding: 0; text-transform: uppercase;
}
.s-words-link:hover { text-shadow: 0 0 10px rgba(244, 177, 78, 0.5); }
.s-words { margin-top: 8px; padding: 10px 12px; border-left: 2px solid var(--amber); background: rgba(244, 177, 78, 0.04); border-radius: 0 8px 8px 0; }
.session-item.editing { border-color: var(--line-bright); box-shadow: var(--glow-cyan); }

.composer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.composer-label { font-family: var(--font-disp); font-weight: 500; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--violet); }
.nudge-line { font-size: 12.5px; color: var(--dim); flex: 1; text-align: right; cursor: pointer; transition: color 0.2s; }
.nudge-line:hover { color: var(--amber); }
.nudge-line:empty { display: none; }

/* blog-style connections between days */
.related-days { margin-top: 16px; display: grid; gap: 8px; }
.rel-label { font-family: var(--font-disp); font-weight: 500; font-size: 10.5px; letter-spacing: 0.22em; color: var(--cyan); }
.rel-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rel-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  border: 1px solid rgba(255, 59, 59, 0.3); border-radius: 99px;
  background: rgba(255, 59, 59, 0.06); color: var(--text);
  font-size: 12.5px; padding: 6px 14px; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.rel-chip:hover { border-color: var(--line-bright); box-shadow: var(--glow-cyan); transform: translateY(-1px); }
.rel-chip b { font-family: var(--font-disp); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; color: var(--cyan); }
.rel-chip i { font-style: normal; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.rel-chip .tag { color: var(--amber); font-size: 11px; }

#entryText { width: 100%; min-height: 170px; resize: vertical; line-height: 1.7; font-size: 15.5px; }
.editor-bottom { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.flex-spacer { flex: 1; }
.save-state { font-size: 12.5px; color: var(--dim); font-family: var(--font-disp); font-weight: 500; letter-spacing: 0.06em; }
#micBtn.recording { color: var(--danger); border-color: rgba(251, 113, 133, 0.5); box-shadow: 0 0 14px rgba(251, 113, 133, 0.3); animation: pulse 1.4s ease-in-out infinite; }

.dropzone {
  margin-top: 16px; border: 1px dashed var(--line); border-radius: 12px;
  padding: 18px; text-align: center; color: var(--dim); font-size: 14px; cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--line-bright); background: rgba(255, 59, 59, 0.05); box-shadow: var(--glow-cyan) inset; }
.upload-progress { color: var(--cyan); }

.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.thumb .img-wrap { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.thumb img { width: 100%; height: 120px; object-fit: cover; display: block; cursor: zoom-in; transition: transform 0.25s ease; }
.thumb:hover img { transform: scale(1.05); }
.thumb .del {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px;
  border-radius: 8px; border: none; background: rgba(8, 9, 12, 0.75); color: var(--text);
  cursor: pointer; opacity: 0; transition: opacity 0.2s;
}
.thumb:hover .del { opacity: 1; }
.thumb .del:hover { color: var(--danger); }
.thumb input { width: 100%; margin-top: 6px; font-size: 12.5px; padding: 7px 10px; }

.editor-danger { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* ---------- places & map ---------- */
.place-bar { display: flex; gap: 10px; margin-top: 14px; }
.place-bar input { flex: 1; }
.place-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.place-chips:empty { display: none; }
.place-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(244, 177, 78, 0.35); border-radius: 99px;
  background: rgba(244, 177, 78, 0.07); font-size: 13px; padding: 5px 12px;
}
.place-chip b { font-weight: 600; }
.place-chip small { color: var(--dim); font-family: var(--font-disp); font-size: 10.5px; letter-spacing: 0.08em; }
.place-chip button { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 12px; padding: 0 2px; }
.place-chip button:hover { color: var(--danger); }
.map-card { padding: 10px; overflow: hidden; }
#mapEl { height: min(68vh, 620px); min-height: 390px; border-radius: 14px; background: #10131a; border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 0 45px rgba(0,0,0,.4), 0 18px 48px rgba(0,0,0,.22); }
#mapEl .leaflet-tile { filter: brightness(0.59) invert(1) hue-rotate(180deg) saturate(0.62) contrast(1.08); }
#mapEl .leaflet-control-zoom a { width: 40px; height: 40px; line-height: 40px; color: var(--text); background: rgba(20,23,31,.94); border-color: var(--line); }
#mapEl .leaflet-control-attribution { background: rgba(10,12,17,.78); color: var(--dim); }
#mapEl .leaflet-control-attribution a { color: var(--cyan); }
#mapEl .leaflet-popup-content-wrapper, #mapEl .leaflet-popup-tip { background: rgba(18,21,29,.97); color: var(--text); border: 1px solid rgba(255,255,255,.13); box-shadow: 0 18px 48px rgba(0,0,0,.5); }
#mapEl .leaflet-popup-content-wrapper { border-radius: 14px; }
#mapEl .leaflet-popup-content { margin: 14px 16px 16px; }
.memory-pin-shell { background: none !important; border: 0 !important; }
.memory-pin { width: 40px; height: 40px; display: grid; place-items: center; position: relative; border: 2px solid rgba(255,255,255,.9); border-radius: 50% 50% 50% 12px; transform: rotate(-45deg); background: linear-gradient(145deg,#ff5965,#b80f26); color: white; box-shadow: 0 0 0 6px rgba(255,55,75,.15), 0 9px 22px rgba(0,0,0,.55); transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; }
.memory-pin > span { transform: rotate(45deg); font-size: 14px; line-height: 1; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.memory-pin--favorite { background: linear-gradient(145deg,#ffd76a,#b97708); box-shadow: 0 0 0 6px rgba(255,194,60,.17),0 9px 22px rgba(0,0,0,.55); }
.memory-pin--photo { background: linear-gradient(145deg,#9c7cff,#5336b8); box-shadow: 0 0 0 6px rgba(139,108,255,.17),0 9px 22px rgba(0,0,0,.55); }
.memory-pin-shell:hover .memory-pin, .memory-pin-shell:focus .memory-pin { transform: rotate(-45deg) translate(2px,-2px) scale(1.12); filter: brightness(1.12); box-shadow: 0 0 0 8px rgba(255,70,85,.18),0 12px 28px rgba(0,0,0,.65); }
.memory-popup { display: grid; gap: 6px; }
.memory-popup__type { color: var(--cyan); font: 600 10px/1 var(--font-disp); letter-spacing: .13em; text-transform: uppercase; }
.memory-popup b { font-size: 16px; line-height: 1.25; }
.memory-popup time { color: var(--dim); font-size: 12px; }
.memory-popup p { color: var(--dim); font-size: 13px; line-height: 1.45; margin: 2px 0 5px; }
.memory-popup a { display: flex; min-height: 40px; align-items: center; justify-content: space-between; padding: 0 12px; border-radius: 10px; color: white !important; background: linear-gradient(135deg,#e21d36,#9e1024); font: 600 11px/1 var(--font-disp); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.leaflet-tooltip { background: rgba(15,18,25,.95); color: var(--text); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 22px rgba(0,0,0,.4); font-weight: 600; }
.leaflet-tooltip-top:before { border-top-color: rgba(15,18,25,.95); }
.map-card .hint { padding: 8px 10px 4px; }
@media (max-width: 640px) { #mapEl { height: 66vh; min-height: 440px; border-radius: 12px; } .map-card { padding: 6px; } }

/* ---------- close-out reviews ---------- */
.review-card { border-left: 2px solid var(--amber); }
.review-card .prep-badge { color: var(--amber); }

/* ---------- captain's briefing ---------- */
.brief-card { border-left: 2px solid var(--cyan); }
.brief-badge { color: var(--cyan); }
.brief-card h2 { font-size: 16px; font-weight: 600; }
.brief-item { border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; margin: 8px 0; }
.brief-item b { font-size: 14.5px; }
.brief-item p { font-size: 13.5px; color: var(--dim); margin-top: 3px; }
.brief-link {
  display: inline-block; margin-top: 8px; font-family: var(--font-disp); font-weight: 500;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan);
  border: 1px solid rgba(255, 59, 59, 0.3); border-radius: 99px; padding: 4px 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.brief-link:hover { border-color: var(--line-bright); box-shadow: var(--glow-cyan); text-decoration: none; }

/* ---------- on this day ---------- */
.otd-label { color: var(--amber); }
.otd-chip { border-color: rgba(244, 177, 78, 0.35); background: rgba(244, 177, 78, 0.06); }
.otd-chip b { color: var(--amber); }

/* ---------- habits ---------- */
.habit-card { border-left: 2px solid var(--amber); }
.habit-list { display: grid; gap: 8px; }
.habit-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.habit-row.done { border-color: rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.05); }
.habit-check {
  width: 30px; height: 30px; flex: none; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(8, 9, 12, 0.5); color: var(--ok); font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.habit-check:hover { border-color: rgba(52, 211, 153, 0.6); box-shadow: 0 0 12px rgba(52, 211, 153, 0.2); }
.habit-name { flex: 1; font-size: 14.5px; }
.habit-streak { font-family: var(--font-disp); font-weight: 500; font-size: 12.5px; color: var(--amber); }
.habit-del { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 13px; opacity: 0; transition: opacity 0.2s; }
.habit-row:hover .habit-del { opacity: 1; }
.habit-del:hover { color: var(--danger); }

/* ---------- favorites ---------- */
.fav-form { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.fav-form input#favName { grid-column: 2; }
.fav-form input#favNote { grid-column: 1 / -1; }
.fav-form input#favCreator, .fav-form input#favPeople, .fav-form input#favPlace,
.fav-form textarea { grid-column: 1 / -1; }
.fav-form textarea { resize: vertical; min-height: 92px; }
.fav-form button { grid-column: 1 / -1; }
.fav-search-card input { width: 100%; }
.fav-group h2 { margin-bottom: 12px; }
.fav-items { display: grid; gap: 10px; }
.fav-item { position: relative; border: 1px solid var(--line); border-radius: 10px; padding: 11px 34px 11px 14px; }
.fav-item b { font-size: 14.5px; }
.fav-item p { font-size: 13px; color: var(--dim); margin-top: 2px; }
.fav-item .fav-meta { color: var(--accent); }
.fav-item .fav-recipe { white-space: pre-wrap; padding: 8px 10px; margin-top: 8px; border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.fav-item small { display: block; font-family: var(--font-disp); font-size: 10px; letter-spacing: 0.1em; color: var(--dim); margin-top: 6px; }
.fav-item button { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--dim); cursor: pointer; opacity: 0; transition: opacity 0.2s; }
.fav-item:hover button { opacity: 1; }
.fav-item button:hover { color: var(--danger); }

/* ---------- mascot portraits (CGI series) ---------- */
.coach-face, .mascot-face, .ws-face, .comm-face { object-fit: cover; display: block; }
.coach-face { width: 100%; height: 100%; border-radius: 50%; }
.gorilla-avatar { overflow: hidden; padding: 0; }
.mascot-face { width: 100%; aspect-ratio: 1; border-radius: 9px; margin-bottom: 6px; }
.ws-face { width: 128px; height: 128px; border-radius: 50%; margin: 0 auto; border: 2px solid rgba(255, 59, 59, 0.5); box-shadow: 0 0 30px rgba(255, 59, 59, 0.3); }
.comm-face { width: 100%; height: 100%; border-radius: 50%; }
.comm-avatar { overflow: hidden; }
.comm-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ---------- community ---------- */
.comm-composer { border-left: 2px solid var(--ok); }
.comm-identity { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.comm-identity input[type="text"] { flex: 1; min-width: 140px; padding: 8px 12px; font-size: 14px; }
.comm-lead { font-family: var(--font-disp); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.comm-lead select { font-family: var(--font-disp); font-weight: 700; padding: 7px 10px; }
#commText { width: 100%; resize: vertical; line-height: 1.7; }
.comm-feed { display: grid; gap: 12px; }
.comm-card { margin-bottom: 0; }
.comm-head { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.comm-avatar {
  display: inline-grid; place-items: center; width: 36px; height: 36px; font-size: 19px; flex: none;
  border-radius: 50%; border: 1px solid var(--line); background: rgba(8, 9, 12, 0.6);
}
.comm-who { display: grid; line-height: 1.35; }
.comm-who b { font-size: 14px; }
.comm-who small { font-family: var(--font-disp); font-weight: 500; font-size: 10px; letter-spacing: 0.1em; color: var(--dim); text-transform: uppercase; }
.comm-del { margin-left: auto; background: none; border: none; color: var(--dim); cursor: pointer; opacity: 0.5; }
.comm-del:hover { color: var(--danger); opacity: 1; }
.comm-text { font-size: 14.5px; white-space: pre-wrap; word-break: break-word; }
.comm-respect {
  margin-top: 10px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 6px 14px; border-radius: 99px; color: var(--dim);
  background: rgba(8, 9, 12, 0.5); border: 1px solid var(--line);
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.comm-respect:hover { color: var(--text); border-color: var(--line-bright); }
.comm-respect.on { color: var(--ok); border-color: rgba(52, 211, 153, 0.5); box-shadow: 0 0 12px rgba(52, 211, 153, 0.2); }

/* ---------- HQ ---------- */
.hq-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 18px; }
.hq-tile {
  text-align: center; padding: 16px 8px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); backdrop-filter: blur(10px);
}
.hq-tile b { display: block; font-family: var(--font-disp); font-weight: 700; font-size: 26px; color: var(--cyan); }
.hq-tile span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.hq-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.hq-table th { text-align: left; font-family: var(--font-disp); font-weight: 500; font-size: 10.5px; letter-spacing: 0.12em; color: var(--dim); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.hq-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.hq-table .r { text-align: right; }
.hq-table .muted-sm { color: var(--dim); font-size: 11.5px; }
.hq-face { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.hq-coach { width: 44px; }

/* ---------- mood chart ---------- */
.mood-card h2 { margin-bottom: 12px; }
.mood-chart svg text { fill: var(--dim); }
@media (max-width: 760px) {
  .fav-form { grid-template-columns: 1fr; }
  .fav-form input#favName { grid-column: 1; }
}

/* ---------- coach ---------- */
.coach-card { border-left: 2px solid var(--ok); }
.gorilla-avatar {
  display: inline-grid; place-items: center; width: 34px; height: 34px; font-size: 19px;
  border-radius: 50%; border: 1px solid rgba(52, 211, 153, 0.45);
  background: radial-gradient(circle at 35% 30%, rgba(52, 211, 153, 0.25), rgba(8, 9, 12, 0.6));
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.25);
}
.coach-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.coach-actions { display: flex; gap: 8px; }
.coach-body { font-size: 15px; }
.day-so-far { margin-bottom: 12px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: linear-gradient(145deg,rgba(255,70,85,.09),rgba(255,255,255,.025)); }
.day-so-far__label { display: block; margin-bottom: 7px; color: var(--cyan); font: 600 10px/1 var(--font-disp); letter-spacing: .14em; text-transform: uppercase; }
.day-so-far p { margin: 0; color: var(--text); line-height: 1.55; }
.coach-body h4 { margin: 14px 0 6px; font-size: 15px; font-weight: 600; color: var(--cyan); }
.coach-body ul, .coach-body ol { padding-left: 22px; margin: 6px 0; }
.coach-body li { margin: 4px 0; }
.coach-empty { color: var(--dim); }
.coach-meta { margin-top: 14px; font-size: 12.5px; color: var(--dim); font-family: var(--font-disp); font-weight: 500; letter-spacing: 0.05em; }

/* ---------- calendar ---------- */
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-nav h2 { font-family: var(--font-disp); font-weight: 700; font-size: 16px; letter-spacing: 0.12em; text-transform: uppercase; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cal-dow span { text-align: center; font-family: var(--font-disp); font-weight: 500; font-size: 10.5px; letter-spacing: 0.14em; color: var(--dim); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-day {
  position: relative; aspect-ratio: 1; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(8, 9, 12, 0.4); color: var(--text);
  font-family: var(--font-disp); font-weight: 500; font-size: 13px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.cal-day:hover { border-color: var(--line-bright); transform: translateY(-2px); }
.cal-day.blank { visibility: hidden; }
.cal-day.future { opacity: 0.28; pointer-events: none; }
.cal-day.has-entry { border-color: rgba(255, 59, 59, 0.4); background: rgba(255, 59, 59, 0.07); }
.cal-day.today { border-color: var(--amber); box-shadow: 0 0 12px rgba(244, 177, 78, 0.25); }
.cal-day.selected { border-color: var(--line-bright); box-shadow: var(--glow-cyan); }
.cal-day .m { font-size: 13px; line-height: 1; }

/* ---------- entry lists (calendar month + search) ---------- */
.entry-list { display: grid; gap: 10px; }
.entry-item {
  display: grid; grid-template-columns: 120px 1fr; gap: 16px; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  background: var(--panel); color: var(--text); cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.entry-item:hover { border-color: var(--line-bright); transform: translateX(4px); box-shadow: var(--glow-cyan); }
.entry-item .when { display: flex; flex-direction: column; gap: 2px; }
.entry-item .when b { font-family: var(--font-disp); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; color: var(--cyan); }
.entry-item .when span { font-size: 12px; color: var(--dim); }
.entry-item .when .m { font-size: 16px; }
.entry-item .what { font-size: 14px; color: var(--text); }
.mini-thumbs { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.mini-thumbs img { width: 42px; height: 42px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); }
.mini-thumbs span { font-size: 12px; color: var(--dim); }

/* ---------- memories ---------- */
.mem-group { margin-bottom: 26px; }
.mem-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.mem-head h2 { font-size: 16px; font-weight: 600; }
.mem-head .m { font-size: 18px; }
.mem-snippet { color: var(--dim); font-size: 13.5px; margin-bottom: 10px; }
/* ── calendar: the month at a glance, plans + written days ── */
.cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 10.5px; letter-spacing: .08em; color: var(--dim, #9aa88a); padding: 4px 0; }
.cal-cell { position: relative; min-height: 52px; border: 1px solid var(--line, rgba(255,255,255,.08));
  border-radius: 10px; background: rgba(255,255,255,.02); color: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; padding: 5px 7px; gap: 2px; }
.cal-cell.empty { border: 0; background: none; cursor: default; }
.cal-cell b { font-size: 12.5px; font-weight: 600; }
.cal-cell .cal-marks { font-size: 11px; letter-spacing: 1px; }
.cal-cell.today { border-color: var(--amber, #e8c268); }
.cal-cell.sel { border-color: var(--red, #ff3b3b); background: rgba(255, 59, 59, .08); }
.cal-cell:hover:not(.empty) { border-color: var(--amber, #e8c268); }
.cal-day .ev-dot { font-size: 9px; line-height: 1; margin-left: 2px; }

.mem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
/* each photo sits in a cell so its own entry is one tap away underneath */
.mem-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mem-entry-link { border: 0; background: none; color: var(--dim, #9aa88a); font-size: 11.5px;
  cursor: pointer; text-align: left; padding: 0 2px; }
.mem-entry-link:hover { color: var(--amber, #e8c268); }
.mem-grid img {
  width: 100%; height: 140px; object-fit: cover; border-radius: 10px; cursor: zoom-in;
  border: 1px solid var(--line); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mem-grid img:hover { transform: scale(1.04); box-shadow: var(--glow-cyan); }

/* ---------- search ---------- */
.search-input { width: 100%; margin-bottom: 16px; font-size: 16px; padding: 14px 18px; }

/* ---------- settings ---------- */
.field-row { display: flex; gap: 10px; align-items: center; }
.field-row.wrap { flex-wrap: wrap; }
.field-row input[type="text"], .field-row input[type="password"] { flex: 1; min-width: 180px; }
.inline-label { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--dim); }
.switch-label { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.switch { position: relative; width: 42px; height: 24px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; z-index: 1; }
.switch i {
  position: absolute; inset: 0; border-radius: 99px; border: 1px solid var(--line);
  background: rgba(8, 9, 12, 0.6); transition: background 0.2s, border-color 0.2s;
}
.switch i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--dim); transition: transform 0.2s, background 0.2s;
}
.switch input:checked + i { background: rgba(255, 59, 59, 0.18); border-color: var(--line-bright); }
.switch input:checked + i::after { transform: translateX(18px); background: var(--cyan); box-shadow: 0 0 8px rgba(255, 59, 59, 0.6); }
.login-history { list-style: none; font-size: 13.5px; color: var(--dim); display: grid; gap: 4px; }
.login-history li::before { content: "◈ "; color: var(--cyan); }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 50; background: rgba(4, 6, 12, 0.92);
  display: grid; place-items: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.lightbox figure { max-width: min(92vw, 1100px); max-height: 88vh; display: grid; gap: 12px; justify-items: center; }
.lightbox img { max-width: 100%; max-height: 72vh; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 20px 70px rgba(0, 0, 0, 0.6); }
.lightbox figcaption { text-align: center; display: grid; gap: 4px; }
.lightbox figcaption strong { font-family: var(--font-disp); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; color: var(--cyan); text-transform: uppercase; }
.lightbox figcaption span { font-size: 14.5px; }
.lightbox figcaption em { font-size: 13px; color: var(--dim); }
.lb-close { position: fixed; top: 18px; right: 18px; }
.lb-arrow { position: fixed; top: 50%; transform: translateY(-50%); }
#lbPrev { left: 16px; } #lbNext { right: 16px; }

/* ---------- toast & confirm ---------- */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 60;
  background: rgba(18, 20, 26, 0.92); border: 1px solid var(--line-bright); color: var(--text);
  border-radius: 12px; padding: 12px 22px; font-size: 14.5px;
  box-shadow: var(--glow-cyan), 0 12px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: rise 0.3s ease both;
}
.confirm-wrap { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; background: rgba(4, 6, 12, 0.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.confirm-card {
  width: min(420px, 92vw); background: rgba(18, 20, 26, 0.95); border: 1px solid var(--line);
  border-radius: 16px; padding: 26px; text-align: center;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); animation: rise 0.25s ease both;
}
.confirm-card p { font-size: 15px; margin-bottom: 18px; }
.confirm-btns { display: flex; gap: 12px; justify-content: center; }

/* ---------- recovery crown ---------- */
.rec-crown {
  border: 1px solid rgba(244, 177, 78, 0.4); border-left: 3px solid var(--amber);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 6px; font-size: 14.5px;
  background: rgba(244, 177, 78, 0.06);
}
.rec-crown b { font-family: var(--font-disp); color: var(--amber); letter-spacing: 0.06em; }

/* ---------- social layer ---------- */
.dict-mic {
  flex: none; width: 34px; height: 34px; margin-left: 6px; border-radius: 9px; cursor: pointer;
  background: rgba(8, 9, 12, 0.5); border: 1px solid var(--line); font-size: 15px; vertical-align: middle;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.dict-mic:hover { border-color: var(--line-bright); }
.dict-mic.on { border-color: rgba(251, 113, 133, 0.6); box-shadow: 0 0 12px rgba(251, 113, 133, 0.3); animation: pulse 1.4s infinite; }
.intake-form label { position: relative; }
.intake-form .dict-mic { position: absolute; right: 4px; top: 22px; }

.prof-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.prof-pic {
  width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex: none;
  display: grid; place-items: center; font-size: 34px;
  border: 2px solid var(--line-bright); box-shadow: var(--glow-cyan); background: rgba(8, 9, 12, 0.6);
}
.prof-pic img, .prof-face { width: 100%; height: 100%; object-fit: cover; }
.prof-fields { display: grid; gap: 10px; flex: 1; min-width: 220px; }
.friend-row { padding: 12px 16px; }
.fav-star { opacity: 0.45; }
.fav-star.on { opacity: 1; color: var(--amber); border-color: rgba(244, 177, 78, 0.5); box-shadow: 0 0 12px rgba(244, 177, 78, 0.25); }

.chat-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 46;
  width: 62px; height: 62px; border-radius: 50%; overflow: hidden; cursor: pointer; padding: 0;
  border: 2px solid var(--line-bright); background: var(--panel-solid);
  box-shadow: var(--glow-cyan), 0 10px 34px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s;
  font-size: 26px; display: grid; place-items: center;
}
.chat-fab:hover { transform: scale(1.07); }
.chat-fab .coach-face { border-radius: 0; }
.chat-fab.has-mail::after {
  content: attr(data-unread); position: absolute; top: 2px; right: 2px;
  min-width: 20px; height: 20px; border-radius: 10px; padding: 0 5px;
  background: var(--cyan); color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--panel-solid);
}
.chat-dock {
  /* opens to the LEFT of the standing coach so the box never covers them */
  position: fixed; right: 148px; bottom: 10px; z-index: 47;
  width: min(400px, calc(100vw - 172px)); height: min(560px, calc(100vh - 90px));
  display: flex; flex-direction: column;
  background: rgba(18, 20, 26, 0.97); border: 1px solid var(--line-bright);
  border-radius: 16px; box-shadow: var(--glow-cyan), 0 24px 70px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.chat-face { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 20px; flex: none; border: 1px solid var(--line); }
.chat-face-img { width: 100%; height: 100%; object-fit: cover; }
.dock-tabs { display: flex; gap: 6px; }
.dock-tab {
  font-family: var(--font-disp); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em;
  padding: 6px 12px; border-radius: 99px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--dim);
}
.dock-tab.active { color: var(--text); border-color: var(--line-bright); }
.chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.chat-bubble {
  max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.55;
  background: rgba(200, 205, 215, 0.08); border: 1px solid var(--line);
  align-self: flex-start; white-space: pre-wrap; word-break: break-word;
}
.chat-bubble.mine { align-self: flex-end; background: rgba(255, 59, 59, 0.12); border-color: rgba(255, 59, 59, 0.35); }
.chat-inputrow { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); align-items: flex-end; }
/* 110px was about four lines — a dictated paragraph vanished above the fold.
   45vh still leaves the send button and the last exchange on screen. */
.chat-inputrow textarea { flex: 1; resize: none; max-height: min(45vh, 340px);
  font-size: 14px; padding: 9px 12px; overflow-y: auto; }

.mail-card { border-left: 2px solid var(--cyan); }
.mail-badge { color: var(--cyan); }
.mail-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; margin: 4px 0; border-radius: 10px; cursor: pointer;
  background: rgba(8, 9, 12, 0.4); border: 1px solid var(--line); color: var(--text);
  transition: border-color 0.2s;
}
.mail-row:hover { border-color: var(--line-bright); }
.mail-mid { flex: 1; display: grid; line-height: 1.4; min-width: 0; }
.mail-mid b { font-size: 13.5px; }
.mail-mid i { font-style: normal; font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-open { font-family: var(--font-disp); font-size: 10.5px; letter-spacing: 0.08em; color: var(--cyan); flex: none; }

.comm-kind { display: flex; gap: 8px; margin-bottom: 12px; }
.comm-tagrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.tag-chip { border-color: rgba(255, 59, 59, 0.3); }
.tag-chip.sel { border-color: var(--line-bright); box-shadow: var(--glow-cyan); background: rgba(255, 59, 59, 0.1); }
.tap-name { cursor: pointer; border-bottom: 1px dotted var(--dim); }
.tap-name:hover { color: var(--cyan); }
.comm-imgs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.comm-imgs img { width: min(48%, 240px); border-radius: 10px; border: 1px solid var(--line); cursor: zoom-in; }
.comm-thread { margin-top: 12px; display: grid; gap: 6px; }
.comm-comment { display: flex; align-items: flex-start; gap: 9px; padding: 7px 10px; border-radius: 9px; background: rgba(8, 9, 12, 0.35); }
.comm-avatar.sm { width: 26px; height: 26px; font-size: 14px; }
.cc-body { flex: 1; font-size: 13.5px; line-height: 1.5; }
.cc-body i { font-style: normal; color: var(--text); }
.cc-body b { color: var(--cyan); font-size: 12.5px; }
.cc-del { opacity: 0.4; }
.comm-crow { display: flex; gap: 8px; margin-top: 10px; }
.comm-crow input { flex: 1; font-size: 13.5px; padding: 8px 12px; }
.comm-avatar.big { width: 64px; height: 64px; font-size: 30px; margin: 0 auto 8px; }
.member-pop { display: grid; gap: 6px; justify-items: center; }
.member-pop b { font-size: 17px; }
.member-pop small { color: var(--dim); font-size: 12.5px; }
.member-socials { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.member-socials a { font-size: 13px; }
.member-shares { display: grid; gap: 6px; margin-top: 10px; text-align: left; }
.member-shares i { font-size: 12.5px; color: var(--dim); }

/* ---------- care card: soft, warm, zero alarm ---------- */
.care-pop { border-color: rgba(244, 177, 78, 0.5); box-shadow: 0 0 40px rgba(244, 177, 78, 0.15), 0 24px 80px rgba(0, 0, 0, 0.6); }
.care-lines { display: grid; gap: 8px; text-align: left; }
.care-lines a {
  display: block; padding: 10px 14px; border-radius: 10px; font-size: 13.5px;
  border: 1px solid rgba(244, 177, 78, 0.3); background: rgba(244, 177, 78, 0.05);
  color: var(--text); transition: border-color 0.2s;
}
.care-lines a:hover { border-color: rgba(244, 177, 78, 0.6); text-decoration: none; }
.care-lines b { color: var(--amber); }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  /* the dictate control stays a normal button on mobile (the floating mic was a bit
     much — Liza 2026-07-31); the chat dock keeps the corner instead */
  .sidebar {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; z-index: 40;
    flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px;
    border-right: none; border-top: 1px solid var(--line);
  }
  .brand, .sidebar-foot .streak-chip { display: none; }
  /* 10 tabs won't fit a phone side by side — the bar swipes, and stops widening the
     whole page (min-content here was pushing the layout viewport past device width) */
  .nav { display: flex; flex: 1; gap: 2px; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav-btn { flex-direction: column; gap: 2px; font-size: 10.5px; padding: 8px 6px; flex: 1 0 auto; align-items: center; }
  .sidebar-foot { margin: 0; flex: none; }
  #logoutBtn { font-size: 11px; padding: 8px; }
  .main { padding: 22px 14px 120px; min-width: 0; }
  .entry-item { grid-template-columns: 86px 1fr; gap: 10px; }
}

/* ===== "Need a boost" posts — they must stand out so the troop flocks in ===== */
.comm-card.boost {
  border-color: rgba(255, 190, 60, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 190, 60, 0.25), 0 0 34px rgba(255, 170, 30, 0.18);
  animation: boost-glow 2.6s ease-in-out infinite;
}
.boost-badge {
  font-family: var(--font-disp); font-weight: 700; font-size: 10.5px; letter-spacing: 0.16em;
  color: #ffc23c; background: rgba(255, 190, 60, 0.1);
  border: 1px solid rgba(255, 190, 60, 0.4); border-radius: 99px;
  padding: 6px 12px; margin-bottom: 10px; display: inline-block;
}
@keyframes boost-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 190, 60, 0.25), 0 0 26px rgba(255, 170, 30, 0.14); }
  50% { box-shadow: 0 0 0 1px rgba(255, 190, 60, 0.4), 0 0 44px rgba(255, 170, 30, 0.28); }
}
@media (prefers-reduced-motion: reduce) { .comm-card.boost { animation: none; } }

/* the menu wears the same five-pillar mark as the gate and the home-screen icon */
.brand-mark { width: 34px; height: 34px; border-radius: 8px; flex: none; box-shadow: 0 0 14px rgba(162, 201, 10, 0.35); }

/* photos that belong to one entry ride in a small strip under it */
.s-shots { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.s-shots img { width: 74px; height: 74px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; }
.thumb .pin-btn { margin-top: 4px; font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the archive bar: past days are preserved pages, and they say so */
.archive-bar { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap;
  border: 1px solid rgba(255, 190, 60, 0.35); background: rgba(255, 190, 60, 0.06);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 12px;
  font-family: var(--font-disp); font-size: 11px; letter-spacing: 0.14em; color: #ffc23c; }
.editor-top #yesterdayBtn { margin-left: auto; }

/* ===== the coach as a 3D cutout rising from the bottom edge (LizaChat behavior:
   rises into frame with a spring, peeks half-sunk when dismissed, pops when needed) ===== */
.chat-fab.cutout {
  bottom: 0; right: 10px;
  width: 128px; height: 138px; border-radius: 0; border: none; overflow: hidden;
  background: transparent; box-shadow: none; padding: 0;
  filter: drop-shadow(0 0 18px rgba(56, 232, 255, 0.26));
  transform: translateY(8%);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}
.chat-fab.cutout .fab-cutout {
  width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 0;
  /* melt the square render into the page — reads as a true cutout on the dark UI */
  -webkit-mask-image: radial-gradient(130% 118% at 50% 100%, #000 56%, transparent 82%);
  mask-image: radial-gradient(130% 118% at 50% 100%, #000 56%, transparent 82%);
}
.chat-fab.cutout:hover { transform: translateY(0); }
.chat-fab.cutout.peek { transform: translateY(62%); opacity: 0.9; }
.chat-fab.cutout.peek:hover { transform: translateY(34%); opacity: 1; }
.chat-fab.cutout.has-mail::after { top: 10px; right: 6px; }
/* non-cutout fallback keeps the old gentle bounce */
.chat-fab.peek:not(.cutout) { transform: translateX(52%) rotate(8deg) scale(0.72); opacity: 0.8; }
.chat-fab.pop:not(.cutout) { animation: fab-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.chat-fab.cutout.pop { animation: fab-rise 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes fab-rise {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(8%); opacity: 1; }
}
@keyframes fab-pop {
  0% { transform: translateY(26px) scale(0.4); opacity: 0; }
  70% { transform: translateY(-6px) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .chat-fab.pop, .chat-fab.cutout.pop { animation: none; } }

/* shared-memories shelf inside the member card */
.shared-item { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; text-align: left; display: block; }
.shared-item small { color: var(--dim); font-family: var(--font-disp); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.shared-note { font-style: italic; margin: 6px 0 2px; }
.mem-head .mem-share { margin-left: auto; }

/* phones: no room beside — the chat opens ABOVE the coach, who stands clear of the nav */
@media (max-width: 760px) {
  .chat-fab.cutout { bottom: 58px; width: 106px; height: 114px; }
  .chat-dock { left: 10px; right: 10px; width: auto; bottom: 176px; height: min(440px, calc(100vh - 250px)); }
}

/* entry place chip + friend-row buttons */
.s-place { font-size: 11.5px; color: var(--dim); border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px; }
.friend-row .comm-head { flex-wrap: wrap; row-gap: 8px; }
.friend-row .unfriend-btn { border: none; background: transparent; color: var(--dim); cursor: pointer; font-size: 14px; }
.friend-row .unfriend-btn:hover { color: var(--red); }

/* ===== premium finish pass ===== */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0.025), transparent 28%, transparent 72%, rgba(255,59,59,0.025));
}
.sidebar { background: linear-gradient(180deg, rgba(14,16,21,0.96), rgba(8,9,12,0.92)); backdrop-filter: blur(22px); }
.card {
  box-shadow: 0 18px 60px rgba(0,0,0,0.22), inset 0 1px rgba(255,255,255,0.025);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.card:hover { border-color: rgba(255,255,255,0.19); box-shadow: 0 22px 70px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.035); }
.nav-btn { border-radius: 11px; transition: background .2s ease, color .2s ease, transform .2s ease; }
.nav-btn:hover { transform: translateX(2px); }
.nav-btn.active { box-shadow: inset 3px 0 var(--cyan), 0 8px 26px rgba(255,59,59,.09); }
input[type="text"], input[type="password"], input[type="search"], input[type="date"], select, textarea { box-shadow: inset 0 1px 8px rgba(0,0,0,.18); }
.fav-item { background: linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); transition: transform .18s ease, border-color .18s ease; }
.fav-item:hover { transform: translateY(-2px); border-color: var(--line-bright); }
.chat-dock { box-shadow: 0 28px 90px rgba(0,0,0,.7), 0 0 36px rgba(255,59,59,.15), inset 0 1px rgba(255,255,255,.06); }
.chat-fab.cutout { width: 142px; height: 158px; overflow: visible; filter: drop-shadow(0 16px 16px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(255,59,59,.28)); }
.chat-fab.cutout .fab-cutout { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; -webkit-mask-image: none; mask-image: none; }
@media (max-width: 760px) {
  .card { padding: 18px; }
  .nav-btn:hover { transform: none; }
  .chat-fab.cutout { width: 116px; height: 130px; }
  .sidebar {
    width: 100%; max-width: 100vw; overflow: hidden;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .nav {
    width: 0; max-width: 100%; overflow-x: scroll; overflow-y: hidden;
    touch-action: pan-x; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  .nav-btn {
    flex: 0 0 72px; min-width: 72px;
    touch-action: pan-x; scroll-snap-align: start;
    -webkit-user-select: none; user-select: none;
  }
}
/* Goals: shared action system, branded by each journal's existing theme tokens */
.goal-create{display:grid;grid-template-columns:minmax(240px,2fr) repeat(2,minmax(125px,1fr)) minmax(160px,1fr) auto;gap:10px;align-items:end;margin-bottom:14px}
.goal-create input,.goal-create select{width:100%}.goal-date{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.goal-rewards{display:flex;align-items:center;gap:18px;justify-content:space-between;overflow-x:auto;margin-bottom:14px}.goal-rewards>b{color:#ffd45a;white-space:nowrap;font-size:18px}.goal-stickers{display:flex;gap:8px}.goal-sticker{white-space:nowrap;border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:7px 11px;font-size:12px;opacity:.42}.goal-sticker.earned{opacity:1;color:#ffe794;border-color:rgba(255,209,72,.5);background:linear-gradient(135deg,rgba(255,208,67,.16),rgba(255,255,255,.03));box-shadow:0 0 20px rgba(255,190,40,.1)}
.activity-mark{display:block;color:var(--cyan);font-size:11px;font-weight:850;letter-spacing:.04em;margin-bottom:4px}.fav-connected{display:block!important;position:static!important;margin:8px 0!important;padding:6px 9px!important;border:1px solid var(--line-bright)!important;border-radius:999px!important;color:var(--cyan)!important;background:rgba(255,255,255,.03)!important;font-size:11px!important;width:max-content!important}
.goal-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.goal-card{position:relative;overflow:hidden}.goal-card:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(var(--accent),#ffd34d)}.goal-card h2{font-size:19px;margin:10px 0 4px}.goal-top,.goal-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.goal-stars{margin-left:auto;color:#ffd45a;font-weight:800}.goal-priority{font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:5px 8px}.goal-priority.high{background:#ff475522;color:#ff8b94}.goal-priority.medium{background:#ffc24722;color:#ffd278}.goal-priority.low{background:#4bd19722;color:#87e5bd}.goal-progress{height:5px;background:rgba(255,255,255,.07);border-radius:9px;overflow:hidden;margin:12px 0}.goal-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#ffd34d);box-shadow:0 0 12px var(--accent)}.goal-steps{display:grid;gap:7px;margin:10px 0 15px}.goal-step{display:flex;gap:9px;align-items:flex-start;padding:9px;border-radius:10px;background:rgba(255,255,255,.025)}.goal-step input{accent-color:#f6c945;margin-top:3px}.goal-step small{color:var(--muted);white-space:nowrap}.goal-step.done span{text-decoration:line-through;opacity:.58}.goal-done{opacity:.7}.goal-done:after{content:"GOAL WON ★";position:absolute;right:-30px;top:20px;transform:rotate(35deg);background:#eebd39;color:#171006;padding:5px 34px;font-size:10px;font-weight:900;letter-spacing:.12em}
@media(max-width:760px){.goal-create{grid-template-columns:1fr 1fr}.goal-create>input:first-child,.goal-create .btn{grid-column:1/-1}.goal-list{grid-template-columns:1fr}.goal-rewards{align-items:flex-start;flex-direction:column}.goal-stickers{overflow-x:auto;width:100%;padding-bottom:3px}}
/* CHOOSE YOUR PATH (Liza 2026-08-14) — the fork the coach leaves at the end of a
   chapter. Two real doors, never a right answer beside a wrong one, so the
   chosen one is marked by warmth rather than a tick. */
.chap-fork{margin:16px 0 4px;padding:16px 17px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.028)}
.fork-q{font-size:15px;font-weight:650;line-height:1.55;margin-bottom:13px}
.fork-paths{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.fork-path{display:block;width:100%;text-align:left;padding:13px 15px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:inherit;font:inherit;cursor:pointer;transition:border-color .18s,background .18s,transform .18s}
.fork-path b{display:block;font-size:14px;margin-bottom:5px}
.fork-path small{display:block;font-size:12px;line-height:1.55;color:var(--dim)}
.fork-path:hover{border-color:var(--line-bright);transform:translateY(-1px)}
.fork-path.on{border-color:var(--line-bright);background:linear-gradient(135deg,rgba(255,59,59,.12),rgba(255,255,255,.03))}
.fork-note{margin-top:11px;font-size:12px;color:var(--dim);line-height:1.55}
.fork-write{margin-top:10px}
@media(max-width:560px){.fork-paths{grid-template-columns:1fr}}
/* YOU'VE BEEN HERE BEFORE (Liza 2026-08-14) — their own pages as evidence on a
   heavy night. Amber like a lamp left on, never an alarm. */
.echo-card{margin-top:12px;padding:15px 16px;border:1px solid rgba(255,196,84,.35);border-radius:13px;background:linear-gradient(145deg,rgba(255,196,84,.07),rgba(255,255,255,.02));animation:echoIn .5s ease}
.echo-head{font-size:11px;font-weight:850;letter-spacing:.09em;text-transform:uppercase;color:#ffc454}
.echo-when{margin:7px 0 6px;font-size:12.5px;color:var(--dim)}
.echo-quote{margin:0 0 9px;padding:9px 13px;border-left:2px solid rgba(255,196,84,.45);font-style:italic;font-size:14px;line-height:1.62}
.echo-proof{font-size:13px;line-height:1.6;margin-bottom:9px}
.echo-card.in-chat{max-width:88%;align-self:flex-start}
@keyframes echoIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.echo-card{animation:none}}
/* HARD ANNIVERSARIES (Liza 2026-08-14) — presence, not confetti. A candle,
   never an alarm: muted violet-grey, softer than every other card. */
.hard-offer{margin-top:12px;padding:15px 16px;border:1px solid rgba(176,166,200,.3);border-radius:13px;background:linear-gradient(145deg,rgba(176,166,200,.06),rgba(255,255,255,.015))}
.hard-head{font-size:11px;font-weight:850;letter-spacing:.09em;text-transform:uppercase;color:#b0a6c8}
.hard-ask{margin:7px 0 10px;font-size:13.5px;line-height:1.65}
.hard-row{display:flex;gap:8px;flex-wrap:wrap}
.hard-name{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.hard-name .hard-title{flex:1;min-width:200px}
.hard-today{margin:0 0 14px;padding:11px 14px;border-left:2px solid rgba(176,166,200,.55);border-radius:0 10px 10px 0;background:rgba(176,166,200,.07);font-size:14px;line-height:1.65}
.hard-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.hard-item:last-child{border-bottom:0}
.hard-item span{font-size:13.5px;line-height:1.5}
/* A STREAK THAT FORGIVES (Liza 2026-08-14) — the welcome-back card. Warm, brief,
   gone the moment they answer either way. */
.wb-card{margin:0 0 12px;padding:14px 16px;border:1px solid rgba(255,166,120,.35);border-radius:13px;background:linear-gradient(145deg,rgba(255,166,120,.07),rgba(255,255,255,.02))}
.wb-line{margin:0 0 10px;font-size:13.5px;line-height:1.65}
.wb-row{display:flex;gap:8px;flex-wrap:wrap}
/* PERMISSION SLIPS (Liza 2026-08-14) — a small paper slip, handed over. The one
   warm-paper object inside the neon app: torn edge, serif, slightly askew. */
.slip-card{position:relative;max-width:78%;align-self:flex-start;margin:6px 0 2px;padding:14px 18px 10px;
  background:linear-gradient(112deg,#f6efe2,#e9dcc6);color:#241d16;border-radius:3px 9px 9px 3px;
  transform:rotate(-1.1deg);box-shadow:0 14px 30px -12px rgba(0,0,0,.75);animation:echoIn .5s ease}
.slip-tear{position:absolute;left:0;top:0;bottom:0;width:7px;border-radius:3px 0 0 3px;
  background:repeating-linear-gradient(180deg,rgba(36,29,22,.18) 0 6px,rgba(36,29,22,.04) 6px 12px)}
.slip-text{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:15px;line-height:1.5;margin:0 0 6px}
.slip-sign{font-family:Georgia,serif;font-size:12.5px;text-align:right;margin:0;color:#6f6152}
.slip-note{display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#a1927e;margin-top:6px}
@media (prefers-reduced-motion:reduce){.slip-card{animation:none;transform:none}}
/* PEOPLE PAGES (Liza 2026-08-14) — the cast of their story. Chips atop
   Memories; the page itself is an overlay: facts, the narrated story of
   you-and-them (serif, like everything the narrator writes), shared days. */
.pp-strip{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 14px;-webkit-overflow-scrolling:touch}
.pp-circle{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;width:72px;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0}
.pp-ring{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;padding:2.5px;background:linear-gradient(135deg,var(--accent,#ff3b3b),#ffd34d);transition:transform .16s}
.pp-circle:hover .pp-ring{transform:scale(1.07)}
.pp-ring img,.pp-mono{width:100%;height:100%;border-radius:50%;object-fit:cover;display:grid;place-items:center;border:2.5px solid #0d0f16}
.pp-mono{background:hsl(var(--h) 45% 30%);color:#fff;font-weight:800;font-size:22px}
.pp-circle small{font-size:11px;color:var(--dim);max-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-cake{position:absolute;top:-2px;right:6px;font-size:14px;font-style:normal}
.pp-head-row{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.pp-ring-lg{width:84px;height:84px;flex:0 0 auto}
.pp-ring-lg .pp-mono{font-size:30px}
.pp-overlay{position:fixed;inset:0;z-index:90;background:rgba(6,8,14,.78);backdrop-filter:blur(6px);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:34px 14px}
.pp-page{position:relative;width:min(680px,100%);background:var(--panel,#12141c);border:1px solid var(--line);border-radius:16px;padding:26px 24px;margin-bottom:40px;background:#12141c}
.pp-close{position:absolute;top:14px;right:14px;border:1px solid var(--line);background:none;color:inherit;border-radius:9px;padding:5px 10px;cursor:pointer}
.pp-name{font-size:26px;margin:0 0 10px}
.pp-facts{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.pp-fact{font-size:11.5px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--dim)}
.pp-story{border:1px solid rgba(255,196,84,.3);border-radius:13px;padding:16px 18px;margin:4px 0 14px;background:linear-gradient(145deg,rgba(255,196,84,.05),rgba(255,255,255,.015))}
.pp-story-label{font-size:10.5px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:#ffc454;display:block;margin-bottom:8px}
.pp-story p{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:15px;line-height:1.72;margin:0}
.pp-places{font-size:13px;color:var(--dim);margin:0 0 14px}
.pp-days{display:grid;gap:10px}
.pp-day{border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;transition:border-color .15s}
.pp-day:hover{border-color:var(--line-bright)}
.pp-day-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:5px}
.pp-day-head small{color:var(--dim)}
.pp-day p{font-size:13.5px;color:var(--dim);margin:0}
.pp-thumbs{display:flex;gap:7px;margin-top:9px}
.pp-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:9px;border:1px solid var(--line)}
/* THE CARE LEDGER (Liza 2026-08-14) — what you gave, counted. Soft green like
   something growing; never a scoreboard, a witness. */
.pp-care{border:1px solid rgba(110,220,160,.28);border-radius:13px;padding:14px 17px;margin:0 0 14px;background:linear-gradient(145deg,rgba(110,220,160,.05),rgba(255,255,255,.012))}
.pp-care-label{font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:#7fdcaa;display:block;margin-bottom:8px}
.pp-care ul{margin:0;padding-left:18px}
.pp-care li{font-size:13.5px;line-height:1.7}
.pp-care li small{color:var(--dim);margin-left:6px}
.pp-care-note{display:block;margin-top:8px;font-size:11.5px;color:var(--dim)}
/* UNSENT LETTERS (Liza 2026-08-14) — sealed means sealed. Muted lavender-grey;
   envelopes carry only their date until their author says otherwise. */
.pp-letters{border:1px solid rgba(178,170,210,.26);border-radius:13px;padding:15px 17px;margin-top:14px;background:linear-gradient(145deg,rgba(178,170,210,.045),rgba(255,255,255,.01))}
.pp-let-label{font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:#b2aad2;display:block;margin-bottom:10px}
.pp-envelope{display:block;width:100%;text-align:left;margin:0 0 8px;padding:11px 14px;border:1px dashed rgba(178,170,210,.4);border-radius:10px;background:none;color:inherit;font:inherit;font-size:13.5px;cursor:pointer}
.pp-envelope:hover{border-style:solid}
.pp-let-form{margin-top:10px}
.pp-let-form textarea{width:100%;margin:8px 0}
.pp-let-open{border:1px solid rgba(178,170,210,.4);border-radius:10px;padding:14px 16px;margin:0 0 8px}
.pp-let-date{font-size:11.5px;color:var(--dim);margin:0 0 8px}
.pp-let-body{font-family:Georgia,"Times New Roman",serif;font-size:14.5px;line-height:1.75;font-style:italic}
.pp-let-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
/* LETTERS TO FUTURE YOU (Liza 2026-08-14) — envelopes on the Book shelf. A
   ready one glows gold; an opened one settles back to quiet. */
.fut-env{display:block;width:100%;text-align:left;margin:0 0 8px;padding:12px 15px;border:1px dashed rgba(255,212,90,.35);border-radius:11px;background:none;color:inherit;font:inherit;font-size:13.5px;cursor:pointer}
.fut-env small{display:block;margin-top:3px;color:var(--dim);font-size:11.5px}
.fut-env.ready{border-style:solid;border-color:rgba(255,212,90,.75);background:linear-gradient(145deg,rgba(255,212,90,.09),rgba(255,255,255,.015));box-shadow:0 0 22px rgba(255,200,60,.12)}
.fut-env.opened{opacity:.6}
.fut-open{border:1px solid rgba(255,212,90,.45);border-radius:11px;padding:15px 17px;margin:0 0 8px}
.fut-from{font-size:11.5px;font-weight:850;letter-spacing:.07em;text-transform:uppercase;color:#ffd45a;margin:0 0 9px}
.fut-body{font-family:Georgia,"Times New Roman",serif;font-size:14.5px;line-height:1.78;font-style:italic;margin-bottom:11px}
.fut-ready-line{display:block;width:100%;text-align:left;margin:0 0 12px;padding:11px 14px;border:1px solid rgba(255,212,90,.6);border-radius:11px;background:linear-gradient(145deg,rgba(255,212,90,.1),rgba(255,255,255,.02));color:inherit;font:inherit;font-size:13.5px;cursor:pointer}
.fut-ready-line span{color:#ffd45a;font-weight:700}
/* THE MIRROR (Liza 2026-08-14) — their own record as the defense. Cool silver,
   held up quietly beside the chapter. */
.mirror-blk{border:1px solid rgba(190,200,215,.3);border-left:3px solid rgba(190,200,215,.65);border-radius:10px;padding:14px 17px;margin:14px 0 4px;background:linear-gradient(145deg,rgba(190,200,215,.05),rgba(255,255,255,.012))}
.mirror-label{font-size:10.5px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:#becfd7;display:block;margin-bottom:8px}
.mirror-blk p{font-size:13.5px;line-height:1.72;margin:0}
/* THE DEDICATION PAGE (Liza 2026-08-14) — centered italic serif, the way a
   real book opens. */
.ded-page{position:relative;text-align:center;padding:26px 40px;border:1px solid var(--line);border-radius:13px;margin-bottom:4px}
.ded-text{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:16.5px;line-height:1.7;margin:0;color:var(--text,inherit)}
.ded-page .ded-edit{position:absolute;top:8px;right:8px;opacity:.5}
.ded-page .ded-edit:hover{opacity:1}
.ded-ask{border:1px dashed var(--line);border-radius:13px;padding:16px 18px}
.ded-ask .field-row{margin:8px 0}
/* THE THREE FACES OF A DAY (Liza 2026-08-15) — pills pick the face; the
   narrator's telling reads like a page, its closing question an open door. */
.face-pills{display:flex;gap:7px;margin:0 0 12px}
.face-pill{border:1px solid var(--line);background:none;color:var(--dim);font:inherit;font-size:12px;padding:6px 13px;border-radius:999px;cursor:pointer;transition:all .15s}
.face-pill.on{color:inherit;border-color:var(--line-bright);background:var(--panel)}
.day-story{border:1px solid rgba(255,196,84,.3);border-radius:13px;padding:18px 20px;margin-bottom:12px;background:linear-gradient(145deg,rgba(255,196,84,.045),rgba(255,255,255,.012))}
.day-story p{font-family:Georgia,"Times New Roman",serif;font-size:15.5px;line-height:1.8;margin:0 0 12px}
.day-story p:last-of-type{margin-bottom:6px}
.day-story-note{display:block;font-size:11px;letter-spacing:.06em;color:var(--dim)}
.chatraw{margin:6px 0 12px}
/* layer 3 is a list again (Liza 2026-08-27: "3rd layer bulleted overview") */
.day-recap ul{margin:6px 0 0;padding-left:1.15em}
.day-recap li{margin:.25em 0;line-height:1.55}
.chatraw-body{border:1px solid var(--line);border-radius:11px;padding:12px 15px;margin-top:8px;max-height:340px;overflow-y:auto}
.chatraw-msg{font-size:13px;line-height:1.6;margin:0 0 9px}
.chatraw-msg span{color:var(--dim);font-size:11px;margin-right:7px}
/* both voices in the scene, hers marked (Liza 2026-08-27: read it as an episode) */
.chatraw-msg.them{color:var(--dim)}
.chatraw-msg.mine{color:var(--tx,inherit)}
.chatraw-mine{border-top:1px solid var(--line);margin-top:12px;padding-top:10px}
/* THE BACKSTORY SHELF (Liza 2026-08-15) — parchment-adjacent, quieter than the
   living pages: the past is held, not performed. */
.bs-seg{border:1px solid rgba(200,184,150,.28);border-radius:12px;padding:12px 16px;margin:0 0 9px;background:linear-gradient(145deg,rgba(200,184,150,.045),rgba(255,255,255,.01))}
.bs-seg summary{cursor:pointer;display:flex;align-items:baseline;gap:10px;list-style:none}
.bs-seg summary::-webkit-details-marker{display:none}
.bs-era{font-size:11.5px;color:#c8b896;letter-spacing:.05em}
.bs-people{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 4px}
.bs-person{border:1px solid rgba(200,184,150,.35);background:none;color:inherit;font:inherit;font-size:12px;padding:4px 11px;border-radius:999px;cursor:pointer}
.bs-text{font-family:Georgia,"Times New Roman",serif;font-size:14.5px;line-height:1.75;margin:10px 0 4px}
.bs-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* ✨ sparks — ideas kept warm (ember on dark) */
.spark{background:linear-gradient(135deg,rgba(255,170,80,.07),rgba(255,120,50,.03));border:1px solid rgba(255,170,80,.22);border-radius:14px;padding:13px 16px;margin-bottom:10px}
.spark summary{cursor:pointer;display:flex;align-items:baseline;gap:9px;list-style:none;flex-wrap:wrap}
.spark summary::-webkit-details-marker{display:none}
.spark-kind{font-size:15px}
.spark-who{color:#e0b98a;font-size:12px}
.spark-when{margin-left:auto;color:#9a8a76;font-size:11.5px}
.spark-text{font-family:Georgia,"Times New Roman",serif;font-size:14.5px;line-height:1.7;margin:10px 0 4px;white-space:normal}
.spark-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* 🤝 promises — vows on parchment-dark */
.promise{border:1px solid rgba(120,200,160,.25);background:rgba(90,180,140,.05);border-radius:12px;padding:11px 14px;margin-bottom:8px}
.promise-text{font-family:Georgia,"Times New Roman",serif;font-size:14.5px;line-height:1.6}
.promise-meta{display:flex;gap:12px;align-items:center;margin-top:7px;font-size:11.5px;color:#8fae9e}
.promise-held{color:#9fd8ba}
.promise-meta .btn{margin-left:auto}

/* 🔒 my eyes only — day + backstory locks */
.day-lock{margin-left:auto;border:1px solid rgba(200,200,220,.22);background:none;color:#9aa0b8;font:inherit;font-size:12px;padding:5px 12px;border-radius:999px;cursor:pointer}
.day-lock.on{border-color:rgba(255,200,120,.4);color:#e8c88f}

/* 🕰 era favorites + clickable where/with + the outline under the story */
.fav-era{color:#c8b896;font-size:12px;margin:2px 0}
.fav-person{border:1px solid rgba(160,190,255,.28);background:none;color:inherit;font:inherit;font-size:12px;padding:3px 10px;border-radius:999px;cursor:pointer;margin:2px 2px 2px 0}
.fav-person:hover{border-color:rgba(160,190,255,.55)}
.fav-where{display:block;border:1px solid rgba(255,180,120,.3);background:none;color:#e8c88f;font:inherit;font-size:12px;padding:4px 11px;border-radius:999px;cursor:pointer;margin:6px 0;width:max-content}
.day-recap{border-left:2px solid rgba(200,200,220,.18);margin:14px 0 4px;padding:4px 0 4px 14px;color:#b9bdd0;font-size:13.5px;line-height:1.6}
.day-recap-label{display:block;letter-spacing:.08em;font-size:10.5px;color:#8a8fa8;text-transform:uppercase;margin-bottom:4px}

/* 🗺 the modern map: skin picker + replay dots (MapLibre vector) */
.map-skins{position:absolute;left:10px;bottom:10px;z-index:5;display:flex;gap:6px;background:rgba(10,12,18,.72);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:4px}
.map-skins button{border:0;background:none;color:#c9cbd8;font:inherit;font-size:11.5px;letter-spacing:.04em;padding:5px 12px;border-radius:999px;cursor:pointer}
.map-skins button.on{background:rgba(255,255,255,.14);color:#fff}
.replay-dot{width:14px;height:14px;border-radius:50%;background:#ffd34d;border:2px solid #ff3b3b;box-shadow:0 0 12px rgba(255,211,77,.75);cursor:pointer}
.maplibregl-popup-content{background:#0f1219;color:#e8eaf2;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px 14px}
.maplibregl-popup-tip{border-top-color:#0f1219;border-bottom-color:#0f1219}
.maplibregl-ctrl-group{background:rgba(10,12,18,.8);border:1px solid rgba(255,255,255,.14)}
.maplibregl-ctrl-group button+button{border-top:1px solid rgba(255,255,255,.12)}
.maplibregl-ctrl-group button span{filter:invert(1)}
#mapEl{position:relative}

/* 🚗 hands-free: the mic stays open between messages (driving) */
.chat-hands{display:inline-flex;align-items:center;gap:0;cursor:pointer;user-select:none}
.chat-hands input{position:absolute;opacity:0;width:0;height:0}
.chat-hands span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.14);font-size:15px;opacity:.5;transition:.15s}
.chat-hands input:checked+span{opacity:1;border-color:rgba(120,220,170,.6);background:rgba(120,220,170,.14);box-shadow:0 0 10px rgba(120,220,170,.25)}
#chatMic.recording{background:rgba(255,80,80,.18);border-color:rgba(255,80,80,.55)}

/* 🔊 the free voice */
#chatSpeak.recording{background:rgba(120,200,255,.18);border-color:rgba(120,200,255,.55)}

/* ✍️ say what is wrong, in english */
.pp-fix{margin:16px 0 6px;padding:12px 14px;border:1px dashed rgba(160,160,200,.28);border-radius:12px}
.pp-fix label{display:block;font-size:12px;color:#9aa0b8;margin-bottom:6px}
.pp-fix textarea{width:100%;resize:vertical;font:inherit;font-size:14px}
.pp-fix-row{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.pp-fix-out{font-size:12.5px;color:#9aa0b8;display:flex;gap:8px;flex-wrap:wrap}
.pp-changed{color:#9fd8ba}
.pp-unclear{color:#f0c987}

/* 📕 the book before the book */
.bs-chapter{background:rgba(200,184,150,.05);border:1px solid rgba(200,184,150,.22);border-radius:12px;padding:12px 15px;margin:8px 0}
.bs-chapter summary{cursor:pointer;display:flex;align-items:baseline;gap:10px;list-style:none}
.bs-chapter summary::-webkit-details-marker{display:none}
.bs-flash{display:flex;align-items:center;gap:7px;font-size:12px;color:#9aa0b8}

/* 🛟 the safety net card */
.net-item{border:1px solid rgba(255,190,120,.28);background:rgba(255,190,120,.05);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.net-excerpt{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:14px;line-height:1.6;margin:0 0 10px;color:#e8dcc8}
.net-row{display:flex;gap:8px;flex-wrap:wrap}
.net-who{display:flex;gap:8px;margin-top:8px}
.net-who input{flex:1}

/* the composer label when it is aimed at a past day (Liza 2026-09-02: a fortnight
   of his dictation landed on a day three weeks gone). Loud on purpose. */
.composer-past { color: #ffb4a2; font-weight: 700; letter-spacing: .02em; }