/* ==========================================================================
   tasks.css — Grex Tasks (public/tasks.js), owner 2026-10-27.
   Google-Tasks look on the Sessions page: list chips, round check circles,
   date chips, a Completed fold, a composer docked above the bottom pill, the
   AI proposal tray and the edit sheet. Theme colours only (every theme).
   ========================================================================== */

/* ---- 1. Pane in the Sessions page --------------------------------------- */
html.phase5 #page-sessions #pane-tasks[hidden] { display: none !important; }
html.phase5 #pager[data-sessions-view="tasks"] #page-sessions :is(#pane-sessions, #pane-files, #pane-notes, #pane-subagents) {
  display: none !important;
}
html.phase5 #pager[data-sessions-view="tasks"] #page-sessions #pane-tasks { display: flex !important; }

/* Phone: Tasks is a System page view (pager.js homeTasksPane, owner
   2026-10-27). The panel area stops scrolling and the pane fills it, so the
   list scrolls on its own and the box sits at the bottom, above the pill. */
html.phase5 #pager[data-system-view="tasks"] .ospi-panels {
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}
html.phase5 .ospi-panel-tasks:not([hidden]) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
html.phase5 .ospi-panel-tasks #pane-tasks { flex: 1 1 auto; min-height: 0; }

#pane-tasks.tk-pane {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent !important;
  color: var(--ink, var(--text));
  font-family: system-ui, -apple-system, sans-serif;
}
#pane-tasks.tk-pane[hidden] { display: none; }
#pane-tasks button { -webkit-tap-highlight-color: transparent; cursor: pointer; font-family: inherit; }

/* ---- 2. List chips + menu ------------------------------------------------ */
.tk-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 2px 10px;
}
.tk-lists {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
}
.tk-lists::-webkit-scrollbar { display: none; }
.tk-list-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border-radius: 17px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2, var(--muted));
  font: 600 13px/1 system-ui, -apple-system, sans-serif;
  white-space: nowrap;
}
.tk-list-chip.on {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent);
}
.tk-list-n { font-size: 12px; font-weight: 600; opacity: .7; }
.tk-list-star { padding: 0 11px; }
.tk-list-star svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.tk-list-star.on svg { fill: currentColor; }
.tk-list-new { border-style: dashed; }
.tk-list-new svg { width: 14px; height: 14px; }
.tk-menu {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--ink-2, var(--muted));
  display: grid;
  place-items: center;
}
.tk-menu:active { background: color-mix(in srgb, var(--ink, var(--text)) 8%, transparent); }

/* ---- 3. Scroller, head, rows --------------------------------------------- */
.tk-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 0 18px;
}
.tk-head { display: flex; align-items: baseline; gap: 10px; padding: 8px 16px 4px; }
.tk-head-title {
  margin: 0;
  font: 700 20px/1.2 system-ui, -apple-system, sans-serif;
  color: var(--ink, var(--text));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-head-sub { flex: none; font: 500 13px/1 system-ui, -apple-system, sans-serif; color: var(--ink-2, var(--muted)); }

.tk-group {
  padding: 14px 16px 2px;
  font: 600 13px/1.2 system-ui, -apple-system, sans-serif;
  color: var(--ink-2, var(--muted));
}
.tk-group.over { color: var(--danger); }

.tk-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 0 4px 0 4px;
  min-height: 46px;
  border-radius: 12px;
  margin: 0 4px;
}
.tk-row.tk-sub { padding-left: 36px; min-height: 44px; }
.tk-row.tk-pending { opacity: .55; }
@media (hover: hover) {
  .tk-row:hover { background: color-mix(in srgb, var(--ink, var(--text)) 5%, transparent); }
  .tk-check:hover svg { stroke: var(--ink-2, var(--muted)); }
}
.tk-check {
  flex: none;
  width: 42px;
  height: 46px;
  border: 0;
  padding: 0;
  background: transparent;
  display: grid;
  place-items: center;
}
.tk-check svg {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--ink-2, var(--muted));
  fill: none;
  stroke: transparent;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: background .18s ease, box-shadow .18s ease, stroke .18s ease, transform .18s ease;
}
.tk-sub .tk-check svg { width: 17px; height: 17px; }
.tk-checking .tk-check svg,
.tk-is-done .tk-check svg {
  background: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
  stroke: var(--accentInk, var(--bg));
}
.tk-checking .tk-check svg { transform: scale(1.12); }
.tk-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 4px 11px 2px;
  outline: none;
}
.tk-sub .tk-main { padding: 11px 4px 10px 2px; }
.tk-title {
  font: 400 15px/1.35 system-ui, -apple-system, sans-serif;
  color: var(--ink, var(--text));
  overflow-wrap: anywhere;
}
.tk-sub .tk-title { font-size: 14px; }
.tk-checking .tk-title,
.tk-is-done .tk-title {
  text-decoration: line-through;
  color: var(--ink-2, var(--muted));
}
.tk-checking { transition: opacity .3s ease .1s; opacity: .55; }
.tk-details {
  margin-top: 2px;
  font: 400 13px/1.35 system-ui, -apple-system, sans-serif;
  color: var(--ink-2, var(--muted));
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
/* Tap to expand: the row unfolds in place with its full details. */
.tk-row.tk-expanded { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.tk-details-full {
  margin-top: 6px;
  font: 400 13.5px/1.5 system-ui, -apple-system, sans-serif;
  color: var(--ink, var(--text));
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tk-details-full.none { color: var(--ink-2, var(--muted)); font-style: italic; }
.tk-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.tk-x { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tk-x button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border-radius: 17px;
  border: 1px solid var(--line2, var(--line));
  background: var(--surface);
  color: var(--ink, var(--text));
  font: 600 13px/1 system-ui, -apple-system, sans-serif;
}
.tk-x .tk-x-steps { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.tk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; margin-top: 5px; }
.tk-meta:empty { display: none; }
.tk-hasnote { display: inline-flex; align-items: center; color: var(--ink-2, var(--muted)); opacity: .75; }
.tk-due {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--line2, var(--line));
  border-radius: 12px;
  font: 500 12px/1 system-ui, -apple-system, sans-serif;
  color: var(--ink, var(--text));
  white-space: nowrap;
}
.tk-due svg, .tk-chip svg, .tk-s-datelabel svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  flex: none;
}
.tk-due.over { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.tk-due.today { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.tk-subn, .tk-listname, .tk-donewhen {
  font: 500 12px/1.2 system-ui, -apple-system, sans-serif;
  color: var(--ink-2, var(--muted));
}
.tk-listname { padding: 3px 8px; border-radius: 9px; background: color-mix(in srgb, var(--ink, var(--text)) 7%, transparent); }
.tk-star {
  flex: none;
  width: 42px;
  height: 46px;
  border: 0;
  padding: 0;
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--ink-2, var(--muted));
}
.tk-star svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.tk-star.on { color: var(--accent); }
.tk-star.on svg { fill: currentColor; }

/* Completed fold */
.tk-done-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 16px);
  height: 46px;
  margin: 12px 8px 0;
  padding: 0 10px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink, var(--text));
  font: 600 15px/1 system-ui, -apple-system, sans-serif;
}
.tk-done-head[hidden], .tk-done[hidden], .tk-empty[hidden], .tk-tray[hidden], .tk-c-hints[hidden] { display: none !important; }
.tk-done-caret { display: grid; place-items: center; color: var(--ink-2, var(--muted)); transition: transform .2s ease; }
.tk-done-head.open .tk-done-caret { transform: rotate(180deg); }

/* Empty / off */
.tk-empty { padding: 36px 28px 20px; text-align: center; color: var(--ink-2, var(--muted)); }
.tk-empty-art svg {
  width: 54px;
  height: 54px;
  padding: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tk-empty-title { margin: 12px 0 6px; font: 600 17px/1.3 system-ui, -apple-system, sans-serif; color: var(--ink, var(--text)); }
.tk-empty-sub { margin: 0 auto 14px; max-width: 30em; font: 400 14px/1.45 system-ui, -apple-system, sans-serif; }

/* ---- 4. Buttons + chips (shared) ----------------------------------------- */
.tk-btn {
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  border: 1px solid var(--line2, var(--line));
  background: transparent;
  color: var(--ink, var(--text));
  font: 600 14px/1 system-ui, -apple-system, sans-serif;
  cursor: pointer;
}
.tk-btn-primary { background: var(--accent); border-color: transparent; color: var(--accentInk, var(--bg)); }
.tk-btn:active { filter: brightness(.94); }
.tk-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line2, var(--line));
  border-radius: 15px;
  background: var(--surface);
  color: var(--ink, var(--text));
  font: 500 13px/1 system-ui, -apple-system, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
.tk-chip.on { background: var(--accent); border-color: transparent; color: var(--accentInk, var(--bg)); }
.tk-chip.over { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.tk-chip.today { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.tk-chip.off { color: var(--ink-2, var(--muted)); border-style: dashed; }
.tk-chip-x { margin-left: 2px; font-size: 15px; opacity: .6; }
.tk-chip-plain { cursor: default; border-style: dashed; color: var(--ink-2, var(--muted)); background: transparent; }
.tk-chip-star svg { fill: var(--accent); stroke: var(--accent); }

/* ---- 5. Composer ---------------------------------------------------------- */
.tk-composer { flex: none; padding: 6px 10px 8px; border-top: 1px solid var(--line); }
.tk-c-hints { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 6px; }
.tk-c-box {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  min-height: 48px;
  padding: 3px 4px 3px 12px;
  border: 1px solid var(--line2, var(--line));
  border-radius: 24px;
  background: var(--surface);
  box-sizing: border-box;
}
.tk-c-box:focus-within { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.tk-c-ring {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0 6px 12px 0;
  border-radius: 50%;
  border: 2px solid var(--ink-2, var(--muted));
  opacity: .5;
  box-sizing: border-box;
}
.tk-c-input {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 132px;
  margin: 0;
  padding: 10px 2px 9px;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--ink, var(--text));
  font: 400 16px/22px system-ui, -apple-system, sans-serif;  /* 16px: no iOS zoom */
  box-sizing: border-box;
}
.tk-c-input::placeholder { color: var(--ink-2, var(--muted)); opacity: .85; }
.tk-c-ai, .tk-c-add {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 20px;
  display: grid;
  place-items: center;
  padding: 0;
}
.tk-c-ai { background: transparent; color: var(--accent); }
.tk-c-ai.tk-ai-nudge { background: color-mix(in srgb, var(--accent) 16%, transparent); animation: tk-nudge 1.4s ease-in-out 2; }
.tk-c-ai.busy svg, .tk-s-steps.busy svg { animation: tk-spin 1s linear infinite; }
.tk-c-add { background: var(--accent); color: var(--accentInk, var(--bg)); }
.tk-c-add:disabled { opacity: .3; cursor: default; }

/* ---- 6. AI proposal tray -------------------------------------------------- */
.tk-tray {
  flex: none;
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 10px 6px;
  padding: 10px 12px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
}
.tk-tray-head { display: flex; align-items: center; gap: 6px; padding-bottom: 6px; font: 600 14px/1.2 system-ui, -apple-system, sans-serif; color: var(--accent); }
.tk-tray-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.tk-tray-dot { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--ink-2, var(--muted)); opacity: .55; box-sizing: border-box; }
.tk-tray-body { flex: 1 1 auto; min-width: 0; }
.tk-tray-title { font: 500 14px/1.35 system-ui, -apple-system, sans-serif; color: var(--ink, var(--text)); overflow-wrap: anywhere; }
.tk-tray-details { flex-basis: 100%; font: 400 12.5px/1.35 system-ui, -apple-system, sans-serif; color: var(--ink-2, var(--muted)); }
.tk-tray-star svg { width: 13px; height: 13px; fill: var(--accent); stroke: none; }
.tk-tray-steps { margin-top: 4px; }
.tk-tray-step { font: 400 13px/1.5 system-ui, -apple-system, sans-serif; color: var(--ink-2, var(--muted)); }
.tk-tray-step::before { content: "○ "; opacity: .7; }
.tk-tray-x { flex: none; width: 36px; height: 36px; border: 0; border-radius: 18px; background: transparent; color: var(--ink-2, var(--muted)); display: grid; place-items: center; }
.tk-tray-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; }

/* ---- 7. Edit sheet (picker sheet + .tk-sheet) ----------------------------- */
.sheet.tk-sheet {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  color: var(--ink, var(--text));
  font-family: system-ui, -apple-system, sans-serif;
}
.tk-sheet [hidden] { display: none !important; }
.tk-s-top { display: flex; align-items: center; gap: 2px; }
.tk-s-list {
  max-width: 55%;
  height: 36px;
  padding: 0 12px;
  border-radius: 18px;
  border: 1px solid var(--line2, var(--line));
  background: var(--surface);
  color: var(--ink, var(--text));
  font: 600 14px/1 system-ui, -apple-system, sans-serif;
}
.tk-s-list:disabled { opacity: .6; }
.tk-s-gap { flex: 1 1 auto; }
.tk-s-icon {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--ink-2, var(--muted));
  display: grid;
  place-items: center;
  cursor: pointer;
}
.tk-s-icon:active { background: color-mix(in srgb, var(--ink, var(--text)) 8%, transparent); }
.tk-s-star svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.tk-s-star.on { color: var(--accent); }
.tk-s-star.on svg { fill: currentColor; }
.tk-s-title, .tk-s-details {
  width: 100%;
  margin: 0;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--ink, var(--text));
  box-sizing: border-box;
}
.tk-s-title { padding: 4px 0; font: 500 22px/1.3 system-ui, -apple-system, sans-serif; }
.tk-s-details { padding: 4px 0; min-height: 44px; font: 400 16px/1.45 system-ui, -apple-system, sans-serif; }
.tk-s-title::placeholder, .tk-s-details::placeholder, .tk-s-addsub::placeholder { color: var(--ink-2, var(--muted)); }
.tk-s-date { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 4px; border-top: 1px solid var(--line); }
.tk-s-datelabel { display: flex; align-items: center; gap: 8px; font: 600 15px/1.2 system-ui, -apple-system, sans-serif; }
.tk-s-datelabel svg { width: 18px; height: 18px; }
.tk-s-datelabel.over { color: var(--danger); }
.tk-s-datelabel.today { color: var(--accent); }
.tk-s-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tk-s-dateinput, .tk-s-timeinput {
  height: 32px;
  padding: 0 10px;
  border-radius: 16px;
  border: 1px solid var(--line2, var(--line));
  background: var(--surface);
  color: var(--ink, var(--text));
  font: 500 14px/1 system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
}
.tk-s-timeinput:disabled { opacity: .45; }
.tk-s-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font: 600 14px/1 system-ui, -apple-system, sans-serif;
  color: var(--ink-2, var(--muted));
}
.tk-s-steps {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 12px;
  border-radius: 17px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: transparent;
  color: var(--accent);
  font: 600 13px/1 system-ui, -apple-system, sans-serif;
  cursor: pointer;
}
.tk-s-sub { display: flex; align-items: center; }
.tk-s-sub .tk-check { width: 40px; height: 40px; }
.tk-s-subtitle {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink, var(--text));
  font: 400 16px/1 system-ui, -apple-system, sans-serif;
}
.tk-s-sub.tk-is-done .tk-s-subtitle { text-decoration: line-through; color: var(--ink-2, var(--muted)); }
.tk-s-subdel { width: 36px; height: 36px; border: 0; border-radius: 18px; background: transparent; color: var(--ink-2, var(--muted)); display: grid; place-items: center; cursor: pointer; }
.tk-s-addsub {
  height: 44px;
  padding: 0 6px;
  border: 0;
  border-bottom: 1px solid var(--line);
  outline: 0;
  background: transparent;
  color: var(--ink, var(--text));
  font: 400 16px/1 system-ui, -apple-system, sans-serif;
}
.tk-s-stepbox { padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.tk-s-steprow { display: flex; align-items: center; gap: 10px; min-height: 38px; font: 400 15px/1.3 system-ui, -apple-system, sans-serif; }
.tk-s-steprow input { width: 18px; height: 18px; accent-color: var(--accent); }
.tk-s-parent { align-self: flex-start; border: 0; background: transparent; padding: 6px 0; color: var(--accent); font: 600 14px/1.3 system-ui, -apple-system, sans-serif; text-align: left; cursor: pointer; }
.tk-s-done { align-self: stretch; height: 46px; margin-top: 8px; }
.tk-sheet-desk { min-width: min(520px, 92vw); }

/* ---- 7b. Hold and drag --------------------------------------------------- */
.tk-row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.tk-details-full { -webkit-user-select: text; user-select: text; }
.tk-row.tk-press { background: color-mix(in srgb, var(--ink, var(--text)) 7%, transparent); transition: background .3s ease .08s; }
.tk-dragging-on { cursor: grabbing; }
.tk-dragging-on .tk-row { transition: transform .16s ease; }
.tk-dragging-on .tk-row.tk-dragging { transition: none; position: relative; z-index: 4; background: var(--surface); }
.tk-dragging-on .tk-row.tk-drag-lead { box-shadow: 0 12px 30px rgba(0, 0, 0, .22), 0 0 0 1px var(--line2, var(--line)); }
.tk-dragging-on .tk-scroll { overscroll-behavior: none; }

/* ---- 7c. Composer as controller ----------------------------------------- */
.tk-c-focus { max-width: 100%; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.tk-c-focus svg { width: 13px; height: 13px; stroke: none; fill: currentColor; }
.tk-c-focus-t { min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.tk-c-cmd { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.tk-c-cmd svg { width: 13px; height: 13px; stroke: none; fill: currentColor; }
.tk-c-add.tk-c-add-cmd { background: color-mix(in srgb, var(--accent) 80%, var(--ink, var(--text))); }
.tk-tray-reply { padding: 2px 0 8px; font: 400 14.5px/1.45 system-ui, -apple-system, sans-serif; color: var(--ink, var(--text)); white-space: pre-wrap; }
.tk-tray-reply.alone { padding-bottom: 4px; }
.tk-tray-ic {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--ink, var(--text)) 8%, transparent);
  color: var(--ink-2, var(--muted));
}
.tk-k-add .tk-tray-ic, .tk-k-edit .tk-tray-ic, .tk-k-move .tk-tray-ic, .tk-k-list .tk-tray-ic { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.tk-k-done .tk-tray-ic { background: var(--accent); color: var(--accentInk, var(--bg)); }
.tk-k-delete .tk-tray-ic { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.tk-k-delete .tk-tray-what { color: var(--danger); }
.tk-k-done .tk-tray-title { text-decoration: line-through; color: var(--ink-2, var(--muted)); }

/* ---- 7c2. Companion older than the page ------------------------------------ */
.tk-stale {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 10px 2px;
  padding: 8px 8px 8px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 50%, transparent);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--ink, var(--text));
  font: 500 13px/1.35 system-ui, -apple-system, sans-serif;
}
.tk-stale[hidden] { display: none !important; }
.tk-stale-t { flex: 1 1 auto; min-width: 0; }
.tk-stale-b { flex: none; height: 34px; padding: 0 14px; }

/* ---- 7d. Linked chat ------------------------------------------------------ */
.tk-chatchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  max-width: 100%;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent);
  font: 500 12px/1 system-ui, -apple-system, sans-serif;
  white-space: nowrap;
  overflow: hidden;
}
.tk-chatchip span { overflow: hidden; text-overflow: ellipsis; }
.tk-chatchip svg { flex: none; }
.tk-chatchip-plain { cursor: default; }
.tk-s-chat { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.tk-s-chathead { display: flex; align-items: center; gap: 8px; color: var(--accent); }
.tk-s-chatname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px/1.3 system-ui, -apple-system, sans-serif; color: var(--ink, var(--text)); }
.tk-s-chatname.none { color: var(--ink-2, var(--muted)); font-weight: 500; }
.tk-s-chatlist { display: flex; flex-direction: column; max-height: 40vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; }
.tk-s-chatrow { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink, var(--text)); text-align: left; cursor: pointer; }
.tk-s-chatrow:last-child { border-bottom: 0; }
.tk-s-chatrow-t { font: 500 14px/1.3 system-ui, -apple-system, sans-serif; }
.tk-s-chatrow-f { font: 400 12px/1.2 system-ui, -apple-system, sans-serif; color: var(--ink-2, var(--muted)); }

/* ---- 8. Motion ------------------------------------------------------------ */
@keyframes tk-spin { to { transform: rotate(360deg); } }
@keyframes tk-nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .tk-c-ai.tk-ai-nudge, .tk-c-ai.busy svg, .tk-s-steps.busy svg { animation: none; }
  .tk-check svg, .tk-done-caret, .tk-checking { transition: none; }
}

/* ---- 9. Reminders (row bell + the reminder sheet, owner 2026-10-28) ------- */
.tk-due.tk-remind .tk-bell { font-size: 12px; }
.tk-r-head { font: 700 18px/1.2 system-ui, -apple-system, sans-serif; padding: 4px 2px; }
.tk-r-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.tk-r-title { font: 650 20px/1.3 system-ui, -apple-system, sans-serif; overflow-wrap: anywhere; }
.tk-r-when { font: 500 14px/1.3 system-ui, -apple-system, sans-serif; color: var(--ink-2, var(--muted)); }
.tk-r-note { font: 600 14px/1.3 system-ui, -apple-system, sans-serif; color: var(--accent); }
.tk-r-gone { font: 500 15px/1.3 system-ui, -apple-system, sans-serif; color: var(--ink-2, var(--muted)); }
.tk-r-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 4px; }
.tk-r-btn {
  min-height: 56px;
  border-radius: 14px;
  border: 1px solid var(--line2, var(--line));
  background: transparent;
  color: var(--ink, var(--text));
  font: 650 17px/1.1 system-ui, -apple-system, sans-serif;
  cursor: pointer;
}
.tk-r-btn.tk-r-done {
  grid-column: 1 / -1;
  min-height: 64px;
  border: 0;
  background: var(--accent);
  color: var(--accentInk, var(--bg));
  font-size: 19px;
}
.tk-r-btn:active { transform: scale(.98); }
.tk-r-open, .tk-r-undo {
  align-self: flex-start;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: 600 14px/1.2 system-ui, -apple-system, sans-serif;
  cursor: pointer;
}
.tk-r-card.tk-r-isdone .tk-r-title { text-decoration: line-through; opacity: .7; }