/* ============================================================
app-shell.css (DARK) — Shared style system for CDC apps
------------------------------------------------------------
Identical class contract to the light app-shell. This is the
DARK build: same interactive-report HTML, dark surfaces.
Load AFTER the Tailwind CDN script:
The apps were authored light-first on the Tailwind "stone" scale.
This stylesheet remaps that scale to dark surfaces / light text
via !important, so the same markup renders dark with no edits.
Functional status colors (emerald / rose / amber) are darkened
for their soft fills but kept meaningful.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
:root{
--app-bg:#0a0a0a;
--app-surface:#161412;
--app-surface-2:#1c1917;
--app-ink:#fafaf9;
--app-body:#c2bdb7;
--app-muted:#a8a29e;
--app-line:#1f1d1b;
--app-line2:#292524;
--app-accent:#f59e0b;
--app-accent-ink:#fbbf24; /* lighter amber for text on dark */
--app-dark:#0e0d0c;
--app-dark-ink:#e7e5e4;
}
/* ---- base ---- */
body{
font-family:'Inter',system-ui,-apple-system,sans-serif !important;
background-color:var(--app-bg) !important;
color:var(--app-body) !important;
}
.mono{ font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace !important; }
/* ---- surfaces (light utilities -> dark) ---- */
.bg-white{ background-color:var(--app-surface) !important; }
.bg-stone-50{ background-color:var(--app-dark) !important; }
.bg-stone-100{ background-color:var(--app-surface-2) !important; }
.bg-stone-200{ background-color:var(--app-line2) !important; }
/* already-dark surfaces -> normalize to our darks */
.bg-stone-800{ background-color:var(--app-surface-2) !important; }
.bg-stone-900{ background-color:var(--app-dark) !important; }
.bg-stone-950{ background-color:#000 !important; }
.bg-stone-800\/75,.bg-stone-900\/75{ background-color:rgba(0,0,0,.75) !important; }
/* gradients used as soft panels */
.from-stone-50{ --tw-gradient-from:#0e0d0c var(--tw-gradient-from-position) !important; }
.to-stone-100{ --tw-gradient-to:#1c1917 var(--tw-gradient-to-position) !important; }
/* ---- text (dark text -> light) ---- */
.text-stone-900,.text-stone-800{ color:var(--app-ink) !important; }
.text-stone-700,.text-stone-600{ color:var(--app-body) !important; }
.text-stone-500{ color:var(--app-muted) !important; }
.text-stone-400{ color:var(--app-muted) !important; }
.text-stone-300{ color:#d6d3d1 !important; }
.text-stone-200,.text-stone-100,.text-stone-50{ color:#e7e5e4 !important; }
.text-amber-600,.text-amber-700,.text-amber-800,.text-amber-900{ color:var(--app-accent-ink) !important; }
/* ---- borders ---- */
.border-stone-100{ border-color:var(--app-line) !important; }
.border-stone-200{ border-color:var(--app-line2) !important; }
.border-stone-300{ border-color:#44403c !important; }
.border-stone-700,.border-stone-600{ border-color:var(--app-line2) !important; }
.border-amber-100,.border-amber-200,.border-amber-300,.border-amber-400{ border-color:#5b4708 !important; }
/* ---- accent helpers ---- */
.text-accent{ color:var(--app-accent-ink) !important; }
.bg-accent{ background-color:var(--app-accent) !important; color:#1c1917 !important; }
.border-accent{ border-color:var(--app-accent) !important; }
/* amber accents on dark */
.bg-amber-500{ background-color:var(--app-accent) !important; }
.border-amber-500,.border-l-amber-500,.border-t-amber-500{ border-color:var(--app-accent) !important; }
.text-amber-400,.text-amber-500{ color:var(--app-accent-ink) !important; }
/* ---- top-tab navigation ---- */
.nav-active{ border-bottom:2px solid var(--app-accent) !important; color:var(--app-ink) !important; font-weight:600 !important; }
/* ---- segmented / profile toggles ---- */
.btn-toggle{ transition:all .18s ease; color:var(--app-body) !important; }
.btn-toggle:hover{ background-color:var(--app-surface-2) !important; }
.btn-toggle.active{ background-color:var(--app-accent) !important; color:#1c1917 !important; box-shadow:0 4px 10px -2px rgba(245,158,11,.4) !important; }
/* ---- dark code / config panel ---- */
.code-block{ font-family:'JetBrains Mono',ui-monospace,monospace !important; background-color:var(--app-dark) !important; color:var(--app-dark-ink) !important; }
/* ---- app-specific component classes (overridden to dark) ---- */
.card{ background-color:var(--app-surface) !important; border-color:var(--app-line2) !important; }
.nav-item{ color:var(--app-body) !important; }
.nav-item:hover{ background-color:var(--app-surface-2) !important; }
.nav-item.active,.nav-item.active:hover{ background-color:var(--app-line2) !important; color:#fff !important; }
.diagram-box{ background-color:var(--app-surface) !important; border-color:#44403c !important; color:var(--app-dark-ink) !important; }
.diagram-arrow,.diagram-arrow::after{ background-color:#57534e !important; }
.diagram-arrow::after{ background-color:transparent !important; border-left-color:#57534e !important; }
.verdict-table th{ background-color:var(--app-surface) !important; }
.verdict-table th,.verdict-table td{ border-color:var(--app-line2) !important; }
.step-active{ background-color:#1c1404 !important; border-left-color:var(--app-accent) !important; }
/* ---- surface cards helper ---- */
.app-card{ background:var(--app-surface); border:1px solid var(--app-line2); border-radius:14px; transition:transform .18s, box-shadow .18s, border-color .18s; }
.app-card:hover{ transform:translateY(-2px); box-shadow:0 10px 34px rgba(0,0,0,.5); border-color:#44403c; }
/* ---- pill ---- */
.pill{ font-size:12.5px; border-radius:999px; padding:5px 12px; border:1px solid var(--app-line2); color:var(--app-body); background:var(--app-surface); transition:.15s; }
.pill:hover{ background:var(--app-accent); border-color:var(--app-accent); color:#1c1917; }
/* ---- inline code ---- */
:not(pre) > code{ background:var(--app-surface) !important; border:1px solid var(--app-line2) !important; padding:1px 6px; border-radius:5px; color:var(--app-accent-ink) !important; font-family:'JetBrains Mono',ui-monospace,monospace; }
.bg-stone-200 > code,.bg-stone-100 code{ background:transparent !important; border:0 !important; }
/* ---- themed scrollbars (covers .custom-scroll and .code-scroll) ---- */
.custom-scroll::-webkit-scrollbar,.code-scroll::-webkit-scrollbar{ width:8px; height:8px; }
.custom-scroll::-webkit-scrollbar-track,.code-scroll::-webkit-scrollbar-track{ background:var(--app-dark) !important; }
.custom-scroll::-webkit-scrollbar-thumb,.code-scroll::-webkit-scrollbar-thumb{ background:#44403c !important; border-radius:4px; }
.custom-scroll::-webkit-scrollbar-thumb:hover,.code-scroll::-webkit-scrollbar-thumb:hover{ background:#57534e !important; }
/* ============================================================
STATUS COLORS — darken soft fills, brighten text, keep meaning.
green/emerald = OK·live rose/red = danger amber = caution
============================================================ */
.bg-emerald-50,.bg-green-50{ background-color:#0c1f17 !important; }
.bg-emerald-100,.bg-green-100{ background-color:#0f2a1e !important; }
.border-emerald-100,.border-emerald-200,.border-green-100,.border-green-200,.border-green-300{ border-color:#173a2c !important; }
.text-emerald-700,.text-emerald-800,.text-green-700,.text-green-800{ color:#6ee7b7 !important; }
.text-emerald-600,.text-green-600{ color:#34d399 !important; }
.bg-amber-50,.bg-yellow-50{ background-color:#1c1404 !important; }
.bg-amber-100,.bg-yellow-100{ background-color:#2a1e05 !important; }
.text-amber-700.bg-amber-100,.text-amber-800{ color:#fbbf24 !important; }
.bg-rose-50,.bg-red-50{ background-color:#2a0b11 !important; }
.bg-rose-100,.bg-red-100{ background-color:#3a0f17 !important; }
.border-rose-100,.border-rose-200,.border-red-100,.border-red-200{ border-color:#4c1620 !important; }
.text-rose-700,.text-rose-800,.text-red-700,.text-red-800{ color:#fda4af !important; }
.text-rose-500,.text-rose-600,.text-red-500,.text-red-600{ color:#fb7185 !important; }
.bg-amber-200{ background-color:#3a2a06 !important; }
/* status dots / solid bars stay bright (no override needed):
bg-emerald-500, bg-amber-500, bg-rose-500, bg-green-500 */