/* ── TASKS LOADING SPINNER ────────────────────── */
@keyframes tasksSpin{to{transform:rotate(360deg)}}
@keyframes tasksSpinnerFadeIn{from{opacity:0}to{opacity:1}}
.tasks-loading-wrap{display:flex;align-items:center;justify-content:center;min-height:50vh;width:100%;opacity:0;animation:tasksSpinnerFadeIn .18s ease both;animation-delay:.08s}
.tasks-loading-spinner{width:28px;height:28px;border-radius:50%;border:2.5px solid rgba(255,255,255,.12);border-top-color:rgba(255,255,255,.65);animation:tasksSpin .75s linear infinite}

/* ── TASKS PAGE ─────────────────────────────── */
.tasks-header{text-align:center;margin-bottom:0}
.tasks-title{font-family:var(--font);font-style:normal;font-weight:700;font-size:32px;line-height:1;letter-spacing:-.4px}
.tasks-title b{font-weight:700;color:#fff}
.tasks-bk{font-family:var(--font);font-style:normal;font-size:12px;color:var(--t3);letter-spacing:.18em;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:9px}
.bkl{width:22px;height:1px;background:var(--t3);opacity:.4}

.tasks-top-tools{
  display:flex;
  align-items:center;
  width:100%;
  max-width:none;
  justify-content:stretch;
  pointer-events:auto;
  min-height:58px;
  padding:6px 18px 0;
}
.tasks-rail-wrap{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  min-height:52px;
  padding:0 2px;
}
.tasks-rail{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:14px;
  padding:2px 2px 6px;
}
.tasks-rail-main,
.tasks-rail-side{
  display:flex;
  align-items:center;
  gap:10px;
}
.tasks-rail-main{
  grid-column:2;
  justify-self:center;
}
.tasks-rail-side{
  grid-column:3;
  justify-self:end;
}
.tasks-rail-side-left{
  grid-column:1;
  justify-self:start;
}
.tasks-rail-all-wrap{
  display:flex;
  align-items:center;
}
/* Hostile parent rail (.tasks-rail-side-left) needs a gap between its
   sibling chips: All / its filters wrap / Daily. Without this, All and
   Daily would touch. */
.tasks-rail-side-left{gap:8px}
/* Filters are always visible now. The previous hover-to-reveal behavior
   was tied to hovering "All", but All is now disabled and shouldn't have
   any hover effect at all (that was bug #2 in the last batch). */
.tasks-rail-filters{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:8px;
}
.tasks-rail-chip{appearance:none;border:none;font-family:var(--font)}
.tasks-rail-chip{
  min-height:42px;
  padding:0 18px;
  border-radius:14px;
  border:1px solid var(--chip-border);
  background:var(--chip-bg);
  color:var(--chip-text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  flex-shrink:0;
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:none;
  transition:background .16s,border-color .16s,color .16s,transform .16s,opacity .16s;
  user-select:none;
  -webkit-user-select:none;
}
.tasks-rail-chip:hover,
.tasks-rail-chip:focus-visible{
  background:var(--chip-hover-bg);
  border-color:var(--chip-hover-border);
  color:var(--chip-hover-text);
}
.tasks-rail-chip.active{
  background:var(--chip-active-bg);
  border-color:var(--chip-active-border);
  color:var(--chip-active-text);
  box-shadow:var(--chip-active-shadow);
}
.tasks-rail-chip-add{
  width:42px;
  min-width:42px;
  padding:0;
  justify-content:center;
}
.tasks-rail-chip-filter{
  min-height:38px;
  padding:0 14px;
  font-size:11px;
  color:var(--t3);
  background:rgba(255,255,255,.035);
}
/* Disabled "All" chip: looks like a chip, but reads "not-allowed" and
   shows an "Unavailable" tooltip on hover, matching the disabled-task
   button tooltip pattern. Click is a no-op (set in JS). */
.tasks-rail-chip-disabled{
  cursor:not-allowed!important;
  color:var(--t3)!important;
  opacity:.6;
  position:relative;
}
.tasks-rail-chip-disabled:hover,
.tasks-rail-chip-disabled:focus-visible{
  background:var(--chip-bg)!important;
  border-color:var(--chip-border)!important;
  color:var(--t3)!important;
}
.tasks-rail-chip-disabled[data-tip]:hover::after{
  /* Position BELOW the chip — it's at the very top of the page and the
     above-the-chip variant got clipped by the page chrome. */
  content:attr(data-tip);position:absolute;top:calc(100% + 6px);left:50%;
  transform:translateX(-50%);background:#252525;border:1px solid rgba(255,255,255,.12);
  color:var(--t1);font-size:11px;padding:3px 7px;border-radius:5px;white-space:nowrap;
  pointer-events:none;z-index:999;
}
/* Profile chip (user icon + name, opens the profile dropdown). */
.tasks-rail-profile-slot{display:inline-flex;align-items:center;margin-left:auto}
.tasks-rail-profile-chip{
  gap:6px;
  padding-left:10px;
  background:var(--chip-bg);
  border-color:var(--chip-border);
  max-width:200px;
}
.tasks-rail-profile-icon{display:inline-flex;align-items:center;color:var(--t2)}
.tasks-rail-profile-name{
  font-size:12px;font-weight:600;color:var(--t1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;
}
/* Profile dropdown */
.profile-dropdown{
  position:fixed;z-index:920;min-width:240px;max-width:280px;
  padding:6px;border-radius:12px;
  background:var(--panel-bg);border:1px solid var(--panel-border);
  box-shadow:var(--panel-shadow,0 16px 48px rgba(0,0,0,.45));
  display:flex;flex-direction:column;gap:2px;
  animation:profileDropdownIn .14s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes profileDropdownIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.profile-dropdown-list{display:flex;flex-direction:column;gap:1px}
.profile-dropdown-row{
  display:flex;align-items:center;gap:0;padding:0;border-radius:8px;
}
.profile-dropdown-row.active{background:rgba(102,144,242,.10)}
.profile-dropdown-pick{
  flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:none;border:none;color:var(--t1);
  padding:7px 9px;border-radius:8px;cursor:pointer;font-family:var(--font);
  font-size:12px;font-weight:600;text-align:left;
  transition:background .12s;
}
.profile-dropdown-pick:hover{background:rgba(255,255,255,.05)}
.profile-dropdown-row.active .profile-dropdown-pick-name{color:#c9d7ff}
.profile-dropdown-pick-mark{color:var(--acc);font-size:10px}
.profile-dropdown-icon-btn{
  width:26px;height:26px;flex:0 0 26px;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--t3);cursor:pointer;
  border-radius:6px;transition:background .12s,color .12s;
}
.profile-dropdown-icon-btn:hover{background:rgba(255,255,255,.06);color:var(--t1)}
.profile-dropdown-icon-btn.danger:hover{background:rgba(228,58,58,.10);color:#e65b5b}
.profile-dropdown-sep{height:1px;background:rgba(255,255,255,.07);margin:4px 2px}
.profile-dropdown-action{
  display:flex;align-items:center;gap:9px;width:100%;
  background:none;border:none;color:var(--t2);
  padding:7px 9px;border-radius:8px;cursor:pointer;font-family:var(--font);
  font-size:12px;font-weight:600;text-align:left;
  transition:background .12s,color .12s;
}
.profile-dropdown-action:hover{background:rgba(255,255,255,.05);color:var(--t1)}
.profile-dropdown-action.danger:hover{background:rgba(228,58,58,.08);color:#e65b5b}
.profile-dropdown-action svg{color:var(--t3)}
.profile-dropdown-action:hover svg{color:var(--t1)}
.profile-dropdown-action.danger:hover svg{color:#e65b5b}
.tasks-rail-chip-filter.active{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.16);
  color:var(--t1);
}
.tasks-rail-chip-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.tasks-rail-item{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
}
.tasks-rail-chip-icon-only{
  gap:0;
}
.tasks-rail-chip-menu.active{
  border-color:rgba(255,255,255,.24);
}
@keyframes tasks-rail-wiggle{
  0%{transform:rotate(-1.1deg)}
  50%{transform:rotate(1.1deg)}
  100%{transform:rotate(-1.1deg)}
}
body.task-categories-reordering .tasks-rail-item .tasks-rail-chip-menu{
  animation:tasks-rail-wiggle .28s ease-in-out infinite;
  cursor:grab;
}
body.task-categories-reordering .tasks-rail-item:nth-child(even) .tasks-rail-chip-menu{
  animation-delay:-.14s;
}
body.task-categories-reordering .tasks-rail-item-dragging .tasks-rail-chip-menu{
  animation:none;
  cursor:grabbing;
}
body.reduce-motion.task-categories-reordering .tasks-rail-item .tasks-rail-chip-menu{
  animation:none;
}
.tasks-rail-item-dragging{
  z-index:20;
}
.tasks-pop{
  position:fixed;
  z-index:920;
  display:none;
}
.tasks-pop.open{display:block}
.tasks-pop-list{
  width:260px;
  padding:8px;
  border-radius:16px;
  border:1px solid var(--panel-border);
  background:var(--panel-bg);
  box-shadow:0 20px 54px rgba(0,0,0,.48);
  backdrop-filter:blur(14px);
}
.tasks-pop-list.compact{
  width:192px;
  padding:6px;
  border-radius:14px;
}
.tasks-pop-item{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  padding:11px 12px;
  border:none;
  border-radius:12px;
  background:none;
  color:var(--t2);
  cursor:pointer;
  text-align:left;
  transition:background .14s,color .14s;
}
.tasks-pop-item:hover,
.tasks-pop-item:focus-visible{
  background:rgba(255,255,255,.05);
  color:var(--t1);
}
.tasks-pop-item.danger{color:#d07b7b}
.tasks-pop-item.has-icon{flex-direction:row;align-items:center;gap:10px}
.tasks-pop-item.has-icon .tasks-pop-item-sub{margin-left:auto;text-align:right}
.tasks-pop-item-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:var(--t3);flex-shrink:0}
.tasks-pop-item-icon svg{width:14px;height:14px}
.tasks-pop-item:hover .tasks-pop-item-icon,
.tasks-pop-item:focus-visible .tasks-pop-item-icon{color:var(--t2)}
.tasks-pop-item.danger .tasks-pop-item-icon{color:#d07b7b}
.tasks-pop-item-label{font-size:12px;font-weight:700;letter-spacing:.01em}
.tasks-pop-item-sub{font-size:11px;color:var(--t3);line-height:1.45}
.tasks-pop-list.compact .tasks-pop-item{
  padding:10px 11px;
  gap:0;
  border-radius:10px;
}
/* compact + icon: preserve the icon→label gap that gap:0 above strips. */
.tasks-pop-list.compact .tasks-pop-item.has-icon{gap:10px}
.tasks-modal-root{
  position:fixed;
  inset:0;
  z-index:930;
  pointer-events:none;
}
.tasks-modal-root.open{pointer-events:auto}
.tasks-modal{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.64);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  backdrop-filter:blur(8px);
}
.tasks-modal-card{
  width:min(480px,calc(100vw - 28px));
  max-height:min(72vh,720px);
  overflow:auto;
  padding:18px;
  border-radius:20px;
  border:1px solid var(--panel-border);
  background:var(--panel-bg);
  box-shadow:0 28px 64px rgba(0,0,0,.5);
}
.tasks-confirm-card{width:min(420px,calc(100vw - 28px))}
.tasks-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.tasks-modal-title{
  font-size:18px;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--t1);
}
.tasks-modal-subtitle{
  margin-top:6px;
  margin-bottom:14px;
  font-size:12px;
  color:var(--t3);
  line-height:1.5;
}
.tasks-modal-close{
  width:34px;
  height:34px;
  border:none;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  color:var(--t2);
  cursor:pointer;
  font-size:20px;
  line-height:1;
}
.tasks-modal-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.tasks-modal-item{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding:13px 14px;
  border:none;
  border-radius:14px;
  background:rgba(255,255,255,.035);
  color:var(--t2);
  text-align:left;
  cursor:pointer;
  transition:background .14s,color .14s,border-color .14s;
}
.tasks-modal-item:hover,
.tasks-modal-item:focus-visible{
  background:rgba(255,255,255,.07);
  color:var(--t1);
}
.tasks-modal-item.danger{color:#d07b7b}
.tasks-modal-item:disabled{opacity:.42;cursor:default;pointer-events:none}
.tasks-modal-item-label{font-size:13px;font-weight:700}
.tasks-modal-item-sub{font-size:11px;color:var(--t3);line-height:1.45}
.tasks-confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:8px;
}
.tasks-confirm-btn{
  min-height:38px;
  padding:0 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  color:var(--t2);
  font-family:var(--font);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:background .14s,border-color .14s,color .14s;
}
.tasks-confirm-btn:hover,
.tasks-confirm-btn:focus-visible{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
  color:var(--t1);
}
.tasks-confirm-btn.primary{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
  color:var(--t1);
}
.tasks-confirm-btn.primary.danger{
  background:rgba(192,64,64,.1);
  border-color:rgba(192,64,64,.24);
  color:#e18f8f;
}
.tasks-rail-chip-label[contenteditable="plaintext-only"]{
  outline:none;
  cursor:text;
  user-select:text;
  -webkit-user-select:text;
  -webkit-user-drag:none;
}
.tasks-rail-chip-editing{cursor:text}

/* ── CONTENT LAYOUT ─────────────────────────── */
.tab-panel{display:none}.tab-panel.active{display:block}
.cur-wrap{display:grid;grid-template-columns:1fr min(500px,calc(100vw - 40px)) 1fr;align-items:start;padding:0 20px}
.sidebar-col{grid-column:1;justify-self:end;padding-right:20px;width:min(260px,100%);position:sticky;top:calc(var(--top-h) + 34px);align-self:start}
.main-col{grid-column:2;padding:0 20px}
.daily-wrap,.av-wrap{width:min(500px,100%);margin:0 auto;padding:0 20px}
@media(max-width:900px){.cur-wrap{grid-template-columns:1fr}.sidebar-col{grid-column:1;justify-self:start;padding-right:0;width:100%;position:static;padding:0 12px}.main-col{grid-column:1;padding:0 12px}.daily-wrap,.av-wrap{width:100%;padding:0 12px}}
.task-category-group{display:flex;flex-direction:column}
.task-category-divider{
  appearance:none;
  border:none;
  background:transparent;
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 2px 14px;
  padding:0;
  cursor:pointer;
  width:100%;
  text-align:left;
  -webkit-tap-highlight-color:transparent;
}
.task-category-divider:hover .task-category-divider-title{color:var(--t1)}
.task-category-group + .task-category-group{
  margin-top:8px;
}
.cat-divider-chevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:var(--t3);
  transition:transform .18s ease,color .12s;
}
.cat-divider-chevron svg{width:12px;height:12px}
.cat-divider-chevron.collapsed{transform:rotate(-90deg)}
.task-category-divider:hover .cat-divider-chevron{color:var(--t2)}
.task-category-divider-title{
  flex-shrink:0;
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--t2);
  transition:color .12s;
  user-select:none;
}
.task-category-divider-line{
  flex:1;
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
}
/* Collapsed category: hide the sections smoothly */
.cat-group-sections{display:flex;flex-direction:column}
.cat-group-collapsed .cat-group-sections{
  display:none;
}
.cat-group-collapsed .task-category-divider{
  margin-bottom:8px;
}
.cat-group-collapsed .task-category-divider-line{
  background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
}

/* ── SECTION ────────────────────────────────── */
.section{margin-bottom:24px;position:relative}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:13px;padding:0 2px;transition:opacity .15s;touch-action:manipulation}
.sec-head.collapsed{margin-bottom:2px}
.sec-head-l{display:flex;align-items:flex-end;gap:0;flex:1;min-width:0}
.sec-title-wrap{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;
  gap:0;padding-left:0;
}
.sec-kicker{
  margin-bottom:5px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--t3);
}
/* Small all-caps reference label that sits to the RIGHT of the day name
   in the sidebar daily previews ("Monday  TODAY"). The .sec-name-row
   wrapper makes that horizontal layout possible while .sec-title-wrap
   stays a column (so the category kicker can still stack above it). */
.sec-name-row{display:flex;align-items:baseline;gap:9px;min-width:0;flex-wrap:wrap}
.sec-preview-kicker{
  font-size:9px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--t3);
  opacity:.85;
}
.sec-swatch{width:9px;height:9px;border-radius:50%;border:none;padding:0;cursor:pointer;flex-shrink:0;background:rgba(255,255,255,.12);transition:transform .12s}
.sec-name{
  font-size:18px;
  font-weight:500;
  letter-spacing:-.02em;
  color:var(--t1);
  background:none;
  border:none;
  outline:none;
  font-family:'Lexend',var(--font);
  cursor:pointer;
  padding:0 1px;
  border-radius:4px;
  line-height:1.08;
}
.sec-name:focus{color:var(--t1);background:rgba(255,255,255,.04)}
.sec-head-r{display:flex;align-items:center;gap:7px;padding:0 0 1px;background:none;border:none;border-radius:0}
.sec-ib{background:none;border:none;color:var(--t1);opacity:.72;cursor:pointer;padding:2px 3px;border-radius:0;font-size:12px;font-family:var(--font);transition:opacity .1s,color .1s;display:inline-flex;align-items:center;justify-content:center;min-height:auto}
.sec-card{background:var(--card);border-radius:12px;border:1px solid var(--sep);overflow:visible;box-shadow:0 10px 26px rgba(0,0,0,.14)}
.sec-card.collapsed-shell{display:none}
.sec-collapse{background:none;border:none;color:var(--t1);opacity:.76;cursor:pointer;padding:2px 3px;border-radius:0;line-height:1;transition:opacity .12s,transform .18s cubic-bezier(.25,0,.18,1);display:flex;align-items:center}
.sec-collapse.collapsed{transform:rotate(-90deg)}
.task-list{position:relative}
.task-list.collapsed,.add-row.collapsed{display:none}
.sec-dragging{opacity:.75;z-index:50;position:relative;box-shadow:0 8px 28px rgba(0,0,0,.45);will-change:transform}
.sidebar-col .sec-name{font-size:16px}
.sidebar-col .sec-head{margin-bottom:10px}
.sidebar-col .sec-title-wrap{padding-left:0}

/* ── TASK ────────────────────────────────────── */
.task{
  display:flex;align-items:flex-start;gap:9px;
  padding:7px 12px;border-bottom:1px solid var(--sep);
  cursor:pointer;position:relative;transition:background .07s;user-select:none;touch-action:manipulation;
}
.task-list > .task:first-child{border-top-left-radius:12px;border-top-right-radius:12px;overflow:hidden}
.task-list > .task:last-child{border-bottom-left-radius:12px;border-bottom-right-radius:12px}
.sec-card:has(.add-row) .task-list > .task:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0}
.task:last-child{border-bottom:none}
[data-status=done].task{background:rgba(77,184,112,.07)}
[data-status=checked].task{background:rgba(77,184,112,.07)}
[data-status=ongoing].task{background:rgba(102,144,242,.065)}
[data-status=hold].task{background:rgba(201,138,48,.065)}
[data-status=urgent].task{background:rgba(224,48,48,.065)}
.task.ctx-target{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
  z-index:3;
}
.task.ctx-target:not([data-status=done]):not([data-status=checked]):not([data-status=ongoing]):not([data-status=hold]):not([data-status=urgent]){
  background:rgba(255,255,255,.04);
}
[data-status=done].task.ctx-target,
[data-status=checked].task.ctx-target{background:rgba(77,184,112,.12)}
[data-status=ongoing].task.ctx-target{background:rgba(102,144,242,.11)}
[data-status=hold].task.ctx-target{background:rgba(201,138,48,.11)}
[data-status=urgent].task.ctx-target{background:rgba(224,48,48,.11)}
.task.open{background:rgba(255,255,255,.022);user-select:auto;-webkit-user-select:auto}
.task.open .task-text{user-select:text;-webkit-user-select:text}
.task.dragging{background:#232323;box-shadow:0 4px 18px rgba(0,0,0,.45);z-index:20;border-radius:4px;touch-action:none;will-change:transform}
.task.drag-armed{
  background:#252525;transform:scale(1.02);box-shadow:0 6px 22px rgba(0,0,0,.45);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
  z-index:18;touch-action:none;
}
.section.sec-drag-armed > .sec-card > .sec-head{opacity:.85}
@media(pointer:coarse){
  .task{touch-action:pan-y}
  .sec-head{touch-action:pan-y}
}
.task-draft{box-shadow:inset 2px 0 0 rgba(102,144,242,.3)}
.task-awaiting-title{
  background:rgba(102,144,242,.05);
}

/* ── DOT ─────────────────────────────────────── */
.dot{
  width:15px;height:15px;border-radius:50%;border:1.5px solid var(--t3);
  background:none;flex-shrink:0;margin-top:2px;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;transition:background .12s,border-color .12s;
}
.dot svg{display:none}
[data-status=done]    .dot{background:var(--done);border-color:var(--done)}
[data-status=checked] .dot{background:var(--done);border-color:var(--done)}
[data-status=done]    .dot svg{display:block}
[data-status=checked] .dot svg{display:block}
[data-status=ongoing] .dot{background:var(--ongoing);border-color:var(--ongoing)}
[data-status=hold]    .dot{background:var(--hold);border-color:var(--hold)}
[data-status=urgent]  .dot{background:var(--urgent);border-color:var(--urgent)}

/* ── TASK BODY ───────────────────────────────── */
.task-body{flex:1;min-width:0}
.txt-row{display:flex;align-items:center;flex-wrap:wrap;gap:5px;row-gap:4px}
.task-text{
  font-size:14px;color:var(--t1);line-height:1.45;
  word-break:break-word;outline:none;background:transparent;
  border:none;font-family:var(--font);
  cursor:pointer;
  caret-color:var(--acc);
  /* Grow always so tag chips + the due chip sit on the right of the title
     row instead of right next to the text in the closed state. */
  flex:1 1 auto;min-width:0;
}
.task.open .task-text{cursor:text;padding:2px 0}
.task-text.task-text-empty::before{
  content:attr(data-placeholder);
  color:var(--t3);
  pointer-events:none;
}
.task-text:focus{color:var(--t1)}
.task-draft-cue{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  padding:8px 10px;
  border-radius:10px;
  border:1px dashed rgba(111,151,246,.22);
  background:rgba(111,151,246,.06);
}
.task-draft-cue.visible{display:flex}
.task-draft-cue-copy{
  font-size:11px;
  color:#bfd0ff;
  font-weight:600;
}
.task-draft-cue-key{
  flex-shrink:0;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--t2);
  padding:3px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
}
.stag{font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px;letter-spacing:.04em;display:inline-block;white-space:nowrap;flex-shrink:0}
.stag-ongoing{background:rgba(102,144,242,.15);color:#7da3f8}
.stag-hold{background:rgba(201,138,48,.15);color:#d9a050}
/* Tags now live inline inside .txt-row so they sit on the title row next
   to the due-chip (which is appended last → rightmost). flex-shrink keeps
   them from compressing into the task title; if the row gets crowded, the
   whole chip group wraps to a second visual line. */
.task-tags{
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
  flex-shrink:0;
}
.task-tags[hidden]{display:none}
.task-tag-chip,
.task-tag-edit-chip{
  --tag-color:#6f97f6;
  display:inline-flex;
  align-items:center;
  max-width:160px;
  min-height:19px;
  padding:0 7px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--tag-color) 34%, rgba(255,255,255,.08));
  background:color-mix(in srgb,var(--tag-color) 15%, transparent);
  color:color-mix(in srgb,var(--tag-color) 74%, var(--t1));
  font-size:10px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.task-tag-editor{
  margin-top:6px;
  padding:8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.028);
}
.task-tag-add-row{
  display:flex;
  align-items:center;
  gap:6px;
}
.task-tag-add-btn{
  min-height:26px;
  padding:0 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  color:var(--t2);
  font-family:var(--font);
  font-size:11px;
  font-weight:650;
  cursor:pointer;
}
.task-tag-editor-current{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-height:0;margin-bottom:6px}
.task-tag-editor-current:empty{display:none}
.task-tag-empty{font-size:11px;color:var(--t3)}
.task-tag-edit-chip{
  cursor:pointer;
  gap:6px;
  max-width:180px;
}
.task-tag-edit-chip span{overflow:hidden;text-overflow:ellipsis}
.task-tag-edit-chip b{font-size:13px;line-height:1;color:color-mix(in srgb,var(--tag-color) 54%, var(--t2));font-weight:700}
.task-tag-input{
  flex:1;
  min-width:0;
  height:26px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.075);
  background:rgba(0,0,0,.12);
  color:var(--t1);
  font-family:var(--font);
  font-size:12px;
  padding:0 9px;
  outline:none;
}
.task-tag-input:focus{border-color:rgba(111,151,246,.34);box-shadow:0 0 0 2px rgba(111,151,246,.1)}
.task-tag-swatches{display:flex;align-items:center;gap:6px;margin-top:6px}
.task-tag-swatch{
  --tag-color:#6f97f6;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:var(--tag-color);
  cursor:pointer;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.18);
}
.task-tag-swatch.active{outline:2px solid color-mix(in srgb,var(--tag-color) 48%, rgba(255,255,255,.24));outline-offset:2px}
.task-note{
  display:block;
  width:100%;
  font-size:12px;
  color:var(--t2);
  margin-top:4px;
  line-height:1.45;
  white-space:pre-wrap;
  word-break:break-word;
  cursor:pointer;
}
.task:not(.open) .task-note{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}
.task.open .task-note{
  cursor:text;
}
.task-note-link{
  color:#9db8ff;
  text-decoration:none;
  border-bottom:1px solid rgba(157,184,255,.35);
  transition:color .12s,border-color .12s,opacity .12s;
}
.task-note-link:hover,
.task-note-link:focus-visible{
  color:#c9d7ff;
  border-bottom-color:rgba(201,215,255,.6);
}
.opt-a.drag-over{background:rgba(102,144,242,.12)!important;color:var(--acc)!important;outline:1.5px dashed var(--acc);outline-offset:-2px}

/* ── TASK RIGHT ──────────────────────────────── */
.task-right{flex-shrink:0;display:flex;align-items:center;gap:5px;margin-top:2px}
.link-ico{background:none;border:none;color:var(--t3);cursor:pointer;padding:1px 3px;border-radius:3px;display:flex;align-items:center;transition:color .1s}
/* z-index:4 so the strip paints above the .task.selected inset box-shadow
   (which paints inside the task's content box and would otherwise show
   through the corner where the parent's overflow:hidden disc-clipping ends).
   The strip has no border-radius of its own — the parent .task:first-child
   has overflow:hidden + border-top-left-radius:12px and clips the strip to
   the corner disc correctly. A duplicate radius here cut a tiny gap that the
   selection's blue painted through. */
.status-line{position:absolute;left:0;top:0;bottom:0;width:3px;pointer-events:none;z-index:4;border-radius:0}
.urgent-line{position:absolute;left:0;top:0;bottom:0;width:3px;background:#e03030;pointer-events:none;z-index:4;animation:urgentPulse 2.2s ease-in-out infinite}
/* On first-child, the red strip itself doesn't glow — the dedicated
   .urgent-corner-glow SVG (see below) casts the halo with a shape that
   actually matches the strip's disc-clipped visible outline. */
.task-list > .task:first-child[data-status=urgent] .urgent-line{
  animation:none;
}
/* First-child urgent glow: SVG whose path matches the VISIBLE strip shape
   (3px wide, top clipped by the task's 12px corner disc) — so the blurred
   halo emanates from the same geometry as the strip itself. */
.urgent-corner-glow{
  position:absolute;
  left:-30px;top:0;
  width:60px;
  pointer-events:none;
  z-index:1;
  overflow:visible;
}
.urgent-corner-glow .ucg-pulse{
  transform-origin:3px 12px;
  animation:urgentCornerPulse 2.2s ease-in-out infinite;
}
@keyframes urgentCornerPulse{
  0%,100%{opacity:.72}
  50%    {opacity:1}
}
@keyframes urgentPulse{0%,100%{box-shadow:-3px 0 6px rgba(224,48,48,.6),-6px 0 16px rgba(224,48,48,.25)}50%{box-shadow:-3px 0 12px rgba(224,48,48,.9),-8px 0 26px rgba(224,48,48,.45)}}
/* ── TASK OPTIONS ────────────────────────────── */
.task.open .task-right{display:flex}
.task-opts{display:none;margin-top:8px;padding-top:8px;border-top:1px solid var(--sep)}
.task.open .task-opts{display:block}
.opts-status{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:7px}
.opt-s{
  display:flex;align-items:center;gap:5px;padding:3px 8px;border-radius:4px;
  font-size:12px;cursor:pointer;border:1px solid transparent;color:var(--t2);
  background:transparent;
  font-family:var(--font);
  transition:all .08s;
  user-select:none;
  -webkit-user-select:none;
}
.opt-s.cs{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);color:var(--t1)}
.opt-s-check.cs{
  background:rgba(77,184,112,.1);
  border-color:rgba(77,184,112,.22);
  color:#bfe6c9;
}
.s-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.s-mark{
  width:12px;
  height:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.s-check svg{width:12px;height:12px;display:block}
.opts-acts{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.opt-a{
  padding:4px 10px;border-radius:4px;font-family:var(--font);font-size:12px;
  background:rgba(255,255,255,.05);border:1px solid var(--sep);color:var(--t2);
  cursor:pointer;transition:all .08s;display:flex;align-items:center;gap:5px;
  position:relative;min-height:26px;line-height:1;
}
.opt-a-on{background:rgba(102,144,242,.08);border-color:rgba(102,144,242,.18);color:#c8d4fa}
.opt-a-icon{justify-content:center;min-width:31px;padding-left:8px;padding-right:8px;min-height:26px}
.opt-a svg{display:block;flex-shrink:0}
.opt-a[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);background:#252525;border:1px solid rgba(255,255,255,.12);color:var(--t1);font-size:11px;padding:3px 7px;border-radius:5px;white-space:nowrap;pointer-events:none;z-index:999}
.opt-a.opt-a-disabled[data-tip]:hover::after{
  background:#252525;
  border-color:rgba(255,255,255,.12);
  color:var(--t1);
}
.no-tooltips .opt-a::after{display:none!important}
.opt-a.danger{color:#b84444}
.opt-a.danger.conf{color:#d06060;background:rgba(192,64,64,.08);border-color:rgba(192,64,64,.2)}
.kb-menu-focus{outline:1.5px solid rgba(255,255,255,.3);outline-offset:1px;border-radius:4px}
.opt-a.kb-menu-focus{background:rgba(255,255,255,.12);color:var(--t1);border-color:rgba(255,255,255,.22)}
.opt-a.danger.kb-menu-focus{background:rgba(192,64,64,.12);color:#d06060;border-color:rgba(192,64,64,.3)}
.opt-s.kb-menu-focus{background:rgba(255,255,255,.08);border-radius:4px}
.sec-head.kb-focus{background:rgba(255,255,255,.035);box-shadow:inset 2px 0 0 var(--acc);border-radius:10px;padding-left:8px;padding-right:6px}
.srch-result.srch-focus{background:rgba(255,255,255,.06)}
.settings-row.settings-row-focus{background:rgba(255,255,255,.04);border-radius:8px}
.av-row.kb-focus{background:rgba(255,255,255,.04)}
.av-btn.av-btn-focus{background:rgba(255,255,255,.1);color:var(--t1)}
.att-act-btn.att-act-focus{background:rgba(255,255,255,.12);color:var(--t1)}
.cp-act.cp-focus{background:rgba(255,255,255,.08);color:var(--t1)}
.opt-field{
  display:block;width:100%;margin-top:7px;font-family:var(--font);font-size:12px;
  color:var(--t1);background:rgba(255,255,255,.04);border:1px solid var(--sep);
  border-radius:5px;outline:none;padding:5px 8px;transition:border-color .14s;
}
.opt-field-row{display:flex;align-items:center;gap:6px;margin-top:7px}
.note-field-row{margin-top:4px;align-items:flex-start}
.opt-field-row .opt-field{margin-top:0;flex:1;min-width:0}
.opt-field-textarea{
  min-height:68px;
  line-height:1.45;
  resize:none;
  overflow:hidden;
  white-space:pre-wrap;
}
.note-field-row{
  align-items:stretch;
}
.note-field-row .opt-field-clear{
  align-self:center;
  margin-top:0;
  min-height:34px;
}
.repeat-row{flex-wrap:wrap}
.repeat-row .repeat-num{flex:0 0 78px}
.repeat-row .repeat-unit,.repeat-row .repeat-from{flex:1 1 140px}
.opt-field-select{cursor:pointer}
.repeat-editor{
  margin-top:9px;padding:12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.028));
  display:flex;flex-direction:column;gap:11px;
}
.repeat-editor-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.repeat-editor-label{display:flex;align-items:center;gap:7px;color:var(--t2)}
.repeat-editor-label svg{width:13px;height:13px;display:block;flex-shrink:0}
.repeat-editor-title{font-size:12px;font-weight:700;letter-spacing:-.01em;color:var(--t1)}
.repeat-clear{
  min-height:28px;padding:0 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.04);color:var(--t3);cursor:pointer;
  font-family:var(--font);font-size:11px;font-weight:700;
  transition:background .12s,border-color .12s,color .12s,opacity .12s;
}
.repeat-editor-preview{
  padding:10px 11px;border-radius:10px;
  background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.05);
}
.repeat-editor-preview-main{font-size:12px;font-weight:700;color:var(--t1);line-height:1.2}
.repeat-editor-preview-sub{margin-top:5px;font-size:11px;color:var(--t3);line-height:1.45}
.repeat-editor-block{display:flex;flex-direction:column;gap:7px}
.repeat-editor-kicker{font-size:10px;color:var(--t3);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.repeat-stepper{
  display:flex;align-items:center;gap:0;
  border:1px solid rgba(255,255,255,.08);border-radius:9px;
  background:rgba(255,255,255,.045);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  align-self:flex-start;
}
.repeat-step-btn{
  width:31px;height:30px;border:none;background:none;color:var(--t2);
  cursor:pointer;font-family:var(--font);font-size:16px;line-height:1;transition:background .12s,color .12s;
}
.repeat-num-input{
  width:46px;height:30px;border:none;background:none;color:var(--t1);
  text-align:center;font-family:var(--font);font-size:12px;font-weight:600;outline:none;padding:0;
  -moz-appearance:textfield;appearance:textfield;
}
.repeat-num-input::-webkit-outer-spin-button,
.repeat-num-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.repeat-chip-row{display:flex;flex-wrap:wrap;gap:7px}
.repeat-chip-row-tight{margin-top:-1px}
.repeat-chip{
  min-height:30px;padding:6px 11px;border-radius:999px;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045);
  color:var(--t2);font-family:var(--font);font-size:11px;font-weight:600;
  cursor:pointer;transition:background .12s,border-color .12s,color .12s,transform .12s;
}
.repeat-chip.active{background:rgba(102,144,242,.12);border-color:rgba(102,144,242,.26);color:#c9d7ff}
.repeat-chip-subtle.active{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14);color:var(--t1)}
.opt-field-clear{
  flex-shrink:0;
  background:rgba(255,255,255,.04);
  border:1px solid var(--sep);
  border-radius:5px;
  color:var(--t3);
  font-family:var(--font);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  padding:5px 9px;
  min-height:29px;
  transition:color .12s,background .12s,border-color .12s;
}
.opt-field-clear:disabled{
  opacity:.38;
  cursor:default;
  pointer-events:none;
  color:rgba(255,255,255,.38);
}
.opt-field-clear.is-active{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
  color:var(--t2);
}
.opt-field-clear:hover:not(:disabled),
.opt-field-clear:focus-visible:not(:disabled){
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.16);
  color:var(--t1);
}
.opt-field::placeholder{color:var(--t3)}
.opt-field:focus{border-color:var(--acc)}

/* ── ADD ROW ─────────────────────────────────── */
.add-row{border-top:1px solid var(--sep)}
.add-trig{
  width:100%;display:flex;align-items:center;gap:9px;
  padding:7px 12px;background:none;border:none;
  font-family:var(--font);font-size:14px;color:var(--t3);
  text-align:left;cursor:pointer;transition:color .1s,background .1s;
  user-select:none;-webkit-user-select:none;
  border-bottom-left-radius:12px;
  border-bottom-right-radius:12px;
}
.add-label{color:inherit}
.add-dot{
  width:17px;height:17px;border-radius:50%;
  border:1.5px solid var(--t3);
  flex-shrink:0;margin-top:0;
  position:relative;
  display:block;
  color:transparent;font-size:0;line-height:0;
  transition:border-color .12s,color .12s,background .12s;
}
.add-dot::before,.add-dot::after{
  content:'';
  position:absolute;
  left:50%;top:50%;
  background:var(--t3);
  border-radius:1px;
  transform:translate(-50%,-50%);
  transition:background .12s;
}
.add-dot::before{width:7px;height:1.5px}
.add-dot::after{width:1.5px;height:7px}

/* ── ARCH INLINE ─────────────────────────────── */
.arch-tog{display:flex;align-items:center;gap:5px;padding:5px 12px;font-size:11px;color:var(--t3);cursor:pointer;border-top:1px solid var(--sep);user-select:none;transition:color .1s}
.arch-chev{font-size:9px;display:inline-block;transition:transform .15s}
.arch-tog.open .arch-chev{transform:rotate(90deg)}
.arch-list{display:none}.arch-list.open{display:block}
.arch-list .task{opacity:.3}

/* ── ADD SECTION ─────────────────────────────── */
.add-sec-btn{width:100%;padding:8px;background:none;border:1px dashed rgba(255,255,255,.1);border-radius:8px;font-family:var(--font);font-size:12px;color:var(--t3);cursor:pointer;transition:all .15s;margin-top:2px}

/* ── ARCH/DEL VIEWS ──────────────────────────── */
.av-sec{margin-bottom:12px}
.av-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);padding:0 3px 7px}
.av-card{background:var(--card);border-radius:12px;border:1px solid rgba(255,255,255,.065);overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.16)}
.av-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--sep)}
.av-row:last-child{border-bottom:none}
.av-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px rgba(255,255,255,.025)}
.av-main{min-width:0;display:flex;flex-direction:column;gap:5px}
.av-text{color:var(--t1);font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av-meta{font-size:11px;color:var(--t3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av-tags{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.av-actions{display:flex;align-items:center;gap:7px;flex-shrink:0}
.av-btn{
  min-height:32px;padding:0 11px;border-radius:9px;font-family:var(--font);font-size:12px;font-weight:650;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.075);color:var(--t2);
  cursor:pointer;transition:all .08s;flex-shrink:0;
}
.av-restore{background:rgba(102,144,242,.1);border-color:rgba(102,144,242,.18);color:#d4ddff}
.av-icon-btn{width:32px;padding:0;display:flex;align-items:center;justify-content:center}
.av-btn.d{color:var(--hold)}
.av-delete-forever{color:#dda2a2;background:rgba(228,58,58,.07);border-color:rgba(228,58,58,.15)}
.empty-msg{text-align:center;padding:40px 20px;color:var(--t3);font-size:13px}

/* ── COLOUR PICKER ───────────────────────────── */
.cpick{position:fixed;background:#1e1e1e;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 12px;z-index:900;display:none;flex-direction:column;gap:0;width:198px;box-shadow:0 8px 24px rgba(0,0,0,.6)}
.cpick.open{display:flex}
.cp-colors{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-start}
.cp-sw{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .1s,border-color .1s;flex-shrink:0}
.cp-sw.sel{border-color:rgba(255,255,255,.65)}
.cp-none{background:transparent!important;border:1.5px dashed rgba(255,255,255,.25)}
.cp-sep{height:1px;background:rgba(255,255,255,.08);margin:8px 0}
.cp-actions{display:flex;flex-direction:column;gap:6px;justify-content:flex-start}
.cp-act{background:none;border:1px solid rgba(255,255,255,.08);cursor:pointer;color:var(--t3);padding:5px 8px;border-radius:5px;display:flex;align-items:center;gap:5px;font-size:12px;font-family:var(--font);transition:color .1s,background .1s;flex:1;justify-content:center}
.cp-act-on{color:var(--acc)!important;border-color:rgba(102,144,242,.3)!important}
.cp-act.cp-del{color:#b84444;border-color:rgba(192,64,64,.18)}
.cp-act.cp-del:hover,
.cp-act.cp-del:focus-visible{background:rgba(192,64,64,.08);color:#d06060;border-color:rgba(192,64,64,.24)}
.cp-act.cp-del.cp-focus{background:rgba(192,64,64,.12);color:#d06060;border-color:rgba(192,64,64,.3)}

/* ── HEALTH ──────────────────────────────────── */
.health-empty{max-width:360px;margin:80px auto;text-align:center;color:var(--t3)}
.health-empty span{font-family:var(--font);font-style:normal;font-weight:700;font-size:28px;display:block;margin-bottom:8px;color:var(--t2)}

/* ── SELECTION ───────────────────────────────── */
/* The 3px selection strip is painted as a ::before child so it clips
   IDENTICALLY to .urgent-line / .status-line (same absolute positioning,
   same parent overflow:hidden + border-top-left-radius for first-child).
   The previous inset 3px 0 0 box-shadow clipped against the element's
   own border-radius differently than an absolutely-positioned child,
   so the blue strip extended further into the rounded corner than the
   status strip and visibly overlapped it. */
.task.selected{
  background:linear-gradient(to right,rgba(102,144,242,.1),rgba(102,144,242,.04));
  box-shadow:inset 0 0 0 1px rgba(102,144,242,.15);
  border-radius:4px;
}
.task.selected::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:rgba(102,144,242,.55);pointer-events:none;z-index:3;
}
.task.selected .task-text{color:#c8d4fa}
.task.selected:has(+ .task.selected){border-bottom-color:transparent;border-bottom-left-radius:0;border-bottom-right-radius:0}
.task.selected + .task.selected{border-top-left-radius:0;border-top-right-radius:0}
.task.selected-focus{box-shadow:inset 0 0 0 1px rgba(125,165,255,.22)}
.task.selected-focus::before{background:rgba(102,144,242,.7)}
.task-marquee{
  position:fixed;
  left:0;
  top:0;
  width:0;
  height:0;
  pointer-events:none;
  opacity:0;
  z-index:940;
  border:1px solid rgba(111,151,246,.62);
  background:rgba(111,151,246,.16);
  box-shadow:inset 0 0 0 1px rgba(201,215,255,.08);
  border-radius:12px;
}
.task-marquee.active{opacity:1}
body.task-marquee-selecting,
body.task-marquee-selecting *{
  user-select:none!important;
  -webkit-user-select:none!important;
}
.task.dragging{background:#232323!important;opacity:1;box-shadow:0 4px 18px rgba(0,0,0,.45)}
.task.dragging.dragging-multi{z-index:26}
.task.dragging.dragging-multi::before,
.task.dragging.dragging-multi::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  border:1px solid rgba(102,144,242,.14);
  background:rgba(22,22,22,.82);
  z-index:-1;
}
.task.dragging.dragging-multi::before{
  transform:translate(4px,4px);
  opacity:.68;
}
.task.dragging.dragging-multi::after{
  transform:translate(8px,8px);
  opacity:.42;
}
.task-drag-badge{
  position:absolute;
  right:-8px;
  top:-8px;
  min-width:24px;
  height:24px;
  padding:0 7px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--acc);
  color:#eef4ff;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 6px 18px rgba(0,0,0,.38);
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  pointer-events:none;
}
.task.drag-peer{opacity:.35;background:rgba(102,144,242,.04);transform:scale(.98);transition:opacity .15s,transform .15s}
.task-drop-slot{margin:0;padding:0;border:0;visibility:hidden;pointer-events:none}
.section.drop-target-collapsed .sec-head{
  background:rgba(102,144,242,.045);
  border-radius:10px;
  box-shadow:inset 2px 0 0 rgba(102,144,242,.72),inset 0 0 0 1px rgba(102,144,242,.16);
}
.section.drop-target-collapsed .sec-name{
  color:#dbe4ff;
}
.section.drop-target-collapsed .sec-collapse,
.section.drop-target-collapsed .sec-head-r .sec-ib{
  color:#dbe4ff;
  opacity:.84;
}

/* ── DRAG GHOST ─────────────────────────────── */
.drag-ghost{position:fixed;pointer-events:none;z-index:999;opacity:1;display:flex;flex-direction:column;filter:drop-shadow(0 6px 20px rgba(0,0,0,.5))}
.drag-ghost .task{background:var(--card);border:1px solid rgba(102,144,242,.2);border-radius:5px;box-shadow:0 2px 10px rgba(0,0,0,.3);margin-bottom:2px;opacity:1}

/* ── KEYBOARD FOCUS ─────────────────────────── */
.task.kb-focus{background:rgba(255,255,255,.035);box-shadow:inset 2px 0 0 var(--acc)}

/* ── UNDO TOAST ──────────────────────────────── */
.undo-toast{position:fixed;bottom:calc(22px + var(--safe-b));left:calc(var(--side-w) + 22px + var(--safe-l));transform:translateY(12px);min-width:132px;background:#1e1e1e;border:1px solid rgba(255,255,255,.13);border-radius:12px;padding:11px 22px 11px 16px;font-size:14px;font-weight:500;line-height:20px;color:var(--t1);z-index:800;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .2s,transform .22s cubic-bezier(.25,0,.18,1),left .24s cubic-bezier(.25,0,.18,1);display:flex;align-items:center;justify-content:flex-start;gap:11px;text-align:left;box-shadow:0 8px 32px rgba(0,0,0,.65)}
.undo-toast.show{opacity:1;transform:translateY(0)}
.undo-toast svg{opacity:.7;width:18px;height:18px;flex:0 0 18px}
.undo-toast .toast-done-icon{opacity:1;color:#55c279}
.undo-toast .toast-delete-icon{opacity:1;color:#d94e4e}
.undo-toast .toast-restore-icon{opacity:1;color:#6f97f6}
.undo-toast .toast-timer-icon{opacity:1;color:#6f97f6}
.undo-toast .toast-move-icon{opacity:1;color:#b07ef6}

/* ── UNDO/REDO ────────────────────────────────── */
.ur-group,.top-utils{margin-left:auto;display:flex;align-items:center;gap:3px}
.ur-btn{background:none;border:1px solid transparent;color:var(--t3);font-size:15px;cursor:pointer;padding:5px 9px;border-radius:6px;line-height:1;transition:color .12s,background .12s,border-color .12s;display:flex;align-items:center;justify-content:center}
.ur-btn:disabled{color:var(--t3);cursor:default;opacity:.3}

/* ── DUE DATE ─────────────────────────────────────── */
.due-chip{display:inline-flex;align-items:center;font-size:11px;font-weight:500;border-radius:8px;margin-left:9px;background:rgba(255,255,255,.09);color:var(--t2);flex-shrink:0;align-self:center;letter-spacing:.01em;transition:background .1s,padding-right .15s;position:relative;overflow:hidden}
.due-chip.due-today{background:rgba(180,115,30,.18);color:var(--hold)}
.due-chip.due-overdue{background:rgba(192,64,64,.18);color:#d06060}
.due-chip-lbl{padding:3px 7px 3px 7px;white-space:nowrap}
.due-chip-x{position:absolute;right:0;top:0;bottom:0;width:24px;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;background:none;border:none;cursor:pointer;color:inherit;opacity:0;pointer-events:none;transition:opacity .15s;font-family:var(--font);border-left:1px solid rgba(255,255,255,.12)}

/* ── DATE PICKER ─────────────────────────────────── */
.datepick{position:absolute;z-index:690;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:13px;padding:14px;box-shadow:0 16px 50px rgba(0,0,0,.75);width:242px;animation:pgIn .12s ease}
.dp-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.dp-nav{background:none;border:none;color:var(--t2);cursor:pointer;font-size:17px;width:28px;height:28px;border-radius:6px;transition:color .1s,background .1s;display:flex;align-items:center;justify-content:center;line-height:1}
.dp-title{font-size:12px;font-weight:600;color:var(--t1);font-family:var(--font)}
.dp-scroll-wrap{overflow-y:auto;max-height:294px;scrollbar-width:none;scroll-snap-type:y proximity;scroll-padding-top:58px;scroll-padding-bottom:30px}
.dp-scroll-wrap::-webkit-scrollbar{display:none}
.dp-daynames{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding-bottom:4px;position:sticky;top:0;background:var(--panel-bg);z-index:5}
.dp-snap{scroll-snap-align:start}
.dp-dn{text-align:center;font-size:10px;font-weight:600;color:var(--t3);padding:3px 0;letter-spacing:.03em}
.dp-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  --dp-grid-gap:2px;
  gap:var(--dp-grid-gap);
  --dp-step-stroke:1px;
  --dp-step-radius:6px;
  --dp-step-gap-half:calc(var(--dp-grid-gap) / 2);
  --dp-step-join:calc(var(--dp-step-radius) - var(--dp-step-gap-half));
  --dp-step-color:rgba(255,255,255,.24);
}
.dp-day{position:relative;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--t2);padding:2px;border-radius:6px;cursor:pointer;transition:background .08s,color .08s;font-family:var(--font);line-height:1;min-height:28px}
.dp-step-b::after,.dp-step-t::after{
  content:'';
  position:absolute;
  pointer-events:none;
  z-index:2;
  background:var(--dp-step-color);
  height:var(--dp-step-stroke);
}
.dp-step-b::after{
  left:calc(var(--dp-step-stroke) * -1);
  right:calc(var(--dp-step-stroke) * -1);
  bottom:calc(var(--dp-step-stroke) * -1);
}
.dp-step-t::after{
  left:calc(var(--dp-step-stroke) * -1);
  right:calc(var(--dp-step-stroke) * -1);
  top:calc(var(--dp-step-stroke) * -1);
}
.dp-step-turn-b::after{right:var(--dp-step-join)}
.dp-step-turn-t::after{left:calc(var(--dp-step-join) - var(--dp-step-stroke))}
.dp-step-turn-b::before,.dp-step-turn-t::before{
  content:'';
  position:absolute;
  box-sizing:border-box;
  pointer-events:none;
  z-index:2;
  border-color:var(--dp-step-color);
  border-style:solid;
}
.dp-step-turn-b::before{
  width:var(--dp-step-radius);
  height:var(--dp-step-radius);
  right:calc(var(--dp-step-gap-half) * -1);
  bottom:calc(var(--dp-step-stroke) * -1);
  border-width:0 var(--dp-step-stroke) var(--dp-step-stroke) 0;
  border-bottom-right-radius:var(--dp-step-radius);
}
.dp-step-turn-t::before{
  width:var(--dp-step-radius);
  height:calc(100% - var(--dp-step-radius) + (var(--dp-step-stroke) * 2));
  left:calc((var(--dp-step-gap-half) + var(--dp-step-stroke)) * -1);
  top:calc(var(--dp-step-stroke) * -1);
  border-width:var(--dp-step-stroke) 0 0 var(--dp-step-stroke);
  border-top-left-radius:var(--dp-step-radius);
}
.dp-day-num{line-height:1;display:flex;align-items:center;justify-content:center;width:22px;height:22px}
.dp-mo-lbl{position:absolute;top:1px;left:0;right:0;text-align:center;font-size:8px;font-weight:600;letter-spacing:.04em;color:inherit;line-height:1;pointer-events:none;z-index:1}
.dp-has-lbl .dp-day-num{position:relative;top:5px}
.dp-has-lbl .dp-mo-lbl{top:3px}
.dp-out{opacity:.35}
.dp-month-sep{grid-column:1/-1;height:1px;background:rgba(255,255,255,.07);margin:3px 0}
.dp-blank{cursor:default;pointer-events:none}
.dp-today:not(.dp-sel) .dp-day-num{border:1.5px solid var(--acc);border-radius:50%}
.dp-today.dp-sel .dp-day-num{border:1.5px solid rgba(255,255,255,.6);border-radius:50%}
.dp-focused:not(.dp-sel){outline:1.5px solid rgba(255,255,255,.28);outline-offset:-1px}
.dp-sel{background:var(--acc) !important;color:#fff !important}
.dp-sel.dp-step-turn-t{box-shadow:-1px 0 0 0 var(--acc)}
.dp-sel .dp-day-num{position:relative;top:5px}
.dp-sel .dp-mo-lbl{top:3px}
.dp-sep{height:1px;background:rgba(255,255,255,.07);margin:12px 0 10px}
.dp-actions{display:grid;grid-template-columns:36px minmax(0,1fr) minmax(0,1fr);gap:8px}
.dp-act-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  color:var(--t2);
  font-size:12px;
  font-weight:600;
  font-family:var(--font);
  letter-spacing:.01em;
  border-radius:9px;
  padding:9px 12px;
  min-height:36px;
  cursor:pointer;
  transition:color .12s,background .12s,border-color .12s,transform .12s;
}
.dp-act-btn:disabled{opacity:.34;cursor:default;pointer-events:none}
.dp-act-confirm{
  width:36px;
  min-width:36px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9db8ff;
  background:rgba(102,144,242,.085);
  border-color:rgba(102,144,242,.18);
}
.dp-act-confirm svg{width:13px;height:13px;display:block}
.dp-act-today{
  color:var(--t2);
}
.dp-act-clear{
  color:#a7a7a7;
}

/* ── TODAY SECTION ───────────────────────────────── */
.sec-today .sec-name{color:var(--acc)}
.sec-today .sec-card{border-color:rgba(102,144,242,.22)}

/* ── OS BAR SEPARATOR ────────────────────────────── */
.ur-sep{width:1px;height:16px;background:rgba(255,255,255,.08);margin:0 3px}

/* ── EMPTY SECTION STATE ─────────────────────────── */
.sec-empty{
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
}
.sec-empty-preview{
  padding:14px 12px;
}
.sec-empty-title{
  font-size:12px;
  color:var(--t2);
  font-weight:400;
  letter-spacing:-.01em;
}
.sec-empty-sub{
  font-size:12px;
  color:var(--t3);
  line-height:1.45;
  max-width:28ch;
}
.empty-msg-rich{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:28px 20px;
}
.empty-msg-copy{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:center;
}
.empty-msg-title{
  font-size:15px;
  font-weight:700;
  color:var(--t1);
  letter-spacing:-.02em;
}
.empty-msg-sub{
  font-size:12px;
  color:var(--t3);
  line-height:1.5;
}
.empty-cta-btn{
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--t2);
  font-family:var(--font);
  font-size:12px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  transition:background .14s,border-color .14s,color .14s,transform .14s;
}
.empty-cta-btn:hover,
.empty-cta-btn:focus-visible{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
  color:var(--t1);
}
.empty-cta-plus{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  background:rgba(111,151,246,.12);
  color:#cbd8ff;
}
.empty-cta-plus svg{width:12px;height:12px;display:block}

/* ── INSTANT HOVER FEEDBACK ───────────────────── */
.tasks-rail-filters,
.tasks-rail-chip,
.tasks-pop-item,
.tasks-modal-item,
.tasks-confirm-btn,
.task,
.task-note-link,
.link-ico,
.opt-s,
.opt-a,
.opt-field-clear,
.add-trig,
.add-dot,
.add-dot::before,
.add-dot::after,
.add-sec-btn,
.av-btn,
.ur-btn,
.due-chip,
.due-chip-x,
.dp-nav,
.dp-day,
.dp-act-btn,
.empty-cta-btn{
  transition:none;
}
.sec-ib,
.sec-swatch,
.repeat-step-btn,
.repeat-chip,
.cp-sw,
.cp-act{
  transition:none;
}
/* ── GOOGLE CALENDAR SIDEBAR ─────────────────── */
.gcal-sidebar-section{padding:10px 0 4px;border-top:1px solid var(--bd);margin-top:8px}
.gcal-sidebar-head{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);padding:0 4px 6px}
.gcal-sidebar-dot{width:6px;height:6px;border-radius:50%;background:#4285f4;flex-shrink:0}
.gcal-event-row{display:flex;align-items:baseline;gap:8px;padding:3px 4px;border-radius:5px}
.gcal-event-row:hover{background:var(--hov)}
.gcal-event-time{font-size:10px;color:var(--t3);white-space:nowrap;min-width:42px;flex-shrink:0}
.gcal-event-title{font-size:12px;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-collapse{
  transition:transform .18s cubic-bezier(.25,0,.18,1);
}