/* The map kit's look (wwwroot/js/map/map.js): a map in a box, in the aprsthursday look. Every
   rule of a map's style is here; a page gives the box a class and never a style of its own.
   The colours and the type are site.css's own variables, so this file comes after site.css.

   A page writes one element and the kit fills it:

       <div class="map" data-map="flat" ...></div>          a map as tall as most of a phone's screen
       <div class="map small" data-map="small" ...></div>   240 pixels: a station's page, a form
       <div class="map stage" ...></div>                    fills a parent that has a size and position

   On a phone the page still scrolls with one finger on a map (two fingers move the map), the
   map is never the whole screen unless the reader asks for full screen, and everything on it
   that a finger presses is 44 pixels. */

.map {
    position: relative;
    height: clamp(320px, 56vh, 620px);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden;
    isolation: isolate;
    /* The sky, for the globe to sit in (--sky in site.css: space in the dark look, daylight in
       the light one). A flat map covers it. In the dark the kit lays its stars over this. */
    background: var(--sky), var(--bg);
}
.map.small { height: 240px; }
.map.tall { height: clamp(360px, 70vh, 760px); }
/* A flat map is never taller than it is wide. On a flat map the world is as tall as it is
   wide, and MapLibre never shows less than a box full of it from top to bottom: in a taller
   box (a phone held upright) a net with stations on every continent could not be seen
   whole, only its middle. So a flat map is a square on a phone and the usual box on a desk.
   The kit lets it go out to where the world is as wide as the box (map.js, lowestZoom).
   The width is said outright: with a width left to itself, the limit on the height would
   be handed on through the square and the box would be narrowed to it on a desk. */
.map[data-map="flat"]:not(.map-globe):not(.small):not(.tall):not(.stage):not([data-state="empty"]):not([data-state="missing"]),
.map.map-flat:not(.small):not(.tall):not(.stage):not(.picking):not([data-state="empty"]):not([data-state="missing"]) { width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: clamp(320px, 56vh, 620px); }
.map.stage { position: absolute; inset: 0; height: auto; border: 0; border-radius: 0; }
/* A map that is a card's whole body: the card gives the frame. */
.card.map-card { padding: 0; overflow: hidden; }
.card.map-card > .map { border: 0; border-radius: 0; }

.map-canvas { position: absolute; inset: 0; }
.map .maplibregl-canvas { outline: none; }
.map .maplibregl-map { font: inherit; }
/* The sun, round a globe in the light look (map.js puts both pieces in, sizes them to the globe
   and moves them as it turns). .map-sun lies under the map's picture, so the globe covers it;
   .map-glint lies over the picture and is the globe's own outline, which keeps the shine
   inside it on the globe. In the dark look both colours are none. */
.map .map-sun, .map .map-glint { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.map .map-sun { background-image: var(--sun); }
.map .map-glint { overflow: hidden; }
.map .map-glint i { position: absolute; left: 0; top: 0; border-radius: 50%; background-image: var(--glint); }

/* One plain line in the box: while the map loads, when it cannot be shown, and when no station
   has a position to draw. With no map to hold it open the box is only as tall as its words. */
.map-note { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; margin: 0; padding: 20px 16px; text-align: center; color: var(--muted); pointer-events: none; }
.map-note[hidden] { display: none; }
.map[data-state="missing"], .map[data-state="empty"] { height: auto; background: var(--panel); }
.map[data-state="missing"] .map-note, .map[data-state="empty"] .map-note { position: static; display: block; padding: 28px 16px; }
.map[data-state="missing"] .map-canvas, .map[data-state="empty"] .map-canvas { display: none; }
.map[data-state="missing"] > :not(.map-note), .map[data-state="empty"] > :not(.map-note) { display: none; }

/* The map's own buttons, top right: zoom, full screen, globe or flat, turn, my location, north. */
.map .maplibregl-ctrl-top-right { top: 2px; right: 2px; }
.map .maplibregl-ctrl-group { background: var(--panel-solid); border: 1px solid var(--line-strong); box-shadow: 0 6px 20px rgba(0, 0, 0, calc(0.4 * var(--shade))); }
.map .maplibregl-ctrl-group button { background-color: transparent; }
.map .maplibregl-ctrl-group button + button { border-top: 1px solid var(--line); }
.map .maplibregl-ctrl-group button:focus-visible { box-shadow: 0 0 0 3px var(--adm-ring); }
.map .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(calc(0.85 * var(--invert))); }
.map .maplibregl-ctrl-group:not(:empty) { box-shadow: 0 6px 20px rgba(0, 0, 0, calc(0.4 * var(--shade))); }
.map-btns { position: relative; overflow: visible; }
.map-btns button { display: grid; place-items: center; padding: 0; color: var(--text); }
.map-btns svg { width: 16px; height: 16px; color: var(--text); }
.map-btns button[aria-pressed="true"] svg { color: var(--amber); }
.map-btns .ic-alt { display: none; }
.map-btns button[aria-pressed="true"] .ic-main, .map-btns button[data-on="1"] .ic-main { display: none; }
.map-btns button[aria-pressed="true"] .ic-alt, .map-btns button[data-on="1"] .ic-alt { display: block; }
.map-btns[hidden] { display: none; }
.map-btns .needle { transition: transform 0.2s ease; }
.map-btns .needle .pin { fill: var(--panel-solid); }

/* The OpenStreetMap credit lives on the map, as the licence asks: MapLibre's small (i), which
   opens on a tap, in the page's colours. */
.map .maplibregl-ctrl-attrib { background: rgba(var(--panel-rgb), 0.9); border-radius: 8px; font-size: 11px; }
.map .maplibregl-ctrl-attrib, .map .maplibregl-ctrl-attrib-inner, .map .maplibregl-ctrl-attrib a { color: var(--muted); }
.map .maplibregl-ctrl-attrib a:hover { color: var(--text); }
.map .maplibregl-ctrl-attrib-button { filter: invert(calc(0.8 * var(--invert))); }

/* What a tap on a station opens: a small card at the station, never a window over the page. */
.map .maplibregl-popup { z-index: 3; }
.map .maplibregl-popup-content { background: var(--panel-solid); color: var(--text); border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 34px 10px 12px; font: 13px/1.4 var(--font); box-shadow: 0 10px 30px rgba(0, 0, 0, calc(0.5 * var(--shade))); overflow-wrap: anywhere; }
.map .maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .map .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, .map .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--panel-solid); }
.map .maplibregl-popup-anchor-top .maplibregl-popup-tip, .map .maplibregl-popup-anchor-top-left .maplibregl-popup-tip, .map .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--panel-solid); }
.map .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--panel-solid); }
.map .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--panel-solid); }
.map .maplibregl-popup-close-button { display: grid; place-items: center; width: 30px; height: 30px; color: var(--muted); font-size: 18px; line-height: 1; border-radius: 0 9px 0 8px; }
.map .maplibregl-popup-close-button:hover { color: var(--text); background: rgba(var(--tint), 0.06); }
.map-pop .call { font-family: var(--mono); font-weight: 600; font-size: 14px; }
.map-pop .muted { color: var(--muted); }
.map-pop .said { margin-top: 2px; }
.map-pop a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; }
.map-pop .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

/* Which colour is which net, when a map shows more than one. Bottom left, out of the way of
   the credit. */
.map-legend { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 7px 10px; max-width: min(60%, 260px); list-style: none; border-radius: 9px; border: 1px solid var(--line-strong); background: rgba(var(--panel-rgb), 0.88); color: var(--text); font-size: 12.5px; line-height: 1.35; }
.map-legend li { display: flex; align-items: center; gap: 7px; min-width: 0; }
.map-legend li span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-legend .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(var(--panel-rgb), 0.9); }
.map-legend[hidden] { display: none; }

/* A line the map says for a moment: "Your location was refused". */
.map-toast { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 4; max-width: calc(100% - 120px); padding: 8px 12px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--panel-solid); color: var(--text); font-size: 13px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, calc(0.45 * var(--shade))); }
.map-toast[hidden] { display: none; }

/* The way past the map on a phone: a small button on its lower edge that takes the page down
   to the list. */
.map-cue { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 2; display: none; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(var(--panel-rgb), 0.88); color: var(--text); font: 500 14px/1 var(--font); cursor: pointer; }
.map-cue svg { width: 12px; height: 12px; }
.map-cue[hidden] { display: none; }

/* Full screen on a phone that has none of its own (an iPhone): the box takes the whole window. */
.map.map-fill, .map-fill-stage.map-fill { position: fixed; inset: 0; z-index: 60; width: auto; height: auto; max-height: none; border: 0; border-radius: 0; }
body.map-filled { overflow: hidden; }
/* In full screen there is no page under the map to go down to. */
.map:fullscreen .map-cue, .map.map-fill .map-cue, .map-fill-stage:fullscreen .map-cue, .map-fill-stage.map-fill .map-cue { display: none; }
.map:fullscreen, .map-fill-stage:fullscreen { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; background-color: var(--bg); }

/* Picking a place and a distance (the set-up form's "near a place"): two buttons that say what
   the next tap sets, and a line that says what to do. */
.map-modes { position: absolute; left: 8px; top: 8px; z-index: 2; display: inline-flex; padding: 2px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--panel-solid); box-shadow: 0 6px 20px rgba(0, 0, 0, calc(0.4 * var(--shade))); }
.map-modes button { min-height: var(--tap); padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 14px; cursor: pointer; white-space: nowrap; }
.map-modes button[aria-pressed="true"] { background: rgba(var(--amber-rgb), 0.14); color: var(--text); }
.map-modes button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--adm-ring); }
.map-hint { margin: 0; padding: 8px 12px; min-height: 3.2em; background: var(--panel-solid); border-top: 1px solid var(--line); color: var(--text); font-size: 13.5px; line-height: 1.4; }
.map-hint[hidden] { display: none; }
/* The picker's box is the map and, under it, the line that says what a tap will do. */
.map.picking { height: auto; }
.map.picking .map-canvas { position: relative; inset: auto; height: 240px; }
.map.picking .map-note { bottom: auto; height: 240px; }
.map.picking:not([data-state="ready"]) .map-modes { display: none; }
.map.picking .maplibregl-canvas { cursor: crosshair; }

/* The two things that are dragged on the picker: the centre of the area, and a handle on its
   edge. Each is a button a finger wide with a dot in its middle. One finger on either drags
   it and never scrolls the page (touch-action); one finger anywhere else on the map still
   does. Both are over the map's own buttons, so that either can always be taken hold of, and
   the handle is never drawn nearer the centre than its own width (gripPlace in map.js), so
   the two do not lie on one another. */
.map .map-grip { position: absolute; top: 0; left: 0; z-index: 3; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.map .map-grip-edge { z-index: 4; }
.map .map-grip::before { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; box-sizing: border-box; border-radius: 50%; background: var(--amber-fill); border: 2px solid #07090f; box-shadow: 0 0 0 2px rgba(var(--amber-rgb), 0.35); transition: box-shadow 0.12s; }
.map .map-grip-edge::before { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: #07090f; border-color: var(--amber-fill); }
/* The handle standing off an area too small on the screen to carry it on its edge. */
.map .map-grip-edge.off::before { border-style: dashed; }
.map .map-grip:focus { outline: none; }
.map .map-grip.held { cursor: grabbing; }
.map .map-grip.held::before, .map .map-grip:focus-visible::before { box-shadow: 0 0 0 6px rgba(var(--amber-rgb), 0.45); }
.map .map-grip[hidden] { display: none; }

/* A station's APRS symbol beside its name in a list: <span class="sym" data-sym="/-"></span>.
   The kit cuts it from the same sheets the map draws from. */
.sym { display: inline-block; flex: none; width: 20px; height: 20px; margin: -3px 6px -3px 0; vertical-align: middle; background-repeat: no-repeat; }
.sym:not([data-drawn]) { display: none; }

/* A row that flies the map to its station when tapped (data-map-fly). */
[data-map-fly] { cursor: pointer; }

/* ── A wide screen pressed with a finger: a phone held sideways, a tablet ── */
/* The map's own buttons are as large there as on a phone held upright. They were 29 pixels. */
@media (min-width: 761px) and (pointer: coarse) {
    .map .maplibregl-ctrl-group button { width: 44px; height: 44px; }
    .map-btns svg { width: 20px; height: 20px; }
    .map .maplibregl-ctrl-attrib-button { width: 44px; height: 44px; border-radius: 22px; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 24px 24px; }
    .map .maplibregl-ctrl-attrib.maplibregl-compact { min-height: 44px; min-width: 44px; border-radius: 22px; }
    .map .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) { padding: 0; }
    .map .maplibregl-ctrl-attrib.maplibregl-compact-show { padding: 12px 46px 12px 14px; }
    .map .maplibregl-popup-close-button { width: 44px; height: 44px; font-size: 22px; }
    .map .maplibregl-popup-content { padding-right: 46px; }
}

/* ── A phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    /* Everything a finger presses on a map is 44 pixels. */
    .map .maplibregl-ctrl-group button { width: 44px; height: 44px; }
    .map-btns svg { width: 20px; height: 20px; }
    .map .maplibregl-ctrl-attrib.maplibregl-compact { min-height: 44px; min-width: 44px; border-radius: 22px; margin: 0 6px 6px 0; }
    .map .maplibregl-ctrl-attrib-button { width: 44px; height: 44px; border-radius: 22px; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 24px 24px; }
    .map .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) { padding: 0; }
    .map .maplibregl-ctrl-attrib.maplibregl-compact-show { padding: 12px 46px 12px 14px; }
    /* The map's own buttons lie along its upper edge, out of the middle of the picture; the
       zoom buttons stay under them at the right. */
    .map .maplibregl-ctrl-top-right { display: flex; flex-direction: column; align-items: flex-end; }
    .map .maplibregl-ctrl-top-right .map-btns { display: flex; flex-direction: row; }
    .map .maplibregl-ctrl-top-right .map-btns[hidden] { display: none; }
    .map .maplibregl-ctrl-top-right .map-btns button + button { border-top: 0; border-left: 1px solid var(--line); }
    .map .maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 6px 6px 0 0; }
    .map .maplibregl-popup-close-button { width: 44px; height: 44px; font-size: 22px; }
    .map .maplibregl-popup-content { padding-right: 46px; font-size: 14px; }
    .map-pop a { min-height: 44px; }
    .map-cue { display: inline-flex; }
    /* The legend gives the lower edge to the way past the map. */
    .map.has-cue .map-legend { bottom: 60px; }
    /* Under the row of buttons, not behind it. */
    .map-toast { top: 60px; max-width: calc(100% - 24px); }
}

/* Somebody who asked their device for less motion gets a map that does not turn by itself and
   draws no rings; the kit sees to both. Nothing here moves without being asked. */
@media (prefers-reduced-motion: reduce) {
    .map-btns .needle { transition: none; }
}