/* ==========================================================
   Lists And Chips
   ========================================================== */

.verdict{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
}

.verdict-neutral{
  background:rgba(15, 23, 42, 0.70);
  color:var(--muted);
  border:1px solid rgba(148, 163, 184, 0.40);
}

body.light .verdict-neutral{
  background:rgba(15, 23, 42, 0.04);
  color:rgba(15, 23, 42, 0.70);
  border:1px solid rgba(15, 23, 42, 0.12);
}

.verdict-good{
  background:rgba(22, 163, 74, 0.15);
  color:#4ade80;
  border:1px solid rgba(34, 197, 94, 0.50);
}

.verdict-warn{
  background:rgba(245, 158, 11, 0.15);
  color:#facc15;
  border:1px solid rgba(245, 158, 11, 0.60);
}

.verdict-bad{
  background:rgba(239, 68, 68, 0.15);
  color:#fca5a5;
  border:1px solid rgba(239, 68, 68, 0.60);
}

.guardrail-flags{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.guardrail-flag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(148, 163, 184, 0.25);
  background:rgba(15, 23, 42, 0.55);
  color:var(--muted);
}

body.light .guardrail-flag{
  background:rgba(15, 23, 42, 0.04);
  border:1px solid rgba(15, 23, 42, 0.10);
  color:rgba(15, 23, 42, 0.70);
}

.guardrail-flag strong{
  color:var(--text);
}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  background:rgba(15, 23, 42, 0.80);
  color:var(--muted);
}

body.light .chip{
  background:rgba(15, 23, 42, 0.06);
  color:rgba(15, 23, 42, 0.70);
  border:1px solid rgba(15, 23, 42, 0.12);
}

.fuel-mode-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}

.radio{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--muted);
}

.pill-value{
  border-radius:999px;
  padding:7px 12px;
  border:1px solid var(--border-strong);
  font-size:13px;
  color:var(--text);
  display:inline-flex;
  align-items:center;
  background:
    linear-gradient(180deg, rgba(255,246,232,0.020), rgba(255,246,232,0.006)),
    rgba(20,20,22,0.72);
}

body.light .pill-value{
  background:rgba(255,255,255,0.85);
}

.list{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.list-item{
  padding:7px 10px;
  border-radius:var(--radius-md);
  border:1px solid transparent;
  background:var(--card-soft);
  color:var(--text);
  text-align:left;
  cursor:pointer;
  font-size:13px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}

.list-item:hover{
  border-color:var(--accent);
  transform:translateY(-1px);
  box-shadow:var(--shadow-2);
}

body.light .list-item{
  background:rgba(255,255,255,0.86);
}

body.light .list-item:hover{
  border-color:#0f172a;
  background:#f8fafc;
  box-shadow:0 10px 25px -5px rgba(15, 23, 42, 0.15);
}

.list.subtle > div,
.list.subtle > button{
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--card-soft);
  padding:8px 10px;
}

body.light .list.subtle > div,
body.light .list.subtle > button{
  background:rgba(255,255,255,0.86);
}