/* =========================================================================
   Beach Markers — Port Aransas
   Direction: sun-bleached signage. This gets read on a beach at midday, so
   contrast and type size are functional requirements, not styling choices.
   ========================================================================= */

:root {
  /* Palette: Gulf water, shell sand, and a signal orange reserved for
     "you are here" and primary action. Nothing else may use --signal. */
  --gulf-deep: #0F3D38;
  --gulf:      #1B6B5E;
  --gulf-lift: #2A8C7B;
  --sand:      #EFEBE1;
  --sand-deep: #E2DCCD;
  --shell:     #FFFFFF;
  --signal:    #E2542B;
  --signal-lo: #FBE4DA;
  --dune:      #C6BCA3;
  --ink:       #14211F;
  --ink-mute:  #5C6B67;

  --display: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --body:    'Public Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --panel-w: 22.5rem;
  --shadow: 0 1px 2px rgba(15, 61, 56, .10), 0 8px 24px rgba(15, 61, 56, .10);

  --step: 1;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--sand);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Visually hidden but available to screen readers. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: .5rem; top: -4rem;
  z-index: 1200;
  padding: .6rem .9rem;
  background: var(--gulf-deep);
  color: var(--shell);
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.skip:focus { top: .5rem; }

:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- masthead */

.masthead {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  padding: .7rem clamp(.75rem, 3vw, 1.25rem);
  padding-top: max(.7rem, env(safe-area-inset-top));
  background: var(--gulf-deep);
  color: var(--shell);
  z-index: 500;
}

.wordmark {
  display: flex;
  flex-direction: column;
  margin-right: auto;
  min-width: 0;
}
.wordmark__main {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: -.02em;
  line-height: 1.05;
  text-transform: uppercase;
}
.wordmark__sub {
  font-size: .69rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9FC4BC;
  margin-top: .18rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.find {
  display: flex;
  align-items: stretch;
  background: var(--shell);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: inset 0 0 0 2px transparent;
}
.find:focus-within { box-shadow: inset 0 0 0 2px var(--signal); }

.find__input {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  width: 6.2rem;
  min-width: 0;
  padding: .5rem .6rem;
  border: 0;
  background: transparent;
  color: var(--ink);
}
.find__input::placeholder { color: #9AA5A2; font-weight: 500; }
.find__input:focus { outline: none; }

.find__go {
  font-family: var(--body);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 0 .8rem;
  border: 0;
  background: var(--gulf);
  color: var(--shell);
  cursor: pointer;
}
.find__go:hover { background: var(--gulf-lift); }

.locate {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  font-family: var(--body);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .03em;
  padding: .5rem .8rem;
  border: 2px solid var(--signal);
  border-radius: var(--r-sm);
  background: var(--signal);
  color: var(--shell);
  cursor: pointer;
  white-space: nowrap;
}
.locate:hover { background: #C6461F; border-color: #C6461F; }
.locate[aria-busy="true"] { opacity: .65; cursor: progress; }

.locate svg {
  width: 17px; height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.locate .ring { stroke-width: 1.6; opacity: .75; }

/* --------------------------------------------------------------- app shell */

.app {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.stage {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--sand-deep);
}

#map {
  position: absolute;
  inset: 0;
  background: var(--sand-deep);
}
#map:focus { outline: none; }

/* ------------------------------------------------------------------- panel */

.panel {
  flex: none;
  display: flex;
  flex-direction: column;
  max-height: 42dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--shell);
  border-top: 1px solid var(--sand-deep);
  order: 2;
  -webkit-overflow-scrolling: touch;
}

.sheet {
  padding: 1rem clamp(.9rem, 3vw, 1.25rem);
}

.intro__lede {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.42rem;
  line-height: 1.12;
  letter-spacing: -.022em;
  margin: 0 0 .5rem;
  color: var(--gulf-deep);
  text-wrap: balance;
}
.intro__text {
  margin: 0 0 1rem;
  color: var(--ink-mute);
  font-size: .93rem;
  max-width: 34em;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: .8rem 1.1rem;
  margin: 0;
  padding-top: .9rem;
  border-top: 1px solid var(--sand-deep);
}
.stats__n {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--gulf);
  margin: 0;
}
.stats__k {
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: .28rem 0 0;
}

/* ----------------------------------------------------------- marker detail */

.detail__head {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin-bottom: .1rem;
}

/* The numeral is the hero: this is what the physical sign shows you. */
.detail__id {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.4rem, 15vw, 4.6rem);
  font-variant-numeric: tabular-nums;
  line-height: .84;
  letter-spacing: -.045em;
  color: var(--gulf-deep);
  margin: 0;
}
.detail__kind {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.detail__where {
  font-size: .95rem;
  color: var(--ink);
  margin: .45rem 0 0;
}
.detail__coords {
  font-family: var(--display);
  font-weight: 600;
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: var(--ink-mute);
  margin: .2rem 0 0;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}
.tags__i {
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .26rem .5rem;
  border-radius: var(--r-sm);
  background: var(--signal-lo);
  color: #A93B18;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}

.btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-family: var(--body);
  font-weight: 700;
  font-size: .87rem;
  padding: .68rem 1rem;
  border-radius: var(--r-sm);
  border: 2px solid var(--gulf);
  background: var(--shell);
  color: var(--gulf);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: #F1F8F6; }

.btn--go {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--shell);
  flex-basis: 100%;
}
.btn--go:hover { background: #C6461F; border-color: #C6461F; }

/* Step north / south to the next marker along the shore. */
.hops {
  display: flex;
  gap: .5rem;
  margin-top: .9rem;
}
.hop {
  flex: 1 1 0;
  display: grid;
  gap: .1rem;
  padding: .55rem .6rem;
  border: 1px solid var(--sand-deep);
  border-radius: var(--r-sm);
  background: var(--shell);
  cursor: pointer;
  text-align: left;
  font-family: var(--body);
}
.hop:hover { border-color: var(--gulf); background: #F1F8F6; }
.hop__dir {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.hop__id {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.22rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--gulf-deep);
}
.hop__d {
  font-size: .7rem;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

.note {
  margin: .85rem 0 0;
  padding: .6rem .7rem;
  border-left: 3px solid var(--dune);
  background: #FAF7F0;
  font-size: .82rem;
  color: var(--ink-mute);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.note--warn { border-left-color: var(--signal); background: var(--signal-lo); color: #8E3315; }

.colophon {
  flex: none;
  padding: .85rem clamp(.9rem, 3vw, 1.25rem) 1.1rem;
  padding-bottom: max(1.1rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--sand-deep);
  background: var(--sand);
  font-size: .74rem;
  line-height: 1.5;
  color: var(--ink-mute);
}
.colophon p { margin: 0 0 .4rem; }
.colophon p:last-child { margin-bottom: 0; }
.colophon a { color: var(--gulf); }
.colophon__legal { color: #7C8783; }

/* -------------------------------------------------------------------- rail */

/* Bottom offset clears Leaflet's attribution bar, which is a legal requirement
   for the Esri and OSM tiles and therefore cannot be moved out of the way. */
.rail {
  position: absolute;
  top: .75rem;
  bottom: 1.9rem;
  right: .55rem;
  z-index: 420;
  width: 1.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .28rem;
  pointer-events: none;
}

.rail__cap {
  font-family: var(--display);
  font-weight: 800;
  font-size: .66rem;
  letter-spacing: .06em;
  color: var(--gulf-deep);
  background: rgba(255, 255, 255, .88);
  border-radius: 3px;
  padding: .05rem .3rem;
  pointer-events: none;
}

.rail__track {
  position: relative;
  flex: 1;
  width: 1.3rem;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(2px);
  box-shadow: var(--shadow);
  cursor: ns-resize;
  pointer-events: auto;
  touch-action: none;
}

.rail__ticks {
  position: absolute;
  inset: .55rem 0;
}

/* One hairline per surveyed marker, placed by true distance along the shore. */
.tick {
  position: absolute;
  left: 50%;
  width: .5rem;
  height: 1.5px;
  margin-left: -.25rem;
  background: var(--dune);
  border-radius: 1px;
}
.tick--amenity {
  width: .85rem;
  margin-left: -.425rem;
  height: 2px;
  background: var(--signal);
}

.rail__cursor {
  position: absolute;
  left: 50%;
  width: 1.5rem;
  height: 1.5rem;
  margin: -.75rem 0 0 -.75rem;
  border-radius: 50%;
  border: 3px solid var(--signal);
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--shadow);
  pointer-events: none;
}

/* ----------------------------------------------------------- map furniture */

/* Marker pins are divIcons so each can carry its own number.
   NOTE ON SPECIFICITY: these are deliberately all (0,2,0) — two classes, no #map
   ID selector. An ID here would outrank .pin--on and the selected pin would
   silently stop growing. Order alone decides the winner, so --on stays last. */
.pin {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--shell);
  background: var(--gulf);
  border: 1.5px solid var(--shell);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .34);
  cursor: pointer;
  transition: transform .12s ease;
}

/* Zoomed out, 114 numerals is noise — collapse to plain dots. */
.leaflet-container .pin { transform: scale(.4); font-size: 0; }
.leaflet-container.z-near .pin { transform: scale(1); font-size: 10px; }

.pin--amenity { background: var(--signal); }

.leaflet-container .pin--on {
  background: var(--signal);
  transform: scale(1.5);
  font-size: 10px;
  box-shadow: 0 0 0 3px rgba(226, 84, 43, .32), 0 2px 6px rgba(0, 0, 0, .4);
}

.you {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #2B7FE0;
  border: 3px solid var(--shell);
  box-shadow: 0 0 0 6px rgba(43, 127, 224, .22), 0 1px 4px rgba(0, 0, 0, .35);
}

.leaflet-container {
  font-family: var(--body);
  background: var(--sand-deep);
}
.leaflet-control-attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, .82);
}
.leaflet-bar a {
  color: var(--gulf-deep);
}

/* -------------------------------------------------------------- responsive */

@media (min-width: 56rem) {
  .app { flex-direction: row; }

  .panel {
    order: 0;
    width: var(--panel-w);
    flex: none;
    max-height: none;
    height: 100%;
    border-top: 0;
    border-right: 1px solid var(--sand-deep);
  }

  .sheet { padding: 1.35rem 1.4rem; }
  .intro__lede { font-size: 1.62rem; }
  .colophon { margin-top: auto; }
  .wordmark__main { font-size: 1.32rem; }
  .find__input { width: 7rem; }
}

@media (max-width: 26rem) {
  .wordmark__sub { display: none; }
  .locate span { display: none; }
  .locate { padding: .5rem .62rem; }
  .panel { max-height: 46dvh; }
}

/* ------------------------------------------------------------ preferences */

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

/* Beach access roads: a way onto the sand, not a place on it. Squared off and
   pale so it reads as different furniture from the round marker pins. */
.ramp {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--display);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .02em;
  color: var(--gulf-deep);
  background: var(--shell);
  border: 2px solid var(--gulf-deep);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  cursor: pointer;
}
.leaflet-container .ramp { transform: scale(.55); }
.leaflet-container.z-near .ramp { transform: scale(1); }

/* Bridge from the map app to the marker's own page. */
.detail__more {
  margin: .8rem 0 0;
  font-size: .85rem;
  color: var(--ink-mute);
}
.detail__more a { color: var(--gulf); font-weight: 600; }

/* A heart ringing a specific marker (see HEART_MARKERS in app.js). Outline only,
   so the pin and its number stay readable through it. The drop-shadow is not
   decoration — a thin red stroke disappears against dark water and wet sand. */
.heart {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #E8112D;
  stroke-width: 1.9;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .95))
          drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
  transition: transform .12s ease;
}
/* Match the pins: shrink when zoomed out so it does not dominate the coastline. */
.leaflet-container .heart { transform: scale(.45); }
.leaflet-container.z-near .heart { transform: scale(1); }