:root{
  --bg:#0d1117; --card:#111317; --ink:#e6edf3; --muted:#9aa4b2;
  --accent:#2bd4c5; --line:#1b1e25; --ok:#10b981; --warn:#f59e0b; --bad:#ef4444;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font:16px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial}
.wrap{max-width:980px;margin:0 auto;padding:20px}
.hero{margin-bottom:10px}
.lead{color:var(--muted);margin:.25rem 0 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:12px}
.card{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:14px;text-decoration:none;color:inherit}
.card:hover{border-color:#283040;transform:translateY(-1px)}
.card h2{margin:.25rem 0 .25rem;font-size:1.05rem}
.card p{margin:0;color:var(--muted)}
.pill{display:inline-block;margin-top:8px;background:#182026;border:1px solid var(--line);
  padding:2px 8px;border-radius:999px;font-size:.75rem;color:var(--muted)}
.small{font-size:.875rem}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}

/* Layout sanity on demo pages */
main,.container,.content,.card-list,.card{text-align:left}

/* Dialogs + pre */
dialog{background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:10px;padding:14px;max-width:880px}
dialog::backdrop{background:rgba(0,0,0,.6)}
pre{background:#0e1319;color:#c9d1d9;border:1px solid var(--line);border-radius:8px;padding:10px;overflow:auto}

/* Inputs */
input,select,textarea{background:#0e1319;color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;width:100%}
button{background:#1a2230;color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;cursor:pointer}
button:hover{border-color:#2a3548}

/* Badges */
.badge{background:#1f2a1f;border:1px solid #2b3b2b;color:#0a0;
  font-weight:600;padding:2px 8px;border-radius:999px}
.badge-warn{background:#2a241a;border:1px solid #3a2e12;color:#ffcc00}
.badge-bad{background:#2a1f1f;border:1px solid #3b2b2b;color:#ff6666}
/* Make buttons clearly clickable */
button, .btn {
  background: var(--accent);
  color: #000;
  border: 1px solid #0d9488;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
button:hover, .btn:hover { filter: brightness(1.05); }
/* --- Tiny extras: mobile readability, focus, cards, tables, modal --- */

/* Slightly larger base font on small screens */
@media (max-width: 420px){
  html { font-size: 17px; }
  h1 { font-size: 1.35rem; }
}

/* Headings breathing room */
h1, h2 { margin: 0 0 10px; }
.small { line-height: 1.45; }

/* Cards: subtle depth + hover lift */
.card {
  box-shadow: 0 1px 6px rgba(0,0,0,.18);
  transition: border-color .15s ease, transform .06s ease, box-shadow .15s ease;
}
.card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* Buttons: focus-visible ring for keyboard users */
button:focus-visible, .btn:focus-visible, a.card:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Secondary button style (if/when needed) */
.btn-secondary, button.secondary {
  background: transparent;
  color: #d1d5db;
  border: 1px solid var(--hairline);
}
.btn-secondary:hover, button.secondary:hover {
  border-color: var(--accent);
  color: #fff;
}

/* Tables: zebra + compact cells for the Bias page */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--hairline); }
tbody tr:nth-child(2n) { background: #0a0c11; }

/* Badges (e.g., severity) a bit rounder */
.badge {
  background: #11161d;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 2px 10px;
}

/* Modal polish */
dialog#rawDlg::backdrop { background: rgba(0,0,0,.6); }
dialog#rawDlg {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  max-width: 720px;
  width: 90%;
}
#rawDlg pre, #rawDlg #rawTxt {
  color: #ddd !important;
  background: #111317 !important;
  border-radius: 8px;
  padding: 10px;
}

/* Links inside cards a bit clearer */
.card a { color: var(--accent); }
/* --- Micro-pass: subtle readability + affordance polish --- */

/* Global line-height bump for breathing room */
body, p, li { line-height: 1.55; }

/* Slightly larger click targets */
button, .btn, a.card {
  min-height: 36px;
  padding: 6px 14px;
}

/* Headings slightly spaced from paragraphs */
h1 + p, h2 + p, h3 + p { margin-top: -4px; }

/* Hover state for links inside cards */
.card a:hover {
  text-decoration: underline;
}

/* Tables: bold header row */
table th { font-weight: 600; color: #eee; }
/* --- Micro-pass: mobile & touch polish --- */

/* Base font scale for smaller screens */
@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: 1.8em; }
  h2 { font-size: 1.4em; }
  h3 { font-size: 1.2em; }
}

/* Cards: add breathing space on mobile */
@media (max-width: 640px) {
  .card {
    margin: 12px 0;
    padding: 12px;
  }
}

/* Touch-friendly buttons */
button, .btn {
  min-height: 44px; /* Apple/Google touch target standard */
  border-radius: 6px;
}

/* Tables: allow horizontal scroll on small screens */
@media (max-width: 640px) {
  table { display: block; overflow-x: auto; white-space: nowrap; }
}
/* --- Quick pass: dark mode + interaction polish --- */

/* Force legible text in dialogs and modals */
dialog, dialog * {
  color: #eee !important;
  background-color: #111317 !important;
}

/* Buttons: visible focus ring for accessibility */
button:focus, .btn:focus, a:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Hover + active clarity */
button:hover, .btn:hover { filter: brightness(1.1); }
button:active, .btn:active { filter: brightness(0.9); }

/* Inputs + textareas */
input, textarea {
  background: #1b1e25;
  color: #eee;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 6px 10px;
}
input:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,255,200,.3);
}
/* ---- Final micro-pass: motion, buttons, badges, polish ---- */

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Subtle, consistent transitions */
a, button, .btn, .card, input, textarea { transition: all .18s ease; }

/* Buttons */
button, .btn {
  background: #1f2530;
  color: #e8f6f3;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
}
button[disabled], .btn[disabled] {
  opacity: .6; cursor: not-allowed; filter: grayscale(.2);
}
.btn-primary {
  background: var(--accent); color: #06201c; border-color: transparent;
}
.btn-ghost {
  background: transparent; color: var(--accent);
  border-color: var(--accent);
}
.btn-danger {
  background: #4b1f25; color: #ffd7dc; border-color: #742b35;
}

/* Badges (we already use .badge) + variants */
.badge { background:#223; color:#dfe; border:1px solid var(--hairline); }
.badge.ok     { background:#1c3b32; color:#cfe; }
.badge.warn   { background:#3b321c; color:#ffe6b3; }
.badge.danger { background:#3b1c22; color:#ffd7dc; }

/* Cards hover lift (subtle) */
.card:hover { transform: translateY(-1px); box-shadow: 0 3px 14px rgba(0,0,0,.22); }

/* Links: stronger default + clear visited */
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: #7bdacb; }

/* Muted helper text */
.small, .muted { color: #a7b1c2; }

/* Tables: sticky header on wide screens */
@media (min-width: 720px) {
  table thead th { position: sticky; top: 0; background:#0e1117; z-index:1; }
}

/* Dialog close affordance if we use a .close-x element */
.close-x {
  position:absolute; top:10px; right:12px; background:transparent;
  border:1px solid var(--hairline); border-radius:6px; padding:4px 8px;
}
/* ---- Lightning follow-up polish ---- */

/* Button variants inline with demo contexts */
.btn-ok     { background:#1c3b32; color:#cfe; border:none; }
.btn-warn   { background:#3b321c; color:#ffe6b3; border:none; }
.btn-danger { background:#3b1c22; color:#ffd7dc; border:none; }

/* Bias dashboard + modal tweaks */
#rawDlg pre, #rawDlg #rawTxt {
  max-height: 400px;
  overflow-y: auto;
  font-size: 0.9em;
  line-height: 1.45;
}
#rawDlg button { margin-right: 8px; }

/* FactPulse stream cards */
#stream .card { border-left: 4px solid var(--accent); padding-left: 10px; }

/* Triage severity badges */
.badge.sev-1 { background:#233; color:#8ef; }
.badge.sev-3 { background:#332; color:#ff9; }
.badge.sev-5 { background:#311; color:#fbb; }

/* EcoTrack buttons look like clickable CTAs */
.nextStep {
  display:inline-block;
  margin-top:8px;
  background:var(--accent);
  color:#06201c;
  font-weight:600;
}
.nextStep:hover { filter:brightness(1.1); }
/* Full severity scale for triage badges */
.badge.sev-1 { background:#233; color:#8ef; }
.badge.sev-2 { background:#244; color:#9df; }
.badge.sev-3 { background:#332; color:#ff9; }
.badge.sev-4 { background:#522; color:#f96; }
.badge.sev-5 { background:#311; color:#fbb; }


/* Demo case badge */
.badge.demo {
  display:inline-block;
  border-radius:999px;
  background:#666;
  color:#fff;
  font-weight:600;
  font-size:0.7em;
  padding: 2px 9px;
  margin-right:6px;
  letter-spacing:0.5px;
  text-transform:uppercase;
  background:#555;
  color:#eee;
  font-size:0.75em;
  margin-left:6px;
  padding:2px 6px;
  border-radius:6px;
}


/* Demo badge flag icon */
.badge.demo::before{
  content:"\2691"; /* ⚑ */
  margin-right: 4px;
  opacity:.9;
  font-size:0.9em;
  position:relative;
  top:-0.05em;
}