/* ============================================================================
   projects screens. Owned by one workstream; shared rules live in
   css/components.css and css/screens.css.

   Two prefixes, and they are not interchangeable:
     .pj-   the project list and one project
     .tg-   one team's dashboard (tm- is the list of teams)

   THE ONE RULE THIS FILE KEEPS COMING BACK TO: a figure never fills a cell it
   can overflow. Every name is `min-width: 0` inside a flex row and every wide
   surface sits in a scrollX wrapper, because the first pass of this screen put
   a five column dashboard inside a 390px viewport and a name with two words in
   it pushed the attainment off the right edge where nobody would ever look for
   it. A dashboard that truncates a name is a defect, not a compromise.
   ========================================================================= */

/* A chip never shrinks. Flex will happily squeeze one to fit and the browser
   clips the text without a hyphen or an ellipsis, so "contributor" renders as
   "contributo" and the rung on screen is a different word from the rung in the
   database. Every chip in these screens is a label, not a container. */
.pj-card-top .chip, .pj-member .chip, .pj-kpi-head .chip, .pj-kra-top .chip,
.pj-share .chip, .tm-top .chip, .tg-project-top .chip, .tg-ticket-meta .chip {
  flex: none; white-space: nowrap;
}

/* ============================================================== the list */

.pj-head-stats { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

.pj-views { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-6) 0 var(--s-5); }
.pj-view {
  padding: 0 var(--s-4); height: 30px; border-radius: var(--r-full);
  border: var(--bw) solid var(--c-border); background: var(--c-surface);
  color: var(--c-text-2); font-size: var(--t-xs); font-weight: var(--t-medium);
  display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer;
}
.pj-view:hover { background: var(--c-hover); color: var(--c-text); }
.pj-view[aria-pressed="true"] {
  background: var(--c-accent-quiet); border-color: var(--c-accent);
  color: var(--c-text); font-weight: var(--t-semibold);
}
.pj-view-count { font-family: var(--t-mono); font-size: var(--t-2xs); color: var(--c-text-3); }
.pj-view[aria-pressed="true"] .pj-view-count { color: var(--c-text-2); }

.pj-grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}
.pj-card {
  display: flex; flex-direction: column; gap: var(--s-3); min-width: 0;
  padding: var(--s-6); border: var(--bw) solid var(--c-border); border-radius: var(--r-lg);
  background: var(--c-surface); text-decoration: none; color: inherit;
}
.pj-card:hover, .pj-card:focus-visible { border-color: var(--c-accent); }
.pj-card-top { display: flex; align-items: center; gap: var(--s-2); }
.pj-card-title { font-size: var(--t-md); font-weight: var(--t-semibold); margin: 0; overflow-wrap: anywhere; }
.pj-card-desc {
  margin: 0; font-size: var(--t-sm); color: var(--c-text-2); line-height: var(--t-body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pj-card-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  font-size: var(--t-2xs); color: var(--c-text-3);
}
.pj-card-meta > span { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.pj-card-meta svg { width: 13px; height: 13px; flex: none; }

.pj-card-figs { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.pj-fig { display: inline-flex; align-items: baseline; gap: var(--s-2); font-size: var(--t-2xs); color: var(--c-text-3); }
.pj-fig strong { font-size: var(--t-sm); color: var(--c-text); font-variant-numeric: tabular-nums; }

.pj-card-none { font-size: var(--t-2xs); color: var(--c-text-3); line-height: var(--t-body); }
.pj-card-att { display: flex; flex-direction: column; gap: var(--s-2); }
.pj-card-att-text {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2);
  font-size: var(--t-2xs); color: var(--c-text-2);
}
.pj-card-att-text strong { font-size: var(--t-sm); color: var(--c-text); font-variant-numeric: tabular-nums; }
.pj-card-q { color: var(--c-text-3); margin-left: auto; }

/* =========================================================== one project */

.pj-page-head { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: flex-start; }
.pj-page-head .page-head-text { flex: 1 1 420px; min-width: 0; }
.pj-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }

.pj-panels {
  display: grid; gap: var(--s-7); align-items: start;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.pj-main, .pj-side { min-width: 0; display: flex; flex-direction: column; gap: var(--s-6); }
@media (max-width: 1040px) { .pj-panels { grid-template-columns: 1fr; } }

.pj-section-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ------------------------------------------------- result areas */

.pj-defs { display: flex; flex-direction: column; gap: var(--s-6); }
.pj-group { border: var(--bw) solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
.pj-kra { padding: var(--s-5) var(--s-6); background: var(--c-surface-2); border-bottom: var(--bw) solid var(--c-border); }
.pj-kra[data-force="0"] { background: var(--c-warn-quiet); }
.pj-kra-loose { background: var(--c-surface); }
.pj-kra-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.pj-kra-title { margin: 0; font-size: var(--t-base); font-weight: var(--t-semibold); min-width: 0; overflow-wrap: anywhere; }
.pj-kra-desc { margin: var(--s-2) 0 0; font-size: var(--t-xs); color: var(--c-text-2); line-height: var(--t-body); }

.pj-kpis { display: flex; flex-direction: column; }
.pj-none { margin: 0; padding: var(--s-5) var(--s-6); font-size: var(--t-xs); color: var(--c-text-3); }

.pj-kpi { padding: var(--s-5) var(--s-6); border-top: var(--bw) solid var(--c-border-subtle); background: var(--c-surface); }
.pj-kpi:first-child { border-top: none; }
.pj-kpi[data-retired="1"] { opacity: 0.6; }
.pj-kpi-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.pj-kpi-title { margin: 0; font-size: var(--t-sm); font-weight: var(--t-semibold); min-width: 0; overflow-wrap: anywhere; }
.pj-kpi-target {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin-top: var(--s-2); font-size: var(--t-2xs); color: var(--c-text-3);
}
.pj-kpi-target strong { color: var(--c-text); font-variant-numeric: tabular-nums; }
.pj-kpi-none { margin: var(--s-3) 0 0; font-size: var(--t-2xs); color: var(--c-text-3); line-height: var(--t-body); }
.pj-kpi-att { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.pj-kpi-att-text {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2);
  font-size: var(--t-2xs); color: var(--c-text-2);
}
.pj-kpi-att-text strong { font-size: var(--t-sm); color: var(--c-text); font-variant-numeric: tabular-nums; }
.pj-kpi-q { color: var(--c-text-3); }
.pj-kpi-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }

/* Personal shares, indented once so the tree is visible without a connector. */
.pj-shares {
  margin-top: var(--s-4); padding-left: var(--s-5);
  border-left: 2px solid var(--c-border); display: flex; flex-direction: column; gap: var(--s-2);
}
.pj-share { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.pj-share[data-force="0"] { opacity: 0.75; }
.pj-share-body { flex: 1 1 auto; min-width: 0; }
.pj-share-name { font-size: var(--t-xs); font-weight: var(--t-medium); overflow-wrap: anywhere; }
.pj-share-target { color: var(--c-text-3); font-weight: var(--t-normal); }
.pj-share-num { font-size: var(--t-2xs); color: var(--c-text-2); display: flex; gap: var(--s-2); align-items: baseline; }
.pj-share-num strong { font-variant-numeric: tabular-nums; color: var(--c-text); }

/* The consent line. Tone comes from the state, never from the wording. */
.pj-consent {
  display: flex; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
  background: var(--c-surface-2); border: var(--bw) solid var(--c-border);
}
.pj-consent[data-tone="warn"] { background: var(--c-warn-quiet); border-color: var(--c-warn); }
.pj-consent[data-tone="bad"] { background: var(--c-danger-quiet); border-color: var(--c-danger); }
.pj-consent svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--c-text-2); }
.pj-consent-body { flex: 1 1 auto; min-width: 0; }
.pj-consent-text { font-size: var(--t-2xs); line-height: var(--t-body); }
.pj-consent-why { margin: var(--s-2) 0 0; font-size: var(--t-2xs); color: var(--c-text-2); line-height: var(--t-body); }
.pj-consent button { flex: none; }

/* ------------------------------------------------------ the grid */

.pj-entry-scroll { margin-top: var(--s-2); }
.pj-entry-grid th, .pj-entry-grid td { white-space: nowrap; vertical-align: middle; }

/* A row header is a name, not a column heading. Without this it inherits the
   thead treatment - upper case, tracked out, and a heavy rule that stops at the
   end of the first column - which reads as a broken table rather than a styled
   one. */
.pj-entry-grid tbody th {
  border-bottom: var(--bw) solid var(--c-border-subtle);
  color: var(--c-text); text-transform: none;
  letter-spacing: var(--t-track-normal); font-weight: var(--t-medium);
  font-size: var(--t-sm);
}
.pj-entry-grid tbody tr:last-child th { border-bottom: 0; }

.pj-grid-name { min-width: 12rem; text-align: left; }
.pj-grid-label { display: block; font-weight: var(--t-medium); white-space: normal; }
.pj-grid-who { display: block; font-size: var(--t-2xs); color: var(--c-text-3); }
.pj-cell {
  display: inline-flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums;
  background: none; border: none; color: inherit; padding: var(--s-1) var(--s-2);
  border-radius: var(--r-xs); font-size: var(--t-xs); min-height: 0;
}
button.pj-cell { cursor: pointer; }
button.pj-cell:hover { background: var(--c-hover); }
.pj-cell-empty { color: var(--c-text-3); }
.pj-cell-body { display: inline-flex; align-items: baseline; gap: 2px; }
.pj-cell-of { color: var(--c-text-3); }
.pj-cell-q { color: var(--c-text-3); font-size: var(--t-2xs); margin-left: var(--s-2); }
.pj-cell-changed { color: var(--c-warn); font-weight: var(--t-bold); }

/* ---------------------------------------------------- the people */

.pj-people .card-body, .pj-load .card-body { display: flex; flex-direction: column; gap: var(--s-3); }
.pj-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
/* Top aligned, not centred. The name line wraps when a marker chip follows the
   name, and a centred avatar then lands beside the SECOND line, which reads as
   a name floating above somebody else's row. */
.pj-member { display: flex; align-items: flex-start; gap: var(--s-3); min-width: 0; }
.pj-member > .avatar { margin-top: 2px; }
.pj-member > .chip, .pj-member-actions { margin-top: 1px; }
.pj-member[data-gone="1"] { opacity: 0.6; }
.pj-member-body { flex: 1 1 auto; min-width: 0; }
.pj-member-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-xs); font-weight: var(--t-medium); }
.pj-member-name a { color: inherit; }
.pj-member-meta { font-size: var(--t-2xs); color: var(--c-text-3); line-height: var(--t-body); overflow-wrap: anywhere; }
.pj-member-gone { font-size: var(--t-2xs); color: var(--c-text-3); margin-top: 2px; }
.pj-member-actions { display: flex; gap: var(--s-1); flex: none; }

.pj-load-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); }
.pj-load-value { font-size: var(--t-xl); font-weight: var(--t-semibold); font-variant-numeric: tabular-nums; }
.pj-load-of { font-size: var(--t-2xs); color: var(--c-text-3); }
.pj-load-meter { display: flex; flex-direction: column; gap: var(--s-2); }
.pj-load-meter p[data-tone="bad"] { color: var(--c-danger); }
.pj-load-meter p[data-tone="warn"] { color: var(--c-warn); }
.pj-load-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--t-2xs); }
.pj-load-list li { display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
.pj-load-mins { font-variant-numeric: tabular-nums; color: var(--c-text-2); flex: none; }
.pj-load-picker .field { margin: 0; }

/* ============================================================== teams */

.tm-head-stats { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-bottom: var(--s-6); }
.tm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.tm-row { min-width: 0; }
.tm-link { display: block; text-decoration: none; color: inherit; }
.tm-body {
  padding: var(--s-5) var(--s-6); border: var(--bw) solid var(--c-border);
  border-radius: var(--r-lg); background: var(--c-surface);
  display: flex; flex-direction: column; gap: var(--s-3); min-width: 0;
}
.tm-link:hover .tm-body, .tm-link:focus-visible .tm-body { border-color: var(--c-accent); }
.tm-row[data-viewable="0"] .tm-body { background: var(--c-bg); border-style: dashed; }

/* The indent says where a unit sits in the tree. 22px a level is readable at
   1440 and ruinous at 390, where four levels would leave a sub team of a team
   of an office with under half the screen, so the step halves at phone width
   rather than the depth being hidden. */
.tm-row[data-depth="1"] .tm-body { margin-left: 22px; }
.tm-row[data-depth="2"] .tm-body { margin-left: 44px; }
.tm-row[data-depth="3"] .tm-body { margin-left: 66px; }
.tm-row[data-depth="4"] .tm-body { margin-left: 88px; }
.tm-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.tm-name { margin: 0; font-size: var(--t-md); font-weight: var(--t-semibold); min-width: 0; overflow-wrap: anywhere; }

.tm-who {
  display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-4);
  margin: 0; font-size: var(--t-2xs);
}
.tm-who dt { color: var(--c-text-3); }
.tm-who dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--c-text-2); }

.tm-figs { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.tm-fig { display: inline-flex; align-items: baseline; gap: var(--s-2); font-size: var(--t-2xs); color: var(--c-text-3); }
.tm-fig strong { font-size: var(--t-sm); color: var(--c-text); font-variant-numeric: tabular-nums; }
.tm-fig[data-tone="bad"] strong { color: var(--c-danger); }
.tm-fig[data-tone="warn"] strong { color: var(--c-warn); }
.tm-fig[data-tone="good"] strong { color: var(--c-success); }

.tm-ready { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-2xs); color: var(--c-text-2); }
.tm-ready .meter { flex: 1 1 8rem; max-width: 14rem; }
.tm-ready-none, .tm-closed { margin: 0; font-size: var(--t-2xs); color: var(--c-text-3); line-height: var(--t-body); }
.tm-closed { display: flex; gap: var(--s-3); align-items: flex-start; }
.tm-closed svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }

/* ==================================================== team dashboard */

.tg-head { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: flex-start; }
.tg-head .page-head-text { flex: 1 1 420px; min-width: 0; }
.tg-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }

.tg-stats {
  display: grid; gap: var(--s-4); margin: var(--s-6) 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.tg-stats .stat {
  padding: var(--s-5); border: var(--bw) solid var(--c-border);
  border-radius: var(--r-md); background: var(--c-surface); min-width: 0;
}

.tg-panels { display: grid; gap: var(--s-7); align-items: start; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.tg-main, .tg-side { min-width: 0; display: flex; flex-direction: column; gap: var(--s-6); }
@media (max-width: 1100px) { .tg-panels { grid-template-columns: 1fr; } }

/* ------------------------------------------------- the people table */

.tg-table th, .tg-table td { vertical-align: middle; white-space: nowrap; }
.tg-who { min-width: 13rem; }
.tg-who .person { text-decoration: none; color: inherit; }
.tg-who .person-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); white-space: normal; }
.tg-table tr[data-away="1"] .tg-who .person-name { color: var(--c-text-2); }

.tg-num { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: var(--t-snug); }
.tg-num strong { font-variant-numeric: tabular-nums; font-size: var(--t-sm); }
.tg-num span { font-size: var(--t-2xs); color: var(--c-text-3); }
.tg-num[data-tone="bad"] strong { color: var(--c-danger); }
.tg-num[data-tone="warn"] strong { color: var(--c-warn); }
.tg-num[data-tone="good"] strong { color: var(--c-success); }

.tg-score { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: var(--t-snug); }
.tg-score strong { font-variant-numeric: tabular-nums; font-size: var(--t-sm); }
.tg-score-of { font-size: var(--t-2xs); color: var(--c-text-3); }
.tg-ready { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-2xs); color: var(--c-text-2); }
.tg-ready .meter { width: 3.5rem; }

/* --------------------------------------------------- ticket standing */

.tg-standing { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.tg-standing-row {
  display: grid; align-items: center; gap: var(--s-2) var(--s-4);
  grid-template-columns: minmax(7rem, 1.2fr) minmax(5rem, 1fr) max-content;
  padding: var(--s-3) var(--s-4); border: var(--bw) solid var(--c-border);
  border-radius: var(--r-md); background: var(--c-surface);
}
.tg-standing-row[data-state="not_evaluated"] { background: var(--c-bg); }
.tg-standing-name { font-size: var(--t-xs); font-weight: var(--t-medium); min-width: 0; overflow-wrap: anywhere; }
.tg-standing-bar { min-width: 0; }
.tg-standing-num { font-size: var(--t-xs); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tg-standing-detail, .tg-standing-now {
  grid-column: 1 / -1; font-size: var(--t-2xs); color: var(--c-text-3); line-height: var(--t-body);
}
.tg-standing-now { color: var(--c-text-2); }

/* ------------------------------------------------------ blocked time */

.tg-blocked-sum { margin: 0 0 var(--s-4); font-size: var(--t-sm); color: var(--c-text-2); }
.tg-blocked-sum strong { color: var(--c-text); font-variant-numeric: tabular-nums; }
.tg-blocked { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.tg-blocked-row {
  display: flex; gap: var(--s-4); align-items: flex-start; min-width: 0;
  padding: var(--s-4) var(--s-5); border: var(--bw) solid var(--c-border);
  border-left: 3px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface);
}
.tg-blocked-row[data-late="1"] { border-left-color: var(--c-danger); }
.tg-blocked-row > svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--c-text-3); }
.tg-blocked-row[data-late="1"] > svg { color: var(--c-danger); }
.tg-blocked-body { flex: 1 1 auto; min-width: 0; }
.tg-blocked-top { font-size: var(--t-xs); overflow-wrap: anywhere; }
.tg-blocked-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center;
  margin-top: var(--s-1); font-size: var(--t-2xs); color: var(--c-text-3); min-width: 0;
}
.tg-blocked-meta a { overflow-wrap: anywhere; }
.tg-blocked-note { margin: var(--s-2) 0 0; font-size: var(--t-2xs); color: var(--c-text-2); line-height: var(--t-body); }

/* ---------------------------------------------------------- side cards */

.tg-tickets, .tg-blockers, .tg-projects { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }

.tg-ticket { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.tg-ticket-link { display: flex; gap: var(--s-2); align-items: baseline; min-width: 0; text-decoration: none; color: inherit; }
.tg-ticket-link:hover .tg-ticket-title { text-decoration: underline; }
.tg-ticket-num { font-family: var(--t-mono); font-size: var(--t-2xs); color: var(--c-text-3); flex: none; }
.tg-ticket-title { font-size: var(--t-xs); min-width: 0; }
.tg-ticket-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center;
  font-size: var(--t-2xs); color: var(--c-text-3);
}
.tg-ticket-meta span[data-tone="bad"] { color: var(--c-danger); }

.tg-blocker { display: flex; gap: var(--s-3); align-items: flex-start; min-width: 0; }
.tg-blocker[data-done="1"] { opacity: 0.6; }
.tg-blocker > svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--c-warn); }
.tg-blocker[data-done="1"] > svg { color: var(--c-success); }
.tg-blocker-body { flex: 1 1 auto; min-width: 0; }
.tg-blocker-text { font-size: var(--t-xs); overflow-wrap: anywhere; }
.tg-blocker-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center;
  margin-top: var(--s-1); font-size: var(--t-2xs); color: var(--c-text-3);
}

.tg-project { min-width: 0; }
.tg-project a, .tg-project > div { display: flex; flex-direction: column; gap: var(--s-2); text-decoration: none; color: inherit; min-width: 0; }
.tg-project a:hover .tg-project-top { color: var(--c-accent-text, var(--c-accent)); }
.tg-project-top { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); font-weight: var(--t-medium); min-width: 0; }
.tg-project-att { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-2xs); color: var(--c-text-2); }
.tg-project-att .meter { flex: 1 1 4rem; max-width: 9rem; }
.tg-project p { margin: 0; }

/* ------------------------------------------------------ lead scorecard */

.tg-scorecard { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); }
.tg-sc-cell {
  padding: var(--s-3) var(--s-4); border: var(--bw) solid var(--c-border);
  border-radius: var(--r-sm); background: var(--c-surface-2); min-width: 0;
}
.tg-sc-label { display: block; font-size: var(--t-2xs); color: var(--c-text-3); text-transform: uppercase; letter-spacing: var(--t-track-caps); }
.tg-sc-value { display: block; font-size: var(--t-md); font-weight: var(--t-semibold); font-variant-numeric: tabular-nums; }
.tg-sc-note { display: block; font-size: var(--t-2xs); color: var(--c-text-3); line-height: var(--t-body); }

.tg-closed .empty-actions { display: flex; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); flex-wrap: wrap; }

/* ================================================================ narrow */

@media (max-width: 760px) {
  .pj-card-q { margin-left: 0; }
  .pj-kpi-actions button { flex: 1 1 auto; }
  .pj-consent { flex-wrap: wrap; }
  .pj-consent button { width: 100%; }
  .pj-member-actions { flex: 0 0 auto; }
  .tm-who { grid-template-columns: 1fr; gap: 0; }
  .tm-who dt { margin-top: var(--s-2); }
  .tm-row[data-depth="1"] .tm-body { margin-left: 10px; }
  .tm-row[data-depth="2"] .tm-body { margin-left: 20px; }
  .tm-row[data-depth="3"] .tm-body { margin-left: 30px; }
  .tm-row[data-depth="4"] .tm-body { margin-left: 40px; }
  .tg-standing-row { grid-template-columns: 1fr max-content; }
  .tg-standing-bar { grid-column: 1 / -1; }
  /* Two columns, not three. At 390 a third column leaves 112px for a label
     like "time sheet approved", which wraps to four lines and pushes the figure
     below the fold of its own cell. */
  .tg-scorecard { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
}