/* Tasks and projects. Tokens from app.css only; every selector is prefixed tk- (this file loads on every page). */

/* ------------------------------------------------------------ toolbar, quick add, filters */
.tk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s4); position: relative; }
.tk-toolbar .segmented a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tk-quick { margin-bottom: var(--s4); }
.tk-quick .quick-add { flex-wrap: nowrap; }
.tk-quick .quick-add .input { flex: 1 1 auto; min-width: 0; }
.tk-quick .btn { flex: none; }
html.js .tk-preview-btn { display: none; }
.tk-preview { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-height: 30px; padding: var(--s2) var(--s2) 0; }
.tk-preview-title { font-weight: 600; color: var(--text); margin-right: var(--s1); overflow-wrap: anywhere; }
.tk-preview .chip { height: 24px; font-size: 12px; }
.tk-warn { font-size: 12.5px; color: var(--warn); }

.tk-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); margin: 0 0 var(--s5); padding: var(--s3) var(--s4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.tk-filter { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; min-width: 0; }
.tk-filter > span { font: 600 11.5px/1.2 var(--font); color: var(--muted); letter-spacing: .02em; }
.tk-filter .input { height: 34px; font-size: 13.5px; }
.tk-filter-actions { display: flex; gap: var(--s2); flex: none; }

.tk-new { position: relative; }
.tk-new > summary { list-style: none; }
.tk-new > summary::-webkit-details-marker { display: none; }
.tk-new-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(620px, calc(100vw - 32px)); padding: var(--s5); box-shadow: var(--shadow-pop); }

/* ------------------------------------------------------------ list rows */
.tk-groups > .card + .card { margin-top: var(--s5); }
.tk-group .card-head h2 { font-size: 15px; }
.tk-count { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px;
  font: 600 12px/1 var(--font); background: var(--surface-3); color: var(--text-2); font-variant-numeric: tabular-nums; }
.tk-count.danger { background: var(--danger-soft); color: var(--danger); }
.tk-head-hint { margin-left: auto; }
.tk-list > li.tk-row { align-items: flex-start; gap: var(--s3); min-height: 0; padding-top: 12px; padding-bottom: 12px; }
.tk-row .grow { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s2); row-gap: 4px; }
.tk-title { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.tk-title:hover { color: var(--accent-text); }
.tk-row .tk-meta { flex-basis: 100%; }
.tk-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.tk-meta .icon { color: var(--faint); }
.tk-row.is-done .tk-title, .tk-struck { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.tk-due { display: inline-flex; align-items: center; gap: 4px; }
.tk-due.danger { color: var(--danger); font-weight: 600; } .tk-due.danger .icon { color: var(--danger); }
.tk-due.accent { color: var(--accent-text); font-weight: 600; } .tk-due.accent .icon { color: var(--accent-text); }
.tk-rep { color: var(--accent-text); }
.tk-rep .icon { color: var(--accent-text) !important; }
.tk-blocked { color: var(--warn); font-weight: 600; } .tk-blocked .icon { color: var(--warn) !important; }
.tk-label { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 500;
  background: var(--accent-soft); color: var(--accent-text); margin-right: 4px; white-space: nowrap; }
a.tk-label:hover { text-decoration: none; filter: brightness(.97); }
.tk-who { flex: none; padding-top: 1px; }
.tk-nobody { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px dashed var(--border-strong); color: var(--faint); }

/* round check button: the priority colours its ring */
.tk-check-form { flex: none; }
.tk-check { all: unset; box-sizing: border-box; cursor: pointer; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%;
  border: 2px solid var(--border-strong); display: inline-grid; place-items: center; color: transparent; background: var(--surface);
  transition: background .12s, color .12s, border-color .12s; }
.tk-check.small { width: 20px; height: 20px; }
.tk-check.p1 { border-color: var(--danger); background: var(--danger-soft); }
.tk-check.p2 { border-color: var(--warn); background: var(--warn-soft); }
.tk-check.p3 { border-color: var(--accent); background: var(--accent-soft); }
.tk-check:hover { color: var(--muted); }
.tk-check:focus-visible { box-shadow: var(--focus); }
.tk-check.done { background: var(--good); border-color: var(--good); color: var(--surface); }
.tk-check[disabled] { cursor: default; opacity: .7; }
.tk-row.tk-leaving { opacity: .45; transition: opacity .2s; }

/* ------------------------------------------------------------ board: scrolls inside its own frame */
.tk-board-frame { position: relative; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--r-lg);
  padding-bottom: var(--s2); scrollbar-width: thin; }
.tk-board { display: grid; grid-template-columns: repeat(4, minmax(250px, 1fr)); gap: var(--s4); min-width: 1040px; align-items: start; }
.tk-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); min-width: 0; display: flex; flex-direction: column; }
.tk-col-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); }
.tk-col-head h3 { font-size: 14px; }
.tk-col-head .tk-count { margin-left: auto; background: var(--surface); }
.tk-col-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.tk-col-dot.in_progress { background: var(--accent); } .tk-col-dot.blocked { background: var(--warn); } .tk-col-dot.done { background: var(--good); }
.tk-col-body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); min-height: 120px; border-radius: 0 0 var(--r-lg) var(--r-lg);
  transition: background .12s; }
.tk-col-body.tk-over { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.tk-col-empty { margin: var(--s3) 0; text-align: center; font-size: 12.5px; color: var(--faint); }
.tk-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s3); box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
html.js .tk-card { cursor: grab; }
.tk-card:hover { border-color: var(--border-strong); }
.tk-card.tk-dragging { opacity: .5; }
.tk-card.is-done .tk-card-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.tk-card-title { color: var(--text); font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.tk-card-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); font-size: 12.5px; color: var(--muted); align-items: center; }
.tk-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); font-size: 12px; color: var(--muted); }
.tk-card-project { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tk-move { display: flex; gap: var(--s2); align-items: center; padding-top: var(--s2); border-top: 1px dashed var(--border); }
.tk-move .input { height: 32px; font-size: 13px; flex: 1 1 auto; min-width: 0; }
html.js .tk-move .btn { display: none; }
.tk-hint { margin-top: var(--s3); }
.tk-toast { position: fixed; z-index: 120; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: min(560px, calc(100vw - 32px));
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 3px solid var(--good); border-radius: var(--r);
  padding: var(--s3) var(--s4); box-shadow: var(--shadow-pop); font-size: 14px; }
.tk-toast.error { border-left-color: var(--danger); }

/* ------------------------------------------------------------ detail */
.tk-detail-bar { margin-bottom: var(--s5); }
.tk-detail-bar .card-body { padding-top: var(--s3); padding-bottom: var(--s3); }
.tk-desc { white-space: pre-wrap; }
.tk-top-line { border-top: 1px solid var(--border); }
.tk-top-gap { margin-top: var(--s3); }
.tk-narrow { flex: 0 1 170px !important; }
.tk-checklist > li { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
.tk-comments > li { align-items: flex-start; }
.tk-comment-body { white-space: pre-wrap; margin-top: 4px; overflow-wrap: anywhere; }
.tk-dep a { overflow-wrap: anywhere; }
.tk-activity > li { min-height: 0; padding-top: 10px; padding-bottom: 10px; }
.card-head + .list.tk-activity, .card-head + .tk-list, .card-head + .tk-checklist, .card-head + .tk-comments { margin: 0; }

/* ------------------------------------------------------------ projects */
.tk-space .section-title { margin-top: var(--s6); }
.tk-space:first-of-type .section-title { margin-top: 0; }
.tk-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--s4); }
.tk-project { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); color: var(--text); min-width: 0; }
.tk-project:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.tk-project h3 { font-size: 16px; line-height: 1.3; }
.tk-project .kicker { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 10.5px; }
.tk-project .row.between { flex-wrap: nowrap; }
.tk-project p { margin: 0; }
.tk-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-progress { display: flex; align-items: center; gap: var(--s3); margin-top: auto; }
.tk-progress .meter { flex: 1 1 auto; }
.tk-progress-inline { flex: 0 1 260px; min-width: 180px; margin: 0; }
.tk-create { margin-top: var(--s8); }
.tk-status-line { margin-bottom: var(--s5); }
.tk-status-line .card-body { padding-top: var(--s3); padding-bottom: var(--s3); }
.tk-done-block > summary { cursor: pointer; list-style: none; border-bottom: 0; }
.tk-done-block[open] > summary { border-bottom: 1px solid var(--border); }
.tk-done-block > summary::-webkit-details-marker { display: none; }
.tk-done-block { margin-top: var(--s5); }
.tk-load-cell { min-width: 110px; }

/* timeline table */
.tk-timeline td:last-child { white-space: normal; min-width: 280px; }
.tk-timeline tr.tk-now td { background: var(--accent-soft); }
.tk-timeline tr.tk-now:hover td { background: var(--accent-soft); }
.tk-timeline tr.tk-past td:first-child strong { color: var(--danger); }
.tk-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 280px; height: 26px; padding: 0 9px 0 4px; margin: 2px 4px 2px 0;
  border-radius: 999px; background: var(--surface-3); color: var(--text); font-size: 12.5px; vertical-align: middle; }
.tk-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-pill:hover { text-decoration: none; background: var(--border); }
.tk-pill.done { color: var(--muted); } .tk-pill.done span { text-decoration: line-through; }
.tk-pill.late { background: var(--danger-soft); color: var(--danger); }

@media (max-width: 900px) {
  .tk-new { position: static; }
  .tk-new-panel { left: 0; right: 0; width: auto; }
}
@media (max-width: 600px) {
  .tk-toolbar { gap: var(--s2); }
  .tk-toolbar .segmented { max-width: 100%; overflow-x: auto; }
  .tk-filters { padding: var(--s3); }
  .tk-filter { flex: 1 1 calc(50% - var(--s3)); }
  .tk-filter-actions { flex: 1 1 100%; }
  .tk-quick .quick-add { flex-wrap: wrap; }
  .tk-quick .quick-add .input { flex: 1 1 calc(100% - 40px); }
  .tk-quick .quick-add .btn { flex: 1 1 auto; }
  .tk-board { grid-template-columns: repeat(4, 78vw); min-width: 0; }
  .tk-board-frame { scroll-snap-type: x mandatory; }
  .tk-col { scroll-snap-align: start; }
  .tk-project-grid { grid-template-columns: minmax(0, 1fr); }
  .tk-progress-inline { flex: 1 1 100%; }
  .tk-head-hint { display: none; }
}
.tk-project-grid > .card, .tk-groups > .card:first-child { margin-top: 0; }

/* ============================================================ 2.0: views, Gantt, workload, portfolios, RAID */
html.js .tk-js-hide { display: none; }
.tk-views a .icon { color: var(--faint); }
.tk-views a[aria-current="page"] .icon { color: inherit; }
.tk-mini-filter .input { height: 32px; font-size: 13px; width: auto; max-width: 190px; }
.tk-unassigned { margin-bottom: var(--s4); }
.tk-waiting { color: var(--accent-text); } .tk-waiting .icon { color: var(--accent-text) !important; }
.tk-field { color: var(--text-2); }
.tk-chip-sm { height: 20px; padding: 0 7px; font-size: 11px; }
.tk-card-extra { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; }
.tk-card-extra > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.tk-sections { margin-top: var(--s2); }
.tk-w-label { flex: 0 0 76px; }
.tk-inline-details > summary { list-style: none; display: inline-flex; }
.tk-inline-details > summary::-webkit-details-marker { display: none; }
.tk-mono { font-family: var(--font-mono); font-size: 13px; height: auto; padding-top: var(--s2); }
.tk-multi { height: auto; padding: var(--s1); }
.tk-dep-chip { display: inline-flex; align-items: center; gap: 4px; margin: 2px 6px 2px 0; padding: 0 2px 0 9px; border-radius: 8px; background: var(--warn-soft); }
.tk-dep-chip.done { background: var(--good-soft); }
.tk-dep-chip a { color: var(--text); }

/* table view: spreadsheet-like but calm */
.tk-table { min-width: 860px; }
.tk-table td { padding-top: 7px; padding-bottom: 7px; }
.tk-table tr.is-done .tk-t-title a { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.tk-t-title { min-width: 220px; max-width: 360px; }
.tk-t-title a { color: var(--text); font-weight: 500; }
.tk-inline { display: flex; gap: 6px; align-items: center; margin: 0; }
.tk-cell-input { height: 32px; font-size: 13px; padding: 0 8px; border-color: transparent; background: transparent; min-width: 0; }
.tk-cell-input:hover { border-color: var(--border-strong); background: var(--surface); }
.tk-cell-input:focus { background: var(--surface); }
select.tk-cell-input { width: auto; max-width: 180px; padding-right: 24px; }
.tk-date { width: 140px; }
.tk-late { color: var(--danger); font-weight: 600; }
.tk-unowned { color: var(--warn); font-weight: 600; }
.tk-reassign-row .tk-inline { flex: none; }

/* calendar */
.tk-cal-head { flex-wrap: wrap; }
.tk-cal-nav { margin-left: auto; }
.tk-cal-grid { display: grid; }
.tk-cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tk-cal-dow > div { padding: var(--s2) var(--s3); font: 600 12px/1.2 var(--font); color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.tk-cal-day { min-height: 112px; padding: 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tk-cal-day:nth-child(7n) { border-right: 0; }
.tk-cal-row:last-child .tk-cal-day { border-bottom: 0; }
.tk-cal-day.weekend { background: var(--surface-2); }
.tk-cal-day.out { background: var(--surface-2); }
.tk-cal-day.out .tk-cal-num { color: var(--faint); }
.tk-cal-num { font: 600 12.5px/1 var(--font); color: var(--text-2); padding: 3px 4px 5px; }
.tk-cal-day.today .tk-cal-num { display: inline-grid; place-items: center; align-self: flex-start; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: var(--on-primary); }
.tk-cal-item { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 2px 7px; border-radius: 6px; font-size: 12px; line-height: 1.5; color: var(--text);
  background: var(--accent-soft); border-left: 3px solid var(--accent); }
.tk-cal-item span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tk-cal-item:hover { text-decoration: none; filter: brightness(.97); }
.tk-cal-item.milestone { background: var(--surface-3); border-left-color: var(--primary); font-weight: 600; }
.tk-cal-item.late { background: var(--danger-soft); border-left-color: var(--danger); }
.tk-cal-item.done { background: var(--good-soft); border-left-color: var(--good); color: var(--muted); }
.tk-cal-item.done span:last-child { text-decoration: line-through; }
.tk-cal-more { font-size: 11.5px; color: var(--muted); padding-left: 7px; }
.tk-agenda { display: none; }
.tk-agenda > li { align-items: flex-start; }
.tk-agenda-date { flex: 0 0 44px; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.tk-agenda-date strong { font: 700 18px/1.1 var(--font-display); }
.tk-agenda-date span { font-size: 11.5px; color: var(--muted); }
.tk-diamond { display: inline-block; flex: none; width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; background: var(--primary); }
.tk-diamond.lg { width: 14px; height: 14px; margin: 0 4px; }
.tk-diamond.s-done, .tk-diamond.s-late { background: var(--good); }
.tk-diamond.s-missed { background: var(--danger); }
.tk-diamond.s-at_risk { background: var(--warn); }
:root[data-theme="dark"] .tk-diamond:not(.s-done):not(.s-missed):not(.s-at_risk):not(.s-late) { background: var(--accent); }
.tk-legend { display: inline-flex; align-items: center; gap: 6px; margin-right: var(--s3); white-space: nowrap; }
.tk-swatch { display: inline-block; width: 16px; height: 9px; border-radius: 4px; background: var(--accent-soft); border: 1px solid var(--accent); }
.tk-swatch.late { background: var(--danger-soft); border-color: var(--danger); }
.tk-swatch.done { background: var(--good-soft); border-color: var(--good); }
.tk-swatch.crit { background: var(--primary); border-color: var(--primary); }
:root[data-theme="dark"] .tk-swatch.crit { background: var(--accent); border-color: var(--accent); }
.tk-swatch.todo { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.tk-swatch.prog { background: color-mix(in srgb, var(--accent) 38%, var(--surface)); border-color: var(--accent); }
.tk-swatch.today { width: 2px; height: 12px; border: 0; border-radius: 1px; background: var(--danger); }

/* timeline (Gantt): labels stay put, the chart scrolls inside its own frame */
.tk-gantt-card .card-head { flex-wrap: wrap; }
.tk-gantt-legend { margin-left: auto; display: flex; flex-wrap: wrap; row-gap: 4px; }
.tk-gantt { display: grid; grid-template-columns: minmax(150px, 260px) minmax(0, 1fr); }
.tk-gantt-labels { list-style: none; margin: 0; padding: var(--head) 0 8px; border-right: 1px solid var(--border); min-width: 0; background: var(--surface); }
.tk-gantt-labels li { height: var(--row); display: flex; flex-direction: column; justify-content: center; padding: 0 var(--s3) 0 var(--s4); border-bottom: 1px solid var(--border); min-width: 0; }
.tk-gantt-labels li:first-child { border-top: 1px solid var(--border); margin-top: -1px; }
.tk-gantt-labels a { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text); font-size: 13px; font-weight: 500; line-height: 1.25; }
.tk-gantt-labels a span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tk-gantt-labels li.milestone a { font-weight: 600; }
.tk-gantt-labels li.crit a span:last-child { color: var(--accent-text); }
.tk-gl-meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.tk-gantt-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; min-width: 0; border-radius: 0 0 var(--r-lg) 0; }
.tk-gantt-svg { display: block; font-family: var(--font); }
.tk-g-col { fill: var(--surface); }
.tk-g-col.alt { fill: var(--surface-2); }
.tk-g-col.now { fill: var(--accent-soft); }
.tk-g-grid { stroke: var(--border); stroke-width: 1; }
.tk-g-headline { stroke: var(--border-strong); }
.tk-g-rowline { stroke: var(--border); stroke-dasharray: 2 4; opacity: .8; }
.tk-g-month { fill: var(--text-2); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.tk-g-week { fill: var(--muted); font-size: 11.5px; }
.tk-g-week.now { fill: var(--accent-text); font-weight: 600; }
.tk-g-today { stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 3 3; }
.tk-g-today-dot { fill: var(--danger); }
.tk-g-arrow { fill: none; stroke: var(--faint); stroke-width: 1.25; stroke-linejoin: round; }
.tk-g-arrow.crit { stroke: var(--primary); stroke-width: 1.6; }
.tk-g-head { fill: var(--faint); } .tk-g-head.crit { fill: var(--primary); }
:root[data-theme="dark"] .tk-g-arrow.crit { stroke: var(--accent); } :root[data-theme="dark"] .tk-g-head.crit { fill: var(--accent); }
.tk-g-bar { fill: var(--accent-soft); stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1; }
.tk-g-bar.s-in_progress { fill: color-mix(in srgb, var(--accent) 38%, var(--surface)); stroke: var(--accent); }
.tk-g-bar.s-blocked { fill: var(--warn-soft); stroke: var(--warn); }
.tk-g-bar.s-done { fill: var(--good-soft); stroke: var(--good); opacity: .8; }
.tk-g-bar.late:not(.s-done) { stroke: var(--danger); stroke-width: 1.5; }
.tk-g-bar.crit:not(.s-done) { fill: var(--primary); stroke: var(--primary); }
:root[data-theme="dark"] .tk-g-bar.crit:not(.s-done) { fill: var(--accent); stroke: var(--accent); }
.tk-g-bar.crit.late:not(.s-done) { stroke: var(--danger); stroke-width: 2; }
.tk-g-ms { fill: var(--primary); stroke: var(--surface); stroke-width: 2; }
:root[data-theme="dark"] .tk-g-ms:not(.s-done):not(.s-late):not(.s-missed):not(.s-at_risk) { fill: var(--accent); }
.tk-g-ms.s-done, .tk-g-ms.s-late { fill: var(--good); }
.tk-g-ms.s-missed { fill: var(--danger); }
.tk-g-ms.s-at_risk { fill: var(--warn); }
.tk-g-mlabel { fill: var(--muted); font-size: 10.5px; font-weight: 500; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.tk-g-link { cursor: pointer; }
.tk-g-link:hover .tk-g-bar, .tk-g-link:focus .tk-g-bar { filter: brightness(.94); }
.tk-g-link:focus { outline: none; }
.tk-g-link:focus-visible .tk-g-bar, .tk-g-link:focus-visible .tk-g-ms { stroke: var(--text); stroke-width: 2; }
.tk-gantt-foot { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.tk-gantt-table { margin-top: var(--s4); }

/* workload */
.tk-load { min-width: 720px; }
.tk-load th.tk-load-wk { white-space: nowrap; }
.tk-load-person { display: flex; align-items: center; gap: var(--s2); min-width: 190px; font-weight: 500; background: var(--surface) !important; color: var(--text); font-size: 13.5px; text-align: left; }
.tk-load-person > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.tk-load-cell { min-width: 108px; vertical-align: top; }
.tk-load-fig { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-load-cell .meter { margin: 5px 0 4px; height: 6px; }
.tk-load-word { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.tk-load-cell.warn .tk-load-word { color: var(--warn); font-weight: 600; }
.tk-load-cell.danger .tk-load-word { color: var(--danger); font-weight: 600; }
.tk-load-cell.danger { background: var(--danger-soft); }
.tk-load tbody tr:hover td.tk-load-cell.danger { background: var(--danger-soft); }
.tk-reassign { margin-top: var(--s5); }
.tk-reassign .section-title { margin-top: var(--s4); }

/* budget, reports, print */
.tk-budget-figs, .tk-print-figs, .tk-portfolio-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s4); }
.tk-budget-figs > div, .tk-print-figs > div, .tk-portfolio-figs > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tk-budget-figs strong, .tk-print-figs strong { font: 700 20px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.tk-portfolio-figs strong { font-weight: 600; color: var(--text); }
.tk-rag { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--good); }
.tk-rag.amber { background: var(--warn); } .tk-rag.red { background: var(--danger); }
.tk-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.tk-report-grid .kicker { margin-bottom: 4px; }
.tk-rag-pick { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.tk-rag-pick legend { margin-bottom: var(--s2); }
.tk-rag-opt { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 10px; cursor: pointer; font-size: 13.5px; }
.tk-rag-opt:has(input:checked) { border-color: var(--violet); box-shadow: var(--focus); }
.tk-rag-opt input { margin: 0; accent-color: var(--violet); }
.tk-messages > li { align-items: flex-start; }
@media print {
  body:has(.tk-print) .sidebar, body:has(.tk-print) .topbar, body:has(.tk-print) .page-head .actions,
  body:has(.tk-print) .footer, body:has(.tk-print) .glance { display: none !important; }
  body:has(.tk-print) .shell { display: block; background: none; }
  body:has(.tk-print) .card { box-shadow: none; break-inside: avoid; }
}

/* portfolios */
.tk-portfolio + .tk-portfolio { margin-top: var(--s5); }
.tk-portfolio .card-head { flex-wrap: wrap; }
.tk-portfolio h2 a { color: var(--text); }
.tk-portfolio-sum { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 160px; }
.tk-ragbar { display: flex; width: 160px; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-3); gap: 2px; }
.tk-ragbar span.green { background: var(--good); } .tk-ragbar span.amber { background: var(--warn); } .tk-ragbar span.red { background: var(--danger); }
.tk-programme { padding: var(--s4) var(--s5); border-top: 1px solid var(--border); }
.tk-programme-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
.tk-programme-head .status { margin-left: auto; }
.tk-programme-head h3 a { color: var(--text); }
.tk-ptable { min-width: 760px; }
.tk-ptable td { vertical-align: top; }
.tk-dept-meter { flex: 0 1 220px; }
.tk-raid .card-head { flex-wrap: wrap; }
.tk-ms .card-head { flex-wrap: wrap; }

@media (max-width: 900px) {
  .tk-report-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .tk-cal-grid { display: none; }
  .tk-agenda { display: block; }
  .tk-gantt { grid-template-columns: 118px minmax(0, 1fr); }
  .tk-gantt-labels li { padding: 0 var(--s2) 0 var(--s3); }
  .tk-gantt-labels a { font-size: 12px; }
  .tk-gantt-legend { margin-left: 0; }
  .tk-mini-filter { flex: 1 1 100%; }
  .tk-mini-filter .input { max-width: none; flex: 1 1 0; }
  .tk-portfolio-sum { align-items: flex-start; }
  .tk-programme { padding: var(--s3); }
  .tk-load-person { min-width: 150px; }
  .tk-reassign-row { flex-wrap: wrap; }
  .tk-reassign-row .tk-inline { flex: 1 1 100%; }
  .tk-reassign-row .tk-inline .input { flex: 1 1 auto; max-width: none; }
  .tk-views { max-width: 100%; overflow-x: auto; }
}
/* scroll frames contain their visually hidden labels, so nothing widens the page */
.tk-table-wrap, .tk-load-wrap, .tk-gantt-scroll, .tk-ptable, .tk-cal { position: relative; }
.tk-table td, .tk-load td, .tk-load th { position: relative; }