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

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

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

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

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

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

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

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

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

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

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

/* 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: drop-shadow(0 0 0.05rem var(--color-neutral-black)) drop-shadow(0 0 0.05rem var(--color-neutral-black)); /* Adds black outline. */
}

#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)) /* Adds black outline. */
        sepia(1) saturate(2) hue-rotate(315deg); /* Adds yellow highlight on hover. */
}

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

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

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

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

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

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

.speed-limit-sign {
    display: none;
    width: calc(60px * var(--ui-scale));
    height: calc(70px * var(--ui-scale));
    padding: calc(3px * var(--ui-scale));
    margin-left: calc(2px * var(--ui-scale));
    left: 0;
    bottom: calc((25px + var(--bottom-left-links-clearance, 0px)) * var(--ui-scale));
    border-radius: calc(5px * var(--ui-scale));
    position: absolute;
    z-index: 1;
    pointer-events: none;
    transform: scale(0.75);
    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: 0px;
    margin-left: calc(-5px * var(--ui-scale));
    margin-bottom: calc(-10px * var(--ui-scale));
    border-radius: 100%;
    transform: scale(0.6);
}

.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));
    white-space: nowrap;
    border-radius: calc(3px * var(--ui-scale));
    transition: background-color 150ms ease, transform 150ms ease;
    background-color: rgb(from var(--color-neutral-white) r g b / 75%);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.gm-svpc {
    visibility: hidden;
}

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

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

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

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

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

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

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

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

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

#modal-comment-textarea {
    box-sizing: border-box;
    height: calc(120px * var(--ui-scale));
    width: 100%;
    margin: 0 0 calc(16px * var(--ui-scale)) 0;
    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 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)) 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.tutorial-table {
    width: 100%;
}

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

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

.tutorial-spacer {
    padding-bottom: calc(8px * var(--ui-scale));
}
#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 calc(5px * var(--ui-scale));
    background: var(--color-neutral-white);
    border-radius: calc(28px * var(--ui-scale));
    border: calc(1px * var(--ui-scale)) solid var(--color-neutral-200);
}

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

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

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

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

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

/* 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));
}
.explore-sidebar__badge-progress .ps-progress-bar__label {
    font: var(--text-tiny-semibold);
}

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

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

/* Enlarged badge shown on hover so the small icon's detail is legible. */
.explore-sidebar__badge-preview {
    position: fixed;
    width: calc(100px * var(--ui-scale));
    height: calc(100px * var(--ui-scale));
    object-fit: contain;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.85);
    transform-origin: center bottom;
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: calc(var(--navbar-z-index) - 1);
}

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

.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-caption-semibold);
    color: var(--exp-sidebar-link);
    text-decoration: none;
}

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

.explore-sidebar__see-all-chevron {
    flex: 0 0 auto;
    width: calc(12px * var(--ui-scale));
    height: calc(12px * var(--ui-scale));
}

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

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

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

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

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

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

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

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

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

/* Survey. Lives outside .tool-ui, so it reads --ui-scale from :root (set by util.applyToolScale). */
#survey-form {
    padding-right: calc(20px * var(--ui-scale, 1));
}
#survey-modal-container ol> li {
    font: var(--text-small-bold);
    content: counter(item);
}
#survey-modal-container ol> li h4 {
    font: var(--text-small-bold);
}
.survey-question {
    margin-bottom: calc(10px * var(--ui-scale, 1));
}
.survey-textarea {
    width: 100%;
    height: calc(64px * var(--ui-scale, 1));
    font: var(--text-caption-regular);
}
.survey-option-holder {
    list-style:none;
    width:100%;
    margin:0;
    padding:0 0 calc(10px * var(--ui-scale, 1));
    display:block;
}
.survey-option {
    display:inline-block;
    width: 19%;
    text-align:center;
    vertical-align:top;
    font: var(--text-caption-regular);
}
.survey-option label {
    width:100%;
    font: var(--text-caption-regular);
}

/* Scale the survey modal's Bootstrap chrome (dialog width, header, title, close button, submit button) with the UI. */
#survey-modal-container .modal-dialog {
    width: calc(600px * var(--ui-scale, 1));
    margin: calc(30px * var(--ui-scale, 1)) auto;
}
#survey-modal .modal-header {
    padding: calc(15px * var(--ui-scale, 1));
}
#survey-modal .modal-title {
    font: var(--text-subtitle-medium);
}
#survey-modal .modal-header .close {
    font: var(--text-title-bold);
}
#survey-modal .modal-body {
    padding: calc(15px * var(--ui-scale, 1));
}
#survey-modal .btn {
    font: var(--text-small-regular);
    padding: calc(5px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
}

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

#pano-info-button {
    margin-left: calc(4px * var(--ui-scale));
    margin-top: calc(4.5px * var(--ui-scale));
    height: calc(16px * var(--ui-scale));
}
.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

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

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

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

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

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

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


.mst-instruction-2 {
    font: var(--text-subtitle-bold);
    margin: calc(5px * var(--ui-scale, 1)) 0;
    padding: 0 calc(70px * var(--ui-scale, 1));
    width: 100%;
}
.mst-carousel {
    display: flex;
    flex-shrink: 0;
    width: 100%;
    height: calc(436px * var(--ui-scale, 1));
    margin-top: calc(10px * var(--ui-scale, 1));
}

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

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

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

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

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

.mst-text-area {
    width: calc(290px * var(--ui-scale, 1));
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    flex-direction: column;
    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;
}

@keyframes pulsate {
    0%   { transform: scale(1); }
    50%  { transform: scale(0.9); }
    50%  { transform: scale(1); }
    50%  { transform: scale(1.1); }
}

/* Catching users' attention after they finish going through all the slides. */
.mission-start-tutorial-done-btn.focus {
    animation: pulsate;
    animation-duration: 2s;
    animation-iteration-count: 3;
    animation-delay: 1s;
}

.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);
    line-height: 120%;
    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;
}