/* trackcard.js, trackproposals.js, trackfacts.js and trackpanel.js's sync
 * line: the shared parts (status and link pills, the KPI bar and progress
 * meter, deliverables, a weight tag, "How this counts", context editing,
 * venture headings, the dashed Suggested-record cards and the correction
 * banner). The link card's own layout (top row, the chain, blocks, foot,
 * Details) is trackchain.css. The status pills share plan-pill's tones. */

/* ---- the sync line and the correction banner ---- */
.track-sync { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-1) var(--sv-space-2); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.track-sync[hidden] { display: none; }
.track-sync[data-ok="false"] { padding: var(--sv-space-2); border-radius: var(--sv-radius); background: color-mix(in srgb, var(--sv-danger) 8%, transparent); color: var(--sv-danger); }
.track-sync-error { flex: 1 1 100%; color: var(--sv-ink-secondary); overflow-wrap: anywhere; }
.track-retry { min-height: 28px; padding: 0 var(--sv-space-2); font-size: var(--ui-meta); }
.track-fixing { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); padding: var(--sv-space-2) var(--sv-space-3); border-radius: var(--sv-radius); background: color-mix(in srgb, var(--sv-attention) 12%, transparent); color: var(--sv-ink); font-size: var(--ui-meta); }
.track-fixing[hidden] { display: none; }
.track-fixing > span { flex: 1 1 14rem; }
.track-venture-head { margin: var(--sv-space-2) 0 0; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-weight: 600; }
.track-proposals[hidden] { display: none; }

/* trackfacts.js trackWeightTag: a node's weight at any level; a stated one in ink, none in the tertiary tone. */
.track-weight { flex: none; color: var(--sv-ink-secondary); font-size: var(--ui-meta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.track-weight[data-weight="none"] { color: var(--sv-ink-tertiary); }

/* ---- the card's head: where the link came from, the model's estimate, measured accuracy ---- */
.track-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sv-space-2); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.track-status-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--sv-surface-sunken);
  color: var(--sv-ink-secondary);
  font-size: var(--ui-meta);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.track-status-pill[data-tone="good"] { background: color-mix(in srgb, var(--ws-working) 14%, transparent); color: var(--ws-working-ink); }
.track-status-pill[data-tone="bad"] { background: color-mix(in srgb, var(--sv-danger) 12%, transparent); color: var(--sv-danger); }
.track-status-pill[data-tone="review"] { background: color-mix(in srgb, var(--sv-attention) 14%, transparent); color: var(--sv-attention); }
.track-status-pill:is([data-tone="done"], [data-tone="off"]) { background: none; box-shadow: inset 0 0 0 1px var(--sv-hairline); color: var(--sv-ink-tertiary); }
.track-link-pill { box-shadow: inset 0 0 0 1px var(--sv-hairline-strong); background: none; color: var(--sv-ink); }
.track-link-pill[data-origin="suggested"] { box-shadow: none; background: color-mix(in srgb, var(--sv-attention) 14%, transparent); color: var(--sv-attention); }
.track-link-pill:is([data-origin="confirmed"], [data-origin="manual"], [data-origin="corrected"]) { box-shadow: none; background: color-mix(in srgb, var(--ws-working) 14%, transparent); color: var(--ws-working-ink); }
.track-estimate { color: var(--sv-ink-secondary); white-space: nowrap; }
.track-measured { white-space: nowrap; }
.track-measured:empty { display: none; }
.track-was { margin: 0; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); text-decoration: line-through; text-decoration-color: var(--sv-hairline-strong); }

/* ---- a Suggested record: dashed, its facts in a small table ---- */
.track-proposal { border-style: dashed; border-color: var(--sv-hairline-strong); background: var(--sv-surface); }
.track-proposal-kind { color: var(--sv-ink); font-weight: 600; }
.track-proposal-pill { background: color-mix(in srgb, var(--sv-attention) 14%, transparent); color: var(--sv-attention); }
.track-proposal-title { margin: 0; color: var(--sv-ink); font-weight: 500; line-height: 1.35; }
.track-proposal-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--sv-space-3); margin: 0; font-size: var(--ui-meta); }
.track-proposal-facts dt { color: var(--sv-ink-tertiary); }
.track-proposal-facts dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; margin: 0; color: var(--sv-ink-secondary); }
.track-proposal-facts dd .track-kind { width: auto; }
.track-proposal-facts .track-kpi { flex: 1 1 100%; }
.track-none { color: var(--sv-ink-tertiary); font-style: italic; }
.track-evidence { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sv-space-2); }
.track-dupes { display: flex; flex-direction: column; gap: 4px; padding: var(--sv-space-2) var(--sv-space-3); border-radius: var(--sv-radius); background: color-mix(in srgb, var(--sv-attention) 8%, transparent); font-size: var(--ui-meta); }
.track-dupes-head { margin: 0; color: var(--sv-attention); font-weight: 600; }
.track-dupe { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sv-space-2); }
.track-dupe > .track-title { flex: 1 1 10rem; font-weight: 500; }
.track-dupe > button { min-height: 28px; padding: 0 var(--sv-space-2); font-size: var(--ui-meta); }
.track-proposal-actions { flex-wrap: wrap; margin-left: 0; }
.track-proposal-edit, .track-proposal-merge { display: flex; flex-direction: column; gap: var(--sv-space-2); padding-top: var(--sv-space-2); border-top: var(--sv-hairline-w) solid var(--sv-hairline); }
.track-proposal-merge { flex-flow: row wrap; }
.track-proposal-merge > input { flex: 1 1 12rem; }
.track-field { display: flex; flex-direction: column; gap: 2px; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.track-proposal-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--sv-space-2); min-width: 0; margin: 0; padding: var(--sv-space-2) 0 0; border: 0; }
.track-proposal-kpi > legend { padding: 0; color: var(--sv-ink-secondary); font-size: var(--ui-meta); font-weight: 600; }
.track-field textarea { min-height: 3.2em; padding: var(--sv-space-2) var(--sv-space-3); resize: vertical; }
.track-subgroup { margin-top: 2px; padding-left: var(--sv-space-4); font-weight: 500; }

/* ---- people and agents in a card ---- */
a.track-face { text-decoration: none; }
a.track-face:hover .track-face-name { text-decoration: underline; }
button.track-agent { padding: 0; min-height: 0; border: 0; background: none; font: inherit; color: var(--sv-ink-secondary); cursor: pointer; }
button.track-agent:hover .track-face-name { text-decoration: underline; }
.track-agent-card { display: flex; flex-direction: column; gap: 2px; padding: var(--sv-space-2) var(--sv-space-3); border-radius: var(--sv-radius); background: var(--sv-surface-sunken); font-size: var(--ui-meta); }
.track-agent-card[hidden] { display: none; }
.track-agent-card p { margin: 0; color: var(--sv-ink-secondary); }
.track-agent-role { color: var(--sv-ink-tertiary); }
.track-archived { padding: 0 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--sv-hairline-strong); color: var(--sv-ink-tertiary); }
.track-crumb { color: var(--sv-ink-secondary); text-decoration: none; }
.track-crumb:hover { color: var(--sv-ink); text-decoration: underline; }
.track-sep { color: var(--sv-hairline-strong); }

/* ---- what Core says: KPI, progress, deliverables, how it counts ---- */
.track-kpi, .track-progress { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: var(--ui-meta); color: var(--sv-ink-tertiary); }
.track-progress { flex-direction: row; align-items: center; gap: var(--sv-space-2); }
.track-kpi-words { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.track-kpi-words b { color: var(--sv-ink); font-weight: 600; }
.track-kpi[data-reading="no"] .track-kpi-words b { color: var(--sv-ink-secondary); font-weight: 500; }
.track-kpi-period { padding: 0 6px; border-radius: 999px; background: var(--sv-surface-sunken); }
.track-meta .track-kpi { flex: 1 1 9rem; min-width: 8rem; }
.track-meter { display: block; flex: 1; min-width: 4rem; height: 4px; overflow: hidden; border-radius: 2px; background: var(--sv-surface-dim); }
.track-meter > span { display: block; height: 100%; background: var(--ws-working); }
.track-progress > .track-meter { flex: 0 1 8rem; max-width: 10rem; }
.track-waiting { margin: 0; color: var(--sv-attention); font-size: var(--ui-meta); }
.track-deliverables { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sv-space-3); }
.track-deliverable { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: var(--sv-ink); overflow-wrap: anywhere; }
.track-deliverable .icon { flex: none; width: 12px; height: 12px; color: var(--sv-ink-tertiary); }
.track-counts-btn, .track-why-btn, .track-context-btn { align-self: flex-start; min-height: 28px; padding: 0 var(--sv-space-2); margin-left: calc(-1 * var(--sv-space-2)); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.track-counts { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; padding: var(--sv-space-2) var(--sv-space-3); border-radius: var(--sv-radius); background: var(--sv-surface); font-size: var(--ui-meta); line-height: 1.45; }
.track-counts[hidden] { display: none; }
.track-counts p { margin: 0; color: var(--sv-ink-secondary); overflow-wrap: anywhere; }
.track-counts b { color: var(--sv-ink); font-weight: 600; }
.track-counts-from { color: var(--sv-ink-tertiary) !important; }

/* ---- per-link context ---- */
.track-context { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.track-context-text { margin: 0; color: var(--sv-ink); font-size: var(--ui-text); line-height: 1.45; overflow-wrap: anywhere; }
.track-context-none { margin: 0; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.track-context-input { width: 100%; min-height: 3.2em; padding: var(--sv-space-2); border: var(--sv-hairline-w) solid var(--sv-hairline-strong); border-radius: var(--sv-radius); background: var(--sv-surface); color: var(--sv-ink); font: var(--ui-text) / 1.4 var(--sv-font-sans); resize: vertical; }
.track-context-actions { display: flex; gap: var(--sv-space-1); }
.track-context-actions > button { min-height: 28px; padding: 0 var(--sv-space-3); font-size: var(--ui-meta); }

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .track-retry, .track-counts-btn, .track-context-btn, .track-why-btn, .track-context-actions > button, .track-dupe > button, .track-fixing > button { min-height: 44px; }
  .track-proposal-facts { grid-template-columns: 1fr; }
  .track-proposal-facts dt { margin-top: 4px; }
}