/* Shared version-&-proposal tracking chrome (the .trk-* classes used by tracking.js), plus the graph's proposals
   overlay chrome. Diffs / blame / history / lineage reuse the .pr-* classes from proposals.css so the graph panel
   and the #proposals view render identically. Tokens only — correct in light and dark. */

/* ---------- panel shell ---------- */
.trk { display: flex; flex-direction: column; min-width: 0; }
.trk-cap { display: flex; align-items: baseline; gap: var(--sp-2); font: 500 var(--fs-1) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: var(--sp-2); }
.trk-cap .trk-cap-n { letter-spacing: 0; text-transform: none; font-family: var(--font); color: var(--fg-3); }
.trk-ehead { display: flex; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.trk-eid { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trk-eid b { font-size: var(--fs-5); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.trk-eidl { font-size: var(--fs-1); overflow-wrap: anywhere; }
.trk-kind { font: 500 var(--fs-1) var(--mono); color: var(--accent-deep); }
.trk-ehbadge { margin-left: auto; flex: none; }

/* ---------- tabs (house underline-tab, matching .ev-tab in evals.css) ---------- */
.trk-tabs { display: flex; align-items: center; gap: var(--sp-1); height: 38px; border-bottom: 1px solid var(--line); margin-bottom: var(--sp-3); }
.trk-tabs button { position: relative; height: 38px; padding: 0 var(--sp-2); font-weight: 500; color: var(--fg-2); border-radius: 0; display: inline-flex; align-items: center; gap: var(--sp-2); }
.trk-tabs button:hover { color: var(--fg); }
.trk-tabs button.on { color: var(--accent-deep); }
.trk-tabs button.on::after { content: ""; position: absolute; left: var(--sp-2); right: var(--sp-2); bottom: -1px; height: 2px; background: var(--accent); border-radius: var(--r4); }
.trk-tabs .trk-n { font-size: var(--fs-1); color: var(--fg-3); font-weight: 400; font-style: normal; }
.trk-tc { min-width: 0; }

/* ---------- attribution: one avatar + name + "via <source>" trace, shared across proposals, history and forms ---------- */
.trk-attn { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; max-width: 100%; }
.trk-av { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r8); overflow: hidden; background: var(--bg-3); }
.trk-av svg { display: block; }
.trk-attn-b { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.trk-attn-name { font-weight: 600; font-size: var(--fs-3); line-height: 1.3; overflow-wrap: anywhere; }
.trk-via { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: var(--fs-1); color: var(--fg-3); line-height: 1.4; }
.trk-via-v { color: var(--fg-3); }
.trk-via-ref { color: var(--fg-3); overflow-wrap: anywhere; }
.trk-attn-c .trk-av { width: 16px; height: 16px; border-radius: var(--r4); }
.trk-attn-c .trk-attn-name { font-size: var(--fs-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a labelled attribution block as used on the proposal card and the forms footer */
.trk-attn-row { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.trk-attn-role { font: 600 var(--fs-1) var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); flex: none; }
.trk-attn-when { margin-left: auto; color: var(--fg-3); font-size: var(--fs-1); flex: none; }

/* ---------- notes / loading / empty ---------- */
.trk-load { display: flex; align-items: center; gap: var(--sp-2); color: var(--fg-3); font-size: var(--fs-3); padding: var(--sp-3) 0; }
.trk-empty { color: var(--fg-3); font-size: var(--fs-3); padding: var(--sp-3) 0; line-height: 1.5; }
.trk-note { font-size: var(--fs-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r8); background: var(--bg-3); color: var(--fg-2); margin-bottom: var(--sp-2); line-height: 1.5; }
.trk-note.info { background: var(--accent-soft); color: var(--accent-deep); }
.trk-note.err { background: var(--err-soft); color: var(--err); }
.trk-dim { color: var(--fg-3); }

/* ---------- source badges ---------- */
.trk-src { font: 500 var(--fs-1) var(--mono); padding: 1px 7px; border-radius: var(--r-full); text-transform: lowercase; white-space: nowrap; }
.trk-src.s-eval { background: var(--accent-soft); color: var(--accent-deep); }
.trk-src.s-reflection { background: var(--signal-soft); color: var(--signal); }
.trk-src.s-external_api { background: var(--ok-soft); color: var(--ok); }
.trk-src.s-admin { background: var(--warn-soft); color: var(--warn); }
.trk-src.s-annotation { background: var(--accent-soft); color: var(--accent-deep); }
.trk-src.s-proposal { background: var(--signal-soft); color: var(--signal); }
.trk-src.s-commit, .trk-src.s-edit { background: var(--bg-3); color: var(--fg-2); }

/* ---------- proposals tab ---------- */
.trk-pbar { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.trk-pcs { display: flex; flex-direction: column; gap: var(--sp-3); }
.trk-pc { border: 1px solid var(--line); border-radius: var(--r12); padding: var(--sp-3); background: var(--bg); }
.trk-pc.st-pending { border-left: 3px solid var(--warn); }
.trk-pc.st-applied { border-left: 3px solid var(--ok); }
.trk-pc.st-rejected, .trk-pc.st-failed { border-left: 3px solid var(--err); }
.trk-pc-focus { box-shadow: 0 0 0 2px var(--accent); }
.trk-pc-h { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-2); min-width: 0; }
.trk-pc-id { font-size: var(--fs-1); }
.trk-pc-when { color: var(--fg-3); font-size: var(--fs-2); }
.trk-pc-rat { font-size: var(--fs-3); color: var(--fg); line-height: 1.5; margin-bottom: var(--sp-2); }
.trk-pc-lin { margin-bottom: var(--sp-2); }
.trk-pc-lin .row { grid-template-columns: 96px minmax(0, 1fr); }
.trk-h4 { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .04em; color: var(--fg-3); margin: var(--sp-3) 0 var(--sp-1); }
.trk-pc-act { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); min-height: 4px; }
.trk-steps-d { margin-top: var(--sp-2); }
.trk-steps-d summary { cursor: pointer; }
.trk-steps-d .pr-steps { margin-top: var(--sp-1); }
.trk-prev { margin-top: var(--sp-2); }
.trk-prev summary { cursor: pointer; }

/* ---------- diff tab ---------- */
.trk-diffbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.trk-diffbar label { font-size: var(--fs-2); color: var(--fg-3); }
.trk-diffbar select { max-width: 100%; }
.trk-fields .row, .trk-fv { min-width: 0; }
.trk-fv { white-space: pre-wrap; margin: 0; font: var(--fs-2)/1.5 var(--mono); }
.trk-fd { display: flex; flex-direction: column; gap: 2px; }
.trk-fd pre { margin: 0; padding: var(--sp-1) var(--sp-2); border-radius: var(--r8); white-space: pre-wrap; word-break: break-word; font: var(--fs-2)/1.5 var(--mono); }
.trk-fd pre.del { background: var(--err-soft); color: var(--err); }
.trk-fd pre.add { background: var(--ok-soft); color: var(--ok); }

/* history rows become buttons that jump to the diff. A two-line layout (marker + summary, then
   who / via) so a long version marker can never collide with the summary (min-width:0 + ellipsis). */
button.trk-hc { width: 100%; text-align: left; cursor: pointer; }
button.trk-hc:hover { background: var(--bg-3); }
.pr-hist .trk-hc { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-1); }
.trk-hc-top { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.trk-hc .sha { flex: none; }
.trk-hc .su { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.trk-hc-by { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; padding-top: var(--sp-1); border-top: 1px solid var(--line-soft); }
.trk-hc-when { margin-left: auto; flex: none; color: var(--fg-3); font-size: var(--fs-1); }

/* a history row plus its per-row action (agent Rollback / knowledge Revert), stacked under the row */
.trk-hrow { display: flex; flex-direction: column; gap: var(--sp-1); }
.trk-hc-act { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }
.trk-hc-act.confirming { justify-content: flex-start; }
.trk-rb-msg { font-size: var(--fs-2); color: var(--fg-3); line-height: 1.4; margin-right: auto; }

/* agent-snapshot "blame" rows carry an attribution block, so they need more breathing room than line blame */
.pr-blame.trk-snap td { padding: var(--sp-2); vertical-align: middle; }
.pr-blame.trk-snap .cm { width: auto; white-space: nowrap; }
.pr-blame.trk-snap .ln { width: auto; white-space: nowrap; }

/* a touch tighter inside the narrow graph inspector */
.trk-compact .pr-diff, .trk-compact .pr-blame { max-height: 340px; }
.trk-compact .trk-pc { padding: var(--sp-2); }

/* ---------- propose-edit form (in the shared modal) ---------- */
.trk-form { display: flex; flex-direction: column; gap: var(--sp-2); }
.trk-form label { font-size: var(--fs-2); color: var(--fg-3); margin-top: var(--sp-1); }
.trk-form textarea, .trk-form select { width: 100%; border-radius: var(--r8); background: var(--bg); box-shadow: 0 0 0 1px var(--line-2); color: var(--fg); padding: var(--sp-2); font: var(--fs-3)/1.5 var(--font); }
.trk-form textarea.mono { font-family: var(--mono); font-size: var(--fs-2); }
.trk-form-act { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); }
.trk-form-err { color: var(--err); font-size: var(--fs-2); min-height: 16px; }

/* ---------- graph: inspector proposal alert + overlay legend/toggle ---------- */
.trk-alert { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r8); background: var(--warn-soft); color: var(--warn); font-size: var(--fs-2); margin-bottom: var(--sp-3); }
.trk-alert .grow { flex: 1; }
.trk-alert .btn { color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.g-insp-trk { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }

.ov.tr { top: var(--sp-3); right: var(--sp-3); flex-direction: column; align-items: stretch; gap: var(--sp-1); padding: var(--sp-2); }
.g-leg-tog { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2); color: var(--fg-2); padding: 2px 4px; border-radius: var(--r8); }
.g-leg-tog:hover { background: var(--bg-3); }
.g-leg-tog .g-sw { width: 12px; height: 12px; border-radius: var(--r-full); box-sizing: border-box; border: 2px dashed var(--warn); flex: none; }
.g-leg-tog .g-ck { margin-left: auto; width: 26px; height: 15px; border-radius: var(--r-full); background: var(--line-2); position: relative; transition: background .15s; flex: none; }
.g-leg-tog .g-ck::after { content: ''; position: absolute; top: 1.5px; left: 1.5px; width: 12px; height: 12px; border-radius: var(--r-full); background: var(--bg); transition: left .15s; }
.g-leg-tog.on .g-ck { background: var(--warn); }
.g-leg-tog.on .g-ck::after { left: 12.5px; }
.g-leg-cap { font-size: var(--fs-1); color: var(--fg-3); padding: 0 4px; }

/* ---- Lineage visualiser — restyled to the workflow-graph vocabulary (workflow_graph.js / workflows.css): typed cards
   (a .ti2-style icon tile tinted with a shared --wf-* hue + a mono-uppercase .wf-ty chip), a dotted canvas, thin
   smoothstep connectors in the --wf-edge ink, and a .wf-leg legend. Each lineage type maps onto a workflow type
   (proposal→tool, evaluation→fan-out, dataset→branch, form→gate, annotation→agent) so every colour is a reused
   token — no bespoke ink. The grouped list beneath reuses the same chips/hues, kept quiet and flat. ---- */
.trk-lineage { margin: var(--sp-3) 0 var(--sp-2); }
.trk-lhint { margin: -2px 0 var(--sp-2); }

/* dotted canvas, like .wfg; a single quiet 1px frame instead of the old soft-shadow panel */
.trk-lgraph { position: relative; border-radius: var(--r16); background-color: var(--bg-2);
  background-image: radial-gradient(var(--line-2) 1px, transparent 1.2px); background-size: 20px 20px;
  box-shadow: inset 0 0 0 1px var(--line); padding: var(--sp-4) var(--sp-5); overflow: hidden; }
.trk-llinks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
/* thin, quiet smoothstep connectors — the workflow edge ink, no per-type colour */
.trk-lk { fill: none; stroke: var(--wf-edge); stroke-width: 1.5; opacity: .85; stroke-linecap: round; stroke-linejoin: round; }
.trk-lgrid { position: relative; z-index: 1; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--sp-3) var(--sp-5); align-items: center; }
.trk-lhubwrap { display: flex; }
.trk-lcol { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }

/* typed cards: flat token-based card like .wfn (var(--bg) + --wf-card-sh), not a soft-shadow card */
.trk-lhub, .trk-lnode { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-width: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r12); background: var(--bg); box-shadow: var(--wf-card-sh); text-align: left; }
.trk-lhub { box-shadow: 0 0 0 1.5px var(--wf-tool); }                         /* the anchor: distinguished but minimal, in the proposal hue */
.trk-lnode { cursor: pointer; transition: box-shadow .15s; }
.trk-lnode:hover:not([disabled]), .trk-lnode:focus-visible { box-shadow: 0 0 0 1px var(--line-2), 0 6px 16px -8px rgba(11, 16, 35, .25); }
.trk-lnode:focus-visible { outline: none; }
.trk-lnode-off, .trk-lnode[disabled] { opacity: .55; cursor: not-allowed; }

/* icon tile — the .ti2 recipe (22×22, white glyph) tinted with a shared --wf-* hue via a .bg-* class */
.trk-lti { width: 22px; height: 22px; border-radius: var(--r8); display: grid; place-items: center; color: #fff; flex: none; }
.trk-lti svg { width: 12px; height: 12px; }
.trk-lti svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.trk-lbody { min-width: 0; display: flex; flex-direction: column; gap: 1px; align-items: flex-start; }
.trk-lbody > .wf-ty { align-self: flex-start; margin-bottom: 1px; }
.trk-lt { max-width: 100%; font-size: var(--fs-3); font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-lsub { max-width: 100%; font: var(--fs-1) var(--mono); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 540px) { .trk-lgrid { grid-template-columns: 104px minmax(0, 1fr); gap: var(--sp-3) var(--sp-3); } .trk-lgraph { padding: var(--sp-3); } }

/* minimal legend, in the .wf-leg style but quiet inside the card (no toolbar frame) */
.trk-lleg { flex-wrap: wrap; white-space: normal; overflow: visible; border-bottom: 0; background: transparent; min-height: 0; padding: var(--sp-2) 0 0; gap: var(--sp-2) var(--sp-3); }
.trk-lleg > span { display: inline-flex; align-items: center; }
.trk-lleg .ln { display: inline-block; width: 16px; height: 0; margin-right: var(--sp-1); border-top: 1.5px solid var(--wf-edge); vertical-align: middle; }

/* grouped list beneath — the same chips/hues, kept quiet and flat */
.trk-llist { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.trk-lgroup-h { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.trk-lgroup-l { font-size: var(--fs-2); color: var(--fg-2); }
.trk-lrow { display: flex; align-items: center; gap: var(--sp-2); width: 100%; text-align: left; padding: var(--sp-2) var(--sp-3); border-radius: var(--r8); background: var(--bg); box-shadow: var(--wf-card-sh); margin-bottom: var(--sp-1); cursor: pointer; transition: box-shadow .15s; }
.trk-lrow:last-child { margin-bottom: 0; }
.trk-lrow:hover:not([disabled]), .trk-lrow:focus-visible { box-shadow: 0 0 0 1px var(--line-2), 0 6px 16px -8px rgba(11, 16, 35, .25); }
.trk-lrow:focus-visible { outline: none; }
.trk-lrow-dot { width: 8px; height: 8px; border-radius: var(--r-full); flex: none; }
.trk-lrow-b { min-width: 0; display: flex; flex-direction: column; gap: 1px; flex: 1; }
.trk-lrow-t { font-size: var(--fs-3); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-lrow-s { font-size: var(--fs-1); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-lrow-go { font-size: var(--fs-1); color: var(--accent-deep); flex: none; white-space: nowrap; }
.trk-lrow-off { opacity: .55; cursor: not-allowed; }
.trk-lrow-off .trk-lrow-go { color: var(--fg-3); }

/* evidence picker inside the "Propose edit" modal */
.trk-ev { margin: var(--sp-2) 0; border: 1px solid var(--line); border-radius: var(--r8); padding: var(--sp-2) var(--sp-3); }
.trk-ev summary { cursor: pointer; font-size: var(--fs-3); font-weight: 600; color: var(--fg-2); }
.trk-ev[open] summary { margin-bottom: var(--sp-2); }
.trk-ev code { font: var(--fs-1) var(--mono); background: var(--bg-3); padding: 1px 4px; border-radius: var(--r4); }