/* ── TASKS ────────────────────────────────────────────
   A dense work surface. Rows are 36px so a screen holds a real queue, and
   every control inside a row is invisible until the row is hovered — the
   default state is the data, not the chrome.

   Colour rules from branddesign.md hold: ink for primary actions, accent only
   as a signal (urgent, overdue, focus). Status and tag colours are data, and
   arrive as --sc / --tc / --gc / --pc custom properties on the element.
   ──────────────────────────────────────────────────── */

#view-tasks { height: 100%; overflow: hidden; }

.tk-shell {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
  background: var(--bg);
}

/* ── Chrome ───────────────────────────────────────── */
.tk-chrome { flex: 0 0 auto; border-bottom: 1px solid var(--b1); background: var(--bg); }

.tk-crumb {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px 10px;
  font-size: 13px;
}
.tk-back {
  display: grid; place-items: center;
  width: 26px; height: 26px; margin-left: -4px;
  border: 0; background: transparent; border-radius: var(--r-2);
  color: var(--t2); cursor: pointer;
}
.tk-back svg { width: 16px; height: 16px; }
.tk-back:hover { background: var(--bg2); color: var(--tx); }
.tk-crumb-ws  { color: var(--t3); font-weight: 500; }
.tk-crumb-sep { color: var(--t4); }
.tk-crumb-cur { color: var(--tx); font-weight: 600; }
.tk-crumb-star {
  display: grid; place-items: center; width: 24px; height: 24px;
  border: 0; background: transparent; color: var(--t4); cursor: default; border-radius: var(--r-2);
}
.tk-crumb-star svg { width: 15px; height: 15px; }

/* view tabs */
.tk-tabs {
  display: flex; align-items: center; gap: 2px;
  padding: 0 20px;
  border-bottom: 1px solid var(--b1);
}
.tk-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 11px 10px;
  border: 0; background: transparent;
  border-bottom: 2px solid transparent;
  font-size: 13px; font-weight: 500; color: var(--t3);
  cursor: pointer; white-space: nowrap;
}
.tk-tab .tk-i svg { width: 15px; height: 15px; }
.tk-tab:hover { color: var(--tx); }
.tk-tab.on { color: var(--tx); font-weight: 600; border-bottom-color: var(--tx); }
.tk-tabs-sp { flex: 1; }
.tk-tab-alt { color: var(--t3); }

/* toolbar */
.tk-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px 20px;
  flex-wrap: wrap;
}
.tk-tool-l, .tk-tool-r { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.tk-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 10px;
  border: 1px solid var(--b1); border-radius: var(--r-2);
  background: var(--bg);
  font-size: 12px; font-weight: 500; color: var(--t2);
  cursor: pointer; white-space: nowrap;
}
.tk-chip .tk-i svg, .tk-chip > svg { width: 14px; height: 14px; }
.tk-chip:hover { background: var(--bg2); color: var(--tx); border-color: var(--b2); }
.tk-chip.on { background: var(--tx); border-color: var(--tx); color: var(--bg); }
.tk-chip-k { color: var(--t4); font-weight: 500; }
.tk-chip.on .tk-chip-k { color: color-mix(in srgb, var(--bg) 70%, transparent); }

.tk-search {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  border: 1px solid var(--b1); border-radius: var(--r-2);
  background: var(--bg); color: var(--t4);
}
.tk-search svg { width: 14px; height: 14px; flex: 0 0 auto; }
.tk-search input {
  width: 150px; border: 0; background: transparent; outline: none;
  font-size: 12px; color: var(--tx); font-family: inherit;
}
.tk-search input::placeholder { color: var(--t4); }
.tk-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-line); }

/* Primary action is ink, per §3 — accent stays a signal. */
.tk-add {
  height: 28px; padding: 0 14px;
  border: 0; border-radius: var(--r-2);
  background: var(--fill, var(--tx)); color: var(--fill-ink);
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.tk-add:hover { opacity: .88; }

/* ── Body ─────────────────────────────────────────── */
.tk-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 20px 80px; }

/* ── Groups ───────────────────────────────────────── */
.tk-group { margin-top: 14px; }

.tk-ghead { display: flex; align-items: center; gap: 7px; padding: 4px 0 6px; }
.tk-gfold {
  display: grid; place-items: center; width: 18px; height: 18px;
  border: 0; background: transparent; color: var(--t3); cursor: pointer;
  transform: rotate(90deg); transition: transform var(--t-fast, .14s) var(--ease, ease);
}
.tk-gfold.folded { transform: rotate(0deg); }
.tk-gfold svg { width: 13px; height: 13px; }

.tk-gpill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 21px; padding: 0 9px;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--gc, #8b8b8b) 14%, transparent);
  color: var(--gc, #8b8b8b);
  font-family: var(--ff-mono, monospace);
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.tk-gpill-i { display: grid; place-items: center; }
.tk-gpill-i svg { width: 12px; height: 12px; display: block; }

/* On the board the column behind the pill is already tinted, so a tinted pill
   would sink into it. Solid, with white text, is what the reference uses. */
.tk-gpill.solid {
  background: var(--gc, #8b8b8b);
  color: #fff;
  height: 23px; padding: 0 10px;
}
.tk-gcount {
  font-family: var(--ff-mono, monospace);
  font-size: 11px; font-weight: 600; color: var(--t4);
}
.tk-gmenu, .tk-gadd {
  display: grid; place-items: center; width: 22px; height: 22px;
  border: 0; background: transparent; color: var(--t4);
  border-radius: var(--r-1); cursor: pointer; opacity: 0;
}
.tk-ghead:hover .tk-gmenu, .tk-ghead:hover .tk-gadd { opacity: 1; }
.tk-gmenu svg, .tk-gadd svg { width: 14px; height: 14px; }
.tk-gmenu:hover, .tk-gadd:hover { background: var(--bg2); color: var(--tx); }

/* ── Column header ────────────────────────────────── */
/* Eleven cells into twelve tracks — the trailing 1fr is the gutter the
   reference leaves to the right of Comments. Capping the name column is what
   stops the data columns flying to the far edge of a wide screen: they sit at
   a fixed, scannable position instead. */
.tk-cols, .tk-row {
  display: grid;
  grid-template-columns:
    14px 18px 16px 18px
    minmax(180px, 620px)
    150px 150px 104px 168px 132px 34px
    minmax(0, 1fr);
  align-items: center; gap: 10px;
}
.tk-cols {
  padding: 0 8px 5px;
  border-bottom: 1px solid var(--b1);
  font-size: 10.5px; font-weight: 500; color: var(--t4);
  letter-spacing: .04em;
}
.tk-cols span { text-align: left; }

/* ── Rows ─────────────────────────────────────────── */
.tk-rows { display: flex; flex-direction: column; }

.tk-row {
  min-height: 36px; padding: 0 8px;
  border-bottom: 1px solid var(--b0, var(--b1));
  cursor: pointer;
  background: var(--bg);
}
.tk-row:hover { background: var(--bg2); }
.tk-row.dragging { opacity: .45; }
.tk-row.done .tk-name-t { color: var(--t4); text-decoration: line-through; }

.tk-grip {
  display: grid; place-items: center; color: var(--t5, var(--t4));
  opacity: 0; cursor: grab;
}
.tk-grip svg { width: 14px; height: 14px; }
.tk-row:hover .tk-grip { opacity: .55; }

/* Selection checkbox — square, so it never reads as the round status control
   beside it. Hidden until the row is hovered or something is selected. */
.tk-sel {
  display: grid; place-items: center;
  width: 16px; height: 16px; padding: 0;
  border: 1.5px solid var(--b3, var(--b2)); border-radius: 4px;
  background: var(--bg); color: #fff; cursor: pointer;
  opacity: 0; transition: opacity var(--t-fast, .12s) var(--ease, ease);
}
.tk-sel svg { width: 10px; height: 10px; }
.tk-row:hover .tk-sel, .tk-cols:hover .tk-sel { opacity: 1; }
.tk-sel:hover { border-color: var(--tx); }
.tk-sel.on,
body.tk-has-sel .tk-sel { opacity: 1; }
.tk-sel.on { background: var(--tx); border-color: var(--tx); }
.tk-sel.head.all, .tk-sel.head.some { opacity: 1; background: var(--tx); border-color: var(--tx); }
.tk-sel-dash { display: block; width: 8px; height: 2px; border-radius: 1px; background: #fff; }

/* Status circle doubles as the done toggle, as it does in the reference. */
.tk-circle {
  display: grid; place-items: center;
  width: 17px; height: 17px; padding: 0;
  border: 1.6px dashed var(--sc, #c4c4c4); border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer;
}
.tk-circle:hover { border-style: solid; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc, #c4c4c4) 18%, transparent); }
.tk-circle.on {
  border-style: solid;
  background: var(--sc, var(--green, #10b981));
  border-color: var(--sc, var(--green, #10b981));
}
.tk-circle svg { width: 10px; height: 10px; }

/* Still used by subtasks and checklist items, which are plain done-toggles. */
.tk-check {
  display: grid; place-items: center;
  width: 17px; height: 17px; padding: 0;
  border: 1.5px solid var(--b3, var(--b2)); border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer;
}
.tk-check:hover { border-color: var(--green, #10b981); }
.tk-check.on { background: var(--green, #10b981); border-color: var(--green, #10b981); }
.tk-check svg { width: 10px; height: 10px; }
.tk-check.sm { width: 15px; height: 15px; }
.tk-check.sm svg { width: 9px; height: 9px; }

.tk-stdot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sc, #c4c4c4); flex: 0 0 auto;
}

.tk-row.sel { background: var(--accent-bg, var(--bg2)); }
.tk-row.sel:hover { background: var(--accent-bg, var(--bg3)); }

/* Expand arrow — points right when closed, and is the "create subtask"
   affordance on a task that has none. */
.tk-expand {
  display: grid; place-items: center; width: 16px; height: 16px; padding: 0;
  border: 0; background: transparent; border-radius: var(--r-1);
  color: var(--t4); cursor: pointer; opacity: 0;
}
.tk-expand svg { width: 12px; height: 12px; }
.tk-row:hover .tk-expand { opacity: 1; }
.tk-expand.has { opacity: .75; }
.tk-expand:hover { background: var(--bg3); color: var(--tx); opacity: 1; }

.tk-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tk-name-t {
  font-size: 13px; font-weight: 500; color: var(--tx);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Quick actions sit after the title and only exist on hover, so the resting
   row is the data and nothing else. */
.tk-quick { display: inline-flex; align-items: center; gap: 1px; opacity: 0; flex: 0 0 auto; }
.tk-row:hover .tk-quick { opacity: 1; }
.tk-quick button {
  display: grid; place-items: center; width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--b1); background: var(--bg); border-radius: var(--r-1);
  color: var(--t3); cursor: pointer;
}
.tk-quick button svg { width: 13px; height: 13px; }
.tk-quick button:hover { background: var(--bg3); color: var(--tx); border-color: var(--b2); }

.tk-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 5px; border-radius: var(--r-1);
  background: var(--bg3); color: var(--t3);
  font-family: var(--ff-mono, monospace); font-size: 10px; font-weight: 600;
  flex: 0 0 auto;
}
.tk-badge svg { width: 11px; height: 11px; }

.tk-tagchip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px; border-radius: var(--r-pill, 999px);
  background: color-mix(in srgb, var(--tc, #6b7280) 14%, transparent);
  color: var(--tc, #6b7280);
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
  flex: 0 0 auto;
}
.tk-tagchip button {
  border: 0; background: transparent; color: inherit;
  cursor: pointer; font-size: 12px; line-height: 1; padding: 0 0 0 2px;
}

.tk-cell { display: flex; align-items: center; min-width: 0; }

.tk-av {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg4, var(--bg3)); color: var(--t2);
  font-family: var(--ff-mono, monospace);
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  flex: 0 0 auto;
}
.tk-av.sm { width: 20px; height: 20px; font-size: 9px; }
.tk-av.more { background: transparent; color: var(--t3); }

/* Empty-state affordances: a faint icon pair that only shows on row hover. */
.tk-ghosticon {
  display: inline-flex; align-items: center;
  border: 0; background: transparent; color: var(--t4);
  cursor: pointer; padding: 3px; border-radius: var(--r-1);
  opacity: 0;
}
.tk-row:hover .tk-ghosticon { opacity: 1; }
.tk-ghosticon svg { width: 15px; height: 15px; }
.tk-ghosticon svg + svg { width: 10px; height: 10px; margin-left: -2px; }
.tk-ghosticon:hover { background: var(--bg3); color: var(--tx); }

.tk-duebtn {
  border: 0; background: transparent; padding: 2px 5px; border-radius: var(--r-1);
  font-size: 11.5px; color: var(--t2); cursor: pointer; white-space: nowrap;
  font-family: var(--ff-mono, monospace);
}
.tk-duebtn:hover { background: var(--bg3); }
.tk-duebtn.over  { color: var(--accent); font-weight: 600; }
.tk-duebtn.soon  { color: var(--tx); font-weight: 600; }
.tk-duebtn.muted { color: var(--t4); }

.tk-flag {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; padding: 0;
  border: 0; background: transparent; border-radius: var(--r-1);
  color: var(--pc, #c4c4c4); cursor: pointer;
}
.tk-flag svg { width: 15px; height: 15px; }
.tk-flag:hover { background: var(--bg3); }

.tk-stpill {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%; height: 20px; padding: 0 8px;
  border: 0; border-radius: var(--r-1);
  background: color-mix(in srgb, var(--sc, #8b8b8b) 13%, transparent);
  color: var(--sc, #8b8b8b);
  font-family: var(--ff-mono, monospace);
  font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-stpill.lg { height: 26px; font-size: 11px; padding: 0 10px; }
.tk-stpill:hover { filter: brightness(.94); }
.tk-stdot2 { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

.tk-cmbtn {
  display: inline-flex; align-items: center; gap: 3px;
  border: 0; background: transparent; color: var(--t4);
  padding: 3px 5px; border-radius: var(--r-1); cursor: pointer;
  font-family: var(--ff-mono, monospace); font-size: 10.5px; font-weight: 600;
}
.tk-cmbtn svg { width: 14px; height: 14px; }
.tk-cmbtn:hover { background: var(--bg3); color: var(--tx); }
.tk-cmbtn.has { color: var(--t2); }

.tk-rowmenu {
  display: grid; place-items: center; width: 24px; height: 24px;
  border: 0; background: transparent; color: var(--t4);
  border-radius: var(--r-1); cursor: pointer; opacity: 0;
}
.tk-row:hover .tk-rowmenu, .tk-card:hover .tk-rowmenu { opacity: 1; }
.tk-rowmenu svg { width: 14px; height: 14px; }
.tk-rowmenu:hover { background: var(--bg3); color: var(--tx); }

/* ── Add row ──────────────────────────────────────── */
.tk-addrow {
  display: flex; align-items: center; gap: 7px;
  width: 100%; min-height: 34px; padding: 0 8px 0 12px;
  border: 0; background: transparent;
  font-size: 12.5px; font-weight: 500; color: var(--t4);
  cursor: pointer; text-align: left;
}
.tk-addrow svg { width: 14px; height: 14px; }
.tk-addrow:hover { color: var(--tx); background: var(--bg2); }
.tk-addrow.open { padding-left: 12px; cursor: default; }
.tk-newinput {
  flex: 1; height: 30px; border: 0; background: transparent; outline: none;
  font-size: 13px; font-family: inherit; color: var(--tx);
}
.tk-newinput::placeholder { color: var(--t4); }

.tk-newstatus, .tk-bnew {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 16px 0 0; padding: 7px 12px;
  border: 1px dashed var(--b2); border-radius: var(--r-2);
  background: transparent; color: var(--t3);
  font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  white-space: nowrap;
}
.tk-newstatus svg, .tk-bnew svg { width: 14px; height: 14px; }
.tk-newstatus:hover, .tk-bnew:hover { color: var(--tx); border-color: var(--b3, var(--b2)); }
/* On the board it sits beside the columns, aligned with their header row. */
.tk-bnew { margin: 0; flex: 0 0 auto; align-self: flex-start; }

/* ── Board ────────────────────────────────────────── */
.tk-board {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 0 40px; overflow-x: auto; min-height: 100%;
}
/* The column carries its status colour as a wash — enough to group the cards
   under it at a glance, not enough to compete with them. */
.tk-bcol {
  flex: 0 0 286px; width: 286px;
  background: color-mix(in srgb, var(--gc, #8b8b8b) 7%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--gc, #8b8b8b) 20%, transparent);
  border-radius: var(--r-3); padding: 10px 10px 8px;
}
.tk-bcol.over {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-line);
  background: color-mix(in srgb, var(--gc, #8b8b8b) 12%, var(--bg));
}

.tk-bhead { display: flex; align-items: center; gap: 7px; padding: 1px 1px 10px; }
.tk-bhead .tk-gcount { color: var(--gc, #8b8b8b); opacity: .85; }
.tk-bhead .tk-gmenu, .tk-bhead .tk-gadd { color: color-mix(in srgb, var(--gc, #8b8b8b) 70%, var(--t3)); }
.tk-bcol:hover .tk-gmenu, .tk-bcol:hover .tk-gadd { opacity: 1; }
.tk-bhead .tk-gadd { margin-left: auto; }
.tk-bhead .tk-gmenu:hover, .tk-bhead .tk-gadd:hover {
  background: color-mix(in srgb, var(--gc, #8b8b8b) 16%, transparent);
}

.tk-bcards { display: flex; flex-direction: column; gap: 7px; min-height: 8px; }

/* Add Task takes the column's colour, so each column reads as one unit. */
.tk-badd {
  display: flex; align-items: center; gap: 6px;
  width: 100%; margin-top: 7px; padding: 7px 8px;
  border: 0; background: transparent; border-radius: var(--r-2);
  color: color-mix(in srgb, var(--gc, #8b8b8b) 82%, var(--tx));
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer; text-align: left;
}
.tk-badd svg { width: 14px; height: 14px; }
.tk-badd:hover { background: color-mix(in srgb, var(--gc, #8b8b8b) 13%, transparent); }

.tk-card {
  background: var(--bg); border: 1px solid var(--b1);
  border-radius: var(--r-2); padding: 9px 10px; cursor: pointer;
}
.tk-card:hover { border-color: var(--b2); }
.tk-card.dragging { opacity: .45; }
.tk-card.done .tk-card-t { color: var(--t4); text-decoration: line-through; }
.tk-card-top { display: flex; align-items: flex-start; gap: 7px; }
.tk-card-top .tk-stdot { margin-top: 5px; }
.tk-card-t { flex: 1; font-size: 12.5px; font-weight: 500; color: var(--tx); line-height: 1.35; }
.tk-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 7px 0 0 15px; }
/* No status dot on the card means nothing to indent past. */
.tk-card.nodot .tk-card-tags, .tk-card.nodot .tk-card-foot { margin-left: 0; }
.tk-card-foot {
  display: flex; align-items: center; gap: 6px;
  margin: 8px 0 0 15px; flex-wrap: wrap;
}
.tk-card-foot .tk-av { margin-left: auto; }

/* ── Table ────────────────────────────────────────── */
.tk-tablewrap { overflow-x: auto; margin-top: 14px; }
.tk-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tk-table th {
  text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--b2);
  font-size: 10.5px; font-weight: 500; color: var(--t4); letter-spacing: .04em;
  white-space: nowrap;
}
.tk-table td { padding: 9px 10px; border-bottom: 1px solid var(--b1); color: var(--t2); }
.tk-table tbody tr { cursor: pointer; }
.tk-table tbody tr:hover { background: var(--bg2); }
.tk-t-name { font-weight: 500; color: var(--tx); }
.tk-t-num { font-family: var(--ff-mono, monospace); color: var(--t3); }
.tk-mut { color: var(--t4); }
.tk-over { color: var(--accent); font-weight: 600; }

/* ── Empty ────────────────────────────────────────── */

.tk-art {
  width: 84px; height: 84px; border-radius: var(--r-4);
  background: repeating-conic-gradient(var(--b2) 0% 25%, transparent 0% 50%) 0 0 / 7px 7px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 72%);
          mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 72%);
  opacity: .8;
}
/* Title and copy come from .empty — see css/empty.css. */
.empty .tk-add { height: 32px; margin-top: 6px; }

/* ── Popovers and menus ───────────────────────────── */
.tk-pop {
  position: fixed; z-index: 10050;
  min-width: 210px; max-width: 320px;
  background: var(--bg); border: 1px solid var(--b2);
  border-radius: var(--r-3);
  box-shadow: var(--sh-3, 0 14px 40px rgba(0,0,0,.18));
  padding: 5px; overflow: hidden;
}
.tk-pop.wide { min-width: 460px; max-width: 520px; padding: 0; }
.tk-pop-title {
  padding: 8px 9px 6px; font-size: 11px; font-weight: 600;
  color: var(--t4); letter-spacing: .04em;
}
.tk-pop-sec {
  padding: 8px 9px 4px; font-size: 11px; font-weight: 500; color: var(--t4);
}
.tk-pop-list { max-height: 240px; overflow: auto; }

.tk-pop-search { padding: 5px; }
.tk-pop-search input, .tk-tagbox input {
  width: 100%; height: 30px; padding: 0 9px;
  border: 1px solid var(--b2); border-radius: var(--r-2);
  background: var(--bg); color: var(--tx);
  font-size: 12.5px; font-family: inherit; outline: none;
}
.tk-pop-search input:focus, .tk-tagbox input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-line);
}
.tk-pop-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border: 0; background: transparent;
  border-radius: var(--r-2); cursor: pointer; text-align: left;
  font-size: 12.5px; color: var(--tx); font-family: inherit;
}
.tk-pop-item:hover { background: var(--bg2); }
.tk-pop-l em { color: var(--t4); font-style: normal; }
.tk-pop-create { color: var(--t2); }
.tk-pop-create em { margin-left: auto; color: var(--t4); font-style: normal; }
.tk-pop-foot {
  width: 100%; padding: 7px 8px; margin-top: 3px;
  border: 0; border-top: 1px solid var(--b1); background: transparent;
  font-size: 12px; color: var(--t3); cursor: pointer; text-align: left; font-family: inherit;
}
.tk-pop-foot:hover { color: var(--tx); }

.tk-menu { display: flex; flex-direction: column; }
.tk-menu-i {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border: 0; background: transparent;
  border-radius: var(--r-2); cursor: pointer; text-align: left;
  font-size: 12.5px; font-weight: 500; color: var(--tx); font-family: inherit;
}
.tk-menu-i:hover { background: var(--bg2); }
.tk-menu-i.danger { color: var(--red, #ef4444); }
.tk-menu-i .tk-i svg { width: 15px; height: 15px; color: var(--t3); }
.tk-menu-i.danger .tk-i svg { color: inherit; }
.tk-menu-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.tk-menu-ck { margin-left: auto; display: grid; place-items: center; color: var(--tx); }
.tk-menu-ck svg { width: 14px; height: 14px; }
.tk-menu-sep { height: 1px; background: var(--b1); margin: 4px 2px; }

.tk-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px; }
.tk-sw { width: 34px; height: 26px; border: 1px solid var(--b2); border-radius: var(--r-2); cursor: pointer; }

/* ── Date picker ──────────────────────────────────── */
/* Start / Due tabs over one shared calendar. */
.tk-dp-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 11px 9px; }
.tk-dp-tab {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 11px;
  border: 1px solid var(--b1); border-radius: var(--r-2);
  background: var(--bg2); color: var(--t3);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
  overflow: hidden; white-space: nowrap;
}
.tk-dp-tab .tk-i svg { width: 15px; height: 15px; flex: 0 0 auto; }
.tk-dp-tab:hover { color: var(--tx); }
.tk-dp-tab.on { background: var(--bg); border-color: var(--tx); color: var(--tx); font-weight: 600; }

.tk-dp { display: grid; grid-template-columns: 190px 1fr; border-top: 1px solid var(--b1); }
.tk-dp-quick { border-right: 1px solid var(--b1); padding: 6px; }
.tk-dp-q {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 6px 9px; border: 0; background: transparent;
  border-radius: var(--r-2); cursor: pointer;
  font-size: 12.5px; color: var(--tx); font-family: inherit;
}
.tk-dp-q:hover { background: var(--bg2); }
.tk-dp-q em { font-style: normal; font-size: 11.5px; color: var(--t4); font-family: var(--ff-mono, monospace); }
.tk-dp-sep { height: 1px; background: var(--b1); margin: 5px 2px; }
.tk-dp-clear { color: var(--t3); }

.tk-dp-cal { padding: 9px 11px 12px; }
.tk-dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tk-dp-head b { font-size: 12.5px; font-weight: 600; color: var(--tx); }
.tk-dp-head span { display: flex; gap: 2px; }
.tk-dp-head button {
  min-width: 24px; height: 24px; padding: 0 6px;
  border: 0; background: transparent; border-radius: var(--r-1);
  color: var(--t3); cursor: pointer; font-size: 12px; font-family: inherit;
}
.tk-dp-head button:hover { background: var(--bg2); color: var(--tx); }
.tk-dp-dow, .tk-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.tk-dp-dow i {
  display: grid; place-items: center; height: 22px;
  font-style: normal; font-size: 10px; font-weight: 500; color: var(--t4);
  font-family: var(--ff-mono, monospace);
}
.tk-dp-d {
  display: grid; place-items: center; height: 28px;
  border: 0; background: transparent; border-radius: var(--r-1);
  font-family: var(--ff-mono, monospace); font-size: 11.5px;
  color: var(--tx); cursor: pointer;
}
.tk-dp-d:hover { background: var(--bg2); }
.tk-dp-d.out { color: var(--t4); }
.tk-dp-d.today { color: var(--accent); font-weight: 700; }
.tk-dp-d.sel { background: var(--fill, var(--tx)); color: var(--fill-ink); font-weight: 700; }

.tk-dp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-top: 1px solid var(--b1);
}
.tk-dp-foot label { font-size: 12px; color: var(--t3); }
.tk-detail .tk-dp-foot input, .tk-dp-foot input {
  height: 30px; padding: 0 8px;
  border: 1px solid var(--b2); border-radius: var(--r-2);
  background: var(--bg); color: var(--tx);
  font-family: inherit; font-size: 12px; box-shadow: none;
}
.tk-dp-foot input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-line); }

.tk-tagbox { padding: 5px; }
.tk-tagsel { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 0 6px; }

/* ── Detail panel ─────────────────────────────────── */
body.tk-detail-open { overflow: hidden; }

.tk-detail-back {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0, 0, 0, .34);
  display: grid; place-items: center;
  padding: 16px;
}
.tk-detail {
  width: min(1760px, 91vw); height: min(1080px, 88vh);
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--b2);
  border-radius: var(--r-4); overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}

.tk-d-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px 12px 9px 10px;
  border-bottom: 1px solid var(--b1);
}
.tk-d-head-l, .tk-d-head-r { display: flex; align-items: center; gap: 5px; min-width: 0; }
.tk-d-nav {
  display: grid; place-items: center; width: 24px; height: 24px;
  border: 0; background: transparent; border-radius: var(--r-1);
  color: var(--t3); cursor: pointer;
}
.tk-d-nav svg { width: 14px; height: 14px; }
.tk-d-nav:hover { background: var(--bg2); color: var(--tx); }
.tk-d-crumb {
  font-size: 12px; color: var(--t3); margin-left: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tk-d-crumb i { font-style: normal; color: var(--t4); margin: 0 6px; }
.tk-d-created { font-size: 11.5px; color: var(--t4); white-space: nowrap; }
.tk-d-id {
  font-family: var(--ff-mono, monospace); font-size: 10.5px; font-weight: 600;
  color: var(--t3); background: var(--bg3); padding: 3px 7px; border-radius: var(--r-1);
  cursor: pointer;
}
.tk-d-id:hover { color: var(--tx); }
.tk-d-hbtn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 27px; padding: 0 9px;
  border: 0; background: transparent; border-radius: var(--r-2);
  font-size: 12px; font-weight: 500; color: var(--t2); cursor: pointer; font-family: inherit;
}
.tk-d-hbtn .tk-i svg, .tk-d-hbtn svg { width: 14px; height: 14px; }
.tk-d-hbtn:hover { background: var(--bg2); color: var(--tx); }
.tk-d-hbtn.icon { width: 27px; padding: 0; justify-content: center; }

.tk-x {
  display: grid; place-items: center; width: 27px; height: 27px;
  border: 0; background: transparent; border-radius: var(--r-2);
  color: var(--t3); font-size: 19px; line-height: 1; cursor: pointer;
}
.tk-x:hover { background: var(--bg2); color: var(--tx); }

.tk-d-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
.tk-d-main { min-width: 0; overflow: auto; padding: 30px 56px 64px; }
.tk-d-side {
  background: var(--bg2);
  display: flex; flex-direction: column; min-height: 0;
}

.tk-d-type { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tk-d-typechip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border: 1px solid var(--b1); border-radius: var(--r-2);
  background: var(--bg); color: var(--t2);
  font-size: 11.5px; font-weight: 500; cursor: pointer; font-family: inherit;
}
.tk-d-typechip .tk-i svg { width: 14px; height: 14px; }
.tk-d-typechip:hover { background: var(--bg2); color: var(--tx); }
.tk-d-donepill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px; border-radius: var(--r-1);
  background: color-mix(in srgb, var(--green, #10b981) 14%, transparent);
  color: var(--green, #10b981);
  font-size: 11px; font-weight: 600;
}
.tk-d-donepill svg { width: 12px; height: 12px; }

/* Scoped two classes deep on purpose. light-theme.css loads after this file
   and its `body.light textarea` rule (0,1,1) otherwise paints a grey box and a
   border onto the title, the description and the comment composer — all three
   of which are meant to read as text, not as form fields. */
.tk-detail .tk-d-title {
  width: 100%; border: 0; background: transparent; outline: none; resize: none;
  font-family: inherit; font-size: 34px; font-weight: 600; line-height: 1.18;
  letter-spacing: -.028em; color: var(--tx);
  padding: 0; margin: 0 0 26px; overflow: hidden; box-shadow: none;
}
.tk-detail .tk-d-title:focus { box-shadow: none; border: 0; }
.tk-detail .tk-d-title::placeholder { color: var(--t4); }

.tk-d-fields {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 64px; margin-bottom: 26px;
  padding-bottom: 26px; border-bottom: 1px solid var(--b1);
}
.tk-d-f { display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: center; min-height: 38px; }
.tk-d-fl { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; color: var(--t3); }
.tk-d-fl .tk-i svg { width: 15px; height: 15px; color: var(--t4); }
.tk-d-fv { display: flex; align-items: center; gap: 6px; min-width: 0; }

.tk-d-val, .tk-d-empty {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 26px; padding: 3px 8px; max-width: 100%;
  border: 0; background: transparent; border-radius: var(--r-2);
  font-size: 13.5px; color: var(--tx); cursor: pointer; font-family: inherit; text-align: left;
}
.tk-d-val.wrap { flex-wrap: wrap; }
.tk-d-val:hover, .tk-d-empty:hover { background: var(--bg2); }
.tk-d-empty { color: var(--t4); background: var(--bg2); }
.tk-d-val[disabled], .tk-d-empty[disabled] { cursor: default; }
.tk-d-date { font-family: var(--ff-mono, monospace); font-size: 11.5px; }
.tk-d-date.over { color: var(--accent); font-weight: 600; }
.tk-d-val i { font-style: normal; color: var(--t4); }
.tk-d-tick {
  display: grid; place-items: center; width: 24px; height: 24px;
  border: 1px solid var(--b2); border-radius: var(--r-1);
  background: transparent; color: var(--t3); cursor: pointer;
}
.tk-d-tick svg { width: 13px; height: 13px; }
.tk-d-tick:hover { background: var(--green, #10b981); border-color: var(--green, #10b981); color: #fff; }

/* Borderless until you reach for it — the reference shows a line of prompt
   text, not an empty form control sitting open on the page. */
.tk-detail .tk-d-desc {
  width: 100%; min-height: 112px; resize: vertical;
  border: 1px solid transparent; border-radius: var(--r-2);
  background: transparent; padding: 10px 12px; margin: 0 0 4px -12px;
  font-family: inherit; font-size: 14px; line-height: 1.7; color: var(--t2);
  outline: none; box-shadow: none;
}
.tk-detail .tk-d-desc:hover { background: var(--bg2); border-color: transparent; }
.tk-detail .tk-d-desc:focus {
  border-color: var(--accent); background: var(--bg);
  box-shadow: 0 0 0 3px var(--accent-line);
}
.tk-detail .tk-d-desc::placeholder { color: var(--t4); }

.tk-d-block { margin: 30px 0 0; }
.tk-d-block-h {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600; color: var(--tx); margin-bottom: 10px;
}
.tk-d-block-h .tk-i svg { width: 15px; height: 15px; color: var(--t4); }
.tk-d-block-h em {
  font-style: normal; font-family: var(--ff-mono, monospace);
  font-size: 11px; font-weight: 600; color: var(--t4); letter-spacing: -.01em;
}
.tk-d-prog { flex: 0 0 72px; height: 3px; border-radius: 2px; background: var(--bg3); overflow: hidden; }
.tk-d-prog span { display: block; height: 100%; background: var(--green, #10b981); }

.tk-sub, .tk-ck {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 0 8px;
  border-bottom: 1px solid var(--b1);
}
.tk-sub:hover, .tk-ck:hover { background: var(--bg2); }
.tk-circle.sm { width: 15px; height: 15px; flex: 0 0 auto; }
.tk-circle.sm svg { width: 9px; height: 9px; }
.tk-sub-due {
  font-family: var(--ff-mono, monospace); font-size: 10.5px; color: var(--t3);
  white-space: nowrap; flex: 0 0 auto;
}
.tk-sub-due.over { color: var(--accent); font-weight: 600; }

/* ── Inline subtask composer ──────────────────────── */
/* Its fields are reachable before it is saved, so a subtask that needs an
   owner and a date does not have to be created, found and then opened. */
.tk-subcomp {
  display: flex; align-items: center; gap: 8px;
  padding: 6px; margin-top: 2px;
  border: 1px solid var(--b2); border-radius: var(--r-2);
  background: var(--bg);
}
.tk-detail .tk-subcomp-i {
  flex: 1; min-width: 0; height: 28px;
  border: 0; background: transparent; outline: none; box-shadow: none;
  font-family: inherit; font-size: 13px; color: var(--tx);
}
.tk-detail .tk-subcomp-i::placeholder { color: var(--t4); }
.tk-subcomp-tools { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.tk-subcomp-tools button {
  display: inline-grid; place-items: center; grid-auto-flow: column; gap: 4px;
  min-width: 26px; height: 26px; padding: 0 6px;
  border: 0; background: transparent; border-radius: var(--r-1);
  color: var(--t3); cursor: pointer; font-family: inherit;
}
.tk-subcomp-tools button svg { width: 15px; height: 15px; }
.tk-subcomp-tools button b {
  font-family: var(--ff-mono, monospace); font-size: 10.5px; font-weight: 600;
}
.tk-subcomp-tools button:hover { background: var(--bg3); color: var(--tx); }
.tk-subcomp-tools button.on { color: var(--tx); background: var(--bg2); }
.tk-subcomp-tools button.on svg { color: var(--pc, currentColor); }
.tk-btn.primary em { font-style: normal; opacity: .6; margin-left: 3px; }

/* ── Named checklists ─────────────────────────────── */
.tk-cklist {
  border: 1px solid var(--b1); border-radius: var(--r-3, var(--r-2));
  margin-bottom: 10px; overflow: hidden;
}
.tk-cklist-h {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 10px 11px 12px; background: var(--bg2);
  border-bottom: 1px solid var(--b1);
}
.tk-cklist-n {
  font-size: 13.5px; font-weight: 600; color: var(--tx); letter-spacing: -.01em;
  outline: none; border-radius: var(--r-1); padding: 1px 4px; margin-left: -4px;
}
.tk-cklist-n:focus { background: var(--bg); box-shadow: 0 0 0 2px var(--accent-line); }
.tk-cklist-c {
  font-family: var(--ff-mono, monospace); font-size: 10.5px; font-weight: 600; color: var(--t4);
}
.tk-cklist .tk-ck:last-of-type { border-bottom: 0; }
.tk-ck-t {
  outline: none; border-radius: var(--r-1); padding: 1px 3px; margin-left: -3px;
}
.tk-ck-t:focus { background: var(--bg); box-shadow: 0 0 0 2px var(--accent-line); }

.tk-ck-add {
  width: 100%; border: 0; background: transparent;
  color: var(--t4); font-family: inherit; font-size: 12.5px;
  cursor: pointer; text-align: left; justify-content: flex-start;
}
.tk-ck-add svg { width: 13px; height: 13px; }
.tk-ck-add:hover { color: var(--tx); }
.tk-ck-add.open { cursor: default; }
.tk-detail .tk-ck-add input {
  flex: 1; height: 26px; border: 0; background: transparent;
  outline: none; box-shadow: none;
  font-family: inherit; font-size: 12.5px; color: var(--tx);
}
.tk-ck-newlist {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 2px; padding: 6px 4px;
  border: 0; background: transparent; color: var(--t4);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.tk-ck-newlist svg { width: 13px; height: 13px; }
.tk-ck-newlist:hover { color: var(--tx); }
.tk-d-block-add {
  display: grid; place-items: center; width: 22px; height: 22px; margin-left: auto;
  border: 0; background: transparent; border-radius: var(--r-1);
  color: var(--t4); cursor: pointer;
}
.tk-d-block-add svg { width: 14px; height: 14px; }
.tk-d-block-add:hover { background: var(--bg2); color: var(--tx); }

/* ── Track time ───────────────────────────────────── */
.tk-time { display: inline-flex; align-items: center; gap: 8px; }
.tk-time-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border: 1px solid var(--b2); border-radius: var(--r-2);
  background: var(--bg); color: var(--t2);
  font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
}
.tk-time-btn svg { width: 12px; height: 12px; }
.tk-time-btn:hover { background: var(--bg2); color: var(--tx); }
/* Running is ink, not accent. The accent belongs on the ticking number, which
   is the thing that is actually changing — filling the button as well would be
   two alarms for one fact, and §9 is explicit about not flooding the UI with it. */
.tk-time-btn.on { background: var(--tx); border-color: var(--tx); color: var(--bg); }
.tk-time-btn.on:hover { opacity: .88; }
.tk-time-v {
  font-family: var(--ff-mono, monospace); font-size: 12.5px; font-weight: 600; color: var(--tx);
}
.tk-time-v.live { color: var(--accent); }
.tk-time-clear {
  border: 0; background: transparent; color: var(--t4);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0 3px; border-radius: var(--r-1);
}
.tk-time-clear:hover { background: var(--bg2); color: var(--tx); }
.tk-sub-t, .tk-ck-t {
  flex: 1; font-size: 13.5px; color: var(--tx); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tk-sub.done .tk-sub-t, .tk-ck.done .tk-ck-t { color: var(--t4); text-decoration: line-through; }
.tk-sub-x {
  border: 0; background: transparent; color: var(--t4);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 3px 5px;
  border-radius: var(--r-1); opacity: 0;
}
.tk-sub:hover .tk-sub-x, .tk-ck:hover .tk-sub-x, .tk-file:hover .tk-sub-x { opacity: 1; }
.tk-sub-x:hover { background: var(--bg3); color: var(--red, #ef4444); }

.tk-files { display: flex; flex-direction: column; gap: 3px; }
.tk-file {
  display: flex; align-items: center; gap: 9px;
  padding: 6px; border: 1px solid var(--b1); border-radius: var(--r-2);
}
.tk-file img { width: 34px; height: 24px; object-fit: cover; border-radius: var(--r-1); flex: 0 0 auto; }
.tk-file-ic { display: grid; place-items: center; width: 34px; height: 24px; color: var(--t4); }
.tk-file-ic svg { width: 15px; height: 15px; }
.tk-file-n { flex: 1; font-size: 12.5px; color: var(--tx); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-file-n:hover { text-decoration: underline; }
.tk-file-s { font-family: var(--ff-mono, monospace); font-size: 10.5px; color: var(--t4); }

.tk-d-actions { display: flex; flex-direction: column; gap: 1px; margin-top: 20px; }
.tk-d-act {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 0; background: transparent;
  border-radius: var(--r-2); cursor: pointer; text-align: left;
  font-size: 12.5px; font-weight: 500; color: var(--t3); font-family: inherit;
}
.tk-d-act .tk-i svg { width: 15px; height: 15px; }
.tk-d-act:hover { background: var(--bg2); color: var(--tx); }

/* activity rail */
.tk-d-side-h {
  display: flex; align-items: center; gap: 8px;
  padding: 15px 20px; border-bottom: 1px solid var(--b1);
}
.tk-d-side-h b { font-size: 14px; font-weight: 600; color: var(--tx); letter-spacing: -.01em; }
.tk-d-side-n {
  font-family: var(--ff-mono, monospace); font-size: 10.5px; font-weight: 600;
  color: var(--t4); background: var(--bg3); padding: 2px 6px; border-radius: var(--r-1);
}
/* Entries stack from the bottom, the way a conversation does — the newest
   thing sits next to the box you reply in, not at the far end of a scroll. */
.tk-d-feed {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  padding: 16px 20px;
  display: flex; flex-direction: column;
}
.tk-d-feed > :first-child { margin-top: auto; }
.tk-d-noactivity { font-size: 12.5px; color: var(--t4); font-style: italic; padding: 6px 0; }

.tk-ev { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; color: var(--t3); }

.tk-ev.done 
.tk-ev em { font-style: normal; color: var(--t4); font-size: 11px; margin-left: auto; }

.tk-cm { display: flex; gap: 9px; padding: 9px 0; }
.tk-cm-b { flex: 1; min-width: 0; }
.tk-cm-h { display: flex; align-items: center; gap: 7px; }
.tk-cm-h b { font-size: 12px; font-weight: 600; color: var(--tx); }
.tk-cm-h em { font-style: normal; font-size: 11px; color: var(--t4); }
.tk-cm-t { font-size: 13px; line-height: 1.55; color: var(--t2); margin-top: 2px; word-break: break-word; }

.tk-d-composer { flex: 0 0 auto; border-top: 1px solid var(--b1); padding: 12px 16px 16px; background: var(--bg); }
.tk-detail .tk-d-composer textarea {
  width: 100%; min-height: 38px; max-height: 160px; resize: none;
  border: 1px solid var(--b2); border-radius: var(--r-2);
  background: var(--bg); padding: 9px 11px;
  font-family: inherit; font-size: 12.5px; line-height: 1.5; color: var(--tx);
  outline: none; box-shadow: none;
}
.tk-detail .tk-d-composer textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-line);
}
.tk-d-comp-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.tk-d-hint { font-size: 10.5px; color: var(--t4); font-family: var(--ff-mono, monospace); }

/* ── Modals (prompt + share) ──────────────────────── */
.tk-modal-back {
  position: fixed; inset: 0; z-index: 10100;
  background: rgba(0, 0, 0, .38);
  display: grid; place-items: center; padding: 24px;
}
.tk-modal {
  width: min(520px, 100%);
  background: var(--bg); border: 1px solid var(--b2);
  border-radius: var(--r-4); overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .26);
}
.tk-modal.sm { width: min(420px, 100%); }
.tk-modal-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 16px 13px; border-bottom: 1px solid var(--b1);
}
.tk-modal-h h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--tx); }
.tk-modal-b { padding: 16px; }
.tk-modal-f {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--b1);
}

.tk-input {
  width: 100%; height: 36px; padding: 0 11px;
  border: 1px solid var(--b2); border-radius: var(--r-2);
  background: var(--bg); color: var(--tx);
  font-size: 13px; font-family: inherit; outline: none;
}
.tk-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-line); }

.tk-btn {
  height: 32px; padding: 0 14px;
  border: 1px solid var(--b2); border-radius: var(--r-2);
  background: var(--bg); color: var(--tx);
  font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.tk-btn.sm { height: 28px; padding: 0 11px; font-size: 12px; }
.tk-btn.ghost { border-color: transparent; background: transparent; color: var(--t2); font-weight: 500; }
.tk-btn.ghost:hover { background: var(--bg2); color: var(--tx); }
.tk-btn.primary { background: var(--fill, var(--tx)); border-color: var(--fill, var(--tx)); color: var(--fill-ink); }
.tk-btn.primary:hover { opacity: .88; }
.tk-btn[disabled] { opacity: .45; cursor: default; }

.tk-share-sub {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--t3); margin-bottom: 14px;
}
.tk-share-sub b { color: var(--tx); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-share-invite { display: flex; gap: 8px; margin-bottom: 8px; }
.tk-share-invite input {
  flex: 1; height: 36px; padding: 0 11px;
  border: 1px solid var(--b2); border-radius: var(--r-2);
  background: var(--bg); color: var(--tx); font-size: 13px; font-family: inherit; outline: none;
}
.tk-share-invite input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-line); }
.tk-share-people { display: flex; flex-direction: column; gap: 1px; margin-bottom: 16px; max-height: 150px; overflow: auto; }
.tk-share-p {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border: 0; background: transparent; border-radius: var(--r-2);
  font-size: 12.5px; color: var(--tx); cursor: pointer; text-align: left; font-family: inherit;
}
.tk-share-p:hover { background: var(--bg2); }
.tk-share-p.on { background: var(--bg3); }
.tk-share-p em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--t4); }

.tk-share-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 0; border-top: 1px solid var(--b1);
}
.tk-share-row.dim { opacity: .5; }
.tk-share-ic { display: grid; place-items: center; width: 20px; color: var(--t3); }
.tk-share-ic svg { width: 16px; height: 16px; }
.tk-share-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tk-share-l b { font-size: 12.5px; font-weight: 500; color: var(--tx); }
.tk-share-l em {
  font-style: normal; font-size: 11.5px; color: var(--t3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tk-share-avs { display: flex; gap: -4px; }
.tk-share-avs .tk-av { margin-left: -5px; border: 2px solid var(--bg); }
.tk-share-avs .tk-av:first-child { margin-left: 0; }

.tk-toggle {
  width: 38px; height: 21px; padding: 2px; flex: 0 0 auto;
  border: 0; border-radius: 999px; background: var(--b2);
  cursor: pointer; transition: background var(--t-fast, .14s) var(--ease, ease);
}
.tk-toggle i {
  display: block; width: 17px; height: 17px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform var(--t-fast, .14s) var(--ease, ease);
}
.tk-toggle.on { background: var(--green, #10b981); }
.tk-toggle.on i { transform: translateX(17px); }

/* ── Bulk action bar ──────────────────────────────── */
/* A dark pill floating over the list, so the rows it acts on stay visible
   behind it. Ink rather than accent: it is a toolbar, not an alarm. */
.tk-bulk {
  position: fixed; z-index: 9500;
  left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px;
  max-width: calc(100vw - 32px);
  padding: 7px 8px 7px 12px;
  background: #16161a; border-radius: var(--r-3);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .34);
  animation: tkBulkIn .16s var(--ease-out, cubic-bezier(.2, .8, .3, 1));
  overflow-x: auto; scrollbar-width: none;
}
.tk-bulk::-webkit-scrollbar { display: none; }
@keyframes tkBulkIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.tk-bulk-n {
  display: inline-flex; align-items: center; gap: 7px;
  padding-right: 10px; margin-right: 4px;
  border-right: 1px solid rgba(255, 255, 255, .14);
  font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .82);
  white-space: nowrap; flex: 0 0 auto;
}
.tk-bulk-n b {
  font-family: var(--ff-mono, monospace);
  font-size: 12px; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, .14);
  padding: 2px 7px; border-radius: var(--r-1);
}
.tk-bulk-x {
  display: grid; place-items: center; width: 20px; height: 20px;
  border: 0; background: transparent; border-radius: var(--r-1);
  color: rgba(255, 255, 255, .5); font-size: 16px; line-height: 1; cursor: pointer;
}
.tk-bulk-x:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.tk-bulk-acts { display: flex; align-items: center; gap: 2px; }
.tk-bulk-b {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  border: 0; background: transparent; border-radius: var(--r-2);
  color: rgba(255, 255, 255, .78);
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.tk-bulk-b svg { width: 15px; height: 15px; opacity: .8; }
.tk-bulk-b:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.tk-bulk-b.danger { color: #ff8a73; }
.tk-bulk-b.danger:hover { background: rgba(255, 53, 3, .18); color: #ff9b86; }
.tk-bulk-sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .14); margin: 0 4px; flex: 0 0 auto; }

/* ── Calendar hand-off card ───────────────────────── */
.cal-tasks-link {
  display: flex; align-items: center; gap: 14px;
  width: 100%; margin: 18px 0 8px; padding: 14px 16px;
  border: 1px solid var(--b1); border-radius: var(--r-3);
  background: var(--bg2); cursor: pointer; text-align: left; font-family: inherit;
}
.cal-tasks-link:hover { border-color: var(--b2); background: var(--bg3); }
.cal-tasks-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-2); background: var(--bg); color: var(--t2); flex: 0 0 auto; }
.cal-tasks-ic svg { width: 18px; height: 18px; }
.cal-tasks-b { flex: 1; min-width: 0; }
.cal-tasks-t { font-size: 13.5px; font-weight: 600; color: var(--tx); }
.cal-tasks-s { font-size: 12px; color: var(--t3); margin-top: 2px; }
.cal-tasks-n {
  display: flex; align-items: baseline; gap: 5px;
  font-family: var(--ff-mono, monospace); font-size: 11px; color: var(--t3);
}
.cal-tasks-n b { font-size: 17px; font-weight: 600; color: var(--tx); }
.cal-tasks-n .over { color: var(--accent); }
.cal-tasks-go { color: var(--t3); font-size: 13px; font-weight: 500; white-space: nowrap; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1100px) {
  .tk-d-body { grid-template-columns: minmax(0, 1fr); }
  .tk-d-side { border-left: 0; border-top: 1px solid var(--b1); max-height: 46%; }
  .tk-d-fields { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .tk-cols { display: none; }
  .tk-row {
    grid-template-columns: 20px 12px minmax(0, 1fr) auto auto;
    grid-template-areas: 'chk dot name pri menu' '. . meta meta meta';
    row-gap: 2px; padding: 7px 8px; min-height: 44px;
  }
  .tk-row .tk-grip, .tk-row .tk-expand, .tk-row .tk-quick { display: none; }
  /* On a phone the checkbox has to be permanently visible — there is no hover
     to reveal it with. */
  .tk-row .tk-sel, .tk-cols .tk-sel { opacity: 1; }
  .tk-bulk { left: 12px; right: 12px; transform: none; max-width: none; justify-content: flex-start; }
  @keyframes tkBulkIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .tk-row .tk-check { grid-area: chk; }
  .tk-row .tk-stdot { grid-area: dot; }
  .tk-row .tk-name  { grid-area: name; }
  .tk-row .tk-c-pri { grid-area: pri; }
  .tk-row .tk-c-end { grid-area: menu; }
  .tk-row .tk-c-as, .tk-row .tk-c-due, .tk-row .tk-c-st, .tk-row .tk-c-cm {
    grid-area: meta; display: inline-flex;
  }
  .tk-row .tk-c-as  { justify-self: start; }
  .tk-row .tk-c-due { justify-self: start; margin-left: 30px; }
  .tk-row .tk-c-st  { justify-self: start; margin-left: 120px; }
  .tk-row .tk-c-cm  { justify-self: end; }
  .tk-row .tk-rowmenu, .tk-row .tk-ghosticon { opacity: 1; }

  .tk-dp { grid-template-columns: minmax(0, 1fr); }
  .tk-dp-quick { border-right: 0; border-bottom: 1px solid var(--b1); }
  .tk-pop.wide { min-width: 300px; max-width: calc(100vw - 24px); }

  .tk-detail-back { padding: 0; }
  .tk-detail { height: 100%; width: 100%; border-radius: 0; border: 0; }
  .tk-d-main { padding: 14px 16px 30px; }
  .tk-toolbar { gap: 8px; }
  .tk-search input { width: 110px; }
}

@media (max-width: 560px) {
  .tk-body { padding: 4px 12px 70px; }
  .tk-crumb, .tk-tabs, .tk-toolbar { padding-left: 12px; padding-right: 12px; }
  .tk-d-f { grid-template-columns: 96px minmax(0, 1fr); }
  .tk-bcol { flex-basis: 84vw; width: 84vw; }
}

/* ══ Detail panel: sections, rail, composer ═════════ */
/* Everything below is scoped under .tk-detail where it touches a form control
   on purpose. light-theme.css loads after this file, and its bare
   `body.light input/textarea` rules (0,1,1) otherwise repaint them in OS chrome. */

/* Counts beside the type chip — what the task is carrying, before you scroll */
.tk-d-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 7px; border-radius: var(--r-1);
  background: var(--bg2); color: var(--t3);
  font-family: var(--ff-mono, monospace); font-size: 10.5px; font-weight: 600;
}
.tk-d-chip .tk-i svg { width: 12px; height: 12px; color: var(--t4); }
.tk-d-typechip svg:last-child { width: 11px; height: 11px; transform: rotate(90deg); opacity: .6; }

/* Section headers */
.tk-d-sections { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; }
.tk-d-block { padding-left: 20px; }
.tk-d-block-h b { font-size: 12.5px; font-weight: 600; color: var(--tx); }
.tk-d-fold {
  display: grid; place-items: center; width: 18px; height: 18px; margin-left: -20px;
  border: 0; background: transparent; color: var(--t3); cursor: pointer; padding: 0;
}
.tk-d-fold svg { width: 12px; height: 12px; transform: rotate(90deg); transition: transform .12s ease; }
.tk-d-fold.shut svg { transform: rotate(0deg); }
.tk-d-block-n {
  font-family: var(--ff-mono, monospace); font-size: 10.5px; font-weight: 600; color: var(--t4);
}
.tk-d-block-h .tk-d-block-add { margin-left: auto; }

/* Subtasks as a table — a subtask carries the same fields a task does */
.tk-subtable { margin-top: 2px; }
.tk-sth, .tk-subtable .tk-sub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px 52px 88px 26px;
  align-items: center; gap: 6px;
}
.tk-sth {
  padding: 0 8px 7px; border-bottom: 1px solid var(--b1);
  font-family: var(--ff-mono, monospace);
  font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--t4);
}
.tk-sth span:not(:first-child) { text-align: center; }
.tk-sub-n { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tk-sub-c {
  display: grid; place-items: center; height: 26px; padding: 0 4px;
  border: 0; background: transparent; border-radius: var(--r-1);
  color: var(--t4); cursor: pointer; font-family: inherit;
}
.tk-sub-c svg { width: 15px; height: 15px; }
.tk-sub-c:hover { background: var(--bg3); color: var(--t2); }
.tk-sub-c.set svg { color: var(--pc, currentColor); }
.tk-sub-c[disabled] { cursor: default; }
.tk-sub-add {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 7px 6px; border: 0; background: transparent;
  color: var(--t4); font-size: 12.5px; font-family: inherit; cursor: pointer; text-align: left;
}
.tk-sub-add svg { width: 13px; height: 13px; }
.tk-sub-add:hover { color: var(--tx); }

/* Attachments */
.tk-drop {
  border: 1px dashed var(--b2); border-radius: var(--r-2);
  padding: 14px; margin-bottom: 8px; text-align: center;
  font-size: 12.5px; color: var(--t3);
}
.tk-drop.over { border-color: var(--accent); background: var(--accent-bg); color: var(--tx); }
.tk-drop-b {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font: inherit; color: var(--tx); text-decoration: underline;
}
.tk-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.tk-file { display: block; position: relative; padding: 0; border-radius: var(--r-2); overflow: hidden; }
.tk-file-th {
  display: block; height: 96px; background: var(--bg2);
  border-bottom: 1px solid var(--b1);
}
.tk-file-th img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.tk-file .tk-file-ic { width: 100%; height: 100%; }
.tk-file .tk-file-ic svg { width: 20px; height: 20px; }
.tk-file-m { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; min-width: 0; }
.tk-file .tk-file-n { flex: none; }
.tk-file .tk-sub-x { position: absolute; top: 5px; right: 5px; background: var(--bg); border-radius: var(--r-1); }

/* ── The rail ─────────────────────────────────────── */
.tk-d-body { grid-template-columns: minmax(0, 1fr) clamp(380px, 29%, 560px); }
.tk-d-body.railshut { grid-template-columns: minmax(0, 1fr) 44px; }
.tk-d-side { flex-direction: row; }
.tk-rail {
  flex: 0 0 44px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 0; background: transparent;
}
.tk-rail-b {
  position: relative; display: grid; place-items: center;
  width: 30px; height: 30px; border: 0; border-radius: var(--r-1);
  background: transparent; color: var(--t3); cursor: pointer;
}
.tk-rail-b svg { width: 16px; height: 16px; }
.tk-rail-b:hover, .tk-rail-b.on { background: var(--bg3); color: var(--tx); }
.tk-rail-b i {
  position: absolute; top: 1px; right: 0;
  font-style: normal; font-family: var(--ff-mono, monospace); font-size: 9px; font-weight: 600;
  color: var(--t3);
}
.tk-rail-b.collapse { margin-bottom: 6px; color: var(--t4); }
.tk-rail-b.collapse svg { transform: rotate(180deg); }
.tk-d-side.shut .tk-rail-b.collapse svg { transform: none; }
.tk-d-side-in { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.tk-d-side-h .tk-d-block-add { margin-left: auto; }

/* ── Composer: tools and @mentions ────────────────── */
.tk-d-composer { position: relative; }
.tk-comp-tools { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.tk-comp-tools button {
  display: grid; place-items: center; width: 26px; height: 26px;
  border: 0; background: transparent; border-radius: var(--r-1);
  color: var(--t3); cursor: pointer; font-family: inherit;
}
.tk-comp-tools button svg { width: 15px; height: 15px; }
.tk-comp-tools button b { font-size: 14px; font-weight: 600; line-height: 1; }
.tk-comp-tools button:hover { background: var(--bg3); color: var(--tx); }
.tk-men-pop {
  position: absolute; left: 12px; right: 12px; bottom: calc(100% - 46px);
  z-index: 5; max-height: 210px; overflow: auto;
  border: 1px solid var(--b2); border-radius: var(--r-2);
  background: var(--bg); box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  padding: 4px;
}
.tk-men-i {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border: 0; background: transparent; border-radius: var(--r-1);
  font-family: inherit; font-size: 12.5px; color: var(--tx); cursor: pointer; text-align: left;
}
.tk-men-i.on, .tk-men-i:hover { background: var(--bg2); }
.tk-men {
  font-weight: 600; color: var(--tx); background: var(--bg3);
  border-radius: 3px; padding: 0 3px;
}
.tk-men.me { color: var(--accent); background: var(--accent-bg); }

@media (max-width: 1100px) {
  .tk-d-body, .tk-d-body.railshut { grid-template-columns: minmax(0, 1fr); }
  .tk-files { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ══ Detail panel: hierarchy and restraint ══════════ */
/* The panel got wider, so the content is capped rather than stretched — a
   1100px line of description is not more readable for being longer. */
.tk-d-main > * { max-width: 1180px; }

/* Four levels, each unmistakably above the next: title, section name, field
   label, column header. Nothing else competes. */
.tk-d-type { margin-bottom: 14px; }
.tk-d-typechip { height: 24px; font-size: 11px; color: var(--t3); }
.tk-d-chip { height: 20px; background: transparent; border: 1px solid var(--b1); }

.tk-d-sections { gap: 4px; margin-top: 26px; }
.tk-d-act { padding: 10px 10px; font-size: 13px; }
.tk-d-act .tk-i svg { color: var(--t4); }

/* The controls on a section appear when you are working in it. They are how
   you add the next thing, not part of the heading. */
.tk-d-block-add { opacity: 0; transition: opacity .12s ease; }
.tk-d-block:hover .tk-d-block-add,
.tk-d-block-add:focus-visible { opacity: 1; }
.tk-d-fold { color: var(--t4); }
.tk-d-block:hover .tk-d-fold { color: var(--t2); }

/* A field is a label and a value, and the value is the part you read. */
.tk-d-fl .tk-i svg { width: 14px; height: 14px; }
.tk-d-val { font-weight: 500; }
.tk-d-empty { background: transparent; }
.tk-d-empty:hover { background: var(--bg2); }

.tk-sub-n { gap: 11px; }
.tk-sub-add { padding: 10px 8px; }
.tk-ck-add { min-height: 38px; }

.tk-files { gap: 10px; }
.tk-file-th { height: 112px; }
.tk-drop { padding: 18px; }

/* Bounded below as well as above: the phone rule that follows the cascade at
   860px is earlier in this file, so an unbounded max-width here would outrank
   it and put 32px gutters back on a 375px screen. */
@media (min-width: 861px) and (max-width: 1280px) {
  .tk-d-main { padding: 24px 32px 48px; }
}

/* ══ Detail panel: type, icons, and the small stuff ══ */

/* Geist is a sharp grotesque; it was being asked to do two jobs it is bad at —
   9.5px tracked micro-caps and mono digits at 10px, both of which blur. Numbers
   in this panel are sans with tabular figures, and the column headers are
   sentence case at a size the font actually renders crisply. */
.tk-detail {
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.tk-sth {
  padding: 0 8px 8px; border-bottom: 1px solid var(--b1);
  font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--t3);
}
.tk-d-block-h em,
.tk-cklist-c,
.tk-file-s,
.tk-d-side-n,
.tk-d-chip {
  font-family: inherit; letter-spacing: 0;
}
.tk-d-block-h em { font-size: 12.5px; font-weight: 500; color: var(--t3); }
.tk-cklist-c    { font-size: 12px; font-weight: 500; color: var(--t4); }
.tk-file-s      { font-size: 11.5px; }
.tk-d-side-n    { font-size: 11px; }
.tk-d-chip      { font-size: 11.5px; font-weight: 500; }
.tk-d-hint      { font-size: 11px; }

/* The icons are drawn on a 24 grid now, so they want one size everywhere
   rather than four near-misses. 16px keeps the 2px stroke on a clean fraction. */
.tk-detail .tk-i svg { width: 16px; height: 16px; }
.tk-d-block-h .tk-i svg { width: 16px; height: 16px; color: var(--t3); }
.tk-d-fl .tk-i svg { width: 16px; height: 16px; color: var(--t4); }
.tk-d-act .tk-i svg { width: 16px; height: 16px; }
.tk-sub-c svg, .tk-subcomp-tools button svg, .tk-comp-tools button svg { width: 16px; height: 16px; }
.tk-d-chip .tk-i svg { width: 13px; height: 13px; }

/* Activity reads from the top. Two comments pinned to the bottom of a 700px
   column read as an empty panel with something stuck under it. */
.tk-d-feed > :first-child { margin-top: 0; }
.tk-d-feed { padding-top: 14px; }

/* A checklist is a card, not a card with a grey header bolted on. */
.tk-cklist { background: var(--bg); }
.tk-cklist-h { background: transparent; padding: 12px 8px 12px 14px; }
.tk-cklist .tk-ck { padding-left: 14px; }
.tk-cklist .tk-ck-add { padding-left: 14px; }
.tk-cklist-m {
  margin-left: auto; display: grid; place-items: center;
  width: 26px; height: 26px; border: 0; border-radius: var(--r-1);
  background: transparent; color: var(--t4); cursor: pointer;
  opacity: 0; transition: opacity .12s ease;
}
.tk-cklist-m svg { width: 16px; height: 16px; }
.tk-cklist:hover .tk-cklist-m, .tk-cklist-m:focus-visible { opacity: 1; }
.tk-cklist-m:hover { background: var(--bg2); color: var(--tx); }

/* Row actions live where the pointer already is. */
.tk-sub-hov {
  margin-left: 6px; display: inline-flex; align-items: center; gap: 1px;
  opacity: 0; transition: opacity .1s ease;
}
.tk-sub:hover .tk-sub-hov { opacity: 1; }
.tk-sub-hov button {
  display: grid; place-items: center; width: 26px; height: 26px;
  border: 0; background: transparent; border-radius: var(--r-1);
  color: var(--t4); cursor: pointer;
}
.tk-sub-hov button svg { width: 15px; height: 15px; }
.tk-sub-hov button:hover { background: var(--bg3); color: var(--tx); }
.tk-tagchip.xs { height: 18px; padding: 0 6px; font-size: 10.5px; }

/* A flag with no priority behind it is grey. Colour means a decision was made.
   --t4 (#B4B4B8 light / #52525A dark) rather than a border token: a 12% black
   line is right for a hairline and invisible as a 16px glyph. */
.tk-sub-c { color: var(--t4); }
.tk-sub-c:hover { color: var(--t2); }

/* ══ Activity: history, reactions, threads ══════════ */

/* An event line is one sentence with the time pushed to the right margin, so a
   column of them reads as a column of times as well as a column of changes. */
.tk-ev {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 6px 0; font-size: 12.5px; line-height: 1.5; color: var(--t3);
}

.tk-ev-t { flex: 1; min-width: 0; }
.tk-ev-who { font-weight: 600; color: var(--t2); }
.tk-ev b { font-weight: 600; color: var(--t2); }
.tk-ev em { font-style: normal; color: var(--t4); font-size: 11.5px; white-space: nowrap; flex: 0 0 auto; margin-top: 1px; }
.tk-ev .tk-flag { display: inline-flex; vertical-align: -2px; margin: 0 2px; }
.tk-ev .tk-flag svg { width: 13px; height: 13px; color: var(--pc, currentColor); }
.tk-ev-pill {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: -3px;
  height: 19px; padding: 0 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--sc) 14%, transparent);
  color: color-mix(in srgb, var(--sc) 78%, var(--tx));
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
}
.tk-ev-pill i { width: 5px; height: 5px; border-radius: 50%; background: var(--sc); }
.tk-ev .tk-av.xs {
  display: inline-grid; place-items: center; vertical-align: -4px;
  width: 17px; height: 17px; border-radius: 50%; margin-right: 4px;
  background: var(--bg3); color: var(--t2); font-size: 8px; font-weight: 600;
}
.tk-ev .tk-tagchip.xs { vertical-align: -4px; }

.tk-feed-more {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 7px 0 11px; margin-bottom: 4px;
  border: 0; border-bottom: 1px solid var(--b1); background: transparent;
  color: var(--t3); font-family: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer; text-align: left;
}
.tk-feed-more svg { width: 13px; height: 13px; transform: rotate(-90deg); }
.tk-feed-more:hover { color: var(--tx); }

/* A comment is a card, so it reads as something a person wrote rather than one
   more line in the log. */
.tk-cm {
  display: flex; gap: 9px; padding: 10px;
  border: 1px solid var(--b1); border-radius: var(--r-3, var(--r-2));
  background: var(--bg); margin: 8px 0;
}
.tk-cm.reply { margin: 6px 0 0; border: 0; background: transparent; padding: 6px 0 0; }
.tk-cm-replies { margin-top: 4px; padding-left: 11px; border-left: 2px solid var(--b1); }
.tk-cm-h { position: relative; }
.tk-cm-ed { font-size: 10.5px; color: var(--t4); }

.tk-cm-tools {
  position: absolute; right: -4px; top: -6px;
  display: flex; align-items: center; gap: 1px;
  padding: 2px; border: 1px solid var(--b1); border-radius: var(--r-2);
  background: var(--bg); box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  opacity: 0; pointer-events: none; transition: opacity .1s ease;
}
.tk-cm:hover > .tk-cm-b > .tk-cm-h > .tk-cm-tools,
.tk-cm-tools:focus-within { opacity: 1; pointer-events: auto; }
.tk-cm-tools button {
  display: grid; place-items: center; width: 24px; height: 24px;
  border: 0; background: transparent; border-radius: var(--r-1);
  color: var(--t3); cursor: pointer; font-family: inherit; font-size: 12px; line-height: 1;
}
.tk-cm-tools button svg { width: 14px; height: 14px; }
.tk-cm-tools button:hover { background: var(--bg2); color: var(--tx); }
.tk-cm-tools button.danger:hover { color: var(--red, #ef4444); }

.tk-cm-rx { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.tk-rx {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 8px;
  border: 1px solid var(--b1); border-radius: 999px;
  background: var(--bg2); color: var(--t2);
  font-family: inherit; font-size: 12px; cursor: pointer;
}
.tk-rx span { font-weight: 600; font-size: 11px; }
.tk-rx:hover { border-color: var(--b2); }
.tk-rx.on { border-color: var(--tx); background: var(--bg3); color: var(--tx); }

.tk-detail .tk-cm-edit {
  width: 100%; min-height: 58px; max-height: 240px; resize: none;
  border: 1px solid var(--b2); border-radius: var(--r-2);
  background: var(--bg); padding: 8px 10px; margin-top: 4px;
  font-family: inherit; font-size: 13px; line-height: 1.55; color: var(--tx);
  outline: none; box-shadow: none;
}
.tk-detail .tk-cm-edit:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-line); }
.tk-cm-editf { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }

.tk-reply-to {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 7px; padding: 6px 9px;
  border-radius: var(--r-2); background: var(--bg2);
  font-size: 12px; color: var(--t3);
}
.tk-reply-to svg { width: 14px; height: 14px; color: var(--t4); }
.tk-reply-to b { font-weight: 600; color: var(--t2); }
.tk-reply-to button {
  margin-left: auto; border: 0; background: transparent; color: var(--t4);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.tk-reply-to button:hover { color: var(--tx); }

/* ══ Avatars, comment tools, and quieter scrollbars ══ */

/* An avatar is a photo when the workspace has one. Initials are the fallback,
   and they belong in the UI face — mono digits next to a sans name was part of
   what made the panel feel assembled from two kits. */
.tk-av { font-family: inherit; font-size: 10px; font-weight: 600; letter-spacing: 0; overflow: hidden; }
.tk-av.sm { font-size: 9.5px; }
.tk-av.xs { width: 17px; height: 17px; font-size: 8px; }
.tk-av .avi-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* The hover toolbar: reactions, then the actions, with a hairline between two
   things that are not the same kind of act. */
.tk-cm-sep { width: 1px; height: 16px; background: var(--b1); margin: 0 2px; }
.tk-cm-tools button { font-size: 13px; }
.tk-emoji {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 6px;
  max-width: 280px;
}
.tk-emoji button {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 0; background: transparent; border-radius: var(--r-1);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.tk-emoji button:hover { background: var(--bg2); }

/* A comment arrived at by link says which one it is, once. */
.tk-cm.flash { animation: tkFlash 1.8s ease; }
@keyframes tkFlash {
  0%, 55% { background: var(--accent-bg); border-color: var(--accent-line); }
  100%    { background: var(--bg); border-color: var(--b1); }
}

/* Scrollbars: present when you are using them, invisible when you are not.
   The default grey trough running down the middle of the panel was the single
   loudest thing in it. */
.tk-detail *, .tk-detail { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.tk-detail *:hover, .tk-detail:hover { scrollbar-color: var(--b2) transparent; }
.tk-detail ::-webkit-scrollbar { width: 10px; height: 10px; }
.tk-detail ::-webkit-scrollbar-track { background: transparent; }
.tk-detail ::-webkit-scrollbar-thumb {
  background: transparent; border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
.tk-detail :hover::-webkit-scrollbar-thumb { background: var(--b2); background-clip: content-box; }
.tk-detail ::-webkit-scrollbar-thumb:hover { background: var(--b3, var(--b2)); background-clip: content-box; }
.tk-detail ::-webkit-scrollbar-corner { background: transparent; }

/* The description is a document, not a form control — the browser's resize
   grip was the last thing saying "textarea". */
.tk-detail .tk-d-desc { resize: none; }

/* ══ List: one header, real spacing ═════════════════ */

/* The header belongs to the list, not to each group. Repeating it under every
   status turned one list into a stack of small tables. */
.tk-cols {
  position: sticky; top: 0; z-index: 3;
  margin: 0 0 2px; padding: 9px 8px 9px;
  background: var(--bg);
  border-bottom: 1px solid var(--b1);
  font-size: 12px; font-weight: 500; color: var(--t3);
  letter-spacing: 0; text-transform: none;
}

/* Groups need air between them, and the pill is the heading — the row of
   labels underneath was competing with it. */
.tk-group { margin-bottom: 18px; }
.tk-group:last-child { margin-bottom: 4px; }
.tk-ghead { gap: 9px; padding: 10px 8px 8px; }
.tk-gcount {
  font-family: inherit; font-size: 12px; font-weight: 500; color: var(--t3);
}
.tk-ghead .tk-sel.head { opacity: 0; }
.tk-group:hover .tk-ghead .tk-sel.head,
.tk-ghead .tk-sel.head.all,
.tk-ghead .tk-sel.head.some { opacity: 1; }

/* The status circle sits in a track of its own now; this is the breathing room
   between it and the title that a 10px track was swallowing. */
.tk-name { gap: 9px; }
.tk-name-t { letter-spacing: -.005em; }
.tk-row { min-height: 40px; }

/* ══ Detail panel: white work, grey conversation ════ */
/* Pure white where the task is edited, the page grey behind the thread, and
   white cards on top of it. The old arrangement had those two the wrong way
   round, so the comments read as grey boxes on a white panel. */
.tk-detail { background: var(--bg2); }
.tk-d-side { background: var(--bg); }
.tk-cm { background: var(--bg2); }
.tk-cm.reply { background: transparent; }
.tk-d-composer { background: transparent; }
.tk-detail .tk-d-composer textarea { background: var(--bg2); }
.tk-cklist { background: var(--bg2); }
.tk-sub, .tk-ck { background: transparent; }
.tk-sub:hover, .tk-ck:hover { background: var(--bg3); }
.tk-detail .tk-d-desc:hover { background: var(--bg3); }
.tk-detail .tk-d-desc:focus { background: var(--bg2); }
.tk-d-val:hover, .tk-d-empty:hover { background: var(--bg3); }
.tk-file { background: var(--bg2); }
.tk-file-th { background: var(--bg3); }
.tk-drop:hover { background: var(--bg3); }

/* A comment is the unit of the thread: tighter, with the author line and the
   body reading as one block rather than two. */
.tk-cm { padding: 11px 12px; margin: 6px 0; gap: 10px; }
.tk-cm-h { gap: 8px; }
.tk-cm-h b { font-size: 13px; }
.tk-cm-h em { font-size: 11.5px; color: var(--t3); }
.tk-cm-t { margin-top: 3px; }
/* Only the thread wants a bigger avatar; 20px is right in a row or a picker. */
.tk-cm > .tk-av.sm { width: 26px; height: 26px; font-size: 10px; margin-top: 1px; }

/* ══ Avatars with a colour, icon reactions ══════════ */

/* No photo is not the same as no person. Initials sit on a colour picked from
   the name, so two people are never the same grey circle. */
.tk-av { background: var(--avb, var(--bg4, var(--bg3))); color: #fff; }
.tk-av.has-img { background: var(--bg3); }
.tk-av[data-user-id] { cursor: default; }

/* Agreement is an icon, not a cartoon hand. */
.tk-rx { padding: 0 9px; gap: 5px; }
.tk-rx svg { width: 14px; height: 14px; }
.tk-rx-e { font-size: 13px; line-height: 1; }
.tk-cm-tools button svg { width: 15px; height: 15px; }

/* Events lost their bullet, so they align on their text like everything else. */
.tk-ev { padding-left: 2px; }