/* agents.js + agentdetail.js: the #/agents fleet lens, and fleet.js's
 * avatar (also on the Work page's Agents mode). The head is app.css's
 * .page-head (dom.js pageHead). The summary's tiles and its org chart (the firm
 * over one box per work stream), the filter bar, then per work stream and
 * venture a grid of agent cards, each opening its detail in place. Ink and
 * surface tokens only; attention reads in --sv-attention, a failure or a
 * block in --sv-danger; no green. Cards, tiles and chips are fill steps off
 * the page (brand.css --sv-fill-*): a selection is a darker fill, never a
 * border. Light and dark come from the tokens. */

.transcript:has(> .agents-page) { --reading: 80rem; }
.agents-page { padding-bottom: calc(var(--sv-space-8) * 1.5 + env(safe-area-inset-bottom, 0px)); }
/* The head is app.css's .page-head; the parts under it bring their own top margin. */
.agents-page > .page-head { margin-bottom: var(--sv-space-2); }

/* The face: a persona's photo or initials, an internal agent's mark. */
.fleet-avatar { --size: 40px; position: relative; display: inline-grid; flex: none; place-items: center; width: var(--size); height: var(--size); overflow: hidden; border-radius: 50%; background: var(--sv-fill-3); color: var(--sv-ink); font-weight: 600; font-size: calc(var(--size) * 0.38); line-height: 1; }
.fleet-avatar[data-kind="persona"] { background: var(--sv-ink); color: var(--sv-surface); }
.fleet-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fleet-avatar .icon { width: 55%; height: 55%; color: var(--sv-ink-secondary); }

/* Summary: tiles. */
.agents-summary { display: grid; gap: var(--sv-space-3); margin-top: var(--sv-space-3); }
.agents-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: var(--sv-space-2); }
.agents-tile { display: grid; gap: 2px; padding: var(--sv-space-3); border-radius: calc(var(--sv-radius) * 1.5); background: var(--sv-fill-2); min-width: 0; }
.agents-tile-value { font-size: var(--sv-text-h3); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; }
.agents-tile-label { font-size: var(--ui-meta); color: var(--sv-ink-secondary); }
.agents-tile-note { font-size: var(--ui-meta); color: var(--sv-ink-tertiary); }
.agents-tile[data-tone="attention"] .agents-tile-value { color: var(--sv-attention); }

/* Summary: the org chart, the firm over its work streams. */
.agents-chart { display: grid; justify-items: center; gap: 0; }
.agents-chart-root { position: relative; display: grid; justify-items: center; gap: 2px; padding: var(--sv-space-2) var(--sv-space-4); border-radius: var(--sv-radius); background: var(--sv-ink); color: var(--sv-surface); font-size: var(--ui-meta); }
.agents-chart-root b { font-size: var(--ui-text); }
.agents-chart-root::after { content: ""; position: absolute; top: 100%; left: 50%; width: var(--sv-hairline-w); height: var(--sv-space-3); background: var(--sv-hairline-strong); }
.agents-chart-streams { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--sv-space-2); width: 100%; margin-top: var(--sv-space-3); padding-top: var(--sv-space-3); border-top: var(--sv-hairline-w) solid var(--sv-hairline-strong); }
.agents-stream-box { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px var(--sv-space-2); padding: var(--sv-space-3); border: 0; border-radius: calc(var(--sv-radius) * 1.5); background: var(--sv-fill-2); color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; transition: background var(--sv-dur-instant) var(--sv-ease-out); }
.agents-stream-box::before { content: ""; position: absolute; bottom: 100%; left: 50%; width: var(--sv-hairline-w); height: var(--sv-space-3); background: var(--sv-hairline-strong); }
.agents-stream-box:hover { background: var(--sv-fill-3); }
.agents-stream-box[aria-pressed="true"] { background: var(--sv-fill-4); }
.agents-stream-box:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 2px; }
.agents-stream-box[data-stream="unassigned"] { background: var(--sv-fill-1); }
.agents-stream-box[data-empty="true"] { background: transparent; color: var(--sv-ink-tertiary); }
.agents-stream-box[data-empty="true"] .agents-meter { display: none; }
.agents-stream-name { grid-column: 1 / -1; font-weight: 600; }
.agents-stream-count { font-size: var(--sv-text-h3); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.agents-stream-unit { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.agents-meter { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label count" "track track"; align-items: center; gap: 2px var(--sv-space-2); font-size: var(--ui-meta); color: var(--sv-ink-secondary); }
.agents-meter-label { grid-area: label; }
.agents-meter b { grid-area: count; text-align: right; font-variant-numeric: tabular-nums; color: var(--sv-ink); }
.agents-meter-track { grid-area: track; display: block; height: 6px; border-radius: 3px; background: var(--sv-fill-3); overflow: hidden; }
.agents-meter-fill { display: block; height: 100%; border-radius: 3px; background: var(--sv-ink-secondary); }
.agents-meter[data-kind="external"] .agents-meter-fill { background: var(--sv-ink); }
.agents-meter[data-kind="attention"] .agents-meter-fill { background: var(--sv-attention); }
.agents-stream-spend { grid-column: 1 / -1; margin-top: 4px; color: var(--sv-ink-secondary); font-size: var(--ui-meta); font-variant-numeric: tabular-nums; }
.agents-stream-box[data-empty="true"] .agents-stream-spend { display: none; }
.agents-venture-spend { margin-left: auto; color: var(--sv-ink-tertiary); font-weight: 400; font-variant-numeric: tabular-nums; }
.agents-pick { color: var(--sv-ink); font-weight: 600; }
.agents-stream-ventures { grid-column: 1 / -1; margin-top: 2px; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The filter bar. */
.agents-bar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); margin-top: var(--sv-space-3); padding: var(--sv-space-2) 0; background: var(--sv-surface); border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); }
.agents-chips, .agents-bar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.agents-bar-tools { margin-left: auto; }
.agents-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 var(--sv-space-3); border: 0; border-radius: 999px; background: var(--sv-fill-1); color: var(--sv-ink-secondary); font: inherit; font-size: var(--ui-meta); cursor: pointer; }
.agents-chip:hover { background: var(--sv-fill-3); color: var(--sv-ink); }
.agents-chip[aria-pressed="true"] { background: var(--sv-ink); color: var(--sv-surface); }
.agents-chip .icon { width: 14px; height: 14px; }
.agents-needs[aria-pressed="false"] .icon { color: var(--sv-attention); }
.agents-venture, .agents-find { min-height: 30px; padding: 0 var(--sv-space-2); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: var(--sv-radius); background: var(--sv-surface); color: var(--sv-ink); font: inherit; font-size: var(--ui-meta); max-width: 100%; }
.agents-find { width: 12rem; }

/* The list: work stream, venture, agents. */
.agents-body { display: grid; gap: var(--sv-space-4); margin-top: var(--sv-space-3); }
.agents-stream { display: grid; gap: var(--sv-space-2); }
.agents-stream-head { display: flex; align-items: baseline; gap: var(--sv-space-2); margin: 0; font-size: var(--sv-text-h4); }
.agents-venture-group { display: grid; gap: var(--sv-space-2); }
.agents-venture-head { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--sv-ink-secondary); font-size: var(--ui-meta); font-weight: 600; }
.agents-venture-head a { color: inherit; }
.agents-venture-head .icon { width: 14px; height: 14px; }
.agents-note { margin: 0; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.agents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--sv-space-2); align-items: start; }

.agents-card { display: grid; gap: var(--sv-space-2); min-width: 0; padding: var(--sv-space-3); border-radius: calc(var(--sv-radius) * 1.5); background: var(--sv-fill-2); cursor: pointer; transition: background var(--sv-dur-instant) var(--sv-ease-out); }
.agents-card:hover { background: var(--sv-fill-3); }
.agents-card:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 2px; }
.agents-card[aria-expanded="true"] { background: var(--sv-fill-4); }
.agents-top { display: flex; align-items: center; gap: var(--sv-space-2) var(--sv-space-3); min-width: 0; }
.agents-who { display: grid; flex: 1 1 8rem; min-width: 0; }
.agents-name { font-weight: 600; font-size: var(--sv-text-h4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agents-title { color: var(--sv-ink-secondary); font-size: var(--ui-meta); overflow-wrap: anywhere; }
.agents-flags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.agents-badge { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: var(--sv-fill-2); color: var(--sv-ink-secondary); font-size: var(--ui-meta); white-space: nowrap; }
.agents-flag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--sv-attention) 14%, transparent); color: var(--sv-attention); font-size: var(--ui-meta); font-weight: 600; font-variant-numeric: tabular-nums; }
.agents-flag .icon { width: 13px; height: 13px; }
.agents-strip { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--sv-fill-3); }
.agents-strip i { display: block; min-width: 3px; }
.agents-strip [data-k="done"], .agents-task[data-status="done"] .agents-task-dot { background: var(--sv-ink); }
.agents-strip [data-k="running"], .agents-task[data-status="running"] .agents-task-dot { background: var(--sv-ink-secondary); }
.agents-strip [data-k="review"], .agents-task[data-status="review"] .agents-task-dot { background: var(--sv-attention); }
.agents-strip [data-k="blocked"], .agents-task[data-status="blocked"] .agents-task-dot { background: var(--sv-danger); }
.agents-strip [data-k="planned"], .agents-task[data-status="planned"] .agents-task-dot { background: var(--sv-hairline-strong); }
.agents-line { margin: 0; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-variant-numeric: tabular-nums; }

/* The detail, under its card across the grid. */
.agents-detail { grid-column: 1 / -1; display: grid; gap: var(--sv-space-3); padding: var(--sv-space-4); border-radius: calc(var(--sv-radius) * 1.5); background: var(--sv-fill-1); min-width: 0; }
.agents-detail-head { display: flex; align-items: center; gap: var(--sv-space-3); }
.agents-detail-name { font-size: var(--sv-text-h3); font-weight: 600; }
.agents-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--sv-space-3); margin: 0; font-size: var(--ui-meta); }
.agents-facts dt { color: var(--sv-ink-tertiary); }
.agents-facts dd { margin: 0; overflow-wrap: anywhere; }
.agents-desc { margin: 0; color: var(--sv-ink-secondary); font-size: var(--ui-meta); max-width: 80ch; }
/* Company view / Agent view (agents.js): the Agent view card is read-only, capabilities and contact only. */
.agents-lens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sv-space-2); }
.agents-profile { cursor: default; }
.agents-profile:hover { background: var(--sv-fill-2); }
.agents-profile .agents-top > .agents-badge { margin-left: auto; align-self: start; }
.agents-caps, .agents-contact { display: grid; gap: 6px; min-width: 0; }
.agents-cap-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.agents-cap { padding: 1px 8px; border-radius: 999px; background: var(--sv-fill-2); color: var(--sv-ink-secondary); font-size: var(--ui-meta); overflow-wrap: anywhere; }
.agents-contact .agents-address { text-decoration: none; justify-self: start; max-width: 100%; overflow-wrap: anywhere; }
.agents-addresses { display: flex; flex-wrap: wrap; gap: 6px; }
.agents-address { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 var(--sv-space-3); border: 0; border-radius: 999px; background: var(--sv-fill-2); color: var(--sv-ink-secondary); font: inherit; font-size: var(--ui-meta); cursor: pointer; overflow-wrap: anywhere; }
.agents-address:hover { background: var(--sv-fill-4); }
.agents-address .icon { width: 14px; height: 14px; }
.agents-from { color: var(--sv-ink-tertiary); }
.agents-address[data-copied="true"]::after { content: "Copied"; color: var(--sv-ink); font-weight: 600; }
.agents-part { display: grid; gap: var(--sv-space-2); padding-top: var(--sv-space-3); border-top: var(--sv-hairline-w) solid var(--sv-hairline); min-width: 0; }
.agents-part-head { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--ui-text); }
.agents-part-head .icon { width: 16px; height: 16px; color: var(--sv-ink-secondary); }
.agents-part.is-attention .agents-part-head, .agents-part.is-attention .agents-part-head .icon { color: var(--sv-attention); }
.agents-asks, .agents-goals, .agents-tasks, .agents-threads { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.agents-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sv-space-2); padding: var(--sv-space-2); border-radius: var(--sv-radius); background: color-mix(in srgb, var(--sv-attention) 8%, transparent); font-size: var(--ui-meta); }
.agents-ask:is([data-kind="blocked"], [data-kind="failed"]) { background: color-mix(in srgb, var(--sv-danger) 8%, transparent); }
.agents-ask-text { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
.agents-ask-go { color: var(--sv-ink); font-weight: 600; }
.agents-ask-do { min-height: 28px; }
.agents-when { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); white-space: nowrap; }
.agents-warn { color: var(--sv-danger); }
.agents-goal { display: grid; gap: 2px; }
.agents-goal-title { color: var(--sv-ink); font-weight: 600; font-size: var(--ui-text); }
.agents-goal-meta { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.agents-tasks { padding-left: var(--sv-space-3); }
.agents-task { display: flex; align-items: center; gap: var(--sv-space-2); min-width: 0; font-size: var(--ui-meta); }
.agents-task a { flex: 1 1 auto; min-width: 0; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agents-task-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sv-hairline-strong); }
.agents-task-status { flex: none; color: var(--sv-ink-tertiary); }
.agents-more { font-size: var(--ui-meta); color: var(--sv-ink-secondary); }
.agents-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: var(--sv-space-2); }
.agents-stat { display: grid; gap: 2px; padding: var(--sv-space-2); border-radius: var(--sv-radius); background: var(--sv-fill-2); }
.agents-stat b { font-size: var(--sv-text-h4); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.agents-stat span { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.agents-people-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--sv-space-2); }
.agents-people-col, .agents-peers { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.agents-people-head { flex-basis: 100%; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.agents-peers .agents-people-head { flex-basis: auto; margin-right: var(--sv-space-2); }
.agents-person, .agents-peer { padding: 1px 8px; border-radius: 999px; background: var(--sv-fill-2); color: var(--sv-ink-secondary); font: inherit; font-size: var(--ui-meta); border: 0; }
.agents-peer { cursor: pointer; }
.agents-peer:hover:not(:disabled) { background: var(--sv-fill-4); color: var(--sv-ink); }
.agents-threads li { display: flex; align-items: center; gap: var(--sv-space-2); min-width: 0; }
.agents-thread { display: flex; flex: 1 1 auto; align-items: baseline; gap: var(--sv-space-2); min-width: 0; padding: 4px var(--sv-space-2); border-radius: var(--sv-radius); color: inherit; text-decoration: none; }
.agents-thread:hover { background: var(--sv-fill-2); }
.agents-subject { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: var(--ui-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agents-thread-link { flex: none; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.agents-bench { width: 100%; border-collapse: collapse; font-size: var(--ui-meta); }
.agents-bench th { text-align: left; color: var(--sv-ink-tertiary); font-weight: 500; padding: 4px var(--sv-space-2) 4px 0; border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); }
.agents-bench td { padding: 6px var(--sv-space-2) 6px 0; vertical-align: top; border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); }
.agents-bench tr[data-reading="below"] td:last-child { color: var(--sv-attention); font-weight: 600; }
.agents-bench tr[data-reading="above"] td:last-child, .agents-bench tr[data-reading="at"] td:last-child { color: var(--sv-ink); font-weight: 600; }
.agents-source { color: var(--sv-ink-tertiary); }

@media (max-width: 640px) {
  .agents-chart-streams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agents-stream-box { padding: var(--sv-space-2); }
  .agents-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agents-bar { position: static; }
  .agents-bar-tools { margin-left: 0; width: 100%; }
  .agents-find, .agents-venture { flex: 1 1 8rem; width: auto; }
  .agents-detail { padding: var(--sv-space-3); }
  .agents-bench th:nth-child(4), .agents-bench td:nth-child(4) { display: none; }
}
/* Performance review (agentdetail.js): its KPI rows read as the benchmark table's (tr[data-reading]). */
.agents-review .agents-stat[data-reading="below"] b { color: var(--sv-attention); }
.agents-review-kpis td:first-child a { overflow-wrap: anywhere; }