/* The local lab — a terminal-grade surface built on shell.css's Refinitiv
 * palette. The "wow" here is information design, not neon: tabular numerics,
 * hairline cards, meaning-carrying colour (bullish=buy, bearish=sell,
 * neutral=hold), and time rasters / distribution bars a quant reads at a glance.
 * `color-scheme` follows the app theme so native selects + date pickers match. */

#lc-wrap {
  height: 100vh;
  overflow-y: auto;
  padding: 22px 26px 60px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  color-scheme: inherit;
}

:root { --mono: "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace; }

/* ── page header + KPI strip ─────────────────────────────────────────────── */
.lab-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.lab-title h1 {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: -0.01em;
}
/* The "← live-first" back link: Historic signals is reached from that page. */
.lab-back { display: inline-block; margin-bottom: 4px; font-size: 12px; color: var(--text-dim); text-decoration: none; }
.lab-back:hover { color: var(--selected); }
.lab-sub { color: var(--text-dim); max-width: 720px; margin: 0; font-size: 13px; line-height: 1.5; }
.lab-sub code, .lc-cmd, code { font-family: var(--mono); }

.lab-kpis { display: flex; gap: 10px; flex: 0 0 auto; }
.kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 92px;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.kpi-val {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 650;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.kpi-val.accent { color: var(--selected); }
.kpi-val.good { color: var(--buy); }
.kpi-val.warn { color: var(--incomplete); }
.kpi-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── generic controls (dark, consistent) ─────────────────────────────────── */
#lc-wrap button {
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  transition: border-color .12s, background .12s, color .12s;
}
#lc-wrap button:hover { border-color: var(--selected); color: var(--text); }
#lc-wrap button:disabled { opacity: .4; cursor: not-allowed; }
#lc-wrap button.primary {
  background: var(--selected);
  border-color: var(--selected);
  color: var(--bg);
  font-weight: 650;
}
#lc-wrap button.primary:hover { filter: brightness(1.08); }
#lc-wrap button.danger:hover { border-color: var(--sell); color: var(--sell); }

#lc-wrap select,
#lc-wrap input {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
}
#lc-wrap input[type="number"] { width: 96px; font-family: var(--mono); }
#lc-wrap select:focus, #lc-wrap input:focus {
  outline: none;
  border-color: var(--selected);
}

.field { display: flex; flex-direction: column; gap: 5px; }
.field > span, .field-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.lc-status { font-size: 12px; color: var(--text-dim); font-family: var(--mono); }
.lc-status.ok { color: var(--buy); }
.lc-status.err { color: var(--sell); }
.lc-note { color: var(--text-dim); font-size: 12px; margin: 8px 0 0; line-height: 1.5; }
.lc-err { color: var(--sell); }
.lc-empty { color: var(--text-dim); }

/* A panel is the base surface for a section. */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 18px 20px;
}
.panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.panel-head h2, .panel-head h3 { margin: 0; font-size: 15px; }
.panel-head .spacer { flex: 1; }

/* ── PROMPT REGISTRY: master–detail ──────────────────────────────────────── */
.pr-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  min-height: 560px;
}

/* master list */
.pr-list {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: start;
  position: sticky;
  top: 12px;
}
.pr-list-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 6px 8px;
}
.pr-list-title {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim);
}
.pr-icon { padding: 2px 8px !important; }
.pr-rows { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; max-height: 62vh; }
.pr-loading { padding: 8px 6px; }
/* empty state: render only, load on demand */
.pr-cta { display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 22px 8px; text-align: center; }
.pr-cta .lc-note { margin: 0; }
/* the spinning miquito while the registry answers */
.pr-monkey {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 26px 8px; color: var(--text-dim); font-size: 12px;
}
.pr-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.pr-row:hover { background: color-mix(in srgb, var(--selected) 8%, transparent); }
.pr-row.sel { background: color-mix(in srgb, var(--selected) 16%, transparent); }
.pr-row-name { font-family: var(--mono); font-size: 13px; }
.pr-row-ver { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.pr-dot { width: 8px; height: 8px; border-radius: 50%; }
.pr-dot.pr-sync { background: var(--buy); }
.pr-dot.pr-drift { background: var(--incomplete); }
.pr-dot.pr-registry { background: var(--selected); }
.pr-dot.pr-local { background: var(--text-dim); }
.pr-dot.pr-err { background: var(--sell); }
.pr-new {
  margin-top: 8px;
  width: 100%;
  background: transparent !important;
  border-style: dashed !important;
  color: var(--text-dim) !important;
}
.pr-new:hover { color: var(--selected) !important; border-color: var(--selected) !important; }

/* detail */
.pr-detail {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 18px 20px;
}
.pr-empty { color: var(--text-dim); padding: 40px 10px; text-align: center; }
.pr-editor-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.pr-editor-head h2 { margin: 0; font-size: 18px; font-family: var(--mono); }
.pr-uc { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.pr-mlflow {
  display: inline-block; margin-left: 10px;
  font-family: var(--mono); font-size: 11px; text-decoration: none;
  color: var(--selected);
  border-bottom: 1px dotted color-mix(in srgb, var(--selected) 55%, transparent);
}
.pr-mlflow:hover { border-bottom-style: solid; }
.pr-live {
  font-family: var(--mono); font-size: 11px; color: var(--selected);
  background: color-mix(in srgb, var(--selected) 14%, transparent);
  padding: 3px 9px; border-radius: 4px;
}
.pr-newname {
  font-family: var(--mono); font-size: 16px; font-weight: 650;
  width: 240px;
}

.pr-block { margin-top: 18px; }
.pr-block-label {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 8px;
}
.pr-block-label .pr-hint { text-transform: none; letter-spacing: 0; font-size: 11px; }
.pr-hint { color: var(--text-dim); }
.pr-dirty {
  text-transform: none; letter-spacing: 0; font-size: 11px;
  color: var(--incomplete); font-weight: 650; margin-left: 8px;
}

/* versions table — each row is clickable to view that version's prompt */
.pr-versions { border-collapse: collapse; width: 100%; }
.pr-versions td {
  padding: 7px 10px; border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums;
}
.pr-row { cursor: pointer; }
.pr-versions tr.is-live td { background: color-mix(in srgb, var(--buy) 8%, transparent); }
.pr-versions tr:hover td { background: color-mix(in srgb, var(--selected) 10%, transparent); }
/* the version currently loaded in the editor */
.pr-versions tr.viewing td { background: color-mix(in srgb, var(--selected) 18%, transparent); }
.pr-versions tr.viewing .pv-v { color: var(--selected); }
.pv-v { font-weight: 650; }
.pr-versions tr.is-live .pv-v { color: var(--buy); }
.pv-meta, .pv-sha { color: var(--text-dim); }
.pv-act { text-align: right; white-space: nowrap; }
.pv-livetag { font-size: 10px; letter-spacing: 0.06em; color: var(--selected); }
.pv-set {
  font-size: 11px !important; padding: 2px 9px !important; color: var(--selected) !important;
}
.pv-set:hover { background: var(--selected) !important; color: var(--bg) !important; }
.pv-del {
  cursor: pointer;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 9px !important;
  font-size: 11px;
  margin-left: 6px;
}
.pv-del:hover { color: var(--sell) !important; border-color: var(--sell); }

/* flags */
.pr-flags { display: flex; gap: 14px; flex-wrap: wrap; }
.pr-flags .field { flex: 1; min-width: 180px; }
.pr-flags .field input { width: 100%; }
.pr-flags .pr-desc { flex: 2 1 320px; }

/* tags (MLflow, on the live version) — a clean vertical key/value list */
.pr-tags {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 4px;
  overflow: hidden; margin-bottom: 10px; max-width: 640px;
}
.pr-tag-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 12px;
}
.pr-tag-row:last-child { border-bottom: none; }
.pr-tag-row:hover { background: color-mix(in srgb, var(--selected) 6%, transparent); }
.pr-tag-k { color: var(--selected); font-weight: 650; }
.pr-tag-v { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-tag-del {
  cursor: pointer;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 9px;
  font-size: 11px;
}
.pr-tag-del:hover { color: var(--sell); border-color: var(--sell); }
.pr-tag-empty { padding: 10px 12px; }
.pr-tag-add { display: flex; gap: 8px; align-items: center; max-width: 640px; }
.pr-tag-in { width: 150px; }
.pr-tag-btn { padding: 6px 12px !important; }

.pr-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }

/* ── PROMPT REGISTRY: agent card grid (legacy — unused by master–detail) ──── */
.agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.agent-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: border-color .12s, transform .12s;
}
.agent-card:hover { border-color: var(--selected); transform: translateY(-2px); }
.agent-card .ac-name { font-family: var(--mono); font-size: 14px; font-weight: 650; }
.agent-card .ac-meta { display: flex; align-items: baseline; gap: 8px; }
.ac-ver {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--selected);
  background: color-mix(in srgb, var(--selected) 14%, transparent);
  padding: 1px 7px;
  border-radius: 4px;
}
.ac-sha { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.ac-foot { display: flex; align-items: center; justify-content: space-between; }
.pill {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 650;
  padding: 3px 9px;
  border-radius: 999px;
}
.pill.sync { color: var(--buy); background: color-mix(in srgb, var(--buy) 15%, transparent); }
.pill.drift { color: var(--incomplete); background: color-mix(in srgb, var(--incomplete) 16%, transparent); }
.pill.err { color: var(--sell); background: color-mix(in srgb, var(--sell) 15%, transparent); }
.pill.mlflow { color: var(--selected); background: color-mix(in srgb, var(--selected) 15%, transparent); }
.agent-card.is-drift { border-color: color-mix(in srgb, var(--incomplete) 45%, var(--border)); }

/* Create form: flags row + preview */
.create-flags { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.create-flags .field { flex: 1; min-width: 200px; }
#lc-create .field { margin-bottom: 10px; }
#lc-create input { width: 100%; }
.lc-preview { margin: 8px 0; }
.lc-preview summary { cursor: pointer; color: var(--text-dim); font-size: 12px; }
.lc-preview .codebox { margin-top: 8px; max-height: 260px; }

.ghost { opacity: .5; pointer-events: none; }

/* drill-down drawer */
.drawer {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.vchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.vchip {
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
}
.vchip.prod { color: var(--selected); border-color: var(--selected); }
.codebox {
  max-height: 440px;
  overflow: auto;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* CRUD: editable prompt body + clickable/deletable version chips */
.prompt-edit {
  width: 100%;
  min-height: 440px;
  resize: vertical;
  padding: 14px 16px;
  background: var(--bg) !important;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
}
#lc-create .prompt-edit { min-height: 220px; margin-top: 8px; }
.lc-detail-vlabel { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.vchip.clickable { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.vchip.clickable:hover { border-color: var(--selected); color: var(--text); }
.vchip-del {
  all: unset;
  cursor: pointer;
  font-size: 10px;
  color: var(--text-dim);
  padding: 0 2px;
}
.vchip-del:hover { color: var(--sell); }
.lc-inline-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
#lc-create .control-bar, #lc-prompt-detail .control-bar { margin-top: 12px; }

/* ── GOLDEN DATASET: event raster ────────────────────────────────────────── */
.raster { display: flex; flex-direction: column; gap: 2px; }
.raster-axis {
  position: relative;
  height: 20px;
  margin-left: 150px;
  border-bottom: 1px solid var(--border);
}
.raster-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--mono);
  white-space: nowrap;
}
.raster-tick::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 15px;
  height: 6px;
  width: 1px;
  background: var(--border);
}
.raster-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  height: 34px;
}
.raster-row:hover { background: color-mix(in srgb, var(--selected) 7%, transparent); }
.raster-label { display: flex; align-items: baseline; gap: 8px; }
.raster-label .rl-name { font-family: var(--mono); font-size: 13px; }
.raster-label .rl-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.raster-track {
  position: relative;
  height: 100%;
  border-left: 1px solid var(--border);
}
.raster-dot {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--selected);
  border: 1px solid color-mix(in srgb, var(--selected) 60%, #000);
  cursor: help;
  transition: transform .1s;
}
.raster-dot:hover { transform: translate(-50%, -50%) scale(1.6); z-index: 2; }
/* A completed read recolours the dot by its FLAG — bullish=buy, bearish=sell,
   neutral=hold, no_read hatched — so the raster becomes a live result heatmap. */
.raster-dot.done { border-color: rgba(0, 0, 0, .35); }
.raster-dot.f-bullish { background: var(--buy); }
.raster-dot.f-bearish { background: var(--sell); }
.raster-dot.f-neutral { background: var(--hold); }
.raster-dot.f-no_read {
  background: repeating-linear-gradient(45deg, var(--border), var(--border) 3px, var(--subtle) 3px, var(--subtle) 6px);
}
/* While a lens is running, its not-yet-done dots pulse so you can see the
   agent working through them. */
.raster-row.is-running { background: color-mix(in srgb, var(--selected) 9%, transparent); }
.raster-row.is-running .raster-dot:not(.done) { animation: dot-pulse 1.1s ease-in-out infinite; }
@keyframes dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.rl-run {
  font-size: 11px !important;
  padding: 1px 8px !important;
  line-height: 1.4;
  color: var(--selected) !important;
}
.rl-run:hover { background: var(--selected) !important; color: var(--bg) !important; }
.rl-run:disabled { color: var(--text-dim) !important; }
.rl-prog { font-family: var(--mono); font-size: 11px; color: var(--buy); font-variant-numeric: tabular-nums; }
.field-inline { flex-direction: row; align-items: center; gap: 8px; }
.field-inline > span { margin: 0; }

/* Databricks Evaluation Dataset badge on the golden page */
.ds-badge {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}

/* ── FLIPPING RATE ───────────────────────────────────────────────────────── */
.control-bar {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.control-bar .grow { flex: 1; }

/* hero result */
.flip-hero {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 4px 2px 18px;
}
.flip-hero .hero-num {
  font-family: var(--mono);
  font-size: 58px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.flip-hero .hero-cap { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.flip-hero .hero-sub { color: var(--text-dim); font-size: 13px; font-family: var(--mono); }
.stable  { color: var(--buy); }
.mid     { color: var(--incomplete); }
.unstable{ color: var(--sell); }

.fliprow {
  display: grid;
  grid-template-columns: 168px 1fr 210px;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.fliprow .fr-when { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
.fliprow .fr-meta { font-family: var(--mono); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.fliprow .fr-meta .chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 650;
}

.bar {
  display: flex;
  height: 26px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
}
.seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 650;
  color: var(--bg);
  min-width: 16px;
  transition: flex-grow .3s;
}
.seg-bullish { background: var(--buy); }
.seg-neutral { background: var(--hold); }
.seg-bearish { background: var(--sell); }
.seg-no_read {
  background: repeating-linear-gradient(45deg, var(--border), var(--border) 5px, var(--subtle) 5px, var(--subtle) 10px);
  color: var(--text);
}
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px; color: var(--text-dim); margin-top: 12px; }
.legend .sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ── shared: runs ledger + logs ──────────────────────────────────────────── */
table.ledger { border-collapse: collapse; width: 100%; }
table.ledger th, table.ledger td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
table.ledger th {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
table.ledger td code { font-family: var(--mono); font-size: 12px; }
table.ledger tr:hover td { background: color-mix(in srgb, var(--selected) 6%, transparent); }
.run-state { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.run-state.live { color: var(--buy); }
.run-state.done { color: var(--text-dim); }

.logbox summary { cursor: pointer; color: var(--text-dim); font-size: 12px; }
.logview, .logbox pre {
  max-height: 360px;
  overflow: auto;
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ── BACKFILL ────────────────────────────────────────────────────────────── */
.bf-grid { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.publish-toggle {
  display: flex; gap: 9px; align-items: center; margin: 16px 0;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 4px;
  font-size: 13px; background: var(--bg);
}
.publish-toggle input { width: 16px; height: 16px; }
.plan-card table { border-collapse: collapse; margin-top: 6px; }
.plan-card th {
  text-align: left; color: var(--text-dim); padding: 4px 18px 4px 0;
  font-weight: 500; font-size: 12px;
}
.plan-card td { font-family: var(--mono); font-size: 13px; padding: 4px 0; font-variant-numeric: tabular-nums; }
.tag-egress { color: var(--incomplete); font-weight: 650; }
.tag-paper { color: var(--text-dim); }

/* ── LOCKED (deployed) ───────────────────────────────────────────────────── */
.lc-locked {
  max-width: 560px;
  margin: 10vh auto 0;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 40px 32px;
}
.lc-locked-badge { font-size: 44px; }
.lc-locked h1 { margin: 10px 0 14px; font-size: 20px; }
.lc-cmd {
  display: inline-block;
  padding: 10px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
  margin: 8px 0;
}

/* ── EVALUACIÓN: the agent-evaluation framework (any agent, on MLflow) ────── */
.ev .dim { color: var(--text-dim); }
.ev .ev-bar { display: flex; flex-direction: column; gap: 16px; }
.ev-agents { display: flex; gap: 10px; flex-wrap: wrap; }
#lc-wrap .ev-agent {
  display: grid; grid-template-columns: auto; gap: 2px; text-align: left;
  padding: 10px 16px; border-radius: 4px; min-width: 190px;
}
#lc-wrap .ev-agent strong { font-family: var(--mono); font-size: 14px; }
#lc-wrap .ev-agent small { color: var(--text-dim); font-size: 11px; }
#lc-wrap .ev-agent .ev-prod { font-family: var(--mono); font-size: 11px; color: var(--selected); }
#lc-wrap .ev-agent.on {
  border-color: var(--selected);
  background: color-mix(in srgb, var(--selected) 12%, var(--panel));
}
.ev-actions { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-end; }
.ev-act { display: flex; flex-direction: column; gap: 5px; }
.ev-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ev-vs { color: var(--text-dim); font-size: 12px; }
.ev-jobs { display: flex; flex-direction: column; gap: 4px; }
.ev-jobs:empty { display: none; }
.ev-job summary { cursor: pointer; font-family: var(--mono); font-size: 12px; display: flex; gap: 8px; align-items: center; }
.ev-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hold); display: inline-block; }
.ev-job.run .ev-dot { background: var(--buy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--buy) 25%, transparent); }
.ev-live { color: var(--buy); }
.ev-log {
  max-height: 220px; overflow: auto; background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 10px; font-size: 11px; font-family: var(--mono); white-space: pre-wrap;
}

/* in-page section tabs */
.ev-tabs { display: flex; gap: 4px; align-items: center; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ev-tabs .spacer { flex: 1; }
#lc-wrap .ev-tabs button[data-sec] {
  border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none;
  color: var(--text-dim); padding: 10px 14px;
}
#lc-wrap .ev-tabs button[data-sec].on { color: var(--text); border-bottom-color: var(--selected); }

/* scorecard */
.ev-scroll { overflow-x: auto; }
.ev-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.ev-table th {
  text-align: left; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.ev-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ev-num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-meter { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--bg); margin-right: 8px; vertical-align: middle; overflow: hidden; }
.ev-meter i { display: block; height: 100%; }
.ev-meter.good i { background: var(--buy); }
.ev-meter.mid i { background: var(--incomplete); }
.ev-meter.bad i { background: var(--sell); }
.ev-actcell { white-space: nowrap; text-align: right; }
.ev-pill {
  display: inline-block; font-size: 10px; letter-spacing: 0.06em; font-weight: 650;
  padding: 3px 8px; border-radius: 999px; font-family: var(--mono);
}
.ev-pill.good { color: var(--buy); background: color-mix(in srgb, var(--buy) 15%, transparent); }
.ev-pill.bad { color: var(--sell); background: color-mix(in srgb, var(--sell) 15%, transparent); }
.ev-pill.accent { color: var(--selected); background: color-mix(in srgb, var(--selected) 15%, transparent); }
.ev-pill.dim { color: var(--text-dim); background: var(--bg); }

/* golden */
.ev-golden { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ev-card, .ev-case, .ev-ab, .ev-judge {
  border: 1px solid var(--border); border-radius: 4px; padding: 14px; background: var(--bg);
  display: flex; flex-direction: column; gap: 8px;
}
.ev-card header, .ev-case header, .ev-ab header, .ev-judge header {
  font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.ev-fact { font-size: 12px; color: var(--buy); }
.ev-rule { font-size: 12px; color: var(--text-dim); }
.ev-labels { display: flex; gap: 6px; flex-wrap: wrap; }
#lc-wrap .ev-flag, .ev-flag {
  font-family: var(--mono); font-size: 11px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: none; color: var(--text-dim);
}
#lc-wrap .ev-flag.on.buy, .ev-flag.on.buy { color: #fff; background: var(--buy); border-color: var(--buy); }
#lc-wrap .ev-flag.on.sell, .ev-flag.on.sell { color: #fff; background: var(--sell); border-color: var(--sell); }
#lc-wrap .ev-flag.on.hold, .ev-flag.on.hold { color: #fff; background: var(--hold); border-color: var(--hold); }
#lc-wrap .ev-flag.on.dim, .ev-flag.on.dim { color: var(--text); background: var(--panel); }
.ev-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.ev-thumbs img { height: 120px; border-radius: 4px; border: 1px solid var(--border); }

/* cases + verdict chips */
#ev-cases, #ev-live, #ev-ab { display: flex; flex-direction: column; gap: 10px; }
.ev-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#lc-wrap .ev-chip, .ev-chip {
  font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: none; color: var(--text-dim);
}
#lc-wrap .ev-chip.good, .ev-chip.good { color: var(--buy); border-color: color-mix(in srgb, var(--buy) 45%, var(--border)); }
#lc-wrap .ev-chip.bad, .ev-chip.bad { color: var(--sell); border-color: color-mix(in srgb, var(--sell) 45%, var(--border)); }
#lc-wrap .ev-chip.err, .ev-chip.err { color: var(--incomplete); }
.ev-why {
  border-left: 3px solid var(--selected); padding: 6px 12px; font-size: 13px; line-height: 1.5;
  background: color-mix(in srgb, var(--selected) 6%, transparent); border-radius: 0 4px 4px 0;
}
.ev-why p { margin: 0 0 8px; }
.ev-agree { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.ev-answer summary { cursor: pointer; color: var(--text-dim); font-size: 12px; }
.ev-answer pre, .ev-ab pre {
  white-space: pre-wrap; font-size: 12.5px; line-height: 1.5; margin: 8px 0 0;
  font-family: inherit; color: var(--text); max-height: 360px; overflow: auto;
}

/* A vs B */
.ev-abmeter { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 14px; }
.ev-abmeter > div { display: flex; flex-direction: column; gap: 3px; }
.ev-ab-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .ev-ab-cols { grid-template-columns: 1fr; } }
.ev-ab-cols > div { border: 1px solid var(--border); border-radius: 4px; padding: 10px; background: var(--panel); }
.ev-ab-cols h4 { margin: 0; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.ev-vote { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ev-reveal { font-size: 13px; padding: 8px 12px; border-radius: 4px; }
.ev-reveal.good { background: color-mix(in srgb, var(--buy) 10%, transparent); }
.ev-reveal.bad { background: color-mix(in srgb, var(--sell) 10%, transparent); }
.ev-reveal p { margin: 6px 0 0; font-size: 12px; }

/* judges */
.ev-judgegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ev-judge header { justify-content: space-between; }
.ev-kap { display: flex; flex-direction: column; gap: 3px; }
.ev-kstats { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); }
.ev-kstats b { color: var(--text); font-family: var(--mono); }
.ev-dis { display: flex; flex-direction: column; gap: 8px; }
.ev-disrow { font-size: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
.ev-disrow p { margin: 4px 0 0; }

/* flipping */
.ev-fliprow { display: grid; grid-template-columns: minmax(180px, 1.2fr) 2fr 60px; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.ev-fliptitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-flipbar { display: flex; height: 12px; border-radius: 4px; overflow: hidden; background: var(--bg); }
.ev-flipbar i { display: block; height: 100%; }
.ev-flipbar i.buy { background: var(--buy); }
.ev-flipbar i.sell { background: var(--sell); }
.ev-flipbar i.hold { background: var(--hold); }
.ev-flipbar i.dim { background: var(--border); }