/*
 * css/styles.css · Visual system for the Wellness App (Stage 1 + Profile/Dark Mode + Composite Write + Bundle A + Sleep B-1 + Phase 3 B-2)
 * Purpose: the calm "quiet notebook" look — warm neutrals, one sage accent,
 *          the 5-step mood palette, bottom tab bar, sheets, calendar.
 * Related: index.html (structure), app.js (renders into these classes), STAGE-1-SPEC.md §3
 * Changes: --accent darkened to #4a6741 (6.35:1 on #fff, WCAG AA/AAA) for white-text
 *          surfaces (.btn, .chip[aria-pressed="true"]); --accent-ink adjusted to #3a5231
 *          to keep it visibly darker than the new accent; tab bar updated to
 *          [aria-current="page"] selector (L6); reduced-motion: animation:none (L8).
 *          Added: dark theme palette (html[data-theme="dark"] + prefers-color-scheme),
 *          top bar (.topbar), profile overlay (.profile-overlay), stat cards, theme
 *          selector, intro/onboarding card, avatar, two-step confirm button.
 *          Composite Write: write chooser removed; writing overlay updated with static
 *          "Write today" center title (.write-bar-title); composite page styles:
 *          .write-energy-hint, .cw-add-label, .cw-affordances, .cw-add-row, .cw-slots,
 *          .cw-slot, .cw-section-anim (slide-down), .cw-section-header, .cw-section-label,
 *          .cw-remove-btn, .cw-section-body. Reduced-motion: .cw-section-anim shows instantly.
 *          Bundle A: Today list card (.today-list-card), task/habit rows (.tl-row),
 *          streak chip (.streak-chip), kind-check toggle (.kind-check), Someday expander,
 *          inline feeling-rater (.feeling-rater), add-item sheet extensions (.add-item-sheet).
 *          Today redesign: .mood-card-lite (flat/hairline, lighter than hub); .date-line
 *          margin tightened (22px→14px); h2.section top margin tightened (26px→18px);
 *          .tl-habit-glyph (muted loop SVG before habit title); .tl-all-done-line (affirmation);
 *          .tl-done-toggle (reuses .tl-show-more, no extra styles needed).
 *          Verified: .kind-check 44px target intact; .streak-chip and .tl-habit-glyph
 *          AA contrast in dark mode (ink-soft on dark bg ~4.7:1).
 *          Audit fixes: B2 secondary cards de-emphasized (var(--surface-2) bg, hairline
 *          border, no shadow); B3 .tl-title clamped to 2 lines; C1 pulse class removed
 *          from JS (keyframes kept but unused); C2 .tl-rate-link opt-in affordance +
 *          .feeling-rater.open max-height raised to 200px; D1 Google Fonts link removed,
 *          @font-face rules added pointing at self-hosted woff2 files in fonts/.
 *          Phase 1 visual-consistency pass: (1) kind-check redesigned as 44px tap-target
 *          button containing a visible 22px rounded-square box via ::before; unchecked has
 *          border on transparent bg; checked fills --accent with white tick ::after.
 *          (2) Surface card system — .surface-card base + --flat + --rows tiers; all Tier-1
 *          cards aligned to same radius/padding recipe; Tier-2 secondary-card unchanged.
 *          (3) Iconography — tab bar and card .ic icons replaced with inline SVG via icon()
 *          helper in app.js; .tl-habit-glyph uses SVG loop; chevrons replaced; mood faces
 *          and streak 🌱 kept as emoji. svg { display:block } on icon spans.
 *          (4) Row system — shared .row contract with top-border separators; .tl-row,
 *          .checkin-list li, .data-row aligned to it.
 *          (5) Spacing tokens --space-1..6; one .overline class; one .pill base + --sm/--md
 *          size variants; section spacer style/height hacks replaced with gap/margin tokens.
 *          Empathy + QA pass: Q1 .feeling-face, .act-feel-btn, .feeling-rater-skip bumped
 *          to 44px min targets via padding (glyph size unchanged); Q2 day-detail read-only
 *          activity tags switched to .pill.pill--md (no interactive styles) — .chip reserved
 *          for interactive controls; other JS-only changes in app.js.
 */

/* ===== SELF-HOSTED FONTS (D1) =====
   Inter and Newsreader served from fonts/ so no request leaves the device.
   Latin subset only — covers all UI copy. Three weight slots (400/500/600) for Inter
   all point at the same woff2 file because Google Fonts v20 serves a variable-font
   slice that covers the full 100-900 weight axis. Newsreader: regular + italic.
   All woff2 files downloaded from fonts.gstatic.com during the D1 audit fix. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/newsreader-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/newsreader-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/caveat-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/kalam-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/patrickhand-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/playpensans-400.woff2') format('woff2');
}

/* ===== LIGHT THEME (default) ===== */
:root {
  --bg: #f5f1ea;
  --surface: #fdfbf7;
  --surface-2: #f0ebe1;
  --ink: #3a3a38;
  --ink-soft: #65605a;
  --accent: #4a6741;       /* was #7d9b76 — darkened to 6.35:1 contrast on #fff (WCAG AA/AAA) */
  --accent-ink: #3a5231;   /* slightly darker than --accent for ghost-btn text / focus rings */
  --line: #e4ddd0;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 6px 24px rgba(80, 70, 55, 0.10);
  --tap: 44px;
  --topbar-h: 52px;
  --maxw: 520px;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Newsreader", "Lora", Georgia, "Times New Roman", serif;
  --face-heading: 'Newsreader', Georgia, serif;
  --face-body: 'Newsreader', Georgia, serif;
  /* Reading-room font is a SEPARATE dial from the app font (--face-*). App font themes journal +
     quotes; reading font themes only the reading room. Set via html[data-read-face]. */
  --read-face-heading: 'Newsreader', Georgia, serif;
  --read-face-body: 'Newsreader', Georgia, serif;
  /* ---- Spacing scale (Phase 1) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --btn-text: #fff;
  --danger: #c05050;
  --danger-bg: rgba(192,80,80,0.08);
  --amber: #b46010;
  --amber-bg: rgba(176,100,16,0.08);
}

/* ===== DARK THEME =====
   Warm dark charcoal (not pure black). Sage accent stays recognisable but
   is lightened slightly so it reads on dark surfaces at AA contrast.
   Two activation paths:
   1. html[data-theme="dark"]  — explicit forced dark (set by theme picker).
   2. @media prefers-color-scheme:dark scoped to html[data-theme="system"] — follows OS
      when user picked "System" (the default). The theme boot snippet in index.html
      writes data-theme before first paint to avoid a flash of wrong colors. */

/* Path 1: explicit dark */
html[data-theme="dark"] {
  --bg: #1e1c19;
  --surface: #262420;
  --surface-2: #2e2b27;
  --ink: #ede8df;
  --ink-soft: #a09890;
  --accent: #6d9b64;         /* lightened from #4a6741 — ~4.7:1 on dark bg, AA */
  --accent-ink: #8dbe83;     /* lighter still for ghost text on dark */
  --line: #3a3630;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  --btn-text: var(--ink);
  --danger: #ef9a9a;
  --danger-bg: rgba(192,80,80,0.12);
  --amber: #d48a20;
  --amber-bg: rgba(176,100,16,0.14);
}

/* Path 2: system follows OS preference */
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg: #1e1c19;
    --surface: #262420;
    --surface-2: #2e2b27;
    --ink: #ede8df;
    --ink-soft: #a09890;
    --accent: #6d9b64;
    --accent-ink: #8dbe83;
    --line: #3a3630;
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    --btn-text: var(--ink);
    --danger: #ef9a9a;
    --danger-bg: rgba(192,80,80,0.12);
    --amber: #d48a20;
    --amber-bg: rgba(176,100,16,0.14);
  }
}

/* =====================================================
   ACCENT COLOUR THEMES  (data-accent on <html>)
   Light-mode values below; dark overrides follow.
   Default (no attribute) = sage green, defined above.
   ===================================================== */

html[data-accent="terracotta"] { --accent: #8c3a22; --accent-ink: #762e18; }
html[data-accent="sky"]        { --accent: #26608e; --accent-ink: #1c4d72; }
html[data-accent="rose"]       { --accent: #8a3852; --accent-ink: #703040; }
html[data-accent="amber"]      { --accent: #8a5c18; --accent-ink: #704810; }
html[data-accent="slate"]      { --accent: #385870; --accent-ink: #2c4458; }
html[data-accent="plum"]       { --accent: #5c3878; --accent-ink: #4a2c62; }

html[data-theme="dark"][data-accent="terracotta"] { --accent: #c0604a; --accent-ink: #d47e6a; }
html[data-theme="dark"][data-accent="sky"]        { --accent: #5090c0; --accent-ink: #70aad8; }
html[data-theme="dark"][data-accent="rose"]       { --accent: #b86b80; --accent-ink: #d08898; }
html[data-theme="dark"][data-accent="amber"]      { --accent: #c08838; --accent-ink: #d4a058; }
html[data-theme="dark"][data-accent="slate"]      { --accent: #5a8aaa; --accent-ink: #78a4c0; }
html[data-theme="dark"][data-accent="plum"]       { --accent: #906ab8; --accent-ink: #a888cc; }

@media (prefers-color-scheme: dark) {
  html[data-theme="system"][data-accent="terracotta"] { --accent: #c0604a; --accent-ink: #d47e6a; }
  html[data-theme="system"][data-accent="sky"]        { --accent: #5090c0; --accent-ink: #70aad8; }
  html[data-theme="system"][data-accent="rose"]       { --accent: #b86b80; --accent-ink: #d08898; }
  html[data-theme="system"][data-accent="amber"]      { --accent: #c08838; --accent-ink: #d4a058; }
  html[data-theme="system"][data-accent="slate"]      { --accent: #5a8aaa; --accent-ink: #78a4c0; }
  html[data-theme="system"][data-accent="plum"]       { --accent: #906ab8; --accent-ink: #a888cc; }
}

/* =====================================================
   BACKGROUND WASHES  (data-bg on <html>)
   Subtle tinted backgrounds — same warmth, different hue.
   Dark mode gets a tinted-dark equivalent of each wash.
   ===================================================== */

/* Blush Mist — soft rosy pink */
html[data-bg="blush"] { --bg: #f9eeee; --surface: #fef5f5; --surface-2: #f2e4e4; --line: #e8d4d4; }
html[data-theme="dark"][data-bg="blush"] { --bg: #201919; --surface: #2a2020; --surface-2: #322626; --line: #3e2e2e; }

/* Cool Mist — pale blue-grey calm */
html[data-bg="mist"]  { --bg: #edf1f7; --surface: #f4f7fc; --surface-2: #e2eaf3; --line: #d0dce8; }
html[data-theme="dark"][data-bg="mist"]  { --bg: #181c22; --surface: #1e2430; --surface-2: #242c3a; --line: #2e3848; }

/* Forest Dew — cool sage green */
html[data-bg="forest"]{ --bg: #eaf2ea; --surface: #f3f8f3; --surface-2: #deeade; --line: #ccdacc; }
html[data-theme="dark"][data-bg="forest"]{ --bg: #171d17; --surface: #1d261d; --surface-2: #232e23; --line: #2c3a2c; }

/* Golden Hour — warm amber glow */
html[data-bg="golden"]{ --bg: #f7f0e2; --surface: #fdf8ed; --surface-2: #ede5d0; --line: #ddd0b4; }
html[data-theme="dark"][data-bg="golden"]{ --bg: #1e1c12; --surface: #282418; --surface-2: #302c1e; --line: #3e3826; }

/* Lavender Dream — soft violet calm */
html[data-bg="lavender"]{ --bg: #f0ecf8; --surface: #f7f4fc; --surface-2: #e6e0f4; --line: #d4cce8; }
html[data-theme="dark"][data-bg="lavender"]{ --bg: #1a1820; --surface: #22202a; --surface-2: #2a2734; --line: #383244; }

@media (prefers-color-scheme: dark) {
  html[data-theme="system"][data-bg="blush"]    { --bg: #201919; --surface: #2a2020; --surface-2: #322626; --line: #3e2e2e; }
  html[data-theme="system"][data-bg="mist"]     { --bg: #181c22; --surface: #1e2430; --surface-2: #242c3a; --line: #2e3848; }
  html[data-theme="system"][data-bg="forest"]   { --bg: #171d17; --surface: #1d261d; --surface-2: #232e23; --line: #2c3a2c; }
  html[data-theme="system"][data-bg="golden"]   { --bg: #1e1c12; --surface: #282418; --surface-2: #302c1e; --line: #3e3826; }
  html[data-theme="system"][data-bg="lavender"] { --bg: #1a1820; --surface: #22202a; --surface-2: #2a2734; --line: #383244; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  font-size: 100%;
  line-height: 1.5;
}

body { padding-bottom: 86px; } /* room for the tab bar */

/* ===== No accidental text-selection on a long-press =====
   Tapping/holding a task title used to highlight the text and pop the phone's native
   "Search / Translate / Copy" bubble — which fought our own long-press action sheet. Disable
   text selection AND the long-press callout app-wide, then re-enable BOTH only where the user
   genuinely writes or needs to select: inputs, textareas, and the rich writing editor. */
html, body {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* suppress the native long-press text bubble on mobile */
}
input, textarea, select,
[contenteditable="true"], [contenteditable=""],
.rt-editor {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Visually-hidden but available to assistive tech (the #sr-live announcer + any SR-only text). */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#app {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100vh;
  padding-top: var(--topbar-h); /* room for .topbar */
}

/* ---------- top bar (v27 redesign) ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: var(--topbar-h);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;  /* home on the far left, icon cluster on the right */
  padding: 0 8px;
  z-index: 60;
}
/* Left group: prominent Dream button, then the small Home heart. */
.topbar-left { display: flex; align-items: center; gap: 2px; }
/* Dream Space — the most-seen icon, in the heart's sage, always at full presence.
   Compound selector so it beats .topbar-icon-btn's default ink colour regardless of order. */
.topbar-icon-btn.topbar-dream-prominent { color: #6d9b64; opacity: 1; }
.topbar-icon-btn.topbar-dream-prominent:hover { opacity: 1; background: color-mix(in srgb, #6d9b64 14%, transparent); }
.topbar-icon-btn.topbar-dream-prominent svg { width: 23px; height: 23px; }
/* Left: small heart = Home (navigation, not branding). */
.topbar-home { width: 44px; height: 44px; border-radius: 12px; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, transform 0.12s; }
.topbar-home:hover { background: var(--surface-2); }
.topbar-home:active { transform: scale(0.9); }
.topbar-home:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Right: a row of uniform, quiet icon buttons. */
.topbar-right { display: flex; align-items: center; gap: 2px; }
.topbar-icon-btn { position: relative; width: 44px; height: 44px; border-radius: 10px; background: none; border: none; color: var(--ink); opacity: 0.72; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: opacity 0.15s, background 0.15s, transform 0.12s; }
.topbar-icon-btn:hover { opacity: 1; background: var(--surface-2); }
.topbar-icon-btn:active { transform: scale(0.9); opacity: 1; }
.topbar-icon-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.topbar-icon-btn svg { width: 21px; height: 21px; display: block; }
/* The calm notification dot — a presence, never a count. */
.topbar-dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); pointer-events: none; }

.screen { padding: 22px 18px 8px; animation: rise 180ms ease; }
/* NO vertical movement — the screen settles in place so the quote, date strip and filters hold their
   position and never "jump up" on a refresh/re-render. Just a whisper of a fade, kept narrow (0.8→1)
   so the repeated renders during boot don't visibly flicker. */
@keyframes rise { from { opacity: 0.8; } to { opacity: 1; } }

/* ---------- typography ---------- */
.greeting { font-size: 1.7rem; font-weight: 600; letter-spacing: -0.01em; margin: 6px 0 2px; }
.subtle { color: var(--ink-soft); }
.date-line { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 14px; }
h2.section { font-size: 1.05rem; font-weight: 600; margin: 18px 4px 12px; }

/* ---- Compact today date strip — definitive styles below in DATE NAVIGATION section ---- */

/* ========== Phase 1: Shared design primitives ========== */

/* ---- Overline label ----
   Single class for all small uppercase section headings.
   Per-context top/bottom margins stay on the individual classes. */
.overline {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- Pill base ----
   Shared recipe for non-interactive badge / tag chips.
   Interactive .chip buttons are left alone. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.pill--sm { padding: 2px 8px;  font-size: 0.72rem; }
.pill--md { padding: 4px 10px; font-size: 0.82rem; }

/* ---- Surface card system — 3 deliberate tiers ----
   Tier 1 (elevated, focal):   .surface-card                → shadow + border + radius
   Tier 2 (flat, secondary):   .surface-card.surface-card--flat  → surface-2 bg, no shadow
   Tier 0 (ambient, no chrome): used on .mood-card-lite (no class needed here)
   Modifier --rows: zero padding + overflow:hidden for row-hosting cards. */
.surface-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.surface-card--flat {
  background: var(--surface-2);
  box-shadow: none;
}
.surface-card--rows {
  padding: 0;
  overflow: hidden;
}

/* ---- Shared row contract ----
   .row is the structural base; all three row patterns (.tl-row, .checkin-list li,
   .data-row) extend it. Top-border separators (not bottom-border) throughout. */
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
/* First row in a group needs no top separator */
.row:first-child,
.row-first-in-group {
  border-top: none;
}
.row__body {
  flex: 1;
  min-width: 0;
}
.row__meta {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--ink-soft);
}

/* ---- Icon spans: force SVG to be block so baseline doesn't add gap ---- */
.ti svg,
.ic svg,
.tl-habit-glyph svg,
.tl-someday-chev svg,
.chev svg {
  display: block;
}

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.card + .card { margin-top: var(--space-3); }
.card-title { font-weight: 600; margin: 0 0 4px; }
.card-preview { color: var(--ink-soft); font-size: 0.92rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

button.linklike, .secondary-card {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  /* B2: secondary cards are de-emphasized — flatter look (surface-2 bg, hairline border,
     NO shadow) so they read clearly lighter than .today-list-card which keeps --shadow.
     Tier-2 in the surface-card system. */
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
}
.secondary-card .chev { margin-left: auto; color: var(--ink-soft); flex: 0 0 auto; }
.secondary-card .ic { font-size: 1.3rem; flex: 0 0 auto; }
/* The middle text block must be allowed to shrink so the preview truncates instead of stretching the row. */
.secondary-card .sc-text { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.secondary-card .card-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Journal/activity preview: clamp to 2 lines then ellipsis (the composite entry can be long). */
.secondary-card .card-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  overflow: hidden;
}

/* ---------- mood faces ---------- */
.mood-row { display: flex; justify-content: space-between; gap: 6px; margin-top: 10px; }
.mood-face {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 10px 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  min-height: var(--tap);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.mood-face .emoji { font-size: 1.55rem; line-height: 1; }
.mood-face .lbl { font-size: 0.7rem; color: var(--ink-soft); }
.mood-face:active { transform: scale(0.93); }
.mood-face.selected { box-shadow: 0 0 0 2px var(--accent) inset; background: var(--surface); }
.mood-face:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.today-summary { margin-top: 14px; color: var(--ink-soft); font-size: 0.92rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* chip-mini: pill base + md-size variant (non-interactive summary badge).
   In markup paired with .pill for base styles; standalone also works via these props. */
.chip-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  white-space: nowrap;
  padding: 4px 10px;
  font-size: 0.85rem;
}

/* Mood variance chips — shown when a day has mixed high/low check-ins */
.mood-variance-chip { background: rgba(205, 187, 149, 0.18); color: var(--ink-soft); border-color: transparent; }
.mood-variance-chip--roller { background: var(--amber-bg); color: var(--amber); }

/* ---------- chips (activities / custom tags) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.chip {
  font: inherit;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 999px;
  padding: 9px 15px;
  min-height: var(--tap);
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease;
}
.chip:active { transform: scale(0.95); }
/* CONTRAST: --accent is now #4a6741 (~6.35:1 on #fff) so white text passes WCAG AA. */
.chip[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.chip.add { border-style: dashed; color: var(--ink-soft); }

/* ---------- buttons ---------- */
.btn {
  font: inherit;
  font-weight: 600;
  background: var(--accent);
  color: var(--btn-text);
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  min-height: var(--tap);
  cursor: pointer;
  width: 100%;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:active { transform: scale(0.99); }
.btn.ghost { background: transparent; color: var(--accent-ink); border: 1px solid var(--line); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- journal ---------- */
.journal-area {
  width: 100%;
  min-height: 50vh;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px;
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--ink);
  resize: none;
  box-shadow: var(--shadow);
}
.journal-area:focus-visible { outline: 2px solid var(--accent); }
.saved-hint { color: var(--ink-soft); font-size: 0.82rem; margin: 8px 4px; height: 1em; transition: opacity 400ms; }

/* ---------- history calendar ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 2px 16px; }
.cal-head .m { font-weight: 600; font-size: 1.1rem; }
.cal-nav { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; width: 44px; height: 44px; cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; }
.dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; color: var(--ink-soft); font-size: 0.72rem; text-align: center; margin-bottom: 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  font-size: 0.82rem;
  position: relative;
}
.cal-cell.muted { opacity: 0.35; }
.cal-cell.today { box-shadow: 0 0 0 2px var(--accent); }
/* Kept days — a warm gold ring + a tiny ✨, so special days stand out without hiding the mood tint */
.cal-cell--kept { box-shadow: inset 0 0 0 2px #d9b34a; }
.cal-cell.today.cal-cell--kept { box-shadow: 0 0 0 2px var(--accent), inset 0 0 0 2px #d9b34a; }
.cal-kept { position: absolute; top: 1px; right: 3px; font-size: 0.58rem; line-height: 1; }
.cal-cell .em { font-size: 0.95rem; line-height: 1; }

/* "Keep this day" — the inline button at the bottom of the Today / Tasks view */
.today-keep-btn { display: block; margin: 12px 12px 6px; padding: 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, #d9b34a 40%, var(--line)); background: color-mix(in srgb, #d9b34a 7%, var(--surface)); color: var(--ink); font: inherit; font-size: 0.92rem; cursor: pointer; transition: background 0.15s, transform 0.1s; }
.today-keep-btn:hover { background: color-mix(in srgb, #d9b34a 13%, var(--surface)); }
.today-keep-btn:active { transform: scale(0.99); }
.today-keep-btn.is-kept { background: color-mix(in srgb, #d9b34a 14%, var(--surface)); border-color: color-mix(in srgb, #d9b34a 55%, var(--line)); font-weight: 600; }

/* "Keep this day" — in the day-detail overlay */
.keep-day { margin: 20px 0 8px; }
.keep-day-btn { width: 100%; padding: 13px; border-radius: 14px; border: 1px solid color-mix(in srgb, #d9b34a 50%, var(--line)); background: color-mix(in srgb, #d9b34a 10%, var(--surface)); color: var(--ink); font: inherit; font-size: 0.95rem; cursor: pointer; transition: background 0.15s, transform 0.1s; }
.keep-day-btn:hover { background: color-mix(in srgb, #d9b34a 16%, var(--surface)); }
.keep-day-btn:active { transform: scale(0.99); }
.keep-day-card--on { border: 1px solid color-mix(in srgb, #d9b34a 45%, var(--line)); background: color-mix(in srgb, #d9b34a 9%, var(--surface)); border-radius: 14px; padding: 12px 14px; }
.keep-day-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.keep-day-title { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.keep-day-forget { background: none; border: none; color: var(--ink-soft); font: inherit; font-size: 0.8rem; cursor: pointer; text-decoration: underline; }
.keep-day-note { width: 100%; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 0.9rem; color: var(--ink); resize: vertical; outline: none; }
.keep-day-note:focus { border-color: #d9b34a; }

/* "Keep this day" — the NIGHT-ONLY card at the top of Today (all three tabs). Reuses the warm gold
   keep-day visual language; sits above everything else on the night home. */
.keepday-night-card { margin: 0 0 14px; }
.keepday-night-inner { border: 1px solid color-mix(in srgb, #d9b34a 45%, var(--line)); background: color-mix(in srgb, #d9b34a 9%, var(--surface)); border-radius: 16px; padding: 14px 16px; }
.keepday-night-inner--on { background: color-mix(in srgb, #d9b34a 12%, var(--surface)); }
.keepday-night-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.keepday-night-title { font-size: 0.98rem; font-weight: 600; color: var(--ink); }
.keepday-night-sub { font-size: 0.85rem; line-height: 1.5; color: var(--ink-soft); margin: 6px 0 10px; }
.keepday-night-input, .keepday-night-note { width: 100%; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; padding: 9px 12px; font: inherit; font-size: 0.9rem; color: var(--ink); outline: none; }
.keepday-night-note { resize: vertical; margin-top: 8px; }
.keepday-night-input:focus, .keepday-night-note:focus { border-color: #d9b34a; }
.keepday-night-btn { width: 100%; margin-top: 10px; padding: 12px; border-radius: 13px; border: 1px solid color-mix(in srgb, #d9b34a 55%, var(--line)); background: color-mix(in srgb, #d9b34a 16%, var(--surface)); color: var(--ink); font: inherit; font-size: 0.92rem; cursor: pointer; transition: background 0.15s, transform 0.1s; }
.keepday-night-btn:hover { background: color-mix(in srgb, #d9b34a 24%, var(--surface)); }
.keepday-night-btn:active { transform: scale(0.99); }
.keepday-night-forget { background: none; border: none; color: var(--ink-soft); font: inherit; font-size: 0.8rem; cursor: pointer; text-decoration: underline; flex-shrink: 0; }
.keepday-night-close { flex-shrink: 0; width: 30px; height: 30px; border: none; border-radius: 50%; background: none; color: var(--ink-soft); font-size: 0.85rem; line-height: 1; cursor: pointer; opacity: 0.6; transition: background 0.15s, opacity 0.15s; }
.keepday-night-close:hover { opacity: 1; background: var(--surface-2); }
.keepday-night-close:active { transform: scale(0.92); }

/* Memories shelf — the list of kept days */
.memories-lead { font-size: 0.86rem; line-height: 1.55; color: var(--ink-soft); margin: 2px 2px 16px; }
.memories-empty { text-align: center; padding: 44px 20px; }
.memories-empty-icon { font-size: 2.2rem; }
.memories-empty p { color: var(--ink); margin: 12px 0 0; }
.memories-empty-sub { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; margin-top: 8px !important; }
.memories-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; margin-bottom: 9px; border: 1px solid color-mix(in srgb, #d9b34a 35%, var(--line)); border-radius: 14px; background: color-mix(in srgb, #d9b34a 7%, var(--surface)); cursor: pointer; font: inherit; transition: background 0.15s; }
.memories-card:hover { background: color-mix(in srgb, #d9b34a 13%, var(--surface)); }
.memories-star { font-size: 1.2rem; flex-shrink: 0; }
.memories-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.memories-date { font-size: 0.98rem; font-weight: 600; color: var(--ink); }
.memories-note { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.4; }
.memories-note--empty { font-style: italic; opacity: 0.8; }
.memories-chev { color: var(--ink-soft); font-size: 1.2rem; flex-shrink: 0; }
.cal-cell:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.legend { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 2px; color: var(--ink-soft); font-size: 0.78rem; align-items: center; }
.legend .sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); vertical-align: middle; margin-right: 4px; }

/* habit-cal-grid removed — superseded by ts-hcell tracker system */

/* ---------- tab bar ---------- */
.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: flex;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  z-index: 40;
}
.tab {
  flex: 1;
  background: none;
  border: none;
  font: inherit;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px;
  cursor: pointer;
  border-radius: 12px;
  min-height: var(--tap);
}
.tab .ti { font-size: 1.25rem; display: flex; align-items: center; justify-content: center; }
.tab .tl { font-size: 0.7rem; }
/* bottom nav = the Tasks/Journal/Feelings switcher: text segments, active one filled with accent */
.tab--mode { flex: 1; justify-content: center; flex-direction: row; gap: 0; padding: 10px 6px; border-radius: 11px; border: 1.5px solid transparent; transition: border-color 0.25s ease, background-color 0.25s ease; }
.tab--mode .tl { font-size: 0.94rem; font-weight: 500; color: var(--ink-soft); transition: color 0.2s ease; }
@media (prefers-reduced-motion: reduce) { .tab--mode, .tab--mode .tl { transition: none; } }
/* Active = a calm accent OUTLINE + a whisper of tint, not a loud filled box. The switcher is just
   quiet navigation — it should never be the most highlighted thing on the screen. */
.tab--mode.is-active { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tab--mode.is-active .tl { color: var(--ink); font-weight: 600; }
.tab--mode:active { transform: scale(0.97); }
/* v218: Self-care quick button — a compact leaf at the right corner of the bottom bar (an action, not a
   mode), set apart from the 3 nav tabs. Accent-tinted so help is always one thumb-tap away. */
.tab--selfcare {
  flex: 0 0 auto; justify-content: center; align-items: center; padding: 10px 12px; border-radius: 11px;
  color: var(--accent); border: 1.5px solid transparent;
}
.tab--selfcare:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.tab--selfcare:active { transform: scale(0.92); }
.tab--selfcare:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
/* wind-down moon: a compact action at the end of the bar, set apart from the nav tabs */
/* Night wind-down bar — a fixed "Wind down for the night" bar that stacks above the tab bar in every
   section at night, so switching off is one tap from anywhere. */
/* a SOLID bar attached above the tab bar (like the top bar) — its own background, content sits above
   it cleanly, nothing peeks through behind it. */
/* The wind-down bar sits BELOW the Tasks/Journal/Feelings switcher: it takes the very bottom edge,
   and the tab bar lifts to rest directly on top of it. Driven by :has() so no JS class-toggling
   is needed — the lift appears/disappears purely from the bar's presence in the DOM. */
.night-winddown-bar { position: fixed; left: 0; right: 0; max-width: var(--maxw); margin: 0 auto; bottom: 0; z-index: 44; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
body:has(#night-winddown-bar) .tabbar { bottom: var(--nightbar-h, 64px); padding-bottom: 8px; }
.night-winddown-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 13px; border: none; border-radius: 13px; cursor: pointer; font-family: inherit; font-size: 0.96rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #2c3e6b)); transition: transform 0.12s; }
.night-winddown-btn:active { transform: scale(0.985); }
/* keep the last bit of content clear of the fixed bar */
.screen.has-night-bar { padding-bottom: 84px; }
/* at night, lift the tasks "+" dock so it floats clearly above the wind-down bar instead of under it */
body:has(.night-winddown-bar) .dock-add-row { top: calc(-1 * (var(--tabbar-h, 62px) + var(--nightbar-h, 64px) + env(safe-area-inset-bottom, 0px) + 52px)); }
/* L6: use aria-current="page" (not aria-current="true") for the active tab. */
.tab[aria-current="page"] { color: var(--accent-ink); }
.tab[aria-current="page"] .ti { transform: translateY(-1px); }
.tab:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; }

/* ---------- sheet ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(45, 40, 32, 0.32);
  display: flex; align-items: flex-end; justify-content: center; z-index: 60;
  animation: fade 200ms ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  background: var(--bg);
  width: 100%; max-width: var(--maxw);
  border-radius: 22px 22px 0 0;
  padding: 10px 18px calc(22px + env(safe-area-inset-bottom));
  animation: slideup 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  max-height: 88vh; overflow: auto; overscroll-behavior: contain;
}
@keyframes slideup { from { transform: translateY(100%); } to { transform: none; } }
.sheet .grab { width: 38px; height: 4px; border-radius: 2px; background: var(--line); margin: 4px auto 14px; }
.sheet h3 { margin: 0 0 14px; font-size: 1.15rem; }
.note-input {
  width: 100%; font: inherit; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); margin: 12px 0 16px;
}

/* ---- Habit detail sheet ---- */
.hd-sheet { padding-bottom: max(env(safe-area-inset-bottom), 24px); }
.hd-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.hd-title { font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.hd-close { background: var(--surface-2); border: 1px solid var(--line); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-soft); }
.hd-prog-block { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 18px; }
.hd-stat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hd-stat-num { font-size: 1.35rem; font-weight: 700; color: var(--accent); }
.hd-stat-label { font-size: 0.82rem; color: var(--ink-soft); flex: 1; }
.hd-stat-chip { font-size: 0.75rem; font-weight: 600; padding: 3px 8px; border-radius: 10px; }
.hd-stat-chip--score { background: rgba(74,103,65,0.12); color: var(--accent); }
.hd-score-track { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.hd-score-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.4s ease; }
.hd-score-label { font-size: 0.76rem; color: var(--ink-soft); }
.hd-cal-title { font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 10px; }
.hd-mini-cal { display: flex; flex-wrap: wrap; gap: 4px; }
.hd-cal-dot { width: 13px; height: 13px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; transition: transform 80ms; }
.hd-cal-dot--good { background: rgba(74,103,65,0.6); border-color: rgba(74,103,65,0.4); }
.hd-cal-dot--over { background: rgba(170,130,40,0.55); border-color: rgba(170,130,40,0.4); }
.hd-cal-dot--off  { background: transparent; border-color: transparent; }
.hd-cal-dot--today { box-shadow: 0 0 0 1.5px var(--accent); }
.hd-cal-dot:active { transform: scale(1.3); }

/* ---------- day detail ---------- */
.overlay { position: fixed; inset: 0; background: var(--bg); z-index: 70; overflow: auto; max-width: var(--maxw); margin: 0 auto; }
.overlay .bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.overlay .bar .back { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; width: 44px; height: 44px; cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; }
.detail-mood { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.checkin-list { list-style: none; padding: 0; margin: 10px 0; }
/* Extends .row contract — top-border separators; first li has no border */
.checkin-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.checkin-list li:first-child { border-top: none; }
/* .t is a .row__meta equivalent */
.checkin-list .t { color: var(--ink-soft); font-size: 0.85rem; margin-left: auto; }
.read-journal { font-family: var(--face-body); font-size: 1.08rem; line-height: 1.7; white-space: pre-wrap; }
.empty { color: var(--ink-soft); font-style: italic; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%);
  background: var(--accent-ink); color: #fff; padding: 11px 18px; border-radius: 999px;
  font-size: 0.9rem; z-index: 80; box-shadow: var(--shadow);
  animation: toastin 300ms ease;
}
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- intro / onboarding card ---------- */
/* Tier-1 elevated card — aligned to .surface-card recipe */
.intro-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}
.intro-card-title {
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 6px;
}
.intro-card-body {
  color: var(--ink-soft);
  font-size: 0.93rem;
  margin: 0 0 14px;
  line-height: 1.55;
}
.intro-card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.intro-card-actions .btn {
  flex: 1;
  min-width: 120px;
  font-size: 0.9rem;
  padding: 11px 14px;
}

/* ---------- profile overlay ---------- */
/* Full-screen, same z-index as day-detail overlay */
.profile-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 70;
  overflow-y: auto;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.profile-overlay.is-open { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .profile-overlay { transform: none; transition: opacity 0.18s ease; }
}
.profile-overlay .pbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 1;
}
.profile-overlay .pbar .back {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 1.1rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-overlay .pbar .back:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.profile-overlay .pbar h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}
.profile-body {
  padding: 20px 18px 40px;
  flex: 1;
}

/* Profile sections */
.profile-section {
  margin-bottom: 28px;
}
/* Extends .overline — only per-context margin needed here */
.profile-section-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

/* Avatar + name */
.profile-you {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.avatar-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--accent-ink);
  flex-shrink: 0;
}
.name-field-wrap {
  flex: 1;
  display: flex;
  gap: 8px;
  align-items: center;
}
.name-input {
  flex: 1;
  font: inherit;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.97rem;
}
.name-input:focus-visible { outline: 2px solid var(--accent); }
.name-save-btn {
  font: inherit;
  font-weight: 600;
  font-size: 0.87rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  cursor: pointer;
  min-height: var(--tap);
  white-space: nowrap;
}
.name-save-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.name-save-btn:active { transform: scale(0.97); }

/* Stat cards — Tier-1 elevated, aligned to .surface-card recipe */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.stat-value {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 3px;
}
.stat-label {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 0;
}
.stat-since {
  margin-top: 12px;
  font-size: 0.87rem;
  color: var(--ink-soft);
}

/* Theme selector */
.theme-options {
  display: flex;
  gap: 8px;
}
.theme-opt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 11px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink-soft);
  transition: background 150ms ease, color 150ms ease;
}
.theme-opt .ti { font-size: 1.3rem; }
.theme-opt[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 0 0 1.5px var(--accent) inset;
}
.theme-opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Data tools rows — extends .row contract (top-border separators) */
.data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  gap: 12px;
}
.data-row:first-child { border-top: none; }
.data-row-info {
  flex: 1;
}
.data-row-title {
  font-weight: 500;
  font-size: 0.95rem;
  margin: 0 0 2px;
}
.data-row-desc {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0;
}
.data-row-btn {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  min-height: var(--tap);
  white-space: nowrap;
  flex-shrink: 0;
}
.data-row-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.data-row-btn:active { transform: scale(0.97); }
.data-row-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.data-row-btn.danger { color: #c0392b; border-color: #e4a09a; }
html[data-theme="dark"] .data-row-btn.danger { color: #ef9a9a; border-color: #6b3530; }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .data-row-btn.danger { color: #ef9a9a; border-color: #6b3530; }
}

/* About section — Tier-1 elevated, aligned to .surface-card recipe */
.about-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.about-app-name {
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 4px;
}
.about-version {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.about-note {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 8px;
}
.about-note:last-child { margin: 0; }

/* ---------- reduced motion ---------- */
/* L8: prefer animation:none over just shortening duration, so no flash at all. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }
}

/* ========== Insights feature ========== */

/* Segmented control — sits at the top of the History tab content area.
   Two segments: Calendar | Insights. Styled to match the calm notebook aesthetic. */
.seg-control {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 3px;
  margin-bottom: 20px;
}
.seg-btn {
  flex: 1;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  background: transparent;
  color: var(--ink-soft);
  border: none;
  border-radius: 9px;
  padding: 9px 12px;
  min-height: 44px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.seg-btn[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(80, 70, 55, 0.12);
}
.seg-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; }

/* Insights view — fade in softly on reveal */
@keyframes insights-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.insights-view {
  animation: insights-rise 320ms ease;
}

/* Insight cards — Tier-1 elevated, aligned to .surface-card recipe */
.insight-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
/* .insight-card-title: overline recipe */
.insight-card-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

/* Data gate placeholder — shown when not enough data is available */
.insight-placeholder {
  color: var(--ink-soft);
  font-size: 0.94rem;
  font-style: italic;
  line-height: 1.55;
  margin: 0;
}

/* Cross-domain insight engine — the "Pattern" headline card (insight-engine.js) */
.insight-pattern { border-left: 3px solid var(--accent); }
.pattern-lead {
  font-size: 1rem; line-height: 1.5; color: var(--ink); margin: 0 0 10px;
  display: flex; gap: 9px; align-items: baseline;
}
.pattern-emoji { font-size: 1.15rem; flex-shrink: 0; }
.pattern-more {
  font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); margin: 0 0 8px;
  display: flex; gap: 9px; align-items: baseline;
}
.pattern-more-emoji { flex-shrink: 0; }
.pattern-guidance {
  font-size: 0.92rem; line-height: 1.5; color: var(--ink);
  margin: 12px 0 0; padding: 11px 13px;
  background: var(--surface-2, rgba(0,0,0,0.04)); border-radius: 12px;
}
.pattern-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 0.72rem; color: var(--ink-soft); margin: 13px 0 0;
}
.pattern-how {
  font: inherit; font-size: 0.72rem; color: var(--accent);
  background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.pattern-how:hover { opacity: 0.8; }

/* "How this app understands your days" explainer body */
.how-insights p { font-size: 0.94rem; line-height: 1.6; color: var(--ink); margin: 0 0 14px; }
.how-insights-promises-title { font-weight: 600; margin-bottom: 8px !important; }
.how-insights-promises { margin: 0 0 14px; padding-left: 18px; }
.how-insights-promises li { font-size: 0.92rem; line-height: 1.55; color: var(--ink); margin-bottom: 8px; }
.how-insights-foot { color: var(--ink-soft); font-style: italic; }

/* Insight summary headline (used in time-of-day card) */
.insight-summary {
  font-size: 0.94rem;
  color: var(--ink);
  line-height: 1.5;
  margin: 0 0 14px;
}

/* Time-of-day mood bar chart */
.tod-rows { display: flex; flex-direction: column; gap: 10px; }
.tod-row   { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.tod-emoji { font-size: 1rem; width: 20px; flex-shrink: 0; }
.tod-label { font-size: 0.82rem; color: var(--ink-soft); width: 52px; flex-shrink: 0; }
.tod-bar-track {
  flex: 1;
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
}
.tod-bar-fill { height: 100%; border-radius: 3px; background: var(--accent); opacity: 0.6; transition: width 0.3s ease; }
.tod-bar-fill--peak { background: var(--accent); opacity: 1; }
.tod-bar-fill--dip  { background: var(--amber); opacity: 0.7; }
.tod-score { font-size: 0.8rem; color: var(--ink); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.tod-n     { font-size: 0.72rem; color: var(--ink-soft); min-width: 20px; text-align: right; }
.tod-no-data { font-size: 0.78rem; color: var(--ink-soft); font-style: italic; }
.tod-tag   { font-size: 0.68rem; font-weight: 600; padding: 1px 5px; border-radius: 99px; letter-spacing: 0.03em; }
.tod-tag--peak { background: rgba(74, 103, 65, 0.13); color: var(--accent); }
.tod-tag--dip  { background: var(--amber-bg); color: var(--amber); }

/* Mood trend card */
.mood-summary-line {
  font-size: 0.97rem;
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.5;
}
.sparkline-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.sparkline-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--ink-soft);
  padding: 2px 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.sparkline-svg {
  flex: 1;
  display: block;
  overflow: visible;
}

/* Activity correlation — visual chip layout */
.corr-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.corr-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 20px;
  font-size: 0.82rem; font-weight: 500; cursor: default;
}
.corr-chip--pos { background: rgba(74,103,65,0.12); color: var(--accent); border: 1px solid rgba(74,103,65,0.2); }
.corr-chip-name { color: var(--ink); }
.corr-chip-emoji { font-size: 0.95rem; line-height: 1; }
.corr-chip-delta { font-size: 0.78rem; opacity: 0.85; }
/* gentle one-line subtitle that warms a card so it reads like a note, not a readout */
.insight-soft-sub { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.5; margin: 0 2px 11px; }

/* Recap card — compact stat rows */
.recap-stats { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.recap-stat { display: flex; align-items: center; gap: 10px; }
.recap-stat-icon { font-size: 1.25rem; flex-shrink: 0; width: 28px; text-align: center; }
.recap-stat-body { font-size: 0.88rem; color: var(--ink); line-height: 1.3; }
.recap-stat-sub { color: var(--ink-soft); font-size: 0.82rem; }
.recap-good-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.recap-good-label { font-size: 0.75rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.recap-good-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.recap-tag { background: rgba(74,103,65,0.10); color: var(--accent); border: 1px solid rgba(74,103,65,0.15); }

/* Year in pixels grid */
.yip-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.yip-month-row {
  display: flex;
  align-items: center;
  gap: 3px;
}
.yip-month-label {
  font-size: 0.72rem;
  color: var(--ink-soft);
  width: 18px;
  flex-shrink: 0;
  text-align: right;
  padding-right: 3px;
  line-height: 1;
}
.yip-cells {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
}
.yip-cell {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  flex-shrink: 0;
  cursor: default;
  /* Keyboard-focusable cells need a visible focus ring */
}
.yip-cell[data-has-data="true"] {
  cursor: pointer;
}
.yip-cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.yip-hint {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 10px;
}

/* ========== Writing overlay — Composite page ========== */

/* --- Writing overlay --- */
/* Full-screen overlay, same shell as .overlay + .bar */
.write-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 70;
  display: flex;
  flex-direction: column;
  max-width: var(--maxw);
  margin: 0 auto;
  overflow: hidden; /* inner .write-body scrolls */
}

/* Top bar: Back | Mode label | Saved hint */
.write-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex-shrink: 0;
}
.write-bar .back {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 1.2rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* SVG chevron-left inherits color via currentColor */
}
.write-bar .back:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.write-bar .back:active { transform: scale(0.93); }

/* Center: static title "Write today" */
.write-bar-title {
  flex: 1;
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  padding: 4px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

/* Right: autosave hint — reuses .saved-hint sizing but positioned in bar */
.write-save-hint {
  font-size: 0.78rem;
  color: var(--ink-soft);
  flex-shrink: 0;
  min-width: 52px;
  text-align: right;
  height: 1em;
  line-height: 1;
  transition: opacity 400ms;
}

/* Scrollable body area below the bar */
.write-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px 40px;
  -webkit-overflow-scrolling: touch;
}

/* Quick line — single short input */
.write-quick-input {
  width: 100%;
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.65;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.write-quick-input:focus-visible { outline: 2px solid var(--accent); }

/* Three good things — stacked inputs */
.gratitude-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gratitude-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.gratitude-num {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink-soft);
  padding-top: 13px;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.gratitude-input {
  flex: 1;
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.6;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  padding: 12px 14px;
  box-shadow: var(--shadow);
  resize: none;
  min-height: 52px;
}
.gratitude-input:focus-visible { outline: 2px solid var(--accent); }

/* Highlights — bullet-list editor */
.highlights-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.highlight-row {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  gap: 0;
}
.highlight-row:last-child { border-bottom: none; }
.highlight-bullet {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink-soft);
  padding: 13px 4px 13px 16px;
  flex-shrink: 0;
  user-select: none;
}
.highlight-input {
  flex: 1;
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.6;
  border: none;
  background: transparent;
  color: var(--ink);
  padding: 12px 14px 12px 8px;
  resize: none;
  min-height: 48px;
  width: 100%;
}
.highlight-input:focus { outline: none; }
.highlight-input:focus-visible { outline: none; }
.highlights-wrap:focus-within { outline: 2px solid var(--accent); border-radius: var(--radius); }

/* Guided prompt */
.guided-prompt-wrap {
  margin-bottom: 16px;
}
.guided-prompt-text {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.6;
}
.guided-next-btn {
  background: none;
  border: none;
  font: inherit;
  font-size: 0.84rem;
  color: var(--accent-ink);
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.guided-next-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Journal screen (new: shows today's entry with an Edit button) */
.journal-screen-entry {
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.7;
  white-space: pre-wrap;
  color: var(--ink);
  margin: 0 0 18px;
}
/* journal-screen-mode-tag: pill--md variant */
.journal-screen-mode-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  white-space: nowrap;
  padding: 4px 10px;
  font-size: 0.82rem;
  margin-bottom: 12px;
}
.journal-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-soft);
}
/* je-icon: decorative icon slot — flex-centering works for both emoji and SVG */
.journal-empty-state .je-icon { font-size: 2.2rem; margin-bottom: 12px; display: flex; justify-content: center; color: var(--ink-soft); }
.journal-empty-state .je-text { font-size: 0.97rem; line-height: 1.6; margin: 0 0 20px; }

/* ========== Today redesign additions ========== */

/* Mood card de-emphasized: flat/hairline, no shadow. Lighter than .today-list-card.
   Renders the 5 mood faces + today-summary without competing with the focal hub. */
.mood-card-lite {
  padding: 12px 0 4px;
  margin-bottom: 0;
  /* No background, no shadow, no border — reads as ambient context, not a card */
}

/* Habit glyph: quiet SVG loop before the habit title. Muted, small, non-shrinking.
   aria-hidden so AT reads only the toggle's aria-label (which already says "habit").
   Phase 1: uses inline SVG via icon() helper; currentColor inherits --ink-soft from parent. */
.tl-habit-glyph {
  display: inline-flex;
  align-items: center;
  color: var(--ink-soft);
  margin-right: 4px;
  vertical-align: middle;
  line-height: 1;
  user-select: none;
  flex-shrink: 0;
}

/* All-done affirmation: gentle one-liner, no card, no number (§6). */
.tl-all-done-line {
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-align: center;
  padding: 14px 16px 10px;
  margin: 0;
  /* Inherits from card's overflow:hidden — stays inside the card shell */
}

/* ========== Bundle A: Today List (Tasks + Habits) ========== */

/* Card shell — Tier-1 elevated + --rows modifier (padding:0, overflow:hidden) */
.today-list-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 0 96px; /* bottom "garden" room for the growing tree to show beneath the rows */
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative; /* anchor for the ambient .task-tree */
  /* Corresponds to .surface-card.surface-card--rows */
}
/* Rows, filter bar and footers sit ABOVE the tree; the tree is the quiet backdrop. */
.today-list-card > *:not(.task-tree) { position: relative; z-index: 1; }
.task-tree { position: absolute; left: 0; right: 0; bottom: 0; height: 200px; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; z-index: 0; opacity: 0.5; }
.task-tree svg { width: 214px; height: 170px; }

/* Sub-group header: overline recipe + card-internal padding */
.tl-group-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 12px 16px 4px;
  margin: 0;
  user-select: none;
}

/* Individual row — extends .row contract with card-internal horizontal padding */
/* Swipe-to-action wrapper — reveals hint BG as row slides */
.tl-swipe-wrap { position: relative; overflow: hidden; }
.tl-swipe-bg {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center;
  font-size: 1rem; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity 0.08s;
}
.tl-swipe-bg--right { justify-content: flex-start; padding-left: 18px; background: rgba(74,103,65,0.14); color: var(--accent); }
.tl-swipe-bg--left  { justify-content: flex-end;   padding-right: 18px; background: rgba(160,50,50,0.10); color: var(--danger); }

/* Negative habit limit bar */
.habit-limit-bar { display: flex; align-items: center; gap: 6px; padding: 4px 16px 8px; }
.habit-limit-segs { display: flex; gap: 3px; flex-wrap: wrap; }
.habit-limit-seg { width: 10px; height: 10px; border-radius: 2px; background: var(--surface-2); border: 1px solid var(--line); }
.habit-limit-seg.seg-filled { background: rgba(74,103,65,0.5); border-color: rgba(74,103,65,0.3); }
.habit-limit-seg.seg-over   { background: var(--danger); border-color: var(--danger); opacity: 0.75; }
.habit-limit-cap  { font-size: 0.72rem; color: var(--ink-soft); }
.habit-limit-icon { font-size: 1rem; }

.tl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  min-height: 52px;            /* even spacing whether or not a row carries a date/count line */
  box-sizing: border-box;
  background: var(--surface); /* needed for swipe bg to show behind */
  border-top: 1px solid var(--line);
  transition: opacity 160ms ease;
  position: relative;
  z-index: 1; /* stacks above .tl-swipe-bg elements */
}
/* Wrappers (div containing .tl-row + .feeling-rater) — the top border lives on .tl-row
   above; the wrapper itself is unstyled so the rater can slide flush with the row. */
/* .tl-row-first-in-group is added via JS to suppress the double-border under group labels. */
.tl-row-first-in-group .tl-row {
  border-top: none;
}

/* Done state: reduced opacity, content struck through */
.tl-row.done {
  opacity: 0.45;
}
.tl-row.done .tl-title {
  text-decoration: line-through;
  text-decoration-color: var(--ink-soft);
}
@media (prefers-reduced-motion: reduce) {
  .tl-row { transition: none; }
}

/* Checkbox toggle — role="checkbox"
   Phase 1 redesign: the BUTTON itself is the 44px tap target (width/height: var(--tap)),
   centered via flex. The visible box is drawn by ::before (22px, 7px radius — reads as
   an actionable checkbox, not an empty avatar circle).
   Unchecked: transparent bg, 1.5px --ink-soft border (visible + AA on both surfaces).
   Checked:   --accent fill + white tick ::after (shape carries meaning, not color alone). */
.kind-check {
  flex-shrink: 0;
  width: var(--tap);
  height: var(--tap);
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  /* Pull 11px back on each side so the 44px button doesn't bloat row height.
     Row vertical padding is ~8px each side; net row height stays ~40px. */
  margin: -9px 0;
  padding: 0;
  border-radius: 4px; /* small radius so the focus ring isn't a huge circle */
  transition: transform 120ms ease;
}
/* The visible rounded-square box */
.kind-check::before {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1.5px solid var(--ink-soft);
  background: transparent;
  transition: background 160ms ease, border-color 160ms ease;
  flex-shrink: 0;
}
/* Hover/active: faint surface-2 fill on the box */
.kind-check:hover::before,
.kind-check:active::before {
  background: var(--surface-2);
}
/* Checked state: fill box with accent, remove border */
.kind-check[aria-checked="true"]::before {
  background: var(--accent);
  border-color: var(--accent);
}
/* White tick mark — overlaid on the ::before box via absolute positioning */
.kind-check[aria-checked="true"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 5.5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -65%) rotate(-45deg);
  pointer-events: none;
}
.kind-check:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.kind-check:active { transform: scale(0.88); }

/* Row text area */
.tl-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Identity icon at the left end of a row — the user's chosen emoji (or a per-type default).
   Same fixed footprint for every item so the titles all line up. */
.tl-row-icon { flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 1.34rem; line-height: 1; }
/* Left-handed layout: move just the tick to the left edge (icon stays glued to the title) →
   [Tick][Icon][Title]. Only the control moves, so the rest stays perfectly aligned. */
html.lefty .tl-row .kind-check { order: -1; }
/* Left-handed: mirror the bottom nav so Feelings sits on the LEFT (the handy side for a left thumb)
   → Feelings · Journal · Tasks. And move the + button to the bottom-LEFT. */
html.lefty .tabbar { flex-direction: row-reverse; }
html.lefty .dock-add-row { left: 16px; right: auto; }
/* …and mirror the top bar: icon cluster to the LEFT, heart logo to the RIGHT. row-reverse only swaps
   the two direct children, so the buttons (cloud · search · bell · book · menu) keep their order. */
html.lefty .topbar { flex-direction: row-reverse; }
/* Title + inline streak/plant share one line: "name  🌱3" */
.tl-title-line { display: flex; align-items: center; gap: 5px; min-width: 0; flex-wrap: wrap; }
.tl-title-line .tl-title { min-width: 0; }
/* 🌱 = "this is a habit" marker on the LEFT (replaces the old streak chip). Quiet, not a number. */
.tl-habit-plant { font-size: 0.95rem; line-height: 1; flex-shrink: 0; }
/* Day-time emoji on the RIGHT, just left of the tick (one per session for multi-session items). */
.tl-row-ses { flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px; font-size: 1.05rem; line-height: 1; opacity: 0.9; }
.tl-row-ses-em { line-height: 1; }
/* Negative-habit "count / daily cap" — compact inline pill (no tall bar below the row) */
.tl-limit-pill { display: inline-flex; align-items: center; gap: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); white-space: nowrap; padding: 2px 8px; font-size: 0.72rem; flex-shrink: 0; }
.tl-limit-pill--over { color: var(--amber); border-color: rgba(176,100,16,0.4); background: var(--amber-bg); }
.tl-title {
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ink);
  word-break: break-word;
  /* B3: clamp long habit/task names to 2 lines; full text is in the existing aria-label */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Date pill on tasks — pill--sm variant */
.tl-date-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  white-space: nowrap;
  padding: 2px 8px;
  font-size: 0.72rem;
  margin-top: 2px;
  align-self: flex-start;
}

/* C2: opt-in "How did that feel?" text link — shown only when a row is done.
   Quiet, muted, ≥44px tap area so it's accessible on touch targets. */
.tl-rate-link {
  background: none;
  border: none;
  font: inherit;
  font-size: 0.72rem;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-align: left;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.tl-rate-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ---- Sub-steps (an optional embedded checklist on a task) ---------------------------------- */
/* The "n of m steps" sub-line under the parent title — quiet, informative only. */
.tl-substeps {
  display: block;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--ink-soft);
  margin-top: 2px;
}
.tl-substeps--all { color: var(--accent); }
/* The nested checklist sits indented under the parent row, sharing its surface. */
.tl-subtasks {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 2px 16px 8px 56px;   /* left inset aligns sub-rows under the parent title (icon + gap) */
}
.tl-subtask {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 2px 0;
}
.tl-subtask-check {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin: 0 -7px;               /* keep a 36px tap area without bloating the row */
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 4px;
  transition: transform 120ms ease;
}
.tl-subtask-check::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1.5px solid var(--ink-soft);
  background: transparent;
  transition: background 160ms ease, border-color 160ms ease;
}
.tl-subtask-check:hover::before,
.tl-subtask-check:active::before { background: var(--surface-2); }
.tl-subtask-check[aria-checked="true"]::before { background: var(--accent); border-color: var(--accent); }
.tl-subtask-check[aria-checked="true"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7.5px;
  height: 4.5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -65%) rotate(-45deg);
}
.tl-subtask-check:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tl-subtask-check:active { transform: scale(0.88); }
.tl-subtask-text {
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--ink);
  word-break: break-word;
}
.tl-subtask.done .tl-subtask-text {
  text-decoration: line-through;
  text-decoration-color: var(--ink-soft);
  opacity: 0.55;
}
@media (prefers-reduced-motion: reduce) {
  .tl-subtask-check { transition: none; }
}

/* Streak chip — pill--sm variant, habit-only, right-aligned */
.streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  white-space: nowrap;
  padding: 2px 8px;
  font-size: 0.72rem;
  flex-shrink: 0;
  align-self: center;
  transition: transform 200ms ease;
}
.streak-chip.pulse {
  animation: streak-pulse 220ms ease;
}
@keyframes streak-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .streak-chip.pulse { animation: none; }
}

/* "Show N more" expander */
.tl-show-more {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  font: inherit;
  font-size: 0.82rem;
  color: var(--accent-ink);
  cursor: pointer;
  padding: 10px 16px;
  min-height: var(--tap);
}
.tl-show-more:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; }

/* Someday expander row */
.tl-someday-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 10px 16px;
  min-height: var(--tap);
}
.tl-someday-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; }
.tl-someday-toggle .tl-someday-chev {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  transition: transform 200ms ease;
}
.tl-someday-toggle[aria-expanded="true"] .tl-someday-chev {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .tl-someday-toggle .tl-someday-chev { transition: none; }
}

/* "+ Add" affordance at card bottom */
.tl-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--accent-ink);
  font-size: 0.95rem;
  font-weight: 600;
  min-height: var(--tap);
}
.tl-add-row:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; }
.tl-add-row:active { background: var(--surface-2); }
.tl-add-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  color: var(--accent-ink);
  flex-shrink: 0;
}

/* ---- Inline feeling rater (slides down under a row after check-off) ---- */
.feeling-rater {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 200ms ease, opacity 200ms ease;
  border-top: 1px solid var(--line);
  /* rater is inserted as a sibling row with class .tl-row.feeling-rater-row */
}
.feeling-rater.open {
  /* C2: raised from 72px — enough room for label + faces + skip without clipping */
  max-height: 200px;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .feeling-rater { transition: none; }
  .feeling-rater.open { max-height: 200px; opacity: 1; }
}
.feeling-rater-inner {
  padding: 8px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feeling-rater-label {
  font-size: 0.72rem;
  color: var(--ink-soft);
  font-style: italic;
}
.feeling-rater-faces {
  display: flex;
  gap: 6px;
  align-items: center;
}
.feeling-face {
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  /* Q1: bumped to 44px min target; padding provides the extra area, glyph size unchanged */
  padding: 6px 9px;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  transition: background 120ms ease, transform 120ms ease;
}
.feeling-face .fl { font-size: 0.70rem; color: var(--ink-soft); }
.feeling-face:hover, .feeling-face:focus-visible { background: var(--surface-2); }
.feeling-face:active { transform: scale(0.9); }
.feeling-face[aria-pressed="true"] {
  background: var(--surface-2);
  border-color: var(--accent);
  box-shadow: 0 0 0 1.5px var(--accent) inset;
}
.feeling-face:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.feeling-rater-skip {
  background: none;
  border: none;
  font: inherit;
  font-size: 0.72rem;
  color: var(--ink-soft);
  cursor: pointer;
  /* Q1: bumped to 44px min target via padding */
  padding: 10px 8px;
  margin-left: auto;
  text-decoration: underline;
  text-underline-offset: 2px;
  min-height: 44px;
  align-self: center;
}
.feeling-rater-skip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---- Add-item sheet: seg-control + extra fields ---- */
/* Reuses .sheet, .seg-control, .seg-btn, .chip, .note-input, .btn */

/* When-chip row and repeat-chip row in the add sheet */
.add-sheet-field {
  margin-top: 14px;
}
/* Icon picker — quick-pick emoji grid (3 rows visible, scroll for the rest; no free-type input) */
.icon-pick-grid { display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 2px; }
.icon-pick-btn { width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface-2); font-size: 1.2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.12s, background 0.12s, transform 0.1s; padding: 0; }
.icon-pick-btn:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.icon-pick-btn:active { transform: scale(0.92); }
.icon-pick-btn.is-sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); box-shadow: 0 0 0 1px var(--accent) inset; }
/* add-sheet-field-label: overline recipe */
.add-sheet-field-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.add-sheet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Smaller chips for the when/repeat picker */
.add-sheet-chips .chip {
  font-size: 0.85rem;
  padding: 7px 13px;
  min-height: var(--tap);
}
/* Day-of-week grid for custom repeat */
.dow-chips {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}
.dow-chip {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 2px;
  cursor: pointer;
  text-align: center;
  min-height: var(--tap);
  color: var(--ink);
  transition: background 120ms ease, border-color 120ms ease;
}
.dow-chip[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.dow-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dow-chip:active { transform: scale(0.93); }

/* Native date input styled to match note-input */
.date-input {
  font: inherit;
  font-size: 0.9rem;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  margin-top: 8px;
  width: 100%;
}
.date-input:focus-visible { outline: 2px solid var(--accent); }

/* Add-sheet: bottom row with Enter-hint + Done */
.add-sheet-bottom {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  align-items: center;
  justify-content: flex-end;  /* Done sits at the right (the hint that used to push it there is gone) */
}
.add-sheet-done {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  color: var(--accent-ink);
  cursor: pointer;
  min-height: var(--tap);
  white-space: nowrap;
}
.add-sheet-done:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.add-sheet-done:active { transform: scale(0.97); }

/* Activity feeling picker (inline in activity sheet) */
.act-feel-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
  width: 100%;  /* force full-width row in the flex chip container */
  flex-basis: 100%;
}
.act-feel-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  /* Q1: bumped to 44px min target via padding */
  padding: 7px 8px;
  font-size: 1rem;
  line-height: 1;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 100ms ease;
}
.act-feel-btn[aria-pressed="true"] {
  background: var(--surface-2);
  border-color: var(--accent);
  box-shadow: 0 0 0 1.5px var(--accent) inset;
}
.act-feel-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.act-feel-btn:active { transform: scale(0.9); }
.act-feel-label {
  font-size: 0.72rem;
  color: var(--ink-soft);
  font-style: italic;
  padding-left: 2px;
}

/* v208: optional movement / outdoors texture chips (soft words, not faces; never a number) */
.act-effort-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; flex-wrap: wrap; width: 100%; flex-basis: 100%; }
.act-effort-label { font-size: 0.72rem; color: var(--ink-soft); font-style: italic; padding-left: 2px; }
.act-effort-btn {
  background: none; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  padding: 7px 12px; font: inherit; font-size: 0.8rem; color: var(--ink-soft); min-height: 44px;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}
.act-effort-btn[aria-pressed="true"] { background: var(--surface-2); border-color: var(--accent); color: var(--ink); box-shadow: 0 0 0 1.5px var(--accent) inset; }
.act-effort-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.act-effort-btn:active { transform: scale(0.96); }

/* v208: "did it help?" gentle after-note bar — appears low on screen after a calming tool */
.afternote-bar {
  position: fixed; left: 50%; transform: translate(-50%, 130%);
  bottom: calc(14px + env(safe-area-inset-bottom)); width: min(440px, calc(100vw - 24px));
  z-index: 1550; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transition: transform 360ms cubic-bezier(.22,1,.36,1), opacity 360ms ease;
}
.afternote-bar.is-open { transform: translate(-50%, 0); opacity: 1; }
.afternote-q { font-size: 0.9rem; color: var(--ink); font-weight: 500; }
.afternote-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.afternote-opt {
  flex: 1 1 auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 10px; font: inherit; font-size: 0.8rem; color: var(--ink); cursor: pointer; min-height: 40px;
  transition: background 100ms ease, border-color 100ms ease;
}
.afternote-opt:hover { border-color: var(--accent); }
.afternote-opt:active { transform: scale(0.97); }
.afternote-x {
  position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--ink-soft);
  font-size: 0.85rem; cursor: pointer; padding: 4px; line-height: 1;
}

/* v210: Reflect — presence line, trackers segment cards, monthly doorway */
.reflect-presence { font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); font-style: italic; margin: 2px 2px 14px; }
.reflect-trackers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.reflect-tracker-card {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 14px; box-shadow: var(--shadow); cursor: pointer; font: inherit; color: var(--ink);
  min-height: 56px; transition: border-color 120ms ease, transform 80ms ease;
}
.reflect-tracker-card:active { transform: scale(0.98); }
.reflect-tracker-card:hover { border-color: var(--accent); }
.rt-emoji { font-size: 1.2rem; flex-shrink: 0; }
.rt-label { font-weight: 500; flex: 1; }
.rt-chev { color: var(--ink-soft); }
.reflect-monthly-btn {
  display: block; width: 100%; margin-top: 16px; padding: 14px; font: inherit; font-size: 0.92rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); cursor: pointer; box-shadow: var(--shadow);
}
.reflect-monthly-btn:hover { border-color: var(--accent); }

/* v210: "For right now" self-care sheet (topbar 🌿) */
.right-now-overlay { position: fixed; inset: 0; z-index: 1400; }
.right-now-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.34); opacity: 0; transition: opacity 300ms ease; }
.right-now-backdrop.is-active { opacity: 1; }
.right-now-sheet {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 100%);
  width: min(480px, 100%); background: var(--surface); border-radius: 22px 22px 0 0;
  border: 1px solid var(--line); border-bottom: none; box-shadow: 0 -10px 40px rgba(0,0,0,0.22);
  padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); transition: transform 360ms cubic-bezier(.22,1,.36,1);
}
.right-now-sheet.is-open { transform: translate(-50%, 0); }
.rn-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 4px auto 12px; }
.rn-title { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin: 0 0 4px; text-align: center; }
.rn-lead { font-size: 0.86rem; color: var(--ink-soft); margin: 0 0 16px; text-align: center; }
.rn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rn-tool {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 12px; cursor: pointer; font: inherit; color: var(--ink); min-height: 96px;
  justify-content: center; transition: border-color 120ms ease, transform 80ms ease;
}
.rn-tool:active { transform: scale(0.97); }
.rn-tool:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.rn-tool:hover { border-color: var(--accent); }
/* an odd number of tools → the lone last one spans full width so the grid never looks broken */
.rn-tool:last-child:nth-child(odd) { grid-column: 1 / -1; }
.rn-emoji { font-size: 1.6rem; }
.rn-label { font-weight: 600; font-size: 0.95rem; }
.rn-sub { font-size: 0.75rem; color: var(--ink-soft); }
.rn-more {
  display: block; width: 100%; margin-top: 14px; padding: 12px; font: inherit; font-size: 0.85rem;
  background: none; border: none; color: var(--accent); cursor: pointer; text-align: center;
}
.rn-more:hover { text-decoration: underline; }

/* v218: Diary umbrella — 2×2 box grid + a Lists box (quote + date row come from renderToday) */
.diary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.diary-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 12px; min-height: 120px; box-shadow: var(--shadow); cursor: pointer; font: inherit;
  color: var(--ink); transition: border-color 120ms ease, transform 80ms ease;
}
.diary-box:active { transform: scale(0.98); }
.diary-box:hover { border-color: var(--accent); }
.diary-box:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.db-emoji { font-size: 1.9rem; }
.db-title { font-weight: 600; font-size: 1rem; }
.db-sub { font-size: 0.76rem; color: var(--ink-soft); line-height: 1.35; }
/* Diary "Lists" box — full-width, below the 2×2 grid */
.diary-lists-box {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; font: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
  box-shadow: var(--shadow); color: var(--ink); transition: border-color 120ms ease;
}
.diary-lists-box:hover { border-color: var(--accent); }
.diary-lists-box:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dlb-emoji { font-size: 1.5rem; flex-shrink: 0; }
.dlb-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dlb-title { font-weight: 600; font-size: 1rem; }
.dlb-sub { font-size: 0.78rem; color: var(--ink-soft); }
.dlb-chev { color: var(--ink-soft); font-size: 1.1rem; flex-shrink: 0; }
/* Date-row calendar picker — an invisible native date input overlaying the date text */
.today-date-center { position: relative; }
.today-date-pick { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; }

/* v217: Free writing — own titled-entry space (list + editor) */
.freewriting-body { padding: 18px 16px; }
.freewriting-new {
  display: block; width: 100%; margin-bottom: 16px; padding: 14px; font: inherit; font-size: 0.95rem;
  font-weight: 500; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px;
  color: var(--ink); cursor: pointer; transition: border-color 120ms ease;
}
.freewriting-new:hover { border-color: var(--accent); }
.freewriting-new:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.freewriting-list { display: flex; flex-direction: column; gap: 10px; }
.freewriting-card {
  display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; cursor: pointer; font: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; color: var(--ink);
  transition: border-color 120ms ease;
}
.freewriting-card:hover { border-color: var(--accent); }
.freewriting-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.fwc-title { font-weight: 600; font-size: 0.96rem; }
.fwc-snippet { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fwc-date { font-size: 0.72rem; color: var(--ink-soft); }
/* Free writing's titled-entry editor now renders from the SAME shared component as Dream Space
   (.ds-edit-view / .dream-canvas-* / .rt-editor) — its old bespoke .freewrite-entry-body / .fwe-*
   textarea chrome is gone. The warm ruled-paper feel lives on the shared .rt-editor rule below. */

/* ---- Rich-text editor (shared: Free writing + Dream Space) ---- */
.rt-btn {
  min-width: 36px; height: 36px; padding: 0 8px; border-radius: 8px;
  border: 1px solid transparent; background: none; color: var(--ink);
  font-size: 0.95rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.rt-btn:hover { background: var(--surface); border-color: var(--line); }
.rt-btn:active { transform: scale(0.94); }
.rt-editor {
  flex: 1; min-height: 50vh; outline: none; color: var(--ink);
  font-family: var(--write-font, 'Newsreader', Georgia, serif);
  font-size: var(--write-size, 1.05rem); line-height: 1.6; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  overflow-wrap: break-word;
}
.rt-editor:empty:before { content: attr(data-placeholder); color: var(--ink-soft); opacity: 0.45; white-space: pre-line; pointer-events: none; }
.rt-editor:focus { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.rt-editor ul, .rt-editor ol { margin: 6px 0; padding-left: 26px; }
.rt-editor li { margin: 2px 0; }
.rt-editor ol.rt-alpha { list-style-type: lower-alpha; }
.rt-editor ul.rt-todo { list-style: none; padding-left: 28px; }
.rt-editor ul.rt-todo > li { position: relative; }
.rt-editor ul.rt-todo > li:before {
  content: '☐'; position: absolute; left: -24px; top: 0; font-size: 1.05em; color: var(--ink-soft); cursor: pointer;
}
.rt-editor ul.rt-todo > li.done:before { content: '☑'; color: var(--accent); }
.rt-editor ul.rt-todo > li.done { color: var(--ink-soft); text-decoration: line-through; }
/* BOTH writing spaces share one warm cream ruled-paper treatment on the editor surface, so Free
   writing and Dream Space look identical (font comes from --write-font). One rule, no drift. */
.freewrite-entry-panel .rt-editor,
.dream-space-panel .rt-editor {
  background-color: color-mix(in srgb, #d9a441 5%, var(--surface));
  border-color: color-mix(in srgb, #9a7b4a 18%, var(--line));
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.04);
}
.dream-canvas-mount { display: flex; flex: 1; min-height: 0; }

/* ---- Writing-space settings popup ----
   The popup itself reuses the Reading Room's classes (.reading-hdr-cfg / .reading-cfg-* /
   .reading-face-*) so it is styled by ONE set of rules and stays identical. Only the things specific
   to living in a writing header are set here: push the ⚙ to the right edge of these headers. */
.freewrite-entry-panel .ds-hdr, .freewrite-entry-panel .ds-edit-hdr,
.dream-space-panel .ds-hdr, .dream-space-panel .ds-edit-hdr { position: relative; }
.writing-cfg-btn { margin-left: auto; }

/* ---- Floating formatting button (Aa → vertical bar), rises with the keyboard ---- */
.rt-fab {
  position: fixed; right: 14px; bottom: 14px; z-index: 1300;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: bottom 0.18s ease;
}
.rt-fab-items {
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transform: translateY(8px) scale(0.96); pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.rt-fab[data-open="true"] .rt-fab-items { opacity: 1; transform: none; pointer-events: auto; }
.rt-fab .rt-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface);
  box-shadow: 0 3px 10px rgba(0,0,0,0.16); color: var(--ink);
  font-size: 1rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.rt-fab .rt-btn:hover { background: var(--surface-2); border-color: var(--accent); }
.rt-fab .rt-btn:active { transform: scale(0.92); }
.rt-fab .rt-btn--size { font-size: 0.9rem; font-weight: 600; letter-spacing: -0.02em; }
.rt-fab-toggle {
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 1.1rem; font-weight: 700;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  display: inline-flex; align-items: center; justify-content: center;
}
.rt-fab[data-open="true"] .rt-fab-toggle { background: var(--ink); }
.rt-fab-toggle:active { transform: scale(0.94); }

/* v213: "Helping hands" reflective pages (reused panel shell) */
.freewrite-body { padding: 18px 16px; }
.freewrite-lead { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.5; margin: 0 0 16px; }
.freewrite-list { display: flex; flex-direction: column; gap: 10px; }
.freewrite-item {
  display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px; font: inherit; font-size: 0.96rem; color: var(--ink); cursor: pointer;
  min-height: 52px; transition: border-color 120ms ease, transform 80ms ease;
}
.freewrite-item:hover { border-color: var(--accent); }
.freewrite-item:active { transform: scale(0.99); }
.freewrite-item:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Two-line variant (#8): emoji + label + a self-explanatory sub-line. */
.freewrite-item--2line { display: flex; align-items: flex-start; gap: 12px; }
.freewrite-item--2line .fwi-emoji { font-size: 1.3rem; line-height: 1.2; flex-shrink: 0; }
.freewrite-item--2line .fwi-text { display: flex; flex-direction: column; gap: 3px; }
.freewrite-item--2line .fwi-label { font-weight: 600; }
.freewrite-item--2line .fwi-sub { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.4; }

/* v214: "How settled" optional word-row on a check-in (mood prompt + mood sheet) */
.settled-row { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; }
.settled-q { font-size: 0.82rem; color: var(--ink-soft); }
.settled-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.settled-chip {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  padding: 8px 12px; font: inherit; font-size: 0.8rem; color: var(--ink-soft); min-height: 44px;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}
.settled-chip[aria-pressed="true"] { background: var(--surface); border-color: var(--accent); color: var(--ink); box-shadow: 0 0 0 1.5px var(--accent) inset; }
.settled-chip:active { transform: scale(0.96); }
.settled-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* v215: falling-asleep (onset) chips on the sleep sheet */
.sleep-onset-label { margin-top: 14px; }
.sleep-onset-opt { font-weight: 400; color: var(--ink-soft); font-size: 0.8rem; }
.sleep-onset-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.sleep-onset-chip {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  padding: 11px 13px; font: inherit; font-size: 0.82rem; color: var(--ink-soft); min-height: 44px;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}
.sleep-onset-chip[aria-pressed="true"] { background: var(--surface); border-color: var(--accent); color: var(--ink); box-shadow: 0 0 0 1.5px var(--accent) inset; }
.sleep-onset-chip:active { transform: scale(0.96); }
.sleep-onset-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ========== Composite Write page ========== */

/* Energy-adaptive hint — one quiet sentence under the date */
.write-energy-hint {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0 0 18px;
  line-height: 1.5;
  min-height: 1.4em; /* stable layout before async moods arrive */
}

/* Quick line wrapper */
.cw-section[data-section="quick"] {
  margin-bottom: 20px;
}

/* "Add more, only if you want to" quiet label */
.cw-add-label {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0 0 10px;
  padding-left: 2px;
}

/* Affordance list container */
.cw-affordances {
  display: flex;
  flex-direction: column;
}

/* Individual add-affordance row — extends .tl-add-row */
.cw-add-row {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: 8px;
  min-height: 44px;
  /* override tl-add-row border shorthand */
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: background 120ms ease;
}
.cw-add-row:active { background: var(--surface-2); }
.cw-add-row:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Fixed section slots container */
.cw-slots {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cw-slot {
  /* Each slot occupies its canonical vertical position.
     Empty slots have zero height. */
}

/* Animated section wrapper — slide-down reveal */
.cw-section-anim {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 280ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms ease;
  margin-bottom: 0;
}
.cw-section-anim.open {
  max-height: 800px; /* generous cap — content is smaller */
  opacity: 1;
  margin-bottom: 16px;
}
@media (prefers-reduced-motion: reduce) {
  /* Remove transitions — section hides/shows instantly via max-height toggle */
  .cw-section-anim {
    transition: none;
  }
  .cw-section-anim.open {
    max-height: none !important;
    margin-bottom: 16px;
  }
}

/* Section header: label left, remove right */
.cw-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* Section label — overline recipe; padding: 0 overrides tl-group-label */
.cw-section-label {
  padding: 0;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Remove button — reuses .feeling-rater-skip style */
.cw-remove-btn {
  font-size: 0.75rem;
  min-height: 36px;
  padding: 4px 8px;
  /* inherits from .feeling-rater-skip: underline, ink-soft, no border */
}

/* Section body */
.cw-section-body {
  /* editors render into here */
}

/* ========== Sleep overlay (Phase 2 / Bundle B-1) ==========
   Full-screen overlay reusing .overlay shell + .bar + .back + trapDialog pattern.
   z-index 70 — same tier as day-detail / profile overlays.
   All tap targets >= 44px. Focus rings use --accent. Reduced-motion respected.
   Light + dark: all colors via vars; bar fill uses low-opacity --accent sage so
   it stays readable in both modes (dark override bumps opacity if needed).
   Mood faces reuse .feeling-face — emoji + word label, never color-only. */

/* Overlay shell — reuses .overlay base */
.sleep-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 70;
  overflow-y: auto;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* Top bar — reuses .bar pattern from day-detail */
.sleep-overlay .sleep-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 1;
  flex-shrink: 0;
}
.sleep-overlay .sleep-bar .back {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sleep-overlay .sleep-bar .back:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sleep-overlay .sleep-bar .back:active { transform: scale(0.93); }
.sleep-overlay .sleep-bar .sleep-bar-title {
  flex: 1;
  font-size: 1.0rem;
  font-weight: 600;
  text-align: center;
  color: var(--ink);
  user-select: none;
}

/* Scrollable body */
.sleep-overlay .sleep-body {
  flex: 1;
  padding: 20px 18px 48px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Section cards — reuse .surface-card Tier-1 */
.sleep-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.sleep-section .overline {
  margin: 0 0 14px;
  display: block;
}

/* Time fields row — two native <input type="time"> side by side */
.sleep-time-row {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}
.sleep-time-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sleep-time-label {
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-weight: 500;
}
/* Native time input styled to match .date-input */
.sleep-time-input {
  font: inherit;
  font-size: 0.97rem;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  min-height: var(--tap);
}
.sleep-time-input:focus-visible { outline: 2px solid var(--accent); }

/* Computed hours line + Adjust toggle */
.sleep-hours-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.sleep-hours-display {
  font-size: 0.97rem;
  color: var(--ink);
  font-weight: 500;
}
.sleep-hours-display.faint {
  color: var(--ink-soft);
  font-weight: 400;
}
.sleep-adjust-btn {
  background: none;
  border: none;
  font: inherit;
  font-size: 0.78rem;
  color: var(--accent-ink);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 4px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.sleep-adjust-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
/* Stepper for manual hour override */
.sleep-hours-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 4px;
}
.sleep-hours-stepper-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
}
.sleep-hours-stepper-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sleep-hours-stepper-btn:active { transform: scale(0.93); }
.sleep-hours-stepper-val {
  font-size: 1.05rem;
  font-weight: 600;
  min-width: 42px;
  text-align: center;
}
.sleep-hours-edit-hint {
  font-size: 0.72rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-left: 4px;
}

/* "How rested?" quality question label */
.sleep-quality-label {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0 0 10px;
}

/* Quality faces row — reuses .mood-row / .feeling-face pattern */
.sleep-quality-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 18px;
}

/* Save button — full width .btn, disabled until a field has a value */
.sleep-save-btn {
  width: 100%;
  margin-top: 4px;
}

/* Sleep target chip row */
.sleep-target-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.sleep-target-chips .chip {
  font-size: 0.85rem;
  padding: 7px 13px;
  min-height: var(--tap);
}
.sleep-target-note {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: 8px 0 0;
}

/* Recent nights list */
.sleep-nights-list {
  display: flex;
  flex-direction: column;
}
/* Each recent night row — extends .row contract */
.sleep-night-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.sleep-night-row:first-child { border-top: none; }
/* Date label */
.sleep-night-date {
  font-size: 0.85rem;
  color: var(--ink-soft);
  flex-shrink: 0;
  min-width: 56px;
}
/* Soft bar track + fill */
.sleep-bar-track {
  flex: 1;
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  position: relative;
  overflow: visible;
  min-width: 0;
}
.sleep-bar-fill {
  height: 100%;
  border-radius: 3px;
  /* Low-opacity sage fill — decorative only; meaning is in the text + aria-label */
  background: rgba(74, 103, 65, 0.34); /* --accent at ~34% opacity */
  transition: width 280ms ease;
  position: relative;
}
/* Dark mode: bump fill opacity so the bar remains visible on the dark surface */
html[data-theme="dark"] .sleep-bar-fill {
  background: rgba(109, 155, 100, 0.38); /* dark --accent at ~38% */
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .sleep-bar-fill {
    background: rgba(109, 155, 100, 0.38);
  }
}
/* Target tick — tiny vertical mark at the target hour position */
.sleep-bar-target {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 12px;
  background: var(--accent);
  border-radius: 1px;
  opacity: 0.55;
}
/* Hours + quality reading at the right end */
.sleep-night-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.sleep-night-hours {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.sleep-night-quality {
  font-size: 1rem;
  line-height: 1;
}
/* Empty state for recent nights */
.sleep-nights-empty {
  font-size: 0.88rem;
  color: var(--ink-soft);
  font-style: italic;
  padding: 6px 0;
}

/* Insight card in sleep overlay — reuses .insight-card shell */
.sleep-insight-card {
  margin-bottom: 0;
}
.sleep-insight-main {
  font-size: 0.97rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 6px;
}
.sleep-insight-sub {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.sleep-insight-affirm {
  font-size: 0.88rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: 6px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .sleep-bar-fill { transition: none; }
}

/* ========== Insights: Recap + Habits Axis cards (Phase 3 / Bundle B-2) ==========
   All colors via tokens — light + dark handled automatically.
   No red, no error styling on nudge items; AA contrast verified for both themes.
   All interactive elements >= 44px tap target. Focus rings use --accent. */

/* Recap card: warm intro line + per-line recap paragraphs */
.recap-intro {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0 0 10px;
  line-height: 1.5;
}
.recap-line {
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 8px;
}
.recap-line:last-of-type {
  margin-bottom: 10px;
}

/* Journal quote — serif italic, indented slightly, not a blockquote */
.recap-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.97rem;
  color: var(--ink);
  line-height: 1.6;
  margin: 10px 0 4px;
  padding-left: 14px;
  border-left: 2px solid var(--line);
}

/* Group overline head inside habit axis card — reuses .overline base */
.kb-group-head {
  /* .overline provides font-size, weight, letter-spacing, text-transform, color */
  margin: 14px 0 8px;
  display: block;
}
.kb-group-head:first-of-type {
  margin-top: 4px;
}

/* Item row — flex with top-border separators (mirrors .row contract) */
.kb-group {
  display: flex;
  flex-direction: column;
}
.kb-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.kb-item--first {
  border-top: none;
}

/* Leading emoji or neutral dot */
.kb-item-emoji {
  font-size: 1.1rem;
  line-height: 1.4;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  /* neutral dot (.kb-nudge items) uses a middle dot character, same size */
  color: var(--ink-soft);
}

/* Item text block — wraps naturally, 0.92rem, 1.5 line-height */
.kb-item-text {
  flex: 1;
  min-width: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
}

/* Nudge copy — ink-soft, never red, no warning styling */
.kb-nudge {
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* "Not for me" / "Unmute" quiet button — underlined text, >= 44px tap area */
.kb-mute-link {
  background: none;
  border: none;
  font: inherit;
  font-size: 0.78rem;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 10px 4px;
  min-height: 44px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}
.kb-mute-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.kb-mute-link:hover {
  color: var(--ink);
}

/* Muted-items expander — reuses .tl-someday-toggle; just needs a top margin */
.kb-muted-toggle {
  margin-top: 6px;
  font-size: 0.72rem;
}

/* Muted group items — same .kb-item layout, softer appearance */
.kb-muted-group {
  padding-bottom: 4px;
}
.kb-muted-group .kb-item-text {
  color: var(--ink-soft);
}

/* ---- Session headers in Today list ---- */
.tl-session-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 0 4px;
  margin: 0;
}
.tl-session-header:first-child { padding-top: 4px; }
.tl-session-emoji { font-size: 1rem; line-height: 1; }
.tl-session-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tl-session-header--anytime .tl-session-label { color: var(--ink-soft); opacity: 0.7; }

/* Multi-session progress badge "(1/3)" inline with title — canonical rule below */

/* "Show all sessions" link below the list */
.tl-show-all-sessions {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.85rem;
  font-family: var(--sans);
  cursor: pointer;
  padding: 10px 0;
  min-height: var(--tap);
  display: block;
  text-align: center;
  width: 100%;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tl-show-all-sessions:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* Count-based kind-check: shows "2/3" text inside the box instead of tick */
.kind-check--count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.kind-check--count::before {
  border-radius: var(--radius-sm);
}
/* No tick ::after for count buttons — content is text */
.kind-check--count::after { display: none; }
.kind-count-val {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-soft);
  pointer-events: none;
}
.kind-check--count.kind-check--full::before {
  background: var(--accent);
  border-color: var(--accent);
}
.kind-check--count.kind-check--full .kind-count-val { color: #fff; }

/* Reduce habits — amber circle counter (tap = logged one more occurrence) */
.kind-check--reduce::before {
  border-radius: 50%;
  border-color: rgba(176, 100, 16, 0.45);
  background: var(--amber-bg);
}
.kind-check--reduce .kind-count-val { color: var(--amber); }

/* Achievement badge next to title for reduce habits */
.tl-reduce-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 99px;
  vertical-align: middle;
  white-space: nowrap;
}
.tl-reduce-badge--win  { background: rgba(74, 103, 65, 0.13); color: var(--accent); }
.tl-reduce-badge--eq   { background: rgba(205, 187, 149, 0.22); color: var(--ink-soft); }
.tl-reduce-badge--over { background: var(--amber-bg); color: var(--amber); }

/* Add-sheet stepper for count/target */
.add-sheet-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
}
.stepper-btn {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  min-width: var(--tap);
  min-height: var(--tap);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stepper-btn:hover { background: var(--line); }
.stepper-val {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  min-width: 24px;
  text-align: center;
}
/* Typeable number stepper — − [input] + ; type a big value directly or step by one */
.num-stepper-field { display: inline-flex; align-items: baseline; gap: 4px; }
.num-stepper-input {
  width: 64px; text-align: center; font-size: 1.05rem; font-weight: 600; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 6px;
  outline: none; -moz-appearance: textfield; min-height: var(--tap); box-sizing: border-box;
}
.num-stepper-input::-webkit-outer-spin-button, .num-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num-stepper-input:focus { border-color: var(--accent); }
.num-stepper-suffix { font-size: 0.8rem; color: var(--ink-soft); }
.repeat-everyn-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Tappable mini-calendar — multi-date select for "Pick dates" (one task per day). Thumb-friendly.
   (Replaced the old .multidate-* date-input + "Add date" chip approach in this pass.) */
.cal-ms { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 10px 12px; }
.cal-ms-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-ms-title { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.cal-ms-nav {
  width: var(--tap); height: var(--tap); min-width: var(--tap); flex-shrink: 0;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  border-radius: 12px; font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cal-ms-nav:hover:not(:disabled) { background: var(--line); }
.cal-ms-nav:disabled { opacity: 0.35; cursor: default; }
.cal-ms-nav:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cal-ms-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.cal-ms-dow-lbl { text-align: center; font-size: 0.7rem; color: var(--ink-soft); padding: 2px 0; }
.cal-ms-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-ms-cell {
  aspect-ratio: 1 / 1; min-height: 40px;
  border: 1px solid transparent; background: none; color: var(--ink);
  border-radius: 10px; font: inherit; font-size: 0.9rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cal-ms-cell:hover:not(:disabled):not(.cal-ms-sel) { background: var(--surface-2); }
.cal-ms-cell:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.cal-ms-blank { cursor: default; }
.cal-ms-cell:disabled { color: var(--ink-soft); opacity: 0.4; cursor: default; }
.cal-ms-today { border-color: var(--line); font-weight: 600; }
.cal-ms-sel {
  background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600;
}
.cal-ms-sel:hover { background: var(--accent); }

/* Reminders list (one per times-per-day) */
.reminders-list { display: flex; flex-direction: column; gap: 8px; }
.reminder-row { display: flex; align-items: center; gap: 8px; }
.reminder-time { flex: 1; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font: inherit; color: var(--ink); outline: none; min-height: var(--tap); }
.reminder-time:focus { border-color: var(--accent); }
.reminder-del { flex-shrink: 0; width: var(--tap); height: var(--tap); border: none; background: none; color: var(--ink-soft); font-size: 1rem; cursor: pointer; border-radius: 8px; }
.reminder-del:hover { color: #c05050; background: rgba(192,80,80,0.08); }
.reminder-add-btn { margin-top: 8px; align-self: flex-start; background: none; border: 1px dashed var(--line); border-radius: 10px; padding: 8px 14px; font: inherit; font-size: 0.85rem; color: var(--accent); cursor: pointer; min-height: var(--tap); }
.reminder-add-btn:hover { background: var(--surface-2); }

/* Sub-steps editor (add/edit sheet) — one text input per step + remove ✕, then "add a step". */
.add-subtasks-list { display: flex; flex-direction: column; gap: 8px; }
.add-subtask-row { display: flex; align-items: center; gap: 8px; }
.add-subtask-dot { flex-shrink: 0; color: var(--ink-soft); font-size: 1.1rem; line-height: 1; width: 10px; text-align: center; }
.add-subtask-input { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 0.9rem; color: var(--ink); outline: none; min-height: var(--tap); }
.add-subtask-input:focus { border-color: var(--accent); }
.add-subtask-del { flex-shrink: 0; width: var(--tap); height: var(--tap); border: none; background: none; color: var(--ink-soft); font-size: 1rem; cursor: pointer; border-radius: 8px; }
.add-subtask-del:hover { color: #c05050; background: rgba(192,80,80,0.08); }
.add-subtask-btn { margin-top: 8px; align-self: flex-start; background: none; border: 1px dashed var(--line); border-radius: 10px; padding: 8px 14px; font: inherit; font-size: 0.85rem; color: var(--accent); cursor: pointer; min-height: var(--tap); }
.add-subtask-btn:hover { background: var(--surface-2); }
.add-sheet-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.7;
  font-size: 0.68rem;
}

/* ---- Sleep schedule consistency section ---- */
.sleep-cons-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.sleep-cons-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: var(--tap);
}
.cons-name {
  font-size: 0.88rem;
  color: var(--ink-soft);
  width: 76px;
  flex-shrink: 0;
}
.cons-time {
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--ink);
  min-width: 72px;
}
.cons-spread {
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.cons-badge {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.cons-badge.cons-great {
  background: rgba(74, 103, 65, 0.12);
  color: var(--accent);
}
.cons-badge.cons-ok {
  background: rgba(205, 187, 149, 0.22);
  color: var(--ink);
}
.cons-badge.cons-variable {
  background: transparent;
  color: var(--ink-soft);
  padding-left: 0;
}
.cons-note {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 6px 0 0;
}

/* Dark-mode: no token overrides needed — everything inherits from vars */

/* ===== DATE NAVIGATION (sticky sub-header, merges visually with topbar) ===== */
.today-date-strip {
  position: sticky;
  top: var(--topbar-h); /* topbar height */
  z-index: 28;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  margin: -22px -18px 0;
  padding: 6px 18px;
}
.today-date-center {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.date-nav-btn {
  background: none;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
}
.date-nav-btn:hover { background: var(--surface-2); }
.date-nav-btn--dim { opacity: 0.3; pointer-events: none; }
.today-date-text { font-size: 0.95rem; font-weight: 600; color: var(--ink); letter-spacing: 0.02em; }
.today-greeting-fade { font-size: 0.85rem; color: var(--ink-soft); transition: opacity 0.6s ease; opacity: 1; }
.today-greeting-fade.faded { opacity: 0; }

/* ===== MOOD SECTION (top of today, centered) ===== */
.mood-strip { display: flex; flex-direction: column; align-items: center; padding: 16px 0 10px; margin: 0; }
.mood-strip-faces { display: flex; gap: 8px; justify-content: center; }
.mood-face-mini {
  font-size: 1.6rem;
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 10px;
  line-height: 1;
  transition: transform 0.1s, background 0.1s, border-color 0.1s;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.mood-face-mini:hover,
.mood-face-mini:focus-visible {
  background: var(--surface-2);
  border-color: var(--line);
  transform: scale(1.1);
}
.mood-face-mini:active { transform: scale(0.92); }
.mood-face-mini:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mood-face-mini--active {
  background: var(--surface-2);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent) inset;
}
.mood-moment-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-2);
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-family: var(--serif);
  font-style: italic;
  padding: 10px 14px;
  font-size: 0.93rem;
  color: var(--ink);
  margin-top: 12px;
  outline: none;
}
.mood-moment-input:focus { border-color: var(--line); }
.mood-moment-input::placeholder { color: var(--ink-soft); }

/* ===== SESSION FILTER STRIP ===== */
.session-filter-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 14px 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.session-filter-strip::-webkit-scrollbar { display: none; }
.session-filter-btn {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 10px 14px;
  min-height: var(--tap);
  border-radius: 20px;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.session-filter-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ===== FLOATING ADD BUTTON (FAB) — sits above tab bar, stays within maxw column ===== */
.today-fab {
  position: fixed;
  bottom: calc(var(--tabbar-h, 64px) + 8px);
  right: max(14px, calc((100vw - var(--maxw)) / 2 + 14px));
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 300;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 80;
  transition: transform 0.15s, box-shadow 0.15s;
}
.today-fab:active { transform: scale(0.92); box-shadow: 0 2px 8px rgba(0,0,0,0.18); }

/* ===== TASK ROW HIGHLIGHT ===== */
/* Tasks and habits now read identically — no green left bar, no tint. A wellness checklist
   should feel like one calm, even list, not two visually-competing kinds of row. */
.tl-row--task:not(.done) .tl-title { font-weight: 500; }

/* ===== SKIP HABIT ===== */
.tl-row--skipped { opacity: 0.55; }
.habit-skip-link { color: var(--ink-soft) !important; font-size: 0.82rem !important; }
.hd-cal-dot--skip { background: rgba(120,100,80,0.2); border: 1px dashed var(--line); }

/* ===== HABIT DETAIL: DELETE BUTTON ===== */
.hd-edit-wrap { padding: 16px 0 0; margin-top: 14px; border-top: 1px solid var(--line); text-align: center; }
.hd-edit-btn { background: var(--surface-2); border: 1px solid var(--line); color: var(--accent); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; padding: 10px 20px; border-radius: 999px; min-height: 44px; }
.hd-edit-btn:active { background: var(--accent); color: #fff; }
.hd-delete-wrap { padding: 12px 0 4px; margin-top: 6px; text-align: center; }
.hd-delete-btn {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
  min-height: 44px;
}
.hd-delete-btn:hover { background: var(--danger-bg); }
/* Visible "Skip today" in habit detail */
.hd-skip-row { margin: 14px 0 0; }
.hd-skip-btn { width: 100%; padding: 11px 14px; border-radius: 11px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); font-family: inherit; font-size: 0.88rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.hd-skip-btn:hover { border-color: var(--accent); }
.hd-skip-btn--on { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); border-color: var(--accent); color: var(--accent); }
/* Edit-item sheet */
.tl-row-body--tappable { cursor: pointer; }
.edit-sheet-actions { display: flex; gap: 10px; margin-top: 18px; }
.edit-action-save { flex: 1; padding: 12px; border-radius: 11px; border: none; background: var(--accent); color: #fff; font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.edit-action-save:hover { opacity: 0.92; }
.edit-action-delete { padding: 12px 18px; border-radius: 11px; border: 1.5px solid var(--danger); background: transparent; color: var(--danger); font-family: inherit; font-size: 0.9rem; cursor: pointer; }
.edit-action-delete:hover { background: var(--danger-bg); }
/* "All tasks & upcoming" footer link in the today list */
.tl-all-tasks-link { display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 6px; padding: 13px 14px; border: none; border-top: 1px solid var(--line); background: transparent; color: var(--accent); font-family: inherit; font-size: 0.86rem; font-weight: 500; cursor: pointer; }
.tl-all-tasks-link svg { stroke: var(--accent); }
.tl-all-tasks-link span:first-of-type { flex: 1; text-align: left; }
.tl-all-chev { font-size: 1.1rem; opacity: 0.7; }
.tl-all-tasks-link:hover { background: var(--surface-2); }

/* ===== PAST-DAY RECAP (read-only retrospective) ===== */
.past-recap { padding: 6px 0 10px; }
.recap-sleep { font-size: 0.86rem; color: var(--ink); padding: 12px 16px; border-bottom: 1px solid var(--line); }
.recap-hdr { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); padding: 14px 16px 6px; }
.recap-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.recap-name { flex: 1; font-size: 0.92rem; color: var(--ink); }
.recap-row--done .recap-name { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--line); }
.recap-skip-tag { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); background: var(--surface-2); padding: 2px 7px; border-radius: 999px; }
.recap-actions { display: flex; align-items: center; gap: 6px; }
.recap-skip { font-family: inherit; font-size: 0.76rem; padding: 5px 11px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; }
.recap-skip:hover { border-color: var(--accent); }
.recap-del { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: none; background: none; color: var(--ink-soft); cursor: pointer; }
.recap-del:hover { color: var(--danger); background: var(--danger-bg); }
.recap-empty { text-align: center; font-size: 0.88rem; color: var(--ink-soft); padding: 40px 20px; }

/* ===== TIME-OF-DAY SECTION HEADERS ===== */
.tl-session-hdr { display: flex; align-items: center; gap: 8px; padding: 14px 16px 7px; }
.tl-session-hdr .tl-session-icon { font-size: 0.95rem; line-height: 1; }
.tl-session-name { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.tl-session-now { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); padding: 2px 7px; border-radius: 999px; margin-left: 2px; }
.tl-session-hdr--anytime .tl-session-name { color: var(--ink-soft); }
.tl-session-hdr--neg { opacity: 0.7; }
.tl-session-hdr--neg .tl-session-name { color: var(--ink-soft); }
/* First row right under a header shouldn't double the top padding. */
.tl-session-hdr + * .tl-row { margin-top: 0; }

/* ===== TASK REORDER BUTTONS ===== */
.tl-reorder-btns {
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0.55;          /* clearly visible on touch (no hover there) */
  transition: opacity 0.15s;
  margin-left: 2px;
}
.tl-row:hover .tl-reorder-btns,
.tl-row:focus-within .tl-reorder-btns { opacity: 0.9; }
.tl-reorder-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 0.7rem;
  padding: 3px 5px;
  line-height: 1;
  min-height: 24px;
}
.tl-reorder-btn:hover { color: var(--ink); }

/* ===== REFLECT CHIPS (single row, horizontally scrollable) ===== */
.reflect-chips { display: flex; flex-wrap: nowrap; gap: 7px; margin-bottom: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.reflect-chips::-webkit-scrollbar { display: none; }
.reflect-chip { font-size: 0.82rem; padding: 6px 12px; border-radius: 20px; background: var(--surface-2); color: var(--ink); border: 1.5px solid transparent; white-space: nowrap; flex-shrink: 0; }
.reflect-chip.reflect-chip--on,
.reflect-chip[aria-pressed="true"] { background: transparent; color: var(--accent); border-color: var(--accent); font-weight: 600; }
.reflect-chip--more { font-weight: 700; color: var(--accent); border-color: var(--line); }
/* Reflect-on-today (#11): a calm horizontal scroller PINNED just above the bottom nav. */
.reflect-today-bar {
  position: fixed; left: 0; right: 0; max-width: var(--maxw); margin: 0 auto;
  bottom: var(--tabbar-h, 62px); z-index: 45;
  background: var(--bg); border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px; padding: 7px 12px 8px;
}
.reflect-today-bar .reflect-today-label { font-size: 0.72rem; color: var(--ink-soft); margin: 0 0 0 2px; }
.reflect-today-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-right: 56px; }
.reflect-today-chips::-webkit-scrollbar { display: none; }
/* Inline "how did it feel?" picker — appears under the chips the moment a reflection is tapped on. */
.reflect-today-feel { display: flex; align-items: center; gap: 6px; padding: 2px 2px 0; overflow-x: auto; scrollbar-width: none; }
.reflect-today-feel::-webkit-scrollbar { display: none; }
.reflect-feel-label { font-size: 0.72rem; color: var(--ink-soft); flex-shrink: 0; }
.reflect-feel-btn { flex-shrink: 0; border: none; background: none; cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 3px 4px; border-radius: 8px; opacity: 0.6; transition: opacity 0.12s ease, transform 0.12s ease; }
.reflect-feel-btn[aria-pressed="true"] { opacity: 1; transform: scale(1.12); background: var(--surface-2); }
.reflect-feel-btn:active { transform: scale(0.92); }
.reflect-feel--wrap { flex-wrap: wrap; overflow: visible; }
/* Un-log a mis-tapped thing (removes today's entry, keeps the thing). */
.reflect-feel-remove { flex-shrink: 0; margin-left: auto; border: none; background: none; color: var(--ink-soft); font-size: 0.8rem; cursor: pointer; opacity: 0.7; padding: 4px 8px; }
.reflect-feel-remove:active { transform: scale(0.92); }
/* Chip now reads `Name [face]` — the face sits to the RIGHT of the name once it's rated. */
.reflect-chip { display: inline-flex; align-items: center; gap: 6px; }
.reflect-chip-emo { font-size: 1.02rem; line-height: 1; }
.reflect-chip--rated { background: transparent; color: var(--accent); border-color: var(--accent); font-weight: 600; }
.reflect-chip--add { color: var(--accent); border-color: var(--line); border-style: dashed; font-weight: 600; }
/* Bar header: label + the small "?" research note. */
.reflect-today-top { display: flex; align-items: center; gap: 6px; }
.reflect-why-btn { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font-size: 0.74rem; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; }
.reflect-why-btn:active { transform: scale(0.9); }
/* Bar: chips scroller + the › that opens the full page. */
.reflect-today-row { display: flex; align-items: center; gap: 6px; }
.reflect-today-row .reflect-today-chips { flex: 1; min-width: 0; padding-right: 4px; }
.reflect-open-page { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.reflect-open-page:active { transform: scale(0.94); }
.reflect-open-page svg { display: block; }

/* ---- Full Reflect page (opened from the bar ›) ---- */
/* Reflect list is now a BOTTOM SHEET (reuses .sheet) — header (title + "?"), wrapped chips, archived. */
.reflect-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.reflect-sheet-head h3 { margin: 0; }
.reflect-sheet-head .reflect-why-btn { width: 30px; height: 30px; font-size: 0.95rem; }
.reflect-page-cap { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; margin: 0 0 16px; }
.reflect-page-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.reflect-page-chips .reflect-chip { padding: 9px 14px; font-size: 0.9rem; }
.reflect-show-archived { margin-top: 22px; width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--ink-soft); font: inherit; font-size: 0.85rem; cursor: pointer; }

/* "How did it feel?" callout — a small popover anchored to the tapped chip (a speech-bubble), with a
   pointer that flips depending on whether it sits above (default) or below the chip. */
.feel-pop { position: fixed; z-index: 1700; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 7px 9px; box-shadow: 0 10px 34px rgba(0,0,0,0.32); opacity: 0; transform: translateY(4px); transition: opacity 0.14s ease, transform 0.14s ease; }
.feel-pop.is-open { opacity: 1; transform: translateY(0); }
.feel-pop-inner { display: flex; align-items: center; gap: 2px; }
.feel-pop-face { width: 40px; height: 42px; border: none; background: none; cursor: pointer; font-size: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center; border-radius: 11px; opacity: 0.55; transition: opacity 0.12s ease, transform 0.12s ease, background 0.12s ease; }
.feel-pop-face:active { transform: scale(0.9); }
.feel-pop-face.sel { opacity: 1; background: var(--surface-2); transform: scale(1.08); }
.feel-pop-arrow { position: absolute; width: 12px; height: 12px; background: var(--surface); border: 1px solid var(--line); transform: rotate(45deg); bottom: -7px; border-top: none; border-left: none; }
.feel-pop--below .feel-pop-arrow { bottom: auto; top: -7px; border: 1px solid var(--line); border-bottom: none; border-right: none; }

/* ---- Small text prompt (rename / add a thing) ---- */
.txtprompt-overlay { position: fixed; inset: 0; z-index: 1650; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(13,22,32,0.5); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.25s ease; }
.txtprompt-overlay.is-open { opacity: 1; }
.txtprompt-card { width: 100%; max-width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; box-shadow: 0 18px 50px rgba(0,0,0,0.3); transform: translateY(10px); transition: transform 0.25s ease; }
.txtprompt-overlay.is-open .txtprompt-card { transform: translateY(0); }
.txtprompt-title { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); margin: 0 0 12px; }
.txtprompt-input { width: 100%; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; font: inherit; font-size: 0.95rem; color: var(--ink); outline: none; }
.txtprompt-input:focus { border-color: var(--accent); }
.txtprompt-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.txtprompt-actions button { border: none; background: none; font: inherit; font-size: 0.9rem; cursor: pointer; padding: 9px 14px; border-radius: 11px; }
.txtprompt-cancel { color: var(--ink-soft); }
.txtprompt-ok { background: var(--accent); color: #fff; }

/* Importance heart — the LEFT marker on a reflect chip (sage; sized/filled by level via the SVG). */
.imp-heart { display: inline-flex; align-items: center; color: var(--accent); flex-shrink: 0; }
.imp-heart svg { display: block; }
/* Importance picker rows inside the add/edit dialog. */
.imp-pick-label { font-size: 0.82rem; color: var(--ink-soft); margin: 4px 0 8px; }
.imp-pick-label span { color: var(--ink-soft); opacity: 0.7; }
.imp-pick { display: flex; flex-direction: column; gap: 8px; }
.imp-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-size: 0.9rem; cursor: pointer; }
.imp-opt-heart { display: inline-flex; align-items: center; justify-content: center; width: 22px; color: var(--accent); }
.imp-opt.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-ink); }

/* ---- "Why these reflections?" note ---- */
.reflect-why-overlay { position: fixed; inset: 0; z-index: 1650; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(13,22,32,0.5); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.25s ease; }
.reflect-why-overlay.is-open { opacity: 1; }
.reflect-why-card { width: 100%; max-width: 340px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: 0 18px 50px rgba(0,0,0,0.3); transform: translateY(10px); transition: transform 0.25s ease; }
.reflect-why-overlay.is-open .reflect-why-card { transform: translateY(0); }
.reflect-why-h { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); margin: 0 0 10px; }
.reflect-why-p { font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 12px; }
.reflect-why-more { width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--accent); font: inherit; font-size: 0.88rem; cursor: pointer; margin-bottom: 10px; }
.reflect-why-ok { width: 100%; padding: 12px; border: none; border-radius: 13px; background: var(--accent); color: #fff; font: inherit; font-size: 0.92rem; cursor: pointer; }
/* At night the wind-down bar fills bottom:0 and pushes the tab bar up by --nightbar-h; lift the reflect
   bar above BOTH so it doesn't sit under the wind-down bar. The two then stack: reflect → tabs → wind-down. */
body:has(#night-winddown-bar) .reflect-today-bar { bottom: calc(var(--tabbar-h, 62px) + var(--nightbar-h, 64px)); }
/* Lift the + FAB so it clears the pinned reflect bar instead of overlapping it. */
body.has-reflect-bar .dock-add-row { top: calc(-1 * (var(--tabbar-h, 62px) + env(safe-area-inset-bottom, 0px) + 52px + 90px)); }
/* …and clear the wind-down bar too when both are present at night. */
body.has-reflect-bar:has(#night-winddown-bar) .dock-add-row { top: calc(-1 * (var(--tabbar-h, 62px) + var(--nightbar-h, 64px) + env(safe-area-inset-bottom, 0px) + 52px + 90px)); }
.reflect-journal-line { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.reflect-journal-input { flex: 1; background: var(--surface-2); border-radius: 10px; font-family: var(--serif); font-style: italic; padding: 10px 12px; font-size: 0.93rem; border: 1.5px solid transparent; outline: none; color: var(--ink); }
.reflect-journal-input:focus { border-color: var(--line); }
.reflect-journal-open { background: none; border: none; color: var(--ink-soft); cursor: pointer; padding: 8px; border-radius: 8px; }

/* ===== REFLECT DOCK (fixed above tab bar) ===== */
#reflect-dock {
  position: fixed;
  bottom: calc(var(--tabbar-h, 64px));
  left: 0; right: 0;
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--surface-2);
  border-top: 2px solid var(--accent);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
  padding: 10px 16px 8px;
  z-index: 38;
  overflow: hidden;
}
/* Gradient fade on right edge to indicate scrollable chips */
#reflect-dock::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, var(--surface-2));
  pointer-events: none;
}
.reflect-dock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.reflect-dock-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.reflect-dock-add-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.1s, opacity 0.1s;
}
.reflect-dock-add-btn:hover {
  opacity: 0.88;
  transform: scale(1.1);
}
.reflect-dock-add-btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ===== ACTION SHEET (long-press context menu) ===== */
.action-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  /* High enough to sit ABOVE the panels it can be invoked from (dream space=500, breathe=1200,
     bedtime=1300) — otherwise it renders behind an opaque panel and looks like it did nothing. */
  z-index: 1600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
}
.action-sheet {
  background: var(--surface);
  border-radius: 14px;
  width: 100%;
  max-width: var(--maxw);
  overflow: hidden;
  margin-bottom: 8px;
}
.action-sheet-title {
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-align: center;
  padding: 12px 16px 10px;
  margin: 0;
  border-bottom: 1px solid var(--line);
}
.action-sheet-btn {
  display: block;
  width: 100%;
  padding: 15px 16px;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
}
.action-sheet-btn:last-child { border-bottom: none; }
.action-sheet-btn:active { background: var(--surface-2); }
.action-sheet-btn--destructive { color: var(--danger); font-weight: 600; background: var(--danger-bg); }
.action-sheet-btn--destructive:active { background: var(--danger-bg); }
.action-sheet-btn--cancel { color: var(--accent); font-weight: 600; }

/* ===== MORNING SLEEP STRIP ===== */
.sleep-morning-strip { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; min-height: var(--tap); margin-bottom: 10px; cursor: pointer; text-align: left; }
.sleep-ms-icon { color: var(--accent); flex-shrink: 0; display: flex; }
.sleep-ms-chev { color: var(--ink-soft); display: flex; }
.sleep-ms-text { flex: 1; font-size: 0.9rem; color: var(--ink); }

/* ===== MULTI-SESSION TASKS: sessions shown as mini pills ===== */
.tl-session-progress { font-size: 0.75rem; color: var(--ink-soft); margin-left: 4px; }

/* ===== Weekly Report ===== */
.wr-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.wr-stat-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 12px; }
.wr-stat-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 4px; }
.wr-stat-value { font-size: 1.4rem; font-weight: 600; color: var(--ink); }
.wr-stat-value--word { font-size: 1.05rem; } /* a word ("Good 😊") needs less size than a number */
.wr-stat-delta { font-size: 0.8rem; color: var(--ink-soft); margin-top: 2px; }
.wr-insight { background: rgba(74,103,65,0.08); border-left: 3px solid var(--accent); border-radius: 4px var(--radius-sm) var(--radius-sm) 4px; padding: 10px 14px; font-size: 0.9rem; color: var(--ink); margin-bottom: 16px; }
.wr-habits-title { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin: 0 0 10px; }
.wr-habit-row { display: flex; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); gap: 10px; }
.wr-habit-name { flex: 1; font-size: 0.9rem; color: var(--ink); }
.wr-habit-streak { font-size: 0.8rem; color: var(--accent); font-weight: 600; }
.wr-habit-pct { font-size: 0.8rem; color: var(--ink-soft); min-width: 36px; text-align: right; }

/* ===== Plan Tomorrow card ===== */
.plan-tmr-card { background: var(--surface-2); border-radius: var(--radius-sm); padding: 14px 16px; margin: 12px 0; display: flex; align-items: center; gap: 12px; }
.plan-tmr-icon { font-size: 1.2rem; }
.plan-tmr-body { flex: 1; }
.plan-tmr-title { font-size: 0.9rem; font-weight: 600; color: var(--ink); margin: 0 0 2px; }
.plan-tmr-sub { font-size: 0.8rem; color: var(--ink-soft); margin: 0; }
.plan-tmr-btn { background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); padding: 8px 14px; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap; min-height: 36px; }
.plan-tmr-dismiss { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 1rem; padding: 4px; min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; }

/* ===== 52-week wellness heatmap (Year at a glance) ===== */

/* Heatmap color tokens — inline rgba replaced with CSS vars for dark-mode support */
:root {
  --heat-low:   rgba(192,80,80,0.35);
  --heat-mid:   rgba(180,140,60,0.35);
  --heat-good:  rgba(74,103,65,0.30);
  --heat-great: rgba(74,103,65,0.65);
}
html[data-theme="dark"] {
  --heat-low:   rgba(220,100,100,0.55);
  --heat-mid:   rgba(200,160,60,0.50);
  --heat-good:  rgba(109,155,100,0.40);
  --heat-great: rgba(109,155,100,0.75);
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --heat-low:   rgba(220,100,100,0.55);
    --heat-mid:   rgba(200,160,60,0.50);
    --heat-good:  rgba(109,155,100,0.40);
    --heat-great: rgba(109,155,100,0.75);
  }
}

.wr-heatmap-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.wr-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(52, 11px);
  gap: 3px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.wr-heatmap-cell {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--surface-2);
  flex-shrink: 0;
}
.wr-heatmap-cell.heat-low   { background: var(--heat-low); }
.wr-heatmap-cell.heat-mid   { background: var(--heat-mid); }
.wr-heatmap-cell.heat-good  { background: var(--heat-good); }
.wr-heatmap-cell.heat-great { background: var(--heat-great); }

/* ===== Streak chips row (Today view) ===== */
.streak-chips-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.streak-chips-row::-webkit-scrollbar { display: none; }
.streak-chip-today {
  background: rgba(74,103,65,0.1);
  color: var(--accent);
  border: 1px solid rgba(74,103,65,0.2);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.8rem;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  min-height: 32px;
  font: inherit;
  font-size: 0.8rem;
}
.streak-chip-today:hover { background: rgba(74,103,65,0.18); }
.streak-chip-today:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 20px; }

/* ===== Mood affirmation line ===== */
.mood-affirmation {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: center;
  margin: 8px 0 4px;
  opacity: 0.85;
}

/* ===== Today list empty state ===== */
.tl-empty-state { text-align: center; padding: 32px 16px; }
.tl-empty-icon { font-size: 2rem; margin: 0 0 8px; }
.tl-empty-msg { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.tl-empty-sub { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }

/* ===== Priority toggle ===== */
.priority-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); margin-top: 8px; }
.priority-label { flex: 1; font-size: 0.9rem; color: var(--ink); cursor: pointer; }
.priority-toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.priority-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.priority-toggle-track { position: absolute; inset: 0; background: var(--line); border-radius: 11px; cursor: pointer; transition: background 0.2s; }
.priority-toggle input:checked + .priority-toggle-track { background: var(--accent); }
.priority-toggle-track::after { content: ''; position: absolute; width: 18px; height: 18px; background: #fff; border-radius: 50%; top: 2px; left: 2px; transition: transform 0.2s; }
.priority-toggle input:checked + .priority-toggle-track::after { transform: translateX(18px); }
.priority-time-row { padding: 0 0 12px; }
.priority-time-input { width: 100%; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 0.93rem; color: var(--ink); outline: none; box-sizing: border-box; }
.priority-time-input:focus { border-color: var(--accent); }

/* ===== Today tab redesign — topbar navigation =====
   (The bottom .tabbar is now the Tasks/Journal/Feelings mode switcher — it stays visible.
   Section navigation lives in the topbar + ☰ drawer.) */
.topbar-center { font-size: 0.88rem; font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 10px; border-radius: 10px; transition: background 0.15s; white-space: nowrap; }
.topbar-center:hover { background: rgba(74,103,65,0.08); }
.topbar-menu-btn { position: relative; width: 40px; height: 40px; border-radius: 10px; border: none; background: transparent; cursor: pointer; color: var(--ink); opacity: 0.7; display: flex; align-items: center; justify-content: center; }
.topbar-menu-btn:active { background: var(--surface-2); opacity: 1; }
.topbar-menu-dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); pointer-events: none; }
.topbar-wordmark { font-size: 0.85rem; font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: 6px; }
.topbar-tabs { display: flex; align-items: center; gap: 4px; }
.topbar-tab { background: none; border: none; cursor: pointer; padding: 8px 10px; border-radius: 10px; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; transition: color 0.15s, background 0.15s; }
.topbar-tab--active { color: var(--accent); background: rgba(74,103,65,0.1); }
.topbar-tab:hover { background: var(--surface-2); color: var(--ink); }

/* ===== Today tab redesign — layout tightening ===== */
.screen { padding: 0 0 210px; gap: 0; }
.today-date-strip { margin: 0 0 4px; padding: 0 16px; }
.intro-card { margin: 4px 12px; }
.streak-chips-row { display: none; }

/* ===== Today list card ===== */
.today-list-card { margin: 0 12px 8px; border-radius: 14px; }

/* ===== Full-width filter bar ===== */
.tl-filter-bar { padding: 8px 12px 4px; }
.tl-type-tabs { display: flex; gap: 2px; background: var(--surface-2); border-radius: 10px; padding: 2px; width: 100%; box-sizing: border-box; }
.tl-type-tabs--full .tl-type-tab { flex: 1; text-align: center; }
.tl-type-tab { padding: 6px 10px; border: none; background: none; border-radius: 8px; font-size: 0.82rem; font-weight: 500; color: var(--ink-soft); cursor: pointer; transition: background 0.15s, color 0.15s; }
.tl-type-tab.active { background: var(--surface); color: var(--accent); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* ===== Time-of-day (session) tabs ===== */
/* A soft, horizontally-scrollable row of pills under the type tabs. Selecting one
   narrows the list to that slot + Anytime. The active pill fills with an accent wash. */
.tl-session-tabs {
  display: flex; gap: 6px; margin-top: 7px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; scroll-snap-type: x proximity;
  padding-bottom: 2px;
}
.tl-session-tabs::-webkit-scrollbar { display: none; }
.tl-session-tab {
  flex: 0 0 auto; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border: 1px solid var(--hairline, color-mix(in srgb, var(--ink) 12%, transparent));
  background: var(--surface); border-radius: 999px;
  font-size: 0.8rem; font-weight: 500; color: var(--ink-soft); cursor: pointer;
  white-space: nowrap; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.tl-session-tab:active { transform: scale(0.96); }
.tl-session-tab .tl-session-tab-emoji { font-size: 0.92rem; line-height: 1; }
.tl-session-tab.active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent-ink); font-weight: 600;
}
.tl-session-tab-now {
  font-size: 0.56rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; background: var(--accent); padding: 1px 6px; border-radius: 999px; margin-left: 1px;
}

/* ===== Session emoji tag on rows ===== */
.tl-ses-tag { font-size: 0.85rem; margin-left: 5px; opacity: 0.7; vertical-align: middle; }

/* ===== Fixed bottom dock ===== */
.home-bottom-dock {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
/* + button floats above the dock line */
.dock-add-row { position: absolute; right: 16px; top: calc(-1 * (var(--tabbar-h, 62px) + env(safe-area-inset-bottom, 0px) + 52px)); }
.dock-chips { margin: 0 12px 2px; }

/* ===== Compact mood row — single line ===== */
.mood-compact-row { display: flex; align-items: flex-end; gap: 6px; padding: 6px 12px 4px; }
.mood-compact-faces { display: flex; gap: 2px; flex-shrink: 0; }
.mood-compact-faces .mood-face-mini { font-size: 1.1rem; min-height: 32px; min-width: 32px; }
.dock-mood-label { flex: 1; font-size: 0.82rem; color: var(--ink-soft); font-style: italic; min-width: 0; }

/* ===== Affirmation at bottom of today ===== */
.mood-affirmation--bottom { text-align: center; font-size: 0.78rem; color: var(--ink-soft); font-style: italic; padding: 2px 16px 6px; margin: 0; }

/* ===== Task of the Day card ===== */
.totd-card { display: flex; align-items: center; gap: 9px; margin: 4px 12px 4px; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; border: 1px solid var(--line); }
.totd-icon { font-size: 1.05rem; flex-shrink: 0; }
.totd-done { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--accent); color: #fff; font-size: 0.95rem; line-height: 1; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.1s, filter 0.15s; }
.totd-done:hover { filter: brightness(1.05); }
.totd-done:active { transform: scale(0.9); }
.totd-text { font-size: 0.85rem; color: var(--ink); margin: 0; flex: 1; line-height: 1.4; }
.totd-dismiss { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 0.9rem; padding: 4px 6px; border-radius: 6px; flex-shrink: 0; transition: color 0.15s; }
.totd-dismiss:hover { color: var(--ink); }

/* Sleep-log nudge — a calm, dismissible banner that stays at the top of Today until logged or closed */
.sleep-nudge-card { display: flex; align-items: center; gap: 8px; margin: 4px 12px; background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 12px; padding: 10px 12px; }
.sleep-nudge-icon { font-size: 1.05rem; flex-shrink: 0; }
.sleep-nudge-text { font-size: 0.85rem; color: var(--ink); flex: 1; line-height: 1.4; }
.sleep-nudge-log { background: var(--accent); color: #fff; border: none; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 0.8rem; font-weight: 500; cursor: pointer; flex-shrink: 0; transition: filter 0.15s, transform 0.1s; }
.sleep-nudge-log:hover { filter: brightness(1.05); }
.sleep-nudge-log:active { transform: scale(0.97); }
.sleep-nudge-dismiss { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 0.9rem; padding: 4px 6px; border-radius: 6px; flex-shrink: 0; transition: color 0.15s; }
.sleep-nudge-dismiss:hover { color: var(--ink); }
/* Tasks top-actions (#14): night-log + add-to-journal sit at the very top of the day. */
.tasks-top-actions { display: flex; flex-direction: column; gap: 6px; margin-bottom: 2px; }
.tasks-top-actions .sleep-nudge-card { margin-top: 4px; }
.tasks-top-journal { display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); margin: 0 12px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius: 12px; padding: 11px 14px; cursor: pointer; font: inherit; color: var(--ink); text-align: left; transition: background 0.15s; }
.tasks-top-journal:active { background: var(--surface-2); }
.tasks-top-journal:focus-visible, .atp-move:focus-visible, .atp-del:focus-visible, .atp-check:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ttj-icon { font-size: 1.1rem; flex-shrink: 0; }
.ttj-text { flex: 1; font-size: 0.9rem; font-weight: 500; }
.ttj-chev { color: var(--ink-soft); font-size: 1.1rem; flex-shrink: 0; }


/* ===== Sleep section card ===== */
.sleep-section-card { display: flex; align-items: center; gap: 10px; margin: 4px 12px 4px; background: var(--surface-2); border-radius: 12px; padding: 10px 14px; border: 1px solid var(--line); }
.sleep-section-icon { font-size: 1.2rem; flex-shrink: 0; }
.sleep-section-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sleep-section-label { font-size: 0.72rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.sleep-section-value { font-size: 0.88rem; color: var(--ink); font-weight: 500; }
.sleep-section-btn { background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); padding: 6px 14px; font-size: 0.82rem; font-weight: 600; cursor: pointer; flex-shrink: 0; min-height: 44px; }
.sleep-section-btn:active { opacity: 0.85; }

/* ===== Habit start date input ===== */
.add-sheet-date-input { width: 100%; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 0.93rem; color: var(--ink); outline: none; box-sizing: border-box; }
.add-sheet-date-input:focus { border-color: var(--accent); }

/* ===== Sleep card — journal link ===== */
.sleep-journal-link { background: none; border: none; padding: 0; margin-top: 3px; font-size: 0.75rem; color: var(--accent); font-weight: 500; cursor: pointer; text-align: left; }
.sleep-journal-link:hover { opacity: 0.75; }

/* ===== Journal teaser card ===== */
.journal-teaser-card { display: flex; align-items: center; gap: 10px; margin: 4px 12px 4px; background: var(--surface-2); border-radius: 12px; padding: 10px 14px; border: 1px solid var(--line); cursor: pointer; transition: background 0.15s; }
.journal-teaser-card:hover { background: var(--surface-3, var(--surface-2)); }
.journal-teaser-icon { font-size: 1.2rem; flex-shrink: 0; }
.journal-teaser-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.journal-teaser-label { font-size: 0.72rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.journal-teaser-prompt { font-size: 0.88rem; color: var(--ink); font-weight: 500; font-style: italic; }
.journal-teaser-btn { background: none; border: 1.5px solid var(--accent); color: var(--accent); border-radius: 8px; padding: 5px 12px; font-size: 0.82rem; font-weight: 600; cursor: pointer; flex-shrink: 0; transition: background 0.15s; }
.journal-teaser-btn:hover { background: rgba(74,103,65,0.08); }

/* ===== Profile overlay — nav section ===== */
.profile-nav-section { display: flex; gap: 10px; padding: 12px 16px 4px; }
.profile-nav-btn { flex: 1; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 10px; font-size: 0.9rem; font-weight: 500; color: var(--ink); cursor: pointer; text-align: center; transition: background 0.15s, border-color 0.15s; }
.profile-nav-btn:hover { background: var(--surface-3, var(--surface-2)); border-color: var(--accent); color: var(--accent); }

/* ===== Topbar back button (journal/history tabs) ===== */
.topbar-back-btn { background: none; border: none; color: var(--ink-soft); cursor: pointer; padding: 8px 4px 8px 0; display: flex; align-items: center; margin-right: 4px; border-radius: 8px; transition: color 0.15s; }
.topbar-back-btn:hover { color: var(--ink); }

/* ===== Dock check-in tick button ===== */
.dock-checkin-btn { background: var(--accent); color: #fff; border: none; border-radius: 50%; width: 36px; height: 36px; min-width: 44px; min-height: 44px; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: opacity 0.15s; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.dock-checkin-btn:disabled { opacity: 0.3; cursor: default; }
.dock-checkin-btn:not(:disabled):hover { opacity: 0.85; }
.dock-checkin-btn:active { transform: scale(0.92); }

/* ===== Sleep sheet ===== */
.sleep-sheet { padding-bottom: 24px; }
.sleep-sheet-overline { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin: 0 0 12px; font-weight: 600; }

/* ===== Plan tomorrow card ===== */
.plan-tomorrow-card { margin: 4px 12px 4px; background: var(--surface-2); border-radius: 12px; padding: 10px 14px; border: 1px solid var(--line); }
/* "You've done enough today" — gentle evening rest-permission (faint accent tint, distinct from the plan card) */
.rest-permission-card { position: relative; margin: 12px 12px 4px; background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 14px; padding: 14px 46px 14px 16px; }
.rest-permission-msg { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--ink); }
.rest-permission-dismiss { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--ink-soft); font-size: 0.82rem; cursor: pointer; border-radius: 50%; }
.rest-permission-dismiss:hover { background: var(--surface); color: var(--ink); }
.rest-permission-dismiss:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.plan-tomorrow-header { display: flex; align-items: center; justify-content: space-between; }
.plan-tomorrow-label { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.plan-tomorrow-btn { background: none; border: 1.5px solid var(--accent); color: var(--accent); border-radius: 8px; padding: 4px 12px; font-size: 0.8rem; font-weight: 600; cursor: pointer; min-height: 44px; }
.plan-tomorrow-list { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.plan-tomorrow-item { font-size: 0.83rem; color: var(--ink-soft); padding: 2px 0; }


/* ===== Journal inline editor ===== */
.journal-editor-body { padding: 4px 0 0; }
.journal-save-hint { font-size: 0.72rem; color: var(--ink-soft); font-style: italic; text-align: right; padding: 0 16px; margin: 0 0 4px; opacity: 0; transition: opacity 0.3s; }

/* ===== Journal tab screen ===== */
.journal-screen { padding: 0 0 60px; }
.journal-header { padding: 8px 16px 4px; }
.journal-title { font-size: 1.3rem; font-weight: 700; color: var(--ink); margin: 0 0 2px; }
.journal-date { font-size: 0.82rem; color: var(--ink-soft); margin: 0; }

.journal-today-card { margin: 8px 12px; background: var(--surface-2); border-radius: 14px; padding: 14px 16px; border: 1px solid var(--line); }
.journal-today-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 600; }
.journal-today-preview { font-size: 0.92rem; color: var(--ink); margin: 4px 0 10px; line-height: 1.5; }
.journal-edit-btn { background: none; border: 1.5px solid var(--accent); color: var(--accent); border-radius: 8px; padding: 5px 14px; font-size: 0.82rem; font-weight: 600; cursor: pointer; }

.journal-write-cta { display: block; width: calc(100% - 24px); margin: 10px 12px; background: var(--accent); color: #fff; border: none; border-radius: 14px; padding: 14px; font-size: 0.95rem; font-weight: 600; cursor: pointer; text-align: left; transition: opacity 0.15s; }
.journal-write-cta:hover { opacity: 0.88; }

.journal-past-section { margin: 4px 12px 0; }
.journal-show-more-btn { background: none; border: none; color: var(--accent); font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 8px 0; width: 100%; text-align: left; }
.journal-past-list { border-top: 1px solid var(--line); margin-top: 4px; }
.journal-past-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.journal-past-date { font-size: 0.78rem; color: var(--ink-soft); font-weight: 600; flex-shrink: 0; width: 48px; }
.journal-past-preview { font-size: 0.85rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }

/* ===== Journal write sheet ===== */
.journal-write-sheet { padding-bottom: 24px; }
.journal-sheet-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.journal-sheet-date { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
.journal-sheet-hint { font-size: 0.75rem; color: var(--ink-soft); font-style: italic; }
.journal-sheet-textarea { width: 100%; min-height: 160px; max-height: 40vh; resize: none; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 0.95rem; color: var(--ink); line-height: 1.6; outline: none; box-sizing: border-box; font-family: inherit; margin-bottom: 12px; }
.journal-sheet-textarea:focus { border-color: var(--accent); }
.journal-sheet-save { width: 100%; }

/* ===== Topbar right group (theme + profile) ===== */
.topbar-right { display: flex; align-items: center; gap: 4px; }
.topbar-theme-btn { background: none; border: none; color: var(--ink-soft); cursor: pointer; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
.topbar-theme-btn:hover { background: var(--surface-2); color: var(--ink); }
.topbar-theme-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.topbar-theme-btn:active { transform: scale(0.9); }

/* ===== Dock mood note input ===== */
.mood-note-input { flex: 1; min-width: 0; resize: none; overflow: hidden; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 18px; font: inherit; font-family: var(--serif); font-style: italic; font-size: 0.85rem; padding: 6px 12px; color: var(--ink); outline: none; min-height: 32px; line-height: 1.4; }
.mood-note-input:focus { border-color: var(--accent); }
.mood-note-input::placeholder { color: var(--ink-soft); }

/* ===== Free write bottom sheet ===== */
.free-write-sheet { padding-bottom: 24px; }
.free-write-prompt { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.5; }
.free-write-textarea { width: 100%; min-height: 120px; max-height: 35vh; resize: none; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 0.95rem; color: var(--ink); line-height: 1.6; outline: none; box-sizing: border-box; font-family: inherit; margin-bottom: 12px; }
.free-write-textarea:focus { border-color: var(--accent); }
.free-write-actions { display: flex; gap: 10px; margin-top: 4px; }
.free-write-done-btn { flex: 1; width: auto; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 10px; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); padding: 11px; cursor: pointer; }
.free-write-done-btn:hover { background: var(--surface-3, var(--surface-2)); }
.free-write-deeper-btn { flex: 2; background: var(--accent); color: #fff; border: none; border-radius: 10px; font: inherit; font-size: 0.9rem; font-weight: 600; padding: 11px; cursor: pointer; }
.free-write-deeper-btn:hover { opacity: 0.9; }
.free-write-deeper-btn:active, .free-write-done-btn:active { transform: scale(0.97); }

/* ===== Profile "You" meta fields (age, gender) ===== */
.profile-meta-row { display: flex; gap: 12px; margin-top: 12px; }
.profile-meta-field { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.profile-meta-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.profile-meta-input, .profile-meta-select { font: inherit; font-size: 0.9rem; padding: 9px 12px; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 10px; color: var(--ink); outline: none; width: 100%; box-sizing: border-box; }
.profile-meta-input:focus, .profile-meta-select:focus { border-color: var(--accent); }
.profile-meta-select { appearance: none; cursor: pointer; }
.profile-section .profile-you + .profile-meta-field { margin-top: 13px; }
.profile-meta-opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-soft); opacity: 0.85; font-size: 0.66rem; }

/* "Suggested for you" tag on a package row (gender-aware, gentle). */
.pkg-suggested { display: inline-block; margin-left: 8px; font-size: 0.70rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 16%, transparent); padding: 2px 8px; border-radius: 999px; vertical-align: middle; }

/* One-time gentle cycle-care suggestion card on Today. */
.cycle-suggest-card { margin: 6px 12px 0; padding: 14px; border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, #a36b86 12%, var(--surface)), var(--surface)); border: 1px solid var(--line); }
.cycle-suggest-main { display: flex; align-items: flex-start; gap: 11px; }
.cycle-suggest-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.cycle-suggest-title { font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.cycle-suggest-sub { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.45; margin-top: 2px; }
.cycle-suggest-x { margin-left: auto; flex-shrink: 0; width: 26px; height: 26px; border: none; background: none; color: var(--ink-soft); cursor: pointer; font-size: 0.8rem; border-radius: 50%; }
.cycle-suggest-x:active { background: var(--surface-2); }
.cycle-suggest-actions { display: flex; gap: 8px; margin-top: 12px; }
.cycle-suggest-yes { flex: 1; padding: 10px; border: none; border-radius: 10px; background: var(--accent); color: #fff; font-family: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.cycle-suggest-yes:active { transform: scale(0.98); }
.cycle-suggest-later { flex: 1; padding: 10px; border: 1.5px solid var(--line); border-radius: 10px; background: none; color: var(--ink-soft); font-family: inherit; font-size: 0.86rem; cursor: pointer; }

/* ===== Wellbeing (gentle index) ===== */
.wb-card { background: var(--surface-2); border-radius: 14px; padding: 14px; margin-top: 8px; }
.wb-band { display: flex; align-items: flex-start; gap: 12px; }
.wb-band-emoji { font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
.wb-band-label { font-size: 1rem; color: var(--ink); }
.wb-band-word { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 500; color: var(--accent-ink); }
.wb-band-blurb { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5; margin-top: 3px; }
.wb-nudge-label { display: block; font-size: 0.78rem; color: var(--ink-soft); margin: 16px 0 6px; }
.wb-nudge {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, #c98a78, #cdbb95 50%, var(--accent)); outline: none; cursor: pointer;
}
.wb-nudge::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,0.2); cursor: grab;
}
.wb-nudge::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); cursor: grab; }
.wb-nudge-scale { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--ink-soft); margin-top: 6px; }

/* ===== Care mode selector ===== */
.care-mode-row { display: flex; gap: 6px; background: var(--surface-2); border-radius: 12px; padding: 3px; margin-top: 8px; }
.care-mode-btn {
  flex: 1; padding: 8px 4px; border: none; background: none; border-radius: 9px; cursor: pointer;
  font-family: inherit; font-size: 0.82rem; font-weight: 500; color: var(--ink-soft);
  transition: background 0.15s, color 0.15s;
}
.care-mode-btn.active { background: var(--surface); color: var(--accent); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.care-mode-hint { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.5; margin: 9px 2px 0; }

/* ===== Focus areas ===== */
.focus-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.focus-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 8px 13px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer;
  font-family: inherit; font-size: 0.82rem; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
}
.focus-chip:active { transform: scale(0.96); }
.focus-chip.active {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent); color: var(--accent-ink); font-weight: 500;
}
.focus-hint { font-size: 0.74rem; color: var(--ink-soft); margin: 9px 2px 0; }
.heal-sub { font-size: 0.8rem; color: var(--ink-soft); margin: 4px 2px 0; }

/* ===== Packages ===== */
.pkg-intro { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.5; margin: 4px 2px 10px; }
.pkg-row { display: flex; align-items: flex-start; gap: 11px; padding: 12px 0; }
.pkg-emoji { font-size: 1.4rem; line-height: 1.2; flex-shrink: 0; }
.pkg-text { flex: 1; min-width: 0; }
.pkg-label { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.pkg-desc { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.45; margin-top: 2px; }
.pkg-open {
  display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 0.85rem; font-weight: 600; color: var(--accent);
  padding: 4px 0 12px 49px; margin-top: -6px;
}
.pkg-row + .pkg-open { border-bottom: 1px solid var(--line); margin-bottom: 4px; }

/* ===== Today extras (package cards) ===== */
.today-extra {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 24px); margin: 6px 12px 0;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  cursor: pointer; text-align: left; font-family: inherit; transition: transform 0.12s ease, background 0.15s ease;
}
.today-extra:active { transform: scale(0.99); background: var(--surface-2); }
.today-extra-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.today-extra-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.today-extra-title { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.today-extra-sub { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.today-extra-chev { color: var(--ink-soft); font-size: 1.1rem; opacity: 0.6; flex-shrink: 0; }
.today-extra--reading { background: linear-gradient(180deg, color-mix(in srgb, #b08968 8%, var(--surface)), var(--surface)); }
.today-extra--cycle { background: linear-gradient(180deg, color-mix(in srgb, #a36b86 10%, var(--surface)), var(--surface)); }

/* ===== Reading room ===== */
.reading-panel, .cycle-panel {
  position: fixed; inset: 0; background: var(--bg); z-index: 520; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
.reading-panel.is-open, .cycle-panel.is-open { transform: none; }
.reading-hdr, .cycle-hdr { display: flex; align-items: center; gap: 8px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.reading-back, .cycle-back { width: 36px; height: 36px; border-radius: 50%; background: none; border: none; cursor: pointer; color: var(--ink); opacity: 0.6; display: flex; align-items: center; justify-content: center; }
.reading-back:active, .cycle-back:active { background: var(--surface-2); opacity: 1; }
.reading-hdr-title, .cycle-hdr-title { flex: 1; font-weight: 600; font-size: 1rem; color: var(--ink); }
.cycle-hdr-icon { font-size: 18px; }
.reading-scroll, .cycle-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
@keyframes art-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.reading-article { padding: 24px 22px 8px; max-width: 640px; margin: 0 auto; animation: art-in 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.reading-eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 600; margin: 0 0 8px; }
/* Reading title & body use absolute px so the reading-room text size (Aa / Aa+ / Aa++) is
   INDEPENDENT of the app-wide text size (html[data-text-size], which scales rem). The app dial
   stays small for easy navigation while the reading surface can be set large for comfortable reading. */
.reading-title { font-family: var(--read-face-heading); font-size: 27px; font-weight: 500; line-height: 1.25; color: var(--ink); margin: 0 0 18px; }
.reading-body p { font-family: var(--read-face-body); font-size: 18px; line-height: 1.75; color: var(--ink); margin: 0 0 17px; transition: font-size 0.18s ease, line-height 0.18s ease; }
.reading-foot { font-style: italic; color: var(--ink-soft); font-size: 0.92rem; margin: 22px 0 20px; }
.reading-more { padding: 8px 22px 40px; max-width: 640px; margin: 0 auto; border-top: 1px solid var(--line); }
.reading-more-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 600; margin: 18px 0 8px; }
.reading-list-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 13px 4px; border: none; border-bottom: 1px solid var(--line); background: none; cursor: pointer; font-family: inherit; text-align: left; }
.reading-list-title { font-size: 0.95rem; color: var(--ink); }
.reading-list-meta { font-size: 0.78rem; color: var(--ink-soft); flex-shrink: 0; }

/* ===== Reading room — "choose what to read" cards + saved shelf ===== */
.reading-saved-btn { position: relative; width: 38px; height: 38px; border-radius: 50%; background: none; border: none; cursor: pointer; color: var(--ink); opacity: 0.62; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity 0.15s, background 0.15s; }
.reading-saved-btn:hover { opacity: 1; background: var(--surface-2); }
.reading-saved-btn svg { width: 19px; height: 19px; }
.reading-saved-count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.6rem; font-weight: 700; line-height: 16px; text-align: center; }
.reading-choose { padding: 18px 18px 44px; max-width: 640px; margin: 0 auto; }
.reading-lead { font-family: var(--read-face-body); font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 20px; }

/* Reading Room top-level tabs — Reflections · Stories (a curated library, not one long stack) */
.reading-tabs { display: flex; gap: 6px; background: var(--surface-2); border-radius: 12px; padding: 4px; margin: 0 0 18px; }
.reading-tab { flex: 1; padding: 9px 8px; border: none; background: transparent; border-radius: 9px; font: inherit; font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); cursor: pointer; transition: background 0.18s, color 0.18s; }
.reading-tab.is-active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }

/* A small mood tag on a story (🌙 Cozy · 🧭 Adventure · 💛 True & tender · ✨ Wonder) */
.story-mood { display: inline-block; font-size: 0.72rem; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; margin-top: 8px; align-self: flex-start; }

/* Stories — the headline comfort at the top of the Reading Room */
.reading-stories { margin: 0 0 22px; }
.reading-stories-head { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin: 0 2px 10px; }
.story-continue-card { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 16px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface)); cursor: pointer; font: inherit; transition: background 0.15s, transform 0.1s; }
.story-continue-card:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 15%, var(--surface)), var(--surface)); }
.story-continue-card:active { transform: scale(0.99); }
.story-cont-eyebrow { font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.story-cont-title { font-family: var(--read-face-heading); font-size: 1.32rem; font-weight: 500; color: var(--ink); line-height: 1.2; margin-top: 2px; }
.story-cont-chapter { font-size: 0.86rem; color: var(--ink-soft); margin-top: 3px; }
.story-cont-cta { font-size: 0.86rem; font-weight: 600; color: var(--accent); margin-top: 8px; }
.story-waiting-card { font-size: 0.9rem; line-height: 1.6; color: var(--ink); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.story-waiting-card b { font-weight: 600; }
.reading-stories-sub { font-size: 0.8rem; color: var(--ink-soft); margin: 16px 2px 8px; }
.story-shorts { display: flex; flex-direction: column; gap: 8px; }
.story-short-card { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; transition: background 0.15s; }
.story-short-card:hover { background: var(--surface-2); }
.story-short-title { font-size: 0.98rem; font-weight: 500; color: var(--ink); }
.story-short-meta { font-size: 0.76rem; color: var(--ink-soft); }
.reading-section-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); font-weight: 600; margin: 20px 2px 9px; }
.reading-section-label:first-child { margin-top: 0; }
.reading-card-list { display: flex; flex-direction: column; gap: 14px; }
/* Soft, page-like card — the whole surface is tappable to read; a quiet bookmark sits in the corner. */
/* v219: the BOX (border/bg/radius) lives on .reading-card so the whole thing — including the
   "read it another day" action — is one cohesive card. Previously the box was on .reading-card-main,
   so the recycle button's border-top floated BELOW the rounded box and read like a stray error line. */
.reading-card {
  position: relative; border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, var(--surface)), var(--surface));
  transition: border-color 0.16s, box-shadow 0.16s;
}
.reading-card:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 8%, transparent); }
.reading-card-main {
  width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 48px 20px 20px; /* right room for the corner bookmark */
  border: none; background: none; transition: transform 0.1s;
}
.reading-card-main:active { transform: scale(0.992); }
.reading-card-scope { font-size: 0.70rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.reading-card-title { font-family: var(--read-face-heading); font-size: 1.24rem; font-weight: 500; color: var(--ink); line-height: 1.32; }
.reading-card-teaser { font-family: var(--read-face-body); font-size: 0.84rem; color: var(--ink-soft); line-height: 1.5; margin-top: 3px; }
.reading-card-meta { font-size: 0.78rem; font-style: italic; color: var(--ink-soft); }
/* "Read" state — a soft "you've been here", never a strike-through or a chore-done feel. */
.reading-card-read { font-size: 0.70rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 15%, transparent); padding: 1px 7px; border-radius: 999px; }
.reading-card--read { background: var(--surface); border-style: dashed; }
.reading-card--read .reading-card-title { opacity: 0.6; }
/* Card title scales with the reader's text-size dial too (set on the list wrap). */
.rdr-lg .reading-card-title { font-size: 1.34rem; }
.rdr-xl .reading-card-title { font-size: 1.46rem; }
/* Corner bookmark — subtle until kept, then softly filled. */
.reading-card-save { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: none; border-radius: 50%; background: none; color: var(--ink-soft); opacity: 0.5; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.15s, color 0.15s, background 0.15s; }
.reading-card-save svg { width: 18px; height: 18px; }
.reading-card-save:hover { opacity: 1; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.reading-card-save.is-saved { opacity: 1; color: var(--accent); }
.reading-card-save.is-saved svg { fill: var(--accent); }
/* "Show me others" — a calm, centered ghost link, not a loud CTA. */
.reading-refresh { display: block; margin: 24px auto 0; padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink-soft); font-family: inherit; font-size: 0.84rem; cursor: pointer; transition: color 0.15s, border-color 0.15s, transform 0.1s; }
.reading-refresh:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.reading-refresh:active { transform: scale(0.97); }
.reading-save-inline { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: none; color: var(--accent); font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.14s, border-color 0.14s; }
.reading-save-inline.is-saved { background: color-mix(in srgb, var(--accent) 13%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent-ink); }
.reading-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.reading-mark-read { display: block; width: 100%; padding: 13px 20px; border: none; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); font-family: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; text-align: center; transition: background 0.15s, opacity 0.15s; }
.reading-mark-read:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.reading-mark-read.is-done { opacity: 0.5; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.reading-read-again { display: block; width: 100%; padding: 13px 20px; border: 1px solid var(--line); border-radius: 12px; background: none; color: var(--ink-soft); font-family: inherit; font-size: 0.92rem; cursor: pointer; text-align: center; transition: background 0.15s, color 0.15s; }
.reading-read-again:hover { background: var(--surface-2); color: var(--ink); }
.reading-read-again.is-hidden { display: none; }
.reading-card-again { display: block; width: 100%; padding: 7px 12px 8px; border: none; border-top: 1px solid var(--line); background: none; color: var(--accent); font-family: inherit; font-size: 0.75rem; text-align: left; cursor: pointer; opacity: 0.75; transition: opacity 0.15s, background 0.15s; }
.reading-card-again:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 6%, transparent); }
/* Title row: title + listen icon side-by-side */
.reading-title-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.reading-title-row .reading-title { flex: 1; margin-bottom: 0; }
/* Compact listen circle beside title */
.reading-listen-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-top: 6px; border: 1.5px solid var(--accent); border-radius: 50%; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-ink); font-size: 1rem; cursor: pointer; transition: background 0.15s; }
.reading-listen-btn:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.reading-listen-btn.is-speaking { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.reading-listen-btn.is-paused { opacity: 0.7; }
/* ⚙ Settings button in the reading room header */
.reading-hdr-cfg { padding: 4px 9px; border: 1px solid var(--line); border-radius: 6px; background: none; color: var(--ink-soft); font-family: inherit; font-size: 0.88rem; cursor: pointer; transition: border-color 0.15s, color 0.15s; flex-shrink: 0; }
.reading-hdr-cfg:hover { border-color: var(--accent); color: var(--accent-ink); }
/* Settings popover — drops from header */
.reading-hdr { position: relative; }
.reading-cfg-pop { position: absolute; top: calc(100% + 4px); right: 4px; z-index: 30; width: min(280px, calc(100vw - 24px)); background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: 0 6px 28px rgba(0,0,0,0.18); overflow-y: auto; max-height: calc(100vh - 80px); }
.reading-cfg-section { margin-bottom: 12px; }
.reading-cfg-section:last-child { margin-bottom: 0; }
.reading-cfg-lbl { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--ink-soft); margin-bottom: 7px; }
.reading-cfg-row { display: flex; gap: 6px; flex-wrap: wrap; }
/* Font-size buttons in the popover */
.reading-fs-btn { padding: 5px 12px; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--ink-soft); font-family: inherit; font-size: 0.82rem; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.reading-fs-btn.is-on { background: color-mix(in srgb, var(--accent) 13%, transparent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
/* Font picker inside the reading room popover */
.reading-face-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.reading-face-btn { padding: 8px 4px 7px; border: 1.5px solid var(--line); border-radius: 10px; background: none; color: var(--ink-soft); cursor: pointer; line-height: 1.25; text-align: center; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.reading-face-btn.is-on { background: color-mix(in srgb, var(--accent) 11%, transparent); border-color: var(--accent); color: var(--ink); }
.reading-face-name { display: block; font-size: 0.82rem; }
.reading-face-sub  { display: block; font-size: 0.63rem; opacity: 0.5; margin-top: 2px; }
/* Speed buttons (also used in popover) */
.reading-speed-btn { padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: none; color: var(--ink-soft); font-family: inherit; font-size: 0.75rem; cursor: pointer; transition: background 0.15s, color 0.15s; }
.reading-speed-btn.is-on { background: color-mix(in srgb, var(--accent) 13%, transparent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
/* Voice picker inside popover (full-width) */
.reading-cfg-tts .reading-voice-picker { position: relative; width: 100%; }
.rw { transition: background 0.08s, color 0.08s; border-radius: 3px; }
.rw.is-lit { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); padding: 1px 2px; margin: -1px -2px; }
.reading-voice-picker { position: relative; flex: 1; min-width: 0; }
.reading-voice-btn { display: flex; align-items: center; gap: 5px; width: 100%; padding: 5px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: var(--ink-soft); font-family: inherit; font-size: 0.78rem; cursor: pointer; text-align: left; transition: border-color 0.15s; overflow: hidden; }
.reading-voice-btn:hover, .reading-voice-btn.is-open { border-color: var(--accent); color: var(--ink); }
.reading-voice-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reading-voice-chev { flex-shrink: 0; font-size: 0.7rem; opacity: 0.5; transition: transform 0.15s; }
.reading-voice-btn.is-open .reading-voice-chev { transform: rotate(180deg); }
.reading-voice-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.12); z-index: 400; max-height: 220px; overflow-y: auto; padding: 4px; }
.reading-voice-item { display: block; width: 100%; padding: 9px 12px; background: none; border: none; border-radius: 7px; color: var(--ink); font-family: inherit; font-size: 0.82rem; text-align: left; cursor: pointer; transition: background 0.12s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reading-voice-item:hover { background: var(--surface-2); }
.reading-voice-item.is-sel { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 600; }
.rvi-cloud { font-size: 0.7rem; opacity: 0.5; }
/* Reading room — scope filter chips */
.reading-scope-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 0 2px; }
.reading-scope-chip { padding: 5px 13px; border: 1px solid var(--line); border-radius: 20px; background: none; color: var(--ink-soft); font-family: inherit; font-size: 0.78rem; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; }
.reading-scope-chip:hover { border-color: var(--accent); color: var(--accent); }
.reading-scope-chip.is-on { background: color-mix(in srgb, var(--accent) 13%, transparent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
/* "Choose something for me" button */
.reading-pick-for-me { display: block; width: 100%; padding: 11px 16px; margin: 10px 0 6px; border: 1.5px dashed color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--accent) 5%, transparent); color: var(--accent); font-family: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; text-align: center; transition: background 0.15s, border-color 0.15s; }
.reading-pick-for-me:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); border-style: solid; }
/* Reading-room size steps — absolute px, independent of the app-wide text size (base is 18px) */
.rdr-lg .reading-body p { font-size: 20px; line-height: 1.85; }
.rdr-xl .reading-body p { font-size: 22px; line-height: 1.9; }
/* App-wide content font (journal entries + quotes) — curated pairings via html[data-face] */
html[data-face="clean"]    { --face-heading: 'Inter', system-ui, sans-serif;    --face-body: 'Inter', system-ui, sans-serif; }
html[data-face="blend"]    { --face-body: 'Inter', system-ui, sans-serif; }
html[data-face="penpal"]   { --face-heading: 'Patrick Hand', cursive;           --face-body: 'Patrick Hand', cursive; }
html[data-face="notebook"] { --face-heading: 'Caveat', cursive;                 --face-body: 'Kalam', cursive; }
html[data-face="playful"]  { --face-heading: 'Playpen Sans', cursive;           --face-body: 'Playpen Sans', cursive; }
/* Reading-room font — INDEPENDENT dial via html[data-read-face]. Default (classic) = Newsreader; the
   per-face overrides follow. These vars now theme the WHOLE room (titles, cards, leads) — a library feel. */
:root { --read-face-heading: 'Newsreader', Georgia, serif; --read-face-body: 'Newsreader', Georgia, serif; }
html[data-read-face="clean"]    { --read-face-heading: 'Inter', system-ui, sans-serif;    --read-face-body: 'Inter', system-ui, sans-serif; }
html[data-read-face="blend"]    { --read-face-body: 'Inter', system-ui, sans-serif; }
html[data-read-face="penpal"]   { --read-face-heading: 'Patrick Hand', cursive;           --read-face-body: 'Patrick Hand', cursive; }
html[data-read-face="notebook"] { --read-face-heading: 'Caveat', cursive;                 --read-face-body: 'Kalam', cursive; }
html[data-read-face="playful"]  { --read-face-heading: 'Playpen Sans', cursive;           --read-face-body: 'Playpen Sans', cursive; }
/* Handwriting reading fonts — slightly bigger base, but NOT when an explicit size class overrides */
html[data-read-face="penpal"]   .reading-article:not(.rdr-lg):not(.rdr-xl) .reading-body p { font-size: 18.5px; line-height: 1.8; }
html[data-read-face="notebook"] .reading-article:not(.rdr-lg):not(.rdr-xl) .reading-body p { font-size: 19px;   line-height: 1.85; }
html[data-read-face="playful"]  .reading-article:not(.rdr-lg):not(.rdr-xl) .reading-body p { font-size: 18.5px; line-height: 1.82; }
/* Global text size — bumps the root so all rem values cascade */
html[data-text-size="sm"] { font-size: 14px; }
html[data-text-size="lg"] { font-size: 18px; }
/* Reading progress bar */
.rdr-prog { position: sticky; top: 0; left: 0; right: 0; height: 3px; background: var(--surface-2); z-index: 5; flex-shrink: 0; }
.rdr-prog-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 0 2px 2px 0; transition: width 0.12s linear; }
/* Related passage at end of reader */
.reading-next { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.reading-next-lbl { font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--ink-soft); margin: 0 0 10px; }
/* Card list stagger entry animation */
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.reading-card-list .reading-card { animation: cardIn 0.24s ease both; }
.reading-card-list .reading-card:nth-child(2) { animation-delay: 65ms; }
.reading-card-list .reading-card:nth-child(3) { animation-delay: 130ms; }
.reading-saved-empty { text-align: center; padding: 48px 24px; }
.reading-saved-empty-icon { font-size: 2.4rem; display: block; margin-bottom: 12px; }
.reading-saved-empty p { font-size: 0.95rem; color: var(--ink); margin: 0 0 6px; }
.reading-saved-empty-sub { font-size: 0.82rem !important; color: var(--ink-soft) !important; line-height: 1.5; }

/* ===== Cycle care ===== */
.cycle-body { padding: 18px 16px 40px; max-width: 560px; margin: 0 auto; }
.cycle-status { border-radius: 16px; padding: 18px; background: var(--surface-2); margin-bottom: 16px; }
.cycle-status--menstrual { background: color-mix(in srgb, #a36b86 16%, var(--surface)); }
.cycle-status--late_luteal { background: color-mix(in srgb, #b07d70 15%, var(--surface)); }
.cycle-status--ovulation { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.cycle-status-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cycle-status-emoji { font-size: 2rem; line-height: 1; }
.cycle-status-phase { font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.cycle-status-day { font-size: 0.8rem; color: var(--ink-soft); margin-top: 2px; }
.cycle-status-note { font-size: 0.92rem; line-height: 1.55; color: var(--ink); margin: 0 0 10px; }
.cycle-status-next { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
.cycle-log-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.cycle-log-btn { padding: 13px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font-family: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: transform 0.12s; }
.cycle-log-btn:active { transform: scale(0.98); }
.cycle-log-date { font-size: 0.82rem; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.cycle-date-input { font: inherit; font-size: 0.85rem; padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); }
.cycle-hist { margin-bottom: 18px; }
.cycle-hist-label, .cycle-hist .cycle-hist-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 600; margin: 0 0 6px; }
.cycle-hist-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 0.88rem; color: var(--ink); }
.cycle-hist-del { border: none; background: none; color: var(--ink-soft); cursor: pointer; font-size: 0.9rem; padding: 4px 8px; border-radius: 6px; }
.cycle-hist-del:active { background: var(--surface-2); }
.cycle-setting { margin-bottom: 18px; }
.cycle-setting label { font-size: 0.85rem; color: var(--ink); display: block; margin-bottom: 8px; }
.cycle-plen { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--surface-2); outline: none; }
.cycle-plen::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); cursor: pointer; }
.cycle-plen::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); cursor: pointer; }
.cycle-privacy { font-size: 0.76rem; color: var(--ink-soft); line-height: 1.5; margin: 6px 0 0; text-align: center; }

/* ===== Breathing space ===== */
.breathe-overlay {
  position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 36%, #2a3a48 0%, #19232f 55%, #0d1620 100%);
  opacity: 0; transition: opacity 0.6s ease;
}
.breathe-overlay.is-open { opacity: 1; }
.breathe-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255,255,255,0.08); color: #cfe3ea; font-size: 1rem; cursor: pointer; transition: background 0.15s; }
.breathe-close:hover { background: rgba(255,255,255,0.16); }
.breathe-stage { position: relative; width: 260px; height: 260px; display: flex; align-items: center; justify-content: center; }
.breathe-ring { position: absolute; width: 244px; height: 244px; border-radius: 50%; border: 1px solid rgba(180,220,230,0.22); }
.breathe-circle {
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(160,205,215,0.6), rgba(110,160,180,0.22));
  box-shadow: 0 0 55px rgba(150,200,220,0.35);
  transform: scale(0.5); transition: transform 4s ease-in-out;
}
.breathe-word { position: absolute; font-family: 'Newsreader', Georgia, serif; font-size: 1.55rem; color: #eaf4f6; letter-spacing: 0.02em; text-shadow: 0 1px 12px rgba(0,0,0,0.3); }
.breathe-hint { position: absolute; bottom: 16%; left: 0; right: 0; color: #9fb6c0; font-size: 0.85rem; line-height: 1.5; padding: 0 28px; text-align: center; margin: 0; }
.breathe-patterns { position: absolute; bottom: 7%; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 0 20px; }
.breathe-pat { padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(180,220,230,0.25); background: rgba(255,255,255,0.05); color: #cfe3ea; font: inherit; font-size: 0.8rem; cursor: pointer; transition: background 0.15s, border-color 0.15s; min-height: 36px; }
.breathe-pat:hover { background: rgba(255,255,255,0.1); }
.breathe-pat.is-sel { background: rgba(160,205,215,0.22); border-color: rgba(160,205,215,0.55); color: #eaf4f6; font-weight: 600; }
.breathe-rhythm { position: absolute; bottom: 3.5%; left: 0; right: 0; text-align: center; color: #9fb6c0; font-size: 0.76rem; letter-spacing: 0.03em; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .breathe-circle { transition: none; transform: scale(0.82); }
  .breathe-overlay { transition: opacity 0.2s; }
}

/* ===== Ride the wave (urge surfing) ===== */
.wave-overlay {
  position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(120% 95% at 50% 30%, #28415a 0%, #16293c 52%, #0b1622 100%);
  opacity: 0; transition: opacity 0.6s ease; padding: 0 24px; text-align: center;
}
.wave-overlay.is-open { opacity: 1; }
.wave-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255,255,255,0.08); color: #cfe3ea; font-size: 1rem; cursor: pointer; transition: background 0.15s; }
.wave-close:hover { background: rgba(255,255,255,0.16); }
.wave-stage { width: 220px; height: 220px; }
.wave-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 12px 40px rgba(20,80,120,0.4)); }
.wave-port-bg { fill: rgba(120,170,200,0.07); }
.wave-port-ring { fill: none; stroke: rgba(170,210,230,0.3); stroke-width: 1.4; }
/* level = the rise/fall of the water (JS sets per-phase transform + duration); slide = endless drift */
.wave-level { transition: transform 6000ms ease-in-out; transform: translateY(40px); }
.wave-slide path { fill: #6fb3cf; }
.wave-slide--back { opacity: 0.42; }
.wave-slide--back path { fill: #4f93b8; }
.wave-slide--front { opacity: 0.82; }
@media (prefers-reduced-motion: no-preference) {
  .wave-slide--back  { animation: wave-slide-x 11s linear infinite; }
  .wave-slide--front { animation: wave-slide-x 7s  linear infinite; }
}
@keyframes wave-slide-x { from { transform: translateX(0); } to { transform: translateX(-100px); } }
.wave-word { margin: 22px 0 0; font-family: 'Newsreader', Georgia, serif; font-size: 1.55rem; color: #eaf4f6; letter-spacing: 0.02em; text-shadow: 0 1px 12px rgba(0,0,0,0.3); }
.wave-sub { margin: 8px auto 0; color: #b6cdd8; font-size: 0.92rem; line-height: 1.5; max-width: 300px; }
.wave-hint { position: absolute; bottom: 92px; left: 0; right: 0; color: #8fa9b6; font-size: 0.8rem; line-height: 1.5; padding: 0 32px; margin: 0; }
.wave-done { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); padding: 12px 26px; border-radius: 999px; border: 1px solid rgba(170,210,230,0.4); background: rgba(255,255,255,0.06); color: #eaf4f6; font: inherit; font-size: 0.92rem; cursor: pointer; transition: background 0.15s, opacity 0.4s; min-height: 44px; }
.wave-done:hover { background: rgba(255,255,255,0.13); }
.wave-done.is-hidden { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .wave-level { transition: none; transform: translateY(-6px); }
  .wave-overlay { transition: opacity 0.2s; }
}

/* ===== Guided exercise engine (the "proper helping hand") ===== */
.guided-overlay {
  position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(120% 95% at 50% 32%, #2c3a30 0%, #1a241d 55%, #0e1611 100%);
  opacity: 0; transition: opacity 0.6s ease; padding: 0 26px; text-align: center;
}
.guided-overlay.is-open { opacity: 1; }
.guided-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(255,255,255,0.08); color: #d6e6da; font-size: 1rem; cursor: pointer; transition: background 0.15s; }
.guided-close:hover { background: rgba(255,255,255,0.16); }
.guided-speak { position: absolute; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(180,220,195,0.3); background: rgba(255,255,255,0.05); color: #cfe3d6; font: inherit; font-size: 0.82rem; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.guided-speak.is-on { background: rgba(150,200,170,0.22); border-color: rgba(150,200,170,0.55); color: #eaf4ee; font-weight: 600; }
.guided-speak:focus-visible, .guided-close:focus-visible, .guided-next:focus-visible { outline: 3px solid rgba(180,220,195,0.7); outline-offset: 2px; }
.guided-stage { max-width: 460px; }
.guided-eyebrow { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: #8fae9b; margin: 0 0 18px; }
.guided-line { font-family: 'Newsreader', Georgia, serif; font-size: 1.7rem; line-height: 1.35; color: #eef6f0; margin: 0 0 14px; text-shadow: 0 1px 12px rgba(0,0,0,0.3); }
.guided-sub { font-size: 0.98rem; line-height: 1.6; color: #b7ccbe; margin: 0 auto 30px; max-width: 360px; }
.guided-next { min-width: 140px; min-height: 48px; padding: 13px 30px; border-radius: 999px; border: 1px solid rgba(180,220,195,0.4); background: rgba(255,255,255,0.06); color: #eef6f0; font: inherit; font-size: 1rem; cursor: pointer; transition: background 0.15s; }
.guided-next:hover { background: rgba(255,255,255,0.14); }
.guided-dots { display: flex; gap: 8px; justify-content: center; margin-top: 26px; }
.guided-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(180,220,195,0.25); transition: background 0.3s; }
.guided-dot.is-on { background: rgba(180,220,195,0.85); }
@media (prefers-reduced-motion: reduce) { .guided-overlay { transition: opacity 0.2s; } }

/* ===== "How do you feel now?" check (after breathing) ===== */
.feelnow-overlay { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(13,22,32,0.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.3s ease; }
.feelnow-overlay.is-open { opacity: 1; }
.feelnow-card { width: 100%; max-width: 340px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px 20px 16px; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,0.3); transform: translateY(10px); transition: transform 0.3s ease; }
.feelnow-overlay.is-open .feelnow-card { transform: translateY(0); }
.feelnow-title { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); margin: 0 0 4px; }
.feelnow-sub { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5; margin: 0 0 16px; }
.feelnow-faces { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.feelnow-face { display: flex; flex-direction: column; align-items: center; gap: 3px; border: none; background: none; cursor: pointer; padding: 8px 6px; border-radius: 12px; font: inherit; color: var(--ink-soft); min-width: 56px; transition: background 0.12s ease, transform 0.12s ease; }
.feelnow-face > span:first-child { font-size: 1.7rem; line-height: 1; }
.feelnow-fl { font-size: 0.66rem; }
.feelnow-face:active { transform: scale(0.93); background: var(--surface-2); }
.feelnow-skip { margin-top: 14px; border: none; background: none; color: var(--ink-soft); text-decoration: underline; font: inherit; font-size: 0.82rem; cursor: pointer; padding: 6px; }

/* ===== Bedtime mode ===== */
.bedtime-overlay { position: fixed; inset: 0; z-index: 1300; overflow-y: auto; opacity: 0; transition: opacity 0.7s ease; color: #efe6da; -webkit-tap-highlight-color: transparent; }
.bedtime-overlay.is-open { opacity: 1; }
.bedtime-sky { position: fixed; inset: 0; z-index: 0; background: radial-gradient(95% 75% at 50% 42%, #3a2a1e 0%, #1b1626 46%, #0b0913 100%); }
.bedtime-sky.is-animated::after { content: ''; position: absolute; inset: 0; background: radial-gradient(38% 30% at 50% 40%, rgba(214,160,96,0.18), transparent 70%); animation: bt-breathe 11s ease-in-out infinite; }
@keyframes bt-breathe { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
/* warm-dim "nightlight": a soft vignette that leaves a gentle warm pool of light in the centre */
.bedtime-dim { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.3s ease;
  background: radial-gradient(115% 90% at 50% 44%, rgba(12,9,6,0.25) 0%, rgba(8,6,4,0.97) 72%); }
.bedtime-overlay[data-night="soft"] .bedtime-dim { opacity: 0.30; }
.bedtime-overlay[data-night="dim"]  .bedtime-dim { opacity: 0.55; }
.bedtime-overlay[data-night="deep"] .bedtime-dim { opacity: 0.76; }
.bedtime-overlay.is-resting[data-night="off"]  .bedtime-dim { opacity: 0.96; }
.bedtime-overlay.is-resting[data-night="soft"] .bedtime-dim { opacity: 0.46; }
.bedtime-overlay.is-resting[data-night="dim"]  .bedtime-dim { opacity: 0.70; }
.bedtime-overlay.is-resting[data-night="deep"] .bedtime-dim { opacity: 0.90; }
.bedtime-close { position: fixed; top: 16px; right: 16px; z-index: 5; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255,255,255,0.08); color: #e7d8c4; font-size: 1rem; cursor: pointer; transition: background 0.15s, opacity 0.5s; }
.bedtime-close:hover { background: rgba(255,255,255,0.16); }
.bedtime-content { position: relative; z-index: 3; max-width: 440px; margin: 0 auto; padding: 64px 22px 48px; text-align: center; transition: opacity 0.9s ease; }
.bedtime-moon { font-size: 2.6rem; line-height: 1; filter: drop-shadow(0 0 18px rgba(232,196,128,0.5)); }
@media (prefers-reduced-motion: no-preference) { .bedtime-moon { animation: bt-glow 9s ease-in-out infinite; } }
@keyframes bt-glow { 0%, 100% { filter: drop-shadow(0 0 14px rgba(232,196,128,0.4)); } 50% { filter: drop-shadow(0 0 26px rgba(232,196,128,0.7)); } }
.bedtime-title { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 1.7rem; margin: 12px 0 6px; color: #f3eadd; }
.bedtime-lead { font-size: 0.95rem; line-height: 1.6; color: #cdbfae; margin: 0 auto 28px; max-width: 320px; }
.bedtime-group { margin: 0 0 22px; text-align: left; }
.bedtime-label { font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: #b29a7e; margin: 0 0 9px; }
.bedtime-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bedtime-chip { border: 1px solid rgba(232,196,128,0.22); background: rgba(255,255,255,0.045); color: #e3d6c4; font: inherit; font-size: 0.86rem; padding: 9px 14px; border-radius: 999px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.bedtime-chip:hover { background: rgba(255,255,255,0.09); }
.bedtime-chip.is-on { background: rgba(232,196,128,0.18); border-color: rgba(232,196,128,0.6); color: #fbf1e2; }
.bedtime-note { font-size: 0.78rem; line-height: 1.55; color: #a99581; margin: 11px 2px 0; }
.bedtime-story-btn { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 14px 16px; border: 1px solid rgba(232,196,128,0.22); border-radius: 14px; background: rgba(232,196,128,0.06); color: #efe6da; font: inherit; cursor: pointer; transition: background 0.18s; }
.bedtime-story-btn:hover { background: rgba(232,196,128,0.14); }
.bt-story-title { font-size: 0.96rem; font-weight: 500; color: #f3eadd; }
.bt-story-meta { font-size: 0.76rem; color: #a99581; }
.bedtime-rest { display: block; width: 100%; margin-top: 8px; padding: 14px; border: 1px solid rgba(232,196,128,0.3); border-radius: 14px; background: rgba(232,196,128,0.1); color: #f3e6d2; font: inherit; font-size: 0.95rem; cursor: pointer; transition: background 0.15s; }
.bedtime-rest:hover { background: rgba(232,196,128,0.18); }
.bedtime-taphint { position: fixed; bottom: 38px; left: 0; right: 0; z-index: 4; text-align: center; font-size: 0.8rem; color: #b29a7e; margin: 0; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; }
/* resting: controls fade away, leaving the warm nightlight glow */
.bedtime-overlay.is-resting .bedtime-content { opacity: 0; pointer-events: none; }
.bedtime-overlay.is-resting .bedtime-close { opacity: 0; pointer-events: none; }
.bedtime-overlay.is-resting .bedtime-taphint { opacity: 0.85; animation: bt-hint-fade 5s ease forwards; }
@keyframes bt-hint-fade { 0% { opacity: 0; } 18% { opacity: 0.85; } 82% { opacity: 0.85; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bedtime-overlay, .bedtime-content, .bedtime-dim { transition-duration: 0.2s; } }

/* ===== Passcode lock screen ===== */
.lock-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg, #f4efe8); opacity: 0; transition: opacity 0.35s ease; }
.lock-overlay.is-open { opacity: 1; }
.lock-overlay.is-gone { opacity: 0; }
.lock-inner { width: 100%; max-width: 320px; text-align: center; }
.lock-moon { font-size: 2.2rem; line-height: 1; }
.lock-title { font-family: 'Newsreader', Georgia, serif; font-size: 1.5rem; color: var(--ink); margin: 10px 0 4px; }
.lock-sub { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 20px; line-height: 1.5; }
.lock-dots { display: flex; justify-content: center; gap: 12px; min-height: 16px; margin: 6px 0 4px; }
.lock-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--accent) 55%, var(--line)); transition: background 0.12s, transform 0.12s; }
.lock-dot.is-filled { background: var(--accent); border-color: var(--accent); transform: scale(1.08); }
.lock-err { font-size: 0.82rem; color: #c0584e; min-height: 18px; margin: 4px 0 10px; }
.lock-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 264px; margin: 0 auto; }
.lock-key { height: 62px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.35rem; font-family: inherit; cursor: pointer; transition: background 0.12s, transform 0.08s; }
.lock-key:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.lock-key:active { transform: scale(0.94); }
.lock-key--ghost { border: none; background: transparent; font-size: 0.92rem; color: var(--ink-soft); }
.lock-key--ghost:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.lock-reset-copy { max-width: 280px; margin: 0 auto 22px; }
.lock-reset-btn { display: block; width: 100%; padding: 14px; border: none; border-radius: 14px; background: var(--accent); color: #fff; font: inherit; font-size: 0.95rem; cursor: pointer; }
.lock-cancel-btn { display: block; width: 100%; margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: transparent; color: var(--ink-soft); font: inherit; cursor: pointer; }
.lock-shake { animation: lock-shake 0.42s ease; }
@keyframes lock-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
@media (prefers-reduced-motion: reduce) { .lock-shake { animation: none; } }
/* Passcode setup (Settings) */
.pc-intro { font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); margin: 4px 2px 18px; }
.pc-label { font-size: 0.86rem; font-weight: 600; color: var(--ink); margin: 0 2px 8px; }
.pc-input { width: 100%; box-sizing: border-box; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 1.2rem; letter-spacing: 0.3em; text-align: center; }
.pc-input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 1px; }
.pc-err { font-size: 0.82rem; color: #c0584e; min-height: 18px; margin: 8px 2px; }
.pc-go { display: block; width: 100%; padding: 13px; border: none; border-radius: 13px; background: var(--accent); color: #fff; font: inherit; font-size: 0.95rem; cursor: pointer; }
.pc-remove { display: block; width: 100%; margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: transparent; color: #c0584e; font: inherit; cursor: pointer; }
.today-extra--breathe { background: linear-gradient(180deg, color-mix(in srgb, #6aa0b0 11%, var(--surface)), var(--surface)); }
/* Breathe card is now [tap-target button | ✕]; the inner button carries the icon+text+chev row. */
.today-extra--breathe { gap: 6px; }
.today-extra-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; border: none; background: none; font: inherit; text-align: left; cursor: pointer; padding: 0; color: inherit; }
.today-extra--breathe .today-extra-x { align-self: center; }
.today-extra--bedtime { background: linear-gradient(180deg, color-mix(in srgb, #5a5a8c 12%, var(--surface)), var(--surface)); }

/* ===== Reaching out (support) ===== */
.support-panel { position: fixed; inset: 0; background: var(--bg); z-index: 520; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); }
.support-panel.is-open { transform: none; }
.support-hdr { display: flex; align-items: center; gap: 8px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.support-back { width: 44px; height: 44px; border-radius: 50%; background: none; border: none; cursor: pointer; color: var(--ink); opacity: 0.6; display: flex; align-items: center; justify-content: center; }
.support-back:active { background: var(--surface-2); opacity: 1; }
.support-hdr-title { flex: 1; font-weight: 600; font-size: 1rem; color: var(--ink); }
.support-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.support-body { padding: 22px 20px 48px; max-width: 600px; margin: 0 auto; }
.support-lead { font-family: 'Newsreader', Georgia, serif; font-size: 1.32rem; line-height: 1.4; color: var(--ink); margin: 0 0 12px; }
.support-note { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; margin: 0 0 20px; }
.support-list { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 15px; }
.support-list li { position: relative; padding-left: 18px; font-size: 0.92rem; line-height: 1.6; color: var(--ink); }
.support-list li::before { content: '•'; position: absolute; left: 2px; color: var(--accent); font-weight: 700; }
.support-foot { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.6; border-top: 1px solid var(--line); padding-top: 16px; margin: 0; }
.support-cta { display: block; width: 100%; text-align: left; padding: 14px 16px; margin: 0 0 22px; border: 1.5px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--accent-ink); font-family: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.support-cta:active { background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* "Your people" — saved trusted contacts for one-tap reaching out (Reaching out panel). */
.support-people { margin: 0 0 22px; }
.support-people-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 12px; }
.support-people-empty { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; margin: 0 0 14px; }
.support-people-list { display: flex; flex-direction: column; gap: 12px; margin: 0 0 14px; }
.support-person { border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; background: var(--surface); }
.sp-top { display: flex; align-items: center; gap: 8px; margin: 0 0 11px; }
.sp-name { flex: 1; font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.sp-edit { background: none; border: none; cursor: pointer; color: var(--ink-soft); font-family: inherit; font-size: 0.85rem; padding: 6px 8px; border-radius: 8px; }
.sp-edit:active { background: var(--surface-2); }
.sp-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.sp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border-radius: 12px; font-family: inherit; font-size: 0.92rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.15s; }
.sp-call { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-ink); border: 1.5px solid color-mix(in srgb, var(--accent) 38%, var(--line)); }
.sp-call:active { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.sp-text { background: var(--surface-2); color: var(--ink); border: 1.5px solid var(--line); }
.sp-text:active { background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.sp-nonum { color: var(--ink-soft); font-size: 0.86rem; line-height: 1.5; }
.support-people-add { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 16px; border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 12px; background: none; color: var(--accent-ink); font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.support-people-add:active { background: color-mix(in srgb, var(--accent) 8%, transparent); }
/* Add / edit form */
.support-person-form { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--surface); margin: 0 0 8px; }
.spf-label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--ink); margin: 0 0 14px; }
.spf-opt { font-weight: 400; color: var(--ink-soft); }
.spf-name, .spf-phone, .spf-msg { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); color: var(--ink); font-family: inherit; font-size: 0.98rem; }
.spf-msg { resize: vertical; line-height: 1.5; }
.spf-name:focus, .spf-phone:focus, .spf-msg:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; border-color: var(--accent); }
.spf-note { color: var(--ink-soft); font-size: 0.84rem; line-height: 1.55; margin: 0 0 16px; }
.spf-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.spf-actions button { min-height: 44px; padding: 10px 18px; border-radius: 11px; font-family: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; }
.spf-cancel { background: none; border: 1px solid var(--line); color: var(--ink-soft); }
.spf-remove { background: none; border: 1px solid color-mix(in srgb, var(--danger, #c98a78) 45%, var(--line)); color: color-mix(in srgb, var(--danger, #c98a78) 78%, var(--ink)); margin-right: auto; }
.spf-save { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.spf-save:active { filter: brightness(0.95); }

/* Survival mode — optional "Read these to me" (on a light support-panel, so its own pill, not the dark .guided-speak). */
.survival-readaloud { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin: 0 0 18px; padding: 9px 16px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--accent) 38%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent-ink); font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.survival-readaloud:active, .survival-readaloud.is-on { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.survival-readaloud:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }

/* Diary → Lists index (named task lists), canonical .support-panel chrome. */
.lists-index-lead { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; margin: 0 0 18px; }
.lists-index-list { display: flex; flex-direction: column; gap: 11px; margin: 0 0 16px; }
.lists-index-row { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font-family: inherit; cursor: pointer; transition: background 0.15s; }
.lists-index-row:active { background: var(--surface-2); }
.lists-index-row--all { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.lir-emoji { font-size: 1.3rem; flex-shrink: 0; }
.lir-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lir-name { font-weight: 600; font-size: 1.02rem; }
.lir-sub { font-size: 0.82rem; color: var(--ink-soft); }
.lir-chev { color: var(--ink-soft); font-size: 1.2rem; flex-shrink: 0; }
.lists-index-empty { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; padding: 4px 2px; margin: 0; }
.lists-index-add { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 12px; background: none; color: var(--accent-ink); font-family: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; }
.lists-index-add:active { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.lists-index-form { margin-top: 12px; }
.lif-inp { display: block; width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); color: var(--ink); font-family: inherit; font-size: 0.98rem; }
.lif-inp:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; border-color: var(--accent); }
.lif-actions { display: flex; gap: 9px; margin-top: 10px; }
.lif-actions button { min-height: 44px; padding: 9px 18px; border-radius: 11px; font-family: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; }
.lif-cancel { background: none; border: 1px solid var(--line); color: var(--ink-soft); }
.lif-save { background: var(--accent); border: 1px solid var(--accent); color: #fff; }

/* ===== My coping plan ===== */
.coping-intro { font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 22px; }
.coping-field { display: block; margin-bottom: 18px; }
.coping-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.coping-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.92rem; line-height: 1.5; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); outline: none; resize: vertical; transition: border-color 0.15s; }
.coping-input:focus { border-color: var(--accent); }
.coping-saved { font-size: 0.78rem; color: var(--ink-soft); text-align: center; margin: 4px 0 0; }

/* ===== Reframe a thought ===== */
.reframe-intro { font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 18px; }
.reframe-field { display: block; margin-bottom: 16px; }
.reframe-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.reframe-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.92rem; line-height: 1.5; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); outline: none; resize: vertical; transition: border-color 0.15s; }
.reframe-input:focus { border-color: var(--accent); }
.reframe-prompts { margin: 4px 0 18px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 6%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); }
.reframe-prompts-title { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 9px; }
.reframe-prompts-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.reframe-prompts-list li { position: relative; padding-left: 18px; font-size: 0.9rem; line-height: 1.5; color: var(--ink); }
.reframe-prompts-list li::before { content: '·'; position: absolute; left: 4px; top: -2px; font-size: 1.3rem; line-height: 1; color: var(--accent); }
.reframe-keep { display: block; width: 100%; margin: 6px 0 10px; padding: 13px 16px; border: none; border-radius: 14px; background: var(--accent); color: #fff; font-family: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: opacity 0.15s; }
.reframe-keep:active { opacity: 0.85; }
.reframe-note { font-size: 0.78rem; color: var(--ink-soft); text-align: center; margin: 0; }
.reframe-past-wrap:not(:empty) { margin: 0 0 20px; }
.reframe-past { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.reframe-past-summary { list-style: none; cursor: pointer; padding: 13px 16px; font-size: 0.86rem; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.reframe-past-summary::-webkit-details-marker { display: none; }
.reframe-past-summary::after { content: '⌄'; margin-left: auto; opacity: 0.5; transition: transform 0.2s; }
.reframe-past[open] .reframe-past-summary::after { transform: rotate(180deg); }
.reframe-past-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); font-size: 0.72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.reframe-past-items { padding: 0 16px 8px; display: flex; flex-direction: column; gap: 14px; }
.reframe-past-item { border-top: 1px solid var(--line); padding-top: 13px; }
.reframe-past-date { font-size: 0.74rem; color: var(--ink-soft); margin: 0 0 5px; }
.reframe-past-thought { font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); font-style: italic; margin: 0 0 4px; }
.reframe-past-kinder { font-size: 0.92rem; line-height: 1.5; color: var(--ink); margin: 0 0 8px; }
.reframe-past-del { background: none; border: none; padding: 4px 0; font: inherit; font-size: 0.78rem; color: var(--ink-soft); cursor: pointer; text-decoration: underline; opacity: 0.7; }
.reframe-past-del:active { opacity: 1; }

/* ===== "What lifts you" card ===== */
.lifts-sub { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.5; margin: 2px 2px 12px; }
.lifts-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.lifts-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; line-height: 1.5; color: var(--ink); padding: 11px 13px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface)); border: 1px solid var(--line); border-radius: 13px; }
.lifts-emoji { font-size: 1.15rem; line-height: 1.3; flex-shrink: 0; }

/* ===== Kind momentum — "Your gentle week" (visual-first, streak-free) ===== */
.km-card { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface)); border: 1px solid var(--line); border-radius: 16px; padding: 16px 16px 14px; }
.km-cluster { display: flex; flex-wrap: wrap; gap: 9px; margin: 4px 0 13px; }
.km-petal { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
.km-line { font-family: var(--serif, Newsreader), Georgia, serif; font-size: 1.02rem; line-height: 1.5; color: var(--ink); margin: 0 0 7px; }
.km-foot { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.45; margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .km-petal { animation: km-bloom 0.5s ease both; }
  .km-cluster .km-petal:nth-child(2) { animation-delay: 0.06s; }
  .km-cluster .km-petal:nth-child(3) { animation-delay: 0.12s; }
  .km-cluster .km-petal:nth-child(4) { animation-delay: 0.18s; }
  .km-cluster .km-petal:nth-child(5) { animation-delay: 0.24s; }
  .km-cluster .km-petal:nth-child(6) { animation-delay: 0.30s; }
}
@keyframes km-bloom { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }

/* ===== Name a feeling (emotional literacy) ===== */
.emotion-body { padding: 4px 2px 8px; }
.emotion-lead { font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); margin: 4px 2px 18px; }
/* 3 columns now (12 emotions = a clean 4×3); compact so it all fits one screen, labels wrap neatly */
.emotion-core-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.emotion-core-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 6px; min-height: 84px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--surface)), var(--surface)); cursor: pointer; font-family: inherit; transition: background 0.15s, transform 0.1s, border-color 0.15s; }
.emotion-core-btn:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.emotion-core-btn:active { transform: scale(0.96); }
.emotion-core-emoji { font-size: 1.7rem; line-height: 1; }
.emotion-core-label { font-size: 0.8rem; font-weight: 500; color: var(--ink); text-align: center; line-height: 1.2; }
/* Emotion diary grid (#10): same core grid as Feelings, with an entry-count badge + dimmed empties. */
.emodiary-grid { margin-top: 4px; }
.emodiary-grid .emotion-core-btn { position: relative; }
.emotion-core-btn--empty { opacity: 0.5; }
.emotion-core-btn--empty:hover { opacity: 0.8; }
.emodiary-core-count { position: absolute; top: 7px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
/* Dark mode: --accent lightens, so darken the badge for AA white-on-green contrast. */
html[data-theme="dark"] .emodiary-core-count { background: #2f5a2a; }
@media (prefers-color-scheme: dark) { html[data-theme="system"] .emodiary-core-count { background: #2f5a2a; } }
/* contextual "ways to tend to it" tools — an intentional, clearly-present block (not a faint footer) */
.emotion-tools { margin-top: 18px; padding: 15px 14px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); }
.emotion-tools-lead { font-size: 0.9rem; font-weight: 600; color: var(--ink); margin: 0 0 11px; }
.emotion-tools-row { display: flex; flex-wrap: wrap; gap: 9px; }
.emotion-tool-btn { font-family: inherit; font-size: 0.92rem; font-weight: 500; color: var(--ink); padding: 11px 16px; border-radius: 13px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--surface); cursor: pointer; transition: background 0.15s, transform 0.1s; }
.emotion-tool-btn:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.emotion-tool-btn:active { transform: scale(0.96); }
.emotion-sub { margin: 0 0 16px; }
.emotion-sub-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); opacity: 0.75; margin: 0 2px 9px; }
/* One flat list of FELT phrases — no category headers, one plain line each, big enough to scan and
   tap fast when you're heavy. The dictionary word waits on the help screen. */
.emotion-feeling-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 4px; }
.emotion-feeling-chip { width: 100%; text-align: left; font-family: inherit; font-size: 1.05rem; font-weight: 500; color: var(--ink); padding: 15px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); cursor: pointer; transition: background 0.15s, transform 0.1s; }
.emotion-feeling-chip:hover { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); }
.emotion-feeling-chip:active { transform: scale(0.985); }
/* "I'm not sure" — a gentle, low-key choice sitting under the feeling list */
.emotion-notsure-btn { width: 100%; margin-top: 10px; padding: 13px; border-radius: 13px; border: 1px dashed color-mix(in srgb, var(--accent) 38%, var(--line)); background: transparent; color: var(--ink-soft); font: inherit; font-size: 0.92rem; cursor: pointer; transition: background 0.15s, transform 0.1s; }
.emotion-notsure-btn:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.emotion-notsure-btn:active { transform: scale(0.99); }

/* The focused support screen — ONE feeling, full attention. A friend giving you just the thing you
   need (a brief about it + what helps right now), then clear next steps. No competing chips. */
.feeling-support { padding: 8px 2px 6px; animation: rise 260ms ease; }
.fs-head { text-align: center; margin: 6px 0 20px; }
.fs-emoji { font-size: 3rem; line-height: 1; display: block; margin-bottom: 12px; }
.fs-name { font-family: 'Newsreader', Georgia, serif; font-size: 1.7rem; font-weight: 500; color: var(--ink); margin: 0 0 7px; line-height: 1.25; }
.fs-sub { font-size: 0.95rem; line-height: 1.5; color: var(--ink-soft); margin: 0 auto; max-width: 32ch; }
.fs-message { font-size: 1.1rem; line-height: 1.7; color: var(--ink); text-align: center; margin: 0 auto 24px; max-width: 30ch; }
.fs-now { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface)); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin: 0 0 26px; }
.fs-now-label { font-size: 0.73rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin: 0 0 8px; }
.fs-now-text { font-size: 1rem; line-height: 1.65; color: var(--ink); margin: 0; }
/* "What's helped you with this before" — your own past notes for this feeling. */
.fs-helped-before { margin: 0 0 26px; }
.fs-helped-label { font-size: 0.73rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin: 0 0 10px; }
.fs-helped-card { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 12px; padding: 11px 14px; margin: 0 0 9px; }
.fs-helped-text { font-size: 0.96rem; line-height: 1.55; color: var(--ink); margin: 0; white-space: pre-wrap; }
.fs-helped-meta { font-size: 0.74rem; color: var(--ink-soft); margin: 6px 0 0; }
.fs-helped-empty { font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); margin: 0; text-align: center; max-width: 32ch; margin-left: auto; margin-right: auto; }
.fs-actions { display: flex; flex-direction: column; gap: 10px; }
.fs-action { width: 100%; padding: 15px; border-radius: 14px; font: inherit; font-size: 0.97rem; font-weight: 500; cursor: pointer; transition: transform 0.1s, filter 0.15s; }
.fs-action--primary { border: none; background: var(--accent); color: #fff; }
.fs-action--primary:hover { filter: brightness(1.05); }
.fs-action--tool { border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--ink); }
.fs-action--tool:hover { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); }
.fs-action:active { transform: scale(0.985); }
.fs-action--stay { border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); background: var(--surface-2); color: var(--ink); }
.fs-action--stay:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }

/* List rows now show the NAME + a short "what it means" (owner redesign) */
.emotion-feeling-chip { display: flex; flex-direction: column; gap: 2px; position: relative; }
.emotion-feeling-chip:has(.efc-count) { padding-right: 48px; }
.efc-name { font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.efc-mean { font-size: 0.82rem; font-weight: 400; color: var(--ink-soft); }
/* count badge — only in the Diary→Emotions list, marking feelings you've written about (rows otherwise identical to the Feelings list) */
.efc-count { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--accent); font-size: 0.76rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }

/* ===== In-the-moment screen v2 — minimal, low-energy (owner redesign) ===== */
.feeling-support--v2 { padding: 4px 2px 12px; }
/* ambient companion dot = "Stay with me" without a button — a soft green dot to rest your eyes on */
.fs-companion { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%; margin: 2px 0 18px; background: none; border: none; cursor: pointer; }
.fs-companion-dot { width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, var(--accent), color-mix(in srgb, var(--accent) 55%, transparent)); }
@media (prefers-reduced-motion: no-preference) { .fs-companion-dot { animation: fs-breathe 4.6s ease-in-out infinite; } }
@keyframes fs-breathe { 0%, 100% { transform: scale(0.78); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 38%, transparent); } 50% { transform: scale(1.28); box-shadow: 0 0 20px 7px color-mix(in srgb, var(--accent) 26%, transparent); } }
.fs-companion-cap { font-size: 0.73rem; letter-spacing: 0.04em; color: var(--ink-soft); }
.fs-companion:hover .fs-companion-cap, .fs-companion:focus-visible .fs-companion-cap { color: var(--ink); }
.fs-companion:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 12px; }
/* the one info box: icon · name · meaning · what-helps-right-now */
.feeling-support--v2 .fs-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 15px 16px 14px; margin-bottom: 14px; }
.feeling-support--v2 .fs-card-head { display: flex; gap: 13px; align-items: center; text-align: left; margin: 0; }
.feeling-support--v2 .fs-emoji { font-size: 2.1rem; display: block; margin: 0; line-height: 1; flex: 0 0 auto; }
.feeling-support--v2 .fs-name { font-size: 1.3rem; margin: 0; line-height: 1.2; }
.feeling-support--v2 .fs-sub { font-size: 0.85rem; margin: 2px 0 0; max-width: none; text-align: left; }
.fs-card-step { font-size: 0.92rem; line-height: 1.55; color: var(--ink); margin: 12px 0 0; }
.fs-step-label { display: inline-block; font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-right: 7px; }
/* "your words" — the friend in your pocket / your own past reassurance */
.fs-yours { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line)); border-left: 3px solid var(--accent); border-radius: 12px; padding: 12px 15px; margin-bottom: 16px; }
.fs-yours-label { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 5px; }
.fs-yours-text { font-family: 'Newsreader', Georgia, serif; font-size: 1.02rem; line-height: 1.6; color: var(--ink); margin: 0; }
/* TWO boxes (owner): BRIEF = our POV (plain, quiet); WHAT CAN HELP = the default/custom resolution (highlighted) */
.fs-brief { margin: 0 0 12px; }
.fs-brief-text { font-family: 'Newsreader', Georgia, serif; font-size: 1.06rem; line-height: 1.6; color: var(--ink); margin: 0; }
.fs-helps { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-left: 4px solid var(--accent); border-radius: 12px; padding: 12px 15px; margin: 0 0 16px; }
.fs-helps-label { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin: 0 0 5px; }
.fs-helps-text { font-size: 0.98rem; line-height: 1.55; color: var(--ink); margin: 0; }
/* Diary feeling section: brief, the editable "what helps" box (pre-filled with our default), and the history label */
.emodiary-brief { font-family: 'Newsreader', Georgia, serif; font-size: 1rem; line-height: 1.6; color: var(--ink); margin: 0 0 14px; }
.emodiary-helps { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-left: 4px solid var(--accent); border-radius: 12px; padding: 13px 15px; margin: 0 0 18px; }
.emodiary-helps-label { display: block; font-size: 0.84rem; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.emodiary-helps-sub { font-weight: 400; font-size: 0.78rem; color: var(--ink-soft); }
.emodiary-helps-input { display: block; width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 0.95rem; line-height: 1.55; background: var(--surface); color: var(--ink); resize: vertical; }
.emodiary-helps-input:focus { outline: none; border-color: var(--accent); }
.emodiary-helps-row { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.emodiary-helps-save { padding: 8px 18px; border-radius: 999px; border: none; background: var(--accent); color: #fff; font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.emodiary-helps-status { font-size: 0.78rem; color: var(--accent); }
.emodiary-history-label { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin: 4px 0 10px; }
/* exactly two doors */
.fs-doors { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
/* the quick jot — one or two lines, just to remember */
.fs-jot { margin-bottom: 8px; }
.fs-jot-label { display: block; font-size: 0.82rem; color: var(--ink-soft); }
.fs-jot-hint { color: var(--ink-soft); opacity: 0.82; }
.fs-jot-input { display: block; width: 100%; box-sizing: border-box; margin-top: 7px; border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; font: inherit; font-size: 0.92rem; line-height: 1.5; background: var(--surface); color: var(--ink); resize: none; }
.fs-jot-input:focus { outline: none; border-color: var(--accent); }
.fs-jot-saved { font-size: 0.74rem; color: var(--accent); margin: 6px 0 0; opacity: 0; transition: opacity 0.3s; }
.fs-jot-saved.is-on { opacity: 1; }
.feeling-support--v2 .fs-name { font-size: 1.42rem; }
.fs-yours-by { font-size: 0.72rem; color: var(--ink-soft); font-style: italic; text-align: right; margin: 8px 0 0; }

/* The whole screen breathes — a soft glow eases out from the centre and back (center→edge→center), a
   wordless calm presence to let the eyes and breath settle on. Replaces the dot + "here with you" label. */
.emotion-panel.feeling-support-mode .support-hdr,
.emotion-panel.feeling-support-mode .support-scroll { position: relative; z-index: 1; }
.fs-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.8s ease; overflow: hidden; }
.emotion-panel.feeling-support-mode .fs-ambient { opacity: 1; }
.fs-ambient::before { content: ''; position: absolute; inset: -20%; transform-origin: center;
  background: radial-gradient(circle at 50% 47%, color-mix(in srgb, var(--accent) 34%, transparent) 0%, color-mix(in srgb, var(--accent) 13%, transparent) 32%, transparent 62%); }
@media (prefers-reduced-motion: no-preference) { .fs-ambient::before { animation: fs-ambient-breathe 6.8s ease-in-out infinite; } }
@media (prefers-reduced-motion: reduce) { .fs-ambient::before { transform: scale(1); opacity: 0.75; } }
@keyframes fs-ambient-breathe { 0%, 100% { transform: scale(0.68); opacity: 0.5; } 50% { transform: scale(1.18); opacity: 1; } }

/* Phone design pass: core icon → small + centered in the top bar; feeling name centered; boxes made
   translucent so the breathing glow reads THROUGH them; the personal-note box highlighted so the eye
   lands on your own words (brain-training recall as the feelings section gets used over time). */
.emotion-panel.feeling-support-mode .support-hdr { position: relative; }
.emotion-panel.feeling-support-mode .support-hdr-title { position: absolute; left: 0; right: 0; flex: none; text-align: center; font-size: 1.5rem; line-height: 1; pointer-events: none; }
.feeling-support--v2 .fs-card-head { display: block; text-align: center; }
.feeling-support--v2 .fs-card-head .fs-sub { text-align: center; max-width: none; }
.feeling-support--v2 .fs-name { margin: 0 0 3px; }
/* translucent surfaces — the glow breathes through them instead of being cut into blocks */
.feeling-support--v2 .fs-card { background: color-mix(in srgb, var(--surface-2) 72%, transparent); }
.feeling-support--v2 .fs-doors .fs-action--tool { background: color-mix(in srgb, var(--surface-2) 72%, transparent); }
.feeling-support--v2 .fs-jot-input { background: color-mix(in srgb, var(--surface) 64%, transparent); }
/* the personal note — HIGHLIGHTED so your own coping words draw the eye */
.feeling-support--v2 .fs-yours { background: color-mix(in srgb, var(--accent) 17%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-left: 4px solid var(--accent); box-shadow: 0 4px 24px color-mix(in srgb, var(--accent) 16%, transparent); }
.feeling-support--v2 .fs-yours-text { font-size: 1.06rem; }
/* a touch more presence now the boxes let it through */
.fs-ambient::before { background: radial-gradient(circle at 50% 47%, color-mix(in srgb, var(--accent) 42%, transparent) 0%, color-mix(in srgb, var(--accent) 17%, transparent) 33%, transparent 64%); }
/* light mode: an accent glow washes out on the cream surface, so push it noticeably stronger there */
:root[data-theme="light"] .fs-ambient::before,
:root[data-theme="system"] .fs-ambient::before { background: radial-gradient(circle at 50% 47%, color-mix(in srgb, var(--accent) 60%, transparent) 0%, color-mix(in srgb, var(--accent) 26%, transparent) 33%, transparent 64%); }
@media (prefers-color-scheme: dark) { :root[data-theme="system"] .fs-ambient::before { background: radial-gradient(circle at 50% 47%, color-mix(in srgb, var(--accent) 42%, transparent) 0%, color-mix(in srgb, var(--accent) 17%, transparent) 33%, transparent 64%); } }

/* "Stay with me" companion sheet — rises over the feeling screen (still dimly visible behind), so you
   feel held without being pulled away from the feeling. Lives inside the emotion panel. */
.stay-sheet { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; justify-content: flex-end; }
.stay-scrim { position: absolute; inset: 0; background: rgba(20,18,16,0.55); opacity: 0; transition: opacity 0.35s ease; cursor: pointer; }
.stay-sheet.is-open .stay-scrim { opacity: 1; }
.stay-card { position: relative; background: var(--surface); border-top-left-radius: 22px; border-top-right-radius: 22px; border-top: 1px solid var(--line); padding: 32px 24px calc(30px + env(safe-area-inset-bottom, 0px)); text-align: center; transform: translateY(100%); transition: transform 0.42s cubic-bezier(0.22,0.61,0.36,1); box-shadow: 0 -10px 40px rgba(0,0,0,0.28); }
.stay-sheet.is-open .stay-card { transform: translateY(0); }
.stay-msg { font-family: 'Newsreader', Georgia, serif; font-size: 1.25rem; line-height: 1.7; color: var(--ink); margin: 0 0 22px; }
.stay-msg--glad { margin: 0; }
.stay-ok { padding: 14px 30px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); color: var(--ink); font: inherit; font-size: 0.97rem; cursor: pointer; transition: background 0.15s, transform 0.1s; }
.stay-ok:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.stay-ok:active { transform: scale(0.98); }
/* a slow, calm breathing dot — just presence, nothing to do */
.stay-pulse { display: flex; justify-content: center; margin-bottom: 22px; }
.stay-pulse span { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); animation: stayPulse 4s ease-in-out infinite; }
.stay-pulse--still span { animation: none; opacity: 0.55; }
@keyframes stayPulse { 0%,100% { transform: scale(0.7); opacity: 0.4; } 50% { transform: scale(1.25); opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) { .stay-pulse span { animation: none; opacity: 0.7; } }

/* ===== Feelings Today tab (the emotional home) ===== */
.feelings-section { padding: 16px 16px 90px; }
.feelings-lead { font-family: 'Newsreader', Georgia, serif; font-size: 1.12rem; line-height: 1.5; color: var(--ink); margin: 6px 2px 18px; }
.feelings-core-grid { margin-bottom: 16px; }
.feelings-diary-btn { display: block; width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface)); color: var(--ink); font: inherit; font-size: 0.95rem; cursor: pointer; transition: background 0.15s; }
.feelings-diary-btn:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }

/* Past-day Feelings recap — read-back cards of what was noted that day */
.feelings-recap-card { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--surface)), var(--surface)); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 0 0 10px; }
.frc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.frc-emoji { font-size: 1.3rem; line-height: 1; }
.frc-name { font-weight: 600; font-size: 1rem; color: var(--ink); flex: 1; }
.frc-time { font-size: 0.74rem; color: var(--ink-soft); flex-shrink: 0; }
.frc-here { font-size: 0.92rem; line-height: 1.55; color: var(--ink); margin: 0 0 6px; }
.frc-helped { font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.frc-helped span { color: var(--accent); font-weight: 600; }
.frc-remove { background: none; border: none; color: var(--ink-soft); font-size: 0.85rem; cursor: pointer; padding: 2px 6px; border-radius: 6px; flex-shrink: 0; transition: color 0.15s; }
.frc-remove:hover { color: var(--ink); }
.frc-field { display: block; margin-top: 8px; }
.frc-flabel { display: block; font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.frc-edit { width: 100%; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; font: inherit; font-size: 0.9rem; line-height: 1.5; color: var(--ink); resize: vertical; outline: none; }
.frc-edit:focus { border-color: var(--accent); }
.feelings-recap-empty { text-align: center; padding: 40px 20px; }
.feelings-recap-icon { font-size: 2.2rem; }
.feelings-recap-empty p { color: var(--ink); margin: 12px 0 0; }
.feelings-recap-sub { font-size: 0.85rem; color: var(--ink-soft) !important; margin-top: 6px !important; }

/* ===== Emotion Diary ===== */
.emodiary-overview { font-size: 0.86rem; line-height: 1.55; color: var(--ink-soft); margin: 2px 2px 16px; }
.emodiary-empty { text-align: center; padding: 48px 20px; }
.emodiary-empty-icon { font-size: 2.4rem; }
.emodiary-empty p { color: var(--ink); margin: 12px 0 0; }
.emodiary-empty-sub { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; margin-top: 8px !important; }
.emodiary-chapter { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; margin-bottom: 9px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; font: inherit; transition: background 0.15s; }
.emodiary-chapter:hover { background: var(--surface-2); }
.emodiary-chapter-emoji { font-size: 1.6rem; line-height: 1; }
.emodiary-chapter-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.emodiary-chapter-name { font-size: 0.98rem; font-weight: 600; color: var(--ink); }
.emodiary-chapter-meta { font-size: 0.78rem; color: var(--ink-soft); }
.emodiary-chapter-chev { color: var(--ink-soft); font-size: 1.2rem; }
.emodiary-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
.emodiary-filter { font: inherit; font-size: 0.82rem; padding: 6px 13px; min-height: var(--tap); border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; }
.emodiary-filter.is-on { background: var(--accent); color: #fff; border-color: var(--accent); }
html[data-theme="dark"] .emodiary-filter.is-on { background: #2f5a2a; }
@media (prefers-color-scheme: dark) { html[data-theme="system"] .emodiary-filter.is-on { background: #2f5a2a; } }
.emodiary-entry { border: 1px solid var(--line); border-left: 3px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 12px; padding: 12px 14px; margin-bottom: 11px; background: var(--surface); }
.emodiary-entry-meta { font-size: 0.76rem; color: var(--ink-soft); margin: 0 0 7px; letter-spacing: 0.02em; }
.emodiary-entry-here { font-size: 0.92rem; line-height: 1.55; color: var(--ink); margin: 0 0 8px; white-space: pre-wrap; }
.emodiary-entry-helped { font-size: 0.88rem; line-height: 1.5; color: var(--ink); margin: 0; }
.emodiary-entry-helped span, .emodiary-past-helped span { color: var(--accent); font-weight: 600; }
.emodiary-add { display: block; width: 100%; margin-top: 6px; padding: 13px; border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 13px; background: transparent; color: var(--accent); font: inherit; font-size: 0.9rem; cursor: pointer; }
/* deepening (the calm look-back): tappable entries, a "read deeper" door, the loop hint on the write screen */
.emodiary-read { display: block; width: 100%; text-align: left; margin: 0 0 14px; padding: 11px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); color: var(--ink); font: inherit; font-size: 0.92rem; cursor: pointer; transition: background 0.15s; }
.emodiary-read:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.emodiary-entry--edit { cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.emodiary-entry--edit:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.emodiary-entry--edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.emodiary-entry-add { font-size: 0.84rem; color: var(--accent); margin: 4px 0 0; font-weight: 500; }
.emodiary-loop-hint { font-size: 0.84rem; line-height: 1.55; color: var(--ink-soft); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-radius: 10px; padding: 10px 13px; margin: 2px 0 16px; }
.emodiary-loop-hint em { font-style: normal; font-weight: 600; color: var(--ink); }
/* writer */
.emodiary-past { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; margin-bottom: 18px; }
.emodiary-past-lead { font-size: 0.82rem; color: var(--ink-soft); margin: 0 0 10px; }
.emodiary-past-card { padding: 9px 0; border-top: 1px solid var(--line); }
.emodiary-past-card:first-of-type { border-top: none; padding-top: 0; }
.emodiary-past-meta { font-size: 0.74rem; color: var(--ink-soft); margin: 0 0 4px; }
.emodiary-past-here { font-size: 0.86rem; line-height: 1.5; color: var(--ink); margin: 0 0 4px; }
.emodiary-past-helped { font-size: 0.84rem; line-height: 1.45; color: var(--ink); margin: 0; }
.emodiary-field { display: block; margin-bottom: 16px; }
.emodiary-q { display: block; font-size: 0.9rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.emodiary-q-sub { font-weight: 400; color: var(--ink-soft); font-size: 0.82rem; }
.emodiary-input { width: 100%; box-sizing: border-box; padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.95rem; line-height: 1.5; resize: vertical; }
.emodiary-input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; }
.emodiary-save { display: block; width: 100%; padding: 14px; border: none; border-radius: 13px; background: var(--accent); color: #fff; font: inherit; font-size: 0.95rem; cursor: pointer; }
.emodiary-note { font-size: 0.78rem; color: var(--ink-soft); text-align: center; margin: 12px 0 0; }

/* ===== Three good things ===== */
.goodthings-overlay { position: fixed; inset: 0; z-index: 1150; display: flex; align-items: flex-end; justify-content: center; }
.goodthings-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 0.25s; }
.goodthings-overlay.is-open .goodthings-backdrop { background: rgba(0,0,0,0.4); }
.goodthings-sheet { position: relative; width: 100%; max-width: var(--maxw); box-sizing: border-box; background: var(--bg); border-radius: 22px 22px 0 0; padding: 20px 18px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0,0,0,0.2); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
.goodthings-overlay.is-open .goodthings-sheet { transform: none; }
.gt-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.gt-title { font-family: 'Newsreader', Georgia, serif; font-size: 1.32rem; font-weight: 500; color: var(--ink); }
.gt-close { width: 32px; height: 32px; border: none; border-radius: 50%; background: var(--surface-2); color: var(--ink-soft); cursor: pointer; font-size: 0.85rem; }
.gt-sub { font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); margin: 0 0 16px; }
.gt-fields { display: flex; flex-direction: column; gap: 10px; }
.gt-row { display: flex; align-items: center; gap: 11px; }
.gt-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); font-size: 0.82rem; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.gt-input { flex: 1; min-width: 0; font: inherit; font-size: 0.95rem; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); outline: none; transition: border-color 0.15s; }
.gt-input:focus { border-color: var(--accent); }
.gt-foot { font-size: 0.8rem; color: var(--ink-soft); text-align: center; margin: 16px 0 0; }
.today-extra--goodthings { background: linear-gradient(180deg, color-mix(in srgb, #c9a86a 12%, var(--surface)), var(--surface)); }
.today-extra--letter { background: linear-gradient(180deg, color-mix(in srgb, #b07aa0 13%, var(--surface)), var(--surface)); }

/* ===== Worry release ===== */
.worry-overlay { position: fixed; inset: 0; z-index: 1150; display: flex; align-items: flex-end; justify-content: center; }
.worry-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 0.25s; }
.worry-overlay.is-open .worry-backdrop { background: rgba(0,0,0,0.4); }
.worry-sheet { position: relative; width: 100%; max-width: var(--maxw); box-sizing: border-box; background: var(--bg); border-radius: 22px 22px 0 0; padding: 22px 18px calc(24px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0,0,0,0.2); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
.worry-overlay.is-open .worry-sheet { transform: none; }
.worry-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: none; border-radius: 50%; background: var(--surface-2); color: var(--ink-soft); cursor: pointer; }
.worry-prompt { font-family: 'Newsreader', Georgia, serif; font-size: 1.25rem; color: var(--ink); margin: 4px 0 14px; }
.worry-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.98rem; line-height: 1.5; padding: 13px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); outline: none; resize: vertical; transition: transform 0.6s ease, opacity 0.6s ease; }
.worry-input:focus { border-color: var(--accent); }
.worry-input.worry-fly { transform: translateY(-42px) scale(0.96); opacity: 0; }
.worry-release-btn { display: block; width: 100%; margin-top: 14px; padding: 13px; border: none; border-radius: 14px; background: var(--accent); color: #fff; font-family: inherit; font-size: 0.96rem; font-weight: 600; cursor: pointer; }
.worry-done { text-align: center; padding: 14px 8px 8px; }
.worry-done-icon { font-size: 3rem; margin-bottom: 12px; animation: worry-float 3.2s ease-in-out infinite; }
@keyframes worry-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.worry-done-msg { font-size: 1rem; line-height: 1.6; color: var(--ink); margin: 0 0 22px; }
.worry-done-close { padding: 11px 32px; border: 1.5px solid var(--line); border-radius: 999px; background: none; color: var(--ink); font-family: inherit; font-size: 0.9rem; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .worry-done-icon { animation: none; } .worry-input.worry-fly { transition: opacity 0.3s; transform: none; } }

/* ===== Letters to yourself ===== */
.letters-body { padding: 22px 20px 48px; max-width: 600px; margin: 0 auto; }
.letters-intro { font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 18px; }
.letters-write-btn { display: block; width: 100%; padding: 14px; border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--accent-ink); font-family: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; margin-bottom: 18px; }
.letters-list { display: flex; flex-direction: column; gap: 10px; }
.letters-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; font-family: inherit; }
.letters-item--ready { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 11%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.letters-item--sealed { opacity: 0.68; }
.letters-item-icon { font-size: 1.5rem; flex-shrink: 0; }
.letters-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.letters-item-meta { font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.letters-item-when { font-size: 0.78rem; color: var(--ink-soft); }
.letters-text { width: 100%; box-sizing: border-box; font-family: 'Newsreader', Georgia, serif; font-size: 1.05rem; line-height: 1.7; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); outline: none; resize: vertical; }
.letters-text:focus { border-color: var(--accent); }
.letters-when { margin: 16px 0; display: flex; flex-direction: column; gap: 10px; }
.letters-when-label { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
.letters-radio { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--ink); flex-wrap: wrap; }
.letters-date { font: inherit; font-size: 0.85rem; padding: 6px 9px; border: 1.5px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); }
.letters-actions { display: flex; gap: 10px; }
.letters-cancel { flex: 1; padding: 12px; border: 1.5px solid var(--line); border-radius: 12px; background: none; color: var(--ink-soft); font-family: inherit; cursor: pointer; }
.letters-save { flex: 2; padding: 12px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font-family: inherit; font-weight: 600; cursor: pointer; }
.letters-read-meta { font-size: 0.8rem; color: var(--ink-soft); margin: 0 0 16px; }
.letters-read-body p { font-family: 'Newsreader', Georgia, serif; font-size: 1.12rem; line-height: 1.75; color: var(--ink); margin: 0 0 16px; }
.letters-back-list { margin-top: 18px; padding: 10px 18px; border: 1.5px solid var(--line); border-radius: 999px; background: none; color: var(--ink); font-family: inherit; font-size: 0.88rem; cursor: pointer; }

/* ===== Make this space yours (gentle first-run) ===== */
.myours-overlay { position: fixed; inset: 0; z-index: 1150; display: flex; align-items: flex-end; justify-content: center; }
.myours-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 0.25s; }
.myours-overlay.is-open .myours-backdrop { background: rgba(0,0,0,0.4); }
.myours-sheet { position: relative; width: 100%; max-width: var(--maxw); box-sizing: border-box; background: var(--bg); border-radius: 22px 22px 0 0; padding: 20px 18px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0,0,0,0.2); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); max-height: 88vh; overflow-y: auto; }
.myours-overlay.is-open .myours-sheet { transform: none; }
.myours-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: none; border-radius: 50%; background: var(--surface-2); color: var(--ink-soft); cursor: pointer; }
.myours-q { font-size: 0.86rem; font-weight: 600; color: var(--ink); margin: 0 0 9px; }
.myours-actions { display: flex; gap: 10px; margin-top: 20px; }
.myours-skip { flex: 1; padding: 12px; border: 1.5px solid var(--line); border-radius: 12px; background: none; color: var(--ink-soft); font-family: inherit; cursor: pointer; }
.myours-save { flex: 2; padding: 12px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font-family: inherit; font-weight: 600; cursor: pointer; }
.today-extra--myours { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface)); }
.today-extra-x { flex-shrink: 0; width: 28px; height: 28px; border: none; border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer; font-size: 0.8rem; opacity: 0.6; align-self: flex-start; }
.today-extra-x:active { background: var(--surface-2); }

/* ===== Grounding (5-4-3-2-1) ===== */
.ground-overlay {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 28px;
  background: radial-gradient(120% 90% at 50% 35%, #3a4a3c 0%, #27332a 55%, #161e18 100%);
  opacity: 0; transition: opacity 0.5s ease;
}
.ground-overlay.is-open { opacity: 1; }
.ground-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255,255,255,0.08); color: #dfeada; font-size: 1rem; cursor: pointer; }
.ground-close:hover { background: rgba(255,255,255,0.16); }
.ground-stage { text-align: center; max-width: 360px; }
.ground-count { font-family: 'Newsreader', Georgia, serif; font-size: 4.5rem; line-height: 1; color: #a9c99a; margin-bottom: 10px; }
.ground-prompt { font-family: 'Newsreader', Georgia, serif; font-size: 1.5rem; line-height: 1.35; color: #eef4ea; margin: 0 0 12px; }
.ground-hint { font-size: 0.92rem; line-height: 1.55; color: #a9bda4; margin: 0 0 30px; }
.ground-next { font-family: inherit; font-size: 0.95rem; font-weight: 600; color: #1a241c; background: #dfeada; border: none; border-radius: 999px; padding: 12px 34px; cursor: pointer; transition: transform 0.12s, background 0.2s; }
.ground-next:hover { background: #fff; }
.ground-next:active { transform: scale(0.96); }
.ground-dots { display: flex; gap: 8px; justify-content: center; margin-top: 26px; }
.ground-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.18); transition: background 0.2s; }
.ground-dot.is-on { background: #a9c99a; }
@media (prefers-reduced-motion: reduce) { .ground-overlay { transition: opacity 0.2s; } }

/* ===== Monthly report card (home screen prompt) ===== */
.monthly-report-card { margin: 4px 12px 4px; background: rgba(74,103,65,0.08); border: 1.5px solid rgba(74,103,65,0.25); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: background 0.15s; }
.monthly-report-card:hover { background: rgba(74,103,65,0.13); }
.monthly-report-icon { font-size: 1.4rem; flex-shrink: 0; }
.monthly-report-body { flex: 1; min-width: 0; }
.monthly-report-title { font-size: 0.9rem; font-weight: 600; color: var(--accent); margin: 0 0 2px; }
.monthly-report-sub { font-size: 0.78rem; color: var(--ink-soft); margin: 0; }
.monthly-report-arrow { color: var(--accent); font-size: 1.1rem; flex-shrink: 0; }

/* Monthly report in profile overlay */
.monthly-report-section { background: rgba(74,103,65,0.07); border: 1px solid rgba(74,103,65,0.2); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.monthly-report-header { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin: 0 0 10px; }
.monthly-report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.monthly-stat { background: var(--surface); border-radius: 10px; padding: 10px 12px; border: 1px solid var(--line); }
.monthly-stat-val { font-size: 1.5rem; font-weight: 700; color: var(--ink); line-height: 1; }
.monthly-stat-label { font-size: 0.72rem; color: var(--ink-soft); margin-top: 3px; }
.monthly-insight { font-size: 0.88rem; color: var(--ink); line-height: 1.55; margin: 8px 0 0; font-style: italic; }
.monthly-report-seen-btn { background: none; border: none; font: inherit; font-size: 0.78rem; color: var(--ink-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 8px 0 0; }

/* ===== Profile Trackers section ===== */
.trackers-list { display: flex; flex-direction: column; gap: 8px; }

.tracker-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tracker-card--open { border-color: var(--accent); }

.tracker-header {
  display: flex; align-items: center; gap: 10px;
  width: 100%; background: none; border: none; padding: 12px 14px;
  cursor: pointer; text-align: left; font: inherit;
}
.tracker-header:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; border-radius: 12px; }
.tracker-header:active { background: var(--surface-3, var(--line)); }

.tracker-icon { font-size: 1.1rem; flex-shrink: 0; }
.tracker-title { font-size: 0.9rem; font-weight: 600; color: var(--ink); flex: 1; text-align: left; }
.tracker-summary { font-size: 0.78rem; color: var(--ink-soft); white-space: nowrap; font-style: italic; }
.tracker-chevron { font-size: 1.1rem; color: var(--ink-soft); transform: rotate(0deg); transition: transform 0.2s ease; flex-shrink: 0; }
.tracker-card--open .tracker-chevron { transform: rotate(90deg); }

.tracker-body { padding: 0 14px 14px; border-top: 1px solid var(--line); }

.tracker-empty { font-size: 0.85rem; color: var(--ink-soft); font-style: italic; padding: 8px 0; margin: 0; }

/* Journal tracker */
.tracker-journal-list { display: flex; flex-direction: column; }
.tracker-journal-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.tracker-journal-row:last-child { border-bottom: none; }
.tracker-journal-row:hover .tracker-journal-preview { color: var(--accent); }
.tracker-journal-date { font-size: 0.78rem; color: var(--ink-soft); font-weight: 600; flex-shrink: 0; min-width: 44px; }
.tracker-journal-preview { font-size: 0.85rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }

/* Sleep tracker */
.tracker-sleep-scores { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 8px; }
.tracker-score-chip { background: rgba(74,103,65,0.1); border: 1px solid rgba(74,103,65,0.2); border-radius: 20px; padding: 4px 10px; font-size: 0.78rem; color: var(--accent); }
.tracker-sleep-list { display: flex; flex-direction: column; }
.tracker-sleep-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); }
.tracker-sleep-row:first-child { border-top: none; }
.tracker-sleep-date { font-size: 0.78rem; color: var(--ink-soft); flex: 1; }
.tracker-sleep-hours { font-size: 0.88rem; font-weight: 600; color: var(--ink); min-width: 28px; text-align: right; }
.tracker-sleep-quality { font-size: 1rem; flex-shrink: 0; }

/* Habit tracker */
.tracker-habit-row { padding: 10px 0; border-top: 1px solid var(--line); }
.tracker-habit-row:first-child { border-top: none; }
.tracker-habit-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tracker-habit-name { font-size: 0.88rem; color: var(--ink); font-weight: 500; }
.tracker-habit-pct { font-size: 0.82rem; color: var(--accent); font-weight: 600; }
.tracker-habit-bar { height: 6px; background: var(--surface-3, var(--line)); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.tracker-habit-fill { height: 100%; background: rgba(74,103,65,0.55); border-radius: 3px; transition: width 0.4s ease; }
.tracker-habit-expand-btn { background: none; border: none; font: inherit; font-size: 0.78rem; color: var(--accent); cursor: pointer; padding: 4px 0; text-decoration: underline; text-underline-offset: 2px; }
.tracker-habit-expand-btn:hover { opacity: 0.75; }
.tracker-habit-days { padding-top: 8px; }
.tracker-habit-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tracker-day-chip { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; font-size: 0.75rem; font-weight: 500; background: var(--surface-3, var(--line)); color: var(--ink-soft); border: 1px solid transparent; cursor: default; }
.tracker-day-chip--done { background: rgba(74,103,65,0.2); color: var(--accent); border-color: rgba(74,103,65,0.3); }

/* Todo tracker */
.tracker-todo-score { padding: 10px 0 6px; }
.tracker-todo-bar-wrap { height: 8px; background: var(--surface-3, var(--line)); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.tracker-todo-bar-fill { height: 100%; background: rgba(74,103,65,0.55); border-radius: 4px; transition: width 0.4s ease; }
.tracker-todo-label { font-size: 0.85rem; color: var(--ink); font-weight: 500; margin: 0 0 4px; }
.tracker-todo-advice { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5; margin: 0; font-style: italic; padding-top: 4px; border-top: 1px solid var(--line); }

/* ========== Tracker full-screen views ========== */
.tracker-screen {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 80;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}
.tracker-screen.is-open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .tracker-screen { transition: none; } }

.tracker-screen-hdr {
  display: flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 16px 0 4px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0; background: var(--surface);
}
.tracker-screen-back {
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--ink); cursor: pointer; border-radius: 10px;
}
.tracker-screen-back:hover { background: var(--surface-2); }
.tracker-screen-icon { font-size: 1.25rem; }
.tracker-screen-title { font-size: 1.05rem; font-weight: 600; color: var(--ink); flex: 1; }
.tracker-screen-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 48px; }

/* stat chips shared across all screens */
.ts-stat-row { display: flex; gap: 8px; padding: 14px 14px 10px; flex-wrap: wrap; }
.ts-stat-chip {
  background: rgba(74,103,65,0.1); border: 1px solid rgba(74,103,65,0.22);
  border-radius: 20px; padding: 5px 12px;
  font-size: 0.81rem; font-weight: 500; color: var(--ink);
}

/* Journal entries list */
.ts-journal-entry {
  padding: 13px 16px; border-bottom: 1px solid var(--line);
  cursor: pointer; display: flex; flex-direction: column; gap: 4px;
}
.ts-journal-entry:active { background: var(--surface-2); }
.ts-journal-date { font-size: 0.8rem; font-weight: 600; color: var(--accent); }
.ts-journal-preview {
  font-size: 0.88rem; color: var(--ink); opacity: 0.78;
  line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Sleep chart */
.ts-sleep-chart { padding: 12px 16px 8px; }
.ts-sleep-chart-label {
  font-size: 0.71rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink); opacity: 0.45; margin-bottom: 10px;
}
.ts-sleep-bars { display: flex; align-items: flex-end; gap: 5px; height: 64px; }
.ts-sleep-bar-wrap {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 4px; height: 100%; justify-content: flex-end;
}
.ts-sleep-bar { width: 100%; border-radius: 4px 4px 0 0; background: var(--accent); opacity: 0.65; min-height: 3px; }
.ts-sleep-bar-day { font-size: 0.72rem; color: var(--ink); opacity: 0.5; }
.ts-sleep-list-item {
  padding: 13px 16px; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
}
.ts-sleep-list-date { font-size: 0.87rem; color: var(--ink); }
.ts-sleep-list-hours { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.ts-sleep-list-quality { font-size: 0.82rem; color: var(--ink); opacity: 0.65; }

/* Habits sections */
.ts-habit-section { padding: 16px; border-bottom: 1px solid var(--line); }
.ts-habit-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ts-habit-name { font-size: 0.95rem; font-weight: 600; color: var(--ink); flex: 1; }
.ts-habit-streak {
  font-size: 0.78rem; background: rgba(74,103,65,0.12);
  color: var(--accent); padding: 3px 8px; border-radius: 20px; font-weight: 600;
}
.ts-habit-stats {
  display: flex; gap: 6px; margin-bottom: 12px;
  font-size: 0.78rem; color: var(--ink); opacity: 0.6;
}
.ts-habit-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.ts-habit-day {
  aspect-ratio: 1; border-radius: 3px;
  background: var(--surface-2, rgba(128,128,128,0.12));
}
.ts-habit-day--done { background: var(--accent); opacity: 0.72; }
.ts-habit-day--today { box-shadow: 0 0 0 2px var(--accent); }

/* Tasks screen */
.ts-tasks-summary { padding: 14px 16px 10px; }
.ts-tasks-bar-wrap { height: 8px; background: var(--surface-2); border-radius: 4px; margin-bottom: 8px; overflow: hidden; }
.ts-tasks-bar-fill { height: 100%; background: var(--accent); border-radius: 4px; }
.ts-tasks-bar-label { font-size: 0.82rem; color: var(--ink); opacity: 0.65; }
.ts-tasks-section-label {
  font-size: 0.71rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink); opacity: 0.45; padding: 14px 16px 6px;
}
.ts-task-row { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 10px; }
.ts-task-check {
  width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--line);
  flex-shrink: 0; margin-top: 2px;
  display: flex; align-items: center; justify-content: center; background: none;
}
.ts-task-check--done { border-color: var(--accent); background: var(--accent); }
.ts-task-title { font-size: 0.9rem; color: var(--ink); line-height: 1.4; }
.ts-task-title--done { text-decoration: line-through; opacity: 0.4; }
.ts-task-due { font-size: 0.75rem; opacity: 0.55; color: var(--ink); margin-top: 2px; }
.ts-task-overdue .ts-task-due { color: var(--danger); opacity: 1; font-weight: 500; }

/* ---- Habits Tracker v2: compact rows + monthly calendar ---- */
.ts-hrow { border-bottom: 1px solid var(--line); }
.ts-hrow-main { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.ts-hrow-name { flex: 1; font-size: 0.95rem; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-hrow-acts { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.ts-hstk { font-size: 0.78rem; font-weight: 600; background: rgba(74,103,65,0.12); color: var(--accent); padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.ts-hstk-zero { background: transparent; color: var(--ink); opacity: 0.28; }
.ts-hgear, .ts-hchev { min-width: 36px; min-height: 36px; width: 36px; height: 36px; border-radius: 50%; border: none; background: none; cursor: pointer; font-size: 0.9rem; color: var(--ink); opacity: 0.5; display: flex; align-items: center; justify-content: center; }
.ts-hgear:active, .ts-hchev:active { background: var(--surface-2); opacity: 1; }
.ts-hcalwrap { padding: 0 16px 14px; border-top: 1px solid var(--line); }
.ts-hmonth { margin-bottom: 14px; }
.ts-hmlabel { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); opacity: 0.42; margin: 10px 0 5px; }
.ts-hcgrid { display: grid; grid-template-columns: repeat(7, 26px); gap: 2px; }
.ts-hcdow { font-size: 0.72rem; width: 26px; text-align: center; opacity: 0.32; color: var(--ink); padding: 2px 0; }
.ts-hcell { width: 26px; height: 26px; border-radius: 8px; background: var(--surface-2, rgba(128,128,128,0.1)); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; color: var(--ink); opacity: 0.75; }
.ts-hcell span { pointer-events: none; }
.ts-hcell-empty { background: transparent !important; opacity: 0 !important; }
.ts-hcell-frozen { opacity: 0.18 !important; pointer-events: none; }
.ts-hcell-future { opacity: 0.18 !important; }
.ts-hcell-done { background: var(--accent) !important; color: #fff !important; opacity: 1 !important; }
.ts-hcell-today { box-shadow: 0 0 0 2px var(--accent); }

/* Habit edit bottom sheet */
.hedit-overlay { position: fixed; inset: 0; z-index: 120; }
.hedit-bd { position: absolute; inset: 0; background: rgba(0,0,0,0.42); }
.hedit-panel { position: absolute; bottom: 0; left: 0; right: 0; background: var(--bg); border-radius: 20px 20px 0 0; max-height: 82vh; overflow-y: auto; box-shadow: 0 -4px 24px rgba(0,0,0,0.14); }
.hedit-hdr { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; border-bottom: 1px solid var(--line); }
.hedit-ttl { flex: 1; font-size: 1rem; font-weight: 600; color: var(--ink); }
.hedit-x { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--surface-2); cursor: pointer; font-size: 0.82rem; color: var(--ink); opacity: 0.6; }
.hedit-body { padding: 16px; }
.hedit-lbl { display: block; font-size: 0.78rem; opacity: 0.52; margin-bottom: 6px; color: var(--ink); }
.hedit-inp { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 0.95rem; background: var(--surface); color: var(--ink); box-sizing: border-box; }
.hedit-inp:focus { outline: none; border-color: var(--accent); }
.hedit-sv { display: block; width: 100%; margin-top: 10px; padding: 12px; border-radius: 10px; background: var(--accent); color: #fff; border: none; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.hedit-sep { height: 1px; background: var(--line); margin: 20px 0; }
.hedit-dfut, .hedit-dall { display: block; width: 100%; text-align: left; padding: 12px; border-radius: 10px; margin-bottom: 6px; border: 1.5px solid var(--danger); color: var(--danger); background: var(--danger-bg); font-size: 0.88rem; cursor: pointer; box-sizing: border-box; }
.hedit-desc { font-size: 0.75rem; color: var(--ink); opacity: 0.48; margin: 0 0 14px; line-height: 1.5; }

/* ---- Tasks Tracker v2: consistency analytics ---- */
.ts-ta-hdr { padding: 24px 16px 14px; text-align: center; border-bottom: 1px solid var(--line); }
.ts-ta-score { font-size: 3.4rem; font-weight: 700; line-height: 1; }
.ts-ta-slim { font-size: 0.77rem; color: var(--ink); opacity: 0.48; margin-top: 4px; }
.ts-ta-counts { display: flex; justify-content: center; gap: 6px; font-size: 0.76rem; color: var(--ink); opacity: 0.55; margin-top: 8px; }
.ts-ta-chart-wrap { padding: 16px 16px 0; }
.ts-ta-chart-title { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); opacity: 0.42; margin-bottom: 10px; }
.ts-ta-chart { display: flex; gap: 5px; height: 88px; align-items: flex-end; }
.ts-ta-wcol { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.ts-ta-wbar-wrap { flex: 1; width: 100%; background: var(--surface-2, rgba(128,128,128,0.12)); border-radius: 4px 4px 0 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.ts-ta-wbar { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; }
.ts-ta-wbar-low { background: #e08c3a; }
.ts-ta-wno { text-align: center; font-size: 0.72rem; opacity: 0.3; color: var(--ink); padding-top: 6px; }
.ts-ta-wpct { font-size: 0.70rem; color: var(--ink); opacity: 0.55; margin-top: 3px; white-space: nowrap; }
.ts-ta-wlbl { font-size: 0.58rem; color: var(--ink); opacity: 0.38; text-align: center; white-space: nowrap; margin-top: 2px; }
.ts-ta-advice { margin: 14px 16px 8px; border-radius: 14px; background: var(--surface); padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; }
.ts-ta-adv-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 1px; }
.ts-ta-adv-text { font-size: 0.86rem; color: var(--ink); line-height: 1.6; margin: 0; opacity: 0.85; }

/* ---- Journal Tracker v2: heatmap + mood pattern ---- */
.ts-jh-wrap { padding: 8px 12px 0; }
.ts-rd-hdr { text-align: center; padding: 28px 16px 16px; }
.ts-rd-big { font-family: 'Newsreader', Georgia, serif; font-size: 3.2rem; font-weight: 500; color: var(--accent); line-height: 1; }
.ts-rd-lbl { font-size: 0.9rem; font-weight: 600; color: var(--ink); margin-top: 4px; }
.ts-rd-sub { font-size: 0.78rem; color: var(--ink-soft); margin-top: 4px; }
.ts-rd-cal-wrap { padding: 0 12px 8px; }
.ts-rd-cell { border-radius: 8px; }
.ts-rd-cell--on { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.ts-rd-cell--on.ts-jhcell-today { background: var(--accent); color: #fff; }
.ts-rd-titles { padding: 8px 16px 4px; }
.ts-rd-titles-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 600; margin: 0 0 10px; }
.ts-rd-title-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.ts-rd-title-dot { font-size: 0.85rem; flex-shrink: 0; }
.ts-rd-title-text { font-size: 0.9rem; color: var(--ink); line-height: 1.4; }
.ts-rd-note { font-size: 0.8rem; color: var(--ink-soft); font-style: italic; text-align: center; padding: 18px 20px 32px; margin: 0; }
.ts-jh-month { margin-bottom: 16px; }
.ts-jh-mlabel { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); opacity: 0.42; margin-bottom: 6px; }
.ts-jh-grid { display: grid; grid-template-columns: repeat(7, 26px); gap: 2px; }
.ts-jh-dow { font-size: 0.72rem; width: 26px; text-align: center; opacity: 0.32; color: var(--ink); padding: 2px 0; }
.ts-jhcell { width: 26px; height: 26px; border-radius: 8px; background: var(--surface-2, rgba(128,128,128,0.1)); border: none; padding: 0; font: inherit; color: inherit; box-sizing: border-box; }
.ts-jhcell-empty { background: transparent; }
.ts-jhcell-future { opacity: 0.18; }
.ts-jhcell-l1 { background: rgba(74,103,65,0.22); }
.ts-jhcell-l2 { background: rgba(74,103,65,0.52); }
.ts-jhcell-l3 { background: rgba(74,103,65,0.88); }
.ts-jhcell-today { box-shadow: 0 0 0 2px var(--accent); }
.ts-jhcell-clickable { cursor: pointer; transition: transform 0.1s, box-shadow 0.15s; }
.ts-jhcell-clickable:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ts-jhcell-clickable:active { transform: scale(0.9); }
button.ts-jhcell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ts-jh-legend { display: flex; align-items: center; gap: 6px; padding: 0 0 14px; font-size: 0.72rem; color: var(--ink); opacity: 0.58; }
.ts-jh-legend .ts-jhcell { width: 14px; height: 14px; aspect-ratio: unset; flex-shrink: 0; border-radius: 3px; }
/* Day-of-month numbers on journal/reading tracker cells (orientation only — a date, not a score). */
.ts-jhcell { display: flex; align-items: center; justify-content: center; }
.ts-jhcell-d { font-size: 0.65rem; line-height: 1; color: var(--ink-soft); opacity: 0.72; pointer-events: none; font-variant-numeric: tabular-nums; }
.ts-jhcell-future .ts-jhcell-d { opacity: 0.5; }
.ts-jhcell-l2 .ts-jhcell-d, .ts-jhcell-l3 .ts-jhcell-d { color: #fff; opacity: 0.9; }
.ts-rd-cell--on.ts-jhcell-today .ts-jhcell-d { color: #fff; opacity: 0.95; }
.ts-jh-insight { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; background: var(--surface); border-radius: 12px; padding: 12px 14px; }
.ts-jh-ins-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.ts-jh-ins-text { font-size: 0.84rem; color: var(--ink); line-height: 1.55; opacity: 0.85; margin: 0; }
.ts-jh-nudge { margin: 0 0 14px; font-size: 0.81rem; color: var(--ink); opacity: 0.55; line-height: 1.5; font-style: italic; }

/* ---- Topbar tasks button ---- */
.topbar-tasks-btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: transparent; cursor: pointer; color: var(--ink); opacity: 0.65; display: flex; align-items: center; justify-content: center; }
.topbar-tasks-btn:active { opacity: 1; background: var(--surface-2); }

/* ---- Profile: Appearance section ---- */
.prof-appear-row { display: flex; align-items: center; justify-content: space-between; padding: 2px 0; }
.prof-appear-lbl { font-size: 0.88rem; color: var(--ink); opacity: 0.7; }
.prof-theme-btns { display: flex; gap: 6px; }
.prof-theme-opt { padding: 6px 12px; border-radius: 18px; border: 1.5px solid var(--line); background: transparent; font-size: 0.78rem; color: var(--ink); cursor: pointer; opacity: 0.65; }
.prof-theme-opt.active { border-color: var(--accent); background: var(--accent); color: #fff; opacity: 1; }

/* ---- Personalise swatches ---- */
.swatch-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 4px; }
.swatch-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--sw); border: none; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; flex-shrink: 0; position: relative; }
.swatch-btn:hover { transform: scale(1.12); }
/* Selected = a clear accent-coloured ring with a surface-coloured gap, so the chosen swatch is
   obvious on ANY colour in BOTH themes (the gap outlines pale background swatches; the accent ring
   reads as the brand highlight). Also a tick for zero ambiguity. */
.swatch-btn--active { transform: scale(1.1); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.swatch-btn--active::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.45); }

/* ---- All Tasks panel ---- */
/* Re-shelled onto .support-panel (v274): the atp-* children carry their own 16px insets, so zero the
   canonical .support-body horizontal padding for this variant to avoid doubling it. */
.support-body.atp-body { padding: 4px 0 48px; }
.atp-controls { padding: 10px 16px 6px; }
.atp-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.atp-sorts { display: flex; gap: 6px; flex-wrap: wrap; }
.atp-filter, .atp-sort { padding: 5px 12px; border-radius: 16px; border: 1.5px solid var(--line); background: transparent; font-size: 0.75rem; color: var(--ink); cursor: pointer; opacity: 0.6; }
.atp-filter.active, .atp-sort.active { border-color: var(--accent); color: var(--accent); opacity: 1; font-weight: 600; }
.atp-steps { color: var(--ink-soft); }
.atp-steps--all { color: var(--accent); }
.atp-count { font-size: 0.72rem; color: var(--ink); opacity: 0.42; padding: 4px 16px 6px; margin: 0; }
.atp-list { padding: 0 16px 24px; }
.atp-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.atp-row:last-child { border-bottom: none; }
.atp-row--done .atp-title { text-decoration: line-through; opacity: 0.45; }
/* 44px hit target (a11y) with the visible 26px box drawn by an inner span. */
.atp-check { width: var(--tap); height: var(--tap); border: none; background: transparent; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; }
.atp-check-box { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line); background: transparent; display: flex; align-items: center; justify-content: center; color: #fff; }
.atp-check--done .atp-check-box { background: var(--accent); border-color: var(--accent); }
.atp-info { flex: 1; min-width: 0; }
.atp-title { display: block; font-size: 0.9rem; color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atp-due { display: block; font-size: 0.72rem; color: var(--ink); opacity: 0.48; margin-top: 2px; }
/* Overdue is a GENTLE wait, never an alarm: soft amber on the date only, title keeps its normal ink. */
.atp-due--late { color: var(--amber); opacity: 0.85; }
.atp-del, .atp-move { background: none; border: none; cursor: pointer; font-size: 1rem; opacity: 0.45; padding: 6px; border-radius: 8px; flex-shrink: 0; min-width: var(--tap); min-height: var(--tap); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.atp-del:active, .atp-move:active { opacity: 1; background: var(--surface-2); }
.atp-move { font-size: 1.05rem; }

/* ===== Task group panel ===== */
.tgp-body { display: flex; flex-direction: column; height: 100%; }
.tgp-list { flex: 1; overflow-y: auto; padding: 8px 16px 0; }
.tgp-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.tgp-row:last-child { border-bottom: none; }
.tgp-row--done .tgp-name { text-decoration: line-through; opacity: 0.4; }
.tgp-check { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line); background: transparent; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.tgp-check--done { background: var(--accent); border-color: var(--accent); }
.tgp-name { flex: 1; font-size: 0.9rem; color: var(--ink); font-weight: 500; }
.tgp-del { background: none; border: none; cursor: pointer; opacity: 0.35; padding: 4px; border-radius: 6px; flex-shrink: 0; }
.tgp-del:hover { opacity: 1; }
.tgp-done-hdr { font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; padding: 14px 0 4px; }
.tgp-empty { text-align: center; font-size: 0.88rem; color: var(--ink-soft); padding: 40px 20px; line-height: 1.6; }
.tgp-add-row { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface); flex-shrink: 0; }
.tgp-add-input { flex: 1; border: none; background: var(--surface-2); border-radius: 10px; padding: 9px 12px; font-family: inherit; font-size: 0.9rem; color: var(--ink); outline: none; }
.tgp-add-input::placeholder { color: var(--ink-soft); }
.tgp-add-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); border: none; color: #fff; font-size: 1.3rem; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.tgp-more { background: none; border: none; cursor: pointer; font-size: 1.1rem; color: var(--ink-soft); padding: 4px 8px; margin-left: auto; letter-spacing: 2px; }
.tracker-screen-hdr { display: flex; align-items: center; }

/* ---- Evening / morning carry-forward card ---- */
.eve-carry-card { display: flex; align-items: center; gap: 12px; margin: 6px 16px; padding: 12px 14px; background: var(--surface); border-radius: 14px; border: 1.5px solid var(--line); }
.morn-carry-card { background: rgba(74,103,65,0.06); border-color: rgba(74,103,65,0.2); }
.eve-carry-icon { font-size: 1.3rem; flex-shrink: 0; }
.eve-carry-body { flex: 1; min-width: 0; }
.eve-carry-ttl { display: block; font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.eve-carry-sub { display: block; font-size: 0.76rem; color: var(--ink); opacity: 0.52; margin-top: 2px; }
.eve-carry-btn { flex-shrink: 0; padding: 7px 14px; border-radius: 10px; border: 1.5px solid var(--accent); background: transparent; color: var(--accent); font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.eve-carry-btn:active { background: var(--accent); color: #fff; }
.eve-journal-card { border-color: rgba(74,103,65,0.25); background: rgba(74,103,65,0.05); }

/* ---- Future date planning dock ---- */
.future-date-dock { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; gap: 12px; }
.future-dock-lbl { font-size: 0.82rem; color: var(--ink); opacity: 0.55; flex: 1; }
.future-dock-add { padding: 9px 18px; border-radius: 22px; border: 2px solid var(--accent); background: var(--accent); color: #fff; font-size: 0.88rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.future-dock-add:active { opacity: 0.82; }

/* ---- Future date: habit skip chip ---- */
.tl-future-skip { display: inline-flex; align-items: center; margin: 2px 12px 8px; padding: 3px 10px; border-radius: 12px; border: 1.5px solid var(--line); background: transparent; font-size: 0.74rem; color: var(--ink); opacity: 0.55; cursor: pointer; }
.tl-future-skip:active { opacity: 1; }
.tl-future-skip--on { border-color: var(--accent); color: var(--accent); opacity: 1; background: rgba(74,103,65,0.08); }

/* ---- Habit calendar: paginated single-month ---- */
.ts-hcal-nav { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 8px; }
.ts-hcal-mlbl { font-size: 0.78rem; font-weight: 600; color: var(--ink); opacity: 0.7; flex: 1; text-align: center; }
.ts-hcal-prev, .ts-hcal-next { min-width: 36px; min-height: 36px; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; color: var(--ink); opacity: 0.75; padding: 4px 8px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.ts-hcal-prev:active, .ts-hcal-next:active { opacity: 1; background: var(--surface-2); }
.ts-hcal-prev:disabled, .ts-hcal-next:disabled { opacity: 0.18; cursor: default; }

/* ---- Journal heatmap: paginated single-month ---- */
.ts-jh-calnav { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 10px; }
.ts-jh-calttl { font-size: 0.78rem; font-weight: 600; color: var(--ink); opacity: 0.7; flex: 1; text-align: center; }
.ts-jh-prev, .ts-jh-next { min-width: 36px; min-height: 36px; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; color: var(--ink); opacity: 0.75; padding: 4px 8px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.ts-jh-prev:active, .ts-jh-next:active { opacity: 1; background: var(--surface-2); }
.ts-jh-prev:disabled, .ts-jh-next:disabled { opacity: 0.18; cursor: default; }

/* ---- Journal day panel header ---- */
.journal-day-hdr { justify-content: flex-start; gap: 0; }
.jdp-datenav { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.jdp-datelbl { font-size: 0.95rem; font-weight: 600; color: var(--ink); min-width: 100px; text-align: center; }
.jdp-prev, .jdp-next { background: none; border: none; padding: 6px; cursor: pointer; color: var(--ink); opacity: 0.6; display: flex; align-items: center; border-radius: 8px; }
.jdp-prev:active, .jdp-next:active { opacity: 1; background: var(--surface-2); }
.jdp-next:disabled { opacity: 0.2; cursor: default; }

/* ---- Past-tasks banner (Today view) ---- */
.past-tasks-banner { display: flex; align-items: center; gap: 10px; margin: 8px 16px 4px; padding: 10px 14px; background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1.5px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 12px; }
.ptb-icon { font-size: 1rem; flex-shrink: 0; }
.ptb-text { flex: 1; font-size: 0.84rem; color: var(--ink); opacity: 0.82; }
/* Gentle mode: drop the amber "alert" look for a calm sage tone — no alarm for a hard day. */
.past-tasks-banner--gentle { background: color-mix(in srgb, var(--accent) 9%, transparent); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.ptb-btn { flex-shrink: 0; padding: 5px 12px; border-radius: 8px; border: 1.5px solid var(--accent); background: transparent; color: var(--accent); font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.ptb-btn:active { background: var(--accent); color: #fff; }

/* ---- Carry-forward sheet ---- */
.carry-fwd-overlay { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; justify-content: flex-end; }
.carry-fwd-bd { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.carry-fwd-panel { position: relative; background: var(--surface); border-radius: 20px 20px 0 0; padding: 0 0 env(safe-area-inset-bottom,0); max-height: 82vh; display: flex; flex-direction: column; }
.carry-fwd-hdr { display: flex; align-items: center; gap: 10px; padding: 18px 16px 12px; border-bottom: 1px solid var(--line); }
.carry-fwd-ttl { flex: 1; font-size: 1rem; font-weight: 600; color: var(--ink); }
.carry-fwd-x { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--surface-2); cursor: pointer; font-size: 0.8rem; color: var(--ink); opacity: 0.55; }
.carry-fwd-sub { margin: 10px 16px 6px; font-size: 0.82rem; color: var(--ink); opacity: 0.52; }
.carry-fwd-list { overflow-y: auto; padding: 0 16px 16px; flex: 1; }
.cfwd-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cfwd-row:last-child { border-bottom: none; }
.cfwd-info { flex: 1; min-width: 0; }
.cfwd-title { display: block; font-size: 0.9rem; color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfwd-due { font-size: 0.74rem; color: var(--ink); opacity: 0.5; margin-top: 2px; display: block; }
.cfwd-btns { display: flex; gap: 6px; flex-shrink: 0; }
.cfwd-today, .cfwd-done, .cfwd-del { padding: 5px 9px; border-radius: 8px; border: 1.5px solid; font-size: 0.75rem; font-weight: 600; cursor: pointer; background: transparent; }
.cfwd-today { border-color: var(--accent); color: var(--accent); }
.cfwd-done { border-color: var(--accent); color: var(--accent); }
.cfwd-del { border-color: #d94444; color: #d94444; }
.cfwd-today:active { background: var(--accent); color: #fff; }
.cfwd-done:active { background: var(--accent); color: #fff; }
.cfwd-del:active { background: #d94444; color: #fff; }

/* ===== v27: LEFT DRAWER ===== */
.left-drawer-overlay { position: fixed; inset: 0; z-index: 90; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 0.25s; }
.drawer-backdrop.is-active { background: rgba(0,0,0,0.42); }
.drawer-panel { position: absolute; top: 0; bottom: 0; left: -290px; width: 285px; background: var(--bg); box-shadow: 4px 0 28px rgba(0,0,0,0.16); transition: left 0.25s cubic-bezier(0.25,0.46,0.45,0.94); overflow-y: auto; display: flex; flex-direction: column; }
.drawer-panel.is-open { left: 0; }
/* Right-side drawer (matches the menu button on the right). Slides in from the right edge. */
.left-drawer-overlay--right .drawer-panel { left: auto; right: -290px; box-shadow: -4px 0 28px rgba(0,0,0,0.16); transition: right 0.25s cubic-bezier(0.25,0.46,0.45,0.94); }
.left-drawer-overlay--right .drawer-panel.is-open { left: auto; right: 0; }
.drawer-hdr { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--line); min-height: 56px; box-sizing: border-box; }
.drawer-logo { display: flex; align-items: center; gap: 7px; font-size: 0.95rem; font-weight: 600; color: var(--accent); }
.drawer-close { width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--surface-2); color: var(--ink); opacity: 0.55; cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; }
/* Profile block at the top of the drawer (tap to view/edit). */
.drawer-hdr--profile { padding: 14px 14px 14px 16px; }
.drawer-profile { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; background: none; border: none; cursor: pointer; text-align: left; padding: 4px; border-radius: 12px; transition: background 0.12s; }
.drawer-profile:active { background: var(--surface-2); }
.drawer-profile-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 600; color: var(--accent-ink); flex-shrink: 0; }
.drawer-profile-avatar svg { color: var(--accent); }
.drawer-profile-text { display: flex; flex-direction: column; min-width: 0; }
.drawer-profile-name { font-size: 0.98rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-profile-sub { font-size: 0.76rem; color: var(--ink-soft); }

/* ===== Notification panel (bell) ===== */
.notif-overlay { position: fixed; inset: 0; z-index: 1100; }
.notif-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 0.2s; }
.notif-overlay.is-open .notif-backdrop { background: rgba(0,0,0,0.3); }
.notif-panel { position: absolute; top: 56px; right: 8px; left: 8px; max-width: 380px; margin-left: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 34px rgba(0,0,0,0.2); overflow: hidden; transform: translateY(-8px) scale(0.98); opacity: 0; transform-origin: top right; transition: transform 0.18s ease, opacity 0.18s ease; }
.notif-overlay.is-open .notif-panel { transform: none; opacity: 1; }
.notif-hdr { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.notif-title { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.notif-close { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--surface-2); color: var(--ink-soft); cursor: pointer; font-size: 0.8rem; }
.notif-list { padding: 6px; max-height: 60vh; overflow-y: auto; }
.notif-item { display: flex; align-items: flex-start; gap: 11px; width: 100%; padding: 13px 12px; border: none; background: none; text-align: left; cursor: pointer; border-radius: 12px; transition: background 0.12s; }
.notif-item:active { background: var(--surface-2); }
.notif-item-emoji { font-size: 1.2rem; line-height: 1.2; flex-shrink: 0; }
.notif-item-text { font-size: 0.88rem; line-height: 1.5; color: var(--ink); }
.notif-empty { text-align: center; padding: 30px 20px; }
.notif-empty-icon { font-size: 2rem; display: block; margin-bottom: 8px; }
.notif-empty p { font-size: 0.88rem; color: var(--ink-soft); margin: 0; line-height: 1.5; }
.drawer-nav { padding: 6px 0 24px; }
.drawer-nav-item { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 18px; border: none; background: none; text-align: left; font-size: 0.9rem; color: var(--ink); cursor: pointer; transition: background 0.1s; position: relative; }
.drawer-nav-item:active { background: var(--surface-2); }
.drawer-nav-icon { width: 22px; text-align: center; font-size: 1rem; flex-shrink: 0; }
.drawer-nav-label { flex: 1; }
.drawer-nav-chev { opacity: 0.35; font-size: 1.1rem; margin-left: auto; }
.drawer-item-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 6px; flex-shrink: 0; }
.drawer-divider { height: 1px; background: var(--line); margin: 6px 16px; }
/* Expandable drawer groups */
.drawer-exp-chev { margin-left: auto; display: flex; align-items: center; opacity: 0.4; transition: transform 0.2s; }
.drawer-expand-toggle[aria-expanded="true"] .drawer-exp-chev { transform: rotate(180deg); opacity: 0.7; }
.drawer-subpanel { padding: 2px 0 6px; }
.drawer-subpanel[hidden] { display: none; }
.drawer-subitem { display: block; width: 100%; text-align: left; padding: 10px 18px 10px 53px; border: none; background: none; font-family: inherit; font-size: 0.86rem; color: var(--ink); opacity: 0.82; cursor: pointer; }
.drawer-subitem:hover { background: var(--surface-2); opacity: 1; }
.drawer-subitem--add { color: var(--accent); opacity: 1; font-weight: 500; }
/* Inline "New list" form — replaces native prompt() */
.drawer-new-list-form { padding: 8px 18px 6px 53px; }
.drawer-new-list-inp { width: 100%; box-sizing: border-box; border: 1.5px solid var(--accent); border-radius: var(--radius-sm); padding: 8px 10px; font: inherit; font-size: 0.86rem; color: var(--ink); background: var(--surface); outline: none; }
.drawer-new-list-inp:focus { border-color: var(--accent-ink); }
.drawer-new-list-actions { display: flex; gap: 6px; margin-top: 6px; }
.drawer-new-list-save { flex: 1; padding: 7px 12px; border-radius: 8px; border: none; background: var(--accent); color: var(--btn-text, #fff); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.drawer-new-list-cancel { flex: 1; padding: 7px 12px; border-radius: 8px; border: 1.5px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: 0.82rem; cursor: pointer; opacity: 0.7; }
.drawer-ag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 18px 8px 53px; }
.drawer-ag-cell { display: flex; flex-direction: column; gap: 1px; }
.drawer-ag-val { font-size: 1.15rem; font-weight: 600; color: var(--accent); line-height: 1.1; }
.drawer-ag-lbl { font-size: 0.7rem; color: var(--ink-soft); }
.drawer-ag-loading { padding: 6px 18px 8px 53px; font-size: 0.8rem; color: var(--ink-soft); }
.drawer-ag-reports-lead { padding: 8px 18px 2px 53px; margin: 0; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); opacity: 0.7; }
.drawer-subitem-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); vertical-align: middle; margin-left: 4px; }

/* ===== v27: TODAY MODE SELECTOR ===== */
.today-mode-bar { display: flex; background: var(--surface); padding: 5px 6px; gap: 4px; border-bottom: 1px solid var(--line); }
.today-mode-tab { flex: 1; padding: 7px 12px; border: none; background: transparent; border-radius: 8px; font-size: 0.88rem; font-weight: 500; color: var(--ink-soft); cursor: pointer; transition: all 0.15s; }
.today-mode-tab.active { background: var(--accent); color: #fff; font-weight: 600; }
.today-mode-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 6px; vertical-align: middle; }
.today-mode-tab.active .today-mode-dot { background: #fff; }
/* Gentle mood prompt (center) */
.mood-prompt-backdrop { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,0.32); opacity: 0; transition: opacity 0.2s; }
.mood-prompt-backdrop.is-open { opacity: 1; }
.mood-prompt-card { width: 100%; max-width: 360px; background: var(--surface); border-radius: 20px; padding: 22px 20px 18px; box-shadow: 0 16px 50px rgba(0,0,0,0.28); transform: translateY(10px) scale(0.98); transition: transform 0.22s; }
.mood-prompt-backdrop.is-open .mood-prompt-card { transform: none; }
.mood-prompt-title { font-size: 1.05rem; font-weight: 600; color: var(--ink); text-align: center; margin: 0 0 16px; }
.mood-prompt-faces { display: flex; justify-content: space-between; gap: 6px; }
.mood-prompt-face { flex: 1; font-size: 1.7rem; line-height: 1; padding: 9px 0; border-radius: 12px; border: 2px solid transparent; background: var(--surface-2); cursor: pointer; opacity: 0.6; transition: opacity 0.15s, border-color 0.15s, transform 0.1s; }
.mood-prompt-face:hover { opacity: 0.9; }
.mood-prompt-face.is-sel { opacity: 1; border-color: var(--accent); transform: scale(1.05); }
.mood-prompt-note { width: 100%; box-sizing: border-box; margin-top: 14px; border: 1.5px solid var(--line); border-radius: 11px; padding: 10px 12px; font-family: inherit; font-size: 0.9rem; color: var(--ink); background: var(--surface-2); resize: none; }
.mood-prompt-note:focus { outline: none; border-color: var(--accent); }
.mood-prompt-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.mood-prompt-later { background: none; border: none; font-family: inherit; font-size: 0.88rem; color: var(--ink-soft); cursor: pointer; padding: 8px 4px; }
.mood-prompt-save { font-family: inherit; font-size: 0.9rem; font-weight: 600; padding: 10px 24px; border-radius: 12px; border: none; background: var(--accent); color: #fff; cursor: pointer; }
.mood-prompt-save:disabled { opacity: 0.4; cursor: default; }
/* ---------- First-run onboarding overlay ---------- */
.onboarding-backdrop {
  position: fixed; inset: 0; z-index: 130;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(0,0,0,0.38);
  opacity: 0; transition: opacity 0.22s;
}
.onboarding-backdrop.is-open { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .onboarding-backdrop { transition: none; } }

.onboarding-card {
  width: 100%; max-width: 360px;
  background: var(--surface);
  border-radius: 22px;
  padding: 30px 24px 22px;
  box-shadow: 0 18px 56px rgba(0,0,0,0.30);
  transform: translateY(12px) scale(0.97);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.onboarding-backdrop.is-open .onboarding-card { transform: none; }
@media (prefers-reduced-motion: reduce) { .onboarding-card { transition: none; } }

.onboarding-heading {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.3;
}

.onboarding-text {
  font-size: 0.93rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

.onboarding-bullets {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 11px;
}
.onboarding-bullets li {
  font-size: 0.93rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.onboarding-body { min-height: 100px; }

.onboarding-dots {
  display: flex; align-items: center; justify-content: center;
  gap: 7px; margin-top: 24px;
}
.onboarding-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line);
  transition: background 0.18s, transform 0.18s;
}
.onboarding-dot.is-active {
  background: var(--accent);
  transform: scale(1.25);
}
@media (prefers-reduced-motion: reduce) { .onboarding-dot { transition: none; } }

.onboarding-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 20px;
}
.onboarding-skip {
  background: none; border: none;
  font-family: inherit; font-size: 0.88rem;
  color: var(--ink-soft); cursor: pointer;
  padding: 8px 4px;
}
.onboarding-skip:hover { color: var(--ink); }
.onboarding-skip:focus-visible { outline: 2px solid var(--accent); border-radius: 6px; }
.onboarding-next {
  font-family: inherit; font-size: 0.9rem; font-weight: 600;
  padding: 11px 26px; border-radius: 13px; border: none;
  background: var(--accent); color: #fff;
  cursor: pointer; transition: opacity 0.15s;
}
.onboarding-next:hover { opacity: 0.88; }
.onboarding-next:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .onboarding-next { transition: none; } }

/* Quote of the day — calm note at the very top (below the logo, above the date strip) */
.top-quote { margin: 0; padding: 10px 22px 8px; text-align: center; font-family: var(--face-heading); font-style: italic; font-size: 0.92rem; line-height: 1.45; color: #5e5852; }

/* ===== Care atmosphere ===== */
/* A whisper-soft wash at the top of the page that shifts with how you're doing — warm and
   calming when Tender, a cool sage lift when Bright. Sits behind all content; never loud. */
html[data-care="gentle"] body {
  background-image: radial-gradient(135% 55% at 50% -8%, color-mix(in srgb, #c98a78 9%, transparent) 0%, transparent 62%);
  background-attachment: fixed; background-repeat: no-repeat;
}
html[data-care="focus"] body {
  background-image: radial-gradient(135% 55% at 50% -8%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 62%);
  background-attachment: fixed; background-repeat: no-repeat;
}
html[data-care="gentle"] .top-quote { color: #9a5a48; }
/* Journal mood card — faces reveal a note + save when one is picked */
.tj-mood-faces { display: flex; justify-content: space-between; gap: 6px; }
.tj-mood-face { flex: 1; font-size: 1.55rem; line-height: 1; padding: 8px 0; border-radius: 11px; border: 2px solid transparent; background: var(--surface-2); cursor: pointer; opacity: 0.6; transition: opacity 0.15s, border-color 0.15s, transform 0.1s; }
.tj-mood-face:hover { opacity: 0.9; }
.tj-mood-face.is-sel { opacity: 1; border-color: var(--accent); transform: scale(1.05); }
.tj-mood-entry { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.tj-mood-entry[hidden] { display: none; }
.tj-mood-note { flex: 1; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 11px; font-family: inherit; font-size: 0.88rem; color: var(--ink); background: var(--surface-2); resize: none; }
.tj-mood-note:focus { outline: none; border-color: var(--accent); }
.tj-mood-save { font-family: inherit; font-size: 0.84rem; font-weight: 600; padding: 9px 16px; border-radius: 10px; border: none; background: var(--accent); color: #fff; cursor: pointer; white-space: nowrap; }

/* ===== v27: JOURNAL MODE IN TODAY ===== */
.today-journal-mode { padding: 4px 0 0; }
.tj-section { background: var(--surface); border-radius: 14px; margin: 8px 12px; padding: 14px; }
.tj-section-label { font-size: 0.75rem; font-weight: 600; color: var(--ink); opacity: 0.5; margin: 0 0 9px; letter-spacing: 0.02em; display: block; }
.tj-quick-input { width: 100%; border: none; background: transparent; font-size: 0.98rem; color: var(--ink); padding: 2px 0 6px; border-bottom: 1.5px solid var(--line); font-family: inherit; box-sizing: border-box; }
.tj-quick-input:focus { outline: none; border-bottom-color: var(--accent); }
.tj-input { width: 100%; border: none; background: transparent; font-size: 0.9rem; color: var(--ink); padding: 7px 0; border-bottom: 1px solid var(--line); font-family: inherit; box-sizing: border-box; }
.tj-input:focus { outline: none; border-bottom-color: var(--accent); }
.tj-input:last-child { border-bottom: none; padding-bottom: 0; }
.tj-textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 0.9rem; color: var(--ink); background: var(--surface); resize: none; font-family: inherit; box-sizing: border-box; line-height: 1.5; }
.tj-textarea:focus { outline: none; border-color: var(--accent); }
.tj-guided-prompt { font-size: 0.82rem; color: var(--accent); opacity: 0.8; font-style: italic; margin: 0 0 8px; }
.tj-hl-item { font-size: 0.87rem; color: var(--ink); padding: 4px 0; line-height: 1.4; }
.tj-hl-act { color: var(--ink-soft); }
.tj-empty-note { font-size: 0.82rem; opacity: 0.4; padding: 4px 0; }

/* ===== v27: DRAG TO REORDER ===== */
.tl-drag-handle { cursor: grab; opacity: 0.2; padding: 0 6px 0 2px; font-size: 1rem; line-height: 1; flex-shrink: 0; user-select: none; touch-action: none; display: flex; align-items: center; }
.tl-drag-handle:active { cursor: grabbing; opacity: 0.6; }
.tl-row--dragging { opacity: 0.35; }
.tl-row--dragover { background: rgba(74,103,65,0.08) !important; border-radius: 10px; }

/* ===== JOURNAL MODE — title headline, boxed input, idea prompts ===== */
/* "Let's name today" — reads as the day's headline/title */
.tj-title-section { padding: 16px 16px 14px; }
.tj-title-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tj-title-eyebrow { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent); opacity: 0.85; margin: 0; }
/* Compact mood log in the title header — tap a face to check in instantly */
.tj-title-mood { display: flex; gap: 3px; flex-shrink: 0; }
.tj-title-face { font-size: 1.15rem; line-height: 1; padding: 4px; border-radius: 8px; border: 1.5px solid transparent; background: transparent; cursor: pointer; opacity: 0.5; transition: opacity 0.15s, border-color 0.15s, transform 0.1s; }
.tj-title-face:hover { opacity: 0.85; }
.tj-title-face.is-sel { opacity: 1; border-color: var(--accent); transform: scale(1.08); }
.tj-title-input { width: 100%; border: none; background: transparent; font-family: var(--face-heading);
  font-size: 1.35rem; font-weight: 500; color: var(--ink); padding: 2px 0; box-sizing: border-box; line-height: 1.25; }
.tj-title-input::placeholder { color: var(--ink); opacity: 0.32; font-style: italic; }
.tj-title-input:focus { outline: none; }

/* Boxed single input — clearly a writable field (beats .tj-input:last-child) */
.tj-section .tj-input-boxed { border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 12px; background: var(--surface); }
.tj-section .tj-input-boxed:focus { border-color: var(--accent); }

/* Idea prompts — we GIVE prompts; tap to drop one into the textarea */
.tj-ideas-label { font-size: 0.72rem; color: var(--ink-soft); margin: 12px 0 7px; padding: 0 2px; }
.tj-idea-prompts { display: flex; flex-wrap: wrap; gap: 7px; }
.tj-idea-chip { font-family: inherit; font-size: 0.8rem; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; cursor: pointer;
  line-height: 1.3; text-align: left; transition: background 0.15s, border-color 0.15s; }
.tj-idea-chip:hover { background: var(--surface); border-color: var(--accent); }
.tj-idea-chip:active { transform: scale(0.97); }
/* Journal activity chips — wrapped, no horizontal scroll */
.tj-acts-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tj-acts-chips .reflect-chip { flex: 0 0 auto; }
.tj-reads-list { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; min-height: 24px; }
.tj-read-chip { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-ink); border-radius: 999px; padding: 5px 12px; font-size: 0.82rem; font-weight: 500; }
.tj-reads-empty { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 10px; }
.tj-read-manual-btn { width: 100%; padding: 10px 16px; border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 10px; background: none; color: var(--accent); font-family: inherit; font-size: 0.84rem; font-weight: 500; cursor: pointer; text-align: center; transition: background 0.15s, border-color 0.15s; }
.tj-read-manual-btn:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tj-read-manual-btn.is-done { border-style: solid; border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-ink); cursor: default; }

/* Journal — future day (blocked) */
.tj-future-note { text-align: center; padding: 48px 28px; }
.tj-future-icon { font-size: 1.8rem; }
.tj-future-title { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 12px 0 4px; }
.tj-future-sub { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.5; margin: 0 0 18px; }
.tj-future-btn { font-family: inherit; font-size: 0.86rem; padding: 10px 18px; border-radius: 11px; border: 1.5px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; }

/* Journal — past day (read-only recap) */
.tj-readonly { padding-bottom: 40px; }
.tj-empty-day { text-align: center; padding: 52px 28px; }
.tj-empty-day-icon { font-size: 1.6rem; }
.tj-empty-day p { font-size: 0.92rem; color: var(--ink); margin: 12px 0 0; }
.tj-empty-day-sub { font-size: 0.82rem !important; color: var(--ink-soft) !important; margin-top: 4px !important; }
.tj-ro-header { display: flex; align-items: center; gap: 10px; padding: 6px 16px 14px; }
.tj-ro-mood { font-size: 1.5rem; line-height: 1; }
.tj-ro-title { font-family: var(--face-heading); font-size: 1.3rem; font-weight: 500; color: var(--ink); }
.tj-ro-section { background: var(--surface); border-radius: 14px; margin: 8px 12px; padding: 13px 14px; }
.tj-ro-label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.tj-ro-text { font-family: var(--face-body); font-size: 0.92rem; color: var(--ink); line-height: 1.55; margin: 0; }
.tj-ro-body { font-family: var(--face-body); white-space: pre-wrap; }
.tj-ro-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.tj-ro-chip { font-size: 0.8rem; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); color: var(--ink); }
/* Mode tabs — equal weight (both look live, not disabled) */
.today-mode-tab { color: var(--ink); }

/* ===== JOURNAL SEARCH ===== */
.journal-search-trigger { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 24px); margin: 4px 12px 10px; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink-soft); font-family: inherit; font-size: 0.86rem; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.journal-search-trigger:hover { border-color: var(--accent); color: var(--ink); }
.journal-search-controls, .js-search-controls { padding: 0 16px 12px; border-bottom: 1px solid var(--line); }
.js-search-inputwrap { display: flex; align-items: center; gap: 9px; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 12px; padding: 0 12px; color: var(--ink-soft); }
.js-search-inputwrap:focus-within { border-color: var(--accent); }
.js-search-input { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 0.95rem; color: var(--ink); padding: 11px 0; outline: none; }
.js-mood-filters { display: flex; gap: 8px; margin-top: 11px; }
.js-mood-chip { flex: 1; font-size: 1.15rem; line-height: 1; padding: 7px 0; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; opacity: 0.55; transition: opacity 0.15s, border-color 0.15s, background 0.15s; }
.js-mood-chip:hover { opacity: 0.85; }
.js-mood-chip.is-active { opacity: 1; border-color: var(--accent); background: var(--surface-2); }
.js-results { padding: 12px 16px 40px; }
.js-result-count { font-size: 0.74rem; color: var(--ink-soft); margin: 0 0 10px; padding: 0 2px; }
.js-result-row { display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 9px; cursor: pointer; transition: border-color 0.15s; }
.js-result-row:hover { border-color: var(--accent); }
.js-result-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.js-result-date { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.js-result-mood { font-size: 1rem; }
.js-result-snippet { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.45; margin: 0; }
.js-result-snippet mark { background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--ink); border-radius: 3px; padding: 0 1px; }
/* Global search — scope tabs, filters, mixed results */
.gs-scope-tabs { display: flex; gap: 6px; margin-top: 11px; }
.gs-scope-tab { flex: 1; font-family: inherit; font-size: 0.8rem; padding: 7px 4px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: all 0.15s; }
.gs-scope-tab.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.gs-filter-row { display: flex; align-items: center; gap: 10px; margin-top: 11px; flex-wrap: wrap; }
.gs-filter-row .js-mood-filters { flex: 1; margin-top: 0; min-width: 180px; }
.gs-datejump { display: flex; align-items: center; gap: 6px; font-size: 0.74rem; color: var(--ink-soft); white-space: nowrap; }
.gs-date-input { font-family: inherit; font-size: 0.8rem; color: var(--ink); background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 8px; padding: 5px 8px; cursor: pointer; }
.gs-date-input:focus { outline: none; border-color: var(--accent); }
.gs-group-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin: 14px 2px 7px; }
.gs-group-label:first-child { margin-top: 0; }
.gs-result-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; margin-bottom: 8px; cursor: pointer; transition: border-color 0.15s; }
.gs-result-row:hover { border-color: var(--accent); }
.gs-result-icon { font-size: 0.95rem; flex-shrink: 0; }
.gs-result-name { flex: 1; font-size: 0.9rem; color: var(--ink); }
.gs-result-name--done { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--line); }
.gs-result-meta { font-size: 0.72rem; color: var(--ink-soft); white-space: nowrap; }

/* ===== v27: SIMPLE PANEL ===== */
.simple-panel-body { padding: 0; }
.settings-notif-row { display: flex; align-items: center; gap: 12px; padding: 4px 0 10px; }
.settings-notif-lbl { display: block; font-size: 0.9rem; color: var(--ink); }
.settings-notif-sub { display: block; font-size: 0.74rem; color: var(--ink-soft); margin-top: 2px; }
.settings-notif-row > div:first-child { flex: 1; }
.settings-notif-btn { padding: 8px 14px; border-radius: 10px; border: 1.5px solid var(--accent); background: transparent; color: var(--accent); font-size: 0.82rem; cursor: pointer; white-space: nowrap; }
/* Text style picker in Settings */
.sett-reader-faces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sett-face-btn { padding: 11px 6px 9px; border: 1.5px solid var(--line); border-radius: 12px; background: none; color: var(--ink-soft); cursor: pointer; line-height: 1.3; text-align: center; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.sett-face-btn.is-on { background: color-mix(in srgb, var(--accent) 11%, transparent); border-color: var(--accent); color: var(--ink); }
.sett-face-name { display: block; font-size: 1rem; }
.sett-face-preview { display: block; font-size: 0.7rem; opacity: 0.52; margin-top: 3px; }
/* Text size picker */
.sett-size-row { display: flex; gap: 8px; }
.sett-size-btn { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); border-radius: 12px; background: none; color: var(--ink-soft); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.sett-size-btn[data-size="sm"] { font-size: 0.82rem; }
.sett-size-btn[data-size="md"] { font-size: 1rem; }
.sett-size-btn[data-size="lg"] { font-size: 1.2rem; }
.sett-size-btn.is-on { background: color-mix(in srgb, var(--accent) 11%, transparent); border-color: var(--accent); color: var(--ink); }
/* iOS-style toggle */
.settings-toggle { position: relative; width: 46px; height: 27px; border-radius: 999px; border: none; background: var(--line); cursor: pointer; flex-shrink: 0; transition: background 0.2s; padding: 0; }
.settings-toggle.is-on { background: var(--accent); }
.settings-toggle-knob { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.settings-toggle.is-on .settings-toggle-knob { transform: translateX(19px); }
.settings-reminder-time { display: flex; align-items: center; gap: 12px; padding: 2px 0 12px; }
.settings-reminder-time.is-hidden { display: none; }
.settings-reminder-time .settings-notif-lbl { flex: 1; }
.settings-time-input { font-family: inherit; font-size: 0.9rem; color: var(--ink); background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 9px; padding: 7px 10px; cursor: pointer; }
.settings-time-input:focus { outline: none; border-color: var(--accent); }
.settings-notif-divider { height: 1px; background: var(--line); margin: 6px 0 12px; }
/* Day-sections config */
.settings-session-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.settings-session-row span { font-size: 0.88rem; color: var(--ink); }
.settings-hour-select { font-family: inherit; font-size: 0.86rem; color: var(--ink); background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 9px; padding: 7px 10px; cursor: pointer; }
.settings-hour-select:focus { outline: none; border-color: var(--accent); }
.settings-session-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.settings-link-btn { background: none; border: none; font-family: inherit; font-size: 0.82rem; color: var(--ink-soft); cursor: pointer; text-decoration: underline; padding: 6px 0; }
.settings-save-btn { font-family: inherit; font-size: 0.85rem; font-weight: 600; padding: 9px 20px; border-radius: 10px; border: none; background: var(--accent); color: #fff; cursor: pointer; }
.settings-save-btn:hover { opacity: 0.92; }
/* In-app reminder nudge banner (check-in + evening wind-down) */
.checkin-nudge { margin: 10px 12px 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.checkin-nudge--evening { background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.checkin-nudge-main { display: flex; align-items: flex-start; gap: 10px; }
.checkin-nudge-icon { font-size: 1.1rem; line-height: 1.3; }
.checkin-nudge-text { flex: 1; font-size: 0.84rem; color: var(--ink); line-height: 1.4; }
.checkin-nudge-close { background: none; border: none; font-size: 1.3rem; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 0 2px; flex-shrink: 0; }
.checkin-nudge-actions { display: flex; gap: 8px; margin-top: 10px; padding-left: 28px; flex-wrap: wrap; }
.nudge-action { font-family: inherit; font-size: 0.8rem; padding: 7px 13px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.nudge-action:hover { border-color: var(--accent); }
.nudge-action--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.nudge-action--primary:hover { opacity: 0.92; }
.settings-data-btn { display: block; width: 100%; text-align: left; padding: 12px 14px; border-radius: 10px; margin-bottom: 8px; border: 1.5px solid var(--line); background: var(--surface); font-size: 0.88rem; color: var(--ink); cursor: pointer; box-sizing: border-box; }
.settings-data-btn--danger { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.settings-data-btn:active { background: var(--surface-2); }
.settings-data-hint { font-size: 0.76rem; line-height: 1.5; color: var(--ink-soft); margin: -2px 2px 12px; }
/* Settings accordion */
.sett-accordion { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 10px; }
.sett-acc-hdr { display: flex; align-items: center; gap: 10px; padding: 13px 16px; background: none; border: none; width: 100%; text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
.sett-accordion.is-open .sett-acc-hdr { border-radius: var(--radius-sm) var(--radius-sm) 0 0; border-bottom: 1px solid var(--line); }
.sett-acc-info { flex: 1; min-width: 0; }
.sett-acc-title { display: block; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink); }
.sett-acc-summary { display: block; font-size: 0.78rem; color: var(--ink-soft); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sett-acc-chev { color: var(--ink-soft); font-size: 0.68rem; transition: transform 0.2s; flex-shrink: 0; }
.sett-accordion.is-open .sett-acc-chev { transform: rotate(180deg); }
.sett-acc-body { display: none; padding: 14px 16px 16px; }
.sett-accordion.is-open .sett-acc-body { display: block; animation: sett-fade-in 0.14s ease; }
@keyframes sett-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- Dream Space ---- */
.topbar-dream-btn { width: 40px; height: 40px; border-radius: 50%; background: none; border: none; color: var(--accent); font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; opacity: 0.85; transition: opacity 0.15s, transform 0.15s; }
.topbar-dream-btn:hover { opacity: 1; }
.topbar-dream-btn:active { transform: scale(0.88); opacity: 1; }
.topbar-dream-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Dream Space now renders from the SHARED writing component (openWritingSpace) and so reuses the
   .support-panel shell for its slide-in/position/z-index — no bespoke .dream-space-* panel chrome. */

/* The canvas is dressed like a real dream book: warm aged-paper wash, a soft margin rule
   down the left, faint ruled lines the text rests on, and a gentle page-gutter shadow. */
.dream-canvas-wrap {
  flex: 1; display: flex; flex-direction: column; padding: 28px 24px 20px;
  overflow: hidden; position: relative;
  background:
    radial-gradient(140% 80% at 50% 0%, color-mix(in srgb, var(--dream-accent, var(--accent)) 8%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, #d9b98a 12%, var(--bg)) 0%, var(--bg) 38%);
  box-shadow: inset 0 16px 34px -26px rgba(60,40,20,0.45);
}
/* soft margin line, like the ruled margin of a paper journal — tinted to the dream's own colour */
.dream-canvas-wrap::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 17px; width: 1.5px;
  background: color-mix(in srgb, var(--dream-accent, #c98a78) 60%, transparent); opacity: 0.45; pointer-events: none;
}
/* the title reads as editable: a faint underline that warms to the dream's colour on focus */
.dream-canvas-title { font-family: 'Newsreader', serif; font-size: 1.6rem; font-weight: 400; font-style: italic; color: var(--ink); border: none; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent); background: transparent; outline: none; width: 100%; padding: 0 0 4px; margin-bottom: 14px; transition: border-color 0.15s; }
.dream-canvas-title:focus { border-bottom-color: var(--dream-accent, var(--accent)); }
.dream-canvas-title::placeholder { color: var(--ink-soft); opacity: 0.4; }
.dream-canvas-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent); margin-bottom: 20px; flex-shrink: 0; }
/* Gentle starter prompts — only on an empty page */
.dream-prompts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 18px; flex-shrink: 0; }
.dream-prompts-lead { font-size: 0.78rem; color: var(--ink-soft); font-style: italic; margin-right: 2px; }
.dream-prompt-chip { font-family: 'Newsreader', serif; font-size: 0.92rem; font-style: italic; color: var(--ink); padding: 7px 13px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--dream-accent, var(--accent)) 35%, var(--line)); background: color-mix(in srgb, var(--dream-accent, var(--accent)) 7%, var(--surface)); cursor: pointer; transition: background 0.15s, transform 0.1s; }
.dream-prompt-chip:hover { background: color-mix(in srgb, var(--dream-accent, var(--accent)) 14%, var(--surface)); }
.dream-prompt-chip:active { transform: scale(0.96); }
/* Dream button glyph sizing (SVG, accent-coloured) */
.topbar-dream-btn svg { width: 21px; height: 21px; display: block; }

/* Dream Space list view */
.ds-list-view, .ds-edit-view { display: flex; flex-direction: column; height: 100%; }
.ds-hdr { display: flex; align-items: center; gap: 8px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.ds-hdr-center { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ds-hdr-title { font-weight: 600; font-size: 1rem; color: var(--ink); }
.ds-back { width: 36px; height: 36px; border-radius: 50%; background: none; border: none; cursor: pointer; color: var(--ink); opacity: 0.6; display: flex; align-items: center; justify-content: center; }
.ds-back:active { background: var(--surface-2); opacity: 1; }
.ds-new-board-wrap { padding: 12px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.ds-new-board { width: 100%; padding: 11px; border: 1.5px dashed var(--line); border-radius: 12px; background: none; color: var(--accent); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.ds-new-board:active { background: var(--surface-2); }
.ds-boards-list { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.ds-board-card { display: flex; align-items: center; border: 1.5px solid color-mix(in srgb, var(--card-accent, var(--line)) 55%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--card-accent, var(--surface)) 7%, var(--surface)); overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; }
.ds-board-card:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--card-accent, var(--accent)) 40%, transparent); }
.ds-board-card-btn { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 14px 12px; background: none; border: none; text-align: left; cursor: pointer; font: inherit; min-width: 0; }
.ds-board-card-title { font-weight: 600; font-size: 0.95rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-board-card-preview { font-size: 0.82rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-board-del { flex-shrink: 0; width: 44px; height: 44px; background: none; border: none; cursor: pointer; color: var(--ink); opacity: 0.35; display: flex; align-items: center; justify-content: center; }
.ds-board-del:hover { opacity: 0.7; color: #c05050; }
.ds-board-del:active { background: rgba(192,80,80,0.08); opacity: 1; color: #c05050; }
/* Deletion is confirmed via the shared action sheet (showActionSheet), not an inline bar. */
/* Dream Space edit view */
.ds-edit-hdr { display: flex; align-items: center; gap: 8px; padding: 10px 16px 8px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.ds-edit-hdr-spacer { flex: 1; }
.ds-edit-back { width: 36px; height: 36px; border-radius: 50%; background: none; border: none; cursor: pointer; color: var(--ink); opacity: 0.6; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ds-edit-back:active { background: var(--surface-2); }
.ds-color-chips { display: flex; gap: 7px; flex: 1; justify-content: center; }
.ds-color-chip { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid transparent; cursor: pointer; transition: transform 0.12s, border-color 0.15s; }
.ds-color-chip:active { transform: scale(0.88); }
.ds-color-chip.active { border-color: var(--ink); }
.ds-autosave-txt { font-size: 0.72rem; color: var(--ink-soft); opacity: 0; transition: opacity 0.4s; pointer-events: none; flex-shrink: 0; min-width: 36px; text-align: right; }
.ds-autosave-txt.visible { opacity: 0.7; }
/* Font + size now come from the shared writing-settings popup (--write-font / --write-size on the
   panel), applied to the .rt-editor. The old per-space .ds-settings-* panel + --ds-font-* vars are gone. */
/* In the edit view the canvas-wrap itself scrolls, so the editor grows freely */
.ds-edit-view .dream-canvas-wrap { overflow-y: auto; }

/* Task session pills (multi-session tasks) */
.tl-session-pills { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.tl-session-pill { font-size: 0.78rem; opacity: 0.7; }

/* Dream-button picker (Settings → Personalise) */
.dream-icon-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.dream-icon-btn { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.15s, color 0.15s, transform 0.12s; }
.dream-icon-btn svg { width: 22px; height: 22px; display: block; }
.dream-icon-btn:active { transform: scale(0.92); }
.dream-icon-btn--active { border-color: var(--accent); color: var(--accent); background: var(--surface-2); }

/* ---- Journal photos (editable Today entry) ---- */
.tj-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.tj-photo-cell { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.tj-photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.tj-photo-del { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(20,18,16,0.62); color: #fff; font-size: 0.78rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tj-photo-del:active { background: rgba(20,18,16,0.85); }
.tj-photo-add { margin-top: 10px; font-family: inherit; font-size: 0.86rem; color: var(--accent); background: none; border: 1.5px dashed var(--line); border-radius: 10px; padding: 9px 14px; cursor: pointer; width: 100%; transition: border-color 0.15s, background 0.15s; }
.tj-photo-add:hover { border-color: var(--accent); background: var(--surface-2); }

/* ---- Done for the day ---- */
.tj-done-section { background: none; text-align: center; padding: 4px 12px 0; margin-top: 4px; }
.tj-done-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 14px 18px; border: none; border-radius: 14px; cursor: pointer;
  font-family: inherit; font-size: 0.98rem; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #2c3e6b));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
  transition: transform 0.14s ease, box-shadow 0.2s ease;
}
.tj-done-btn:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 38%, transparent); }
.tj-done-btn:active { transform: scale(0.97); }
.tj-done-icon { font-size: 1.15rem; }
.tj-done-hint { font-size: 0.74rem; color: var(--ink-soft); margin: 9px 0 0; }
/* secondary wind-down link at the end of the journal — softer than the "done" button */
.tj-winddown-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 12px; padding: 12px 16px; border: 1px solid color-mix(in srgb, #5a5a8c 35%, var(--line)); border-radius: 13px; background: color-mix(in srgb, #5a5a8c 9%, var(--surface)); color: var(--ink); font-family: inherit; font-size: 0.86rem; cursor: pointer; transition: background 0.15s, transform 0.12s; }
.tj-winddown-btn:hover { background: color-mix(in srgb, #5a5a8c 16%, var(--surface)); }
.tj-winddown-btn:active { transform: scale(0.98); }

/* ---- Goodnight overlay ---- */
.goodnight-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center; padding: 28px;
  background: radial-gradient(120% 90% at 50% 18%, #2a3358 0%, #171a2e 60%, #0e1020 100%);
  opacity: 0; transition: opacity 0.5s ease;
}
.goodnight-overlay.is-open { opacity: 1; }
.goodnight-card {
  text-align: center; max-width: 340px;
  transform: translateY(14px) scale(0.98); opacity: 0;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s, opacity 0.55s ease 0.08s;
}
.goodnight-overlay.is-open .goodnight-card { transform: translateY(0) scale(1); opacity: 1; }
.goodnight-moon { font-size: 3.4rem; line-height: 1; margin-bottom: 14px; filter: drop-shadow(0 0 18px rgba(255,240,200,0.4)); animation: goodnight-float 4s ease-in-out infinite; }
@keyframes goodnight-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.goodnight-title { font-family: var(--serif, 'Newsreader', Georgia, serif); font-size: 1.7rem; font-weight: 500; color: #f3efe6; margin: 0 0 12px; }
.goodnight-msg { font-size: 1.02rem; line-height: 1.6; color: #cfd2e0; margin: 0 0 26px; }
.goodnight-btn {
  font-family: inherit; font-size: 0.92rem; font-weight: 600; color: #1a1d2e;
  background: #f3efe6; border: none; border-radius: 999px; padding: 11px 30px; cursor: pointer;
  transition: transform 0.14s ease, background 0.2s ease;
}
.goodnight-btn:hover { background: #fff; }
.goodnight-btn:active { transform: scale(0.96); }
/* wind-down + (adaptive) tomorrow live inside the goodnight moment, above the final "Goodnight" */
.goodnight-msg { margin-bottom: 20px; }
.goodnight-winddown { display: block; width: 100%; margin: 0 0 12px; padding: 12px 16px; border: 1px solid rgba(232,196,128,0.32); border-radius: 13px; background: rgba(232,196,128,0.10); color: #f0e2cf; font: inherit; font-size: 0.88rem; cursor: pointer; transition: background 0.15s, transform 0.12s; }
.goodnight-winddown:hover { background: rgba(232,196,128,0.18); }
.goodnight-winddown:active { transform: scale(0.98); }
.goodnight-plan { display: block; width: 100%; margin: 0 0 12px; padding: 11px 16px; border: 1px solid rgba(255,255,255,0.14); border-radius: 13px; background: rgba(255,255,255,0.05); color: #cfd6e6; font: inherit; font-size: 0.83rem; line-height: 1.4; cursor: pointer; transition: background 0.15s; }
.goodnight-plan:hover { background: rgba(255,255,255,0.1); }
/* (.goodnight-keep removed — "Keep this day" moved to the night-only card at the top of Today. See
   .keepday-night-card below.) */
.goodnight-btn { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) {
  .goodnight-moon { animation: none; }
  .goodnight-card, .goodnight-overlay { transition: opacity 0.2s ease; }
}

/* ---- Journal photos (read-only recap + day detail) ---- */
.ro-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.read-journal-photos .ro-photo-grid { margin: 10px 0 4px; }
.ro-photo-cell { padding: 0; border: none; background: var(--surface-2); border-radius: 12px; overflow: hidden; aspect-ratio: 1; cursor: zoom-in; }
.ro-photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Full-screen photo viewer ---- */
.img-viewer { position: fixed; inset: 0; z-index: 700; background: rgba(12,10,8,0.92); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity 0.2s; cursor: zoom-out; }
.img-viewer.is-open { opacity: 1; }
.img-viewer img { max-width: 100%; max-height: 100%; border-radius: 8px; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,0.4); }
.img-viewer-close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,0.14); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.img-viewer-close:active { background: rgba(255,255,255,0.28); }

/* ===== Care toolkit + new gentle tools ===== */
.toolkit-section { margin-bottom: 22px; }
.toolkit-h { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; }
.toolkit-btn { display: block; width: 100%; text-align: left; padding: 14px 16px; margin-bottom: 8px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.95rem; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.08s; }
.toolkit-btn:hover { border-color: var(--accent); background: var(--surface-2); }
.toolkit-btn:active { transform: scale(0.99); }

/* What has helped — recent kind-momentum recap */
.wh-recap { background: var(--surface-2); border-radius: 14px; padding: 14px 15px; margin: 0 0 20px; }
.wh-recap-h { font-size: 0.8rem; font-weight: 600; color: var(--ink); margin: 0 0 9px; }
.wh-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.wh-chip { font-size: 0.8rem; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }

/* Unsent letter */
.unsent-to { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.92rem; padding: 10px 13px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); outline: none; transition: border-color 0.15s; }
.unsent-to:focus { border-color: var(--accent); }
.unsent-body { width: 100%; box-sizing: border-box; font-family: 'Newsreader', Georgia, serif; font-size: 1.05rem; line-height: 1.6; padding: 13px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); outline: none; resize: vertical; transition: border-color 0.15s, opacity 0.6s ease, transform 0.6s ease; }
.unsent-body:focus { border-color: var(--accent); }
.unsent-body.unsent-fade { opacity: 0; transform: translateY(-14px); }
.unsent-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.unsent-keep { flex: 1 1 auto; padding: 12px 16px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.unsent-go { flex: 0 0 auto; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-soft); font: inherit; font-size: 0.9rem; cursor: pointer; }
.unsent-past { margin-top: 24px; }
.unsent-past-h { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; }
.unsent-item { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); }
.unsent-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.unsent-item-to { font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.unsent-item-prev { font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unsent-item-del { flex: 0 0 auto; width: 34px; height: 34px; border: none; background: none; color: var(--ink-soft); cursor: pointer; border-radius: 8px; font-size: 0.95rem; }
.unsent-item-del:hover { background: var(--surface-2); }

/* Survival mode */
.survival-lead { font-family: 'Newsreader', Georgia, serif; font-size: 1.22rem; line-height: 1.45; color: var(--ink); margin: 0 0 18px; }
.survival-list { display: flex; flex-direction: column; gap: 8px; }
.survival-row { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.95rem; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.survival-emoji { font-size: 1.2rem; flex: 0 0 auto; }
.survival-txt { flex: 1; }
.survival-tick { flex: 0 0 auto; color: var(--accent); font-weight: 700; opacity: 0; transition: opacity 0.15s; }
.survival-row.is-done { background: var(--surface-2); border-color: var(--accent); }
.survival-row.is-done .survival-txt { color: var(--ink-soft); }
.survival-row.is-done .survival-tick { opacity: 1; }
.survival-foot { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.6; text-align: center; margin: 20px 0 0; }

/* HALT check */
.halt-list { display: flex; flex-direction: column; gap: 8px; }
.halt-row { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 14px 15px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.98rem; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.halt-emoji { font-size: 1.25rem; flex: 0 0 auto; }
.halt-row.is-on { background: var(--surface-2); border-color: var(--accent); }
.halt-tip { font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft); margin: -2px 4px 6px; padding: 0 4px; }
.halt-foot { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.6; text-align: center; margin: 20px 0 0; }

/* Steadying skills (DBT-inspired) */
.dbt-list { display: flex; flex-direction: column; gap: 8px; }
.dbt-card { border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.dbt-card.is-open { border-color: var(--accent); }
.dbt-head { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 15px; border: none; background: none; color: var(--ink); font: inherit; font-size: 0.96rem; cursor: pointer; }
.dbt-emoji { font-size: 1.2rem; flex: 0 0 auto; }
.dbt-name { flex: 1; font-weight: 500; }
.dbt-chev { flex: 0 0 auto; color: var(--ink-soft); transition: transform 0.2s; display: flex; }
.dbt-card.is-open .dbt-chev { transform: rotate(180deg); }
.dbt-body { font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); margin: 0; padding: 0 15px 15px; }

/* Worry window */
.ww-add { display: flex; gap: 8px; margin: 4px 0 14px; }
.ww-input { flex: 1; min-width: 0; box-sizing: border-box; font: inherit; font-size: 0.92rem; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); outline: none; transition: border-color 0.15s; }
.ww-input:focus { border-color: var(--accent); }
.ww-park { flex: 0 0 auto; padding: 0 16px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; font-size: 0.88rem; cursor: pointer; }
.ww-time { font: inherit; font-size: 0.92rem; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); outline: none; }
.ww-status { margin: 0 0 12px; }
.ww-open { font-size: 0.88rem; line-height: 1.55; color: var(--accent-ink, var(--accent)); background: var(--surface-2); border-radius: 12px; padding: 11px 13px; margin: 0; }
.ww-shut { font-size: 0.86rem; color: var(--ink-soft); margin: 0; }
.ww-list { display: flex; flex-direction: column; gap: 7px; }
.ww-item { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ww-item-txt { flex: 1; font-size: 0.9rem; line-height: 1.45; color: var(--ink); }
.ww-item-done { flex: 0 0 auto; width: 32px; height: 32px; border: none; border-radius: 8px; background: var(--surface-2); color: var(--accent); font-weight: 700; cursor: pointer; }
.ww-item-done:hover { background: var(--accent); color: #fff; }

/* ===== Your affirmations (Profile) + "yours" label ===== */
.top-quote-mine { font-style: normal; font-size: 0.7em; letter-spacing: 0.04em; color: var(--accent); opacity: 0.8; white-space: nowrap; }
.my-affirm-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.my-affirm-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.my-affirm-txt { flex: 1; font-size: 0.9rem; line-height: 1.4; color: var(--ink); font-family: 'Newsreader', Georgia, serif; font-style: italic; }
.my-affirm-del { flex: 0 0 auto; width: 30px; height: 30px; border: none; background: none; color: var(--ink-soft); cursor: pointer; border-radius: 7px; font-size: 0.85rem; }
.my-affirm-del:hover { background: var(--surface-2); }
.my-affirm-empty { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 8px; }
.my-affirm-add { display: flex; gap: 8px; }
.my-affirm-input { flex: 1; min-width: 0; box-sizing: border-box; font: inherit; font-size: 0.9rem; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); outline: none; transition: border-color 0.15s; }
.my-affirm-input:focus { border-color: var(--accent); }
.my-affirm-save { flex: 0 0 auto; padding: 0 16px; border: none; border-radius: 11px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; font-size: 0.86rem; cursor: pointer; }
.my-affirm-cap { font-size: 0.82rem; color: var(--ink-soft); margin: 8px 0 0; }

/* ===== Greeting toast (once per app open) ===== */
.greet-toast { position: fixed; top: 60px; left: 50%; transform: translate(-50%, -16px); z-index: 1400; max-width: 86vw; padding: 10px 20px; border-radius: 999px; background: var(--accent); color: #fff; font-family: 'Newsreader', Georgia, serif; font-size: 1.02rem; font-style: italic; box-shadow: 0 8px 26px rgba(0,0,0,0.22); opacity: 0; pointer-events: none; transition: opacity 0.45s ease, transform 0.45s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.greet-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .greet-toast { transition: opacity 0.2s ease; } }
/* The quote softly steps aside while the greeting occupies its spot, then returns. */
.top-quote { transition: opacity 0.4s ease; }
.top-quote.quote-hushed { opacity: 0; }

/* ===== Seasonal atmosphere (opt-in) — a faint top wash layered over the theme, never replacing it.
   Transparent through the centre so it never washes over text; pointer-events:none so it never blocks. */
html[data-season]::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(130% 70% at 50% -12%, var(--season-tint, transparent) 0%, transparent 58%); transition: background 0.6s ease; }
html[data-season="spring"] { --season-tint: rgba(120,180,120,0.12); }
html[data-season="summer"] { --season-tint: rgba(245,205,95,0.12); }
html[data-season="autumn"] { --season-tint: rgba(210,130,60,0.14); }
html[data-season="winter"] { --season-tint: rgba(135,165,210,0.13); }
@media (prefers-reduced-motion: reduce) { html[data-season]::after { transition: none; } }

/* ===== "On this day" card ===== */
.onthisday-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin: 4px 0 16px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.onthisday-card:hover { border-color: var(--accent); background: var(--surface-2); }
.otd-emoji { font-size: 1.3rem; flex: 0 0 auto; }
.otd-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.otd-h { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.otd-note { font-size: 0.92rem; line-height: 1.4; color: var(--ink); font-family: 'Newsreader', Georgia, serif; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.otd-chev { flex: 0 0 auto; color: var(--ink-soft); font-size: 1.1rem; }

/* ===== Monthly intention ===== */
.mi-overlay { position: fixed; inset: 0; z-index: 1500; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity 0.25s ease; }
.mi-overlay.is-open { opacity: 1; }
.mi-backdrop { position: absolute; inset: 0; background: rgba(12,10,8,0.5); }
.mi-card { position: relative; width: 100%; max-width: 360px; background: var(--surface); border-radius: 18px; padding: 22px 20px; box-shadow: 0 16px 48px rgba(0,0,0,0.28); transform: translateY(10px); transition: transform 0.25s ease; }
.mi-overlay.is-open .mi-card { transform: translateY(0); }
.mi-title { font-family: 'Newsreader', Georgia, serif; font-size: 1.4rem; color: var(--ink); margin: 0 0 8px; }
.mi-sub { font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 16px; }
.mi-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.05rem; font-family: 'Newsreader', Georgia, serif; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); outline: none; transition: border-color 0.15s; }
.mi-input:focus { border-color: var(--accent); }
.mi-actions { display: flex; gap: 10px; margin-top: 16px; }
.mi-skip { flex: 1; padding: 11px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-soft); font: inherit; font-size: 0.9rem; cursor: pointer; }
.mi-save { flex: 1; padding: 11px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.mi-profile-word { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 1.15rem; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; cursor: pointer; }
.mi-profile-add { font: inherit; font-size: 0.9rem; color: var(--accent); background: none; border: 1.5px dashed var(--line); border-radius: 12px; padding: 10px 16px; cursor: pointer; }

/* ===== Energy card + moment capture (Today) ===== */
.tj-energy-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.tj-energy-label { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
.tj-moment { margin-top: 12px; animation: tj-moment-in 0.3s ease; }
.tj-moment-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.92rem; padding: 11px 13px; border: 1.5px solid var(--accent); border-radius: 12px; background: var(--surface); color: var(--ink); outline: none; }
@keyframes tj-moment-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .tj-moment { animation: none; } }

/* ===== Moments jar ===== */
.moments-list { display: flex; flex-direction: column; gap: 9px; }
.moment-item { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.moment-dot { font-size: 1.15rem; flex: 0 0 auto; line-height: 1.3; }
.moment-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.moment-text { font-family: 'Newsreader', Georgia, serif; font-size: 1rem; line-height: 1.45; color: var(--ink); }
.moment-date { font-size: 0.75rem; color: var(--ink-soft); }
.moments-empty { font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); }

/* ===== Edit a past journal day ===== */
.tj-edit-day { display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 4px; padding: 9px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--accent); font: inherit; font-size: 0.86rem; font-weight: 500; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.tj-edit-day:hover { border-color: var(--accent); background: var(--surface-2); }

/* ===== Sound library ===== */
.soundlib-grid { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }
.soundlib-chip { display: inline-flex; align-items: center; gap: 6px; padding: 11px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.9rem; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.soundlib-chip:hover { border-color: var(--accent); }
.soundlib-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.soundlib-note { font-size: 0.82rem; color: var(--ink-soft); margin: 16px 0 0; line-height: 1.5; }

/* ===== Monthly summary (print / share) ===== */
.summary-overlay { position: fixed; inset: 0; z-index: 1450; background: var(--bg, #f5f1e8); display: flex; flex-direction: column; opacity: 0; transition: opacity 0.25s ease; overflow: hidden; }
.summary-overlay.is-open { opacity: 1; }
.summary-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.summary-back { display: inline-flex; align-items: center; gap: 4px; border: none; background: none; color: var(--ink); font: inherit; font-size: 0.92rem; cursor: pointer; }
.summary-print { border: none; border-radius: 10px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; font-size: 0.88rem; padding: 9px 16px; cursor: pointer; }
.summary-scroll { flex: 1; overflow-y: auto; padding: 20px 16px 60px; }
.summary-sheet { max-width: 640px; margin: 0 auto; background: #fff; color: #2a2a28; border-radius: 14px; padding: 32px 30px; box-shadow: 0 6px 28px rgba(0,0,0,0.1); }
.sum-head { text-align: center; border-bottom: 2px solid #ece6da; padding-bottom: 18px; margin-bottom: 8px; }
.sum-eyebrow { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #97917f; margin: 0 0 2px; }
.sum-title { font-family: 'Newsreader', Georgia, serif; font-size: 1.8rem; color: #2a2a28; margin: 0 0 8px; }
.sum-tone { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 1.2rem; color: #4a6741; margin: 0 0 4px; }
.sum-tone-blurb { font-size: 0.9rem; line-height: 1.5; color: #56544e; margin: 0; }
.sum-sec { margin-top: 22px; }
.sum-h { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: #97917f; margin: 0 0 10px; }
.sum-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; max-width: 280px; }
.sum-cell { aspect-ratio: 1; border-radius: 8px; }
.sum-legend { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: #97917f; margin: 10px 0 0; }
.sum-leg-cell { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.sum-list { margin: 0; padding-left: 18px; font-size: 0.92rem; line-height: 1.7; color: #3a3a36; }
.sum-list li::marker { color: #9bc090; }
.sum-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.sum-chip { font-size: 0.85rem; color: #3a3a36; background: #f3efe6; border: 1px solid #e6dfd1; border-radius: 999px; padding: 4px 12px; }
.sum-chip--lift { background: #eaf2e6; border-color: #d2e4ca; }
.sum-kind { font-family: 'Newsreader', Georgia, serif; font-size: 1.02rem; line-height: 1.6; color: #3a3a36; margin: 0; }
.sum-foot { margin-top: 26px; padding-top: 14px; border-top: 1px solid #ece6da; font-size: 0.78rem; color: #97917f; line-height: 1.5; text-align: center; }
html[data-theme="dark"] .summary-sheet,
html[data-theme="dark"] .summary-sheet * { color: inherit; }
html[data-theme="dark"] .summary-sheet { background: var(--surface); color: var(--ink); box-shadow: 0 6px 28px rgba(0,0,0,0.4); }
html[data-theme="dark"] .sum-head { border-bottom-color: var(--line); }
html[data-theme="dark"] .sum-eyebrow,
html[data-theme="dark"] .sum-h,
html[data-theme="dark"] .sum-legend { color: var(--ink-soft); }
html[data-theme="dark"] .sum-title { color: var(--ink); }
html[data-theme="dark"] .sum-tone { color: var(--accent); }
html[data-theme="dark"] .sum-tone-blurb,
html[data-theme="dark"] .sum-list,
html[data-theme="dark"] .sum-kind { color: var(--ink); }
html[data-theme="dark"] .sum-foot { color: var(--ink-soft); border-top-color: var(--line); }
html[data-theme="dark"] .sum-chip { color: var(--ink); background: var(--surface-2); border-color: var(--line); }
html[data-theme="dark"] .sum-chip--lift { background: rgba(109,155,100,0.12); border-color: rgba(109,155,100,0.3); }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .summary-sheet { background: var(--surface); color: var(--ink); box-shadow: 0 6px 28px rgba(0,0,0,0.4); }
  html[data-theme="system"] .sum-head { border-bottom-color: var(--line); }
  html[data-theme="system"] .sum-eyebrow,
  html[data-theme="system"] .sum-h,
  html[data-theme="system"] .sum-legend { color: var(--ink-soft); }
  html[data-theme="system"] .sum-title { color: var(--ink); }
  html[data-theme="system"] .sum-tone { color: var(--accent); }
  html[data-theme="system"] .sum-tone-blurb,
  html[data-theme="system"] .sum-list,
  html[data-theme="system"] .sum-kind { color: var(--ink); }
  html[data-theme="system"] .sum-foot { color: var(--ink-soft); border-top-color: var(--line); }
  html[data-theme="system"] .sum-chip { color: var(--ink); background: var(--surface-2); border-color: var(--line); }
  html[data-theme="system"] .sum-chip--lift { background: rgba(109,155,100,0.12); border-color: rgba(109,155,100,0.3); }
}
@media print {
  body * { visibility: hidden !important; }
  .summary-overlay, .summary-overlay * { visibility: visible !important; }
  .summary-overlay { position: absolute; inset: 0; background: #fff; overflow: visible; }
  .summary-noprint { display: none !important; }
  .summary-scroll { overflow: visible; padding: 0; }
  .summary-sheet { box-shadow: none; border-radius: 0; max-width: 100%; padding: 0 12px; background: #fff !important; color: #2a2a28 !important; }
}