/* Styles owned by streetview.js.
 *
 * Ship this alongside the module - it creates these elements at runtime, so
 * without this file the position marker and the move pad are invisible.
 * Everything is prefixed sv- and scoped to classes (no ID selectors) so it
 * cannot collide with a host application's stylesheet.
 *
 * Colours come from CSS custom properties with fallbacks, so a host app can
 * retheme by setting --sv-accent on any ancestor.
 */

/* ---- move pad: one chevron per exit, at its real bearing ---- */
.sv-nav{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  width:124px; height:124px; z-index:6; display:none;
}
.sv-nav.is-on{display:block}
.sv-nav::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:var(--sv-pad, rgba(15,17,21,.34)); backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 8px 26px rgba(0,0,0,.4);
}
.sv-nav::after{
  content:''; position:absolute; left:50%; top:50%; width:6px; height:6px;
  margin:-3px 0 0 -3px; border-radius:50%; background:rgba(255,255,255,.32);
}
.sv-chev{
  position:absolute; left:50%; top:50%; width:40px; height:40px;
  margin:-20px 0 0 -20px; padding:0; border:0; background:none; cursor:pointer;
  transition:filter .15s, opacity .15s;
}
.sv-chev svg{
  width:100%; height:100%; fill:rgba(255,255,255,.92);
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.7));
}
.sv-chev.is-side svg{fill:rgba(255,255,255,.55)}
.sv-chev:hover svg{fill:var(--sv-accent, #60a5fa)}
.sv-chev:active{filter:brightness(1.4)}

/* ---- "you are here" marker, cone rotates with the view ---- */
.sv-marker{width:44px; height:44px; position:relative; will-change:transform}
.sv-marker .sv-cone{
  position:absolute; left:50%; top:50%; width:0; height:0;
  border-left:17px solid transparent; border-right:17px solid transparent;
  border-bottom:30px solid var(--sv-cone, rgba(96,165,250,.42));
  transform-origin:50% 100%; transform:translate(-50%,-100%);
  filter:drop-shadow(0 0 6px rgba(96,165,250,.5));
}
.sv-marker .sv-pin{
  position:absolute; left:50%; top:50%; width:14px; height:14px;
  margin:-7px 0 0 -7px; border-radius:50%;
  background:var(--sv-accent, #3b82f6); border:2.5px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.6);
}

/* landslide-zone popup on the map (text sits on maplibre's white popup) */
.sv-haz{font:12.5px/1.45 system-ui,sans-serif;color:#111}
.sv-haz small{color:#555}

/* reported-hazard popup: the community photos + what it is */
.sv-rep{font:12.5px/1.45 system-ui,sans-serif;color:#111}
.sv-rep img{display:block;width:100%;max-height:150px;object-fit:cover;border-radius:6px;margin-bottom:6px}
.sv-rep .sv-muted{color:#666}