/* Arena Studio Alt — calm bench-instrument shell.
   All selectors are gated by html.arena-alt so the original Studio is unchanged. */

html.arena-alt {
  --alt-enamel:#0b1013;
  --alt-panel:#12191d;
  --alt-well:#0d1418;
  --alt-line:#33434a;
  --alt-edge:#607077;
  --alt-ink:#dce7e5;
  --alt-muted:#91a19f;
  --alt-phosphor:#8bff9a;
  --alt-phosphor-hot:#baffc1;
  --alt-brand:#00e676;
  --alt-amber:#ffc857;
  --alt-cyan:#7dd9ff;
  --alt-red:#ff6b5e;
  --alt-pink:#ff79ad;
  --alt-shadow:rgba(0,0,0,.48);
  color-scheme:dark;
}

html.arena-alt[data-theme="light"] {
  --alt-enamel:#dfdacb;
  --alt-panel:#f2eddd;
  --alt-well:#d5cfbf;
  --alt-line:#8b928c;
  --alt-edge:#66716b;
  --alt-ink:#172521;
  --alt-muted:#52615c;
  --alt-phosphor:#09683f;
  --alt-phosphor-hot:#064a2e;
  --alt-brand:#087a46;
  --alt-amber:#8a4f00;
  --alt-cyan:#005d78;
  --alt-red:#a32920;
  --alt-pink:#a21454;
  --alt-shadow:rgba(48,43,33,.18);
  color-scheme:light;
}

html.arena-alt body {
  --bg:var(--alt-enamel);
  --surface:var(--alt-panel);
  --surface2:var(--alt-well);
  --surface-2:var(--alt-well);
  --border:var(--alt-line);
  --edge:var(--alt-edge);
  --text:var(--alt-ink);
  --text-dim:var(--alt-muted);
  --dim:var(--alt-muted);
  --accent:var(--alt-phosphor);
  --hover:var(--alt-phosphor-hot);
  --beta:var(--alt-cyan);
  --warn:var(--alt-amber);
  --danger:var(--alt-red);
  --error:var(--alt-red);
  --err:var(--alt-red);
  --rec:var(--alt-red);
  --mode:var(--alt-phosphor);
  --modec:var(--alt-enamel);
  background-color:var(--alt-enamel);
  background-image:
    linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:24px 24px;
  font-family:var(--mono);
  letter-spacing:.005em;
}

html.arena-alt[data-theme="light"] body {
  background-image:
    linear-gradient(rgba(23,37,33,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,37,33,.025) 1px,transparent 1px);
}

html.arena-alt body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:4000;
  pointer-events:none;
  opacity:.06;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,currentColor 4px);
  mix-blend-mode:soft-light;
}

html.arena-alt[data-theme="light"] body::after { opacity:.025; }

/* Instrument controls: compact, squared, legible. */
html.arena-alt button,
html.arena-alt select,
html.arena-alt input,
html.arena-alt textarea { accent-color:var(--accent); }

html.arena-alt .pill,
html.arena-alt .ribbon-btn,
html.arena-alt .connect,
html.arena-alt .btn-run,
html.arena-alt .btn-testexp,
html.arena-alt .btn-stop,
html.arena-alt .header-btn,
html.arena-alt .cmenu-btn,
html.arena-alt .cmenu-item,
html.arena-alt .edit-tab,
html.arena-alt .seg,
html.arena-alt .seg2,
html.arena-alt .chip {
  border-radius:3px;
  box-shadow:none;
}

html.arena-alt button:focus-visible,
html.arena-alt input:focus-visible,
html.arena-alt select:focus-visible,
html.arena-alt textarea:focus-visible,
html.arena-alt [role="button"]:focus-visible {
  outline:2px solid var(--amber);
  outline-offset:2px;
}

/* One content-driven ribbon, like Classic. The JS keeps the existing wired
   groups as siblings; display:contents lets every live control use the first
   row until its intrinsic width genuinely requires a wrap. */
html.arena-alt .topbar {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  min-height:48px;
  padding:7px 10px;
  overflow:visible;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,var(--text) 8%),var(--surface));
  border-bottom:1px solid var(--edge);
  box-shadow:0 4px 18px var(--alt-shadow);
  flex:0 0 auto;
}

html.arena-alt .alt-top-primary,
html.arena-alt .alt-top-context {
  display:contents;
}

html.arena-alt .alt-top-navigation,
html.arena-alt .alt-top-actions {
  display:contents;
}

html.arena-alt .alt-context-spacer {
  flex:1 1 0;
  min-width:12px;
}

html.arena-alt .brand {
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--alt-brand);
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-shadow:0 0 10px color-mix(in srgb,var(--alt-brand) 42%,transparent);
}

html.arena-alt .alt-top-primary .seg {
  margin-left:10px;
  height:29px;
  border-color:var(--edge);
  border-radius:2px;
}

html.arena-alt .alt-top-primary .seg button {
  min-width:82px;
  justify-content:center;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:10px;
}

html.arena-alt .alt-top-primary .seg button.on {
  background:var(--text);
  color:var(--bg);
}

html.arena-alt .alt-top-primary .seg button.console.on {
  background:var(--accent);
  color:var(--bg);
}

html.arena-alt .status .dot,
html.arena-alt .rb-dot {
  border-radius:1px;
  box-shadow:none;
  border:1px solid var(--edge);
}

html.arena-alt #statusTxt { display:none; }

html.arena-alt body.connected .status .dot,
html.arena-alt .rb-dot.on {
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 9px color-mix(in srgb,var(--accent) 70%,transparent);
}

html.arena-alt .connect {
  background:var(--accent);
  color:var(--bg);
  border:1px solid var(--accent);
  inline-size:100px;
  min-inline-size:100px;
  padding:7px 8px;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:10px;
}

html.arena-alt body.connected .connect {
  background:var(--accent);
  border-color:var(--accent);
  color:var(--bg);
  font-weight:700;
}

html.arena-alt #fileMenuBtn {
  border-color:var(--edge);
  color:var(--text);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:10px;
}

html.arena-alt #fileMenu .menu {
  min-width:310px;
  border-radius:3px;
  border-color:var(--edge);
  box-shadow:8px 10px 0 color-mix(in srgb,var(--bg) 72%,transparent);
}

/* The shared markup initially places global settings at the bottom of File.
   Keep them out of sight during the brief parse-to-Alt handoff; JS reparents
   the same wired node into the global Settings panel. */
html.arena-alt #fileMenu #ghBlock { display:none; }

html.arena-alt .alt-context-left,
html.arena-alt .alt-context-right {
  display:contents;
}

html.arena-alt #fileMenu {
  position:relative;
  z-index:70;
  /* The Protocol popup is absolutely positioned below this ribbon. Clipping the
     flex row also clipped the entire menu even though its wired `open` state was
     correct. Individual document labels still own their own ellipsis below. */
  overflow:visible;
}

html.arena-alt .alt-context-left .doc-name {
  max-width:min(22vw,220px);
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width:1600px) {
  html.arena-alt .alt-context-left .doc-name { max-width:110px; }
  html.arena-alt body.editmode .alt-top-primary .seg {
    flex:0 1 198px;
    min-width:174px;
    margin-left:2px;
  }
  html.arena-alt body.editmode .alt-top-primary .seg button {
    flex:1 1 0;
    min-width:0;
    padding-left:5px;
    padding-right:5px;
  }
  html.arena-alt body.editmode .alt-edit-tools [data-alt-short] { font-size:0!important; }
  html.arena-alt body.editmode .alt-edit-tools [data-alt-short]::after {
    content:attr(data-alt-short);
    font:600 11px var(--head);
    letter-spacing:.04em;
  }
  html.arena-alt body.editmode .alt-edit-tools .edit-tab,
  html.arena-alt body.editmode .alt-edit-tools .header-btn {
    padding-left:7px;
    padding-right:7px;
  }
  html.arena-alt body.editmode .alt-top-primary .safemode-ind[data-alt-short] {
    font-size:0!important;
  }
  html.arena-alt body.editmode .alt-top-primary .safemode-ind[data-alt-short]::after {
    content:attr(data-alt-short);
    font:600 12px var(--head);
  }
}

/* A loaded editor has the extra Designer/YAML/undo/settings toolset. At a
   normal laptop width, keep the meaningful navigation and action labels whole
   and collapse only the already-tooltipped filename readout to its document
   glyph. This is enough to keep the complete ribbon on one row at 1280px. */
@media (max-width:1400px) {
  html.arena-alt body.editmode .topbar { gap:4px; }
  html.arena-alt body.editmode .alt-context-left .doc-name {
    width:29px;
    max-width:29px;
    text-overflow:clip;
  }
  html.arena-alt body.editmode .alt-top-primary .seg { flex-basis:190px; }
  html.arena-alt body.editmode .alt-top-primary .connect {
    inline-size:90px;
    min-inline-size:90px;
  }
}

/* At the screenshot-width Run layout, the filename is likewise the only
   expendable horizontal label: its glyph and tooltip preserve the context
   while Connect, Settings, and Help remain on the first ribbon row. */
@media (max-width:1200px) {
  html.arena-alt .alt-context-left .doc-name {
    width:29px;
    max-width:29px;
    text-overflow:clip;
  }
  html.arena-alt body:not(.editmode) .topbar { gap:4px; }
  html.arena-alt body:not(.editmode) .alt-top-primary .seg {
    flex:0 1 245px;
    min-width:230px;
    margin-left:4px;
  }
  html.arena-alt body:not(.editmode) .alt-top-primary .connect {
    inline-size:90px;
    min-inline-size:90px;
  }
}

/* The original, fully wired editor header joins the same wrapping ribbon. */
html.arena-alt .alt-edit-tools {
  display:none;
}

html.arena-alt body.editmode .alt-edit-tools { display:contents; }
html.arena-alt .alt-edit-tools .header-spacer,
html.arena-alt .alt-edit-tools [hidden] { display:none!important; }

html.arena-alt .alt-edit-tools .edit-tabs {
  display:flex;
  flex:0 0 auto;
  overflow:hidden;
  border:1px solid var(--edge);
  border-radius:3px;
}

html.arena-alt .alt-edit-tools .edit-tab,
html.arena-alt .alt-edit-tools .header-btn {
  min-height:27px;
  margin:0;
  padding:4px 9px;
  border:1px solid var(--edge);
  border-radius:3px;
  background:var(--surface);
  color:var(--text);
  font:600 11px var(--head);
  letter-spacing:.06em;
  white-space:nowrap;
}

html.arena-alt .alt-edit-tools .edit-tab {
  border:0;
  border-radius:0;
  color:var(--dim);
  text-transform:uppercase;
}

html.arena-alt .alt-edit-tools .edit-tab + .edit-tab {
  border-left:1px solid var(--edge);
}

html.arena-alt .alt-edit-tools .edit-tab.on {
  background:var(--text);
  color:var(--bg);
}

html.arena-alt .alt-edit-tools .edit-tab:hover,
html.arena-alt .alt-edit-tools .header-btn:hover:not(:disabled) {
  border-color:var(--accent);
  color:var(--accent);
}

html.arena-alt .alt-edit-tools .header-btn:disabled {
  opacity:.46;
  cursor:not-allowed;
}

html.arena-alt .alt-edit-tools .dirty-badge {
  padding:2px 6px;
  border:1px solid var(--amber);
  border-radius:10px;
  background:color-mix(in srgb,var(--amber) 12%,transparent);
  color:var(--amber);
  font:700 9px var(--head);
  white-space:nowrap;
}

/* Global Studio Settings. This is deliberately separate from Edit's protocol
   settings drawer: bench/repo/logging/theme never imply a YAML mutation. */
html.arena-alt .alt-settings-menu {
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}

html.arena-alt .alt-settings-btn {
  width:31px;
  height:29px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--edge);
  border-radius:3px;
  background:var(--surface2);
  color:var(--text);
  font-size:15px;
  line-height:1;
}

html.arena-alt .alt-settings-btn:hover,
html.arena-alt .alt-settings-menu.open .alt-settings-btn {
  color:var(--amber);
  border-color:var(--amber);
}

html.arena-alt .alt-settings-panel {
  position:absolute;
  z-index:180;
  top:calc(100% + 8px);
  right:0;
  width:min(430px,calc(100vw - 24px));
  max-height:min(76vh,680px);
  overflow:auto;
  padding:0 12px 12px;
  border:1px solid var(--edge);
  border-radius:3px;
  background:var(--surface);
  color:var(--text);
  box-shadow:10px 12px 0 color-mix(in srgb,var(--bg) 72%,transparent);
}

html.arena-alt .alt-settings-panel[hidden] { display:none; }

html.arena-alt .alt-settings-head {
  position:sticky;
  z-index:2;
  top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:40px;
  margin:0 -12px;
  padding:0 10px 0 12px;
  border-bottom:1px solid var(--edge);
  background:var(--surface);
  color:var(--amber);
  font:700 10px var(--head);
  letter-spacing:.16em;
}

html.arena-alt .alt-settings-close {
  width:27px;
  height:27px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--dim);
  font-size:20px;
  line-height:1;
}

html.arena-alt .alt-settings-close:hover { color:var(--text); }

html.arena-alt .alt-settings-section {
  margin:0;
  padding:11px 0;
  border-bottom:1px solid var(--border);
}

html.arena-alt .alt-settings-section:last-child {
  padding-bottom:0;
  border-bottom:0;
}

html.arena-alt .alt-settings-kicker {
  margin:0 0 8px;
  color:var(--cyan);
  font:700 9px var(--head);
  letter-spacing:.15em;
  text-transform:uppercase;
}

html.arena-alt .alt-settings-rig .rigsel {
  display:flex;
  width:100%;
  gap:7px;
  color:var(--text);
  cursor:default;
}

html.arena-alt .alt-settings-rig .rigsel select {
  flex:1 1 auto;
  width:auto;
  max-width:none;
  min-width:0;
  background:var(--surface2);
}

html.arena-alt .alt-settings-panel .gh-block {
  display:block;
  padding:0;
}

html.arena-alt .alt-settings-panel .gh-row:last-child { margin-bottom:0; }

html.arena-alt .alt-settings-panel .gh-signin,
html.arena-alt .alt-settings-panel .gh-signout,
html.arena-alt .alt-settings-panel .gh-lock {
  width:auto;
  text-align:center;
}

html.arena-alt .alt-settings-panel .gh-lock:hover,
html.arena-alt .alt-settings-panel .gh-signin:hover,
html.arena-alt .alt-settings-panel .gh-signout:hover {
  background:var(--surface2);
}

html.arena-alt .alt-settings-logging .gh-row {
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  margin:0;
}

html.arena-alt .alt-settings-logging .gh-row label {
  flex:none;
  color:var(--text);
}

html.arena-alt .alt-settings-logging select { width:100%;min-width:0; }

html.arena-alt .alt-settings-appearance .alt-theme-btn {
  width:100%;
  justify-content:flex-start;
  background:var(--surface2);
}

html.arena-alt .alt-theme-btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:transparent;
  border:1px solid var(--edge);
  color:var(--text);
  border-radius:3px;
  padding:6px 9px;
  font:10px var(--head);
  letter-spacing:.08em;
  text-transform:uppercase;
}

html.arena-alt .alt-theme-lamp {
  width:7px;
  height:7px;
  background:var(--amber);
  box-shadow:0 0 8px color-mix(in srgb,var(--amber) 72%,transparent);
}

/* Page geometry: the primary workspace always wins over the dock. */
html.arena-alt .body-wrap { overflow:hidden; }

html.arena-alt .run-view {
  grid-template-columns:minmax(0,1fr) 320px;
  grid-template-rows:minmax(350px,1fr) auto;
  gap:12px 16px;
  width:100%;
  max-width:1500px;
  margin:0 auto;
  padding:14px 18px 16px;
}

html.arena-alt .run-main { overflow:hidden; }
html.arena-alt .meta-panel { top:0; }

html.arena-alt .card,
html.arena-alt .mp-card,
html.arena-alt .run-log-strip,
html.arena-alt .console-view .panel,
html.arena-alt .cgroup {
  border:1px solid var(--border);
  border-radius:3px;
  background:var(--surface);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 6%,transparent);
}

html.arena-alt .card,
html.arena-alt .mp-card { position:relative; }

html.arena-alt .card::before,
html.arena-alt .mp-card::before {
  content:"";
  position:absolute;
  left:-1px;
  top:14px;
  width:3px;
  height:22px;
  background:var(--edge);
}

html.arena-alt .launch-card::before,
html.arena-alt .alt-runtime-card::before { background:var(--amber); }

html.arena-alt .seqlist h3,
html.arena-alt .mp-card h4,
html.arena-alt .panel-title,
html.arena-alt .rail-h,
html.arena-alt .alt-section-label {
  color:var(--dim);
  letter-spacing:.13em;
  font-size:9px;
  font-weight:600;
}

html.arena-alt .launch-card { padding:0; }

html.arena-alt .alt-run-modebar {
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border-bottom:1px solid var(--border);
  background:var(--surface2);
}

html.arena-alt .alt-run-modebar .alt-section-label { margin-right:auto; }

html.arena-alt .alt-run-mode {
  background:transparent;
  color:var(--dim);
  border:1px solid transparent;
  padding:4px 11px;
  border-radius:2px;
  font:600 10px var(--head);
  letter-spacing:.09em;
  text-transform:uppercase;
}

html.arena-alt .alt-run-mode[aria-pressed="true"] {
  color:var(--text);
  border-color:var(--edge);
  background:var(--surface);
}

html.arena-alt .alt-run-mode[data-alt-run-mode="replay"][aria-pressed="true"] {
  color:var(--amber);
}

html.arena-alt .alt-live-pane,
html.arena-alt .alt-replay-pane { padding:9px 11px; }
html.arena-alt .alt-replay-pane[hidden],
html.arena-alt .alt-live-pane[hidden] { display:none; }

html.arena-alt .launch-row { gap:8px; }
html.arena-alt .btn-run,
html.arena-alt .btn-testexp {
  min-height:48px;
  padding:8px 13px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

html.arena-alt .btn-run {
  background:var(--accent);
  color:var(--bg);
}

html.arena-alt .btn-testexp {
  border-color:var(--cyan,var(--beta));
  color:var(--beta);
}

html.arena-alt .run-bridge {
  border-top:1px solid var(--border);
  padding-top:8px;
}

html.arena-alt .seqrow,
html.arena-alt .blockhead {
  border-width:1px;
  border-radius:2px;
  background:var(--surface2);
  padding-top:7px;
  padding-bottom:7px;
}

html.arena-alt .seqrow .idx {
  color:var(--amber);
  font-variant-numeric:tabular-nums;
}

html.arena-alt .seqrow.active {
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,var(--surface2));
}

/* Replay is a read-only rendering of the Runner. Match the live Runner's rule:
   single-condition Test actions disappear while the sequence is being played. */
html.arena-alt body.alt-replay-mode .seqrow .play { display:none; }

/* Runtime-control sidecar. */
html.arena-alt .alt-runtime-empty,
html.arena-alt .alt-runtime-note,
html.arena-alt .alt-runtime-status {
  color:var(--dim);
  font-size:10px;
  line-height:1.45;
}

html.arena-alt .alt-runtime-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(74px,.72fr) auto;
  gap:6px;
  align-items:center;
  padding:6px 0;
  border-top:1px solid var(--border);
}

html.arena-alt .alt-runtime-row:first-of-type { border-top:0; }

html.arena-alt .alt-runtime-name {
  color:var(--text);
  font-size:11px;
  overflow:hidden;
  text-overflow:ellipsis;
}

html.arena-alt .alt-runtime-unit {
  color:var(--dim);
  font-size:9px;
}

html.arena-alt .alt-runtime-row input,
html.arena-alt .alt-runtime-row select,
html.arena-alt .alt-runtime-reason {
  min-width:0;
  width:100%;
  color:var(--text);
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:2px;
  padding:5px 6px;
  font:11px var(--mono);
}

html.arena-alt .alt-runtime-apply {
  border:1px solid var(--amber);
  color:var(--amber);
  background:transparent;
  border-radius:2px;
  padding:5px 8px;
  font:600 9px var(--head);
  text-transform:uppercase;
  letter-spacing:.08em;
}

html.arena-alt .alt-runtime-apply:disabled { opacity:.38; }

html.arena-alt .alt-runtime-pending {
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--amber);
}

html.arena-alt .alt-runtime-pending::before {
  content:"";
  width:6px;
  height:6px;
  background:var(--amber);
  box-shadow:0 0 7px color-mix(in srgb,var(--amber) 70%,transparent);
}

/* Replay loader + pinned transport. */
html.arena-alt .alt-replay-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}

html.arena-alt .alt-replay-file {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  border:1px solid var(--border);
  background:var(--surface2);
  padding:7px;
}

html.arena-alt .alt-replay-file button,
html.arena-alt .alt-replay-start,
html.arena-alt .alt-replay-sound,
html.arena-alt .alt-replay-sound-config,
html.arena-alt .alt-replay-open-viewer,
html.arena-alt .alt-replay-stop {
  border:1px solid var(--edge);
  color:var(--text);
  background:var(--surface);
  border-radius:2px;
  padding:6px 9px;
  font:600 9px var(--head);
  letter-spacing:.07em;
  text-transform:uppercase;
}

html.arena-alt .alt-replay-file span {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--dim);
  font-size:10px;
}

html.arena-alt .alt-replay-file .alt-replay-repo {
  color:var(--beta);
  border-color:color-mix(in srgb,var(--beta) 70%,var(--border));
  padding-left:7px;
  padding-right:7px;
}

html.arena-alt .alt-replay-options {
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  margin-top:8px;
  color:var(--dim);
  font-size:10px;
}

html.arena-alt .alt-replay-options select {
  background:var(--surface2);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:2px;
  padding:5px 7px;
}

html.arena-alt .alt-replay-start {
  margin-left:auto;
  border-color:var(--amber);
  color:var(--amber);
}

html.arena-alt .alt-replay-start:disabled { opacity:.4; }

html.arena-alt .alt-replay-transport {
  position:sticky;
  top:0;
  z-index:40;
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:auto minmax(140px,.35fr) minmax(220px,1fr) auto auto auto auto auto auto;
  grid-row:1;
  gap:9px;
  align-items:center;
  padding:7px 10px;
  border:1px solid var(--amber);
  background:color-mix(in srgb,var(--amber) 9%,var(--surface));
  box-shadow:0 6px 16px var(--alt-shadow);
}

html.arena-alt .alt-replay-transport[hidden] { display:none; }

html.arena-alt .alt-replay-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--amber);
  font:600 9px var(--head);
  letter-spacing:.12em;
  white-space:nowrap;
}

html.arena-alt .alt-replay-badge::before {
  content:"";
  width:7px;
  height:7px;
  background:var(--amber);
  box-shadow:0 0 8px color-mix(in srgb,var(--amber) 75%,transparent);
}

html.arena-alt .alt-replay-title,
html.arena-alt .alt-replay-clock {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
}

html.arena-alt .alt-replay-slider { width:100%; }

html.arena-alt .alt-replay-speed {
  background:var(--surface2);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:2px;
  padding:5px;
}

html.arena-alt .alt-replay-sound-controls {
  display:inline-flex;
  align-items:stretch;
  white-space:nowrap;
}

html.arena-alt .alt-replay-sound,
html.arena-alt .alt-replay-sound-config {
  padding:5px 7px;
}

html.arena-alt .alt-replay-sound { border-right:0; }

html.arena-alt .alt-replay-sound[aria-pressed="true"] {
  color:var(--accent);
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,var(--surface));
  box-shadow:inset 0 0 10px color-mix(in srgb,var(--accent) 10%,transparent);
}

html.arena-alt .alt-replay-sound[aria-pressed="true"] + .alt-replay-sound-config {
  border-color:var(--accent);
  color:var(--accent);
}

html.arena-alt .alt-replay-stop {
  border-color:var(--danger);
  color:var(--danger);
}

html.arena-alt .alt-replay-pause {
  border-color:var(--amber);
  color:var(--amber);
  min-width:76px;
}

html.arena-alt .alt-replay-pause[aria-pressed="true"] {
  border-color:var(--accent);
  color:var(--accent);
}

html.arena-alt body.alt-replay-active .alt-top-primary > *,
html.arena-alt body.alt-replay-active .meta-panel {
  filter:saturate(.55);
}

html.arena-alt body.alt-replay-active .alt-top-primary > *,
html.arena-alt body.alt-replay-active .run-main,
html.arena-alt body.alt-replay-active .meta-panel {
  pointer-events:none;
}

html.arena-alt body.alt-replay-active .alt-replay-transport { pointer-events:auto; filter:none; }

html.arena-alt body.alt-replay-active .run-view {
  grid-template-rows:auto minmax(350px,1fr) auto;
}

html.arena-alt body.alt-replay-active .run-view>.run-main,
html.arena-alt body.alt-replay-active .run-view>.meta-panel { grid-row:2; }
html.arena-alt body.alt-replay-active .run-dock { grid-row:3; }

/* Bounded dock: 57% of the page became Scope before; Alt caps it near 260 px. */
html.arena-alt body.dock-scope .run-view { row-gap:8px; }
html.arena-alt body.dock-scope .run-view .run-log-strip,
html.arena-alt .run-log-strip {
  flex:0 0 252px;
  height:252px;
  min-height:150px;
  max-height:38vh;
  margin-top:0;
  border-radius:3px;
}

html.arena-alt body.log-collapsed .run-log-strip { height:auto; }

html.arena-alt .dock-h {
  min-height:36px;
  padding:6px 9px;
  background:var(--surface2);
}

html.arena-alt .dock-seg { border-radius:2px; }

html.arena-alt #scopeCtrls {
  margin-left:auto;
  flex:0 1 auto;
  gap:5px;
}

html.arena-alt #scopeCtrls > label:not(.alt-scope-span),
html.arena-alt #scopeCtrls > #scopeAutoY,
html.arena-alt #scopeCtrls > #scopeClear,
html.arena-alt #scopeCtrls > #scopeSound,
html.arena-alt #scopeCtrls > #scopeSoundCfg {
  display:none;
}

html.arena-alt .alt-scope-span { display:flex; }

html.arena-alt .alt-scope-settings-btn,
html.arena-alt .alt-scope-annotation-btn {
  border:1px solid var(--border);
  color:var(--text);
  background:var(--surface);
  border-radius:2px;
  padding:4px 7px;
  font:9px var(--head);
  text-transform:uppercase;
  letter-spacing:.07em;
}

html.arena-alt .alt-scope-settings {
  position:fixed;
  z-index:100;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 12px;
  width:min(420px,calc(100vw - 24px));
  padding:11px;
  border:1px solid var(--edge);
  background:var(--surface);
  box-shadow:0 12px 30px var(--alt-shadow);
}

html.arena-alt .alt-scope-settings[hidden] { display:none; }

html.arena-alt .alt-scope-settings label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-width:0;
  gap:8px;
  color:var(--dim);
  font-size:10px;
}

html.arena-alt .alt-scope-settings input[type=number] {
  width:52px;
  min-width:0;
  background:var(--bg);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:4px;
  padding:2px 4px;
  font-size:11px;
}

html.arena-alt .alt-scope-settings .pill { width:100%; min-width:0; }

html.arena-alt .scope-status {
  min-width:82px;
  color:var(--text);
  font-style:normal;
  font-variant-numeric:tabular-nums;
}

html.arena-alt .scope-canvas-wrap {
  background-color:var(--surface2);
  background-image:
    linear-gradient(color-mix(in srgb,var(--border) 35%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--border) 35%,transparent) 1px,transparent 1px);
  background-size:20px 20px;
}

html.arena-alt .scope-tip {
  background:var(--surface);
  box-shadow:0 4px 12px var(--alt-shadow);
}

/* Console visibility rail + responsive modular canvas. */
html.arena-alt .console-view {
  padding:10px 14px;
  gap:7px;
}

html.arena-alt .console-view fieldset:disabled { opacity:1; }
html.arena-alt .console-view fieldset:disabled input,
html.arena-alt .console-view fieldset:disabled select,
html.arena-alt .console-view fieldset:disabled button:not(.rail-btn) { opacity:.46; }

html.arena-alt .console-main { min-height:150px; }

html.arena-alt .console-view .rail {
  flex-basis:196px;
  gap:1px;
  padding:5px 9px 5px 3px;
  background:transparent;
}

html.arena-alt .console-view .rail-btn {
  position:relative;
  display:grid;
  grid-template-columns:9px minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  column-gap:8px;
  padding:7px 6px;
  border:0;
  border-top:1px solid var(--border);
  border-radius:0;
  background:transparent;
  color:var(--text);
}

html.arena-alt .console-view .rail-btn:first-of-type { border-top:0; }

html.arena-alt .console-view .rail-btn::before {
  content:"";
  grid-row:1 / 3;
  align-self:center;
  width:7px;
  height:7px;
  border:1px solid var(--edge);
  background:transparent;
}

html.arena-alt .console-view .rail-btn::after {
  content:"○";
  grid-column:3;
  grid-row:1 / 3;
  align-self:center;
  color:var(--dim);
}

html.arena-alt .console-view .rail-btn.sel::before {
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 7px color-mix(in srgb,var(--accent) 70%,transparent);
}

html.arena-alt .console-view .rail-btn.sel::after { content:"◉"; color:var(--text); }

html.arena-alt .console-view .rail-btn:hover,
html.arena-alt .console-view .rail-btn.sel {
  border-color:var(--border);
  background:color-mix(in srgb,var(--text) 4%,transparent);
}

html.arena-alt .console-view .rail-btn .sub {
  grid-column:2;
  max-width:none;
  font-size:9px;
}

html.arena-alt .console-view .stage {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-flow:row dense;
  gap:7px;
  align-content:start;
}

html.arena-alt .console-view .panel[data-panel="patterns"],
html.arena-alt .console-view .panel[data-panel="trial"],
html.arena-alt .console-view .panel[data-panel="test"],
html.arena-alt .console-view .panel[data-panel="io"],
html.arena-alt .console-view .panel[data-panel="fw"],
html.arena-alt .console-view .panel[data-panel="fictrac"] {
  grid-column:1 / -1;
}

html.arena-alt .console-view .panel[data-panel="step"],
html.arena-alt .console-view .panel[data-panel="led"] { grid-column:auto; }

html.arena-alt .console-view .panel-h {
  min-height:31px;
  padding:5px 9px;
  background:var(--surface2);
}

html.arena-alt .console-view .panel-title {
  border:0;
  color:var(--text);
}

html.arena-alt .console-view .log-resizer,
html.arena-alt .console-view .status-strip { background:var(--surface2); }

html.arena-alt .logbox,
html.arena-alt .console-view .clog,
html.arena-alt .edit-view .edit-yaml textarea {
  background:var(--surface2);
  color:var(--accent);
}

/* Light theme must override the embedded Edit view's own dark token island. */
html.arena-alt .edit-view,
html.arena-alt .confirm-modal-backdrop,
html.arena-alt .ps-modal-backdrop,
html.arena-alt .anchor-popover,
html.arena-alt #miniToast {
  --bg:var(--alt-enamel);
  --surface:var(--alt-panel);
  --surface-2:var(--alt-well);
  --border:var(--alt-line);
  --edge:var(--alt-edge);
  --text:var(--alt-ink);
  --text-dim:var(--alt-muted);
  --accent:var(--alt-phosphor);
  --hover:var(--alt-phosphor-hot);
  --beta:var(--alt-cyan);
  --warn:var(--alt-amber);
  --error:var(--alt-red);
  --selected:color-mix(in srgb,var(--alt-phosphor) 18%,transparent);
}

html.arena-alt footer {
  min-height:24px;
  background:var(--surface2);
  color:var(--dim);
}

html.arena-alt .alt-footer-mark { color:var(--amber); letter-spacing:.1em; }

/* Compact labels only once the window is genuinely narrow. Comfortable desktop
   widths keep the full labels and spend their free space between the left
   navigation identity and the right operational cluster. */
@media (max-width:1065px) {
  html.arena-alt .topbar {
    gap:5px;
    padding-left:8px;
    padding-right:8px;
  }
  html.arena-alt .alt-top-primary .seg {
    flex:0 1 198px;
    min-width:174px;
    margin-left:2px;
  }
  html.arena-alt body:not(.editmode) .alt-top-primary .seg {
    flex:0 1 198px;
    min-width:174px;
    margin-left:2px;
  }
  html.arena-alt .alt-top-primary .seg button {
    flex:1 1 0;
    min-width:0;
    padding-left:5px;
    padding-right:5px;
  }
  html.arena-alt .alt-top-primary #statusTxt { display:none; }
  html.arena-alt .alt-top-primary .connect { padding-left:10px; padding-right:10px; }
  html.arena-alt .alt-context-left .doc-name { max-width:90px; }
  html.arena-alt .topbar [data-alt-short] { font-size:0!important; }
  html.arena-alt .topbar [data-alt-short]::after {
    content:attr(data-alt-short);
    font:600 9px var(--head);
    letter-spacing:.04em;
  }
  html.arena-alt .alt-edit-tools [data-alt-short]::after { font-size:11px; }
  html.arena-alt .topbar .safemode-ind[data-alt-short]::after { font-size:12px; }
  html.arena-alt .alt-edit-tools .edit-tab,
  html.arena-alt .alt-edit-tools .header-btn { padding-left:7px; padding-right:7px; }
}

@media (max-width:1000px) {
  html.arena-alt .run-view {
    grid-template-columns:minmax(0,1fr) 280px;
    padding-left:10px;
    padding-right:10px;
  }
  html.arena-alt .alt-replay-transport {
    grid-template-columns:auto minmax(0,1fr) auto auto;
  }
  html.arena-alt .alt-replay-slider { grid-column:1 / -1; grid-row:2; }
}

@media (max-width:760px) {
  html.arena-alt body.editmode .alt-context-left .doc-name,
  html.arena-alt body.editmode .alt-context-left .chip,
  html.arena-alt body.editmode .alt-context-left .plug-hover,
  html.arena-alt body.editmode .alt-context-left .arena { display:none!important; }
  html.arena-alt .topbar { gap:3px; padding-left:5px; padding-right:5px; }
  html.arena-alt .alt-edit-tools .edit-tab,
  html.arena-alt .alt-edit-tools .header-btn { padding-left:5px; padding-right:5px; }
  html.arena-alt #fileMenuBtn,
  html.arena-alt .alt-top-primary .ribbon-btn { padding-left:7px; padding-right:7px; }
}

@media (max-width:820px) {
  html.arena-alt .body-wrap { overflow:auto; }
  html.arena-alt .run-view { grid-template-columns:1fr; height:auto; overflow:visible; }
  html.arena-alt .run-view>.run-main,
  html.arena-alt .run-view>.meta-panel,
  html.arena-alt .run-dock { grid-column:1; grid-row:auto; }
  html.arena-alt body.alt-replay-active .alt-replay-transport { grid-row:1; }
  html.arena-alt body.alt-replay-active .run-view>.run-main { grid-row:2; }
  html.arena-alt body.alt-replay-active .run-view>.meta-panel { grid-row:3; }
  html.arena-alt body.alt-replay-active .run-dock { grid-row:4; }
  html.arena-alt .meta-panel { position:static; max-height:none; }
  html.arena-alt .console-view .stage { grid-template-columns:1fr; }
  html.arena-alt .console-view .panel { grid-column:1!important; }
  html.arena-alt .alt-replay-grid { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  html.arena-alt *,html.arena-alt *::before,html.arena-alt *::after {
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}