/* ==========================================================================
   Agents — the learning loop's control surface (Docket-hybrid register,
   RULED 2026-07-18; craft pass 2026-07-19 after Andrew rejected the first
   finish: "not polished or clean unlike prior designs"). The register stays
   (case rows, № ordinals, machine-speech meta, evidence-first rail); the
   finish now speaks Home's language — card grammar for every zone, the
   2fr/1fr page grid (cols() from home.js), shared pill vocabulary for
   stamps, and the awaiting-human purple at Home's dosage (spine + dot),
   never as headline text or outlined boxes.
   Scoped to .agents-page. Touch-scale blocks in components/row/shell css
   apply on top; this file only adds what the shared system lacks.
   ========================================================================== */

.agents-page { min-width: 0; }

/* ---------- zone cards (shared header grammar, Home parity) ---------- */
.ag-zone { overflow: hidden; }
.ag-zone-head {
  /* ONE header grammar (critic-mobile #4, backed by the sizing/spacing
     reject): title row, then subtitle, then provenance on its own line —
     Home's stacked pattern; never title-vs-provenance side-by-side. */
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--aos-border-subtle);
  min-width: 0;
}
.ag-zone-title { font-size: 20px; font-weight: 600; color: var(--aos-text-primary); margin: 0; } /* h2 element; Home-parity 20px */
.ag-zone-sub {
  font-family: var(--aos-font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--aos-text-tertiary);
  margin-top: 3px;
}
.ag-provenance {
  font-family: var(--aos-font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--aos-text-tertiary); /* information-bearing (the honesty layer) — clears 4.5:1 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}

/* ---------- pulse card ---------- */
.ag-pulse {
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--aos-font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--aos-text-tertiary);
}
.ag-pulse-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ag-pulse-row.lead { align-items: center; }
.ag-pulse-lead {
  font-size: 15px;
  font-weight: 600;
  font-family: var(--aos-font-sans);
  color: var(--aos-text-primary);
}
.ag-dot-awaiting { background: var(--aos-state-awaiting-human); flex-shrink: 0; }

/* ---------- docket rows ---------- */
.ag-case {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1px 12px;
  align-items: center;
  padding: 10px 16px 10px 18px;
  border-bottom: 1px solid var(--aos-border-subtle);
  position: relative;
  cursor: pointer;
  min-height: 44px;
}
.ag-case:last-child { border-bottom: none; }
.ag-case:hover { background: var(--aos-bg-surface-2); }
.ag-case:focus-visible { outline: none; box-shadow: inset var(--nfn-shadow-focus); }
/* Per-case docket spine (inset, not a continuous rail) whose color is DATA —
   same needsRuling predicate as the stamp: awaiting-human purple = needs
   your ruling, success = ruled, border-strong = pre-gate era. This spine and
   the pulse dot are the page's ONLY full-strength state color (dosage rule,
   craft pass 2026-07-19). */
.ag-case::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--aos-state-awaiting-human);
}
.ag-case[data-vs="ruled"]::before { background: var(--aos-status-success); }
.ag-case[data-vs="pregate"]::before { background: var(--aos-border-strong); }
.ag-case[data-vs="ruled"] { opacity: 0.55; }
.ag-case[data-vs="ruled"]:hover, .ag-case[data-vs="ruled"]:focus-visible { opacity: 1; }
.ag-case-no {
  font-family: var(--aos-font-mono);
  font-size: 11px;
  color: var(--aos-text-tertiary);
  align-self: start;
  padding-top: 3px;
  min-width: 30px;
}
.ag-case-body { min-width: 0; }
.ag-case-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--aos-text-primary);
  /* Long packet titles are sentences; two lines is reading, more is noise.
     The rail carries the full packet — the row only has to be findable. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ag-case-meta {
  font-family: var(--aos-font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--aos-text-tertiary);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-empty { padding: 18px 16px; font-size: 13px; color: var(--aos-text-tertiary); }

/* ---------- rail ---------- */
.ag-rail { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.ag-verdict.sticky {
  position: sticky;
  bottom: 0;
  margin: 4px -16px calc(-16px - env(safe-area-inset-bottom, 0px));
  padding: 13px 16px calc(13px + env(safe-area-inset-bottom, 0px));
  border-radius: 0;
  border-left: none; border-right: none; border-bottom: none;
  background: var(--aos-bg-surface-1);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.45);
}
.ag-rail-meta {
  font-family: var(--aos-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--aos-text-tertiary);
}
.ag-field-label {
  font-family: var(--aos-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aos-text-tertiary);
  margin-bottom: 4px;
}
.ag-field-text { font-size: 13.5px; line-height: 1.5; color: var(--aos-text-secondary); }
.ag-field.loud .ag-field-text {
  font-size: 14.5px;
  color: var(--aos-text-primary);
  border-left: 2px solid var(--aos-accent);
  padding-left: 10px;
}
.ag-field.pairwise .ag-field-text {
  border-left: 2px solid var(--aos-border-strong);
  padding-left: 10px;
}
.ag-field.quiet .ag-field-text { font-size: 12px; color: var(--aos-text-tertiary); }

/* verdict card — quiet chrome, state color only on the tag (dosage rule) */
.ag-verdict {
  background: var(--aos-bg-surface-1);
  border: 1px solid var(--aos-border-default);
  border-radius: 10px;
  padding: 13px 15px;
  margin-top: 4px;
}
.ag-verdict-tag {
  font-family: var(--aos-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aos-state-awaiting-human);
  margin-bottom: 6px;
}
.ag-verdict-text { font-size: 12.5px; line-height: 1.45; color: var(--aos-text-secondary); margin-bottom: 8px; }
.ag-verdict-note { font-size: 11.5px; color: var(--aos-text-tertiary); margin-bottom: 8px; }

/* ---------- ledger (Learned zone) ---------- */
.ag-ledger { padding: 6px 16px 10px; }
.ag-ledger-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--aos-border-subtle);
  font-family: var(--aos-font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--aos-text-tertiary);
}
.ag-ledger-row:last-child { border-bottom: none; }
.ag-ledger-pass { color: var(--aos-text-primary); font-weight: 600; }
.ag-ledger-counts { text-align: right; white-space: nowrap; }
.ag-ledger-sub {
  padding: 10px 16px 2px;
  font-family: var(--aos-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aos-text-tertiary);
  border-top: 1px solid var(--aos-border-subtle);
  margin-top: 4px;
}
.ag-ledger-promoted {
  padding: 6px 16px 6px 14px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--aos-text-secondary);
  border-left: 2px solid var(--aos-status-success);
  margin: 6px 16px;
  /* These are receipts, not reading — clamp; the store holds the full text. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- signed-out designed null ---------- */
.ag-null { padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.ag-null-title { font-size: 16px; font-weight: 600; color: var(--aos-text-primary); }
.ag-null-reason { font-size: 13px; line-height: 1.5; color: var(--aos-text-secondary); }
.ag-null-actions { margin-top: 6px; }

/* Compact fold order (≤899 — the shared .page-cols collapse + .home-col
   flatten in components.css already dissolve the columns there): the
   awaiting headline is the fold's lead, so the Pulse card orders first,
   then the docket, then Learned (Home's FIX B pattern, reused). */
@media (max-width: 899px) {
  .agents-page [data-zone="context"] > .ag-zone:first-child { order: -1; }
}

/* ---------- touch widths ---------- */
@media (max-width: 767px) {
  .ag-case { grid-template-columns: minmax(0, 1fr) auto; }
  .ag-case-no { display: none; }           /* ordinals are dense-desktop chrome */
  /* PHONE TYPE BUMP to Home's deliberate scale (critic-a11y: 77% of nodes
     <13px, "bimodal — big titles, tiny everything else"; critic-mobile:
     agents ran SMALLER than Home while Home is bumped). Every information
     tier gets a legible size; nothing information-bearing below 12px. */
  .ag-case-title {
    font-size: 16px;
    font-weight: 600;               /* Home row weight — the hierarchy carrier */
    -webkit-line-clamp: 1;          /* Home clamps 1 line; the rail holds the packet.
                                       Rows were 145-241px vs Home ~100 (critic-mobile). */
  }
  .ag-case-meta { font-size: 13px; }  /* stays nowrap+ellipsis: 3-line metas made fat rows */
  .ag-zone-sub { font-size: 12px; }
  .ag-provenance { font-size: 12px; }
  .ag-pulse { font-size: 13px; }
  .ag-pulse-lead { font-size: 17px; }
  .ag-ledger-row { font-size: 13px; }
  .ag-ledger-sub { font-size: 11px; }
  .ag-ledger-promoted { font-size: 13px; }
  .ag-rail-meta { font-size: 12px; }
  .ag-field-label { font-size: 12px; }   /* was 10px — smallest text on the densest surface */
  .ag-field-text { font-size: 15px; line-height: 1.55; }
  .ag-field.loud .ag-field-text { font-size: 16px; }
  .ag-field.quiet .ag-field-text { font-size: 13px; }
  .ag-verdict-tag { font-size: 11px; }
  .ag-verdict-text { font-size: 14px; }
  .ag-verdict-note { font-size: 12.5px; }
  /* The ONE working action must clear the 44pt touch floor (critic-b). */
  .ag-verdict .btn { min-height: 44px; }
  /* Provenance is the trust anchor — wrap on phone, never clip (critics). */
  .ag-provenance { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  /* Tail clearance for the shell FAB (critic-b; placement Andrew-ruled kept). */
  .agents-page { padding-bottom: 88px; }
}