/* ============================================================
   HEARTH — design system
   Earth-tone theme system via CSS custom properties.
   Themes set an --accent + warm neutrals; [data-mode="dark"]
   re-tints the neutrals while keeping each theme's character.
   ============================================================ */

:root{
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px -12px rgba(60,40,20,.35);
  --shadow-soft: 0 4px 14px -8px rgba(60,40,20,.4);
  --maxw: 720px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-ui: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Type scale = breakpoint base × user "Larger text" multiplier, so the
     accessibility setting is ALWAYS an increase, at every screen size. */
  --fs-base: 16px;
  --fs-scale: 1;
  --fs: calc(var(--fs-base) * var(--fs-scale));
  --danger: #b03427;
  /* interactive control boundaries — must clear WCAG 1.4.11 (>=3:1). Light
     themes' --border already qualifies; dark mode overrides this below. */
  --chip-border: var(--border);
}

/* ---- THEME 1: CLAY (default) ----
   Light-mode --accent-ink is DARK on the warmer/lighter accents: cream text
   on those gradients fails WCAG contrast (worst was dune at 1.97:1). */
[data-theme="clay"]{
  --bg:#f4ecdd; --surface:#fffaf1; --surface-2:#f6e9d6;
  --text:#3a2a1c; --text-soft:#7a6450; --border:#e6d6bf;
  --accent:#b5713f; --accent-2:#d99b5b; --accent-ink:#2f1d10;
  --glow:#f3a23b;
}
/* ---- THEME 2: SAGE ---- */
[data-theme="sage"]{
  --bg:#eef0e6; --surface:#fbfcf6; --surface-2:#e6ead7;
  --text:#2f3527; --text-soft:#5f6a51; --border:#d6dcc4;
  --accent:#6f7f53; --accent-2:#92a06e; --accent-ink:#1c2213;
  --glow:#a7b97a;
}
/* ---- THEME 3: LOAM ---- */
[data-theme="loam"]{
  --bg:#efe7df; --surface:#fdf8f2; --surface-2:#e9dccd;
  --text:#33271d; --text-soft:#6f5c4a; --border:#ddccb9;
  --accent:#8a5a3b; --accent-2:#b07f54; --accent-ink:#241509;
  --glow:#cf9b5c;
}
/* ---- THEME 4: DUNE ---- */
[data-theme="dune"]{
  --bg:#f3eddf; --surface:#fffdf6; --surface-2:#efe5d0;
  --text:#3d3526; --text-soft:#6e6350; --border:#e4d8bf;
  --accent:#c08a2d; --accent-2:#d9ad5b; --accent-ink:#33260c;
  --glow:#e7bd5f;
}
/* ---- THEME 5: MOSS & STONE ---- */
[data-theme="moss"]{
  --bg:#e9ece8; --surface:#f8faf6; --surface-2:#dfe4dd;
  --text:#28302a; --text-soft:#566058; --border:#cfd6cd;
  --accent:#4f6b50; --accent-2:#728a6f; --accent-ink:#f4f7f2;
  --glow:#8aa37f;
}

/* ---- DARK MODE: shared dark neutrals, theme accent preserved ---- */
[data-mode="dark"]{
  --bg:#1c1813; --surface:#262019; --surface-2:#2f2820;
  --text:#f0e6d6; --text-soft:#b6a48c; --border:#3b322a;
  --accent-ink:#1c1813;
  --shadow:0 14px 34px -14px rgba(0,0,0,.6);
  --danger:#ff8a75;
  --chip-border:#71583c; /* >=3:1 on dark surfaces (review F.11) */
  color-scheme: dark; /* native form controls / scrollbars match */
}
[data-mode="dark"][data-theme="sage"]{ --bg:#181b15; --surface:#21241c; --surface-2:#282c20; --text:#eef0e2;}
[data-mode="dark"][data-theme="moss"]{ --bg:#151814; --surface:#1e221c; --surface-2:#242a22; --text:#e9efe5;}
/* Accent doubles as TEXT color (stats, entry-type kickers, links) — the three
   deeper accents fail contrast on the dark neutrals, so dark mode lightens
   them just enough to pass while keeping each theme's character. */
[data-mode="dark"][data-theme="sage"]{ --accent:#94a771; }
[data-mode="dark"][data-theme="loam"]{ --accent:#c08a5e; }
[data-mode="dark"][data-theme="moss"]{ --accent:#7fa780; }

*{ box-sizing:border-box; }
/* The hidden attribute must always win over component display rules below. */
[hidden]{ display:none !important; }
html,body{ margin:0; padding:0; }
/* The scale lives on the ROOT so every rem-based size in the app actually
   responds to the "Larger text" setting — body-only scaling missed most of the UI. */
html{ font-size:var(--fs); }
body{
  font-family:var(--font-ui);
  font-size:1rem;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  min-height:100vh;
  transition:background .4s var(--ease), color .3s var(--ease);
}
h1,h2,h3{ font-family:var(--font); font-weight:600; line-height:1.2; margin:0 0 .4em; }
button{ font-family:inherit; }

/* ---- buttons ---- */
.btn{
  border:0; border-radius:999px; padding:.85rem 1.4rem; font-size:1rem; font-weight:600;
  cursor:pointer; transition:transform .15s var(--ease), filter .2s, background .2s;
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--accent-ink); box-shadow:var(--shadow-soft); }
.btn-primary:hover{ filter:brightness(1.05); }
.btn-soft{ background:var(--surface-2); color:var(--text); }
.btn-ghost{ background:transparent; color:var(--text-soft); }
.btn-lg{ padding:1.05rem 1.6rem; font-size:1.08rem; width:100%; max-width:420px; }
.btn:focus-visible, .icon-btn:focus-visible, .nav-item:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--accent); outline-offset:2px;
}

.icon-btn{
  width:44px; height:44px; border-radius:50%; border:0; background:transparent; color:var(--text);
  display:grid; place-items:center; cursor:pointer;
}
.icon-btn:hover{ background:var(--surface-2); }
.icon-btn svg{ width:24px; height:24px; }

/* ============ LAYOUT ============ */
.app{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(14px,4vw,28px) calc(96px + env(safe-area-inset-bottom, 0px)); min-height:100vh; }
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:max(10px,env(safe-area-inset-top)) 0 10px; background:linear-gradient(var(--bg) 70%, transparent);
}
.brand{ display:flex; align-items:center; gap:.5rem; font-family:var(--font); font-size:1.25rem; font-weight:600; }
.brand-flame{ width:14px; height:18px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 70%, var(--glow), var(--accent)); box-shadow:0 0 14px -2px var(--glow); }

.views{ position:relative; }
.view{ animation:fade .35s var(--ease); }
.view[hidden]{ display:none; }
.view-title{ font-size:1.6rem; margin-top:.6rem; }
.view-hint{ color:var(--text-soft); margin-top:-.2rem; }

/* ============ HEARTH HOME ============ */
.hearth-stage{ text-align:center; padding:clamp(18px,5vh,48px) 0 8px; position:relative; }
.hearth-glow{
  position:absolute; inset:-10% 0 auto 0; height:280px; margin:auto; width:280px; left:0; right:0;
  background:radial-gradient(circle, var(--glow), transparent 62%); opacity:.5; filter:blur(8px);
  animation:flicker 4s ease-in-out infinite; pointer-events:none;
}
.hearth-visual{
  width:clamp(150px,42vw,220px); height:clamp(150px,42vw,220px); margin:0 auto; position:relative; z-index:1;
}
.hearth-greeting{ font-family:var(--font); font-size:1.7rem; margin:.4rem 0 0; position:relative; z-index:1; }
.hearth-sub{ color:var(--text-soft); margin:.2rem 0 0; position:relative; z-index:1; }
.home-actions{ display:flex; flex-direction:column; align-items:center; gap:.7rem; margin:1.4rem 0; }
.stat-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.7rem 1.1rem; text-align:center; min-width:92px; box-shadow:var(--shadow-soft); }
.stat b{ display:block; font-size:1.5rem; font-family:var(--font); color:var(--accent); }
.stat span{ font-size:.78rem; color:var(--text-soft); }
.onthisday{ margin-top:1.4rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem; box-shadow:var(--shadow-soft); }
.onthisday h3{ font-size:1rem; color:var(--accent); margin:0 0 .3rem; }

/* ============ WRITE: mode grid ============ */
.mode-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:1rem; }
.mode-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem;
  text-align:left; cursor:pointer; transition:transform .15s var(--ease), box-shadow .2s; box-shadow:var(--shadow-soft); color:var(--text);
}
.mode-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.mode-card .m-ico{ width:34px; height:34px; color:var(--accent); margin-bottom:.5rem; display:block; }
.mode-card b{ font-family:var(--font); font-size:1.06rem; display:block; }
.mode-card span{ font-size:.84rem; color:var(--text-soft); }

/* ============ EDITOR ============ */
.back-link{ background:none; border:0; color:var(--text-soft); cursor:pointer; padding:.6rem 0; font-size:.95rem; }
.editor-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow-soft); }
.editor-card h2{ font-size:1.35rem; }
.prompt-card{ background:linear-gradient(135deg,var(--surface-2),var(--surface)); border:1px dashed var(--accent); border-radius:var(--radius-sm); padding:1rem 1.1rem; margin-bottom:1rem; font-family:var(--font); font-size:1.15rem; color:var(--text); }
label.field-label{ display:block; font-size:.85rem; color:var(--text-soft); margin:.9rem 0 .35rem; font-weight:600; }
textarea, input[type=text], input[type=email], input[type=password], input[type=time], input[type=search], select{
  width:100%; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--text);
  padding:.8rem .9rem; font-size:1rem; font-family:var(--font-ui); resize:vertical;
}
textarea{ min-height:120px; line-height:1.6; font-family:var(--font); font-size:1.08rem; }
.mood-row{ display:flex; gap:8px; margin:.4rem 0 0; }
.mood-btn{ flex:1; border:1px solid var(--border); background:var(--bg); border-radius:var(--radius-sm); padding:.55rem 0; font-size:1.4rem; cursor:pointer; transition:transform .1s; }
.mood-btn[aria-pressed=true]{ border-color:var(--accent); background:var(--surface-2); transform:scale(1.06); }
.editor-actions{ display:flex; gap:10px; margin-top:1.2rem; }
.editor-actions .btn{ flex:1; }
.tgt-input{ margin-bottom:.6rem; }
.photo-preview{ margin-top:.6rem; max-width:100%; border-radius:var(--radius-sm); border:1px solid var(--border); }
.hint-soft{ font-size:.82rem; color:var(--text-soft); margin:.5rem 0 0; }

/* ============ TIMELINE ============ */
.search-wrap{ margin:.6rem 0 1rem; }
.timeline-list{ display:flex; flex-direction:column; gap:12px; }
.entry-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem;
  cursor:pointer; box-shadow:var(--shadow-soft); transition:transform .14s var(--ease);
}
.entry-card:hover{ transform:translateX(3px); }
.entry-card .ec-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:.3rem; }
.entry-card .ec-type{ font-size:.74rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); }
.entry-card .ec-date{ font-size:.78rem; color:var(--text-soft); }
.entry-card .ec-body{ color:var(--text); display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.entry-card .ec-mood{ font-size:1rem; }
.empty-state{ text-align:center; color:var(--text-soft); padding:3rem 1rem; }
.empty-state .es-flame{ font-size:2.4rem; }

/* entry detail */
.entry-detail-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow-soft); }
.entry-detail-card .ed-date{ color:var(--text-soft); font-size:.85rem; }
.entry-detail-card .ed-body{ font-family:var(--font); font-size:1.18rem; line-height:1.7; white-space:pre-wrap; margin-top:.6rem; }
.entry-detail-actions{ display:flex; gap:10px; margin-top:1.2rem; flex-wrap:wrap; }

/* ============ SETTINGS ============ */
/* Settings home: a short list of categories, not a wall of controls. */
.settings-menu{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft); margin-bottom:16px; }
.settings-menu-item{ width:100%; display:flex; align-items:center; gap:14px; padding:.85rem 1.1rem; border:0; border-top:1px solid var(--border); background:none; color:inherit; text-align:left; cursor:pointer; font:inherit; }
.settings-menu-item:first-child{ border-top:0; }
.settings-menu-item:hover, .settings-menu-item:focus-visible{ background:var(--surface-2); }
.smi-icon{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); color:var(--accent); }
.smi-icon svg{ width:20px; height:20px; }
.smi-text{ flex:1 1 auto; min-width:0; display:block; }
.smi-text b{ display:block; font-family:var(--font); font-size:1.02rem; }
.smi-text span{ display:block; font-size:.82rem; color:var(--text-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.smi-chev{ flex:0 0 auto; width:18px; height:18px; color:var(--text-soft); }
.smi-chev svg{ width:100%; height:100%; }
/* Settings detail: one focused card per category, reached via the menu. */
.settings-detail-title{ margin:.2rem 0 .7rem; }
.settings-group{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:16px; overflow:hidden; box-shadow:var(--shadow-soft); }
.settings-group h3{ font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-soft); margin:0; padding:.9rem 1.1rem .3rem; }
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:.9rem 1.1rem; border-top:1px solid var(--border); }
.set-row:first-of-type{ border-top:0; }
.set-row .sr-label b{ display:block; }
.set-row .sr-label span{ font-size:.82rem; color:var(--text-soft); }
.theme-swatches{ display:flex; gap:10px; padding:.6rem 1.1rem 1.1rem; flex-wrap:wrap; }
.swatch{ width:46px; height:46px; border-radius:50%; border:3px solid transparent; cursor:pointer; box-shadow:var(--shadow-soft); }
.swatch[aria-pressed=true]{ border-color:var(--text); }
/* toggle (role=switch → state rides on aria-checked). The ::before layer
   quietly extends the hit area to ~44px without changing the visual. */
.toggle{ width:50px; height:30px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); position:relative; cursor:pointer; flex:0 0 auto; }
.toggle::before{ content:""; position:absolute; inset:-8px -4px; }
.toggle::after{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--text-soft); transition:transform .2s var(--ease), background .2s; }
.toggle[aria-checked=true]{ background:var(--accent); }
.toggle[aria-checked=true]::after{ transform:translateX(20px); background:var(--accent-ink); }
.pledge{ font-size:.86rem; color:var(--text-soft); padding:.4rem 1.1rem 1.1rem; line-height:1.6; }
/* account & sync */
.auth-tabs{ display:flex; gap:8px; margin:.2rem 1.1rem .2rem; }
.auth-tab{ flex:1; background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:.7rem .5rem; min-height:44px; cursor:pointer; color:var(--text-soft); font-weight:600; }
.auth-tab.active{ background:var(--surface-2); color:var(--text); border-color:var(--accent); }
.stack-form{ display:flex; flex-direction:column; gap:.6rem; padding:.6rem 1.1rem .2rem; }
.stack-form .field-label{ margin:0; }
.stack-form .btn{ margin-top:.4rem; }
#authMsg{ padding:0 1.1rem; color:var(--danger); min-height:1em; margin:.2rem 0; }
.ob-card .btn{ width:100%; margin-top:.6rem; justify-content:center; }
.ob-card .field-label{ margin-top:.6rem; }
/* Hearth Sync subscription (in the Account settings pane) */
.sub-box{ margin:.2rem 1.1rem 1rem; padding:1rem 1.1rem; background:linear-gradient(150deg,var(--surface-2),var(--surface)); border:1px solid var(--accent); border-radius:var(--radius); }
.sub-box.sub-active{ background:var(--surface); }
.sub-head{ display:flex; align-items:center; gap:.5rem; font-family:var(--font); font-size:1.12rem; font-weight:600; margin-bottom:.2rem; }
.sub-plans{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sub-plan{ display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; background:var(--bg); border:2px solid var(--border); border-radius:var(--radius-sm); padding:.7rem .8rem; cursor:pointer; color:var(--text); text-align:left; }
.sub-plan[aria-checked=true]{ border-color:var(--accent); background:var(--surface-2); }
.sub-plan .sp-name{ font-weight:600; font-size:.92rem; }
.sub-plan .sp-name em{ font-style:normal; color:var(--accent); font-size:.76rem; font-weight:700; }
.sub-plan .sp-price{ font-family:var(--font); font-size:1.25rem; color:var(--text); }
.sub-plan .sp-price small{ font-size:.7rem; color:var(--text-soft); font-weight:400; }

/* ============ BOTTOM NAV ============ */
.bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; justify-content:space-around;
  background:var(--surface); border-top:1px solid var(--border); padding:6px 4px max(6px,env(safe-area-inset-bottom));
  max-width:var(--maxw); margin:0 auto;
}
.nav-item{ flex:1; background:none; border:0; color:var(--text-soft); display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 0; font-size:.7rem; cursor:pointer; }
.nav-item .nav-ico{ width:24px; height:24px; display:block; }
.nav-item.active{ color:var(--accent); }

/* ============ ONBOARDING ============ */
.onboarding{ max-width:520px; margin:0 auto; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; padding:24px clamp(16px,5vw,28px) calc(24px + env(safe-area-inset-bottom)); }
.onboard-track{ flex:1; display:flex; align-items:center; }
.onboard-slide{ width:100%; text-align:center; animation:fade .4s var(--ease); }
.onboard-slide .ob-art{ font-size:3.4rem; margin-bottom:.4rem; }
.onboard-slide h1{ font-size:2rem; }
.onboard-slide p{ color:var(--text-soft); font-size:1.06rem; }
.onboard-slide .ob-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem; text-align:left; box-shadow:var(--shadow-soft); margin-top:1rem; }
.choice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:1rem; }
.choice{ background:var(--surface); border:2px solid var(--border); border-radius:var(--radius-sm); padding:.9rem; cursor:pointer; color:var(--text); text-align:center; font-weight:600; }
.choice[aria-pressed=true]{ border-color:var(--accent); background:var(--surface-2); }
/* Icons + hover/press states on the practice-mode and reminder choice
   buttons are a desktop-only enhancement — phones keep the plain look
   above exactly as-is (touch devices rarely support real hover anyway,
   and this keeps the mobile-first layout unchanged). */
.choice-icon{ display:none; }
@media (hover:hover) and (pointer:fine){
  .choice-ico{ display:flex; flex-direction:column; align-items:center; gap:.45rem; transition:transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s; }
  .choice-icon{ display:block; width:26px; height:26px; color:var(--accent); }
  .choice-icon svg{ width:100%; height:100%; }
  .choice:hover{ transform:translateY(-2px); box-shadow:var(--shadow-soft); border-color:var(--accent-2); }
  .choice:active{ transform:translateY(0) scale(.97); }
}
.onboard-controls{ display:flex; flex-direction:column; gap:14px; }
.dots{ display:flex; gap:7px; justify-content:center; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--border); transition:.2s; }
.dot.on{ background:var(--accent); width:22px; border-radius:4px; }
.onboard-buttons{ display:flex; justify-content:space-between; align-items:center; }

/* ---- onboarding scene animations (SVG + CSS only, no JS timers) ----
   All keyframes below use percentage breakpoints tuned to each element's
   own animation-duration, so a single infinite loop reproduces the timed
   sequence the design calls for. [data-reducedmotion=on] (set globally,
   see the media-query section) collapses every one of these to its final
   keyframe — each is authored so that resting frame already looks right. */

/* page 3 — a small spark above "Start Now" */
.ob-spark{ display:flex; justify-content:center; margin-bottom:.2rem; }
.spark-svg{ width:52px; height:52px; overflow:visible; }
.spark-glow{ fill:var(--glow); opacity:.3; transform-origin:30px 30px; animation:sparkGlow 2.4s ease-in-out infinite; }
.spark-flame{ fill:var(--accent); transform-origin:30px 44px; animation:sparkFlame 2.4s ease-in-out infinite; }
@keyframes sparkGlow{ 0%, 100%{ transform:scale(.85); opacity:.25; } 50%{ transform:scale(1.15); opacity:.45; } }
@keyframes sparkFlame{ 0%, 100%{ transform:scaleY(1) rotate(0deg); } 30%{ transform:scaleY(1.08) rotate(-2deg); } 60%{ transform:scaleY(.94) rotate(2deg); } }

/* page 4 — a plant grows, leafs out, flowers, holds, a bee visits, then
   freezes before the 47s loop restarts (5s grow + 5s bloom + 5s hold +
   2s bee + 30s freeze = 47s). */
.ob-plant{ display:flex; justify-content:center; margin:.2rem 0; }
.plant-svg{ width:min(200px,62vw); height:auto; overflow:visible; }
.plant-ground{ fill:var(--surface-2); }
.plant-stem{ fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round; stroke-dasharray:130; stroke-dashoffset:130; animation:stemGrow 47s linear infinite; }
.plant-leaf{ fill:var(--accent-2); opacity:0; transform:scale(0); animation:leafPop 47s ease-out infinite; }
.plant-leaf-1{ transform-origin:100px 140px; }
.plant-leaf-2{ transform-origin:100px 110px; animation-delay:.3s; }
.plant-flower{ opacity:0; transform:scale(0); transform-origin:100px 58px; animation:flowerBloom 47s var(--ease) infinite; }
.plant-flower .petal{ fill:var(--glow); }
.plant-flower .flower-center{ fill:var(--accent-ink); opacity:.85; }
.plant-bee{ opacity:0; transform:translate(-20px,116px); animation:beeFly 47s ease-in-out infinite; }
.bee-body{ fill:#2b2116; }
.bee-wing{ fill:rgba(255,255,255,.75); animation:wingFlap .18s ease-in-out infinite alternate; }
@keyframes stemGrow{ 0%{ stroke-dashoffset:130; } 10.6%, 100%{ stroke-dashoffset:0; } }
@keyframes leafPop{ 0%, 7%{ opacity:0; transform:scale(0); } 10.6%, 100%{ opacity:1; transform:scale(1); } }
@keyframes flowerBloom{ 0%, 10.6%{ opacity:0; transform:scale(0) rotate(-30deg); } 21.3%, 100%{ opacity:1; transform:scale(1) rotate(0deg); } }
@keyframes beeFly{
  0%, 31.9%{ opacity:0; transform:translate(-20px,116px); }
  32.5%{ opacity:1; transform:translate(-20px,116px); }
  34%{ transform:translate(80px,90px); }
  36.2%{ opacity:1; transform:translate(220px,120px); }
  36.3%, 100%{ opacity:0; transform:translate(220px,120px); }
}
@keyframes wingFlap{ from{ transform:scaleY(1); } to{ transform:scaleY(.4); } }

/* page 5 — a few rising embers above the practice-mode prompt */
.ob-embers{ display:flex; justify-content:center; margin-bottom:.2rem; }
.embers-svg{ width:110px; height:46px; overflow:visible; }
.ember{ fill:var(--glow); animation:emberRise 3.2s ease-in infinite; }
.ember-2{ animation-delay:1s; }
.ember-3{ animation-delay:2s; }
@keyframes emberRise{ 0%{ opacity:0; transform:translateY(0) scale(.6); } 15%{ opacity:1; } 80%{ opacity:.6; } 100%{ opacity:0; transform:translateY(-38px) scale(1.1); } }

/* page 6 — the bell gives a gentle ring every few seconds */
.ob-bell{ display:flex; justify-content:center; margin-bottom:.2rem; }
.bell-svg{ width:56px; height:56px; overflow:visible; }
.bell-body, .bell-clapper{ fill:var(--accent); }
.bell-knob{ fill:var(--accent-2); }
.bell-swing{ transform-origin:30px 12px; animation:bellRing 4s ease-in-out infinite; }
@keyframes bellRing{ 0%, 8%, 100%{ transform:rotate(0deg); } 2%{ transform:rotate(14deg); } 4%{ transform:rotate(-11deg); } 6%{ transform:rotate(6deg); } }

/* page 7 — the fire stokes up, then the sleeper snuggles closer and smiles */
.ob-bedscene{ display:flex; justify-content:center; margin-bottom:.2rem; }
.bedscene-svg{ width:min(260px,78vw); height:auto; overflow:visible; }
.bed-frame{ fill:var(--accent-2); }
.bed-blanket{ fill:var(--surface-2); stroke:var(--border); stroke-width:1; animation:snuggleIn 8s ease-in-out infinite; }
.bed-head{ fill:var(--accent-ink); opacity:.9; animation:snuggleIn 8s ease-in-out infinite; }
.bed-smile{ fill:none; stroke:var(--bg); stroke-width:2; stroke-linecap:round; opacity:0; animation:smileIn 8s ease-in-out infinite; }
.fire-log{ stroke:var(--accent-ink); stroke-width:3; stroke-linecap:round; fill:none; opacity:.6; }
.flame{ fill:var(--glow); transform-origin:170px 80px; animation:flameFlicker 1.1s ease-in-out infinite; }
.flame-2{ fill:var(--accent); transform-origin:160px 80px; animation-delay:.2s; }
.flame-3{ fill:var(--accent-2); transform-origin:180px 80px; animation-delay:.4s; }
@keyframes flameFlicker{ 0%, 100%{ transform:scaleY(1) scaleX(1); } 50%{ transform:scaleY(1.15) scaleX(.92); } }
@keyframes snuggleIn{ 0%, 55%{ transform:translateX(0); } 75%, 100%{ transform:translateX(6px); } }
@keyframes smileIn{ 0%, 55%{ opacity:0; } 75%, 100%{ opacity:1; } }
.ob-mode-row{ display:flex; gap:10px; justify-content:center; margin-top:1rem; }
.ob-mode-btn{ background:var(--surface); border:2px solid var(--border); border-radius:999px; padding:.55rem 1.1rem; cursor:pointer; color:var(--text); font-weight:600; font-size:.92rem; }
.ob-mode-btn[aria-pressed=true]{ border-color:var(--accent); background:var(--surface-2); }

/* page 8 — someone journals at a desk, thinking of five places in turn,
   cycling once every 30s (150s for all five, then it loops). */
.ob-journal{ display:flex; justify-content:center; margin:.4rem 0 .2rem; }
.journal-svg{ width:min(240px,74vw); height:auto; overflow:visible; }
.jr-window{ fill:var(--surface-2); stroke:var(--border); stroke-width:1.5; }
.jr-window-cross{ stroke:var(--border); stroke-width:1.5; fill:none; }
.jr-desk, .jr-desk-leg{ fill:var(--accent-2); }
.jr-book{ fill:var(--surface); stroke:var(--border); stroke-width:1; }
.jr-head{ fill:var(--accent-ink); opacity:.9; }
.jr-arm{ fill:none; stroke:var(--accent-ink); stroke-width:4; stroke-linecap:round; opacity:.9; transform-origin:78px 74px; animation:writeArm 2.6s ease-in-out infinite; }
.jr-bubble ellipse, .jr-bubble circle{ fill:var(--surface); stroke:var(--border); stroke-width:1.5; }
.jr-bubble-text{ font-family:var(--font-ui); font-size:11px; fill:var(--text); text-anchor:middle; }
.jr-place{ opacity:0; animation:placeCycle 150s steps(1,end) infinite; }
.jr-place:nth-of-type(1){ animation-delay:0s; }
.jr-place:nth-of-type(2){ animation-delay:30s; }
.jr-place:nth-of-type(3){ animation-delay:60s; }
.jr-place:nth-of-type(4){ animation-delay:90s; }
.jr-place:nth-of-type(5){ animation-delay:120s; }
@keyframes writeArm{ 0%, 100%{ transform:rotate(0deg); } 50%{ transform:rotate(-6deg); } }
@keyframes placeCycle{ 0%{ opacity:1; } 20%{ opacity:1; } 20.1%, 100%{ opacity:0; } }

/* ============ LOCK ============ */
.lock-screen{ position:fixed; inset:0; z-index:60; background:var(--bg); display:grid; place-items:center; padding:24px; }
.lock-card{ text-align:center; max-width:320px; }
.lock-flame{ font-size:2.6rem; }
.pin-input{ text-align:center; letter-spacing:.5em; font-size:1.4rem; max-width:220px; margin:1rem auto 0; }
.lock-error{ color:var(--danger); min-height:1.2em; font-size:.9rem; }

/* ====== Vault / encryption ====== */
.vault-modal{ position:fixed; inset:0; z-index:80; background:rgba(20,12,4,.55); display:grid; place-items:center; padding:18px; }
.vault-card{ background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.4rem 1.3rem; max-width:380px; width:100%; box-shadow:var(--shadow-soft); max-height:92vh; overflow:auto; }
.vault-card h2{ font-size:1.3rem; margin:.2rem 0 .5rem; }
.vault-card .lock-flame{ font-size:2.1rem; text-align:center; }
.vault-warn{ font-size:.82rem; color:var(--text-soft); background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:.7rem .8rem; line-height:1.55; margin:.85rem 0 0; }
.vault-actions{ display:flex; gap:10px; margin-top:1.1rem; }
.vault-actions .btn{ flex:1; }
.vault-check{ display:flex; align-items:center; gap:.5rem; font-size:.88rem; color:var(--text-soft); margin:1rem 0 0; }
.vault-check input{ width:auto; }
.recovery-grid{ list-style:none; counter-reset:rw; display:grid; grid-template-columns:1fr 1fr; gap:.4rem .7rem; margin:1rem 0 0; padding:0; }
.recovery-grid li{ counter-increment:rw; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:.5rem .7rem; font-family:var(--font-ui); font-size:.98rem; }
.recovery-grid li::before{ content:counter(rw) ". "; color:var(--text-soft); font-size:.8rem; }

/* ============ TOAST ============ */
/* Stays in the DOM permanently (it's an aria-live region — [hidden] regions
   never announce); .show drives visibility. Bottom offset respects the
   safe-area inset so it never collides with the nav on notched phones. */
.toast{ position:fixed; left:50%; bottom:calc(88px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%) translateY(8px);
  background:var(--text); color:var(--bg); opacity:0; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease);
  padding:.7rem 1.1rem; border-radius:999px; font-size:.9rem; z-index:70; box-shadow:var(--shadow); max-width:90vw; text-align:center; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* update banner — shown when a new version is ready (see registerServiceWorker) */
.update-banner{ position:fixed; left:50%; bottom:calc(88px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%) translateY(14px);
  display:flex; align-items:center; gap:.6rem; z-index:72; opacity:0; transition:opacity .3s var(--ease), transform .3s var(--ease);
  background:var(--surface); color:var(--text); border:1px solid var(--accent); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:.6rem .7rem .6rem 1rem; max-width:min(92vw, 420px); }
.update-banner.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.update-banner .ub-flame{ font-size:1.1rem; }
.update-banner .ub-text{ flex:1; font-size:.92rem; }
.update-banner .ub-refresh{ padding:.45rem .9rem; font-size:.86rem; }
.update-banner .ub-later{ background:none; border:0; color:var(--text-soft); font:inherit; font-size:.82rem; cursor:pointer; padding:.4rem .3rem; }

/* ============ ANIMATIONS ============ */
@keyframes fade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
@keyframes rise{ from{ opacity:0; transform:translate(-50%,8px);} to{ opacity:1; transform:translate(-50%,0);} }
@keyframes flicker{ 0%,100%{ opacity:.45; transform:scale(1);} 50%{ opacity:.62; transform:scale(1.05);} }
@keyframes sway{ 0%,100%{ transform:rotate(-1.5deg) scale(1);} 50%{ transform:rotate(1.5deg) scale(1.03);} }
.flame-svg .fl-core{ transform-origin:50% 80%; animation:sway 2.6s ease-in-out infinite; }

/* ============ RESPONSIVE ============ */
/* tablets */
@media (min-width:680px){
  :root{ --fs-base:17px; }
  .mode-grid{ grid-template-columns:repeat(3,1fr); }
}
/* large desktop / HD — "Floating dock" layout (chosen 2026-07-03).
   Phones and small tablets are untouched; only ≥1100px screens get the wider
   comfortable column, two-column timeline/settings, larger hearth, and the
   bottom tab bar shrunk into a centered floating pill dock. */
@media (min-width:1100px){
  :root{ --maxw:920px; --fs-base:17.5px; }
  .app{ max-width:920px; }

  /* the hearth breathes on a bigger screen */
  .hearth-visual{ width:260px; height:260px; }
  .hearth-glow{ width:360px; height:340px; }
  .hearth-greeting{ font-size:2.1rem; }
  .view-title{ font-size:1.8rem; }

  /* home actions sit side by side like a mantel */
  .home-actions{ flex-direction:row; justify-content:center; gap:1rem; }
  .btn-lg{ width:auto; }

  /* timeline/stories list panel becomes a two-column card wall */
  .list-panel{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }

  /* settings menu + detail stay a single, centered column even on wider
     screens — there's only ever one card in view at a time now. */
  #view-settings{ max-width:520px; margin:0 auto; }

  /* four practice modes per row */
  .mode-grid{ grid-template-columns:repeat(4,1fr); }

  /* the floating dock: bottom bar → centered rounded pill above the edge */
  .bottomnav{
    left:50%; right:auto; transform:translateX(-50%); bottom:18px;
    width:auto; max-width:none; margin:0; gap:6px; padding:8px 12px;
    border:1px solid var(--border); border-radius:999px; box-shadow:var(--shadow);
  }
  .nav-item{ flex:0 0 auto; flex-direction:row; gap:8px; padding:10px 18px; font-size:.9rem; border-radius:999px; }
  .nav-item.active{ background:var(--surface-2); }
}
/* 4K / very large — keep content readable, centered, larger type */
@media (min-width:2000px){
  :root{ --maxw:1080px; --fs-base:20px; }
  .app{ max-width:1080px; }
  .hearth-visual{ width:320px; height:320px; }
  .hearth-glow{ width:440px; height:400px; }
}

/* reduced motion — honour BOTH the OS setting and the in-app toggle */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
[data-reducedmotion=on] *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }

/* font-size accessibility hook (set on <html>) — multiplies the breakpoint
   base, so "Larger text" is larger on EVERY screen, 4K included. */
html[data-fontscale="large"]{ --fs-scale:1.125; }
html[data-fontscale="xl"]{ --fs-scale:1.25; }
/* High contrast: root-level (the old selector targeted nothing) + mode-aware. */
html[data-contrast="high"]{ --text:#1c140c; --text-soft:#4a3a29; --border:#5b4a37; }
html[data-contrast="high"][data-mode="dark"]{ --text:#fffdf6; --text-soft:#dccdb2; --border:#8a7a63; }

/* ============ ACCESSIBILITY ============ */
.skip-link{ position:absolute; left:-999px; top:0; z-index:200; background:var(--accent); color:var(--accent-ink);
  padding:.7rem 1.1rem; border-radius:0 0 12px 0; font-weight:600; }
.skip-link:focus{ left:0; }
/* Long unbroken words/URLs must wrap, not push the layout sideways on phones. */
.ed-body, .ec-body, .recap-quote, .onthisday, .toast, .print-entry-body{ overflow-wrap:anywhere; }
.visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ============ STATIC DOC PAGES (privacy, terms, support, pledge) ============ */
.doc{ max-width:760px; margin:0 auto; padding:0 clamp(16px,5vw,28px) 4rem; }
.doc-top{ display:flex; align-items:center; justify-content:space-between; padding:1.2rem 0; position:sticky; top:0;
  background:linear-gradient(var(--bg) 75%, transparent); }
.doc-top .brand{ font-family:var(--font); font-size:1.25rem; font-weight:600; display:flex; align-items:center; gap:.5rem; }
.doc h1{ font-size:2rem; margin:1rem 0 .2rem; }
.doc .updated{ color:var(--text-soft); font-size:.88rem; margin:0 0 1.6rem; }
.doc h2{ font-size:1.3rem; margin:1.8rem 0 .5rem; color:var(--accent); }
.doc h3{ font-size:1.05rem; margin:1.2rem 0 .3rem; }
.doc p, .doc li{ line-height:1.7; }
.doc ul{ padding-left:1.2rem; }
.doc li{ margin:.4rem 0; }
.doc .callout{ background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent);
  border-radius:var(--radius-sm); padding:1rem 1.1rem; margin:1.2rem 0; box-shadow:var(--shadow-soft); }
.doc a{ color:var(--accent); }
.doc-footer{ margin-top:3rem; border-top:1px solid var(--border); padding-top:1.2rem; color:var(--text-soft); font-size:.88rem; }
.doc-footer a{ color:var(--accent); margin-right:1rem; }
.notfound{ text-align:center; padding-top:2.5rem; }
.nf-flame{ font-size:3rem; }
.notfound .btn{ margin-top:.4rem; }
details.faq{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:.4rem 1rem; margin:.6rem 0; background:var(--surface); }
details.faq summary{ cursor:pointer; font-weight:600; padding:.5rem 0; }

/* legal/link rows inside Settings */
a.set-row{ text-decoration:none; color:inherit; }
a.set-row:hover{ background:var(--surface-2); }
a.set-row span[aria-hidden]{ color:var(--accent); font-size:1.1rem; }

/* ============ STORIES (long-form) ============ */
.story-new-grid{ margin-bottom:1.4rem; }
.story-list{ display:grid; grid-template-columns:1fr; gap:12px; }
.story-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem 1.1rem; cursor:pointer; transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.story-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-soft); }
/* matches .mode-card b above it on the page — same visual weight, one family */
.story-card-title{ font-family:var(--font); font-size:1.06rem; font-weight:600; margin:.2rem 0; overflow-wrap:anywhere; }
.story-words{ font-size:.78rem; color:var(--text-soft); }

/* editor */
.story-editor{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.1rem 1.1rem 1.3rem; box-shadow:var(--shadow-soft); }
.story-head{ display:flex; gap:.9rem; align-items:center; margin-bottom:1rem; transition:opacity .4s var(--ease); }
.story-art{ width:98px; height:49px; flex:0 0 auto; }
.story-head-text h2{ font-size:1.3rem; margin:0; }
.story-head-text p{ margin:.15rem 0 0; }
.story-title{ width:100%; border:1px solid transparent; background:transparent; font-family:var(--font);
  font-size:clamp(1.4rem,4vw,1.9rem); font-weight:600; color:var(--text); padding:.3rem .4rem; border-radius:var(--radius-sm); }
.story-title::placeholder{ color:var(--text-soft); opacity:.55; }
.story-pages{ display:flex; flex-direction:column; gap:1rem; margin:.6rem 0 1rem; }
.story-page{ position:relative; }
.story-page-bar{ display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; }
.story-page-n{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--surface-2); color:var(--text-soft);
  font-size:.75rem; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:var(--font-ui); }
.story-page-head{ flex:1; border:none; background:transparent; color:var(--text); font-family:var(--font-ui);
  font-size:.92rem; font-weight:600; padding:.25rem .3rem; border-bottom:1px dashed var(--border); }
.story-page-head::placeholder{ color:var(--text-soft); opacity:.6; font-weight:400; }
.story-page-acts{ display:flex; gap:2px; flex:0 0 auto; }
.pg-btn{ background:none; border:0; color:var(--text-soft); cursor:pointer; width:30px; height:30px; border-radius:8px;
  font-size:.95rem; line-height:1; }
.pg-btn:hover:not(:disabled){ background:var(--surface-2); color:var(--accent); }
.pg-btn:disabled{ opacity:.3; cursor:default; }
.story-page-body{ width:100%; min-height:120px; resize:none; overflow:hidden; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:1.06rem; line-height:1.75; padding:.85rem .95rem; }
.story-addpage{ width:100%; }
.story-toolbar{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-top:1rem;
  padding-top:.9rem; border-top:1px solid var(--border); transition:opacity .4s var(--ease); }
.story-count{ font-size:.82rem; color:var(--text-soft); }
.story-saved{ font-size:.82rem; color:var(--accent); opacity:0; transition:opacity .3s var(--ease); }
.story-saved.show{ opacity:1; }
.story-tools-right{ margin-left:auto; display:flex; gap:.2rem; flex-wrap:wrap; }
.story-tools-right .btn{ padding:.4rem .6rem; font-size:.85rem; }
/* auto-fade: the chrome recedes while you're actively typing */
.story-editor.writing .story-head{ opacity:.3; }
.story-editor.writing .story-toolbar{ opacity:.45; }
/* distraction-free: hide everything but the page */
body.deep-focus .topbar, body.deep-focus .bottomnav, body.deep-focus .story-head,
body.deep-focus .story-addpage, body.deep-focus .back-link,
body.deep-focus .story-count, body.deep-focus .story-saved{ display:none; }
body.deep-focus .story-editor{ border:none; box-shadow:none; background:transparent; padding-top:.4rem; }
body.deep-focus .story-toolbar{ border-top:none; }

/* Rewind (version history) list inside the modal */
.snap-list{ list-style:none; margin:.4rem 0 0; padding:0; max-height:46vh; overflow-y:auto; }
.snap-row{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:.6rem .75rem; margin-bottom:.5rem; background:var(--surface); }
.snap-meta{ display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; }
.snap-meta b{ font-size:.9rem; }
.snap-meta span{ font-size:.78rem; color:var(--text-soft); }
.snap-prev{ font-size:.85rem; color:var(--text-soft); margin:.3rem 0 .4rem; overflow-wrap:anywhere; }
.snap-row .btn{ padding:.35rem .7rem; font-size:.82rem; }

/* ---- Dream Journal controls (P2) ---- */
.dream-voice{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:.2rem 0 .9rem; }
.dv-rec[aria-pressed="true"]{ background:var(--danger); color:#fff; border-color:var(--danger); }
.dv-status{ font-size:.82rem; color:var(--text-soft); }
.dv-mode{ font-size:.82rem; color:var(--text-soft); display:inline-flex; align-items:center; gap:.35rem; }
.dv-clips{ display:flex; flex-wrap:wrap; gap:.5rem; width:100%; }
.dv-clip{ display:flex; align-items:center; gap:.3rem; }
.dv-clip audio{ height:36px; max-width:230px; }
.dream-details{ margin:.2rem 0 1rem; padding:.9rem 1rem; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--bg); }
.dd-label{ font-size:.82rem; color:var(--text-soft); margin:.8rem 0 .4rem; font-family:var(--font-ui); }
.dd-label:first-child{ margin-top:0; }
.dd-row{ display:flex; flex-wrap:wrap; gap:.4rem; }
.dd-chip{ border:1px solid var(--border); background:var(--surface); color:var(--text-soft);
  border-radius:999px; padding:.35rem .75rem; font-size:.85rem; cursor:pointer; font-family:var(--font-ui); }
.dd-chip:hover{ border-color:var(--accent); }
.dd-chip[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.dd-tags{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.tag-chip{ display:inline-flex; align-items:center; gap:.15rem; background:var(--surface-2); color:var(--text);
  border-radius:999px; padding:.2rem .3rem .2rem .65rem; font-size:.84rem; }
.tag-x{ background:none; border:0; color:var(--text-soft); cursor:pointer; font-size:.85rem; line-height:1; padding:0 .2rem; }
.tag-x:hover{ color:var(--danger); }
.dd-tag-input{ border:none; background:transparent; color:var(--text); font-size:.9rem; padding:.3rem; min-width:120px; flex:1; }
.dd-signs{ margin:.7rem 0 0; }

/* ---- Life-story grounding prompt (P3) ---- */
.life-prompt{ margin:.2rem 0 1rem; }
.lp-card{ background:var(--surface-2); border:1px solid var(--border); border-left:4px solid var(--accent);
  border-radius:var(--radius-sm); padding:.9rem 1.1rem; font-family:var(--font); font-size:1.05rem; line-height:1.5; }
.lp-controls{ display:flex; gap:.5rem; margin-top:.5rem; }
.lp-controls .btn{ padding:.4rem .8rem; font-size:.85rem; }
.story-otd{ border-left:4px solid var(--accent); }
.story-otd h3{ font-size:1rem; margin:0 0 .2rem; color:var(--accent); }

/* ---- Short-story word goal + typewriter (P4) ---- */
.story-goalbar{ height:6px; background:var(--surface-2); border-radius:999px; overflow:hidden; margin-top:.7rem; }
.sg-fill{ height:100%; width:0; background:var(--accent); border-radius:999px; transition:width .3s var(--ease); }
.sg-fill.done{ background:var(--glow); }
.story-editor.typewriter .story-page-body{ line-height:2.1; padding:1.4rem 1.1rem; font-size:1.12rem; }
.story-editor.typewriter .story-page:not(:focus-within){ opacity:.45; transition:opacity .3s var(--ease); }
.story-editor.typewriter .story-head, .story-editor.typewriter .story-toolbar{ opacity:.5; }

/* ---- Custom context (P5) ---- */
.ctx-capture{ margin:.6rem 0; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); }
.ctx-capture summary{ cursor:pointer; padding:.7rem .9rem; font-family:var(--font-ui); font-weight:600; font-size:.92rem; }
.ctx-fields{ padding:0 .9rem .9rem; display:flex; flex-direction:column; gap:.5rem; }
.ctx-detail{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.8rem 0 0; }
.ctx-tag{ background:var(--surface-2); border-radius:999px; padding:.25rem .7rem; font-size:.82rem; }
.ctx-tag b{ color:var(--accent); font-weight:600; }
.ctx-add{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.7rem; align-items:center; }
.ctx-add input, .ctx-add select{ padding:.5rem .6rem; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text); font-size:.9rem; }
.ctx-add #ctxName{ flex:1; min-width:130px; }
.ctx-add #ctxOptions{ flex:2; min-width:160px; }

/* ---- Photo gallery (P6) ---- */
.gallery-month{ font-size:1rem; color:var(--accent); margin:1.2rem 0 .5rem; }
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:6px; }
.gallery-cell{ padding:0; border:0; background:var(--surface-2); cursor:pointer; aspect-ratio:1;
  border-radius:var(--radius-sm); overflow:hidden; }
.gallery-cell img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s var(--ease); }
.gallery-cell:hover img{ transform:scale(1.06); }
@media (min-width:1100px){ .gallery-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); } }

/* ---- Import wizard (P7) ---- */
.imp-prev{ background:var(--surface-2); border-radius:var(--radius-sm); padding:.5rem .7rem; margin:.35rem 0; font-size:.85rem; color:var(--text-soft); overflow-wrap:anywhere; }

/* ---- Travel map (P8) ---- */
.loc-control{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:.6rem 0; }
.loc-status{ font-size:.82rem; }
.map-svg{ width:100%; height:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); margin-top:.6rem; }
.map-pin{ cursor:pointer; }
.map-pin:hover{ r:4.4; }

/* ---- Undo toast + Trash (P9) ---- */
.toast-undo{ background:none; border:1px solid rgba(255,255,255,.4); color:inherit; border-radius:999px;
  padding:.15rem .7rem; margin-left:.5rem; cursor:pointer; font-weight:600; font-size:.85rem; }
.trash-card{ cursor:default; }
.trash-actions{ display:flex; gap:.5rem; margin-top:.5rem; }
.trash-actions .btn{ padding:.4rem .8rem; font-size:.85rem; }

/* ---- Practice heatmap (P10) ---- */
#timelineHeatmap{ margin:.2rem 0 1rem; }
.heatmap{ overflow-x:auto; padding-bottom:.3rem; scrollbar-width:none; }
.heatmap::-webkit-scrollbar{ display:none; }
.hm-grid{ display:grid; grid-template-rows:repeat(7,10px); grid-auto-flow:column; grid-auto-columns:10px; gap:3px; }
.hm-cell{ width:10px; height:10px; border-radius:2px; background:var(--surface-2); display:inline-block; }
.hm-l0{ background:var(--surface-2); } .hm-l1{ background:color-mix(in srgb,var(--accent) 35%,var(--surface-2)); }
.hm-l2{ background:color-mix(in srgb,var(--accent) 65%,var(--surface-2)); } .hm-l3{ background:var(--accent); }
.hm-legend{ display:flex; align-items:center; gap:4px; font-size:.72rem; color:var(--text-soft); margin-top:.5rem; }

/* ---- Patterns (P11) ---- */
.pat-h{ font-size:1rem; color:var(--accent); margin:1.3rem 0 .5rem; }
.pat-row{ display:flex; align-items:center; gap:.6rem; margin:.3rem 0; }
.pat-label{ flex:0 0 34%; font-size:.86rem; overflow-wrap:anywhere; }
.pat-bar{ flex:1; height:9px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.pat-bar>span{ display:block; height:100%; background:var(--accent); border-radius:999px; }
.pat-val{ flex:0 0 auto; font-size:.8rem; color:var(--text-soft); min-width:1.4rem; text-align:right; }

/* ---- Seasonal ember (P12) — decorative glow tint only ---- */
[data-season="autumn"] .hearth-glow{ filter:saturate(1.12) hue-rotate(-6deg); }
[data-season="winter"] .hearth-glow{ filter:saturate(.9) hue-rotate(6deg); }
[data-season="spring"] .hearth-glow{ filter:saturate(1.05); }

/* ============ UNIFIED COMPOSER (E1–E4) ============ */
/* Tier-1: three compact label-left rows, reserved kind-label slot (no reflow) */
.composer-tier1{ margin:1rem 0 .2rem; display:flex; flex-direction:column; gap:.1rem; }
.t1-row{ display:flex; align-items:center; gap:.5rem; min-height:44px; }
.t1-label{ flex:0 0 66px; display:flex; align-items:center; gap:.35rem; font-size:.8rem; color:var(--text-soft); }
.t1-label svg{ width:15px; height:15px; }
.t1-kind{ flex:1 1 auto; min-width:0; font-size:.82rem; color:var(--accent-2); }
.t1-kind.ghost{ color:var(--text-soft); opacity:.6; font-style:italic; }
.moodscale, .dotscale{ display:flex; align-items:center; }
.mface{ width:44px; height:44px; padding:0; border:0; background:none; font-size:1.3rem; line-height:1;
  opacity:.42; cursor:pointer; border-radius:50%; }
.mface[aria-pressed="true"]{ opacity:1; background:var(--surface-2); box-shadow:0 0 0 1.5px var(--accent); }
.dot{ width:44px; height:44px; padding:0; border:0; background:none; position:relative; cursor:pointer; }
.dot::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:20px; height:20px; border-radius:50%; border:1.7px solid var(--chip-border); transition:background .15s; }
.dotscale[data-scale="energy"] .dot::after{ border-radius:8px 8px 11px 11px; }
.dot.fill::after{ background:var(--accent); border-color:var(--accent); }
.dot.hot::after{ background:var(--glow); border-color:var(--glow); }
.mface:focus-visible, .dot:focus-visible, .chip:focus-visible{ outline:2px solid var(--accent-2); outline-offset:1px; }
/* time chip */
.timechip{ display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--chip-border); background:none;
  border-radius:999px; padding:.4rem .85rem; font-size:.82rem; color:var(--text-soft); cursor:pointer; margin:.5rem 0 .2rem; }
.timechip svg{ width:14px; height:14px; }
/* trays */
.mtray{ border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); margin-top:.6rem; }
.mtray>summary{ cursor:pointer; padding:.7rem .9rem; font-weight:600; font-size:.92rem; font-family:var(--font-ui);
  list-style:none; display:flex; align-items:center; gap:.5rem; }
.mtray>summary::-webkit-details-marker{ display:none; }
.mtray>summary::before{ content:"▸"; color:var(--accent); transition:transform .18s var(--ease); }
.mtray[open]>summary::before{ transform:rotate(90deg); }
.mtray>summary .opt{ font-weight:400; color:var(--text-soft); font-size:.78rem; margin-left:auto; }
.mtray-body{ padding:.2rem .9rem 1rem; display:flex; flex-direction:column; gap:1rem; }
/* chip groups */
.mgroup{ display:block; }
.mgroup.mg-promoted{ margin:.7rem 0 .2rem; padding:.7rem .8rem; border:1px solid var(--border);
  border-left:3px solid var(--accent); border-radius:var(--radius-sm); background:var(--bg); }
.mg-label{ display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--text-soft);
  font-family:var(--font-ui); margin-bottom:.45rem; }
.mg-label svg{ width:15px; height:15px; color:var(--accent); }
.mg-chips{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.chip.chip-more, .chip.chip-add{ border-style:dashed; color:var(--accent-2); }
.chip[aria-pressed="true"], .chip[aria-checked="true"]{ background:var(--accent); border-color:var(--accent);
  color:var(--accent-ink); font-weight:600; }
.mg-add-input{ border:1px solid var(--chip-border); background:var(--surface); color:var(--text);
  border-radius:999px; padding:.42rem .8rem; font-size:.84rem; min-width:140px; }
.mg-tags{ }
.prompt-whisper{ display:block; background:none; border:0; color:var(--accent-2); font-size:.82rem;
  padding:.35rem .1rem 0; cursor:pointer; text-align:left; }
/* the composer chips inherit the P2 .chip base (padding .62rem etc.) but use --chip-border */
.mg-chips .chip, .mgroup .chip{ border-color:var(--chip-border); }

/* ============ DESIGN POLISH ============ */
/* embers rising from the hearth */
@keyframes spark{ 0%{ opacity:0; transform:translateY(0) scale(.5);} 18%{ opacity:.95;} 100%{ opacity:0; transform:translateY(-46px) scale(1.1);} }
.spark{ animation:spark 3s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }

.recap-link{ margin:.2rem auto 0; display:block; }

/* prompt deck */
.deck{ position:relative; margin:1rem 0 1.1rem; padding-top:10px; }
.deck::before, .deck::after{ content:""; position:absolute; inset:0 0 auto 0; height:100%; border-radius:var(--radius);
  background:var(--surface-2); border:1px solid var(--border); z-index:0; }
.deck::before{ transform:translate(8px,-8px) rotate(2deg); opacity:.6; }
.deck::after{ transform:translate(-6px,-4px) rotate(-2deg); opacity:.4; }
.deck-card{ position:relative; z-index:1; background:linear-gradient(135deg,var(--surface),var(--surface-2));
  border:1px solid var(--accent); border-radius:var(--radius); padding:1.6rem 1.4rem; min-height:130px;
  display:flex; align-items:center; font-family:var(--font); font-size:1.3rem; line-height:1.45; color:var(--text);
  box-shadow:var(--shadow); }
.deck-card.flip{ animation:deckflip .35s var(--ease); }
@keyframes deckflip{ from{ transform:rotateY(-12deg) translateX(14px); opacity:0;} to{ transform:none; opacity:1;} }
.deck-controls{ display:flex; gap:10px; }
.deck-controls .btn{ flex:1; }

/* year in gratitude recap */
.recap-hero{ text-align:center; padding:1.4rem 0 .6rem; }
.recap-flame{ font-size:2.6rem; }
.recap-hero h2{ font-size:1.8rem; margin:.2rem 0 0; }
.recap-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:1rem 0; }
.recap-stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem .6rem; text-align:center; box-shadow:var(--shadow-soft); }
.recap-stat b{ display:block; font-family:var(--font); font-size:1.8rem; color:var(--accent); }
.recap-stat span{ font-size:.74rem; color:var(--text-soft); }
.recap-line{ text-align:center; font-size:1.08rem; margin:.8rem 0; }
.recap-h{ font-size:1.05rem; color:var(--accent); margin:1.4rem 0 .4rem; text-align:center; }
.recap-quote{ background:var(--surface); border-left:3px solid var(--accent); border-radius:var(--radius-sm);
  margin:.6rem 0; padding:.9rem 1.1rem; font-family:var(--font); font-size:1.05rem; box-shadow:var(--shadow-soft); }
.recap-quote cite{ display:block; font-family:var(--font-ui); font-style:normal; font-size:.78rem; color:var(--text-soft); margin-top:.4rem; }
#recapShare{ margin:1.4rem auto 0; display:flex; }

/* gratitude stone — breathing */
.breath{ display:flex; flex-direction:column; align-items:center; gap:.7rem; padding:1.4rem 0 .6rem; }
.breath-orb{ width:120px; height:120px; border-radius:50%; background:radial-gradient(circle at 50% 38%, var(--glow), var(--accent));
  box-shadow:0 0 44px -6px var(--glow); animation:breathe 8s ease-in-out infinite; }
.breath-word{ color:var(--text-soft); font-family:var(--font); font-size:1.05rem; min-height:1.4em; }
@keyframes breathe{ 0%,100%{ transform:scale(.78);} 25%{ transform:scale(1.12);} 50%{ transform:scale(1.12);} 75%{ transform:scale(.78);} }

/* timeline filter chips (44px min touch target) — the scroll IS the point,
   the native scrollbar chrome underneath it is not (looked broken on phone). */
.filter-chips{ display:flex; gap:8px; overflow-x:auto; padding:0 0 .8rem; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; }
.filter-chips::-webkit-scrollbar{ display:none; }
.chip{ flex:0 0 auto; border:1px solid var(--border); background:var(--surface); color:var(--text-soft);
  border-radius:999px; padding:.6rem 1rem; min-height:44px; display:inline-flex; align-items:center;
  font-size:.85rem; font-weight:600; cursor:pointer; white-space:nowrap; }
.chip[aria-pressed=true]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

/* ====== Printable keepsake (Settings → Print / PDF) ======
   Fixed neutral colors on purpose — a keepsake should look the same on
   paper no matter which theme is active on screen, and most printers
   don't render the app's dynamic accent colors well anyway. */
.print-only{ display:none; }
@media print{
  body > *:not(#printView){ display:none !important; }
  #printView{ display:block !important; font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; color:#2a2018; max-width:680px; margin:0 auto; }
  .print-cover{ text-align:center; padding:3rem 0 2.5rem; border-bottom:2px solid #d8c7a8; margin-bottom:2rem; }
  .print-cover h1{ font-size:2.2rem; margin:0 0 .3rem; }
  .print-cover p{ margin:.2rem 0; color:#6b5a45; }
  .print-range{ font-size:.9rem; }
  .print-entry{ padding:0 0 1.4rem; margin-bottom:1.4rem; border-bottom:1px solid #e6dac4; page-break-inside:avoid; }
  .print-entry:last-child{ border-bottom:none; margin-bottom:0; }
  .print-entry-date{ font-size:.78rem; letter-spacing:.02em; text-transform:uppercase; color:#8a7a63; margin-bottom:.3rem; }
  .print-entry-person{ font-style:italic; color:#6b5a45; margin-bottom:.2rem; }
  .print-entry-title{ font-weight:700; font-size:1.05rem; margin-bottom:.3rem; }
  .print-entry-body{ line-height:1.6; white-space:pre-wrap; }
}

/* ============ LIST PANEL, CARD THUMBNAILS, PAGINATION, BULK CULL ============
   Shared by Practice (timeline) and Stories — one set of rules so both lists
   read as the same pattern with only mode-specific content differing. */

/* the list of cards sits in a visibly recessed tray, set off from the page
   the same way .dream-details/.ctx-capture already read as "a distinct area" */
.list-panel{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
  padding:10px; display:flex; flex-direction:column; gap:10px; margin-top:.2rem; }
.list-panel .entry-card, .list-panel .story-card{ box-shadow:none; }

/* left-rail thumbnail: a real photo when there is one, else a soft type icon —
   keeps every card the same width whether or not it has a picture */
.card-row{ display:flex; gap:.8rem; align-items:flex-start; }
.card-main{ flex:1 1 auto; min-width:0; }
.card-thumb{ flex:0 0 auto; width:52px; height:52px; border-radius:var(--radius-sm); object-fit:cover; background:var(--surface); }
.card-thumb-ph{ display:flex; align-items:center; justify-content:center; color:var(--accent); opacity:.7; }
.card-thumb-ph svg{ width:24px; height:24px; }

/* sort + bulk-select toolbar row, sits like the search box above it */
.list-toolbar{ display:flex; align-items:center; gap:.6rem; margin:0 0 .7rem; flex-wrap:wrap; }
.sort-select{ width:auto; flex:0 0 auto; padding:.55rem .7rem; font-size:.86rem; }
.bulk-toggle{ padding:.5rem .8rem; font-size:.85rem; border:1px solid var(--border); border-radius:999px; }
.bulk-toggle[aria-pressed=true]{ border-color:var(--accent); color:var(--accent); }

/* pagination */
.pagination{ display:flex; align-items:center; justify-content:center; gap:.9rem; margin:.9rem 0 .3rem; }
.pager-btn{ border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:999px;
  padding:.5rem 1rem; min-height:44px; font-size:.88rem; font-weight:600; cursor:pointer; }
.pager-btn:disabled{ opacity:.35; cursor:default; }
.pg-status{ font-size:.82rem; color:var(--text-soft); }

/* cross-app search results — a story hit shown on Practice, or a practice hit
   shown on Stories; visually a continuation of the same list, just labelled */
.cross-hits{ margin-top:1.1rem; }
.cross-hits .list-panel{ margin-top:.4rem; }
.entry-card.story-hit{ background:var(--surface); }

/* ---- ALPHA/BETA bulk-select culling ---- */
.entry-card.bulk-pick, .story-card.bulk-pick{ position:relative; padding-left:2.6rem; }
.bulk-check{ position:absolute; left:.85rem; top:.9rem; width:22px; height:22px; border-radius:50%;
  border:1.5px solid var(--chip-border); display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:700; color:var(--accent-ink); background:var(--surface); }
/* checked state must out-rank the base rule above it — same specificity, so
   source order alone isn't reliable; :not(:empty) needs the extra class here */
.bulk-check.bulk-check:not(:empty){ background:var(--accent); border-color:var(--accent); }
.bulk-bar{ position:sticky; bottom:calc(70px + env(safe-area-inset-bottom,0px)); z-index:15; display:flex;
  align-items:center; gap:.6rem; flex-wrap:wrap; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:.7rem .9rem; margin-top:.8rem; box-shadow:var(--shadow); }
.bulk-count{ font-size:.85rem; color:var(--text-soft); margin-right:auto; }
.bulk-bar .btn{ padding:.5rem .9rem; font-size:.85rem; }