/* trackchain.js + trackcard.js: a Track link card as the chain. A quiet top
 * row (Venture › Initiative crumbs, the workstream chip on the right), then
 * Goal → Milestone → Task: each level a dot (tinted by its status) on one
 * dashed rail, its small caps level word above its title, the title's own
 * status pill inline after it, then one wrapped meta row of small muted
 * items parted by "·". The goal's KPI is a compact line and a thin bar.
 * Under the chain two light blocks (Output, What this chat contributed)
 * with small caps heads and no box; then the foot and the folded Details.
 * No box inside the card. Tokens only; dark mode through them. Fits 375 px;
 * touch targets are 44 px on touch. */

.track-linkcard { --track-text-in: calc(7px + var(--sv-space-2)); gap: var(--sv-space-3); min-width: 0; overflow: hidden; }
.track-linkcard[data-review="true"] { border-color: color-mix(in srgb, var(--sv-attention) 45%, transparent); }

/* ---- the top row: Venture › Initiative, the workstream chip ---- */
.track-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--sv-space-3); min-width: 0; padding-left: var(--track-text-in); }
.track-crumbs-top { display: flex; flex: 1 1 12rem; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); overflow-wrap: anywhere; }
.track-stream { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 1px 8px; border-radius: 999px; background: var(--sv-surface-sunken); color: var(--sv-ink-secondary); font-size: var(--ui-meta); line-height: 1.5; }

/* ---- the chain: one dashed rail through the dots, absent after the last node ---- */
.track-lineage { display: flex; flex-direction: column; gap: var(--sv-space-3); min-width: 0; }
.track-lineage > .track-node { position: relative; min-width: 0; }
.track-lineage > .track-node:not(:last-child)::after { content: ""; position: absolute; left: 3px; top: calc(0.45em + 11px); bottom: calc(-1 * var(--sv-space-3) + 2px); border-left: 1px dashed var(--sv-hairline-strong); }
.track-lineage .track-line-body { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; line-height: 1.4; }
.track-lineage .track-kind { width: auto; font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--sv-tracking-caps); line-height: 1.3; text-transform: uppercase; }
.track-lineage .track-line-head { display: block; min-width: 0; overflow-wrap: anywhere; }
.track-lineage .track-title { display: inline; overflow: visible; color: var(--sv-ink); font-weight: 400; text-decoration: none; }
.track-lineage .track-node.is-linked .track-title { font-weight: 600; }
.track-lineage a.track-title:hover { text-decoration: underline; text-decoration-color: var(--sv-hairline-strong); text-underline-offset: 2px; }
.track-lineage .track-line-head > :not(.track-title) { margin-left: 6px; vertical-align: 1px; }
.track-lineage .track-node.is-gone .track-title { color: var(--sv-danger); }

/* ---- a node's meta row: owner · weight · agent, small and muted ---- */
.track-lineage .track-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.track-lineage .track-meta > [data-meta] { min-width: 0; color: var(--sv-ink-secondary); }
.track-lineage .track-meta > .is-muted { color: var(--sv-ink-tertiary); }
.track-meta-sep { color: var(--sv-hairline-strong); }
.track-lineage .track-face { max-width: 100%; }
.track-lineage .track-avatar { width: 18px; height: 18px; }

/* ---- the goal's KPI: metric, reading of target, period on one line; a thin bar ---- */
.track-lineage .track-kpi { gap: 4px; margin-top: 3px; max-width: 24rem; }
.track-lineage .track-kpi-words b { font-variant-numeric: tabular-nums; }
.track-lineage .track-kpi > .track-meter { flex: none; height: 4px; }
.track-agent-host:empty { display: none; }

/* ---- Output and What this chat contributed: small caps heads, no box ---- */
.track-block { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-left: var(--track-text-in); }
.track-block-head { color: var(--sv-ink-tertiary); font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--sv-tracking-caps); line-height: 1.3; text-transform: uppercase; }
.track-block-row { margin: 0; color: var(--sv-ink); font-size: var(--ui-text); line-height: 1.45; overflow-wrap: anywhere; }
.track-block-label { margin-right: 6px; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.track-block-value .track-deliverables { display: inline-flex; vertical-align: top; }

/* ---- the foot and the folded Details ---- */
.track-linkcard .track-actions { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.track-details-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 var(--sv-space-2); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.track-details-btn .icon { width: 12px; height: 12px; transition: transform var(--sv-dur-fast) var(--sv-ease-out); }
.track-details-btn[aria-expanded="true"] { color: var(--sv-ink); }
.track-details-btn[aria-expanded="true"] .icon { transform: rotate(90deg); }
.track-linkcard > .track-details { display: flex; flex-direction: column; gap: var(--sv-space-2); min-width: 0; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.track-linkcard > .track-details[hidden] { display: none; }
.track-linkcard > .track-details :is(p, .track-progress) { overflow-wrap: anywhere; }

/* On touch: a link's tap area grows to 44 px without growing its row (the negative margin takes the padding back). */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .track-linkcard :is(.track-crumb, a.track-face, button.track-agent, .track-deliverable) { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
  .track-lineage .track-title { padding-block: 14px; }
  .track-linkcard :is(.track-details-btn, .track-actions > button, .track-context-btn, .track-counts-btn, .track-why-btn, .track-context-actions > button) { min-height: 44px; }
}