:root {
  --bg: #ffffff;
  --sidebar-bg: #f5f5f7;
  --panel-bg: #fafafa;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --faint: #a1a1a6;
  --border: #e5e5ea;
  --hover: rgba(0, 0, 0, 0.04);
  --selected: #e8f1ff;
  --accent: #0a84ff;
  --accent-soft: rgba(10, 132, 255, 0.12);
  --danger: #e5484d;
  --warn: #c2410c;
  --star: #f5a524;
  --streak-good: #1f9d55;
  --streak-ok: #0d9488;
  --prio-1: #0090ff;
  --prio-2: #f76b15;
  --prio-3: #e5484d;
  --input-bg: #ffffff;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1c1e;
    --sidebar-bg: #161618;
    --panel-bg: #202022;
    --text: #f2f2f7;
    --muted: #a1a1a6;
    --faint: #6e6e73;
    --border: #2f2f33;
    --hover: rgba(255, 255, 255, 0.05);
    --selected: #1f3350;
    --accent: #3b9bff;
    --accent-soft: rgba(59, 155, 255, 0.18);
    --danger: #ff6369;
    --warn: #fb923c;
    --streak-good: #34c759;
    --streak-ok: #2dd4bf;
    --input-bg: #2a2a2d;
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { opacity: 0.45; cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
[hidden] { display: none !important; }

.icon { width: 18px; height: 18px; flex: none; }
.spacer { flex: 1; }

/* ---------- layout ---------- */

.app {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) auto;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  padding: 16px 10px 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.editor {
  width: 340px;
  background: var(--panel-bg);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 12px 18px 24px;
}

.scrim { display: none; }
.mobile-only, .icon-btn.mobile-only { display: none; }

/* ---------- sidebar ---------- */

.nav { display: flex; flex-direction: column; gap: 1px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  border-radius: 7px;
  text-align: left;
  color: var(--text);
}
.nav-item:hover { background: var(--hover); }
.nav-item.current { background: var(--accent-soft); }
.nav-item .icon { color: var(--muted); }
.nav-item .focus-today { color: var(--star); }
.nav-item .focus-starred { color: var(--star); }
.nav-item .focus-overdue { color: var(--danger); }
.nav-item .focus-upcoming { color: var(--danger); }
.nav-item .focus-inbox { color: var(--accent); }
.nav-item .focus-done { color: #30a46c; }
.nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count { color: var(--muted); font-size: calc(12px * var(--fs, 1)); font-variant-numeric: tabular-nums; }

.badge {
  font-size: calc(11px * var(--fs, 1));
  font-weight: 600;
  padding: 0 6px;
  border-radius: 9px;
  line-height: 17px;
  font-variant-numeric: tabular-nums;
}
.badge.overdue { background: var(--danger); color: #fff; }

.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.nav-item .dot { margin: 0 4px; }
/* A list or account name in its account's color (--acct), mixed with the text color to stay readable. */
.acct-name { color: color-mix(in srgb, var(--acct) 80%, var(--text)); }
.nav-item .acct-name { margin-left: 4px; }

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 10px 4px;
  font-size: calc(11px * var(--fs, 1));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--muted);
  font-size: calc(18px * var(--fs, 1));
  line-height: 1;
}
.icon-btn:hover { background: var(--hover); color: var(--text); }

.new-list-form { padding: 4px 6px; }
.new-list-form input, .rename-form input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--input-bg);
  outline: none;
}
.empty-lists { color: var(--faint); font-size: calc(13px * var(--fs, 1)); padding: 4px 10px; }

/* ---------- mini calendar ---------- */

.mini-cal { padding: 0 0 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }

.cal-month { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 4px 8px; }
.cal-month-label { font-weight: 600; font-size: calc(13px * var(--fs, 1)); padding: 2px 4px; border-radius: 6px; margin-left: -4px; }
.cal-month-label:hover { background: var(--hover); }
.cal-nav { display: flex; }
.cal-nav .icon-btn { min-width: 24px; height: 24px; }
.cal-nav .icon { width: 15px; height: 15px; }
.cal-nav [data-act="cal-today"] .icon { width: 12px; height: 12px; }

.cal-grid { display: grid; grid-template-columns: 22px repeat(7, 1fr); gap: 1px; padding: 0 4px 0 0; }
.cal-wk {
  height: 28px;
  font-size: calc(10px * var(--fs, 1));
  color: var(--faint);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.cal-wk:hover { background: var(--hover); color: var(--text); }
.cal-wk.selected { background: var(--accent); color: #fff; }
.cal-day.in-week { background: var(--accent-soft); border-radius: 0; }
.cal-month-label.selected { background: var(--accent-soft); color: var(--accent); }
.cal-wd { text-align: center; font-size: calc(10px * var(--fs, 1)); font-weight: 600; color: var(--faint); padding: 2px 0 4px; }
.cal-day {
  position: relative;
  height: 28px;
  border-radius: 6px;
  font-size: calc(12px * var(--fs, 1));
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.cal-day:hover { background: var(--hover); }
.cal-day.other-month { color: var(--faint); }
.cal-day.today { color: var(--accent); font-weight: 700; }
.cal-day.selected { background: var(--accent-soft); }
.cal-day.has-tasks::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--muted);
}
.cal-day.has-overdue::after { background: var(--danger); }
.dragging-task .cal-day { outline: 1px dashed var(--border); outline-offset: -1px; }
.cal-day.drop-target, .dragging-task .cal-day.drop-target { background: var(--accent); color: #fff; outline: none; }
.cal-day.drop-target::after { background: #fff; }

.sidebar-footer {
  margin-top: auto;
  padding: 12px 10px;
  font-size: calc(12px * var(--fs, 1));
  color: var(--faint);
}
#save-status.error { color: var(--danger); }

/* ---------- main ---------- */

.main-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 28px 10px;
}
.main-header h1 {
  font-size: calc(24px * var(--fs, 1));
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--muted);
  background: var(--input-bg);
}
.filter-btn:hover { color: var(--text); }
.filter-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.filter-btn.active { color: var(--accent); }
.filter-btn .icon { width: 15px; height: 15px; }
.filter-count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: calc(11px * var(--fs, 1));
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 28px 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-bg);
}
.filter { display: inline-flex; align-items: center; gap: 6px; font-size: calc(12px * var(--fs, 1)); color: var(--muted); }
.filter select {
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  font-size: calc(13px * var(--fs, 1));
  max-width: 160px;
}
.filter.set select { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }


.task-list { flex: 1; overflow-y: auto; padding: 0 20px 40px; font-size: calc(14px * var(--fs, 1)); } /* --fs: the calendar views' text size (A− / A+) */

.group { margin-bottom: 14px; }
.group-title {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: calc(13px * var(--fs, 1));
  font-weight: 600;
  color: var(--muted);
  margin: 12px 12px 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.group-title span { font-weight: 400; color: var(--faint); }
.group-title.overdue { color: var(--danger); }

.task {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: default;
  outline: none;
}
.task:hover { background: var(--hover); }
.task.selected { background: var(--selected); }
.task.done .task-title { color: var(--faint); text-decoration: line-through; }
.task.dragging { opacity: 0.4; }

/* While dragging a task, show the lists that accept it. */
.dragging-task .nav-item:is([data-nav="list"], [data-id="today"], [data-id="starred"]) { outline: 1px dashed var(--border); outline-offset: -1px; }
.nav-item.drop-target,
.dragging-task .nav-item.drop-target { background: var(--accent); color: #fff; outline: none; }
.nav-item.drop-target .icon, .nav-item.drop-target .count { color: #fff; }

.check {
  width: 20px;
  height: 20px;
  margin-top: 0;
  border-radius: 50%;
  border: 1.6px solid var(--faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: transparent;
}
.check .icon { width: 16px; height: 16px; }
.check .icon circle { display: none; }
.check:hover { color: var(--faint); }
.check.prio-1 { border-color: var(--prio-1); }
.check.prio-2 { border-color: var(--prio-2); }
.check.prio-3 { border-color: var(--prio-3); }
.task.done .check, .check.checked { background: var(--accent); border-color: var(--accent); color: #fff; }

.task-body { flex: 1; min-width: 0; }
.task-title { overflow-wrap: anywhere; }
.untitled { color: var(--faint); }
.prio-mark { font-weight: 700; margin-right: 4px; }
.prio-mark.prio-1 { color: var(--prio-1); }
.prio-mark.prio-2 { color: var(--prio-2); }
.prio-mark.prio-3 { color: var(--prio-3); }

.task-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: calc(12px * var(--fs, 1));
  color: var(--muted);
  max-width: 100%;
}
.chip .icon { width: 13px; height: 13px; }
.chip.due.overdue { color: var(--danger); }
.chip.repeat { color: var(--muted); }
.chip.notes { color: var(--faint); }
.chip .dot { width: 7px; height: 7px; }

.star { color: var(--faint); opacity: 0.45; display: inline-flex; padding: 2px; border-radius: 6px; }
.star:hover { color: var(--star); }
.star .icon { width: 17px; height: 17px; }
.task:hover .star, .star.on, .task.selected .star { opacity: 1; }
.star.on { color: var(--star); }
.star.on .icon { fill: var(--star); }
.editor .star { opacity: 1; }

.empty { color: var(--faint); text-align: center; padding: 60px 20px; }
.empty.error { color: var(--danger); }

/* ---------- editor ---------- */

.editor-head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.editor-head .check { width: 22px; height: 22px; }

.ed-title {
  width: 100%;
  border: 0;
  background: none;
  resize: none;
  outline: none;
  font-size: calc(18px * var(--fs, 1));
  font-weight: 600;
  padding: 4px 0;
  margin-bottom: 8px;
  overflow: hidden;
}

.field { margin: 14px 0; }
.ed-notes {
  width: 100%;
  min-height: 72px;
  border: 1px solid var(--border, rgba(128, 128, 128, 0.3));
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: calc(14px * var(--fs, 1));
  line-height: 1.45;
  padding: 8px 10px;
  resize: none;
  overflow: hidden;
}
.lbl {
  display: block;
  font-size: calc(11px * var(--fs, 1));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
}

.editor select, .editor input[type="date"], .editor input[type="time"], .editor input[type="number"] {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  min-height: 30px;
}
.editor select:focus, .editor input:focus { border-color: var(--accent); outline: none; }
.field > select { width: 100%; }
.editor input[type="number"] { width: 64px; }

.due-row, .time-row { display: flex; align-items: center; gap: 8px; }
.due-row input { flex: 1; }
.time-row { margin-top: 8px; color: var(--muted); }

.quick-dates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.quick-dates button, .segmented button, .weekday-picker button {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  font-size: calc(12px * var(--fs, 1));
}
.quick-dates button:hover { border-color: var(--accent); color: var(--accent); }

.toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

.segmented { display: flex; }
.segmented button { flex: 1; border-radius: 0; margin-left: -1px; }
.segmented button:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.segmented button:last-child { border-radius: 0 6px 6px 0; }
.segmented button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); position: relative; }
.segmented button.on.prio-3 { color: var(--prio-3); }
.segmented button.on.prio-2 { color: var(--prio-2); }

.hint { font-size: calc(12px * var(--fs, 1)); color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.hint .icon { width: 14px; height: 14px; }
.hint.warn { color: var(--warn); }

.link-btn { color: var(--accent); font-size: calc(12px * var(--fs, 1)); }
.link-btn:hover { text-decoration: underline; }

.repeat-box {
  margin: -6px 0 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.repeat-box .row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.repeat-box .row > span:first-child { min-width: 40px; color: var(--muted); }
.radio-row { cursor: pointer; }
.radio-row select:disabled { opacity: 0.5; }

.weekday-picker { display: flex; gap: 4px; }
.weekday-picker button { width: 32px; padding: 4px 0; text-align: center; }
.weekday-picker button.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.repeat-summary {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-weight: 600;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.repeat-summary .icon { color: var(--accent); margin-top: 1px; }
.repeat-next { margin-top: 10px; }
.repeat-next ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: calc(13px * var(--fs, 1)); }

.secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: calc(13px * var(--fs, 1));
}
.secondary-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.secondary-btn .icon { width: 14px; height: 14px; }

.editor-foot { margin-top: 24px; font-size: calc(12px * var(--fs, 1)); color: var(--faint); line-height: 1.6; }

/* ---------- popover, toast ---------- */

.popover {
  position: fixed;
  z-index: 50;
  width: 240px;
  padding: 10px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.swatches { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin: 10px 0; }
.swatch { aspect-ratio: 1; border-radius: 50%; }
.color-custom { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.color-native { flex: none; width: 30px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
.color-hex { flex: 1; min-width: 0; width: 0; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font: 13px ui-monospace, Menlo, monospace; }
.color-drop { flex: none; }
.color-drop .icon { width: 16px; height: 16px; }
.swatch.on { box-shadow: 0 0 0 2px var(--panel-bg), 0 0 0 4px var(--text); }
.menu-item { display: block; width: 100%; text-align: left; padding: 6px 8px; border-radius: 6px; }
.menu-item:hover:not(:disabled) { background: var(--hover); }
.menu-item.danger { color: var(--danger); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 10px 16px;
  background: var(--text);
  color: var(--bg);
  border-radius: 10px;
  box-shadow: var(--shadow);
  z-index: 60;
  max-width: calc(100vw - 32px);
}
.toast .link-btn { color: var(--accent); font-size: calc(14px * var(--fs, 1)); font-weight: 600; }

/* Day view: the task / event editor floats near the tap instead of taking the right column. */
@media (min-width: 901px) {
  .editor.editor-pop {
    position: fixed;
    z-index: 45;
    width: 340px;
    max-height: min(82vh, 680px);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
  }
}

/* ---------- narrow screens ---------- */

@media (max-width: 900px) {
  .app { grid-template-columns: 220px minmax(0, 1fr); }
  .editor {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(380px, 100vw);
    z-index: 30;
    box-shadow: var(--shadow);
  }
}

@media (max-width: 640px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .mobile-only, .icon-btn.mobile-only { display: inline-flex; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .sidebar-open .sidebar { transform: none; }
  .sidebar-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); z-index: 35; }
  .main-header { padding: 14px 16px 8px; }
  .main-header h1 { font-size: calc(18px * var(--fs, 1)); flex: 1; }
  body[data-section="goals"] .main-header h1 { flex: 0 1 auto; } /* the + (new goal) stays next to the title */
  .main-header .spacer { display: none; }
  .filter-btn span:not(.filter-count) { display: none; }
  .filter-bar { margin: 0 16px 6px; }
  .task-list { padding: 0 8px 40px; }
  .star { opacity: 1; }
  .editor { width: 100vw; padding: 12px 16px 24px; }
}

/* ---------- header period navigation ---------- */

.period-arrow { flex: none; font-size: calc(20px * var(--fs, 1)); }
#view-title.pickable { cursor: pointer; margin: 0 2px; padding: 2px 6px; border-radius: 7px; }
#view-title.pickable:hover { background: var(--hover); }
.popover:has(.date-pop) { width: auto; padding: 10px 8px 6px; }
.date-pop.mini-cal { width: 250px; margin: 0; padding: 0; border: 0; }
.date-pop-foot { display: flex; justify-content: center; padding-top: 6px; }

/* ---------- calendar views ---------- */

.task-list { position: relative; }
.task-list.calendar-mode { padding-bottom: 0; }

.mini-check {
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 50%;
  border: 1.4px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: 0.75;
}
.mini-check .icon { width: 11px; height: 11px; color: transparent; }
.mini-check .icon circle { display: none; }
.mini-check:hover { opacity: 1; }
.mini-check:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.done > .mini-check { background: var(--c, var(--accent)); border-color: var(--c, var(--accent)); opacity: 1; }
.done > .mini-check .icon { color: #fff; }

/* chips: all-day tasks and month cells */
.cal-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 2px 6px;
  margin-bottom: 2px;
  border-radius: 5px;
  font-size: calc(12px * var(--fs, 1));
  line-height: 1.35;
  background: color-mix(in srgb, var(--c) 16%, var(--bg));
  color: var(--text);
  cursor: default;
}
.cal-chip:hover { background: color-mix(in srgb, var(--c) 26%, var(--bg)); }
.cal-chip.selected { box-shadow: 0 0 0 1.5px var(--accent); }
.cal-chip.overdue .chip-time, .cal-chip.overdue .chip-title { color: var(--danger); }
.cal-chip.done .chip-title { text-decoration: line-through; color: var(--muted); }
.cal-chip .mini-check { color: var(--c); }
.chip-time { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.chip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip.dragging, .tl-event.dragging { opacity: 0.4; }
/* Tasks colored by account: shaded only as blocks on the timeline (.tl-event); chips are plain. */
.tasks-by-account .cal-chip:not(.gcal) { background: none; }
.tasks-by-account .cal-chip:not(.gcal):hover { background: var(--hover); }
/* Without a shade to set them apart, the tasks in an account card sit closer together. */
.tasks-by-account .day-account .day-card-body { gap: 1px; padding-bottom: 4px; }
.tasks-by-account .day-account .day-card-body .cal-chip { padding-top: 2px; padding-bottom: 2px; margin-bottom: 0; }

/* timeline */
.timeline { --gutter: 56px; position: relative; }
.timeline.week { min-width: max(620px, calc(100% * var(--zoom, 1))); } /* --zoom: the calendar views' zoom (magnifier buttons) */
.tl-top { position: sticky; top: 0; z-index: 3; background: var(--bg); border-bottom: 1px solid var(--border); }
.tl-head, .tl-allday, .tl-body { display: grid; }
.tl-day-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  border-radius: 8px;
  color: var(--muted);
  font-size: calc(11px * var(--fs, 1));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tl-day-head b { font-size: calc(18px * var(--fs, 1)); font-weight: 600; color: var(--text); letter-spacing: 0; line-height: 1.2; }
.tl-day-head:hover { background: var(--hover); }
.tl-day-head.today, .tl-day-head.today b { color: var(--accent); }
.tl-gutter-label { font-size: calc(11px * var(--fs, 1)); color: var(--faint); padding: 6px 8px 6px 0; text-align: right; }
/* A long all-day cell (Day and Week views) or S view cell stops growing at about --cap-rows entries and scrolls inside: fewer on a phone or a short window. */
:root { --cap-rows: 5; }
@media (max-width: 640px), (max-height: 560px) { :root { --cap-rows: 3; } }
/* No overscroll-behavior here: these cells fill the grid, and "contain" made them swallow the wheel even with nothing to scroll, so the view couldn't be scrolled from over them. x is hidden so a sideways scroll goes to the view, not the cell. */
.tl-allday-cell, .sv-cell:not(.sv-log) { overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
.tl-allday-cell { min-height: 32px; max-height: calc(var(--cap-rows) * 26px * var(--fs, 1) + 8px); padding: 4px 2px; border-left: 1px solid var(--border); }
.timeline.day .tl-allday-cell { padding: 4px 6px; }
.timeline.day .cal-chip { font-size: calc(13px * var(--fs, 1)); padding: 4px 8px; }
.tl-allday-cell.drop-target { background: var(--accent-soft); }

.tl-body { position: relative; }
.tl-hours { position: relative; }
/* Zoomed in, the view scrolls sideways: the hour labels and row headings stay at the left. */
.timeline.week :is(.tl-hours, .tl-gutter-label, .tl-head > :first-child) { position: sticky; left: 0; z-index: 2; background: var(--bg); }
.tl-hour {
  position: absolute;
  right: 8px;
  font-size: calc(11px * var(--fs, 1));
  color: var(--faint);
  transform: translateY(-50%);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tl-col {
  position: relative;
  border-left: 1px solid var(--border);
  background-image: linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 100% var(--hour);
}
.tl-col.today { background-color: color-mix(in srgb, var(--accent) 4%, transparent); }
.tl-col.drop-target { background-color: var(--accent-soft); }

.tl-event {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 3px 6px;
  overflow: hidden;
  border-radius: 6px;
  border-left: 3px solid var(--c);
  background: color-mix(in srgb, var(--c) 20%, var(--bg));
  font-size: calc(12px * var(--fs, 1));
  line-height: 1.3;
  cursor: default;
}
.tl-event:hover { background: color-mix(in srgb, var(--c) 30%, var(--bg)); }
.tl-event.selected { box-shadow: 0 0 0 1.5px var(--accent); z-index: 2; }
.tl-event .mini-check { color: var(--c); margin-top: 1px; }
.ev-text { display: flex; flex-direction: column; min-width: 0; }
.ev-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-time { color: var(--muted); font-size: calc(11px * var(--fs, 1)); white-space: nowrap; }
.tl-event.short { align-items: center; padding-top: 0; padding-bottom: 0; }
.tl-event.short .ev-text { flex-direction: row; gap: 6px; }
.tl-event.done .ev-title { text-decoration: line-through; color: var(--muted); }
.tl-event.overdue .ev-time { color: var(--danger); }

.tl-now { position: absolute; left: -4px; right: 0; height: 2px; background: var(--danger); z-index: 2; pointer-events: none; }
.tl-now::before { content: ""; position: absolute; left: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

.tl-drop-marker {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  border-top: 2px solid var(--accent);
  pointer-events: none;
  font-size: calc(11px * var(--fs, 1));
  font-weight: 600;
  color: var(--accent);
  padding-left: 4px;
}

/* month grid */
.month {
  min-width: max(560px, calc(100% * var(--zoom, 1)));
  /* Fill the panel: the weeks share its height (each at least 96px tall, else it scrolls). */
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: min-content;
  padding-bottom: 8px;
}
.month-head { flex: none; }
.month-head, .month-row { display: grid; grid-template-columns: 32px repeat(7, minmax(0, 1fr)); }
.month-head span {
  padding: 6px 6px 6px;
  font-size: calc(11px * var(--fs, 1));
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.month-head span:first-child { text-align: center; color: var(--faint); }
.month-row { border-top: 1px solid var(--border); flex: 1 1 0; min-height: 96px; } /* keep in sync with MONTH_CELL_MIN */
.month-row:last-child { border-bottom: 1px solid var(--border); }
.month-wk {
  font-size: calc(11px * var(--fs, 1));
  color: var(--faint);
  align-self: stretch;
  padding-top: 8px;
  display: flex;
  justify-content: center;
}
.month-wk:hover { background: var(--hover); color: var(--accent); }
.month-wk, .month-head span:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
.month-cell { padding: 4px; border-left: 1px solid var(--border); min-width: 0; overflow: hidden; }
.month-cell.other-month { background: var(--panel-bg); }
.month-cell.other-month .month-date { color: var(--faint); }
.month-cell.drop-target { background: var(--accent-soft); }
.month-date {
  display: inline-block;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  margin-bottom: 2px;
  border-radius: 12px;
  font-size: calc(12px * var(--fs, 1));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.month-date:hover { background: var(--hover); }
.month-cell.today .month-date { background: var(--accent); color: #fff; }
.month-more { font-size: calc(11px * var(--fs, 1)); color: var(--muted); padding: 1px 6px; border-radius: 4px; }
.month-more:hover { color: var(--accent); background: var(--hover); }

@media (max-width: 640px) {
  .timeline { --gutter: 44px; }
}

/* ---------- sidebar toolbar ---------- */

.sidebar-footer { display: flex; align-items: center; gap: 8px; padding: 8px 4px 10px; border-top: 1px solid var(--border); }
.toolbar { display: flex; gap: 2px; }
.toolbar .icon-btn .icon { width: 17px; height: 17px; }
#save-status { margin-left: auto; padding-right: 6px; text-align: right; }

/* ---------- dialog ---------- */

.dialog {
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-bg);
  color: var(--text);
  box-shadow: var(--shadow);
}
.dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.dialog form { display: flex; flex-direction: column; max-height: inherit; }
.dialog h2 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 18px 20px 4px; font-size: calc(17px * var(--fs, 1)); }
.dialog h2 .icon { color: var(--accent); }
.dialog-body { padding: 4px 20px 8px; overflow-y: auto; }
.dialog-body p { margin: 8px 0; }
.dialog-body code { font-size: calc(12px * var(--fs, 1)); background: var(--hover); padding: 1px 5px; border-radius: 4px; }
.dialog-body a { color: var(--accent); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 18px; }
.dialog-actions .secondary-btn { margin: 0; }
.primary-btn {
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: calc(13px * var(--fs, 1));
  font-weight: 600;
}
.primary-btn:hover { filter: brightness(1.08); }
.import-errors { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: var(--hover); }
.import-errors .warn { color: var(--warn); font-weight: 600; margin: 4px 0; }
.import-errors ul { margin: 0; padding-left: 18px; font-size: calc(12px * var(--fs, 1)); color: var(--muted); }
.import-errors li { margin: 3px 0; }
.import-errors li span { color: var(--text); }
.menu-label { font-weight: 600; padding: 2px 4px; }
.menu-item:disabled { color: var(--faint); }

/* ---------- list groups & reordering ---------- */

.group-row { font-weight: 600; cursor: pointer; user-select: none; }
.group-row .icon { width: 14px; height: 14px; color: var(--muted); transition: transform 0.15s ease; }
.group-row .icon.open { transform: rotate(90deg); }
.list-group { position: relative; }
.group-lists { padding-left: 14px; }
.group-empty { font-size: calc(12px * var(--fs, 1)); color: var(--faint); padding: 4px 10px 6px 24px; }

#list-nav [draggable="true"] { position: relative; }
#list-nav .dragging { opacity: 0.4; }
.drop-before::before, .drop-after::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
  pointer-events: none;
}
.drop-before::before { top: -1px; }
.drop-after::after { bottom: -1px; }
.group-row.drop-into { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.section-title.drop-before { position: relative; }
.section-title.drop-before::before { top: auto; bottom: -3px; left: 0; right: 0; }

/* ---------- settings ---------- */

.dialog.settings { width: min(560px, calc(100vw - 32px)); }
.dialog h3 { margin: 10px 0 4px; font-size: calc(13px * var(--fs, 1)); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.notice { margin: 10px 0; padding: 8px 12px; border-radius: 8px; background: var(--accent-soft); font-size: calc(13px * var(--fs, 1)); }
.error-text { color: var(--danger); font-size: calc(13px * var(--fs, 1)); }
.dialog-body .secondary-btn { margin-top: 6px; }
.data-reset-label { display: block; margin: 12px 0 6px; }
.data-reset-input { width: 100%; margin-bottom: 8px; }
.data-reset-dialog .danger-btn { background: var(--danger); }
.data-reset-dialog .primary-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.choice { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; font-size: calc(13px * var(--fs, 1)); cursor: pointer; }
.choice input { margin-top: 3px; }
.warn { color: var(--warn); }

/* repeating-task marker in calendar views */
.repeat-mark { display: inline-flex; flex: none; margin-left: auto; color: var(--c, var(--muted)); opacity: 0.85; }
.repeat-mark .icon { width: 12px; height: 12px; }
.tl-event .repeat-mark { margin-top: 2px; }
.tl-event.short .repeat-mark { margin-top: 0; }
.timeline.day .cal-chip .repeat-mark .icon { width: 13px; height: 13px; }

/* upcoming occurrences of fixed-schedule repeats (previews, not real tasks) */
.cal-chip.ghost, .tl-event.ghost {
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--c) 60%, transparent);
  opacity: 0.75;
}
.tl-event.ghost { border-left: 3px dashed color-mix(in srgb, var(--c) 70%, transparent); }
.cal-chip.ghost:hover, .tl-event.ghost:hover { opacity: 1; background: color-mix(in srgb, var(--c) 8%, var(--bg)); }
.ghost-mark {
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 50%;
  border: 1.4px dashed var(--c);
  opacity: 0.7;
}
.tl-event .ghost-mark { margin-top: 1px; }

.repeat-mode { margin: 4px 0 10px; }
.repeat-mode .choice { margin: 4px 0 6px; }
.repeat-mode .choice span { color: var(--muted); font-size: calc(12px * var(--fs, 1)); }
.repeat-mode .choice strong { color: var(--text); font-size: calc(13px * var(--fs, 1)); }

/* Week view: columns are narrow, so drop the time (it's in the tooltip) and let titles wrap
   onto as many lines as the block's height allows. */
.timeline.week .ev-time { display: none; }
.timeline.week .tl-event { padding-right: 4px; gap: 4px; }
.timeline.week .ev-title { white-space: normal; hyphens: auto; line-height: 1.25; }
.timeline.week .tl-event.short .ev-title { white-space: nowrap; }

/* ---------- Google Calendar events (read-only) ---------- */

.tl-event.gcal, .cal-chip.gcal {
  background: var(--c);
  color: #fff;
  border: 0;
  cursor: pointer;
}
.tl-event.gcal:hover, .cal-chip.gcal:hover { background: color-mix(in srgb, var(--c) 85%, #000); }
.tl-event.gcal .ev-time, .cal-chip.gcal .chip-time { color: rgba(255, 255, 255, 0.85); }
.gcal-icon { width: 12px; height: 12px; flex: none; opacity: 0.9; }
.tl-event.gcal .gcal-icon { margin-top: 2px; }
.tl-event.gcal.short .gcal-icon { margin-top: 0; }

.gcal-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--warn) 12%, var(--bg));
  color: var(--warn);
  font-size: calc(12px * var(--fs, 1));
}
.gcal-error .icon { width: 14px; height: 14px; }
.gcal-error span { flex: 1; }

.gcal-pop { display: flex; flex-direction: column; gap: 4px; }
.gcal-pop-title { display: flex; align-items: center; gap: 8px; font-size: calc(14px * var(--fs, 1)); }
.gcal-pop .hint { margin: 0; }
.gcal-pop .link-btn { margin-top: 6px; font-size: calc(13px * var(--fs, 1)); }

/* settings: Google section */
.section-gap { margin-top: 22px !important; }
.dialog-body > .section-gap:first-child { margin-top: 0 !important; }
.g-client-form { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.g-client-form input {
  flex: 1 1 200px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  font-size: calc(12px * var(--fs, 1));
}
.g-client-form .secondary-btn { margin: 0; }
.g-account { margin: 10px 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.g-account-head { display: flex; align-items: center; gap: 10px; font-size: calc(13px * var(--fs, 1)); }
.danger-link { color: var(--danger); }
.g-cals { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.g-cal { display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--fs, 1)); cursor: pointer; padding: 2px 0; }
.g-cal .dot { width: 9px; height: 9px; }
.dialog-body .secondary-btn .icon { width: 14px; height: 14px; }

/* Google Tasks */
.g-warn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--warn);
  color: #fff;
  font-size: calc(11px * var(--fs, 1));
  font-weight: 700;
}
.g-task-accounts { margin: 6px 0 4px 26px; display: flex; flex-direction: column; gap: 4px; font-size: calc(13px * var(--fs, 1)); }
.star-spacer { width: 21px; flex: none; }

/* Google event editor */
.ev-cal { display: inline-flex; align-items: center; gap: 6px; font-size: calc(12px * var(--fs, 1)); font-weight: 600; color: var(--c); }
.ev-cal .icon { width: 15px; height: 15px; }
.text-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
}
.text-input:focus { border-color: var(--accent); outline: none; }
.tl-event.gcal.selected, .cal-chip.gcal.selected { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--c); z-index: 2; }
.tl-event.gcal[draggable="true"], .cal-chip.gcal[draggable="true"] { cursor: grab; }
.pending-row { cursor: default; color: var(--muted); }
.pending-row .count { font-size: calc(11px * var(--fs, 1)); }

/* sort menu */
.sort-option { display: flex; align-items: center; gap: 8px; }
.sort-option .icon { width: 14px; height: 14px; color: var(--accent); }
.sort-option.on { font-weight: 600; }
.sort-reverse { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; border-radius: 0; cursor: pointer; }
@media (max-width: 640px) {
  #sort-btn span { display: none; }
}
/* Block layout keeps the date and "+N more" lines a predictable height (the item count per cell relies on it). */
.month-cell .month-date { display: block; width: fit-content; }
.month-cell .month-more { display: block; }

/* ---------- day view: timeline | trackers + reserved section ---------- */

.task-list.day-mode { overflow: hidden; padding-right: 16px; }
.day-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  height: 100%;
}
.day-timeline { position: relative; overflow-y: auto; min-height: 0; }
.day-side {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  padding: 6px 0 12px;
}
.trackers, .journal {
  border-radius: 10px;
  min-height: 0;
}
.trackers { overflow-y: auto; padding: 12px 0; }
.journal { display: flex; flex-direction: column; padding: 12px 14px; }
.journal .tr-head { flex: none; }

.tr-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.tr-head h2 { margin: 0; font-size: calc(15px * var(--fs, 1)); }
/* Each log type (wake time, weight, workout, food, routines) is its own card, like the day view's task cards. */
.tr-block { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.tr-block + .tr-block { margin-top: 8px; }
.tr-head + .tr-block { margin-top: 4px; }
.tr-block h3 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
  font-size: calc(11px * var(--fs, 1));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.tr-block h3 .hint { margin: 0; text-transform: none; letter-spacing: 0; }
.tr-row { display: flex; align-items: center; gap: 6px; }
.tr-row input, .tr-row select {
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  font-size: calc(13px * var(--fs, 1));
}
.tr-row input:focus, .tr-row select:focus { border-color: var(--accent); outline: none; }
.tr-row input[type="text"], .tr-row input[type="number"]:first-child { flex: 1; }
.tr-row .tr-narrow { width: 64px; flex: none; }
.tr-row .secondary-btn { margin: 0; padding: 5px 10px; flex: none; }
.tr-add { margin: 0 0 6px; }
.tr-plus { margin-left: auto; min-width: 20px; height: 20px; color: var(--accent); }
.tr-plus .icon { width: 14px; height: 14px; }
.tr-entry { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: calc(13px * var(--fs, 1)); }
.tr-entry > span:not(.tr-time) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tr-time { color: var(--muted); font-size: calc(12px * var(--fs, 1)); font-variant-numeric: tabular-nums; flex: none; }
.tr-del { min-width: 22px; height: 22px; opacity: 0; }
.tr-entry:hover .tr-del, .tr-del:focus-visible { opacity: 1; }
.tr-del .icon { width: 13px; height: 13px; }
.tr-check { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: calc(13px * var(--fs, 1)); cursor: pointer; }
.tr-check input:checked + span { color: var(--muted); text-decoration: line-through; }

/* settings: trackers */
.tr-setting { display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--fs, 1)); }
.tr-setting select { padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); }
.rt-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.rt-row { display: flex; align-items: center; gap: 4px; }
.account-color-name { margin-left: 6px; font-size: calc(13px * var(--fs, 1)); }
.rt-row .secondary-btn { margin: 0; }
.rt-row .icon-btn .icon { width: 15px; height: 15px; }
.icon.flip { transform: rotate(180deg); }

.tr-entry .tr-time:first-child { width: 64px; } /* line up entries with and without a time/meal */

/* wake time marker on the timeline */
.tl-wake {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px dashed var(--star);
  z-index: 2;
  pointer-events: none;
}
.tl-wake span {
  position: absolute;
  top: -9px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--star);
  color: #fff;
  font-size: calc(10px * var(--fs, 1));
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}
.tl-wake .icon { width: 11px; height: 11px; }
.trackers select[data-tr-field="wake"] {
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  font-size: calc(13px * var(--fs, 1));
}

/* sync */
.row-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.row-actions .secondary-btn { margin: 0; }
#cloud-dialog h2 .icon { color: var(--accent); }

/* ---------- creating tasks and events ---------- */

.qa-kind {
  display: inline-flex;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
}
.qa-kind button { padding: 2px 9px; font-size: calc(12px * var(--fs, 1)); color: var(--muted); }
.qa-kind button + button { border-left: 1px solid var(--border); }
.qa-kind button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.qa-event {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -4px 20px 8px 54px;
  font-size: calc(13px * var(--fs, 1));
}
.qa-event input[type="date"], .qa-event select {
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  font-size: calc(13px * var(--fs, 1));
  max-width: 220px;
}

.popover:has(.create-pop) { width: 270px; }
.create-pop { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.create-pop .text-input, .create-pop select { width: 100%; box-sizing: border-box; }
.create-pop .qa-kind { align-self: flex-start; }
.create-pop select { padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); }
.create-pop .hint { margin: 0; }
.create-pop .row-actions { justify-content: flex-end; margin-top: 0; }
.tl-col, .tl-allday-cell, .month-cell { cursor: cell; }
.tl-col [data-task], .tl-col [data-gcal], .tl-allday-cell [data-task], .tl-allday-cell [data-gcal], .month-cell [data-task], .month-cell [data-gcal] { cursor: default; }
@media (max-width: 640px) {
  .qa-event { margin-left: 16px; }
}
.ev-ends { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: calc(13px * var(--fs, 1)); color: var(--muted); }
.ev-ends select, .ev-ends input { padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); }
.ev-ends input[type="number"] { width: 64px; }
.qa-event select[data-qa="repeat"] { max-width: 200px; }
.gcal .repeat-mark { color: rgba(255, 255, 255, 0.9); }

/* Day view side column: Trackers takes the height it needs (no inner scrolling); the Journal fills
   what's left, and when Trackers is tall the column scrolls so the Journal sits below the fold. */
.day-side {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-right: 2px;
}
.day-side .trackers { flex: none; overflow: visible; }
.day-side .journal { flex: 1 0 260px; }
.journal .tr-head { flex-wrap: wrap; row-gap: 2px; }
.journal .tr-head .hint { white-space: nowrap; }

/* Day view, journal along the bottom: timeline | trackers on top, the journal spanning both below. */
.day-split {
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-rows: minmax(0, 1fr) 210px;
  row-gap: 12px;
  padding-bottom: 12px;
}
.day-split > .journal { grid-column: 1 / -1; min-height: 0; }
.day-side { padding-bottom: 0; }
.day-side .trackers { flex: 1 1 auto; overflow-y: auto; }

/* The timeline row fits about 16 hours (6 AM–10 PM: 16 × 44px plus the all-day row); the journal
   takes the rest of the height, but never less than 210px. */
.day-split {
  grid-template-rows: minmax(0, 770px) minmax(max(220px, 30%), 1fr);
}
a.menu-item { color: inherit; text-decoration: none; }
.ev-swatches { grid-template-columns: repeat(12, 1fr); margin: 4px 0 0; }
.ev-swatches .swatch:first-child { box-shadow: inset 0 0 0 2px var(--panel-bg), 0 0 0 1px var(--border); }
.ev-swatches .swatch:first-child.on { box-shadow: inset 0 0 0 2px var(--panel-bg), 0 0 0 2px var(--text); }
.editor select[data-ev-field="endPick"] { flex: 1; min-width: 0; }
.editor .due-row:has([data-ev-field="endPick"]) input[type="date"] { flex: 0 0 132px; }

/* ---------- bulk editing ---------- */

.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0 28px 6px;
  padding: 6px 10px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent-soft);
  position: sticky;
  top: 0;
  z-index: 5;
}
.bulk-bar[hidden] { display: none; }
.bulk-count { font-weight: 600; min-width: 84px; }
.bulk-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 2px; }
.bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--input-bg);
}
.bulk-btn .icon { width: 14px; height: 14px; }
.bulk-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.bulk-btn.danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
.bulk-btn:disabled { opacity: 0.45; }

/* The square pick box on rows (and "select all" in the bar). */
.pick {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 5px;
  border: 1.6px solid var(--faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: transparent;
  background: var(--input-bg);
}
.pick .icon { width: 14px; height: 14px; }
.pick .icon circle { display: none; }
.pick.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pick.some { border-color: var(--accent); background: linear-gradient(var(--accent), var(--accent)) center / 8px 2px no-repeat, var(--input-bg); }
.task.picked { background: var(--accent-soft); }
.cal-chip.picked { box-shadow: 0 0 0 1.5px var(--accent); }
.group > .cal-chip { padding: 6px 10px; font-size: calc(14px * var(--fs, 1)); margin-bottom: 4px; }
.cal-chip > .pick { flex: none; }
.task.picked:hover { background: var(--selected); }

.popover .menu-item .hint { display: inline; margin: 0 0 0 6px; }
.popover .bulk-lists { max-height: 340px; overflow-y: auto; min-width: 220px; }
.popover .bulk-lists > .hint { margin: 8px 8px 2px; font-weight: 600; }
.popover .bulk-lists .menu-item { display: flex; align-items: center; gap: 8px; }
.bulk-pick-date, .bulk-time { display: flex; gap: 6px; align-items: center; padding: 6px 4px; }
.bulk-pick-date input { width: 150px; }
.bulk-time select { height: 30px; }
.popover > .hint { margin: 0 4px 6px; }

/* 7-day workout streak in the Workout tracker heading */
.tr-block h3 .streak { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; }
.streak b { font-size: calc(11px * var(--fs, 1)); font-weight: 700; padding: 1px 7px; border-radius: 999px; color: #fff; background: var(--streak-color); }
.streak-dots { display: inline-flex; gap: 3px; }
.streak-dots i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--streak-color); opacity: 0.55; }
.streak-dots i.on { background: var(--streak-color); opacity: 1; }
.streak-good { --streak-color: var(--streak-good); }
.streak-ok { --streak-color: var(--streak-ok); }
.streak-low { --streak-color: var(--danger); }

/* Week view: workouts and streak above the all-day row */
.tl-workout-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 4px 4px 5px;
  border-left: 1px solid var(--border);
  border-radius: 0;
  text-align: left;
}
.tl-workout-cell:hover { background: var(--hover); }
.tl-workout-cell .streak { display: inline-flex; flex: none; }
.tl-weight { min-height: 15px; font-size: calc(11px * var(--fs, 1)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tl-workout-line { display: flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; }
.tl-workout {
  min-width: 0;
  font-size: calc(11px * var(--fs, 1));
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tl-workouts { border-bottom: 1px solid var(--border); }
.tl-workouts .tl-gutter-label { line-height: 1.25; }

/* workout types */
.wo b { font-weight: 600; }
.tr-entry > .wo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tr-add[data-tr-add="workouts"] select { flex: none; max-width: 110px; }
.tr-add[data-tr-add="workouts"] input { flex: 1; }
.wt-color { width: 30px; height: 28px; padding: 0 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); cursor: pointer; flex: none; }
.tl-workout .wo { font-weight: 700; }

/* ---------- week summary cards: routines and charts (under the S view's days) ---------- */

.week-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 0 24px;
}
.ws-card {
  min-width: 0;
  padding: 10px 12px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.ws-title { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: calc(12px * var(--fs, 1)); font-weight: 700; }
.ws-unit { font-weight: 400; color: var(--muted); }
.ws-empty { margin: 30px 0; text-align: center; justify-content: center; }

.ws-rt-grid {
  display: grid;
  grid-template-columns: minmax(60px, 1fr) repeat(7, 22px);
  gap: 6px 4px;
  align-items: center;
  font-size: calc(12px * var(--fs, 1));
}
.ws-rt-grid > span:not(.ws-rt-name) { text-align: center; font-size: calc(11px * var(--fs, 1)); color: var(--muted); padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.ws-rt-grid > span:first-child { border-bottom: 1px solid var(--border); align-self: stretch; }
.ws-rt-grid > span.today { color: var(--accent); }
.ws-rt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-rt-check {
  width: 14px;
  height: 14px;
  justify-self: center;
  border-radius: 50%;
  border: 1.5px solid var(--faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.ws-rt-check:hover { border-color: var(--accent); }
.ws-rt-check.on { background: var(--accent); border-color: var(--accent); }

.ch { display: block; width: 100%; height: auto; overflow: visible; }
.ch-grid { stroke: var(--border); stroke-width: 1; }
.ch-vgrid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; }
.ch-axis { stroke: var(--faint); stroke-width: 1; }
.ch-y { font-size: calc(12px * var(--fs, 1)); fill: var(--muted); text-anchor: end; }
.ch-x { font-size: calc(12px * var(--fs, 1)); fill: var(--muted); text-anchor: middle; }
.ch-x.today { fill: var(--accent); }
.ch-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-dot { fill: var(--accent); }
@media (max-width: 1100px) {
  .week-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .week-summary { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- week summary view (S): a column per day, with the week's summary underneath ---------- */

.sv { min-width: max(620px, calc(100% * var(--zoom, 1))); }
/* A narrow icon column for the row headings, then the 7 days (all the same width). */
.sv-grid { --sv-gutter: 32px; display: grid; grid-template-columns: var(--sv-gutter) repeat(7, minmax(0, 1fr)); }
.sv-head { position: sticky; top: 0; z-index: 3; background: var(--bg); border-bottom: 1px solid var(--border); border-radius: 0; }
.sv-corner { left: 0; z-index: 4; } /* the corner stays put in both directions */
.sv-label {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 6px;
  border-top: 1px solid var(--border);
}
.sv-label .icon { width: 16px; height: 16px; color: var(--muted); }
/* An account row: its badge, with its name running down the column (clipped to the row). */
.sv-account { min-height: 76px; }
.sv-account .icon { color: var(--acct, var(--accent)); }
.sv-account-name {
  position: absolute;
  top: 32px;
  bottom: 6px;
  left: calc(50% - 0.65em);
  width: 1.3em;
  writing-mode: vertical-rl;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(11px * var(--fs, 1));
  font-weight: 600;
  color: var(--muted);
}
.sv-cell {
  display: block;
  min-width: 0;
  min-height: 36px;
  padding: 4px 3px;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: 0;
  text-align: left;
  cursor: cell;
}
.sv-cell:not(.sv-log) { max-height: calc(var(--cap-rows) * 40px * var(--fs, 1) + 12px); }
.sv-cell.today { background-color: color-mix(in srgb, var(--accent) 4%, transparent); }
.sv-cell.drop-target { background: var(--accent-soft); }
.sv-cell [data-task], .sv-cell [data-gcal] { cursor: default; }
/* Narrow columns: a title wraps under the time rather than being squeezed beside it. */
.sv-cell .cal-chip { align-items: flex-start; flex-wrap: wrap; }
.sv-cell .cal-chip .chip-title { flex: 1 1 5.5em; min-width: 5.5em; white-space: normal; overflow-wrap: anywhere; }
.sv-cell .cal-chip :is(.mini-check, .ghost-mark, .gcal-icon, .repeat-mark) { margin-top: 2px; }
/* Tasks as the day view's list cards, tightened for a narrow column. */
.sv-cell .day-card { border: 0; background: none; } /* a list in a day's cell has no card of its own */
.sv-cell .day-card + .day-card { margin-top: 6px; }
.sv-cell .day-card-head { padding: 5px 6px 4px; font-size: calc(12px * var(--fs, 1)); cursor: default; }
.sv-cell .day-card-body { padding: 0 4px 5px; gap: 2px; }
.sv-cell .day-card-body .cal-chip { padding: 3px 4px; font-size: calc(12px * var(--fs, 1)); }
.sv-cell .day-card-body .cal-chip .chip-title { flex-basis: 4em; min-width: 4em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.sv-log { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: calc(11px * var(--fs, 1)); color: var(--muted); }
.sv-log:hover { background: var(--hover); }
.sv-log > span { max-width: 100%; overflow-wrap: anywhere; line-height: 1.3; }
.sv-log .wo { font-weight: 700; }

/* ---------- day view: tasks due that day, one card per list (between timeline and Trackers) ---------- */

.day-split { grid-template-columns: minmax(0, 1fr) minmax(480px, 1fr) 320px; }
.day-split > .journal { grid-column: 1 / -1; }
.day-lists { display: flex; flex-direction: column; min-height: 0; padding-top: 6px; }
.day-lists-head { display: flex; align-items: center; gap: 8px; padding: 0 2px 8px 4px; font-size: calc(15px * var(--fs, 1)); font-weight: 700; }
.day-lists-head .icon-btn .icon { width: 15px; height: 15px; }
.day-cards { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; padding: 0 2px 12px; }
/* Day view: accounts side by side, scrolling sideways when they don't fit. */
.day-accounts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
/* Side by side while every account gets at least 230px; otherwise one per line (no sideways scrolling). The
   basis is negative (so 0, and the cards share the row) when the row is wider than --need, the width all the
   accounts need, and huge (so each card wraps onto its own line) when it isn't. */
.day-accounts > .day-account { flex: 1 1 calc((var(--need, 0px) - 100%) * 999); min-width: 0; }
.day-accounts > .day-account.drop-before::before, .day-accounts > .day-account.drop-after::after { top: 0; bottom: 0; width: 3px; height: auto; left: auto; right: auto; }
.day-accounts > .day-account.drop-before::before { left: -7px; }
.day-accounts > .day-account.drop-after::after { right: -7px; }
.day-accounts.stacked > .day-account.drop-before::before, .day-accounts.stacked > .day-account.drop-after::after { left: 0; right: 0; width: auto; height: 3px; }
.day-accounts.stacked > .day-account.drop-before::before { top: -7px; bottom: auto; }
.day-accounts.stacked > .day-account.drop-after::after { top: auto; bottom: -7px; }
.day-split.lists-collapsed { grid-template-columns: minmax(0, 1fr) 34px 320px; }
.day-lists-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 34px;
  padding: 10px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-bg);
  color: var(--muted);
  font-size: calc(12px * var(--fs, 1));
  font-weight: 600;
}
.day-lists-strip:hover { color: var(--text); border-color: var(--accent); }
.day-lists-strip span { writing-mode: vertical-rl; letter-spacing: 0.04em; }
.day-lists-strip b { min-width: 18px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: #fff; font-size: calc(11px * var(--fs, 1)); line-height: 18px; text-align: center; }
.day-lists-strip .icon { width: 15px; height: 15px; }
.day-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-bg);
  position: relative;
}
.day-card-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px 6px;
  font-size: calc(13px * var(--fs, 1));
  font-weight: 600;
  cursor: grab;
}
.day-card-head:active { cursor: grabbing; }
.day-card-head .dot { background: var(--c); }
.day-card-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-card-count { font-size: calc(11px * var(--fs, 1)); font-weight: 500; color: var(--muted); }
.day-card-body { display: flex; flex-direction: column; gap: 3px; padding: 0 6px 8px; }
.day-card-body .cal-chip { font-size: calc(13px * var(--fs, 1)); padding: 4px 6px; }
.day-card.dragging { opacity: 0.4; }

/* Inspiration: the day's quote, at the bottom of the Tasks column */
.inspiration {
  flex: none;
  margin: auto 2px 14px; /* pinned to the bottom of the column, whatever the tasks above it do */
  padding: 12px 14px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-soft), var(--panel-bg) 70%);
}
.insp-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; color: var(--accent); }
.insp-head .icon { width: 16px; height: 16px; }
.insp-head h2 { margin: 0; font-size: calc(13px * var(--fs, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.insp-quote { margin: 0; font-size: calc(17px * var(--fs, 1)); line-height: 1.4; font-weight: 600; color: var(--text); text-wrap: pretty; }
.insp-by { display: flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--muted); font-size: calc(13px * var(--fs, 1)); }
.insp-author { font-weight: 600; }
.insp-info { min-width: 22px; height: 22px; padding: 0; color: var(--muted); }
.insp-info:hover { color: var(--accent); }
.insp-info .icon { width: 16px; height: 16px; }
.insp-credit { margin-top: 8px; font-size: calc(11px * var(--fs, 1)); color: var(--faint); }
.insp-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.insp-credit a:hover { color: var(--accent); }
.insp-note { margin: 2px 0 4px; font-size: calc(13px * var(--fs, 1)); color: var(--muted); }
.insp-pop { display: flex; flex-direction: column; gap: 4px; max-width: 320px; font-size: calc(13px * var(--fs, 1)); }
.insp-pop strong { font-size: calc(14px * var(--fs, 1)); }
.insp-pop-desc { color: var(--muted); }
.insp-pop p { margin: 4px 0 0; line-height: 1.45; }
.insp-pop .link-btn { margin-top: 6px; align-self: flex-start; }
.day-card.drop-before::before, .day-card.drop-after::after {
  content: '';
  position: absolute;
  background: var(--accent);
  border-radius: 2px;
}
/* The insertion bar above or below a card. */
.day-card.drop-before::before { left: 0; right: 0; top: -7px; height: 3px; }
.day-card.drop-after::after { left: 0; right: 0; bottom: -7px; height: 3px; }
.day-lists-empty { grid-column: 1 / -1; color: var(--faint); font-size: calc(13px * var(--fs, 1)); text-align: center; margin: 40px 0; }

/* ---------- date picker (Monday-first; replaces the browser's for every date field) ---------- */

input[type="date"] { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
.dp {
  position: fixed;
  z-index: 80;
  width: 252px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-bg);
  box-shadow: var(--shadow);
  font-size: calc(12px * var(--fs, 1));
  color: var(--text);
}
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-weight: 600; font-size: calc(13px * var(--fs, 1)); }
.dp-nav { width: 26px; height: 26px; border-radius: 6px; font-size: calc(17px * var(--fs, 1)); line-height: 1; color: var(--muted); }
.dp-nav:hover { background: var(--hover); color: var(--text); }
.dp-grid { display: grid; grid-template-columns: 24px repeat(7, 1fr); gap: 1px; }
.dp-wd { text-align: center; font-size: calc(10px * var(--fs, 1)); color: var(--faint); padding: 2px 0 4px; }
.dp-wk { display: flex; align-items: center; justify-content: center; font-size: calc(10px * var(--fs, 1)); color: var(--faint); }
.dp-day { height: 27px; border-radius: 6px; font-size: calc(12px * var(--fs, 1)); }
.dp-day:hover:not(:disabled) { background: var(--hover); }
.dp-day.other { color: var(--faint); }
.dp-day.today { color: var(--accent); font-weight: 700; }
.dp-day.on { background: var(--accent); color: #fff; font-weight: 600; }
.dp-day:disabled { opacity: 0.3; cursor: not-allowed; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.dp-link { color: var(--accent); font-size: calc(12px * var(--fs, 1)); padding: 2px 4px; border-radius: 4px; }
.dp-link:hover:not(:disabled) { background: var(--hover); }
.dp-link:disabled { opacity: 0.4; }

/* The whole left panel collapses (wide windows); the ☰ in the title row brings it back. */
#menu-btn { font-size: calc(16px * var(--fs, 1)); margin-left: -8px; }
@media (min-width: 641px) {
  .app > .sidebar { grid-column: 1; }
  .app > .main { grid-column: 2; }
  .app > .editor { grid-column: 3; }
}

/* Zoom (magnifiers) and text size (A− / A+), after the view switch */
.view-tools { display: inline-flex; align-items: center; flex: none; margin-left: 8px; }
.view-tools[hidden] { display: none; }
.view-tools .icon-btn .icon { width: 20px; height: 20px; }
.view-tools .icon-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.view-tools-sep { width: 1px; height: 22px; margin: 0 8px; background: var(--border); }

/* Day | Week | Month switch, right of the calendar title */
.cal-mode {
  display: inline-flex;
  flex: none;
  margin-left: 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  background: var(--input-bg);
}
.cal-mode button { min-width: 32px; height: 30px; padding: 0 10px; font-size: calc(13px * var(--fs, 1)); font-weight: 600; color: var(--muted); }
.cal-mode button + button { border-left: 1px solid var(--border); }
.cal-mode button:hover:not(.on) { background: var(--hover); color: var(--text); }
.cal-mode button.on { background: var(--accent-soft); color: var(--accent); }
.cal-mode[hidden], .cal-mode button[hidden] { display: none; }

/* Due filter: custom date range */
.filter-range { display: inline-flex; align-items: center; gap: 4px; margin-left: -6px; color: var(--muted); font-size: calc(13px * var(--fs, 1)); }
.filter-range input {
  width: 132px;
  padding: 3px 6px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  font: inherit;
  font-size: calc(13px * var(--fs, 1));
}
.menu-sep { height: 1px; margin: 4px 2px; background: var(--border); }

/* Day view: collapsible journal */
.journal-toggle { display: inline-flex; align-items: center; gap: 4px; margin-left: -4px; padding: 2px 4px; border-radius: 6px; color: var(--text); }
.journal-toggle:hover { background: var(--hover); }
.journal-toggle h2 { margin: 0; font-size: calc(15px * var(--fs, 1)); }
.journal-toggle .icon { width: 14px; height: 14px; color: var(--muted); transition: transform 0.15s ease; }
.journal-toggle .icon.open { transform: rotate(90deg); }
.journal-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12px * var(--fs, 1)); color: var(--muted); }
.day-split { grid-template-rows: minmax(0, 770px) 340px minmax(max(220px, 30%), 1fr); }
.day-split.journal-collapsed { grid-template-rows: minmax(0, 1fr) auto; }
.day-split.journal-collapsed > .journal { padding-top: 8px; padding-bottom: 8px; }
.day-split.journal-collapsed > .journal .tr-head { margin-bottom: 0; }

/* Settings: Start view (Day | Week) */
.segmented.start-view { width: 180px; margin-top: 6px; }
.segmented.start-view button { padding: 5px 10px; border: 1px solid var(--border); background: var(--input-bg); font-size: calc(13px * var(--fs, 1)); }

/* Day view Lists column: an account card wrapping its list cards */
.day-account {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.day-account-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 4px;
  font-size: calc(12px * var(--fs, 1));
  font-weight: 700;
  cursor: grab;
}
.day-account-head:active { cursor: grabbing; }
.day-account-head .icon { width: 15px; height: 15px; color: var(--acct, var(--accent)); flex: none; }
.day-account-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-account-body { display: flex; flex-direction: column; gap: 8px; }
/* An account is a bordered card; the lists inside it have no card of their own. */
.day-account .day-card { border: 0; background: none; }
.g-badge {
  width: 16px; height: 16px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--acct, var(--accent));
  color: #fff;
  font-size: calc(10px * var(--fs, 1));
  font-weight: 800;
}
.day-account.dragging { opacity: 0.4; }
.day-account.drop-before::before, .day-account.drop-after::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.day-account.drop-before::before { top: -7px; }
.day-account.drop-after::after { bottom: -7px; }
.day-account-note { margin: 2px 4px 2px; padding: 8px 10px; border-radius: 8px; background: var(--bg); color: var(--muted); font-size: calc(13px * var(--fs, 1)); text-align: center; }
.day-account-note.done { color: var(--text); font-weight: 600; }

/* ---------- journal board: free-placed text blocks and images ---------- */

.journal .tr-head { gap: 8px; }
.jb-add { margin: 0; padding: 2px 9px; font-size: calc(12px * var(--fs, 1)); }
.filter-btn.icon-only.jb-add { height: 28px; color: var(--accent); } /* the add-a-block and delete-all buttons are blue */
.filter-btn.jb-add:disabled { opacity: 0.4; cursor: default; }
.jb {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin-top: 8px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.jb.jb-drop { outline: 2px dashed var(--accent); outline-offset: -4px; }
.jb-canvas {
  position: relative;
  min-width: 100%;
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 16px 16px;
}
.jb-empty {
  position: absolute;
  inset: 0;
  margin: auto;
  height: fit-content;
  max-width: 340px;
  text-align: center;
  color: var(--faint);
  font-size: calc(13px * var(--fs, 1));
  pointer-events: none;
}
.jb-block {
  position: absolute;
  border-radius: 8px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.jb-block:hover, .jb-block:focus-within { border-color: var(--accent); }
.jb-block.moving, .jb-block.resizing { box-shadow: var(--shadow); border-color: var(--accent); z-index: 2; }
.jb-block.moving { cursor: grabbing; }
.jb-textarea {
  width: 100%;
  height: 100%;
  padding: 16px 10px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: calc(14px * var(--fs, 1));
  line-height: 1.5;
  resize: none;
  outline: none;
}
.jb-image { background: transparent; border-color: transparent; box-shadow: none; }
.jb-imgwrap { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 6px; }
.jb-img { display: block; width: 100%; height: 100%; object-fit: contain; cursor: grab; user-select: none; }
.jb-paper { background: #fff; border: 1px solid var(--border); }
.jb-grip, .jb-del, .jb-crop, .jb-resize { position: absolute; opacity: 0; transition: opacity 0.12s; z-index: 1; }
.jb-block:hover :is(.jb-grip, .jb-del, .jb-crop, .jb-resize), .jb-block:focus-within :is(.jb-grip, .jb-del, .jb-crop, .jb-resize),
.jb-block.moving :is(.jb-grip, .jb-resize), .jb-block.resizing :is(.jb-grip, .jb-resize) { opacity: 1; }
.jb-grip {
  top: -1px; left: 50%;
  transform: translateX(-50%);
  padding: 0 10px;
  border-radius: 0 0 6px 6px;
  background: var(--accent);
  color: #fff;
  font-size: calc(10px * var(--fs, 1));
  letter-spacing: -1px;
  line-height: 14px;
  cursor: grab;
  touch-action: none;
}
.jb-del {
  top: -9px; right: -9px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  font-size: calc(13px * var(--fs, 1));
  line-height: 20px;
  text-align: center;
}
.jb-resize {
  right: -5px; bottom: -5px;
  width: 14px; height: 14px;
  border-radius: 3px;
  border: 2px solid var(--accent);
  background: var(--bg);
  cursor: nwse-resize;
  touch-action: none;
}

/* Day view, journal open: it takes the whole day view; closed, it's a bar along the bottom. */
.day-split:not(.journal-collapsed), .day-split.trackers-collapsed:not(.journal-collapsed), .day-split.lists-collapsed:not(.journal-collapsed) { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.day-split:not(.journal-collapsed) > :is(.day-timeline, .day-lists, .day-side) { display: none; }
.day-split:not(.journal-collapsed) > .journal { grid-column: 1; grid-row: 1; }
@media (max-width: 1100px) {
  .day-split:not(.journal-collapsed) { grid-template-rows: minmax(0, 1fr); }
}

.layout-option .icon { display: inline-block; width: 15px; height: 15px; margin-right: 8px; vertical-align: -3px; } /* the check, or the space where it would be, so the names line up */
.layout-check { color: var(--streak-good); } /* the current layout in the day view layout menu */

/* Show/hide completed tasks, next to Filter */
.filter-btn.icon-only { padding: 0 8px; }
/* The header's one-icon buttons (and the + button) are all one size, whatever the icon's own width. */
.filter-btn.icon-only, .main-header .new-btn { width: 34px; height: 32px; padding: 0; justify-content: center; align-items: center; display: inline-flex; }
.filter-btn.icon-only:has(.filter-count) { width: auto; padding: 0 8px; } /* the Filter button with its count is as wide as it needs */
.done-toggle { position: relative; display: inline-flex; }
.done-toggle .icon { width: 15px; height: 15px; }
.done-toggle:not(.off) { color: var(--accent); }

/* Tasks cards (day view): title first, time right-aligned at the end; a long title is cut short so the time always shows. */
.day-card-body .cal-chip .chip-title { flex: 1 1 auto; min-width: 0; }
.chip-time-end { margin-left: auto; padding-left: 6px; flex: none; font-size: calc(12px * var(--fs, 1)); }

/* ---------- left rail (Calendar · Tasks · Lists · Journal) and the Lists section's panel ---------- */

.app { grid-template-columns: auto minmax(0, 1fr) auto; }
.sidebar { flex-direction: row; padding: 0; overflow: hidden; }
.rail {
  width: 236px;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.15s ease;
}
.rail-toggle {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 0 10px 2px;
  border-radius: 8px;
  color: var(--muted);
  flex: none;
}
.rail-toggle:hover { background: var(--hover); color: var(--text); }
.rail-toggle .icon { width: 20px; height: 20px; }
.rail-nav { display: flex; flex-direction: column; gap: 2px; }
.rail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: calc(15px * var(--fs, 1));
  color: var(--text);
  text-align: left;
  white-space: nowrap;
}
.rail-item:hover { background: var(--hover); }
.rail-item.current { background: var(--accent-soft); color: var(--accent); }
.rail-item .icon { width: 20px; height: 20px; flex: none; }
.rail .mini-cal { margin: 4px 0 8px; padding: 2px 0 10px; }
.rail-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding: 8px 0 10px; border-top: 1px solid var(--border); }
.rail-bottom #save-status { padding: 6px 10px 0; font-size: calc(11px * var(--fs, 1)); color: var(--faint); text-align: left; margin: 0; }
.rail-item:disabled { opacity: 0.5; }
.about-pop { display: flex; flex-direction: column; gap: 2px; font-size: calc(13px * var(--fs, 1)); }
.about-pop strong { font-size: calc(14px * var(--fs, 1)); }
.about-pop span { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Collapsed: icons only. */
body.sidebar-collapsed .rail { width: 58px; padding-left: 8px; padding-right: 8px; }
body.sidebar-collapsed :is(.rail-label, .rail .mini-cal, .rail-bottom #save-status) { display: none; }
body.sidebar-collapsed .rail-item { justify-content: center; padding: 10px 0; }

/* Lists section: the lists, beside the chosen list's tasks. */
.lists-pane {
  display: none;
  flex-direction: column;
  width: 284px;
  padding: 14px 10px 12px;
  border-left: 1px solid var(--border);
  background: var(--bg);
  overflow-y: auto;
}
body[data-section="lists"] .lists-pane { display: flex; }
.lists-pane-title { padding: 4px 8px 12px; font-size: calc(18px * var(--fs, 1)); font-weight: 700; }

/* Logs page: one day's logs, full height, in a column that reads well. */
.logs-page { height: 100%; display: flex; padding-bottom: 14px; }
.logs-page .trackers { flex: 1; max-width: 640px; min-height: 0; overflow-y: auto; }

/* Journal page: one day's journal, full height. */
body.page-view .task-list { overflow: hidden; }
.journal-page { height: 100%; display: flex; padding-bottom: 14px; }
.journal-page .journal { flex: 1; min-height: 0; }
.journal-page-title { margin: 0; font-size: calc(15px * var(--fs, 1)); }

@media (max-width: 640px) {
  .sidebar { width: auto; }
  body.sidebar-collapsed .rail { width: 236px; }
  body.sidebar-collapsed :is(.rail-label, .rail .mini-cal) { display: revert; }
  .lists-pane { width: 240px; }
}

/* Title row with less room (e.g. beside the lists panel): the view's name keeps its width; the add box and buttons give way. */
.main-header h1 { flex: 0 0 auto; max-width: 45%; }
.main-header .filter-btn { white-space: nowrap; flex: none; }

/* ---------- Tasks section: a column per account, list cards with their tasks ---------- */

.tasks-board {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: stretch; /* every account's card as tall as the tallest, with tasks in it or not */
  padding: 4px 0 20px;
}
/* One equal column per account while they all fit side by side (--need: the width they need together);
   otherwise a single stack, one account per line, instead of scrolling sideways. As in .day-accounts, the
   basis is negative (so 0) when there's room and huge (so each column wraps) when there isn't. */
.tasks-column { flex: 1 1 calc((var(--need, 0px) - 100%) * 999); min-width: 0; }
.tasks-column .day-account-head { font-size: calc(13px * var(--fs, 1)); padding: 4px 6px 6px; }
.tasks-column .day-account-note { padding: 28px 10px; background: none; color: var(--faint); }
.tasks-column .day-account-note.done { color: var(--muted); font-weight: 500; }
.tasks-card-body { padding: 0 4px 6px; gap: 0; }
.tasks-card-body .task { padding: 6px 6px; gap: 8px; border-radius: 6px; }
.tasks-card-body .task .task-title { font-size: calc(14px * var(--fs, 1)); }
.tasks-card-body .task-meta { font-size: calc(11.5px * var(--fs, 1)); }
.tasks-card-empty { margin: 2px 8px 8px; color: var(--faint); font-size: calc(12px * var(--fs, 1)); }

/* A list card under a dragged task (Tasks view, day view's Tasks column). */
.day-card.drop-target { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--accent-soft); }

/* ---------- Goals ---------- */

body.page-view .task-list:has(.goals-bar) { overflow-y: auto; }
.goals-bar { display: flex; align-items: center; gap: 10px; padding: 2px 0 14px; position: sticky; top: 0; background: var(--bg); z-index: 3; }
.goals-bar .secondary-btn { margin: 0; }
.segmented.goals-mode { width: 200px; }
.segmented.goals-mode button, .segmented.goal-type-pick button { padding: 5px 10px; border: 1px solid var(--border); background: var(--input-bg); font-size: calc(13px * var(--fs, 1)); }
/* Goals by category: two columns, one panel per category (up to six, so three rows) holding its goal cards. */
.goal-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; padding-bottom: 24px; }
.goal-cat { min-width: 0; padding: 12px 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--text) 3.5%, var(--bg)); }
.goal-cat:only-child { grid-column: 1 / -1; }
.goal-cat-head { display: flex; align-items: center; gap: 10px; margin: -12px -12px 12px; padding: 7px 8px 7px 14px; border-bottom: 1px solid var(--border); border-radius: 14px 14px 0 0; background: color-mix(in srgb, var(--text) 6%, var(--bg)); font-size: calc(14px * var(--fs, 1)); font-weight: 700; }
.goal-cat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-cat-count { flex: none; font-size: calc(12px * var(--fs, 1)); font-weight: 600; color: var(--faint); }
.goal-cat-head .icon-btn { margin-left: auto; flex: none; }
.goal-cat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; align-items: start; }
.goal-cat-none { margin: 0; }
@media (max-width: 800px) { .goal-categories { grid-template-columns: minmax(0, 1fr); } }
.goal-category { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); font: inherit; font-size: calc(13px * var(--fs, 1)); }
.cat-rows { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.cat-row { display: flex; align-items: center; gap: 6px; }
.cat-row .text-input { flex: 1; min-width: 0; }
.goal-card {
  display: flex;
  gap: 12px;
  padding: 14px 14px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg); /* plain page background, not the columns' grey/blue tint behind it */
}
.goal-card .check { margin-top: 2px; }
.goal-card.done { opacity: 0.75; }
.goal-card.done .goal-title { text-decoration: line-through; color: var(--muted); }
.goal-main { flex: 1; min-width: 0; cursor: pointer; }
.goal-title { font-size: calc(15px * var(--fs, 1)); font-weight: 600; overflow-wrap: anywhere; }
.goal-period { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: calc(12px * var(--fs, 1)); color: var(--muted); }
.goal-period .icon { width: 13px; height: 13px; }
.goal-type { padding: 0 7px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: calc(11px * var(--fs, 1)); line-height: 17px; }
.goal-progress { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: calc(12px * var(--fs, 1)); color: var(--muted); }
.goal-progress-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.goal-progress-bar i { display: block; height: 100%; background: var(--streak-good); border-radius: 3px; }
.goal-tasks { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.goal-task { display: flex; align-items: center; gap: 7px; padding: 3px 6px; border-radius: 6px; font-size: calc(13px * var(--fs, 1)); text-align: left; min-width: 0; }
.goal-task-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-task-due { margin-left: auto; padding-left: 6px; flex: none; color: var(--muted); font-size: calc(12px * var(--fs, 1)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.goal-task-due.late { color: var(--danger); }
.goal-task:hover { background: var(--hover); }
/* A linked task's status is the goal's own check circle, smaller and not clickable (the row opens the task). */
.goal-task .check { width: 16px; height: 16px; border-width: 1.5px; }
.goal-task .check .icon { width: 14px; height: 14px; }
.goal-task .check:not(.checked):hover { color: transparent; }
.goal-task.done .goal-task-title { text-decoration: line-through; color: var(--faint); }
.goal-task.done .goal-task-due { color: var(--faint); }
.goals-empty { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 80px auto; max-width: 380px; color: var(--muted); }
.goals-empty .icon { width: 44px; height: 44px; color: var(--faint); }
.goals-empty h2 { margin: 10px 0 4px; color: var(--text); }


/* Goal dialog */
.goal-dialog { width: min(540px, calc(100vw - 32px)); }
.goal-form h2 { display: flex; align-items: center; gap: 8px; }
.goal-desc { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); font: inherit; font-size: calc(15px * var(--fs, 1)); resize: vertical; }
.goal-desc:focus { border-color: var(--accent); outline: none; }
.goal-form .lbl { margin: 14px 0 6px; display: flex; gap: 8px; align-items: baseline; }
.segmented.goal-type-pick { width: 100%; }
.goal-period-fields { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.goal-period-fields input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); font: inherit; font-size: calc(13px * var(--fs, 1)); }
.goal-period-fields input[type="number"] { width: 100px; }
.goal-period-label { margin-top: 6px; }
.goal-task-search { width: 100%; }
.goal-task-picker { max-height: 220px; overflow-y: auto; margin-top: 6px; border: 1px solid var(--border); border-radius: 8px; padding: 4px; }
.goal-pick { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: calc(13px * var(--fs, 1)); cursor: pointer; }
.goal-pick:hover { background: var(--hover); }
.goal-pick[hidden] { display: none; }
.goal-pick-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-pick .hint { margin: 0; white-space: nowrap; }
.goal-dialog .dialog-actions .spacer { flex: 1; }
.goal-delete { color: var(--danger); }

/* Goal dialog: link tasks by picking a list, then its tasks; linked ones show as in a goal card (.goal-task rows), with an unlink ×. */
.goal-linked { display: flex; flex-direction: column; gap: 2px; }
.goal-linked:empty { display: none; }
.goal-linked .goal-task:hover { background: none; } /* not clickable here, unlike the card's rows */
.goal-unlink { flex: none; width: 18px; height: 18px; border-radius: 50%; color: var(--muted); line-height: 1; }
.goal-unlink:hover { background: var(--hover); color: var(--danger); }
.goal-link-btn { margin-top: 8px; }
.goal-link-picker[hidden] { display: none; }
.goal-link-row { display: flex; gap: 8px; margin-top: 8px; }
.goal-list-pick { flex: 0 0 46%; min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); font: inherit; font-size: calc(13px * var(--fs, 1)); }
.goal-link-row .goal-task-search { flex: 1; width: auto; min-width: 0; }
.goal-new-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.goal-new-row .goal-new-task { flex: 1; width: auto; min-width: 0; }
.goal-new-due { flex: none; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); font: inherit; font-size: calc(13px * var(--fs, 1)); }
.goal-new-row .secondary-btn { flex: none; margin: 0; }
.goal-new-tag { flex: none; padding: 0 6px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: calc(11px * var(--fs, 1)); line-height: 16px; }
.goal-pick-title.done { text-decoration: line-through; color: var(--faint); }
.goal-pick-none { margin: 10px; }

/* Goals timeline: a scrolling time axis; each goal a card below it with an arrow up to its due date. */
.gtl-scroll { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); scrollbar-width: thin; }
.gtl { position: relative; min-width: 100%; }
.gtl-axis { position: absolute; left: 0; right: 0; top: 0; border-bottom: 2px solid var(--border); background: var(--panel-bg); }
.gtl-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--border); }
.gtl-tick span { position: absolute; top: 10px; left: 6px; font-size: calc(11px * var(--fs, 1)); font-weight: 600; color: var(--muted); text-transform: uppercase; white-space: nowrap; }
.gtl-tick.year { border-left-color: var(--faint); }
.gtl-tick.year span { color: var(--text); }
.gtl-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #e5484d; z-index: 1; pointer-events: none; }
.gtl-today span { position: absolute; top: 30px; left: 5px; font-size: calc(10px * var(--fs, 1)); font-weight: 700; color: #e5484d; text-transform: uppercase; }
/* The period, as a band on the axis. */
.gtl-band { position: absolute; top: 44px; height: 6px; border-radius: 3px; background: var(--accent); opacity: 0.55; z-index: 2; }
/* The arrow from the card up to the axis (pointing at the due date). */
.gtl-arrow { position: absolute; width: 2px; margin-left: -1px; background: var(--accent); z-index: 2; }
.gtl-arrow::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: inherit;
  border-bottom: 8px solid var(--arrow, var(--accent));
  border-top: 0;
}
.gtl-card { position: absolute; width: 230px; height: 96px; padding: 10px 12px; overflow: hidden; z-index: 3; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
.gtl-card .goal-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: calc(14px * var(--fs, 1)); line-height: 1.3; }
.gtl-card .goal-progress { margin-top: 6px; }
.gtl-card { border-top: 3px solid var(--accent); }
/* Colors by state: current (blue), upcoming (light blue), past (grey), done (green). */
.gtl-upcoming { --arrow: color-mix(in srgb, var(--accent) 55%, transparent); }
.gtl-past { --arrow: var(--faint); }
.gtl-done { --arrow: var(--streak-good); }
.gtl-arrow.gtl-upcoming, .gtl-band.gtl-upcoming { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.gtl-arrow.gtl-past, .gtl-band.gtl-past { background: var(--faint); }
.gtl-arrow.gtl-done, .gtl-band.gtl-done { background: var(--streak-good); }
.gtl-card.gtl-upcoming { border-top-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.gtl-card.gtl-past { border-top-color: var(--faint); }
.gtl-card.gtl-done { border-top-color: var(--streak-good); }
.gtl-none { position: absolute; top: 90px; margin: 0; color: var(--faint); font-size: calc(13px * var(--fs, 1)); }
.gtl-band { opacity: 0; transition: opacity 0.12s; }
.gtl-band.show { opacity: 0.8; }
.gtl-card.done { opacity: 1; background: var(--bg); }
.gtl-card.done .goal-period, .gtl-card.done .goal-progress { opacity: 0.6; }

/* Day view: Goals bar across the top (above timeline | tasks | trackers), collapsible to one line. */
.day-view { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.day-view > .day-split { flex: 1 1 auto; min-height: 0; height: auto; }
.day-view:has(> .day-split:not(.journal-collapsed)) > .day-goals { display: none; }
.day-goals { flex: none; margin-top: 4px; padding: 8px 14px 10px; border-radius: 10px; }
.period-goals { margin: 4px 0 8px; }
/* Month view: the goals bar (and any error banner) on top, the grid filling what's left. */
.task-list.calendar-mode:has(> .month) { display: flex; flex-direction: column; }
.task-list.calendar-mode:has(> .month) > :not(.month) { flex: none; }
.task-list > .month { flex: 1 1 auto; height: auto; }
.day-goals-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.day-goals-head .spacer { flex: 1; }
.day-goals-head .day-card-count { flex: none; font-size: calc(12px * var(--fs, 1)); color: var(--muted); }
.day-goals-row { display: flex; gap: 10px; margin-top: 8px; overflow-x: auto; padding-bottom: 2px; }
.day-goals-row .day-goal { flex: 0 0 250px; }
.day-goals-row .day-account-note { margin: 0; }
.day-goal {
  display: flex;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.day-goal .check { margin-top: 1px; }
.day-goal.done .day-goal-title { text-decoration: line-through; color: var(--muted); }
.day-goal-main { flex: 1; min-width: 0; cursor: pointer; }
.day-goal-title { font-size: calc(13px * var(--fs, 1)); font-weight: 600; overflow-wrap: anywhere; }
.day-goal-count { font-size: calc(11px * var(--fs, 1)); font-weight: 400; color: var(--muted); white-space: nowrap; }
.day-goal-meta { display: flex; gap: 8px; margin-top: 2px; font-size: calc(11px * var(--fs, 1)); color: var(--muted); flex-wrap: wrap; }
.day-goal-progress { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.day-goal .goal-progress-bar { flex: 0 1 90px; height: 4px; }

/* Day view: collapsible Trackers — closed, the column is a thin strip on the right. */
.tr-head .tr-collapse { margin-left: auto; align-self: center; }
.tr-head .tr-collapse .icon { width: 15px; height: 15px; }
.icon.flip { transform: rotate(180deg); }
.day-split.trackers-collapsed { grid-template-columns: minmax(0, 1fr) minmax(480px, 1fr) 34px; }
.day-split.trackers-collapsed .trackers { padding: 0; border: 0; background: none; overflow: visible; }
.tr-strip { height: 100%; cursor: pointer; }
.tr-strip b { min-width: 0; padding: 0; width: 22px; font-size: calc(10px * var(--fs, 1)); background: var(--streak-color); }

/* + New: the new task / event window */
.new-btn {
  flex: none;
  padding: 5px 11px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: calc(13px * var(--fs, 1));
  font-weight: 600;
}
.new-btn span { font-size: calc(16px * var(--fs, 1)); line-height: 1; }
.new-btn:hover { filter: brightness(1.08); }
.popover:has(.create-pop) { width: 360px; padding: 12px 14px; }
.create-pop { gap: 10px; }
.cp-head { display: flex; align-items: center; justify-content: space-between; }
.cp-head .qa-kind { align-self: center; }
.cp-head .qa-kind button { padding: 4px 14px; font-size: calc(13px * var(--fs, 1)); }
.create-pop .cp-title { font-size: calc(15px * var(--fs, 1)); font-weight: 600; padding: 7px 9px; }
.cp-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 30px; }
.cp-lbl { font-size: calc(12px * var(--fs, 1)); color: var(--muted); }
.cp-val { display: flex; align-items: center; gap: 6px; min-width: 0; }
.create-pop .cp-val select, .create-pop .cp-val input[type="date"] { width: auto; flex: 1 1 0; min-width: 0; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font: inherit; font-size: calc(13px * var(--fs, 1)); }
.create-pop .cp-val .toggle { flex: none; font-size: calc(13px * var(--fs, 1)); white-space: nowrap; }
.cp-prio { flex: 1; display: flex; }
.cp-prio button { flex: 1; padding: 4px 0; font-size: calc(12px * var(--fs, 1)); }
.create-pop .star.on { color: #f5a623; }
.create-pop .row-actions { gap: 8px; margin-top: 2px; }

/* Narrow windows: the title row wraps instead of pushing its tools off screen. */
@media (max-width: 1100px) {
  .main-header { flex-wrap: wrap; row-gap: 8px; }
  .main-header #view-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
.create-pop .star { opacity: 1; }
.day-lists-head .day-overdue-count { flex: none; margin-left: auto; font-size: calc(11px * var(--fs, 1)); font-weight: 600; color: var(--danger); }
.period-arrow:disabled { opacity: 0.3; cursor: default; background: none; }

/* Day view cards: a star at the end of each task (faint until starred). */
.cal-chip .chip-star { flex: none; margin-left: 2px; padding: 0 1px; }
.cal-chip .chip-star .icon { width: 13px; height: 13px; }

/* Journal images: the crop button (left of ×) and the crop window */
.jb-crop {
  top: -9px; right: 16px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
}
.jb-crop-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); }
.jb-crop-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 12px; background: var(--panel-bg); box-shadow: var(--shadow); max-width: 92vw; }
.jb-crop-stage { position: relative; align-self: center; line-height: 0; user-select: none; touch-action: none; }
.jb-crop-stage img { display: block; max-width: min(860px, 86vw); max-height: 70vh; }
.jb-crop-box { position: absolute; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); outline: 2px solid #fff; cursor: move; }
.jb-crop-stage { margin: 8px; clip-path: inset(-8px); } /* dims only around the picture; handles stay visible */
.jb-crop-h { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }
.jb-crop-h[data-h="nw"] { left: 0; top: 0; cursor: nwse-resize; }
.jb-crop-h[data-h="n"] { left: 50%; top: 0; cursor: ns-resize; }
.jb-crop-h[data-h="ne"] { left: 100%; top: 0; cursor: nesw-resize; }
.jb-crop-h[data-h="e"] { left: 100%; top: 50%; cursor: ew-resize; }
.jb-crop-h[data-h="se"] { left: 100%; top: 100%; cursor: nwse-resize; }
.jb-crop-h[data-h="s"] { left: 50%; top: 100%; cursor: ns-resize; }
.jb-crop-h[data-h="sw"] { left: 0; top: 100%; cursor: nesw-resize; }
.jb-crop-h[data-h="w"] { left: 0; top: 50%; cursor: ew-resize; }
.jb-crop-actions { display: flex; align-items: center; gap: 8px; }
.jb-crop-hint { flex: 1; font-size: calc(12px * var(--fs, 1)); color: var(--muted); }

/* Year view: twelve small months */
.year { display: grid; grid-template-columns: repeat(var(--year-cols, 3), minmax(0, 1fr)); gap: 18px 22px; padding: 6px 4px 30px; } /* a quarter per row */
@media (max-width: 760px) { .year { grid-template-columns: minmax(0, 1fr); } }
.yr-month { padding: 10px 10px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-bg); }
.yr-month.current { border-color: var(--accent); }
.yr-month-name { display: block; margin: 0 0 6px 4px; padding: 2px 4px; border-radius: 6px; font-size: calc(14px * var(--fs, 1)); font-weight: 700; color: var(--text); }
.yr-month-name:hover { background: var(--hover); color: var(--accent); }
.yr-month.current .yr-month-name { color: var(--accent); }
.yr-grid { display: grid; grid-template-columns: 20px repeat(7, 1fr); gap: 1px; }
.yr-wd { font-size: calc(10px * var(--fs, 1)); color: var(--faint); text-align: center; padding-bottom: 2px; }
.yr-wk { display: flex; justify-content: center; align-items: flex-start; height: 30px; padding-top: 5px; font-size: calc(9px * var(--fs, 1)); line-height: 12px; color: var(--faint); border-radius: 4px; }
.yr-wk:hover { background: var(--hover); color: var(--accent); }
.yr-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; height: 30px; padding-top: 3px; border-radius: 6px; font-size: calc(12px * var(--fs, 1)); color: var(--text); }
.yr-day:hover { background: var(--hover); }
.yr-day.today { background: var(--accent); color: #fff; font-weight: 700; }
.yr-day.late:not(.today) { color: var(--danger); font-weight: 600; }
.yr-dots { display: flex; gap: 2px; height: 5px; }
.yr-dots i { width: 4px; height: 4px; border-radius: 50%; }
.yr-day.today .yr-dots i { box-shadow: 0 0 0 1px #fff; }

/* Priority marks on calendar tasks: a little tighter than in lists. */
:is(.cal-chip, .tl-event) .prio-mark { margin-right: 3px; }

/* A list's add box, under its title */
.list-add { display: flex; align-items: center; gap: 8px; margin: 0 28px 8px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--input-bg); }
.list-add[hidden] { display: none; }
.list-add:focus-within { border-color: var(--accent); }
.list-add .plus { color: var(--accent); font-size: calc(18px * var(--fs, 1)); line-height: 1; }
.list-add input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; color: var(--text); }
.list-add input::placeholder { color: var(--faint); }
@media (max-width: 640px) { .list-add { margin: 0 16px 8px; } }

/* AI assistant: the ✦ button, its window, and its Settings section */
.ai-btn { color: var(--accent); }
.ai-btn .icon { width: 15px; height: 15px; }
.ai-dialog { width: min(600px, 94vw); }
#ai-title .icon { color: var(--accent); }
.ai-scope { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 7px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--text); font-size: calc(13px * var(--fs, 1)); font-weight: 500; }
.ai-scope .icon { flex: none; width: 15px; height: 15px; color: var(--accent); }
#ai-request { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text); font: inherit; font-size: calc(14px * var(--fs, 1)); line-height: 1.45; resize: vertical; }
#ai-request:focus { outline: none; border-color: var(--accent); }
.ai-note { font-size: calc(13px * var(--fs, 1)); color: var(--muted); }
.ai-thinking { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: calc(13px * var(--fs, 1)); }
.ai-spinner { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: ai-spin 0.8s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-message { margin: 12px 0 6px; font-size: calc(14px * var(--fs, 1)); }
.ai-confirm-hint { margin: 4px 0 6px; font-size: calc(12px * var(--fs, 1)); color: var(--muted); }
.ai-actions { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 8px; max-height: 300px; overflow-y: auto; }
.ai-actions li + li { border-top: 1px solid var(--border); }
.ai-actions label { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; font-size: calc(13px * var(--fs, 1)); cursor: pointer; }
.ai-actions input { margin-top: 2px; }
.ai-actions li.danger span { color: var(--danger); }
.ai-actions li.bad label { cursor: default; color: var(--faint); }
.ai-actions em { font-style: normal; }
.ai-dialog .dialog-actions { align-items: center; }
.ai-model-hint { flex: 1; font-size: calc(11px * var(--fs, 1)); color: var(--faint); }
.segmented.ai-provider { width: 220px; margin: 8px 0; }
.segmented.ai-provider button { padding: 5px 10px; border: 1px solid var(--border); background: var(--input-bg); font-size: calc(13px * var(--fs, 1)); }
.ai-key-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: calc(13px * var(--fs, 1)); }
.ai-key-row input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font: inherit; }
.ai-model-row { display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--fs, 1)); color: var(--muted); }
.ai-model-row input { width: 220px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font: inherit; font-size: calc(13px * var(--fs, 1)); }
.hint .icon { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; color: var(--accent); }
#view-title.current-period { color: var(--accent); }

/* Goals timeline: graduated scale zones and the day/week ticks near today. */
.gtl-zone { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 5%, transparent); pointer-events: none; }
.gtl-zone.alt { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.gtl-zone span { position: absolute; right: 6px; top: 30px; font-size: calc(9px * var(--fs, 1)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.gtl-tick.minor { border-left-color: color-mix(in srgb, var(--border) 60%, transparent); }
.gtl-tick.minor span { font-weight: 500; font-size: calc(10px * var(--fs, 1)); left: 3px; }

/* Goals timeline, bucketed: names on the zones, small tick labels below them, no separate Today label. */
.gtl-zone { border-left: 1px solid var(--border); }
.gtl-zone span { left: 6px; right: auto; top: 6px; font-size: calc(11px * var(--fs, 1)); color: var(--muted); }
.gtl-tick.minor span { top: 24px; }
.gtl-today span { display: none; }

/* Goals horizons: rows by how far off a goal is due; the nearer, the richer. */
.horizons { display: flex; flex-direction: column; gap: 6px; padding-bottom: 24px; }
.hz { padding: 10px 0 12px; border-top: 1px solid var(--border); }
.hz:first-child { border-top: 0; }
.hz-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font-size: calc(12px * var(--fs, 1)); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.hz-l .hz-head { font-size: calc(14px * var(--fs, 1)); color: var(--text); }
.hz-range { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--faint); }
.hz-count { font-weight: 600; color: var(--faint); }
.hz.late .hz-head { color: #e5484d; }
.hz-goals { display: grid; gap: 10px; }
.hz-l .hz-goals { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.hz-m .hz-goals { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.hz-c .hz-goals { display: flex; flex-wrap: wrap; gap: 6px; }
.goal-mid { padding: 10px 12px; border-radius: 10px; }
.goal-mid .goal-title { font-size: calc(14px * var(--fs, 1)); }
.goal-mid .goal-progress { margin-top: 6px; }
.goal-due { margin-left: auto; padding: 0 7px; border-radius: 9px; background: var(--hover); color: var(--muted); font-size: calc(11px * var(--fs, 1)); line-height: 17px; white-space: nowrap; }
.goal-due.late { background: color-mix(in srgb, #e5484d 15%, transparent); color: #e5484d; }
.goal-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 10px 4px 6px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg); font-size: calc(13px * var(--fs, 1)); }
.goal-chip .check { flex: none; }
.goal-chip-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.goal-chip-prog { font-size: calc(11px * var(--fs, 1)); color: var(--muted); }
.goal-chip.done .goal-chip-title { text-decoration: line-through; color: var(--muted); }
.goal-chip .goal-due { margin-left: 0; }
.hz.done { opacity: 0.8; }

/* Horizons as columns: the nearer, the wider; scrolls sideways when there are many. */
.horizons { flex-direction: row; align-items: flex-start; gap: 12px; overflow-x: auto; padding-bottom: 24px; scrollbar-width: thin; }
.hz { flex: none; padding: 0 12px 0 0; border-top: 0; border-right: 1px solid var(--border); }
.hz:last-child { border-right: 0; }
.hz-l { width: 340px; }
.hz-m { width: 270px; }
.hz-c { width: 210px; }
.hz-head { flex-wrap: wrap; position: sticky; top: 0; }
.hz-range { flex-basis: 100%; order: 3; margin-top: -4px; }
.hz-count { margin-left: auto; }
.hz-l .hz-goals, .hz-m .hz-goals { grid-template-columns: minmax(0, 1fr); }
.hz-c .hz-goals { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.hz-c .goal-chip { border-radius: 10px; }
.hz-c .goal-chip-title { flex: 1; white-space: normal; overflow-wrap: anywhere; }

/* Horizons columns: each period is its own panel, all the same height. */
.horizons { align-items: stretch; gap: 14px; min-height: 62vh; }
.hz { padding: 12px 12px 14px; border: 1px solid var(--border); border-right: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--text) 3.5%, var(--bg)); }
.hz:nth-child(even) { background: color-mix(in srgb, var(--accent) 5%, var(--bg)); }
.hz:last-child { border-right: 1px solid var(--border); }
.hz-head { margin: -12px -12px 12px; padding: 12px 14px 10px; border-bottom: 1px solid var(--border); border-radius: 14px 14px 0 0; background: color-mix(in srgb, var(--text) 6%, var(--bg)); }
.hz-l .hz-head { border-bottom: 2px solid var(--accent); }
.hz.late { border-color: color-mix(in srgb, #e5484d 50%, var(--border)); }
.hz.late .hz-head { border-bottom: 2px solid #e5484d; }

/* List menus: a small × in the corner. */
.pop-close { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; color: var(--muted); font-size: calc(14px * var(--fs, 1)); line-height: 1; z-index: 1; }
.pop-close:hover { background: var(--hover); color: var(--text); }
.popover:has(.pop-close) .rename-form { padding-right: 18px; }
.popover:has(.pop-close) > .menu-label { padding-right: 18px; }

/* ---------- Email page: every connected account's inbox ---------- */
body.page-view .task-list:has(.mail-page) { overflow: hidden; }
.mail-page { height: 100%; display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; max-width: 900px; }
.mail-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mail-bar .text-input { flex: 1 1 220px; min-width: 160px; }
.mail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mail-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border, rgba(128, 128, 128, 0.3)); border-radius: 14px; background: none; color: var(--text); font-size: calc(12.5px * var(--fs, 1)); cursor: pointer; }
.mail-chip:hover { background: var(--hover); }
.mail-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.mail-dot { width: 8px; height: 8px; border-radius: 50%; }
.mail-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; border: 1px solid var(--border, rgba(128, 128, 128, 0.25)); border-radius: 12px; padding: 4px; }
.mail-row { display: flex; align-items: center; gap: 4px; padding-right: 6px; border-radius: 8px; font-size: calc(13.5px * var(--fs, 1)); }
.mail-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 8px 4px 8px 8px; color: var(--text); text-decoration: none; }
/* The tick that selects a message for bulk Archive; rows without one (no archive permission yet) keep its room. */
.mail-pick { flex: none; width: 16px; height: 16px; margin: 0 0 0 10px; accent-color: var(--accent); cursor: pointer; }
.mail-row:not(:has(.mail-pick)) { padding-left: 30px; }
.mail-row.picked { background: color-mix(in srgb, var(--accent) 10%, transparent); }
@media (hover: none) { .mail-pick { width: 22px; height: 22px; } .mail-row:not(:has(.mail-pick)) { padding-left: 36px; } }
.mail-select { display: flex; align-items: center; gap: 10px; min-height: 28px; padding-left: 15px; font-size: calc(12.5px * var(--fs, 1)); color: var(--muted); }
.mail-select .mail-pick { margin-left: 0; }
.mail-archive { flex: none; opacity: 0; }
/* Rows without an Archive button keep its room, so the dates line up across accounts. */
.mail-row:not(:has(.mail-archive)) { padding-right: 38px; }
.mail-row:hover .mail-archive, .mail-row:focus-within .mail-archive { opacity: 1; }
@media (hover: none) { .mail-archive { opacity: 1; } }
.mail-row:hover { background: var(--hover); }
.mail-row.picked:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.mail-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mail-from { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-date { flex: none; font-size: calc(11.5px * var(--fs, 1)); color: var(--muted); }
.mail-subject, .mail-snippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-snippet { font-size: calc(12.5px * var(--fs, 1)); color: var(--muted); }
.mail-row.unread .mail-from, .mail-row.unread .mail-subject { font-weight: 700; }
.mail-account { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 7px; border-radius: 9px; font-size: calc(11px * var(--fs, 1)); line-height: 17px; font-weight: 600; color: var(--acct, var(--muted)); background: color-mix(in srgb, var(--acct, #888) 14%, transparent); }
.mail-note { margin: 8px 10px; font-size: calc(12.5px * var(--fs, 1)); color: var(--muted); }
.mail-note.warn { color: var(--danger); }

/* Red dot on the Email icon when there's unread mail */
.rail-icon { position: relative; display: inline-flex; flex: none; }
.rail-badge { position: absolute; top: -2px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: #e53935; box-shadow: 0 0 0 2px var(--rail-bg, var(--bg, #fff)); }

/* "New list…" from a task's list picker */
.new-list-dialog { border: 1px solid var(--border, #ddd); border-radius: 12px; padding: 16px; background: var(--bg, #fff); color: inherit; min-width: 280px; }
.new-list-dialog::backdrop { background: rgba(0, 0, 0, 0.3); }
.new-list-form { display: flex; flex-direction: column; gap: 12px; }
.new-list-form label { display: flex; flex-direction: column; gap: 4px; font-size: calc(13px * var(--fs, 1)); }
.new-list-actions { display: flex; justify-content: flex-end; gap: 8px; }

.cp-notes { width: 100%; resize: vertical; min-height: 44px; font: inherit; }

.cp-radios { display: flex; flex-direction: column; gap: 4px; }

/* ---------- day view: responsive layout ----------
   Timeline, Tasks and Logs share the day view's width, so all three shrink together (the width that counts
   is the day view's own, not the window's: the left nav can be open or collapsed). When the three no longer
   fit they stack in one column and the day view scrolls, each part keeping a usable height. */
.task-list.day-mode { container: day / inline-size; overflow-y: auto; overflow-x: hidden; }
.task-list.day-mode .day-split.journal-collapsed {
  --day-logs-w: minmax(220px, clamp(220px, 24%, 320px));
  grid-template-columns: minmax(200px, 1fr) minmax(var(--tasks-min, 260px), 1fr) var(--day-logs-w);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 520px;
}
.task-list.day-mode .day-split.journal-collapsed.lists-collapsed { grid-template-columns: minmax(200px, 1fr) 34px var(--day-logs-w); }
.task-list.day-mode .day-split.journal-collapsed.trackers-collapsed { grid-template-columns: minmax(200px, 1fr) minmax(var(--tasks-min, 260px), 1fr) 34px; }
.task-list.day-mode .day-split.journal-collapsed.lists-collapsed.trackers-collapsed { grid-template-columns: minmax(200px, 1fr) 34px 34px; }
@container day (max-width: 759px) {
  .day-view:has(> .day-split.journal-collapsed) { height: auto; }
  .task-list.day-mode .day-split.journal-collapsed,
  .task-list.day-mode .day-split.journal-collapsed.lists-collapsed,
  .task-list.day-mode .day-split.journal-collapsed.trackers-collapsed,
  .task-list.day-mode .day-split.journal-collapsed.lists-collapsed.trackers-collapsed {
    flex: none;
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
  }
  .task-list.day-mode .day-split.journal-collapsed > .day-timeline { height: clamp(340px, 60vh, 640px); }
  .task-list.day-mode .day-split.journal-collapsed .day-lists,
  .task-list.day-mode .day-split.journal-collapsed .day-cards,
  .task-list.day-mode .day-split.journal-collapsed .day-side,
  .task-list.day-mode .day-split.journal-collapsed .trackers { overflow: visible; }
  .task-list.day-mode .day-split.journal-collapsed .day-lists-strip { width: 100%; flex-direction: row; justify-content: center; }
  .task-list.day-mode .day-split.journal-collapsed .day-lists-strip span { writing-mode: horizontal-tb; }
  .task-list.day-mode .day-split.journal-collapsed .tr-strip { height: auto; }
  .task-list.day-mode .day-split.journal-collapsed .tr-strip .icon.flip { transform: rotate(90deg); }
  .task-list.day-mode .day-split.journal-collapsed .tr-strip span { writing-mode: horizontal-tb; }
  .task-list.day-mode .day-split.journal-collapsed .tr-strip b { width: auto; padding: 0 6px; }
}

/* Phones and very narrow windows: the left nav slides over the page, so the page takes the whole width
   (the rail rule above, later in the file, would otherwise leave it an auto-width column). */
@media (max-width: 640px) {
  .app { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- custom day views (day-layouts.js) ----------
   The day view drawn from a layout: a grid of equal rows and columns, each component filling the cells it was given.
   Narrower than 760px (the day view's own width, like Classic) the components stack in reading order instead. */
.task-list.day-mode > .day-grid {
  display: grid;
  grid-template-columns: repeat(var(--dg-cols, 12), minmax(0, 1fr));
  grid-template-rows: repeat(var(--dg-rows, 12), minmax(0, 1fr));
  gap: 12px 16px;
  height: 100%;
  min-height: 600px;
  padding-bottom: 12px;
}
.dg-cell { container: dgcell / size; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.dg-cell > * { flex: 1 1 auto; min-height: 0; }
.dg-cell > :is(.day-timeline, .trackers, .journal, .day-goals) { overflow-y: auto; }
.dg-cell > .dg-widget { overflow: hidden; }
.dg-cell > .dw-logs { overflow-y: auto; }
.dg-cell > .day-lists { overflow: hidden; }
.dg-cell > .day-goals { margin-top: 0; padding: 6px 4px 8px; }
.dg-title { margin: 0; font-size: calc(15px * var(--fs, 1)); }
.dg-goals .day-goals-row { flex-wrap: wrap; align-content: flex-start; overflow-x: hidden; overflow-y: auto; }
@container dgcell (max-height: 125px) {
  .dg-goals .day-goals-row { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
}
@container day (max-width: 759px) {
  .task-list.day-mode > .day-grid { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .dg-widget { overflow: visible; }
  .dw-chart .ch { flex: none; height: auto; }
  .dg-cell { container-type: normal; flex: none; overflow: visible; }
  .dg-cell > * { flex: none; }
  .dg-timeline > .day-timeline { height: 560px; }
  .dg-journal > .journal { height: 420px; }
  .dg-tasks > .day-lists { overflow: visible; }
  .dg-tasks .day-cards { overflow: visible; }
}

/* The other components of a custom day view: a list, a single log, or a chart, filling its cell. */
.dw { display: flex; flex-direction: column; min-height: 0; }
.dw-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 4px 8px; font-weight: 700; }
.dw-head h2 { margin: 0; font-size: calc(15px * var(--fs, 1)); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-head .icon-btn { margin-left: auto; }
.dw-head .icon-btn .icon { width: 15px; height: 15px; }
.dw-head .icon-btn[aria-pressed="false"] { color: var(--muted); }
.dw-account-head .g-badge, .dw-account-head > .icon { flex: none; }
.dw-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 2px 12px; }
.dw-rows { display: flex; flex-direction: column; gap: 3px; }
.dw-rows > .cal-chip, .dw-crow > .cal-chip { font-size: calc(13px * var(--fs, 1)); padding: 4px 6px; }
.dw-rows > .day-account-note { margin: 4px 2px; }
.dw-card { min-width: 0; margin-bottom: 7px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-bg); }
.dw-card-head { display: flex; align-items: center; gap: 7px; padding: 8px 10px 6px; font-size: calc(13px * var(--fs, 1)); font-weight: 600; }
.dw-card-head .dot { background: var(--c); }
.dw-card-body { display: flex; flex-direction: column; gap: 3px; padding: 0 6px 8px; }
.dw-card-body .cal-chip { font-size: calc(13px * var(--fs, 1)); padding: 4px 6px; }
.dw-crow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dw-crow > .cal-chip { flex: 1 1 auto; min-width: 0; }
.dw-crow-list { flex: 0 1 30%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(11px * var(--fs, 1)); color: var(--faint); }
@container dgcell (max-width: 260px) { .dw-crow-list { display: none; } }
.dw-goal { display: flex; align-items: flex-start; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.dw-goal:last-child { border-bottom: 0; }
.dw-goal .check { margin-top: 1px; flex: none; }
.dw-goal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; cursor: pointer; }
.dw-goal-title { font-size: calc(13px * var(--fs, 1)); font-weight: 600; overflow-wrap: anywhere; }
.dw-goal-when { font-size: calc(11px * var(--fs, 1)); color: var(--muted); }
.dw-goal.done .dw-goal-title { text-decoration: line-through; color: var(--muted); }
.dw-logs { padding: 0; }
.dw-logs > .tr-block { min-height: 100%; }
.dw-chart { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.dw-chart > .ws-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.dw-chart > .ws-card > .ws-title { flex: none; }
.dw-chart .ch { flex: 1 1 0; min-height: 0; width: 100%; height: auto; }
.dw-chart .ws-rt-grid { overflow-y: auto; align-content: start; }
.ws-rt-grid.month { grid-template-columns: minmax(60px, 1fr) repeat(var(--days), minmax(0, 17px)); gap: 5px 2px; }
.ws-rt-grid.month > span:not(.ws-rt-name) { font-size: calc(9px * var(--fs, 1)); padding-bottom: 3px; }
.ws-rt-grid.month .ws-rt-check { width: 100%; max-width: 13px; height: auto; aspect-ratio: 1; }

/* The day view layout picker's menu */
.menu-row { display: flex; align-items: center; gap: 2px; }
.menu-row .menu-item { flex: 1; min-width: 0; }
.menu-row .layout-edit { flex: none; opacity: 0.6; }
.menu-row .layout-edit:hover { opacity: 1; }
.menu-row .layout-edit .icon { width: 15px; height: 15px; }
#day-layout-btn { gap: 6px; }
#day-layout-btn .icon { width: 15px; height: 15px; }
#day-layout-btn span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- day view designer (day-designer.js) ---------- */
.dd-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(0, 0, 0, 0.35); }
.dd-window { display: flex; flex-direction: column; width: min(1280px, 100%); height: min(860px, 100%); border: 1px solid var(--border); border-radius: 14px; background: var(--bg); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); overflow: hidden; outline: none; }
.dd-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.dd-head h2 { margin: 0; font-size: 15px; }
.dd-name { display: flex; align-items: center; gap: 8px; margin-left: 14px; font-size: 13px; color: var(--muted); }
.dd-name input { width: 220px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text); font: inherit; }
.dd-spacer { flex: 1; }
.dd-btn { padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel-bg); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.dd-btn:hover { border-color: var(--accent); }
.dd-btn.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.dd-btn.dd-icon { display: inline-flex; padding: 7px 9px; }
.dd-btn .icon { width: 16px; height: 16px; }
.dd-btn.danger { border-color: var(--danger); background: var(--danger); color: #fff; }
.dd-btn.danger-link { padding: 4px 0; border: 0; background: none; color: var(--danger); font-weight: 500; }
.dd-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.dd-work { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; padding: 14px 20px; background: var(--hover); overflow: auto; }
.dd-hint { margin: 0; font-size: 12px; color: var(--muted); }
.dd-stage { flex: 1; min-height: 320px; display: flex; align-items: center; justify-content: center; }
.dd-canvas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--dd-cols, 12), minmax(0, 1fr));
  grid-template-rows: repeat(var(--dd-rows, 12), minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  max-width: 980px;
  aspect-ratio: 16 / 10;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  user-select: none;
  touch-action: none;
}
.dd-cell { border: 1px dashed var(--border); border-radius: 5px; background: var(--hover); }
.dd-item {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  padding: 4px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  cursor: grab;
  touch-action: none;
  outline: none;
}
.dd-item.selected, .dd-item:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.dd-item.dragging { opacity: 0.35; }
.dd-item .icon { width: 18px; height: 18px; color: var(--accent); }
.dd-item-icon { display: inline-flex; }
.dd-item-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-remove { position: absolute; top: 3px; right: 3px; display: none; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--panel-bg); color: var(--muted); cursor: pointer; }
.dd-remove .icon { width: 12px; height: 12px; color: inherit; }
.dd-remove:hover { color: var(--danger); }
.dd-item:hover .dd-remove, .dd-item.selected .dd-remove { display: inline-flex; }
.dd-h { position: absolute; z-index: 3; }
.dd-h-n, .dd-h-s { left: 12px; right: 12px; height: 8px; cursor: ns-resize; }
.dd-h-e, .dd-h-w { top: 12px; bottom: 12px; width: 8px; cursor: ew-resize; }
.dd-h-n { top: -5px; }
.dd-h-s { bottom: -5px; }
.dd-h-e { right: -5px; }
.dd-h-w { left: -5px; }
.dd-h-nw, .dd-h-ne, .dd-h-se, .dd-h-sw { display: none; width: 12px; height: 12px; border: 1.5px solid var(--accent); border-radius: 3px; background: var(--bg); }
.dd-h-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.dd-h-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.dd-h-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.dd-h-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.dd-item:hover :is(.dd-h-nw, .dd-h-ne, .dd-h-se, .dd-h-sw), .dd-item.selected :is(.dd-h-nw, .dd-h-ne, .dd-h-se, .dd-h-sw) { display: block; }
.dd-ghost { z-index: 4; border: 2px dashed var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 18%, transparent); pointer-events: none; }
.dd-ghost.bad { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, transparent); }
.dd-size { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--muted); }
.dd-size span:nth-of-type(2) { margin-left: 18px; }
.dd-size button { width: 22px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--panel-bg); color: var(--text); line-height: 1; cursor: pointer; }
.dd-size button:disabled { opacity: 0.35; cursor: default; }
.dd-size b { min-width: 22px; text-align: center; font-weight: 600; color: var(--text); }
.dd-problem { min-height: 18px; margin: 0; text-align: center; font-size: 12px; color: var(--danger); }
.dd-palette { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-left: 1px solid var(--border); background: var(--bg); overflow: auto; }
.dd-palette h3 { margin: 0; font-size: 14px; }
.dd-chips { display: flex; flex-direction: column; gap: 8px; }
.dd-group { margin: 8px 0 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.dd-group:first-child { margin-top: 0; }
.dd-chip { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-bg); font-size: 13px; cursor: grab; touch-action: none; user-select: none; }
.dd-chip:hover { border-color: var(--accent); }
.dd-chip .icon { width: 17px; height: 17px; color: var(--accent); }
.dd-chip-icon { display: inline-flex; }
.dd-chip .dd-grip { margin-left: auto; color: var(--faint); }
.dd-chip.placed { opacity: 0.5; cursor: default; }
.dd-chip.placed:hover { border-color: var(--border); }
.dd-chip em { margin-left: auto; font-size: 11px; font-style: normal; color: var(--muted); }
.dd-delete { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dd-delete p { flex: 1 0 100%; margin: 0; font-size: 13px; }
.dd-float { position: fixed; z-index: 1300; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--accent); border-radius: 10px; background: var(--panel-bg); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); font-size: 13px; font-weight: 600; pointer-events: none; transform: translate(-12px, -50%); }
.dd-float .icon { width: 16px; height: 16px; color: var(--accent); }
@media (max-width: 860px) {
  .dd-overlay { padding: 0; }
  .dd-window { height: 100%; border-radius: 0; }
  .dd-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .dd-palette { border-left: 0; border-top: 1px solid var(--border); }
  .dd-head { flex-wrap: wrap; }
  .dd-name input { width: 140px; }
}