:root {
  color-scheme: light dark;
  --bg: #faf9f5;
  --card: #ffffff;
  --card-2: #ececea;
  --card-rgb: 255,255,255;
  --text: #1c1c1e;
  --text-2: #6e6e73;
  --text-3: #aeaeb2;
  --separator: rgba(60,60,67,0.12);
  --accent: #2c2c2e;
  --accent-rgb: 44,44,46;
  --danger: #ff3b30;
  --warn: #ff9500;
  --good: #4c8a5e;
  --overdue: #7a2419;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: none;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

:root[data-theme="dark"] {
  --bg: #000000;
  --card: #1c1c1e;
  --card-2: #2c2c2e;
  --card-rgb: 28,28,30;
  --text: #f5f5f7;
  --text-2: #98989d;
  --text-3: #636366;
  --separator: rgba(84,84,88,0.55);
  --accent: #e5e5ea;
  --accent-rgb: 229,229,234;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --card: #1c1c1e;
    --card-2: #2c2c2e;
    --card-rgb: 28,28,30;
    --text: #f5f5f7;
    --text-2: #98989d;
    --text-3: #636366;
    --separator: rgba(84,84,88,0.55);
    --accent: #e5e5ea;
    --accent-rgb: 229,229,234;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
}

/* no system scrollbar anywhere — scroll still works, just without the visible track */
html, body, .day-strip { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, .day-strip::-webkit-scrollbar { display: none; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  overscroll-behavior-y: none;
}

#app {
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: calc(72px + var(--safe-bottom));
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 8;
  padding: calc(12px + var(--safe-top)) 20px 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  background: rgba(var(--card-rgb), 0);
  transition: background .25s ease, padding .25s cubic-bezier(0.32,0.72,0,1), border-color .25s ease;
  border-bottom: 1px solid transparent;
  /* own compositing layer: without this, Safari repaints the blurred backdrop
     against the whole scrolling page behind it on every frame, which is what
     made the sticky header stutter on long scrolls (Month view especially). */
  transform: translateZ(0);
  will-change: transform;
}
.topbar.scrolled {
  /* Solid background instead of backdrop-filter: blur — WebKit/Safari (the engine behind
     the Mac app's WKWebView) recomposites a blurred backdrop every scroll frame, which is
     the most common cause of sticky-header scroll jank on that engine specifically. A
     near-opaque solid color reads almost identically without that per-frame cost. See
     TZ_FIXES3.md §10 — could not be confirmed with a profiler trace against the real
     WKWebView from here (only reproducible in Chromium, which showed 0 jank either way,
     i.e. this environment can't prove or disprove it); verify on the actual Mac .app. */
  background: rgba(var(--card-rgb), 0.97);
  border-bottom-color: var(--separator);
  padding-top: calc(8px + var(--safe-top));
  padding-bottom: 8px;
}

.topbar h1 {
  font-family: ui-serif, "New York", Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  transition: font-size .25s cubic-bezier(0.32,0.72,0,1);
}
.topbar.scrolled h1 { font-size: 20px; }

.icon-btn {
  background: none;
  border: none;
  color: var(--accent);
  padding: 6px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .1s ease;
}
.icon-btn:active { transform: scale(0.96); }
.icon-btn:disabled { opacity: 0.5; }
.icon-btn.spinning svg { animation: spin 0.8s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.screen { display: none; padding: 4px 16px 24px; }
.screen.active { display: block; }
.screen.active.slide-right { animation: screenInRight .3s cubic-bezier(0.32,0.72,0,1); }
.screen.active.slide-left { animation: screenInLeft .3s cubic-bezier(0.32,0.72,0,1); }

@keyframes screenInRight { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes screenInLeft { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
}

.card-header {
  padding: 16px 16px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--separator);
  font-size: 17px;
}
.list-row:last-child { border-bottom: none; }

.checkbox {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 2px solid var(--text-3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: transparent;
  transition: transform .1s ease, background .15s ease, border-color .15s ease;
}
.checkbox.done {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.checkbox.missed {
  border-color: var(--danger);
  color: var(--danger);
  opacity: 0.8;
}
.checkbox:active { transform: scale(0.96); }
.checkbox.pop { animation: checkPop .15s cubic-bezier(0.32,0.72,0,1); }
@keyframes checkPop { 0% { transform: scale(1); } 45% { transform: scale(1.15); } 100% { transform: scale(1); } }

.row-title { flex: 1; font-size: 17px; min-width: 0; }
.row-title.done { color: var(--text-2); text-decoration: line-through; }

/* ---- drag-and-drop reordering (tasks/habits/spheres/goals) ---- */
.drag-handle {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  color: var(--text-3); cursor: grab;
  touch-action: none; /* let the handle own vertical drags instead of the page scroller */
}
.drag-handle:active { cursor: grabbing; }
[data-drag-id] { transition: transform .15s ease; }
[data-drag-id].dragging {
  transition: none;
  position: relative;
  z-index: 5;
  opacity: 0.92;
  background: var(--card);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  border-radius: 10px;
}

/* small colored dot used to indicate a sphere, instead of a colored chip */
.sphere-dot {
  width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0; display: inline-block;
}

.chip {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--card-2);
  color: var(--text-2);
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.empty-hint {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 15px;
}

.banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; margin-bottom: 16px;
  background: var(--card); border-radius: var(--radius);
  font-size: 14px; color: var(--text-2);
}
.banner strong { color: var(--text); font-weight: 600; }

.segment {
  display: flex;
  background: var(--card-2);
  border-radius: 9px;
  padding: 2px;
  margin: 8px 16px 16px;
  gap: 2px;
}
.segment button {
  flex: 1;
  border: none;
  background: transparent;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  border-radius: 7px;
  cursor: pointer;
  transition: transform .1s ease;
}
.segment button:active { transform: scale(0.96); }
.segment button.active {
  background: var(--card);
}

.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  /* solid, no blur — same reasoning as .topbar.scrolled above */
  background: rgba(var(--card-rgb), 0.97);
  border-top: 1px solid var(--separator);
  padding-bottom: var(--safe-bottom);
  z-index: 10;
  /* own compositing layer, same reasoning as .topbar — this bar is blurred
     unconditionally on every screen, so it's on the critical path for scroll jank too */
  transform: translateZ(0);
  will-change: transform;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0 6px;
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 10px;
  cursor: pointer;
  transition: transform .1s ease;
}
.tab-item:active { transform: scale(0.96); }
.tab-item .tab-icon { display: flex; }
.tab-item.active { color: var(--accent); }

.progress-track {
  height: 6px;
  border-radius: 3px;
  background: var(--card-2);
  overflow: hidden;
}
.progress-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s ease; }

.stat-row { display:flex; padding: 12px 16px; gap: 16px; }
.stat { flex:1; text-align:center; }
.stat .num { font-size: 22px; font-weight: 700; }
.stat .label { font-size: 12px; color: var(--text-2); margin-top: 2px; }

.sphere-row { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--separator); cursor:pointer; transition: transform .1s ease; }
.sphere-row:last-child{border-bottom:none;}
.sphere-row:active { transform: scale(0.98); }
.sphere-icon { width:38px; height:38px; border-radius:10px; background:var(--card-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sphere-info { flex:1; }
.sphere-name { font-size:16px; font-weight:600; }
.sphere-level { font-size:12px; color:var(--text-2); }

.form-field { padding: 12px 16px; border-bottom: 1px solid var(--separator); }
.form-field:last-child { border-bottom:none; }
.form-field label { display:block; font-size:12px; color:var(--text-2); margin-bottom:4px; }
.form-field input[type=text], .form-field input[type=date], .form-field select, .form-field textarea {
  width:100%; border:none; background:transparent; font-size:16px; color:var(--text); outline:none; font-family: inherit;
}
.form-field textarea { resize: vertical; min-height: 60px; }
.hint { font-size: 12px; color: var(--text-3); margin-top: 6px; line-height: 1.4; }
.hint code { font-size: 11px; background: var(--card-2); padding: 1px 4px; border-radius: 4px; }

.btn {
  display:block; width:100%; padding:14px; text-align:center;
  border-radius: 12px; border:none; font-size:16px; font-weight:600; cursor:pointer;
  transition: transform .1s ease;
}
.btn:active { transform: scale(0.96); }
.btn-primary { background: var(--accent); color: var(--bg); }
.btn-secondary { background: var(--card-2); color: var(--text); }
.btn-danger { background: transparent; color: var(--danger); }

.modal-overlay {
  position: fixed; inset:0; background: rgba(0,0,0,0);
  display:none; align-items:flex-end; justify-content:center; z-index: 100;
  transition: background .2s cubic-bezier(0.4,0,1,1);
}
.modal-overlay.open { display:flex; }
.modal-overlay.open.visible { background: rgba(0,0,0,0.4); transition: background .22s cubic-bezier(0.32,0.72,0,1); }
.modal-sheet {
  background: var(--bg);
  width:100%; max-width:640px;
  border-radius: 20px 20px 0 0;
  padding: 8px 0 calc(16px + var(--safe-bottom));
  max-height: 88vh;
  overflow-y: auto;
  animation: sheetup .3s cubic-bezier(0.32,0.72,0,1);
}
.modal-sheet.leaving { animation: sheetdown .22s cubic-bezier(0.4,0,1,1) forwards; }
@keyframes sheetup { from { transform: translateY(40px); opacity:0 } to { transform:none; opacity:1 } }
@keyframes sheetdown { from { transform: translateY(0); opacity:1 } to { transform: translateY(40px); opacity:0 } }
.modal-header {
  display:flex; justify-content:space-between; align-items:center;
  padding: 10px 16px;
}
.modal-header h2 { font-size:17px; margin:0; }
.modal-body { padding: 0 16px; }

.grid-cal { display:grid; grid-template-columns: repeat(auto-fill, 13px); gap:3px; padding: 12px 16px; }
.grid-cell { width:13px; height:13px; border-radius:3px; background: var(--card-2); cursor:pointer; box-sizing:border-box; }
.grid-cell.on { background: var(--accent); }
.grid-cell.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--danger); opacity: 0.6; }

.radar-wrap { display:flex; justify-content:center; padding: 16px; }

.gratitude-q { padding: 12px 16px; border-bottom: 1px solid var(--separator); }
.gratitude-q:last-child{border-bottom:none;}
.gratitude-q label { display:block; font-size:14px; color:var(--text-2); margin-bottom:6px; }
.gratitude-q textarea { width:100%; border:1px solid var(--separator); border-radius:10px; padding:8px; background:var(--card-2); color:var(--text); font-size:15px; font-family:inherit; }

.life-widget {
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 16px; font-size: 13px; color: var(--text-2);
}
.life-widget .num { color: var(--text); font-weight:700; }

.week-bar-row { display:flex; align-items:center; gap:10px; padding:10px 16px; }
.week-bar-row .day-label { width:34px; font-size:13px; color:var(--text-2); }

.week-day-block { border-bottom: 1px solid var(--separator); }
.week-day-block:last-child { border-bottom: none; }
.week-day-block .list-row { padding-left: 16px; }
.week-day-header { display:flex; align-items:center; gap:10px; padding:10px 16px; cursor:pointer; color: var(--text-3); }
.week-day-header .row-title { font-weight:600; color: var(--text); flex:1; }

.sync-status { font-size:12px; color:var(--text-3); text-align:center; padding: 4px 0 10px; }

a { color: var(--accent); }

.swipe-actions { display:flex; }
.link-btn { background:none; border:none; color:var(--accent); font-size:15px; padding:6px 4px; cursor:pointer; }
.link-btn.danger { color: var(--danger); }

/* ---- tap feedback: light scale-down on interactive elements, no cursor-tracking motion ---- */
.tap { transition: transform .1s ease; }
.tap:active { transform: scale(0.96); }

/* ---- life widget (compact, secondary on Today screen) ---- */
.life-card { padding: 12px 16px; cursor: pointer; transition: transform .1s ease; }
.life-card:active { transform: scale(0.98); }
.life-card .life-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.life-card .life-label { font-size: 12px; color: var(--text-2); }
.life-card .life-num { font-size: 17px; font-weight: 700; }
.life-card .life-pct { font-size: 11px; color: var(--text-3); margin-top: 6px; }

/* ---- day strip (Plans / day view) ---- */
.day-strip { display:flex; gap:6px; padding: 4px 16px 14px; overflow-x:auto; }
.day-pill {
  flex: 0 0 auto; width:44px; display:flex; flex-direction:column; align-items:center; gap:6px;
  background:none; border:none; padding:6px 0; cursor:pointer; color: var(--text);
  transition: transform .1s ease;
}
.day-pill:active { transform: scale(0.96); }
.day-pill .dow { font-size:11px; color: var(--text-3); }
.day-pill.active .dow { color: var(--accent); font-weight:600; }

/* ---- donut ring (pure CSS conic-gradient) ---- */
.ring { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: conic-gradient(var(--accent) calc(var(--pct, 0) * 3.6deg), var(--card-2) 0deg); flex-shrink:0; }
.ring-inner { width:26px; height:26px; border-radius:50%; background:var(--card); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; }
.ring-lg { width:46px; height:46px; }
.ring-lg .ring-inner { width:36px; height:36px; font-size:13px; }

/* ---- month calendar grid ---- */
.cal-grid { display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; padding: 10px 16px 16px; }
.cal-dow { text-align:center; font-size:11px; color:var(--text-3); padding-bottom:4px; }
.cal-cell {
  aspect-ratio: 1; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:13px; cursor:pointer; background: var(--card-2); color: var(--text);
  transition: transform .1s ease;
}
.cal-cell:active { transform: scale(0.94); }
.cal-cell.empty { visibility:hidden; cursor:default; }
.cal-cell.today { box-shadow: inset 0 0 0 2.5px var(--accent); color: var(--accent); font-weight: 700; }

/* ---- habits: inline mini calendar ---- */
.habit-row { padding: 12px 16px; border-bottom:1px solid var(--separator); }
.habit-row:last-child { border-bottom:none; }
.habit-row-top { display:flex; align-items:center; gap:12px; }
.habit-mini-cal { display:flex; gap:3px; margin-top:8px; margin-left:37px; }
.mini-cell {
  width:9px; height:9px; border-radius:2.5px; background: var(--card-2); cursor:pointer;
  display:flex; align-items:center; justify-content:center; color: var(--danger); box-sizing:border-box;
  transition: transform .1s ease;
}
.mini-cell:active { transform: scale(0.85); }
.mini-cell.on { background: var(--accent); }
.mini-cell.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--danger); opacity: 0.75; }
.mini-cell.off svg { width:6px; height:6px; }
.streak-badge { display:inline-flex; align-items:center; gap:3px; font-size:12px; color: var(--text-2); }
.habit-period-label { font-size:12px; color: var(--text-3); margin-top:6px; margin-left:37px; }

/* ---- sphere icon / color pickers ---- */
.icon-picker { display:grid; grid-template-columns: repeat(6, 1fr); gap:8px; padding: 12px 16px; }
.icon-choice {
  aspect-ratio:1; border-radius:10px; background:var(--card-2); border:2px solid transparent;
  color: var(--text-2); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: transform .1s ease;
}
.icon-choice:active { transform: scale(0.94); }
.icon-choice.selected { border-color: var(--accent); color: var(--accent); }

.color-picker { display:flex; flex-wrap:wrap; gap:10px; padding: 12px 16px; }
.color-choice {
  width:32px; height:32px; border-radius:50%; cursor:pointer; border:2px solid transparent;
  transition: transform .1s ease;
}
.color-choice:active { transform: scale(0.9); }
.color-choice.selected { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text-3); }

.gratitude-summary-chip { color: var(--accent); display:flex; align-items:center; }

/* ---- goal status badge (list is grouped by these, not by raw date) ---- */
.status-badge { font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; white-space:nowrap; flex-shrink:0; }
.status-badge.onTrack { color: var(--good); background: rgba(76,138,94,0.14); }
.status-badge.behind { color: var(--warn); background: rgba(255,149,0,0.14); }
.status-badge.urgent { color: var(--danger); background: rgba(255,59,48,0.14); }
.status-badge.overdue { color: #fff; background: var(--overdue); }
.goal-deadline-text { font-size:12px; color: var(--text-2); white-space:nowrap; flex-shrink:0; }

/* ---- privacy lock (hidden "private" task/goal rows) ---- */
.private-row { color: var(--text-3); cursor: pointer; }
.private-row .lock-ico { display:flex; flex-shrink:0; }
.lock-badge { display:inline-flex; align-items:center; color: var(--text-3); flex-shrink:0; }
.toggle-row { display:flex; align-items:center; justify-content:space-between; }
.toggle-row input[type=checkbox] { width:22px; height:22px; flex:none; }