/* style.css — light, modern visual identity built on the brand's
   navy/orange/red palette (sampled directly from the EASE ADO Digital
   logo). Tailwind (compiled, utility classes) handles layout; this file
   carries the parts Tailwind's defaults can't: the contour-line field,
   mono readout, focus rings, and scrollbars. */

:root {
  --field: #f6f7fb;
  --panel: #ffffff;
  --line: #e2e8f0;
  --ink: #1e293b;
  --muted: #64748b;
  --signal: #14137a;
  --amber: #b45309;
}

body {
  background-color: var(--field);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(20, 19, 122, 0.05) 0, transparent 40%),
    radial-gradient(circle at 85% 0%, rgba(20, 19, 122, 0.04) 0, transparent 35%);
}

/* Topographic contour-line texture used behind the hero/dropzone */
.contour-field {
  background-image:
    repeating-radial-gradient(circle at 20% 30%, transparent 0, transparent 26px, rgba(20, 19, 122, 0.05) 27px, transparent 28px),
    repeating-radial-gradient(circle at 80% 70%, transparent 0, transparent 34px, rgba(20, 19, 122, 0.045) 35px, transparent 36px);
  background-size: 100% 100%;
}

/* Fine survey-grid overlay */
.grid-overlay {
  background-image:
    linear-gradient(to right, rgba(100, 116, 139, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(100, 116, 139, 0.09) 1px, transparent 1px);
  background-size: 28px 28px;
}

.font-mono-tech {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Signature element: live coordinate readout, styled like a GPS receiver LCD */
.coord-readout {
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf7 100%);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 0 24px rgba(20, 19, 122, 0.05),
    0 8px 24px rgba(15, 23, 42, 0.06);
  position: relative;
  overflow: hidden;
}

.coord-readout::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(20, 19, 122, 0.03) 0px,
    rgba(20, 19, 122, 0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}

.coord-value {
  text-shadow: 0 0 1px rgba(20, 19, 122, 0.15);
  letter-spacing: 0.04em;
}

.crosshair-dot {
  box-shadow: 0 0 0 4px rgba(20, 19, 122, 0.15), 0 0 10px rgba(20, 19, 122, 0.55);
}

/* Scrollable location-results dropdown */
#location-results {
  max-height: 220px;
  overflow-y: auto;
}
#location-results::-webkit-scrollbar {
  width: 6px;
}
#location-results::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}

/* Accessible focus rings throughout */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* Leaflet map tiles read slightly muted so they sit naturally on a light UI */
.leaflet-container {
  background: #eef2f6;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Smooth scroll for in-page anchor navigation (FAQ, hero, etc). */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Password Generator mode toggle */
.pwgen-mode-btn {
  border-color: #e2e8f0;
  color: #64748b;
  background: #ffffff;
}
.pwgen-mode-btn.pwgen-mode-active {
  border-color: #14137a;
  background: #eef0fb;
  color: #14137a;
}