/* 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;
}

#onboarding-example-image-1, #onboarding-example-image-2-top, #onboarding-example-image-2-bottom {
  width: calc(980px * var(--ui-scale));
  max-width: 100%;
}

.tutorial-table {
  width: 100%;
}

.tutorial-table-cell {
  text-align:center;
}

.tutorial-cell-intro {
  width: 25%;
}

.tutorial-spacer {
  padding-bottom: calc(8px * var(--ui-scale));
}

#onboarding-welcome-ok-button {
  position: relative;
  top: -4px;
}

#onboarding-skip-option span {
  font-size: 65%;
}
#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));
}
.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;
}