/* agent.html — page-specific layout on top of site.css. No new tokens; only
 * composition of the shared components (steps, code panels, tables, diagram). */

/* The case narrative stays brief; the original evidence is optional. */
.case-heading{margin-bottom:20px}
.case-heading h2{font-size:clamp(25px,3vw,34px);line-height:1.25;letter-spacing:-.025em;margin:0}
.case-intro{max-width:780px;font-size:16px;line-height:1.8;color:var(--soft);margin:0 0 28px}
.case-label{font-size:11px!important;line-height:1.5!important;letter-spacing:.055em;text-transform:uppercase;font-weight:600;color:var(--muted)!important;margin:0 0 10px!important}
.case-task-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;border-block:1px solid var(--line);padding-block:26px}
.agent-case h3{font-size:19px;line-height:1.4;letter-spacing:-.015em;margin:0 0 10px}
.case-task-grid p,.case-flow p,.case-observation p,.case-step-roles p,.case-outcomes p,.case-next p,.case-archive-intro p{font-size:14px;line-height:1.8;color:var(--soft);margin:0}
.case-caption{font-size:12px;line-height:1.8;color:var(--muted);margin:18px 0 0;max-width:900px}
.case-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:0;margin:0;gap:28px}
.case-flow li{display:flex;gap:14px;align-items:flex-start}
.case-number{flex:none;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line);font-family:var(--mono);font-size:12px;border-radius:50%}
.case-flow h3{font-size:16px;margin-bottom:5px}
.case-observation{margin-top:30px;border-left:3px solid var(--caution);padding:22px 26px;background:var(--tint)}
.case-observation .case-caption{font-size:12px;margin-top:12px}
.case-loop{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:20px;align-items:center;padding:24px 28px;background:var(--brand-tint);border:1px solid var(--line);margin-bottom:32px}
.case-loop>div{display:grid;gap:6px}
.case-loop strong{font-size:15px;color:var(--brand)}
.case-loop span{font-size:13px;line-height:1.6;color:var(--soft)}
.case-loop .case-arrow{font-size:23px;color:var(--brand)}
.case-timeline{list-style:none;margin:0;padding:0}
.case-timeline>li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:20px;padding:26px 0;border-bottom:1px solid var(--line)}
.case-timeline>li:first-child{padding-top:0}
.case-step-number{font-family:var(--mono);font-size:13px;color:var(--brand);padding-top:4px}
.case-step-roles{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:16px}
.case-step-roles>div+div{border-left:1px solid var(--line);padding-left:28px}
.case-step-roles .case-label{margin-bottom:6px!important}
.case-outcomes{display:grid;grid-template-columns:1fr 1.35fr;gap:20px}
.case-outcomes>article{border:1px solid var(--line);padding:26px;display:flex;flex-direction:column;min-width:0}
.case-outcomes>article.case-success{border-color:var(--brand);background:var(--brand-tint)}
.case-success h3{color:var(--brand)}
.case-outcome-note{font-size:12px;color:var(--muted);margin-top:auto;padding-top:24px}
.case-statistics{display:flex;flex-wrap:wrap;gap:18px 24px;margin:8px 0 0}
.case-statistics dt{font-size:12px;color:var(--soft);margin-bottom:7px}
.case-statistics dd{font-family:var(--mono);font-size:16px;margin:0;color:var(--ink)}
.case-next{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center;margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.case-links{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.case-archive{margin-top:34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.case-archive>summary{padding:20px 4px;cursor:pointer;font-size:14px;font-weight:500}
.case-archive-intro{padding:10px 0 24px;display:grid;gap:10px}
.case-archive .container{width:100%}
.case-archive .section{padding-block:32px}
.case-archive h2{font-size:24px}
.case-archive .section-heading{gap:32px}
.case-paper{border-left:3px solid var(--brand);padding:6px 0 6px 20px;margin:0 0 28px}
.case-paper p{font-size:16px;line-height:1.6;margin:8px 0 0}
.case-spec{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;padding:26px;border:1px solid var(--line)}
.case-spec p,.case-failure-story>p,.case-return>p,.case-step-story{font-size:14px;line-height:1.85;color:var(--soft);margin:0}
.case-spec>*,.case-proof-grid>*,.case-step-content{min-width:0}
.case-variables{margin:0;display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px 16px;align-content:start;font-size:13px;line-height:1.7}
.case-variables dt{color:var(--muted)}
.case-variables dd{margin:0;overflow-wrap:anywhere}
.case-variables code{font-size:12px}
.case-proof-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:start;margin-top:22px}
.case-excerpt .code-panel-head{font-family:var(--sans)}
.case-excerpt pre{font-size:12px;line-height:1.8;max-height:none}
.case-excerpt code{word-break:normal}
.case-failure-story>.code-panel{border-left:3px solid var(--caution);margin-bottom:20px}
.case-decision{padding:14px 18px;margin:20px 0 0!important;background:var(--brand-tint);border-left:2px solid var(--brand);font-size:14px!important;line-height:1.8!important;color:var(--ink)!important}
.case-return{border:1px solid var(--line);padding:22px}
.case-return>p+p{margin-top:14px}
.case-data-shape{display:flex;align-items:baseline;gap:9px;margin:16px 0 20px}
.case-data-shape strong{font-family:var(--mono);font-size:25px;font-weight:500}
.case-data-shape span{color:var(--muted);font-size:12px;margin-right:12px}
.case-field-tags{display:flex;gap:10px;margin-top:16px}
.case-field-tags code{padding:3px 10px;background:var(--brand-tint);font-size:13px;color:var(--brand)}
.case-observed-facts{margin:14px 0 20px}
.case-observed-facts>div{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.6}
.case-observed-facts dt{color:var(--soft)}
.case-observed-facts dd{font-family:var(--mono);margin:0;text-align:right}
.case-story-timeline>li{padding-block:36px}
.case-story-timeline .case-step-number{padding-top:30px}
.case-story-timeline .case-step-content>h3{font-size:22px}
.case-comparison{margin-top:26px}
.case-comparison table{width:100%}
.case-comparison td{white-space:nowrap;font-size:13px}
.case-dataset{margin:28px 0;padding:26px;border:1px solid var(--line);background:var(--tint)}
.case-dataset-heading{display:flex;justify-content:space-between;gap:20px;align-items:baseline;margin-bottom:14px}
.case-dataset-heading h3{margin:0}
.case-dataset-heading .text-link{font-size:12px;flex-shrink:0}
.case-dataset>p,.case-improvement>p{font-size:14px;line-height:1.85;color:var(--soft);margin:0}
.case-sample-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-block:24px}
.case-sample-flow>div{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:16px}
.case-sample-flow strong{font-family:var(--mono);font-size:28px;font-weight:500;color:var(--brand)}
.case-sample-flow span{font-size:12px;line-height:1.7;color:var(--soft)}
.case-dataset>.case-caption{font-size:12px;color:var(--muted)}
.case-improvement{border-left:2px solid var(--brand);padding:4px 0 4px 22px;margin-top:28px}
.case-improvement>p+p{margin-top:12px}
@media(max-width:760px){
  .case-dataset{padding:20px}
  .case-dataset-heading{flex-direction:column;gap:12px}
  .case-sample-flow{grid-template-columns:minmax(0,1fr);gap:18px}
  .case-spec,.case-proof-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .case-spec{padding:20px}
  .case-variables{grid-template-columns:minmax(0,1fr);gap:4px}
  .case-variables dd{margin-bottom:10px}
  .case-return{padding:18px}
  .case-story-timeline .case-step-content>h3{font-size:19px}
  .case-task-grid,.case-flow,.case-outcomes,.case-next{grid-template-columns:minmax(0,1fr)}
  .case-task-grid{gap:22px}
  .case-task-grid>article+article{border-top:1px solid var(--line);padding-top:20px}
  .case-loop{grid-template-columns:minmax(0,1fr);gap:12px;padding:22px}
  .case-loop .case-arrow{transform:rotate(90deg);justify-self:start;margin-left:4px}
  .case-timeline>li{grid-template-columns:28px minmax(0,1fr);gap:12px}
  .case-step-roles{grid-template-columns:minmax(0,1fr);gap:16px}
  .case-step-roles>div+div{border-left:0;padding-left:0}
  .case-next{gap:22px}
  .case-outcomes>article{padding:22px}
  .case-archive .section-heading{grid-template-columns:minmax(0,1fr);gap:18px}
}

/* 01 · Task: card beside the instruction panel; the "what the model does not
 * see" callout runs under both as one three-column strip */
.task-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px}
.task-grid .card h3{font-size:18px}
.task-grid .kv dd .pill-list{margin-top:2px}
.task-callout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 28px;margin-top:24px}
.task-callout .callout-title{grid-column:1/-1}
.task-callout p+p{margin-top:0}

/* 02 · Arm A: paragraph beside the collapsed program and the stderr tail */
.baseline-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:28px;align-items:start;margin-top:30px}
.baseline-grid>*,.task-grid>*,.scoring-grid>*,.framework-tables>*,.budgets-grid>*,.evidence-grid>*,.prompts>*{min-width:0}
.baseline-grid .prose p{font-size:15px}

/* 03 · Arm B: budget strip, internal-study note, timeline. Harness replies use a
 * return glyph instead of repeating the call number on the rail. */
.trajectory-note{margin:26px 0 34px}
.step.reply .step-marker{background:var(--tint);color:var(--muted);border-color:var(--line);font-family:var(--sans);font-size:16px;line-height:1}
.step-title code{font-size:.92em}
.step-body>p code{font-size:12.5px}
html[data-theme="dark"] .step.is-final .code-panel.inverse{border-color:var(--brand)}

/* 04 · Scoring: comparison table, its note, flags, lessons */
.score-table td.mono{font-family:var(--mono);font-size:12px}
.score-note{margin:10px 0 0;max-width:80ch}
.nowrap{white-space:nowrap}
.flag-true{font-weight:600;color:var(--ink)}
.flag-true::before{content:"\2713\00a0";color:var(--brand)}
.scoring-grid{margin-top:28px;gap:28px}
.replay-kv{align-self:start}
.lessons{margin-top:30px}
.lessons .card h3{font-size:16px}
.lessons .card p{margin-top:8px}

/* 05 · Framework: diagram, tables, prompts. The portrait drawing replaces the
 * 1044px landscape one wherever the landscape would have to scroll. */
.arch .group{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:5 4}
.arch .t-edge{text-anchor:middle;font-size:11px}
.arch .arch-portrait{display:none}
.diagram.wide .diagram-scroll svg.arch-portrait{min-width:0;max-width:440px}
.arch .arch-portrait .t-small{font-size:12.5px}
.arch .node.ink+text,.arch .t-inverse.t-small{fill:var(--paper);opacity:.85}
.framework-tables{margin-top:28px;gap:28px}
.framework-note h3{margin-top:0;font-size:16px;font-weight:600;letter-spacing:-.015em}
.arms-table{margin-top:0}
.framework-tables+.table-scroll{margin-top:28px}
.inline-list{margin:0;padding-left:18px;font-size:12.5px;line-height:1.6;color:var(--soft)}
ol.inline-list{list-style:decimal}
ul.inline-list{list-style:disc}
.inline-list li+li{margin-top:4px}
.arms-table tbody th{white-space:nowrap}
.prompts{margin-top:28px}

/* 06 · Budgets */
.budgets-grid{gap:28px}
.budgets-table tbody th{white-space:nowrap}

/* 07 · Evidence: the file list keeps mono keys but sans descriptions */
.block-title{font-size:16px;font-weight:600;letter-spacing:-.015em;margin:0 0 12px}
.evidence-grid{gap:28px}
.evidence-list{grid-template-columns:minmax(150px,52%) minmax(0,1fr)}
.evidence-list dt code{font-size:12px;overflow-wrap:anywhere}
.kv.mono.evidence-list dd{font-family:var(--sans);font-size:13px}
.profiles-table tbody th{white-space:nowrap}
.profiles-table thead th{white-space:normal}

/* 08 · Next protocol */
.next-grid .card-footer span{font-size:12px}
.next-grid .kv{margin-top:14px}

/* 09 · Related research: the MetricsAI vector figure. The frame uses --paper so
 * the SVG's own paper fallback matches it in both themes. */
.related-figure{margin:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);padding:24px;min-width:0}
.related-figure img{display:block;width:100%;height:auto;max-width:1100px;margin-inline:auto}
.related-figure figcaption{margin-top:16px;font-size:12px;line-height:1.7;color:var(--muted)}
.related-figure figcaption a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--strong-line)}
.related-figure figcaption a:hover{text-decoration-color:var(--ink)}
.related-links{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:22px}

/* Responsive */
@media(max-width:1100px){
  .task-grid,.baseline-grid,.budgets-grid,.evidence-grid,.framework-tables{grid-template-columns:minmax(0,1fr)}
  .lessons{--cols-cap:3}
  .arch .arch-landscape{display:none}
  .arch .arch-portrait{display:block}
}
@media(max-width:1000px){
  .subnav ol{gap:0 16px}
  .subnav a{font-size:12.5px}
}
@media(max-width:860px){
  .task-callout{grid-template-columns:minmax(0,1fr);gap:8px}
  .scoring-grid,.framework-tables,.budgets-grid,.evidence-grid{gap:20px}
  .evidence-list{grid-template-columns:minmax(120px,52%) minmax(0,1fr)}
  .lessons{--cols-cap:1}
  .related-figure{padding:18px}
  .baseline-grid{margin-top:26px}
}
@media(max-width:520px){
  .evidence-list{grid-template-columns:minmax(0,1fr)}
  .related-figure{padding:14px}
  .arms-table tbody th,.budgets-table tbody th,.profiles-table tbody th{white-space:normal}
  .budgets-table thead th,.budgets-table td.num{white-space:normal}
  .page-meta a{display:inline-block;padding-block:7px}
  .card-footer .text-link,.related-links .text-link{min-height:32px}
}