/* ═══════════════════════════════════════════════════════
   graphrun.css — Graph Run + Storico Review sections
   ═══════════════════════════════════════════════════════ */

/* ── Decision badges ─────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px var(--s-3);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.badge--accept  { background: #1a4a30; color: #4ead7a; border: 1px solid #2a6040; }
.badge--minor   { background: #3a3010; color: #c5a55a; border: 1px solid #5a4820; }
.badge--major   { background: #3a2010; color: #d48c3c; border: 1px solid #5a3810; }
.badge--reject  { background: #3a1010; color: #d45c5c; border: 1px solid #5a2020; }
.badge--unknown { background: var(--c-surface-raised); color: var(--c-text-secondary); border: 1px solid var(--c-border); }
.badge--sm      { font-size: .65rem; padding: 1px var(--s-2); }

/* ── Section base ────────────────────────────────────── */
.section { padding: var(--s-8); max-width: 860px; }
.section__title { font-family: var(--font-serif); font-size: var(--text-2xl); color: var(--c-accent); margin-bottom: var(--s-2); }
.section__desc  { color: var(--c-text-secondary); font-size: var(--text-sm); margin-bottom: var(--s-6); }

.muted     { color: var(--c-text-muted); font-size: var(--text-sm); }
.error-msg { color: var(--c-error); font-size: var(--text-sm); margin-top: var(--s-2); }

/* ── Form primitives ─────────────────────────────────── */
.form-group         { margin-bottom: var(--s-4); }
.form-group--inline { display: flex; align-items: center; gap: var(--s-3); }
.form-group--inline .form-label { min-width: 90px; margin-bottom: 0; }

.form-label    { display: block; font-size: var(--text-xs); color: var(--c-text-secondary); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--s-1); }
.form-select,
.form-input    { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); color: var(--c-text-primary); font-size: var(--text-sm); padding: var(--s-2) var(--s-3); }
.form-select   { width: 100%; }
.form-input    { width: 72px; text-align: center; }
.form-checkbox { width: 16px; height: 16px; accent-color: var(--c-accent); cursor: pointer; }
.form-select:focus, .form-input:focus { outline: none; border-color: var(--c-accent); }

/* ── Buttons ─────────────────────────────────────────── */
.btn          { cursor: pointer; border: none; border-radius: var(--r-md); font-size: var(--text-sm); font-weight: 600; padding: var(--s-2) var(--s-5); transition: background var(--t-fast), opacity var(--t-fast); }
.btn--primary { background: var(--c-accent); color: #0c1220; }
.btn--primary:hover:not(:disabled) { background: var(--c-accent-light); }
.btn--secondary { background: var(--c-surface-raised); color: var(--c-text-primary); border: 1px solid var(--c-border); }
.btn--secondary:hover:not(:disabled) { border-color: var(--c-accent); color: var(--c-accent); }
.btn--ghost   { background: transparent; border: 1px solid var(--c-border); color: var(--c-text-secondary); }
.btn--ghost:hover { border-color: var(--c-accent); color: var(--c-accent); }
.btn--sm      { padding: var(--s-1) var(--s-3); font-size: var(--text-xs); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Status label ────────────────────────────────────── */
.gr-status      { font-size: var(--text-xs); color: var(--c-text-muted); }
.gr-status--ok  { color: var(--c-success); }

/* ── Cards (step containers) ─────────────────────────── */
.gr-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  margin-bottom: var(--s-5);
}
.gr-card-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--c-accent);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border);
}

/* ── Config table ────────────────────────────────────── */
.gr-config-meta { font-size: var(--text-sm); color: var(--c-text-secondary); margin-bottom: var(--s-3); }
.gr-config-meta strong { color: var(--c-text-primary); }
.gr-config-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.gr-config-table th {
  color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .05em; font-size: var(--text-xs);
  padding: var(--s-2) var(--s-3); text-align: left; border-bottom: 1px solid var(--c-border);
}
.gr-config-table td { padding: var(--s-2) var(--s-3); color: var(--c-text-secondary); border-bottom: 1px solid var(--c-border); }
.gr-config-table tr:last-child td { border-bottom: none; }
.gr-config-table code { color: var(--c-accent); font-family: var(--font-mono); font-size: var(--text-xs); }

/* ── Review accordions ───────────────────────────────── */
.gr-review { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); margin-top: var(--s-2); overflow: hidden; }
.gr-review-summary {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  cursor: pointer; list-style: none;
  font-size: var(--text-sm); font-weight: 600; color: var(--c-text-primary);
}
.gr-review-summary::-webkit-details-marker { display: none; }
.gr-review-summary::before { content: '▶'; font-size: .6em; color: var(--c-accent); transition: transform var(--t-fast); }
details[open] .gr-review-summary::before { transform: rotate(90deg); }
.gr-review-body { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--c-border); font-size: var(--text-sm); color: var(--c-text-secondary); }
.gr-review-body p  { margin-bottom: var(--s-2); line-height: 1.55; }
.gr-review-body ul { padding-left: var(--s-4); }
.gr-review-body li { margin-bottom: var(--s-1); }
.gr-list-title { font-size: var(--text-xs); font-weight: 700; color: var(--c-text-primary); text-transform: uppercase; letter-spacing: .04em; margin: var(--s-3) 0 var(--s-1); }
.gr-score { font-size: var(--text-xs); color: var(--c-accent); font-weight: 700; margin-left: auto; }
.gr-conf  { font-size: var(--text-xs); color: var(--c-text-muted); }

/* ══════════════════════════════════════════════════════
   Storico Review section
   ══════════════════════════════════════════════════════ */

.storico-header { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-2); }

/* Run list */
.sto-list { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-6); }

.sto-row {
  display: grid;
  grid-template-columns: 130px 1fr auto auto auto;
  align-items: center;
  gap: var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.sto-row:hover { border-color: var(--c-accent); }
.sto-ts     { font-size: var(--text-xs); color: var(--c-text-muted); font-family: var(--font-mono); }
.sto-paper  { font-size: var(--text-sm); color: var(--c-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sto-rounds { font-size: var(--text-xs); color: var(--c-text-muted); }

/* Detail */
.sto-detail { margin-top: var(--s-4); }
.sto-detail-header {
  display: flex; align-items: center; gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--s-5);
}
.sto-detail-meta { font-size: var(--text-xs); color: var(--c-text-muted); }

/* Config block */
.sto-config-block { margin-bottom: var(--s-5); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.sto-config-summary {
  padding: var(--s-2) var(--s-4); cursor: pointer; list-style: none;
  font-size: var(--text-xs); font-weight: 700; color: var(--c-text-secondary);
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--c-surface-raised);
}
.sto-config-summary::-webkit-details-marker { display: none; }
.sto-config-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.sto-config-table th {
  background: var(--c-surface-raised); color: var(--c-text-muted);
  text-transform: uppercase; letter-spacing: .05em;
  padding: var(--s-2) var(--s-3); text-align: left;
  border-bottom: 1px solid var(--c-border);
}
.sto-config-table td { padding: var(--s-2) var(--s-3); color: var(--c-text-secondary); border-bottom: 1px solid var(--c-border); }
.sto-config-table tr:last-child td { border-bottom: none; }
.sto-config-table code { color: var(--c-accent); font-family: var(--font-mono); }

/* Rounds */
.sto-round       { margin-bottom: var(--s-5); }
.sto-round-title { font-size: var(--text-xs); font-weight: 700; color: var(--c-accent); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--s-3); }
.sto-revision-notes {
  font-size: var(--text-sm); color: var(--c-text-secondary);
  background: var(--c-surface); border: 1px solid #5a4820;
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4);
}

/* Agent trace */
.sto-agent-trace {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); margin-bottom: var(--s-2); overflow: hidden;
}
.sto-agent-summary {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); cursor: pointer; list-style: none;
  font-size: var(--text-sm); font-weight: 600; color: var(--c-text-primary);
  background: var(--c-surface-raised);
}
.sto-agent-summary::-webkit-details-marker { display: none; }
.sto-agent-summary::before { content: '▶'; font-size: .6em; color: var(--c-accent); margin-right: var(--s-1); transition: transform var(--t-fast); }
details[open] .sto-agent-summary::before { transform: rotate(90deg); }
.sto-agent-body { padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); border-top: 1px solid var(--c-border); }

/* Persona pills (Graph Config) */
.persona-pill {
  display: inline-block;
  padding: 1px var(--s-2);
  margin-right: 4px;
  font-size: var(--text-xs);
  border-radius: var(--r-full);
  background: var(--c-surface-raised);
  border: 1px solid var(--c-border);
  color: var(--c-text-secondary);
}

/* Pre blocks for input/context traces */
.gr-pre {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--c-text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
}

/* Trace accordion (input/context) */
.gr-trace { margin-top: var(--s-3); border-top: 1px dashed var(--c-border); padding-top: var(--s-2); }
.gr-trace > summary {
  cursor: pointer; list-style: none;
  font-size: var(--text-xs); font-weight: 700;
  color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .05em;
  padding: var(--s-1) 0;
}
.gr-trace > summary::-webkit-details-marker { display: none; }
.gr-trace > summary::before { content: '▶'; font-size: .6em; color: var(--c-accent); margin-right: var(--s-2); transition: transform var(--t-fast); }
.gr-trace[open] > summary::before { transform: rotate(90deg); }

/* Card header row (used for Graph Config run selector) */
.gr-card-header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border);
}
.gr-card-header-row .gr-card-title { margin: 0; padding: 0; border: none; }

/* Pipeline SVG section */
.pipeline-svg-container {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  margin-top: var(--s-4);
  display: flex;
  justify-content: center;
}
.pipeline-svg-container svg {
  max-width: 100%;
  height: auto;
}

@media (max-width: 880px) {
  .sto-row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
  .sto-paper {
    white-space: normal;
  }
}