/* =====================================================================
 * Worker detail W2 — HERO + why_model + step-ledger + cost-breakdown +
 * verdict. BEM dark. Prefixos novos (worker-hero__, why-model__, step-
 * ledger__, cost-breakdown__, worker-verdict__) — NÃO colidem com
 * worker-show__/xray__/decision-trace__ existentes.
 * ===================================================================== */

/* ---------- HERO (§2.1) ---------- */
.worker-hero {
  background: linear-gradient(160deg, var(--color-bg-elevated), var(--color-bg-card));
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}
.worker-hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.worker-hero__title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.2;
}
.worker-hero__suffix {
  color: var(--color-text-faded);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.worker-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}
.worker-hero__meta-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: 0.76rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}
.worker-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* KPI strip */
.worker-hero__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.worker-hero__kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.worker-hero__kpi-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faded);
}
.worker-hero__kpi-value {
  font-size: 1.05rem;
  color: var(--color-text);
  word-break: break-word;
}
.worker-hero__kpi-value--mono { font-family: var(--font-mono); font-size: 0.92rem; }
.worker-hero__kpi-value--cost {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  color: var(--neon-amber);
  font-variant-numeric: tabular-nums;
}
.worker-hero__kpi-sub {
  font-size: 0.72rem;
  color: var(--color-text-faded);
  font-family: var(--font-mono);
}
.worker-hero__override-badge {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(180, 126, 255, 0.14);
  border: 1px solid rgba(180, 126, 255, 0.35);
  color: var(--neon-purple);
  font-size: 0.7rem;
  font-family: var(--font-mono);
}

/* cost bar */
.worker-hero__cost-bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin: 2px 0;
}
.worker-hero__cost-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
}
.worker-hero__cost-fill--ok       { background: var(--neon-green); }
.worker-hero__cost-fill--warning  { background: var(--neon-amber); }
.worker-hero__cost-fill--critical { background: var(--neon-red); }

/* tier badge (compartilhado com why-model) */
.worker-hero__tier {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-family: var(--font-mono);
  font-weight: 600;
  width: fit-content;
  text-transform: lowercase;
}
.worker-hero__tier--cheap    { background: rgba(0, 255, 157, 0.12); color: var(--neon-green); border: 1px solid rgba(0, 255, 157, 0.3); }
.worker-hero__tier--default  { background: rgba(0, 229, 255, 0.12); color: var(--neon-cyan); border: 1px solid rgba(0, 229, 255, 0.3); }
.worker-hero__tier--override { background: rgba(180, 126, 255, 0.14); color: var(--neon-purple); border: 1px solid rgba(180, 126, 255, 0.35); }
.worker-hero__tier--complex,
.worker-hero__tier--large    { background: rgba(255, 199, 59, 0.12); color: var(--neon-amber); border: 1px solid rgba(255, 199, 59, 0.3); }
.worker-hero__tier--unknown  { background: rgba(255, 255, 255, 0.06); color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* chips secundários */
.worker-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.worker-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: 0.74rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}
.worker-hero__chip--danger { color: #fca5a5; border-color: rgba(255, 71, 87, 0.3); }

/* ---------- WHY MODEL (§2.2) ---------- */
.why-model {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--neon-cyan);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
}
.why-model--override { border-left-color: var(--neon-purple); }
.why-model--empty    { border-left-color: var(--color-text-faded); }
.why-model__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.why-model__title {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text);
}
.why-model__tier { margin-left: auto; }
.why-model__reason {
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.why-model__chosen {
  font-family: var(--font-mono);
  color: var(--color-text);
}
.why-model__because { color: var(--color-text-muted); }
.why-model__none { margin: 0; color: var(--color-text-faded); font-size: 0.88rem; }
.why-model__override-flag {
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: rgba(180, 126, 255, 0.1);
  color: var(--neon-purple);
  font-size: 0.82rem;
  font-weight: 600;
}
.why-model__collapsed-foot {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  font-size: 0.82rem;
}
.why-model__cost-inline { font-family: var(--font-mono); color: var(--neon-amber); }
.why-model__more { color: var(--neon-cyan); }
.why-model__no-cands { margin: var(--space-sm) 0 0; font-size: 0.82rem; }

.why-model__candidates { margin-top: var(--space-md); }
.why-model__candidates-head {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faded);
  margin-bottom: var(--space-xs);
}
.why-model__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  font-family: var(--font-mono);
}
.why-model__table th {
  text-align: left;
  padding: 4px 8px;
  color: var(--color-text-faded);
  font-weight: 500;
  font-size: 0.72rem;
  border-bottom: 1px solid var(--color-border);
}
.why-model__table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.why-model__cand--chosen td {
  background: rgba(0, 255, 157, 0.06);
  color: var(--color-text);
}
.why-model__cand-cost { color: var(--neon-amber); }
.why-model__cand-pick {
  color: var(--neon-green);
  font-weight: 600;
  font-size: 0.74rem;
}

/* ---------- STEP LEDGER (§2.3) ---------- */
.step-ledger { margin-bottom: var(--space-lg); }
.step-ledger__empty { margin: 0; }
.step-ledger__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.step-ledger__round {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}
.step-ledger__round--current {
  border-color: var(--neon-green);
  box-shadow: 0 0 0 1px rgba(0, 255, 157, 0.25);
}
.step-ledger__round--fallback { border-style: dashed; }
.step-ledger__round-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.step-ledger__round-num {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-text);
  font-size: 0.92rem;
}
.step-ledger__live {
  font-size: 0.7rem;
  color: var(--neon-green);
  font-weight: 600;
}
.step-ledger__round-cost {
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--neon-amber);
  font-size: 0.9rem;
}
.step-ledger__round-cache {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--color-text-muted);
}
.step-ledger__mix {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--space-xs);
}
.step-ledger__mix-chip {
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: 0.7rem;
  font-family: var(--font-mono);
  color: var(--color-text-muted);
}
.step-ledger__decisions {
  list-style: none;
  margin: var(--space-xs) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.step-ledger__decision {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  font-size: 0.78rem;
}
.step-ledger__decision-kind {
  color: var(--neon-cyan);
  font-weight: 600;
}
.step-ledger__decision-chosen { font-family: var(--font-mono); color: var(--color-text); }
.step-ledger__decision-reason { color: var(--color-text-faded); }
.step-ledger__tools {
  list-style: none;
  margin: var(--space-xs) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.step-ledger__tool {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: 0.72rem;
  font-family: var(--font-mono);
}
.step-ledger__tool--ok      .step-ledger__tool-icon { color: var(--neon-green); }
.step-ledger__tool--error   { border-color: rgba(255, 71, 87, 0.4); }
.step-ledger__tool--error   .step-ledger__tool-icon { color: var(--neon-red); }
.step-ledger__tool--running .step-ledger__tool-icon { color: var(--neon-amber); }
.step-ledger__tool-name { color: var(--color-text-muted); }

/* ---------- COST BREAKDOWN (§2.6) ---------- */
.cost-breakdown { margin-bottom: var(--space-lg); }
.cost-breakdown__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-sm);
}
.cost-breakdown__block {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}
.cost-breakdown__block-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faded);
  margin-bottom: var(--space-xs);
}
.cost-breakdown__rows { list-style: none; margin: 0; padding: 0; }
.cost-breakdown__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 3px 0;
  font-size: 0.82rem;
}
.cost-breakdown__key { color: var(--color-text-muted); font-family: var(--font-mono); }
.cost-breakdown__val { margin-left: auto; font-family: var(--font-mono); color: var(--color-text); }
.cost-breakdown__tag {
  padding: 0 6px;
  border-radius: var(--radius-full);
  font-size: 0.66rem;
  text-transform: uppercase;
}
.cost-breakdown__tag--real     { background: rgba(0, 255, 157, 0.12); color: var(--neon-green); }
.cost-breakdown__tag--notional { background: rgba(255, 255, 255, 0.06); color: var(--color-text-faded); }
.cost-breakdown__none { margin: 0; font-size: 0.8rem; }

/* ---------- VERDICT (§2.5) ---------- */
.worker-verdict {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
}
.worker-verdict--inline {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.86rem;
}
.worker-verdict__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.worker-verdict__title { margin: 0; font-size: 0.95rem; }
.worker-verdict__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-text-faded);
  flex-shrink: 0;
}
.worker-verdict--complete   { border-left: 3px solid var(--neon-green); }
.worker-verdict--complete   .worker-verdict__dot { background: var(--neon-green); }
.worker-verdict--incomplete { border-left: 3px solid var(--neon-red); }
.worker-verdict--incomplete .worker-verdict__dot { background: var(--neon-red); }
.worker-verdict--parcial    { border-left: 3px solid var(--neon-amber); }
.worker-verdict--parcial    .worker-verdict__dot { background: var(--neon-amber); }
.worker-verdict--running    { border-left: 3px solid var(--neon-cyan); }
.worker-verdict--running    .worker-verdict__dot { background: var(--neon-cyan); }
.worker-verdict__verdict-badge {
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: 0.76rem;
  font-weight: 600;
}
.worker-verdict__rejected {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 71, 87, 0.12);
  color: #fca5a5;
  font-size: 0.72rem;
  font-family: var(--font-mono);
}
.worker-verdict__label { color: var(--color-text-muted); }
.worker-verdict__reason {
  margin: var(--space-sm) 0 0;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}
.worker-verdict__lesson {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 199, 59, 0.07);
  border-radius: var(--radius-sm);
}
.worker-verdict__lesson-title { font-weight: 600; font-size: 0.84rem; color: var(--color-text); }
.worker-verdict__lesson-body { margin: 2px 0 0; font-size: 0.8rem; color: var(--color-text-muted); }

/* ---------------------------------------------------------------------------
 * M3 — raio-x do worker LEGÍVEL e navegável a 390px.
 * O show.html.erb já empilha as seções na vertical e os grids internos usam
 * auto-fit minmax (kpis 160px, cost-breakdown 200px) que colapsam sozinhos.
 * O que aperta a 390px e precisa de @media: o hero (top em space-between, padding
 * largo) e a tabela interna de candidatos (.why-model__table, font-mono, sem
 * reflow). Tudo dentro de @media — worker_w2.css não tem regra mobile fora dele,
 * então nada disso afeta o desktop.
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .worker-hero { padding: var(--space-md); }
  /* Em vez de empurrar título e ações pras extremidades (que comprime ambos),
     empilha verticalmente: título em cima, ações embaixo, alinhadas à esquerda. */
  .worker-hero__top {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
  .worker-hero__title { font-size: 1.1rem; }
  .why-model { padding: var(--space-md); }

  /* Tabela de candidatos (por-que-modelo): a 390px a fonte-mono espreme. Reduz
     padding/fonte e quebra palavra pra caber sem squeeze ilegível. */
  .why-model__table { font-size: 0.76rem; }
  .why-model__table th,
  .why-model__table td { padding: 4px 5px; word-break: break-word; }

  /* Tabela de audit (Ações sensíveis) é <table class="table"> SEM data-label —
     não dá pra virar card sem mexer no ERB e não posso tocar o seletor base
     .table (vazaria pra outras tabelas). Escopo no wrapper .worker-audit: rola
     na horizontal a 390px em vez de espremer 4 colunas a fonte ilegível. */
  .worker-audit { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .worker-audit .table { min-width: 480px; }

  /* Segmented control de filtro da timeline (tudo/mensagens/tools/sistema/erros):
     inline-flex com 5 itens estoura 390px. No cel ocupa a largura toda e rola na
     horizontal em vez de empurrar a página. */
  .segmented {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .segmented::-webkit-scrollbar { display: none; }
  .segmented__item { flex: 0 0 auto; white-space: nowrap; }
}

/* Polish: raio-x — conteúdo denso da timeline (payloads, comandos, paths longos)
   QUEBRA em vez de estourar a página horizontalmente. Vale desktop e mobile. */
.event-stream { max-width: 100%; }
.event-stream, .event-stream pre, .event-stream code,
.event-stream [class*="event"], .event-stream td {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.event-stream pre, .event-stream code { white-space: pre-wrap; max-width: 100%; }
.worker-audit .table { table-layout: fixed; width: 100%; }
.worker-audit .table td { overflow-wrap: anywhere; }