*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* DM Sans (variable font, weights 400-600). Self-hosted from public/vendor/fonts/dm-sans/. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('vendor/fonts/dm-sans/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('vendor/fonts/dm-sans/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'New York';
  src: local('NewYork-Regular'), local('NewYork'), local('New York');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'New York';
  src: local('NewYork-Medium'), local('NewYorkMedium'), local('New York Medium');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'New York';
  src: local('NewYork-Semibold'), local('NewYorkSemibold'), local('New York Semibold');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'New York';
  src: local('NewYork-Bold'), local('NewYorkBold'), local('New York Bold');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'New York';
  src: local('NewYork-Heavy'), local('NewYorkHeavy'), local('New York Heavy'), local('NewYork-Black'), local('New York Black');
  font-weight: 800 900;
  font-style: normal;
}

:root {
  --bg: #f0ebe3;
  --surface: #faf7f3;
  --sidebar-bg: #e8e3db;
  --border: #d4cfc5;
  --text: #575279;
  --text-muted: #9490aa;
  --text-light: #c4bfd4;
  --accent: #3a9b9b;
  --accent-hover: #2e7f7f;
  --accent-light: #e4f2f2;
  --danger: #c0392b;
  --now: #3a9b9b;
  --recurring: #7c6fcd;
  --later: #b07d2e;
  --someday: #9b9085;
  --sidebar-width: 220px;
  --radius: 6px;
  --radius-sm: 3px;
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  height: 100vh;
  overflow: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

#app {
  display: flex;
  height: 100vh;
}

/* Sidebar */
#sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: 20px 12px;
  gap: 20px;
  /* Constrain to viewport so the inner <nav> can shrink and scroll while
     .sidebar-top and .sidebar-bottom (settings gear, sync pill, logout)
     stay pinned. Without these the nav grows past the viewport on small
     screens and pushes the gear off the bottom. */
  height: 100vh;
  overflow: hidden;
}

.sidebar-top {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.app-name {
  font-size: 18px;
  font-weight: 700;
  padding: 0 8px;
  letter-spacing: -0.3px;
}


nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Take the space between sidebar-top and sidebar-bottom, and scroll when
     the item list outgrows it. min-height:0 is the critical bit — flex
     children default to min-height:auto which would prevent shrinking.
     Scrollbar is hidden (mousewheel / touch only) per design. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;        /* old Edge */
}
nav::-webkit-scrollbar { width: 0; height: 0; display: none; }  /* WebKit */

/* Per-bar zoom — scales font, spacing and icons of each bar together.
   Values are set as CSS variables on :root by applyBarZoom(). */
#sidebar       { zoom: var(--zoom-left, 1); }
#main          { zoom: var(--zoom-mid, 1); }
#right-sidebar { zoom: var(--zoom-right, 1); }
#detail-panel  { zoom: var(--zoom-detail, 1); }

/* Right sidebar — mirrors #sidebar, shown lazily (display toggled in JS). */
#right-sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: 20px 12px;
  gap: 20px;
  height: 100vh;
  overflow: hidden;
}

/* Collapsible sidebars */
.sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-collapse-btn {
  flex: 0 0 auto;
  border: none; background: none; cursor: pointer;
  color: #0C9FCD; padding: 4px; display: flex;
}
.sidebar-collapse-btn:hover { filter: brightness(0.82); }
.sidebar-collapse-btn svg { width: 16px; height: 16px; }
#sidebar-collapse-right { align-self: flex-end; }

#app.sidebar-left-collapsed  #sidebar       { display: none; }
#app.sidebar-right-collapsed #right-sidebar { display: none !important; }

.sidebar-expand-btn {
  position: fixed; top: 12px; z-index: 50;
  display: none; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 7px; padding: 5px; cursor: pointer; color: #0C9FCD;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.sidebar-expand-btn:hover { border-color: var(--accent); filter: brightness(0.92); }
.sidebar-expand-btn svg { width: 16px; height: 16px; }
.sidebar-expand-left  { left: 12px; }
.sidebar-expand-right { right: 12px; }
#app.sidebar-left-collapsed  .sidebar-expand-left  { display: flex; }
#app.sidebar-right-collapsed .sidebar-expand-right { display: flex; }

/* Scrollable host for the movable sidebar sections (left & right). */
.sidebar-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar-sections::-webkit-scrollbar { width: 0; height: 0; display: none; }
.sidebar-section[data-section="search-views"] { display: flex; flex-direction: column; gap: 12px; }

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

.nav-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0C9FCD;
  padding: 4px 8px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s;
}
.nav-item:hover { background: rgba(0,0,0,0.06); }
.nav-item.active { background: rgba(58,155,155,0.12); color: var(--accent); }

.nav-icon { width: 16px; height: 16px; flex-shrink: 0; color: #0C9FCD; }
.nav-icon svg { width: 16px; height: 16px; vertical-align: middle; stroke-width: 1.75; }

.tag-icon { display: inline-block; width: 11px; height: 11px; margin-right: 3px; vertical-align: middle; }
.tag-icon svg { width: 11px; height: 11px; stroke-width: 2; vertical-align: middle; }

.nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nav-dot-inbox     { border: 1.5px solid #d1d5db; background: transparent; }
.nav-dot-now       { background: var(--now); }
.nav-dot-recurring { background: var(--recurring); }
.nav-dot-later     { background: var(--later); }
.nav-dot-someday   { background: var(--someday); }
.nav-dot-all      { background: var(--text-light); }
.nav-dot-archive  { background: var(--text-light); }
.nav-dot-delegated { background: var(--text-light); }
.nav-dot-areas    { background: var(--text-light); }
.nav-dot-contexts { background: var(--text-light); }

.nav-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(0,0,0,0.08);
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 600;
}

/* Main content */
#main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 0 40px 32px;
}
#view-container { width: 100%; box-sizing: border-box; }

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  padding-top: 28px;
  padding-bottom: 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

/* Quick-add row inside sticky header */
.view-quick-add {
  flex: 0 0 100%;
  order: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0 10px;
  margin-top: 8px;
  position: relative; /* anchor for absolute suggestion box */
}

.view-quick-add-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--text);
  outline: none;
  font-family: inherit;
}

.view-quick-add-input::placeholder { color: var(--text-light); }

.view-quick-add .task-input-hint { display: none; }
.view-quick-add:focus-within .task-input-hint { display: inline; }

.view-quick-add .qc-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
}

.view-title {
  font-size: 2em;
  font-weight: 900;
  font-family: 'New York', Georgia, serif;
  letter-spacing: -0.2px;
}

.view-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Task list */
.task-list { display: flex; flex-direction: column; gap: 0; }

.task-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid transparent;
  position: relative;
}
.task-item:hover { background: var(--surface); }
.task-item.row-selected { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); }
.task-item.completed { opacity: 0.5; }

/* Drag and drop */
.task-dragging { opacity: 0.35; }
.drop-before { box-shadow: 0 -2px 0 var(--accent); }
.drop-after  { box-shadow: 0  2px 0 var(--accent); }
.drop-into   { box-shadow: inset 0 0 0 2px var(--accent); background: rgba(79,70,229,0.06) !important; border-radius: var(--radius-sm); }
.task-item.completed .task-title { text-decoration: line-through; }

.task-check {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-size: 11px;
  line-height: 1;
}

/* todo — empty circle */
.task-check.wf-todo { border-color: #d1d5db; }
.task-check.wf-todo:hover { border-color: var(--accent); }

/* in progress — blue border + inner dot */
.task-check.wf-in-progress { border-color: var(--accent); border-width: 2px; }
.task-check.wf-in-progress::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* waiting — amber border + pause icon */
.task-check.wf-waiting { border-color: #d97706; border-width: 2px; color: #d97706; font-size: 9px; }
.task-check.wf-waiting::after { content: '⏸'; }

/* done — filled green + checkmark */
.task-check.wf-done { background: var(--now); border-color: var(--now); color: white; font-weight: 700; }
.task-check.wf-done::after { content: '✓'; }

/* cancelled — filled gray + × */
.task-check.wf-cancelled { background: #9ca3af; border-color: #9ca3af; color: white; }
.task-check.wf-cancelled::after { content: '✕'; }

/* small pip version used inside picker */
.wf-pip { width: 14px !important; height: 14px !important; font-size: 9px !important; cursor: default; }

.task-body { flex: 1; min-width: 0; }
.task-title { font-size: 16px; font-weight: 500; font-family: 'New York', Georgia, serif; text-rendering: optimizeLegibility; display: flex; align-items: center; gap: 5px; }
.hide-tags .task-meta { display: none; }
.task-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }

/* Display option: tags on the title line instead of underneath. The title is
   inline text so it flows as words and the tags follow right after it; full
   titles are never truncated. Only when a title fills the row does the tag group
   wrap to the next line. Guarded with :not(.hide-tags) so Hide tags still wins. */
.tags-inline .task-body { display: block; }
.tags-inline .task-title { display: inline; }
.tags-inline:not(.hide-tags) .task-meta {
  display: inline-flex;
  vertical-align: middle;
  position: relative;
  top: -2px;            /* nudge up to sit level with the serif title */
  margin-top: 0;
  margin-left: 8px;
}
/* Display option: icons-only tag pills. makeTag wraps the label in a <span>
   when there's an icon (icon-less tags use a bare text node), so hiding the
   meta-tag's child <span> collapses every icon tag — area, dates, context,
   person, and the parent breadcrumb — to just its icon, while icon-less tags
   keep their text. Full label stays on hover (title attr). */
.tags-icons-only .meta-tag .tag-icon { margin-right: 0; }
.tags-icons-only .meta-tag > span { display: none; }
.tags-icons-only .meta-tag { padding: 2px 5px; position: relative; }
/* styled hover tooltip (native title is unreliable here) */
.tags-icons-only .meta-tag[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  background: var(--text);
  color: var(--bg);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  padding: 3px 7px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 60;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.tags-icons-only .meta-tag[data-tip]:hover::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 1px;
  border: 4px solid transparent;
  border-top-color: var(--text);
  pointer-events: none;
  z-index: 60;
}

.meta-tag {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 500;
}

.meta-area { background: #e4f0f0; color: #2e7f7f; }
.meta-scheduled { background: #f0fdf4; color: #16a34a; }
.meta-due { background: #fef2f2; color: #dc2626; }
.meta-context { background: #f0ede8; color: #7c6fcd; }
.meta-context-project { background: #ecfdf5; color: #059669; }
.meta-pin  { background: transparent; color: #0C9FCD; padding: 0 2px; }
.meta-delegated { background: #fff7ed; color: #c2410c; }
.meta-dep { background: #f1f5f9; color: #475569; }
.meta-parent { background: #f8fafc; color: #64748b; }
.meta-overdue { background: #f9edf1; color: #BC6F83; font-weight: 700; }
.meta-effort-quick { background: #ecfdf5; color: #059669; }
.meta-effort-deep  { background: #eff6ff; color: #3b82f6; }

.meta-recur { background: #ede9fe; color: #7c6fcd; }
.meta-completed { background: #f0fdf4; color: #15803d; }
.meta-notes { background: transparent; color: #0C9FCD; padding: 0 2px; }
.meta-tag-clickable { cursor: pointer; }
.meta-tag-clickable:hover { filter: brightness(0.9); text-decoration: underline; }

/* Notes tag inside the meta line */
.meta-tag-notes {
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.1s;
}
.meta-tag-notes:hover { opacity: 1; }
.task-item.completed .meta-tag-notes { opacity: 0.75; }

/* Recurrence modal fields */
.recur-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.recur-row select, .recur-row input[type="number"] { flex-shrink: 0; }
.recur-row input[type="number"] { width: 54px; }
.recur-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.recur-weekday-group { display: flex; flex-wrap: wrap; gap: 6px; }
.recur-weekday-group label {
  display: flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 500; cursor: pointer;
  padding: 3px 7px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  transition: background 0.1s, border-color 0.1s;
  user-select: none;
}
.recur-weekday-group label:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.recur-weekday-group input[type="checkbox"] { display: none; }

.task-children {
  padding-left: 28px;
  margin-left: 19px;
  margin-top: 2px;
  margin-bottom: 4px;
}

/* Indent guide: 1px line from parent check centre to last child check centre */
[data-task-id]:has(> .task-children) { position: relative; }
[data-task-id]:has(> .task-children)::before {
  content: '';
  position: absolute;
  left: 45px;       /* centre of .task-check: 10px padding + 16px toggle + 10px gap + 9px = 45px */
  top: 33px;        /* between title and meta row (check bottom 27px + ~6px gap) */
  bottom: 4px;      /* bottom of last child's task-item (task-children margin-bottom) */
  width: 1px;
  background: var(--border);
  border-radius: 1px;
  pointer-events: none;
}

.task-expand {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  flex-shrink: 0;
  border-radius: 3px;
  transition: background 0.1s;
}
.task-expand:hover { background: var(--border); color: var(--text); }
.task-expand-hidden {
  visibility: hidden;
  pointer-events: none;
}

/* Status bar on task row — thin vertical stripe replacing the circle dot */
.task-status-dot {
  width: 3px;
  border-radius: 2px;
  align-self: stretch;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.15s;
  margin: 1px 4px 1px 0;
}
.task-status-dot:hover { opacity: 0.65; }
.status-dot-inbox     { background: #d1d5db; }
.status-dot-now       { background: var(--now); }
.status-dot-recurring { background: var(--recurring); }
.status-dot-later     { background: var(--later); }
.status-dot-someday   { background: var(--someday); }
.status-dot-done, .status-dot-archived { background: #e5e7eb; }

/* Status picker dropdown */
.status-picker {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0,0,0,0.14);
  padding: 4px;
  z-index: 500;
  min-width: 120px;
}
.date-picker-popup {
  display: flex;
  flex-direction: column;
  max-height: min(340px, 80vh);
}
.date-picker-list {
  overflow-y: auto;
}
.date-picker-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding-top: 2px;
}

.status-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s;
}
.status-picker-item:hover { background: var(--bg); }
.status-picker-item.current { color: var(--accent); }

/* Small pip used inside picker */
.status-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* Status dots */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.status-now       { background: var(--now); }
.status-recurring { background: var(--recurring); }
.status-later     { background: var(--later); }
.status-someday   { background: var(--someday); }
.status-inbox     { background: var(--border); }

/* Section headers in views */
.section-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0C9FCD;
  padding: 16px 10px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.empty-state h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.empty-state p { font-size: 13px; }

/* Modal */
#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
#modal-overlay.hidden { display: none; }

#modal {
  background: var(--surface);
  border-radius: var(--radius);
  width: 560px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}

.modal-header h2 { font-size: 16px; font-weight: 700; }

.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
}
.modal-close:hover { background: var(--border); color: var(--text); }

.modal-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.field { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.field label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }

.field-row { display: flex; gap: 12px; }

input[type="text"], input[type="date"], select, textarea {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  width: 100%;
  transition: border-color 0.15s;
}
input[type="text"]:focus, input[type="date"]:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
}

#field-title {
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-bottom: 2px solid var(--border);
  border-radius: 0;
  padding: 8px 0;
  background: transparent;
}
#field-title:focus { border-bottom-color: var(--accent); }

textarea { resize: vertical; }

.btn-primary {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
  background: transparent;
  color: var(--text-muted);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s;
}
.btn-secondary:hover { border-color: var(--text-muted); color: var(--text); }

.btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1.5px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

/* Dropdown results */
.dropdown-results {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  max-height: 160px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  position: absolute;
  z-index: 200;
  width: 100%;
  left: 0;
  top: 100%;
  margin-top: 2px;
}
.dropdown-results.hidden { display: none; }

.field { position: relative; }

.dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
}
.dropdown-item:hover { background: var(--bg); }

/* Tag list for dependencies */
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tag {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #e4f0f0;
  color: #2e7f7f;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
}
.tag-remove {
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  opacity: 0.7;
}
.tag-remove:hover { opacity: 1; }

/* Detail panel */
#detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 380px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 50;
  overflow-y: auto;
  box-shadow: -4px 0 20px rgba(0,0,0,0.08);
}
#detail-panel.hidden { display: none; }

#detail-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.detail-section { display: flex; flex-direction: column; gap: 6px; }
.detail-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.detail-value { font-size: 14px; }
.detail-notes-textarea {
  width: 100%;
  min-height: 80px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.detail-notes-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.detail-notes-textarea::placeholder { color: var(--text-muted); }

.detail-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 4px;
}
.detail-close:hover { background: var(--border); }

/* Areas view */
.area-group { margin-bottom: 28px; }
.area-group-title {
  font-size: 16px;
  font-weight: 700;
  padding: 0 10px 8px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.area-group-title:hover { color: var(--accent); }
.area-pin-btn,
.area-worksession-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
}
/* The pin button leads the right-hand cluster (pin, play, chevron). */
.area-pin-btn { margin-left: auto; }
.area-worksession-btn { margin-right: 8px; }
.area-pin-btn:hover,
.area-worksession-btn:hover { color: var(--accent); background: var(--border); }
.area-pin-btn.pinned { color: var(--accent); }
.area-pin-btn i,
.area-worksession-btn i { width: 14px; height: 14px; }
.area-group-chevron {
  font-size: 13px;
  color: var(--text-muted);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.area-group.collapsed .area-group-chevron { transform: rotate(-90deg); }
.area-group.collapsed .area-group-body { display: none; }

/* Highlighted section when navigating from a tag */
.area-group-highlight .area-group-title {
  color: var(--accent);
  transition: color 0.8s;
}

/* Archive */
.archive-month { display: flex; align-items: center; gap: 8px; }
.archive-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(0,0,0,0.07);
  padding: 1px 7px;
  border-radius: 10px;
}

/* Completed date edit */
.editable-date {
  cursor: pointer;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 1px;
}
.editable-date:hover { border-bottom-color: var(--accent); color: var(--accent); }

/* New task input row with right-aligned hint */
.task-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.task-input-row .task-title-input { flex: 1; min-width: 0; }
.task-input-hint {
  font-size: 11px;
  color: var(--text-light);
  white-space: nowrap;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
}

/* Inline task title editing */
.task-title-input {
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text);
  width: 100%;
  padding: 0;
  outline: none;
}
.task-title-input::placeholder { color: var(--text-light); font-weight: 400; }
.task-title-input:focus { outline: none; }

/* ··· detail button */
.task-detail-btn {
  opacity: 0;
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  color: var(--text-muted);
  cursor: pointer;
  letter-spacing: 1px;
  line-height: 1;
  transition: opacity 0.1s, background 0.1s;
  margin-left: auto;
}
.task-item:hover .task-detail-btn { opacity: 1; }
.task-detail-btn:hover { background: var(--border); color: var(--text); }

/* Temporary focus / zoom-in button */
.task-focus-btn {
  opacity: 0;
  flex-shrink: 0;
  padding: 3px 5px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  transition: opacity 0.1s, background 0.1s;
  display: flex;
  align-items: center;
}
.task-item:hover .task-focus-btn { opacity: 0.55; }
.task-focus-btn:hover { background: var(--border); color: var(--accent); opacity: 1 !important; }
.task-worksession-btn {
  opacity: 0;
  flex-shrink: 0;
  padding: 3px 5px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  transition: opacity 0.1s, background 0.1s;
  display: flex;
  align-items: center;
}
.task-item:hover .task-worksession-btn { opacity: 0.55; }
.task-worksession-btn:hover { background: var(--border); color: var(--accent); opacity: 1 !important; }
.task-week-btn {
  opacity: 0; flex-shrink: 0; padding: 3px 5px; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-muted); transition: opacity 0.1s, background 0.1s;
  display: flex; align-items: center;
}
.task-item:hover .task-week-btn { opacity: 0.55; }
.task-week-btn:hover { background: var(--border); color: var(--accent); opacity: 1 !important; }
/* When a task is already assigned to a week, keep the button visible + accented. */
.task-week-btn.has-week { opacity: 0.9; color: var(--accent); }
/* Week picker sub-label (the actual date) + carried/this-week plan markers. */
.week-picker .week-sub { margin-left: auto; font-size: 11px; color: var(--text-light); font-weight: 400; }
/* Calendar "start a session" picker: small section headers over the type/area lists. */
.cal-session-picker { min-width: 150px; max-height: min(60vh, 420px); overflow-y: auto; }
.cal-session-picker-head {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-light); padding: 6px 10px 2px; font-weight: 700;
}
.cal-session-picker .week-pip { width: 14px; height: 14px; flex-shrink: 0; }
/* Settings: per-item toggle for "show in calendar session picker". */
.settings-lens-cal-toggle {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  color: var(--text-light); opacity: 0.45; display: flex; align-items: center;
}
.settings-lens-cal-toggle i { width: 15px; height: 15px; }
.settings-lens-cal-toggle.on { color: var(--accent); opacity: 1; }
.settings-lens-cal-toggle:hover { opacity: 1; }
.week-picker .week-pip { width: 13px; height: 13px; flex-shrink: 0; }
.week-picker .week-clear { color: var(--text-muted); }
.plan-thisweek-head { color: var(--accent) !important; }
.plan-carried { position: relative; }
.plan-carried::after {
  content: '↩ carried'; margin-left: 6px; font-size: 0.62rem; color: var(--text-light);
  text-transform: uppercase; letter-spacing: 0.03em; align-self: center;
}

/* New task input row */
.task-item-new {
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1.5px var(--accent);
}

/* Add task row (bottom of list) */
.add-task-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: var(--text-light);
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 0.1s;
  margin-top: 2px;
}
.add-task-row:hover { color: var(--accent); }
.add-task-icon { font-size: 16px; line-height: 1; }

/* Default-context token pills (pre-filled from view context) */
.meta-default-token {
  opacity: 0.5;
  font-style: italic;
}

/* Token pills inside new-task row */
.qc-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.qc-tokens:empty { display: none; }

/* Indent pill inside new-task row */
.row-indent-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e4f0f0;
  color: #2e7f7f;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  margin-bottom: 4px;
}
.row-indent-pill.hidden { display: none; }
.qc-indent-clear {
  cursor: pointer;
  font-size: 13px;
  opacity: 0.6;
  line-height: 1;
}
.qc-indent-clear:hover { opacity: 1; }

/* Suggestion dropdown (inside task rows) */
.qc-suggestions {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  max-height: 180px;
  overflow-y: auto;
  position: relative;
  z-index: 300;
  margin-top: 2px;
}
.qc-suggestions.hidden { display: none; }

.qc-sug-item {
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}
.qc-sug-item:hover, .qc-sug-item.highlighted {
  background: var(--bg);
  color: var(--accent);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.hidden { display: none !important; }

/* Task highlight when navigating from parent breadcrumb */
.task-highlight {
  background: rgba(79, 70, 229, 0.1) !important;
  transition: background 1s ease-out;
}

/* Completed subtasks toggle */
/* View actions menu */
.view-menu-wrap {
  position: relative;
}
.view-menu-trigger {
  font-size: 12px;
  padding: 5px 10px;
  color: var(--text-muted);
  border-color: var(--border);
}
.view-menu-trigger:hover {
  border-color: var(--text-muted);
  color: var(--text);
}
.view-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  min-width: 210px;
  z-index: 200;
  overflow: hidden;
}
.view-menu.hidden { display: none; }
.actions-menu-popup { right: auto; z-index: 1000; }
.view-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 14px;
  background: none;
  border: none;
  border-radius: 0;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  gap: 16px;
}
.view-menu-item:hover {
  background: var(--hover);
}
.view-menu-item kbd {
  font-family: inherit;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  flex-shrink: 0;
}

/* Search bar */
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-icon {
  position: absolute;
  left: 8px;
  font-size: 14px;
  color: var(--text-muted);
  pointer-events: none;
  line-height: 1;
}
#sidebar-search {
  width: 100%;
  padding: 6px 32px 6px 26px;
  font-size: 12px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: rgba(0,0,0,0.04);
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}
#sidebar-search:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}
#sidebar-search::placeholder { color: var(--text-muted); }
.search-kbd {
  position: absolute;
  right: 6px;
  font-size: 10px;
  font-family: inherit;
  color: var(--text-muted);
  background: rgba(0,0,0,0.07);
  border-radius: 3px;
  padding: 1px 4px;
  pointer-events: none;
  line-height: 1.6;
}

.new-task-kbd {
  position: absolute;
  right: 6px;
  font-size: 10px;
  font-family: inherit;
  color: var(--text-muted);
  background: rgba(0,0,0,0.07);
  border-radius: 3px;
  padding: 1px 4px;
  pointer-events: none;
  line-height: 1.6;
}

/* Search results */
.search-results .task-item { border-bottom: 1px solid var(--border); border-radius: 0; }
.search-results .task-item:last-child { border-bottom: none; }

/* ================================================================
   Habits
   ================================================================ */

.habits-loading { color: var(--text-muted); padding: 24px 0; }


/* Date navigation */
.habits-date-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.habits-nav-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  transition: border-color 0.12s, color 0.12s;
}
.habits-nav-btn:hover { border-color: var(--text-muted); color: var(--text); }
.habits-date-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

/* Day view sections */
.habits-section { margin-bottom: 28px; }
.habits-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* Habit rows */
.habit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
  position: relative;
}
.habit-row:hover { background: var(--hover, rgba(0,0,0,0.03)); }
.habit-row.habit-done .habit-name { color: var(--text-muted); text-decoration: line-through; }

/* Checkbox */
.habit-check {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}
.habit-check:hover { border-color: var(--accent); }
.habit-check.habit-check-done {
  background: var(--now);
  border-color: var(--now);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 8px;
}

/* Counter */
.habit-counter-btn {
  width: 24px; height: 24px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.habit-counter-btn:hover { border-color: var(--accent); color: var(--accent); }
.habit-counter-display {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 36px;
  text-align: center;
  flex-shrink: 0;
}
.habit-counter-display.habit-counter-done { color: var(--now); }

/* Habit name */
.habit-name {
  flex: 1;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}
.habit-name-input {
  flex: 1;
  font-size: 14px;
  border: none;
  border-bottom: 1px solid var(--accent);
  background: none;
  color: var(--text);
  outline: none;
  padding: 0;
}

/* Streak badge */
.habit-streak {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-light);
  min-width: 20px;
  text-align: right;
  flex-shrink: 0;
}
.habit-streak.habit-streak-hot { color: #f97316; }

/* Delete button */
.habit-delete {
  opacity: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 16px;
  padding: 0 2px;
  line-height: 1;
  transition: opacity 0.1s, color 0.1s;
  flex-shrink: 0;
}
.habit-row:hover .habit-delete { opacity: 1; }
.habit-delete:hover { color: var(--danger); }

/* Add habit row */
.habit-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
}
.habit-add-panel {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.habit-tod-toggle .habit-type-btn {
  padding: 2px 8px;
}
.habit-add-plus {
  color: var(--text-light);
  font-size: 16px;
  line-height: 1;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.habit-add-input {
  background: none;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--text-muted);
  flex: 1;
}
.habit-add-input::placeholder { color: var(--text-light); }
.habit-add-input:focus { color: var(--text); }
.habit-type-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.habit-type-btn {
  background: none;
  border: none;
  padding: 2px 7px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1.6;
}
.habit-type-btn.active {
  background: var(--accent);
  color: #fff;
}
.habit-add-counter-target {
  width: 44px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  padding: 2px 6px;
  flex-shrink: 0;
}

/* Week grid */
.habits-week-grid {
  display: grid;
  gap: 2px;
}
/* Will be set inline by JS based on habit count */
.habits-week-grid {
  grid-template-columns: 260px repeat(7, 1fr);
  align-items: center;
}
.habits-week-day-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
  padding: 6px 4px;
  gap: 2px;
}
.habits-week-day-label span:first-child { text-transform: uppercase; font-weight: 600; letter-spacing: 0.04em; }
.habits-week-day-label span:last-child { font-size: 13px; color: var(--text); }
.habits-week-today span { color: var(--accent) !important; }
.habits-section-header {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #0C9FCD;
  padding: 10px 6px 4px;
  border-bottom: 1px solid var(--border);
}

.habits-cat-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.habits-cat-name {
  flex: 1;
  cursor: pointer;
}

.habits-cat-name:hover { color: var(--accent); }

.habits-cat-name-input {
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #0C9FCD;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--accent);
  outline: none;
  flex: 1;
}

.habits-cat-delete {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  font-size: 14px;
  opacity: 0;
  padding: 0 2px;
  transition: color 0.1s;
}

.habits-cat-header:hover .habits-cat-delete { opacity: 1; }
.habits-cat-delete:hover { color: var(--danger); }

.habits-cat-drag-over {
  background: var(--accent-light);
  border-radius: var(--radius-sm);
}

.habit-cat-badge {
  font-size: 10px;
  font-family: inherit;
  border-radius: 20px;
  padding: 1px 7px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  position: relative;
}

.habit-cat-badge:hover { border-color: var(--text-muted); color: var(--text-muted); }
.habit-cat-none { opacity: 0; }
.habits-week-name:hover .habit-cat-none { opacity: 1; }

.habit-cat-popover {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.habit-cat-pop-btn {
  font-size: 12px;
  font-family: inherit;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  cursor: pointer;
  color: var(--text);
  transition: background 0.1s;
}

.habit-cat-pop-btn:hover { background: var(--accent-light); color: var(--accent); }
.habit-cat-pop-btn.active { color: var(--accent); font-weight: 600; }

.habits-add-cat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.habits-week-name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  padding: 8px 6px;
  cursor: pointer;
}
.habits-week-name span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.habits-week-name:hover .habit-delete { opacity: 1; }
.habits-week-name.dragging { opacity: 0.35; }
.habits-week-name.drag-over-above { box-shadow: inset 0 2px 0 var(--accent); }
.habits-week-name.drag-over-below { box-shadow: inset 0 -2px 0 var(--accent); }

.habit-drag-handle {
  opacity: 0;
  cursor: grab;
  color: var(--text-light);
  font-size: 13px;
  flex-shrink: 0;
  user-select: none;
  transition: opacity 0.1s;
  margin-right: 2px;
}
.habits-week-name:hover .habit-drag-handle { opacity: 1; }
.habits-week-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  cursor: pointer;
  position: relative;
}
.habits-week-note-btn {
  position: absolute;
  bottom: 2px;
  right: 2px;
  opacity: 0;
  background: none;
  border: none;
  font-size: 9px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  line-height: 1;
  transition: opacity 0.1s;
}
.habits-week-note-btn.has-note { opacity: 0.45; }
.habits-week-cell:hover .habits-week-note-btn { opacity: 1; }
.habit-note-popover {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.13);
  z-index: 1000;
}
.habit-note-input {
  width: 100%;
  border: none;
  outline: none;
  background: none;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
}
.habits-week-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border);
  transition: background 0.12s, border-color 0.12s;
}
.habits-week-cell:hover .habits-week-dot { border-color: var(--text-muted); }
.habits-week-dot.done { background: var(--now); border-color: var(--now); }
.habits-week-dot.partial { background: rgba(22, 163, 74, 0.25); border-color: var(--now); }
.habits-week-dot.not-done { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.6); }

.habits-week-counter {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: transparent;
  transition: background 0.12s, border-color 0.12s;
}
.habits-week-counter.partial { color: var(--text); border-color: var(--text-muted); }
.habits-week-counter.full { background: var(--now); border-color: var(--now); color: #fff; }
.habits-week-cell:hover .habits-week-counter { border-color: var(--text-muted); }

.habits-empty {
  color: var(--text-muted);
  font-size: 14px;
  padding: 32px 0;
  text-align: center;
}

/* Pinned nav items */
.pinned-nav-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pinned-nav-pin-btn { display: flex; align-items: center; flex-shrink: 0; }
.pinned-nav-pin-btn:hover .nav-icon { color: var(--danger); }
.pinned-nav-session-btn { display: flex; align-items: center; flex-shrink: 0; }
.pinned-nav-session-btn .nav-icon { color: var(--text-muted); }
.pinned-nav-session-btn:hover .nav-icon { color: var(--accent); }

/* ================================================================
   Plan View
   ================================================================ */

.plan-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; padding: 80px 20px; color: var(--text-muted);
  font-size: 14px; text-align: center;
}
.plan-empty-btn { margin-top: 4px; }

.plan-cycle-nav {
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 100%;
  padding-top: 10px;
  padding-bottom: 4px;
}
.plan-nav-arrow {
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  width: 28px; height: 28px; cursor: pointer; color: var(--text);
  font-size: 14px; flex-shrink: 0;
}
.plan-nav-arrow:disabled { opacity: 0.3; cursor: default; }
.plan-nav-arrow:not(:disabled):hover { background: rgba(0,0,0,0.06); }
.plan-cycle-nav-group { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.plan-cycle-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.plan-cycle-name-row {
  display: flex; align-items: center; gap: 5px;
}
.plan-cycle-name {
  font-weight: 700; font-size: 15px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plan-cycle-edit-btn {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; padding: 2px;
  flex-shrink: 0;
}
.plan-cycle-edit-btn svg { width: 13px; height: 13px; }
.plan-cycle-edit-btn:hover { color: var(--accent); }
.plan-cycle-dates { font-size: 12px; color: var(--text-muted); }
.plan-new-cycle-btn { flex-shrink: 0; }
.plan-delete-btn {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; padding: 4px;
}
.plan-delete-btn:hover { color: var(--danger); }
.plan-delete-btn svg { width: 14px; height: 14px; }

.plan-new-cycle-form {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 16px;
}
.plan-new-cycle-form label { font-size: 12px; color: var(--text-muted); }
.plan-new-cycle-form input {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 5px 8px; font-size: 13px; background: var(--bg); color: var(--text);
  font-family: inherit;
}
.plan-form-name { flex: 1; min-width: 160px; }
.plan-form-date { width: 140px; }

.plan-rename-input {
  font-weight: 700; font-size: 15px; color: var(--text);
  border: none; border-bottom: 2px solid var(--accent);
  background: transparent; outline: none; padding: 0;
  font-family: inherit; width: 100%;
}

.plan-week-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  align-items: start;
}

.plan-week-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.plan-week-current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.plan-week-past { opacity: 0.55; }

.plan-week-header {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 7px; border-bottom: 1px solid var(--border);
  margin-bottom: 3px;
}
.plan-week-num { font-size: 11px; font-weight: 700; color: var(--text); }
.plan-week-range { font-size: 11px; color: var(--text-muted); }
.plan-week-badge {
  margin-left: auto; font-size: 10px; font-weight: 700;
  background: var(--accent); color: #fff;
  padding: 1px 6px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: 0.04em;
}

.plan-task-row {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 4px; cursor: pointer;
  border-radius: var(--radius-sm);
}
.plan-task-row:hover { background: rgba(0,0,0,0.05); }
.plan-task-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.plan-s-now      { background: var(--now); }
.plan-s-later    { background: var(--later); }
.plan-s-someday  { background: var(--someday); }
.plan-s-recurring{ background: var(--recurring); }
.plan-s-inbox    { background: var(--text-muted); }

.plan-task-title { font-size: 13px; color: var(--text); line-height: 1.35; }

.plan-add-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 12px;
  padding: 5px 0 0; text-align: left;
}
.plan-add-btn:hover { color: var(--accent); }

/* Plan view — body layout */
.plan-body {
  display: flex;
  gap: 14px;
  align-items: start;
}

/* Unscheduled panel */
.plan-unscheduled-panel {
  width: 200px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  max-height: 70vh;
  overflow-y: auto;
  position: sticky;
  top: 0;
}
.plan-unscheduled-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.plan-unscheduled-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 0;
}
.plan-unsched-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  cursor: grab;
  user-select: none;
}
.plan-unsched-row:hover { background: var(--bg); }
.plan-unsched-row.plan-dragging { opacity: 0.35; }

/* Week card drop target */
.plan-week-card.plan-drop-over {
  border-color: var(--accent);
  background: var(--accent-light);
}

/* Recurring toggle active state */
.plan-recur-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Make week grid fill remaining space */
.plan-body .plan-week-grid { flex: 1; min-width: 0; }

/* Sidebar bottom + settings trigger */
.sidebar-bottom {
  margin-top: auto;
  padding: 0 4px 4px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}

/* Account row in Settings > Data */
.settings-account-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
}
.settings-account-email {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}
.sidebar-logout {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-logout:hover { background: var(--border); color: var(--text); }

/* Sync status pill */
.sync-pill {
  flex: none;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-muted);
  cursor: pointer;
  min-width: 0;
}
.sync-pill:hover { color: var(--text); }
.sync-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-light);
  flex-shrink: 0;
}
.sync-pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sync-pill.is-online   .sync-pill-dot { background: #16a34a; }
.sync-pill.is-online              { color: var(--text-muted); }
.sync-pill.is-offline  .sync-pill-dot { background: #b07d2e; }
.sync-pill.is-offline             { color: #b07d2e; border-color: rgba(176, 125, 46, 0.4); }
.sync-pill.is-syncing  .sync-pill-dot { background: var(--accent); animation: sync-pulse 1s ease-in-out infinite; }
.sync-pill.is-syncing             { color: var(--accent); }
.sync-pill.is-error    .sync-pill-dot { background: var(--danger); }
.sync-pill.is-error               { color: var(--danger); border-color: rgba(192, 57, 43, 0.4); }
@keyframes sync-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.sidebar-settings-btn {
  width: 100%;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
}
.sidebar-settings-btn.active { color: var(--accent); background: rgba(58,155,155,0.12); }

/* Settings panel */
#settings-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 199;
}
#settings-backdrop.hidden { display: none; }

#settings-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(600px, calc(100vw - 48px));
  height: min(85vh, 800px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  z-index: 200;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
}
#settings-panel.hidden { display: none; }

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
  border-bottom: 1px solid var(--border);
}
.settings-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.settings-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
}
.settings-close:hover { background: var(--border); color: var(--text); }

.settings-body {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.settings-tab-nav {
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  padding: 16px 8px;
  gap: 2px;
  border-right: 1px solid var(--border);
}
.settings-tab-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  transition: background 0.1s, color 0.1s;
}
.settings-tab-btn:hover { background: rgba(0,0,0,0.06); color: var(--text); }
.settings-tab-btn.active { background: rgba(58,155,155,0.12); color: var(--accent); font-weight: 600; }

.settings-tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
}
.settings-tab-panel {
  display: none;
  flex-direction: column;
  gap: 24px;
}
.settings-tab-panel.active { display: flex; }

.settings-section { display: flex; flex-direction: column; gap: 8px; }
.settings-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0C9FCD;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.settings-radio-group { display: flex; flex-direction: column; gap: 2px; }
.settings-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  user-select: none;
}
.settings-radio:hover { background: var(--bg); }
.settings-radio input {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}
.settings-radio input:checked {
  border-color: var(--accent);
}
.settings-radio input:checked::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--accent);
  border-radius: 50%;
}
.settings-radio.is-current { color: var(--accent); }

.settings-feature-list { display: flex; flex-direction: column; gap: 2px; }

.settings-feature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  user-select: none;
}
.settings-feature-row:hover { background: var(--bg); }
.settings-hint { font-size: 12px; color: var(--text-muted); margin-top: 7px; line-height: 1.6; }
.settings-hint code { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; font-size: 0.92em; }
#settings-session-tpl #session-template-input { margin-top: 2px; }

.settings-feature-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: var(--border);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s;
}
.settings-feature-toggle::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: transform 0.15s;
}
.settings-feature-toggle:checked { background: var(--accent); }
.settings-feature-toggle:checked::after { transform: translateX(14px); }

/* Lenses settings */
.settings-lens-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.settings-lens-section:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

.settings-lens-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
}
.settings-lens-label {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.settings-lens-items { display: flex; flex-direction: column; gap: 1px; }

.settings-lens-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}
.settings-lens-item:hover { background: var(--bg); }

.settings-lens-item-name {
  flex: 1;
  font-size: 13px;
  color: var(--text);
}

.settings-lens-icon-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: border-color 0.1s, color 0.1s;
}
.settings-lens-icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.settings-lens-icon-btn svg { width: 13px; height: 13px; }
.settings-lens-icon-btn-muted { opacity: 0.5; }

.settings-lens-delete {
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.5;
  transition: opacity 0.1s, color 0.1s;
}
.settings-lens-delete:hover { opacity: 1; color: var(--danger, #e05252); }

.settings-lens-add-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
}
.settings-lens-add-input {
  flex: 1;
  font-size: 12px;
  font-family: inherit;
  border: none;
  background: transparent;
  color: var(--text);
  outline: none;
  border-bottom: 1px solid var(--border);
  padding: 2px 0;
}
.settings-lens-add-input::placeholder { color: var(--text-muted); }
.settings-lens-add-input:focus { border-bottom-color: var(--accent); }
.settings-lens-add-btn {
  font-size: 16px;
  line-height: 1;
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0 4px;
  font-weight: 700;
}

.settings-icon-picker {
  box-shadow: 0 4px 20px rgba(0,0,0,0.14);
  max-height: 260px;
  overflow-y: auto;
}
.settings-color-swatches {
  display: flex; flex-wrap: wrap; gap: 5px; padding: 8px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--surface, #fff); z-index: 1;
}
.settings-color-swatch {
  width: 18px; height: 18px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid transparent;
}
.settings-color-swatch.active { border-color: var(--text); }

.settings-hotkey-list { display: flex; flex-direction: column; gap: 2px; }

/* Layout tab — two draggable lists assigning sections to left/right sidebar */
.layout-help { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.layout-lists { display: flex; gap: 12px; }
.layout-col { flex: 1; }
.layout-col-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 6px; }
.layout-list {
  min-height: 120px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.layout-list.drag-over { border-color: var(--accent); background: rgba(58,155,155,0.06); }
.layout-chip {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--sidebar-bg);
  border: 1px solid var(--border);
  cursor: grab;
  font-size: 13px;
  font-weight: 500;
}
.layout-chip.dragging { opacity: 0.35; }

/* Per-bar zoom controls */
.zoom-list { display: flex; flex-direction: column; gap: 4px; }
.zoom-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; }
.zoom-label { font-size: 13px; }
.zoom-stepper { display: flex; align-items: center; gap: 8px; }
.zoom-btn {
  width: 24px; height: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.zoom-btn:hover { background: var(--border); color: var(--accent); }
.zoom-value { font-size: 12px; min-width: 42px; text-align: center; color: var(--text-muted); cursor: pointer; }

.hotkey-key-btn {
  font-size: 11px;
  font-family: inherit;
  color: var(--text-muted);
  background: rgba(0,0,0,0.07);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  min-width: 28px;
  text-align: center;
  transition: border-color 0.1s, color 0.1s, background 0.1s;
}
.hotkey-key-btn:hover { border-color: var(--accent); color: var(--accent); }
.hotkey-key-btn.recording {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
}

.settings-admin-link {
  display: block;
  text-align: center;
  text-decoration: none;
}

/* Admin invites section */
.settings-invites { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.settings-invite {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.settings-invite-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  word-break: break-all;
  color: var(--text);
  user-select: all;
}
.settings-invite-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
}
.settings-invite-used { color: var(--text-light); text-decoration: line-through; }
.settings-invite-actions { display: flex; gap: 6px; }
.settings-invite-actions button {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-muted);
  font-family: inherit;
}
.settings-invite-actions button:hover { color: var(--text); border-color: var(--text-muted); }

/* Settings action buttons (Data tab: export, sync, admin link) */
.settings-action-btn {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: border-color 0.15s, color 0.15s;
}
.settings-action-btn:hover { border-color: var(--text-muted); color: var(--accent); }

/* Migration & export section */
.settings-migration-buttons { display: flex; flex-direction: column; gap: 8px; }
.migration-upload-btn {
  cursor: pointer;
  user-select: none;
}
.settings-migration-status {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  min-height: 16px;
}
.settings-migration-status.is-error { color: var(--danger); }
.settings-migration-status.is-success { color: var(--accent); }

/* Conflict resolution modal — shares chrome with #modal-overlay/#modal */
#conflict-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
#conflict-overlay.hidden { display: none; }
#conflict-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 560px;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.conflict-intro { font-size: 13px; color: var(--text); margin-bottom: 12px; }
.conflict-diff { width: 100%; border-collapse: collapse; font-size: 12px; }
.conflict-diff th,
.conflict-diff td {
  text-align: left;
  vertical-align: top;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.conflict-diff th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.conflict-diff td pre {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow: auto;
  color: var(--text);
}
.conflict-diff .conflict-field { font-weight: 600; color: var(--text); width: 90px; }

/* ================================================================
   Gantt chart
   ================================================================ */


.plan-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0C9FCD;
  margin-bottom: 8px;
}

.plan-gantt-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 12px 0;
}

.plan-gantt-grid {
  display: grid;
  row-gap: 1px;
  column-gap: 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  user-select: none;
}

/* Vertical column separators via right-border on each cell */
.plan-gantt-corner,
.plan-gantt-week-hdr,
.plan-gantt-name,
.plan-gantt-cell {
  border-right: 1px solid var(--border);
}

.plan-gantt-corner {
  background: var(--sidebar-bg);
}

.plan-gantt-week-hdr {
  background: var(--sidebar-bg);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  padding: 4px 2px;
}

.plan-gantt-name {
  background: var(--surface);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  padding: 5px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}
.plan-gantt-name > span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.plan-gantt-name:hover { color: var(--accent); }

.plan-gantt-cell {
  background: var(--surface);
  min-height: 26px;
  cursor: crosshair;
}
.plan-gantt-cell:not(.plan-gantt-bar):hover { background: rgba(0,0,0,0.04); }

/* Bar cells: no border-right so consecutive weeks merge into a solid stripe */
.plan-gantt-bar {
  opacity: 0.82;
  border-right: none;
}
.plan-gantt-bar:hover { opacity: 1; cursor: col-resize; }

/* Thin border on the cell AFTER a bar so the end edge is crisp */
.plan-gantt-bar + .plan-gantt-cell,
.plan-gantt-bar + .plan-gantt-bar:last-child {
  border-left: 1px solid var(--border);
}

.plan-gantt-week-hdr.plan-gantt-now { color: var(--accent); font-weight: 700; background: var(--accent-light); }
.plan-gantt-cell.plan-gantt-now:not(.plan-gantt-bar) { background: var(--accent-light); }



/* Plan: gantt above, body below */
.plan-gantt { margin-bottom: 20px; }
.plan-body .plan-week-grid { flex: 1; min-width: 0; }

/* Indented child rows in plan tree */
.plan-task-row + .plan-task-row,
.plan-unsched-row + .plan-unsched-row { margin-top: 1px; }

/* Plan tree nodes */
.plan-tree-toggle {
  display: inline-block;
  width: 14px;
  flex-shrink: 0;
  font-size: 9px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  text-align: center;
  line-height: 1;
}
.plan-tree-toggle:hover { color: var(--accent); }

/* Context parent rows (ancestor shown for context, not scheduled in this week) */
.plan-task-context .plan-task-title { color: var(--text-muted); font-size: 12px; }
.plan-task-context .plan-task-dot { opacity: 0; width: 7px; }

.plan-tree-children { }

/* Gantt subtask rows */
.plan-gantt-toggle {
  display: inline-block;
  width: 14px;
  flex-shrink: 0;
  font-size: 9px;
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  user-select: none;
}
.plan-gantt-toggle:hover { color: var(--accent); }

.plan-gantt-sub-name {
  background: var(--bg);
  font-size: 12px;
  color: var(--text);
  padding: 3px 8px;
  cursor: pointer;
  border-right: 1px solid var(--border);
  min-height: 22px;
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
  overflow: hidden;
}
.plan-gantt-sub-name > span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.plan-gantt-sub-name:hover { background: var(--surface); }

/* Depth-based indent guide lines (replace ASCII tree characters) */
.plan-gantt-sub-name[data-depth="0"] { padding-left: 26px; }
/* No guide on depth-0 rows — guide only lives on the children below */

.plan-gantt-sub-name[data-depth="1"] { padding-left: 42px; }
.plan-gantt-sub-name[data-depth="1"]::before {
  content: '';
  position: absolute;
  left: 48px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.plan-gantt-sub-cell {
  background: var(--bg);
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-right: 1px solid var(--border);
}
.plan-gantt-sub-cell:hover { background: rgba(58,155,155,0.08); }
.plan-gantt-sub-cell.plan-gantt-now { background: var(--accent-light); }

.plan-sub-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
}
.plan-sub-dot:hover { transform: scale(1.3); }

.plan-gantt-drop-over { background: var(--accent-light) !important; }

/* ---- Cycle view ---- */
.cycle-content { padding-top: 4px; }

.cycle-phase-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 28px;
}

.cycle-phase-day {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.cycle-phase-name {
  font-size: 20px;
  font-weight: 700;
  font-family: 'New York', Georgia, serif;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--text);
}

.cycle-phase-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.cycle-phase-next {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.cycle-phase-avg {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 6px;
}

.cycle-section { margin-bottom: 28px; }

.cycle-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0C9FCD;
  margin-bottom: 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}

.cycle-log-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}

.cycle-log-label {
  font-size: 13px;
  color: var(--text-muted);
  width: 56px;
  flex-shrink: 0;
}

.cycle-log-dots { display: flex; gap: 7px; }

.cycle-log-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  padding: 0;
}

.cycle-log-dot:hover { border-color: var(--accent); }
.cycle-log-dot.active { background: var(--accent); border-color: var(--accent); }

.cycle-scale-legend {
  font-size: 10px;
  color: var(--text-light);
  margin-left: 6px;
  align-self: center;
  white-space: nowrap;
}

.cycle-add-day-row { display: flex; align-items: center; gap: 8px; padding: 2px 0 6px; }
.cycle-add-day-date {
  font-family: inherit; font-size: 13px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 8px; cursor: pointer;
}
.cycle-mood-row { align-items: flex-start; }

.cycle-tag-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border);
  align-self: center;
  margin: 0 4px;
  flex-shrink: 0;
}

.cycle-mood-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cycle-mood-chip {
  font-size: 12px;
  font-family: inherit;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.cycle-mood-chip:hover { border-color: var(--accent); color: var(--accent); }
.cycle-mood-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.cycle-log-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  cursor: pointer;
  margin-bottom: 14px;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}

.cycle-log-btn:hover { background: var(--accent); color: #fff; }
.cycle-log-btn:disabled { opacity: 0.5; cursor: default; pointer-events: none; }

.cycle-end-btn { color: var(--text-muted); border-color: var(--border); }
.cycle-end-btn:hover { background: var(--surface); color: var(--text); }

.cycle-period-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}

.cycle-period-item:last-child { border-bottom: none; }

.cycle-period-dates {
  flex: 1;
  font-size: 13px;
  color: var(--text);
}

.cycle-period-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.cycle-period-duration {
  font-size: 12px;
  color: var(--text-muted);
}

.cycle-period-ongoing {
  font-size: 11px;
  font-weight: 600;
  color: #BC6F83;
}

.cycle-period-cycle-len {
  font-size: 11px;
  color: var(--text-light);
}

.cycle-period-delete {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  padding: 2px 4px;
  opacity: 0;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.1s;
}

.cycle-period-item:hover .cycle-period-delete { opacity: 1; }
.cycle-period-delete:hover { color: var(--danger); }

/* Period add form */
.cycle-add-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 10px;
  align-items: center;
}

.cycle-add-form-hidden { display: none; }

.cycle-add-label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.cycle-add-hint {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--text-light);
  margin-top: -2px;
}

.cycle-add-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.cycle-add-actions .cycle-log-btn { margin-bottom: 0; }

.cycle-btn-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.cycle-btn-row .cycle-log-btn { margin-bottom: 0; }

.cycle-date-input {
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  outline: none;
  width: 100%;
}

.cycle-date-input:focus { border-color: var(--accent); }

/* Inline date editing on existing entries */
.cycle-date-editable {
  cursor: pointer;
  border-bottom: 1px dashed var(--text-light);
  transition: border-color 0.1s, color 0.1s;
}

.cycle-date-editable:hover { border-bottom-color: var(--accent); color: var(--accent); }

.cycle-date-empty {
  color: var(--text-light);
  font-style: italic;
  font-size: 12px;
}

.cycle-date-input-inline {
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  outline: none;
  width: 140px;
}

/* Past logs history */
.cycle-history-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.cycle-history-row:last-child { border-bottom: none; }

.cycle-history-date {
  font-size: 12px;
  color: var(--text-muted);
  width: 48px;
  flex-shrink: 0;
}

.cycle-history-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.cycle-history-dotgroup {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-right: 2px;
}

.cycle-history-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: transparent;
}
.cycle-history-dot.energy.filled  { background: var(--accent); border-color: var(--accent); }
.cycle-history-dot.anxiety.filled { background: #BC6F83; border-color: #BC6F83; }

.cycle-history-chip {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 8px;
}
.cycle-history-chip.mood { border-color: color-mix(in srgb, #BC6F83 40%, var(--border)); }
.cycle-history-chip.body { border-color: color-mix(in srgb, #d4845a 40%, var(--border)); }

.cycle-history-row-clickable { cursor: pointer; }
.cycle-history-row-clickable:hover { background: var(--bg-hover, rgba(255,255,255,0.04)); border-radius: 6px; }
.cycle-history-expand-icon { margin-left: 4px; font-size: 11px; opacity: 0.45; }
.cycle-history-editor { padding: 6px 0 6px 8px; border-left: 2px solid var(--border); margin: 0 0 4px 0; }

/* Today view nudge row */
.today-habit-chips {
  flex: 0 0 100%;
  order: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 10px;
}

.today-habit-chip {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 11px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.today-habit-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.today-habit-chip-done {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.today-habit-chip-done:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

.today-habit-chip-notdone {
  background: transparent;
  border-color: #BC6F83;
  color: #BC6F83;
}

.today-habit-chip-notdone:hover {
  background: rgba(188,111,131,0.1);
}

.today-habit-count {
  font-size: 11px;
  margin-left: 4px;
}

/* Habit icon picker */
.habit-icon-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 240px;
}

.habit-icon-picker-popover {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  margin-top: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.habit-icon-search {
  font-size: 12px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  outline: none;
  width: 100%;
}

.habit-icon-search:focus { border-color: var(--accent); }

.habit-icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  max-height: 180px;
  overflow-y: auto;
}

.habit-icon-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.habit-icon-opt:hover { background: var(--accent-light); color: var(--accent); }
.habit-icon-opt.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.habit-icon-opt svg { width: 14px; height: 14px; }

.habit-icon-row {
  flex: 0 0 100%;
  margin-top: 6px;
}

/* Icon button in habit grid row */
.habit-grid-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: background 0.1s, color 0.1s;
}

.habit-grid-icon:hover { background: var(--accent-light); color: var(--accent); }
.habit-grid-icon svg { width: 13px; height: 13px; }

.today-nudge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.today-nudge:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

.today-sort-active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-light);
}

.today-sort-active:hover {
  background: var(--accent-light);
}

.today-nudge-done {
  color: var(--text-light);
  border-color: transparent;
}

.today-nudge-done:hover {
  border-color: var(--border);
  background: transparent;
  color: var(--text-muted);
}

.today-nudge-icon {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* Today view cycle indicator */
.today-cycle-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 5px;
  cursor: pointer;
  transition: color 0.1s;
  user-select: none;
}

.today-cycle-pill:hover { color: var(--text); }

.today-cycle-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* ---- Habit add pill buttons ---- */
.habit-add-btns {
  display: flex;
  gap: 8px;
  padding: 12px 0 4px;
}

.habit-add-pill-btn {
  font-size: 11px;
  font-family: inherit;
  color: var(--text-light);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 20px;
  padding: 3px 12px;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
}

.habit-add-pill-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-light);
  border-style: solid;
}

/* ---- Add habit modal ---- */
.habit-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.habit-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  min-width: 280px;
  max-width: 340px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.habit-modal-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.habit-modal-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-light);
  line-height: 1;
  padding: 0;
}
.habit-modal-close:hover { color: var(--text); }

.habit-modal-input {
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.habit-modal-input:focus { border-color: var(--accent); }

.habit-modal-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.habit-modal-icon-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.habit-modal-icon-preview {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: border-color 0.1s;
}
.habit-modal-icon-preview:hover { border-color: var(--accent); }
.habit-modal-icon-preview i { width: 16px; height: 16px; pointer-events: none; }

.habit-modal-icon-hint {
  font-size: 11px;
  color: var(--text-light);
}

.habit-modal-submit {
  align-self: flex-end;
  font-size: 12px;
  padding: 6px 14px;
}

/* ---- Add category popover ---- */
.habit-cat-add-pop {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 1001;
  min-width: 180px;
}

/* ---- Daily log ---- */
.log-quick-add {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 22px;
}
.log-quick-input {
  flex: 1 1 auto;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.log-quick-input:focus { outline: none; border-color: var(--accent); }
.log-type-select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-transform: capitalize;
}
.log-add-btn { white-space: nowrap; }

.log-days { display: flex; flex-direction: column; gap: 22px; }
.log-day-head {
  color: #0C9FCD;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.log-entry { border-radius: 8px; }
.log-entry-main {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 8px;
}
.log-entry-main:hover { background: var(--accent-light); }
.log-disclosure {
  flex: 0 0 18px;
  width: 18px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  padding: 2px;
}
.log-disclosure.empty { visibility: hidden; }
.log-type-chip {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: capitalize;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--chip);
  background: color-mix(in srgb, var(--chip) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip) 35%, transparent);
}
.log-type-chip-edit { cursor: pointer; }
.log-type-chip-edit:hover { background: color-mix(in srgb, var(--chip) 30%, transparent); }

/* type picker popover */
.log-type-menu {
  position: absolute;
  z-index: 1100;
  min-width: 144px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
}
.log-type-menu-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  color: var(--text);
  text-align: left;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  text-transform: capitalize;
}
.log-type-menu-opt:hover { background: var(--accent-light); }
.log-type-menu-opt.active { font-weight: 700; }
.log-type-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 999px; background: var(--chip); }

.log-detail-sectionlabel { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

/* detail as an editable bullet list */
.log-detail-bullets { display: flex; flex-direction: column; gap: 1px; }
.log-bullet { display: flex; align-items: center; gap: 8px; }
.log-bullet-dot { flex: 0 0 auto; color: var(--text-muted); font-size: 0.9rem; line-height: 1; }
/* specific enough to beat the global input[type=text] border rule */
.log-detail-bullets .log-bullet-input {
  flex: 1 1 auto;
  width: auto;
  font: inherit;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 2px 2px;
}
.log-detail-bullets .log-bullet-input::placeholder { color: var(--text-light); }
.log-detail-bullets .log-bullet-input:focus { outline: none; border: none; }

/* Log filter bar */
.log-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.log-filter-select {
  width: auto;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
}
.log-filter-clear { border: none; background: none; color: var(--text-muted); font-size: 0.82rem; cursor: pointer; padding: 4px 6px; }
.log-filter-clear:hover { color: var(--accent); }

/* area / people tag rows in the expanded detail */
.log-tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.log-tag-label { min-width: 48px; font-size: 0.74rem; color: var(--text-muted); }
.log-tag-chip {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 0.76rem;
  padding: 1px 4px 1px 9px;
  border-radius: 999px;
  background: var(--accent-light);
  color: var(--accent);
}
.log-tag-x { border: none; background: none; color: inherit; cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 0 2px; opacity: 0.7; }
.log-tag-x:hover { opacity: 1; }
.log-tag-row .log-tag-input {
  flex: 0 0 auto; width: 116px;
  font: inherit; font-size: 0.78rem;
  color: var(--text); background: transparent;
  border: none; border-bottom: 1px dashed var(--border);
  border-radius: 0; padding: 2px 2px;
}
.log-tag-row .log-tag-input:focus { outline: none; border-bottom: 1px solid var(--accent); }
.log-bullet-marker { flex: 0 0 auto; color: var(--text-muted); font-size: 1rem; line-height: 1; }
.log-entry-title { flex: 0 1 auto; cursor: text; color: var(--text); min-width: 0; }
.log-entry-spacer { flex: 1 1 auto; }

/* meta (sub-point count + link icons) sits inline, right after the entry text */
.log-entry-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }

/* inline sub-point expander with a count */
.log-subexpander {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.72rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 5px;
}
.log-subexpander.lit { color: var(--accent); }
.log-subexpander:hover { background: var(--accent-light); color: var(--accent); }
.log-subexpander-tri { font-size: 0.66rem; }
.log-subexpander-count { font-weight: 600; position: relative; top: 1px; }

/* lit link icons (task / note) with a hover speech-bubble of the linked name */
.log-link-icon {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  border: none;
  background: none;
  cursor: pointer;
  padding: 1px;
  color: var(--text-muted);
}
.log-link-icon.lit { color: var(--accent); }
.log-link-icon:not(.lit) { opacity: 0.4; }
.log-link-icon:not(.lit):hover { opacity: 1; }
.log-link-icon:hover { color: var(--accent-hover); }
.log-link-icon svg { width: 13px; height: 13px; }
.log-link-icon[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 6px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.72rem;
  line-height: 1.3;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 60;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.log-link-icon[data-tip]:hover::before {
  content: '';
  position: absolute;
  bottom: 100%;
  right: 8px;
  margin-bottom: 1px;
  border: 4px solid transparent;
  border-top-color: var(--text);
  pointer-events: none;
  z-index: 60;
}

.log-entry-del {
  flex: 0 0 auto;
  margin-left: auto;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  padding: 2px;
  display: flex;
}
.log-entry-main:hover .log-entry-del { opacity: 1; }
.log-entry-del:hover { color: var(--danger); }
.log-entry-del svg { width: 14px; height: 14px; }

/* popover on a heading-row link icon: open/unlink, or add a link */
.log-link-popover {
  position: absolute;
  z-index: 1100;
  min-width: 160px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
}
.log-link-popover-head {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  padding: 5px 8px 4px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-link-popover-opt {
  text-align: left;
  border: none;
  background: none;
  color: var(--text);
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
}
.log-link-popover-opt:hover { background: var(--accent-light); }
.log-link-popover-opt.danger:hover { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.log-link-picker { display: flex; flex-direction: column; gap: 4px; min-width: 230px; }

.log-title-edit {
  flex: 1 1 auto;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 3px 7px;
}

.log-entry-detail {
  margin: 2px 0 10px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.log-detail-row { display: flex; align-items: center; gap: 8px; }
.log-detail-label { font-size: 0.78rem; color: var(--text-muted); }
.log-detail-body {
  width: 100%;
  min-height: 54px;
  resize: none;
  overflow: hidden;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  line-height: 1.5;
}
.log-detail-body:focus { outline: none; border-color: var(--accent); }

.log-empty, .log-loading { color: var(--text-muted); padding: 24px 4px; }

/* small link indicators on the entry row (the actual links live in the detail) */
.log-link-indicator {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 1px;
  opacity: 0.6;
}
.log-link-indicator:hover { color: var(--accent); opacity: 1; }
.log-link-indicator svg { width: 12px; height: 12px; }

/* link editor inside an expanded entry */
.log-links-edit { display: flex; flex-direction: column; gap: 6px; }
.log-link-current { color: var(--text); font-size: 0.85rem; }
.log-link-action {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 2px 9px;
  font-size: 0.78rem;
  cursor: pointer;
}
.log-link-action:hover { border-color: var(--accent); color: var(--accent); }

/* inline task picker */
.log-task-picker-input {
  flex: 1 1 auto;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 4px 8px;
}
.log-task-picker-menu {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
}
.log-task-picker-opt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  text-align: left;
  border: none;
  background: none;
  color: var(--text);
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
}
.log-task-picker-opt:hover { background: var(--accent-light); }
.log-task-picker-opt em { color: var(--text-muted); font-style: normal; font-size: 0.74rem; flex: 0 0 auto; }

/* note viewer/editor modal */
.log-doc-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.42);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.log-doc-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: min(760px, 92vw);
  max-height: 86vh;
  display: flex; flex-direction: column;
  box-shadow: 0 18px 50px rgba(0,0,0,0.3);
}
.log-doc-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.log-doc-title {
  flex: 1 1 auto;
  font: inherit; font-size: 1.05rem; font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 8px;
}
.log-doc-title:hover { border-color: var(--border); }
.log-doc-title:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.log-doc-close {
  border: none; background: none; color: var(--text-muted);
  cursor: pointer; display: flex; padding: 4px;
}
.log-doc-close:hover { color: var(--text); }
.log-doc-close svg { width: 18px; height: 18px; }
.log-doc-content { padding: 16px 18px; overflow-y: auto; }
.log-doc-editor {
  width: 100%; min-height: 50vh; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88rem; line-height: 1.55;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: 12px;
}
.log-doc-editor:focus { outline: none; border-color: var(--accent); }
.log-doc-rendered { color: var(--text); line-height: 1.6; }
.log-doc-rendered h1, .log-doc-rendered h2, .log-doc-rendered h3, .log-doc-rendered h4 { color: var(--text); margin: 1em 0 0.4em; line-height: 1.25; }
.log-doc-rendered h1 { font-size: 1.5rem; }
.log-doc-rendered h2 { font-size: 1.25rem; }
.log-doc-rendered h3 { font-size: 1.08rem; }
.log-doc-rendered p { margin: 0.5em 0; }
.log-doc-rendered ul, .log-doc-rendered ol { margin: 0.5em 0; padding-left: 1.5em; }
.log-doc-rendered li { margin: 0.2em 0; }
.log-doc-rendered code { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 0.5px 4px; font-size: 0.88em; }
.log-doc-rendered pre { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px; overflow-x: auto; }
.log-doc-rendered pre code { border: none; padding: 0; background: none; }
.log-doc-rendered a { color: var(--accent); }

/* ---- Calendar ---- */
.cal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cal-controls { display: flex; align-items: center; gap: 6px; }
.cal-nav-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 7px; padding: 4px 9px; font-size: 0.85rem; cursor: pointer; line-height: 1;
}
.cal-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.cal-today-btn { font-size: 0.8rem; }
/* Weekly Plan: show/hide the subscribed calendar overlay. Dashed + muted when off. */
.cal-evt-btn { display: inline-flex; align-items: center; justify-content: center; padding: 5px 8px; margin-left: 4px; }
.cal-evt-btn svg { width: 15px; height: 15px; }
.cal-evt-btn.off { color: var(--text-muted); border-style: dashed; }
.cal-mode-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; margin-left: 4px; }
.cal-mode-btn { border: none; background: var(--surface); color: var(--text-muted); padding: 4px 12px; font-size: 0.82rem; cursor: pointer; }
.cal-mode-btn.active { background: var(--accent-light); color: var(--accent); font-weight: 600; }

.cal-wrap { margin-top: 12px; }
.cal-row { display: grid; }              /* grid-template-columns set inline (literal repeat) */
.cal-daysrow .cal-dayhead {
  text-align: center; font-size: 0.8rem; color: var(--text-muted);
  padding: 6px 2px; border-left: 1px solid var(--border);
}
.cal-daysrow .cal-dayhead-today { color: var(--accent); font-weight: 700; }

.cal-allday { border-top: 1px solid var(--border); min-height: 30px; }
.cal-allday-gutter { font-size: 0.62rem; color: var(--text-light); text-align: right; padding: 4px 6px 0 0; text-transform: uppercase; letter-spacing: 0.03em; }
.cal-allday-cell { border-left: 1px solid var(--border); padding: 3px; display: flex; flex-direction: column; gap: 2px; min-height: 26px; min-width: 0; }
.cal-chip {
  font-size: 0.75rem;
  background: color-mix(in srgb, var(--bc, var(--accent)) 16%, transparent);
  color: var(--bc, var(--accent));
  border-radius: 5px; padding: 2px 6px; cursor: grab;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; max-width: 100%;
}
.cal-chip:active { cursor: grabbing; }

.cal-scroll { overflow-y: auto; max-height: calc(100vh - 230px); border-top: 1px solid var(--border); }
/* Day headers + all-day row, pinned to the top of the scroll area so they don't
   scroll away with the hour grid. Opaque background so hour lines don't show through. */
.cal-sticky-head { position: sticky; top: 0; z-index: 5; background: var(--bg); }
.cal-sticky-head .cal-allday { border-bottom: 1px solid var(--border); }
.cal-grid { display: grid; position: relative; }   /* columns set inline */
.cal-gutter { display: flex; flex-direction: column; }
.cal-hour-label { height: var(--cal-hour-h); font-size: 0.66rem; color: var(--text-light); text-align: right; padding-right: 6px; transform: translateY(-0.5em); }
.cal-col { position: relative; border-left: 1px solid var(--border); }
.cal-col-today { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.cal-hour-line { height: var(--cal-hour-h); border-top: 1px solid var(--border); box-sizing: border-box; }
.cal-hour-line:nth-child(odd) { border-top-style: solid; }

.cal-block {
  position: absolute; left: 2px; right: 2px;
  background: color-mix(in srgb, var(--bc, var(--accent)) 18%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--bc, var(--accent)) 45%, transparent);
  border-left: 3px solid var(--bc, var(--accent));
  border-radius: 5px; padding: 2px 5px; overflow: hidden;
  cursor: grab; font-size: 0.74rem; color: var(--text);
}
.cal-block:active { cursor: grabbing; }
.cal-block-time { font-size: 0.66rem; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; gap: 4px; line-height: 1.1; }
.cal-block-badges { position: absolute; bottom: 2px; right: 4px; display: flex; align-items: center; gap: 3px; pointer-events: none; }
.cal-block-count { font-size: 0.62rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cal-block-done { font-size: 0.66rem; line-height: 1; font-weight: 700; color: var(--accent); }
.cal-block-droptarget { outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
/* Future occurrence of a recurring session: same shape as a real block, but
   dashed and faded so a planned slot never reads as already-committed work.
   Solidifies on hover to signal it's clickable. */
.cal-block-ghost {
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--bc, var(--accent)) 55%, transparent);
  border-left: 3px dashed var(--bc, var(--accent));
  opacity: 0.62; cursor: pointer;
}
.cal-block-ghost:hover { opacity: 1; background: color-mix(in srgb, var(--bc, var(--accent)) 10%, var(--bg)); }
.cal-block-repeat { font-size: 0.66rem; line-height: 1; color: var(--text-muted); }
.cal-block-skip {
  position: absolute; top: 1px; right: 3px; display: none;
  font-size: 0.62rem; line-height: 1; padding: 1px 3px; border-radius: 3px;
  color: var(--text-muted); background: var(--bg); cursor: pointer;
}
.cal-block-ghost:hover .cal-block-skip { display: block; }
.cal-block-skip:hover { color: var(--text); }
.detail-series-note {
  font-size: 0.76rem; color: var(--text-muted); line-height: 1.4;
  padding: 6px 8px; border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
  border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
/* Hover-revealed completion check on a calendar block; a bg ring keeps it legible over the title. */
.cal-block-check { position: absolute; top: 2px; left: 3px; width: 14px; height: 14px; opacity: 0; z-index: 2; box-shadow: 0 0 0 2px var(--bg); transition: opacity 0.08s; }
.cal-block:hover .cal-block-check { opacity: 1; }
.cal-block-title { font-weight: 500; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.cal-block-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
/* Read-only external calendar events (ICS overlay): translucent, no interaction. */
.cal-event { position: absolute; left: 1px; right: 1px; border-radius: 5px; padding: 1px 5px 0; overflow: hidden; pointer-events: none; z-index: 1; background: color-mix(in srgb, var(--bc) 16%, var(--bg)); border: 1px solid color-mix(in srgb, var(--bc) 40%, transparent); border-left: 3px solid var(--bc); color: var(--text); font-size: 0.74rem; }
.cal-event .cal-block-time { color: var(--bc); }
.cal-event .cal-block-title { font-weight: 500; line-height: 1.15; }
.cal-event-chip { display: block; max-width: 100%; margin: 1px 0; padding: 1px 6px; border-radius: 5px; font-size: 0.66rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: color-mix(in srgb, var(--bc) 16%, transparent); border-left: 3px solid var(--bc); }
/* Per-event colour dot (the event itself is pointer-events:none; this re-enables
   interaction just for recolouring). Always faintly visible since the parent
   can't receive :hover. */
.cal-event-color { position: absolute; bottom: 2px; right: 2px; width: 11px; height: 11px; padding: 0; border: none; border-radius: 50%; background: var(--bc); opacity: 0.5; cursor: pointer; pointer-events: auto; box-shadow: 0 0 0 1.5px var(--bg); transition: opacity 0.1s, transform 0.1s; }
.cal-event-color:hover { opacity: 1; transform: scale(1.2); }
.cal-color-pop { position: absolute; z-index: 1000; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 7px; display: flex; gap: 6px; flex-wrap: wrap; width: 126px; box-shadow: 0 6px 20px rgba(0,0,0,0.22); }
.cal-color-pop > button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); cursor: pointer; padding: 0; }
.cal-color-pop .cal-color-reset { width: 100%; height: auto; border-radius: 5px; font-size: 0.72rem; padding: 3px 6px; background: var(--accent-light); border: 1px solid var(--border); color: var(--text); }
/* Calendar subscriptions editor (Settings → Features). */
.settings-cal-color { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 5px; background: none; cursor: pointer; }
.settings-cal-add { display: flex; gap: 5px; margin-top: 6px; }
.settings-cal-name-input { flex: 0 0 90px; }
.settings-cal-url-input { flex: 1 1 auto; min-width: 0; }
.cal-block-resize:hover { background: color-mix(in srgb, var(--accent) 40%, transparent); }

/* ---- Plan: weekly view (task list + week grid) ---- */
/* CSS grid (not flex): a fixed 320px list + a 1fr calendar column that always
   consumes the rest of the width. */
.plan-week-split {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 14px;
  margin-top: 12px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}
.plan-week-left {
  min-width: 0; display: flex; flex-direction: column; gap: 8px;
  max-height: calc(100vh - 200px);
}
.plan-week-toolbar { display: flex; flex-direction: column; gap: 2px; flex: none; }
.plan-week-search, .plan-week-add {
  display: flex; align-items: center; gap: 6px; padding: 2px 4px;
}
.plan-tool-icon { width: 14px; height: 14px; color: var(--text-muted); flex: none; }
.plan-week-add .add-task-icon { color: var(--text-muted); font-weight: 600; line-height: 1; }
.plan-week-search-input, .plan-week-add-input {
  flex: 1; min-width: 0; border: none; background: transparent;
  color: var(--text); font-size: 0.85rem; outline: none; padding: 3px 0;
}
.plan-week-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px;
}
.plan-week-list-head { font-size: 0.72rem; color: var(--text-muted); padding: 4px 6px 8px; text-transform: uppercase; letter-spacing: 0.03em; }
.plan-week-group-head { font-size: 0.72rem; font-weight: 700; color: #0C9FCD; padding: 12px 6px 4px; text-transform: uppercase; letter-spacing: 0.03em; }
.plan-week-group-head:first-child { padding-top: 2px; }
/* flex column so the calendar stretches to the column width (a grid item's
   width is "indefinite" for %, so .cal-wrap's width:100% was collapsing). */
.plan-week-grid { min-width: 0; display: flex; flex-direction: column; }
.plan-week-grid > .cal-wrap { align-self: stretch; }
.plan-list-row { display: flex; align-items: flex-start; gap: 6px; padding: 4px 6px; border-radius: 6px; }
.plan-list-row:hover { background: var(--accent-light); }
/* Already time-blocked on the calendar: dimmed so it's easy to skip while
   planning. Still fully draggable/clickable; hover restores full opacity. */
.plan-list-placed { opacity: 0.4; }
.plan-list-placed:hover { opacity: 1; }
/* "Today" pinned group at the top of the plan list. */
.plan-today-head { color: var(--accent); }
.plan-overdue-head { color: #BC6F83; }
/* Small indicator that a task is already planned into a scheduled session. */
.plan-list-insession { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--accent); opacity: 0.75; }
.plan-list-insession i { width: 13px; height: 13px; }
.plan-list-session { flex: 0 0 auto; display: flex; color: var(--accent); cursor: grab; opacity: 0.65; margin-top: 3px; }
.plan-list-session:hover { opacity: 1; }
.plan-list-session svg { width: 13px; height: 13px; }
.plan-list-toggle { flex: 0 0 14px; width: 14px; text-align: center; color: var(--text-muted); font-size: 0.68rem; line-height: 1; user-select: none; margin-top: 3px; }
.plan-list-toggle.has-children { cursor: pointer; }
.plan-list-toggle.has-children:hover { color: var(--accent); }
.plan-list-pill { flex: 0 0 auto; max-width: 120px; overflow: hidden; }

/* Per-type coloured "type" pills (context tags) */
.meta-tag.meta-ctx-colored {
  color: var(--ctx);
  background: color-mix(in srgb, var(--ctx) 14%, transparent);
  border: none;
}

/* Plan list pill: icon only (label hidden when there's an icon; on hover the
   title attribute still shows the type name) */
.plan-list-pill.meta-tag .tag-icon + span { display: none; }
.plan-list-pill.meta-tag .tag-icon { margin-right: 0; }

/* Connecting line for the subtask tree */
.plan-subtree { margin-left: 13px; border-left: 1px solid var(--border); }
.plan-list-title {
  flex: 1 1 auto; min-width: 0; font-size: 0.85rem; color: var(--text); cursor: grab;
  overflow-wrap: anywhere; line-height: 1.35;
}
/* Slightly smaller than the main-row check, nudged to sit on the first text line. */
.plan-list-check { width: 15px; height: 15px; margin-top: 2px; }


/* Sessions record in the task detail panel */
.detail-sessions { display: flex; flex-direction: column; gap: 4px; }
.detail-session-row {
  display: flex; align-items: baseline; gap: 8px; padding: 4px 8px;
  border-radius: 6px; cursor: pointer; background: var(--accent-light);
}
.detail-session-row:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.detail-session-row.done { opacity: 0.55; text-decoration: line-through; }
.detail-session-n { font-weight: 600; font-size: 0.85rem; flex: 0 0 auto; }
.detail-session-meta { font-size: 0.78rem; color: var(--text-muted); }

/* Live drop preview while dragging a task onto the calendar */
.cal-drop-preview {
  position: absolute; left: 2px; right: 2px; z-index: 6;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px dashed var(--accent); border-radius: 4px;
  font-size: 0.7rem; font-weight: 600; color: var(--accent);
  padding: 1px 4px; pointer-events: none; overflow: hidden;
}

/* Category strip in the plan view (drag a category to block out its time) */
.plan-cat-strip { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 4px 8px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
/* Domain tabs above the weekly plan list. */
.plan-domain-tabs { display: flex; gap: 4px; padding: 2px 4px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.plan-domain-tab { flex: 1 1 auto; border: none; background: var(--surface); color: var(--text-muted); padding: 4px 8px; font-size: 0.78rem; border-radius: 6px; cursor: pointer; }
.plan-domain-tab:hover { background: var(--accent-light); }
.plan-domain-tab.active { background: var(--accent-light); color: var(--accent); font-weight: 600; }
.plan-week-empty { font-size: 0.82rem; color: var(--text-muted); padding: 12px 6px; }
.plan-cat-chip {
  display: inline-flex; align-items: center; gap: 4px; cursor: grab;
  font-size: 0.72rem; font-weight: 600; border-radius: 999px; padding: 2px 8px;
  color: var(--ctx); background: color-mix(in srgb, var(--ctx) 14%, transparent);
}
.plan-cat-chip:active { cursor: grabbing; }
.plan-cat-chip .tag-icon { width: 12px; height: 12px; }
/* Area chips sit in the same strip but read as outlined rather than filled, so
   "type" vs "area" is distinguishable at a glance. */
.plan-area-chip { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ctx) 45%, transparent); }

/* Session "tasks in this session" UI (detail panel) */
.session-members { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
/* Plain title in the session panel's simple trees (members + candidates). */
.session-node-title { flex: 1 1 auto; min-width: 0; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-member.done .session-node-title,
.session-subnode.done .session-node-title { text-decoration: line-through; opacity: 0.6; }
/* Complete toggle in the session panel. */
.session-check { flex: 0 0 auto; width: 15px; height: 15px; padding: 0; border: 1.5px solid var(--border); border-radius: 4px; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; color: transparent; }
.session-check.checked { background: var(--accent); border-color: var(--accent); color: #fff; }
.session-cancel { flex: 0 0 auto; width: 15px; height: 15px; padding: 0; border: 1.5px solid var(--border); border-radius: 4px; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; color: transparent; }
.session-cancel:hover { border-color: var(--text-muted); color: var(--text-muted); }
.session-cancel.cancelled { background: var(--text-muted); border-color: var(--text-muted); color: #fff; }
/* Scheduled-date pill in the session selector (disambiguates repeating tasks). */
.session-node-date { flex: 0 0 auto; font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
/* Domains editor (Settings → Lenses). */
.settings-lens-hint { font-size: 0.78rem; color: var(--text-muted); margin: 2px 0 8px; }
.settings-domain-select { margin-left: auto; font-size: 0.82rem; padding: 2px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg, #fff); color: inherit; cursor: pointer; }
/* Nested subtask rows: indented, lighter, no background fill of their own. */
.session-subnode { background: none !important; color: var(--text-muted); font-size: 0.82rem; padding-top: 1px; padding-bottom: 1px; }
.session-member { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; background: var(--accent-light); font-size: 0.85rem; }
.session-member.done { opacity: 0.55; text-decoration: line-through; }
.session-member-title { flex: 1 1 auto; min-width: 0; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-member-rm { flex: 0 0 auto; border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 1rem; line-height: 1; padding: 0 2px; }
.session-member-rm:hover { color: var(--danger, #dc2626); }
.session-add-head { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin: 4px 0; }
.session-candidates { display: flex; flex-direction: column; gap: 2px; max-height: 200px; overflow-y: auto; }
.session-candidate { display: flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 6px; font-size: 0.85rem; }
.session-candidate:hover { background: var(--accent-light); }
.session-cand-add { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--border); background: none; cursor: pointer; color: var(--accent); font-size: 0.9rem; line-height: 1; }
.session-cand-add:hover { background: var(--accent-light); }
.session-cand-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-empty { font-size: 0.8rem; color: var(--text-muted); padding: 2px 4px; }