/* Games, game page and job page (public/game-core.js, public/game-ux.js). Colours are the shell's tokens only, so
   light and dark both come from admin-ux.css. */
.gx-list{display:grid;gap:10px}
.gx-game{display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:16px;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 16px;cursor:pointer;box-shadow:var(--shadow)}
.gx-game:hover,.gx-turn:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.gx-thumb{width:112px;height:70px;border-radius:8px;background:var(--track);overflow:hidden;display:grid;place-items:center}
.gx-thumb img{width:100%;height:100%;object-fit:cover}
.gx-thumb.empty::after{content:"no picture yet";font-size:10px;color:var(--muted);white-space:nowrap}
.gx-main{min-width:0}.gx-main h3{margin:0 0 2px;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gx-sub{font-size:12px;color:var(--muted);overflow-wrap:anywhere}.gx-sub code{font-size:11px}
.gx-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.gx-chip{font-size:10.5px;padding:1px 7px;border-radius:5px;background:var(--track);color:var(--muted);font-family:var(--mono)}
.gx-side{display:grid;justify-items:end;gap:3px;font-size:12px;text-align:right}
.gx-counts{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}.gx-turns{font-weight:650;margin-right:4px}
.gx-cost{font-family:var(--mono);font-weight:650}.gx-when{color:var(--muted);font-size:11.5px}
.gx-pill{display:inline-flex;align-items:center;font-size:10.5px;font-weight:650;padding:1px 7px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.gx-pill.ok{color:var(--ok)}.gx-pill.err{color:var(--err)}.gx-pill.warn{color:var(--warn)}.gx-pill.run{color:var(--accent)}.gx-pill.muted{color:var(--muted)}
.gx-play{font-size:12px;font-weight:600}
.gp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.gp-title{font-size:22px;margin:4px 0;letter-spacing:-.4px}.gp-src{font-size:12px;font-weight:400}
.gp-turns{display:grid;gap:14px}.gp-end{text-align:center;margin:18px 0;font-size:12px}
.gx-turn{background:var(--panel);border:1px solid var(--border);border-left:4px solid var(--border);border-radius:12px;padding:14px 16px;cursor:pointer;box-shadow:var(--shadow)}
/* gx-t-*, not .ok/.err: the shell colours the TEXT of anything carrying those. */
.gx-t-ok{border-left-color:var(--ok)}.gx-t-err{border-left-color:var(--err)}.gx-t-warn{border-left-color:var(--warn)}.gx-t-run{border-left-color:var(--accent)}
.gx-turn header{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.gx-turn .gx-id{font-size:11px;color:var(--muted)}.gx-meta{font-size:11.5px;color:var(--muted)}.gx-turn .spacer{flex:1}
.gx-turn-shot{float:right;width:150px;height:94px;object-fit:cover;border-radius:8px;margin:0 0 8px 12px;background:var(--track)}
.gx-facts{display:grid;gap:4px;font-size:12.5px;margin-top:8px;clear:both}
.gx-line small,.gx-files small{display:inline-block;min-width:74px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.gx-verdict{color:var(--muted)}.gx-err{color:var(--err);overflow-wrap:anywhere}
.gx-ints{list-style:none;margin:2px 0;padding:0;color:var(--warn);font-size:12px}
.gx-files details{display:inline-block;margin-left:6px}.gx-files details div{font-size:11.5px;margin-top:4px}
.gx-open{margin-top:8px;font-size:12px;color:var(--accent);text-align:right}
.gx-helpers{margin-left:6px}.gx-helpers .gx-chip{margin-right:4px}
.tx-cleared{font-size:12px;margin:6px 0}
/* The transcript: the creator on the right, the agent on the left, steps and system facts between them. */
/* minmax(0,1fr): a grid row otherwise grows to its longest line, and one long shell command widened the whole run. */
.tx{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.tx-row{font-size:13px}
.tx-creator{display:flex;justify-content:flex-end}.tx-agent{display:flex}
.tx-bubble{max-width:min(760px,88%);padding:9px 13px;border-radius:12px;border:1px solid var(--border);background:var(--panel)}
.tx-creator .tx-bubble{background:color-mix(in srgb,var(--accent) 9%,var(--panel));border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}
.tx-who{font-size:11px;color:var(--muted);font-weight:650;margin-bottom:2px}
.tx-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
.tx-t{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-right:6px;font-weight:400}
.tx-live .tx-bubble{border-style:dashed}
.tx-caret{display:inline-block;width:7px;height:14px;background:var(--accent);margin-left:2px;vertical-align:-2px;animation:tx-blink 1s steps(2) infinite}
@keyframes tx-blink{50%{opacity:0}}
.tx-tool details{border:1px solid var(--border);border-radius:9px;background:color-mix(in srgb,var(--bg) 55%,var(--panel))}
.tx-tool summary{display:flex;gap:8px;align-items:baseline;padding:5px 10px;cursor:pointer;font-size:12.5px;list-style:none;min-width:0}
.tx-tool summary::-webkit-details-marker{display:none}
.tx-tool-name{font-family:var(--mono);font-size:11px;color:var(--muted);flex:0 1 auto;max-width:55%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-tool details[open] .tx-tool-name{white-space:normal;overflow-wrap:anywhere}
.tx-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-tool details[open] .tx-label{white-space:normal}
.tx-state{font-size:11px;flex:none}.tx-state.ok{color:var(--ok)}.tx-state.err{color:var(--err)}.tx-state.run{color:var(--accent)}
.tx-dur{font-family:var(--mono);font-size:10.5px;color:var(--muted);flex:none}
.tx-check details{border-color:color-mix(in srgb,var(--ok) 35%,var(--border))}.tx-fail details{border-color:color-mix(in srgb,var(--err) 45%,var(--border))}
.tx-io{padding:4px 10px 8px}.tx-io-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:4px 0 2px}
.tx-io pre{margin:0;max-height:360px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:11.5px/1.45 var(--mono);background:var(--panel);border:1px solid var(--border);border-radius:7px;padding:7px 9px}
.tx-cut{font-size:11px;color:var(--muted);margin-top:3px}
/* Helper agents, purchases and checks: cards between the agent's own steps. */
.tx-card{border:1px solid var(--border);border-radius:11px;background:var(--panel);padding:8px 12px;min-width:0}
.tx-helper .tx-card{border-left:3px solid color-mix(in srgb,var(--accent) 70%,var(--border))}
.tx-media .tx-card{border-left:3px solid color-mix(in srgb,var(--ok) 55%,var(--border))}
.tx-media.refused .tx-card{border-left-color:color-mix(in srgb,var(--err) 60%,var(--border))}
.tx-card-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;min-width:0}
.tx-card-h .spacer{flex:1}
.tx-ico{font-size:15px;line-height:1}
.tx-card-sub{font-size:12.5px;color:var(--muted);margin-top:4px;overflow-wrap:anywhere;white-space:pre-wrap}
.tx-card-name{font-size:12.5px;font-weight:650;margin-top:4px}
.tx-card-link{font-size:12px}
.tx-card-err{font-size:12px;color:var(--err);margin-top:4px;overflow-wrap:anywhere}
.tx-card-out{margin-top:6px}.tx-card-out summary{cursor:pointer;font-size:12px;color:var(--accent)}
.tx-card-out .tx-body{max-height:420px;overflow:auto;margin-top:6px;font-size:12.5px;border-top:1px solid var(--border);padding-top:6px}
.tx-media-prev{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.tx-media-prev img{max-width:220px;max-height:160px;border-radius:8px;border:1px solid var(--border);display:block;background:var(--track)}
.tx-media-prev audio{height:32px;max-width:100%}
.tx-check-line{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:12.5px;padding:4px 10px;border-radius:8px;background:var(--track)}
.tx-check-line.err{background:color-mix(in srgb,var(--err) 9%,var(--panel))}.tx-check-line.ok{background:color-mix(in srgb,var(--ok) 8%,var(--panel))}
.tx-check-sum{color:var(--muted);flex:1;min-width:0;overflow-wrap:anywhere}
.linkish{border:0;background:none;padding:0;min-height:0;color:var(--accent);font-size:inherit;font-weight:600;cursor:pointer}
.tx-sys{text-align:center;font-size:12px;color:var(--muted);padding:2px 0}
.tx-sys.ok{color:var(--ok)}.tx-sys.warn{color:var(--warn)}.tx-sys.err{color:var(--err)}
.tx-detail{font-size:11.5px;color:var(--muted);overflow-wrap:anywhere;max-width:760px;margin:0 auto}
.tx-list summary{cursor:pointer;font-size:11px}.tx-denied-in{text-align:left;margin:4px auto 0;max-width:760px;max-height:240px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.45 var(--mono);background:var(--panel);border:1px solid var(--border);border-radius:7px;padding:6px 8px}.tx-list div{font-size:11px;max-width:760px;margin:2px auto}
.tx-think details summary{cursor:pointer;font-size:12px;color:var(--muted)}.tx-think .tx-body{color:var(--muted);font-size:12px}
.tx-loading{text-align:center;font-size:12px;margin:10px}
.tx-summary{margin:6px 0 0;padding-left:18px;font-size:12.5px}
/* The sticky header: what the run is doing, at any scroll position. */
.jp-head{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--border);padding:10px 0;margin-bottom:10px}
.jh-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.jh-top .spacer{flex:1}
.jh-state{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;min-width:0}
.jh-state.ok{color:var(--ok)}.jh-state.warn{color:var(--warn)}.jh-state.err{color:var(--err)}.jh-state.idle,.jh-state.done{color:var(--muted)}
.jh-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;margin-top:8px}
.jh-facts div{background:var(--track);border-radius:8px;padding:4px 9px;min-width:0}.jh-facts small{display:block;color:var(--muted);font-size:10.5px}
.jh-facts b{font-size:12.5px;overflow-wrap:anywhere}
.jp-crumbs{font-size:12px;color:var(--muted);margin:4px 0 12px;overflow-wrap:anywhere}
.jp-children{font-size:12px;margin-bottom:12px}.jp-children summary{cursor:pointer}
.gx-kept{border:1px solid var(--warn);background:color-mix(in srgb,var(--warn) 8%,var(--panel));border-radius:10px;padding:10px 14px;margin:0 0 12px;font-size:13px}
.gx-kept p{margin:3px 0}
.jp-new{position:fixed;bottom:22px;right:28px;z-index:6;box-shadow:var(--shadow)}
@media(max-width:760px){
  .gx-game{grid-template-columns:72px minmax(0,1fr)}.gx-thumb{width:72px;height:52px}.gx-side{grid-column:1/-1;justify-items:start;text-align:left}
  .gx-counts{justify-content:flex-start}.gx-turn-shot{width:96px;height:60px}.tx-bubble{max-width:100%}
}
/* Phones (2026-09-28 audit at 390 px): the run's sticky header — seven fact boxes — covered half the screen while
   scrolling, and a check's summary was squeezed into a column a few words wide. */
@media (max-width: 640px) {
  .jp-head { position: static; backdrop-filter: none; }
  .jh-facts { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; }
  .jh-facts div { padding: 3px 7px; }
  .tx-check-line .tx-check-sum { flex-basis: 100%; }
  .tx-media-prev img { max-width: 100%; }
  .tx-card-h .tx-dur { width: 100%; text-align: left; }
}