/* ===========================================================================
   Life OS — calm life operating system
   Design language: warm paper + sage, generous space, soft depth, no glare.
   Built to be used briefly and left.
   =========================================================================== */

:root {
  /* Light theme — warm paper, sage, clay */
  --bg: #f3efe7;
  --bg-tint: #efe9df;
  --surface: #fbf8f2;
  --surface-2: #f1ece2;
  --surface-sunk: #ece5d8;
  --text: #25302a;
  --text-soft: #55615a;
  --muted: #7c857d;
  --line: #e2dacb;
  --line-strong: #d3c9b6;

  --sage: #4f7a5f;
  --sage-deep: #3a5f49;
  --sage-soft: #e4ede4;
  --clay: #c2744e;
  --clay-soft: #f6e6dc;
  --sky: #4a7596;
  --gold: #b88a3a;
  --plum: #7a6396;
  --rose: #b8607a;
  --danger: #b34a40;

  --accent: var(--sage);
  --accent-deep: var(--sage-deep);
  --accent-soft: var(--sage-soft);

  --ring: rgba(79, 122, 95, 0.16);
  --shadow-sm: 0 1px 2px rgba(40, 50, 42, 0.05);
  --shadow: 0 6px 22px -12px rgba(40, 50, 42, 0.22);
  --shadow-lg: 0 24px 60px -28px rgba(30, 42, 34, 0.4);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --space: 18px;
  --rail-w: 244px;
  --maxw: 1180px;

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-theme="dark"] {
  /* Dark theme — deep warm green-charcoal, easy on 3am eyes */
  --bg: #161d19;
  --bg-tint: #19211c;
  --surface: #1f2823;
  --surface-2: #242e28;
  --surface-sunk: #1a221d;
  --text: #e9ede6;
  --text-soft: #b3bdb3;
  --muted: #8a948b;
  --line: #2c3730;
  --line-strong: #3a473e;

  --sage: #7fb08c;
  --sage-deep: #6aa078;
  --sage-soft: #243029;
  --clay: #d98e64;
  --clay-soft: #2e251f;
  --sky: #7aa6c4;
  --gold: #d2a85a;
  --plum: #a892c4;
  --rose: #d28aa0;
  --danger: #d97a6f;

  --accent: var(--sage);
  --accent-deep: var(--sage-deep);
  --accent-soft: var(--sage-soft);

  --ring: rgba(127, 176, 140, 0.2);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  min-height: 100%;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(1200px 680px at 18% -8%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    radial-gradient(900px 560px at 110% 4%, color-mix(in srgb, var(--clay) 8%, transparent), transparent 65%),
    var(--bg);
  background-attachment: fixed;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 680; letter-spacing: -0.014em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }

svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.logo-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: linear-gradient(150deg, var(--accent), var(--accent-deep));
  color: #fff;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.logo-mark svg { width: 1.4rem; height: 1.4rem; stroke-width: 1.8; }
.logo-mark.large { width: 64px; height: 64px; border-radius: 20px; }
.onboard-logo { display: block; width: 104px; height: 104px; margin: 0 auto 6px; border-radius: 24px; }
.brand-logo { display: block; width: 40px; height: 40px; border-radius: 12px; box-shadow: var(--shadow), inset 0 0 0 1px rgba(0, 0, 0, 0.04); object-fit: cover; }
.topbar-logo { display: none; width: 44px; height: 44px; border-radius: 13px; box-shadow: var(--shadow), inset 0 0 0 1px rgba(0, 0, 0, 0.04); object-fit: cover; flex: none; }
.topbar-titles { min-width: 0; }

/* Cloud sync — household invite block */
.invite-block { margin: 4px 0 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.invite-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.invite-row code { flex: 1; min-width: 0; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface); font-family: var(--font-mono, ui-monospace, monospace); font-size: 1rem; letter-spacing: 0.08em; text-align: center; color: var(--accent-deep); }
.join-details { margin-top: 12px; }
.join-details summary { cursor: pointer; color: var(--text-soft); font-size: 0.86rem; font-weight: 600; }
.join-details summary:hover { color: var(--accent-deep); }
.sync-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin: 10px 0; }
.sync-form input { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); outline: none; }
.sync-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.logo-mark.large svg { width: 2.1rem; height: 2.1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  font-weight: 640;
  white-space: nowrap;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.12s var(--ease), color 0.18s var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn svg { width: 1.05rem; height: 1.05rem; }

.btn-primary {
  background: var(--accent-deep);
  color: #fff;
  box-shadow: var(--shadow);
}
.btn-primary:hover { background: var(--accent); }

.btn-ghost {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--text-soft);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--text); }

.btn-soft {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text-soft);
}
.btn-soft:hover { border-color: var(--line-strong); color: var(--text); }

.btn-danger {
  background: transparent;
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  color: var(--danger);
}
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }

.btn-lg { min-height: 50px; padding: 0 22px; font-size: 1.02rem; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text-soft);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background 0.18s var(--ease);
}
.icon-btn:hover { border-color: var(--accent); color: var(--text); }

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 640;
  font-size: 0.86rem;
}
.link-btn svg { width: 0.95rem; height: 0.95rem; }
.link-btn:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Shell ---------- */
.app-shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.rail {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 26px;
  height: 100vh;
  height: 100dvh;
  padding: 22px 16px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(16px);
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand-text strong { display: block; font-size: 1.02rem; line-height: 1.1; }
.brand-text small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.76rem; }

.tabs { display: grid; gap: 6px; }
.tab {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--text-soft);
  font-weight: 600;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.tab svg { color: var(--muted); transition: color 0.18s var(--ease); }
.tab:hover { background: var(--surface-2); color: var(--text); }
.tab.is-active { background: var(--accent-soft); color: var(--accent-deep); }
.tab.is-active svg { color: var(--accent); }

.rail-footer { display: flex; gap: 8px; margin-top: auto; }

/* ---------- Workspace ---------- */
.workspace {
  width: min(var(--maxw), 100%);
  min-width: 0; /* allow the grid track to shrink to the viewport so wide content can't scroll the page sideways */
  margin: 0 auto;
  padding: 24px clamp(16px, 3vw, 34px) 64px;
}

.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.topbar h1 { margin: 4px 0 0; font-size: clamp(1.7rem, 3.4vw, 2.15rem); line-height: 1.04; }
.topbar-lead { display: flex; align-items: center; gap: 13px; min-width: 0; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }

.session-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.session-pill svg { width: 0.95rem; height: 0.95rem; }
.session-pill.over { color: var(--clay); border-color: color-mix(in srgb, var(--clay) 38%, transparent); }

/* ---------- Command strip ---------- */
.command-strip {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 42px;
  gap: 10px;
  margin-bottom: 12px;
}
.mic-btn {
  display: grid;
  place-items: center;
  height: 52px;
  border: 1px solid color-mix(in srgb, var(--clay) 30%, var(--line));
  border-radius: var(--radius);
  background: var(--clay-soft);
  color: var(--clay);
  transition: transform 0.15s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease);
}
.mic-btn:hover { transform: translateY(-1px); }
.mic-btn.is-listening {
  background: var(--clay);
  color: #fff;
  animation: pulse 1.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--clay) 45%, transparent); }
  50% { box-shadow: 0 0 0 9px transparent; }
}
.command-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 6px;
  align-items: center;
  height: 52px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.command-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.command-form input { width: 100%; min-width: 0; height: 100%; padding: 0 12px; border: 0; background: transparent; outline: none; }
.command-form input::placeholder { color: var(--muted); }
.run-btn { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); border-color: transparent; color: var(--accent-deep); }
.run-btn:hover { background: var(--accent); color: #fff; }
.hint-btn {
  display: grid; place-items: center;
  height: 52px; width: 42px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--muted);
}
.hint-btn:hover { color: var(--text); border-color: var(--line-strong); }

.command-hints {
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.command-hints ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; }
.command-hints button {
  padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text-soft); font-size: 0.84rem;
}
.command-hints button:hover { border-color: var(--accent); color: var(--text); }

/* ---------- Coach ---------- */
.coach-panel { margin-bottom: 14px; }
.coach-panel:empty { display: none; }
.coach-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--sky) 28%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--sky) 9%, var(--surface));
  animation: rise 0.3s var(--ease);
}
.coach-card .coach-icon {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 11px;
  background: color-mix(in srgb, var(--sky) 18%, var(--surface));
  color: var(--sky);
}
.coach-card h2 { margin: 0; font-size: 0.95rem; }
.coach-card p { margin: 4px 0 0; color: var(--text-soft); line-height: 1.5; }
.coach-card .coach-dismiss { margin-left: auto; }

/* ---------- Views ---------- */
.view { display: none; animation: rise 0.32s var(--ease); }
.view.is-active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.panel {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.section-heading h2 { margin: 5px 0 0; font-size: 1.16rem; }

/* ---------- Hero ---------- */
.hero {
  margin-bottom: 16px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 62%);
  box-shadow: var(--shadow);
}
.hero-greeting { margin: 0; font-size: clamp(1.35rem, 3vw, 1.7rem); font-weight: 700; letter-spacing: -0.02em; }
.hero-sub { margin: 6px 0 0; color: var(--text-soft); font-size: 1rem; line-height: 1.5; max-width: 60ch; }

/* ---------- Balance nudge ---------- */
.nudge {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--clay) 30%, var(--line));
  border-left: 4px solid var(--clay);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--clay) 8%, var(--surface));
  animation: rise 0.3s var(--ease);
}
.nudge[hidden] { display: none; }
.nudge .nudge-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--clay) 16%, var(--surface)); color: var(--clay); }
.nudge p { margin: 0; line-height: 1.45; }
.nudge strong { color: var(--text); }
.nudge .nudge-act { margin-left: auto; }

/* ---------- Focus (the three) ---------- */
.focus-section { margin-bottom: 16px; }
.focus-list { display: grid; gap: 12px; }

.focus-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease), opacity 0.3s var(--ease);
}
.focus-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.focus-card .rank {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface-sunk);
  color: var(--muted);
  font-size: 0.82rem; font-weight: 700;
}
.focus-card .focus-title { margin: 0; font-size: 1.08rem; font-weight: 650; line-height: 1.3; }
.focus-card .focus-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }

.check-btn {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex: none;
  border: 2px solid color-mix(in srgb, var(--accent) 36%, var(--line));
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.12s var(--ease);
}
.check-btn svg { width: 1.3rem; height: 1.3rem; opacity: 0; transition: opacity 0.15s var(--ease); }
.check-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.check-btn:hover svg { opacity: 0.55; }
.check-btn:active { transform: scale(0.92); }

.task-done .check-btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.task-done .check-btn svg { opacity: 1; }
.task-done .focus-title,
.task-done .task-title { text-decoration: line-through; color: var(--muted); }
.task-done { opacity: 0.62; }

@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.just-checked .check-btn { animation: pop 0.4s var(--ease); }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 23px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunk);
  color: var(--text-soft);
  font-size: 0.74rem;
  font-weight: 600;
}
.chip svg { width: 0.78rem; height: 0.78rem; }
.chip.pillar {
  color: color-mix(in srgb, var(--chip) 78%, var(--text));
  background: color-mix(in srgb, var(--chip) 16%, var(--surface));
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--chip, var(--accent)); }
.chip.owner-both { color: var(--plum); background: color-mix(in srgb, var(--plum) 14%, var(--surface)); }
.effort { color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

/* ---------- Today grid ---------- */
.today-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.momentum-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.momentum-cell {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.momentum-cell .m-top { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.momentum-cell .m-top svg { width: 1rem; height: 1rem; }
.momentum-cell .m-val { display: block; margin-top: 10px; font-size: 1.7rem; font-weight: 720; line-height: 1; letter-spacing: -0.02em; }
.momentum-cell .m-copy { display: block; margin-top: 7px; color: var(--text-soft); font-size: 0.82rem; line-height: 1.35; }
.momentum-cell.accent .m-val { color: var(--accent); }
.momentum-cell.calm .m-val { color: var(--sky); }

/* ---------- Household ---------- */
.partner-load { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.load-cell { padding: 12px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); text-align: center; }
.load-cell .load-name { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 0.78rem; font-weight: 650; }
.load-cell .load-name .dot { width: 8px; height: 8px; border-radius: 50%; }
.load-cell strong { display: block; margin-top: 8px; font-size: 1.5rem; line-height: 1; }
.load-cell small { display: block; margin-top: 5px; color: var(--muted); font-size: 0.76rem; }

.mini-list { display: grid; gap: 9px; }
.mini-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.mini-task p { margin: 0; font-weight: 600; }
.mini-task .mini-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* ---------- Pillar row ---------- */
.pillar-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pillar-mini { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.pillar-mini header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pillar-mini strong { font-size: 0.92rem; }
.pillar-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dot); flex: none; }
.pillar-mini small { display: block; margin-top: 9px; color: var(--muted); font-size: 0.76rem; }
.pillar-mini.attention { border-color: color-mix(in srgb, var(--clay) 35%, var(--line)); }

.bar-track { height: 8px; margin-top: 11px; border-radius: var(--radius-pill); background: var(--surface-sunk); overflow: hidden; }
.bar-fill { height: 100%; width: var(--fill); border-radius: inherit; background: var(--dot, var(--accent)); transition: width 0.6s var(--ease); }

/* ---------- Tasks ---------- */
.add-task-bar {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.add-task-bar input[type="text"] {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  outline: none;
}
.add-task-bar input[type="text"]:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.add-task-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px; }
.add-task-options select {
  min-width: 0; /* let the select shrink below its longest option so it can't push the page wide */
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  outline: none;
}
.add-task-options select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }

.task-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line); }
.segmented button {
  min-height: 32px;
  padding: 0 13px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 600;
}
.segmented button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.task-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.task-column { min-width: 0; }
.task-column h2 { margin: 0 0 12px; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.task-column .col-count { color: var(--line-strong); }

.task-card {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease);
}
.task-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.task-card .task-head { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: start; gap: 12px; }
.task-card .task-title { margin: 0; font-weight: 620; line-height: 1.3; }
.task-card .task-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.task-card .check-btn { width: 30px; height: 30px; border-width: 1.7px; }
.task-card .check-btn svg { width: 0.95rem; height: 0.95rem; }
.task-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.task-actions { display: flex; gap: 6px; }
.small-icon {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--text-soft);
}
.small-icon:hover { border-color: var(--accent); color: var(--text); }
.small-icon svg { width: 0.95rem; height: 0.95rem; }

/* ---------- Balance ---------- */
.analytics-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; align-items: start; margin-bottom: 16px; }

.score-ring {
  display: grid;
  place-items: center;
  gap: 2px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--surface) 77%, transparent 78%),
    conic-gradient(var(--accent) calc(var(--score, 0) * 1%), var(--surface-sunk) 0);
  text-align: center;
}
.score-num { font-size: 1.2rem; font-weight: 740; line-height: 1; color: var(--text); }
.score-cap { font-size: 0.58rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); line-height: 1; }

.balance-list { display: grid; gap: 12px; }
.balance-item { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.balance-item header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.balance-item strong { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; }
.balance-item .pct { color: var(--text-soft); font-variant-numeric: tabular-nums; font-weight: 650; }
.balance-item .bi-right { display: inline-flex; align-items: center; gap: 10px; }
.add-time-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-soft); font-size: 0.76rem; font-weight: 620; }
.add-time-btn svg { width: 0.8rem; height: 0.8rem; }
.add-time-btn:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }
.balance-item small { display: block; margin-top: 9px; color: var(--muted); font-size: 0.78rem; }
.balance-item.attention { border-color: color-mix(in srgb, var(--clay) 35%, var(--line)); }
.balance-item.attention small { color: var(--clay); }

.year-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.year-stat { padding: 13px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); }
.year-stat strong { display: block; margin-top: 7px; font-size: 1.1rem; letter-spacing: -0.01em; }
.year-stat small { display: block; margin-top: 4px; color: var(--muted); font-size: 0.75rem; }

.heatmap-wrap { display: grid; gap: 12px; }
.heatmap { display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); gap: 4px; }
.heat-day { aspect-ratio: 1; border-radius: 3px; background: var(--heat); }
.heat-legend { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.72rem; }
.heat-key { width: 13px; height: 13px; border-radius: 3px; }
.heat-key[data-level="0"] { background: var(--surface-sunk); }
.heat-key[data-level="1"] { background: color-mix(in srgb, var(--accent) 28%, var(--surface)); }
.heat-key[data-level="2"] { background: color-mix(in srgb, var(--accent) 50%, var(--surface)); }
.heat-key[data-level="3"] { background: color-mix(in srgb, var(--accent) 74%, var(--surface)); }
.heat-key[data-level="4"] { background: var(--accent-deep); }

.goals-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.goal-card {
  display: flex; flex-direction: column;
  padding: 17px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--dot, var(--accent));
  border-radius: var(--radius);
  background: var(--surface-2);
}
.goal-card h3 { margin: 7px 0 0; font-size: 1rem; }
.goal-card .goal-why { margin: 8px 0 0; color: var(--text-soft); font-size: 0.86rem; line-height: 1.45; flex: 1; }
.goal-progress { display: flex; align-items: center; gap: 11px; margin-top: 15px; }
.goal-progress .bar-track { flex: 1; margin: 0; }
.goal-progress strong { font-size: 0.86rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }

/* ---------- Reflect ---------- */
.review-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 16px; align-items: start; }
.review-form { display: grid; gap: 14px; }
.review-form label { display: grid; gap: 7px; font-size: 0.82rem; font-weight: 640; color: var(--text-soft); }
.review-form textarea {
  min-height: 88px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  resize: vertical;
  outline: none;
  font-weight: 450;
  color: var(--text);
  line-height: 1.5;
}
.review-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.review-history { display: grid; gap: 11px; }
.review-item { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.review-item strong { display: block; font-size: 0.9rem; }
.review-item p { margin: 8px 0 0; color: var(--text-soft); font-size: 0.88rem; line-height: 1.5; }

/* ---------- Settings ---------- */
.settings-layout { display: grid; gap: 16px; max-width: 760px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.settings-grid label, .settings-toggle { display: grid; gap: 7px; font-size: 0.82rem; font-weight: 640; color: var(--text-soft); }
.settings-grid input, .settings-grid select {
  min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); outline: none; font-weight: 500; color: var(--text);
}
.settings-grid input:focus, .settings-grid select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.settings-toggle { grid-template-columns: 1fr auto; align-items: center; }
.settings-toggle small { display: block; margin-top: 2px; color: var(--muted); font-weight: 500; }
.settings-toggle input { width: 46px; height: 28px; accent-color: var(--accent); }
.settings-note { margin: 0 0 14px; color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
.build-tag { text-align: center; opacity: 0.55; font-size: 0.72rem; letter-spacing: 0.05em; margin: 22px 0 4px; }
.targets-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.area-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.area-row.archived { opacity: 0.72; background: var(--surface-sunk); }
.area-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.area-name-cell { display: grid; gap: 2px; min-width: 0; }
.area-name-cell small { color: var(--muted); font-size: 0.72rem; }
.area-name { min-height: 38px; padding: 0 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text); font-weight: 600; outline: none; }
.area-name:disabled { color: var(--muted); }
.area-name:hover { border-color: var(--line); }
.area-name:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--ring); }
.area-target { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.78rem; }
.area-target input { width: 56px; min-height: 36px; padding: 0 8px; text-align: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); outline: none; font-variant-numeric: tabular-nums; }
.area-target input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.area-row:not(.archived) .small-icon:hover { border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); }
.target-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2);
}
.target-row .t-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; }
.target-row input { width: 64px; min-height: 38px; padding: 0 8px; text-align: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); outline: none; font-variant-numeric: tabular-nums; }
.target-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.data-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.install-note { margin-top: 14px; }

/* ---------- Away / done screen ---------- */
.away-screen {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(20px);
  animation: rise 0.4s var(--ease);
}
.away-screen[hidden] { display: none; }
.away-card {
  width: min(440px, 100%);
  padding: 34px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.away-card .logo-mark { margin: 0 auto; }
.away-card h2 { margin: 14px 0 10px; font-size: 1.7rem; }
.away-card p { color: var(--text-soft); line-height: 1.55; }
.away-stat { margin-top: 16px !important; padding: 12px; border-radius: var(--radius); background: var(--surface-2); color: var(--text) !important; font-size: 0.9rem; }
.away-card .btn { margin-top: 20px; }

/* ---------- Onboarding ---------- */
.onboarding {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 24px;
  background: var(--bg);
}
.onboarding[hidden] { display: none; }
.onboarding-card {
  width: min(440px, 100%);
  padding: 32px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.onboarding-card .logo-mark { margin-bottom: 18px; }
.onboarding-card h1 { margin: 8px 0 0; font-size: 1.6rem; }
.onboarding-card .lead { margin: 12px 0 0; color: var(--text-soft); line-height: 1.55; }
.onboarding-form { display: grid; gap: 14px; margin: 22px 0 0; }
.onboarding-form label { display: grid; gap: 7px; font-size: 0.82rem; font-weight: 640; color: var(--text-soft); }
.onboarding-form label small { color: var(--muted); font-weight: 500; }
.onboarding-form input {
  min-height: 48px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); outline: none; font-weight: 500; color: var(--text);
}
.onboarding-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.onboarding-form .btn { margin-top: 6px; }
.onboarding-card .fine { margin: 16px 0 0; color: var(--muted); font-size: 0.78rem; text-align: center; }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--bg) 70%, rgba(0,0,0,0.3));
  backdrop-filter: blur(8px);
  animation: rise 0.25s var(--ease);
}
.modal[hidden] { display: none; }
.modal-card {
  width: min(460px, 100%);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.modal-card h2 { margin: 0 0 4px; font-size: 1.2rem; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.modal-form { display: grid; gap: 14px; }
.modal-form label { display: grid; gap: 7px; font-size: 0.82rem; font-weight: 640; color: var(--text-soft); }
.modal-form input, .modal-form textarea, .modal-form select {
  min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); outline: none; color: var(--text); font-weight: 500;
}
.modal-form textarea { min-height: 72px; resize: vertical; line-height: 1.5; }
.modal-form input:focus, .modal-form textarea:focus, .modal-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }

/* ---------- FAB (mobile) ---------- */
.fab { display: none; }

/* ---------- Toasts ---------- */
.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: grid; gap: 8px; width: min(340px, calc(100vw - 36px)); }
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  animation: toastIn 0.28s var(--ease);
}
.toast .toast-icon { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--accent-soft); color: var(--accent-deep); }
.toast .toast-msg { flex: 1; min-width: 0; }
.toast-action { flex: none; padding: 6px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--accent-deep); font-weight: 660; font-size: 0.82rem; }
.toast-action:hover { border-color: var(--accent); background: var(--accent-soft); }
.toast.out { animation: toastOut 0.3s var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }

/* ---------- Empty states ---------- */
.empty-state {
  display: grid; place-items: center; gap: 6px;
  min-height: 120px; padding: 22px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
  font-size: 0.9rem;
}
.empty-state svg { width: 1.5rem; height: 1.5rem; color: var(--line-strong); margin-bottom: 2px; }

/* ---------- Quiet mode ---------- */
.quiet .toast-region { display: none; }
.quiet .momentum-cell .m-val,
.quiet .load-cell strong,
.quiet .score-num,
.quiet .year-stat strong,
.quiet .balance-item .pct { color: var(--text-soft); }

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 960px) {
  .app-shell { grid-template-columns: 1fr; }
  .rail {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    z-index: 50;
    flex-direction: row; align-items: center;
    height: auto;
    gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
  }
  .brand { display: none; }
  .topbar-logo { display: block; }
  .tabs { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
  .tab { flex-direction: column; gap: 3px; min-width: 0; min-height: 52px; padding: 6px 1px; border-radius: 12px; font-size: 0.62rem; font-weight: 600; }
  .tab svg { width: 1.25rem; height: 1.25rem; }
  .tab span { font-size: 0.6rem; }
  .rail-footer { margin: 0; }
  .rail-footer #themeButton { display: none; }
  .workspace { padding: 18px 16px calc(96px + env(safe-area-inset-bottom)); }
  .today-grid, .analytics-layout, .review-layout { grid-template-columns: 1fr; }
  .fab {
    display: grid; place-items: center;
    position: fixed; right: 18px; bottom: calc(82px + env(safe-area-inset-bottom));
    z-index: 49;
    width: 56px; height: 56px;
    border: 0; border-radius: 18px;
    background: var(--accent-deep); color: #fff;
    box-shadow: var(--shadow-lg);
  }
  .fab svg { width: 1.5rem; height: 1.5rem; }
  .toast-region { bottom: calc(88px + env(safe-area-inset-bottom)); }
}

@media (max-width: 680px) {
  .pillar-row, .partner-load, .year-stats, .goals-grid,
  .settings-grid, .targets-grid { grid-template-columns: 1fr; }
  .task-board { grid-template-columns: 1fr; }
  .add-task-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .add-task-options .btn { grid-column: 1 / -1; }
  .heatmap { grid-template-columns: repeat(18, minmax(0, 1fr)); }
  .topbar { align-items: flex-start; }
  .done-btn span { display: none; }
  .session-pill { display: none; }
  .command-strip { grid-template-columns: 48px minmax(0, 1fr) 40px; }
  .section-heading { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ===========================================================================
   Habits engine, scoreboard, screen time (v3)
   =========================================================================== */

/* ---- Scoreboard ---- */
.scoreboard {
  margin-bottom: 16px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 64%);
  box-shadow: var(--shadow);
}
.score-main { display: flex; align-items: center; gap: 20px; }
.score-ring.big {
  width: 108px; height: 108px; flex: none;
  background:
    radial-gradient(closest-side, var(--surface) 78%, transparent 79%),
    conic-gradient(var(--accent) calc(var(--score, 0) * 1%), var(--surface-sunk) 0);
}
.score-ring.big .score-num { font-size: 1.9rem; font-weight: 760; }
.score-ring.big .score-cap { font-size: 0.64rem; }
.score-ring.bump { animation: ringPop 0.45s var(--ease); }
@keyframes ringPop { 0% { transform: scale(1); } 38% { transform: scale(1.08); } 100% { transform: scale(1); } }
.score-meta { flex: 1; min-width: 0; }
.score-line { margin: 4px 0 12px; font-size: 1.12rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; }
.score-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.score-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text-soft);
  font-size: 0.8rem; font-weight: 620;
}
.score-chip svg { width: 0.9rem; height: 0.9rem; color: var(--muted); }
.score-chip.streak.hot { color: var(--clay); border-color: color-mix(in srgb, var(--clay) 36%, transparent); }
.score-chip.streak.hot svg { color: var(--clay); }
.score-chip.good { color: var(--sage-deep); border-color: color-mix(in srgb, var(--sage) 38%, transparent); }
.score-chip.bad { color: var(--clay); border-color: color-mix(in srgb, var(--clay) 40%, transparent); }
.score-chip.good svg, .score-chip.bad svg { color: currentColor; }
.level-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; cursor: pointer; border-radius: var(--radius); padding: 4px; margin-left: -4px; margin-right: -4px; transition: background 0.18s var(--ease); }
.level-row:hover { background: var(--surface-sunk); }
.level-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Level detail popup */
.level-modal { display: grid; gap: 14px; }
.level-meaning { margin: 0; color: var(--text-soft); font-style: italic; }
.level-bar.big { height: 12px; }
.level-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.level-stat { text-align: center; padding: 12px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.level-stat strong { display: block; font-size: 1.3rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.level-stat small { display: block; margin-top: 3px; color: var(--muted); font-size: 0.74rem; }
.level-stat.accent { border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); background: color-mix(in srgb, var(--gold) 12%, var(--surface)); }
.level-stat.accent strong { color: var(--gold); }
.level-note { margin: 0; color: var(--muted); font-size: 0.84rem; line-height: 1.55; }
.level-note strong { color: var(--text); }

/* Drag to reorder */
.drag-handle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 15px; margin-left: -3px; align-self: stretch; color: var(--muted); cursor: grab; touch-action: none; opacity: 0.5; transition: opacity 0.15s var(--ease); }
.drag-handle:hover { opacity: 1; }
.drag-handle:active { cursor: grabbing; }
.drag-handle svg { width: 18px; height: 18px; pointer-events: none; }
.drag-spacer { cursor: default; pointer-events: none; opacity: 0; }
.todo-row, .task-card, .habit-row, .habit-card { transition: transform 0.16s var(--ease); }
.todo-row.dragging, .task-card.dragging, .habit-row.dragging, .habit-card.dragging { transition: none; box-shadow: var(--shadow-lg, 0 14px 30px rgba(0,0,0,0.22)); position: relative; cursor: grabbing; }
.is-sorting { user-select: none; -webkit-user-select: none; }
.is-sorting .drag-handle { opacity: 1; }
/* Habit board grouped by time of day */
.habit-group { margin-bottom: 18px; }
.habit-group-head { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; color: var(--text-soft); font-size: 0.82rem; font-weight: 680; text-transform: uppercase; letter-spacing: 0.04em; }
.habit-group-head svg { width: 0.95rem; height: 0.95rem; color: var(--accent); }
.habit-group-list { display: grid; gap: 12px; }
/* Done-today column in the Tasks tab */
.done-column { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 14px; }

/* Insights — patterns mined from history */
.insights-panel { margin-bottom: 16px; }
.insights-summary { margin: 0 0 14px; color: var(--text-soft); font-size: 0.95rem; line-height: 1.55; }
.insights-summary:empty { display: none; }
.insights-grid { display: grid; gap: 10px; }
.insight-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: start; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.insight-card p { margin: 0; line-height: 1.5; font-size: 0.9rem; }
.insight-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--accent-soft); color: var(--accent-deep); }
.insight-ic svg { width: 1rem; height: 1rem; }
.insight-card.kind-watch .insight-ic { background: color-mix(in srgb, var(--clay) 15%, var(--surface)); color: var(--clay); }
.insight-card.kind-forecast .insight-ic { background: color-mix(in srgb, var(--gold) 15%, var(--surface)); color: var(--gold); }
/* Today insight — one rotating headline, taps through to Growth */
.today-insight { display: flex; align-items: center; gap: 11px; width: 100%; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; transition: border-color 0.15s var(--ease), background 0.15s var(--ease); }
.today-insight:hover { border-color: var(--accent); background: var(--surface); }
.today-insight .ti-text { flex: 1; min-width: 0; font-size: 0.9rem; line-height: 1.4; }
.today-insight .insight-go { width: 1rem; height: 1rem; flex: none; color: var(--muted); }

/* "New version ready" banner */
.update-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 88px); z-index: 200; display: inline-flex; align-items: center; white-space: nowrap; gap: 9px; padding: 11px 16px; border: 1px solid var(--accent); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg, 0 14px 34px rgba(0,0,0,0.28)); font-size: 0.88rem; cursor: pointer; animation: rise 0.3s var(--ease); }
.update-banner svg { width: 1rem; height: 1rem; color: var(--accent); flex: none; }
.update-banner strong { color: var(--accent-deep); font-weight: 720; }
@media (min-width: 961px) { .update-banner { bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); } }
.level-badge { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 5px 11px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--gold) 16%, var(--surface)); color: var(--gold); font-size: 0.8rem; font-weight: 720; white-space: nowrap; }
.level-badge svg { width: 0.85rem; height: 0.85rem; }
.level-bar { flex: 1; height: 8px; border-radius: var(--radius-pill); background: var(--surface-sunk); overflow: hidden; }
.level-bar-fill { height: 100%; width: var(--fill, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 70%, var(--clay))); transition: width 0.6s var(--ease); }
.level-xp { flex: none; color: var(--muted); font-size: 0.76rem; font-weight: 620; font-variant-numeric: tabular-nums; }

.score-bar { height: 10px; margin-top: 16px; border-radius: var(--radius-pill); background: var(--surface-sunk); overflow: hidden; }
.score-bar-fill { height: 100%; width: var(--fill, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); transition: width 0.6s var(--ease); }
.count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 7px; margin-left: 6px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-deep); font-size: 0.78rem; font-weight: 700; vertical-align: middle; }

/* ---- Routine (habits today) ---- */
.routine-panel { margin-bottom: 16px; }
.routine-groups { display: grid; gap: 16px; }
.routine-group { display: grid; gap: 8px; }
.routine-head { display: flex; align-items: center; justify-content: space-between; }
.routine-time { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.routine-time svg { width: 1rem; height: 1rem; color: var(--accent); }
.routine-progress { font-size: 0.8rem; font-weight: 650; color: var(--text-soft); font-variant-numeric: tabular-nums; }

.habit-row {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 13px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2);
  transition: opacity 0.25s var(--ease);
}
.habit-body { min-width: 0; }
.habit-title { margin: 0; font-weight: 620; line-height: 1.3; }
.habit-cue { margin: 3px 0 0; color: var(--muted); font-size: 0.82rem; font-style: italic; }
.habit-identity { margin: 3px 0 0; color: var(--accent-deep); font-size: 0.82rem; font-weight: 600; }
.habit-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.habit-done { opacity: 0.6; }
.habit-done .habit-title { text-decoration: line-through; color: var(--muted); }
.streak-chip { color: var(--clay); background: color-mix(in srgb, var(--clay) 12%, var(--surface)); }
.streak-chip svg { width: 0.78rem; height: 0.78rem; }
.two-min { color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--surface)); }
.two-min svg { width: 0.78rem; height: 0.78rem; }

/* ---- Today to-do ---- */
.todo-panel { margin-bottom: 16px; }
.quick-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-bottom: 14px; }
.quick-add input { min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); outline: none; }
.quick-add input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.todo-list { display: grid; gap: 8px; }
.todo-row {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 9px;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  transition: opacity 0.25s var(--ease), background 0.15s var(--ease);
}
.todo-row:hover { background: var(--surface-2); }
.todo-row .check-btn { width: 38px; height: 38px; }
.todo-row .small-icon { width: 29px; height: 29px; border-radius: 9px; }
.todo-row .small-icon svg { width: 0.95rem; height: 0.95rem; }
.todo-actions { gap: 4px; }
.todo-body { min-width: 0; }
.todo-title { margin: 0; font-weight: 580; line-height: 1.3; }
.todo-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.todo-actions { display: flex; gap: 5px; }
.tag-btn { border: 0; cursor: pointer; }
.tag-btn:hover { outline: 2px solid color-mix(in srgb, var(--chip) 40%, transparent); outline-offset: 1px; }
.chip.overdue { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.todo-row.task-done { opacity: 0.55; }
.todo-row.task-done .todo-title { text-decoration: line-through; }
.later-row .restore { color: var(--accent); }
.later-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: 12px; padding: 11px 13px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: transparent; color: var(--text-soft); font-weight: 600;
}
.later-toggle:hover { background: var(--surface-2); }
.later-toggle .chev { width: 1rem; height: 1rem; margin-left: auto; transition: transform 0.2s var(--ease); }
.later-toggle.open .chev { transform: rotate(180deg); }
.later-list { display: grid; gap: 8px; margin-top: 10px; }

/* ---- Habits view ---- */
.atomic-banner { margin-bottom: 16px; border-left: 3px solid var(--accent); }
.atomic-copy { margin: 6px 0 0; color: var(--text-soft); line-height: 1.55; max-width: 70ch; }
.habit-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.habit-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; border: 1px solid var(--line); border-left: 3px solid var(--dot, var(--accent));
  border-radius: var(--radius); background: var(--surface-2);
  transition: opacity 0.25s var(--ease);
}
.habit-card.habit-done { opacity: 0.66; }
.habit-card-top { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.habit-card-body { min-width: 0; }
.habit-card .check-btn.ghost { border-style: dashed; border-color: var(--line-strong); background: transparent; cursor: default; }
.chain-row { display: flex; gap: 4px; flex-wrap: nowrap; }
.chain-dot { flex: 1; height: 14px; border-radius: 4px; background: var(--surface-sunk); }
.chain-dot.on { background: var(--accent); }
.chain-dot.miss { background: color-mix(in srgb, var(--danger) 30%, var(--surface-sunk)); }
.chain-dot.today { background: transparent; border: 1.5px dashed var(--accent); }
.chain-dot.off { background: var(--surface-sunk); opacity: 0.5; }

/* ---- Screen time ---- */
.screen-panel { margin-bottom: 16px; }
.split-bar { display: flex; height: 16px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-sunk); }
.split-bar span { display: block; }
.split-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; font-size: 0.82rem; color: var(--text-soft); }
.split-key { display: inline-flex; align-items: center; gap: 7px; }
.split-key .dot { width: 9px; height: 9px; border-radius: 50%; }
.split-total { margin-left: auto; font-weight: 650; color: var(--text); }
.screen-form { display: grid; grid-template-columns: minmax(0, 1.6fr) 80px minmax(0, 1fr) auto; gap: 10px; margin: 16px 0 12px; }
.screen-form input, .screen-form select { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); outline: none; }
.screen-form input:focus, .screen-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.screen-entries { display: flex; flex-wrap: wrap; gap: 8px; }
.screen-entry { display: inline-flex; align-items: center; gap: 7px; padding: 5px 6px 5px 11px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-2); font-size: 0.82rem; font-weight: 560; }
.screen-entry .se-dot { width: 8px; height: 8px; border-radius: 50%; }
.screen-entry.cat-productive .se-dot { background: var(--sage); }
.screen-entry.cat-neutral .se-dot { background: var(--muted); }
.screen-entry.cat-wasted .se-dot { background: var(--clay); }
.se-del { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.se-del:hover { background: var(--surface-sunk); color: var(--text); }
.se-del svg { width: 0.8rem; height: 0.8rem; }
.screen-trend { margin-top: 18px; }
.trend-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 96px; margin-top: 10px; }
.trend-col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.trend-stack { display: flex; flex-direction: column-reverse; justify-content: flex-start; width: 100%; max-width: 34px; height: 100%; border-radius: 6px; overflow: hidden; background: var(--surface-sunk); }
.trend-stack span { display: block; width: 100%; }
.trend-label { font-size: 0.7rem; color: var(--muted); font-weight: 600; }
.screen-note { margin-top: 16px; }

/* ---- Modal additions ---- */
.modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-label { display: block; margin-bottom: 7px; font-size: 0.82rem; font-weight: 640; color: var(--text-soft); }
.day-toggle { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.day { min-height: 40px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); color: var(--muted); font-weight: 650; font-size: 0.82rem; }
.day.on { background: var(--accent-soft); color: var(--accent-deep); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.min-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.min-chip { min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-soft); font-weight: 640; font-variant-numeric: tabular-nums; }
.min-chip.on { background: var(--accent-soft); color: var(--accent-deep); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.modal-card { max-height: 88vh; overflow-y: auto; }

/* ---- Reclaimed attention (Noble-inspired) ---- */
.reclaim-strip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
  margin-bottom: 16px; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm);
}
.reclaim-stat { display: flex; align-items: center; gap: 11px; }
.reclaim-stat .ri { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 11px; background: var(--accent-soft); color: var(--accent-deep); }
.reclaim-stat .ri svg { width: 1.05rem; height: 1.05rem; }
.reclaim-stat .ri.flame { background: color-mix(in srgb, var(--clay) 14%, var(--surface)); color: var(--clay); }
.reclaim-stat strong { display: block; font-size: 1.12rem; line-height: 1; font-variant-numeric: tabular-nums; }
.reclaim-stat span { font-size: 0.78rem; color: var(--muted); }
.touch-grass { margin-left: auto; }
.touch-grass.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent-deep); }
.touch-grass.running { background: var(--clay-soft); border-color: color-mix(in srgb, var(--clay) 45%, transparent); color: var(--clay); }
.touch-grass.running svg { display: none; }
.touch-grass.running::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--clay); animation: recPulse 1.3s ease-in-out infinite; }

/* Live offline-timer pill (top bar, visible on every view) */
.timer-pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--clay) 42%, transparent);
  border-radius: var(--radius-pill);
  background: var(--clay-soft); color: var(--clay);
  font-size: 0.85rem; font-weight: 660; font-variant-numeric: tabular-nums;
}
.timer-pill .rec { width: 8px; height: 8px; border-radius: 50%; background: var(--clay); animation: recPulse 1.3s ease-in-out infinite; }
.timer-pill:hover { border-color: var(--clay); }
@keyframes recPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.72); } }
.modal-actions { flex-wrap: wrap; }

/* Sync status pill (top bar) */
.sync-status { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); font-size: 0.8rem; font-weight: 640; }
.sync-status svg { width: 0.95rem; height: 0.95rem; }
.sync-status.synced { color: var(--accent-deep); border-color: color-mix(in srgb, var(--accent) 36%, transparent); }
.sync-status.saving { color: var(--muted); }
.sync-status.saving svg { animation: pulseFade 1.2s ease-in-out infinite; }
.sync-status.offline { color: var(--clay); border-color: color-mix(in srgb, var(--clay) 42%, transparent); }
@keyframes pulseFade { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.sync-card-status { font-weight: 600; }

/* Shared / Private to-do groups + badge */
.todo-group { margin-bottom: 16px; }
.todo-group-head { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 9px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.todo-group-head svg { width: 1rem; height: 1rem; }
.todo-group-head.shared { color: var(--accent-deep); }
.todo-group-head.shared svg { color: var(--accent-deep); }
.shared-badge { color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.shared-badge svg { width: 0.8rem; height: 0.8rem; }

/* Tree avatar */
.tree-panel { margin-bottom: 16px; display: flex; align-items: center; gap: 18px; }
.tree-art { flex: none; width: 150px; }
.tree-art svg { display: block; width: 100%; height: auto; }
.tree-info { flex: 1; min-width: 0; }
.tree-info h2 { margin: 3px 0 0; font-size: 1.4rem; }
/* Growth tab: the tree is the centered hero of the page */
.growth-hero { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-top: 26px; padding-bottom: 24px; margin-bottom: 18px; }
.growth-eyebrow { margin: 0; }
.growth-hero .tree-art { width: min(300px, 78%); }
.growth-hero .tree-info { flex: none; }
.growth-hero .tree-info h2 { font-size: clamp(1.6rem, 5vw, 2rem); }
.growth-hero .tree-meaning { max-width: 32ch; margin-left: auto; margin-right: auto; }
.tree-meaning { margin: 4px 0 12px; color: var(--text-soft); font-style: italic; line-height: 1.45; }
.decor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 4px 0 12px; }
.decor-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); color: var(--text); }
.decor-item.on { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft, color-mix(in srgb, var(--accent) 12%, var(--surface))); }
.decor-item.locked { opacity: 0.6; color: var(--muted); }
.decor-mark { width: 30px; height: 34px; display: grid; place-items: center; }
.decor-mark svg { width: 100%; height: 100%; overflow: visible; }
.decor-name { font-size: 0.84rem; font-weight: 640; }
.decor-hint { font-size: 0.72rem; color: var(--muted); text-align: center; }

@media (max-width: 680px) { .tree-art { width: 116px; } }

/* Together card (shared list, tracked as a duo) */
.together-card { margin-bottom: 16px; border-left: 3px solid var(--accent); }
.together-main { display: flex; align-items: center; gap: 18px; }
.together-card .score-ring { width: 78px; height: 78px; flex: none; }
.together-meta { flex: 1; min-width: 0; }
.together-line { margin: 4px 0 10px; font-size: 1.02rem; font-weight: 650; letter-spacing: -0.01em; }
.together-card .score-chip.streak.hot { color: var(--clay); border-color: color-mix(in srgb, var(--clay) 36%, transparent); }
.together-card .score-chip.streak.hot svg { color: var(--clay); }

.reclaim-board-panel { margin-bottom: 16px; }
.reclaim-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.reclaim-cell { padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.rc-val { display: block; font-size: 1.55rem; font-weight: 740; letter-spacing: -0.02em; line-height: 1; color: var(--accent-deep); }
.rc-label { display: block; margin-top: 9px; font-weight: 650; font-size: 0.86rem; }
.rc-copy { display: block; margin-top: 3px; color: var(--muted); font-size: 0.76rem; }

.device-split { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.device-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-2); font-size: 0.8rem; font-weight: 560; color: var(--text-soft); }
.device-chip svg { width: 0.85rem; height: 0.85rem; color: var(--muted); }

.screen-form { grid-template-columns: minmax(0, 1.5fr) 70px minmax(0, 1fr) minmax(0, 1fr) auto; }

.quiet .rc-val, .quiet .reclaim-stat strong { color: var(--text-soft); }

/* ---- Confetti (brief, tasteful) ---- */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 95; }
.confetti {
  position: fixed; width: 8px; height: 8px; border-radius: 2px;
  background: var(--c, var(--accent));
  transform: translate(-50%, -50%) rotate(var(--r));
  animation: confetti 0.9s var(--ease) forwards;
}
@keyframes confetti {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(var(--r)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 34px)) scale(0.35) rotate(calc(var(--r) + 200deg)); }
}

/* ---- Responsive (v3) ---- */
@media (max-width: 960px) {
  .habit-board { grid-template-columns: 1fr; }
  .reclaim-board { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .score-main { gap: 14px; }
  .score-ring.big { width: 92px; height: 92px; }
  .score-ring.big .score-num { font-size: 1.7rem; }
  .screen-form { grid-template-columns: 1fr 1fr; }
  .screen-form button { grid-column: 1 / -1; }
  .modal-row { grid-template-columns: 1fr; }
  .todo-meta .chip { font-size: 0.7rem; }
  .reclaim-strip { gap: 12px; }
  .touch-grass { margin-left: 0; width: 100%; }
  /* 16px keeps iOS Safari from auto-zooming when a field is focused */
  input, select, textarea { font-size: 16px; }
  .level-xp { display: none; }
}

/* ===========================================================================
   v40 — Alive tab, three rings, projects, retro check-off, household tree
   =========================================================================== */

/* Alive hero: the timer */
.alive-hero { text-align: left; }
.alive-chip { background: color-mix(in srgb, var(--clay, #d9684f) 14%, var(--surface)); color: var(--clay, #d9684f); }
.alive-clock { margin: 8px 0 2px; font-size: clamp(3rem, 12vw, 4.6rem); font-weight: 760; font-variant-numeric: tabular-nums; line-height: 1; text-align: center; color: var(--text); }
.alive-clock.running { color: var(--accent-deep); }
.alive-sub { margin: 6px 0 16px; text-align: center; color: var(--muted); font-size: 0.88rem; }
.alive-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.alive-controls label { display: grid; gap: 5px; font-size: 0.78rem; font-weight: 620; color: var(--text-soft); }
.alive-controls select { min-width: 0; min-height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); outline: none; }
.alive-controls.disabled { opacity: 0.45; pointer-events: none; }
.alive-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 12px; }
.alive-actions .btn-lg { min-width: 200px; justify-content: center; }
#aliveLadder .tier { white-space: nowrap; opacity: 0.75; }
#aliveLadder .tier.hit { color: var(--accent-deep); font-weight: 700; opacity: 1; }
.alive-cat-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.alive-cat-board .reclaim-cell.dim { opacity: 0.5; }

/* Today's three rings */
.rings-panel { margin-bottom: 16px; }
.rings-wrap { display: flex; align-items: center; gap: 20px; }
.rings-art { flex: none; width: min(200px, 44vw); }
.rings-art svg { display: block; width: 100%; height: auto; }
.rings-legend { display: grid; gap: 9px; }
.ring-key { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--text-soft); font-weight: 620; }
.ring-key i { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.ring-key.k0 i { background: #4f8fa6; } .ring-key.k1 i { background: #d9a53a; } .ring-key.k2 i { background: #d9684f; }
.xp-balance { margin-top: 16px; }
.xpb-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-sunk); }
.xpb-bar .w { background: #4f8fa6; } .xpb-bar .s { background: #d9a53a; } .xpb-bar .a { background: #d9684f; }
.xpb-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px; }
.gate-note { color: var(--clay, #b0563c); font-weight: 620; }
.level-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.cat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 0.8rem; font-weight: 680; }
.cat-chip svg { width: 0.85rem; height: 0.85rem; }
.cat-chip.water { background: color-mix(in srgb, #4f8fa6 15%, var(--surface)); color: #3d7186; }
.cat-chip.sun { background: color-mix(in srgb, #d9a53a 16%, var(--surface)); color: #a2761f; }
.cat-chip.alive { background: color-mix(in srgb, #d9684f 14%, var(--surface)); color: #b0563c; }

/* Projects: subtask checklist inside a task card / todo row */
.project-block { margin-top: 8px; }
.project-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); color: var(--text-soft); font-size: 0.8rem; font-weight: 650; cursor: pointer; }
.project-toggle .chev { width: 0.85rem; height: 0.85rem; transition: transform 0.18s var(--ease); }
.project-toggle.open .chev { transform: rotate(90deg); }
.project-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-sunk); overflow: hidden; }
.project-bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.subtask-list, .subtask-editor { display: grid; gap: 6px; margin-top: 8px; }
.subtask-row { display: flex; align-items: center; gap: 9px; }
.sub-check { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border: 1.6px solid color-mix(in srgb, var(--accent) 36%, var(--line)); border-radius: 8px; background: var(--surface); color: var(--accent); }
.sub-check svg { width: 0.8rem; height: 0.8rem; opacity: 0; }
.sub-check.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.sub-check.on svg { opacity: 1; }
.sub-title { flex: 1; min-width: 0; font-size: 0.86rem; }
.sub-title.done { text-decoration: line-through; color: var(--muted); }
.sub-del { width: 26px; height: 26px; }
.sub-del svg { width: 0.75rem; height: 0.75rem; }
.subtask-add { display: flex; gap: 8px; margin-top: 8px; }
.subtask-add input { flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); outline: none; }

/* Retroactive habit check-off chips */
.retro-days { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.retro-day { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--text-soft); font-size: 0.78rem; font-weight: 640; cursor: pointer; }
.retro-day svg { width: 0.78rem; height: 0.78rem; opacity: 0.25; }
.retro-day.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
.retro-day.on svg { opacity: 1; }

/* Household tree */
.together-tree { border-left: 3px solid var(--accent); flex-wrap: wrap; }
.together-tree .growth-eyebrow { flex: 1 1 100%; }

@media (max-width: 680px) {
  .alive-controls { grid-template-columns: 1fr; }
  .alive-cat-board { grid-template-columns: repeat(2, 1fr); }
  .rings-wrap { flex-direction: column; }
  .rings-art { width: min(230px, 62vw); }
}

/* Day-fed goals: dot strip + fed-today chip + link picker */
.goal-card { cursor: pointer; }
.goal-card:hover { border-color: var(--accent); }
.goal-feed { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.goal-dots { display: inline-flex; gap: 4px; }
.goal-dots .gd { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-sunk); }
.goal-dots .gd.on { background: var(--accent); }
.goal-fed { font-size: 0.74rem; font-weight: 680; color: var(--muted); }
.goal-fed.on { color: var(--accent-deep); }
.goal-stats { margin: 7px 0 0; font-size: 0.78rem; color: var(--text-soft); }
.goal-stats.hint { color: var(--muted); font-style: italic; }
.link-pick { display: grid; gap: 6px; margin-top: 8px; max-height: 180px; overflow-y: auto; padding-right: 2px; }
.pick-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; }
.pick-row.on { border-color: var(--accent); background: var(--accent-soft); }

/* ===========================================================================
   v43 — THE WAY: a Japanese ink-and-washi redesign.
   Structure from bamboo-scroll game UI; palette from the pastel reference:
   washi white, sakura, powder blue, sand, torii vermillion, sumi ink.
   Calming, inspiring, a little epic. (Classic theme preserved at tag v42-classic.)
   =========================================================================== */

:root {
  /* Washi Day */
  --bg: #edecE8;
  --bg-tint: #e7e5df;
  --surface: #fdfcf8;
  --surface-2: #f4f1e9;
  --surface-sunk: #e9e5da;
  --text: #2b2a2e;
  --text-soft: #575360;
  --muted: #837f88;
  --line: #e2ded4;
  --line-strong: #cfc9ba;

  --sage: #5e8a5e;
  --sage-deep: #47704a;
  --sage-soft: #e3ecdf;
  --clay: #c85a41;
  --clay-soft: #f7ded6;
  --sky: #5f9dc0;
  --gold: #cf9b3f;
  --plum: #7a6396;
  --rose: #d98d97;
  --danger: #b3402e;

  /* Torii vermillion leads the way */
  --accent: #c44f38;
  --accent-deep: #a03826;
  --accent-soft: #f6ddd4;
  --ring: rgba(196, 79, 56, 0.16);

  --ink-stroke: #3e6b78; /* the brush swash */
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
}

[data-theme="dark"] {
  /* Sumi Night */
  --bg: #1d1c19;
  --bg-tint: #21201c;
  --surface: #282622;
  --surface-2: #2f2c27;
  --surface-sunk: #232119;
  --text: #ece7db;
  --text-soft: #bcb5a8;
  --muted: #8f8a80;
  --line: #3a362f;
  --line-strong: #4a453c;

  --sage: #8db388;
  --sage-deep: #a3c49e;
  --sage-soft: #2c332a;
  --clay: #dd8266;
  --clay-soft: #322620;
  --sky: #86b6d3;
  --gold: #d8ab5b;
  --plum: #a892c4;
  --rose: #d8a3ab;
  --danger: #dd7a68;

  --accent: #dd6f55;
  --accent-deep: #e8886f;
  --accent-soft: #38251f;
  --ring: rgba(221, 111, 85, 0.22);
  --ink-stroke: #7fa8b5;
}

/* Washi paper: faint fiber grain + one huge, quiet ensō behind everything. */
body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Ccircle cx='300' cy='300' r='250' fill='none' stroke='%23c44f38' stroke-width='20' stroke-linecap='round' stroke-dasharray='1330 260' opacity='0.05' transform='rotate(115 300 300)'/%3E%3C/svg%3E") no-repeat calc(100% + 190px) -170px / 560px 560px fixed,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E") repeat fixed,
    radial-gradient(1100px 640px at 16% -6%, color-mix(in srgb, var(--sky) 7%, transparent), transparent 70%),
    radial-gradient(880px 540px at 108% 6%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 65%),
    var(--bg);
}

/* Type: calm mincho for what matters. */
h1, h2, h3, .brand-text strong, .score-num, .tree-info h2, .goal-card h3,
.onboarding-card h1, .level-modal .level-meaning, #treeTitle, #togetherTreeTitle {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.topbar h1 { font-weight: 700; }
.tree-meaning, .score-line, .together-line { font-family: var(--font-display); font-style: normal; }

/* The brush swash under the page title — ink drawn once, each morning. */
.topbar h1 {
  display: inline-block;
  padding-bottom: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 22' preserveAspectRatio='none'%3E%3Cpath d='M3 12 C38 5 92 3 141 6 C182 8 216 7 237 10 C222 16 183 19 132 18 C86 17 28 20 5 16 Z' fill='%233e6b78' opacity='0.82'/%3E%3C/svg%3E") no-repeat left bottom / min(150px, 78%) 10px;
}
[data-theme="dark"] .topbar h1 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 22' preserveAspectRatio='none'%3E%3Cpath d='M3 12 C38 5 92 3 141 6 C182 8 216 7 237 10 C222 16 183 19 132 18 C86 17 28 20 5 16 Z' fill='%237fa8b5' opacity='0.85'/%3E%3C/svg%3E");
}

/* Panels: washi cards with a hairline ink edge. */
.panel, .scoreboard, .together-card, .reclaim-strip, .add-task-bar, .task-card, .todo-row {
  border-color: var(--line);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent), var(--shadow-sm);
}
.panel, .scoreboard { border-width: 1px; }

/* Hand-pressed buttons: slightly organic, like a brush pressed to paper. */
.btn { border-radius: 13px 6px 14px 7px / 7px 14px 6px 13px; }
.btn-primary { background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-deep); }
.fab { background: var(--accent-deep); border-radius: 16px 9px 17px 10px / 10px 17px 9px 16px; }
.min-chip.on, .retro-day.on { border-radius: 11px 5px 12px 6px / 6px 12px 5px 11px; }

/* The level badge is a hanko — a red seal pressed by hand. */
.level-badge {
  background: var(--accent);
  color: #fdf6ec;
  border: none;
  border-radius: 9px 12px 10px 13px / 12px 9px 13px 10px;
  padding: 6px 12px;
  transform: rotate(-1.4deg);
  font-family: var(--font-display);
  font-weight: 600;
  box-shadow: inset 0 0 0 1.5px rgba(253, 246, 236, 0.35), 0 1px 3px rgba(0,0,0,0.18);
}
.level-badge svg { color: #fdf6ec; }

/* Bamboo progress: green cane with nodes; growth you can see. */
.score-bar-fill, .bar-fill, .project-bar span {
  background:
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(30, 40, 28, 0.16) 24px 26px),
    linear-gradient(180deg, #7fae6d, #5e8a52 58%, #4c7443);
}
.level-bar-fill {
  background:
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(90, 60, 10, 0.18) 24px 26px),
    linear-gradient(180deg, #e4bc6a, #cf9b3f);
}

/* Tabs: the active way is marked in vermillion ink. */
.tab.is-active { background: var(--accent-soft); color: var(--accent-deep); }
.tab.is-active svg { color: var(--accent); }
@media (max-width: 960px) {
  .tab.is-active {
    background: transparent;
    position: relative;
  }
  .tab.is-active::after {
    content: "";
    position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
    width: 26px; height: 5px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C14 3 32 2 44 4 C52 5 57 5 58 6 C52 9 36 11 22 10 C12 9 4 10 2 7 Z' fill='%23c44f38'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  }
}

/* Rings + chips keep their pastel voices (powder, sand, sakura-vermillion). */
.ring-key.k0 i, .xpb-bar .w { background: var(--sky); }
.ring-key.k1 i, .xpb-bar .s { background: var(--gold); }
.ring-key.k2 i, .xpb-bar .a { background: #d9684f; }
.cat-chip.water { background: color-mix(in srgb, var(--sky) 18%, var(--surface)); color: color-mix(in srgb, var(--sky) 72%, var(--text)); }
.cat-chip.sun { background: color-mix(in srgb, var(--gold) 20%, var(--surface)); color: color-mix(in srgb, var(--gold) 62%, var(--text)); }
.cat-chip.alive { background: var(--accent-soft); color: var(--accent-deep); }

/* Quiet flourishes. */
.eyebrow { letter-spacing: 0.14em; }
.growth-eyebrow, .alive-hero .eyebrow { color: var(--accent-deep); }
.together-tree { border-left-color: var(--ink-stroke); }
.insight-ic { border-radius: 10px 5px 11px 6px / 6px 11px 5px 10px; }
.update-banner strong { color: var(--accent-deep); }

/* ===========================================================================
   THE GROVE — washi + field-guide + bamboo theme (v44)
   Blend chosen from three proofs: washi-scroll foundation, specimen cards
   for collections, bamboo bars + kraft medallions + hanko seals for progress.
   Overrides the base theme via the cascade; remove this block to revert.
   =========================================================================== */
:root {
  --bg: #ece3cd;
  --bg-tint: #e7dec6;
  --surface: #f6efdd;
  --surface-2: #efe6d0;
  --surface-sunk: #e0d5b8;
  --text: #2d2a24;
  --text-soft: #57503f;
  --muted: #7a7260;
  --line: #d5c9a9;
  --line-strong: #b7a984;
  --ink: #2d2a24;
  --sage: #557d3c;
  --sage-deep: #3f6129;
  --sage-soft: #e3e3c4;
  --clay: #c94e2e;
  --clay-soft: #f0dcc9;
  --sky: #3c6e71;
  --gold: #c99b3f;
  --kraft: #b9885a;
  --kraft-deep: #8a5f3b;
  --danger: #b04a36;
  --ring: rgba(85, 125, 60, 0.18);
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", Georgia, serif;
}
[data-theme="dark"] {
  --bg: #17150f;
  --bg-tint: #1b1913;
  --surface: #221f17;
  --surface-2: #29251b;
  --surface-sunk: #1d1a12;
  --text: #eae2cd;
  --text-soft: #c6bca1;
  --muted: #948b73;
  --line: #3a3524;
  --line-strong: #4e4731;
  --ink: #eae2cd;
  --sage: #8db06a;
  --sage-deep: #a4c581;
  --sage-soft: #2a2f1c;
  --clay: #e06a45;
  --clay-soft: #33241a;
  --sky: #7fb0b3;
  --gold: #d9b25e;
  --kraft: #97744e;
  --kraft-deep: #6b4f30;
  --danger: #e07a63;
  --ring: rgba(141, 176, 106, 0.2);
}

/* Speckled washi ground — tiny ink flecks, like pressed paper */
body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cg fill='%232d2a24' opacity='.05'%3E%3Crect x='10' y='16' width='6' height='1.6' transform='rotate(24 10 16)'/%3E%3Crect x='52' y='9' width='5' height='1.5' transform='rotate(-28 52 9)'/%3E%3Crect x='30' y='46' width='6' height='1.6' transform='rotate(48 30 46)'/%3E%3Crect x='66' y='60' width='5' height='1.5' transform='rotate(12 66 60)'/%3E%3Crect x='14' y='70' width='5' height='1.5' transform='rotate(-40 14 70)'/%3E%3Ccircle cx='42' cy='26' r='1.1'/%3E%3Ccircle cx='20' cy='42' r='1'/%3E%3Ccircle cx='72' cy='34' r='1'/%3E%3C/g%3E%3C/svg%3E");
}
[data-theme="dark"] body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cg fill='%23eae2cd' opacity='.035'%3E%3Crect x='10' y='16' width='6' height='1.6' transform='rotate(24 10 16)'/%3E%3Crect x='52' y='9' width='5' height='1.5' transform='rotate(-28 52 9)'/%3E%3Crect x='30' y='46' width='6' height='1.6' transform='rotate(48 30 46)'/%3E%3Crect x='66' y='60' width='5' height='1.5' transform='rotate(12 66 60)'/%3E%3Ccircle cx='42' cy='26' r='1.1'/%3E%3Ccircle cx='20' cy='42' r='1'/%3E%3C/g%3E%3C/svg%3E");
}

/* Letterpress type: serif display voice for names and headings */
h1, h2, h3, .brand-text strong, .tree-info h2, .modal-card h2,
.todo-title, .task-card .task-title, .habit-title, .goal-card h3,
.score-num, .alive-clock, .onboarding-card h1 {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* Brush stroke under the view title — the scroll's ink signature */
.topbar h1 { position: relative; padding-bottom: 12px; }
.topbar h1::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 116px; height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 22'%3E%3Cpath d='M6 13C40 6 95 5 214 10' stroke='%233c6e71' stroke-width='11' fill='none' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E") no-repeat center / contain;
}
[data-theme="dark"] .topbar h1::after { filter: brightness(1.5); }

/* Washi panels: ink-lined sheets with a slightly hand-cut corner */
.panel, .scoreboard, .together-card, .insight-card, .today-insight {
  border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: 15px 13px 16px 13px;
}
/* Paper tape on the hero sheets */
.scoreboard, .tree-panel { position: relative; overflow: visible; }
.scoreboard::before, .tree-panel::before {
  content: "";
  position: absolute; top: -8px; left: 50%;
  width: 54px; height: 16px; margin-left: -27px;
  background: color-mix(in srgb, var(--line) 80%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  transform: rotate(-3deg);
  opacity: 0.95;
  pointer-events: none;
}

/* Tabs: ink glyphs, active one pressed like a red hanko seal */
.tab.is-active { background: transparent; color: var(--text); }
.tab.is-active svg {
  background: var(--clay);
  color: #f6efdd;
  border-radius: 8px;
  padding: 5px;
  width: 1.9rem; height: 1.9rem;
  transform: rotate(-3deg);
  transition: transform 0.2s var(--ease);
}
.tab span { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 960px) {
  .tab.is-active svg { width: 1.72rem; height: 1.72rem; padding: 4px; margin: -3px 0; }
}

/* Level badge → hanko seal */
.level-badge {
  background: var(--clay);
  color: #f6efdd;
  border-radius: 8px;
  transform: rotate(-2.5deg);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.05em;
  box-shadow: none;
}
.level-badge svg { color: #f6efdd; }

/* Count pills + streaks → kraft medallions */
.count-pill, .streak-chip {
  background: var(--kraft);
  color: #f9f2df;
  border: 2px solid var(--kraft-deep);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
}
.streak-chip svg { color: #f9f2df; }

/* Bamboo progress: green culm with node lines */
.bar-fill, .score-bar-fill {
  background: var(--sage);
  background-image: repeating-linear-gradient(90deg, transparent 0 21px, rgba(15, 25, 8, 0.28) 21px 24px);
}
.score-bar, .bar-track { border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }

/* Rows: washi slips with ink rules */
.todo-row, .task-card, .habit-card {
  border: 1.5px solid color-mix(in srgb, var(--ink) 26%, transparent);
  background: var(--surface);
}
.todo-row:hover, .task-card:hover { border-color: color-mix(in srgb, var(--ink) 45%, transparent); }

/* A completed task gets the ranger's stamp */
.task-card.task-done { position: relative; }
.task-card.task-done::after {
  content: "DONE";
  position: absolute; top: 8px; right: 10px;
  padding: 1px 7px;
  border: 2px solid var(--sage);
  border-radius: 999px;
  color: var(--sage);
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  transform: rotate(-9deg);
  opacity: 0.85;
  pointer-events: none;
}

/* Specimen cards: double ink frame (field-guide style) */
.balance-item, .decor-item {
  border: 2px solid color-mix(in srgb, var(--ink) 60%, transparent);
  border-radius: 11px;
  box-shadow: inset 0 0 0 3px var(--surface-2), inset 0 0 0 4px color-mix(in srgb, var(--ink) 30%, transparent);
  padding: 17px;
}
.decor-item { padding: 15px 10px; }
.decor-item.on {
  border-color: var(--sage-deep);
  box-shadow: inset 0 0 0 3px var(--surface-2), inset 0 0 0 4px color-mix(in srgb, var(--sage) 55%, transparent);
}

/* Modals: a washi sheet taped over the view */
.modal-card {
  border: 1.5px solid color-mix(in srgb, var(--ink) 35%, transparent);
  border-radius: 16px 14px 17px 14px;
  position: relative;
}
.modal-card::before {
  content: "";
  position: absolute; top: -8px; left: 50%;
  width: 54px; height: 16px; margin-left: -27px;
  background: color-mix(in srgb, var(--line) 80%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  transform: rotate(2deg);
  pointer-events: none;
}

/* Toast: a strip of ink */
.toast {
  background: #2d2a24;
  color: #f2ead6;
  border: none;
}
.toast .toast-icon { background: rgba(246, 239, 221, 0.14); color: #f2ead6; }
.toast .undo-btn { color: #e8ca8a; }
[data-theme="dark"] .toast { background: #eae2cd; color: #2d2a24; }
[data-theme="dark"] .toast .toast-icon { background: rgba(45, 42, 36, 0.12); color: #2d2a24; }
[data-theme="dark"] .toast .undo-btn { color: #8a5f3b; }

/* Buttons take the letterpress voice */
.btn { font-family: var(--font-display); letter-spacing: 0.03em; }
.btn-primary { background: var(--sage-deep); }
.btn-primary:hover { background: var(--sage); }
.fab { border: 2px solid color-mix(in srgb, var(--ink) 40%, transparent); background: var(--sage-deep); }

/* Ring legend keys match the new ink palette */
.ring-key.k0 i { background: #3c6e71; }
.ring-key.k1 i { background: #c99b3f; }
.ring-key.k2 i { background: #c94e2e; }
[data-theme="dark"] .ring-key.k0 i { background: #7fb0b3; }
[data-theme="dark"] .ring-key.k1 i { background: #d9b25e; }
[data-theme="dark"] .ring-key.k2 i { background: #e06a45; }

/* ===========================================================================
   THE GROVE — 100% pass (v45). Full proof fidelity: bamboo stalk rows,
   kraft medallions, specimen windows, torn washi edges, scroll rods,
   tomoe seal, and bold ink outlines throughout.
   =========================================================================== */
:root {
  --rod: #2d2a24;
  --bamboo: #6f9a4b;
  --bamboo-2: #557d3c;
  --bamboo-pill: #274d2b;
  --ink-60: rgba(45, 42, 36, 0.6);
  --ink-40: rgba(45, 42, 36, 0.4);
}
[data-theme="dark"] {
  --rod: #59523c;
  --bamboo: #4f7133;
  --bamboo-2: #405d28;
  --bamboo-pill: #182a0e;
  --ink-60: rgba(234, 226, 205, 0.5);
  --ink-40: rgba(234, 226, 205, 0.32);
}

/* The hanging-scroll rod each view hangs from */
.view::before {
  content: "";
  display: block;
  height: 14px;
  margin: 0 4px 16px;
  background:
    radial-gradient(circle at 7px 50%, var(--rod) 6.5px, transparent 7px),
    radial-gradient(circle at calc(100% - 7px) 50%, var(--rod) 6.5px, transparent 7px),
    linear-gradient(var(--rod), var(--rod)) center / calc(100% - 10px) 8px no-repeat;
}

/* Bold ink outlines — the proofs' comic-print confidence */
.panel, .scoreboard, .together-card {
  border: 2px solid var(--ink-60);
}
.todo-row, .task-card {
  border: 1.5px solid var(--ink-60);
}
.btn-soft, .icon-btn, .segmented { border-color: var(--ink-40); }
.chip { border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }

/* Torn washi bottom edge on content panels (heroes keep their tape corners) */
.panel { position: relative; }
.panel:not(.tree-panel):not(.alive-hero):not(.together-card)::after {
  content: "";
  position: absolute; left: -1px; right: -1px; bottom: -2px; height: 11px;
  background: var(--bg);
  clip-path: polygon(0 100%, 0 45%, 4% 100%, 9% 25%, 15% 100%, 20% 50%, 26% 100%, 32% 20%, 38% 100%, 44% 45%, 50% 100%, 56% 28%, 62% 100%, 68% 50%, 74% 100%, 80% 22%, 86% 100%, 91% 45%, 96% 100%, 100% 30%, 100% 100%);
  pointer-events: none;
}
/* Hero sheets: taped at BOTH corners like the proof */
.tree-panel, .alive-hero, .scoreboard { overflow: visible; }
.alive-hero::before,
.scoreboard::before, .tree-panel::before {
  left: 22px; margin-left: 0; transform: rotate(-7deg);
}
.alive-hero::before {
  content: "";
  position: absolute; top: -8px;
  width: 54px; height: 16px;
  background: color-mix(in srgb, var(--line) 80%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  pointer-events: none;
}
.scoreboard::after, .tree-panel::after, .alive-hero::after {
  content: "";
  position: absolute; top: -8px; right: 22px; left: auto;
  width: 54px; height: 16px;
  background: color-mix(in srgb, var(--line) 80%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  transform: rotate(6deg);
  opacity: 0.95;
  pointer-events: none;
}

/* Section headings: field-guide double rule + a small red hanko */
.section-heading {
  border-bottom: 4px double color-mix(in srgb, var(--ink) 55%, transparent);
  padding-bottom: 9px;
}
.section-heading h2::after {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  margin-left: 9px;
  background: var(--clay);
  border-radius: 2px;
  transform: rotate(4deg);
}

/* Today's stat chips → specimen windows (field-guide mini cards) */
.score-chip {
  border: 1.5px solid var(--ink-60);
  border-radius: 10px;
  box-shadow: inset 0 0 0 3px var(--surface);
  padding: 9px 13px;
  font-family: var(--font-display);
  font-weight: 700;
  color: #2d2a24;
}
#habitStat { background: #b6cdc9; }
#taskStat { background: #e6c98d; }
.score-chip.streak { background: #e2af97; color: #2d2a24; }
#habitStat svg { color: #3c6e71; }
#taskStat svg { color: #8a6220; }
.score-chip.streak svg { color: #a33f22; }
[data-theme="dark"] #habitStat { background: #2c3b39; color: var(--text); }
[data-theme="dark"] #taskStat { background: #41341c; color: var(--text); }
[data-theme="dark"] .score-chip.streak { background: #3f2a1e; color: var(--text); }
[data-theme="dark"] #habitStat svg { color: #7fb0b3; }
[data-theme="dark"] #taskStat svg { color: #d9b25e; }
[data-theme="dark"] .score-chip.streak svg { color: #e0846a; }

/* ============ BAMBOO STALKS: today's habit rows ============ */
.habit-row {
  background: var(--bamboo);
  background-image:
    linear-gradient(90deg,
      transparent 0 48px, rgba(15, 25, 8, 0.22) 48px 53px, transparent 53px calc(100% - 20px),
      rgba(15, 25, 8, 0.22) calc(100% - 20px) calc(100% - 15px), transparent calc(100% - 15px));
  border: 1.5px solid var(--ink-60);
  border-radius: 17px;
  position: relative;
  overflow: visible;
}
.routine-group .habit-row:nth-child(even) { background-color: var(--bamboo-2); }
.habit-row::before {
  content: "";
  position: absolute; left: 16px; right: 16px; top: 5px; height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.17);
  pointer-events: none;
}
.habit-row::after {
  content: "";
  position: absolute; top: -12px; right: 26px;
  width: 38px; height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 26'%3E%3Cellipse cx='12' cy='14' rx='11' ry='4.4' fill='%23557d3c' transform='rotate(-28 12 14)'/%3E%3Cellipse cx='28' cy='10' rx='11' ry='4.2' fill='%236f9a4b' transform='rotate(16 28 10)'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}
.routine-group .habit-row:nth-child(even)::after { display: none; }
.habit-row .habit-title {
  display: inline-block;
  background: var(--bamboo-pill);
  color: #f2ead6;
  padding: 3px 13px 4px;
  border-radius: 999px;
  font-size: 0.93rem;
  text-decoration: none;
}
.habit-row .habit-cue { color: rgba(255, 255, 255, 0.82); }
.habit-row .habit-meta .chip {
  background: rgba(246, 239, 221, 0.88);
  color: #2d2a24;
  border-color: transparent;
}
.habit-row .habit-meta .chip.pillar .dot { opacity: 0.9; }
.habit-row .drag-handle { color: rgba(246, 239, 221, 0.75); }
/* The check button becomes a kraft medallion */
.habit-row .check-btn {
  background: var(--kraft);
  border: 3px solid var(--kraft-deep);
  color: #f9f2df;
  width: 42px; height: 42px;
}
.habit-row .check-btn svg { opacity: 0.35; }
.habit-row.habit-done .check-btn { background: var(--kraft-deep); }
.habit-row.habit-done .check-btn svg { opacity: 1; }
.habit-row.habit-done .habit-title {
  color: rgba(242, 234, 214, 0.75);
  text-decoration: line-through;
}
.habit-row.habit-done { filter: saturate(0.72); }

/* Field-guide check circles + ranger stamp on finished to-dos */
.todo-row .check-btn { border-color: var(--ink-60); }
.todo-row { position: relative; }
.todo-row.task-done::after {
  content: "DONE";
  position: absolute; top: 7px; right: 12px;
  padding: 1px 7px;
  border: 2px solid var(--sage);
  border-radius: 999px;
  color: var(--sage);
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  transform: rotate(-9deg);
  opacity: 0.85;
  pointer-events: none;
}

/* Together card wears the mitsudomoe seal */
.together-card { position: relative; overflow: visible; }
.together-card::after {
  content: "";
  position: absolute; top: 14px; right: 16px;
  width: 44px; height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-34 -34 68 68'%3E%3Ccircle r='30' fill='%23c94e2e'/%3E%3Ccircle r='30' fill='none' stroke='%23a83c22' stroke-width='2.5'/%3E%3Cg fill='%232d2a24'%3E%3Cpath d='M0-18a9.5 9.5 0 0 1 9.5 9.5c0 6.6-5.2 9-9.5 7.6a7 7 0 0 1 0-17z'/%3E%3Cpath d='M0-18a9.5 9.5 0 0 1 9.5 9.5c0 6.6-5.2 9-9.5 7.6a7 7 0 0 1 0-17z' transform='rotate(120)'/%3E%3Cpath d='M0-18a9.5 9.5 0 0 1 9.5 9.5c0 6.6-5.2 9-9.5 7.6a7 7 0 0 1 0-17z' transform='rotate(240)'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(8deg);
  pointer-events: none;
}

/* Level seal: inner cream ring like a carved hanko */
.level-badge {
  box-shadow: inset 0 0 0 2px rgba(246, 239, 221, 0.4);
  transform: rotate(-3deg);
  padding: 7px 13px;
}

/* Tab bar: solid washi shelf with a firm ink rule */
@media (max-width: 960px) {
  .rail {
    background: var(--surface-2);
    border-top: 2px solid var(--ink-60);
  }
}
@media (min-width: 961px) {
  .rail { border-right: 2px solid var(--ink-40); }
}

/* 100%-pass refinements */
.habit-row.habit-done { opacity: 1; filter: saturate(0.82); }
.routine-group .habit-row:nth-child(even) { background-color: var(--bamboo); }
.routine-group .habit-row:nth-of-type(even) { background-color: var(--bamboo-2); }
.routine-group .habit-row:nth-of-type(even)::after { display: none; }
.routine-group .habit-row:nth-of-type(odd)::after { display: block; }
.together-card::after { top: auto; bottom: 12px; right: 14px; width: 40px; height: 40px; }

/* Theme picker: prominent segmented control at the top of appearance settings */
.theme-field { margin: 4px 0 16px; }
.theme-field .field-label { display: block; margin-bottom: 8px; font-size: 0.85rem; font-weight: 640; color: var(--text-soft); }
.theme-seg { display: flex; width: 100%; }
.theme-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 10px; border: none; border-radius: var(--radius-pill); background: transparent; color: var(--text-soft); font-size: 0.88rem; font-weight: 650; font-family: var(--font-display); }
.theme-seg button svg { width: 1rem; height: 1rem; }
.theme-seg button.is-active { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--ink-40); }
.theme-seg button { white-space: nowrap; font-size: 0.82rem; padding: 0 6px; }

/* ===========================================================================
   THE GROVE — calm pass (v47): green as accent, not flood.
   =========================================================================== */
/* 1. Retire the DONE stamps */
.task-card.task-done::after, .todo-row.task-done::after { content: none; }

/* 2. Retire the torn bottom edge (it chopped the ink border into artifacts) */
.panel:not(.tree-panel):not(.alive-hero):not(.together-card)::after { content: none; }

/* 3. Habit rows: washi cream with a bamboo stalk accent on the left edge */
.habit-row, .routine-group .habit-row:nth-of-type(even) {
  background: var(--surface);
  background-image: none;
  padding-left: 30px;
}
.habit-row::before {
  content: "";
  left: 9px; right: auto; top: 9px; bottom: 9px;
  width: 11px; height: auto;
  border-radius: 6px;
  background: var(--bamboo);
  background-image: repeating-linear-gradient(180deg, transparent 0 13px, rgba(15, 25, 8, 0.28) 13px 15px);
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
}
.routine-group .habit-row:nth-of-type(even)::before { background-color: var(--bamboo-2); }
.habit-row::after {
  top: -10px; left: 2px; right: auto;
  width: 30px; height: 19px;
}
.habit-row .habit-title {
  display: block;
  background: none;
  color: var(--text);
  padding: 0;
  border-radius: 0;
  font-size: 1rem;
}
.habit-row .habit-cue { color: var(--muted); }
.habit-row .habit-meta .chip {
  background: var(--surface-2);
  color: var(--text-soft);
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.habit-row .drag-handle { color: var(--muted); }
.habit-row.habit-done { filter: none; }
.habit-row.habit-done .habit-title { color: var(--muted); }
.habit-row.habit-done::before { opacity: 0.45; }
.routine-group .habit-row:nth-child(odd),
.routine-group .habit-row:nth-child(even) { background-color: var(--surface); background-image: none; }

/* Today's compact rings panel */
.rings-panel-today { margin-bottom: 16px; }
.rings-panel-today .rings-row { display: flex; align-items: center; gap: 18px; }
.rings-art.sm { width: 118px; flex: none; }
.rings-art.sm svg { display: block; width: 100%; height: auto; }
.rings-panel-today .rings-legend { display: grid; gap: 7px; min-width: 0; }

/* Sync health readout (Settings) */
.sync-health { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.sync-health.warn { color: var(--danger); font-weight: 650; }
.sync-health:empty { display: none; }

/* Today's score IS the three rings now (Apple-style), score in the well */
.rings-score { position: relative; width: 132px; flex: none; }
.rings-score .rings-art svg { display: block; width: 100%; height: auto; }
.rings-score .rings-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  pointer-events: none;
  text-align: center;
}
.rings-score .score-num { font-size: 1.3rem; line-height: 1; }
.rings-score .score-cap { font-size: 0.55rem; }
.rings-score.bump { animation: ringPop 0.45s var(--ease); }
@media (max-width: 680px) { .rings-score { width: 112px; } .rings-score .score-num { font-size: 1.15rem; } }

/* Shared-list progress bar in the scoreboard */
.shared-bar-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.shared-bar-label { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sky); white-space: nowrap; }
.shared-bar-row .score-bar.shared { flex: 1; height: 8px; margin-top: 0; }
.shared-bar-row .score-bar-fill.shared { background: var(--sky); background-image: repeating-linear-gradient(90deg, transparent 0 21px, rgba(10, 25, 26, 0.25) 21px 24px); transition: width 0.6s var(--ease); }

/* Undone habits: an EMPTY medallion — no ghost check until it's earned */
.habit-row .check-btn svg { opacity: 0; }
.habit-row .check-btn:hover svg { opacity: 0.3; }
.habit-row.habit-done .check-btn svg { opacity: 1; }
.rings-score .rings-art { width: 100%; flex: none; }

/* Together card: seal retired, shared bar lives here now */
.together-card::after { content: none; }
.together-card .shared-bar-row { margin-top: 13px; }

/* ===========================================================================
   TWILIGHT BLOOM (v53) — audit pass + Fuji/sakura direction.
   Light stays washi; dark becomes a plum-indigo twilight. Sakura joins as a
   support accent. Headers quiet down; density tightens; components unify.
   =========================================================================== */
:root {
  --sakura: #d77d9d;
  --sakura-deep: #b25f80;
  --sakura-soft: #f7e3ea;
}
[data-theme="dark"] {
  --bg: #211b2d;
  --bg-tint: #251e33;
  --surface: #2b2439;
  --surface-2: #342c45;
  --surface-sunk: #1c1728;
  --text: #ede5f0;
  --text-soft: #c9bdd6;
  --muted: #988ba8;
  --line: #453a5c;
  --line-strong: #5b4d77;
  --ink: #ede5f0;
  --rod: #5b4d77;
  --sage: #8fb47a;
  --sage-deep: #a6c98f;
  --sage-soft: #2c3222;
  --clay: #e56f4a;
  --clay-soft: #3c2731;
  --sky: #8fb6c9;
  --gold: #dcb268;
  --kraft: #9a7757;
  --kraft-deep: #6f5439;
  --sakura: #e59ab8;
  --sakura-deep: #c9769c;
  --sakura-soft: #3d2a3a;
  --danger: #e58a97;
  --ring: rgba(229, 154, 184, 0.22);
  --bamboo: #5e8148;
  --bamboo-2: #4c6c38;
  --bamboo-pill: #1d2c14;
  --ink-60: rgba(237, 229, 240, 0.5);
  --ink-40: rgba(237, 229, 240, 0.3);
}
[data-theme="dark"] body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cg fill='%23ede5f0' opacity='.035'%3E%3Crect x='10' y='16' width='6' height='1.6' transform='rotate(24 10 16)'/%3E%3Crect x='52' y='9' width='5' height='1.5' transform='rotate(-28 52 9)'/%3E%3Crect x='30' y='46' width='6' height='1.6' transform='rotate(48 30 46)'/%3E%3Ccircle cx='42' cy='26' r='1.1'/%3E%3Ccircle cx='20' cy='42' r='1'/%3E%3C/g%3E%3C/svg%3E");
}

/* Hero: flat washi in daylight; one intentional dusk wash at twilight */
.scoreboard { background: var(--surface); }
[data-theme="dark"] .scoreboard { background: linear-gradient(150deg, #43325c, #2b2439 46%, #3a2a3d 100%); }

/* Sakura moments: hot streaks bloom */
.streak-chip.hot, .score-chip.streak.hot { background: var(--sakura); border-color: var(--sakura-deep); color: #fff; }
.streak-chip.hot svg, .score-chip.streak.hot svg { color: #fff; }

/* Quieter sub-headers: one poster per view is enough */
.section-heading { border-bottom: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); padding-bottom: 8px; }
.section-heading h2 { font-size: 1.02rem; }
.section-heading h2::after { width: 7px; height: 7px; margin-left: 7px; }
.section-heading .eyebrow { font-size: 0.68rem; }

/* Scoreboard chips: one calm row */
.score-stats { display: flex; flex-wrap: nowrap; gap: 7px; }
.score-stats .score-chip { flex: 1; justify-content: center; padding: 7px 6px; font-size: 0.78rem; white-space: nowrap; }
.score-stats .score-chip svg { width: 0.85rem; height: 0.85rem; }

/* The scroll rod: slimmer, quieter */
.view::before {
  height: 9px;
  margin: 0 6px 14px;
  opacity: 0.8;
  background:
    radial-gradient(circle at 5px 50%, var(--rod) 4.5px, transparent 5px),
    radial-gradient(circle at calc(100% - 5px) 50%, var(--rod) 4.5px, transparent 5px),
    linear-gradient(var(--rod), var(--rod)) center / calc(100% - 8px) 5px no-repeat;
}

/* Tab labels: stop the letter collisions */
.tab span { letter-spacing: 0.02em; font-size: 0.57rem; }

/* Command strip: one quiet tool, not four competing shapes */
.mic-btn { background: var(--surface-2); border-color: var(--line); color: var(--text-soft); }
.command-form .run-btn { background: transparent; border-color: transparent; color: var(--muted); }
.command-form .run-btn:hover { color: var(--accent-deep); }
.hint-btn { color: var(--muted); }

/* Done-state speaks one language: kraft medallions everywhere */
.habit-card .check-btn {
  background: var(--kraft);
  border: 3px solid var(--kraft-deep);
  color: #f9f2df;
}
.habit-card .check-btn svg { opacity: 0; }
.habit-card .check-btn:hover svg { opacity: 0.3; }
.habit-card.habit-done .check-btn, .habit-card.done .check-btn { background: var(--kraft-deep); }
.habit-card.habit-done .check-btn svg, .habit-card.done .check-btn svg { opacity: 1; }

/* Links are teal; vermillion is reserved for identity + danger */
.link-btn { color: var(--sky); }
.link-btn:hover { color: color-mix(in srgb, var(--sky) 70%, var(--text)); }

/* Chip family: one quiet tier by default */
.chip { min-height: 24px; align-items: center; }

/* Life areas on Today: compact rows, not posters */
.pillar-row .balance-item { padding: 11px 13px; }
.pillar-row .balance-item .bar-track { margin-top: 7px; height: 6px; }
.pillar-row .balance-item header strong { font-size: 0.88rem; }

/* Update banner docks above the tab bar, clear of the FAB */
.update-banner { bottom: calc(env(safe-area-inset-bottom, 0px) + 152px); }

/* Collapsible habit law */
.law-details summary { list-style: none; cursor: pointer; display: grid; gap: 3px; }
.law-details summary::-webkit-details-marker { display: none; }
.law-details .law-line { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--text); }
.law-details[open] .law-line { display: none; }
.law-details .atomic-copy { margin: 6px 0 0; }

/* Tree card head: eyebrow + You|Together toggle */
.tree-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.tree-seg { padding: 3px; }
.tree-seg button { min-height: 30px; padding: 0 12px; font-size: 0.78rem; font-family: var(--font-display); }
.score-stats .score-chip { font-size: 0.72rem; padding: 6px 4px; gap: 5px; min-width: 0; }
.score-stats { gap: 6px; }
/* Twilight repairs: chips sized to fit, plum-tinted windows, readable text */
.score-stats .score-chip { font-size: 0.7rem; padding: 5px 2px; gap: 4px; }
.score-stats .score-chip svg { width: 0.8rem; height: 0.8rem; flex: none; }
[data-theme="dark"] .score-chip { color: var(--text); }
[data-theme="dark"] #habitStat { background: #2b3a47; }
[data-theme="dark"] #taskStat { background: #46402a; }
[data-theme="dark"] .score-chip.streak { background: #462b3d; }
[data-theme="dark"] #togetherLevelChip { background: var(--surface-2); }
#togetherLevelChip { background: var(--surface-2); color: var(--text); }
[data-theme="dark"] .fab { background: #4c6c38; color: #f0ead8; }
.scoreboard > .score-stats { margin-top: 14px; }
.score-stats .score-chip { font-size: 0.78rem; padding: 7px 6px; gap: 6px; }

/* Vitality chip completes the ring trio; the chain becomes a quiet note */
.score-chip.vit { background: #e0ae9b; color: #2d2a24; }
.score-chip.vit svg { color: #a33f22; }
.score-chip.vit.hot { background: var(--sakura); border-color: var(--sakura-deep); color: #fff; }
.score-chip.vit.hot svg { color: #fff; }
[data-theme="dark"] .score-chip.vit { background: #3f2a1e; color: var(--text); }
[data-theme="dark"] .score-chip.vit svg { color: #e0846a; }
.streak-note { display: inline-flex; align-items: center; gap: 5px; margin: 7px 0 0; font-size: 0.76rem; font-weight: 650; color: var(--muted); }
.streak-note svg { width: 0.78rem; height: 0.78rem; color: var(--clay); }
.streak-note.hot { color: var(--sakura-deep); }
.streak-note.hot svg { color: var(--sakura-deep); }

/* A whisper of landscape behind every view — ridgelines, Fuji, a far pagoda */
body::before {
  content: "";
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 30vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 240' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%232d2a24'%3E%3Cpath d='M0 240 L0 190 C90 150 170 118 260 96 C350 118 430 150 520 190 L520 240 Z' opacity='.5'/%3E%3Cpath d='M214 122 C230 108 246 100 260 96 C274 100 290 108 306 122 C292 130 282 122 270 130 C258 122 246 132 234 124 C226 128 220 124 214 122 Z' fill='%23ffffff' opacity='.8'/%3E%3Cpath d='M300 240 L300 206 C400 168 520 150 640 162 C700 168 760 180 800 192 L800 240 Z' opacity='.65'/%3E%3Cpath d='M0 240 L0 216 C120 196 260 190 420 200 C580 210 700 222 800 236 L800 240 Z' opacity='.9'/%3E%3Cg opacity='.85'%3E%3Crect x='678' y='174' width='20' height='3' /%3E%3Crect x='681' y='166' width='14' height='8'/%3E%3Cpath d='M672 166 Q688 156 704 166 Q688 162 672 166 Z'/%3E%3Crect x='683' y='158' width='10' height='8'/%3E%3Cpath d='M675 158 Q688 149 701 158 Q688 154 675 158 Z'/%3E%3Crect x='685' y='151' width='6' height='7'/%3E%3Cpath d='M678 151 Q688 143 698 151 Q688 148 678 151 Z'/%3E%3Crect x='687.2' y='138' width='1.6' height='6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") bottom center / cover no-repeat;
}
[data-theme="dark"] body::before {
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 240' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23ede5f0'%3E%3Cpath d='M0 240 L0 190 C90 150 170 118 260 96 C350 118 430 150 520 190 L520 240 Z' opacity='.5'/%3E%3Cpath d='M214 122 C230 108 246 100 260 96 C274 100 290 108 306 122 C292 130 282 122 270 130 C258 122 246 132 234 124 C226 128 220 124 214 122 Z' opacity='.9'/%3E%3Cpath d='M300 240 L300 206 C400 168 520 150 640 162 C700 168 760 180 800 192 L800 240 Z' opacity='.65'/%3E%3Cpath d='M0 240 L0 216 C120 196 260 190 420 200 C580 210 700 222 800 236 L800 240 Z' opacity='.9'/%3E%3Cg opacity='.85'%3E%3Crect x='678' y='174' width='20' height='3'/%3E%3Crect x='681' y='166' width='14' height='8'/%3E%3Cpath d='M672 166 Q688 156 704 166 Q688 162 672 166 Z'/%3E%3Crect x='683' y='158' width='10' height='8'/%3E%3Cpath d='M675 158 Q688 149 701 158 Q688 154 675 158 Z'/%3E%3Crect x='685' y='151' width='6' height='7'/%3E%3Cpath d='M678 151 Q688 143 698 151 Q688 148 678 151 Z'/%3E%3Crect x='687.2' y='138' width='1.6' height='6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") ;
}
/* The tree is a painting, not an icon — don't let the global icon stroke leak in */
.tree-art svg { stroke: none; }

/* Vitality hero: a dusk horizon strip — the world you're stepping out into */
.hero-scene {
  height: 54px;
  margin: 0 0 12px;
  pointer-events: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 80' preserveAspectRatio='xMidYMax slice'%3E%3Ccircle cx='508' cy='22' r='11' fill='%23d9a441' opacity='.7'/%3E%3Cpath d='M300 80 C340 34 372 18 400 12 C428 18 460 34 500 80 Z' fill='%238d9cb4' opacity='.4'/%3E%3Cpath d='M386 22 C391 17 396 13 400 12 C404 13 409 17 414 22 C409 26 405 22 400 26 C395 22 391 26 386 22 Z' fill='%23f6f2e6' opacity='.9'/%3E%3Cpath d='M0 80 C60 48 120 40 180 48 C230 54 260 64 290 80 Z' fill='%2377897b' opacity='.3'/%3E%3Cpath d='M420 80 C470 56 530 52 600 60 L600 80 Z' fill='%235f7568' opacity='.25'/%3E%3Cg fill='%234a4149' opacity='.8'%3E%3Crect x='108' y='49' width='24' height='3'/%3E%3Crect x='112' y='42' width='16' height='7'/%3E%3Cpath d='M104 42 Q120 32 136 42 Q120 38 104 42 Z'/%3E%3Crect x='114' y='35' width='12' height='7'/%3E%3Cpath d='M107 35 Q120 26 133 35 Q120 31 107 35 Z'/%3E%3Crect x='116' y='29' width='8' height='6'/%3E%3Cpath d='M110 29 Q120 21 130 29 Q120 25 110 29 Z'/%3E%3Crect x='119' y='14' width='2' height='15'/%3E%3C/g%3E%3C/svg%3E") center bottom / cover no-repeat;
}
[data-theme="dark"] .hero-scene {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 80' preserveAspectRatio='xMidYMax slice'%3E%3Ccircle cx='508' cy='20' r='10' fill='%23e9ddc2' opacity='.9'/%3E%3Ccircle cx='250' cy='14' r='1.4' fill='%23efe6d2' opacity='.7'/%3E%3Ccircle cx='330' cy='26' r='1' fill='%23efe6d2' opacity='.55'/%3E%3Ccircle cx='560' cy='40' r='1.2' fill='%23efe6d2' opacity='.6'/%3E%3Cpath d='M300 80 C340 34 372 18 400 12 C428 18 460 34 500 80 Z' fill='%23332a4e' opacity='.95'/%3E%3Cpath d='M386 22 C391 17 396 13 400 12 C404 13 409 17 414 22 C409 26 405 22 400 26 C395 22 391 26 386 22 Z' fill='%23ddd3e6' opacity='.9'/%3E%3Cpath d='M0 80 C60 48 120 40 180 48 C230 54 260 64 290 80 Z' fill='%232c2344' opacity='.95'/%3E%3Cpath d='M420 80 C470 56 530 52 600 60 L600 80 Z' fill='%23241c38' opacity='.95'/%3E%3Cg fill='%231e1732'%3E%3Crect x='108' y='49' width='24' height='3'/%3E%3Crect x='112' y='42' width='16' height='7'/%3E%3Cpath d='M104 42 Q120 32 136 42 Q120 38 104 42 Z'/%3E%3Crect x='114' y='35' width='12' height='7'/%3E%3Cpath d='M107 35 Q120 26 133 35 Q120 31 107 35 Z'/%3E%3Crect x='116' y='29' width='8' height='6'/%3E%3Cpath d='M110 29 Q120 21 130 29 Q120 25 110 29 Z'/%3E%3Crect x='119' y='14' width='2' height='15'/%3E%3C/g%3E%3Cg fill='%23e8b563'%3E%3Crect x='115' y='44' width='2' height='2.6' rx='.4'/%3E%3Crect x='123' y='44' width='2' height='2.6' rx='.4'/%3E%3Crect x='119' y='37' width='2' height='2.4' rx='.4'/%3E%3C/g%3E%3C/svg%3E");
}

/* The app-wide ridgeline steps a little further out of the mist */
body::before { opacity: 0.09; height: 34vh; }
[data-theme="dark"] body::before { opacity: 0.12; }

/* Washi is translucent: let the landscape ghost through every sheet */
.panel, .scoreboard, .together-card, .insight-card, .today-insight,
.task-card, .todo-row, .habit-row, .habit-card, .reclaim-strip {
  background-color: color-mix(in srgb, var(--surface) 78%, transparent);
}
[data-theme="dark"] .scoreboard {
  background: linear-gradient(150deg, rgb(67 50 92 / 0.82), rgb(43 36 57 / 0.82) 46%, rgb(58 42 61 / 0.82) 100%);
}
/* The tab shelf floats over the ridgeline like evening mist */
@media (max-width: 960px) {
  .rail {
    background: color-mix(in srgb, var(--surface-2) 84%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
/* And the mountains step forward to be seen through the paper */
body::before { opacity: 0.16; }
[data-theme="dark"] body::before { opacity: 0.2; }