/* Naija Transcribe — night theme. Loaded last on every page (not ops), so it sets the colours for the whole site:
   a near-black green stage, one bright glow per language, hairline borders instead of white cards and shadows.
   Page styles use these tokens (tools/night.py moved their old light literals onto them). */
:root {
  --bg: #050f0a; --bg-2: #08160f;
  --surface: #0b1b13; --surface-2: #0f2219; --fill: #132a1f; --fill-2: #1a3427;
  --line: #1c3328; --line-2: #2a4637;
  --ink: #eef6f1; --ink-2: #a9bdb2; --ink-3: #74897e;
  --on-accent: #04170d;
  --white: #ffffff;
  --good-bg: #0f2d1e; --good-ink: #6fe0a0; --good-line: #1f5a3a;
  --warn-bg: #2b2410; --warn-ink: #f1c75b; --slow-bg: #2d1d10; --slow-ink: #f3a25e; --slow-line: #5a3a1c;
  --bad-bg: #2e1413; --bad-ink: #ff8f84; --bad-line: #5a2622;
  --frost: var(--surface); --frost-line: var(--line);
  color-scheme: dark;
}
/* One glow per language (Háusá flag-green, Ìgbò jade, Yorùbá leaf, English olive), bright enough to read on the night. */
:root, :root[data-lang="hausa"] { --green: #5ef0a6; --green-deep: #5ef0a6; --green-mid: #2fbf7c; --green-pale: #123a27; --mint: #10291d; }
:root[data-lang="igbo"]    { --green: #4fe3c9; --green-deep: #4fe3c9; --green-mid: #22b39b; --green-pale: #0f3a33; --mint: #0d2925; }
:root[data-lang="yoruba"]  { --green: #7fe38d; --green-deep: #7fe38d; --green-mid: #4fb85e; --green-pale: #173a1d; --mint: #12281a; }
:root[data-lang="english"] { --green: #b5e46f; --green-deep: #b5e46f; --green-mid: #86b844; --green-pale: #2a3a14; --mint: #1b2914; }

html { background: var(--bg); }
body { background: var(--bg); color: var(--ink); }
::selection { background: color-mix(in srgb, var(--green) 35%, transparent); }

/* the stage: night, a faint dot grid, and the language's glow rising from the bottom */
.bg, body[data-view="rec"] .bg, body[data-view="busy"] .bg {
  background:
    radial-gradient(circle at 1px 1px, rgba(214, 240, 225, .05) 1px, transparent 1.4px) 0 0 / 16px 16px,
    radial-gradient(120% 60% at 50% 115%, color-mix(in srgb, var(--green) 26%, transparent), transparent 62%),
    radial-gradient(70% 40% at 85% -10%, color-mix(in srgb, var(--green) 9%, transparent), transparent 70%),
    var(--bg); }
.bg::after, body[data-view="rec"] .bg::after, body[data-view="busy"] .bg::after { background: none; }
body[data-view="rec"] .bg, body[data-view="busy"] .bg {
  background:
    radial-gradient(circle at 1px 1px, rgba(214, 240, 225, .05) 1px, transparent 1.4px) 0 0 / 16px 16px,
    radial-gradient(90% 70% at 50% 60%, color-mix(in srgb, var(--green) 22%, transparent), transparent 70%), var(--bg); }

/* header, menu */
.logo { color: var(--ink); }
.round { background: transparent; border-color: var(--line-2); color: var(--ink); box-shadow: none; }
.round:hover { border-color: var(--ink-3); }
.menu { background: var(--surface); border: 1px solid var(--line-2); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); -webkit-backdrop-filter: none; backdrop-filter: none; }
.menu a, .menu button, .menu label { color: var(--ink); }
.menu a:hover, .menu button:hover, .menu label:hover, .menu a[aria-current="page"] { background: var(--fill); }
.menu hr { border-top-color: var(--line); }
.scrim { background: rgba(0, 0, 0, .55); }
.lang-list, .pk-list { background: var(--surface); border-color: var(--line-2); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); -webkit-backdrop-filter: none; backdrop-filter: none; }
.lang-list li:hover, .lang-list li.focus, .lang-list li[aria-selected="true"] { background: var(--fill); }

/* buttons glow, like the reference: bright pill, dark text */
.btn.green, .cta, .b:not(.ghost):not(.del), .go, .btn2:not(.ghost), .acts .open, .cdlg-btn.green, .pack-dl { background: var(--green); color: var(--on-accent); box-shadow: none; }
.btn.green:hover, .cta:hover, .b:not(.ghost):not(.del):hover, .go:hover { box-shadow: 0 0 28px color-mix(in srgb, var(--green) 35%, transparent); }
.btn.grey, .btn2.ghost, .cdlg-btn.grey, .acts .del { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn.black { background: var(--ink); color: var(--bg); }
.b.del { color: var(--bad-ink); } .b.del[data-armed="1"], .shared .danger[data-armed="1"] { background: #d93025; color: #fff; }
.choose .btn.green { background: var(--green); color: var(--on-accent); }
:focus-visible { outline-color: var(--green); }
a { color: var(--green); }

/* reading pages */
article, .wa, .better, .box, .comps, .minutes, .empty, .item, .card, .panel, .lp, .nets, .alert, .first, .sheet {
  background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
article h2 { display: flex; align-items: center; gap: 12px; color: var(--ink); }
article h2::before { content: ""; width: 18px; height: 1px; background: var(--green); flex: none; }
.summary, .note, .consent { background: var(--mint); border: 1px solid color-mix(in srgb, var(--green) 22%, transparent); color: var(--ink); }
h1 { font-weight: 300; letter-spacing: -.03em; }
h1 mark, .hero h1 mark { background: none; color: var(--green); padding: 0; }
.meta, .muted { color: var(--ink-3); }
.back { background: transparent; border-color: var(--line-2); color: var(--ink); }
.back:hover { background: var(--fill); }
.toc { background: var(--surface) !important; border-color: var(--line) !important; }
.toc a:hover, .toc a[aria-current="true"] { background: var(--fill) !important; }
table th { color: var(--ink-3); font-weight: 400; }
table td, table th { border-color: var(--line) !important; }
.glass, .step, .facts, .fact, .tile, .frost, .credits .label, .jump a, .search, .chips button, .sz, .dl summary, .nets-tabs, .mine, .mine-stats div, .dl-menu {
  background: var(--surface) !important; border-color: var(--line) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.chips button[aria-pressed="true"], .seg button[aria-pressed="true"], .nets-tabs button[aria-selected="true"] { background: var(--green) !important; color: var(--on-accent) !important; border-color: var(--green) !important; }
.fact b, .tile b { color: var(--ink); }
.out.loading { background: linear-gradient(90deg, var(--fill) 25%, var(--fill-2) 37%, var(--fill) 63%) !important; background-size: 400% 100% !important; }
input, select, textarea { color-scheme: dark; }
select, .shared select, .card-h select, .allrow select { background-color: var(--surface); color: var(--ink); border-color: var(--line-2); }

/* home: the recorder glows */
.mic::before, .dl-disc::before { background: color-mix(in srgb, var(--green) 10%, var(--surface)); border: 1px solid var(--line-2); box-shadow: 0 0 60px color-mix(in srgb, var(--green) 18%, transparent); }
.mic span, .dl-in { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--green) 85%, white), var(--green) 55%, var(--green-mid)); color: var(--on-accent); }
.lang-btn { background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: none; }
.lang-btn .chev { color: var(--ink-2); }
.lang-btn .dot { background: var(--green); } .lang-btn .dot svg { color: var(--on-accent); }
.chip { background: var(--surface); border-color: var(--line-2); box-shadow: none; }
.hint, .hint-sub { color: var(--ink); } .hint-sub { color: var(--ink-2); }
.greet { color: var(--ink-2); }
.landmarks .lm g { stroke: var(--green); }
.lm-cap { color: var(--ink-3); }
.privacy, footer { color: var(--ink-3); } footer a { color: var(--ink-2); }
.player { background: var(--fill); border-color: var(--line); }
.play { background: var(--green); color: var(--on-accent); box-shadow: none; }
textarea:focus { background: var(--fill); }
.seg.active { background: var(--fill); }
.act-tabs button { background: transparent; border-color: var(--line-2); color: var(--ink); }
.act-tabs button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--on-accent); }
.pk-btn { background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: none; }
.pack-variant { background: var(--fill); } .pack-variant button[aria-pressed="true"] { background: var(--surface); color: var(--green); }
#rec .pill, #busy .pill { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
#rec .chip, #busy .chip { border-color: var(--line-2); }
#rec .rec-warn { background: var(--warn-bg); color: var(--warn-ink); }
.choose-quick { background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.choose-quick a { color: var(--green); }
.alert-ic { background: var(--bad-bg); color: var(--bad-ink); }
.netnote { background: var(--bad-bg); color: var(--bad-ink); } .netnote.warn { background: var(--warn-bg); color: var(--warn-ink); } .netnote.ok { background: var(--good-bg); color: var(--good-ink); }

/* site footer */
.site-foot { background: var(--bg-2); border-top: 1px solid var(--line); color: var(--ink-2); }
.sf-logo { color: var(--ink); }
.sf-brand p, .sf-base { color: var(--ink-3); }
.sf-base { border-top-color: var(--line); }
.sf-cols h2 { color: var(--ink-3); } .sf-cols h2::before { display: none; }
.sf-cols a { color: var(--ink-2); } .sf-cols a:hover { color: var(--ink); }

/* toasts and the contact pop-up */
.toast { background: var(--surface-2) !important; color: var(--ink) !important; border: 1px solid var(--line-2); box-shadow: 0 24px 60px rgba(0, 0, 0, .55) !important; }
.toast p { color: var(--ink-2) !important; }
.toast .tact { background: var(--green) !important; color: var(--on-accent) !important; }
.toast .tx { color: var(--ink-3) !important; } .toast .tx:hover { background: var(--fill) !important; }
.cdlg { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); }
.cdlg::backdrop { background: rgba(0, 0, 0, .6); }
.cdlg input, .cdlg select, .cdlg textarea { background: var(--fill); border-color: var(--line-2); color: var(--ink); }
.cdlg input:focus, .cdlg select:focus, .cdlg textarea:focus { background: var(--fill-2); }
#rec h1 mark, #busy h1 mark { background: none; color: var(--green); }