/* css/legal.css — P5-03. No-take / marine-managed-area polygons + popup.
 *
 * Polygon colours: warning red-orange, semi-transparent — legible over both
 * the light USGS topo and the dark imagery/ocean basemaps (an 18% orange
 * fill tints light water salmon and dark water rust; the 2px solid stroke
 * carries the boundary either way). These rules restyle the SVG paths that
 * Leaflet tags with the className from js/legal.js; the identical values are
 * also set inline as the canvas-renderer fallback.
 *
 * The rule text block is the VERBATIM statute/rule text from the source:
 * white-space: pre-wrap so its bytes are never reflowed into prose, in the
 * app's mono stack, scrollable past max-height. Popup is sized for a 390px
 * phone (Leaflet caps width at 320 via maxWidth in js/legal.js). */

.atlas-legal-zone {
  stroke: #e5533d;
  stroke-width: 2;
  stroke-opacity: 0.9;
  fill: #ff7043;
  fill-opacity: 0.18;
  cursor: pointer;
}
.atlas-legal-zone:hover {
  fill-opacity: 0.28;
  stroke-opacity: 1;
}

/* ---- popup chrome (matches the wrecks popup treatment) ---- */

.atlas-legal-pop .leaflet-popup-content-wrapper {
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font);
}
.atlas-legal-pop .leaflet-popup-tip { background: var(--bg-raised); }
.atlas-legal-pop .leaflet-popup-content {
  margin: 0.6rem 0.75rem;
  /* Leaflet inlines width from maxWidth; keep it inside a 390px viewport. */
  max-width: min(320px, calc(100vw - 4.5rem));
}

.atlas-legal-pop__body { font-size: 0.8rem; line-height: 1.45; }

.atlas-legal-pop__name {
  font-weight: 700;
  font-size: 0.9rem;
  color: #ff8a65;            /* warning tint readable on the dark wrapper */
}
.atlas-legal-pop__type { color: var(--text-dim); font-size: 0.72rem; }
.atlas-legal-pop__cite { font-size: 0.72rem; margin-top: 0.15rem; }
.atlas-legal-pop__cite a { color: var(--accent-2); }

/* Verbatim rule text: pre-wrap mono block, scrolls instead of truncating —
 * the text itself is NEVER cut, reflowed, or ellipsised. */
.atlas-legal-pop__rules {
  margin-top: 0.5rem;
  max-height: 38vh;          /* ~250px on a 390x844 phone */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.25);
}
.atlas-legal-pop__label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warn);
  margin: 0.55rem 0 0.15rem;
}
.atlas-legal-pop__label:first-child { margin-top: 0; }
.atlas-legal-pop__text {
  white-space: pre-wrap;     /* verbatim bytes — no prose reflow */
  overflow-wrap: break-word;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--text);
}

.atlas-legal-pop__src {
  margin-top: 0.5rem;
  font-size: 0.68rem;
  color: var(--text-dim);
}
.atlas-legal-pop__src a { color: var(--accent-2); }

.atlas-legal-pop__disclaimer {
  margin-top: 0.35rem;
  font-size: 0.65rem;
  line-height: 1.4;
  color: var(--text-dim);
  font-style: italic;
}