/* ============================================================
   Mythox — Tasks  (Pass 1 · 2026-06-11)
   100% token-driven (global brand.css tokens) → follows all 4
   palettes + light mode. Things-3 feel: airy, calm, never cluttered.
   ============================================================ */

/* ---------------- HERO ---------------- */
.tk-hero {
  position:relative; overflow:hidden; isolation:isolate;
  padding:30px; border-radius:var(--radius-lg); border:1px solid var(--line);
  background:
    radial-gradient(120% 140% at 92% -20%, var(--gold-soft), transparent 55%),
    linear-gradient(180deg, var(--surface), var(--surface-grad-2));
  margin-bottom:22px;
}
.tk-hero-in { position:relative; z-index:1; }
.tk-hero h1 { font-size:clamp(26px,3.6vw,38px); margin:10px 0 8px; }
.tk-hero .sub { color:var(--muted); max-width:60ch; font-size:14.5px; }
.tk-stats { display:flex; flex-wrap:wrap; gap:26px; margin-top:22px; }
.tk-stat { display:flex; flex-direction:column; gap:4px; }
.tk-stat b { font-family:var(--serif); font-size:30px; font-weight:700; line-height:1; color:var(--ivory); letter-spacing:-.02em; }
.tk-stat span { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }

/* ---------------- TABS ---------------- */
.tk-tabs { display:flex; gap:6px; margin-bottom:16px; }
.tk-tab {
  font-family:inherit; font-size:13px; font-weight:600; color:var(--muted);
  background:transparent; border:1px solid var(--line); border-radius:10px;
  padding:8px 14px; cursor:pointer; transition:color .15s, border-color .15s, background .15s;
  display:inline-flex; align-items:center; gap:7px;
}
.tk-tab:hover { color:var(--ivory); border-color:var(--gold-line); }
.tk-tab.on { color:var(--gold-ink); background:var(--gold); border-color:var(--gold); }
.tk-count { font-family:var(--mono); font-size:11px; opacity:.75; }
.tk-tab.on .tk-count { opacity:.9; }

/* ---------------- ADD BOX ---------------- */
.tk-add { display:flex; gap:10px; margin-bottom:18px; }
.tk-add input {
  flex:1; font-family:inherit; font-size:15px; color:var(--ivory);
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; transition:border-color .15s, box-shadow .15s; outline:none;
}
.tk-add input::placeholder { color:var(--dim); }
.tk-add input:focus { border-color:var(--gold-2); box-shadow:0 0 0 3px var(--gold-soft); }
.tk-add-btn {
  flex:0 0 auto; width:48px; border:none; border-radius:12px; cursor:pointer;
  background:var(--gold); color:var(--gold-ink); font-size:24px; line-height:1; font-weight:300;
  transition:transform .12s, filter .15s;
}
.tk-add-btn:hover { filter:brightness(1.06); }
.tk-add-btn:active { transform:scale(.94); }

/* ---------------- LIST ---------------- */
.tk-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.tk-item {
  display:flex; align-items:center; gap:14px; padding:13px 14px 13px 16px;
  border-radius:14px; border:1px solid var(--line);
  background:linear-gradient(180deg, var(--surface), var(--surface-grad-2));
  transition:border-color .15s, transform .15s, opacity .18s;
}
.tk-item:hover { border-color:var(--gold-line); transform:translateY(-1px); }
.tk-item:hover .tk-del { opacity:.6; }
.tk-item.tk-ai { border-left:3px solid var(--accent); }
.tk-item.tk-na { border-left:3px dashed var(--accent); }
.tk-item.tk-na .tk-del { opacity:0; }
.tk-item.tk-na:hover .tk-del { opacity:.6; }
.tk-item.tk-leaving { opacity:0; transform:translateX(14px); }

/* agent / AI source tag + "add to my tasks" pill on a NextActions row */
.tk-na-tag {
  font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 8px; border-radius:99px; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.tk-na-add {
  flex:0 0 auto; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer;
  padding:5px 11px; border-radius:9px; white-space:nowrap;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  transition:background .15s, border-color .15s;
}
.tk-na-add:hover { background:color-mix(in srgb, var(--accent) 18%, transparent); border-color:var(--accent); }

/* the round tick */
.tk-check {
  flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  border:2px solid var(--line-2); background:transparent; cursor:pointer; padding:0;
  position:relative; transition:border-color .15s, background .15s;
}
.tk-check:hover { border-color:var(--gold); }
.tk-check::after {
  content:''; position:absolute; inset:0; margin:auto; width:9px; height:5px;
  border-left:2px solid var(--gold-ink); border-bottom:2px solid var(--gold-ink);
  transform:rotate(-45deg) translateY(-1px) scale(.3); opacity:0; transition:opacity .15s, transform .15s;
}
.tk-check.on { background:var(--gold); border-color:var(--gold); }
.tk-check.on::after { opacity:1; transform:rotate(-45deg) translateY(-1px) scale(1); }
.tk-check-lg { width:26px; height:26px; }
.tk-check-sm { width:18px; height:18px; }

/* main click target */
.tk-main {
  flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; text-align:left;
  background:transparent; border:none; cursor:pointer; font-family:inherit; padding:0;
}
.tk-main-static { cursor:default; }
.tk-title { font-size:15px; font-weight:600; color:var(--ivory); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tk-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.tk-due { font-family:var(--mono); font-size:11px; padding:2px 7px; border-radius:6px; background:var(--surface-2); color:var(--muted); }
.tk-due.today { color:var(--gold-ink); background:var(--gold); }
.tk-due.overdue { color:#fff; background:var(--red); }
.tk-due.upcoming { color:var(--muted); }
.tk-sub-prog { font-family:var(--mono); font-size:11px; color:var(--dim); }
.tk-has-notes { color:var(--dim); font-size:12px; }
.tk-dim { color:var(--dim); }

.tk-del {
  flex:0 0 auto; width:26px; height:26px; border:none; background:transparent; cursor:pointer;
  color:var(--muted); font-size:20px; line-height:1; border-radius:8px; opacity:0;
  transition:opacity .15s, color .15s, background .15s;
}
.tk-del:hover { color:var(--red); background:color-mix(in srgb, var(--red) 12%, transparent); opacity:1; }

.tk-done .tk-title { color:var(--dim); text-decoration:line-through; }
.tk-list-arc .tk-item { background:var(--surface); }

.tk-empty { text-align:center; padding:40px 20px; color:var(--muted); border:1px dashed var(--line-2); border-radius:var(--radius-lg); }
.tk-empty-ic { font-size:30px; opacity:.45; margin-bottom:10px; }

/* ---------------- DETAIL PAGE ---------------- */
.tk-detail { max-width:760px; }
.tk-back {
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--gold);
  background:transparent; border:none; cursor:pointer; padding:6px 0; margin-bottom:18px;
}
.tk-back:hover { text-decoration:underline; }
.tk-d-head { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.tk-d-title {
  flex:1; font-family:var(--serif); font-size:clamp(22px,3vw,30px); font-weight:700; color:var(--ivory);
  background:transparent; border:none; border-bottom:1px solid transparent; outline:none; padding:4px 0;
  transition:border-color .15s;
}
.tk-d-title:focus { border-bottom-color:var(--gold-line); }
.tk-d-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.tk-d-field { display:flex; flex-direction:column; gap:7px; }
.tk-d-field > span { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.tk-d-field input[type=date], .tk-d-notes textarea {
  font-family:inherit; font-size:14px; color:var(--ivory); background:var(--surface);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.tk-d-field input[type=date]:focus, .tk-d-notes textarea:focus { border-color:var(--gold-2); box-shadow:0 0 0 3px var(--gold-soft); }
.tk-d-tag { align-self:flex-end; font-family:var(--mono); font-size:11px; padding:5px 10px; border-radius:7px; color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }

.tk-d-sub { padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--surface); margin-bottom:22px; }
.tk-d-sub-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.tk-d-sub-head h3 { font-size:16px; margin:0; }
.tk-sub-list { list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:6px; }
.tk-sub { display:flex; align-items:center; gap:12px; padding:6px 4px; }
.tk-sub-title { flex:1; font-size:14px; color:var(--ivory); }
.tk-sub.done .tk-sub-title { color:var(--dim); text-decoration:line-through; }
.tk-del-sm { width:22px; height:22px; font-size:16px; }
.tk-sub:hover .tk-del-sm { opacity:.6; }
.tk-sub-add { display:flex; gap:8px; }
.tk-sub-add input {
  flex:1; font-family:inherit; font-size:13.5px; color:var(--ivory); background:var(--surface-2);
  border:1px solid var(--line); border-radius:9px; padding:9px 12px; outline:none; transition:border-color .15s;
}
.tk-sub-add input:focus { border-color:var(--gold-2); }
.tk-sub-add input::placeholder { color:var(--dim); }
.tk-sub-add button { flex:0 0 auto; width:38px; border:none; border-radius:9px; cursor:pointer; background:var(--surface-3); color:var(--ivory); font-size:18px; transition:background .15s; }
.tk-sub-add button:hover { background:var(--gold); color:var(--gold-ink); }

.tk-d-notes { width:100%; margin-top:26px; margin-bottom:24px; }   /* #11: breathing room above the notes box */
.tk-d-notes textarea { width:100%; resize:vertical; line-height:1.5; }

.tk-d-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }   /* #11: separate the action buttons from the hub box above */
.tk-d-done {
  font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
  background:var(--gold); color:var(--gold-ink); border:none; border-radius:11px; padding:12px 20px;
  transition:filter .15s, transform .12s;
}
.tk-d-done:hover { filter:brightness(1.06); }
.tk-d-done:active { transform:scale(.97); }
/* #11: neutral "Done" save-and-close button (distinct from the gold Complete + red Delete) */
.tk-d-save {
  font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; color:var(--ivory);
  background:var(--surface-2); border:1px solid var(--line); border-radius:11px; padding:12px 20px;
  transition:border-color .15s, background .15s;
}
.tk-d-save:hover { border-color:var(--gold-line); background:var(--surface-3, var(--surface-2)); }
.tk-d-save:active { transform:scale(.97); }
.tk-d-del {
  font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; color:var(--red);
  background:transparent; border:1px solid color-mix(in srgb, var(--red) 36%, transparent); border-radius:11px; padding:12px 20px;
  transition:background .15s;
}
.tk-d-del:hover { background:color-mix(in srgb, var(--red) 12%, transparent); }

@media (max-width:640px) {
  .tk-stats { gap:18px; }
  .tk-stat b { font-size:24px; }
}

/* ---------------- PASS 2 · AI SUGGESTIONS ---------------- */
.tk-suggest { margin-bottom:18px; }
.tk-sg-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.tk-sg-btn {
  font-family:inherit; font-size:13px; font-weight:600; color:var(--gold-ink);
  background:var(--gold); border:1px solid var(--gold); border-radius:10px;
  padding:8px 14px; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:filter .15s, transform .15s;
}
.tk-sg-btn:hover { filter:brightness(1.04); transform:translateY(-1px); }
.tk-sg-btn:active { transform:translateY(0); }
.tk-sg-spark { font-size:13px; line-height:1; opacity:.9; }
.tk-sg-msg { font-size:12.5px; color:var(--muted); }
.tk-sg-msg.err { color:var(--red); }
.tk-sg-loading { font-size:13px; color:var(--muted); }
.tk-sg-spin {
  width:14px; height:14px; border-radius:50%; display:inline-block;
  border:2px solid var(--line); border-top-color:var(--gold); animation:tk-spin .7s linear infinite;
}
@keyframes tk-spin { to { transform:rotate(360deg); } }

.tk-sg-list {
  margin-top:14px; border:1px solid var(--gold-line); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--gold-soft), transparent 70%), var(--surface);
  padding:14px 14px 8px; animation:tk-sg-in .22s ease both;
}
@keyframes tk-sg-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.tk-sg-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin-bottom:10px;
}
.tk-sg-bulk { display:inline-flex; gap:6px; }
.tk-sg-bulk button {
  font-family:inherit; font-size:11px; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:8px;
  padding:4px 10px; cursor:pointer; transition:color .15s, border-color .15s;
}
.tk-sg-bulk button:hover { color:var(--ivory); border-color:var(--gold-line); }

.tk-sg-card {
  display:flex; align-items:center; gap:12px; padding:11px 4px;
  border-top:1px solid var(--line);
}
.tk-sg-card:first-of-type { border-top:none; }
.tk-sg-c-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.tk-sg-c-title { font-size:14.5px; font-weight:600; color:var(--ivory); }
.tk-sg-c-why { font-size:12.5px; color:var(--muted); line-height:1.4; }
.tk-sg-c-acts { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; }
.tk-sg-add {
  font-family:inherit; font-size:12.5px; font-weight:600; color:var(--gold-ink);
  background:var(--gold); border:1px solid var(--gold); border-radius:8px;
  padding:6px 12px; cursor:pointer; transition:filter .15s;
}
.tk-sg-add:hover { filter:brightness(1.05); }
.tk-sg-dis {
  font-family:inherit; font-size:16px; line-height:1; color:var(--muted);
  background:transparent; border:1px solid var(--line); border-radius:8px;
  width:30px; height:30px; cursor:pointer; transition:color .15s, border-color .15s;
}
.tk-sg-dis:hover { color:var(--red); border-color:var(--red); }

/* ============================================================
   §25 — PROJECTS layer (projects → tasks → subtasks + hub)
   Same token-driven language as Pass-1; airy, light-mode-clean.
   ============================================================ */

/* progress bar (projects, KPIs, hub) */
.tk-bar { height:7px; border-radius:99px; background:var(--surface-2); overflow:hidden; border:1px solid var(--line); }
.tk-bar > span { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--gold-2), var(--gold)); transition:width .35s ease; }

/* sections + smaller add box */
.tk-section { margin-top:26px; }
.tk-section-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px; }
.tk-section-head h3 { font-size:16px; margin:0; }
.tk-section-meta { display:flex; align-items:baseline; gap:10px; }
.tk-na-count { font-size:11px; color:var(--accent); white-space:nowrap; }
.tk-add-sm input { padding:11px 14px; font-size:14px; }
.tk-add-sm .tk-add-btn { width:44px; font-size:21px; }
.tk-empty-sm { padding:22px 16px; }
.tk-empty-sm .tk-empty-ic { font-size:22px; margin-bottom:6px; }

/* ---- project grid / cards ---- */
.tk-pj-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; margin-bottom:6px; }
.tk-pj-card {
  display:flex; flex-direction:column; gap:9px; text-align:left; cursor:pointer;
  font-family:inherit; padding:16px; border-radius:16px; border:1px solid var(--line);
  background:linear-gradient(180deg, var(--surface), var(--surface-grad-2));
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.tk-pj-card:hover { border-color:var(--gold-line); transform:translateY(-2px); box-shadow:0 8px 24px -16px var(--gold-soft); }
.tk-pj-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.tk-pj-title { font-size:15.5px; font-weight:700; color:var(--ivory); line-height:1.25; }
.tk-pj-pct { font-family:var(--mono); font-size:12px; color:var(--gold); flex-shrink:0; }
.tk-pj-pct-lg { font-size:18px; }
.tk-pj-meta { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--muted); }
.tk-pj-count { font-family:var(--mono); font-size:11px; }
.tk-pj-kpi { font-size:11px; color:var(--dim); }
.tk-pj-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.tk-chip { font-size:11px; padding:3px 9px; border-radius:99px; border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
.tk-chip-prod { color:var(--gold); border-color:var(--gold-line); background:var(--gold-soft); }
.tk-chip-sys { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 32%, transparent); background:color-mix(in srgb, var(--accent) 12%, transparent); }

/* ---- project detail ---- */
.tk-pj-detail .tk-d-head { margin-bottom:10px; }
.tk-pj-detail-sub { font-size:12.5px; color:var(--muted); margin:8px 0 18px; }
.tk-d-field select {
  font-family:inherit; font-size:14px; color:var(--ivory); background:var(--surface);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; outline:none; cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.tk-d-field select:focus { border-color:var(--gold-2); box-shadow:0 0 0 3px var(--gold-soft); }

/* ---- KPIs ---- */
.tk-mini-add {
  font-family:inherit; font-size:12px; font-weight:600; color:var(--gold-ink);
  background:var(--gold); border:1px solid var(--gold); border-radius:8px; padding:5px 11px; cursor:pointer;
  transition:filter .15s;
}
.tk-mini-add:hover { filter:brightness(1.05); }
.tk-kpi-empty { font-size:13px; margin:4px 0 0; }
.tk-kpi-list { display:flex; flex-direction:column; gap:12px; }
.tk-kpi { display:grid; grid-template-columns:1.4fr 1.4fr 1.2fr auto; gap:12px; align-items:center; }
.tk-kpi input {
  font-family:inherit; font-size:13.5px; color:var(--ivory); background:var(--surface-2);
  border:1px solid var(--line); border-radius:8px; padding:8px 10px; outline:none; min-width:0; transition:border-color .15s;
}
.tk-kpi input:focus { border-color:var(--gold-2); }
.tk-kpi-nums { display:flex; align-items:center; gap:6px; color:var(--muted); }
.tk-kpi-nums input { width:100%; }
.tk-kpi-cur, .tk-kpi-tgt { max-width:70px; font-family:var(--mono); }
.tk-kpi-unit { max-width:64px; }
.tk-kpi-bar { display:flex; align-items:center; gap:8px; }
.tk-kpi-bar .tk-bar { flex:1; }
.tk-kpi-pct { font-family:var(--mono); font-size:11px; color:var(--gold); flex-shrink:0; }
@media (max-width:640px){ .tk-kpi { grid-template-columns:1fr auto; } .tk-kpi-bar { grid-column:1 / -1; } }

/* ---- the Products & Systems hub ---- */
.tk-hub-row {
  display:flex; align-items:center; gap:13px; padding:12px 14px; cursor:pointer;
  border-radius:13px; border:1px solid var(--line); background:var(--surface); margin-bottom:8px;
  transition:border-color .15s, transform .15s;
}
.tk-hub-row:hover { border-color:var(--gold-line); transform:translateY(-1px); }
.tk-hub-ic { flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; font-size:14px; }
.tk-hub-prod { color:var(--gold); background:var(--gold-soft); border:1px solid var(--gold-line); }
.tk-hub-sys { color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.tk-hub-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.tk-hub-name { font-size:14px; font-weight:600; color:var(--ivory); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tk-hub-sub { font-size:11.5px; color:var(--muted); }
.tk-hub-pct { font-family:var(--mono); font-size:12px; color:var(--gold); flex-shrink:0; }
.tk-hub-empty { font-size:13px; color:var(--dim); padding:16px; border:1px dashed var(--line-2); border-radius:13px; text-align:center; }
.tk-hub-open { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:7px; background:var(--surface-2); border:1px solid var(--line); color:var(--muted); font-size:13px; text-decoration:none; transition:background .15s, color .15s, border-color .15s; }
.tk-hub-open:hover { background:var(--gold-soft); border-color:var(--gold-line); color:var(--gold); }

/* ---- subtask-as-mini-task in the task detail list ---- */
.tk-sub-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; text-align:left; background:transparent; border:none; cursor:pointer; font-family:inherit; padding:0; }
.tk-sub-meta { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); }
.tk-d-tag-soft { color:var(--muted); background:var(--surface-2); border-color:var(--line); }

/* ============================================================
   PAGE 4 — Super Projects (notes · cross-links · KPI links ·
   Done Projects drill-in). Same token-driven language as above.
   ============================================================ */

/* ---- cross-link colour families (prod=gold + sys=accent defined above) ---- */
.tk-chip-rt   { color:var(--accent-2); border-color:color-mix(in srgb, var(--accent-2) 34%, transparent); background:color-mix(in srgb, var(--accent-2) 12%, transparent); }
.tk-chip-goal { color:var(--blue);     border-color:color-mix(in srgb, var(--blue) 34%, transparent);     background:color-mix(in srgb, var(--blue) 12%, transparent); }
.tk-chip-fin  { color:var(--green);    border-color:color-mix(in srgb, var(--green) 34%, transparent);    background:color-mix(in srgb, var(--green) 12%, transparent); }

/* ---- project "Linked to" chips (removable) ---- */
.tk-link-chips { display:flex; flex-wrap:wrap; gap:8px; }
.tk-link-empty { font-size:13px; margin:2px 0 0; }
.tk-link-chip { display:inline-flex; align-items:center; gap:7px; font-size:12px; padding:5px 6px 5px 11px; border-radius:99px; white-space:nowrap; }
.tk-chip-ic { font-size:12px; line-height:1; }
.tk-chip-x {
  display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%;
  border:none; background:transparent; color:inherit; opacity:.6; cursor:pointer;
  font-size:14px; line-height:1; padding:0; transition:opacity .15s, background .15s;
}
.tk-chip-x:hover { opacity:1; background:color-mix(in srgb, currentColor 18%, transparent); }

/* ---- the cross-link picker popover (project links + KPI links) ---- */
.tk-lp { display:flex; flex-direction:column; gap:10px; }
.tk-lp-tabs { display:flex; flex-wrap:wrap; gap:5px; }
.tk-lp-tab {
  font-family:inherit; font-size:11.5px; font-weight:600; color:var(--muted);
  background:transparent; border:1px solid var(--line); border-radius:8px;
  padding:5px 9px; cursor:pointer; transition:color .15s, border-color .15s, background .15s;
}
.tk-lp-tab:hover { color:var(--ivory); border-color:var(--gold-line); }
.tk-lp-tab.on { color:var(--gold-ink); background:var(--gold); border-color:var(--gold); }
.tk-lp-body { display:flex; flex-direction:column; gap:4px; max-height:240px; overflow-y:auto; margin:0 -4px; padding:0 4px; }
.tk-lp-item {
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  font-family:inherit; font-size:13px; color:var(--ivory); cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:8px 10px;
  transition:border-color .15s, background .15s;
}
.tk-lp-item:hover { border-color:var(--gold-line); background:var(--surface-3, var(--surface-2)); }
.tk-lp-ic { flex:0 0 auto; font-size:13px; opacity:.85; }
.tk-lp-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tk-lp-group { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:8px 0 2px; }
.tk-lp-group:first-child { margin-top:0; }
.tk-lp-empty { font-size:12.5px; color:var(--dim); margin:4px 0; line-height:1.45; }
.tk-lp-note { font-size:11.5px; color:var(--muted); margin:8px 0 0; line-height:1.45; }

/* ---- KPI linking (a row under each KPI) ---- */
.tk-kpi-item { display:flex; flex-direction:column; gap:8px; }
.tk-kpi-linkrow { display:flex; align-items:center; }
.tk-kpi-linkbtn {
  font-family:inherit; font-size:12px; font-weight:600; color:var(--accent);
  background:transparent; border:1px dashed color-mix(in srgb, var(--accent) 38%, transparent); border-radius:8px;
  padding:5px 11px; cursor:pointer; transition:background .15s, border-color .15s;
}
.tk-kpi-linkbtn:hover { background:color-mix(in srgb, var(--accent) 12%, transparent); border-color:var(--accent); }
.tk-kpi-linked { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.tk-kpi-link-name {
  display:inline-flex; align-items:center; gap:5px; font-weight:600; color:var(--accent); text-decoration:none;
  padding:3px 9px; border-radius:99px;
  background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  transition:background .15s;
}
.tk-kpi-link-name:hover { background:color-mix(in srgb, var(--accent) 20%, transparent); }
.tk-kpi-unlink { color:var(--muted); }

/* ---- multiple separate project notes ---- */
.tk-notes-sub { margin-top:26px; }   /* spec item 5: don't crowd the Project tasks box above */
.tk-note-empty { font-size:13px; margin:2px 0 0; }
.tk-note-list { display:flex; flex-direction:column; gap:10px; }
.tk-note { display:flex; align-items:flex-start; gap:8px; }
.tk-note-text {
  flex:1; min-width:0; width:100%; resize:vertical; line-height:1.5;
  font-family:inherit; font-size:13.5px; color:var(--ivory); background:var(--surface-2);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.tk-note-text::placeholder { color:var(--dim); }
.tk-note-text:focus { border-color:var(--gold-2); box-shadow:0 0 0 3px var(--gold-soft); }
.tk-note .tk-del-sm { margin-top:5px; }
.tk-note:hover .tk-del-sm { opacity:.6; }
/* read-only note (Done Project drill-in renders notes as a <p>) */
.tk-note-ro .tk-note-text { resize:none; white-space:pre-wrap; word-break:break-word; background:var(--surface); border-style:dashed; color:var(--muted); margin:0; }

/* ---- hub rows for the new link types (prod/sys defined above) ---- */
.tk-hub-rt   { color:var(--accent-2); background:color-mix(in srgb, var(--accent-2) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent-2) 30%, transparent); }
.tk-hub-goal { color:var(--blue);     background:color-mix(in srgb, var(--blue) 12%, transparent);     border:1px solid color-mix(in srgb, var(--blue) 30%, transparent); }
.tk-hub-fin  { color:var(--green);    background:color-mix(in srgb, var(--green) 12%, transparent);    border:1px solid color-mix(in srgb, var(--green) 30%, transparent); }

/* ---- Done Project drill-in (read-only history view) ---- */
.tk-dp-head { align-items:center; gap:12px; }
.tk-d-title-static {
  flex:1; min-width:0; font-family:var(--serif); font-size:clamp(22px,3vw,30px); font-weight:700;
  color:var(--ivory); letter-spacing:-.01em; padding:4px 0;
}
.tk-dp-badge {
  flex:0 0 auto; font-family:var(--mono); font-size:11px; letter-spacing:.04em; padding:5px 10px; border-radius:99px;
  color:var(--green); background:color-mix(in srgb, var(--green) 14%, transparent); border:1px solid color-mix(in srgb, var(--green) 32%, transparent);
}
.tk-check-ro { cursor:default; }
.tk-done-ro { cursor:default; }
.tk-done-ro:hover { transform:none; border-color:var(--line); }