/* Colours, type and the small classes the app and the catalog on maglev.sh share.
   No element rules, so it is safe on another site's page. */
/* Maglev's palette (maglev.sh, ~/dev/maglev-website/src/css/site.css), applied quietly:
   ink and cream grounds, one electric blue, signal yellow only behind the one main action. */
:root {
  --ground: #0A0A0B;
  --surface: #111114;
  --raised: #16161A;
  --text: #EDEDEF;
  --on-light: #0A0A0B;
  --muted: #8A8A90;
  --faint: #8A8A90;
  --border: rgba(255, 255, 255, 0.12);
  --divider: rgba(255, 255, 255, 0.08);
  --row-line: rgba(255, 255, 255, 0.07);
  --input-border: rgba(255, 255, 255, 0.18);
  --accent: #3D4BFF;
  --accent-hover: #5E6AFF;
  --accent-text: #7C86FF;
  --on-accent: #FFFFFF;
  --signal: #FFD23F;
  --on-signal: #0A0A0B;
  --ok-bg: rgba(74, 222, 128, 0.12);
  --ok-text: #4ADE80;
  --error-bg: rgba(255, 128, 102, 0.14);
  --error-text: #FF9F8A;
  --error-row: rgba(255, 128, 102, 0.06);
  --error-line: rgba(255, 128, 102, 0.24);
  --neutral-bg: rgba(255, 255, 255, 0.07);
  --neutral-text: #C4C4CA;
  --hover: rgba(255, 255, 255, 0.04);
  --shadow: rgba(0, 0, 0, 0.5);
  --code-bg: #111114;
  --code-text: #EDEDEF;
  --accent-line: rgba(61, 75, 255, 0.55);
  --accent-tint: rgba(61, 75, 255, 0.22);
  --accent-wash: rgba(61, 75, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.26);
  --inverse-hover: #FFFFFF;
  --backdrop: rgba(10, 10, 11, 0.6);
  --logo-line: transparent;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --head: "Inter Tight", "Geist", ui-sans-serif, system-ui, sans-serif;
  --display: var(--head);
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --logo: "Space Mono", ui-monospace, monospace;
  color-scheme: dark;
}

/* Light: cream ground, white panels. The accent and the signal are the same in both themes. */
:root[data-theme="light"] {
  --ground: #F7F5F0;
  --surface: #FFFFFF;
  --raised: #EFEDE7;
  --text: #0A0A0B;
  --on-light: #FFFFFF;
  --muted: #6B6B70;
  --faint: #6B6B70;
  --border: rgba(10, 10, 11, 0.14);
  --divider: rgba(10, 10, 11, 0.08);
  --row-line: rgba(10, 10, 11, 0.07);
  --input-border: rgba(10, 10, 11, 0.2);
  --accent: #3D4BFF;
  --accent-hover: #2A37E0;
  --accent-text: #3D4BFF;
  --on-accent: #FFFFFF;
  --signal: #FFD23F;
  --on-signal: #0A0A0B;
  --ok-bg: rgba(21, 128, 61, 0.1);
  --ok-text: #166534;
  --error-bg: rgba(200, 58, 34, 0.1);
  --error-text: #B4361F;
  --error-row: rgba(200, 58, 34, 0.05);
  --error-line: rgba(200, 58, 34, 0.28);
  --neutral-bg: rgba(10, 10, 11, 0.06);
  --neutral-text: #3A3A40;
  --hover: rgba(10, 10, 11, 0.03);
  --shadow: rgba(10, 10, 11, 0.14);
  --code-bg: #111114;
  --code-text: #EDEDEF;
  --accent-line: rgba(61, 75, 255, 0.45);
  --accent-tint: rgba(61, 75, 255, 0.12);
  --accent-wash: rgba(61, 75, 255, 0.08);
  --border-strong: rgba(10, 10, 11, 0.26);
  --inverse-hover: #2A2A2F;
  --backdrop: rgba(10, 10, 11, 0.35);
  --logo-line: rgba(10, 10, 11, 0.1);
  color-scheme: light;
}

/* The Maglev mark: the car takes the text colour, the rail is the accent. */
.mark { display: inline-block; height: .676em; width: auto; vertical-align: baseline; margin-right: .3em; overflow: visible; }
.mark .car { fill: currentColor; }
.mark .rail { fill: var(--accent); }

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.stack-xs { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }
.stack-lg { display: flex; flex-direction: column; gap: 24px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.early-tag, .free-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; font: 500 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); border: 1px solid currentColor; white-space: nowrap; }
.early-tag::before { content: ""; width: 6px; height: 6px; background: var(--accent); }
.free-word { color: var(--accent-text); font-weight: 500; }

.client-picker { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--neutral-bg); width: fit-content; max-width: 100%; }
.client-picker label { display: inline-flex; align-items: center; padding: 6px 14px; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; }
.client-picker input { position: absolute; opacity: 0; pointer-events: none; }
.client-picker label:has(input:checked) { background: var(--raised); color: var(--text); }
.client-picker label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }