/**
 * Avayis · Location passport — the widget's own styles.
 * -------------------------------------------------------------------------
 * Loaded by both mounts (the Swiss landing section and the Zurich map demo),
 * so it holds only what the widget itself owns: the map surface, the Leaflet
 * chrome, the markers and controls the module creates, and the overlay
 * notices. Each page keeps its own layout and its own skin for the panels
 * around it.
 *
 * Everything is scoped to `.avayis-passport` and driven by the `--pp-*`
 * tokens below. The defaults are the light federal-document palette the map
 * demo uses; the landing page redefines the handful it needs for dark.
 */

.avayis-passport {
  --pp-r: 2px;
  --pp-surface: #FFFFFF;
  --pp-surface-2: #E9E9E4;
  --pp-ink: #121212;
  --pp-ink-soft: rgba(18, 18, 18, 0.62);
  --pp-ink-mute: rgba(18, 18, 18, 0.42);
  --pp-line: rgba(18, 18, 18, 0.14);
  --pp-line-soft: rgba(18, 18, 18, 0.08);
  --pp-accent: #D8232A;
  --pp-accent-deep: #A81A20;
  --pp-veil: rgba(242, 242, 239, 0.45);
  --pp-notice-bg: rgba(18, 18, 18, 0.86);
  --pp-notice-fg: #ffffff;
  --pp-sans: inherit;
  --pp-mono: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

/* ---- The map surface ------------------------------------------------- */

.avayis-passport .pp-map {
  position: absolute;
  inset: 0;
  background: var(--pp-surface-2);
}
.avayis-passport .leaflet-container {
  font-family: var(--pp-sans);
  background: var(--pp-surface-2);
}
.avayis-passport .leaflet-container a { color: var(--pp-accent-deep); }
.avayis-passport .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.88) !important;
  font-family: var(--pp-mono); font-size: 9.5px !important; letter-spacing: 0.03em;
  color: var(--pp-ink-soft); padding: 3px 7px !important;
}
.avayis-passport .leaflet-bar a,
.avayis-passport .leaflet-bar a:hover { border-radius: 0 !important; color: var(--pp-ink); }
.avayis-passport .leaflet-touch .leaflet-bar a:first-child,
.avayis-passport .leaflet-touch .leaflet-bar a:last-child { border-radius: 0 !important; }
/* Leaflet prepends bottom-corner controls, so a plain column puts the
   credits back on the map's bottom edge with anything added later above them
   - and never beside them, which floats alone would allow. */
.avayis-passport .leaflet-bottom.leaflet-right {
  display: flex; flex-direction: column; align-items: flex-end;
}
/* While the roof answer is live, the pointer says the roofs are clickable. */
.avayis-passport[data-mode="compact"].pp-pointing .leaflet-container { cursor: crosshair; }

/* ---- Markers (divIcons: no image files needed) ----------------------- */

.avayis-passport .pp-home,
.avayis-passport .pp-probe { background: none; border: 0; }
.avayis-passport .pp-home i {
  display: block; width: 20px; height: 20px; border-radius: 50%;
  background: var(--pp-accent); border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(18, 18, 18, 0.35), 0 6px 16px rgba(18, 18, 18, 0.35);
}
.avayis-passport .pp-probe i {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  background: #121212; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(18, 18, 18, 0.4);
}

/* ---- Controls the module adds ---------------------------------------- */

.avayis-passport .pp-locate a {
  display: grid; place-items: center; width: 34px; height: 34px;
  background: #fff; color: var(--pp-ink);
}
/* Leaflet gives touch-capable browsers a 30px bar; the locate button is part
   of that bar and has to measure the same, or it juts out of it. */
.avayis-passport .leaflet-touch .pp-locate a { width: 30px; height: 30px; }
.avayis-passport .pp-locate svg { width: 17px; height: 17px; }

.avayis-passport .pp-demolink { margin: 0 10px 4px 0; }
.avayis-passport .pp-demolink a {
  display: inline-block; padding: 6px 10px; border-radius: var(--pp-r);
  background: var(--pp-notice-bg); color: var(--pp-notice-fg);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--pp-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap; text-decoration: none;
}
.avayis-passport .pp-demolink a:hover { background: var(--pp-accent); color: #fff; border-color: var(--pp-accent); }

/* ---- Overlay notice: the touch shield and the ctrl-to-zoom hint ------
   One element, two jobs. As the shield it is a real button that takes the
   first tap; as the wheel hint it takes no pointer events at all, so it can
   never swallow a click meant for a roof. */

.avayis-passport .pp-shield {
  position: absolute; inset: 0; z-index: 600;
  display: grid; place-items: center;
  background: var(--pp-veil);
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
  border: 0; width: 100%; cursor: pointer;
  font-family: inherit; color: var(--pp-ink);
  opacity: 0; transition: opacity .28s ease;
}
.avayis-passport .pp-shield.is-shown { opacity: 1; }
.avayis-passport .pp-shield span {
  background: var(--pp-notice-bg); color: var(--pp-notice-fg); border-radius: var(--pp-r);
  padding: 10px 16px; font-size: 13px; font-weight: 500; text-align: center;
  /* The wheel hint is a whole sentence; on a narrow map it wraps rather than
     running out of the frame. */
  max-width: calc(100% - 32px);
}
.avayis-passport .pp-shield.is-hint {
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  pointer-events: none; cursor: default;
}
.avayis-passport .pp-shield[hidden] { display: none; }

/* ---- Floating map chrome (full presentation) ------------------------- */

.avayis-passport .pp-hint {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  /* Above the touch shield (600), below Leaflet's own controls (800). It
     says something and does nothing, so taps fall through to the shield
     underneath and the first tap still unlocks panning. */
  z-index: 700; pointer-events: none; max-width: calc(100% - 96px);
  display: none; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--pp-r);
  background: var(--pp-notice-bg); color: var(--pp-notice-fg);
  font-size: 12.5px; line-height: 1.35; text-align: center;
  box-shadow: 0 8px 22px rgba(18, 18, 18, 0.3);
}
.avayis-passport .pp-hint.is-on { display: inline-flex; }
.avayis-passport .pp-hint .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--pp-accent); flex: none;
  animation: pp-pulse 1.8s ease-in-out infinite;
}
@keyframes pp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.72); }
}

.avayis-passport .pp-elev {
  /* Same deal as .pp-hint: read-only, so it never eats the unlock tap. */
  position: absolute; left: 10px; bottom: 10px; z-index: 700; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 11px; border-radius: var(--pp-r);
  background: rgba(255, 255, 255, 0.94); border: 1px solid var(--pp-line);
  box-shadow: 0 6px 18px rgba(18, 18, 18, 0.14);
  font-size: 12.5px; white-space: nowrap;
}
.avayis-passport .pp-elev svg { width: 15px; height: 15px; flex: none; }
.avayis-passport .pp-elev .lbl {
  font-family: var(--pp-mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--pp-ink-mute);
}
.avayis-passport .pp-elev .val { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Legend: the official graphic per active layer -------------------- */

.avayis-passport .pp-legend { display: none; }
.avayis-passport .pp-legend.is-on { display: block; }
.avayis-passport .pp-legend .litem {
  border-top: 1px solid var(--pp-line-soft); padding-top: 12px; margin-top: 12px;
}
.avayis-passport .pp-legend .litem:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.avayis-passport .pp-legend .ltitle { font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.avayis-passport .pp-legend .lbox {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: #fff; border: 1px solid var(--pp-line-soft); border-radius: var(--pp-r); padding: 6px;
}
.avayis-passport .pp-legend img { max-width: none; height: auto; display: block; }

/* ---- The solar answer ------------------------------------------------- */

.avayis-passport .pp-answer { display: none; }
/* The solar card, gone while its layer is off. */
.avayis-passport .pp-gone { display: none !important; }
.avayis-passport .pp-answer.is-on { display: block; }
.avayis-passport .pp-meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.avayis-passport .pp-meter i { display: block; height: 7px; border-radius: var(--pp-r); background: var(--pp-line); }
.avayis-passport .pp-meter i.on { background: var(--pp-accent); }

@media (prefers-reduced-motion: reduce) {
  .avayis-passport .pp-shield { transition: none; }
  .avayis-passport .pp-hint .pulse { animation: none; }
}