/* Tasks — the board, the list and the task drawer.

   Split out of index.html alongside tasks.js. Only Tasks-owned rules moved:
   the shared searchable-combobox rules the Showings modal also uses stayed
   behind, as did every `#page-tasks` override that lives inside a shared
   responsive block. The <style> in the shell is split around this file so the
   cascade order is exactly what it was.

   Loaded with a version stamp in its URL (/tasks.css?v=…) so a fresh shell can
   never be paired with a stale cached copy of this file. */
  /* ── TASKS PAGE ── */
  #page-tasks { background: var(--bg2); }
  .tasks-toolbar {
    position:relative; overflow:hidden;
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:14px 22px; margin:22px 22px 0; border-radius:14px;
    background:
      linear-gradient(90deg,
        #1a1a2e 0%,
        #1a1a2e 18%,
        rgba(30,40,80,0.95) 35%,
        rgba(50,75,140,0.88) 55%,
        rgba(95,135,200,0.70) 75%,
        rgba(150,185,235,0.55) 90%,
        rgba(180,210,255,0.50) 100%),
      radial-gradient(circle at 98% 100%, rgba(100,160,240,0.32) 0%, transparent 55%);
    backdrop-filter:blur(18px) saturate(1.6); -webkit-backdrop-filter:blur(18px) saturate(1.6);
    border:1px solid rgba(200,220,255,0.55);
    box-shadow:
      0 6px 20px rgba(20,50,140,0.15),
      0 1px 3px rgba(0,0,0,0.06),
      inset 0 1px 0 rgba(255,255,255,0.6),
      inset 0 -1px 0 rgba(80,130,210,0.12);
  }
  .tasks-toolbar::after {
    content:""; position:absolute; top:0; bottom:0;
    left:-30%; width:35%;
    pointer-events:none; border-radius:inherit;
    background:linear-gradient(115deg,
      transparent 0%,
      rgba(255,255,255,0) 30%,
      rgba(255,255,255,0.28) 50%,
      rgba(255,255,255,0) 70%,
      transparent 100%);
    animation:tasks-toolbar-shimmer 7s ease-in-out infinite;
    mix-blend-mode:overlay;
    z-index:0;
  }
  .tasks-toolbar > * { position:relative; z-index:1; }
  @keyframes tasks-toolbar-shimmer {
    0%   { transform:translateX(0); opacity:0; }
    15%  { opacity:1; }
    85%  { opacity:1; }
    100% { transform:translateX(380%); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .tasks-toolbar::after { animation:none; opacity:0; }
  }
  .tasks-toolbar .form-input,
  .tasks-toolbar select.form-input,
  .tasks-toolbar input[type="search"] {
    height:34px; padding:6px 12px; font-size:13px; min-width:0;
    background:rgba(255,255,255,0.55); border:1px solid rgba(180,210,255,0.6); border-radius:9px; color:#1a2f5c;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 2px rgba(40,80,160,0.05);
    transition:border-color 0.15s, background 0.15s, box-shadow 0.15s;
  }
  .tasks-toolbar .form-input:focus,
  .tasks-toolbar select.form-input:focus,
  .tasks-toolbar input[type="search"]:focus {
    outline:none; border-color:rgba(80,130,235,0.8); background:rgba(255,255,255,0.78);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 0 0 3px rgba(100,160,255,0.25);
  }
  .tasks-toolbar .tasks-search { flex:1; min-width:160px; max-width:300px; }
  .tasks-view-toggle {
    display:inline-flex; height:34px; border:1px solid rgba(180,210,255,0.6); border-radius:9px; overflow:hidden;
    background:rgba(255,255,255,0.55); backdrop-filter:blur(8px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
  }
  .tasks-view-toggle button {
    padding:0 12px; font-size:12px; cursor:pointer; color:#1a2f5c;
    border:0; background:transparent; display:inline-flex; align-items:center; gap:5px;
    border-right:1px solid rgba(180,210,255,0.5); transition:all 0.15s;
  }
  .tasks-view-toggle button:last-child { border-right:none; }
  .tasks-view-toggle button:hover { background:rgba(255,255,255,0.4); }
  .tasks-view-toggle button.active { background:linear-gradient(135deg, #5a90f0, #2a60d0); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,0.3); }
  /* Kanban */
  /* Board fills its region but does NOT grow past the viewport — only the chips
     scroll inside each column, so the blue column box stops within the screen. */
  .tasks-kanban-wrap { flex:1; overflow:hidden; min-height:0; padding:18px 22px 22px; }
  .tasks-kanban { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; height:100%; min-height:0; }
  .kb-col {
    background:linear-gradient(180deg, rgba(220,232,255,0.55) 0%, rgba(200,218,255,0.35) 100%);
    border:1px solid rgba(200,220,255,0.55); border-radius:14px; padding:12px;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    box-shadow:0 4px 16px rgba(20,50,140,0.10), inset 0 1px 0 rgba(255,255,255,0.55);
    display:flex; flex-direction:column; gap:10px; max-height:100%; min-height:0; overflow:hidden;
    transition:background 0.15s, border-color 0.15s;
  }
  .kb-col.drag-over { background:linear-gradient(180deg, rgba(180,210,255,0.7) 0%, rgba(160,200,255,0.55) 100%); border-color:rgba(80,130,235,0.8); }
  .kb-col-head { display:flex; align-items:center; justify-content:space-between; padding:2px 4px 8px; border-bottom:1px solid rgba(180,210,255,0.45); }
  .kb-col-head .title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#1a3370; display:flex; align-items:center; gap:6px; }
  .kb-col-head .count { font-size:11px; color:#3a5a95; background:rgba(255,255,255,0.55); border:1px solid rgba(180,210,255,0.5); border-radius:10px; padding:1px 7px; }
  .kb-col-dot { width:8px; height:8px; border-radius:50%; }
  .kb-col-dot.todo { background:#94a3b8; }
  .kb-col-dot.in_progress { background:#3b82f6; }
  .kb-col-dot.done { background:#22c55e; }
  .kb-list { display:flex; flex-direction:column; gap:8px; flex:1; min-height:0; overflow-y:auto; perspective:900px; }
  .kb-card {
    position:relative;
    background:rgba(255,255,255,0.85); border:1px solid rgba(200,220,255,0.6); border-radius:10px; padding:10px 12px;
    box-shadow:0 1px 3px rgba(20,50,140,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
    cursor:grab; transition:transform 0.25s ease-out, box-shadow 0.25s ease-out;
    display:flex; flex-direction:column; gap:6px;
    transform-style:preserve-3d; will-change:transform;
  }
  .kb-card.tilting { transition:none; }
  .kb-card::after {
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:radial-gradient(circle at var(--kb-mx, 50%) var(--kb-my, 0%),
      rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 45%);
    opacity:0; transition:opacity 0.2s; z-index:1;
  }
  .kb-card:hover::after { opacity:1; }
  .kb-card > * { position:relative; z-index:2; }
  .kb-card:hover { box-shadow:0 12px 28px rgba(20,50,140,0.18); }
  .kb-card:active { cursor:grabbing; }
  @media (prefers-reduced-motion: reduce) {
    .kb-card { transition:none; }
    .kb-card.tilting { transform:none !important; }
  }
  .kb-card.dragging { opacity:0.4; }
  .kb-card.task-done .kb-title { text-decoration:line-through; color:#64748b; }
  .kb-card-row1 { display:flex; align-items:center; gap:6px; }
  .kb-title { font-size:13px; font-weight:500; color:#1a2f5c; flex:1; word-break:break-word; }
  .kb-card-row2 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:11px; color:#3a5a95; }
  .kb-card-row2 .task-due { font-size:11px; }
  .kb-meta-chip { display:inline-flex; align-items:center; gap:3px; background:rgba(220,232,255,0.7); border:1px solid rgba(180,210,255,0.5); border-radius:8px; padding:1px 6px; font-size:10px; color:#1a3370; }
  .kb-empty { font-size:11px; color:#64748b; text-align:center; padding:18px 8px; font-style:italic; }

  /* Priority bar on the row's left edge */
  .tasks-table tbody td:first-child {
    position:relative;
  }
  .tasks-table tbody td:first-child::before {
    content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
    border-radius:10px 0 0 10px;
    background:#cbd5e1;
  }
  .tasks-table tbody tr[data-priority="low"]    td:first-child::before { background:#3b82f6; }
  .tasks-table tbody tr[data-priority="medium"] td:first-child::before { background:#eab308; }
  .tasks-table tbody tr[data-priority="high"]   td:first-child::before { background:#f97316; }
  .tasks-table tbody tr[data-priority="urgent"] td:first-child::before {
    background:#dc2626;
    box-shadow:0 0 8px rgba(220,38,38,0.5);
  }
  .tasks-table tbody tr.task-done[data-priority] td:first-child::before {
    opacity:0.45;
    box-shadow:none;
  }
  /* Due-date pills */
  .task-due-pill {
    display:inline-flex; align-items:center; gap:5px; padding:3px 9px;
    background:rgba(255,255,255,0.55); border:1px solid rgba(180,210,255,0.6); border-radius:12px;
    font-size:11px; color:#1a2f5c; font-weight:500; white-space:nowrap;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
  }
  .task-due-pill .lucide { width:11px; height:11px; }
  .task-due-pill.overdue {
    background:linear-gradient(135deg, rgba(254,226,226,0.85) 0%, rgba(254,202,202,0.70) 100%);
    border-color:rgba(220,38,38,0.45); color:#991b1b; font-weight:700;
  }
  .task-due-pill.today {
    background:linear-gradient(135deg, rgba(254,243,199,0.85) 0%, rgba(253,230,138,0.70) 100%);
    border-color:rgba(180,83,9,0.45); color:#92400e; font-weight:700;
  }
  .task-due-pill.soon {
    background:linear-gradient(135deg, rgba(219,234,254,0.85) 0%, rgba(191,219,254,0.70) 100%);
    border-color:rgba(59,130,246,0.45); color:#1e40af;
  }
  .task-due-pill.empty {
    background:transparent; border:1px dashed rgba(180,210,255,0.55); color:#7a93b8; font-style:italic;
  }
  /* Avatar stack (for multi-assignee groundwork) */
  .ta-stack { display:inline-flex; align-items:center; }
  .ta-stack .ta-avatar { margin-left:-6px; border:2px solid rgba(255,255,255,0.85); }
  .ta-stack .ta-avatar:first-child { margin-left:0; }
  .ta-stack .ta-more {
    width:18px; height:18px; border-radius:50%;
    background:rgba(255,255,255,0.7); color:#1a2f5c;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:9px; font-weight:700; margin-left:-6px;
    border:2px solid rgba(255,255,255,0.85);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.4);
  }
  .task-status-btn {
    width:20px; height:20px; border-radius:50%; border:2px solid rgba(180,210,255,0.7);
    background:rgba(255,255,255,0.55); cursor:pointer; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
    transition:all 0.15s;
  }
  .task-status-btn:hover { border-color:#3a70d8; background:rgba(255,255,255,0.9); }
  .task-status-btn.status-in_progress {
    border-color:#3a70d8;
    background:radial-gradient(circle, #4a85f0 40%, rgba(255,255,255,0.55) 42%);
  }
  .task-status-btn.status-done {
    background:linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-color:#16a34a; color:#fff;
    box-shadow:0 1px 3px rgba(20,80,40,0.25), inset 0 1px 0 rgba(255,255,255,0.3);
  }
  .task-status-btn.status-done::after { content:'✓'; font-size:12px; font-weight:700; }
  .task-priority-dot {
    display:inline-block; width:10px; height:10px; border-radius:50%; vertical-align:middle;
    background:#cbd5e1;
    box-shadow:0 0 0 1px rgba(255,255,255,0.6), inset 0 1px 0 rgba(255,255,255,0.4);
  }
  .task-priority-dot.priority-low    { background:#3b82f6; }
  .task-priority-dot.priority-medium { background:#eab308; }
  .task-priority-dot.priority-high   { background:#f97316; }
  .task-priority-dot.priority-urgent { background:#dc2626; }
  .task-title { font-weight:500; cursor:pointer; color:#1a2f5c; }
  .task-title:hover { color:#2a60d0; }
  .task-recur-icon {
    display:inline-block; width:13px; height:13px; margin-left:6px; vertical-align:-2px;
    color:#3a70d8; opacity:0.85;
  }
  /* Recurring toggle box — height matches the .form-input boxes above so
     the row reads as a clean 2-column grid like the Due/Assignee row. */
  .td-recur-toggle {
    display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
    width:100%; box-sizing:border-box;
    padding:9px 12px; font-size:13px; color:#1a2f5c;
    background:rgba(255,255,255,0.55); border:1px solid rgba(180,210,255,0.6); border-radius:10px;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 2px rgba(40,80,160,0.05);
    transition:border-color 0.15s, background 0.15s, box-shadow 0.15s;
  }
  .td-recur-toggle:hover { border-color:rgba(80,130,235,0.7); }
  .td-recur-toggle input[type="checkbox"] {
    width:auto !important; margin:0;
    accent-color:#2a60d0; cursor:pointer;
  }
  .td-recur-toggle.on {
    border-color:rgba(80,130,235,0.85);
    background:linear-gradient(135deg, rgba(170,205,255,0.65), rgba(220,235,255,0.55));
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 0 0 3px rgba(100,160,255,0.18);
  }
  .td-recur-toggle .lucide { width:14px; height:14px; color:#2a60d0; }
  .td-recur-fields { display:flex; gap:8px; }
  .td-recur-fields input[type="number"] { width:80px; flex:0 0 80px; }
  .td-recur-fields select { flex:1; }
  .td-recur-fields input:disabled, .td-recur-fields select:disabled {
    opacity:0.55; cursor:not-allowed;
  }
  /* Task comments */
  .td-comments-list { display:flex; flex-direction:column; gap:8px; max-height:220px; overflow-y:auto; padding:4px 2px; }
  .td-comment {
    background:rgba(255,255,255,0.65); border:1px solid rgba(180,210,255,0.5); border-radius:10px;
    padding:8px 12px; font-size:13px; color:#1a2f5c;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
  }
  .td-comment-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:11px; color:#3a5a95; margin-bottom:4px; }
  .td-comment-author { font-weight:600; color:#1a3370; }
  .td-comment-body { white-space:pre-wrap; word-break:break-word; }
  .td-comment-empty { font-size:12px; color:#7a93b8; font-style:italic; padding:8px 0; }
  .td-comment-compose { display:flex; gap:8px; align-items:flex-end; margin-top:8px; }
  .td-comment-compose textarea { flex:1; resize:vertical; min-height:42px; }
  .td-comment-compose .btn { white-space:nowrap; padding:8px 12px; font-size:12px; }
  /* Comment attachments */
  .td-comment-tools { margin-top:6px; }
  .td-comment-attach-btn { display:inline-flex; align-items:center; gap:5px; background:none; border:none; color:#5a7aa8; font-size:11.5px; font-weight:600; cursor:pointer; padding:2px 0; font-family:inherit; }
  .td-comment-attach-btn:hover { color:#3a6cd8; }
  .td-comment-pending { display:flex; flex-direction:column; gap:5px; margin-top:6px; }
  .td-comment-pending:empty { margin-top:0; }
  .td-comment-pending-item { display:flex; align-items:center; gap:7px; font-size:11.5px; color:#475569; background:var(--bg2); border:1px solid var(--border2); border-radius:7px; padding:5px 8px; }
  .td-comment-pending-item .pn { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .td-comment-pending-item .px { border:none; background:none; color:#94a3b8; cursor:pointer; padding:0 2px; display:flex; }
  .td-comment-pending-item .px:hover { color:#dc2626; }
  .td-comment-atts { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
  .td-comment-att { display:inline-flex; align-items:center; gap:5px; max-width:200px; font-size:11px; font-weight:600; color:#3a6cd8; text-decoration:none; background:rgba(90,144,240,0.10); border:1px solid rgba(90,144,240,0.22); border-radius:12px; padding:3px 9px; cursor:pointer; }
  .td-comment-att:hover { background:rgba(90,144,240,0.18); }
  .td-comment-att span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* Task attachments */
  .td-attach-zone {
    border:2px dashed rgba(100,150,255,0.35); border-radius:10px;
    padding:12px 16px; text-align:center; cursor:pointer; font-size:12px;
    color:#5a7ab8; transition:background .15s,border-color .15s;
    background:rgba(230,240,255,0.3); user-select:none;
  }
  .td-attach-zone:hover, .td-attach-zone.drag-over {
    background:rgba(200,220,255,0.5); border-color:#6699ff;
  }
  .td-attach-zone svg { display:inline; vertical-align:middle; margin-right:5px; }
  .td-attachments-list { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
  .td-attachment {
    display:flex; align-items:center; gap:10px;
    background:rgba(255,255,255,0.65); border:1px solid rgba(180,210,255,0.5);
    border-radius:9px; padding:7px 10px; font-size:12px; color:#1a2f5c;
  }
  .td-attachment-thumb {
    width:36px; height:36px; border-radius:6px; object-fit:cover; flex-shrink:0;
    border:1px solid rgba(180,210,255,0.4); background:rgba(200,220,255,0.3);
  }
  .td-attachment-icon {
    width:36px; height:36px; border-radius:6px; flex-shrink:0;
    background:rgba(200,220,255,0.4); border:1px solid rgba(180,210,255,0.4);
    display:flex; align-items:center; justify-content:center; color:#4a70c0;
  }
  .td-attachment-info { flex:1; min-width:0; }
  .td-attachment-name {
    font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:100%; display:block; color:#1a3370; text-decoration:none; cursor:pointer;
  }
  .td-attachment-name:hover { text-decoration:underline; }
  .td-attachment-meta { font-size:11px; color:#7a93b8; }
  .td-attachment-del {
    background:none; border:none; color:#7a93b8; cursor:pointer;
    padding:3px; border-radius:4px; flex-shrink:0; display:flex;
    align-items:center; justify-content:center; transition:color .15s,background .15s;
  }
  .td-attachment-del:hover { color:#dc2626; background:rgba(254,226,226,0.6); }
  .td-attach-pending-label { font-style:italic; color:#7a93b8; }
  /* ── AI writing assist ── */
  .td-ai-bar { margin-top:6px; }
  .td-ai-trigger {
    display:inline-flex; align-items:center; gap:5px;
    font-size:11px; font-weight:500; color:var(--text2);
    background:none; border:1px dashed var(--border); border-radius:6px;
    padding:3px 10px; cursor:pointer; transition:all .15s;
  }
  .td-ai-trigger:hover { border-color:#818cf8; color:#6366f1; background:rgba(99,102,241,.06); }
  .td-ai-panel { margin-top:6px; display:flex; flex-direction:column; gap:8px; }
  .td-ai-chips { display:flex; flex-wrap:wrap; gap:6px; }
  .td-ai-chip {
    font-size:11px; padding:3px 11px; border-radius:20px;
    border:1px solid var(--border); background:var(--bg2); color:var(--text2);
    cursor:pointer; transition:all .15s; font-weight:500;
  }
  .td-ai-chip:hover { border-color:#818cf8; color:#6366f1; background:rgba(99,102,241,.1); }
  .td-ai-chip:disabled { opacity:.5; cursor:wait; }
  .td-ai-loading { display:flex; align-items:center; gap:8px; font-size:12px; color:#6366f1; padding:4px 0; }
  .td-ai-spinner {
    width:13px; height:13px; border:2px solid rgba(99,102,241,.25);
    border-top-color:#6366f1; border-radius:50%;
    animation:td-ai-spin .65s linear infinite; flex-shrink:0;
  }
  @keyframes td-ai-spin { to { transform:rotate(360deg); } }
  .td-ai-preview-box {
    background:rgba(99,102,241,.06); border:1px solid rgba(99,102,241,.22);
    border-radius:8px; padding:10px 12px; font-size:12px; color:var(--text);
    white-space:pre-wrap; word-break:break-word; line-height:1.55;
  }
  .td-ai-preview-footer { display:flex; gap:8px; margin-top:8px; }
  .td-ai-accept-btn {
    font-size:12px; padding:4px 14px; border-radius:6px; border:none;
    background:#6366f1; color:#fff; cursor:pointer; font-weight:600;
  }
  .td-ai-accept-btn:hover { background:#4f46e5; }
  .td-ai-discard-btn {
    font-size:12px; padding:4px 12px; border-radius:6px;
    border:1px solid var(--border); background:none; color:var(--text2); cursor:pointer;
  }
  .td-ai-discard-btn:hover { background:var(--bg2); }
  .td-ai-error { font-size:11px; color:#ef4444; padding:2px 0; }
  /* ── Rich-text description editor ── */
  .td-desc-toolbar {
    display:flex; gap:2px; padding:4px 6px;
    background:var(--bg2); border:1px solid var(--border);
    border-bottom:none; border-radius:8px 8px 0 0;
  }
  [data-theme="dark"] .tasks-drawer .td-desc-toolbar {
    background:rgba(255,255,255,0.45); border-color:rgba(180,210,255,0.6);
  }
  [data-theme="dark"] .tasks-drawer .td-desc-editor {
    background:rgba(255,255,255,0.55); color:#1a2f5c; border-color:rgba(180,210,255,0.6);
  }
  [data-theme="dark"] .tasks-drawer .td-desc-editor:focus {
    background:rgba(255,255,255,0.75); border-color:rgba(80,130,235,0.8);
  }
  .td-desc-tb-btn {
    font-size:12px; padding:2px 8px; border:1px solid transparent;
    border-radius:4px; background:none; color:var(--text2);
    cursor:pointer; line-height:1.5; transition:all .12s;
  }
  .td-desc-tb-btn:hover { background:var(--bg3); border-color:var(--border); color:var(--text); }
  .td-desc-tb-sep { width:1px; background:var(--border); margin:3px 3px; }
  .td-desc-editor {
    min-height:72px; max-height:260px; overflow-y:auto;
    padding:8px 10px; border:1px solid var(--border);
    border-radius:0 0 8px 8px; font-size:13px; line-height:1.55;
    color:var(--text); background:var(--bg); outline:none;
    word-break:break-word;
  }
  .td-desc-editor:focus { border-color:#6366f1; box-shadow:0 0 0 2px rgba(99,102,241,.13); }
  .td-desc-editor:empty::before { content:attr(data-placeholder); color:var(--text3); pointer-events:none; font-style:italic; }
  .td-desc-editor p { margin:0 0 2px; }
  .td-desc-editor ul, .td-desc-editor ol { padding-left:18px; margin:4px 0; }
  .td-desc-editor li { margin:2px 0; list-style-type:disc; }
  .td-desc-editor strong, .td-desc-editor b { font-weight:700; }
  .td-desc-editor em, .td-desc-editor i { font-style:italic; }
  /* ── Task power features ──────────────────────────────────────────── */
  /* Stage-advance confirmation popup */
  .stage-advance-popup {
    position:fixed; inset:0; z-index:3200; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(ellipse at center,rgba(20,40,90,.38) 0%,rgba(5,10,30,.58) 100%);
    opacity:0; pointer-events:none; transition:opacity .2s;
  }
  .stage-advance-popup.open { opacity:1; pointer-events:auto; }
  .stage-advance-card {
    background:var(--bg); border:1px solid var(--border2); border-radius:16px;
    padding:28px 28px 22px; max-width:360px; width:90%;
    box-shadow:0 12px 40px rgba(10,25,70,.22); text-align:center;
    transform:translateY(10px); transition:transform .2s;
  }
  .stage-advance-popup.open .stage-advance-card { transform:translateY(0); }
  .stage-advance-icon { font-size:32px; margin-bottom:10px; }
  .stage-advance-card h3 { font-size:15px; font-weight:700; margin:0 0 8px; color:var(--text); }
  .stage-advance-card p  { font-size:13px; color:var(--text2); margin:0 0 20px; line-height:1.5; }
  .stage-advance-actions { display:flex; gap:10px; justify-content:center; }
  /* Template picker modal */
  .tpl-picker-overlay {
    position:fixed; inset:0; z-index:3100; display:none;
    background:radial-gradient(ellipse at center,rgba(20,40,90,.38) 0%,rgba(5,10,30,.58) 100%);
  }
  .tpl-picker-overlay.open { display:flex; align-items:center; justify-content:center; }
  .tpl-picker-card-wrap {
    background:var(--bg); border:1px solid var(--border2); border-radius:16px;
    width:min(520px,95vw); max-height:80vh; display:flex; flex-direction:column;
    box-shadow:0 12px 40px rgba(10,25,70,.22);
  }
  .tpl-picker-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 22px 14px; border-bottom:1px solid var(--border);
  }
  .tpl-picker-head h3 { margin:0; font-size:15px; font-weight:700; }
  .tpl-picker-grid { display:flex; flex-direction:column; gap:10px; padding:16px 22px; overflow-y:auto; }
  .tpl-picker-item {
    display:flex; align-items:center; gap:14px; padding:14px 16px;
    background:var(--bg2); border:1px solid var(--border); border-radius:12px;
    cursor:pointer; transition:background .15s, border-color .15s;
  }
  .tpl-picker-item:hover { background:var(--bg3); border-color:var(--border2); }
  .tpl-picker-icon {
    width:42px; height:42px; border-radius:10px; display:flex; align-items:center;
    justify-content:center; flex-shrink:0;
  }
  .tpl-picker-info { flex:1; min-width:0; }
  .tpl-picker-name  { font-size:14px; font-weight:700; color:var(--text); }
  .tpl-picker-desc  { font-size:12px; color:var(--text2); margin-top:2px; }
  .tpl-picker-count { font-size:11px; color:var(--text3); margin-top:4px; font-weight:600; }
  /* Subtasks in drawer */
  .td-subtask-row {
    display:flex; align-items:center; gap:8px; padding:5px 0;
    border-bottom:1px solid var(--border);
  }
  .td-subtask-row:last-child { border-bottom:none; }
  .td-subtask-check {
    width:16px; height:16px; border:2px solid var(--border2); border-radius:4px;
    background:none; cursor:pointer; flex-shrink:0; transition:background .15s, border-color .15s;
  }
  .td-subtask-check.checked { background:#2563eb; border-color:#2563eb; }
  .td-subtask-check.checked::after { content:'✓'; color:#fff; font-size:10px; display:block; text-align:center; line-height:12px; }
  .td-subtask-text { flex:1; font-size:13px; color:var(--text); outline:none; min-width:0; }
  .td-subtask-text.done { text-decoration:line-through; color:var(--text3); }
  .td-subtask-text:empty::before { content:attr(data-placeholder); color:var(--text3); pointer-events:none; }
  .td-subtask-del { background:none; border:none; color:var(--text3); cursor:pointer; font-size:16px; padding:0 4px; opacity:0; transition:opacity .15s; }
  .td-subtask-row:hover .td-subtask-del { opacity:1; }
  .td-subtask-add-btn {
    display:flex; align-items:center; gap:6px; font-size:12px; color:#2563eb;
    background:none; border:none; cursor:pointer; padding:4px 0; margin-top:4px;
  }
  .td-subtask-add-btn:hover { text-decoration:underline; }
  .td-subtask-progress { font-size:11px; color:var(--text3); font-weight:600; }
  /* Dashboard task widget */
  .dashboard-tasks-widget {
    background:var(--bg); border:0.5px solid var(--border2); border-radius:12px;
    padding:18px 16px; box-shadow:var(--shadow-sm);
    /* min-width:0 lets this shrink to its grid/flex cell so long task titles
       ellipsis-truncate instead of forcing the card past the viewport. */
    min-width:0; overflow:hidden;
  }
  .dw-header { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
  .dw-title { font-size:16px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:7px; }
  .dw-title i { width:16px; height:16px; color:var(--text2); }
  .dw-view-all { margin-left:auto; font-size:13px; color:#2563EB; text-decoration:none; white-space:nowrap; }
  .dw-summary { font-size:12px; color:var(--text3); margin-bottom:6px; }
  .dw-summary .dw-overdue { color:#E24B4A; font-weight:500; }
  .dw-section-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin:12px 0 0; }
  .dw-task-row {
    display:flex; align-items:center; gap:12px; padding:13px 0;
    border-bottom:0.5px solid var(--border2); cursor:pointer;
  }
  .dw-task-row:last-child { border-bottom:none; }
  .dw-task-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; color:var(--text); }
  .dw-task-assoc { flex-shrink:0; max-width:42%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:var(--text3); }
  /* Checkbox — force a perfect circle (fixes the stretched-oval bug); status fills still win */
  .dashboard-tasks-widget .task-status-btn {
    width:20px; height:20px; min-width:20px; min-height:20px; border-radius:50%;
    border-width:1.5px; flex-shrink:0; box-shadow:none;
  }
  .dashboard-tasks-widget .task-status-btn:not(.status-done):not(.status-in_progress) {
    border-color:var(--border2); background:var(--bg);
  }