/* Overlaid on top of the pano (absolute) rather than in normal flow, so showing it doesn't push the GSV area down. */
#alert-holder {
  z-index: 3;
  position: absolute;
  top: calc(50px * var(--ui-scale));
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  font: var(--text-caption-regular);
  width: calc(730px * var(--ui-scale));
}

#alert {
  background-color: var(--color-warning-100);
  border-radius: calc(10px * var(--ui-scale));
  box-shadow: 0 1px 1px rgb(from var(--color-neutral-black) r g b / 10%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: calc(10px * var(--ui-scale));
  padding: calc(6px * var(--ui-scale)) calc(10px * var(--ui-scale));
  max-width: calc(600px * var(--ui-scale));
  text-align: left;
}

#alert-message {
  min-width: 0; /* Allow the message text to wrap inside the flex row. */
}

#alert-holder a {
  color: var(--color-neutral-black);
}

#alert-dont-show,
#alert-close {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

#alert-dont-show {
  text-decoration: underline;
}

.browser-warning-holder {
  z-index: 3;
  width: 75%;
  text-align: center;
  position: fixed;
  font: var(--text-caption-semibold);
  left: 50%;
  margin-left: -37.5%;
}

.browser-warning-banner {
  background-color: var(--color-warning-100);
  border-radius: calc(10px * var(--ui-scale));
  box-shadow: 0 1px 1px rgb(from var(--color-neutral-black) r g b / 10%);
  display: inline-block;
  margin-top: calc(10px * var(--ui-scale));
  padding: calc(6px * var(--ui-scale)) calc(10px * var(--ui-scale));
}

#browser-warning-close {
  cursor: pointer;
}
#street-view-holder {
  position: relative;
  height: var(--pano-height);
  width: var(--pano-width);
}

/* The pano viewer, label canvas, and interaction layers fill the (display-sized) street view. The canvas
   elements keep their fixed 720x480 bitmap resolution and are scaled up to this size by the browser. */
.window-streetview {
  position: absolute;
  left: 0;
  top: 0;
  height: var(--pano-height);
  width: var(--pano-width);
}

/* The panorama viewport. It fills the full street-view area (no border) so the label canvas, which is the same size,
   overlays the GSV imagery exactly. The colored frame is drawn on top by #pano-border-frame instead. */
#pano {
  border-radius: calc(4px * var(--ui-scale));
  background-color: var(--color-asphalt-400);
  overflow: hidden;
  z-index: 0;
}

/* Interaction layers stacked over the pano; the view-control layer (z-index: 1) sits above these. */
#user-control-layer,
#label-drawing-layer {
  z-index: 0;
}

/* Colored frame on top of the pano and label layers. Drawing it above the canvases (rather than as the pano's own
   border underneath) means a label placed at the very edge is clipped by the frame instead of rendering on top of it.
   The border color is set per label type by RibbonMenu. */
#pano-border-frame {
  z-index: 2;
  pointer-events: none;
  box-sizing: border-box;
  border: calc(3px * var(--ui-scale)) solid var(--color-asphalt-400);
  border-radius: calc(4px * var(--ui-scale));
}

/* Shared button look in pano-overlay-buttons.css; this rule only positions the holder in the top-right of the pano. */
#zoom-buttons-holder {
  position: absolute;
  z-index: 2;
  top: calc(7px * var(--ui-scale));
  right: calc(7px * var(--ui-scale));
}

/* Stuck/sound/feedback controls in the top-left. Shared pill look lives in pano-overlay-buttons.css;
   here we only position the holder and drive the expand/collapse of the optional buttons. */
#explore-control-buttons-holder {
  position: absolute;
  z-index: 2;
  top: calc(7px * var(--ui-scale));
  left: calc(7px * var(--ui-scale));
}

/* Collapsed by default: only the Stuck button and chevron toggle show. */
#explore-control-buttons-holder .collapsible-control-button {
  display: none;
}

#explore-control-buttons-holder.expanded .collapsible-control-button {
  display: flex;
}

#nav-arrows-container {
  position: absolute;
  top: 50%;
  left: calc(50% - 90px * var(--ui-scale));
  width: calc(220px * var(--ui-scale));
  height: calc(220px * var(--ui-scale));
  perspective: calc(285px * var(--ui-scale));
}

/* Used to make it look like there's a 3D perspective for the arrows. The SVG markup has fixed width/height attributes,
   so override them to fill the (scaled) container; its viewBox keeps the arrows proportional. */
#nav-arrows-container svg {
  width: 100%;
  height: 100%;
  transform: rotateX(45deg);
  transform-style: preserve-3d;
}

#arrow-group image {
  cursor: pointer;

  /* Filter adds black outline. */
  filter: drop-shadow(0 0 0.05rem var(--color-neutral-black)) drop-shadow(0 0 0.05rem var(--color-neutral-black));
}

#arrow-group image:hover {
  filter:
    drop-shadow(0 0 0.05rem var(--color-neutral-black)) drop-shadow(0 0 0.05rem var(--color-neutral-black))
    sepia(1) saturate(2) hue-rotate(315deg); /* Adds yellow highlight on hover. */
}

/* Used to highlight/blink the nav arrows in the tutorial. */
#arrow-group image.highlight {
  filter:
    drop-shadow(0 0 0.05rem var(--color-neutral-black)) drop-shadow(0 0 0.05rem var(--color-neutral-black))
    sepia(1) saturate(5) hue-rotate(315deg); /* Adds yellow highlight. */
}

#delete-icon-holder {
  cursor: pointer;
  visibility: hidden;
  position: absolute;
  width: calc(20px * var(--ui-scale));
  height: calc(20px * var(--ui-scale));
  left: 0;
  top: calc(10px * var(--ui-scale));
}

#label-delete-icon {
  height: calc(20px * var(--ui-scale));
  width: calc(20px * var(--ui-scale));
  position: absolute;
}

/* Tooltip shown over a hovered label (filled/positioned by Label.js). Background color is set per label type in JS. */
.label-hover-info {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2; /* Above the pano's view-control-layer (z-index: 1). */
  visibility: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: calc(2px * var(--ui-scale));
  padding: calc(5px * var(--ui-scale)) calc(9px * var(--ui-scale));
  border: 1px solid var(--color-neutral-white);
  border-radius: calc(4px * var(--ui-scale));
  color: var(--color-neutral-white);
  font: var(--text-caption-medium);
  white-space: nowrap;
}

.label-hover-info-severity {
  display: none; /* Toggled to flex by Label.js for label types that have a severity. */
  align-items: center;
  gap: calc(5px * var(--ui-scale));
}

.label-hover-info-severity-icon {
  width: calc(16px * var(--ui-scale));
  height: calc(16px * var(--ui-scale));
}

/* Sits in the top-right just left of the stacked zoom control, scaled down to match its height. transform-origin keeps
   the top-right corner pinned so the scaled sign still lines up with the zoom buttons. */
.speed-limit-sign {
  display: none;
  width: calc(60px * var(--ui-scale));
  height: calc(70px * var(--ui-scale));
  padding: calc(3px * var(--ui-scale));
  top: calc(7px * var(--ui-scale));
  right: calc(36px * var(--ui-scale));
  border-radius: calc(5px * var(--ui-scale));
  position: absolute;
  z-index: 2;
  pointer-events: none;
  transform: scale(0.657);
  transform-origin: top right;
  background: rgb(from var(--color-neutral-white) r g b / 75%);
}

.speed-limit-sign[data-design-style="non-us-canada"] {
  width: calc(75px * var(--ui-scale));
  height: calc(75px * var(--ui-scale));
  padding: 0;
  border-radius: 100%;
  transform: scale(0.613);
}

.speed-limit-holder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(5px * var(--ui-scale));
  border: calc(3px * var(--ui-scale)) solid var(--color-neutral-black);
}

.speed-limit-sign[data-design-style="non-us-canada"] .speed-limit-holder {
  border-radius: 100%;
  border: calc(7px * var(--ui-scale)) solid var(--color-error-200);
}

.speed-limit-text {
  display: flex;
  flex-direction: column;
  font: var(--text-small-bold);
  text-align: center;
}

#speed-limit {
  font: var(--text-h3-bold);
  font-size: calc(30px * var(--ui-scale));
}
#compass-message-holder {
  position: absolute;
  right: calc(7px * var(--ui-scale));
  bottom: calc(7px * var(--ui-scale));
  z-index: 2;
  padding: calc(5px * var(--ui-scale));
  min-width: calc(120px * var(--ui-scale));
  max-width: calc(320px * var(--ui-scale));
  overflow-wrap: break-word;
  border-radius: calc(3px * var(--ui-scale));
  transition: background-color 150ms ease, transform 150ms ease;
  background-color: rgb(from var(--color-neutral-white) r g b / 75%);
}

#compass-message-holder[style*="cursor: pointer"]:hover {
  background-color: var(--color-neutral-white);
}

.compass-message-large {
  font: var(--text-body-bold);
}

.compass-message-small {
  font: var(--text-caption-regular);
  margin: calc(5px * var(--ui-scale));
}

.compass-turn-images {
  position: relative;
  bottom: calc(2px * var(--ui-scale));
  width: calc(25px * var(--ui-scale));
  margin: 0 calc(10px * var(--ui-scale)) 0 0
}
#context-menu-holder {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: calc(12px * var(--ui-scale));
  width: calc(380px * var(--ui-scale));
  background: var(--color-neutral-white);
  border-radius: calc(8px * var(--ui-scale));
  border: solid 1px var(--color-neutral-300);
  visibility: hidden;
  box-sizing: border-box;
}

.context-menu-section {
  height: auto;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: calc(13px * var(--ui-scale));
}

.context-menu-section:last-child {
  margin-bottom: 0;
}

.context-menu-header {
  width: 100%;
  font: var(--text-small-bold);
  margin-bottom: calc(5px * var(--ui-scale));
}

.context-menu-info-icon {
  width: calc(15px * var(--ui-scale));
}

.context-menu-tooltip {
  font: var(--text-tiny-regular);
  z-index: calc(var(--navbar-z-index) + 1);
}

.context-menu-tooltip__img--severity {
  width: calc(138px * var(--ui-scale, 1));
  height: calc(110px * var(--ui-scale, 1));
}

.context-menu-tooltip__img--tag {
  height: calc(125px * var(--ui-scale, 1));
}

#context-menu-tag-holder {
  margin: 0;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: calc(5px * var(--ui-scale)) calc(4px * var(--ui-scale));
  padding: 0;
  white-space: pre;
}

#severity-menu {
  min-height: fit-content;
  margin-top: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: visible;
}

#severity-menu.hidden {
  display: none;
  margin: 0;
  height: 0;
  overflow: hidden;
}

#severity-radio-holder {
  display: flex;
  align-items: flex-start;
  gap: calc(16px * var(--ui-scale));
  margin-top: calc(-4px * var(--ui-scale)); /* Makes up for the extra padding around the severity buttons. */
}

#context-menu-description-section {
  width: 100%;
  height: auto;
  margin-top: calc(-4px * var(--ui-scale)); /* Makes up for the extra padding around the severity buttons. */
}

#context-menu-description-text-box {
  box-sizing: border-box;
  height: calc(23px * var(--ui-scale));
  width: 100%;
  padding: calc(5px * var(--ui-scale));
  border: 1px solid var(--color-neutral-600);
  border-radius: calc(4px * var(--ui-scale));
  font: var(--text-tiny-regular);
  color: var(--color-neutral-600);
}

#context-menu-description-text-box:not(:placeholder-shown) {
  color: var(--color-neutral-black);
}

#context-menu-ok-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(6px * var(--ui-scale)) calc(8px * var(--ui-scale));
  width: calc(31px * var(--ui-scale));
  height: 100%;
  background: var(--color-pine-400);
  border-radius: calc(4px * var(--ui-scale));
  border: none;
  font: var(--text-caption-semibold);
}

#context-menu-close-button-holder {
  position: absolute;
  width: calc(20px * var(--ui-scale));
  height: calc(20px * var(--ui-scale));
  right: calc(10px * var(--ui-scale));
  top: calc(10px * var(--ui-scale));
}

#context-menu-close-button {
  width: calc(20px * var(--ui-scale));
  height: calc(20px * var(--ui-scale));
  background: transparent;
  border: none;
  color: var(--color-asphalt-200);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  overflow: visible;
}

.description-input-frame {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0;
  gap: calc(11px * var(--ui-scale));
  width: 100%;
  height: calc(23px * var(--ui-scale));
  box-sizing: border-box;
}

tag-underline {
  display: inline;
  text-decoration: underline;
  pointer-events: none;
}

.tooltip.in {
  opacity: 1;
}
/* The minimap fills the bottom "neighborhood" section of the right sidebar, growing to take remaining vertical space.
   The minimap overlays (fow, fov, progress; see ObservedArea) read their displayed width/height at render time. */
#minimap-holder {
  /* Reference size (px) used by ObservedArea to scale the FOV/progress geometry. Read via getComputedStyle. */
  --minimap-base-size: var(--sidebar-base-width);
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border: calc(1px * var(--ui-scale)) solid var(--color-neutral-400);
  border-radius: calc(12px * var(--ui-scale));
  overflow: hidden;
}

.minimap-pane {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* During the tutorial the minimap shows a fixed-size square screenshot, so everything inside renders at its native
   (unscaled) square size and the whole holder is scaled (transform) to fill the column. Onboarding's
   sizeTutorialMinimap() sets a non-uniform scale at runtime — full width, but height capped to what fits the sidebar —
   so the screenshot, Google markers, peg, and fog all stretch together (staying aligned) and the holder isn't clipped.
   The transform-origin keeps it anchored top-left; the scale() here is just the pre-script default. */
#minimap-holder.minimap-tutorial {
  flex: 0 0 auto;
  width: var(--minimap-base-size);
  height: var(--minimap-base-size);

  /* Native border sizing; the transform scales it like everything else. */
  border-width: 1px;
  border-radius: 12px;
  background-size: cover;
  transform: scale(var(--ui-scale));
  transform-origin: top left;
}

/* Panes render at native size; --ui-scale is reset to 1 so their own calc(... * var(--ui-scale)) values aren't scaled
   twice (once here and again by the holder's zoom). */
#minimap-holder.minimap-tutorial .minimap-pane {
  --ui-scale: 1;
}

#minimap-overlay {
  z-index: 2;
}

#minimap-message {
  font: var(--text-tiny-regular);
  inset: auto;
  left: calc(3px * var(--ui-scale));
  top: calc(3px * var(--ui-scale));
  width: 60%;
  height: auto;
  padding: calc(2px * var(--ui-scale)) calc(4px * var(--ui-scale));
  z-index: 3;
}

#minimap-fog-of-war-canvas,
#minimap-fov-canvas {
  opacity: 0.3;
}

#minimap-progress-circle-canvas {
  opacity: 0.6;
}

/* Centered over the 360°-observed progress circle that ObservedArea draws at (width - 20, 20) with radius 16 (scaled
   by --ui-scale). This box matches that circle's bounding box so the percentage sits in its center. */
#minimap-percent-observed {
  font: var(--text-tiny-medium);
  inset: auto;
  top: calc(4px * var(--ui-scale));
  right: calc(4px * var(--ui-scale));
  width: calc(32px * var(--ui-scale));
  height: calc(32px * var(--ui-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 3;
}

.gm-svpc {
  visibility: hidden;
}

/* The +/- buttons take their look from the shared .zoom-button styling, with some minor tweaks. */
#minimap-zoom-controls {
  position: absolute;
  inset: auto;
  right: calc(4px * var(--ui-scale));
  bottom: calc(10px * var(--ui-scale));
  z-index: 4;
}

#minimap-zoom-controls .zoom-button {
  width: calc(18px * var(--ui-scale, 1));
  height: calc(18px * var(--ui-scale, 1));
}

#minimap-zoom-controls .zoom-button-icon {
  width: calc(14px * var(--ui-scale, 1));
  height: calc(14px * var(--ui-scale, 1));
}

/* The tutorial minimap is a static screenshot; hide the live zoom controls there. */
#minimap-holder.minimap-tutorial #minimap-zoom-controls {
  display: none;
}
/* Feedback dialog. Centered card over the tool area; scales with the UI via var(--ui-scale). */
#modal-comment-holder {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

#modal-comment-background {
  position: absolute;
  left: 0;
  top: 0;
  background: rgb(from var(--color-neutral-white) r g b / 50%);
  visibility: hidden;
  height: 100%;
  width: 100%;
}

#modal-comment-box {
  position: relative;
  box-sizing: border-box;
  z-index: 1;
  width: calc(480px * var(--ui-scale));
  max-width: 70%;
  margin-right: var(--sidebar-width);
  padding: calc(24px * var(--ui-scale));
  background: var(--color-neutral-white);
  color: var(--color-asphalt-500);
  border-radius: calc(12px * var(--ui-scale));
  box-shadow: 0 calc(5px * var(--ui-scale)) calc(5px * var(--ui-scale)) rgb(from var(--color-asphalt-900) r g b / 25%);
}

#modal-comment-title {
  font: var(--text-subtitle-bold);
  margin-bottom: calc(12px * var(--ui-scale));
}

#modal-comment-title p {
  margin: 0;
}

.modal-comment-buttons {
  display: flex;
  justify-content: flex-end;
  gap: calc(10px * var(--ui-scale));
}

#modal-comment-textarea {
  box-sizing: border-box;
  height: calc(120px * var(--ui-scale));
  width: 100%;
  margin: 0 0 calc(16px * var(--ui-scale));
  padding: calc(10px * var(--ui-scale)) calc(12px * var(--ui-scale));
  border: calc(1px * var(--ui-scale)) solid var(--color-neutral-300);
  border-radius: calc(8px * var(--ui-scale));
  font: var(--text-small-regular);
  color: var(--color-asphalt-500);
  resize: vertical;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#modal-comment-textarea:focus {
  border-color: var(--color-asphalt-300);
  box-shadow: 0 0 0 calc(3px * var(--ui-scale)) rgb(from var(--color-asphalt-400) r g b / 15%);
}

/*
 * Mission complete modal. A centered card shown over the dimmed, non-interactive Explore tool.
 */

/* The three street tiers on the modal map; shared by the map layers (read in JS) and the legend swatches. */
:root {
  --mc-line-this-mission: var(--color-pine-700);
  --mc-line-previous: var(--color-pine-500);
  --mc-line-community: var(--color-pine-200);
}

#modal-mission-complete-holder {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
}

/* Dim, click-blocking layer behind the card (catches clicks so the tool can't be interacted with). */
.modal-background {
  position: absolute;
  inset: 0;
  background: rgb(from var(--color-neutral-black) r g b / 50%);
}

/* The centered card itself, filling roughly two-thirds of the page width. */
.modal-foreground {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--ui-scale));
  width: 60%;
  max-width: calc(900px * var(--ui-scale));
  max-height: 80%;
  overflow: auto;
  padding: calc(22px * var(--ui-scale)) calc(28px * var(--ui-scale));
  background: var(--color-neutral-white);
  border-radius: calc(20px * var(--ui-scale));
  box-shadow: 0 calc(8px * var(--ui-scale)) calc(16px * var(--ui-scale)) rgb(from var(--color-asphalt-900) r g b / 25%);
}

.mission-complete__header {
  display: flex;
  align-items: center;
  gap: calc(24px * var(--ui-scale));
}

.mission-complete__header h1 {
  font: var(--text-title-bold);
  margin: 0;
}

.mission-complete__subtitle {
  font: var(--text-small-regular);
  margin: calc(4px * var(--ui-scale)) 0 0;
}

.mission-complete__badge {
  flex-shrink: 0;
  width: calc(50px * var(--ui-scale));
  height: calc(50px * var(--ui-scale));
}

.mission-complete__map-wrap {
  position: relative;
  width: 100%;
  height: calc(360px * var(--ui-scale));
  border-radius: calc(8px * var(--ui-scale));
  overflow: hidden;
}

#modal-mission-complete-map {
  position: absolute;
  inset: 0;
}

/* Map overlay cards (label/street legend on the left, neighborhood progress on the right). */
.mission-complete__overlay {
  position: absolute;
  top: calc(12px * var(--ui-scale));
  z-index: 1;
  box-sizing: border-box;
  padding: calc(12px * var(--ui-scale)) calc(16px * var(--ui-scale));
  background: var(--color-neutral-white);
  border: calc(1px * var(--ui-scale)) solid var(--color-neutral-300);
  border-radius: calc(6px * var(--ui-scale));
  box-shadow: 0 calc(2px * var(--ui-scale)) calc(6px * var(--ui-scale)) rgb(from var(--color-asphalt-900) r g b / 15%);
  font: var(--text-caption-regular);
}

.mission-complete__overlay--left {
  left: calc(12px * var(--ui-scale));
}

.mission-complete__overlay--right {
  right: calc(12px * var(--ui-scale));
  width: calc(210px * var(--ui-scale));
}

.mission-complete__overlay-title {
  font: var(--text-small-bold);
  margin: 0 0 calc(6px * var(--ui-scale));
}

.mission-complete__overlay-divider {
  border: none;
  border-top: 1px solid var(--color-neutral-200);
  margin: calc(10px * var(--ui-scale)) 0;
}

.mission-complete__legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(3px * var(--ui-scale));
}

.mission-complete__legend-item {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-scale));
}

.mission-complete__legend-dot {
  flex-shrink: 0;
  width: calc(10px * var(--ui-scale));
  height: calc(10px * var(--ui-scale));
  border-radius: 50%;
  border: calc(1px * var(--ui-scale)) solid var(--color-neutral-black);
}

.mission-complete__legend-line {
  flex-shrink: 0;
  width: calc(16px * var(--ui-scale));
  height: calc(4px * var(--ui-scale));
  border-radius: calc(2px * var(--ui-scale));
}

.mission-complete__legend-line--this-mission {
  background: var(--mc-line-this-mission);
}

.mission-complete__legend-line--previous {
  background: var(--mc-line-previous);
}

.mission-complete__legend-line--community {
  background: var(--mc-line-community);
}

.mission-complete__progress {
  gap: calc(8px * var(--ui-scale));
}

.mission-complete__stat {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-scale));
}

.mission-complete__stat + .mission-complete__stat {
  margin-top: calc(12px * var(--ui-scale));
}

.mission-complete__stat-icon {
  flex-shrink: 0;
  width: calc(22px * var(--ui-scale));
  height: calc(22px * var(--ui-scale));
  object-fit: contain;
}

.mission-complete__stat-text {
  display: flex;
  flex-direction: column;
  gap: calc(2px * var(--ui-scale));
}

.mission-complete__stat-all {
  font: var(--text-small-bold);
}

.mission-complete__stat-you {
  font: var(--text-caption-regular);
}

.mission-complete__buttons {
  display: flex;
  justify-content: flex-end;
  gap: calc(12px * var(--ui-scale));
}
#onboarding-holder {
  visibility: hidden;
}

/* Dims everything below the navbar while a full-page takeover message is shown. */
#onboarding-background {
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  width: 100%;
  height: calc(100% - var(--navbar-height));
  background: var(--color-neutral-white);
  z-index: 1028;
  visibility: hidden;
}

#hand-gesture-holder {
  width: var(--pano-width);
}

#hand-gesture-holder .kineticjs-content,
#hand-gesture-holder canvas {
  width: 100% !important;
  height: auto !important;
}

#onboarding-message-holder {
  width: calc(300px * var(--ui-scale));
  margin: calc(10px * var(--ui-scale));
  padding: calc(10px * var(--ui-scale));
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  font: var(--text-subtitle-regular);
  transform: none;

  border-radius: calc(3px * var(--ui-scale));
  background: var(--color-neutral-white);
  transition: background 0.5s;
}

/* Flashes the message box's background to draw the user's attention when a new message is shown. */
#onboarding-message-holder.onboarding-message-flash {
  background: var(--color-warning-100);
  transition: background 0s;
}

#onboarding-message-holder .button {
  width: 100%;
}

.onboarding-gif {
  display: block;
  width: 95%;
  margin: calc(5px * var(--ui-scale)) auto;
}

.onboarding-ok-button-holder {
  display: flex;
  justify-content: flex-end;
  margin-top: calc(5px * var(--ui-scale));
}

/* Anchored boxes: no margin (Floating UI positions by the border box; the id beats #onboarding-message-holder's
   margin). drop-shadow (not box-shadow) follows the combined silhouette of the box and its child arrow, so the arrow's
   inner edges merge in and only its outer edges cast a shadow — keeping the white-on-white arrow visible. */
#onboarding-message-holder.callout-floating {
  margin: 0;
  filter: drop-shadow(0 0 calc(5px * var(--ui-scale, 1)) rgb(from var(--color-neutral-black) r g b / 50%));
}

/* Arrow for anchor-based instruction boxes positioned by Floating UI. A rotated square sits behind the box so only
   the half protruding toward the anchored element is visible; Floating UI sets its position along the relevant edge. */
.fui-arrow {
  position: absolute;
  width: calc(16px * var(--ui-scale));
  height: calc(16px * var(--ui-scale));
  background: var(--color-neutral-white);
  transform: rotate(45deg);
  z-index: -1;
}

/* Pin a message to the pano's top-right corner. */
#onboarding-message-holder.onboarding-message-top-right {
  left: auto;
  right: 0;
}

/* Full-page intro/outro takeover: center the panel on the viewport, above all UI except the navbar. z-index sits just
   below the navbar (#header, z-index: 1030) so the takeover covers everything but it. */
#onboarding-message-holder.onboarding-message-takeover {
  position: fixed;
  top: 45%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  max-width: 95vw;
  max-height: 90vh;
  overflow: hidden auto;
  z-index: 1029;
}

/* Full-page celebratory outro (the tutorial-complete screen). The outro is the only takeover message, and unlike the
   small centered instruction boxes it wants the whole canvas so its content can be placed from top to bottom. Layered
   after the takeover rule (same specificity) so it wins, this turns the centered/shrink-wrapped box into a full-height,
   edge-to-edge container; .tutorial-complete lays itself out inside it (see css/explore/tutorial-screens.css). */
#onboarding-message-holder.onboarding-message-fullpage {
  top: var(--navbar-height);
  left: 0;
  width: 100%;
  height: calc(100% - var(--navbar-height));
  max-width: none;
  max-height: none;
  padding: 0;
  transform: none;
  background: none;
  border-radius: 0;
}
#pop-up-message-holder {
  position: absolute;
  left: 0;
  top: 0;
}

/* Semi-transparent overlay covering the pano while a pop-up is shown, blocking interactions behind it. */
#pop-up-message-background {
  position: absolute;
  left: 0;
  top: 0;
  background: rgb(from var(--color-neutral-white) r g b / 50%);
  height: 100%;
  width: 100%;
}

/* The pop-up box itself. The holder spans the whole app holder (so the overlay covers the ribbon etc.), so the
 * box is centered over the pano area specifically using the layout variables from .tool-ui. */
#pop-up-message-foreground {
  background: var(--color-neutral-white);
  border: calc(1px * var(--ui-scale)) solid var(--color-neutral-400);
  border-radius: calc(8px * var(--ui-scale));
  font: var(--text-subtitle-regular);
  padding: calc(10px * var(--ui-scale));
  position: absolute;
  left: calc(var(--pano-width) / 2);
  top: calc(var(--street-view-top) + var(--pano-height) / 2);
  transform: translate(-50%, -50%);
  width: calc(480px * var(--ui-scale));
  z-index: 2;
  text-align: center;
}

/* Pop-ups containing an example image need extra room. */
#pop-up-message-foreground.has-image {
  width: calc(640px * var(--ui-scale));
}

#pop-up-message-foreground h2 {
  font: var(--text-h2-bold);
  margin-top: calc(10px * var(--ui-scale, 1));
}

#pop-up-message-foreground p {
  padding-left: calc(1px * var(--ui-scale));
}

#pop-up-message-foreground a {
  color: var(--color-neutral-900);
}

#pop-up-message-button-holder {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: calc(20px * var(--ui-scale));
  padding-top: calc(6px * var(--ui-scale));
}

#pop-up-message-image {
  border-radius: calc(8px * var(--ui-scale));
  margin: calc(5px * var(--ui-scale))
}
.icon-ribbon-menu-medium {
  height: calc(35px * var(--ui-scale));
  margin: 0 calc(5px * var(--ui-scale));
  position: relative;
  left: 0;
  top: calc(-2px * var(--ui-scale));
}

.label-type-button-holder {
  cursor: pointer;
  position: relative;
  width: calc(77px * var(--ui-scale));
}

#label-type-divider-major {
  border-left: 2px solid var(--color-neutral-300);
  align-self: center;
  top: var(--ribbon-title-height);
  height: calc(20px * var(--ui-scale));
}

.label-type-icon {
  display: block;
  margin: auto;
  height: calc(66px * var(--ui-scale));
  border-color: transparent;
  border-style: solid;
  border-width: calc(5px * var(--ui-scale));
  border-radius: 50%;
}

.label-type-name {
  font-size: calc(8px * var(--ui-scale));
  line-height: 0.9; /* Tighter than the token's line-height so two-line names fit in the fixed-height ribbon. */
  text-align: center;
  display: block;
  width: 100%;
  padding-top: calc(3px * var(--ui-scale));
}

.ribbon-menu-title-holder {
  height: var(--ribbon-title-height);
  overflow: hidden;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ribbon-menu-title {
  font: var(--text-tiny-regular);
  position: relative;
}

/* Add lines to the left and right of the titles. Similar to this https://silvawebdesigns.com/line-on-sides-headers/ */
.ribbon-menu-title::before, .ribbon-menu-title::after {
  position: absolute;
  top: 51%;
  width: 1000px; /* Set to a very large value, cut off from outer div with overflow: hidden. */
  height: 1px;
  content: "";
  background-color: var(--color-neutral-300);
}

.ribbon-menu-title::before {
  right: 100%;
  margin-right: calc(5px * var(--ui-scale));
}

.ribbon-menu-title::after {
  left: 100%;
  margin-left: calc(5px * var(--ui-scale));
}

#ribbon-menu-holder {
  background: transparent;
  position: absolute;
  top: var(--ribbon-top);
  height: var(--ribbon-height);
  width: var(--pano-width);

  /* Center the button row vertically within the holder, to avoid pooling whitespace in some languages. */
  display: flex;
  align-items: center;

  --ribbon-title-height: calc(14px * var(--ui-scale));
}

#ribbon-menu-buttons {
  flex: 1;
  display: flex;
  align-items: stretch;          /* groups share a height so their button rows (and icons) line up */
  justify-content: space-between;
}

/* The Explore button has no section title above it, so offset it by the title height to line. */
#mode-switch-button-walk {
  margin-top: var(--ribbon-title-height);
}

/* A labeled section (e.g. Curb Ramp): the title sits on top, its buttons in a row beneath. */
.ribbon-menu-group {
  display: flex;
  flex-direction: column;
}

.ribbon-menu-group-buttons {
  display: flex;
  align-items: stretch;          /* buttons in the row share a height so their icons line up */
}

#ribbon-menu-other-subcategory-holder {
  position: absolute;
  top: calc(54px * var(--ui-scale));
  left: calc(-10px * var(--ui-scale));
  width: calc(260px * var(--ui-scale));
  padding: calc(10px * var(--ui-scale));
  z-index: 4;
  visibility: hidden;
}

.ribbon-menu-other-subcategory {
  padding: calc(10px * var(--ui-scale)) calc(5px * var(--ui-scale));
  margin: calc(5px * var(--ui-scale)) calc(5px * var(--ui-scale)) 0;
  background: var(--color-neutral-white);
  border-radius: calc(28px * var(--ui-scale));
  border: calc(1px * var(--ui-scale)) solid var(--color-neutral-200);
}

.ribbon-menu-other-subcategory:hover {
  background-color: var(--color-neutral-200);
}
/* Right sidebar: a vertical flex column holding the current mission, global stats, badge progress, and the neighborhood
   minimap. Sits to the right of the pano and spans the app's full height; the minimap section grows to fill whatever
   vertical space the other sections leave. All sizes scale with --ui-scale like the rest of the tool. */
#explore-sidebar {
  --exp-sidebar-section-gap: calc(18px * var(--ui-scale));
  --exp-sidebar-link: var(--color-link-200);

  position: absolute;
  left: var(--sidebar-left);
  top: calc(4px * var(--ui-scale));
  width: var(--sidebar-width);
  height: calc(var(--street-view-top) + var(--pano-height) - (4px * var(--ui-scale)));
  display: flex;
  flex-direction: column;
  gap: var(--exp-sidebar-section-gap);
  padding-top: calc(4px * var(--ui-scale)); /* Just so that it looks better next to the ribbon headers. */
  color: var(--color-neutral-black);
  overflow: hidden;
}

.explore-sidebar__section {
  display: flex;
  flex-direction: column;
}

.explore-sidebar__heading {
  font: var(--text-body-medium);
  color: var(--color-neutral-black);
  margin: 0 0 calc(4px * var(--ui-scale));
}

.explore-sidebar__subheading {
  font: var(--text-caption-regular);
  margin: 0;
}

/* Long neighborhood names (e.g. "Teaneck Creek Conservancy") would wrap to a second line; clamp the mission line to
   one line with an ellipsis. MissionPanel sets the element's title to the full text so it stays available on hover. */
#current-mission-description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Holds the mission and neighborhood progress groups, spaced from each other and from the minimap below. */
.explore-sidebar__progress-groups {
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--ui-scale));
  margin-bottom: calc(var(--exp-sidebar-section-gap) / 2);
}

.explore-sidebar__progress-group {
  display: flex;
  flex-direction: column;
}

/* The badge progress bars are slightly slimmer than the mission/neighborhood bars, with a smaller text. */
.explore-sidebar__badge-progress {
  --ps-progress-bar-height: calc(10px * var(--ui-scale));
}

/* The badge count labels ("current / target") reserve a fixed-width column so both badge bars render the same length
   regardless of the text (#4450), sized to the widest realistic label ("12.3 / 20.0 mi"); shorter labels just leave
   the reserved space empty. */
.explore-sidebar__badge-progress .ps-progress-bar__label {
  font: var(--text-tiny-semibold);
  flex: 0 0 auto;
  min-width: calc(64px * var(--ui-scale));
}

/* Same equal-length treatment for the mission and neighborhood bars (#4450): their labels are percentages
   ("0%"–"100%"), so a narrower reserved column keeps both bars aligned regardless of the value. */
.explore-sidebar__progress-group .ps-progress-bar__label {
  flex: 0 0 auto;
  min-width: calc(34px * var(--ui-scale));
}

/* Overall stats: three equal columns, each an icon over a value over a label. */
.explore-sidebar__stats-row {
  display: flex;
  justify-content: space-between;
  gap: calc(8px * var(--ui-scale));
}

.explore-sidebar__stat {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(6px * var(--ui-scale));
}

.explore-sidebar__stat-icon {
  height: calc(26px * var(--ui-scale));
  width: auto;
  object-fit: contain;
}

.explore-sidebar__stat-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.explore-sidebar__stat-value {
  font: var(--text-small-bold);
}

.explore-sidebar__stat-label {
  font: var(--text-caption-regular);
  line-height: 100%;
}

/* Badges */
.explore-sidebar__badge-list {
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--ui-scale));
  padding-left: calc(5px * var(--ui-scale));
}

.explore-sidebar__badge {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--ui-scale));
}

.explore-sidebar__badge-icon {
  position: relative;
  flex: 0 0 auto;
  width: calc(36px * var(--ui-scale));
  height: calc(36px * var(--ui-scale));
  cursor: help;
  border-radius: calc(4px * var(--ui-scale));
}

.explore-sidebar__badge-icon:focus-visible {
  outline: 2px solid var(--color-link-200);
  outline-offset: calc(2px * var(--ui-scale));
}

.explore-sidebar__badge-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The faded base reads as "not yet filled"; a full-color copy is clipped to reveal from the bottom up by --badge-fill
   (0–1), giving a second visualization of progress toward the next badge. */
.explore-sidebar__badge-icon-base {
  filter: grayscale(1);
  opacity: 0.3;
}

.explore-sidebar__badge-icon-fill {
  clip-path: inset(calc((1 - var(--badge-fill, 0)) * 100%) 0 0 0);
  transition: clip-path 0.3s ease;
}

/* Tooltip shown on hover/focus: an enlarged, full-color badge alongside its name and how-to-earn text. */
.explore-sidebar__badge-tooltip {
  position: fixed;
  left: -9999px; /* Off-screen until JS positions it. */
  top: -9999px;
  display: flex;
  align-items: center;
  gap: calc(12px * var(--ui-scale));
  width: calc(280px * var(--ui-scale));
  padding: calc(12px * var(--ui-scale));
  background: var(--color-neutral-white);
  border: 1px solid var(--color-neutral-600);
  border-radius: calc(12px * var(--ui-scale));
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95);
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: calc(var(--navbar-z-index) - 1);
}

.explore-sidebar__badge-tooltip--visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.explore-sidebar__badge-tooltip-icon {
  flex: 0 0 auto;
  width: calc(72px * var(--ui-scale));
  height: calc(72px * var(--ui-scale));
  object-fit: contain;
}

.explore-sidebar__badge-tooltip-body {
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--ui-scale));
}

.explore-sidebar__badge-tooltip-name {
  font: var(--text-small-medium);
  color: var(--color-neutral-black);
}

.explore-sidebar__badge-tooltip-desc {
  margin: 0;
  font: var(--text-tiny-regular);
  color: var(--color-neutral-black);
}

.explore-sidebar__badge-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.explore-sidebar__badge-name {
  font: var(--text-caption-semibold);
}

.explore-sidebar__see-all {
  display: inline-flex;
  align-items: center;
  gap: calc(2px * var(--ui-scale));
  width: fit-content;
  margin-top: calc(6px * var(--ui-scale));
  font: var(--text-tiny-semibold);
  color: var(--exp-sidebar-link);
  text-decoration: none;
}

.explore-sidebar__see-all:hover {
  color: var(--exp-sidebar-link);
  text-decoration: underline;
}

/* External-link glyph on the CTAs, signalling that they open in a new tab. */
.explore-sidebar__see-all-icon {
  flex: 0 0 auto;
  width: calc(12px * var(--ui-scale));
  height: calc(12px * var(--ui-scale));
}

/* Visually hidden but exposed to assistive tech (e.g. the "opens in a new tab" hint on CTAs). */
.explore-sidebar__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Current mission section (mission progress, neighborhood progress, and minimap): grows to fill the remaining
   sidebar height so the minimap takes whatever vertical space the other sections leave. */
.explore-sidebar__section--map {
  flex: 1 1 auto;
  min-height: 0;
}

/* Chandigarh-only AI mission guidance message. */
#mission-guidance-status {
  font: var(--text-caption-regular);
}
text {
  visibility: hidden;
}

.highlight-100 {
  background: var(--color-warning-100) !important;
}

.highlight-50 {
  background: rgb(from var(--color-warning-100) r g b / 50%) !important;
}

input[type="radio"] {
  height: calc(11px * var(--ui-scale, 1));
  width: calc(11px * var(--ui-scale, 1));
}

.tool-ui {
  /* === Explore layout dimensions ===
     * The pano & label canvas keep a fixed 720x480 *logical* coordinate frame (see util.EXPLORE_CANVAS_WIDTH/HEIGHT) so
     * pano_x/pano_y, canvas_x/canvas_y, & crop placement are unaffected by display size. These variables control only
     * the on-screen *display* size of the pano, which scales proportionally. Keep --pano-width : --pano-height at the
     * same 3:2 ratio as the logical frame so the canvas/crop coordinates continue to map correctly.
     *
     * --ui-scale is a single uniform scale factor for the whole tool, like browser zoom. JS sets it from the available
     * viewport size (see util.applyToolScale); every dimension below is expressed as base-size * var(--ui-scale) so
     * the pano, ribbon, sidebar, and text all grow and shrink together in proportion. This keeps the layout looking
     * identical at every size (only zoomed). */
  --ui-scale: 1; /* The single scale knob. Overridden inline by util.applyToolScale() on load and resize. */

  /* Base sizes at --ui-scale = 1. util.applyToolScale() reads these to compute the tool's reference footprint,
     * so they must stay plain px values (no var()/calc()). */
  --pano-base-width: 720px;  /* Pano display size at --ui-scale = 1 (matches the logical frame, 3:2). */
  --pano-base-height: 480px;
  --sidebar-base-width: 250px; /* Right-hand status/minimap column. */
  --sidebar-base-gap: 10px;    /* Horizontal gap between the pano and the sidebar. */
  --ribbon-base-top: 4px;      /* Offset of the ribbon menu from the top of the app holder. */
  --ribbon-base-height: 110px; /* Height of the ribbon menu sitting above the pano. */

  --pano-width: calc(var(--pano-base-width) * var(--ui-scale));
  --pano-height: calc(var(--pano-base-height) * var(--ui-scale));
  --sidebar-width: calc(var(--sidebar-base-width) * var(--ui-scale));
  --sidebar-gap: calc(var(--sidebar-base-gap) * var(--ui-scale));
  --ribbon-top: calc(var(--ribbon-base-top) * var(--ui-scale));
  --ribbon-height: calc(var(--ribbon-base-height) * var(--ui-scale));

  /* Derived positions — these keep the rest of the layout in sync with the pano size automatically. */
  --street-view-top: calc(var(--ribbon-top) + var(--ribbon-height)); /* Top of the pano area. */
  --sidebar-left: calc(var(--pano-width) + var(--sidebar-gap));       /* Left edge of the sidebar column. */
  --app-width: calc(var(--pano-width) + var(--sidebar-gap) + var(--sidebar-width));

  /* Base text size for the whole tool. */
  font: var(--text-body-regular);

  width: var(--app-width); /* Overrides bootstrap .container media queries to keep a consistent width. */
  padding: 0; /* Drop bootstrap .container's 15px side padding so the app-width holder inside stays centered. */
}

#svl-application-holder {
  background: var(--color-neutral-white);
  margin: 0 auto;
  position: relative;
  height: calc(var(--street-view-top) + var(--pano-height));
  width: var(--app-width);
}

#interaction-area-holder {
  position: absolute;
  top: var(--street-view-top);
  height: var(--pano-height);
  width: var(--pano-width);
}


#page-overlay-holder {
  background: var(--color-neutral-white);
  left: 0;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  visibility: hidden;
}

/* http://stackoverflow.com/questions/8942805/chrome-bug-cursor-changes-on-mouse-down-move */
#view-control-layer {
  -webkit-user-select: none;
  user-select: none;
  cursor: url("/assets/images/icons/openhand.cur") 4 4, move;
  z-index: 1;
}

.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.5;
}

#svl-panorama-date-holder {
  display: flex;
  justify-content: flex-start;
  height: calc(28px * var(--ui-scale));
  position: absolute;
  bottom: calc(var(--bottom-left-links-clearance, 0px) * var(--ui-scale));
  left: calc(71px * var(--ui-scale));
  z-index: 1;
  font: var(--text-small-medium);
  text-shadow:
    calc(1px * var(--ui-scale)) calc(1px * var(--ui-scale)) calc(1px * var(--ui-scale)) var(--color-neutral-black);
  color: var(--color-neutral-white);
}

/* Modify Google's terms / report an issue buttons' color to match our own buttons. */
#view-control-layer .gm-style-cc div { background-color: var(--color-asphalt-400); }
#view-control-layer .gm-style-cc div div { background-color: var(--color-asphalt-400) !important; }

/* Scale Google's terms / report-a-problem links (bottom-left; moved here from the pano) with the UI. They're Google's
   own elements with no scale hooks, so we scale them visually, anchored to the bottom-left corner they sit in. The
   other bottom-left overlays (date/info button, imagery-source logo) are lifted above these via
   --bottom-left-links-clearance, which PanoManager sets to the links' height for whichever imagery source provides
   a bottom-left links/attribution bar (GSV's terms/report-a-problem links, Mapillary's attribution links). */
#view-control-layer div:has(> .gmnoprint) {
  bottom: calc(3px * var(--ui-scale)) !important;
  left: calc(1px * var(--ui-scale)) !important;
  right: auto !important;
  transform: scale(var(--ui-scale));
  transform-origin: bottom left;
}

/* Scale Google's own Street View logo with the UI, anchored to its corner. */
#pano div:has(> a[aria-label*="Google"]) {
  left: calc(2px * var(--ui-scale)) !important;
  bottom: calc((2px + var(--bottom-left-links-clearance, 0px)) * var(--ui-scale)) !important;
  transform: scale(var(--ui-scale));
  transform-origin: bottom left;
}

/* Move Mapillary's attribution links to the bottom-left of the pano, scaling them with the UI. */
#view-control-layer .mapillary-attribution-container {
  bottom: calc(3px * var(--ui-scale)) !important;
  left: calc(1px * var(--ui-scale)) !important;
  right: auto !important;
  transform: scale(var(--ui-scale));
  transform-origin: bottom left;
}

#svl-panorama-date {
  padding: calc(3px * var(--ui-scale));
}

/* Scale Bootstrap tooltips (severity descriptions, button hints, etc.) with the UI. They render on <body>, so they read
   --ui-scale from :root. Font/padding are scaled rather than transformed so Bootstrap's positioning still works. */
.tooltip-inner {
  font: var(--text-caption-regular);
  padding: calc(3px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
  max-width: calc(200px * var(--ui-scale, 1));
}

/* Survey. Lives outside .tool-ui, so it reads --ui-scale from :root (set by util.applyToolScale). */
#survey-form {
  padding-right: calc(20px * var(--ui-scale, 1));
}

#survey-modal-container ol> li {
  font: var(--text-small-bold);
  content: counter(item);
}

#survey-modal-container ol> li h4 {
  font: var(--text-small-bold);
}

.survey-question {
  margin-bottom: calc(10px * var(--ui-scale, 1));
}

.survey-textarea {
  width: 100%;
  height: calc(64px * var(--ui-scale, 1));
  font: var(--text-caption-regular);
}

.survey-option-holder {
  list-style:none;
  width:100%;
  margin:0;
  padding:0 0 calc(10px * var(--ui-scale, 1));
  display:block;
}

.survey-option {
  display:inline-block;
  width: 19%;
  text-align:center;
  vertical-align:top;
  font: var(--text-caption-regular);
}

.survey-option label {
  width:100%;
  font: var(--text-caption-regular);
}

/* Scale the survey modal's Bootstrap chrome (dialog width, header, title, close button, submit button) with the UI. */
#survey-modal-container .modal-dialog {
  width: calc(600px * var(--ui-scale, 1));
  margin: calc(30px * var(--ui-scale, 1)) auto;
}

#survey-modal .modal-header {
  padding: calc(15px * var(--ui-scale, 1));
}

#survey-modal .modal-title {
  font: var(--text-subtitle-medium);
}

#survey-modal .modal-header .close {
  font: var(--text-title-bold);
}

#survey-modal .modal-body {
  padding: calc(15px * var(--ui-scale, 1));
}

#survey-modal .btn {
  font: var(--text-small-regular);
  padding: calc(5px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
}

/**
 * Add this class to any text on the explore page that should be selectable. In explore.scala.html we set onselectstart
 * to return false over the whole document, except elements where itself or a parent has this class. This was done to
 * prevent an issue where dragging on the pano canvas would select a bunch of stuff in the background; issue link below.
 * https://github.com/ProjectSidewalk/SidewalkWebpage/issues/121
 */
/* stylelint-disable-next-line block-no-empty -- Intentional marker class. */
.audit-selectable { }

#pano-info-button {
  margin-left: calc(4px * var(--ui-scale));
  margin-top: calc(4.5px * var(--ui-scale));
  height: calc(16px * var(--ui-scale));
}
/*
 * Styles for the two standalone tutorial framing screens:
 *   - .tutorial-intro    the pre-tutorial "Join the Sidewalk Mission" walkthrough (Explore/Label/Validate/Impact).
 *   - .tutorial-complete the "You did it!" screen shown when the tutorial finishes.
 */

/* ---- Pre-tutorial intro walkthrough ------------------------------------------------------------------------------ */

.tutorial-intro {
  display: none;
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  width: 100%;
  height: calc(100% - var(--navbar-height));
  background: var(--color-neutral-white);
  z-index: 1029; /* Just below the navbar (#header is 1030) so it covers the whole tool but leaves the navbar usable. */
  overflow: auto;
}

.tutorial-intro.is-visible {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tutorial-intro__inner {
  display: flex;
  flex-direction: column;
  width: 75%;
  margin: 0 auto;
}

.tutorial-intro__header {
  display: flex;
  flex-direction: column;
  gap: calc(12px * var(--ui-scale, 1));
}

.tutorial-intro__eyebrow {
  margin: 0;
  text-transform: uppercase;
  font: var(--text-title-bold);
  color: var(--color-neutral-700);
}

.tutorial-intro__title {
  margin: 0;
  font: var(--text-h1-bold);
  color: var(--color-neutral-black);
}

.tutorial-intro__body {
  display: flex;
  align-items: stretch;
  gap: calc(48px * var(--ui-scale, 1));
  margin-top: calc(24px * var(--ui-scale, 1)); /* Space between the header and the illustration/panel row. */
}

.tutorial-intro__illustration {
  position: relative;
  flex: 1 1 auto;
  aspect-ratio: 900 / 560;
  border: calc(2px * var(--ui-scale, 1)) solid var(--color-neutral-black);
  border-radius: calc(20px * var(--ui-scale, 1));
  background: var(--color-neutral-100);
  overflow: hidden;
}

.tutorial-intro__illustration-img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tutorial-intro__illustration-img.is-active {
  display: block;
}

.tutorial-intro__panel {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc(340px * var(--ui-scale, 1));
  width: calc(340px * var(--ui-scale, 1));
}

.tutorial-intro__step {
  display: none;
}

.tutorial-intro__step.is-active {
  display: block;
}

.tutorial-intro__step-heading {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--ui-scale, 1));
}

.tutorial-intro__step-icon {
  width: auto;
  height: calc(28px * var(--ui-scale, 1));
}

.tutorial-intro__step-title {
  font: var(--text-title-bold);
  text-transform: uppercase;
  color: var(--color-neutral-black);
}

.tutorial-intro__divider {
  width: 100%;
  height: calc(5px * var(--ui-scale, 1));
  margin: calc(14px * var(--ui-scale, 1)) 0 calc(24px * var(--ui-scale, 1));
  background: var(--color-neutral-900);
}

.tutorial-intro__step-description {
  margin: 0;
  font: var(--text-body-medium);
  white-space: pre-line; /* Renders the "\n"-separated stat lines of the Impact step as paragraphs. */
  color: var(--color-neutral-900);
}

/* Pinned to the bottom of the panel so the button's base lines up with the bottom of the illustration. */
.tutorial-intro__next {
  justify-content: center;
  width: 100%;
  margin-top: auto;
}

/* The sign-in / skip links sit on their own full-width row below the illustration and panel. */
.tutorial-intro__links {
  display: flex;
  flex-direction: column;
  gap: calc(2px * var(--ui-scale, 1));
  margin-top: calc(12px * var(--ui-scale, 1)); /* Space between the illustration/panel row and the links. */
  text-align: right;
}

.tutorial-intro__links p {
  margin: 0;
  font: var(--text-caption-medium);
  color: var(--color-neutral-900);
}

.tutorial-intro__link {
  font: var(--text-caption-semibold);
  color: var(--color-neutral-900);
  text-decoration: underline;
}

.tutorial-intro__link:hover,
.tutorial-intro__link:focus {
  color: var(--color-neutral-black);
}

/* Stack the illustration above the copy on narrow viewports. */
@media (width <= 900px) {
  .tutorial-intro__body {
    flex-direction: column;
    gap: calc(24px * var(--ui-scale, 1));
  }

  .tutorial-intro__panel {
    flex-basis: auto;
    width: 100%;
  }

  .tutorial-intro__links {
    text-align: left;
  }
}

/* ---- Tutorial-complete "You did it!" screen ---------------------------------------------------------------------- */

/* Vertical stack across the full-page canvas: a fireworks-framed hero, the "You did it!" copy, then the two actions,
   each placed by an explicit --tc-* knob below. Percent offsets/sizes keep the composition proportional as the window
   resizes; the px gaps carry var(--ui-scale) so they track the tool zoom. */
.tutorial-complete {
  --tc-hero-top: 14%; /* Where the hero starts, measured from the top (share of canvas height). */
  --tc-hero-width: 40%; /* Hero illustration width (share of canvas width). */
  --tc-text-gap: calc(5px * var(--ui-scale, 1)); /* Space between the hero and the "You did it!" text. */
  --tc-buttons-gap: calc(50px * var(--ui-scale, 1)); /* Space between the text and the buttons. */

  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 100%;
  padding: var(--tc-hero-top) calc(24px * var(--ui-scale, 1)) calc(48px * var(--ui-scale, 1));
}

/* Hero plus its two decorative fireworks. position: relative makes this the reference box for the absolute fireworks;
   with no padding here the box wraps the hero, so a firework's `top` is measured from the hero's top edge. */
.tutorial-complete__animation {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

.tutorial-complete__hero {
  width: var(--tc-hero-width);
  height: auto;
}

/* Fireworks sit relative to the hero: `top` is measured from the hero's top edge (negative lifts them above it);
   left/width are canvas-relative so the pair scales with the hero. Tune each burst's top/left/width to taste. */
.tutorial-complete__fireworks {
  position: absolute;
  height: auto;
  pointer-events: none;
}

.tutorial-complete__fireworks--1 {
  top: calc(-75px * var(--ui-scale, 1));
  left: 38%;
  width: 10%;
}

.tutorial-complete__fireworks--2 {
  top: calc(-145px * var(--ui-scale, 1));
  left: 50%;
  width: 13%;
}

.tutorial-complete__text {
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--ui-scale, 1));
  margin-top: var(--tc-text-gap);
  font: var(--text-h3-bold);
  text-align: center;
}

.tutorial-complete__text p {
  margin: 0;
}

/* A fixed gap below the text (--tc-buttons-gap), with the two actions pushed to the outer edges of a capped-width row
   so they sit apart. (To glue the buttons to the very bottom of the canvas instead, set margin-top: auto.) */
.tutorial-complete__buttons {
  display: flex;
  justify-content: space-between;
  width: min(88%, calc(560px * var(--ui-scale, 1)));
  margin-top: var(--tc-buttons-gap);
}
.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
}

.mission-start-tutorial-overlay {
  position: absolute;
  height: calc(100% - var(--navbar-height));
  width: 100%;
  background: var(--color-neutral-white);
  z-index: 11;
  display: none; /* Will be later set to flex by JS after rendering. */
  flex-shrink: 0;
  justify-content: flex-start;
  overflow: auto;
  flex-direction: column;

  --arrow-button-width: calc(30px * var(--ui-scale, 1));
  --arrow-button-margin: calc(30px * var(--ui-scale, 1));

  --mst-base-width: 1095px;
  --mst-h-margin: 40px;
}

.mst-content {
  width: calc(var(--mst-base-width) * var(--ui-scale, 1));
  margin: 0 auto;
}

.mst-instruction-1 {
  font: var(--text-title-bold);
  margin-top: calc(8px * var(--ui-scale, 1));
  padding: 0 calc(70px * var(--ui-scale, 1));
  width: 100%;
  height: fit-content;
}


.mst-instruction-2 {
  font: var(--text-subtitle-bold);
  margin: calc(5px * var(--ui-scale, 1)) 0;
  padding: 0 calc(70px * var(--ui-scale, 1));
  width: 100%;
}

.mst-carousel {
  display: flex;
  flex-shrink: 0;
  width: 100%;
  height: calc(436px * var(--ui-scale, 1));
  margin-top: calc(10px * var(--ui-scale, 1));
}

.previous-slide-button, .next-slide-button {
  height: 100%;
  width: var(--arrow-button-width);
  display: flex;
  fill: var(--color-neutral-700);
  cursor: pointer;
}

.previous-slide-button:not(.disabled):hover, .next-slide-button:not(.disabled):hover {
  fill: var(--color-neutral-black);
}

.previous-slide-button {
  margin-right: var(--arrow-button-margin);
}

.next-slide-button {
  margin-left: var(--arrow-button-margin);
}

.mst-slide {
  height: 100%;
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  width: calc(100% - 2 * (var(--arrow-button-width) + var(--arrow-button-margin)));
  justify-content: space-between;
}

.mst-text-area {
  width: calc(290px * var(--ui-scale, 1));
  display: flex;
  flex-shrink: 0;
  flex-flow: column wrap;
  position: relative;
}

.label-type-title {
  font: var(--text-title-bold);
  text-align: left;
  margin-bottom: calc(15px * var(--ui-scale, 1));
  padding: 0 calc(10px * var(--ui-scale, 1));
}

.label-type-subtitle {
  font: var(--text-body-bold);
  padding: 0 calc(10px * var(--ui-scale, 1));
}

.label-type-description {
  font: var(--text-body-regular);
  text-align: left;
  padding: 0 calc(10px * var(--ui-scale, 1));
  margin-top: calc(10px * var(--ui-scale, 1));
}

.mission-start-tutorial-overlay-footer {
  margin-top: calc(15px * var(--ui-scale, 1));
  width: 100%;
}

.mission-start-tutorial-done-btn {
  font: var(--text-small-bold);
  position: absolute;
  bottom: 0;
  right: 0;
}

.msts-image-area {
  width: calc(658px * var(--ui-scale, 1));
  height: calc(436px * var(--ui-scale, 1));
  float: right;
  background: var(--color-neutral-300);
  display: flex;
  position: relative;
  border-radius: calc(10px * var(--ui-scale, 1));
  overflow: hidden;
}

.msts-image {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.label-on-image {
  display: none;
  position: absolute;
  background: var(--color-neutral-white);
  border: calc(3px * var(--ui-scale, 1)) solid;
  border-radius: calc(10px * var(--ui-scale, 1));
  box-sizing: content-box;
  min-height: calc(80px * var(--ui-scale, 1));
  max-height: calc(90px * var(--ui-scale, 1));
  min-width: calc(160px * var(--ui-scale, 1));
  max-width: calc(220px * var(--ui-scale, 1));
}

/* correct/incorrect classes are added to the slide element */
.correct .label-on-image {
  border-color: var(--color-pine-700);
}

/* correct/incorrect classes are added to the slide element */
.incorrect .label-on-image {
  border-color: var(--color-error-200);
}

.label-on-image-type {
  margin: calc(10px * var(--ui-scale, 1));
  display: flex;
  align-items: center;
}

.label-on-image-type-icon {
  height: calc(24px * var(--ui-scale, 1));
  width: calc(24px * var(--ui-scale, 1));
  fill: none;
  display: flex;
  margin-right: calc(3px * var(--ui-scale, 1));
}

.correct .label-on-image-type-icon {
  stroke: var(--color-pine-700);
}

.incorrect .label-on-image-type-icon {
  stroke: var(--color-error-200);
}

.label-on-image-type-title {
  display: flex;
  font: var(--text-body-bold);
  margin-left: calc(3px * var(--ui-scale, 1));
}

.correct .label-on-image-type-title {
  color: var(--color-pine-700);
}

.incorrect .label-on-image-type-title {
  color: var(--color-error-200);
}

.label-on-image-description {
  font: var(--text-body-regular);
  margin: 0 calc(12px * var(--ui-scale, 1));
}

.example-type-area {
  display: flex;
  padding: calc(10px * var(--ui-scale, 1));
  margin-bottom: calc(20px * var(--ui-scale, 1));
  position: relative;
}

.example-type-area::after {
  background: #30785D;
  background: var(--color-pine-700);
  width: calc(100% - 20px * var(--ui-scale, 1));
  height: calc(8px * var(--ui-scale, 1));
  position: absolute;
  bottom: calc(-6px * var(--ui-scale, 1));
  content: "";
  left: 50%;
  transform: translateX(-50%);
}

.correct .example-type-area::after {
  background: var(--color-pine-700);
}

.incorrect .example-type-area::after {
  background: var(--color-error-200);
}

.example-type-icon {
  height: calc(24px * var(--ui-scale, 1));
  width: calc(24px * var(--ui-scale, 1));
  display: inline-block;
  margin-right: calc(5px * var(--ui-scale, 1));
  fill: none;
}

.correct .example-type-icon {
  stroke: var(--color-pine-700);
}

.incorrect .example-type-icon {
  stroke: var(--color-error-200);
}

.example-type-label {
  font: var(--text-title-bold);
  display: inline-block;
  margin-left: calc(5px * var(--ui-scale, 1));
}

.correct .example-type-label {
  color: var(--color-pine-700);
}

.incorrect .example-type-label {
  color: var(--color-error-200);
}

.mst-carousel-location-indicator-area {
  height: calc(12px * var(--ui-scale, 1));
  width: 100%;
  padding: calc(5px * var(--ui-scale, 1));
  margin-top: calc(25px * var(--ui-scale, 1));
  display: flex;
  justify-content: center;
  align-items: center;
}

.mst-carousel-location-indicator {
  height: calc(7px * var(--ui-scale, 1));
  width: calc(40px * var(--ui-scale, 1));
  margin: 0 calc(3.5px * var(--ui-scale, 1));
  background: var(--color-neutral-400);
  transition: all 0.4s;
  border-radius: 100px;
}

.mst-carousel-location-indicator.current-location {
  background: var(--color-asphalt-500);
}

/*
 * Explore mission screen tab bar styling
 */
.explore-mission-start-tab-bar {
  width: 100%;
  height: calc(50px * var(--ui-scale, 1));
  display: flex;
  justify-content: space-between;
  margin: calc(5px * var(--ui-scale, 1)) 0;
  padding: 0 calc(2 * var(--arrow-button-margin));
}

.explore-mission-start-tab-content {
  margin: 0 calc(12px * var(--ui-scale, 1));
  display: flex;
  align-items: center;
}

.explore-mission-start-tab.label {
  border-radius: calc(4px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1)) 0 0;
  height: 100%;
  width: 100%;
  color: var(--color-neutral-black);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font: var(--text-tiny-semibold);
  text-align: left;
  border-bottom: calc(3px * var(--ui-scale, 1)) solid var(--color-neutral-200);
  padding: 0 calc(3px * var(--ui-scale, 1));
  filter: saturate(0);
  transition: all 0.25s;
}

.explore-mission-start-tab.label:hover, .explore-mission-start-tab.label.active {
  filter: saturate(1);
}

.explore-mission-start-tab.label[data-label-type="CurbRamp"]:hover {
  background: rgb(from var(--color-label-curb-ramp) r g b / 15%);
}

.explore-mission-start-tab.label[data-label-type="NoCurbRamp"]:hover {
  background: rgb(from var(--color-label-no-curb-ramp) r g b / 15%);
}

.explore-mission-start-tab.label[data-label-type="Obstacle"]:hover {
  background: rgb(from var(--color-label-obstacle) r g b / 15%);
}

.explore-mission-start-tab.label[data-label-type="SurfaceProblem"]:hover {
  background: rgb(from var(--color-label-surface-problem) r g b / 15%);
}

.explore-mission-start-tab.label[data-label-type="NoSidewalk"]:hover {
  background: rgb(from var(--color-label-no-sidewalk) r g b / 15%);
}

.explore-mission-start-tab.label[data-label-type="Crosswalk"]:hover {
  background: rgb(from var(--color-label-crosswalk) r g b / 15%);
}

.explore-mission-start-tab.label[data-label-type="Signal"]:hover {
  background: rgb(from var(--color-label-signal) r g b / 15%);
}


/* Selected tabs */
.explore-mission-start-tab.label[data-label-type="CurbRamp"].active {
  background: rgb(from var(--color-label-curb-ramp) r g b / 15%);
  border-bottom-color: var(--color-label-curb-ramp);
}

.explore-mission-start-tab.label[data-label-type="NoCurbRamp"].active {
  background: rgb(from var(--color-label-no-curb-ramp) r g b / 15%);
  border-bottom-color: var(--color-label-no-curb-ramp);
}

.explore-mission-start-tab.label[data-label-type="Obstacle"].active {
  background: rgb(from var(--color-label-obstacle) r g b / 15%);
  border-bottom-color: var(--color-label-obstacle);
}

.explore-mission-start-tab.label[data-label-type="SurfaceProblem"].active {
  background: rgb(from var(--color-label-surface-problem) r g b / 15%);
  border-bottom-color: var(--color-label-surface-problem);
}

.explore-mission-start-tab.label[data-label-type="NoSidewalk"].active {
  background: rgb(from var(--color-label-no-sidewalk) r g b / 15%);
  border-bottom-color: var(--color-label-no-sidewalk);
}

.explore-mission-start-tab.label[data-label-type="Crosswalk"].active {
  background: rgb(from var(--color-label-crosswalk) r g b / 15%);
  border-bottom-color: var(--color-label-crosswalk);
}

.explore-mission-start-tab.label[data-label-type="Signal"].active {
  background: rgb(from var(--color-label-signal) r g b / 15%);
  border-bottom-color: var(--color-label-signal);
}


.explore-mission-start-tab-icon {
  width: calc(30px * var(--ui-scale, 1));
  height: calc(30px * var(--ui-scale, 1));
  margin-right: calc(7px * var(--ui-scale, 1));
  flex-shrink: 0; /* Keep the icon at full size when the tab row gets squeezed, so it isn't clipped. */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Let the SVG overflow rather than clip. When floating point widths, they can slightly flow outside the box. */
.explore-mission-start-tab-icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.explore-mission-start-tab-text {
  width: 70%;
  white-space: initial;
}