/* Radar theme: near-black with a faint green grid, green mono type, white
   titles. Loaded by the home page and the Sign in / Sign up pages only, so
   these page-level rules change those pages and nothing else. */
:root {
  --rd-void: #020a06;
  --rd-phosphor: #7cf29a;
  --rd-dim: rgba(124, 242, 154, 0.25);
  --rd-text: rgba(124, 242, 154, 0.85);
  --rd-paper: #f4f8ff;
  --rd-display: "Space Grotesk", system-ui, sans-serif;
  --rd-mono: "JetBrains Mono", ui-monospace, monospace;
}

body {
  background-color: var(--rd-void);
  background-image:
    linear-gradient(rgba(124, 242, 154, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 242, 154, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  color: var(--rd-text);
}

/* Nav */
.tl-nav {
  background: var(--rd-void);
  box-shadow: none;
  border-bottom: 1px solid var(--rd-dim);
}
.tl-nav .navbar-brand,
.tl-nav .nav-link {
  font-family: var(--rd-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tl-nav .navbar-brand { color: var(--rd-phosphor); font-size: 1.1rem; }
.tl-nav .navbar-brand:hover,
.tl-nav .navbar-brand:focus-visible,
.tl-nav .nav-link:hover,
.tl-nav .nav-link:focus-visible { color: #ffffff; }
.tl-nav .nav-link { color: var(--rd-phosphor); font-size: 0.85rem; }
.tl-nav .nav-link.is-current,
.tl-nav .nav-link[aria-current="page"] { color: #ffffff; border-bottom-color: var(--rd-phosphor); }

/* Footer */
footer.footer.tl-footer {
  background: var(--rd-void);
  border-top: 1px solid var(--rd-dim);
  color: rgba(124, 242, 154, 0.75);
  font-family: var(--rd-mono);
  font-size: 0.8rem;
}
footer.footer.tl-footer a { color: var(--rd-phosphor); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
.tl-btn:focus-visible { outline: 2px solid var(--rd-phosphor); outline-offset: 2px; }

/* Sign in and Sign up */
.tl-page-title {
  font-family: var(--rd-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--rd-paper);
}
.tl-lead,
.tl-muted {
  font-family: var(--rd-mono);
  color: var(--rd-text);
}
.tl-card {
  background: rgba(2, 10, 6, 0.88);
  border: 1px solid var(--rd-phosphor);
  border-radius: 0;
  box-shadow: none;
  color: var(--rd-text);
  font-family: var(--rd-mono);
}
.tl-card a { color: var(--rd-phosphor); }
.tl-field { color: var(--rd-text); font-family: var(--rd-mono); }
.tl-field input[type="checkbox"] {
  accent-color: var(--rd-phosphor);
  width: 20px; height: 20px; flex: none; margin-top: 0.1rem;
}