/* ============================================================
   Tamerix -- Issue 04: The agent loop (ReAct)
   Page-specific styles. Shared components (prose marks, form chrome,
   code, tables, panels, message cards, JSON blocks, the step trace
   base, the comparison matrix) live in assets/issue.css. This file
   owns ONLY the accent and the components unique to this issue: the
   ReAct step-kind colours, the runner presets, and the step-budget
   meter.
   ============================================================ */

/* per-issue accent (kept in sync with data/issues.json; lives here so adding
   an issue never touches the shared assets/core.css) */
body[data-essay="agent-loop"] { --accent:#6d28d9; --accent-soft:#ece8f9; }

/* ============================================================
   the ReAct runner: preset tasks
   ============================================================ */

.react-runner .preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.react-runner .preset {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--hairline-cool);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
}
.react-runner .preset:hover { background: var(--accent-soft); filter: none; }
.react-runner .preset.active { background: var(--accent); color: var(--accent-ink); }

/* ============================================================
   step-kind colours on the shared trace
   thought=accent(violet), action=ink, observation=rust,
   answer=green, halt=red
   ============================================================ */

.trace .trace-step.thought .dot { background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.trace .trace-step.thought .step-label { color: var(--accent); }
.trace .trace-step.action .dot { background: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.trace .trace-step.action .step-label { color: var(--ink); }
.trace .trace-step.observation .dot { background: #b45309; box-shadow: 0 0 0 1px #b45309; }
.trace .trace-step.observation .step-label { color: #b45309; }
.trace .trace-step.answer .dot { background: #15803d; box-shadow: 0 0 0 1px #15803d; }
.trace .trace-step.answer .step-label { color: #15803d; }
.trace .trace-step.halt .dot { background: #b91c1c; box-shadow: 0 0 0 1px #b91c1c; }
.trace .trace-step.halt .step-label { color: #b91c1c; }
.trace .trace-step.halt .step-body { color: #b91c1c; }

/* ============================================================
   step-budget meter (super-steps used vs recursion limit)
   ============================================================ */

.budget {
  display: grid;
  grid-template-columns: 130px 1fr 70px;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--muted);
  margin: 4px 0 10px;
}
.budget .b-name { text-align: right; }
.budget .b-track {
  height: 16px;
  background: var(--bg);
  border: 1px solid var(--hairline-cool);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
}
.budget .b-cell { flex: 1; border-right: 1px solid var(--hairline-cool); }
.budget .b-cell:last-child { border-right: none; }
.budget .b-cell.used { background: var(--accent); }
.budget .b-cell.over { background: #b91c1c; }
.budget .b-val {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   responsive (bespoke)
   ============================================================ */

@media (max-width: 700px) {
  .budget { grid-template-columns: 100px 1fr 56px; gap: 8px; }
}