/* The map view: full screen over the player, under the bottom nav, the
   same way the minutes and parks lists sit (see body.in-view in player.css) */
#map-view {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background-color: #78b800;
}
#map-view[hidden] {
    display: none;
}
#map {
    position: absolute;
    inset: 0;
}

/* a park on the map: a circle holding its poster (or its minute) */
.minute-marker {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background-color: #78b800;
    border: 1px solid #000;
    border-radius: 50%;
    font-family: 'Times New Roman', Times, serif;
    font-size: 13px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #000;
    cursor: pointer;
    z-index: 1;
}
/* a park with a poster shows it in the circle instead of the minute (the
   minute stays in the markup, out of sight, for screen readers) */
.minute-marker.has-poster {
    background-image: var(--poster);
    background-size: cover;
    background-position: center;
    color: transparent;
}
/* the park you came from on the player: outlined in the playhead's blue,
   in front of the rest */
.minute-marker.is-here {
    z-index: 3;
    border: 2px solid #1565ff;
}
/* the park filmed at this very minute: a yellow ring (the timeline's
   yellow "now" line), fading to black and back, in front of every other circle */
.minute-marker.is-now {
    z-index: 3;
    border: 2px solid #ffd400;
    animation: now-fade 1.6s ease-in-out infinite alternate;
}
/* just the ring easing between black and yellow, nothing moving */
@keyframes now-fade {
    from { border-color: #000; }
    to   { border-color: #ffd400; }
}
@media (prefers-reduced-motion: reduce) {
    .minute-marker.is-now { animation: none; }
}

/* the one you're pointing at comes up above its neighbours (above the live
   one too) and turns into its minute, the circle growing enough to hold it */
.minute-marker:hover {
    z-index: 4;
    width: 40px;
    height: 40px;
    background-image: none;
    color: #000;
}

/* place names: small, a little faded Times, under the circles and never in the way of a click */
.place-name {
    z-index: 0;
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    line-height: 1;
    color: rgba(0, 0, 0, .75);
    white-space: nowrap;
    pointer-events: none;
}
.place-name.is-country {
    font-size: 11px;
    color: rgba(0, 0, 0, .75);
}

/* hovering a circle: the park(s) and who filmed them, in a box just below */
.marker-info {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 200px;
    padding: 3px 7px;
    background: #78b800;
    border: 1px solid #000;
    font-size: 13px;
    line-height: 1.2;
    color: #000;
    text-align: center;
    pointer-events: none;
}
.marker-info-name,
.marker-info-by {
    display: block;
}
.marker-info-by {
    font-size: 12px;
}
.minute-marker:hover .marker-info {
    display: block;
}

/* zoom + and -: two square green boxes with a thin black border, a little
   apart. The group itself is just a transparent column holding them. */
.maplibregl-ctrl-top-right {
    top: 12px;
    right: 12px;
}
.maplibregl-ctrl-group {
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: transparent;
    border-radius: 0 !important;
}
.maplibregl-ctrl-group:not(:empty) {
    box-shadow: none;
}
.maplibregl-ctrl-group button,
.maplibregl-ctrl-group button:first-child,
.maplibregl-ctrl-group button:last-child {
    width: 28px;
    height: 28px;
    background: #78b800;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
}
.maplibregl-ctrl-group button:not(:disabled):hover {
    background: #6aa300;
}
.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 8v12M8 14h12' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M8 14h12' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
}
/* the map credit: always written out, in the corner across from the nav */
.maplibregl-ctrl-bottom-right {
    right: 12px;
    bottom: 12px;
}
.maplibregl-ctrl-bottom-right .maplibregl-ctrl {
    margin: 0;
}
/* plain text, no box; doubled class to beat maplibre's own translucent white */
.maplibregl-ctrl.maplibregl-ctrl-attrib {
    padding: 2px 7px;
    white-space: nowrap;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: 'Times New Roman', Times, serif;
    font-size: 12px;
    line-height: 1;
    color: #000;
}
.maplibregl-ctrl-attrib a {
    color: #000;
    text-decoration: none;
}
.maplibregl-ctrl-attrib a:hover {
    text-decoration: underline;
}
.maplibregl-ctrl-attrib-button {
    display: none;
}
@media (max-width: 700px) {
    /* two right-aligned lines in the corner, clear of the stacked nav */
    .maplibregl-ctrl.maplibregl-ctrl-attrib {
        max-width: 200px;
        white-space: normal;
        text-align: right;
        font-size: 11px;
        line-height: 1.25;
    }
}