/* Agent-specific controls around the shared central model; no external dependencies. */
.agent-page { --accent: var(--violet); --accent-rgb: var(--violet-rgb); --accent-soft: rgba(var(--violet-rgb), .07); --focus-ring: rgba(var(--violet-rgb), .55); }
.agent-page, .agent-page * { box-sizing: border-box; }
.agent-page button, .agent-page input { font: inherit; }
.agent-page button { border: 0; background: transparent; color: inherit; cursor: pointer; }
.agent-page button:disabled { opacity: .4; cursor: default; }
.agent-page :is(button, input, a):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.agent-page .skip-link { position: fixed; z-index: 20; top: 12px; left: 12px; padding: 12px; background: var(--surface); transform: translateY(-200%); }
.agent-page .skip-link:focus { transform: none; }
.agent-page .model-page-content { scrollbar-gutter: stable both-edges; }
.agent-stage.model-stage {
  --model-width: 33.333333vw;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--model-width) minmax(0, 1fr);
  grid-template-rows: minmax(64px, auto) var(--model-height) auto auto;
  grid-template-areas: "top top top" "context model settings" "actions controls tools" "data data data";
  align-items: center; align-content: start; gap: 0 clamp(14px, 2.3vw, 36px);
  min-height: 0; padding: 0 28px 30px;
}
.agent-stage .model-stage__core { grid-area: model; position: relative; inset: auto; transform: none; width: 100%; height: var(--model-height); min-width: 0; }
.agent-stage.model-stage:has(.model-stage__panel:not([hidden])) { padding-top: 0; }
.agent-presets { grid-area: top; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 20px; align-self: end; }
.agent-presets button { min-width: 44px; min-height: 44px; padding: 8px 2px; font-size: 14px; color: var(--muted); }
.agent-presets button[aria-pressed="true"] { color: var(--accent); text-decoration: underline; text-underline-offset: 7px; }
.agent-context { grid-area: context; justify-self: end; width: min(220px, 100%); }
.agent-label { margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.agent-task { margin: 0; font-size: 14px; line-height: 1.85; overflow-wrap: anywhere; }
.agent-readouts { margin: 22px 0 0; display: grid; gap: 14px; }
.agent-readouts dt { margin-bottom: 5px; font-size: 12px; color: var(--muted); }
.agent-readouts dd { margin: 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.agent-settings { grid-area: settings; justify-self: start; width: min(192px, 100%); }
.agent-tool { display: flex; width: 100%; min-height: 44px; gap: 14px; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 13px !important; }
.agent-tool-state { font-size: 11px; color: var(--muted); }
.agent-tool[aria-pressed="true"] .agent-tool-state { color: var(--accent); }
.agent-tool[aria-pressed="true"] .agent-tool-state::before { content: "✓ "; }
.agent-tool[aria-pressed="false"] .agent-tool-state { text-decoration: line-through; }
.agent-limit { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-top: 12px; gap: 12px; font-size: 13px; }
.agent-limit input { min-height: 44px; width: 78px; flex: 0 0 78px; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); padding: 6px 2px; text-align: center; }
.agent-limit input[aria-invalid="true"] { border-color: var(--orange); }
.agent-setting-note { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.agent-controls { grid-area: controls; text-align: center; min-width: 0; }
.agent-transport { display: flex; align-items: center; justify-content: center; gap: 18px; }
.agent-stage .agent-icon { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; color: var(--muted); }
.agent-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.agent-icon:hover, .agent-stage .agent-icon[aria-pressed="true"] { color: var(--accent); }
.agent-icon .agent-pause, .agent-icon[aria-pressed="true"] .agent-play { display: none; }
.agent-icon[aria-pressed="true"] .agent-pause { display: block; }
.agent-next { min-height: 44px; min-width: 88px; font-size: 14px !important; color: var(--accent) !important; }
.agent-message { min-height: 3.4em; margin: 12px 0 0; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.agent-detail { min-height: 3.4em; margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.agent-simulation-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; }
.agent-actions { grid-area: actions; justify-self: end; align-self: start; }
.agent-data-entry { grid-area: tools; justify-self: start; align-self: start; }
.agent-data-entry button { min-width: 44px; min-height: 44px; padding: 8px; color: var(--muted); font-size: 13px; }
.agent-data-entry button::before { display: none; }
.agent-data-entry button[aria-expanded="true"] { color: var(--accent); }
.agent-edges { fill: none; stroke: var(--line-strong); stroke-width: 2; marker-end: url(#agent-arrow); }
#agent-arrow path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.agent-edges .is-active { stroke: var(--accent); stroke-width: 3.5; }
.agent-exit { stroke-dasharray: 6 6; }
.agent-node { cursor: pointer; outline: none; }
.agent-node rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.8; transition: fill 180ms ease, stroke 180ms ease; }
.agent-node .agent-hit { opacity: 0; pointer-events: all; }
.agent-node text { fill: var(--ink); font-family: var(--font-sans); font-size: 27px; font-weight: 500; }
.agent-node .agent-node-sub { font-size: 18px; font-weight: 400; fill: var(--muted); }
.agent-node.is-current rect { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 3; }
.agent-node.is-current text { fill: var(--accent); }
.agent-node.is-related rect { stroke: var(--accent); stroke-dasharray: 5 4; }
.agent-node[aria-pressed="true"] rect, .agent-node:focus-visible rect { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 5 4; }
.agent-node:hover rect { stroke: var(--accent); }
.agent-loop-label { fill: var(--muted); font-family: var(--font-sans); font-size: 20px; }
.agent-beacon { fill: var(--accent); }
.agent-inspection { display: flex; align-items: start; gap: 8px; padding-top: 10px; text-align: left; }
.agent-inspection p { margin: 0; font-size: 12px; line-height: 1.8; }
.agent-inspection button { flex: 0 0 44px; min-height: 44px; font-size: 22px; color: var(--muted); }
.agent-stage .agent-data { grid-area: data; position: static; width: min(680px, 100%); max-height: none; margin: 28px auto 0; padding: 16px 0 0; overflow: visible; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.agent-data .model-stage__panel-heading h2 { margin: 0; font-size: 15px; font-weight: 500; }
.agent-data .model-stage__close { flex-basis: 44px; min-height: 44px; }
.agent-data p, .agent-data a { font-size: 12px; line-height: 1.85; color: var(--muted); }
.agent-data a { display: inline-block; min-height: 44px; padding-block: 12px; color: var(--accent); }
.agent-log { list-style: decimal; margin: 18px 0; padding-left: 24px; }
.agent-log li { padding: 10px 0 12px 4px; border-bottom: 1px solid var(--line); }
.agent-log h3 { margin: 0; font-size: 13px; font-weight: 500; }
.agent-log p { margin: 4px 0 0; overflow-wrap: anywhere; }
.agent-data h3 { font-size: 13px; font-weight: 500; }
.agent-data pre { max-height: 330px; overflow: auto; padding: 14px 0; font-size: 12px; line-height: 1.7; color: var(--ink); tab-size: 2; }
.agent-data summary { cursor: pointer; padding: 14px 0; min-height: 44px; font-size: 13px; }
.agent-data details { border-top: 1px solid var(--line); }
.agent-data a + a { margin-left: 20px; }
.agent-checks { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; font-size: 12px; }
.agent-checks li { display: flex; gap: 9px; align-items: baseline; }
.agent-checks li span:last-child { margin-left: auto; color: var(--muted); }
.agent-checks li[data-passed="false"] { color: var(--orange); }
.agent-game-readouts { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 24px; font-size: 12px; margin: 16px 0; color: var(--muted); }
#game-board { display: block; width: min(320px, 100%); margin: 0 auto; touch-action: manipulation; }
#game-board:focus-visible, .agent-data summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.agent-board-bg { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.agent-snake-head { fill: var(--accent); }
.agent-snake-body { fill: var(--accent); opacity: .5; }
.agent-food { fill: var(--orange); }
.agent-game-actions, .agent-speed, .agent-direction { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 16px; }
.agent-game-actions { margin-top: 10px; }
.agent-game-actions button, .agent-speed button { min-height: 44px; padding: 8px; font-size: 13px; }
.agent-game-actions button:first-child, .agent-speed button[aria-pressed="true"] { color: var(--accent); }
.agent-speed button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 6px; }
.agent-direction { gap: 4px; }
.agent-direction button { min-width: 44px; min-height: 44px; font-size: 21px; }
.agent-preview #game-help, .agent-preview #game-version-note { text-align: center; max-width: 440px; margin: 8px auto; }
.agent-page [hidden] { display: none !important; }
.agent-version-label { margin-top: 28px; }
#version-label { font-size: 13px; }
.agent-step-artifact { text-align: left; margin: 12px 0; padding: 12px 0; border-block: 1px solid var(--line); height: 118px; overflow: auto; font: 11px/1.6 ui-monospace, Consolas, monospace; color: var(--accent); white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-stage .agent-mechanics { width: min(780px, 100%); }
.agent-mechanism-tabs { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-block: 10px 16px; }
.agent-mechanism-tabs button { min-height: 44px; font-size: 13px; padding: 6px 0; }
.agent-mechanism-tabs button[aria-pressed="true"] { color: var(--accent); text-decoration: underline; text-underline-offset: 6px; }
.agent-mechanics #mechanism-description, .agent-mechanics #mechanism-detail { font-size: 14px; line-height: 1.9; }
.agent-mechanics #mechanism-description { color: var(--ink); }
.agent-mechanics .agent-formula { color: var(--accent); font: 14px/2 ui-monospace, Consolas, monospace; }
.agent-probe-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 30px; margin: 20px 0; font-size: 13px; }
.agent-probe-controls label { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 44px; }
.agent-probe-controls input { width: 160px; accent-color: var(--accent); min-height: 44px; }
.agent-probe-controls button, .agent-token-demo button { min-height: 44px; padding: 8px 0; font-size: 13px; }
.agent-probe-controls button[aria-pressed="true"] { color: var(--accent); text-decoration: underline; text-underline-offset: 6px; }
.agent-table-wrap { max-width: 100%; overflow-x: auto; margin-block: 18px; }
.agent-mechanics table { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
.agent-mechanics caption { text-align: left; padding-bottom: 10px; font-size: 13px; }
.agent-mechanics th, .agent-mechanics td { padding: 10px; border-bottom: 1px solid var(--line); text-align: right; font-weight: 400; white-space: nowrap; }
.agent-mechanics th:first-child, .agent-mechanics td:first-child { text-align: left; }
.agent-mechanics th { color: var(--muted); }
.agent-token-demo { margin-top: 24px; border-top: 1px solid var(--line); }
.agent-token-demo button + button { margin-left: 24px; }
#token-prefix { min-height: 80px; white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.agent-page noscript p { max-width: 650px; padding: 24px; margin: auto; font-size: 14px; line-height: 1.8; }
@media (max-width: 800px) {
  .agent-stage.model-stage { --model-height: clamp(250px, 42svh, 360px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto var(--model-height) auto auto auto auto; grid-template-areas: "top top" "model model" "context settings" "controls controls" "actions tools" "data data"; gap: 18px 24px; padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right)); }
  .agent-stage .model-stage__core { width: min(500px, 100%); justify-self: center; }
  .agent-context, .agent-settings { width: min(220px, 100%); align-self: start; }
  .agent-controls { width: min(460px, 100%); justify-self: center; }
  .agent-presets { gap: 4px 16px; }
  .agent-task { font-size: 12px; }
  .agent-readouts { margin-top: 16px; gap: 12px; }
  .agent-actions { justify-self: end; }
  .agent-data-entry { justify-self: start; }
  .agent-stage .agent-data { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .agent-node rect { transition: none; } }