/*
 * Map presentation on the kiosk player (plan, POI list, route, popup).
 *
 * Loaded from map-view.js. Generic player chrome stays in assets/player.css.
 * MapAppearance injects --map-* variables on the .map-playback shell.
 *
 * Per-map / per-client overrides: add assets/player/maps/<slug>.css and import
 * it after this file, or serve an extra stylesheet from snapshot metadata.
 */

@import "bootstrap-popover-tP252zk.css";

/* Locale switcher offset while the POI list panel is visible (35% right column). */
.is-map-view .locale-bar {
    right: calc(35% + 0.9rem);
}

/* Map presentation (~65/100 plan / ~35/100 POI list) */
.map-layer {
    position: absolute;
    inset: 0;
}

.map-playback {
    display: flex;
    width: 100%;
    height: 100%;
    background: var(--map-screen-bg, #0b1a16);
    font-family: var(--map-font-sans, system-ui, -apple-system, sans-serif);
    /* List tuning defaults — overridden by applyMapAppearance() where noted. */
    --map-font-sans: system-ui, -apple-system, sans-serif;
    --map-font-root-group: var(--map-font-sans);
    --map-list-subgroup-font-scale: 1.2;
    --map-list-root-group-font-scale: 1.44;
    --map-list-poi-circle-font-scale: 0.58;
    --map-list-poi-circle-font-scale-two-digit: 0.5;
}

.map-playback-plan {
    position: relative;
    flex: 1 1 65%;
    min-width: 0;
}

.map-playback-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.map-playback-stage {
    position: absolute;
}

.map-playback-background {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
}

.map-playback-route-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.map-playback-overlays {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.map-playback-overlay-logo {
    position: absolute;
    display: block;
    object-fit: contain;
}

.map-playback-overlay-title {
    position: absolute;
    max-width: 45%;
    color: var(--map-overlay-title-color, #fff);
    font-size: var(--map-overlay-title-font-size, 1.25rem);
    line-height: 1.2;
    white-space: pre-line;
    text-align: left;
}

.map-playback-markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

/* Wybrany POI w pełni; reszta POI wyciszona. Home („Tu jesteś”) zawsze w pełni przy focus-dim. */
.map-playback-markers--focus-dim .map-playback-marker--poi:not(.is-selected) {
    filter: grayscale(1) saturate(0.35) brightness(1.05);
    opacity: 0.38 !important;
}

.map-playback-markers--focus-dim .map-playback-marker--poi.is-selected,
.map-playback-markers--focus-dim .map-playback-marker--home {
    filter: none;
    opacity: 1 !important;
}

.map-playback-marker {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--map-poi-size, 2rem);
    height: var(--map-poi-size, 2rem);
    margin: 0;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    font-family: var(--map-font-sans, system-ui, -apple-system, sans-serif);
    background: var(--map-poi-default-color, #52756d);
    color: #fff;
    box-shadow: 0 2px 5px rgba(11, 26, 22, 0.45);
    transform: translate(-50%, -50%);
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, opacity 180ms ease, border-width 180ms ease, color 180ms ease, filter 220ms ease;
}

.map-playback-marker--home,
.map-playback-marker--poi {
    pointer-events: auto;
    cursor: pointer;
    appearance: none;
}

.map-playback-marker--poi {
    background: var(--map-poi-default-color, #52756d);
    opacity: var(--map-poi-default-opacity, 1);
}

.map-playback-marker--poi:not(.is-selected):not(.map-playback-marker--custom-icon) {
    color: var(--map-poi-default-text-color, #111);
}

.map-playback-marker--code {
    flex: 0 0 auto;
    width: var(--map-poi-size, 2rem);
    height: var(--map-poi-size, 2rem);
    min-width: var(--map-poi-size, 2rem);
    max-width: var(--map-poi-size, 2rem);
    padding: 0;
    aspect-ratio: 1;
    font-size: calc(var(--map-poi-size, 2rem) * 0.52);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.map-playback-marker--code.map-playback-marker--code-two-digit {
    font-size: calc(var(--map-poi-size, 2rem) * 0.44);
}

.map-playback-marker-code {
    line-height: 1;
    text-align: center;
}

.map-playback-marker-img {
    width: var(--map-poi-icon-size, 1.35rem);
    height: var(--map-poi-icon-size, 1.35rem);
    object-fit: contain;
}

.map-playback-marker i {
    font-size: var(--map-poi-icon-size, 1rem);
    line-height: 1;
}

.map-playback-marker--home:not(.map-playback-marker--custom-icon) {
    width: var(--map-home-size, 2rem);
    height: var(--map-home-size, 2rem);
    background: #fff;
    border: 2px solid var(--map-contour-color, #0b1a16);
    box-shadow:
        0 0 0 3px var(--map-accent-color, #4fc3f7),
        0 2px 6px rgba(11, 26, 22, 0.42);
    opacity: var(--map-home-opacity, 1);
}

.map-playback-marker--home .map-playback-marker-img,
.map-playback-marker--home i {
    font-size: var(--map-home-icon-size, 1.35rem);
    width: var(--map-home-icon-size, 1.35rem);
    height: var(--map-home-icon-size, 1.35rem);
    color: var(--map-home-icon-color, var(--map-accent-color, #4fc3f7));
}

.map-playback-marker--home.map-playback-marker--home-icon-in-circle {
    width: var(--map-home-size, 2rem);
    height: var(--map-home-size, 2rem);
    min-width: var(--map-home-size, 2rem);
    padding: 0;
    background: #fff;
    border: 2px solid var(--map-contour-color, #0b1a16);
    box-shadow:
        0 0 0 3px var(--map-accent-color, #4fc3f7),
        0 2px 6px rgba(11, 26, 22, 0.42);
    opacity: var(--map-home-opacity, 1);
}

.map-playback-marker--home.map-playback-marker--home-icon-in-circle.is-selected {
    background: var(--map-accent-color, #4fc3f7);
    opacity: 1;
    border: 3px solid #fff;
    box-shadow:
        0 0 0 2px var(--map-contour-color, #0b1a16),
        0 0 14px rgba(11, 26, 22, 0.62);
}

.map-playback-marker--home.map-playback-marker--home-icon-in-circle.is-selected i,
.map-playback-marker--home.map-playback-marker--home-icon-in-circle.is-selected .map-playback-marker-img,
.map-playback-marker--home.map-playback-marker--custom-icon.is-selected i,
.map-playback-marker--home.map-playback-marker--custom-icon.is-selected .map-playback-marker-img {
    color: var(--map-home-icon-color, var(--map-accent-color, #4fc3f7));
}

.map-playback-marker--home.map-playback-marker--custom-icon {
    opacity: var(--map-home-opacity, 1);
}

.map-playback-marker--home.map-playback-marker--custom-icon .map-playback-marker-img,
.map-playback-marker--home.map-playback-marker--custom-icon i {
    color: var(--map-home-icon-color, currentColor);
}

.map-playback-marker--peer {
    width: 1.35rem;
    height: 1.35rem;
    background: #6c757d;
    opacity: 0.85;
}

.map-playback-marker--custom-icon {
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: var(--map-poi-icon-opacity, 1);
}

.map-playback-marker--custom-icon .map-playback-marker-img,
.map-playback-marker--custom-icon i {
    display: block;
}

.map-playback-marker--static {
    cursor: default;
    pointer-events: none;
}

.map-playback-marker.is-selected {
    z-index: 4;
}

.map-playback-marker--poi.is-selected,
.map-playback-marker--home.is-selected {
    animation: map-marker-bounce 4s ease forwards;
}

.map-playback-marker--custom-icon.is-selected {
    box-shadow: none;
    filter: drop-shadow(0 0 8px rgba(79, 195, 247, 0.85));
    opacity: 1;
}

.map-playback-marker--poi.is-selected:not(.map-playback-marker--custom-icon) {
    background: var(--map-poi-selected-color, #4fc3f7);
    opacity: var(--map-poi-selected-opacity, 1);
    color: var(--map-poi-selected-text-color, #fff);
    border-width: 3px;
    box-shadow:
        0 0 0 1px rgba(11, 26, 22, 0.35),
        0 4px 10px rgba(11, 26, 22, 0.55);
}

.map-playback-marker--home.is-selected:not(.map-playback-marker--custom-icon):not(.map-playback-marker--home-icon-in-circle) {
    background: var(--map-accent-color, #4fc3f7);
    opacity: 1;
    color: var(--map-contour-color, #0b1a16);
    border: 3px solid #fff;
    box-shadow:
        0 0 0 2px var(--map-contour-color, #0b1a16),
        0 0 14px rgba(11, 26, 22, 0.62);
}

.map-playback-route {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}

.map-playback-route-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.map-playback-route-line--outer {
    stroke: var(--map-route-border-color, #0b1a16);
    stroke-width: var(--map-route-outer-width, 10);
}

.map-playback-route-line--inner {
    stroke: var(--map-route-color, #4fc3f7);
    stroke-width: var(--map-route-width, 6);
}

.map-playback-route-cap {
    pointer-events: none;
}

/* Five bounce peaks (~350 ms each) then settle slightly enlarged when selected. */
@keyframes map-marker-bounce {
    0%, 20%, 40%, 60%, 80% { transform: translate(-50%, -50%) scale(1); }
    10%, 30%, 50%, 70%, 90% { transform: translate(-50%, -50%) scale(1.4) translateY(-10%); }
    100% { transform: translate(-50%, -50%) scale(1.17); }
}

.map-playback-list-panel {
    flex: 0 0 35%;
    min-width: 13rem;
    max-width: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-left: 1px solid var(--map-list-separator, #31574d);
    background: var(--map-list-bg, #0b1a16);
    box-sizing: border-box;
}

.map-playback-list-tabs {
    flex: 0 0 auto;
    flex-shrink: 0;
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--map-list-separator, #31574d);
}

.map-playback-list-tabs[hidden] {
    display: none;
}

.map-playback-list-tab {
    flex: 1 1 50%;
    margin: 0;
    padding: 0.55rem 0.5rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--map-list-tab-color, var(--map-list-text-muted, #b8d4cc));
    font-family: var(--map-font-sans, inherit);
    font-size: var(--map-list-tab-font-size, calc(var(--map-list-poi-font-size, 0.75rem) * 1.05));
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
}

.map-playback-list-tab:hover:not(.is-active) {
    color: var(--map-list-tab-active-color, var(--map-list-text, #fff));
    background: color-mix(in srgb, var(--map-list-selected-bg, #1a4d3e) 35%, transparent);
}

.map-playback-list-tab.is-active {
    color: var(--map-list-tab-active-color, var(--map-list-text, #fff));
    border-bottom-color: var(--map-list-tab-underline, var(--map-list-selected-border, #ffc107));
}

.map-playback-list-tab[hidden] {
    display: none;
}

.map-playback-list-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.map-playback-list {
    padding: var(--map-list-outer-padding-y, 0.75rem) var(--map-list-outer-padding-x, 0.65rem);
    box-sizing: border-box;
}

.map-playback-list--list2 {
    --map-list-poi-circle-font-scale: 1;
    --map-list-subgroup-grid-columns: 3;
}

.map-playback-list--list2 > .map-playback-list-group {
    margin-bottom: var(--map-list-root-group-block-margin-bottom, 0.55rem);
}

.map-playback-list > .map-playback-list-group {
    margin-bottom: var(--map-list-root-group-block-margin-bottom, 0.55rem);
    padding-bottom: var(--map-list-root-group-block-padding-bottom, 0.55rem);
    border-bottom: 1px solid var(--map-list-separator, #31574d);
}

.map-playback-list > .map-playback-list-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.map-playback-list-children--stack > .map-playback-list-group {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.map-playback-list-group--inline-layout:has(> .map-playback-list-children--inline) {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px solid var(--map-list-group-border, #253833);
    border-radius: 0.45rem;
    background: var(--map-list-inline-group-bg, #0d211c);
    overflow: hidden;
}

.map-playback-list-group--inline-clickable {
    cursor: pointer;
}

.map-playback-list-group--inline-layout.map-playback-list-group--root:has(> .map-playback-list-children--inline) {
    background: var(--map-list-inline-root-group-bg, #102d26);
}

.map-playback-list-group--inline-layout:has(> .map-playback-list-item.is-selected) {
    border-color: var(--map-list-selected-border, #4fc3f7);
    background: var(--map-list-selected-row-bg, #10363a);
}

.map-playback-list-group--inline-layout:has(> .map-playback-list-children--inline) > .map-playback-list-item--group {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.map-playback-list-group--inline-layout:has(> .map-playback-list-children--inline) > .map-playback-list-children--inline {
    flex: 1 1 auto;
    width: 100%;
    min-height: 2rem;
    margin: 0;
    padding: 0.15rem 0.65rem 0.45rem;
    box-sizing: border-box;
    align-content: flex-start;
}

.map-playback-list-group--inline-layout.map-playback-list-group--has-icon:has(> .map-playback-list-children--inline) > .map-playback-list-children--inline {
    padding-left: calc(0.65rem + 1.15em + 0.45rem);
}

.map-playback-list-group--inline-layout > .map-playback-list-children--stack {
    padding: 0 0.35rem 0.35rem;
}

.map-playback-list-group--inline-layout > .map-playback-list-children--stack > .map-playback-list-group--inline-layout {
    margin-top: 0.25rem;
}

.map-playback-list-children--stack {
    display: flex;
    flex-direction: column;
    gap: var(--map-list-stack-gap, 0.2rem);
    margin-top: var(--map-list-stack-gap, 0.2rem);
    padding-left: 0.35rem;
}

.map-playback-list-children--inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--map-list-inline-gap, 0.35rem);
    margin-top: var(--map-list-stack-gap, 0.2rem);
    padding-left: 0.35rem;
}

.map-playback-list-children--stack > .map-playback-list-group--inline-layout > .map-playback-list-children--inline {
    margin-top: 0;
    padding-left: 0.65rem;
}

.map-playback-list-children--stack > .map-playback-list-group--inline-layout.map-playback-list-group--has-icon > .map-playback-list-children--inline {
    padding-left: calc(0.65rem + 1.15em + 0.45rem);
}

.map-playback-list-children--inline .map-playback-list-item {
    width: auto;
    flex: 0 1 auto;
    margin: 0;
}

/* subgroup-row: group header on its own line; each subgroup shares a row with its POI chips. */
.map-playback-list-group--subgroup-row-layout > .map-playback-list-item--root-group {
    width: 100%;
    margin-bottom: var(--map-list-root-group-margin-bottom, 0.1rem);
}

.map-playback-list-children--subgroup-rows {
    gap: var(--map-list-stack-gap, 0.2rem);
    margin-top: var(--map-list-stack-gap, 0.2rem);
    padding-left: 0.35rem;
}

.map-playback-list-group--subgroup-row-nested {
    margin-top: 0.2rem;
    padding-left: 0.35rem;
}

.map-playback-list-subgroup-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    /* Wider gap between subgroup chip and first POI; POI–POI gap stays on --inline below. */
    gap: 1.0rem;
    width: 100%;
    padding-left: 0.35rem;
    box-sizing: border-box;
}

.map-playback-list-subgroup-row--nested {
    padding-left: 0.65rem;
}

.map-playback-list-subgroup-row--poi-only {
    padding-left: 0.65rem;
}

.map-playback-list-subgroup-row > .map-playback-list-item--group,
.map-playback-list-subgroup-row > .map-playback-list-item--subgroup {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}

.map-playback-list-subgroup-row > .map-playback-list-children--inline {
    display: flex;
    flex: 1 1 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--map-list-inline-gap, 0.35rem);
    min-width: 0;
    margin-top: 0;
    padding-left: 0;
}

.map-playback-list-subgroup-row .map-playback-list-children--inline .map-playback-list-item,
.map-playback-list-subgroup-row .map-playback-list-children--inline .map-playback-list-item--poi {
    display: inline-flex;
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    margin: 0;
}

/* subgroup-grid: group header on its own line; subgroups in an equal-width icon grid. */
.map-playback-list-group--subgroup-grid-layout > .map-playback-list-item--root-group {
    width: 100%;
    margin-bottom: var(--map-list-root-group-margin-bottom, 0.1rem);
}

.map-playback-list-children--subgroup-grid {
    display: grid;
    grid-template-columns: repeat(var(--map-list-subgroup-grid-columns, 3), minmax(0, 1fr));
    gap: var(--map-list-inline-gap, 0.35rem);
    margin-top: var(--map-list-stack-gap, 0.2rem);
    padding: 0 0.35rem 0.35rem;
    box-sizing: border-box;
}

.map-playback-list-subgroup-grid-cell {
    display: flex;
    min-width: 0;
    min-height: 100%;
}

.map-playback-list-subgroup-grid-cell > .map-playback-list-item--subgroup {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0.16rem 0.4rem;
    align-items: center;
    text-align: left;
    box-sizing: border-box;
}

.map-playback-list-subgroup-grid-cell > .map-playback-list-item--subgroup .map-playback-list-item-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.15;
}

.map-playback-list-subgroup-grid-cell > .map-playback-list-item--subgroup .map-playback-list-item-label.is-grid-label-clamped {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Loose list rows / POI circle diameter: --map-list-row-min-height (default ~1.333 rem ≈ 1.6 cm). */
.map-playback-list-item {
    appearance: none;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--map-list-row-min-height, 1.333rem);
    margin: 0 0 0.2rem;
    padding: 0 0.5rem;
    border: 1px solid var(--map-list-separator, #31574d);
    border-radius: 0.35rem;
    color: var(--map-list-text, #f5f7f6);
    text-align: left;
    font-size: var(--map-list-poi-font-size, 0.75rem);
    line-height: 1.15;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, border-width 0.15s ease;
}

.map-playback-list-item--root-group {
    font-family: var(--map-font-root-group, var(--map-font-sans));
    font-weight: 400;
    font-size: var(--map-list-root-group-font-size, calc(var(--map-list-poi-font-size, 0.75rem) * var(--map-list-root-group-font-scale, 1.44)));
    line-height: 1.2;
    padding: var(--map-list-root-group-padding-top, 0.55rem) var(--map-list-root-group-padding-x, 0.55rem) var(--map-list-root-group-padding-bottom, 0.3rem);
    color: var(--map-list-root-group-text, var(--map-list-text, #f5f7f6));
    background: var(--map-list-root-group-bg, #102d26);
    border-color: var(--map-list-group-border, #253833);
    margin-bottom: var(--map-list-root-group-margin-bottom, 0.1rem);
}

.map-playback-list-item--subgroup {
    font-family: var(--map-font-sans);
    font-weight: 400;
    font-size: var(--map-list-subgroup-font-size, calc(var(--map-list-poi-font-size, 0.75rem) * var(--map-list-subgroup-font-scale, 1.2)));
    padding: var(--map-list-subgroup-padding-y, 0.15rem) var(--map-list-subgroup-padding-x, 0.55rem);
    color: var(--map-list-subgroup-text, var(--map-list-text, #f5f7f6));
    background: var(--map-list-subgroup-bg, #0d211c);
    border-color: var(--map-list-group-border, #253833);
    margin-bottom: var(--map-list-subgroup-margin-bottom, 0.1rem);
}

.map-playback-list-item--poi {
    background: var(--map-poi-default-color, #52756d);
    color: var(--map-poi-default-text-color, #111);
    border-color: #fff;
}

.map-playback-list-item--root-group.is-selected,
.map-playback-list-item--subgroup.is-selected {
    border-color: var(--map-list-selected-border, #4fc3f7);
    background: var(--map-list-selected-row-bg, #10363a);
}

.map-playback-list-item--root-group:hover:not(.is-selected),
.map-playback-list-item--subgroup:hover:not(.is-selected) {
    border-color: var(--map-accent-color, #4fc3f7);
}

.map-playback-list-item--poi:hover:not(.is-selected) {
    border-color: #fff;
    background: color-mix(in srgb, var(--map-poi-default-color, #52756d) 88%, #000);
}

.map-playback-list-item--with-icon {
    gap: 0.35rem;
}

.map-playback-list-item-label {
    flex: 1 1 auto;
    min-width: 0;
}

.map-playback-list-item-icon {
    flex: 0 0 auto;
    width: var(--map-list-group-icon-size, 0.8625rem);
    height: var(--map-list-group-icon-size, 0.8625rem);
    object-fit: contain;
    font-size: var(--map-list-group-icon-size, 0.8625rem);
    line-height: 1;
}

.map-playback-list-item-home-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65em;
    height: 1.65em;
    border-radius: 50%;
    background: var(--map-cta-bg, #3fc0f6);
    color: var(--map-cta-text, #0b1a16);
    font-size: 0.95em;
    line-height: 1;
}

/* POI codes 1–99: circle diameter = --map-list-poi-circle-size (≈1.6 cm default). Font: --map-list-poi-circle-font-scale*. */
.map-playback-list-item--poi.map-playback-list-item--code-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--map-list-poi-circle-size, var(--map-list-row-min-height, 1.333rem));
    min-width: var(--map-list-poi-circle-size, var(--map-list-row-min-height, 1.333rem));
    max-width: var(--map-list-poi-circle-size, var(--map-list-row-min-height, 1.333rem));
    height: var(--map-list-poi-circle-size, var(--map-list-row-min-height, 1.333rem));
    min-height: var(--map-list-poi-circle-size, var(--map-list-row-min-height, 1.333rem));
    max-height: var(--map-list-poi-circle-size, var(--map-list-row-min-height, 1.333rem));
    margin: 0;
    padding: 0;
    border-radius: 50%;
    aspect-ratio: 1;
    font-size: calc(var(--map-list-poi-circle-size, var(--map-list-row-min-height, 1.333rem)) * var(--map-list-poi-circle-font-scale, 0.58));
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
}

.map-playback-list-item--poi.map-playback-list-item--code-circle.map-playback-list-item--code-two-digit {
    font-size: calc(var(--map-list-poi-circle-size, var(--map-list-row-min-height, 1.333rem)) * var(--map-list-poi-circle-font-scale-two-digit, 0.5));
}

.map-playback-list-item--poi.map-playback-list-item--code-circle .map-playback-list-item-label {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
    line-height: 1;
}

.map-playback-list-item--poi.is-selected,
.map-playback-list-item--poi.map-playback-list-item--has-code.is-selected {
    border-width: 1px;
    border-color: #fff;
    background: var(--map-poi-selected-color, #4fc3f7);
    color: var(--map-poi-selected-text-color, #fff);
}

.map-playback-list-footer {
    flex: 0 0 auto;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr);
    align-items: stretch;
    gap: calc(0.45rem * var(--map-list-footer-chrome-scale, 1));
    margin: 0 0.65rem 0.75rem;
    padding: calc(0.7rem * var(--map-list-footer-chrome-scale, 1)) calc(0.65rem * var(--map-list-footer-chrome-scale, 1));
    min-height: calc(3.5rem * var(--map-list-footer-chrome-scale, 1));
    border: 1px solid var(--map-list-separator, #31574d);
    border-radius: 0.45rem;
    background: var(--map-list-group-bg, #143229);
    box-sizing: border-box;
}

.map-playback-footer-home {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: calc(0.35rem * var(--map-list-footer-chrome-scale, 1));
    width: 100%;
    min-height: calc(2.85rem * var(--map-list-footer-chrome-scale, 1));
    height: auto;
    margin: 0;
    padding: calc(0.55rem * var(--map-list-footer-chrome-scale, 1)) calc(0.65rem * var(--map-list-footer-chrome-scale, 1));
    border: 1px solid var(--map-cta-border, #35a2c1);
    border-radius: calc(0.375rem * var(--map-list-footer-chrome-scale, 1));
    background: var(--map-cta-bg, #47c6f9);
    color: var(--map-cta-text, #000);
    font-size: calc(0.9rem * var(--map-list-footer-chrome-scale, 1));
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
    opacity: 1;
}

.map-playback-footer-home .map-playback-list-item-home-icon {
    flex: 0 0 auto;
    width: 1.85em;
    height: 1.85em;
    font-size: 1.05em;
}

.map-playback-footer-home.is-selected {
    box-shadow: inset 0 0 0 2px var(--map-cta-border, #16414c);
}

.map-playback-footer-home-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
    line-height: 1.15;
    text-align: left;
    white-space: normal;
}

.map-playback-list-footer-selection {
    display: flex;
    align-items: center;
    gap: calc(0.4rem * var(--map-list-footer-chrome-scale, 1));
    min-width: 0;
    padding: calc(0.2rem * var(--map-list-footer-chrome-scale, 1)) calc(0.15rem * var(--map-list-footer-chrome-scale, 1));
    color: var(--map-list-text, #f5f7f6);
    font-size: calc(0.88rem * var(--map-list-footer-chrome-scale, 1));
    line-height: 1.3;
}

.map-playback-list-footer-selection-icon {
    flex: 0 0 auto;
    font-size: 1.2em;
    line-height: 1;
}

.map-playback-list-footer-selection-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.map-route-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--map-cta-border, #35a2c1);
    border-radius: 0.375rem;
    background: var(--map-cta-bg, #47c6f9);
    color: var(--map-cta-text, #000);
    font-size: clamp(0.78rem, 1.45vw, 0.92rem);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
}

.map-route-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.map-playback-list-footer .map-playback-navigate {
    width: 100%;
    min-height: calc(2.85rem * var(--map-list-footer-chrome-scale, 1));
    height: auto;
    padding: calc(0.55rem * var(--map-list-footer-chrome-scale, 1)) calc(0.45rem * var(--map-list-footer-chrome-scale, 1));
    font-size: calc(0.85rem * var(--map-list-footer-chrome-scale, 1));
    line-height: 1.15;
    overflow-wrap: anywhere;
    hyphens: auto;
    text-align: center;
    white-space: normal;
}

.map-playback-list-footer .map-route-button .bi {
    font-size: 1.15em;
}

.map-preview-home-panel {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    z-index: 5;
    max-width: min(18rem, 90%);
    padding: 0.65rem 0.75rem;
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 0.8125rem;
}

.map-preview-home-panel-title {
    margin: 0 0 0.25rem;
    font-weight: 600;
    font-size: 0.875rem;
}

.map-preview-home-panel-hint {
    margin: 0 0 0.5rem;
    opacity: 0.85;
    font-size: 0.75rem;
}

.map-preview-home-panel-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
}

.map-preview-home-panel .map-anchor-list {
    max-height: 8rem;
    margin-top: 0.35rem;
}

.map-preview-home-panel .map-anchor-list-item {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.map-preview-home-panel .map-anchor-list-item.is-selected {
    background: rgba(255, 193, 7, 0.22);
    border-color: rgba(255, 193, 7, 0.65);
}

.map-popup-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(0, 0, 0, 0.55);
}

.map-popup {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(92%, 42rem);
    max-height: 88%;
    overflow: hidden;
    border-radius: 0.65rem;
    background: #fff;
    color: #111;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.35);
}

.map-playback-plan .map-popup--has-slide {
    width: 86%;
    height: 86%;
    max-width: none;
    max-height: none;
}

.map-popup-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 50;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.map-popup-close i {
    font-size: 1.25rem;
    line-height: 1;
}

.map-popup:not(.map-popup--has-slide) .map-popup-close {
    border-color: rgba(0, 0, 0, 0.18);
    background: rgba(0, 0, 0, 0.06);
    color: #111;
    box-shadow: none;
}

.map-popup--has-slide .map-popup-close {
    border-color: rgba(0, 0, 0, 0.45);
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.map-popup--has-slide .map-popup-close i {
    color: #fff;
}

.map-popup-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.map-popup--has-slide {
    background: #000;
    color: #fff;
}

.map-popup--has-slide .map-popup-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.map-popup-slide-host {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    background: #000;
}

.map-popup-slide-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    padding: 0.45rem 0.5rem 0.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.map-popup-slide-footer .map-popup-navigate {
    pointer-events: auto;
    width: calc(100% - 1rem);
    margin: 0 0.5rem 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.map-popup-slide-host .slide-layer--popup {
    position: absolute;
    inset: 0;
}

.map-popup-slide-host .slide-layer--popup > img,
.map-popup-slide-host .slide-layer--popup > video {
    object-fit: contain;
}

.map-popup-slide-host .slide-article {
    inset: 3%;
    font-size: clamp(0.95rem, 2.2vw, 1.35rem);
}

.map-popup .map-route-button {
    min-height: 2.85rem;
    padding: 0.55rem 0.45rem;
    font-size: clamp(0.78rem, 1.45vw, 0.92rem);
    line-height: 1.15;
    white-space: normal;
    text-align: center;
}

.map-popup-navigate {
    flex: 0 0 auto;
    margin: 0.65rem;
}

.map-popup .map-route-button .bi {
    font-size: 1.15em;
}

.popover.map-marker-popover {
    --bs-popover-box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.2), 0 0.15rem 0.4rem rgba(0, 0, 0, 0.12);
}

.map-marker-popover-title {
    margin: 0;
    font-size: calc(1.05rem * var(--map-marker-popover-font-scale, 1) * var(--map-marker-popover-title-font-scale, 1));
    line-height: 1.35;
    font-weight: 600;
}