/* Custom styles Tailwind can't express: design tokens, the scanline grid,
   the reticle corner ticks and the pulsing dot. Everything else is utility
   classes in index.html, compiled by the Tailwind CDN script. */

:root {
  --background: oklch(0.99 0.002 106);
  --foreground: oklch(0.16 0.004 106);
  --card: oklch(1 0 0);
  --muted-foreground: oklch(0.48 0.006 106);
  --border: oklch(0.9 0.004 106);
  --signal: oklch(0.72 0.19 122);
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.14 0.004 106);
    --foreground: oklch(0.96 0.003 106);
    --card: oklch(0.175 0.004 106);
    --muted-foreground: oklch(0.63 0.007 106);
    --border: oklch(0.96 0.003 106 / 11%);
    --signal: oklch(0.94 0.21 121);
  }
}

html { -webkit-font-smoothing: antialiased; }
::selection { background: var(--foreground); color: var(--background); }

/* Scanline grid, running to the edge. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--foreground) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--foreground) 8%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 90%);
}

/* Corner ticks: the reticle around a panel under observation. */
.reticle::before,
.reticle::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-color: color-mix(in oklab, var(--foreground) 45%, transparent);
}
.reticle::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.reticle::after { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; }

/* The pulsing "here" dot. */
.dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--signal);
  animation: bell 1.6s ease-in-out infinite;
}
@keyframes bell {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}