/* Agent performance in the People & agents agent view (web/agent-evals.js). Monochrome;
   colour only for state (attention, danger). Sized by its own container, so the directory's
   detail pane and a phone screen get the same component. */
.ae { container-type: inline-size; --ae-meta: var(--workspace-ui-meta, var(--sv-text-small)); }
.ae h3 { margin: 0; }
.ae h4 { margin: 0; font-size: var(--sv-text-body); font-weight: 500; }
.ae p { margin: 0; }
.ae-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ae-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sv-space-3); margin-bottom: var(--sv-space-3); }
.ae-head .directory-muted, .ae-block-head .directory-muted, .ae-legend, .ae-foot { font-size: var(--ae-meta); }

.ae-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sv-space-2); }
.ae-tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--sv-space-4); }
.ae-tile {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: var(--sv-space-3);
  border: 1px solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  background: var(--sv-surface-raised);
  color: var(--sv-ink);
  font: inherit;
  text-align: left;
}
button.ae-tile { cursor: pointer; }
button.ae-tile:hover { background: var(--workspace-hover); }
.ae-tile span, .ae-tile em { overflow: hidden; color: var(--sv-ink-secondary); font-size: var(--ae-meta); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.ae-tile strong { font-size: var(--sv-text-h3); font-weight: 500; line-height: 1.2; }

.ae-tabs { margin: var(--sv-space-4) 0 var(--sv-space-2); max-width: 100%; overflow-x: auto; }
.ae-panel { min-height: 4rem; }
.ae-panel > .directory-muted { padding: var(--sv-space-3) 0; }
.ae-foot { margin-top: var(--sv-space-4) !important; }

.ae-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sv-space-2); padding: var(--sv-space-2) 0; }
.ae-actions { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); }
.ae-actions > button { min-height: var(--workspace-control-height, 2rem); padding: 0 var(--sv-space-3); }

.ae-tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.375rem;
  padding: 0 var(--sv-space-2);
  border: 1px solid var(--sv-hairline);
  border-radius: 999px;
  color: var(--sv-ink-secondary);
  font-size: var(--ae-meta);
  white-space: nowrap;
}
.ae-tag[data-state="attention"] { border-color: currentColor; color: var(--sv-attention); }
.ae-tag[data-state="danger"] { border-color: currentColor; color: var(--sv-danger); }

.ae-block { margin-top: var(--sv-space-5); }
.ae-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sv-space-3); padding-bottom: var(--sv-space-2); border-bottom: 1px solid var(--sv-hairline); }
.ae-plain { margin: 0; padding: 0; list-style: none; }
.ae details > summary { list-style: none; cursor: pointer; }
.ae details > summary::-webkit-details-marker { display: none; }
.ae details > summary:hover { background: var(--workspace-hover); }

.ae-stages > li { border-bottom: 1px solid var(--sv-hairline); }
.ae-stage > summary {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sv-space-3);
  padding: var(--sv-space-3) var(--sv-space-1);
  border-radius: var(--sv-radius);
}
.ae-n { color: var(--sv-ink-tertiary); font-size: var(--ae-meta); line-height: 1.6rem; }
.ae-stage-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sv-space-1); }
.ae-stage-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); }
.ae-stage-title strong { font-weight: 500; }
.ae-chips { display: flex; flex-wrap: wrap; gap: var(--sv-space-1); }
.ae-chips code, .ae-transcript {
  font-family: var(--sv-font-mono);
  font-size: var(--ae-meta);
}
.ae-chips code {
  max-width: 100%;
  overflow: hidden;
  padding: 0 var(--sv-space-2);
  border-radius: var(--sv-radius);
  background: var(--sv-surface-sunken);
  color: var(--sv-ink-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ae-stage-meters { display: grid; gap: var(--sv-space-1); justify-items: end; }
.ae-stage-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sv-space-1); padding: 0 var(--sv-space-1) var(--sv-space-3) calc(1.5rem + var(--sv-space-4)); overflow-wrap: anywhere; }

.ae-meter { display: inline-flex; align-items: center; gap: var(--sv-space-2); font-size: var(--ae-meta); }
.ae-meter-label { color: var(--sv-ink-tertiary); }
.ae-track { position: relative; width: 4rem; height: 0.375rem; overflow: hidden; border-radius: 999px; background: var(--sv-surface-sunken); }
.ae-track::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--ae-fill, 0%); border-radius: inherit; background: var(--sv-ink-secondary); }
.ae-meter .ae-num { min-width: 3.25rem; text-align: right; }

.ae-legend { display: flex; flex-wrap: wrap; gap: var(--sv-space-1) var(--sv-space-3); padding: var(--sv-space-2) 0; }
.ae-legend span { display: inline-flex; align-items: center; gap: var(--sv-space-1); }
.ae-dots { display: inline-flex; flex: none; flex-wrap: nowrap; gap: 3px; }
.ae-dot { display: inline-block; flex: none; width: 0.625rem; height: 0.625rem; border: 1px solid var(--sv-hairline-strong); border-radius: 50%; }
.ae-dot[data-state="done"] { border-color: var(--sv-ink); background: var(--sv-ink); }
.ae-dot[data-state="partial"] { border-color: var(--sv-ink-secondary); background: var(--sv-ink-tertiary); }
.ae-dot[data-state="unproven"] { border-color: var(--sv-attention); background: var(--sv-attention); }
.ae-dot[data-state="skipped"] { border-color: var(--sv-danger); }
.ae-dot[data-state="unknown"] { border-style: dashed; }

.ae-rows > li { border-bottom: 1px solid var(--sv-hairline); }
.ae-row { display: flex; align-items: center; gap: var(--sv-space-3); min-height: 2.75rem; padding: var(--sv-space-2) var(--sv-space-1); border-radius: var(--sv-radius); }
.ae-row-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ae-flags { display: inline-flex; flex-wrap: wrap; gap: var(--sv-space-1); }
.ae-goal-numbers { color: var(--sv-ink-secondary); font-size: var(--ae-meta); }
.ae-transcripts { padding: 0 var(--sv-space-1) var(--sv-space-3); }
.ae-transcript {
  max-height: 24rem;
  margin: 0;
  overflow: auto;
  padding: var(--sv-space-3);
  border-radius: var(--sv-radius);
  background: var(--sv-surface-sunken);
  color: var(--sv-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ae-fold { margin-top: var(--sv-space-5); }
.ae-fold > summary { padding: var(--sv-space-2) var(--sv-space-1); border-radius: var(--sv-radius); color: var(--sv-ink-secondary); }
.ae-fold .ae-plain { display: grid; gap: var(--sv-space-1); padding: var(--sv-space-2) var(--sv-space-1); }
.ae-fold-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sv-space-1); padding: var(--sv-space-2) var(--sv-space-1) 0; }
.ae-fold-block strong { font-weight: 500; }
.ae-fold .ae-plain li::before { content: "·"; margin-right: var(--sv-space-2); color: var(--sv-ink-tertiary); }

/* Admin dialogs live in <body>, outside the directory's own base rules. */
.ae-dialog {
  box-sizing: border-box;
  width: min(44rem, calc(100vw - 2rem));
  max-height: min(90dvh, 60rem);
  padding: 0;
  border: 1px solid var(--sv-hairline);
  border-radius: calc(var(--sv-radius, 8px) * 1.5);
  background: var(--sv-surface-raised);
  color: var(--sv-ink);
  box-shadow: var(--workspace-panel-shadow);
  font-family: var(--sv-font-sans);
  font-size: var(--sv-text-body);
  line-height: var(--sv-leading-body);
}
.ae-dialog *, .ae-dialog *::before, .ae-dialog *::after { box-sizing: border-box; }
.ae-dialog::backdrop { background: rgb(0 0 0 / .32); }
.ae-dialog button, .ae-dialog input, .ae-dialog textarea { font: inherit; }
.ae-dialog p, .ae-dialog h2 { margin: 0; }
.ae-dialog :focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 2px; }
.ae-form { display: grid; gap: var(--sv-space-4); padding: var(--sv-space-5); }
.ae-form h2 { font-size: var(--sv-text-h3); font-weight: 500; letter-spacing: var(--sv-tracking-heading); }
.ae-form input:not([type="checkbox"]) {
  width: 100%;
  min-height: 2.5rem;
  padding: 0 var(--sv-space-3);
  border: 1px solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  background: var(--sv-surface);
  color: var(--sv-ink);
}
.ae-error { color: var(--sv-danger); }
.ae-dialog-actions { justify-content: flex-end; margin-top: 0; }
.ae-fieldset { display: grid; gap: var(--sv-space-3); margin: 0; padding: 0; border: 0; }
.ae-fieldset legend { margin-bottom: var(--sv-space-2); padding: 0; color: var(--sv-ink-secondary); font-size: var(--sv-text-small); }
.ae-fieldset > button { justify-self: start; }
.ae-edit-stages { display: grid; gap: var(--sv-space-3); }
.ae-edit-stage { display: grid; gap: var(--sv-space-2); padding: var(--sv-space-3); border: 1px solid var(--sv-hairline); border-radius: var(--sv-radius); }
.ae-edit-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); }
.ae-edit-top input[name="name"] { flex: 1 1 12rem; width: auto; }
.ae-edit-top button { min-height: 2.25rem; padding: 0 var(--sv-space-3); }
.ae-check { display: inline-flex; align-items: center; gap: var(--sv-space-1); color: var(--sv-ink-secondary); }
.ae-edit-stage textarea[name="evidence"] { font-family: var(--sv-font-mono); }
.ae-proposal { display: grid; gap: var(--sv-space-2); }
.ae-proposal:empty { display: none; }
.ae-diff { display: grid; gap: var(--sv-space-1); }
.ae-diff li { display: flex; align-items: center; justify-content: space-between; gap: var(--sv-space-2); padding: var(--sv-space-1) 0; border-bottom: 1px solid var(--sv-hairline); }

@container (max-width: 34rem) {
  .ae-goal-meta { margin-left: 0; }
  .ae-tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ae-tile { padding: var(--sv-space-2); }
  .ae-tile strong { font-size: var(--sv-text-h4); }
  .ae-stage > summary { grid-template-columns: 1.25rem minmax(0, 1fr); }
  .ae-stage-meters { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--sv-space-1) var(--sv-space-4); }
  .ae-track { width: 3rem; }
  .ae-meter-label { white-space: nowrap; }
  .ae-tile span, .ae-tile em { white-space: normal; }
  .ae-stage-body { padding-left: calc(1.25rem + var(--sv-space-4)); }
}
@container (max-width: 28rem) {
  .ae-row { flex-wrap: wrap; row-gap: var(--sv-space-1); }
  .ae-row-title { flex-basis: 100%; }
}
@media (max-width: 760px), (pointer: coarse) {
  .ae-actions > button, .ae-edit-top button, .ae-dialog-actions button { min-height: 2.75rem; }
  .ae-form input:not([type="checkbox"]), .ae-form textarea { font-size: max(1rem, 16px); }
}
/* KPI rows: the goal gets its own line; flags, numbers and the meter sit under it. */
.ae-goal { flex-wrap: wrap; row-gap: var(--sv-space-1); }
.ae-goal .ae-row-title { flex-basis: 100%; }
.ae-goal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); margin-left: auto; }