/* Styling for the admin Codex run detail page (admin/agent_runs#show). */

.run-title { margin: 0 0 0.35rem; }
.run-subtitle { color: var(--ink-soft); }
.artifact-list { margin: 0; padding-left: 1.25rem; }

.page-header { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-actions { display: flex; align-items: flex-start; gap: 0.5rem; }

/* Single column by default; the narrative (panels + events) sits beside a meta
   sidebar (details + artifacts) on lg, mirroring the routine form layout.
   Cards (.form-section.is-info), .section-title, and .detail-field come from
   the global layout so this page matches the edit page's grouping. */
.show-cols { display: grid; grid-template-columns: 1fr; column-gap: 1.5rem; align-items: start; }
.events-heading { margin-top: 1.75rem; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.9rem; margin-bottom: 1rem; font-size: 0.85rem; line-height: 1.45; box-shadow: var(--shadow); }
.panel p { margin: 0.4rem 0; }
.panel p:first-child { margin-top: 0; }
.panel pre { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; margin: 0.4rem 0 0; padding: 0.6rem 0.7rem; background: var(--surface-inset); border-radius: var(--radius-sm); color: #333; font-family: var(--font-mono); font-size: 0.78rem; }

/* Status badges (.badge / .badge-*) and .muted live in the global admin layout. */

/* Failure callout: reuse the status colour so the panel matches the badge. */
.panel-heading { margin-top: 0; font-weight: 700; }
.panel-fail { background: #fef2f2; border-color: #fecaca; }
.panel-fail .panel-heading { color: #991b1b; }
.panel-warn { background: #fff7ed; border-color: #fed7aa; }
.panel-warn .panel-heading { color: #9a3412; }

.continue-prompt { width: 100%; box-sizing: border-box; margin: 0.5rem 0 0.6rem; padding: 0.5rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font: inherit; font-size: 0.85rem; resize: vertical; }

/* Event timeline */
.timeline { display: flex; flex-direction: column; gap: 0.6rem; }
.ev { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; box-shadow: var(--shadow); }
.ev-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 600; color: #333; flex-wrap: wrap; }
.ev-icon { font-size: 0.85rem; }
.ev-time { margin-left: auto; color: #999; font-weight: 400; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.ev-exit { color: #991b1b; font-size: 0.75rem; font-weight: 600; }
.ev-dim { color: #888; font-weight: 400; }
.ev-text { font-size: 0.88rem; color: #1a1a1a; line-height: 1.45; }
.ev-text p { margin: 0.4rem 0; }
.ev-text p:first-child { margin-top: 0.45rem; }
.ev pre { white-space: pre-wrap; word-break: break-word; margin: 0.45rem 0 0; font-size: 0.78rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ev-cmd { background: #1a1a1a; color: #e5e5e5; padding: 0.5rem 0.65rem; border-radius: 6px; }
.ev-output { background: #f7f7f7; color: #333; padding: 0.5rem 0.65rem; border-radius: 6px; max-height: 22rem; overflow: auto; }
.ev-error-text { background: #fef2f2; color: #991b1b; }
.ev-message { border-left: 3px solid #1a1a1a; }
.ev-error { border-left: 3px solid #b91c1c; }
.ev-reasoning { border-left: 3px solid #c4b5fd; }
.ev-reasoning .ev-text { color: #555; font-style: italic; }
.ev-usage { background: transparent; border: none; padding: 0.2rem 0; font-size: 0.78rem; color: #888; display: flex; align-items: center; gap: 0.5rem; }
.ev-tokens { font-variant-numeric: tabular-nums; }
.ev-lifecycle { background: transparent; border: none; padding: 0.1rem 0.85rem; font-size: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.ev-lifecycle code { font-size: 0.72rem; color: #888; }

.raw-events { margin-top: 1rem; }
.raw-events summary { cursor: pointer; font-size: 0.82rem; color: #666; }
.raw-events pre { white-space: pre-wrap; word-break: break-word; font-size: 0.75rem; background: #f7f7f7; padding: 0.75rem; border-radius: 6px; margin-top: 0.5rem; }

@media (min-width: 768px) {
  .page-header { flex-direction: row; }
}

@media (min-width: 1024px) {
  .show-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}