/*
 * docs/css/site.css -- what the website's pages share (SITE-CSS-01, 2026-09-26).
 *
 * The colours (light, and dark under [data-theme="dark"], switched by the header's toggle and
 * remembered as 'gk-theme'), and the rules for the header, footer and theme switch that
 * compare.html copies from index.html word for word. Each page keeps only its own rules in
 * its <style>. Change a colour here and both pages follow; tests/test_site_css.py checks
 * neither page declares the colours again.
 */

:root {
  --page: #f1f5f9;
  --card: #ffffff;
  --card-soft: #f8fafc;
  --line: #e2e8f0;
  --ink: #1e293b;
  --inksoft: #475569;
  --inkmuted: #64748b;
  --navy: #1a365d;
  --cyan: #26C6DA;
  --cyan-ink: #0891b2;
  --cyan-deep: #0e7490;
  --accent: #3b82f6;
  --accent-hover: #2563eb;

  --hero-bg-top: #e8eef6;
  --hero-bg-bottom: #f1f5f9;
  --hero-grid: rgba(26,54,93,0.06);
  --hero-glow: rgba(38,198,218,0.16);
  --hero-head: #1a365d;
  --hero-head-accent: #0891b2;
  --hero-sub: #475569;
  --hero-pill-bg: rgba(38,198,218,0.1);
  --hero-pill-border: rgba(38,198,218,0.35);
  --hero-pill-text: #0e7490;

  --term-bg: #0f1f33;
  --term-head: #0b1626;
  --term-border: #26384f;
  --term-text: #cbd5e1;
  --term-muted: #64748b;

  --panel-navy: #1a365d;
  --panel-text: #cbd5e1;
  --panel-label: #94a3b8;

  --shadow-card: 0 4px 20px rgba(26,54,93,0.06);
  --shadow-soft: 0 6px 24px rgba(26,54,93,0.07);
}

[data-theme="dark"] {
  --page: #0B0F1A;
  --card: #131a2a;
  --card-soft: #0f1622;
  --line: #233044;
  --ink: #f1f5f9;
  --inksoft: #cbd5e1;
  --inkmuted: #94a3b8;
  --navy: #1a365d;
  --cyan: #26C6DA;
  --cyan-ink: #4dd6e8;
  --cyan-deep: #67e8f9;
  --accent: #3b82f6;
  --accent-hover: #60a5fa;

  --hero-bg-top: #0d1424;
  --hero-bg-bottom: #0B0F1A;
  --hero-grid: rgba(255,255,255,0.04);
  --hero-glow: rgba(38,198,218,0.18);
  --hero-head: #ffffff;
  --hero-head-accent: #26C6DA;
  --hero-sub: #cbd5e1;
  --hero-pill-bg: rgba(38,198,218,0.08);
  --hero-pill-border: rgba(38,198,218,0.3);
  --hero-pill-text: #67e8f9;

  --term-bg: #0a1322;
  --term-head: #060d18;
  --term-border: #1c2940;

  --panel-navy: #15263f;
  --panel-text: #cbd5e1;
  --panel-label: #94a3b8;

  --shadow-card: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-soft: 0 6px 24px rgba(0,0,0,0.5);
}

.mono { font-family: 'IBM Plex Mono', monospace; }

.nav-bar { background: color-mix(in srgb, var(--card) 90%, transparent); border-color: var(--line); }
.nav-link { color: var(--inkmuted); }
.nav-link:hover { color: var(--ink); }
.brand-name { color: var(--ink); }
.self-host-badge { background: var(--hero-pill-bg); color: var(--hero-pill-text); border: 1px solid var(--hero-pill-border); }
/* The header on one line at tablet widths: "Self-Hosted", "See it" and "RSJ Software" wrapped
   to two lines between the md breakpoint and ~1150px. Tighter gaps there, never a wrap. */
.nav-link, .self-host-badge, .brand-name { white-space: nowrap; }
@media (max-width: 1150px) { header nav.gap-6 { gap: 0.9rem; } }
@media (max-width: 1000px) {
  /* The two outside links as their icons alone; the words stay for screen readers. */
  header nav a[href^="https://"] { font-size: 0; gap: 0; }
}
@media (max-width: 900px) { .self-host-badge { display: none; } }

.text-ink { color: var(--ink); }
.text-inksoft { color: var(--inksoft); }
.text-inkmuted { color: var(--inkmuted); }
.text-cyan-ink { color: var(--cyan-ink); }

.footer { border-top: 1px solid var(--line); background: var(--card); }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card-soft);
  color: var(--inksoft); cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.theme-toggle:hover { border-color: var(--cyan); color: var(--cyan-ink); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }