.order-example .recorded-panel { margin:24px 0; border:1px solid var(--rule); background:var(--cream-raised); }
.recorded-panel > header { padding:20px 22px 0; }
.recorded-panel > header h3 { margin-top:4px; }
.recording-label { color:var(--ink-muted); font:600 .72rem/1.3 var(--font-ui); letter-spacing:.08em; text-transform:uppercase; }
.recorded-panel > details, .recorded-panel > .map-selection, .recorded-panel > .case-measurements { margin-left:22px; margin-right:22px; }
.recorded-panel > details { margin-bottom:20px; }
.workflow-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:24px 0; background:var(--rule); border:1px solid var(--rule); }
.workflow-strip article { display:grid; gap:7px; padding:20px; background:var(--cream-raised); }
.workflow-strip strong { font:400 1.2rem/1.2 var(--font); }
.workflow-strip span { color:var(--ink-muted); font-size:.9rem; }
.tool-request, .engine-reading, .agent-prompt { padding:18px 20px; border-left:3px solid var(--focus); background:var(--signal-bg); }
.engine-reading, .agent-prompt { margin:24px 0; }
.engine-reading p:last-of-type, .agent-prompt p:last-of-type { margin-bottom:0; }
.diff-panel { margin:20px 0 28px; }
.diff-panel pre { max-height:34rem; }
.scenario-table-wrap { overflow:auto; margin:20px 0; border:1px solid var(--rule); }
.scenario-table { width:100%; border-collapse:collapse; min-width:720px; font-size:.86rem; }
.scenario-table caption { text-align:left; padding:14px 16px; font-weight:600; }
.scenario-table th, .scenario-table td { padding:11px 16px; border-top:1px solid var(--rule); text-align:left; vertical-align:top; }
.scenario-table td:last-child { color:var(--focus); font-weight:600; }
.recorded-json, .recorded-output { max-height:32rem; }
.evidence-identity { color:var(--ink-muted); font-size:.82rem; }
.map-selection { min-height:1.5em; color:var(--ink-muted); font-size:.86rem; }
.agent-prompt pre { white-space:pre-wrap; }
@media (max-width:700px) {
  .workflow-strip { grid-template-columns:1fr; }
  .recorded-panel > header { padding-inline:16px; }
  .recorded-panel > details, .recorded-panel > .map-selection, .recorded-panel > .case-measurements { margin-inline:16px; }
  .map-caption { padding-inline:16px; }
  .order-example pre { font-size:.72rem; }
}