/* ============================================================
   KOOT TASKS — SHARED UI (single source of truth)
   ============================================================

   WHY THIS FILE EXISTS

   Tasks renders in two places from the same JavaScript (TaskUI.js):

     1. /tasks            — the standalone page (tasks.html + tasks-koot.css)
     2. index.html        — the embedded panel (#tasks-panel, styled in style.css)

   Both use the same element IDs and classes, because the same TaskUI.js
   renders into both. But their styling lived in two independent files with
   two independent copies of every rule — so a fix applied to one silently
   didn't reach the other. That failure mode bit us three times in a row:
   the kanban board's visibility bug (fixed twice, weeks apart, because the
   first fix went into the file that wasn't being looked at), priority badge
   styling, and the clickable dashboard tiles.

   Everything TaskUI.js renders — the *interior* of Tasks — belongs here, and
   only here. What stays in the host stylesheets is the shell around it: the
   panel's backdrop/header/slide-in behaviour, the standalone page's nav and
   full-page layout.

   HOW THEMING WORKS

   This file never hardcodes a colour. It styles against the neutral
   contract below, and each host maps its own theme into it:

     #tasks-panel (index.html)  -> maps its --tp-* indigo palette
     body (tasks.html)          -> maps its --bg-*/--primary-* palette (also indigo,
                                    as of 2026-09-20 — both hosts share one accent
                                    family now instead of orange-vs-indigo)

   That's what lets one set of rules serve two different looks, instead of
   two sets of rules drifting apart.

   MIGRATION STATUS — this file is being filled in incrementally, component
   group by component group, deleting each group from both host stylesheets
   as it moves. Doing all ~2500 lines in one pass would be a large
   unverifiable change across a live UI. Groups already moved:
     - view visibility (the recurring bug)
     - kanban board / columns / cards
   ============================================================ */

/* ---- Neutral contract defaults -----------------------------
   Fallbacks only. Hosts are expected to override these; these
   values exist so this file is never visually broken on its own
   if a host forgets to map something. */
:root {
  --tk-bg:           #f8f9fc;
  --tk-surface:      #ffffff;
  --tk-surface-alt:  #f1f2f7;
  --tk-surface-deep: #e2e4ec;
  --tk-border:       #e2e4ec;
  --tk-text:         #1e2130;
  --tk-text-muted:   #6b7280;
  --tk-accent:       #4f46e5;
  --tk-accent-soft:  rgba(79, 70, 229, 0.12);
  --tk-radius:       6px;
}

/* ============================================================
   VIEW VISIBILITY
   ------------------------------------------------------------
   The bug this file was created because of. Exactly one rule
   decides whether a view is shown, and every view — including
   kanban, which needs a different display mode — is switched by
   the SAME .active class. No view may set `display` outside of
   an .active-qualified selector; a bare `.some-view { display:
   ... }` rule ties with `.view-content { display: none }` on
   specificity and wins on source order, which renders that view
   permanently underneath whichever view is actually selected.
   ============================================================ */

.view-content { display: none; }
.view-content.active { display: block; }

/* Kanban is the one view that isn't a plain block when shown. */
.view-content.kanban-board.active {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 8px;
}

/* ============================================================
   KANBAN — columns and cards
   ============================================================ */

/* flex:1 + min-width (rather than the standalone page's old fixed 3-column
   grid, or the panel's old max-width:320px) so one rule serves both
   contexts correctly: in a wide container the columns divide the space
   evenly like a grid; in a narrow one they stop at min-width and the board
   scrolls horizontally instead of crushing them. */
.kanban-column {
  flex: 1 1 0;
  min-width: 200px;
  background: var(--tk-surface-alt);
  border-radius: var(--tk-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 240px;
}

.column-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--tk-surface-deep);
  border-bottom: 1px solid var(--tk-border);
}

.column-header h3 {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--tk-text);
  margin: 0;
}

.column-count {
  background: var(--tk-border);
  color: var(--tk-text-muted);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  font-variant-numeric: tabular-nums;
}

.btn-add-column {
  width: 22px;
  height: 22px;
  border: 1px dashed var(--tk-border);
  background: transparent;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  color: var(--tk-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.btn-add-column:hover {
  border-color: var(--tk-accent);
  color: var(--tk-accent);
}

.column-content {
  flex: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 80px;
  overflow-y: auto;
}
.column-content.drag-over {
  background: var(--tk-accent-soft);
}

.kanban-card {
  background: var(--tk-surface);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius);
  padding: 10px;
  cursor: grab;
  transition: box-shadow 0.12s, transform 0.12s;
}
.kanban-card:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging { opacity: 0.5; }

.kanban-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.kanban-card-header h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--tk-text);
  line-height: 1.35;
}
.kanban-card p {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--tk-text-muted);
  line-height: 1.4;
}

.kanban-due-date {
  margin-top: 8px;
  font-size: 11px;
  color: var(--tk-text-muted);
}
.kanban-due-date.overdue {
  color: #dc2626;
  font-weight: 600;
}

.kanban-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.tag-mini {
  background: var(--tk-surface-alt);
  color: var(--tk-text-muted);
  border-radius: 3px;
  font-size: 10px;
  padding: 1px 5px;
}

.kanban-empty {
  color: var(--tk-text-muted);
  font-size: 12px;
  text-align: center;
  padding: 16px 8px;
  border: 2px dashed var(--tk-border);
  border-radius: 4px;
}

/* ============================================================
   PRIORITY BADGE
   ------------------------------------------------------------
   Semantic colours, deliberately independent of --tk-accent:
   priority means the same thing regardless of which host's
   theme is in play, and must never be confused with "selected".
   ============================================================ */

.priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-transform: capitalize;
}
.priority-badge[data-priority="low"]    { background: #10b98120; color: #059669; border: 1px solid #10b98140; }
.priority-badge[data-priority="medium"] { background: #f59e0b20; color: #b45309; border: 1px solid #f59e0b40; }
.priority-badge[data-priority="high"]   { background: #f9731620; color: #c2410c; border: 1px solid #f9731640; }
.priority-badge[data-priority="urgent"] { background: #ef444420; color: #b91c1c; border: 1px solid #ef444440; }

/* ============================================================
   DASHBOARD — BREAKDOWN ROWS (By person / By tag / By category)
   ------------------------------------------------------------
   Migrated here from the two host stylesheets' own duplicate copies —
   this file's own header comment already lists "the clickable dashboard
   tiles" as one of the three past bugs this exact duplication caused, and
   these rows were the one dashboard piece not yet moved.

   The click-through to a filtered task list has worked since it was
   built — the actual live report ("no way to see the task itself, just
   tags") was a DISCOVERABILITY problem, not a missing feature: the only
   affordance was cursor:pointer plus a faint background tint on :hover,
   invisible until you happen to hover a row that otherwise reads as a
   static report (a donut chart, a bar chart) with nothing else
   interactive on the page to suggest rows are too. Fixed with a
   persistent chevron (not hover-only) and one hint line above the
   sections — see TaskUI.js's renderDashboardView().
   ============================================================ */

.dashboard-drill-hint {
  font-size: 0.78rem;
  color: var(--tk-text-muted);
  margin: 0 0 1rem;
}

.dashboard-section {
  margin-bottom: 1.75rem;
}

.dashboard-section h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tk-text-muted);
  margin: 0 0 0.75rem;
}

.dashboard-rows {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.dashboard-row {
  display: grid;
  grid-template-columns: minmax(90px, 140px) 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  margin: -0.25rem -0.4rem;
  border-radius: var(--tk-radius);
  transition: background 0.12s;
}
.dashboard-row:hover,
.dashboard-row:focus-visible {
  background: var(--tk-accent-soft);
  outline: none;
}
.dashboard-row:hover .dashboard-row-chevron,
.dashboard-row:focus-visible .dashboard-row-chevron {
  color: var(--tk-accent);
  transform: translateX(2px);
}

.dashboard-row-label {
  font-size: 0.85rem;
  color: var(--tk-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-row-bar-track {
  height: 6px;
  border-radius: 3px;
  background: var(--tk-surface-alt);
  overflow: hidden;
}

.dashboard-row-bar-fill {
  height: 100%;
  background: var(--tk-accent);
  border-radius: 3px;
}

.dashboard-row-count {
  font-size: 0.78rem;
  color: var(--tk-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The persistent affordance itself — always visible, not a hover reveal
   (see the section comment above for why that mattered here). */
.dashboard-row-chevron {
  font-size: 1rem;
  line-height: 1;
  color: var(--tk-text-muted);
  opacity: 0.6;
  transition: color 0.12s, transform 0.12s;
}

.dashboard-empty {
  color: var(--tk-text-muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 2rem 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Below this width three side-by-side columns can't hold usable content
   even at min-width, so stack them instead of forcing a horizontal scroll
   through a cramped board. */
@media (max-width: 720px) {
  .view-content.kanban-board.active {
    flex-direction: column;
    overflow-x: visible;
  }
  .kanban-column {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .dashboard-row {
    grid-template-columns: 84px 1fr auto auto;
    gap: 0.5rem;
  }
}

/* ── Close / reopen dialog ──────────────────────────────────────────────────────── */
.tk-dialog-overlay { position: fixed; inset: 0; z-index: 21000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.55); }
.tk-dialog { width: min(440px, 100%); padding: 18px 18px 14px; border-radius: 14px; background: var(--bg-medium); color: var(--text-primary); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.tk-dialog h3 { margin: 0 0 4px; font-size: 17px; }
.tk-dialog-task { margin: 0 0 12px; font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-dialog label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; }
.tk-dialog textarea { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-dark); color: var(--text-primary); font: inherit; font-size: 14px; resize: vertical; }
.tk-dialog textarea:focus-visible { outline: 2px solid var(--tp-accent, var(--accent, #10b981)); outline-offset: 1px; }
.tk-dialog-error { min-height: 18px; margin-top: 6px; font-size: 12.5px; color: var(--danger); }
.tk-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.tk-btn { padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--hover-bg); color: var(--text-primary); font-size: 14px; cursor: pointer; }
.tk-btn:hover { filter: brightness(1.08); }
.tk-btn:focus-visible { outline: 2px solid var(--tp-accent, var(--accent, #10b981)); outline-offset: 1px; }
.tk-btn-primary { background: var(--tp-accent, var(--accent, #10b981)); border-color: var(--tp-accent, var(--accent, #10b981)); color: var(--tp-on-accent, #04130e); font-weight: 600; }

/* ── Task cards (people, progress, last update) ───────────────────────────────────
   Theme comes from the Koot variables; the fallbacks keep the standalone /tasks page readable. */
.tkc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tkc-top h4 { flex: 1; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--text-primary, inherit); }
.tkc-top h4.is-done, .tk-drawer-head h2.is-done { text-decoration: line-through; opacity: .65; }
.tkc-chips { display: flex; align-items: center; gap: 5px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.tkc-meta { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; margin-top: 5px; font-size: 11.5px; color: var(--text-secondary, #666); }
.tkc-due.is-overdue { color: var(--danger, #dc2626); font-weight: 600; }
.tkc-role { font-style: italic; }
.tkc-progress { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 11px; color: var(--text-secondary, #666); font-variant-numeric: tabular-nums; }
.tkc-bar { flex: 1; height: 5px; border-radius: 99px; overflow: hidden; background: var(--hover-bg, rgba(127,127,127,.2)); }
.tkc-bar i { display: block; height: 100%; border-radius: inherit; background: var(--tp-accent, var(--accent, #10b981)); transition: width .25s; }
.tkc-note { margin-top: 7px; padding: 5px 9px; border-radius: 8px; font-size: 12px; line-height: 1.35; }
.tkc-blocked { background: color-mix(in srgb, var(--danger, #dc2626) 14%, transparent); color: var(--danger, #dc2626); }
.tkc-stale { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; }
.tk-closed { background: color-mix(in srgb, var(--success, #10b981) 14%, transparent); color: var(--text-primary, inherit); }
.tkc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.tkc-updated { font-size: 11px; color: var(--text-secondary, #666); }
.task-card.blocked { border-left-color: var(--danger, #dc2626) !important; }
.task-card:focus-visible { outline: 2px solid var(--tp-accent, var(--accent, #10b981)); outline-offset: 1px; }

/* ── Sidebar: open category list ───────────────────────────────────────────────── */
.tk-link-btn { display: block; width: 100%; padding: 6px 12px; border: 0; background: transparent; text-align: left; font-size: 12px; color: var(--text-secondary, #666); cursor: pointer; }
.tk-link-btn:hover { color: var(--tp-accent, var(--accent, #10b981)); }
.tk-link-btn:focus-visible { outline: 2px solid var(--tp-accent, var(--accent, #10b981)); outline-offset: -2px; }
.tk-new-cat { font-weight: 600; }
#task-category-new { margin-top: 6px; }

/* ── Task detail drawer ──────────────────────────────────────────────────────── */
.tk-drawer-backdrop { position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,.45); }
.tk-drawer { position: absolute; z-index: 41; top: 0; right: 0; bottom: 0; width: min(520px, 100%); display: flex; flex-direction: column;
  background: var(--bg-medium, #fff); color: var(--text-primary, #111); border-left: 1px solid var(--border, #ddd); box-shadow: var(--shadow-lg, -8px 0 28px rgba(0,0,0,.25)); }
body > .tk-drawer, body > .tk-drawer-backdrop { position: fixed; z-index: 10040; }
.tk-drawer-head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 16px 12px; border-bottom: 1px solid var(--border, #ddd); }
.tk-drawer-titles { flex: 1; min-width: 0; }
.tk-drawer-head h2 { margin: 0 0 8px; font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
.tk-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tk-chip { padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--border, #ddd); }
.tk-status-todo { color: var(--text-secondary, #666); }
.tk-status-in-progress { color: #2563eb; border-color: #2563eb66; background: #2563eb1a; }
.tk-status-done { color: var(--success, #059669); border-color: color-mix(in srgb, var(--success, #059669) 45%, transparent); background: color-mix(in srgb, var(--success, #059669) 14%, transparent); }
.tk-icon-btn { flex: none; width: 32px; height: 32px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-secondary, #666); font-size: 16px; cursor: pointer; }
.tk-icon-btn:hover { background: var(--hover-bg, rgba(127,127,127,.15)); color: var(--text-primary, #111); }
.tk-icon-btn:focus-visible { outline: 2px solid var(--tp-accent, var(--accent, #10b981)); outline-offset: 1px; }
.tk-drawer-body { flex: 1; overflow-y: auto; padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 14px; }
.tk-role { font-size: 12px; color: var(--text-secondary, #666); }
.tk-people { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.tk-people > div > span:first-child { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary, #666); }
.tk-people strong { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.tk-people strong.is-overdue { color: var(--danger, #dc2626); }
.tk-sec h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.tk-count { font-weight: 500; color: var(--text-secondary, #666); }
.tk-desc { margin: 0; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.tk-steps { display: flex; gap: 6px; margin-top: 8px; }
.tk-step { flex: 1; padding: 6px 0; border: 1px solid var(--border, #ddd); border-radius: 8px; background: transparent; color: var(--text-primary, #111); font-size: 12.5px; cursor: pointer; }
.tk-step:hover { background: var(--hover-bg, rgba(127,127,127,.15)); }
.tk-step.on { background: var(--tp-accent, var(--accent, #10b981)); border-color: var(--tp-accent, var(--accent, #10b981)); color: var(--tp-on-accent, #04130e); font-weight: 600; }
.tk-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-actions:empty { display: none; }
.tk-hint { margin: 0; font-size: 12px; color: var(--text-secondary, #666); }
.tk-check { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tk-check label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.tk-check .is-done { text-decoration: line-through; opacity: .65; }
.tk-comment { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-bottom: 12px; }
.tk-comment textarea { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--border, #ddd); border-radius: 10px; background: var(--bg-dark, transparent); color: var(--text-primary, #111); font: inherit; font-size: 13.5px; resize: vertical; }
.tk-comment textarea:focus-visible { outline: 2px solid var(--tp-accent, var(--accent, #10b981)); outline-offset: 1px; }
.tk-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tk-ev { display: flex; gap: 10px; }
.tk-ev-icon { flex: none; width: 24px; text-align: center; line-height: 1.5; }
.tk-ev-body { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; }
.tk-ev-line time { margin-left: 8px; font-size: 11.5px; color: var(--text-secondary, #666); white-space: nowrap; }
.tk-ev blockquote { margin: 4px 0 0; padding: 6px 10px; border-left: 3px solid var(--border, #ddd); background: var(--hover-bg, rgba(127,127,127,.1)); border-radius: 0 8px 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tk-ev-empty { font-size: 13px; color: var(--text-secondary, #666); }
@media (max-width: 560px) { .tk-people { grid-template-columns: 1fr; } .tk-drawer { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .tkc-bar i { transition: none; } }

/* ── Card extras, people pickers in the detail view, accent picker ───────────────────────────── */
.tkc-assign { color: var(--tp-accent, var(--accent, #10b981)); font-weight: 600; }
.tkc-where { white-space: nowrap; }
.tk-span2 { grid-column: 1 / -1; }
.tk-pick { width: 100%; max-width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--border, #ddd); border-radius: 8px; background: var(--bg-dark, transparent); color: var(--text-primary, inherit); font: inherit; font-size: 13px; }
.tk-pick:focus-visible { outline: 2px solid var(--tp-accent, var(--accent, #10b981)); outline-offset: 1px; }
.tk-pick-add { width: auto; border-style: dashed; color: var(--text-secondary, #666); }
.tk-person-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 99px; background: var(--tp-accent-light, rgba(127,127,127,.18)); color: var(--text-primary, inherit); font-size: 12.5px; }
.tk-person-chip button { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-secondary, #666); font-size: 11px; line-height: 1; cursor: pointer; }
.tk-person-chip button:hover { background: rgba(127,127,127,.25); }
.tk-person-chip:not(:has(button)) { padding-right: 10px; }
.tk-chip-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.tk-theme-wrap { position: relative; }
.tk-theme-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 214px; padding: 10px 12px 12px; border-radius: 12px; background: var(--bg-medium, #fff); color: var(--text-primary, #111); border: 1px solid var(--border, #ddd); box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.3)); }
.tk-theme-pop[hidden] { display: none; }
.tk-theme-pop h4 { margin: 0 0 8px; font-size: 12px; font-weight: 700; }
.tk-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tk-swatch { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; outline: 1px solid var(--border, #ddd); outline-offset: 1px; }
.tk-swatch[aria-pressed="true"] { border-color: var(--bg-medium, #fff); outline: 2px solid var(--text-primary, #111); }
.tk-swatch:focus-visible { outline: 2px solid var(--tp-accent, var(--accent, #10b981)); outline-offset: 2px; }
.tk-theme-note { margin: 8px 0 0; font-size: 11.5px; color: var(--text-secondary, #666); }

/* ── Date & time picker (DateTimePicker.js) ─────────────────────────────────────────────────── */
.tk-dt { position: relative; display: flex; align-items: center; width: 100%; }
.tk-dt-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 8px 34px 8px 11px; border: 1px solid var(--tp-border, var(--border, #ddd)); border-radius: 9px;
  background: var(--tp-white, var(--bg-dark, #fff)); color: var(--tp-text, var(--text-primary, #111)); font: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.tk-dt-btn svg { flex: none; color: var(--tp-text-muted, var(--text-secondary, #666)); }
.tk-dt-btn.is-empty { color: var(--tp-text-muted, var(--text-secondary, #666)); }
.tk-dt-btn:hover { border-color: var(--tp-accent, var(--accent, #10b981)); }
.tk-dt-btn:focus-visible, .tk-dt-btn[aria-expanded="true"] { outline: none; border-color: var(--tp-accent, var(--accent, #10b981)); box-shadow: 0 0 0 3px rgba(var(--tp-accent-rgb, 16, 185, 129), .18); }
.tk-dt.is-past .tk-dt-text { color: var(--danger, #dc2626); }
.tk-dt-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--tp-text-muted, #666); font-size: 12px; cursor: pointer; display: none; }
.tk-dt.has-value .tk-dt-clear { display: block; }
.tk-dt-clear:hover { background: var(--hover-bg, rgba(127,127,127,.2)); color: var(--tp-text, #111); }

.tk-dtp { position: fixed; z-index: 20500; width: 296px; box-sizing: border-box; padding: 12px; border-radius: 14px; background: var(--tp-bg, var(--bg-medium, #fff)); color: var(--tp-text, var(--text-primary, #111));
  border: 1px solid var(--tp-border, var(--border, #ddd)); box-shadow: 0 18px 50px rgba(0,0,0,.35); font-size: 13px; }
.tk-dtp-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tk-dtp-title { font-size: 14px; font-weight: 700; }
.tk-dtp-arrow { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--tp-text, #111); font-size: 20px; line-height: 1; cursor: pointer; }
.tk-dtp-arrow:hover { background: var(--hover-bg, rgba(127,127,127,.18)); }
.tk-dtp-week, .tk-dtp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.tk-dtp-week span { text-align: center; font-size: 11px; font-weight: 600; color: var(--tp-text-muted, #666); padding: 2px 0 4px; }
.tk-dtp-day { aspect-ratio: 1; border: 0; border-radius: 9px; background: transparent; color: var(--tp-text, #111); font: inherit; font-size: 13px; cursor: pointer; font-variant-numeric: tabular-nums; }
.tk-dtp-day.other { color: var(--tp-text-muted, #666); opacity: .45; }
.tk-dtp-day.wk:not(.other):not(.sel) { color: var(--tp-text-muted, #666); }
.tk-dtp-day:hover { background: var(--hover-bg, rgba(127,127,127,.18)); }
.tk-dtp-day.today { box-shadow: inset 0 0 0 1.5px var(--tp-accent, var(--accent, #10b981)); font-weight: 700; }
.tk-dtp-day.sel { background: var(--tp-accent, var(--accent, #10b981)); color: var(--tp-on-accent, #04130e); font-weight: 700; opacity: 1; }
.tk-dtp-day:focus-visible, .tk-dtp-chip:focus-visible, .tk-dtp-sel:focus-visible, .tk-dtp-link:focus-visible, .tk-dtp-done:focus-visible, .tk-dtp-arrow:focus-visible { outline: 2px solid var(--tp-accent, var(--accent, #10b981)); outline-offset: 1px; }
.tk-dtp-time { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--tp-border, var(--border, #ddd)); }
.tk-dtp-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tp-text-muted, #666); margin-bottom: 6px; }
.tk-dtp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tk-dtp-chip { padding: 4px 10px; border: 1px solid var(--tp-border, #ddd); border-radius: 99px; background: transparent; color: var(--tp-text, #111); font-size: 12px; cursor: pointer; }
.tk-dtp-chip:hover { border-color: var(--tp-accent, var(--accent, #10b981)); }
.tk-dtp-chip.on { background: var(--tp-accent-light, rgba(16,185,129,.15)); border-color: var(--tp-accent, var(--accent, #10b981)); font-weight: 600; }
.tk-dtp-custom { display: flex; align-items: center; gap: 6px; }
.tk-dtp-sel { padding: 6px 8px; border: 1px solid var(--tp-border, #ddd); border-radius: 8px; background: var(--tp-white, var(--bg-dark, #fff)); color: var(--tp-text, #111); font: inherit; font-size: 13px; }
.tk-dtp-foot { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.tk-dtp-spacer { flex: 1; }
.tk-dtp-link { border: 0; background: transparent; color: var(--tp-accent, var(--accent, #10b981)); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.tk-dtp-link:hover { background: var(--hover-bg, rgba(127,127,127,.15)); }
.tk-dtp-done { border: 0; border-radius: 9px; padding: 7px 16px; background: var(--tp-accent, var(--accent, #10b981)); color: var(--tp-on-accent, #04130e); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
@media (max-width: 520px) { .tk-dtp { width: auto; } }

/* ── Dashboard (people first) ────────────────────────────────────────────────────────────────── */
.tkd { --tkd-done: #10b981; --tkd-prog: #8b5cf6; --tkd-todo: #94a3b8; --tkd-surface: var(--tp-white, var(--bg-secondary, #fff)); --tkd-line: var(--tp-border, var(--border, #ddd)); --tkd-text: var(--tp-text, var(--text-primary, #111)); --tkd-muted: var(--tp-text-muted, var(--text-secondary, #666)); --tkd-accent: var(--tp-accent, var(--accent, #10b981));
  display: flex; flex-direction: column; gap: 14px; padding: 4px 2px 20px; color: var(--tkd-text); }
.tkd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.tkd-scope { margin-left: auto; font-size: 12.5px; color: var(--tkd-muted); }
.tkd-seg { display: inline-flex; border: 1px solid var(--tkd-line); border-radius: 10px; overflow: hidden; background: var(--tkd-surface); }
.tkd-seg button { padding: 7px 14px; border: 0; border-right: 1px solid var(--tkd-line); background: transparent; color: var(--tkd-text); font: inherit; font-size: 13px; cursor: pointer; }
.tkd-seg button:last-child { border-right: 0; }
.tkd-seg button:hover { background: var(--hover-bg, rgba(127,127,127,.15)); }
.tkd-seg button.on { background: var(--tkd-accent); color: var(--tp-on-accent, #04130e); font-weight: 600; }
.tkd-seg.sm button { padding: 4px 10px; font-size: 12px; }
.tkd-seg button:focus-visible, .tkd-tile:focus-visible, .tkd-person-head:focus-visible, .tkd-task:focus-visible, .tkd-attn:focus-visible, .tkd-bd-row:focus-visible, .tkd-legend button:focus-visible, .tkd-link:focus-visible { outline: 2px solid var(--tkd-accent); outline-offset: 2px; }
.tkd-period select { padding: 7px 10px; border: 1px solid var(--tkd-line); border-radius: 10px; background: var(--tkd-surface); color: var(--tkd-text); font: inherit; font-size: 13px; }

.tkd-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tkd-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border: 1px solid var(--tkd-line); border-radius: 12px; background: var(--tkd-surface); color: var(--tkd-text); font: inherit; cursor: pointer; transition: border-color .12s, transform .12s; }
.tkd-tile:hover:not(:disabled) { border-color: var(--tkd-accent); }
.tkd-tile:disabled { cursor: default; opacity: .7; }
.tkd-tile-v { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tkd-tile-l { font-size: 12px; color: var(--tkd-muted); }
.tkd-tile.blue .tkd-tile-v { color: #3b82f6; } .tkd-tile.green .tkd-tile-v { color: var(--tkd-done); } .tkd-tile.purple .tkd-tile-v { color: var(--tkd-prog); }
.tkd-tile.red .tkd-tile-v { color: var(--danger, #ef4444); } .tkd-tile.muted .tkd-tile-v { color: var(--tkd-muted); }

.tkd-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; }
.tkd-card { padding: 14px 16px; border: 1px solid var(--tkd-line); border-radius: 14px; background: var(--tkd-surface); min-width: 0; }
.tkd-card h3 { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.tkd-card h3 small { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--tkd-muted); }
.tkd-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tkd-card-head h3 { margin: 0; }
.tkd-none, .tkd-empty { margin: 4px 0; font-size: 13px; color: var(--tkd-muted); }
.tkd-empty { padding: 40px 0; text-align: center; }

.tkd-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.tkd-avatar.sm { width: 20px; height: 20px; font-size: 9px; margin-right: 6px; vertical-align: middle; }
.tkd-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; line-height: 1.6; background: var(--hover-bg, rgba(127,127,127,.15)); color: var(--tkd-muted); white-space: nowrap; }
.tkd-tag.bad { background: color-mix(in srgb, var(--danger, #ef4444) 15%, transparent); color: var(--danger, #ef4444); font-weight: 600; }
.tkd-tag.warn { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; font-weight: 600; }

/* people */
.tkd-people { display: flex; flex-direction: column; }
.tkd-person { border-top: 1px solid var(--tkd-line); }
.tkd-person:first-child { border-top: 0; }
.tkd-person-head { display: grid; grid-template-columns: 34px minmax(120px, 1.1fr) minmax(90px, 1.4fr) auto auto 16px; align-items: center; gap: 12px; width: 100%; padding: 10px 4px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 10px; }
.tkd-person-head:hover { background: var(--hover-bg, rgba(127,127,127,.1)); }
.tkd-pname { display: flex; flex-direction: column; min-width: 0; }
.tkd-pname strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkd-pname small { font-size: 11.5px; color: var(--tkd-muted); }
.tkd-pbar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--hover-bg, rgba(127,127,127,.2)); }
.tkd-pbar i { display: block; height: 100%; }
.tkd-pbar .d, .tkd-legend .d { background: var(--tkd-done); } .tkd-pbar .p, .tkd-legend .p { background: var(--tkd-prog); } .tkd-pbar .t, .tkd-legend .t { background: var(--tkd-todo); }
.tkd-pnum { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--tkd-muted); min-width: 40px; text-align: right; }
.tkd-flags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.tkd-chev { color: var(--tkd-muted); font-size: 18px; transition: transform .15s; }
.tkd-person.open .tkd-chev { transform: rotate(90deg); }
.tkd-ptasks { margin: 0 0 8px 46px; display: flex; flex-direction: column; gap: 2px; }
.tkd-ptasks-foot { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 0; font-size: 12px; color: var(--tkd-muted); }
.tkd-link { border: 0; background: transparent; color: var(--tkd-accent); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.tkd-link:hover { background: var(--hover-bg, rgba(127,127,127,.15)); }
.tkd-task, .tkd-attn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.tkd-task:hover, .tkd-attn:hover { background: var(--hover-bg, rgba(127,127,127,.12)); }
.tkd-task-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkd-pct { font-size: 11.5px; color: var(--tkd-muted); font-variant-numeric: tabular-nums; }
.tkd-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tkd-todo); }
.tkd-dot.st-in-progress { background: var(--tkd-prog); } .tkd-dot.st-done { background: var(--tkd-done); }
.tkd-attn-list { display: flex; flex-direction: column; gap: 2px; }
.tkd-attn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tkd-attn-main small { font-size: 11.5px; color: var(--tkd-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* status donut (pure CSS, follows the theme) */
.tkd-donut-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tkd-donut { position: relative; flex: none; width: 112px; height: 112px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.tkd-donut::before { content: ''; position: absolute; inset: 18px; border-radius: 50%; background: var(--tkd-surface); }
.tkd-donut span { position: relative; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tkd-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 120px; }
.tkd-legend button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.tkd-legend button:hover { background: var(--hover-bg, rgba(127,127,127,.12)); }
.tkd-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.tkd-legend b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* breakdown */
.tkd-bd { display: flex; flex-direction: column; gap: 2px; }
.tkd-bd-row { display: grid; grid-template-columns: minmax(90px, 200px) 1fr 50px; align-items: center; gap: 12px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.tkd-bd-row:hover { background: var(--hover-bg, rgba(127,127,127,.12)); }
.tkd-bd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkd-bd-track { height: 7px; border-radius: 99px; background: var(--hover-bg, rgba(127,127,127,.2)); overflow: hidden; }
.tkd-bd-track i { display: block; height: 100%; border-radius: inherit; background: var(--tkd-done); }
.tkd-bd-n { font-size: 12.5px; color: var(--tkd-muted); text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .tkd-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tkd-cols { grid-template-columns: 1fr; }
  .tkd-person-head { grid-template-columns: 34px minmax(0, 1fr) auto 16px; }
  .tkd-person-head .tkd-pbar, .tkd-person-head .tkd-flags { grid-column: 2 / -1; }
  .tkd-ptasks { margin-left: 8px; }
}

/* ── Calendar ────────────────────────────────────────────────────────────────────────────────── */
.tkcal { --c-surface: var(--tp-white, var(--bg-secondary, #fff)); --c-line: var(--tp-border, var(--border, #ddd)); --c-text: var(--tp-text, var(--text-primary, #111)); --c-muted: var(--tp-text-muted, var(--text-secondary, #666)); --c-accent: var(--tp-accent, var(--accent, #10b981));
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; color: var(--c-text); align-items: start; padding: 2px 2px 20px; }
.tkcal-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tkcal-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
.tkcal-nav { display: flex; gap: 6px; }
.tkcal-btn { min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-surface); color: var(--c-text); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.tkcal-btn.today { font-size: 13px; font-weight: 600; }
.tkcal-btn:hover { border-color: var(--c-accent); }
.tkcal-btn:focus-visible, .tkcal-add:focus-visible, .tkcal-chip:focus-visible, .tkcal-ag:focus-visible, .tkcal-day:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.tkcal-sum { margin-left: auto; font-size: 12.5px; color: var(--c-muted); }
.tkcal-sum .late { color: var(--danger, #ef4444); }
.tkcal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.tkcal-weekdays span { text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--c-muted); text-transform: uppercase; }
.tkcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.tkcal-day { container-type: inline-size; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 5px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface); cursor: pointer; overflow: hidden; }
.tkcal-day.other { opacity: .5; }
.tkcal-day.wk { background: color-mix(in srgb, var(--c-surface) 92%, var(--c-muted)); }
.tkcal-day:hover { border-color: var(--c-accent); }
.tkcal-day.today .tkcal-num span { background: var(--c-accent); color: var(--tp-on-accent, #04130e); }
.tkcal-day.sel { border-color: var(--c-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-accent) 35%, transparent); }
.tkcal-num { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 600; }
.tkcal-num span { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 99px; font-variant-numeric: tabular-nums; }
.tkcal-num small { font-size: 10.5px; color: var(--c-muted); font-weight: 500; }
.tkcal-chip { display: block; width: 100%; padding: 2px 6px; border: 0; border-left: 3px solid var(--tkd-todo, #94a3b8); border-radius: 5px; background: color-mix(in srgb, var(--tkd-todo, #94a3b8) 18%, transparent); color: var(--c-text); font: inherit; font-size: 11.5px; line-height: 1.5; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.tkcal-chip b { font-weight: 700; margin-right: 2px; opacity: .8; }
.tkcal-chip.st-prog { border-left-color: #8b5cf6; background: color-mix(in srgb, #8b5cf6 18%, transparent); }
.tkcal-chip.st-done { border-left-color: #10b981; background: color-mix(in srgb, #10b981 14%, transparent); text-decoration: line-through; opacity: .7; }
.tkcal-chip.is-late { border-left-color: var(--danger, #ef4444); background: color-mix(in srgb, var(--danger, #ef4444) 16%, transparent); }
.tkcal-chip:hover { filter: brightness(1.1); }
.tkcal-more { font-size: 11px; color: var(--c-muted); padding-left: 4px; }

.tkcal-side { padding: 14px; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-surface); position: sticky; top: 0; max-height: calc(100vh - 220px); overflow-y: auto; }
.tkcal-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.tkcal-side-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.tkcal-side-head h3 span { font-weight: 500; color: var(--c-muted); margin-left: 4px; }
.tkcal-side-head.late { margin-top: 16px; } .tkcal-side-head.late h3 { color: var(--danger, #ef4444); }
.tkcal-add { padding: 5px 10px; border: 1px dashed var(--c-accent); border-radius: 8px; background: transparent; color: var(--c-accent); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tkcal-add:hover { background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
.tkcal-list { display: flex; flex-direction: column; gap: 4px; }
.tkcal-empty { margin: 4px 0 0; font-size: 12.5px; color: var(--c-muted); }
.tkcal-ag { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 8px; align-items: start; width: 100%; padding: 8px; border: 1px solid var(--c-line); border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tkcal-ag:hover { border-color: var(--c-accent); }
.tkcal-ag.st-done .tkcal-ag-title { text-decoration: line-through; opacity: .65; }
.tkcal-ag-time { font-size: 12px; font-weight: 700; color: var(--c-muted); font-variant-numeric: tabular-nums; padding-top: 1px; }
.tkcal-ag-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tkcal-ag-title { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.tkcal-ag-meta { font-size: 11.5px; color: var(--c-muted); display: flex; align-items: center; flex-wrap: wrap; }
.tkcal-ag-state { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--hover-bg, rgba(127,127,127,.15)); color: var(--c-muted); white-space: nowrap; }
.tkcal-ag-state.st-in-progress { color: #8b5cf6; background: color-mix(in srgb, #8b5cf6 15%, transparent); }
.tkcal-ag-state.st-done { color: #059669; background: color-mix(in srgb, #10b981 15%, transparent); }
.tkcal-ag-state.late { color: var(--danger, #ef4444); background: color-mix(in srgb, var(--danger, #ef4444) 15%, transparent); font-weight: 600; }
@container (max-width: 118px) { .tkcal-chip b { display: none; } }
@media (max-width: 980px) { .tkcal { grid-template-columns: 1fr; } .tkcal-side { position: static; max-height: none; } }
@media (max-width: 620px) { .tkcal-grid { grid-template-rows: none !important; } .tkcal-day { min-height: 64px; } .tkcal-chip b { display: none; } }

.tk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Saved checklists, required steps ───────────────────────────────────────────────────────── */
.tk-req { margin-left: 8px; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.tk-cl-manage { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.tk-cl-manage li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border, #ddd); border-radius: 10px; }
.tk-cl-manage li span { display: flex; flex-direction: column; min-width: 0; }
.tk-cl-manage small { font-size: 12px; color: var(--text-secondary, #666); }
.tk-cl-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.tk-cl-bar select { flex: 1; min-width: 160px; width: auto !important; }
.tk-cl-manage-btn { width: auto !important; padding: 4px 6px !important; }
.tk-check-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--tp-text-muted, var(--text-secondary, #666)); cursor: pointer; }
.tk-check-row input { accent-color: var(--tp-accent, var(--accent, #10b981)); width: 16px; height: 16px; }

/* ── Repeating tasks ───────────────────────────────────────────────────────────────────────────── */
.tkc-repeat { white-space: nowrap; color: var(--tp-accent, var(--accent, #10b981)); font-weight: 600; }
.tk-repeat-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border, #ddd); border-radius: 10px; font-size: 13px; background: var(--hover-bg, rgba(127,127,127,.08)); }
.tk-repeat-row .tk-btn { padding: 4px 10px; font-size: 12.5px; }
.tk-repeat-custom { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; }
.tk-repeat-custom input { width: 72px !important; }
.tk-repeat-custom select { width: auto !important; }
.tk-repeat-days { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tk-repeat-days button { padding: 3px 10px; border: 1px solid var(--tp-border, var(--border, #ddd)); border-radius: 99px; background: transparent; color: var(--tp-text, inherit); font-size: 12.5px; cursor: pointer; }
.tk-repeat-days button.on { background: var(--tp-accent, var(--accent, #10b981)); border-color: var(--tp-accent, var(--accent, #10b981)); color: var(--tp-on-accent, #04130e); font-weight: 600; }
.tk-repeat-end { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; }
.tk-repeat-end label { margin: 0 !important; }
.tk-repeat-end input { width: 86px !important; }
[hidden].tk-repeat-custom, [hidden].tk-repeat-days, [hidden].tk-repeat-end { display: none; }