/* Agent Monitoring: a Crew Observed (the agent-monitoring and Observability viewers' stylesheet,
   copied in part). Opened full screen or in an iframe, which cannot see the site's own light/dim
   switch, so it follows the reader's system preference, as the other viewers do. */

:root {
  --bg: #ffffff;
  --card: #ffffff;
  --border: #dfe3e8;
  --text: #22272e;
  --dim: #5f6b78;
  --accent: #326ce5;
  --btn: #f4f5f7;
  --panel: #0d2436;
  --panel-text: #eaf1f6;
  --raw: #f7f8fa;
  --flash: rgba(255, 196, 0, 0.3);
  --code-bg: #f6f8fa;
  --ok: #1f883d;
  --late: #cf222e;
  --busy: #bf8700;
  /* the three signals, as on the Observability viewer, and the watchdog's health checks */
  --logs: #0f766e; --traces: #7c3aed; --metrics: #c2410c; --health: #be185d;
  /* the spans, by what they are */
  --s-run: #64748b; --s-agent: #3b82f6; --s-chat: #8b5cf6; --s-tool: #d97706;
  --term: #0f1720; --term-text: #d7e0e8;
  --graf: #f4f5f5; --graf-panel: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1d2b;
    --card: #112b40;
    --border: #234862;
    --text: #eaf1f6;
    --dim: #9fb2c2;
    --accent: #6f9bff;
    --btn: #16374f;
    --panel: #081b29;
    --raw: #0d2233;
    --flash: rgba(255, 196, 0, 0.18);
    --code-bg: #0d2233;
    --ok: #4ac26b;
    --late: #ff7b72;
    --busy: #e3b341;
    --logs: #2dd4bf; --traces: #a78bfa; --metrics: #fb923c; --health: #f472b6;
    --s-run: #94a3b8; --s-agent: #60a5fa; --s-chat: #a78bfa; --s-tool: #f59e0b;
    --term: #050c12;
    --graf: #111217; --graf-panel: #181b1f;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.dim { color: var(--dim); font-weight: 400; }
a { color: var(--accent); }
.kv-app { padding: 0.5rem 16px 0.8rem; max-width: 1900px; margin: 0 auto; }
.kv-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem; margin: 0 0 0.45rem; }
.kv-head h1 { font-size: 1.3rem; margin: 0; letter-spacing: -0.01em; }
.kv-head p { margin: 0; color: var(--dim); font-size: 0.92rem; }
.in-viewer .kv-head { display: none; }

/* --- the controls, the scene's explanation (constant through the scene), and what the step has just done */
.am-top { display: grid; grid-template-columns: 15rem minmax(0, 1fr) minmax(0, 1fr); gap: 12px; height: var(--top-h); margin-bottom: 10px; }
:root { --top-h: 150px; }
.kv-bar { display: flex; flex-direction: column; gap: 0.45rem; }
.kv-bar .row { display: flex; align-items: center; gap: 0.5rem; }
.kv-bar .count { font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; color: var(--dim); margin-left: auto; }
.kv-btn { background: var(--btn); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.35rem 0.9rem; font-size: 0.88rem; cursor: pointer; font-family: inherit; }
.kv-btn:hover:not(:disabled) { border-color: var(--accent); }
.kv-btn:disabled { opacity: 0.45; cursor: default; }
.kv-btn.play { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.kv-bar select { background: var(--btn); color: var(--text); border: 1px solid var(--border); border-radius: 7px;
  padding: 0.3rem 0.4rem; font-size: 0.86rem; font-family: inherit; min-width: 0; max-width: 100%; }
.am-explain { overflow: auto; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px;
  padding: 0.45rem 0.8rem; font-size: 0.86rem; line-height: 1.42; background: var(--card); }
.am-explain p { margin: 0 0 0.3rem; }
.am-explain .main { font-weight: 650; font-size: 1.02rem; }
.am-explain ul.steps { margin: 0 0 0.3rem; padding-left: 1.1rem; }
.am-explain ul.steps li { margin: 0 0 0.15rem; }
.am-explain ul.steps ul.steps { margin: 0.1rem 0; list-style: circle; }
.am-explain.about { border-left-color: var(--border); }
.am-explain.about .main { font-size: 0.95rem; }
.am-explain.about:has(li.lit) li:not(.lit) { color: var(--dim); }
/* lit bullets stay lit through the scene; the current one is darker */
.am-explain.about li.lit { --c: #d4a300; color: var(--text); background: color-mix(in srgb, var(--c) 16%, transparent);
  border-left: 3px solid var(--c); border-radius: 4px; margin-left: -0.4rem; padding-left: 0.3rem; }
.am-explain.about li.lit.now { background: color-mix(in srgb, var(--c) 30%, transparent); }
.am-explain.about li.lit li { color: var(--text); }
.am-explain code { font-size: 0.92em; background: var(--code-bg); padding: 0 0.2em; border-radius: 3px; }

/* --- the stage: the programs by role, left; the screen we read, right */
.am-stage { position: relative; display: grid; gap: 10px; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  height: max(540px, calc(100vh - var(--top-h) - 3.6rem)); }
@media (min-width: 1101px) { .in-viewer .am-stage { height: max(360px, calc(100vh - var(--top-h) - 1.4rem)); } }
@media (max-width: 1100px) {
  .am-top { grid-template-columns: minmax(0, 1fr); height: auto; position: sticky; top: 0; z-index: 40; background: var(--bg);
    margin: 0 -16px 10px; padding: 0.4rem 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
  .kv-bar { flex-direction: row; flex-wrap: wrap; }
  .am-explain { max-height: 30vh; }
  .am-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: 600px 560px; height: auto; }
}

.kv-card { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 12px; background: var(--card); font-size: 0.84rem;
  transition: box-shadow 0.25s, border-color 0.25s, opacity 0.4s; }
.kv-card.here { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.kv-card > header { flex: none; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.4rem 0.7rem 0.35rem; border-bottom: 1px solid var(--border); }
.kv-card > header h2 { font-size: 0.92rem; margin: 0; flex: 1; min-width: 0; }
.kv-card > header .clock { font: 600 0.8rem ui-monospace, Menlo, monospace; color: var(--dim); }
.kv-body { flex: 1; min-height: 0; overflow: auto; padding: 0.45rem 0.7rem; }
.stage-tag { font: 600 0.72rem ui-monospace, Menlo, monospace; border: 1px solid var(--accent); color: var(--accent);
  border-radius: 6px; padding: 0.05rem 0.4rem; }

/* --- the map: a row per signal, a column per role, a box per program */
.map-body { position: relative; display: grid; gap: 8px 44px; padding: 0.4rem 0.6rem 0.6rem;
  grid-template-columns: 3.6rem minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.75fr) minmax(0, 1fr);
  grid-template-rows: auto repeat(4, minmax(0, 1fr)) auto; overflow: hidden; }
.map-body .role { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); font-weight: 700;
  text-align: center; border-bottom: 2px solid var(--border); padding-bottom: 0.15rem; }
.map-body .sig { align-self: center; font-size: 0.76rem; font-weight: 700; color: var(--c); writing-mode: horizontal-tb; }
.sig.s-logs, .lk.s-logs { --c: var(--logs); } .sig.s-traces, .lk.s-traces { --c: var(--traces); }
.sig.s-metrics, .lk.s-metrics { --c: var(--metrics); } .sig.s-health, .lk.s-health { --c: var(--health); }
.sig.s-world, .band.s-world { --c: var(--dim); }
.band.s-logs { --c: var(--logs); } .band.s-traces { --c: var(--traces); } .band.s-metrics { --c: var(--metrics); } .band.s-health { --c: var(--health); }
/* a band reaches into half the gap above and below it, and out to the card's edges */
.band { margin: -4px -0.6rem; border-top: 1px solid color-mix(in srgb, var(--c) 35%, var(--border));
  background: color-mix(in srgb, var(--c) 5%, transparent); }
.band.s-logs { border-top-color: var(--border); }
.band.s-world { border-top: 2px dashed var(--border); background: none; }
.map-body .sig { position: relative; z-index: 1; padding-left: 0.1rem; }
#am-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 4; }
#am-links path { fill: none; stroke: var(--c); stroke-width: 2; }
#am-links .lk.off path { stroke: var(--border); stroke-dasharray: 4 4; }
#am-links .lk.off text { fill: var(--dim); opacity: 0.6; }
#am-links text { fill: var(--c); font: 600 9.5px ui-monospace, Menlo, monospace; paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
#am-links .lk.act path { stroke-width: 3.5; }
#am-links marker path { fill: context-stroke; stroke: none; }

.prog { position: relative; z-index: 3; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.1rem;
  border: 1.5px solid color-mix(in srgb, var(--text) 35%, var(--border)); border-radius: 9px; background: var(--card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); padding: 0.3rem 0.45rem; font-size: 0.74rem; }
.prog > b { font-size: 0.8rem; }
.prog > b a { color: inherit; text-decoration: none; }
.prog > b a:hover { text-decoration: underline; }
.prog small { color: var(--dim); font-size: 0.7rem; line-height: 1.25; }
.prog code { font-size: 0.68rem; }
.prog.off { opacity: 0.5; border-style: dashed; background: transparent; box-shadow: none; }
.prog.off::after { content: attr(data-off); position: absolute; right: 0.35rem; bottom: 0.25rem; font-size: 0.62rem; color: var(--dim); font-style: italic; }
.prog.fresh { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.prog.bad { border-color: var(--late); background: color-mix(in srgb, var(--late) 6%, var(--raw)); }
.prog .badge { align-self: flex-start; font: 700 0.66rem ui-monospace, Menlo, monospace; color: #fff; background: var(--late); border-radius: 4px; padding: 0 0.3rem; }
.prog .badge.warn { background: var(--busy); }
.prog .badge.ok { background: var(--ok); }
/* a store's own UI, in the read column: a part of the same box */
.prog .ui { position: absolute; top: 0.3rem; bottom: 0.3rem; right: 0.3rem; display: flex; align-items: center; justify-content: center;
  text-align: center; border: 1px dashed var(--border); border-radius: 6px; padding: 0 0.3rem; font-size: 0.66rem; line-height: 1.2; color: var(--dim); }
.prog .line { font: 0.68rem ui-monospace, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dim); }

/* the crew: the container, its run, the four agents, its observe/ files */
.prog.crew { gap: 0.25rem; }
.crew .top { display: flex; gap: 0.4rem; align-items: baseline; flex-wrap: wrap; }
.crew .run { font: 0.7rem ui-monospace, Menlo, monospace; }
.crew .state { font-size: 0.68rem; font-weight: 700; color: var(--ok); }
.crew .state.paused, .crew .state.stopped { color: var(--late); }
.crew .state.restarting { color: var(--busy); }
.agents { display: flex; flex-direction: column; gap: 3px; margin-top: 0.2rem; }
.agent { display: grid; grid-template-columns: 4.9rem minmax(0, 1fr); align-items: center; gap: 0.3rem; border: 1px solid var(--border);
  border-radius: 6px; padding: 0.12rem 0.35rem; background: var(--card); }
.agent b { font-size: 0.74rem; }
.agent.on { border-color: var(--s-agent); background: color-mix(in srgb, var(--s-agent) 10%, var(--card)); }
.agent.hung { border-color: var(--late); }
.agent .work { font: 0.64rem ui-monospace, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dim); }
.agent.on .work { color: var(--text); }
.crew .sdk { position: absolute; left: 0.45rem; right: 0.45rem; display: flex; flex-direction: column; gap: 0.05rem; border: 1px dashed var(--traces); border-radius: 6px;
  padding: 0.15rem 0.35rem; font-size: 0.66rem; color: var(--dim); background: var(--card); }
.crew .sdk b { font-size: 0.7rem; color: var(--traces); }
.crew .sdk:not(.on) { opacity: 0.45; }
.crew .sdk.on { border-style: solid; color: var(--text); }
/* on the box's right edge, where their arrows leave */
.crew .port { position: absolute; right: 0.45rem; font: 0.68rem ui-monospace, Menlo, monospace; color: var(--dim); }
.crew .files { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.15rem 0.35rem; font: 0.64rem ui-monospace, Menlo, monospace; color: var(--dim); }
.crew .files a { color: var(--dim); }

/* --- the screen: what we open at this step, a terminal or a browser tab */
.am-screen > header { background: var(--raw); }
.am-screen > header .dots { display: inline-flex; gap: 4px; }
.am-screen > header .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.addr { flex: 1; min-width: 0; font: 0.76rem ui-monospace, Menlo, monospace; background: var(--card); border: 1px solid var(--border);
  border-radius: 6px; padding: 0.15rem 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.addr.cmd { background: var(--term); color: var(--term-text); border-color: var(--term); }
.addr .app { color: var(--dim); }
.scr-body { padding: 0; display: flex; flex-direction: column; }

/* a terminal */
.term { flex: 1; min-height: 0; overflow: auto; background: var(--term); color: var(--term-text); margin: 0; padding: 0.45rem 0.6rem;
  font: 0.7rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; list-style: none; }
.term li { white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 3px; padding: 0 0.2rem; }
.term .t { color: #7d8b99; }
.term .lv { color: #4ac26b; }
.term .lv.error { color: #ff7b72; font-weight: 700; }
.term .lv.warning { color: #e3b341; font-weight: 700; }
.term .tid { color: #a78bfa; }
.term .sid { color: #67e8f9; }
.term .w-alert { color: #ff7b72; font-weight: 700; }
.term .w-restart { color: #e3b341; font-weight: 700; }
.term .w-stop { color: #ff7b72; font-weight: 700; }
.term.ids .tid, .term.ids .sid { background: rgba(167, 139, 250, 0.22); border-radius: 3px; }
.term li.act { background: rgba(255, 196, 0, 0.22); outline: 1px solid rgba(255, 196, 0, 0.6); }
.term li.more { color: #7d8b99; font-style: italic; text-align: center; }
.term .prompt { color: #4ac26b; }

/* a plain text page: /metrics */
.plain { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 0.45rem 0.7rem; font: 0.7rem/1.45 ui-monospace, Menlo, monospace; list-style: none; }
.plain li { white-space: pre; border-radius: 3px; }
.plain .c { color: var(--dim); }
.plain .v { color: var(--metrics); font-weight: 700; }
.plain li.act { background: color-mix(in srgb, var(--flash) 90%, transparent); }

/* Jaeger: the search, a trace's time line */
.jaeger { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.4rem; padding: 0.4rem 0.6rem; overflow: hidden; }
.tlist { flex: none; list-style: none; margin: 0; padding: 0; max-height: 9.5rem; overflow: auto; font-size: 0.74rem; }
.tlist .form { display: flex; gap: 0.6rem; align-items: center; font-size: 0.72rem; color: var(--dim); padding-bottom: 0.25rem; }
.tlist .form code { color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 0 0.35rem; background: var(--raw); }
.tlist li.tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.5rem; align-items: baseline;
  padding: 0.12rem 0.3rem; border-radius: 5px; border-bottom: 1px dashed var(--border); cursor: pointer; }
.tlist li.tr:hover { background: var(--raw); }
.tlist li.sel { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.tlist .nm { font-family: ui-monospace, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlist .n { color: var(--dim); font-size: 0.7rem; white-space: nowrap; }
.tlist .e { color: var(--late); font-weight: 700; }
.tlist .d { font: 700 0.72rem ui-monospace, Menlo, monospace; }
.j-trace { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid var(--border); padding-top: 0.3rem; }
.j-trace .th { display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; align-items: baseline; font-size: 0.78rem; margin-bottom: 0.15rem; }
.j-trace .th code { font-size: 0.7rem; color: var(--traces); }
.j-trace .empty { color: var(--dim); font-style: italic; padding: 0.6rem 0; }
.ticks { position: relative; height: 1rem; margin-left: 40%; border-bottom: 1px solid var(--border); font: 0.66rem ui-monospace, Menlo, monospace; color: var(--dim); }
.ticks span { position: absolute; transform: translateX(-50%); }
.ticks span:first-child { transform: none; }
.spans { list-style: none; margin: 0.2rem 0 0; padding: 0; }
.spans li { display: grid; grid-template-columns: 40% minmax(0, 1fr); align-items: center; min-height: 1.35rem; border-radius: 4px; cursor: pointer; }
.spans li:hover { background: var(--raw); }
.spans .nm { padding-left: calc(var(--d) * 0.85rem); font: 0.72rem ui-monospace, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spans .track { position: relative; height: 1.1rem; }
.spans .bar { position: absolute; top: 0.2rem; height: 0.7rem; border-radius: 3px; background: var(--c); }
.spans .dur { position: absolute; top: 0; padding: 0 0.3rem; font: 0.66rem ui-monospace, Menlo, monospace; color: var(--dim); white-space: nowrap; }
.spans .k-crew { --c: var(--s-run); } .spans .k-agent { --c: var(--s-agent); } .spans .k-llm { --c: var(--s-chat); } .spans .k-tool { --c: var(--s-tool); }
.spans li.err .bar { background: var(--late); }
.spans li.err .nm { color: var(--late); font-weight: 700; }
.spans li.act { background: color-mix(in srgb, var(--flash) 90%, transparent); }
.spans li.det { display: block; cursor: default; background: var(--raw); border: 1px solid var(--border); margin: 0.1rem 0 0.3rem; padding: 0.3rem 0.5rem; }
.det table { border-collapse: collapse; font: 0.7rem ui-monospace, Menlo, monospace; }
.det td { padding: 0.04rem 0.6rem 0.04rem 0; vertical-align: top; overflow-wrap: anywhere; }
.det td:first-child { color: var(--dim); white-space: nowrap; }
.det tr.grp td { padding-top: 0.25rem; font: 700 0.62rem -apple-system, 'Segoe UI', sans-serif; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); }
.det tr.bad td:last-child { color: var(--late); font-weight: 700; }

/* Prometheus: a query, its graph, its result */
.prom { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.45rem; padding: 0.5rem 0.7rem; overflow: auto; }
.prom .q { font: 0.76rem ui-monospace, Menlo, monospace; border: 1px solid var(--accent); border-radius: 6px; padding: 0.3rem 0.5rem; background: var(--card); }
.prom .tabs { display: flex; gap: 0.8rem; font-size: 0.72rem; color: var(--dim); border-bottom: 1px solid var(--border); }
.prom .tabs b { color: var(--text); border-bottom: 2px solid var(--accent); }
.prom table { border-collapse: collapse; font: 0.7rem ui-monospace, Menlo, monospace; width: 100%; }
.prom td { padding: 0.15rem 0.4rem; border-bottom: 1px solid var(--border); }
.prom td:last-child { text-align: right; font-weight: 700; color: var(--metrics); }
.prom tr.act td { background: color-mix(in srgb, var(--flash) 90%, transparent); }
.graph { width: 100%; height: 150px; flex: none; }
.graph .grid { stroke: var(--border); }
.graph .ax { fill: var(--dim); font: 9px ui-monospace, Menlo, monospace; }
.graph polyline { fill: none; stroke-width: 1.8; }
.graph .key { font: 9.5px ui-monospace, Menlo, monospace; }

/* Grafana: the dashboard "The crew", and Explore */
.graf { flex: 1; min-height: 0; overflow: auto; background: var(--graf); padding: 0.45rem; display: grid; gap: 6px;
  grid-template-columns: repeat(24, minmax(0, 1fr)); grid-auto-rows: 15px; align-content: start; }
.graf .row-h { grid-column: 1 / -1; font-size: 0.74rem; font-weight: 700; align-self: end; }
.gp { background: var(--graf-panel); border: 1px solid var(--border); border-radius: 4px; padding: 0.2rem 0.35rem; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.gp > b { font-size: 0.66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.gp svg { flex: 1; min-height: 0; width: 100%; }
.gp .stat { flex: 1; display: flex; align-items: center; justify-content: center; font: 700 1.5rem -apple-system, 'Segoe UI', sans-serif; color: var(--ok); }
.gp .stat.bad { color: var(--late); }
.gp .stat.warn { color: var(--busy); }
.gp.act { outline: 2px solid #d4a300; }
.gp .glines { list-style: none; margin: 0; padding: 0; font: 0.62rem/1.4 ui-monospace, Menlo, monospace; overflow: hidden; }
.gp .glines li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp .glines .lv.error { color: var(--late); font-weight: 700; }
.gp .legend { display: flex; flex-wrap: wrap; gap: 0 0.5rem; font: 0.58rem ui-monospace, Menlo, monospace; color: var(--dim); }
.gp .legend i { display: inline-block; width: 8px; height: 3px; margin-right: 2px; vertical-align: middle; }
.explore { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--graf); padding: 0.45rem; gap: 0.4rem; overflow: hidden; }
.explore .q { font: 0.74rem ui-monospace, Menlo, monospace; border: 1px solid var(--border); border-radius: 4px; padding: 0.25rem 0.45rem; background: var(--graf-panel); }
.explore .split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.4rem; }
.explore .pane { background: var(--graf-panel); border: 1px solid var(--border); border-radius: 4px; overflow: auto; padding: 0.3rem 0.4rem; }
.explore .pane h4 { margin: 0 0 0.25rem; font-size: 0.7rem; color: var(--dim); }
.xlines { list-style: none; margin: 0; padding: 0; font: 0.66rem/1.45 ui-monospace, Menlo, monospace; }
.xlines li { white-space: pre-wrap; overflow-wrap: anywhere; border-bottom: 1px dashed var(--border); padding: 0.1rem 0; }
.xlines .lv.error { color: var(--late); font-weight: 700; }
.xlines .link { display: inline-block; margin-top: 0.1rem; font-size: 0.62rem; color: #fff; background: var(--accent); border-radius: 3px; padding: 0 0.3rem; }
.xlines li.act { background: color-mix(in srgb, var(--flash) 90%, transparent); }
.explore .pane .spans li { grid-template-columns: 50% minmax(0, 1fr); }

/* --- a step's spotlight: what it names pulses, the rest dims */
.am-stage .act:not(li):not(.lk) { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 1px; }

/* --- what is in the air: a message flying along its arrow */
#am-fly { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; pointer-events: none; z-index: 50; }
#am-fly .trail { position: absolute; left: 0; top: 0; overflow: visible; }
#am-fly .trail polyline { fill: none; stroke: var(--c, var(--accent)); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 3 7; }
#am-fly .msg { position: absolute; transform: translate(-50%, -50%); background: var(--panel); color: var(--panel-text);
  border-radius: 6px; padding: 0.12rem 0.5rem; font-size: 0.72rem; font-weight: 600; white-space: nowrap;
  font-family: ui-monospace, Menlo, Consolas, monospace; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); border-left: 4px solid var(--c, var(--accent)); }

/* a laptop's window: a shorter top row, so the stage keeps more of the height */
@media (min-width: 1101px) and (max-height: 820px) {
  :root { --top-h: 118px; }
  .kv-bar { gap: 0.3rem; }
  .am-explain { font-size: 0.8rem; line-height: 1.35; padding: 0.35rem 0.7rem; }
  .am-explain .main { font-size: 0.94rem; }
  .agents { gap: 2px; margin-top: 0.1rem; }
  .agent { padding: 0 0.3rem; }
  .crew .sdk { font-size: 0.6rem; line-height: 1.2; }
}