/* ═══════════════════════════════════════════════════════════════
   Agent Studio — the AirOps-style vertical workflow builder in Lighthouse tokens.
   Dense, app-like: 12/13px type, 6/8px radii, hairline borders, one amber primary.
   ═══════════════════════════════════════════════════════════════ */

.stu { --stu-rail: 232px; --stu-side: 340px; --stu-line: var(--border, #263450); --stu-card: var(--bg-card, #121b30); --stu-panel: var(--bg-secondary, #0a1122); --stu-accent: var(--accent, #E8A830);
  color: var(--text-primary); font-size: 13px; }
.stu * { box-sizing: border-box; }
.stu button { font-family: inherit; }
.stu .hidden { display: none !important; }

/* ── App bar ─────────────────────────────────────────────────── */
.stu-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--stu-line); border-radius: var(--radius-md, 8px); background: var(--stu-panel); margin-bottom: 10px; flex-wrap: wrap; }
.stu-bar-back { background: none; border: 1px solid transparent; color: var(--text-secondary); padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.stu-bar-back:hover { color: var(--text-primary); border-color: var(--stu-line); }
.stu-name { font-size: 15px; font-weight: 600; background: transparent; border: 1px solid transparent; color: var(--text-primary); padding: 6px 8px; border-radius: 6px; min-width: 220px; max-width: 420px; }
.stu-name:hover, .stu-name:focus { border-color: var(--stu-line); background: var(--bg-tertiary); outline: none; }
.stu-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--stu-line); color: var(--text-secondary); white-space: nowrap; }
.stu-chip.draft { color: var(--text-muted); }
.stu-chip.active { color: var(--accent-green); border-color: rgba(34,197,94,.35); }
.stu-chip.paused, .stu-chip.disabled { color: var(--accent-gold); border-color: rgba(251,191,36,.35); }
.stu-chip.error, .stu-chip.failed { color: var(--accent-red); border-color: rgba(239,68,68,.35); }
.stu-chip.dirty { color: var(--stu-accent); border-color: rgba(232,168,48,.4); }
.stu-chip.running { color: var(--accent-blue); border-color: rgba(59,130,246,.4); }
.stu-chip.completed, .stu-chip.done { color: var(--accent-green); border-color: rgba(34,197,94,.35); }
.stu-chip.awaiting_review { color: var(--accent-purple); border-color: rgba(139,92,246,.4); }
.stu-chip.skipped, .stu-chip.pending { color: var(--text-muted); }
.stu-bar-spacer { flex: 1; }
.stu-nav { display: flex; gap: 2px; background: var(--bg-tertiary); border: 1px solid var(--stu-line); border-radius: 7px; padding: 2px; }
.stu-nav button { background: transparent; border: 0; color: var(--text-secondary); padding: 5px 12px; border-radius: 5px; cursor: pointer; font-size: 12.5px; font-weight: 500; }
.stu-nav button.active { background: var(--stu-card); color: var(--text-primary); box-shadow: var(--shadow-xs); }
.stu-btn { background: var(--bg-tertiary); border: 1px solid var(--stu-line); color: var(--text-primary); padding: 7px 12px; border-radius: 6px; cursor: pointer; font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; }
.stu-btn:hover { border-color: var(--hull2, #28384C); }
.stu-btn:disabled { opacity: .5; cursor: not-allowed; }
.stu-btn.primary { background: var(--stu-accent); color: #13130A; border-color: var(--stu-accent); font-weight: 600; }
.stu-btn.primary:hover { filter: brightness(1.06); }
.stu-btn.ghost { background: transparent; }
.stu-btn.danger { color: var(--accent-red); }
.stu-btn.sm { padding: 4px 8px; font-size: 11.5px; }
.stu-btn.xs { padding: 2px 6px; font-size: 11px; }
.stu-btn.link { background: none; border: 0; color: var(--stu-accent); padding: 2px 4px; text-decoration: underline; text-underline-offset: 3px; }

/* ── Layout ──────────────────────────────────────────────────── */
.stu-body { display: grid; grid-template-columns: var(--stu-rail) minmax(0, 1fr) var(--stu-side); gap: 10px; align-items: stretch; height: calc(100vh - 150px); min-height: 560px; }
.stu-body.no-rail { grid-template-columns: minmax(0, 1fr) var(--stu-side); }
.stu-body.full { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1280px) { .stu-body { grid-template-columns: var(--stu-rail) minmax(0, 1fr); } .stu-side { grid-column: 1 / -1; } }
@media (max-width: 900px) { .stu-body { grid-template-columns: minmax(0, 1fr); height: auto; } .stu-rail, .stu-side { max-height: 320px; } .stu-main { overflow: visible; } }
.stu-rail, .stu-side { border: 1px solid var(--stu-line); border-radius: var(--radius-md, 8px); background: var(--stu-panel); min-height: 0; overflow: auto; }
.stu-rail-head { padding: 10px 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--text-muted); text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }
.stu-rail-search { margin: 0 10px 8px; width: calc(100% - 20px); padding: 7px 9px; background: var(--bg-tertiary); border: 1px solid var(--stu-line); border-radius: 6px; color: var(--text-primary); font-size: 12.5px; }
.stu-cat { border-top: 1px solid var(--border-subtle, rgba(148,163,216,.06)); }
.stu-cat-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: none; border: 0; color: var(--text-secondary); font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; text-align: left; }
.stu-cat-head .dot { width: 8px; height: 8px; border-radius: 50%; }
.stu-cat-head .n { margin-left: auto; font-family: var(--font-mono); font-weight: 400; color: var(--text-muted); }
.stu-cat.collapsed .stu-cat-items { display: none; }
.stu-cat-items { padding: 0 6px 6px; display: flex; flex-direction: column; gap: 2px; }
.stu-pal-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 1px solid transparent; color: var(--text-primary); padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 12.5px; min-height: 30px; }
.stu-pal-item:hover { background: var(--bg-tertiary); border-color: var(--stu-line); }
.stu-pal-item .d { font-size: 11px; color: var(--text-muted); margin-left: auto; white-space: nowrap; }

/* ── Main list ───────────────────────────────────────────────── */
.stu-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 0; overflow-y: auto; padding: 0 4px 24px 0; }
.stu-card { border: 1px solid var(--stu-line); border-radius: var(--radius-md, 8px); background: var(--stu-card); }
.stu-card.selected { border-color: rgba(232,168,48,.55); box-shadow: var(--shadow-focus); }
.stu-card.inputs, .stu-card.output-hint { background: var(--stu-panel); }
.stu-card-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; user-select: none; }
.stu-idx { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); min-width: 22px; text-align: right; }
.stu-typedot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.stu-card-title { font-weight: 600; font-size: 13.5px; background: transparent; border: 1px solid transparent; color: var(--text-primary); padding: 3px 6px; border-radius: 5px; min-width: 120px; flex: 1; }
.stu-card-title:hover, .stu-card-title:focus { border-color: var(--stu-line); background: var(--bg-tertiary); outline: none; }
.stu-card-type { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.stu-card-tools { display: flex; gap: 4px; align-items: center; }
.stu-icon-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid transparent; color: var(--text-muted); border-radius: 5px; cursor: pointer; font-size: 13px; }
.stu-icon-btn:hover { color: var(--text-primary); border-color: var(--stu-line); background: var(--bg-tertiary); }
.stu-card-body { padding: 4px 12px 12px 44px; border-top: 1px solid var(--border-subtle, rgba(148,163,216,.06)); }
.stu-card.collapsed .stu-card-body { display: none; }
.stu-desc { font-size: 12px; color: var(--text-muted); margin: 6px 0 10px; line-height: 1.45; }
.stu-field { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.stu-field label { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.stu-field label .req { color: var(--stu-accent); }
.stu-field label .help { font-weight: 400; color: var(--text-muted); }
.stu-field input[type=text], .stu-field input[type=number], .stu-field input[type=url], .stu-field input[type=email], .stu-field select, .stu-field textarea { width: 100%; padding: 7px 9px; background: var(--bg-tertiary); border: 1px solid var(--stu-line); border-radius: 6px; color: var(--text-primary); font-size: 12.5px; font-family: inherit; }
.stu-field textarea { min-height: 64px; resize: vertical; line-height: 1.45; }
.stu-field textarea.code, .stu-field textarea.json { font-family: var(--font-mono); font-size: 12px; }
.stu-field.inline { flex-direction: row; align-items: center; gap: 8px; }
.stu-field.inline label { margin: 0; }
.stu-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stu-field-row .stu-field { margin: 6px 0; }
.stu-varbar { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.stu-var-btn { background: var(--bg-tertiary); border: 1px dashed var(--stu-line); color: var(--text-secondary); font-family: var(--font-mono); font-size: 10.5px; padding: 2px 7px; border-radius: 4px; cursor: pointer; }
.stu-var-btn:hover { color: var(--stu-accent); border-color: rgba(232,168,48,.5); }
.stu-var-chip { font-family: var(--font-mono); font-size: 10.5px; padding: 2px 6px; border-radius: 4px; background: rgba(139,92,246,.12); color: #c4b5fd; }
.stu-varpick { position: relative; }
.stu-varmenu { position: absolute; z-index: 30; top: 100%; left: 0; margin-top: 4px; width: 360px; max-height: 300px; overflow: auto; background: var(--stu-panel); border: 1px solid var(--stu-line); border-radius: 8px; box-shadow: var(--shadow-lg); padding: 6px; }
.stu-varmenu input { width: 100%; padding: 6px 8px; background: var(--bg-tertiary); border: 1px solid var(--stu-line); border-radius: 5px; color: var(--text-primary); font-size: 12px; margin-bottom: 6px; }
.stu-varmenu .grp { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 6px 6px 2px; }
.stu-varmenu button { width: 100%; text-align: left; background: none; border: 0; color: var(--text-primary); padding: 5px 6px; border-radius: 5px; cursor: pointer; font-size: 12px; display: flex; gap: 8px; align-items: baseline; }
.stu-varmenu button:hover { background: var(--bg-tertiary); }
.stu-varmenu button code { font-family: var(--font-mono); font-size: 11px; color: #c4b5fd; }
.stu-varmenu button .t { color: var(--text-muted); font-size: 11px; margin-left: auto; }

/* Conditions */
.stu-cond { border: 1px solid var(--stu-line); border-radius: 6px; padding: 8px 10px; margin: 8px 0; background: var(--stu-panel); }
.stu-cond-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 28px; gap: 6px; align-items: center; margin: 4px 0; }
.stu-cond-row input, .stu-cond-row select { width: 100%; padding: 5px 7px; background: var(--bg-tertiary); border: 1px solid var(--stu-line); border-radius: 5px; color: var(--text-primary); font-size: 12px; }
.stu-cond-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

/* Branches and bodies */
.stu-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.stu-branch { border: 1px dashed var(--stu-line); border-radius: 8px; padding: 8px; background: var(--stu-panel); min-height: 56px; }
.stu-branch-head { font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 6px 4px; display: flex; align-items: center; gap: 6px; }
.stu-branch-head.t { color: var(--accent-green); }
.stu-branch-head.f { color: var(--accent-red); }
.stu-nest { margin-top: 10px; border: 1px dashed var(--stu-line); border-radius: 8px; padding: 8px; background: var(--stu-panel); }
.stu-nest .stu-branch-head { color: var(--accent-blue); }
.stu-branch .stu-card, .stu-nest .stu-card { margin: 0; }
.stu-branch .stu-card-body, .stu-nest .stu-card-body { padding-left: 34px; }

/* Insert points */
.stu-insert { display: flex; align-items: center; justify-content: center; height: 26px; position: relative; }
.stu-insert::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--stu-line); }
.stu-insert button { position: relative; z-index: 1; background: var(--stu-panel); border: 1px solid var(--stu-line); color: var(--text-muted); border-radius: 12px; height: 22px; padding: 0 9px; font-size: 11px; cursor: pointer; }
.stu-insert button:hover, .stu-insert.armed button { color: var(--stu-accent); border-color: rgba(232,168,48,.5); }
.stu-insert.armed button { background: rgba(232,168,48,.12); }
.stu-empty-list { text-align: center; color: var(--text-muted); font-size: 12px; padding: 10px; }

/* Test results inside a card */
.stu-test { margin-top: 10px; border: 1px solid var(--stu-line); border-radius: 6px; background: var(--stu-panel); }
.stu-test-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 11.5px; color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle, rgba(148,163,216,.06)); }
.stu-test-head .ms { font-family: var(--font-mono); color: var(--text-muted); margin-left: auto; }
.stu-json { margin: 0; padding: 8px 10px; font-family: var(--font-mono); font-size: 11px; line-height: 1.45; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; }
.stu-json.err { color: var(--accent-red); }

/* Inputs card */
.stu-input-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) 110px 70px 28px; gap: 6px; align-items: center; margin: 4px 0; }
.stu-input-row input, .stu-input-row select { width: 100%; padding: 5px 7px; background: var(--bg-tertiary); border: 1px solid var(--stu-line); border-radius: 5px; color: var(--text-primary); font-size: 12px; }
.stu-input-row .chk { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary); }
.stu-input-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) 110px 70px 28px; gap: 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 0 2px 2px; }

/* ── Side panel (test run) ───────────────────────────────────── */
.stu-side { padding: 0; }
.stu-side-sec { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle, rgba(148,163,216,.06)); }
.stu-side-sec h4 { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.stu-side-sec h4 .r { margin-left: auto; font-weight: 400; text-transform: none; letter-spacing: 0; font-family: var(--font-mono); }
.stu-trace { display: flex; flex-direction: column; gap: 3px; }
.stu-trace-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 5px; font-size: 12px; cursor: pointer; }
.stu-trace-row:hover { background: var(--bg-tertiary); }
.stu-trace-row.sel { background: var(--bg-tertiary); outline: 1px solid var(--stu-line); }
.stu-trace-row .st { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); justify-self: center; }
.stu-trace-row .st.completed { background: var(--accent-green); }
.stu-trace-row .st.running { background: var(--accent-blue); box-shadow: 0 0 0 3px rgba(59,130,246,.25); }
.stu-trace-row .st.failed { background: var(--accent-red); }
.stu-trace-row .st.skipped { background: transparent; border: 1px solid var(--text-muted); }
.stu-trace-row .st.pending { background: var(--accent-purple); }
.stu-trace-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stu-trace-row .ms { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.stu-progress { height: 4px; background: var(--bg-tertiary); border-radius: 2px; overflow: hidden; margin: 6px 0 10px; }
.stu-progress > div { height: 100%; background: var(--stu-accent); transition: width .3s; }
.stu-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12px; }
.stu-kv dt { color: var(--text-muted); }
.stu-kv dd { margin: 0; font-family: var(--font-mono); font-size: 11.5px; }
.stu-review { border: 1px solid rgba(139,92,246,.4); background: rgba(139,92,246,.08); border-radius: 8px; padding: 10px; }
.stu-review h5 { margin: 0 0 4px; font-size: 13px; }
.stu-review p { margin: 0 0 8px; font-size: 12px; color: var(--text-secondary); }
.stu-review textarea { width: 100%; min-height: 90px; padding: 7px 9px; background: var(--bg-tertiary); border: 1px solid var(--stu-line); border-radius: 6px; color: var(--text-primary); font-size: 12.5px; font-family: inherit; }
.stu-review .acts { display: flex; gap: 8px; margin-top: 8px; }
.stu-note { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.stu-note code { font-family: var(--font-mono); font-size: 11px; background: var(--bg-tertiary); padding: 1px 4px; border-radius: 3px; }

/* ── Runs view ───────────────────────────────────────────────── */
.stu-runs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px; align-items: start; }
@media (max-width: 1100px) { .stu-runs { grid-template-columns: minmax(0, 1fr); } }
.stu-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.stu-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--stu-line); }
.stu-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-subtle, rgba(148,163,216,.06)); vertical-align: middle; }
.stu-table tr.row { cursor: pointer; }
.stu-table tr.row:hover td { background: var(--bg-tertiary); }
.stu-table tr.sel td { background: var(--bg-tertiary); }
.stu-table .mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); }
.stu-step-detail { border: 1px solid var(--stu-line); border-radius: 6px; margin: 6px 0; background: var(--stu-panel); }
.stu-step-detail summary { padding: 7px 10px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 12.5px; list-style: none; }
.stu-step-detail summary::-webkit-details-marker { display: none; }
.stu-step-detail summary .ms { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.stu-step-detail .body { border-top: 1px solid var(--border-subtle, rgba(148,163,216,.06)); }
.stu-step-detail .body h6 { margin: 8px 10px 2px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }

/* ── Settings view ───────────────────────────────────────────── */
.stu-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
@media (max-width: 1000px) { .stu-settings { grid-template-columns: minmax(0, 1fr); } }
.stu-settings .stu-card { padding: 12px 14px; }
.stu-settings h4 { margin: 0 0 10px; font-size: 13px; }
.stu-radio-row { display: flex; gap: 6px; flex-wrap: wrap; }
.stu-radio-row label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--stu-line); padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 12.5px; }
.stu-radio-row label.on { border-color: rgba(232,168,48,.5); background: rgba(232,168,48,.08); }
.stu-secret { font-family: var(--font-mono); font-size: 11.5px; word-break: break-all; background: var(--bg-tertiary); border: 1px solid var(--stu-line); border-radius: 6px; padding: 8px 10px; }

/* Studio-wide overrides of the older builder chrome */
#agentsPanelBuild { padding: 0; }