/* Catppuccin Latte / Mocha palette, MIT. See ../licenses.html. */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg: #eff1f5;
  --card: #ffffff;
  --sidebar-bg: #e6e9ef;
  --surface: #e6e9ef;
  --ink: #4c4f69;
  --muted: #5c5f77;
  --green: #8839ef;
  --soft: #e9dff9;
  --line: #ccd0da;
  --danger: #d20f39;
  --on-accent: #ffffff;
  --backdrop: #4c4f6970;
  --shadow: #4c4f6915;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1e1e2e;
  --card: #181825;
  --sidebar-bg: #11111b;
  --surface: #313244;
  --ink: #cdd6f4;
  --muted: #a6adc8;
  --green: #cba6f7;
  --soft: #343047;
  --line: #45475a;
  --danger: #f38ba8;
  --on-accent: #1e1e2e;
  --backdrop: #11111b99;
  --shadow: #11111b40;
}
::selection { background: var(--soft); color: var(--ink); }
.primary, .dark, .brand-icon, .toast { color: var(--on-accent); }
.primary:hover, .dark:hover { filter: brightness(.95); }
.intention-card input::placeholder { color: var(--muted); }
.primary:disabled { opacity: .55; }
.planning-panel {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 16px;
  padding: 24px;
  margin: 0 0 26px;
}
.planning-controls { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.planning-controls h2 { font-size:19px; margin-bottom:5px; }
.planning-fields { display:flex; gap:12px; flex-shrink:0; }
.planning-fields label { font-size:11px; color:var(--muted); }
.planning-fields select { display:block; margin-top:6px; font-size:13px; min-width:140px; }
.capacity-summary { margin:18px 0; padding-top:15px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.recommendation { display:flex; align-items:center; justify-content:space-between; gap:22px; background:var(--soft); border-radius:11px; padding:19px 21px; }
.recommendation > div { min-width:0; }
.recommendation-label { color:var(--green); font-size:10px; }
.recommendation h3 { font-size:17px; font-weight:600; margin:5px 0; overflow-wrap:anywhere; }
.recommendation p { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.search-field { display:flex; align-items:center; gap:8px; margin-top:14px; border:1px solid var(--line); border-radius:9px; padding-left:12px; color:var(--muted); }
.search-field input { border:0; background:transparent; font-size:14px; padding:9px; min-height:44px; }
.template-trigger { width:100%; text-align:left; margin-top:12px; }
.template-list { display:grid; gap:12px; margin-top:18px; }
.template-list button { border:1px solid var(--line); border-radius:10px; text-align:left; padding:16px; background:var(--bg); }
.template-list strong { display:block; font-size:15px; font-weight:500; }
.template-list span { display:block; font-size:12px; color:var(--muted); margin:8px 0; }
.template-list small { color:var(--green); font-size:11px; }
.session-row { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:20px 0; border-bottom:1px solid var(--line); }
.session-row:last-child { border-bottom:0; padding-bottom:0; }
.session-row > div { min-width:0; }
.session-row time { color:var(--muted); font-size:11px; }
.session-row h3 { font-size:14px; margin:6px 0; font-weight:500; overflow-wrap:anywhere; }
.session-row p { font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; }
.session-row button { white-space:nowrap; flex-shrink:0; }
.category-row { padding-top:19px; }
.category-row > div { display:flex; justify-content:space-between; gap:12px; margin-bottom:6px; font-size:12px; }
.category-row strong { font-weight:500; }
.category-row small { display:inline; color:var(--muted); font-weight:400; }
.insight-empty { margin-top:20px; color:var(--muted); font-size:12px; }
#theme-choice { max-width:200px; }
#review-task-name { overflow-wrap:anywhere; }
.session-row h3, .task-title { line-height:1.6; }
@media(max-width:1050px) {
  .planning-controls { align-items:flex-start; flex-direction:column; gap:17px; }
  .planning-fields { width:100%; }
  .planning-fields label { flex:1; }
  .planning-fields select { width:100%; min-width:0; }
}
@media(max-width:650px) {
  .planning-panel { padding:20px; margin-bottom:20px; }
  .planning-fields { gap:10px; }
  .planning-fields select { font-size:16px; padding:9px 6px; }
  .recommendation { align-items:stretch; flex-direction:column; gap:15px; padding:17px; }
  .recommendation h3 { font-size:17px; }
  .recommendation .button { align-self:flex-start; }
  .capacity-summary { font-size:11px; line-height:1.9; }
  .filters { gap:19px; }
  .task-controls button { min-width:34px; width:34px; }
  .search-field input { font-size:16px; }
}
/* Keep the next action and plan list ahead of secondary summaries on phones. */
@media(max-width:650px) {
  #view-today { display:flex; flex-direction:column; }
  #view-today > .page-heading { order:0; }
  #view-today > .planning-panel { order:1; }
  #view-today > .content-grid { order:2; }
  #view-today > .daily-grid { order:3; margin-top:20px; margin-bottom:0; }
  #view-today > .reflection-card { order:4; }
  #view-today .right-column { display:none; }
  .planning-controls > div > .eyebrow { display:none; }
  .planning-controls > div > .muted { display:none; }
  .planning-controls h2 { font-size:17px; }
  .planning-panel { padding:18px; }
  .list-footer, .reflection-input > span, .page-footer { font-size:10px; }
  .card-overline, .task-step, .task-meta { font-size:12px; }
  .intention-bottom, .progress-footer { font-size:11px; }
}
.focus-action { max-width:440px; margin:13px auto 0; font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
#timer-progress { display:block; max-width:270px; margin:0 auto 18px; }
#focus-recent-review { margin-bottom:12px; }
@media(max-width:650px) {
  .intention-card input, .timer-card select { font-size:16px; }
  .task-controls button { width:44px; min-width:44px; min-height:44px; }
}
/* Theme changes are immediate, avoiding mixed foreground/background colors. */
.button, .navigation button { transition:filter .18s; }
.native-only { display:none; }
.native-app .native-only { display:block; }
.native-app .browser-only, .native-app .topbar { display:none; }
@media(max-width:650px) { .native-app .sidebar { padding-bottom:0; height:67px; } }
@media(max-width:650px) { .native-app main { padding-bottom:90px; } }
.habits-panel { margin-top:22px; }
.habit-row { display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--line); }
.habit-row:last-child { border:0; }
.habit-row > div { flex:1;min-width:0; }
.habit-row strong { font-size:14px;font-weight:500;overflow-wrap:anywhere; }
.habit-row small { font-size:11px;color:var(--muted);margin-top:5px; }
.habit-toggle { width:44px;min-height:44px;flex-shrink:0;border:1px solid var(--line);border-radius:14px;font-size:22px;background:var(--bg); }
.habit-toggle.checked { background:var(--green);color:var(--on-accent);border-color:var(--green); }
.habit-week-row { margin-top:20px; }
.habit-week-row > strong { font-size:13px;font-weight:500; }
.habit-week-row > div { display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:10px; }
.habit-week-row span { display:grid;place-items:center;border-radius:8px;background:var(--surface);height:32px;color:var(--muted); }
.habit-week-row span.checked { background:var(--soft);color:var(--green); }
#habit-form > p { margin-top:16px;line-height:1.8; }
@media(max-width:650px) { #view-today > .habits-panel {order:3;} #view-today > .daily-grid {order:4;} #view-today > .reflection-card {order:5;} }
@media(prefers-reduced-motion:no-preference) {
 .button:active,.habit-toggle:active { transform:scale(.97); }
 .button,.habit-toggle { transition:transform .12s ease,filter .15s; }
 dialog[open] {animation:sheet-appear .18s ease-out;}
 @keyframes sheet-appear {from{opacity:.5;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
}
.habit-week-row span { height:48px;gap:1px;padding:5px 0; }
.habit-week-row span small { font-size:9px; }
.habit-week-row span b { font-size:16px;font-weight:500; }
/* Leave room for the native navigation bar and keep timer actions reachable. */
@media(max-width:650px) {
 .native-app main {padding-top:20px;}
 .native-app #view-focus .page-heading {margin-bottom:18px;}
 .native-app .timer-card {padding:18px 14px;}
 .native-app .timer-card .segmented {margin-bottom:14px;}
 .native-app .timer-ring {width:200px;height:200px;margin:16px auto;}
 .native-app #timer-display {font-size:50px;}
 .native-app .duration-options {margin-bottom:14px;}
}
.draft-step {display:flex;gap:8px;align-items:center;margin:8px 0;}
.draft-step button {width:44px;flex-shrink:0;font-size:23px;color:var(--muted);}
.focus-checklist {text-align:left;margin-top:15px;}
.focus-checklist h3 {font-size:13px;font-weight:500;margin:0 0 8px;}
.focus-checklist h3 small {display:inline;color:var(--muted);}
.focus-checklist button {width:100%;display:flex;gap:12px;align-items:center;text-align:left;padding:8px 12px;border-radius:9px;border:1px solid var(--line);margin:6px 0;font-size:13px;}
.focus-checklist button[aria-pressed="true"] {background:var(--soft);color:var(--green);}
.focus-checklist button span:last-child {overflow-wrap:anywhere;}
#day-plan-summary {font-size:12px;background:var(--soft);padding:12px;border-radius:9px;margin:18px 0;}
.day-plan-option {display:flex;gap:12px;align-items:center;text-align:left;width:100%;border:1px solid var(--line);border-radius:11px;padding:13px;margin:9px 0;}
.day-plan-option.selected {border-color:var(--green);background:var(--soft);}
.day-plan-option > span:first-child {font-size:21px;color:var(--green);}
.day-plan-option strong {font-size:14px;font-weight:500;overflow-wrap:anywhere;}
.day-plan-option small {font-size:11px;color:var(--muted);margin-top:5px;}
#day-plan-warning {margin:16px 0;line-height:1.8;}

.storage-warning{margin:16px 24px;padding:18px;border:1px solid var(--green);border-radius:18px;background:var(--surface);color:var(--ink)}.storage-warning p{font-size:14px;line-height:1.7;margin:8px 0 12px}.storage-warning[hidden]{display:none}