/* Panels anchored to a label icon in the pano: the read-only hover card and the editable context menu it opens
   into. They are two states of one panel, so they share this shell — a white card with a neutral hairline, an 8px
   radius, and a tail aimed at the label icon — and are positioned by the same routine (util.anchorPanelToLabel),
   which sets --panel-tail-top and the --flipped modifier. Each panel's own stylesheet adds its size and contents. */
.label-anchored-panel {
  position: absolute;
  box-sizing: border-box;
  background: var(--color-neutral-white);
  border: 1px solid var(--color-neutral-300);
  border-radius: calc(8px * var(--ui-scale));
}

/* The tail is a true triangle drawn as two stacked clip-path layers — a neutral-300 backing triangle with a white
   fill triangle offset 1.5px toward the panel — so it keeps the panel's hairline along its slanted edges and joins
   the panel edge with no seam. (A border+rotate diamond leaves gaps at the base corners; don't reintroduce it.) */
.label-anchored-panel::before,
.label-anchored-panel::after {
  content: "";
  position: absolute;
  top: var(--panel-tail-top, 50%);
  width: calc(8px * var(--ui-scale));
  height: calc(16px * var(--ui-scale));
  margin-top: calc(-8px * var(--ui-scale));
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.label-anchored-panel::before {
  left: calc(-8px * var(--ui-scale));
  background: var(--color-neutral-300);
}

.label-anchored-panel::after {
  left: calc(-6.5px * var(--ui-scale));
  background: var(--color-neutral-white);
}

/* Flipped: the panel sits to the left of the label icon, so the tail moves to the panel's right edge. */
.label-anchored-panel--flipped::before,
.label-anchored-panel--flipped::after {
  left: auto;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.label-anchored-panel--flipped::before {
  right: calc(-8px * var(--ui-scale));
}

.label-anchored-panel--flipped::after {
  right: calc(-6.5px * var(--ui-scale));
}
/* The read-only label card, shared by Explore and Validate. The shell — white card, neutral hairline, 8px radius,
   tail at the icon — comes from .label-anchored-panel, shared in turn with Explore's context menu (the card's
   editable state). What's specific here is the caption scale and the absence of any form affordance, so it stays
   unmistakably read-only. The label color lives in the type icon rather than the card surface: white text on a raw
   label color runs 1.68-2.75:1, under the 4.5:1 AA floor for every label type (#4719, #4726).

   Populated by Explore's Label.js #updateHoverCard() and Validate's LabelCard, positioned by both through
   util.anchorPanelToLabel. Each tool sets its own stacking position and hosts its own footer actions: Explore
   Delete/Edit, Validate a single Hide-label toggle. */
.label-hover-card {
  left: 0;
  top: 0;
  visibility: hidden;
  width: max-content;
  max-width: calc(240px * var(--ui-scale));
  box-shadow: 0 calc(2px * var(--ui-scale)) calc(10px * var(--ui-scale)) rgb(45 42 63 / 28%);
}

.label-hover-card__header {
  display: flex;
  align-items: center;
  gap: calc(7px * var(--ui-scale));
  padding: calc(6px * var(--ui-scale)) calc(10px * var(--ui-scale));
}

.label-hover-card__icon {
  width: calc(20px * var(--ui-scale));
  height: calc(20px * var(--ui-scale));
}

.label-hover-card__type {
  flex: 1;
  font: var(--text-caption-semibold);
  color: var(--color-neutral-black);
  white-space: nowrap;
}

/* Share, in the header rather than the footer: the footer is where a panel's actions on *this* label live (Explore's
   Delete/Edit, Validate's Hide), and at the card's 240px width a third button there would leave all three too narrow
   to read. Icon-only for the same reason — the label beside it would double the header's width. Its accessible name
   comes from aria-label, and the popover it opens says "Share this label" at the top. */
.label-hover-card__share.label-detail__share-trigger {
  flex: none;
  gap: 0;
  padding: calc(3px * var(--ui-scale));
  background: none;
  border: none;
  border-radius: calc(5px * var(--ui-scale));
  color: var(--color-neutral-700);
}

.label-hover-card__share.label-detail__share-trigger:hover {
  background: var(--color-neutral-100);
  border: none;
  color: var(--color-neutral-black);
}

.label-hover-card__share svg {
  width: calc(14px * var(--ui-scale));
  height: calc(14px * var(--ui-scale));
}

.label-hover-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(6px * var(--ui-scale));
  padding: calc(7px * var(--ui-scale)) calc(10px * var(--ui-scale)) calc(8px * var(--ui-scale));
  border-top: 1px solid var(--color-neutral-200);
}

/* The severity, not-rated, tags, and description rows are shown/hidden per label by the populating JS.

   Severity and not-rated are drawn as filled chips that enclose their icon and text, so the rating reads as one
   object instead of a loose icon-plus-sentence row. They match the tag chips below in height, type, and text color
   and differ only by their fill, which keeps the body one uniform stack of read-only chips rather than a ladder of
   competing sizes. The fill stays neutral: the level's color already comes from the smiley asset, and a
   level-to-color map in CSS would be a hardcoded copy of it. */
.label-hover-card__severity,
.label-hover-card__not-rated {
  display: none;
  align-items: center;
  gap: calc(4px * var(--ui-scale));

  /* Tighter on the icon side so the icon sits just inside the chip's edge. */
  padding: calc(2px * var(--ui-scale)) calc(7px * var(--ui-scale)) calc(2px * var(--ui-scale))
    calc(3px * var(--ui-scale));
  border-radius: 200px;
  background: var(--level-wash, var(--color-neutral-100));
  font: var(--text-tiny-medium);

  /* neutral-800, not the neutral-700 the tag chips use: on a level wash rather than flat neutral-100 this text
     falls to 4.35-4.42:1 for levels 2 and 3, under the AA floor. neutral-800 holds 7.5-8.7:1 on every level. */
  color: var(--color-neutral-800);
}

.label-hover-card__severity-icon {
  flex: none;
  width: calc(12px * var(--ui-scale));
  height: calc(12px * var(--ui-scale));

  /* The smiley is the same asset the context menu uses as a rating button, so it's held back here to read as a
     status glyph rather than something to click. */
  opacity: 0.75;
}

/* Mirrors the red "?" alert drawn on the canvas next to unrated labels (see Label.js #showSeverityAlert). Unlike the
   severity smiley this one keeps its full strength — it's flagging something still to do. Explore only: a validator
   can't rate from this card, so Validate leaves the chip out of its markup rather than nudging about a gap it
   offers no way to close. */
.label-hover-card__not-rated-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(12px * var(--ui-scale));
  height: calc(12px * var(--ui-scale));
  border-radius: 50%;
  background: var(--color-error-200);
  color: var(--color-neutral-white);
  font: var(--text-tiny-semibold);
}

.label-hover-card__tags {
  display: none;
  flex-wrap: wrap;
  gap: calc(4px * var(--ui-scale));
}

/* A hairline between the rating and the tags, when there is a rating above them to separate from. The two rows are
   both chips, so without it they read as one wrapped set rather than two different kinds of fact. The JS adds the
   class, because the rating is hidden with an inline display:none that no sibling selector can see. */
.label-hover-card__tags--divided {
  align-self: stretch;
  padding-top: calc(7px * var(--ui-scale));
  border-top: 1px solid var(--color-neutral-200);
}

/* The shared pill shape, shrunk and quieted down: these tags are read-only metadata, so they must not carry the
   context menu's tappable-button look (dark outline, roomy padding). The hairline stays — several tags sit side by
   side and need an edge to tell them apart — but drops to neutral-300 with 10px gray text. */
.label-hover-card__tags .tag-pill {
  padding: calc(2px * var(--ui-scale)) calc(7px * var(--ui-scale));
  outline-color: var(--color-neutral-300);
}

.label-hover-card__tags .tag-pill__label {
  font: var(--text-tiny-medium);
  color: var(--color-neutral-700);
}

/* Tiny, matching the chips above it — at caption size it was the largest thing in a body made of 10px chips, so
   the least important field read as the most prominent. The token's own 12px line-height is too tight for a
   description that wraps, so only that is overridden. */
.label-hover-card__description {
  display: none;
  font: var(--text-tiny-regular);
  line-height: 1.45;
  font-style: italic;
  color: var(--color-neutral-700);
  overflow-wrap: anywhere;
}

/* Empty state: no rating, no tags, no description. Validate always has a body to fill because it names the label it
   is asking about; Explore collapses the body instead, since a label with nothing in it is one the user just placed
   and is about to fill in. */
.label-hover-card__no-info {
  display: none;
  font: var(--text-tiny-regular);
  color: var(--color-neutral-700);
}

/* Footer action buttons (design-system button-ps/button--tiny). */
.label-hover-card__actions {
  display: flex;
  gap: calc(6px * var(--ui-scale));
  padding: calc(6px * var(--ui-scale)) calc(10px * var(--ui-scale)) calc(8px * var(--ui-scale));
  border-top: 1px solid var(--color-neutral-200);
}

.label-hover-card__action-button {
  flex: 1;
  justify-content: center;
  gap: calc(5px * var(--ui-scale));
}

.label-hover-card__action-button svg,
.label-hover-card__action-button img {
  flex: none;
  width: calc(12px * var(--ui-scale));
  height: calc(12px * var(--ui-scale));
}
/* Overlaid on top of the pano (absolute) rather than in normal flow, so showing it doesn't push the GSV area down.
   The holder spans a centered column but passes pointer events through its transparent margins to the pano — only
   the card itself is interactive. */
#alert-holder {
  z-index: 3;
  position: absolute;
  top: calc(50px * var(--ui-scale));
  left: 0;
  right: 0;
  width: calc(730px * var(--ui-scale));
  max-width: 92%;
  margin: 0 auto;
  pointer-events: none;
}

/* Toast card. Mirrors the site's test-server banner (banana band, outlined pill action, circular close) so the two
   notices read as one family, adapted here to a floating, tool-scaled card. One centered row — the icon, message,
   and optional "don't show again" pill sit together and vertically center; the close pins to the top-right corner
   like an OS window control. A short message keeps everything on one line; a longer one wraps and the pill holds the
   right, centered against it. */
#alert {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: calc(12px * var(--ui-scale));
  margin: 0 auto;
  max-width: calc(640px * var(--ui-scale));

  /* Extra right padding reserves the top-right corner for the absolutely-positioned close. */
  padding: calc(14px * var(--ui-scale)) calc(50px * var(--ui-scale)) calc(14px * var(--ui-scale))
    calc(18px * var(--ui-scale));
  background-color: var(--color-banana-200);
  border: 1px solid var(--color-banana-500);
  border-radius: calc(12px * var(--ui-scale));
  box-shadow:
    0 calc(4px * var(--ui-scale)) calc(16px * var(--ui-scale))
    rgb(from var(--color-neutral-black) r g b / 12%);
  text-align: left;
}

/* Info cue on the left, vertically centered with the message. */
#alert-icon {
  flex: 0 0 auto;
  width: calc(22px * var(--ui-scale));
  height: calc(22px * var(--ui-scale));
  color: var(--color-banana-800);
}

/* Grows to fill the row, shrinking (wrapping its own text) rather than pushing the pill off the line. */
#alert-message {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font: var(--text-small-regular);
  color: var(--color-neutral-800);
}

/* Secondary action as an outlined amber pill, matching the banner's. Sits inline at the right of the message;
   display:none (set by AlertController when the message doesn't offer an opt-out) drops it from the row entirely. */
#alert-dont-show {
  flex: 0 0 auto;
  padding: calc(5px * var(--ui-scale)) calc(16px * var(--ui-scale));
  border: 1px solid var(--color-banana-800);
  border-radius: calc(999px * var(--ui-scale));
  background: transparent;
  font: var(--text-small-medium);
  color: var(--color-neutral-900);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#alert-dont-show:hover {
  background-color: var(--color-banana-300);
  border-color: var(--color-banana-900);
}

/* Circular close pinned to the card's top-right corner (OS-style), so it stays put whether the message is one line
   or several. */
#alert-close {
  position: absolute;
  top: calc(10px * var(--ui-scale));
  right: calc(12px * var(--ui-scale));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(28px * var(--ui-scale));
  height: calc(28px * var(--ui-scale));
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-neutral-700);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#alert-close svg {
  width: calc(16px * var(--ui-scale));
  height: calc(16px * var(--ui-scale));
}

#alert-close:hover {
  background-color: var(--color-banana-300);
  color: var(--color-neutral-900);
}

#alert :focus-visible {
  outline: 2px solid var(--color-link-200);
  outline-offset: calc(2px * var(--ui-scale));
}

@media (prefers-reduced-motion: reduce) {
  #alert-dont-show,
  #alert-close {
    transition: none;
  }
}

.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 label and
   onboarding canvases are re-rastered to this display size times devicePixelRatio (util.sizeCanvasToDisplay),
   with drawing kept in the fixed 720x480 logical frame via a context transform. */
.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. */
}

/* The highlighted route-forward arrow (#4671) marks the way the route wants the user to go. It inherits the link-arrow
   base style (cursor + dark outline from #arrow-group image) but keeps its navigation-blue fill on hover — just
   brightened — instead of the link arrows' yellow tint, which would fight the blue. */
#arrow-group image.route-forward-highlight:hover {
  filter:
    drop-shadow(0 0 0.05rem var(--color-neutral-black)) drop-shadow(0 0 0.05rem var(--color-neutral-black))
    brightness(1.15);
}

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

/* Explore's copy of the read-only label card. The card itself — shell, header, chip stack, footer — is shared with
   Validate and lives in css/common/label-hover-card.css (#4726). What's left here is what only Explore's card does:
   sit in this tool's stacking order, act as one big click target that opens the label's context menu, and offer the
   Delete/Edit actions a validator must not have. */
.label-hover-card {
  z-index: 2; /* Above the pano's view-control-layer (z-index: 1), below the context menu (z-index: 3). */
  cursor: pointer;
}

/* An open share menu has to clear the rest of the pano's chrome, and it cannot do that on its own: it is a child of
   the card, so the card's z-index caps it however high its own goes. At the card's usual level the compass message
   (z-index: 2) is a peer that paints later and covers the menu; the minimap and ribbon (up to 5) are above it
   outright. So raise the whole card for as long as the menu is up. 6 clears every pano-area layer while staying far
   below the modals (1000) and the navbar (1030). aria-expanded is the widget's own source of truth and is kept
   current on every close path, so nothing here can be left stuck raised. */
.label-hover-card:has(.label-detail__share-trigger[aria-expanded="true"]) {
  z-index: 6;
}

/* Occlusion labels have no context menu to open, so the card isn't clickable and the Edit button is hidden. */
.label-hover-card--static {
  cursor: default;
}

.label-hover-card--static .label-hover-card__edit-button,
.label-hover-card--no-delete .label-hover-card__delete-button {
  display: none;
}

/* Tutorial labels are never submitted, so they never get the public id a share link needs. The wrapper goes, not
   just the button, so the header doesn't keep its gap. */
.label-hover-card--no-share .label-detail__share {
  display: none;
}

/* Quiet-destructive variant: the secondary button shape in the error color (no error button variant exists yet).
   Clicking anywhere on the card already opens the context menu; the Edit button gives that action a visible
   affordance and a keyboard target. Delete is the one action that must not bubble into the card click (Canvas.js
   stops its propagation). */
.label-hover-card__delete-button {
  background: var(--color-neutral-white);
  color: var(--color-error-200);
  outline: 1px solid var(--color-error-200);
}

.label-hover-card__delete-button:hover,
.label-hover-card__delete-button:focus-visible {
  background: var(--color-error-200);
  color: var(--color-neutral-white);
}

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

  /* Hover must reach the sign for its title tooltip; `auto` also guards against a no-pointer-events ancestor. */
  pointer-events: auto;
  cursor: help;
  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
}
/* The card shell (surface, hairline, radius, tail) comes from .label-anchored-panel, shared with the hover card
   this menu opens from; both are positioned by util.anchorPanelToLabel so the panel expands roughly in place. */
#context-menu-holder {
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: calc(380px * var(--ui-scale));
  visibility: hidden;
}

/* Same reason as the collapsed card's (svl-canvas.css): the share menu is a child of this panel, so it can only ever
   paint as high as the panel does — and at z-index 3 the minimap and ribbon (up to 5) are above it. */
#context-menu-holder:has(.label-detail__share-trigger[aria-expanded="true"]) {
  z-index: 6;
}

/* Header / body / footer mirror the collapsed card's three bands, so expanding the panel keeps the same rhythm. */
.context-menu__header {
  display: flex;
  align-items: center;
  gap: calc(7px * var(--ui-scale));
  padding: calc(8px * var(--ui-scale)) calc(12px * var(--ui-scale));
}

.context-menu__icon {
  width: calc(20px * var(--ui-scale));
  height: calc(20px * var(--ui-scale));
  flex: none;
}

.context-menu__type {
  flex: 1;
  font: var(--text-small-bold);
  color: var(--color-neutral-black);
  white-space: nowrap;
}

.context-menu__close {
  flex: none;
  width: calc(18px * var(--ui-scale));
  height: calc(18px * var(--ui-scale));
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-asphalt-200);
  cursor: pointer;
}

.context-menu__body {
  display: flex;
  flex-direction: column;
  padding: calc(9px * var(--ui-scale)) calc(12px * var(--ui-scale)) calc(10px * var(--ui-scale));
  border-top: 1px solid var(--color-neutral-200);
}

.context-menu__actions {
  display: flex;
  gap: calc(6px * var(--ui-scale));
  padding: calc(8px * var(--ui-scale)) calc(12px * var(--ui-scale)) calc(10px * var(--ui-scale));
  border-top: 1px solid var(--color-neutral-200);
}

.context-menu__action {
  flex: 1;
  justify-content: center;
  gap: calc(5px * var(--ui-scale));
}

.context-menu__action svg {
  flex: none;
  width: calc(12px * var(--ui-scale));
  height: calc(12px * var(--ui-scale));
}

/* Quiet-destructive variant, matching the collapsed card's Delete. */
.context-menu__delete {
  background: var(--color-neutral-white);
  color: var(--color-error-200);
  outline: 1px solid var(--color-error-200);
}

.context-menu__delete:hover,
.context-menu__delete:focus-visible {
  background: var(--color-error-200);
  color: var(--color-neutral-white);
}

/* Share sits left of Close, matching the collapsed card's header. Same quiet icon-only treatment, one step larger
   because this panel's header type is larger too. */
.context-menu__share.label-detail__share-trigger {
  flex: none;
  gap: 0;
  padding: calc(4px * var(--ui-scale));
  background: none;
  border: none;
  border-radius: calc(5px * var(--ui-scale));
  color: var(--color-neutral-700);
}

.context-menu__share.label-detail__share-trigger:hover {
  background: var(--color-neutral-100);
  border: none;
  color: var(--color-neutral-black);
}

.context-menu__share svg {
  width: calc(16px * var(--ui-scale));
  height: calc(16px * var(--ui-scale));
}

/* Tutorial labels are never submitted, so they never get the public id a share link needs. */
.context-menu--no-share .label-detail__share {
  display: none;
}

/* The tutorial locks deletion on the label it just had you place. */
.context-menu--no-delete .context-menu__delete {
  display: none;
}

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

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

/* Field labels, not steps: the old "1. / 2. / 3." numbering implied a required sequence when all three fields are
   optional and order-free, and it had to be renumbered in JS whenever a label type had no severity. */
.context-menu-header {
  display: flex;
  align-items: center;
  gap: calc(5px * var(--ui-scale));
  width: 100%;
  font: var(--text-tiny-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  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(4px * var(--ui-scale));
  padding: 0;
  white-space: pre;
}

/* Tighter than the shared pill's default. A label type can offer twenty-odd tags, so this section sets the panel's
   height more than anything else in it; trimming the padding and dropping the weight takes rows off it without
   touching the target size much. They keep the interactive pill's fill and outline states. */
#context-menu-tag-holder .tag-pill {
  padding: calc(3px * var(--ui-scale)) calc(8px * var(--ui-scale));
}

#context-menu-tag-holder .tag-pill__label {
  font: var(--text-tiny-medium);
}

#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;
}

/* One enclosure, three equal cells. The shape is the visual half of what the markup already says: a rating is
   pick-one, where the tags below are pick-any. Equal thirds because the options are peers -- affordable because
   the labels are short (Low/Medium/High, Good/Okay/Bad); the passability phrases would not fit three fixed cells. */
.severity-segments {
  display: flex;
  width: 100%;
  border-radius: calc(6px * var(--ui-scale));
  outline: 1px solid var(--color-neutral-300);
  overflow: hidden;
}

.severity-segments .severity-button {
  flex: 1 1 0;
  flex-direction: row;
  justify-content: center;
  gap: calc(4px * var(--ui-scale));
  padding: calc(6px * var(--ui-scale)) calc(8px * var(--ui-scale));
  border-radius: 0;
  border-right: 1px solid var(--color-neutral-200);
  white-space: nowrap;
}

.severity-segments .severity-button:last-child {
  border-right: none;
}

.severity-segments .severity-button__icon {
  width: calc(15px * var(--ui-scale));
  height: calc(15px * var(--ui-scale));
}

.severity-segments .severity-button__label {
  font: var(--text-tiny-medium);
  color: var(--color-neutral-700);
}

/* Hovering previews the level you are about to pick, instead of the shared grey from main.css -- the whole point
   of colouring the scale is seeing which end you are reaching for before you commit. Three classes' worth of
   specificity, so it beats that grey; .severity-button:hover alone would only tie with the selected rule below. */
.severity-segments .severity-button:hover {
  background: var(--level-wash, var(--color-neutral-100));
}

/* The chosen segment adds the edge on top, so hover reads as a preview and the underline as the commitment. */
.severity-segments .severity-button--checked,
.severity-segments .severity-button--checked:hover {
  background: var(--level-wash, var(--color-neutral-100));
  box-shadow: inset 0 calc(-2px * var(--ui-scale)) 0 var(--level-edge, var(--color-neutral-700));
}

.severity-segments .severity-button--checked .severity-button__label {
  font: var(--text-tiny-semibold);
  color: var(--color-neutral-900);
}

.severity-segments .severity-button:has(.severity-button__radio:focus-visible) {
  outline: 2px solid var(--color-link-100);
  outline-offset: calc(-2px * var(--ui-scale));
}

#context-menu-description-section {
  width: 100%;
  height: auto;
}

#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);
}

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

/* Stronger than the old 30% wash so "not yet viewed" actually registers; the near-crisp frontier comes from the
   small blur ObservedArea sets on the canvas context (#4639). */
#minimap-fog-of-war-canvas {
  opacity: 0.45;
}

/* The FOV cone's radial gradient carries its own falloff, so the canvas itself stays mostly opaque. */
#minimap-fov-canvas {
  opacity: 0.8;
}

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

/* These full-cover panes are purely visual (the highlight-flash overlay + the fog/FOV/progress canvases). They must not
   intercept pointer events, or the Google map's markers stacked below them never receive clicks (e.g. click a label to
   return to it, #2561). Interactive children appended into the overlay re-enable pointer events. */
#minimap-overlay,
#minimap-fog-of-war-canvas,
#minimap-fov-canvas,
#minimap-progress-circle-canvas {
  pointer-events: none;
}

#minimap-overlay > * {
  pointer-events: auto;
}

/* "N% observed" label centered inside the progress-ring chip (ObservedArea). Top-right on a neighborhood audit; in
   route mode it drops below the mission-progress bar (see .minimap-route-mode override below) to clear the overview. */
#minimap-percent-observed {
  font: var(--text-tiny-medium);
  font-size: calc(8px * var(--ui-scale));
  inset: auto;
  top: calc(4px * var(--ui-scale));
  right: calc(4px * var(--ui-scale));
  width: calc(28px * var(--ui-scale));
  height: calc(28px * var(--ui-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-neutral-800);
  z-index: 3;
}

#minimap-percent-observed:empty {
  display: none;
}

/* "100%" is wider than "NN%"; shrink it a touch so it stays inside the ring chip (toggled by ObservedArea). */
#minimap-percent-observed.minimap-percent-full {
  font-size: calc(7px * var(--ui-scale));
}

/* Mission-progress chip in the top-left: a fill bar plus "N%  done/total" (Minimap.updateMissionProgress). */
#minimap-mission-progress {
  position: absolute;
  top: calc(4px * var(--ui-scale));
  left: calc(4px * var(--ui-scale));
  display: flex;
  align-items: center;
  gap: calc(5px * var(--ui-scale));
  max-width: calc(100% - 8px * var(--ui-scale));
  padding: calc(2px * var(--ui-scale)) calc(6px * var(--ui-scale));
  border-radius: 999px;
  background: rgb(255 255 255 / 85%);
  color: var(--color-neutral-800);
  font: var(--text-tiny-medium);
  z-index: 3;
}

#minimap-mission-progress-bar {
  position: relative;
  flex: none;
  width: calc(44px * var(--ui-scale));
  height: calc(6px * var(--ui-scale));
  border-radius: 999px;
  background: var(--color-neutral-300);
  overflow: hidden;
}

#minimap-mission-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--color-pine-600);
  border-radius: 999px;
}

.minimap-mission-progress-labels {
  white-space: nowrap;
}

#minimap-mission-progress-distance {
  color: var(--color-neutral-600);
}

/* First-run "turn 360°" coach mark; sits above the legend pill / zoom buttons row. Replaces the old permanent
   banner (#4639); ObservedArea shows it once and dismisses it on "Got it" or the first completed 360°. */
#minimap-coach {
  position: absolute;
  left: calc(4px * var(--ui-scale));
  right: calc(4px * var(--ui-scale));
  bottom: calc(34px * var(--ui-scale));
  display: flex;
  align-items: center;
  gap: calc(6px * var(--ui-scale));
  font: var(--text-tiny-regular);
  padding: calc(4px * var(--ui-scale)) calc(6px * var(--ui-scale));
  border-radius: calc(8px * var(--ui-scale));
  background: rgb(255 255 255 / 92%);
  color: var(--color-neutral-900);
  box-shadow: 0 calc(1px * var(--ui-scale)) calc(6px * var(--ui-scale)) rgb(0 0 0 / 25%);
  z-index: 5;
  transition: opacity 0.3s ease;
}

.minimap-coach-hidden {
  opacity: 0;
  pointer-events: none;
}

#minimap-coach-dismiss {
  flex: none;
  font: var(--text-tiny-medium);
  padding: calc(2px * var(--ui-scale)) calc(6px * var(--ui-scale));
  border: 0;
  border-radius: calc(6px * var(--ui-scale));
  background: var(--color-pine-700);
  color: var(--color-neutral-white);
  cursor: pointer;
}

/* Always-on mini legend in the bottom-left: two labeled marks (Explored / Route ahead). Click to expand the full key
   card (MinimapLegend.js). */
#minimap-legend-toggle {
  position: absolute;
  left: calc(4px * var(--ui-scale));
  bottom: calc(10px * var(--ui-scale));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(2px * var(--ui-scale));
  padding: calc(4px * var(--ui-scale)) calc(7px * var(--ui-scale));
  padding-right: calc(17px * var(--ui-scale));
  border: 0;
  border-radius: calc(8px * var(--ui-scale));
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 calc(1px * var(--ui-scale)) calc(4px * var(--ui-scale)) rgb(0 0 0 / 25%);
  cursor: pointer;
  z-index: 4;
}

#minimap-legend-toggle:hover .minimap-legend-expand-icon {
  stroke: var(--color-neutral-700);
}

.minimap-legend-toggle-hidden {
  display: none;
}

.minimap-legend-mini-item {
  display: flex;
  align-items: center;
  gap: calc(5px * var(--ui-scale));
  font: var(--text-tiny-regular);
  color: var(--color-neutral-900);
}

.minimap-legend-mini-icon {
  display: block;
  flex: none;
  width: calc(22px * var(--ui-scale));
  height: calc(8px * var(--ui-scale));
}

/* Diagonal expand arrow in the mini legend's upper-right corner, cueing that it opens into the full key card. */
.minimap-legend-expand-icon {
  position: absolute;
  top: calc(4px * var(--ui-scale));
  right: calc(4px * var(--ui-scale));
  width: calc(11px * var(--ui-scale));
  height: calc(11px * var(--ui-scale));
  fill: none;
  stroke: var(--color-neutral-500);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Expanded legend card, anchored where the pill was. */
#minimap-legend-card {
  position: absolute;
  left: calc(4px * var(--ui-scale));
  bottom: calc(10px * var(--ui-scale));
  width: calc(150px * var(--ui-scale));
  padding: calc(6px * var(--ui-scale)) calc(8px * var(--ui-scale));
  border-radius: calc(8px * var(--ui-scale));
  background: rgb(255 255 255 / 95%);
  box-shadow: 0 calc(2px * var(--ui-scale)) calc(10px * var(--ui-scale)) rgb(0 0 0 / 30%);
  z-index: 5;
}

.minimap-legend-card-hidden {
  display: none;
}

.minimap-legend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: var(--text-tiny-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-neutral-700);
}

/* Chevron button that collapses the full key card back to the mini legend. */
#minimap-legend-close {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  cursor: pointer;
  padding: calc(2px * var(--ui-scale));
}

.minimap-legend-collapse-icon {
  width: calc(12px * var(--ui-scale));
  height: calc(12px * var(--ui-scale));
  fill: none;
  stroke: var(--color-neutral-600);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.minimap-legend-row {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--ui-scale));
  margin-top: calc(4px * var(--ui-scale));
  font: var(--text-tiny-regular);
  color: var(--color-neutral-900);
}

.minimap-legend-row svg {
  flex: none;
  width: calc(26px * var(--ui-scale));
  height: calc(11px * var(--ui-scale));
}

/* Legend samples are the real map marks, drawn with the same design tokens the map uses. */
.minimap-legend-sample-audited {
  stroke: var(--color-pine-600);
  stroke-width: 6;
  stroke-linecap: round;
  fill: none;
}

.minimap-legend-sample-remaining {
  stroke: var(--color-asphalt-400);
  stroke-width: 6;
  stroke-linecap: round;
  fill: none;
}

.minimap-legend-sample-visited {
  fill: none;
  stroke: rgb(62 139 217);
  stroke-width: 2;
}

.minimap-legend-sample-dashed {
  stroke-dasharray: 6 4;
}

.minimap-legend-sample-chevron {
  fill: var(--color-neutral-white);
  stroke: var(--color-asphalt-400);
  stroke-width: 1;
}

.minimap-legend-sample-peg {
  fill: var(--color-link-100);
  stroke: var(--color-neutral-white);
  stroke-width: 1.5;
}

.minimap-legend-sample-cone {
  fill: var(--color-pine-600);
  opacity: 0.35;
}

/* Label markers on the minimap (Label.createMinimapMarker) — scalable SVG icons sized here so they stay crisp. */
.minimap-label-icon {
  width: calc(9px * var(--ui-scale, 1));
  height: auto;
  cursor: pointer;
}

/* Breadcrumb trail (ObservedArea): a small faded ring, in the peg's hue, at each visited pano; click to return there
   (#2561). The element itself is a larger transparent hit area so the tiny ring is comfortably clickable (WCAG 2.5.8);
   the visible ring is drawn by ::before, centered inside it. AdvancedMarkerElement anchors content bottom-center, so
   the hit area shifts down half its height to center the ring on the pano. */
.minimap-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(20px * var(--ui-scale, 1));
  height: calc(20px * var(--ui-scale, 1));
  cursor: pointer;
  transform: translateY(50%);
}

.minimap-breadcrumb::before {
  content: "";
  box-sizing: border-box;
  width: calc(7px * var(--ui-scale, 1));
  height: calc(7px * var(--ui-scale, 1));
  border: calc(1.4px * var(--ui-scale, 1)) solid var(--color-link-100);
  border-radius: 50%;
  opacity: 0.8;
}

/* GSV-style "you are here" puck (Peg.js): a blue dot with a triangle pointing in the heading direction. Markers anchor
   bottom-center, so the wrapper shifts down half its height to center on the location, then rotates about that center
   so the dot stays planted while the triangle swings to --peg-heading (#4639). */
.minimap-peg {
  width: calc(28px * var(--ui-scale, 1));
  height: calc(28px * var(--ui-scale, 1));
  transform: translateY(50%) rotate(var(--peg-heading, 0deg));
  transform-origin: center;
}

/* The peg is decorative (no handlers), but the AdvancedMarkerElement wrapper Google generates keeps pointer-events:auto
   even when its content is set to none — so at zIndex 1000 it still swallows clicks meant for a breadcrumb beneath it
   (the crumbs nearest you sit inside the peg's box). Null the wrapper so the whole peg is click-through (#2561). */
gmp-advanced-marker:has(> .minimap-peg) {
  pointer-events: none;
}

.minimap-peg svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 calc(2px * var(--ui-scale, 1)) rgb(0 0 0 / 35%));
}

.minimap-peg-dot {
  fill: var(--color-link-100);
  stroke: var(--color-neutral-white);
  stroke-width: 2.5;
}

.minimap-peg-heading {
  fill: var(--color-link-100);
  stroke: var(--color-neutral-white);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

/* While fitted to the whole route, the user-centered overlays (fog/FOV/ring/%/coach) don't apply; the route-overview
   inset is redundant then too (the whole map is the route). */
#minimap-holder.minimap-overview #minimap-fog-of-war-canvas,
#minimap-holder.minimap-overview #minimap-fov-canvas,
#minimap-holder.minimap-overview #minimap-progress-circle-canvas,
#minimap-holder.minimap-overview #minimap-percent-observed,
#minimap-holder.minimap-overview #minimap-coach,
#minimap-holder.minimap-overview #minimap-route-overview {
  display: none;
}

/* Breadcrumbs are map-positioned markers, not canvas panes, so the rule above doesn't reach them; hide them explicitly
   in the fitted whole-route overview so the visited trail doesn't clutter the zoomed-out view (#4639). */
#minimap-holder.minimap-overview .minimap-breadcrumb {
  display: none;
}

/* Whole-route overview inset (RouteOverview.js): a small always-on map of the entire designated route, in the
   upper-right corner. Hidden by default; shown only in route mode, alongside the mini-legend/key (which grows
   street-by-street on neighborhood audits, so there's no route to preview there). */
#minimap-route-overview {
  display: none;
  position: absolute;
  right: calc(4px * var(--ui-scale));
  top: calc(4px * var(--ui-scale));
  width: calc(80px * var(--ui-scale));
  height: calc(60px * var(--ui-scale));
  padding: 0;
  border: calc(2px * var(--ui-scale)) solid var(--color-neutral-white);
  border-radius: calc(8px * var(--ui-scale));
  background: rgb(237 239 238 / 95%);
  box-shadow: 0 calc(2px * var(--ui-scale)) calc(8px * var(--ui-scale)) rgb(0 0 0 / 28%);
  overflow: hidden;
  cursor: pointer;
  z-index: 4;
}

#minimap-route-overview-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#minimap-route-overview:hover {
  border-color: var(--color-pine-600);
}

#minimap-route-overview:focus-visible {
  outline: calc(2px * var(--ui-scale)) solid var(--color-pine-600);
  outline-offset: calc(1px * var(--ui-scale));
}

/* Route mode: reveal the overview inset in the upper-right corner. The mini-legend stays in the bottom-left. */
#minimap-holder.minimap-route-mode #minimap-route-overview {
  display: block;
}

/* Route mode: the overview inset owns the top-right, so the view-coverage ring/label drops below the progress bar. */
#minimap-holder.minimap-route-mode #minimap-percent-observed {
  top: calc(28px * var(--ui-scale));
  right: auto;
  left: calc(4px * var(--ui-scale));
}

.gm-svpc {
  display: none;
}

/* 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 and the live-map chrome there. */
#minimap-holder.minimap-tutorial #minimap-zoom-controls,
#minimap-holder.minimap-tutorial #minimap-mission-progress,
#minimap-holder.minimap-tutorial #minimap-legend-toggle,
#minimap-holder.minimap-tutorial #minimap-legend-card,
#minimap-holder.minimap-tutorial #minimap-coach {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  #minimap-coach {
    transition: 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;

  /* Above everything in the pano area — the border frame (2) and the context menu (3). A tie with the menu would
     let DOM order decide. The rule below gives the user a way back to the menu if a callout ever lands over it. */
  z-index: 1100;
  font: var(--text-subtitle-regular);
  transform: none;

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

/* The callout is meant to shrink rather than overlap the control it points at (see the size() middleware in
   Onboarding's anchorMessageTo), but that guarantee is only as good as Floating UI being loaded — without it the box
   falls back to the pano's top-left corner, over the menu. Hovering the menu lifts it past the callout so the user
   can always read and reach what they are being asked to click. */
#context-menu-holder:hover {
  z-index: 1101;
}

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

/* Inline replica of a rating segment (.severity-button, svl-context-menu.css) for tutorial messages that ask for a
   specific rating; mirrors the segment's smiley icon, type, and enclosure so it reads as "this button". */
.onboarding-rating-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(4px * var(--ui-scale));
  vertical-align: text-bottom;
  padding: calc(2px * var(--ui-scale)) calc(8px * var(--ui-scale));
  outline: 1px solid var(--color-neutral-300);
  border-radius: calc(6px * var(--ui-scale));
  background: var(--color-neutral-white);
  font: var(--text-tiny-medium);
  color: var(--color-neutral-700);
  white-space: nowrap;
}

.onboarding-rating-chip img {
  width: calc(15px * var(--ui-scale));
  height: calc(15px * var(--ui-scale));
}

/* Inline tag-pill replicas: match the context menu's tightened pills (svl-context-menu.css) rather than the shared
   default, and keep them from crowding the message text's line spacing. */
#onboarding-message-holder .tag-pill {
  padding: calc(3px * var(--ui-scale)) calc(8px * var(--ui-scale));
  margin: calc(1px * var(--ui-scale)) 0;
  vertical-align: text-bottom;
}

/* Inline keycap for teaching keyboard shortcuts (e.g. press C for Curb Ramp, Z to zoom). */
.onboarding-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(18px * var(--ui-scale));
  padding: calc(1px * var(--ui-scale)) calc(5px * var(--ui-scale));
  vertical-align: text-bottom;
  border: 1px solid var(--color-neutral-400);
  border-bottom-width: calc(3px * var(--ui-scale));
  border-radius: calc(4px * var(--ui-scale));
  background: var(--color-neutral-100);
  font: var(--text-tiny-semibold);
  color: var(--color-neutral-900);
}

/* Pulses the one context-menu section the tutorial has enabled (see Onboarding's RateSeverity/AddTag visits); the
   sibling section is dimmed via .disabled, so together they say "this half, not that one". */
.onboarding-attention {
  animation: onboarding-attention-pulse 1.6s ease-in-out infinite;
}

/* The halo follows each target's own corner radius (circular ribbon icons stay circular); the menu sections have
   no radius of their own, so give their ring the dialog's rounding. */
.context-menu-section.onboarding-attention {
  border-radius: calc(6px * var(--ui-scale));
}

@keyframes onboarding-attention-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--color-warning-200);
  }

  50% {
    box-shadow: 0 0 0 calc(6px * var(--ui-scale)) var(--color-warning-200);
  }
}

/* The motion is decorative; the enabled/dimmed contrast already carries the meaning. */
@media (prefers-reduced-motion: reduce) {
  .onboarding-attention {
    animation: none;
    box-shadow: 0 0 0 calc(4px * var(--ui-scale)) var(--color-warning-200);
  }
}

/* Inline replica of the hover card's Delete button, shown in tutorial messages that ask the user to delete a
   misplaced label (see OnboardingStates.js). */
.onboarding-delete-button {
  display: inline-flex;
  align-items: center;
  gap: calc(4px * var(--ui-scale));
  vertical-align: text-bottom;
  padding: calc(1px * var(--ui-scale)) calc(8px * var(--ui-scale));
  border: 1px solid var(--color-error-200);
  border-radius: calc(8px * var(--ui-scale));
  background: var(--color-neutral-white);
  color: var(--color-error-200);
  font: var(--text-caption-medium);
}

.onboarding-delete-button svg {
  width: calc(11px * var(--ui-scale));
  height: calc(11px * var(--ui-scale));
}

.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;
}

/* Pinned just above a pano annotation arrow (see Onboarding's positionMessageAtPanoCoord); the translate puts
   the box's bottom edge at the computed point. */
#onboarding-message-holder.onboarding-message-pano-anchored {
  margin: 0;
  transform: translateY(-100%);
}

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

  /* Makes the sidebar one stacking layer. Its contents range up to the minimap's z-index 5 and the badge tooltip's
     ~1029, which without a context here would compete globally and paint over the panels a label opens (the hover
     card at 2, the context menu at 3) now that those are allowed to extend across the sidebar. Nothing is lost by
     containing them: overflow above already clips this subtree to the sidebar box. */
  z-index: 1;
}

.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));

  /* Sits 8px right of wherever the imagery-source logo's pixels end. How far that is varies by source (Mapillary's
     wordmark is the widest), so the offset tracks the logo through --pano-logo-width, which PanoViewerLogo measures
     and publishes. The fallback covers GSV, which draws its own logo instead of going through that overlay: 66px is
     where Google's Street View logo ends. */
  left: calc((var(--pano-logo-width, 66px) + 8px) * 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;
}

/* No left padding — the holder's left offset above owns the whole gap to the imagery-source logo. */
#svl-panorama-date {
  padding: calc(3px * var(--ui-scale)) calc(3px * var(--ui-scale)) calc(3px * var(--ui-scale)) 0;
}

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

/* Reassurance that a queued route survived the detour into the tutorial. */
.tutorial-intro__route-note {
  margin: calc(8px * var(--ui-scale, 1)) 0 0;
  font: var(--text-body-medium);
  color: var(--color-link-100);
}

.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);
}

/* ---- Pause/play control for the looping illustration clips ------------------------------------------------------- */

/* Shared by the intro illustrations and the tutorial-complete hero, each of which loops indefinitely and so needs an
   in-page stop control (WCAG 2.2.2). Kept small, translucent and tucked into a corner so it reads as a secondary
   affordance rather than a video player; it firms up on hover/focus. Positioned by whichever box wraps the clip. */
.motion-toggle {
  position: absolute;
  right: calc(10px * var(--ui-scale, 1));
  bottom: calc(10px * var(--ui-scale, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(28px * var(--ui-scale, 1));
  height: calc(28px * var(--ui-scale, 1));
  padding: 0;
  border: calc(1px * var(--ui-scale, 1)) solid var(--color-neutral-400);
  border-radius: 50%;
  background: var(--color-neutral-white);
  color: var(--color-neutral-800);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.motion-toggle:hover {
  opacity: 1;
}

.motion-toggle:focus-visible {
  opacity: 1;
  outline: calc(2px * var(--ui-scale, 1)) solid var(--color-banana-800);
  outline-offset: calc(2px * var(--ui-scale, 1));
}

.motion-toggle__icon {
  width: calc(14px * var(--ui-scale, 1));
  height: calc(14px * var(--ui-scale, 1));
  fill: currentcolor;
}

/* The icon shows the action the button performs, so it tracks .is-paused inversely. */
.motion-toggle__play-arrow,
.motion-toggle.is-paused .motion-toggle__pause-bar {
  display: none;
}

.motion-toggle.is-paused .motion-toggle__play-arrow {
  display: block;
}

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

/* Sized here rather than on the hero itself so the pause control can be positioned against the clip's own box. */
.tutorial-complete__hero-wrap {
  position: relative;
  width: var(--tc-hero-width);
}

.tutorial-complete__hero {
  display: block;
  width: 100%;
  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;
}