/* ==========================================================================
   Fort Leonard Wood Tour Visualization
   Design tokens, reset, typography, and base elements.

   Rules this file holds to:
     Every colour is either structure or data. None is decorative.
     One easing curve. One motion duration band. Nothing moves unattended.
     Type carries the design. Colour supports it.
   ========================================================================== */

:root {
  /* --- Ground and surface --------------------------------------------- */
  --ground:        #F4F7FC;
  --ground-deep:   #E8EDF6;
  --surface:       #FFFFFF;
  --surface-sunk:  #FAFBFE;
  --surface-raise: #FFFFFF;

  /* --- Ink -------------------------------------------------------------- */
  --ink:           #08101F;
  --ink-strong:    #030812;
  --ink-muted:     #47546B;
  /* Contrast against the #F4F7FC ground is 5.26 to 1 and against #E8EDF6 is
     4.86 to 1, so this tone stays above the 4.5 to 1 WCAG 2.1 AA threshold for
     body text everywhere it is used. It is the faintest ink the palette allows,
     which is why it is a computed value rather than a chosen one. */
  --ink-faint:     #5A6880;
  --ink-inverse:   #FFFFFF;

  /* --- Line ------------------------------------------------------------- */
  --line:          #DCE3EF;
  --line-strong:   #C3CEE0;
  --line-faint:    #EAEFF7;

  /* --- Primary and accent ----------------------------------------------- */
  --primary:       #0B63F6;
  --primary-deep:  #0846B4;
  --primary-wash:  #E7EFFE;
  --accent:        #00B8D4;
  --accent-wash:   #E0F6FA;

  /* --- State ------------------------------------------------------------ */
  --ok:            #0F7B45;
  --ok-wash:       #E3F5EC;
  --warn:          #A85D00;
  --warn-wash:     #FDF0DE;
  --alert:         #B3261E;
  --alert-wash:    #FCE9E8;

  /* --- Category colours. These carry information. ----------------------- */
  --cat-heritage:  #0B63F6;
  --cat-museum:    #6D28D9;
  --cat-memorial:  #B45309;
  --cat-training:  #0F766E;
  --cat-command:   #1E3A8A;
  --cat-community: #0E7490;
  --cat-natural:   #15803D;
  --cat-aviation:  #9F1239;

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Space Grotesk Variable', 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter Variable', Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;

  --t-3xl: clamp(2.65rem, 1.7rem + 3.4vw, 4.35rem);
  --t-2xl: clamp(2.05rem, 1.5rem + 2.1vw, 3.05rem);
  --t-xl:  clamp(1.6rem, 1.32rem + 1.1vw, 2.15rem);
  --t-lg:  clamp(1.28rem, 1.15rem + 0.5vw, 1.52rem);
  --t-md:  1.0625rem;
  --t-sm:  0.9375rem;
  --t-xs:  0.8125rem;
  --t-2xs: 0.72rem;

  --lead-tight: 1.08;
  --lead-snug:  1.28;
  --lead-body:  1.62;
  --lead-long:  1.72;

  --track-display: -0.022em;
  --track-tight:   -0.014em;
  --track-eyebrow:  0.085em;

  /* --- Space. A 4px base, used deliberately. ---------------------------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  /* --- Geometry --------------------------------------------------------- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  --measure: 64ch;

  /* --- Depth. Three levels, no more. ------------------------------------ */
  --lift-1: 0 1px 2px rgba(8, 16, 31, .05), 0 0 0 1px rgba(8, 16, 31, .045);
  --lift-2: 0 2px 4px rgba(8, 16, 31, .05), 0 8px 22px -10px rgba(8, 16, 31, .16),
            0 0 0 1px rgba(8, 16, 31, .05);
  --lift-3: 0 24px 60px -18px rgba(8, 16, 31, .30), 0 4px 12px rgba(8, 16, 31, .07),
            0 0 0 1px rgba(8, 16, 31, .07);

  /* --- Motion. One curve. --------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: 180ms;
  --mid:  260ms;
  --slow: 380ms;

  /* --- Layout ----------------------------------------------------------- */
  --shell-max: 1360px;
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 3.25rem);
  --topbar-h: 60px;
}

/* Contrast preference: strengthen boundaries, drop the ambient field. */
@media (prefers-contrast: more) {
  :root {
    --line:        #8E9BB2;
    --line-strong: #5C6A82;
    --line-faint:  #A9B5C8;
    --ink-muted:   #303C51;
    --ink-faint:   #414E66;
    --ground:      #FFFFFF;
    --ground-deep: #F1F4FA;
  }
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: var(--lead-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lead-tight);
  letter-spacing: var(--track-display);
  color: var(--ink-strong);
  text-wrap: balance;
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); letter-spacing: var(--track-tight); }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--primary-deep); }

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button { cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-6) 0;
}

/* ==========================================================================
   Focus. Visible, 3px, never removed.
   ========================================================================== */

:focus { outline: none; }

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.map-canvas :focus-visible,
.sheet :focus-visible { outline-offset: 1px; }

::selection {
  background: var(--primary);
  color: var(--ink-inverse);
}

/* ==========================================================================
   Type utilities
   ========================================================================== */

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--s-3);
}

.standfirst {
  font-size: var(--t-lg);
  line-height: 1.42;
  color: var(--ink-muted);
  letter-spacing: -0.008em;
  max-width: 46ch;
}

.prose {
  max-width: var(--measure);
  line-height: var(--lead-long);
  color: var(--ink-muted);
}
.prose p + p { margin-top: var(--s-4); }
.prose strong { color: var(--ink); font-weight: 620; }

.num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: var(--track-tight);
}

.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.small { font-size: var(--t-sm); }
.xsmall { font-size: var(--t-xs); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Ambient depth. One radial field, one faint grid. This is the entire
   background budget for the whole product.
   ========================================================================== */

.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58rem 40rem at 78% -8%, rgba(11, 99, 246, .085), transparent 62%),
    radial-gradient(44rem 34rem at 4% 4%, rgba(0, 184, 212, .062), transparent 58%);
}

.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(8, 16, 31, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(8, 16, 31, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 8%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 8%, transparent 72%);
}

@media (prefers-contrast: more) {
  .ambient { display: none; }
}

/* ==========================================================================
   Controls
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.62rem 1.05rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.2;
  white-space: nowrap;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}
.btn:hover:not(:disabled) { background: var(--ground-deep); border-color: var(--ink-faint); }
.btn:disabled { opacity: .48; cursor: not-allowed; }

.btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--ink-inverse);
}
.btn--primary:hover:not(:disabled) { background: var(--primary-deep); border-color: var(--primary-deep); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-muted); }
.btn--ghost:hover:not(:disabled) { background: var(--ground-deep); color: var(--ink); }

.btn--danger { border-color: var(--alert); color: var(--alert); background: var(--surface); }
.btn--danger:hover:not(:disabled) { background: var(--alert-wash); }

.btn--sm { padding: 0.38rem 0.68rem; font-size: var(--t-xs); }
.btn--lg { padding: 0.82rem 1.4rem; font-size: var(--t-md); }
.btn--block { width: 100%; justify-content: center; }

.btn .icon { flex: none; }

/* Icon-only button keeps a 44px touch target. */
.btn--icon {
  padding: 0;
  width: 44px;
  height: 44px;
  justify-content: center;
}

.field { display: block; margin-bottom: var(--s-4); }
.field > label,
.label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  margin-bottom: var(--s-2);
}

.input, .select, .textarea {
  width: 100%;
  padding: 0.58rem 0.72rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-sm);
  line-height: 1.45;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-faint); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  border-color: var(--primary);
  outline: 3px solid var(--primary);
  outline-offset: -1px;
}
.textarea { min-height: 7.5rem; resize: vertical; }
.select {
  appearance: none;
  padding-right: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2347546B' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 17px;
}

.hint {
  font-size: var(--t-xs);
  color: var(--ink-faint);
  margin-top: var(--s-2);
  line-height: 1.5;
}

.error-text {
  font-size: var(--t-xs);
  color: var(--alert);
  margin-top: var(--s-2);
  font-weight: 560;
}

/* ==========================================================================
   Surfaces and small parts
   ========================================================================== */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--lift-1);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.16rem 0.5rem;
  border-radius: var(--r-xs);
  background: var(--ground-deep);
  color: var(--ink-muted);
  font-size: var(--t-2xs);
  font-weight: 560;
  letter-spacing: 0.012em;
  line-height: 1.5;
  white-space: nowrap;
}

.tag--cat::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 1px;
  background: var(--cat, var(--ink-faint));
}

.tag--ok    { background: var(--ok-wash);    color: var(--ok); }
.tag--warn  { background: var(--warn-wash);  color: var(--warn); }
.tag--alert { background: var(--alert-wash); color: var(--alert); }
.tag--info  { background: var(--primary-wash); color: var(--primary-deep); }

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: var(--s-6) 0;
}

.provenance {
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--line-strong);
  background: var(--surface-sunk);
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--ink-faint);
}
.provenance b { color: var(--ink-muted); font-weight: 620; }

.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 26px; height: 26px; }

/* ==========================================================================
   Skip link
   ========================================================================== */

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100%;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--ink-strong);
  color: var(--ink-inverse);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-sm);
  text-decoration: none;
  transition: top var(--fast) var(--ease);
}
.skip-link:focus {
  top: var(--s-3);
  color: var(--ink-inverse);
}